fix(all)!: use shape.resolve-tokens and remove shape.resolve-theme

PiperOrigin-RevId: 509284550
material-components · Feb 13, 2023 · 44a8d74 · 44a8d74
1 parent 1afd925
commit 44a8d74
Show file tree

Hide file tree

Showing 29 changed files with 92 additions and 268 deletions.
diff --git 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
@@ -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,24 +28,25 @@ $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,
     (
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -22,15 +22,17 @@ $_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);
 }
 
 @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
@@ -9,6 +9,7 @@
 @use 'sass:map';
 @use '../../motion/animation';
 @use '../../sass/theme';
+@use '../../sass/shape';
 @use './md-comp-outlined-field';
 @use './shared';
 
@@ -20,15 +21,17 @@ $_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);
 }
 
 @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
@@ -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
@@ -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
@@ -21,17 +21,17 @@ $_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);
 }
 
 @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 {