@depup/angular__material 21.2.2-depup.19

package/tabs/_m2-tabs.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use '../core/theming/theming';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -4);
+
+  @return (
+    base: (
+      // This is specified both here and in the density tokens, because it determines the size of
+      // the tab itself and there are internal tests who don't configure the theme correctly.
+      tab-container-height: 48px,
+      tab-divider-color: transparent,
+      tab-divider-height: 0,
+      tab-active-indicator-height: 2px,
+      tab-active-indicator-shape: 0,
+    ),
+    color: private-get-color-palette-color-tokens($theme, primary),
+    typography: (
+      tab-label-text-font: map.get($system, label-small-font),
+      tab-label-text-size: map.get($system, label-small-size),
+      tab-label-text-tracking: map.get($system, label-small-tracking),
+      tab-label-text-line-height: map.get($system, label-small-line-height),
+      tab-label-text-weight: map.get($system, label-small-weight),
+    ),
+    density: (
+      tab-container-height: map.get((
+        0: 48px,
+        -1: 44px,
+        -2: 40px,
+        -3: 36px,
+        -4: 32px,
+      ), $density-scale),
+    ),
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function private-get-color-palette-color-tokens($theme, $color-variant, $exclude: ()) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+
+  $tokens: (
+    tab-disabled-ripple-color: map.get($system, on-surface-variant),
+    tab-pagination-icon-color: map.get($system, on-surface),
+    tab-inactive-label-text-color: map.get($system, on-surface-variant),
+    tab-active-label-text-color: map.get($system, primary),
+    tab-active-ripple-color: map.get($system, primary),
+    tab-inactive-ripple-color: map.get($system, primary),
+    tab-inactive-focus-label-text-color: map.get($system, on-surface-variant),
+    tab-inactive-hover-label-text-color: map.get($system, on-surface-variant),
+    tab-active-focus-label-text-color: map.get($system, primary),
+    tab-active-hover-label-text-color: map.get($system, primary),
+    tab-active-focus-indicator-color: map.get($system, primary),
+    tab-active-hover-indicator-color: map.get($system, primary),
+    tab-active-indicator-color: map.get($system, primary),
+    tab-background-color: map.get($system, primary),
+    tab-foreground-color: map.get($system, on-primary),
+  );
+
+  @each $token in $exclude {
+    $tokens: map.remove($tokens, $token);
+  }
+
+  @return $tokens;
+}

package/tabs/_m3-tabs.scss

@@ -0,0 +1,58 @@
+@use '../core/tokens/m3-utils';
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/theming/theming';
+@use '../core/tokens/m3';
+
+/// Generates the tokens for MDC tab
+/// @param {String} $color-variant The color variant to use for the component
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
+
+  @return (
+    base: (
+      tab-active-indicator-height: 2px,
+      tab-active-indicator-shape: 0,
+      tab-divider-height: 1px,
+    ),
+    color: (
+      tab-active-focus-indicator-color: map.get($system, primary),
+      tab-active-focus-label-text-color: map.get($system, on-surface),
+      tab-active-hover-indicator-color: map.get($system, primary),
+      tab-active-hover-label-text-color: map.get($system, on-surface),
+      tab-active-indicator-color: map.get($system, primary),
+      tab-active-label-text-color: map.get($system, on-surface),
+      tab-active-ripple-color: map.get($system, on-surface),
+      tab-divider-color: map.get($system, surface-variant),
+      tab-inactive-focus-label-text-color: map.get($system, on-surface),
+      tab-inactive-hover-label-text-color: map.get($system, on-surface),
+      tab-inactive-label-text-color: map.get($system, on-surface),
+      tab-inactive-ripple-color: map.get($system, on-surface),
+      tab-pagination-icon-color: map.get($system, on-surface),
+      tab-disabled-ripple-color: map.get($system, on-surface-variant),
+      tab-background-color: null,
+      tab-foreground-color: null,
+    ),
+    typography: (
+      tab-label-text-font: map.get($system, title-small-font),
+      tab-label-text-line-height: map.get($system, title-small-line-height),
+      tab-label-text-size: map.get($system, title-small-size),
+      tab-label-text-tracking: map.get($system, title-small-tracking),
+      tab-label-text-weight: map.get($system, title-small-weight),
+    ),
+    density: get-density-tokens(map.get($system, density-scale)),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -4);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    tab-container-height: list.nth((48px, 44px, 40px, 36px, 32px), $index),
+  );
+}

package/tabs/_tabs-theme.scss

@@ -0,0 +1,131 @@
+@use './m2-tabs';
+@use './m3-tabs';
+@use '../core/theming/inspection';
+@use '../core/typography/typography';
+@use '../core/tokens/token-utils';
+@use 'sass:map';
+
+@mixin base($theme) {
+  $tokens: map.get(m2-tabs.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-tabs.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-tab.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-tabs.get-tokens($theme, $color-variant), color);
+    @include token-utils.values($tokens);
+  } @else {
+    .mat-mdc-tab-group,
+    .mat-mdc-tab-nav-bar {
+      @include token-utils.values(
+          m2-tabs.private-get-color-palette-color-tokens($theme, primary,
+            $exclude: (tab-background-color, tab-foreground-color)));
+
+      &.mat-accent {
+        @include token-utils.values(
+          m2-tabs.private-get-color-palette-color-tokens($theme, secondary,
+            $exclude: (tab-background-color, tab-foreground-color)));
+      }
+
+      &.mat-warn {
+        @include token-utils.values(
+          m2-tabs.private-get-color-palette-color-tokens($theme, error,
+            $exclude: (tab-background-color, tab-foreground-color)));
+      }
+
+      &.mat-background-primary {
+        $tokens: m2-tabs.private-get-color-palette-color-tokens($theme, primary);
+        @include token-utils.values((
+          tab-background-color: map.get($tokens, tab-background-color),
+          tab-foreground-color: map.get($tokens, tab-foreground-color)
+        ));
+      }
+
+      &.mat-background-accent {
+        $tokens: m2-tabs.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values((
+          tab-background-color: map.get($tokens, tab-background-color),
+          tab-foreground-color: map.get($tokens, tab-foreground-color),
+        ));
+      }
+
+      &.mat-background-warn {
+        $tokens: m2-tabs.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values((
+          tab-background-color: map.get($tokens, tab-background-color),
+          tab-foreground-color: map.get($tokens, tab-foreground-color),
+        ));
+      }
+    }
+  }
+}
+
+/// Outputs typography theme styles for the mat-tab.
+/// @param {Map} $theme The theme to generate typography styles for.
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include token-utils.values(map.get(m3-tabs.get-tokens($theme), typography));
+  } @else {
+    .mat-mdc-tab-header {
+      @include token-utils.values(map.get(m2-tabs.get-tokens($theme), typography));
+    }
+  }
+}
+
+/// Outputs density theme styles for the mat-tab.
+/// @param {Map} $theme The theme to generate density styles for.
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include token-utils.values(map.get(m3-tabs.get-tokens($theme), density));
+  } @else {
+    .mat-mdc-tab-header {
+      @include token-utils.values(map.get(m2-tabs.get-tokens($theme), density));
+    }
+  }
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tab,
+      tokens: token-utils.get-overrides(m3-tabs.get-tokens(), tab)
+    ),
+  );
+}
+
+/// 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-tab.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@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/timepicker/_m2-timepicker.scss

@@ -0,0 +1,19 @@
+@use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
+  @return (
+    base: (
+      timepicker-container-shape: 4px,
+      timepicker-container-elevation-shadow: elevation.get-box-shadow(8),
+    ),
+    color: (
+      timepicker-container-background-color: map.get($system, surface)
+    ),
+    typography: (),
+    density: (),
+  );
+}

package/timepicker/_m3-timepicker.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../core/style/elevation';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mat-timepicker.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  @return (
+    base: (
+      timepicker-container-shape: map.get($system, corner-extra-small),
+    ),
+    color: (
+      timepicker-container-background-color: map.get($system, surface-container),
+      timepicker-container-elevation-shadow: elevation.get-box-shadow(2),
+    ),
+    typography: (),
+    density: (),
+  );
+}

package/timepicker/_timepicker-theme.scss

@@ -0,0 +1,81 @@
+@use 'sass:map';
+@use '../core/theming/inspection';
+@use '../core/typography/typography';
+@use './m2-timepicker';
+@use './m3-timepicker';
+@use '../core/tokens/token-utils';
+
+@mixin base($theme) {
+  $tokens: map.get(m2-timepicker.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-timepicker.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m2-timepicker.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-timepicker.get-tokens($theme), color);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-timepicker.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-timepicker.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-timepicker.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-timepicker.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: timepicker,
+      tokens: token-utils.get-overrides(m3-timepicker.get-tokens(), timepicker)
+    ),
+  );
+}
+
+/// 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-timepicker.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant The color variant to use for the component
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @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/toolbar/_m2-toolbar.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../core/theming/theming';
+@use '../core/tokens/m2-utils';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+
+  @return (
+    base: (),
+    color: private-get-color-palette-color-tokens(
+        map.get($system, surface), map.get($system, on-surface)),
+    typography: (
+      toolbar-title-text-font: map.get($system, title-small-font),
+      toolbar-title-text-line-height: map.get($system, title-small-line-height),
+      toolbar-title-text-size: map.get($system, title-small-size),
+      toolbar-title-text-tracking: map.get($system, title-small-tracking),
+      toolbar-title-text-weight: map.get($system, title-small-weight),
+    ),
+    density: (
+      toolbar-standard-height: map.get((
+        0: 64px,
+        -1: 60px,
+        -2: 56px,
+        -3: 52px,
+      ), $density-scale),
+      toolbar-mobile-height: map.get((
+        0: 56px,
+        -1: 52px,
+        -2: 48px,
+        -3: 44px,
+      ), $density-scale),
+    ),
+  );
+}
+
+// Generates the tokens used to theme the toolbar based on a palette.
+@function private-get-color-palette-color-tokens($background-color, $text-color) {
+  @return (
+    toolbar-container-background-color: $background-color,
+    toolbar-container-text-color: $text-color,
+  );
+}

package/toolbar/_m3-toolbar.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mat-toolbar.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-toolbar
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  @return (
+    base: (),
+    color: (
+      toolbar-container-background-color: map.get($system, surface),
+      toolbar-container-text-color: map.get($system, on-surface),
+    ),
+    typography: (
+      toolbar-title-text-font: map.get($system, title-large-font),
+      toolbar-title-text-line-height: map.get($system, title-large-line-height),
+      toolbar-title-text-size: map.get($system, title-large-size),
+      toolbar-title-text-tracking: map.get($system, title-large-tracking),
+      toolbar-title-text-weight: map.get($system, title-large-weight),
+    ),
+    density: get-density-tokens(map.get($system, density-scale)),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    toolbar-standard-height: list.nth((64px, 60px, 56px, 52px), $index),
+    toolbar-mobile-height: list.nth((56px, 52px, 48px, 44px), $index),
+  );
+}

package/toolbar/_toolbar-theme.scss

@@ -0,0 +1,114 @@
+@use 'sass:map';
+@use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
+@use '../core/typography/typography';
+@use './m2-toolbar';
+@use './m3-toolbar';
+
+@mixin _palette-styles($theme, $palette-name) {
+  $tokens: m2-toolbar.private-get-color-palette-color-tokens(
+    $background-color: inspection.get-theme-color($theme, $palette-name),
+    $text-color: inspection.get-theme-color($theme, $palette-name, default-contrast)
+  );
+  @include token-utils.values($tokens);
+}
+
+@mixin base($theme) {
+  $tokens: map.get(m2-toolbar.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-toolbar.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m2-toolbar.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-toolbar.get-tokens($theme), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-toolbar {
+      &.mat-primary {
+        $tokens: m2-toolbar.private-get-color-palette-color-tokens(
+          $background-color: inspection.get-theme-color($theme, primary),
+          $text-color: inspection.get-theme-color($theme, primary, default-contrast)
+        );
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-accent {
+        $tokens: m2-toolbar.private-get-color-palette-color-tokens(
+          $background-color: inspection.get-theme-color($theme, accent),
+          $text-color: inspection.get-theme-color($theme, accent, default-contrast)
+        );
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-warn {
+        $tokens: m2-toolbar.private-get-color-palette-color-tokens(
+          $background-color: inspection.get-theme-color($theme, warn),
+          $text-color: inspection.get-theme-color($theme, warn, default-contrast)
+        );
+        @include token-utils.values($tokens);
+      }
+    }
+  }
+}
+
+  @mixin typography($theme) {
+    $tokens: map.get(m2-toolbar.get-tokens($theme), typography);
+    @if inspection.get-theme-version($theme) == 1 {
+      $tokens: map.get(m3-toolbar.get-tokens($theme), typography);
+    }
+
+    @include token-utils.values($tokens);
+  }
+
+  @mixin density($theme) {
+    $tokens: map.get(m2-toolbar.get-tokens($theme), density);
+    @if inspection.get-theme-version($theme) == 1 {
+      $tokens: map.get(m3-toolbar.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: toolbar,
+      tokens: token-utils.get-overrides(m3-toolbar.get-tokens(), toolbar)
+    ),
+  );
+}
+
+/// 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());
+}
+
+@mixin theme($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @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/tooltip/_m2-tooltip.scss

@@ -0,0 +1,24 @@
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
+  @return (
+    base: (
+      tooltip-container-shape: 4px,
+      tooltip-supporting-text-line-height: 16px,
+    ),
+    color: (
+      tooltip-container-color: map.get($system, inverse-surface),
+      tooltip-supporting-text-color: map.get($system, inverse-on-surface),
+    ),
+    typography: (
+      tooltip-supporting-text-font: map.get($system, body-small-font),
+      tooltip-supporting-text-size: map.get($system, body-small-size),
+      tooltip-supporting-text-weight: map.get($system, body-small-weight),
+      tooltip-supporting-text-tracking: map.get($system, body-small-tracking),
+    ),
+    density: (),
+  );
+}

package/tooltip/_m3-tooltip.scss

@@ -0,0 +1,25 @@
+@use '../core/tokens/m3-utils';
+@use 'sass:map';
+@use '../core/tokens/m3';
+
+/// Generates the tokens for MDC plain-tooltip
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  @return (
+    base: (),
+    color: (
+      tooltip-container-color: map.get($system, inverse-surface),
+      tooltip-container-shape: map.get($system, corner-extra-small),
+      tooltip-supporting-text-color: map.get($system, inverse-on-surface),
+    ),
+    typography: (
+      tooltip-supporting-text-font: map.get($system, body-small-font),
+      tooltip-supporting-text-line-height: map.get($system, body-small-line-height),
+      tooltip-supporting-text-size: map.get($system, body-small-size),
+      tooltip-supporting-text-tracking: map.get($system, body-small-tracking),
+      tooltip-supporting-text-weight: map.get($system, body-small-weight)
+    ),
+    density: (),
+  );
+}