@depup/angular__material 21.2.2-depup.19

package/core/typography/_all-typography.scss

@@ -0,0 +1,104 @@
+@use './typography';
+@use '../m2/typography' as m2-typography;
+@use '../../autocomplete/autocomplete-theme';
+@use '../../badge/badge-theme';
+@use '../../bottom-sheet/bottom-sheet-theme';
+@use '../../button/button-theme';
+@use '../../button/icon-button-theme';
+@use '../../button/fab-theme';
+@use '../../button-toggle/button-toggle-theme';
+@use '../../card/card-theme';
+@use '../../checkbox/checkbox-theme';
+@use '../../chips/chips-theme';
+@use '../../divider/divider-theme';
+@use '../../table/table-theme';
+@use '../../datepicker/datepicker-theme';
+@use '../../dialog/dialog-theme';
+@use '../../expansion/expansion-theme';
+@use '../../grid-list/grid-list-theme';
+@use '../../icon/icon-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 '../../sidenav/sidenav-theme';
+@use '../../slide-toggle/slide-toggle-theme';
+@use '../../slider/slider-theme';
+@use '../../stepper/stepper-theme';
+@use '../../sort/sort-theme';
+@use '../../tabs/tabs-theme';
+@use '../../toolbar/toolbar-theme';
+@use '../../tooltip/tooltip-theme';
+@use '../../snack-bar/snack-bar-theme';
+@use '../../form-field/form-field-theme';
+@use '../../timepicker/timepicker-theme';
+@use '../../tree/tree-theme';
+@use '../theming/inspection';
+@use '../core-theme';
+
+// Includes all of the typographic styles.
+@mixin all-component-typographies($theme: null) {
+  // If no actual typography configuration has been specified, create a default one.
+  @if not inspection.theme-has($theme, typography) {
+    $theme: m2-typography.define-typography-config();
+  }
+
+  // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
+  // specify a `typography` config while setting `color` and `density` to `null`. This is currently
+  // not possible as it would introduce a circular dependency for typography because the `mat-core`
+  // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
+  // would then load `all-theme` again. This ultimately results a circular dependency.
+  @include badge-theme.typography($theme);
+  // Historically the typography hierarchy styles were included as part of this. We maintain this
+  // behavior for M2, but from M3 forward this is not included and should be explicitly @included
+  // by the user if desired.
+  @if (inspection.get-theme-version($theme) < 1) {
+    @include typography.typography-hierarchy($theme);
+  }
+  @include bottom-sheet-theme.typography($theme);
+  @include button-toggle-theme.typography($theme);
+  @include divider-theme.typography($theme);
+  @include datepicker-theme.typography($theme);
+  @include expansion-theme.typography($theme);
+  @include grid-list-theme.typography($theme);
+  @include icon-theme.typography($theme);
+  @include progress-spinner-theme.typography($theme);
+  @include sidenav-theme.typography($theme);
+  @include stepper-theme.typography($theme);
+  @include sort-theme.typography($theme);
+  @include toolbar-theme.typography($theme);
+  @include tree-theme.typography($theme);
+  @include core-theme.typography($theme);
+  @include card-theme.typography($theme);
+  @include progress-bar-theme.typography($theme);
+  @include tooltip-theme.typography($theme);
+  @include form-field-theme.typography($theme);
+  @include input-theme.typography($theme);
+  @include select-theme.typography($theme);
+  @include autocomplete-theme.typography($theme);
+  @include dialog-theme.typography($theme);
+  @include chips-theme.typography($theme);
+  @include slide-toggle-theme.typography($theme);
+  @include radio-theme.typography($theme);
+  @include slider-theme.typography($theme);
+  @include menu-theme.typography($theme);
+  @include list-theme.typography($theme);
+  @include paginator-theme.typography($theme);
+  @include tabs-theme.typography($theme);
+  @include checkbox-theme.typography($theme);
+  @include button-theme.typography($theme);
+  @include icon-button-theme.typography($theme);
+  @include fab-theme.typography($theme);
+  @include snack-bar-theme.typography($theme);
+  @include table-theme.typography($theme);
+  @include timepicker-theme.typography($theme);
+}
+
+// @deprecated Use `all-component-typographies`.
+@mixin angular-material-typography($theme: null) {
+  @include all-component-typographies($theme);
+}

package/core/typography/_typography-utils.scss

@@ -0,0 +1,31 @@
+@use 'sass:list';
+
+/// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
+/// the individual properties if a value that isn't allowed in the shorthand is passed in.
+/// @param {String} $font-size The font-size value.
+/// @param {String | Number} $font-weight The font-weight value.
+/// @param {String | Number} $line-height The line-height value.
+/// @param {String} $font-family The font-family value.
+/// @returns {String} The `font` shorthand value combining the given parts.
+@mixin font-shorthand($font-size, $font-weight, $line-height, $font-family) {
+  // If any of the values are set to `inherit`, we can't use the shorthand
+  // so we fall back to passing in the individual properties.
+  @if ($font-size == inherit or
+       $font-weight == inherit or
+       $line-height == inherit or
+       $font-family == inherit or
+       $font-size == null or
+       $font-weight == null or
+       $line-height == null or
+       $font-family == null) {
+
+    font-size: $font-size;
+    font-weight: $font-weight;
+    line-height: $line-height;
+    font-family: $font-family;
+  }
+  @else {
+    // Otherwise use the shorthand `font`, because it's the least amount of bytes.
+    font: $font-weight list.slash($font-size, $line-height) $font-family;
+  }
+}

package/core/typography/_typography.scss

@@ -0,0 +1,269 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+@use 'typography-utils';
+@use '../theming/inspection';
+
+// Definition and versioning functions live in their own files to avoid circular dependencies, but
+// we re-export them here so that historical imports from this file continue to work without needing
+// to be updated.
+@forward './versioning';
+
+@mixin typography-hierarchy($theme, $selector: '.mat-typography', $back-compat: false) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _m3-typography-hierarchy($theme, $selector, $back-compat);
+  }
+  @else {
+    @include _m2-typography-hierarchy($theme, $selector);
+  }
+}
+
+@function _get-selector($selectors, $prefix) {
+  $result: ();
+  @each $selector in $selectors {
+    // Don't add "naked" tag selectors, and don't nest prefix selector.
+    @if string.index($selector, '.') == 1 {
+      $result: list.append($result, $selector, $separator: comma);
+    }
+    // Don't nest the prefix selector in itself.
+    @if $selector != $prefix {
+      $result: list.append($result, '#{$prefix} #{$selector}', $separator: comma);
+    }
+  }
+  @return $result;
+}
+
+@mixin _m3-typography-level($theme, $selector-prefix, $level, $selectors, $margin: null) {
+  #{_get-selector($selectors, $selector-prefix)} {
+    // TODO(mmalerba): When we expose system tokens as CSS vars, we should change this to emit token
+    //  slots.
+    font: inspection.get-theme-typography($theme, $level, font);
+    letter-spacing: inspection.get-theme-typography($theme, $level, letter-spacing);
+    @if $margin != null {
+      margin: 0 0 $margin;
+    }
+  }
+}
+
+@mixin _m3-typography-hierarchy($theme, $selector-prefix, $add-m2-selectors) {
+ $levels: (
+   display-large: (
+     selectors: ('.mat-display-large', 'h1'),
+     m2-selectors: ('.mat-h1', '.mat-headline-1'),
+     margin: 0.5em
+   ),
+   display-medium: (
+     selectors: ('.mat-display-medium', 'h2'),
+     m2-selectors: ('.mat-h2', '.mat-headline-2'),
+     margin: 0.5em
+   ),
+   display-small: (
+     selectors: ('.mat-display-small', 'h3'),
+     m2-selectors: ('.mat-h3', '.mat-headline-3'),
+     margin: 0.5em
+   ),
+   headline-large: (
+     selectors: ('.mat-headline-large', 'h4'),
+     m2-selectors: ('.mat-h4', '.mat-headline-4'),
+     margin: 0.5em
+   ),
+   headline-medium: (
+     selectors: ('.mat-headline-medium', 'h5'),
+     m2-selectors: ('.mat-h5', '.mat-headline-5'),
+     margin: 0.5em
+   ),
+   headline-small: (
+     selectors: ('.mat-headline-small', 'h6'),
+     m2-selectors: ('.mat-h6', '.mat-headline-6'),
+     margin: 0.5em
+   ),
+   title-large: (
+     selectors: ('.mat-title-large'),
+     m2-selectors: ('.mat-subtitle-1'),
+   ),
+   title-medium: (
+     selectors: ('.mat-title-medium'),
+     m2-selectors: ('.mat-subtitle-2'),
+   ),
+   title-small: (
+     selectors: ('.mat-title-small')
+   ),
+   body-large: (
+     selectors: ('.mat-body-large', $selector-prefix),
+     m2-selectors: ('.mat-body', '.mat-body-strong', '.mat-body-2'),
+   ),
+   body-medium: (
+     selectors: ('.mat-body-medium')
+   ),
+   body-small: (
+     selectors: ('.mat-body-small')
+   ),
+   label-large: (
+     selectors: ('.mat-label-large')
+   ),
+   label-medium: (
+     selectors: ('.mat-label-medium')
+   ),
+   label-small: (
+     selectors: ('.mat-label-small'),
+     m2-selectors: ('.mat-small', '.mat-caption')
+   ),
+ );
+
+  @each $level, $options in $levels {
+    @if $add-m2-selectors {
+      $options: map.set($options, selectors,
+          list.join(map.get($options, selectors), map.get($options, m2-selectors) or ()));
+    }
+    $options: map.remove($options, m2-selectors);
+
+    // Apply styles for the level.
+    @include _m3-typography-level($theme, $selector-prefix, $level, $options...);
+
+    // Also style <p> inside body-large.
+    @if $level == body-large {
+      #{_get-selector(map.get($options, selectors), $selector-prefix)} {
+        p {
+          margin: 0 0 0.75em;
+        }
+      }
+    }
+  }
+}
+
+/// Emits baseline typographic styles based on a given config.
+/// @param {Map} $config-or-theme A typography config for an entire theme.
+/// @param {String} $selector Ancestor selector under which native elements, such as h1, will
+///     be styled.
+@mixin _m2-typography-hierarchy($theme, $selector) {
+  // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
+  // necessary if we want to allow people to overwrite the tag selectors. This is due to
+  // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.
+  .mat-h1,
+  .mat-headline-5,
+  #{$selector} .mat-h1,
+  #{$selector} .mat-headline-5,
+  #{$selector} h1 {
+    font: inspection.get-theme-typography($theme, headline-5, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-5, letter-spacing);
+    margin: 0 0 16px;
+  }
+
+  .mat-h2,
+  .mat-headline-6,
+  #{$selector} .mat-h2,
+  #{$selector} .mat-headline-6,
+  #{$selector} h2 {
+    font: inspection.get-theme-typography($theme, headline-6, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-6, letter-spacing);
+    margin: 0 0 16px;
+  }
+
+  .mat-h3,
+  .mat-subtitle-1,
+  #{$selector} .mat-h3,
+  #{$selector} .mat-subtitle-1,
+  #{$selector} h3 {
+    font: inspection.get-theme-typography($theme, subtitle-1, font);
+    letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
+    margin: 0 0 16px;
+  }
+
+  .mat-h4,
+  .mat-body-1,
+  #{$selector} .mat-h4,
+  #{$selector} .mat-body-1,
+  #{$selector} h4 {
+    font: inspection.get-theme-typography($theme, body-1, font);
+    letter-spacing: inspection.get-theme-typography($theme, body-1, letter-spacing);
+    margin: 0 0 16px;
+  }
+
+  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
+  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
+  // and h6 at 0.67em.
+  .mat-h5,
+  #{$selector} .mat-h5,
+  #{$selector} h5 {
+    @include typography-utils.font-shorthand(
+       // calc is used here to support css variables
+      calc(#{inspection.get-theme-typography($theme, body-2, font-size)} * 0.83),
+      inspection.get-theme-typography($theme, body-2, font-weight),
+      inspection.get-theme-typography($theme, body-2, line-height),
+      inspection.get-theme-typography($theme, body-2, font-family)
+    );
+
+    margin: 0 0 12px;
+  }
+
+  .mat-h6,
+  #{$selector} .mat-h6,
+  #{$selector} h6 {
+    @include typography-utils.font-shorthand(
+       // calc is used here to support css variables
+      calc(#{inspection.get-theme-typography($theme, body-2, font-size)} * 0.67),
+      inspection.get-theme-typography($theme, body-2, font-weight),
+      inspection.get-theme-typography($theme, body-2, line-height),
+      inspection.get-theme-typography($theme, body-2, font-family)
+    );
+
+    margin: 0 0 12px;
+  }
+
+  .mat-body-strong,
+  .mat-subtitle-2,
+  #{$selector} .mat-body-strong,
+  #{$selector} .mat-subtitle-2 {
+    font: inspection.get-theme-typography($theme, subtitle-2, font);
+    letter-spacing: inspection.get-theme-typography($theme, subtitle-2, letter-spacing);
+  }
+
+  .mat-body,
+  .mat-body-2,
+  #{$selector} .mat-body,
+  #{$selector} .mat-body-2,
+  #{$selector} {
+    font: inspection.get-theme-typography($theme, body-2, font);
+    letter-spacing: inspection.get-theme-typography($theme, body-2, letter-spacing);
+
+    p {
+      margin: 0 0 12px;
+    }
+  }
+
+  .mat-small,
+  .mat-caption,
+  #{$selector} .mat-small,
+  #{$selector} .mat-caption {
+    font: inspection.get-theme-typography($theme, caption, font);
+    letter-spacing: inspection.get-theme-typography($theme, caption, letter-spacing);
+  }
+
+  .mat-headline-1,
+  #{$selector} .mat-headline-1 {
+    font: inspection.get-theme-typography($theme, headline-1, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-1, letter-spacing);
+    margin: 0 0 56px;
+  }
+
+  .mat-headline-2,
+  #{$selector} .mat-headline-2 {
+    font: inspection.get-theme-typography($theme, headline-2, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-2, letter-spacing);
+    margin: 0 0 64px;
+  }
+
+  .mat-headline-3,
+  #{$selector} .mat-headline-3 {
+    font: inspection.get-theme-typography($theme, headline-3, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-3, letter-spacing);
+    margin: 0 0 64px;
+  }
+
+  .mat-headline-4,
+  #{$selector} .mat-headline-4 {
+    font: inspection.get-theme-typography($theme, headline-4, font);
+    letter-spacing: inspection.get-theme-typography($theme, headline-4, letter-spacing);
+    margin: 0 0 64px;
+  }
+}

package/core/typography/_versioning.scss

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../m2/typography' as m2-typography;
+
+// Whether a config is for the Material Design 2018 typography system.
+@function private-typography-is-2018-config($config) {
+  @return map.get($config, headline-1) != null;
+}
+
+// Whether a config is for the Material Design 2014 typography system.
+@function private-typography-is-2014-config($config) {
+  @return map.get($config, headline) != null;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2014 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// Components using this function should be migrated to normalize to the 2018 style config instead.
+// New components should not use this function.
+@function private-typography-to-2014-config($config) {
+  @if $config == null {
+    @return null;
+  }
+  @if not private-typography-is-2014-config($config) {
+    $args: (
+      display-4: map.get($config, headline-1),
+      display-3: map.get($config, headline-2),
+      display-2: map.get($config, headline-3),
+      display-1: map.get($config, headline-4),
+      headline: map.get($config, headline-5),
+      title: map.get($config, headline-6),
+      subheading-2: map.get($config, subtitle-1),
+      subheading-1: map.get($config, subtitle-2),
+      body-2: map.get($config, body-1),
+      body-1: map.get($config, body-2),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      font-family: map.get($config, font-family),
+    );
+    $non-null-args: ();
+    @each $key, $value in $args {
+      @if $value != null {
+        $non-null-args: map.merge($non-null-args, ($key: $value));
+      }
+    }
+    @return m2-typography.define-legacy-typography-config($non-null-args...);
+  }
+  @return $config;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2018 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// The $force option is used to allow components to specify that they want to re-map the keys, even
+// if the 2018 keys are already present. This allows those components to preserve the (incorrect)
+// behavior they had previously, when they called `private-typography-to-2014-config`. Eventually we
+// should clean this up, remove the $force option, and reconcile any screen diffs.
+@function private-typography-to-2018-config($config, $force: false) {
+  @if $config == null {
+    @return null;
+  }
+  @if $force or not private-typography-is-2018-config($config) {
+    @return (
+      headline-1: map.get($config, display-4),
+      headline-2: map.get($config, display-3),
+      headline-3: map.get($config, display-2),
+      headline-4: map.get($config, display-1),
+      headline-5: map.get($config, headline),
+      headline-6: map.get($config, title),
+      subtitle-1: map.get($config, subheading-2),
+      font-family: map.get($config, font-family),
+
+      // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2
+      // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018
+      // system.
+      subtitle-2: map.get($config, body-2),
+      body-1: map.get($config, subheading-1),
+
+      body-2: map.get($config, body-1),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      overline:
+        map.get($config, overline) or m2-typography.define-typography-level(12px, 32px, 500),
+    );
+  }
+  @return $config;
+}

package/datepicker/_datepicker-theme.scss

@@ -0,0 +1,132 @@
+@use 'sass:color';
+@use 'sass:map';
+@use './m2-datepicker';
+@use './m3-datepicker';
+@use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
+@use '../core/typography/typography';
+@use '../button/icon-button-theme';
+
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-datepicker.
+/// @param {Map} $theme The theme to generate base styles for.
+@mixin base($theme) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-datepicker.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-datepicker.
+/// @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) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-datepicker.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-datepicker-content, .mat-datepicker-toggle-active {
+      &.mat-accent {
+        $tokens: m2-datepicker.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
+      }
+
+      &.mat-warn {
+        $tokens: m2-datepicker.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
+      }
+    }
+  }
+}
+
+/// Outputs typography theme styles for the mat-datepicker.
+/// @param {Map} $theme The theme to generate typography styles for.
+@mixin typography($theme) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-datepicker.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin date-range-colors(
+  $range-color,
+  $comparison-color: rgba(#f9ab00, 0.2),
+  $overlap-color: #a8dab5,
+  $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)
+) {
+  @include overrides((
+    calendar-date-in-range-state-background-color: $range-color,
+    calendar-date-in-comparison-range-state-background-color: $comparison-color,
+    calendar-date-in-overlap-range-state-background-color: $overlap-color,
+    calendar-date-in-overlap-range-selected-state-background-color: $overlap-selected-color,
+  ));
+}
+
+/// Outputs density theme styles for the mat-datepicker.
+/// @param {Map} $theme The theme to generate density styles for.
+@mixin density($theme) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-datepicker.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    // TODO(crisbeto): move this into the structural styles
+    // once the icon button density is switched to tokens.
+
+    // Regardless of the user-passed density, we want the calendar
+    // previous/next buttons to remain at density -2
+    .mat-calendar-controls {
+      @include icon-button-theme.density(-2);
+    }
+  }
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: datepicker,
+      tokens: token-utils.get-overrides(m3-datepicker.get-tokens(), datepicker)
+    ),
+  );
+}
+
+/// 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-datepicker.
+/// @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);
+    }
+  }
+}