From 2b3760cd5aeadc1cd2b363945644166191bda64e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 12 Aug 2026 10:52:40 +0200 Subject: [PATCH] fix(multiple): tokens specified in wrong category Fixes that tokens across multiple components were set up in the wrong categories (e.g. base tokens put in the `color` category). Fixes #31502. --- src/material/button/_m2-fab.scss | 14 +++++++------- src/material/expansion/_m2-expansion.scss | 2 +- src/material/expansion/_m3-expansion.scss | 2 +- src/material/list/_m2-list.scss | 10 +++++----- src/material/list/_m3-list.scss | 15 ++++++++------- src/material/sidenav/_m2-sidenav.scss | 2 +- src/material/sidenav/_m3-sidenav.scss | 4 ++-- src/material/slide-toggle/_m2-slide-toggle.scss | 6 +++--- src/material/slide-toggle/_m3-slide-toggle.scss | 2 +- src/material/slider/_m2-slider.scss | 2 +- src/material/slider/_m3-slider.scss | 8 ++++---- src/material/stepper/_m3-stepper.scss | 2 +- src/material/timepicker/_m2-timepicker.scss | 2 +- 13 files changed, 36 insertions(+), 35 deletions(-) diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss index d1bea7db9823..7b429cd7d02b 100644 --- a/src/material/button/_m2-fab.scss +++ b/src/material/button/_m2-fab.scss @@ -25,12 +25,17 @@ @return ( base: ( - fab-container-elevation-shadow: elevation.get-box-shadow(6), fab-container-shape: 50%, fab-touch-target-size: $touch-target-size, - fab-extended-container-elevation-shadow: elevation.get-box-shadow(6), fab-extended-container-height: 48px, fab-extended-container-shape: 24px, + fab-small-container-shape: 50%, + fab-small-touch-target-size: $touch-target-size, + ), + color: ( + fab-container-color: map.get($system, surface), + fab-container-elevation-shadow: elevation.get-box-shadow(6), + fab-extended-container-elevation-shadow: elevation.get-box-shadow(6), fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8), fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8), fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12), @@ -38,14 +43,9 @@ fab-hover-container-elevation-shadow: elevation.get-box-shadow(8), fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12), fab-small-container-elevation-shadow: elevation.get-box-shadow(6), - fab-small-container-shape: 50%, - fab-small-touch-target-size: $touch-target-size, fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8), fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8), fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12), - ), - color: ( - fab-container-color: map.get($system, surface), fab-disabled-state-container-color: $disabled-container, fab-disabled-state-foreground-color: $disabled, fab-disabled-state-layer-color: map.get($system, on-surface-variant), diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss index 4224d7ddc353..ce6bc6bf34c7 100644 --- a/src/material/expansion/_m2-expansion.scss +++ b/src/material/expansion/_m2-expansion.scss @@ -11,11 +11,11 @@ @return ( base: ( expansion-container-shape: 4px, - expansion-container-elevation-shadow: elevation.get-box-shadow(2), expansion-legacy-header-indicator-display: inline-block, expansion-header-indicator-display: none, ), color: ( + expansion-container-elevation-shadow: elevation.get-box-shadow(2), expansion-container-background-color: map.get($system, surface), expansion-container-text-color: map.get($system, on-surface), expansion-actions-divider-color: map.get($system, outline), diff --git a/src/material/expansion/_m3-expansion.scss b/src/material/expansion/_m3-expansion.scss index 4ae185f87754..d23838252455 100644 --- a/src/material/expansion/_m3-expansion.scss +++ b/src/material/expansion/_m3-expansion.scss @@ -17,9 +17,9 @@ $prefix: (mat, expansion); expansion-container-shape: 12px, expansion-header-indicator-display: inline-block, expansion-legacy-header-indicator-display: none, - expansion-container-elevation-shadow: elevation.get-box-shadow(2), ), color: ( + expansion-container-elevation-shadow: elevation.get-box-shadow(2), expansion-actions-divider-color: map.get($system, outline), expansion-container-background-color: map.get($system, surface), expansion-container-text-color: map.get($system, on-surface), diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss index 23cf35f212ce..d037420c6aba 100644 --- a/src/material/list/_m2-list.scss +++ b/src/material/list/_m2-list.scss @@ -8,23 +8,23 @@ @return ( base: ( - list-active-indicator-color: transparent, list-active-indicator-shape: 4px, list-list-item-container-shape: 0, list-list-item-leading-avatar-shape: 50%, - list-list-item-container-color: transparent, - list-list-item-selected-container-color: transparent, - list-list-item-leading-avatar-color: transparent, list-list-item-leading-icon-size: 24px, list-list-item-leading-avatar-size: 40px, list-list-item-trailing-icon-size: 24px, - list-list-item-disabled-state-layer-color: transparent, list-list-item-disabled-state-layer-opacity: 0, list-list-item-disabled-label-text-opacity: 0.38, list-list-item-disabled-leading-icon-opacity: 0.38, list-list-item-disabled-trailing-icon-opacity: 0.38, ), color: ( + list-active-indicator-color: transparent, + list-list-item-container-color: transparent, + list-list-item-selected-container-color: transparent, + list-list-item-leading-avatar-color: transparent, + list-list-item-disabled-state-layer-color: transparent, list-list-item-label-text-color: map.get($system, on-surface), list-list-item-supporting-text-color: map.get($system, on-surface-variant), list-list-item-leading-icon-color: map.get($system, on-surface-variant), diff --git a/src/material/list/_m3-list.scss b/src/material/list/_m3-list.scss index 68deaf0eb7c1..85567cbecd56 100644 --- a/src/material/list/_m3-list.scss +++ b/src/material/list/_m3-list.scss @@ -18,12 +18,17 @@ // Match spec, which has list-item-leading-icon-size of 24px. // Current version of tokens (0_161) has 18px. @return ( - base: (), + base: ( + list-active-indicator-shape: map.get($system, corner-full), + list-list-item-container-shape: map.get($system, corner-none), + list-list-item-leading-avatar-shape: map.get($system, corner-full), + list-list-item-leading-avatar-size: 40px, + list-list-item-leading-icon-size: 24px, + list-list-item-trailing-icon-size: 24px, + ), color: ( list-active-indicator-color: map.get($system, secondary-container), - list-active-indicator-shape: map.get($system, corner-full), list-list-item-container-color: transparent, - list-list-item-container-shape: map.get($system, corner-none), list-list-item-disabled-label-text-color: map.get($system, on-surface), list-list-item-disabled-label-text-opacity: 0.3, list-list-item-disabled-leading-icon-color: map.get($system, on-surface), @@ -40,14 +45,10 @@ list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), list-list-item-label-text-color: map.get($system, on-surface), list-list-item-leading-avatar-color: map.get($system, primary-container), - list-list-item-leading-avatar-shape: map.get($system, corner-full), - list-list-item-leading-avatar-size: 40px, list-list-item-leading-icon-color: map.get($system, on-surface-variant), - list-list-item-leading-icon-size: 24px, list-list-item-selected-trailing-icon-color: map.get($system, primary), list-list-item-supporting-text-color: map.get($system, on-surface-variant), list-list-item-trailing-icon-color: map.get($system, on-surface-variant), - list-list-item-trailing-icon-size: 24px, list-list-item-trailing-supporting-text-color: map.get($system, on-surface-variant), list-list-item-selected-container-color: null, list-list-item-hover-leading-icon-color: null, diff --git a/src/material/sidenav/_m2-sidenav.scss b/src/material/sidenav/_m2-sidenav.scss index 8c5f4a50819d..d52efc4749ab 100644 --- a/src/material/sidenav/_m2-sidenav.scss +++ b/src/material/sidenav/_m2-sidenav.scss @@ -31,10 +31,10 @@ @return ( base: ( sidenav-container-shape: 0, - sidenav-container-elevation-shadow: elevation.get-box-shadow(16), sidenav-container-width: auto, ), color: ( + sidenav-container-elevation-shadow: elevation.get-box-shadow(16), sidenav-container-divider-color: map.get($system, outline), sidenav-container-background-color: map.get($system, surface), sidenav-container-text-color: map.get($system, on-surface), diff --git a/src/material/sidenav/_m3-sidenav.scss b/src/material/sidenav/_m3-sidenav.scss index e27a73b9626a..7bc2219d9204 100644 --- a/src/material/sidenav/_m3-sidenav.scss +++ b/src/material/sidenav/_m3-sidenav.scss @@ -9,11 +9,11 @@ @return ( base: ( sidenav-container-shape: map.get($system, corner-large), - sidenav-container-elevation-shadow: none, sidenav-container-width: 360px, - sidenav-container-divider-color: transparent, ), color: ( + sidenav-container-elevation-shadow: none, + sidenav-container-divider-color: transparent, sidenav-container-background-color: map.get($system, surface), sidenav-container-text-color: map.get($system, on-surface-variant), sidenav-content-background-color: map.get($system, background), diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss index 0ff3c251d305..a81c3a5fa9b2 100644 --- a/src/material/slide-toggle/_m2-slide-toggle.scss +++ b/src/material/slide-toggle/_m2-slide-toggle.scss @@ -28,7 +28,6 @@ slide-toggle-disabled-track-opacity: 0.12, slide-toggle-disabled-unselected-handle-opacity: 0.38, slide-toggle-disabled-unselected-icon-opacity: 0.38, - slide-toggle-disabled-unselected-track-outline-color: transparent, slide-toggle-disabled-unselected-track-outline-width: 1px, slide-toggle-handle-height: 20px, slide-toggle-handle-shape: 10px, @@ -44,11 +43,9 @@ slide-toggle-selected-pressed-handle-horizontal-margin: 0, slide-toggle-selected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), - slide-toggle-selected-track-outline-color: transparent, slide-toggle-selected-track-outline-width: 1px, slide-toggle-selected-with-icon-handle-horizontal-margin: 0, slide-toggle-track-height: 14px, - slide-toggle-track-outline-color: transparent, slide-toggle-track-outline-width: 1px, slide-toggle-track-shape: 7px, slide-toggle-track-width: 36px, @@ -68,6 +65,9 @@ slide-toggle-touch-target-size: 48px, ), color: map.merge(private-get-color-palette-color-tokens($theme, primary), ( + slide-toggle-disabled-unselected-track-outline-color: transparent, + slide-toggle-selected-track-outline-color: transparent, + slide-toggle-track-outline-color: transparent, slide-toggle-disabled-label-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%), slide-toggle-disabled-handle-elevation-shadow: elevation.get-box-shadow(0), diff --git a/src/material/slide-toggle/_m3-slide-toggle.scss b/src/material/slide-toggle/_m3-slide-toggle.scss index 82133ebc26a3..df3292cb7dbe 100644 --- a/src/material/slide-toggle/_m3-slide-toggle.scss +++ b/src/material/slide-toggle/_m3-slide-toggle.scss @@ -42,7 +42,6 @@ slide-toggle-selected-handle-size: 24px, slide-toggle-selected-icon-size: 16px, slide-toggle-selected-pressed-handle-horizontal-margin: 0 22px, - slide-toggle-selected-track-outline-color: transparent, slide-toggle-selected-track-outline-width: 2px, slide-toggle-selected-with-icon-handle-horizontal-margin: 0 24px, slide-toggle-state-layer-size: 40px, @@ -63,6 +62,7 @@ slide-toggle-touch-target-size: 48px, ), color: ( + slide-toggle-selected-track-outline-color: transparent, slide-toggle-disabled-label-text-color: map.get($system, on-surface), slide-toggle-disabled-selected-handle-color: map.get($system, surface), slide-toggle-disabled-selected-icon-color: map.get($system, on-surface), diff --git a/src/material/slider/_m2-slider.scss b/src/material/slider/_m2-slider.scss index c378cec27be8..acaa27667ccb 100644 --- a/src/material/slider/_m2-slider.scss +++ b/src/material/slider/_m2-slider.scss @@ -10,7 +10,6 @@ base: ( slider-active-track-height: 6px, slider-active-track-shape: 9999px, - slider-handle-elevation: elevation.get-box-shadow(1), slider-handle-height: 20px, slider-handle-shape: 50%, slider-handle-width: 20px, @@ -31,6 +30,7 @@ slider-value-indicator-transform-origin: bottom, ), color: map.merge(private-get-color-palette-color-tokens($theme, primary), ( + slider-handle-elevation: elevation.get-box-shadow(1), slider-disabled-active-track-color: map.get($system, on-surface), slider-disabled-handle-color: map.get($system, on-surface), slider-disabled-inactive-track-color: map.get($system, on-surface), diff --git a/src/material/slider/_m3-slider.scss b/src/material/slider/_m3-slider.scss index b6b882310a98..c3e4908fb560 100644 --- a/src/material/slider/_m3-slider.scss +++ b/src/material/slider/_m3-slider.scss @@ -15,6 +15,10 @@ @return ( base: ( + slider-active-track-shape: map.get($system, corner-full), + slider-handle-shape: map.get($system, corner-full), + slider-inactive-track-shape: map.get($system, corner-full), + slider-with-tick-marks-container-shape: map.get($system, corner-full), slider-value-indicator-opacity: 1, slider-value-indicator-padding: 0, slider-value-indicator-width: $indicator-size, @@ -35,7 +39,6 @@ ), color: ( slider-active-track-color: map.get($system, primary), - slider-active-track-shape: map.get($system, corner-full), slider-disabled-active-track-color: map.get($system, on-surface), slider-disabled-handle-color: map.get($system, on-surface), slider-disabled-inactive-track-color: map.get($system, on-surface), @@ -43,17 +46,14 @@ slider-focus-state-layer-color: m3-utils.color-with-opacity(map.get($system, primary), 20%), slider-handle-color: map.get($system, primary), slider-handle-elevation: elevation.get-box-shadow(map.get($system, level1)), - slider-handle-shape: map.get($system, corner-full), slider-hover-handle-color: map.get($system, primary), slider-hover-state-layer-color: m3-utils.color-with-opacity(map.get($system, primary), 5%), slider-inactive-track-color: map.get($system, surface-variant), - slider-inactive-track-shape: map.get($system, corner-full), slider-label-container-color: map.get($system, primary), slider-label-label-text-color: map.get($system, on-primary), slider-ripple-color: map.get($system, primary), slider-with-overlap-handle-outline-color: map.get($system, on-primary), slider-with-tick-marks-active-container-color: map.get($system, on-primary), - slider-with-tick-marks-container-shape: map.get($system, corner-full), slider-with-tick-marks-disabled-container-color: map.get($system, on-surface), slider-with-tick-marks-inactive-container-color: map.get($system, on-surface-variant), ), diff --git a/src/material/stepper/_m3-stepper.scss b/src/material/stepper/_m3-stepper.scss index 3fa45be5b7d4..6c3b5433a290 100644 --- a/src/material/stepper/_m3-stepper.scss +++ b/src/material/stepper/_m3-stepper.scss @@ -17,11 +17,11 @@ $prefix: (mat, stepper); @return ( base: ( - stepper-header-error-state-icon-background-color: transparent, stepper-header-focus-state-layer-shape: map.get($system, corner-medium), stepper-header-hover-state-layer-shape: map.get($system, corner-medium), ), color: ( + stepper-header-error-state-icon-background-color: transparent, stepper-container-color: map.get($system, surface), stepper-header-done-state-icon-background-color: map.get($system, primary), stepper-header-done-state-icon-foreground-color: map.get($system, on-primary), diff --git a/src/material/timepicker/_m2-timepicker.scss b/src/material/timepicker/_m2-timepicker.scss index d7da794d6e25..1863caf22f47 100644 --- a/src/material/timepicker/_m2-timepicker.scss +++ b/src/material/timepicker/_m2-timepicker.scss @@ -8,9 +8,9 @@ @return ( base: ( timepicker-container-shape: 4px, - timepicker-container-elevation-shadow: elevation.get-box-shadow(8), ), color: ( + timepicker-container-elevation-shadow: elevation.get-box-shadow(8), timepicker-container-background-color: map.get($system, surface) ), typography: (),