feat(material-experimental/theming): add M3 button-toggle support (#2…

…8179)

(cherry picked from commit d12bd7f)

src/dev-app/theme-m3.scss

@@ -41,6 +41,7 @@ html {
   @include mat.autocomplete-theme($light-theme);
   @include mat.badge-theme($light-theme);
   @include mat.bottom-sheet-theme($light-theme);
+  @include mat.button-toggle-theme($light-theme);
   @include mat.card-theme($light-theme);
   @include mat.checkbox-theme($light-theme);
   @include mat.datepicker-theme($light-theme);
@@ -82,6 +83,7 @@ html {
   @include mat.autocomplete-color($dark-theme);
   @include mat.badge-color($dark-theme);
   @include mat.bottom-sheet-color($dark-theme);
+  @include mat.button-toggle-color($dark-theme);
   @include mat.card-color($dark-theme);
   @include mat.checkbox-color($dark-theme);
   @include mat.datepicker-color($dark-theme);
@@ -122,6 +124,7 @@ html {
     @include mat.autocomplete-density($scale-theme);
     @include mat.badge-density($scale-theme);
     @include mat.bottom-sheet-density($scale-theme);
+    @include mat.button-toggle-density($scale-theme);
     @include mat.card-density($scale-theme);
     @include mat.checkbox-density($scale-theme);
     @include mat.datepicker-density($scale-theme);

src/material-experimental/theming/_custom-tokens.scss

@@ -67,6 +67,38 @@
   );
 }
 
+/// Generates custom tokens for the mat-button-toggle.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-button-toggle
+@function button-toggle($systems, $exclude-hardcoded) {
+  @return (
+    shape: _hardcode(9999px, $exclude-hardcoded),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    text-color: map.get($systems, md-sys-color, on-surface),
+    background-color: _hardcode(transparent, $exclude-hardcoded),
+    state-layer-color: map.get($systems, md-sys-color, on-surface),
+    selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
+    selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container),
+    disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38,
+    ),
+    disabled-state-background-color: _hardcode(transparent, $exclude-hardcoded),
+    disabled-selected-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38,
+    ),
+    disabled-selected-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.12,
+    ),
+    divider-color: map.get($systems, md-sys-color, outline),
+    text-font: map.get($systems, md-sys-typescale, label-large-font),
+  );
+}
+
 /// Generates custom tokens for the mat-card.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

src/material-experimental/theming/_m3-density.scss

@@ -67,6 +67,9 @@ $_density-tokens: (
   (mat, slider): (),
   (mat, snack-bar): (),
   (mat, sort): (),
+  (mat, standard-button-toggle): (
+    height: (40px, 40px, 40px, 36px, 24px),
+  ),
   (mat, stepper): (
     header-height: (72px, 68px, 64px, 60px, 42px),
   ),

src/material-experimental/theming/_m3-tokens.scss

@@ -360,6 +360,11 @@
       custom-tokens.sort($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, standard-button-toggle),
+      custom-tokens.button-toggle($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, stepper),
       custom-tokens.stepper($systems, $exclude-hardcoded),

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -7,56 +8,89 @@
 @use '../core/style/sass-utils';
 
 @mixin base($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(
-        tokens-mat-legacy-button-toggle.$prefix,
-        tokens-mat-legacy-button-toggle.get-unthemable-tokens()
-    );
-    @include token-utils.create-token-values(
-        tokens-mat-standard-button-toggle.$prefix,
-        tokens-mat-standard-button-toggle.get-unthemable-tokens()
-    );
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(
+          tokens-mat-legacy-button-toggle.$prefix,
+          tokens-mat-legacy-button-toggle.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+          tokens-mat-standard-button-toggle.$prefix,
+          tokens-mat-standard-button-toggle.get-unthemable-tokens()
+      );
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-color-tokens($theme));
-    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
-    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
-      tokens-mat-legacy-button-toggle.get-density-tokens($theme));
-    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-      tokens-mat-standard-button-toggle.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
-    }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-standard-button-toggle.$prefix,
+        map.get($tokens, tokens-mat-standard-button-toggle.$prefix));
+  }
+}

src/material/core/tokens/m2/_index.scss

@@ -22,6 +22,7 @@
 @use './mat/slider' as tokens-mat-slider;
 @use './mat/snack-bar' as tokens-mat-snack-bar;
 @use './mat/sort' as tokens-mat-sort;
+@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
 @use './mat/stepper' as tokens-mat-stepper;
 @use './mat/tab-header' as tokens-mat-tab-header;
 @use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
@@ -92,6 +93,7 @@
       _get-tokens-for-module($theme, tokens-mat-autocomplete),
       _get-tokens-for-module($theme, tokens-mat-badge),
       _get-tokens-for-module($theme, tokens-mat-bottom-sheet),
+      _get-tokens-for-module($theme, tokens-mat-button-toggle),
       _get-tokens-for-module($theme, tokens-mat-card),
       _get-tokens-for-module($theme, tokens-mat-datepicker),
       _get-tokens-for-module($theme, tokens-mat-divider),