@angular/material-experimental 17.1.2 → 17.2.0-next.1

package/theming/_custom-tokens.scss

@@ -31,12 +31,23 @@
   );
 }
 
+/// Generates custom tokens for the app.
+/// @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 app
+@function app($systems, $exclude-hardcoded) {
+  @return (
+    background-color: map.get($systems, md-sys-color, background),
+    text-color: map.get($systems, md-sys-color, on-background),
+  );
+}
+
 /// Generates custom tokens for the mat-badge.
 /// @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-badge
 @function badge($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     background-color: map.get($systems, md-sys-color, error),
     text-color: map.get($systems, md-sys-color, on-error),
     disabled-state-background-color: mat.private-safe-color-change(
@@ -48,8 +59,55 @@
     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: _hardcode(0, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-full),
+    container-size: _hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: _hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: _hardcode(unset, $exclude-hardcoded),
+    small-size-container-size: _hardcode(6px, $exclude-hardcoded),
+    container-padding: _hardcode(0 4px, $exclude-hardcoded),
+    small-size-container-padding: _hardcode(0, $exclude-hardcoded),
+    container-offset: -12px 0,
+    small-size-container-offset: -6px 0,
+    container-overlap-offset: -12px,
+    small-size-container-overlap-offset: -6px,
+
+    // This size isn't in the M3 spec so we emit the same values as for `medium`.
+    large-size-container-size: _hardcode(16px, $exclude-hardcoded),
+    large-size-container-offset: -12px 0,
+    large-size-container-overlap-offset: -12px,
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
-  );
+    large-size-container-padding: _hardcode(0 4px, $exclude-hardcoded),
+    legacy-large-size-container-size: _hardcode(unset, $exclude-hardcoded),
+  ), (
+    primary: (
+      background-color: map.get($systems, md-sys-color, primary),
+      text-color: map.get($systems, md-sys-color, on-primary),
+      disabled-state-background-color: mat.private-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),
+    ),
+    secondary: (
+      background-color: map.get($systems, md-sys-color, secondary),
+      text-color: map.get($systems, md-sys-color, on-secondary),
+      disabled-state-background-color: mat.private-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),
+    ),
+    tertiary: (
+      background-color: map.get($systems, md-sys-color, tertiary),
+      text-color: map.get($systems, md-sys-color, on-tertiary),
+      disabled-state-background-color: mat.private-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),
+    ),
+    error: () // Default, no overrides needed
+  ));
 }
 
 /// Generates custom tokens for the mat-bottom-sheet.
@@ -72,7 +130,7 @@
 /// @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 (
+  @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),
@@ -96,7 +154,22 @@
     ),
     divider-color: map.get($systems, md-sys-color, outline),
     text-font: map.get($systems, md-sys-typescale, label-large-font),
-  );
+  ), (
+    // Color variants:
+    primary: (
+      selected-state-background-color: map.get($systems, md-sys-color, primary-container),
+      selected-state-text-color: map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed
+    tertiary: (
+      selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      selected-state-background-color: map.get($systems, md-sys-color, error-container),
+      selected-state-text-color: map.get($systems, md-sys-color, on-error-container),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-card.
@@ -120,7 +193,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mdc-chip
 @function chip($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, label-large),
     (
       container-shape: _hardcode((
@@ -128,11 +201,6 @@
         radius: 8px,
       ), $exclude-hardcoded),
       with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded),
-      elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
-      elevated-disabled-container-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.12,
-      ),
       label-text-color: map.get($systems, md-sys-color, on-surface-variant),
       disabled-label-text-color: mat.private-safe-color-change(
         map.get($systems, md-sys-color, on-surface),
@@ -152,8 +220,27 @@
       ),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+      outline-width: _hardcode(1px, $exclude-hardcoded),
+      outline-color: map.get($systems, md-sys-color, outline),
+      disabled-outline-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      focus-outline-color: map.get($systems, md-sys-color, on-surface-variant),
     ),
-  );
+  ), (
+    // Color variants:
+    primary: (
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-datepicker.
@@ -161,15 +248,15 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-datepicker
 @function datepicker($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     calendar-date-in-range-state-background-color:
       map.get($systems, md-sys-color, primary-container),
     calendar-date-in-comparison-range-state-background-color:
-      map.get($systems, md-sys-color, secondary-container),
-    calendar-date-in-overlap-range-state-background-color:
       map.get($systems, md-sys-color, tertiary-container),
+    calendar-date-in-overlap-range-state-background-color:
+      map.get($systems, md-sys-color, secondary-container),
     calendar-date-in-overlap-range-selected-state-background-color:
-      map.get($systems, md-sys-color, tertiary),
+      map.get($systems, md-sys-color, secondary),
     calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
     calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
     calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change(
@@ -223,6 +310,65 @@
     calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
     calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
     calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, secondary-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-secondary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-in-overlap-range-state-background-color:
+          map.get($systems, md-sys-color, primary-container),
+      calendar-date-in-overlap-range-selected-state-background-color:
+          map.get($systems, md-sys-color, primary),
+    ),
+    tertiary: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, tertiary-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-in-comparison-range-state-background-color:
+          map.get($systems, md-sys-color, primary-container),
+    ),
+    error: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, error-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-error),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error),
+    )
+  ));
+}
+
+/// Generates custom tokens for the dialog.
+/// @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 dialog
+@function dialog($systems, $exclude-hardcoded) {
+  @return (
+    container-max-width: _hardcode(560px, $exclude-hardcoded),
+    container-small-max-width: _hardcode(calc(100vw - 32px), $exclude-hardcoded),
+    container-min-width: _harcode(280px, $exclude-hardcoded),
+    actions-alignment: _hardcode(flex-end, $exclude-hardcoded),
+    content-padding: _hardcode(20px 24px, $exclude-hardcoded),
+    with-actions-content-padding: _hardcode(20px 24px 0, $exclude-hardcoded),
+    actions-padding: _hardcode(16px 24px, $exclude-hardcoded),
+
+    // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo
+    // element to size the title which in turn means that we can't set a specific padding
+    // and get the exact same space out of it. These values were determined through
+    // trial and error so that the first line of text is 24px from the top and the bottom
+    // of the text is 16px from the content under it.
+    headline-padding: _hardcode(6px 24px 13px, $exclude-hardcoded),
   );
 }
 
@@ -272,9 +418,9 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-fab
 @function fab($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     foreground-color: map.get($systems, md-sys-color, on-primary-container),
-    state-layer-color: map.get($systems, md-sys-color, primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
     ripple-color: mat.private-safe-color-change(
       map.get($systems, md-sys-color, on-primary-container),
       $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
@@ -286,7 +432,67 @@
       map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
     disabled-state-foreground-color: mat.private-safe-color-change(
       map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-  );
+  ), (
+    // Color variants
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      ripple-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      ripple-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  ));
+}
+
+/// Generates custom tokens for the mat-mini-fab.
+/// @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-mini-fab
+@function fab-small($systems, $exclude-hardcoded) {
+  @return ((
+    foreground-color: map.get($systems, md-sys-color, on-primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+    ripple-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-primary-container),
+      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+    ),
+    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),
+    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    disabled-state-container-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    disabled-state-foreground-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+  ), (
+    // Color variants
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      ripple-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      ripple-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-form-field.
@@ -294,7 +500,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-form-field
 @function form-field($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (mat.private-merge-all(
     _generate-typography-tokens($systems, container-text, body-large),
     _generate-typography-tokens($systems, subscript-text, body-small),
     (
@@ -324,7 +530,19 @@
       error-hover-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
       error-trailing-icon-color: map.get($systems, md-sys-color, error),
     )
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-grid-list.
@@ -349,6 +567,7 @@
     color: _hardcode(inherit, $exclude-hardcoded),
   ), (
     // Color variants:
+    surface: (), // Default, no overrides needed.
     primary: (
       color: map.get($systems, md-sys-color, primary),
     ),
@@ -369,7 +588,11 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-button
 @function text-button($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
+    horizontal-padding: _hardcode(12px, $exclude-hardcoded),
+    with-icon-horizontal-padding: _hardcode(16px, $exclude-hardcoded),
+    icon-spacing: _hardcode(8px, $exclude-hardcoded),
+    icon-offset: _hardcode(-4px, $exclude-hardcoded),
     state-layer-color: map.get($systems, md-sys-color, primary),
     disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     ripple-color: mat.private-safe-color-change(
@@ -379,7 +602,31 @@
     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),
     pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      state-layer-color: map.get($systems, md-sys-color, secondary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      )
+    ),
+    tertiary: (
+      state-layer-color: map.get($systems, md-sys-color, tertiary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      )
+    ),
+    error: (
+      state-layer-color: map.get($systems, md-sys-color, error),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, error),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      )
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-flat-button.
@@ -387,7 +634,10 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-flat-button
 @function filled-button($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
+    horizontal-padding: _hardcode(24px, $exclude-hardcoded),
+    icon-spacing: _hardcode(8px, $exclude-hardcoded),
+    icon-offset: _hardcode(-8px, $exclude-hardcoded),
     state-layer-color: map.get($systems, md-sys-color, on-primary),
     disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     ripple-color: mat.private-safe-color-change(
@@ -397,7 +647,31 @@
     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),
     pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      state-layer-color: map.get($systems, md-sys-color, on-secondary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-secondary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-tertiary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    error: (
+      state-layer-color: map.get($systems, md-sys-color, on-error),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-error),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-raised-button.
@@ -405,7 +679,10 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-raised-button
 @function elevated-button($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
+    horizontal-padding: _hardcode(24px, $exclude-hardcoded),
+    icon-spacing: _hardcode(8px, $exclude-hardcoded),
+    icon-offset: _hardcode(-8px, $exclude-hardcoded),
     state-layer-color: map.get($systems, md-sys-color, primary),
     disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     ripple-color: mat.private-safe-color-change(
@@ -415,7 +692,31 @@
     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),
     pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      state-layer-color: map.get($systems, md-sys-color, secondary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      state-layer-color: map.get($systems, md-sys-color, tertiary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    error: (
+      state-layer-color: map.get($systems, md-sys-color, error),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, error),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-outlined-button.
@@ -423,7 +724,10 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-outlined-button
 @function outlined-button($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
+    horizontal-padding: _hardcode(24px, $exclude-hardcoded),
+    icon-spacing: _hardcode(8px, $exclude-hardcoded),
+    icon-offset: _hardcode(-8px, $exclude-hardcoded),
     state-layer-color: map.get($systems, md-sys-color, primary),
     disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
     ripple-color: mat.private-safe-color-change(
@@ -433,7 +737,31 @@
     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),
     pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      state-layer-color: map.get($systems, md-sys-color, secondary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      state-layer-color: map.get($systems, md-sys-color, tertiary),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    error: (
+      state-layer-color: map.get($systems, md-sys-color, error),
+      ripple-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, error),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-icon-button.
@@ -496,9 +824,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-option
 @function option($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
-    _generate-typography-tokens($systems, label-text, label-large),
-    (
+  @return ((
       selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
       label-text-color: map.get($systems, md-sys-color, on-surface),
       hover-state-layer-color: mat.private-safe-color-change(
@@ -510,8 +836,33 @@
         $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
       ),
       selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
+
+      // According to the spec the options have to be `label-large` in all typography
+      // dimensions, however this is inconsistent with the designs and with MDC's
+      // own implementation. This appears to be a bug in the spec, because MDC overrides
+      // the font size and weight to be `body-large` (see b/261838263). We make the same
+      // override here so the label looks correct.
+      label-text-size: map.get($systems, md-sys-typescale, body-large-size),
+      label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
+      label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+      label-text-line-height: map.get($systems, md-sys-typescale, label-large-line-height),
+      label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+  ), (
+    // Color variants:
+    primary: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, primary-container),
     ),
-  );
+    secondary: (), // Default, no overrides needed
+    tertiary: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, tertiary-container),
+    ),
+    error: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, error-container),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-paginator.
@@ -532,16 +883,98 @@
   );
 }
 
+/// Generates custom tokens for the full variant of mat-pseudo-checkbox.
+/// @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 full variant of mat-pseudo-checkbox
+@function full-pseudo-checkbox($systems, $exclude-hardcoded) {
+  $disabled-color: mat.private-safe-color-change(
+    map.get($systems, md-sys-color, on-surface), $alpha: 0.38);
+
+  @return ((
+    selected-icon-color: map.get($systems, md-sys-color, primary),
+    selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
+    unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
+    disabled-unselected-icon-color: $disabled-color,
+    disabled-selected-icon-color: $disabled-color,
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: (
+      selected-icon-color: map.get($systems, md-sys-color, error),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-error),
+    )
+  ));
+}
+
+/// Generates custom tokens for the minimal variant of mat-pseudo-checkbox.
+/// @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 minimal variant of mat-pseudo-checkbox
+@function minimal-pseudo-checkbox($systems, $exclude-hardcoded) {
+  @return ((
+    selected-checkmark-color: map.get($systems, md-sys-color, primary),
+    disabled-selected-checkmark-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      selected-checkmark-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-checkmark-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-checkmark-color: map.get($systems, md-sys-color, error),
+    )
+  ));
+}
+
+/// Generates custom tokens for mat-checkbox.
+/// @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 mat-checkbox
+@function checkbox($systems, $exclude-hardcoded) {
+  @return (
+    disabled-label-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+  );
+}
+
+
 /// Generates custom tokens for the mat-radio.
 /// @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-radio
 @function radio($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     ripple-color: map.get($systems, md-sys-color, on-surface),
     checked-ripple-color: map.get($systems, md-sys-color, primary),
-    disabled-label-color: map.get($systems, md-sys-color, on-surface),
-  );
+    disabled-label-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed
+    secondary: (
+      checked-ripple-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      checked-ripple-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      checked-ripple-color: map.get($systems, md-sys-color, error),
+    ),
+  ));
 }
 
 /// Generates custom tokens for the mat-ripple.
@@ -559,7 +992,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-select
 @function select($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (mat.private-merge-all(
     _generate-typography-tokens($systems, trigger-text, body-large),
     (
       panel-background-color: map.get($systems, md-sys-color, surface-container),
@@ -573,7 +1006,19 @@
       focused-arrow-color: map.get($systems, md-sys-color, primary),
       invalid-arrow-color: map.get($systems, md-sys-color, error),
     )
-  );
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed
+    secondary: (
+      focused-arrow-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      focused-arrow-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      focused-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-sidenav.
@@ -593,27 +1038,17 @@
   );
 }
 
-/// Generates custom tokens for the mat-slide-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-slide-toggle
-@function slide-toggle($systems, $exclude-hardcoded) {
-  @return _generate-typography-tokens($systems, label-text, label-large);
-}
-
 /// Generates custom tokens for the mat-slider.
 /// @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-slider
 @function slider($systems, $exclude-hardcoded) {
-  $ripple-color: map.get($systems, md-sys-color, primary);
-  $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)});
-  $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)});
-
-  @return (
-    ripple-color: $ripple-color,
-    hover-state-layer-color: $hover-ripple-color,
-    focus-state-layer-color: $focus-ripple-color,
+  @return ((
+    ripple-color: map.get($systems, md-sys-color, primary),
+    hover-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, primary), $alpha: 0.05),
+    focus-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, primary), $alpha: 0.2),
     value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
     value-indicator-padding: _hardcode(0, $exclude-hardcoded),
     value-indicator-width: _hardcode(28px, $exclude-hardcoded),
@@ -623,7 +1058,31 @@
     value-indicator-text-transform: _hardcode(rotate(45deg), $exclude-hardcoded),
     value-indicator-container-transform:
       _hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded)
-  );
+  ), (
+    // Color variants
+    primary: (), // Default, no overrides needed
+    secondary: (
+      ripple-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, secondary), $alpha: 0.05),
+      focus-state-layer-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, secondary), $alpha: 0.2),
+    ),
+    tertiary: (
+      ripple-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, tertiary), $alpha: 0.05),
+      focus-state-layer-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, tertiary), $alpha: 0.2),
+    ),
+    error: (
+      ripple-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, error), $alpha: 0.05),
+      focus-state-layer-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, error), $alpha: 0.2),
+    ),
+  ));
 }
 
 /// Generates custom tokens for the mat-snack-bar.
@@ -651,7 +1110,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-stepper
 @function stepper($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (
     (
       container-color: map.get($systems, md-sys-color, surface),
       line-color: map.get($systems, md-sys-color, outline-variant),
@@ -665,9 +1124,11 @@
       ),
       header-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
       header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-      header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface),
-      header-icon-background-color: map.get($systems, md-sys-color, inverse-surface),
-      header-icon-foreground-color: map.get($systems, md-sys-color, inverse-on-surface),
+      header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-icon-background-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-icon-foreground-color: map.get($systems, md-sys-color, surface),
+      header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
       header-error-state-label-text-color: map.get($systems, md-sys-color, error),
       header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error),
       header-error-state-icon-background-color: _hardcode(transparent, $exclude-hardcoded),
@@ -676,10 +1137,40 @@
       header-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
       header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
       header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
-      header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-szie),
+      header-focus-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+      header-hover-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+      header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
       header-selected-state-label-text-weight: map.get(
           $systems, md-sys-typescale, title-small-weight),
-    ),
+      header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+    ), (
+      // Color variants
+      primary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+      ),
+      secondary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+      ),
+      tertiary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+      ),
+      error: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, error),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, error),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+      )
+    )
   );
 }
 
@@ -688,7 +1179,7 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-tab-header
 @function tab-header($systems, $exclude-hardcoded) {
-  @return mat.private-merge-all(
+  @return (mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, title-small),
     (
       divider-color: map.get($systems, md-sys-color, surface-variant),
@@ -706,7 +1197,22 @@
       active-focus-indicator-color: map.get($systems, md-sys-color, primary),
       active-hover-indicator-color: map.get($systems, md-sys-color, primary),
     ),
-  );
+  ), (
+    // Color variants
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, secondary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, tertiary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, error),
+      active-hover-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mdc-tab-indicator. (MDC has a tab-indicator component, but they
@@ -716,11 +1222,23 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mdc-tab-indicator
 @function tab-indicator($systems, $exclude-hardcoded) {
-  @return (
+  @return ((
     active-indicator-height: _hardcode(2px, $exclude-hardcoded),
     active-indicator-shape: _hardcode(0, $exclude-hardcoded),
     active-indicator-color: map.get($systems, md-sys-color, primary),
-  );
+  ), (
+    // Color variants
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  ));
 }
 
 /// Generates custom tokens for the mat-table.
@@ -748,11 +1266,11 @@
 /// @return {Map} A set of custom tokens for the mat-toolbar
 @function toolbar($systems, $exclude-hardcoded) {
   @return mat.private-merge-all(
-      _generate-typography-tokens($systems, title-text, title-large),
-      (
-        container-background-color: map.get($systems, md-sys-color, surface),
-        container-text-color: map.get($systems, md-sys-color, on-surface),
-      )
+    _generate-typography-tokens($systems, title-text, title-large),
+    (
+      container-background-color: map.get($systems, md-sys-color, surface),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+    )
   );
 }
 
@@ -769,3 +1287,496 @@
     node-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
   );
 }
+
+/// Generates custom token overrides for the mdc-checkbox color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-checkbox
+@function mdc-checkbox-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-container-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-container-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-container-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-pressed-container-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-pressed-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-container-color: map.get($systems, md-sys-color, error),
+      selected-focus-container-color: map.get($systems, md-sys-color, error),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-container-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-pressed-container-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+    )
+  );
+}
+
+/// Generates custom token overrides for the mdc-slider color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-slider
+@function mdc-slider-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-track-color: map.get($systems, md-sys-color, secondary),
+      focus-handle-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      handle-color: map.get($systems, md-sys-color, secondary),
+      hover-handle-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-container-color: map.get($systems, md-sys-color, secondary),
+      label-label-text-color: map.get($systems, md-sys-color, on-secondary),
+      pressed-handle-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-secondary),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      active-track-color: map.get($systems, md-sys-color, tertiary),
+      focus-handle-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      handle-color: map.get($systems, md-sys-color, tertiary),
+      hover-handle-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-container-color: map.get($systems, md-sys-color, tertiary),
+      label-label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      pressed-handle-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-tertiary),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: (
+      active-track-color: map.get($systems, md-sys-color, error),
+      focus-handle-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      handle-color: map.get($systems, md-sys-color, error),
+      hover-handle-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-container-color: map.get($systems, md-sys-color, error),
+      label-label-text-color: map.get($systems, md-sys-color, on-error),
+      pressed-handle-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-error),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-error),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-switch color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-switch
+@function mdc-switch-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-track-color: map.get($systems, md-sys-color, secondary),
+      selected-handle-color: map.get($systems, md-sys-color, on-secondary),
+      selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-track-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-track-color: map.get($systems, md-sys-color, secondary),
+      selected-track-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-handle-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-track-color: map.get($systems, md-sys-color, tertiary),
+      selected-track-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-focus-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-focus-track-color: map.get($systems, md-sys-color, error),
+      selected-handle-color: map.get($systems, md-sys-color, on-error),
+      selected-hover-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-track-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-pressed-handle-color: map.get($systems, md-sys-color, error-container),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-pressed-track-color: map.get($systems, md-sys-color, error),
+      selected-track-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-radio color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-radio
+@function mdc-radio-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-circular-progress color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-circular-progress
+@function mdc-circular-progress-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  );
+}
+
+/// Generates custom token overrides for the mdc-linear-progress color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-linear-progress
+@function mdc-linear-progress-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+      track-color: map.get($systems, md-sys-color, secondary-container),
+    ),
+    tertiary: (
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+      track-color: map.get($systems, md-sys-color, tertiary-container),
+    ),
+    error: (
+      active-indicator-color: map.get($systems, md-sys-color, error),
+      track-color: map.get($systems, md-sys-color, error-container),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-filled-form-field color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-filled-form-field
+@function mdc-filled-text-field-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      caret-color: map.get($systems, md-sys-color, secondary),
+      focus-active-indicator-color: map.get($systems, md-sys-color, secondary),
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      caret-color: map.get($systems, md-sys-color, tertiary),
+      focus-active-indicator-color: map.get($systems, md-sys-color, tertiary),
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      caret-color: map.get($systems, md-sys-color, error),
+      focus-active-indicator-color: map.get($systems, md-sys-color, error),
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-outlined-form-field color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-outlined-form-field
+@function mdc-outlined-text-field-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      caret-color: map.get($systems, md-sys-color, secondary),
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-outline-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      caret-color: map.get($systems, md-sys-color, tertiary),
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-outline-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      caret-color: map.get($systems, md-sys-color, error),
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-outline-color: map.get($systems, md-sys-color, error),
+    ),
+  );
+}
+
+/// Generates custom token overrides for the mdc-text-button color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-text-button
+@function mdc-text-button-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      hover-label-text-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary)
+    ),
+    tertiary: (
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      hover-label-text-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary)
+    ),
+    error: (
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      hover-label-text-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-text-color: map.get($systems, md-sys-color, error),
+      pressed-label-text-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, error)
+    )
+  );
+}
+
+/// Generates custom token overrides for the mdc-elevated-button color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-elevated-button
+@function mdc-elevated-button-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      hover-label-text-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary)
+    ),
+    tertiary: (
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      hover-label-text-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary)
+    ),
+    error: (
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      hover-label-text-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-text-color: map.get($systems, md-sys-color, error),
+      pressed-label-text-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, error)
+    )
+  );
+}
+
+/// Generates custom token overrides for the mdc-filled-button color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-filled-button
+@function mdc-filled-button-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      container-color: map.get($systems, md-sys-color, secondary),
+      focus-label-text-color: map.get($systems, md-sys-color, on-secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-secondary),
+      hover-label-text-color: map.get($systems, md-sys-color, on-secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-secondary),
+      label-text-color: map.get($systems, md-sys-color, on-secondary),
+      pressed-label-text-color: map.get($systems, md-sys-color, on-secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, on-secondary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-secondary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-secondary)
+    ),
+    tertiary: (
+      container-color: map.get($systems, md-sys-color, tertiary),
+      focus-label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
+      hover-label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
+      label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      pressed-label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary)
+    ),
+    error: (
+      container-color: map.get($systems, md-sys-color, error),
+      focus-label-text-color: map.get($systems, md-sys-color, on-error),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-error),
+      hover-label-text-color: map.get($systems, md-sys-color, on-error),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-error),
+      label-text-color: map.get($systems, md-sys-color, on-error),
+      pressed-label-text-color: map.get($systems, md-sys-color, on-error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, on-error),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-error),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-error),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-error),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-error)
+    )
+  );
+}
+
+/// Generates custom token overrides for the mdc-outlined-button color variants.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of color variant token overrides for the mdc-outlined-button
+@function mdc-outlined-button-color-variants($systems, $exclude-hardcoded) {
+  @return (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-outline-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      hover-label-text-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary)
+    ),
+    tertiary: (
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-outline-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      hover-label-text-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary)
+    ),
+    error: (
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-outline-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      hover-label-text-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-text-color: map.get($systems, md-sys-color, error),
+      pressed-label-text-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, error)
+    )
+  );
+}
+