diff --git a/src/material/autocomplete/_m2-autocomplete.scss b/src/material/autocomplete/_m2-autocomplete.scss index bc5264890e0a..ec45e80e58ac 100644 --- a/src/material/autocomplete/_m2-autocomplete.scss +++ b/src/material/autocomplete/_m2-autocomplete.scss @@ -8,10 +8,10 @@ @return ( base: ( autocomplete-container-shape: 4px, - autocomplete-container-elevation-shadow: elevation.get-box-shadow(8), ), color: ( - autocomplete-background-color: map.get($system, surface) + autocomplete-background-color: map.get($system, surface), + autocomplete-container-elevation-shadow: elevation.get-box-shadow(8), ), typography: (), density: (), diff --git a/src/material/autocomplete/_m3-autocomplete.scss b/src/material/autocomplete/_m3-autocomplete.scss index 4a5272bbf3f8..897fc5e85763 100644 --- a/src/material/autocomplete/_m3-autocomplete.scss +++ b/src/material/autocomplete/_m3-autocomplete.scss @@ -13,10 +13,10 @@ $tokens: ( base: ( autocomplete-container-shape: map.get($system, corner-extra-small), - autocomplete-container-elevation-shadow: elevation.get-box-shadow(2), ), color: ( autocomplete-background-color: map.get($system, surface-container), + autocomplete-container-elevation-shadow: elevation.get-box-shadow(2), ), typography: (), density: (), diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss index 5a792eb543b4..2a16f039a544 100644 --- a/src/material/button/_m2-button.scss +++ b/src/material/button/_m2-button.scss @@ -33,15 +33,10 @@ button-outlined-keep-touch-target: false, button-outlined-outline-width: 1px, button-outlined-touch-target-size: $touch-target-size, - button-protected-container-elevation-shadow: elevation.get-box-shadow(2), button-protected-container-shape: 4px, - button-protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0), - button-protected-focus-container-elevation-shadow: elevation.get-box-shadow(4), button-protected-horizontal-padding: 16px, - button-protected-hover-container-elevation-shadow: elevation.get-box-shadow(4), button-protected-icon-offset: -4px, button-protected-icon-spacing: 8px, - button-protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8), button-protected-touch-target-size: $touch-target-size, button-text-container-shape: 4px, button-text-horizontal-padding: 8px, @@ -79,12 +74,17 @@ map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), button-outlined-state-layer-color: map.get($system, on-surface), button-protected-container-color: map.get($system, surface), + button-protected-container-elevation-shadow: elevation.get-box-shadow(2), button-protected-disabled-container-color: $disabled-container, + button-protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0), button-protected-disabled-label-text-color: $disabled, button-protected-disabled-state-layer-color: map.get($system, on-surface-variant), + button-protected-focus-container-elevation-shadow: elevation.get-box-shadow(4), button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), + button-protected-hover-container-elevation-shadow: elevation.get-box-shadow(4), button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), button-protected-label-text-color: map.get($system, on-surface), + button-protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8), button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), button-protected-ripple-color: m3-utils.color-with-opacity( map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss index d73e6b181720..aff3b321dced 100644 --- a/src/material/card/_m2-card.scss +++ b/src/material/card/_m2-card.scss @@ -14,13 +14,13 @@ ), color: ( card-elevated-container-color: map.get($system, surface), - card-elevated-container-elevation: elevation.get-box-shadow(1), + card-elevated-container-elevation-shadow: elevation.get-box-shadow(1), card-outlined-container-color: map.get($system, surface), - card-outlined-container-elevation: elevation.get-box-shadow(0), + card-outlined-container-elevation-shadow: elevation.get-box-shadow(0), card-outlined-outline-color: map.get($system, outline), card-subtitle-text-color: map.get($system, on-surface-variant), card-filled-container-color: map.get($system, surface), - card-filled-container-elevation: elevation.get-box-shadow(0) + card-filled-container-elevation-shadow: elevation.get-box-shadow(0) ), typography: ( card-title-text-font: map.get($system, title-small-font), diff --git a/src/material/card/_m3-card.scss b/src/material/card/_m3-card.scss index ec943cf682a4..7a0f310a3ef3 100644 --- a/src/material/card/_m3-card.scss +++ b/src/material/card/_m3-card.scss @@ -18,11 +18,11 @@ $prefix: (mat, card); ), color: ( card-elevated-container-color: map.get($system, surface-container-low), - card-elevated-container-elevation: elevation.get-box-shadow(map.get($system, level1)), + card-elevated-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level1)), card-filled-container-color: map.get($system, surface-container-highest), - card-filled-container-elevation: elevation.get-box-shadow(map.get($system, level0)), + card-filled-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level0)), card-outlined-container-color: map.get($system, surface), - card-outlined-container-elevation: elevation.get-box-shadow(map.get($system, level0)), + card-outlined-container-elevation-shadow: elevation.get-box-shadow(map.get($system, level0)), card-outlined-outline-color: map.get($system, outline-variant), card-subtitle-text-color: map.get($system, on-surface), ), diff --git a/src/material/card/card.scss b/src/material/card/card.scss index 70a993310db6..01e538f52064 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -19,7 +19,7 @@ $fallbacks: m3-card.get-tokens(); background-color: token-utils.slot(card-elevated-container-color, $fallbacks); border-color: token-utils.slot(card-elevated-container-color, $fallbacks); border-radius: token-utils.slot(card-elevated-container-shape, $fallbacks); - box-shadow: token-utils.slot(card-elevated-container-elevation, $fallbacks); + box-shadow: token-utils.slot(card-elevated-container-elevation-shadow, $fallbacks); // Transparent card border for high-contrast mode. &::after { @@ -42,7 +42,7 @@ $fallbacks: m3-card.get-tokens(); border-radius: token-utils.slot(card-outlined-container-shape, $fallbacks); border-width: token-utils.slot(card-outlined-outline-width, $fallbacks); border-color: token-utils.slot(card-outlined-outline-color, $fallbacks); - box-shadow: token-utils.slot(card-outlined-container-elevation, $fallbacks); + box-shadow: token-utils.slot(card-outlined-container-elevation-shadow, $fallbacks); // Outlined card already displays border in high-contrast mode. // Overwriting styles set above to remove a duplicate border. @@ -54,7 +54,7 @@ $fallbacks: m3-card.get-tokens(); .mat-mdc-card-filled { background-color: token-utils.slot(card-filled-container-color, $fallbacks); border-radius: token-utils.slot(card-filled-container-shape, $fallbacks); - box-shadow: token-utils.slot(card-filled-container-elevation, $fallbacks); + box-shadow: token-utils.slot(card-filled-container-elevation-shadow, $fallbacks); } .mdc-card__media { diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss index 595b38d9482f..2086dc18a2b8 100644 --- a/src/material/datepicker/_m2-datepicker.scss +++ b/src/material/datepicker/_m2-datepicker.scss @@ -11,10 +11,11 @@ base: ( datepicker-calendar-container-shape: 4px, datepicker-calendar-container-touch-shape: 4px, + ), + color: map.merge(private-get-color-palette-color-tokens($theme, primary), ( datepicker-calendar-container-elevation-shadow: elevation.get-box-shadow(4), datepicker-calendar-container-touch-elevation-shadow: elevation.get-box-shadow(24), - ), - color: private-get-color-palette-color-tokens($theme, primary), + )), typography: ( // TODO(crisbeto): the typography tokens for other components set every typography dimension // of an element (e.g. size, weight, line height, letter spacing). These tokens only set the diff --git a/src/material/datepicker/_m3-datepicker.scss b/src/material/datepicker/_m3-datepicker.scss index 262c93b0f958..954bf645bb10 100644 --- a/src/material/datepicker/_m3-datepicker.scss +++ b/src/material/datepicker/_m3-datepicker.scss @@ -13,15 +13,15 @@ @return ( base: ( - datepicker-calendar-container-elevation-shadow:elevation.get-box-shadow(0), datepicker-calendar-container-shape: map.get($system, corner-large), - datepicker-calendar-container-touch-elevation-shadow:elevation.get-box-shadow(0), datepicker-calendar-container-touch-shape: map.get($system, corner-extra-large), ), color: ( datepicker-calendar-body-label-text-color: map.get($system, on-surface), datepicker-calendar-container-background-color: map.get($system, surface-container-high), + datepicker-calendar-container-elevation-shadow:elevation.get-box-shadow(0), datepicker-calendar-container-text-color: map.get($system, on-surface), + datepicker-calendar-container-touch-elevation-shadow:elevation.get-box-shadow(0), datepicker-calendar-date-disabled-state-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%), datepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity( diff --git a/src/material/dialog/_m2-dialog.scss b/src/material/dialog/_m2-dialog.scss index 0aefeccbaefb..35ed86aacf89 100644 --- a/src/material/dialog/_m2-dialog.scss +++ b/src/material/dialog/_m2-dialog.scss @@ -8,7 +8,6 @@ @return ( base: ( dialog-container-shape: 4px, - dialog-container-elevation-shadow: elevation.get-box-shadow(24), dialog-container-max-width: 80vw, dialog-container-small-max-width: 80vw, dialog-container-min-width: 0, @@ -23,6 +22,7 @@ ), color: ( dialog-container-color: map.get($system, surface), + dialog-container-elevation-shadow: elevation.get-box-shadow(24), dialog-subhead-color: map.get($system, on-surface), dialog-supporting-text-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..c063dbd6393e 100644 --- a/src/material/expansion/_m2-expansion.scss +++ b/src/material/expansion/_m2-expansion.scss @@ -11,12 +11,12 @@ @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-background-color: map.get($system, surface), + expansion-container-elevation-shadow: elevation.get-box-shadow(2), expansion-container-text-color: map.get($system, on-surface), expansion-actions-divider-color: map.get($system, outline), expansion-header-hover-state-layer-color: m3-utils.color-with-opacity( diff --git a/src/material/expansion/_m3-expansion.scss b/src/material/expansion/_m3-expansion.scss index 4ae185f87754..2f50d697b5e8 100644 --- a/src/material/expansion/_m3-expansion.scss +++ b/src/material/expansion/_m3-expansion.scss @@ -17,11 +17,11 @@ $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-actions-divider-color: map.get($system, outline), expansion-container-background-color: map.get($system, surface), + expansion-container-elevation-shadow: elevation.get-box-shadow(2), expansion-container-text-color: map.get($system, on-surface), expansion-header-description-color: map.get($system, on-surface-variant), expansion-header-disabled-state-text-color: diff --git a/src/material/menu/_m2-menu.scss b/src/material/menu/_m2-menu.scss index 80d8b990afe2..6ff4f34ef613 100644 --- a/src/material/menu/_m2-menu.scss +++ b/src/material/menu/_m2-menu.scss @@ -17,12 +17,12 @@ menu-item-trailing-spacing: 16px, menu-item-with-icon-leading-spacing: 16px, menu-item-with-icon-trailing-spacing: 16px, - menu-container-elevation-shadow: elevation.get-box-shadow(8), // Unused menu-base-elevation-level: null, ), color: ( + menu-container-elevation-shadow: elevation.get-box-shadow(8), menu-item-label-text-color: map.get($system, on-surface), menu-item-icon-color: map.get($system, on-surface), menu-item-hover-state-layer-color: m3-utils.color-with-opacity( diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss index c485ee3bd603..970f403edf95 100644 --- a/src/material/select/_m2-select.scss +++ b/src/material/select/_m2-select.scss @@ -9,10 +9,10 @@ $density-scale: theming.clamp-density(map.get($system, density-scale), -2); @return ( - base: ( + base: (), + color: map.merge(private-get-color-palette-color-tokens($theme, primary), ( select-container-elevation-shadow: elevation.get-box-shadow(8), - ), - color: private-get-color-palette-color-tokens($theme, primary), + )), typography: ( select-trigger-text-font: map.get($system, body-large-font), select-trigger-text-line-height: map.get($system, body-large-line-height), diff --git a/src/material/select/_m3-select.scss b/src/material/select/_m3-select.scss index de5199f7b1a8..37704ec349a0 100644 --- a/src/material/select/_m3-select.scss +++ b/src/material/select/_m3-select.scss @@ -17,10 +17,9 @@ $prefix: (mat, select); } @return ( - base: ( - select-container-elevation-shadow: elevation.get-box-shadow(2), - ), + base: (), color: ( + select-container-elevation-shadow: elevation.get-box-shadow(2), select-panel-background-color: map.get($system, surface-container), select-enabled-trigger-text-color: map.get($system, on-surface), select-disabled-trigger-text-color: diff --git a/src/material/sidenav/_m2-sidenav.scss b/src/material/sidenav/_m2-sidenav.scss index b4efaccfa671..828315e2c2b1 100644 --- a/src/material/sidenav/_m2-sidenav.scss +++ b/src/material/sidenav/_m2-sidenav.scss @@ -20,11 +20,11 @@ @return ( base: ( sidenav-container-shape: 0, - sidenav-container-elevation-shadow: elevation.get-box-shadow(16), sidenav-container-width: auto, ), color: ( sidenav-container-divider-color: map.get($system, outline), + sidenav-container-elevation-shadow: elevation.get-box-shadow(16), sidenav-container-background-color: map.get($system, surface), sidenav-container-text-color: map.get($system, on-surface), sidenav-content-background-color: map.get($system, background), diff --git a/src/material/slider/_m2-slider.scss b/src/material/slider/_m2-slider.scss index c378cec27be8..0efc031922b5 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, @@ -34,6 +33,7 @@ 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), + slider-handle-elevation-shadow: elevation.get-box-shadow(1), slider-label-container-color: map.get($system, inverse-surface), slider-label-label-text-color: map.get($system, inverse-on-surface), slider-value-indicator-opacity: 1, diff --git a/src/material/slider/_m3-slider.scss b/src/material/slider/_m3-slider.scss index b6b882310a98..e15b9ebc99c1 100644 --- a/src/material/slider/_m3-slider.scss +++ b/src/material/slider/_m3-slider.scss @@ -42,7 +42,7 @@ slider-focus-handle-color: map.get($system, primary), 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-elevation-shadow: 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%), diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index 952f722af0c2..4adda13f9f6c 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -206,7 +206,7 @@ $fallbacks: m3-slider.get-tokens(); height: $height-ref; border-width: calc(#{$height-ref} / 2) calc(#{$width-ref} / 2); - box-shadow: token-utils.slot(slider-handle-elevation, $fallbacks); + box-shadow: token-utils.slot(slider-handle-elevation-shadow, $fallbacks); background-color: token-utils.slot(slider-handle-color, $fallbacks); border-color: token-utils.slot(slider-handle-color, $fallbacks); border-radius: token-utils.slot(slider-handle-shape, $fallbacks); diff --git a/src/material/timepicker/_m2-timepicker.scss b/src/material/timepicker/_m2-timepicker.scss index d7da794d6e25..b4b7fe9ac5ac 100644 --- a/src/material/timepicker/_m2-timepicker.scss +++ b/src/material/timepicker/_m2-timepicker.scss @@ -8,10 +8,10 @@ @return ( base: ( timepicker-container-shape: 4px, - timepicker-container-elevation-shadow: elevation.get-box-shadow(8), ), color: ( - timepicker-container-background-color: map.get($system, surface) + timepicker-container-background-color: map.get($system, surface), + timepicker-container-elevation-shadow: elevation.get-box-shadow(8), ), typography: (), density: (),