fix(button)!: replace label-text-* tokens with label-text-type

PiperOrigin-RevId: 510222434
material-components · Feb 16, 2023 · 69f9a17 · 69f9a17
1 parent 6e31262
commit 69f9a17
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 54 deletions.
diff --git a/button/lib/_elevated-button.scss b/button/lib/_elevated-button.scss
@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
@@ -20,10 +19,9 @@ $_custom-property-prefix: 'elevated-button';
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    tokens.md-comp-elevated-button-values(),
-    $tokens
+    _resolve-tokens(tokens.md-comp-elevated-button-values()),
+    _resolve-tokens($tokens)
   );
-  $tokens: _resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -55,10 +53,6 @@ $_custom-property-prefix: 'elevated-button';
 @function _resolve-tokens($tokens) {
   $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return elevation.resolve-tokens($tokens);
 }
diff --git a/button/lib/_filled-button.scss b/button/lib/_filled-button.scss
@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
@@ -19,8 +18,10 @@
 $_custom-property-prefix: 'filled-button';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-filled-button-values(), $tokens);
-  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.validate-theme(
+    _resolve-tokens(tokens.md-comp-filled-button-values()),
+    _resolve-tokens($tokens)
+  );
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -51,10 +52,6 @@ $_custom-property-prefix: 'filled-button';
 @function _resolve-tokens($tokens) {
   $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return elevation.resolve-tokens($tokens);
 }
diff --git a/button/lib/_outlined-button.scss b/button/lib/_outlined-button.scss
@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
@@ -22,10 +21,9 @@ $_custom-property-prefix: 'outlined-button';
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    tokens.md-comp-outlined-button-values(),
-    $tokens
+    _resolve-tokens(tokens.md-comp-outlined-button-values()),
+    _resolve-tokens($tokens)
   );
-  $tokens: _resolve-theme($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -88,10 +86,6 @@ $_custom-property-prefix: 'outlined-button';
 @function _resolve-tokens($tokens) {
   $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return $tokens;
 }
diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -66,7 +66,6 @@
     min-inline-size: 64px;
     border: none;
     outline: none;
-    line-height: inherit;
     user-select: none;
     -webkit-appearance: none;
     vertical-align: middle;
@@ -76,10 +75,7 @@
     position: relative;
     z-index: 0; // Place content on top of elevation and ripple
     block-size: var(--_container-height);
-    font-family: var(--_label-text-font);
-    font-size: var(--_label-text-size);
-    letter-spacing: var(--_label-text-tracking);
-    font-weight: var(--_label-text-weight);
+    font: var(--_label-text-type);
     background-color: var(--_container-color);
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly
@@ -184,12 +180,7 @@
     'dragged-label-text-color',
     'dragged-state-layer-color',
     'dragged-state-layer-opacity',
-    'with-icon-dragged-icon-color',
-    // b/189346077#comment2: `label-text-line-height` is included in token set
-    // "just in case", but it's okay to ignore.
-    'label-text-line-height',
-    // b/203778922: `label-text-type` used by other platforms but not web.
-    'label-text-type'
+    'with-icon-dragged-icon-color'
   );
   @return map.remove($tokens, $unsupported-tokens);
 }
diff --git a/button/lib/_text-button.scss b/button/lib/_text-button.scss
@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
@@ -18,8 +17,10 @@
 $_custom-property-prefix: 'text-button';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens);
-  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.validate-theme(
+    _resolve-tokens(tokens.md-comp-text-button-values()),
+    _resolve-tokens($tokens)
+  );
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -56,10 +57,6 @@ $_custom-property-prefix: 'text-button';
   );
   $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return $tokens;
 }
diff --git a/button/lib/_tonal-button.scss b/button/lib/_tonal-button.scss
@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/typography';
@@ -20,10 +19,9 @@ $_custom-property-prefix: 'tonal-button';
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
-    tokens.md-comp-filled-tonal-button-values(),
-    $tokens
+    _resolve-tokens(tokens.md-comp-filled-tonal-button-values()),
+    _resolve-tokens($tokens)
   );
-  $tokens: _resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -54,10 +52,6 @@ $_custom-property-prefix: 'tonal-button';
 @function _resolve-tokens($tokens) {
   $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
   @return elevation.resolve-tokens($tokens);
 }