@depup/angular__material 21.2.2-depup.19

package/bottom-sheet/_m3-bottom-sheet.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mat-bottom-sheet.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+  @return (
+    base: (
+      bottom-sheet-container-shape: 28px,
+    ),
+    color: (
+      bottom-sheet-container-text-color: map.get($system, on-surface),
+      bottom-sheet-container-background-color: map.get($system, surface-container-low),
+    ),
+    typography: (
+      bottom-sheet-container-text-font: map.get($system, body-large-font),
+      bottom-sheet-container-text-line-height: map.get($system, body-large-line-height),
+      bottom-sheet-container-text-size: map.get($system, body-large-size),
+      bottom-sheet-container-text-tracking: map.get($system, body-large-tracking),
+      bottom-sheet-container-text-weight: map.get($system, body-large-weight),
+    ),
+    density: (),
+  );
+}

package/button/_button-theme.scss

@@ -0,0 +1,113 @@
+@use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
+@use '../core/typography/typography';
+@use './m2-button';
+@use './m3-button';
+@use 'sass:map';
+
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-button.
+/// @param {Map} $theme The theme to generate base styles for.
+@mixin base($theme) {
+  $tokens: map.get(m2-button.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-button.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-button.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant The color variant to use for
+///     the badge: primary, secondary, tertiary, or error (If not specified,
+///     default primary color will be used).
+@mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-button.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-button.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-mdc-button,
+    .mat-mdc-unelevated-button,
+    .mat-mdc-raised-button,
+    .mat-mdc-outlined-button,
+    .mat-tonal-button {
+      &.mat-primary {
+        $tokens: m2-button.private-get-color-palette-color-tokens($theme, primary);
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-accent {
+        $tokens: m2-button.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-warn {
+        $tokens: m2-button.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
+      }
+    }
+  }
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-button.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-button.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-button.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-button.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: button,
+      tokens: token-utils.get-overrides(m3-button.get-tokens(), button),
+    ),
+  );
+}
+
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+/// Outputs all (base, color, typography, and density) theme styles for the mat-button.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant: The color variant to use for the button: primary, secondary,
+//         tertiary, or error (If not specified, default primary color will be used).
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @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);
+    }
+  }
+}

package/button/_fab-theme.scss

@@ -0,0 +1,111 @@
+@use '../core/theming/inspection';
+@use './m2-fab';
+@use './m3-fab';
+@use '../core/tokens/token-utils';
+@use '../core/typography/typography';
+@use 'sass:map';
+
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-fab.
+/// @param {Map} $theme The theme to generate base styles for.
+@mixin base($theme) {
+  $tokens: map.get(m2-fab.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-fab.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-fab.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} $color-variant: The color variant to use for the fab: primary, secondary,
+//          or tertiary. (If not specified, default primary color will be used).
+@mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-fab.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-fab.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-mdc-fab, .mat-mdc-mini-fab {
+      &.mat-primary {
+        $tokens: m2-fab.private-get-color-palette-color-tokens($theme, primary);
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-accent {
+        $tokens: m2-fab.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-warn {
+        $tokens: m2-fab.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
+      }
+    }
+  }
+}
+
+/// Outputs typography theme styles for the mat-fab.
+/// @param {Map} $theme The theme to generate typography styles for.
+@mixin typography($theme) {
+  $tokens: map.get(m2-fab.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-fab.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs density theme styles for the mat-fab.
+/// @param {Map} $theme The theme to generate density styles for.
+@mixin density($theme) {
+  $tokens: map.get(m2-fab.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-fab.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: fab,
+      tokens: token-utils.get-overrides(m3-fab.get-tokens(), fab)
+    ),
+  );
+}
+
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant: The color variant to use for the fab
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @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);
+    }
+  }
+}

package/button/_icon-button-theme.scss

@@ -0,0 +1,136 @@
+@use 'sass:map';
+@use 'sass:math';
+@use './m2-icon-button';
+@use './m3-icon-button';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@use '../core/theming/theming';
+
+@mixin base($theme) {
+  $tokens: map.get(m2-icon-button.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-icon-button.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-icon-button.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant: The color variant to use for the
+//         button: primary, secondary, tertiary, or error.
+@mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-icon-button.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-icon-button.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-mdc-icon-button {
+      &.mat-primary {
+        $tokens: m2-icon-button.private-get-color-palette-color-tokens($theme, primary);
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-accent {
+        $tokens: m2-icon-button.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-warn {
+        $tokens: m2-icon-button.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
+      }
+    }
+  }
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-icon-button.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-icon-button.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include token-utils.values(map.get(m3-icon-button.get-tokens($theme), density));
+  } @else {
+    $icon-size: 24px;
+    $system: m2-utils.get-system($theme);
+    $density-scale: theming.clamp-density(map.get($system, density-scale), -5);
+    $size-map: (
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+      -5: 28px,
+    );
+    $calculated-size: map.get($size-map, $density-scale);
+
+    $density-tokens: map.get(m2-icon-button.get-tokens($theme), density);
+    $density-tokens: map.remove($density-tokens, icon-button-state-layer-size);
+    @include token-utils.values($density-tokens);
+
+    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
+    .mat-mdc-icon-button.mat-mdc-button-base {
+      // Match the styles that used to be present. This is necessary for backwards
+      // compat to match the previous implementations selector count (two classes).
+      --mdc-icon-button-state-layer-size: #{$calculated-size};
+      --mat-icon-button-state-layer-size: #{$calculated-size};
+
+      // TODO: Switch calculated-size to "var(--mat-icon-button-state-layer-size)"
+      // Currently fails validation because the variable is "undefined"
+      // in the sass stack.
+      // TODO: Switch icon-size to "var(--mat-icon-button-icon-size)". Currently
+      // fails validation because the variable is "undefined" in the sass stack.
+      width: var(--mat-icon-button-state-layer-size);
+      height: var(--mat-icon-button-state-layer-size);
+      padding: math.div($calculated-size - $icon-size, 2);
+    }
+  }
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: icon-button,
+      tokens: token-utils.get-overrides(m3-icon-button.get-tokens(), icon-button)
+    ),
+  );
+}
+
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+/// Outputs all (base, color, typography, and density) theme styles for the mat-icon-button.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant: The color variant to use for the button: primary,
+//         secondary, tertiary, or error.
+@mixin theme($theme, $color-variant: null) {
+    @if inspection.get-theme-version($theme) == 1 {
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @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);
+    }
+  }
+}

package/button/_m2-button.scss

@@ -0,0 +1,194 @@
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/style/elevation';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+
+  $scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $height: map.get((
+    0: 36px,
+    -1: 32px,
+    -2: 28px,
+    -3: 24px,
+  ), $scale);
+  $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($scale < -1) {
+    $touch-target-display: none;
+  }
+
+  @return (
+    base: (
+      button-filled-container-shape: 4px,
+      button-filled-horizontal-padding: 16px,
+      button-filled-icon-offset: -4px,
+      button-filled-icon-spacing: 8px,
+      button-filled-touch-target-size: $touch-target-size,
+      button-outlined-container-shape: 4px,
+      button-outlined-horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
+      button-outlined-icon-offset: -4px,
+      button-outlined-icon-spacing: 8px,
+      button-outlined-keep-touch-target: false,
+      button-outlined-outline-width: 1px,
+      button-outlined-touch-target-size: $touch-target-size,
+      button-protected-container-elevation-shadow: elevation.get-box-shadow(2),
+      button-protected-container-shape: 4px,
+      button-protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
+      button-protected-focus-container-elevation-shadow: elevation.get-box-shadow(4),
+      button-protected-horizontal-padding: 16px,
+      button-protected-hover-container-elevation-shadow: elevation.get-box-shadow(4),
+      button-protected-icon-offset: -4px,
+      button-protected-icon-spacing: 8px,
+      button-protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8),
+      button-protected-touch-target-size: $touch-target-size,
+      button-text-container-shape: 4px,
+      button-text-horizontal-padding: 8px,
+      button-text-icon-offset: 0,
+      button-text-icon-spacing: 8px,
+      button-text-with-icon-horizontal-padding: 8px,
+      button-text-touch-target-size: $touch-target-size,
+      button-tonal-container-shape: 4px,
+      button-tonal-horizontal-padding: 16px,
+      button-tonal-icon-offset: -4px,
+      button-tonal-icon-spacing: 8px,
+      button-tonal-touch-target-size: $touch-target-size,
+    ),
+    color: (
+      button-filled-container-color: map.get($system, surface),
+      button-filled-disabled-container-color: $disabled-container,
+      button-filled-disabled-label-text-color: $disabled,
+      button-filled-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-filled-label-text-color: map.get($system, on-surface),
+      button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-filled-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-filled-state-layer-color: map.get($system, on-surface),
+      button-outlined-disabled-label-text-color: $disabled,
+      button-outlined-disabled-outline-color: map.get($system, outline),
+      button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-outlined-label-text-color: map.get($system, on-surface),
+      button-outlined-outline-color: map.get($system, outline),
+      button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-outlined-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-outlined-state-layer-color: map.get($system, on-surface),
+      button-protected-container-color: map.get($system, surface),
+      button-protected-disabled-container-color: $disabled-container,
+      button-protected-disabled-label-text-color: $disabled,
+      button-protected-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-protected-label-text-color: map.get($system, on-surface),
+      button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-protected-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-protected-state-layer-color: map.get($system, on-surface),
+      button-text-disabled-label-text-color: $disabled,
+      button-text-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-text-label-text-color: map.get($system, on-surface),
+      button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-text-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-text-state-layer-color: map.get($system, on-surface),
+      button-tonal-container-color: map.get($system, surface),
+      button-tonal-disabled-container-color: $disabled-container,
+      button-tonal-disabled-label-text-color: $disabled,
+      button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant),
+      button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      button-tonal-label-text-color: map.get($system, on-surface),
+      button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      button-tonal-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      button-tonal-state-layer-color: map.get($system, on-surface),
+    ),
+    typography: (
+      button-filled-label-text-font: map.get($system, label-small-font),
+      button-filled-label-text-size: map.get($system, label-small-size),
+      button-filled-label-text-tracking: map.get($system, label-small-tracking),
+      button-filled-label-text-transform: none,
+      button-filled-label-text-weight: map.get($system, label-small-weight),
+      button-outlined-label-text-font: map.get($system, label-small-font),
+      button-outlined-label-text-size: map.get($system, label-small-size),
+      button-outlined-label-text-tracking: map.get($system, label-small-tracking),
+      button-outlined-label-text-transform: none,
+      button-outlined-label-text-weight: map.get($system, label-small-weight),
+      button-protected-label-text-font: map.get($system, label-small-font),
+      button-protected-label-text-size: map.get($system, label-small-size),
+      button-protected-label-text-tracking: map.get($system, label-small-tracking),
+      button-protected-label-text-transform: none,
+      button-protected-label-text-weight: map.get($system, label-small-weight),
+      button-text-label-text-font: map.get($system, label-small-font),
+      button-text-label-text-size: map.get($system, label-small-size),
+      button-text-label-text-tracking: map.get($system, label-small-tracking),
+      button-text-label-text-transform: none,
+      button-text-label-text-weight: map.get($system, label-small-weight),
+      button-tonal-label-text-font: map.get($system, label-small-font),
+      button-tonal-label-text-size: map.get($system, label-small-size),
+      button-tonal-label-text-tracking: map.get($system, label-small-tracking),
+      button-tonal-label-text-transform: none,
+      button-tonal-label-text-weight: map.get($system, label-small-weight),
+    ),
+    density: (
+      button-filled-container-height: $height,
+      button-filled-touch-target-display: $touch-target-display,
+      button-outlined-container-height: $height,
+      button-outlined-touch-target-display: $touch-target-display,
+      button-protected-container-height: $height,
+      button-protected-touch-target-display: $touch-target-display,
+      button-text-container-height: $height,
+      button-text-touch-target-display: $touch-target-display,
+      button-tonal-container-height: $height,
+      button-tonal-touch-target-display: $touch-target-display,
+    ),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+  // outlined-outline-color:
+  // TODO: we shouldn't have to set this since it's the same as the non-palette version, however
+  // there are a bunch of tests internally that depend on it. We should remove this and clean
+  // up the screenshots separately.
+  @return (
+    button-filled-container-color: map.get($system, primary),
+    button-filled-label-text-color: map.get($system, on-primary),
+    button-filled-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
+    button-filled-state-layer-color: map.get($system, on-primary),
+    button-outlined-label-text-color: map.get($system, primary),
+    button-outlined-outline-color: map.get($system, outline),
+    button-outlined-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
+    button-outlined-state-layer-color: map.get($system, primary),
+    button-protected-container-color: map.get($system, primary),
+    button-protected-label-text-color: map.get($system, on-primary),
+    button-protected-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
+    button-protected-state-layer-color: map.get($system, on-primary),
+    button-text-label-text-color: map.get($system, primary),
+    button-text-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
+    button-text-state-layer-color: map.get($system, primary),
+    button-tonal-container-color: map.get($system, primary),
+    button-tonal-label-text-color: map.get($system, on-primary),
+    button-tonal-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
+    button-tonal-state-layer-color: map.get($system, on-primary),
+  );
+}

package/button/_m2-fab.scss

@@ -0,0 +1,101 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
+@use '../core/style/elevation';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  // TODO: Use system colors instead of checking theme type
+  $is-dark: false;
+  @if (meta.type-of($theme) == map and map.get($theme, color)) {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+  }
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+  $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
+
+  @return (
+    base: (
+      fab-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-container-shape: 50%,
+      fab-touch-target-size: $touch-target-size,
+      fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-extended-container-height: 48px,
+      fab-extended-container-shape: 24px,
+      fab-extended-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-extended-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-extended-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+      fab-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+      fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
+      fab-small-container-shape: 50%,
+      fab-small-touch-target-size: $touch-target-size,
+      fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
+      fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
+    ),
+    color: (
+      fab-container-color: map.get($system, surface),
+      fab-disabled-state-container-color: $disabled-container,
+      fab-disabled-state-foreground-color: $disabled,
+      fab-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      fab-foreground-color: map.get($system, on-surface),
+      fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      fab-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      fab-small-container-color: map.get($system, surface),
+      fab-small-disabled-state-container-color: $disabled-container,
+      fab-small-disabled-state-foreground-color: $disabled,
+      fab-small-disabled-state-layer-color: map.get($system, on-surface-variant),
+      fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      fab-small-foreground-color: map.get($system, on-surface),
+      fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+      fab-small-ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+      fab-small-state-layer-color: map.get($system, on-surface),
+      fab-state-layer-color: map.get($system, on-surface),
+    ),
+    typography: (
+      fab-extended-label-text-font: map.get($system, label-small-font),
+      fab-extended-label-text-size: map.get($system, label-small-size),
+      fab-extended-label-text-tracking: map.get($system, label-small-tracking),
+      fab-extended-label-text-weight: map.get($system, label-small-weight)
+    ),
+    density: (
+      fab-small-touch-target-display: $touch-target-display,
+      fab-touch-target-display: $touch-target-display,
+    ),
+  );
+}
+
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+  @return (
+    fab-container-color: map.get($system, primary),
+    fab-foreground-color: map.get($system, on-primary),
+    fab-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
+    fab-small-container-color: map.get($system, primary),
+    fab-small-foreground-color: map.get($system, on-primary),
+    fab-small-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
+    fab-small-state-layer-color: map.get($system, on-primary),
+    fab-state-layer-color: map.get($system, on-primary),
+  );
+}