refactor: merge component token files (#30822)

* refactor: merge button tokens

* refactor: merge button toggle tokens

# Conflicts:
#	src/material/button-toggle/button-toggle.scss

* refactor: merge card tokens

* refactor: combine pseudocheckbox tokens

* refactor: merge form field tokens

* refactor: merge tabs tokens

* refactor: rename shadow tokens and delete button token file

* refactor: fix lint

* refactor: make form field overrides a list

* refactor: remove ambiguous tokens test

* refactor: remove unused warning test function

* refactor: fix form field selectors

* refactor: update density

* refactor: fix tabs tokens

Author: andrewseguin

src/material/button-toggle/BUILD.bazel

@@ -13,7 +13,7 @@ package(default_visibility = ["//visibility:public"])
 sass_library(
     name = "m3",
     srcs = [
-        "_m3-standard-button-toggle.scss",
+        "_m3-button-toggle.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -24,8 +24,7 @@ sass_library(
 sass_library(
     name = "m2",
     srcs = [
-        "_m2-legacy-button-toggle.scss",
-        "_m2-standard-button-toggle.scss",
+        "_m2-button-toggle.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",

src/material/button-toggle/_button-toggle-theme.scss

@@ -4,8 +4,7 @@
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
-@use './m2-legacy-button-toggle';
-@use './m2-standard-button-toggle';
+@use './m2-button-toggle';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-button-toggle.
@@ -16,12 +15,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-unthemable-tokens()
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-unthemable-tokens()
       );
     }
   }
@@ -38,12 +33,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-color-tokens($theme)
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-color-tokens($theme)
       );
     }
   }
@@ -57,12 +48,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-typography-tokens($theme)
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-typography-tokens($theme)
       );
     }
   }
@@ -76,30 +63,20 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-legacy-button-toggle.$prefix,
-        m2-legacy-button-toggle.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        m2-standard-button-toggle.$prefix,
-        m2-standard-button-toggle.get-density-tokens($theme)
+        m2-button-toggle.$prefix,
+        m2-button-toggle.get-density-tokens($theme)
       );
     }
   }
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $legacy-tokens: m2-legacy-button-toggle.get-token-slots();
-  $standard-tokens: m2-standard-button-toggle.get-token-slots();
+  $standard-tokens: m2-button-toggle.get-token-slots();
 
   @return (
     (
-      namespace: m2-legacy-button-toggle.$prefix,
-      tokens: $legacy-tokens,
-      prefix: 'legacy-',
-    ),
-    (
-      namespace: m2-standard-button-toggle.$prefix,
+      namespace: m2-button-toggle.$prefix,
       tokens: $standard-tokens,
     ),
   );
@@ -141,11 +118,11 @@
   );
   $mat-standard-button-toggle-tokens: token-utils.get-tokens-for(
     $tokens,
-    m2-standard-button-toggle.$prefix,
+    m2-button-toggle.$prefix,
     $options...
   );
   @include token-utils.create-token-values(
-    m2-standard-button-toggle.$prefix,
+    m2-button-toggle.$prefix,
     $mat-standard-button-toggle-tokens
   );
 }

src/material/button-toggle/_m2-standard-button-toggle.scss renamed to src/material/button-toggle/_m2-button-toggle.scss

@@ -12,9 +12,12 @@ $prefix: (mat, button-toggle);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    shape: 4px,
-    hover-state-layer-opacity: 0.04,
     focus-state-layer-opacity: 0.12,
+    hover-state-layer-opacity: 0.04,
+    legacy-focus-state-layer-opacity: 1,
+    legacy-height: 36px,
+    legacy-shape: 2px,
+    shape: 4px,
   );
 }
 
@@ -33,19 +36,31 @@ $prefix: (mat, button-toggle);
       $theme-divider-color);
 
   @return (
-    text-color: inspection.get-theme-color($theme, foreground, text),
     background-color: inspection.get-theme-color($theme, background, card),
-    state-layer-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
-    selected-state-background-color: inspection.get-theme-color(
-        $theme, background, selected-button),
-    selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
-    disabled-state-background-color: inspection.get-theme-color($theme, background, card),
-    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
     disabled-selected-state-background-color:
-      inspection.get-theme-color($theme, background, selected-disabled-button),
+        inspection.get-theme-color($theme, background, selected-disabled-button),
+    disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
+    disabled-state-background-color: inspection.get-theme-color($theme, background, card),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
     divider-color: $divider-color,
+    legacy-disabled-selected-state-background-color:
+        inspection.get-theme-color($theme, background, selected-disabled-button),
+    legacy-disabled-state-background-color:
+        inspection.get-theme-color($theme, background, disabled-button-toggle),
+    legacy-disabled-state-text-color:
+        inspection.get-theme-color($theme, foreground, disabled-button),
+    legacy-selected-state-background-color:
+        inspection.get-theme-color($theme, background, selected-button),
+    legacy-selected-state-text-color:
+        inspection.get-theme-color($theme, foreground, secondary-text),
+    legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
+    legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
+    selected-state-background-color:
+        inspection.get-theme-color($theme, background, selected-button),
+    selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
+    state-layer-color: sass-utils.safe-color-change(
+        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
+    text-color: inspection.get-theme-color($theme, foreground, text),
   );
 }
 
@@ -57,6 +72,11 @@ $prefix: (mat, button-toggle);
     label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
     label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
     label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    legacy-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    legacy-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    legacy-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    legacy-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    legacy-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }