From 44a8d74f56bfe31a422b93675b4085e0dd4b8876 Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Mon, 13 Feb 2023 11:25:19 -0800 Subject: [PATCH] fix(all)!: use shape.resolve-tokens and remove shape.resolve-theme PiperOrigin-RevId: 509284550 --- autocomplete/lib/_filled-autocomplete.scss | 16 +++--- autocomplete/lib/_outlined-autocomplete.scss | 17 +++--- autocomplete/lib/_shared.scss | 15 ----- button/lib/_elevated-button.scss | 7 +-- button/lib/_filled-button.scss | 7 +-- button/lib/_outlined-button.scss | 7 +-- button/lib/_text-button.scss | 7 +-- button/lib/_tonal-button.scss | 7 +-- field/lib/_filled-field.scss | 6 +- field/lib/_outlined-field.scss | 7 ++- field/lib/_shared.scss | 7 +-- focus/lib/_focus-ring.scss | 14 +---- iconbutton/lib/_filled-icon-button.scss | 4 +- iconbutton/lib/_filled-tonal-icon-button.scss | 4 +- iconbutton/lib/_outlined-icon-button.scss | 4 +- iconbutton/lib/_shared.scss | 6 +- iconbutton/lib/_standard-icon-button.scss | 5 +- .../lib/_navigation-drawer-modal.scss | 9 ++- navigationdrawer/lib/_navigation-drawer.scss | 11 ++-- navigationdrawer/lib/_shared.scss | 7 --- sass/_resolvers.scss | 2 - sass/_shape.scss | 57 ++----------------- sass/test/_shape.test.scss | 57 ------------------- .../lib/_outlined-segmented-button-set.scss | 12 ++-- segmentedbuttonset/lib/_shared.scss | 13 ----- switch/lib/_switch.scss | 22 ++----- textfield/lib/_filled-text-field.scss | 11 ++-- textfield/lib/_outlined-text-field.scss | 13 +++-- textfield/lib/_shared.scss | 6 -- 29 files changed, 92 insertions(+), 268 deletions(-) diff --git a/autocomplete/lib/_filled-autocomplete.scss b/autocomplete/lib/_filled-autocomplete.scss index 46d32a6897..ebe91d2a12 100644 --- a/autocomplete/lib/_filled-autocomplete.scss +++ b/autocomplete/lib/_filled-autocomplete.scss @@ -10,9 +10,10 @@ @use '../../field/filled-field'; @use '../../menusurface/menu-surface'; @use '../../sass/theme'; +@use '../../sass/shape'; @use '../../textfield/filled-text-field'; @use '../../tokens'; -@use './shared'; +@use '../../elevation/lib/elevation'; $custom-property-prefix: 'filled-autocomplete'; $dark-theme: tokens.md-comp-filled-autocomplete-values( @@ -27,16 +28,18 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values( tokens.md-comp-filled-autocomplete-values(), $tokens ); - $tokens: shared.resolve-tokens($tokens); + $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation'); $tokens: theme.create-theme-vars($tokens, $custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape'); @include theme.emit-theme-vars($tokens); } @mixin styles() { $tokens: tokens.md-comp-filled-autocomplete-values(); - $tokens: shared.resolve-tokens($tokens); + $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation'); $tokens: theme.create-theme-vars($tokens, $custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape'); :host { @each $token, $value in $tokens { @@ -170,11 +173,8 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values( // Textfield cannot resolve shape when created as vars. @include filled-field.theme( ( - container-shape-start-start: - var(--_text-field-container-shape-start-start), - container-shape-start-end: var(--_text-field-container-shape-start-end), - container-shape-end-end: var(--_text-field-container-shape-end-end), - container-shape-end-start: var(--_text-field-container-shape-end-start), + container-shape: + shape.corners-to-shape-token('--_text-field-container-shape'), ) ); } diff --git a/autocomplete/lib/_outlined-autocomplete.scss b/autocomplete/lib/_outlined-autocomplete.scss index 63fb3b34a2..463b7f6da7 100644 --- a/autocomplete/lib/_outlined-autocomplete.scss +++ b/autocomplete/lib/_outlined-autocomplete.scss @@ -12,7 +12,8 @@ @use '../../sass/theme'; @use '../../textfield/outlined-text-field'; @use '../../tokens'; -@use './shared'; +@use '../../elevation/lib/elevation'; +@use '../../sass/shape'; $custom-property-prefix: 'outlined-autocomplete'; $dark-theme: tokens.md-comp-outlined-autocomplete-values( @@ -27,15 +28,15 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values( tokens.md-comp-outlined-autocomplete-values(), $theme ); - $tokens: shared.resolve-tokens($tokens); + $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation'); $tokens: theme.create-theme-vars($tokens, $custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape'); @include theme.emit-theme-vars($tokens); } @mixin styles() { $tokens: tokens.md-comp-outlined-autocomplete-values(); - $tokens: shared.resolve-tokens($tokens); // TODO(b/251183088): Clean up container-shape once token is correct. $tokens: map.merge( $tokens, @@ -43,8 +44,9 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values( text-field-container-shape: 4px, ) ); - + $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation'); $tokens: theme.create-theme-vars($tokens, $custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape'); :host { @each $token, $value in $tokens { @@ -159,11 +161,8 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values( // Textfield cannot resolve shape when created as vars. @include outlined-field.theme( ( - container-shape-start-start: - var(--_text-field-container-shape-start-start), - container-shape-start-end: var(--_text-field-container-shape-start-end), - container-shape-end-end: var(--_text-field-container-shape-end-end), - container-shape-end-start: var(--_text-field-container-shape-end-start), + container-shape: + shape.corners-to-shape-token('--_text-field-container-shape'), ) ); } diff --git a/autocomplete/lib/_shared.scss b/autocomplete/lib/_shared.scss index 27dcf5b21a..f89c6dea2e 100644 --- a/autocomplete/lib/_shared.scss +++ b/autocomplete/lib/_shared.scss @@ -6,24 +6,9 @@ // stylelint-disable selector-class-pattern -- // Selector '.md3-*' should only be used in this project. -@use 'sass:map'; -@use '../../elevation/lib/elevation'; -@use '../../sass/resolvers'; -@use '../../sass/shape'; - @mixin styles() { .md3-autocomplete { display: inline-flex; flex: 1; } } - -@function resolve-tokens($tokens) { - $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation'); - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, shape), - text-field-container-shape - ); - @return $tokens; -} diff --git a/button/lib/_elevated-button.scss b/button/lib/_elevated-button.scss index 8b6c0ec3c7..a9badc422c 100644 --- a/button/lib/_elevated-button.scss +++ b/button/lib/_elevated-button.scss @@ -21,6 +21,7 @@ $_custom-property-prefix: 'elevated-button'; ); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -38,6 +39,7 @@ $_custom-property-prefix: 'elevated-button'; $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { @@ -54,10 +56,5 @@ $_custom-property-prefix: 'elevated-button'; map.get(resolvers.$material, 'typography'), 'label-text' ); - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, 'shape'), - 'container-shape' - ); @return elevation.resolve-tokens($tokens); } diff --git a/button/lib/_filled-button.scss b/button/lib/_filled-button.scss index ba763e3bae..cf7ef27963 100644 --- a/button/lib/_filled-button.scss +++ b/button/lib/_filled-button.scss @@ -18,6 +18,7 @@ $_custom-property-prefix: 'filled-button'; $tokens: theme.validate-theme(tokens.md-comp-filled-button-values(), $tokens); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -34,6 +35,7 @@ $_custom-property-prefix: 'filled-button'; $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { @@ -50,10 +52,5 @@ $_custom-property-prefix: 'filled-button'; map.get(resolvers.$material, 'typography'), 'label-text' ); - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, 'shape'), - 'container-shape' - ); @return elevation.resolve-tokens($tokens); } diff --git a/button/lib/_outlined-button.scss b/button/lib/_outlined-button.scss index fc4ee9e99d..f29ba9bb15 100644 --- a/button/lib/_outlined-button.scss +++ b/button/lib/_outlined-button.scss @@ -23,6 +23,7 @@ $_custom-property-prefix: 'outlined-button'; ); $tokens: _resolve-theme($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -39,6 +40,7 @@ $_custom-property-prefix: 'outlined-button'; $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { @@ -87,10 +89,5 @@ $_custom-property-prefix: 'outlined-button'; map.get(resolvers.$material, 'typography'), 'label-text' ); - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, 'shape'), - 'container-shape' - ); @return $tokens; } diff --git a/button/lib/_text-button.scss b/button/lib/_text-button.scss index ab5e28513d..f24012192c 100644 --- a/button/lib/_text-button.scss +++ b/button/lib/_text-button.scss @@ -17,6 +17,7 @@ $_custom-property-prefix: 'text-button'; $tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -33,6 +34,7 @@ $_custom-property-prefix: 'text-button'; $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 12px); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { @@ -55,10 +57,5 @@ $_custom-property-prefix: 'text-button'; map.get(resolvers.$material, 'typography'), 'label-text' ); - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, 'shape'), - 'container-shape' - ); @return $tokens; } diff --git a/button/lib/_tonal-button.scss b/button/lib/_tonal-button.scss index 7ff08c9e1b..e776e35772 100644 --- a/button/lib/_tonal-button.scss +++ b/button/lib/_tonal-button.scss @@ -21,6 +21,7 @@ $_custom-property-prefix: 'tonal-button'; ); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -37,6 +38,7 @@ $_custom-property-prefix: 'tonal-button'; $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px); $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { @@ -53,10 +55,5 @@ $_custom-property-prefix: 'tonal-button'; map.get(resolvers.$material, 'typography'), 'label-text' ); - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, 'shape'), - 'container-shape' - ); @return elevation.resolve-tokens($tokens); } diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss index 8b7d0eeef2..75d5409af1 100644 --- a/field/lib/_filled-field.scss +++ b/field/lib/_filled-field.scss @@ -22,7 +22,8 @@ $_animation-duration: 150ms; $reference: map.merge($reference, shared.resolve-tokens($reference)); $tokens: theme.validate-theme($reference, $tokens); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, filled-field); + $tokens: theme.create-theme-vars($tokens, 'filled-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -30,7 +31,8 @@ $_animation-duration: 150ms; @mixin styles() { $tokens: md-comp-filled-field.values(); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, filled-field); + $tokens: theme.create-theme-vars($tokens, 'filled-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { diff --git a/field/lib/_outlined-field.scss b/field/lib/_outlined-field.scss index fd29270c8a..7bf3fea99d 100644 --- a/field/lib/_outlined-field.scss +++ b/field/lib/_outlined-field.scss @@ -9,6 +9,7 @@ @use 'sass:map'; @use '../../motion/animation'; @use '../../sass/theme'; +@use '../../sass/shape'; @use './md-comp-outlined-field'; @use './shared'; @@ -20,7 +21,8 @@ $_animation-duration: 150ms; $reference: map.merge($reference, shared.resolve-tokens($reference)); $tokens: theme.validate-theme($reference, $tokens); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, outlined-field); + $tokens: theme.create-theme-vars($tokens, 'outlined-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -28,7 +30,8 @@ $_animation-duration: 150ms; @mixin styles() { $tokens: md-comp-outlined-field.values(); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, outlined-field); + $tokens: theme.create-theme-vars($tokens, 'outlined-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss index dc7d087736..d5e214a232 100644 --- a/field/lib/_shared.scss +++ b/field/lib/_shared.scss @@ -8,7 +8,6 @@ @use 'sass:map'; @use '../../sass/resolvers'; -@use '../../sass/shape'; @use '../../sass/typography'; @use './content'; @use './label'; @@ -75,9 +74,5 @@ supporting-text ); - @return shape.resolve-theme( - $tokens, - map.get(resolvers.$material, shape), - container-shape - ); + @return $tokens; } diff --git a/focus/lib/_focus-ring.scss b/focus/lib/_focus-ring.scss index 19a57f41eb..b273302805 100644 --- a/focus/lib/_focus-ring.scss +++ b/focus/lib/_focus-ring.scss @@ -6,23 +6,22 @@ @use 'sass:map'; @use '../../sass/theme'; @use '../../sass/shape'; -@use '../../sass/resolvers'; @use './md-comp-focus-ring'; $_custom-property-prefix: 'focus-ring'; @mixin theme($tokens) { $tokens: theme.validate-theme(md-comp-focus-ring.values(), $tokens); - $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'shape'); @include theme.emit-theme-vars($tokens); } @mixin styles() { $tokens: md-comp-focus-ring.values(); - $tokens: _resolve-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'shape'); :host { @each $token, $value in $tokens { @@ -50,12 +49,3 @@ $_custom-property-prefix: 'focus-ring'; display: flex; } } - -@function _resolve-tokens($tokens) { - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, shape), - shape - ); - @return $tokens; -} diff --git a/iconbutton/lib/_filled-icon-button.scss b/iconbutton/lib/_filled-icon-button.scss index 672504722c..6c3dc27a3d 100644 --- a/iconbutton/lib/_filled-icon-button.scss +++ b/iconbutton/lib/_filled-icon-button.scss @@ -21,8 +21,8 @@ $_custom-property-prefix: 'filled-icon-button'; $tokens ); $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled'); - $tokens: shared.resolve-shape-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens); @include theme.emit-theme-vars($tokens); } @@ -30,8 +30,8 @@ $_custom-property-prefix: 'filled-icon-button'; @mixin styles() { $tokens: tokens.md-comp-filled-icon-button-values(); $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled'); - $tokens: shared.resolve-shape-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens); :host { @each $token, $value in $tokens { diff --git a/iconbutton/lib/_filled-tonal-icon-button.scss b/iconbutton/lib/_filled-tonal-icon-button.scss index b6bd3639c7..23fd181f15 100644 --- a/iconbutton/lib/_filled-tonal-icon-button.scss +++ b/iconbutton/lib/_filled-tonal-icon-button.scss @@ -21,8 +21,8 @@ $_custom-property-prefix: 'filled-tonal-icon-button'; $tokens ); $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal'); - $tokens: shared.resolve-shape-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens); @include theme.emit-theme-vars($tokens); } @@ -30,8 +30,8 @@ $_custom-property-prefix: 'filled-tonal-icon-button'; @mixin styles() { $tokens: tokens.md-comp-filled-tonal-icon-button-values(); $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal'); - $tokens: shared.resolve-shape-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens); :host { @each $token, $value in $tokens { diff --git a/iconbutton/lib/_outlined-icon-button.scss b/iconbutton/lib/_outlined-icon-button.scss index 4b3280ae5e..d9e91ccfb9 100644 --- a/iconbutton/lib/_outlined-icon-button.scss +++ b/iconbutton/lib/_outlined-icon-button.scss @@ -23,8 +23,8 @@ $_custom-property-prefix: 'outlined-icon-button'; $tokens ); $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined'); - $tokens: shared.resolve-shape-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens); @include theme.emit-theme-vars($tokens); } @@ -32,8 +32,8 @@ $_custom-property-prefix: 'outlined-icon-button'; @mixin styles() { $tokens: tokens.md-comp-outlined-icon-button-values(); $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined'); - $tokens: shared.resolve-shape-tokens($tokens); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens); :host { @each $token, $value in $tokens { diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss index b300e6922b..dc59734a20 100644 --- a/iconbutton/lib/_shared.scss +++ b/iconbutton/lib/_shared.scss @@ -153,9 +153,5 @@ } @function resolve-shape-tokens($tokens, $property: 'container-shape') { - @return shape.resolve-theme( - $tokens, - map.get(resolvers.$material, 'shape'), - $property - ); + @return shape.resolve-tokens($tokens, $property); } diff --git a/iconbutton/lib/_standard-icon-button.scss b/iconbutton/lib/_standard-icon-button.scss index 405a337e1d..b39d3906f9 100644 --- a/iconbutton/lib/_standard-icon-button.scss +++ b/iconbutton/lib/_standard-icon-button.scss @@ -14,12 +14,13 @@ @use './shared'; $_custom-property-prefix: 'icon-button'; +$_shape-property: 'state-layer-shape'; @mixin theme($tokens) { $tokens: theme.validate-theme(tokens.md-comp-icon-button-values(), $tokens); $tokens: shared.flatten-disabled-colors($tokens); - $tokens: shared.resolve-shape-tokens($tokens, $property: 'state-layer-shape'); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens, $property: $_shape-property); @include theme.emit-theme-vars($tokens); } @@ -27,8 +28,8 @@ $_custom-property-prefix: 'icon-button'; @mixin styles() { $tokens: tokens.md-comp-icon-button-values(); $tokens: shared.flatten-disabled-colors($tokens); - $tokens: shared.resolve-shape-tokens($tokens, $property: 'state-layer-shape'); $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shared.resolve-shape-tokens($tokens, $property: $_shape-property); :host { @each $token, $value in $tokens { diff --git a/navigationdrawer/lib/_navigation-drawer-modal.scss b/navigationdrawer/lib/_navigation-drawer-modal.scss index 0d4b5a37d6..7f98252459 100644 --- a/navigationdrawer/lib/_navigation-drawer-modal.scss +++ b/navigationdrawer/lib/_navigation-drawer-modal.scss @@ -10,6 +10,7 @@ @use '../../elevation/elevation'; @use '../../motion/animation'; @use '../../sass/theme'; +@use '../../sass/shape'; @use './shared'; $_curve: animation.$standard-easing; @@ -30,10 +31,13 @@ $_reference: ( standard-container-elevation: 0, ); +$_custom-property-prefix: 'navigation-drawer-modal'; + @mixin theme($tokens) { $tokens: theme.validate-theme($_reference, $tokens); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, 'navigation-drawer-modal'); + $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -41,7 +45,8 @@ $_reference: ( @mixin styles() { $tokens: $_reference; $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, 'navigation-drawer-modal'); + $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { diff --git a/navigationdrawer/lib/_navigation-drawer.scss b/navigationdrawer/lib/_navigation-drawer.scss index 5ab9f9ca8d..6f223e6045 100644 --- a/navigationdrawer/lib/_navigation-drawer.scss +++ b/navigationdrawer/lib/_navigation-drawer.scss @@ -9,6 +9,7 @@ @use '../../motion/animation'; @use '../../elevation/elevation'; @use '../../sass/theme'; +@use '../../sass/shape'; @use './shared'; $curve: animation.$standard-easing; @@ -28,11 +29,13 @@ $_reference: ( standard-container-elevation: 0, ); +$_custom-property-prefix: 'navigation-drawer'; + @mixin theme($tokens) { $tokens: theme.validate-theme($_reference, $tokens); $tokens: shared.resolve-tokens($tokens); - - $tokens: theme.create-theme-vars($tokens, 'navigation-drawer'); + $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -40,8 +43,8 @@ $_reference: ( @mixin styles() { $tokens: $_reference; $tokens: shared.resolve-tokens($tokens); - - $tokens: theme.create-theme-vars($tokens, 'navigation-drawer'); + $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { diff --git a/navigationdrawer/lib/_shared.scss b/navigationdrawer/lib/_shared.scss index 949862b693..19828d82dc 100644 --- a/navigationdrawer/lib/_shared.scss +++ b/navigationdrawer/lib/_shared.scss @@ -9,8 +9,6 @@ @use 'sass:map'; @use '../../elevation/lib/elevation'; -@use '../../sass/resolvers'; -@use '../../sass/shape'; @mixin styles() { .md3-navigation-drawer-modal { @@ -34,11 +32,6 @@ @function resolve-tokens($tokens) { $tokens: elevation.resolve-tokens($tokens, 'modal-container-elevation'); - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, shape), - container-shape - ); @return $tokens; } diff --git a/sass/_resolvers.scss b/sass/_resolvers.scss index dc18f04a7d..5fd0edb5a0 100644 --- a/sass/_resolvers.scss +++ b/sass/_resolvers.scss @@ -5,12 +5,10 @@ @use 'sass:meta'; @use './elevation'; -@use './shape'; @use './typography'; /// Material Design resolvers. $material: ( elevation: meta.get-function('resolver', $module: 'elevation'), - shape: meta.get-function('resolver', $module: 'shape'), typography: meta.get-function('resolver', $module: 'typography'), ); diff --git a/sass/_shape.scss b/sass/_shape.scss index 109a8a3aea..9f9d96fa80 100644 --- a/sass/_shape.scss +++ b/sass/_shape.scss @@ -10,54 +10,6 @@ @use './string-ext'; @use './var'; -/// Resolves one or more shape tokens and expands them into 4 separate logical -/// tokens for each corner. -/// -/// @deprecated - use resolve-tokens instead -/// -/// @example - scss -/// $theme: (container-shape: (4px 4px 0 0)); -/// $theme: resolve-theme( -/// $theme, -/// map.get($resolvers, shape), -/// container-shape, -/// ); -/// // ( -/// // container-shape-start-start: 4px, -/// // container-shape-start-end: 4px, -/// // container-shape-end-end: 0, -/// // container-shape-end-start: 0, -/// // ) -/// -/// @param {Map} $theme - The theme to resolve tokens for. -/// @param {Function} $resolver - The shape resolver to use. -/// @param {String...} $shape-tokens - The shape tokens to resolve. -/// @return {Map} The theme with resolved shape tokens. -@function resolve-theme($theme, $resolver, $shape-tokens...) { - @if $resolver == null { - @return $theme; - } - - @each $token in $shape-tokens { - $shape-theme: meta.call($resolver, $shape: map.get($theme, $token)); - - // Add resolved values, but allow $theme to override the results if needed. - $theme: map.merge( - ( - '#{$token}-start-start': map.get($shape-theme, start-start), - '#{$token}-start-end': map.get($shape-theme, start-end), - '#{$token}-end-end': map.get($shape-theme, end-end), - '#{$token}-end-start': map.get($shape-theme, end-start), - ), - $theme - ); - - $theme: map.remove($theme, $token); - } - - @return $theme; -} - /// Resolves one or more shape tokens and expands them into 4 separate logical /// tokens for each corner. /// @@ -137,11 +89,12 @@ /// @param {String} $shape-token - The shape variable the corners are generated from /// @return {List} A list that can be processed by `expand-corners` @function corners-to-shape-token($shape-token) { + // NOTE: use a space separated list to avoid confusing `string-ext.split()` @return ( - var.create('#{$shape-token}-start-start'), - var.create('#{$shape-token}-start-end'), - var.create('#{$shape-token}-end-end'), - var.create('#{$shape-token}-end-start') + var.create('#{$shape-token}-start-start') + var.create('#{$shape-token}-start-end') + var.create('#{$shape-token}-end-end') + var.create('#{$shape-token}-end-start') ); } diff --git a/sass/test/_shape.test.scss b/sass/test/_shape.test.scss index 9862b6609b..bbf5858724 100644 --- a/sass/test/_shape.test.scss +++ b/sass/test/_shape.test.scss @@ -13,63 +13,6 @@ @use '../theme'; @include test.describe('shape') { - @include test.describe('resolve-theme()') { - @include test.it('should return $theme if $resolver is null') { - // Setup. - $theme: ( - container-shape: 8px, - ); - $resolver: null; - - // Test Case. - $result: shape.resolve-theme($theme, $resolver, container-shape); - - // Assertion. - @include test.assert-equal( - $theme, - $result, - $description: 'Returned $theme should not be modified' - ); - } - - @include test.it('should expand shape tokens into 4 corner tokens') { - // Setup. - $theme: ( - not-a-shape-token: 24px, - container-shape: 8px, - root-shape: 1px 2px 3px 4px, - ); - $resolver: map.get(resolvers.$material, shape); - - // Test Case. - $result: shape.resolve-theme( - $theme, - $resolver, - root-shape, - container-shape - ); - - // Assertion. - $expected: ( - not-a-shape-token: 24px, - container-shape-start-start: 8px, - container-shape-start-end: 8px, - container-shape-end-end: 8px, - container-shape-end-start: 8px, - root-shape-start-start: 1px, - root-shape-start-end: 2px, - root-shape-end-end: 3px, - root-shape-end-start: 4px, - ); - @include test.assert-equal( - $result, - $expected, - $description: - 'Should expand shape tokens, remove original tokens, and not touch other tokens' - ); - } - } - @include test.describe('resolver()') { @include test.it('should return null for all corners if given null') { // Test Case. diff --git a/segmentedbuttonset/lib/_outlined-segmented-button-set.scss b/segmentedbuttonset/lib/_outlined-segmented-button-set.scss index f620ae21ad..5d742f081b 100644 --- a/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +++ b/segmentedbuttonset/lib/_outlined-segmented-button-set.scss @@ -4,23 +4,25 @@ // @use '../../sass/theme'; +@use '../../sass/shape'; @use '../../tokens'; -@use './shared'; + +$_custom-property-prefix: 'segmented-button'; @mixin theme($tokens) { $tokens: theme.validate-theme( tokens.md-comp-outlined-segmented-button-values(), $tokens ); - $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, 'segmented-button'); + $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'shape'); @include theme.emit-theme-vars($tokens); } @mixin styles() { $tokens: tokens.md-comp-outlined-segmented-button-values(); - $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, 'segmented-button'); + $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); + $tokens: shape.resolve-tokens($tokens, 'shape'); :host { @each $token, $value in $tokens { diff --git a/segmentedbuttonset/lib/_shared.scss b/segmentedbuttonset/lib/_shared.scss index 0f7ef68d08..d86096ee58 100644 --- a/segmentedbuttonset/lib/_shared.scss +++ b/segmentedbuttonset/lib/_shared.scss @@ -6,10 +6,6 @@ // stylelint-disable selector-class-pattern -- // Selector '.md3-*' should only be used in this project. -@use 'sass:map'; -@use '../../sass/resolvers'; -@use '../../sass/shape'; - @mixin styles() { :host { display: flex; @@ -35,12 +31,3 @@ } } } - -@function resolve-tokens($tokens) { - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, 'shape'), - 'shape' - ); - @return $tokens; -} diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss index b2f6886b17..6b4095b084 100644 --- a/switch/lib/_switch.scss +++ b/switch/lib/_switch.scss @@ -11,7 +11,6 @@ @use 'sass:map'; @use '../../focus/focus-ring'; @use '../../sass/color'; -@use '../../sass/resolvers'; @use '../../sass/shape'; @use '../../sass/theme'; @use '../../sass/touch-target'; @@ -45,16 +44,18 @@ $_forced-colors-theme: ( @mixin theme($tokens) { $tokens: theme.validate-theme(tokens.md-comp-switch-values(), $tokens); - $tokens: _resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, switch); + $tokens: _flatten-disable-colors($tokens); + $tokens: theme.create-theme-vars($tokens, 'switch'); + $tokens: shape.resolve-tokens($tokens, 'track-shape', 'handle-shape'); @include theme.emit-theme-vars($tokens); } @mixin styles() { $tokens: tokens.md-comp-switch-values(); - $tokens: _resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, switch); + $tokens: _flatten-disable-colors($tokens); + $tokens: theme.create-theme-vars($tokens, 'switch'); + $tokens: shape.resolve-tokens($tokens, 'track-shape', 'handle-shape'); :host { @each $token, $value in $tokens { @@ -137,17 +138,6 @@ $_forced-colors-theme: ( @include icon.styles(); } -@function _resolve-tokens($theme) { - $theme: shape.resolve-theme( - $theme, - map.get(resolvers.$material, shape), - track-shape, - handle-shape - ); - $theme: _flatten-disable-colors($theme); - @return $theme; -} - @function _flatten-disable-colors($theme) { @return color.join-color-and-opacity-pairs( $theme, diff --git a/textfield/lib/_filled-text-field.scss b/textfield/lib/_filled-text-field.scss index fb1795216a..972876cdea 100644 --- a/textfield/lib/_filled-text-field.scss +++ b/textfield/lib/_filled-text-field.scss @@ -25,7 +25,8 @@ $tokens: theme.validate-theme($reference, $tokens); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, filled-text-field); + $tokens: theme.create-theme-vars($tokens, 'filled-text-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -45,7 +46,8 @@ ); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, filled-text-field); + $tokens: theme.create-theme-vars($tokens, 'filled-text-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { @@ -59,10 +61,7 @@ container-color: var(--_container-color), container-padding-horizontal: var(--_container-padding-horizontal), container-padding-vertical: var(--_container-padding-vertical), - container-shape-start-start: var(--_container-shape-start-start), - container-shape-start-end: var(--_container-shape-start-end), - container-shape-end-end: var(--_container-shape-end-end), - container-shape-end-start: var(--_container-shape-end-start), + container-shape: shape.corners-to-shape-token('--_container-shape'), content-color: var(--_input-text-color), disabled-active-indicator-color: var(--_disabled-active-indicator-color), disabled-active-indicator-height: diff --git a/textfield/lib/_outlined-text-field.scss b/textfield/lib/_outlined-text-field.scss index 3ef6c29077..33306bf132 100644 --- a/textfield/lib/_outlined-text-field.scss +++ b/textfield/lib/_outlined-text-field.scss @@ -26,7 +26,8 @@ $tokens: theme.validate-theme($reference, $tokens); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, outlined-text-field); + $tokens: theme.create-theme-vars($tokens, 'outlined-text-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); @include theme.emit-theme-vars($tokens); } @@ -46,21 +47,21 @@ ); $tokens: shared.resolve-tokens($tokens); - $tokens: theme.create-theme-vars($tokens, outlined-text-field); + $tokens: theme.create-theme-vars($tokens, 'outlined-text-field'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); :host { @each $token, $value in $tokens { --_#{$token}: #{$value}; } + $container-shape: shape.corners-to-shape-token('--_container-shape'); + @include outlined-field.theme( ( container-padding-horizontal: var(--_container-padding-horizontal), container-padding-vertical: var(--_container-padding-vertical), - container-shape-start-start: var(--_container-shape-start-start), - container-shape-start-end: var(--_container-shape-start-end), - container-shape-end-end: var(--_container-shape-end-end), - container-shape-end-start: var(--_container-shape-end-start), + container-shape: $container-shape, disabled-content-color: var(--_disabled-input-text-color), disabled-content-opacity: var(--_disabled-input-text-opacity), disabled-label-text-color: var(--_disabled-label-text-color), diff --git a/textfield/lib/_shared.scss b/textfield/lib/_shared.scss index 11a0691462..698ff5532d 100644 --- a/textfield/lib/_shared.scss +++ b/textfield/lib/_shared.scss @@ -8,7 +8,6 @@ @use 'sass:map'; @use '../../sass/resolvers'; -@use '../../sass/shape'; @use '../../sass/typography'; @use './icon'; @use './input'; @@ -43,11 +42,6 @@ } @function resolve-tokens($tokens) { - $tokens: shape.resolve-theme( - $tokens, - map.get(resolvers.$material, shape), - container-shape - ); $tokens: typography.resolve-theme( $tokens, map.get(resolvers.$material, typography),