refactor: remove badge component token values from theme

src/material/badge/_badge-theme.scss

@@ -1,18 +1,22 @@
-@use 'sass:color';
-@use '../core/theming/theming';
+@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
+@use '../core/theming/theming';
 @use '../core/theming/validation';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-badge';
-@use '../core/tokens/token-utils';
-@use '../core/style/sass-utils';
+@use './m3-badge';
+@use 'sass:color';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-badge.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -25,12 +29,14 @@
 
 /// Outputs color theme styles for the mat-badge.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
-///      or error (If not specified, default error color will be used).
-@mixin color($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for
+///     the badge: primary, secondary, tertiary, or error (If not specified,
+///     default error color will be used).
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -59,7 +65,9 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -74,7 +82,9 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), density));
   } @else {
   }
 }
@@ -100,10 +110,13 @@
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
 ///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
 ///      or error (If not specified, default error color will be used).
-@mixin theme($theme, $options...) {
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

src/material/badge/_m3-badge.scss

@@ -1,81 +1,53 @@
 @use 'sass:map';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
 
 /// Generates custom tokens for the mat-badge.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-badge
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    background-color: map.get($systems, md-sys-color, error),
-    text-color: map.get($systems, md-sys-color, on-error),
-    disabled-state-background-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, error),
-      $alpha: 0.38),
-    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
-    text-font: map.get($systems, md-sys-typescale, label-small-font),
-    text-size: map.get($systems, md-sys-typescale, label-small-size),
-    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
-    small-size-text-size: m3-utils.hardcode(0, $exclude-hardcoded),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
-    line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-    legacy-small-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-    small-size-container-size: m3-utils.hardcode(6px, $exclude-hardcoded),
-    small-size-line-height: m3-utils.hardcode(6px, $exclude-hardcoded),
-    container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
-    small-size-container-padding: m3-utils.hardcode(0, $exclude-hardcoded),
-    container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
-    small-size-container-offset: m3-utils.hardcode(-6px 0, $exclude-hardcoded),
-    container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
-    small-size-container-overlap-offset: m3-utils.hardcode(-6px, $exclude-hardcoded),
-
-    // This size isn't in the M3 spec so we emit the same values as for `medium`.
-    large-size-container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
-    large-size-line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
-    large-size-container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
-    large-size-container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
-    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
-    large-size-container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-  );
+@function get-tokens($theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, error, $color-variant);
+  }
 
-  $variant-tokens: (
-    primary: (
-      background-color: map.get($systems, md-sys-color, primary),
-      text-color: map.get($systems, md-sys-color, on-primary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
+  $tokens: (
+    base: (
+      container-shape: map.get($system, corner-full),
+      container-size: 16px,
+      legacy-container-size: unset,
+      legacy-small-size-container-size: unset,
+      small-size-container-size: 6px,
+      container-padding: 0 4px,
+      small-size-container-padding: 0,
+      container-offset: -12px 0,
+      small-size-container-offset: -6px 0,
+      container-overlap-offset: -12px,
+      small-size-container-overlap-offset: -6px,
+      large-size-container-size: 16px,
+      large-size-container-offset: -12px 0,
+      large-size-container-overlap-offset: -12px,
+      large-size-container-padding: 0 4px,
+      legacy-large-size-container-size: unset,
     ),
-    secondary: (
-      background-color: map.get($systems, md-sys-color, secondary),
-      text-color: map.get($systems, md-sys-color, on-secondary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, secondary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
+    color: (
+      background-color: map.get($system, error),
+      text-color: map.get($system, on-error),
+      disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%),
+      disabled-state-text-color: map.get($system, on-error),
     ),
-    tertiary: (
-      background-color: map.get($systems, md-sys-color, tertiary),
-      text-color: map.get($systems, md-sys-color, on-tertiary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, tertiary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+    typography: (
+      text-font: map.get($system, label-small-font),
+      text-size: map.get($system, label-small-size),
+      text-weight: map.get($system, label-small-weight),
+      large-size-text-size: map.get($system, label-small-size),
+      small-size-text-size: 0,
+      line-height: 16px,
+      small-size-line-height: 6px,
+      large-size-line-height: 16px,
     ),
-    error: () // Default, no overrides needed
+    density: (),
   );
 
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+  @return $tokens;
 }

src/material/badge/badge.scss

@@ -1,17 +1,20 @@
 @use 'sass:color';
 @use '@angular/cdk';
 @use './m2-badge';
+@use './m3-badge';
 @use '../core/tokens/token-utils';
+@use '../core/tokens/m3-system';
 
 $default-size: 22px !default;
 $small-size: $default-size - 6;
 $large-size: $default-size + 6;
 
 $token-prefix: m2-badge.$prefix;
 $token-slots: m2-badge.get-token-slots();
+$fallbacks: m3-badge.get-tokens(m3-system.$theme-with-system-vars);
 
 @mixin _badge-size($size) {
-  @include token-utils.use-tokens($token-prefix, $token-slots) {
+  @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
     $prefix: if($size == 'medium', '', $size + '-size-');
     $legacy-size-var-name: 'legacy-#{$prefix}container-size';
     $size-var-name: '#{$prefix}container-size';
@@ -65,7 +68,7 @@ $token-slots: m2-badge.get-token-slots();
   box-sizing: border-box;
   pointer-events: none;
 
-  @include token-utils.use-tokens($token-prefix, $token-slots) {
+  @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
     background-color: token-utils.slot(background-color);
     color: token-utils.slot(text-color);
     font-family: token-utils.slot(text-font);
@@ -106,7 +109,7 @@ $token-slots: m2-badge.get-token-slots();
 }
 
 .mat-badge-disabled .mat-badge-content {
-  @include token-utils.use-tokens($token-prefix, $token-slots) {
+  @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
     background-color: token-utils.slot(disabled-state-background-color);
     color: token-utils.slot(disabled-state-text-color);
   }

src/material/button-toggle/_m3-button-toggle.scss

@@ -17,7 +17,7 @@ $prefix: (mat, button-toggle);
   $tokens: sass-utils.merge-all(
     m3-utils.generate-typography-tokens($systems, label-text, label-large),
   (
-    shape: map.get($systems, md-sys-shape, corner-full),
+    shape: map.get($systems, md-sys-shape, corner-extra-large),
     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),

src/material/button/_button-base.scss

@@ -6,7 +6,7 @@
 // color and opacity for states like hover, active, and focus. Additionally, adds styles to the
 // ripple and state container so that they fill the button, match the border radius, and avoid
 // pointer events.
-@mixin mat-private-button-interactive() {
+@mixin mat-private-button-interactive($focus-indicator-inherits-shape: true) {
   -webkit-tap-highlight-color: transparent;
 
   // The ripple container should match the bounds of the entire button.
@@ -50,10 +50,18 @@
   // The focus indicator should match the bounds of the entire button.
   .mat-focus-indicator {
     @include layout-common.fill();
+
+    @if ($focus-indicator-inherits-shape) {
+      border-radius: inherit;
+    }
   }
 
   &:focus > .mat-focus-indicator::before {
     content: '';
+
+    @if ($focus-indicator-inherits-shape) {
+      border-radius: inherit;
+    }
   }
 }
 

src/material/button/fab.scss

@@ -26,7 +26,8 @@
     transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
   flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
 
-  @include button-base.mat-private-button-interactive();
+  // Due to the shape of the FAB, inheriting the shape looks off. Disable it explicitly.
+  @include button-base.mat-private-button-interactive($focus-indicator-inherits-shape: false);
   @include style-private.private-animation-noop();
 
   &::before {

src/material/core/color/_all-color.scss

@@ -7,7 +7,7 @@
     @error 'No color configuration specified.';
   }
 
-  @include all-theme.all-component-themes(
+  @include all-theme.all-component-colors(
       inspection.theme-remove($theme, base, typography, density));
 }
 

src/material/core/theming/_all-theme.scss

@@ -125,6 +125,47 @@
   @include timepicker-theme.base($theme);
 }
 
+@mixin all-component-colors($theme) {
+  @include core-theme.color($theme);
+  @include card-theme.color($theme);
+  @include progress-bar-theme.color($theme);
+  @include tooltip-theme.color($theme);
+  @include form-field-theme.color($theme);
+  @include input-theme.color($theme);
+  @include select-theme.color($theme);
+  @include autocomplete-theme.color($theme);
+  @include dialog-theme.color($theme);
+  @include chips-theme.color($theme);
+  @include slide-toggle-theme.color($theme);
+  @include radio-theme.color($theme);
+  @include slider-theme.color($theme);
+  @include menu-theme.color($theme);
+  @include list-theme.color($theme);
+  @include paginator-theme.color($theme);
+  @include tabs-theme.color($theme);
+  @include checkbox-theme.color($theme);
+  @include button-theme.color($theme);
+  @include icon-button-theme.color($theme);
+  @include fab-theme.color($theme);
+  @include snack-bar-theme.color($theme);
+  @include table-theme.color($theme);
+  @include progress-spinner-theme.color($theme);
+  @include badge-theme.color($theme);
+  @include bottom-sheet-theme.color($theme);
+  @include button-toggle-theme.color($theme);
+  @include datepicker-theme.color($theme);
+  @include divider-theme.color($theme);
+  @include expansion-theme.color($theme);
+  @include grid-list-theme.color($theme);
+  @include icon-theme.color($theme);
+  @include sidenav-theme.color($theme);
+  @include stepper-theme.color($theme);
+  @include sort-theme.color($theme);
+  @include toolbar-theme.color($theme);
+  @include tree-theme.color($theme);
+  @include timepicker-theme.color($theme);
+}
+
 // @deprecated Use `all-component-themes`.
 @mixin angular-material-theme($theme) {
   @include all-component-themes($theme);

src/material/core/theming/_color-api-backwards-compatibility.scss

@@ -119,23 +119,20 @@ $_overrides-only: true;
     @include _color-variant-styles($theme, primary);
   }
   .mat-badge {
-    @include badge-theme.color($theme, $color-variant: primary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: primary);
   }
 
   .mat-accent {
     @include _color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
-    @include badge-theme.color($theme, $color-variant: tertiary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: tertiary);
   }
 
   .mat-warn {
     @include _color-variant-styles($theme, error);
   }
   .mat-badge-warn {
-    @include badge-theme.color($theme, $color-variant: error,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: error);
   }
 }