refactor(button): move typography keys to theme styles

PiperOrigin-RevId: 386263462

docs/migrating-from-mdl.md

@@ -195,7 +195,7 @@ Aside from how the module is referenced, its usage otherwise remains the same. I
 constructor on the root node:
 
 ```js
-var textField = new mdc.textfield.MDCTextField(document.querySelector('.mdc-text-field'));
+var textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));
 ```
 
 ## Styling

packages/mdc-button/_button-base.scss

@@ -33,11 +33,12 @@
 @use './button-shared-theme';
 
 @mixin static-styles($query: feature-targeting.all()) {
-  @include static-styles-without-ripple($query: $query);
+  @include _static-styles-base($query: $query);
+  @include _typography-styles($query: $query);
   @include button-ripple.static-styles($query: $query);
 }
 
-@mixin static-styles-without-ripple($query: feature-targeting.all()) {
+@mixin _static-styles-base($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
   @include touch-target.wrapper($query); // COPYBARA_COMMENT_THIS_LINE
@@ -46,7 +47,7 @@
 
   // postcss-bem-linter: define button
   .mdc-button {
-    @include base($query);
+    @include _root-structure($query);
     // The icon CSS class overrides styles defined in the .material-icons CSS
     // class, which is loaded separately so the order of CSS definitions is not
     // guaranteed. Therefore, increase specifity by nesting this class to ensure
@@ -103,14 +104,49 @@
   // postcss-bem-linter: end
 }
 
+@mixin _typography-styles($query) {
+  .mdc-button {
+    // Exclude properties declared in theme styles.
+    @include typography.typography(
+      button,
+      $exclude-props: (
+        font-size,
+        line-height,
+        font-weight,
+        letter-spacing,
+        text-transform
+      ),
+      $query: $query
+    );
+  }
+}
+
+/// @deprecated Contains typography declarations now part of theme-styles.
+@mixin deprecated-static-styles-without-ripple(
+  $query: feature-targeting.all()
+) {
+  @include _deprecated-typography-styles($query: $query);
+  @include _static-styles-base($query: $query);
+}
+
+@mixin _deprecated-typography-styles($query) {
+  .mdc-button {
+    @include typography.typography(button, $query);
+  }
+}
+
 @mixin deprecated-base($query) {
   @include base($query);
 }
 
 @mixin base($query) {
+  @include typography.typography(button, $query);
+  @include _root-structure($query: $query);
+}
+
+@mixin _root-structure($query) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
-  @include typography.typography(button, $query);
   @include elevation-theme.overlay-surface-position($query: $query);
   @include elevation-theme.overlay-dimensions(100%, $query: $query);
 

packages/mdc-button/_button-filled-theme.scss

@@ -43,10 +43,11 @@ $light-theme: (
   hover-state-layer-color: on-primary,
   hover-state-layer-opacity: 0.08,
   label-text-color: on-primary,
-  label-text-font: null,
-  label-text-size: null,
-  label-text-tracking: null,
-  label-text-weight: null,
+  label-text-font: button-font-family,
+  label-text-size: button-font-size,
+  label-text-tracking: button-letter-spacing,
+  label-text-transform: button-text-transform,
+  label-text-weight: button-font-weight,
   pressed-container-elevation: 0,
   pressed-label-text-color: null,
   pressed-state-layer-color: on-primary,

packages/mdc-button/_button-filled.scss

@@ -71,7 +71,7 @@
   @include filled($query);
 }
 
-@mixin deprecated-theme-styles-without-ripple($query: feature-targeting.all()) {
+@mixin deprecated-theme-styles($query: feature-targeting.all()) {
   .mdc-button--raised,
   .mdc-button--unelevated {
     // TODO(b/179402677): move into theme config.
@@ -89,6 +89,11 @@
         hover-state-layer-opacity: null,
         pressed-state-layer-color: null,
         pressed-state-layer-opacity: null,
+        label-text-font: null,
+        label-text-size: null,
+        label-text-tracking: null,
+        label-text-transform: null,
+        label-text-weight: null,
       )
     );
     @include button-filled-theme.theme($theme, $query: $query);

packages/mdc-button/_button-outlined-theme.scss

@@ -52,10 +52,11 @@ $light-theme: (
   hover-state-layer-color: primary,
   hover-state-layer-opacity: 0.04,
   label-text-color: primary,
-  label-text-font: null,
-  label-text-size: null,
-  label-text-tracking: null,
-  label-text-weight: null,
+  label-text-font: button-font-family,
+  label-text-size: button-font-size,
+  label-text-tracking: button-letter-spacing,
+  label-text-transform: button-text-transform,
+  label-text-weight: button-font-weight,
   outline-color: $outline-color,
   outline-width: $outlined-border-width,
   pressed-label-text-color: null,

packages/mdc-button/_button-outlined.scss

@@ -53,7 +53,7 @@
   }
 }
 
-@mixin deprecated-theme-styles-without-ripple($query: feature-targeting.all()) {
+@mixin deprecated-theme-styles($query: feature-targeting.all()) {
   .mdc-button--outlined {
     $theme: map.merge(
       button-outlined-theme.$light-theme,
@@ -64,6 +64,11 @@
         hover-state-layer-opacity: null,
         pressed-state-layer-color: null,
         pressed-state-layer-opacity: null,
+        label-text-font: null,
+        label-text-size: null,
+        label-text-tracking: null,
+        label-text-transform: null,
+        label-text-weight: null,
       )
     );
     @include _theme-styles($theme, $query: $query);

packages/mdc-button/_button-protected-theme.scss

@@ -43,10 +43,11 @@ $light-theme: (
   hover-state-layer-color: on-primary,
   hover-state-layer-opacity: 0.08,
   label-text-color: on-primary,
-  label-text-font: null,
-  label-text-size: null,
-  label-text-tracking: null,
-  label-text-weight: null,
+  label-text-font: button-font-family,
+  label-text-size: button-font-size,
+  label-text-tracking: button-letter-spacing,
+  label-text-transform: button-text-transform,
+  label-text-weight: button-font-weight,
   pressed-container-elevation: 8,
   pressed-label-text-color: null,
   pressed-state-layer-color: on-primary,

packages/mdc-button/_button-shared-theme.scss

@@ -24,6 +24,8 @@
 // Selector '.mdc-*' should only be used in this project.
 
 @use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 @use '@material/density/functions' as density-functions;
 @use '@material/density/variables' as density-variables;
 @use '@material/dom/mixins' as dom-mixins;
@@ -70,6 +72,7 @@ $disabled-container-color: rgba(
       size: map.get($theme, label-text-size),
       tracking: map.get($theme, label-text-tracking),
       weight: map.get($theme, label-text-weight),
+      transform: map.get($theme, label-text-transform),
     ),
     $query: $query
   );
@@ -625,24 +628,27 @@ $disabled-container-color: rgba(
   $size: map.get($typography-map, size);
   $tracking: map.get($typography-map, tracking);
   $weight: map.get($typography-map, weight);
+  $transform: map.get($typography-map, transform);
 
   @include feature-targeting.targets($feat-typography) {
-    .mdc-button__label {
-      @include theme.property(font-family, $family);
-
-      @if $size {
-        @include theme.property(font-size, typography.px-to-rem($size));
-      }
-
-      @if $tracking {
-        @include theme.property(
-          letter-spacing,
-          typography.px-to-rem($tracking)
-        );
-      }
+    @include theme.property(font-family, $family);
+
+    $is-size-px: meta.type-of($size) == 'number' and math.unit($size) == 'px';
+    @if $is-size-px {
+      $size-rem: typography.px-to-rem($size);
+      @include theme.property(font-size, $size-rem);
+    } @else {
+      @include theme.property(font-size, $size);
+    }
 
-      @include theme.property(font-weight, $weight);
+    @if $tracking and $is-size-px {
+      @include theme.property(letter-spacing, math.div($tracking, $size) * 1em);
+    } @else {
+      @include theme.property(letter-spacing, $tracking);
     }
+
+    @include theme.property(font-weight, $weight);
+    @include theme.property(text-transform, $transform);
   }
 }
 

packages/mdc-button/_button-text-theme.scss

@@ -36,10 +36,11 @@ $light-theme: (
   hover-state-layer-color: primary,
   hover-state-layer-opacity: 0.04,
   label-text-color: primary,
-  label-text-font: null,
-  label-text-size: null,
-  label-text-tracking: null,
-  label-text-weight: null,
+  label-text-font: button-font-family,
+  label-text-size: button-font-size,
+  label-text-tracking: button-letter-spacing,
+  label-text-transform: button-text-transform,
+  label-text-weight: button-font-weight,
   pressed-label-text-color: null,
   pressed-state-layer-color: primary,
   pressed-state-layer-opacity: 0.12,

packages/mdc-button/_button-text.scss

@@ -51,7 +51,7 @@
   // Intentionally left blank for future-proofing.
 }
 
-@mixin deprecated-theme-styles-without-ripple($query: feature-targeting.all()) {
+@mixin deprecated-theme-styles($query: feature-targeting.all()) {
   $theme: map.merge(
     button-text-theme.$light-theme,
     (
@@ -61,6 +61,11 @@
       hover-state-layer-opacity: null,
       pressed-state-layer-color: null,
       pressed-state-layer-opacity: null,
+      label-text-font: null,
+      label-text-size: null,
+      label-text-tracking: null,
+      label-text-transform: null,
+      label-text-weight: null,
     )
   );
 

packages/mdc-button/_button.scss

@@ -47,10 +47,7 @@
 }
 
 @mixin theme-styles($query: feature-targeting.all()) {
-  @include button-text.theme-styles(
-    button-text-theme.$light-theme,
-    $query: $query
-  );
+  @include button-text.theme-styles($query: $query);
   @include button-filled.theme-styles($query: $query);
   @include button-protected.theme-styles($query: $query);
   @include button-outlined.theme-styles($query: $query);
@@ -64,8 +61,10 @@
   @include button-outlined.static-styles($query: $query);
 }
 
+// Legacy mixins
+
 @mixin without-ripple($query: feature-targeting.all()) {
-  @include button-base.static-styles-without-ripple($query: $query);
+  @include button-base.deprecated-static-styles-without-ripple($query: $query);
   @include button-text.static-styles($query: $query);
   @include button-filled.static-styles($query: $query);
   @include button-protected.static-styles($query: $query);
@@ -74,11 +73,9 @@
 }
 
 @mixin _theme-styles-without-ripple($query: feature-targeting.all()) {
-  @include button-text.deprecated-theme-styles-without-ripple($query: $query);
-  @include button-filled.deprecated-theme-styles-without-ripple($query: $query);
-  @include button-outlined.deprecated-theme-styles-without-ripple(
-    $query: $query
-  );
+  @include button-text.deprecated-theme-styles($query: $query);
+  @include button-filled.deprecated-theme-styles($query: $query);
+  @include button-outlined.deprecated-theme-styles($query: $query);
   // Elevation has been recategorized into theme styles. Keeping old elevation
   // styles here for backwards compatibility.
   .mdc-button--raised {