From 418237f6762d9efb32dbe0c1a2711b7d07b0c68d Mon Sep 17 00:00:00 2001 From: Zach Arend Date: Thu, 8 Feb 2024 22:45:56 +0000 Subject: [PATCH] fix(material/list): match leading icon size in M3 to spec Increase size of the leading icon in M3 List to 24px. Match spec, which has list-item-leading-icon-size of 24px. Current version of tokens (0_161) has 18px. Does not affect M2 List. --- .../theming/_m3-tokens.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index ef5f128cea08..ec76d71f462e 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -468,11 +468,17 @@ /// @param {Map} $initial-tokens Map of list tokens currently being generated. /// @return {Map} The given tokens, with the inconsistent values replaced with valid ones. @function _fix-list-tokens($tokens) { - // This does not match the spec, which defines this to be `md.sys.color.surface`. - // However, this interferes with the use case of placing a list on other components. For example, - // the bottom sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the - // list to just display the colors for its background. - @return map.set($tokens, list-item-container-color, transparent); + @return map.merge($tokens, ( + // This does not match the spec, which defines this to be `md.sys.color.surface`. However, this + // interferes with the use case of placing a list on other components. For example, the bottom + // sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the list to + // just display the colors for its background. + list-item-container-color: transparent, + + // Match spec, which has list-item-leading-icon-size of 24px. Current version of tokens (0_161) + // has 18px. + list-item-leading-icon-size: 24px, + )); } /// Generates a set of namespaced tokens for all components.