@depup/angular__material 21.2.2-depup.19

package/chips/_m3-chip.scss

@@ -0,0 +1,81 @@
+@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-chip.
+@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, secondary, $color-variant);
+  }
+
+  @return (
+    base: (
+      chip-container-shape-radius: 8px,
+      chip-disabled-container-opacity: 1,
+      chip-elevated-container-color: transparent, // surface in M3, but not emitted in MDC
+      chip-flat-selected-outline-width: 0,
+      chip-outline-width: 1px,
+      chip-trailing-action-focus-opacity: 1,
+      chip-trailing-action-opacity: 1,
+      chip-with-avatar-avatar-shape-radius: 24px,
+      chip-with-avatar-avatar-size: 24px,
+      chip-with-avatar-disabled-avatar-opacity: 0.38,
+      chip-with-icon-disabled-icon-opacity: 0.38,
+      chip-with-icon-icon-size: 18px,
+      chip-with-trailing-icon-disabled-trailing-icon-opacity: 0.38,
+    ),
+    color: (
+      chip-disabled-label-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      chip-disabled-outline-color: m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+      chip-elevated-selected-container-color: map.get($system, secondary-container),
+      chip-flat-disabled-selected-container-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+      chip-focus-outline-color: map.get($system, on-surface-variant),
+      chip-focus-state-layer-color: map.get($system, on-surface-variant),
+      chip-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      chip-hover-state-layer-color: map.get($system, on-surface-variant),
+      chip-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      chip-label-text-color: map.get($system, on-surface-variant),
+      chip-outline-color: map.get($system, outline),
+      chip-selected-disabled-trailing-icon-color: map.get($system, on-surface),
+      chip-selected-focus-state-layer-color: map.get($system, on-secondary-container),
+      chip-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      chip-selected-hover-state-layer-color: map.get($system, on-secondary-container),
+      chip-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      chip-selected-label-text-color: map.get($system, on-secondary-container),
+      chip-selected-trailing-action-state-layer-color: map.get($system, on-secondary-container),
+      chip-selected-trailing-icon-color: map.get($system, on-secondary-container),
+      chip-trailing-action-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      chip-trailing-action-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+      chip-trailing-action-state-layer-color: map.get($system, on-surface-variant),
+      chip-with-icon-disabled-icon-color: map.get($system, on-surface),
+      chip-with-icon-icon-color: map.get($system, on-surface-variant),
+      chip-with-icon-selected-icon-color: map.get($system, on-secondary-container),
+      chip-with-trailing-icon-disabled-trailing-icon-color:map.get($system, on-surface),
+      chip-with-trailing-icon-trailing-icon-color: map.get($system, on-surface-variant),
+      chip-elevated-disabled-container-color: null,
+    ),
+    typography: (
+      chip-label-text-font: map.get($system, label-large-font),
+      chip-label-text-line-height: map.get($system, label-large-line-height),
+      chip-label-text-size: map.get($system, label-large-size),
+      chip-label-text-tracking: map.get($system, label-large-tracking),
+      chip-label-text-weight: map.get($system, label-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, -2);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    chip-container-height: list.nth((32px, 28px, 24px), $index),
+  );
+}

package/core/_core-theme.scss

@@ -0,0 +1,125 @@
+@use './theming/inspection';
+@use './ripple/ripple-theme';
+@use './option/option-theme';
+@use './option/optgroup-theme';
+@use './selection/pseudo-checkbox/pseudo-checkbox-theme';
+@use './typography/typography';
+@use './tokens/token-utils';
+@use './m2-app';
+@use './m3-app';
+@use 'ripple/m3-ripple';
+@use 'option/m3-option';
+@use 'option/m3-optgroup';
+@use 'selection/pseudo-checkbox/m3-pseudo-checkbox';
+@use 'sass:map';
+
+@mixin base($theme) {
+  $tokens: map.get(m2-app.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-app.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.base($theme);
+  @include option-theme.base($theme);
+  @include optgroup-theme.base($theme);
+  @include pseudo-checkbox-theme.base($theme);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m2-app.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-app.get-tokens($theme), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.color($theme);
+  @include option-theme.color($theme);
+  @include optgroup-theme.color($theme);
+  @include pseudo-checkbox-theme.color($theme);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-app.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-app.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.typography($theme);
+  @include option-theme.typography($theme);
+  @include optgroup-theme.typography($theme);
+  @include pseudo-checkbox-theme.typography($theme);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-app.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-app.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.density($theme);
+  @include option-theme.density($theme);
+  @include optgroup-theme.density($theme);
+  @include pseudo-checkbox-theme.density($theme);
+}
+
+@function _define-overrides() {
+  @return (
+    (
+      namespace: app,
+      tokens: token-utils.get-overrides(m3-app.get-tokens(), app),
+      prefix: 'app-'
+    ),
+    (
+      namespace: ripple,
+      tokens: token-utils.get-overrides(m3-ripple.get-tokens(), ripple),
+      prefix: 'ripple-'
+    ),
+    (
+      namespace: option,
+      tokens: token-utils.get-overrides(m3-option.get-tokens(), option),
+      prefix: 'option-'
+    ),
+    (
+      namespace: optgroup,
+      tokens: token-utils.get-overrides(m3-optgroup.get-tokens(), optgroup),
+      prefix: 'optgroup-'
+    ),
+    (
+      namespace: pseudo-checkbox,
+      tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox),
+      prefix: 'pseudo-checkbox-'
+    ),
+  );
+}
+
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@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/core/_core.scss

@@ -0,0 +1,50 @@
+@use './m3-app';
+@use './tokens/token-utils';
+@use './style/elevation';
+
+$fallbacks: m3-app.get-tokens();
+
+/// @deprecated This mixin is a no-op and is going to be removed in v21.
+@mixin core() {}
+
+// Emits the mat-app-background CSS class. This predefined class sets the
+// background color and text color of an element.
+@mixin app-background() {
+  // TODO: Move ripple styles to be dynamically loaded instead of in core.
+  // This variable is used as a fallback for the ripple element's
+  // background color. However, if it isn't defined anywhere, then MSS
+  // complains in its verification stage.
+  html {
+    --mat-sys-on-surface: initial;
+  }
+
+  // Wrapper element that provides the theme background when the
+  // user's content isn't inside of a `mat-sidenav-container`.
+  @at-root {
+    // Note: we need to emit fallback values here to avoid errors in internal builds.
+    .mat-app-background {
+      background-color: token-utils.slot(app-background-color, $fallbacks, transparent);
+      color: token-utils.slot(app-text-color, $fallbacks, inherit);
+    }
+  }
+}
+
+// Emits CSS classes for applying elevation. These classes follow the pattern
+// mat-elevation-z#, where # is the elevation number you want, from 0 to 24.
+// These predefined classes use the CSS box-shadow settings defined by the
+// Material Design specification.
+@mixin elevation-classes() {
+  @at-root {
+    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+    // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element
+    // is elevated.
+    @for $z-value from 0 through 24 {
+      $selector: elevation.$prefix + $z-value;
+      // We need the `mat-mdc-elevation-specific`, because some MDC mixins
+      // come with elevation baked in and we don't have a way of removing it.
+      .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
+        box-shadow: token-utils.slot('app-elevation-shadow-level-#{$z-value}', $fallbacks, none);
+      }
+    }
+  }
+}

package/core/_m2-app.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use './style/elevation';
+@use '../core/tokens/m2-utils';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
+  $color-tokens: (
+    app-background-color: map.get($system, background),
+    app-text-color: map.get($system, on-surface)
+  );
+  @for $zValue from 0 through 24 {
+    $color-tokens: map.set($color-tokens, 'app-elevation-shadow-level-#{$zValue}',
+        elevation.get-box-shadow($zValue, map.get($system, shadow)));
+  }
+
+  @return (
+    base: (),
+    color: $color-tokens,
+    typography: (),
+    density: (),
+  );
+}
+

package/core/_m3-app.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use './style/elevation';
+@use './tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the app.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  @return (
+    base: (),
+    color: (
+      app-background-color: map.get($system, background),
+      app-text-color: map.get($system, on-background),
+      app-elevation-shadow-level-0: elevation.get-box-shadow(0, map.get($system, shadow)),
+      app-elevation-shadow-level-1: elevation.get-box-shadow(1, map.get($system, shadow)),
+      app-elevation-shadow-level-2: elevation.get-box-shadow(2, map.get($system, shadow)),
+      app-elevation-shadow-level-3: elevation.get-box-shadow(3, map.get($system, shadow)),
+      app-elevation-shadow-level-4: elevation.get-box-shadow(4, map.get($system, shadow)),
+      app-elevation-shadow-level-5: elevation.get-box-shadow(5, map.get($system, shadow)),
+      app-elevation-shadow-level-6: elevation.get-box-shadow(6, map.get($system, shadow)),
+      app-elevation-shadow-level-7: elevation.get-box-shadow(7, map.get($system, shadow)),
+      app-elevation-shadow-level-8: elevation.get-box-shadow(8, map.get($system, shadow)),
+      app-elevation-shadow-level-9: elevation.get-box-shadow(9, map.get($system, shadow)),
+      app-elevation-shadow-level-10: elevation.get-box-shadow(10, map.get($system, shadow)),
+      app-elevation-shadow-level-11: elevation.get-box-shadow(11, map.get($system, shadow)),
+      app-elevation-shadow-level-12: elevation.get-box-shadow(12, map.get($system, shadow)),
+      app-elevation-shadow-level-13: elevation.get-box-shadow(13, map.get($system, shadow)),
+      app-elevation-shadow-level-14: elevation.get-box-shadow(14, map.get($system, shadow)),
+      app-elevation-shadow-level-15: elevation.get-box-shadow(15, map.get($system, shadow)),
+      app-elevation-shadow-level-16: elevation.get-box-shadow(16, map.get($system, shadow)),
+      app-elevation-shadow-level-17: elevation.get-box-shadow(17, map.get($system, shadow)),
+      app-elevation-shadow-level-18: elevation.get-box-shadow(18, map.get($system, shadow)),
+      app-elevation-shadow-level-19: elevation.get-box-shadow(19, map.get($system, shadow)),
+      app-elevation-shadow-level-20: elevation.get-box-shadow(20, map.get($system, shadow)),
+      app-elevation-shadow-level-21: elevation.get-box-shadow(21, map.get($system, shadow)),
+      app-elevation-shadow-level-22: elevation.get-box-shadow(22, map.get($system, shadow)),
+      app-elevation-shadow-level-23: elevation.get-box-shadow(23, map.get($system, shadow)),
+      app-elevation-shadow-level-24: elevation.get-box-shadow(24, map.get($system, shadow)),
+    ),
+    typography: (),
+    density: (),
+  );
+}

package/core/color/_all-color.scss

@@ -0,0 +1,17 @@
+@use '../theming/all-theme';
+@use '../theming/inspection';
+
+// Includes all of the color styles.
+@mixin all-component-colors($theme) {
+  @if not inspection.theme-has($theme, color) {
+    @error 'No color configuration specified.';
+  }
+
+  @include all-theme.all-component-colors(
+      inspection.theme-remove($theme, base, typography, density));
+}
+
+// @deprecated Use `all-component-colors`.
+@mixin angular-material-color($theme) {
+  @include all-component-colors($theme);
+}

package/core/density/private/_all-density.scss

@@ -0,0 +1,78 @@
+@use '../../../autocomplete/autocomplete-theme';
+@use '../../../button-toggle/button-toggle-theme';
+@use '../../../button/button-theme';
+@use '../../../button/fab-theme';
+@use '../../../button/icon-button-theme';
+@use '../../../card/card-theme';
+@use '../../../checkbox/checkbox-theme';
+@use '../../../chips/chips-theme';
+@use '../../../core/core-theme';
+@use '../../../dialog/dialog-theme';
+@use '../../../expansion/expansion-theme';
+@use '../../../form-field/form-field-theme';
+@use '../../../input/input-theme';
+@use '../../../list/list-theme';
+@use '../../../menu/menu-theme';
+@use '../../../paginator/paginator-theme';
+@use '../../../progress-bar/progress-bar-theme';
+@use '../../../progress-spinner/progress-spinner-theme';
+@use '../../../radio/radio-theme';
+@use '../../../select/select-theme';
+@use '../../../slide-toggle/slide-toggle-theme';
+@use '../../../slider/slider-theme';
+@use '../../../snack-bar/snack-bar-theme';
+@use '../../../stepper/stepper-theme';
+@use '../../../table/table-theme';
+@use '../../../tabs/tabs-theme';
+@use '../../../toolbar/toolbar-theme';
+@use '../../../tooltip/tooltip-theme';
+@use '../../../tree/tree-theme';
+@use '../../theming/inspection';
+
+// Includes all of the density styles.
+@mixin all-component-densities($theme) {
+  @if not inspection.theme-has($theme, density) {
+    @error 'No density configuration specified.';
+  }
+
+  // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
+  // specify a `density` config while setting `color` and `typography` to `null`. This is currently
+  // not possible as it would introduce a circular dependency for density because the `mat-core`
+  // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
+  // would then load `all-theme` again. This ultimately results a circular dependency.
+  @include autocomplete-theme.density($theme);
+  @include button-theme.density($theme);
+  @include button-toggle-theme.density($theme);
+  @include card-theme.density($theme);
+  @include checkbox-theme.density($theme);
+  @include chips-theme.density($theme);
+  @include core-theme.density($theme);
+  @include dialog-theme.density($theme);
+  @include expansion-theme.density($theme);
+  @include fab-theme.density($theme);
+  @include form-field-theme.density($theme);
+  @include icon-button-theme.density($theme);
+  @include input-theme.density($theme);
+  @include list-theme.density($theme);
+  @include menu-theme.density($theme);
+  @include paginator-theme.density($theme);
+  @include progress-bar-theme.density($theme);
+  @include progress-spinner-theme.density($theme);
+  @include radio-theme.density($theme);
+  @include select-theme.density($theme);
+  @include slide-toggle-theme.density($theme);
+  @include slider-theme.density($theme);
+  @include snack-bar-theme.density($theme);
+  @include stepper-theme.density($theme);
+  @include table-theme.density($theme);
+  @include tabs-theme.density($theme);
+  @include toolbar-theme.density($theme);
+  @include tooltip-theme.density($theme);
+  @include tree-theme.density($theme);
+}
+
+
+// @deprecated Use `all-component-densities`.
+@mixin angular-material-density($theme) {
+  @include all-component-densities($theme);
+}

package/core/focus-indicators/_private.scss

@@ -0,0 +1,126 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@angular/cdk';
+@use '../style/layout-common';
+@use '../theming/inspection';
+
+// Private sass variables that will be used as reference throughout component stylesheets.
+$default-border-width: 3px;
+$default-border-style: solid;
+$default-border-color: transparent;
+$default-border-radius: 4px;
+
+// Mixin that renders the focus indicator structural styles.
+@mixin strong-focus-indicators-structure() {
+  .mat-focus-indicator {
+    position: relative;
+
+    &::before {
+      @include layout-common.fill();
+      box-sizing: border-box;
+      pointer-events: none;
+      display: var(--mat-focus-indicator-display, none); // Hide the indicator by default.
+      border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
+      border-style: var(--mat-focus-indicator-border-style, #{$default-border-style});
+      border-color: var(--mat-focus-indicator-border-color, #{$default-border-color});
+      border-radius: var(--mat-focus-indicator-border-radius, #{$default-border-radius});
+    }
+
+    // By default, render the focus indicator when the focus indicator host element takes focus.
+    // Defining a pseudo element's content will cause it to render.
+    &:focus-visible::before {
+      content: '';
+    }
+  }
+
+  // Enable the indicator in high contrast mode.
+  @include cdk.high-contrast {
+    @include _customize-focus-indicators((display: block));
+  }
+}
+
+// Generates CSS variable declarations from a map.
+@mixin _output-variables($map) {
+  @each $key, $value in $map {
+    @if ($value) {
+      --#{$key}: #{$value};
+    }
+  }
+}
+
+// Mixin that dedups CSS variables for the strong-focus-indicators mixin.
+@mixin _customize-focus-indicators($config) {
+  $border-style: map.get($config, border-style);
+  $border-width: map.get($config, border-width);
+  $border-radius: map.get($config, border-radius);
+  $border-color: map.get($config, border-color);
+  $display: map.get($config, display);
+  $map: (
+    'mat-focus-indicator-border-style': $border-style,
+    'mat-focus-indicator-border-width': $border-width,
+    'mat-focus-indicator-border-radius': $border-radius,
+    'mat-focus-indicator-border-color': $border-color,
+    'mat-focus-indicator-display': $display,
+  );
+
+  @if (&) {
+    @include _output-variables($map);
+  }
+  @else {
+    // We use `html` here instead of `:root`, because the
+    // latter causes some issues with internal tooling.
+    html {
+      @include _output-variables($map);
+    }
+  }
+}
+
+@mixin strong-focus-indicators($config: ()) {
+  // Default focus indicator config.
+  $default-config: (
+    border-color: var(--mat-sys-secondary, black),
+    display: block,
+  );
+
+  // Merge default config with user config.
+  $config: map.merge($default-config, $config);
+
+  @include _customize-focus-indicators($config);
+
+  // Strong focus indicators currently need chip labels to have overflow visible.
+  // TODO(b/446709063) revisit the structure to find a way to remove this dependency.
+  @include _chip-label-overflow-visible();
+}
+
+@mixin strong-focus-indicators-color($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
+    @include _customize-focus-indicators((border-color: $theme-or-color));
+  }
+  @else {
+    $border-color: inspection.get-theme-color($theme-or-color, primary);
+    @include _customize-focus-indicators((border-color: $border-color));
+  }
+}
+
+@mixin strong-focus-indicators-theme($theme-or-color) {
+  @if meta.type-of($theme-or-color) == 'color' {
+    @include _customize-focus-indicators((border-color: $theme-or-color));
+  }
+  @else {
+    @if inspection.theme-has($theme-or-color, color) {
+      @include strong-focus-indicators-color($theme-or-color);
+    }
+  }
+}
+
+@mixin _chip-label-overflow-visible {
+  .mat-mdc-standard-chip {
+    // MDC sets `overflow: hidden` on these elements in order to truncate the text. This conflicts
+    // with how we structure and style the strong focus indicators so we need to override it.
+    .mdc-evolution-chip__cell--primary,
+    .mdc-evolution-chip__action--primary,
+    .mat-mdc-chip-action-label {
+      overflow: visible;
+    }
+  }
+}

package/core/m2/_index.scss

@@ -0,0 +1,52 @@
+// M2-specific theming APIs which are separated out into this file so they
+// can be renamed conditionally depending on whether we're in 1P or 3P.
+@forward './theming' show
+  define-light-theme,
+  define-dark-theme,
+  define-palette,
+  get-contrast-color-from-palette,
+  get-color-from-palette,
+  get-color-config,
+  get-typography-config,
+  get-density-config;
+
+@forward './palette' show
+  $red-palette,
+  $pink-palette,
+  $indigo-palette,
+  $purple-palette,
+  $deep-purple-palette,
+  $blue-palette,
+  $light-blue-palette,
+  $cyan-palette,
+  $teal-palette,
+  $green-palette,
+  $light-green-palette,
+  $lime-palette,
+  $yellow-palette,
+  $amber-palette,
+  $orange-palette,
+  $deep-orange-palette,
+  $brown-palette,
+  $grey-palette,
+  $gray-palette,
+  $blue-grey-palette,
+  $blue-gray-palette,
+  $light-theme-background-palette,
+  $dark-theme-background-palette,
+  $light-theme-foreground-palette,
+  $dark-theme-foreground-palette;
+
+@forward './typography' show
+  define-typography-level,
+  define-rem-typography-config,
+  define-typography-config,
+  define-legacy-typography-config;
+
+@forward './typography-utils' show
+  typography-level,
+  font-size,
+  line-height,
+  font-weight,
+  letter-spacing,
+  font-family;