@ng-matero/extensions 17.1.3 → 17.2.0

package/core/theming/m3/_custom-tokens.scss

@@ -0,0 +1,315 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@angular/material-experimental' as matx;
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+
+/// Hardcode the given value, or null if hardcoded values are excluded.
+@function _hardcode($value, $exclude-hardcoded) {
+  @return if($exclude-hardcoded, null, $value);
+}
+
+/// Sets all of the standard typography tokens for the given token base name to the given typography
+/// level.
+/// @param {Map} $systems The MDC system tokens
+/// @param {String} $base-name The token base name to get the typography tokens for
+/// @param {String} $typography-level The typography level to base the token values on
+/// @return {Map} A map containing the typography tokens for the given base token name
+@function _generate-typography-tokens($systems, $base-name, $typography-level) {
+  $result: ();
+  @each $prop in (font, line-height, size, tracking, weight) {
+    $result: map.set($result, #{$base-name}-#{$prop},
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+  }
+  @return $result;
+}
+
+@function alert($systems, $exclude-hardcoded) {
+  @return (
+    container-shape: map.get($systems, md-sys-shape, corner-small),
+
+    outline-color: _hardcode(transparent, $exclude-hardcoded),
+    background-color: map.get($systems, md-sys-color, surface-container),
+    text-color: map.get($systems, md-sys-color, on-surface),
+    info-background-color: map.get(matx.$m3-blue-palette, 50),
+    info-text-color: _hardcode(white, $exclude-hardcoded),
+    success-background-color: map.get(matx.$m3-green-palette, 50),
+    success-text-color: _hardcode(white, $exclude-hardcoded),
+    warning-background-color: map.get(matx.$m3-orange-palette, 50),
+    warning-text-color: _hardcode(white, $exclude-hardcoded),
+    danger-background-color: map.get(matx.$m3-red-palette, 50),
+    danger-text-color: _hardcode(white, $exclude-hardcoded),
+  );
+}
+
+@function colorpicker($systems, $exclude-hardcoded) {
+  @return (
+    toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+  );
+}
+
+@function datetimepicker($systems, $exclude-hardcoded) {
+  @return ((
+    calendar-header-background-color: _hardcode(transparent, $exclude-hardcoded),
+    calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
+    calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
+    calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, primary),
+    calendar-date-focus-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+    ),
+    calendar-date-hover-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+    ),
+    toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-header-divider-color: map.get($systems, md-sys-color, outline-variant),
+    calendar-table-header-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
+    calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-date-outline-color: _hardcode(transparent, $exclude-hardcoded),
+    calendar-date-disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    container-background-color: map.get($systems, md-sys-color, surface-container-high),
+    container-text-color: map.get($systems, md-sys-color, on-surface),
+
+    clock-dial-background-color: map.get($systems, md-sys-color, surface-container-highest),
+    clock-cell-text-color: map.get($systems, md-sys-color, on-surface),
+    clock-cell-hover-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+    ),
+    clock-cell-disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    clock-cell-selected-state-background-color: map.get($systems, md-sys-color, primary),
+    clock-hand-background-color: map.get($systems, md-sys-color, primary),
+    time-input-active-state-text-color: map.get($systems, md-sys-color, on-primary-container),
+    time-input-active-state-background-color: map.get($systems, md-sys-color, primary-container),
+    time-input-focus-state-outline-color: map.get($systems, md-sys-color, primary),
+    time-input-focus-state-placeholder-text-color: map.get($systems, md-sys-color, on-primary-container),
+    time-input-text-color: map.get($systems, md-sys-color, on-surface),
+    time-input-background-color: map.get($systems, md-sys-color, surface-container-highest),
+    time-input-focus-state-background-color: map.get($systems, md-sys-color, primary-container),
+    time-input-warn-state-outline-color: map.get($systems, md-sys-color, error),
+    time-ampm-text-color: map.get($systems, md-sys-color, on-surface),
+    time-ampm-outline-color: map.get($systems, md-sys-color, outline),
+    time-ampm-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+    time-ampm-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+
+    container-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+    container-touch-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
+    container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
+    selector-container-shape: map.get($systems, md-sys-shape, corner-small),
+
+    calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
+    calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
+    calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    clock-text-size: map.get($systems, md-sys-typescale, title-small-size),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-secondary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, secondary),
+      clock-hand-background-color: map.get($systems, md-sys-color, secondary),
+      clock-cell-selected-state-background-color: map.get($systems, md-sys-color, secondary),
+      time-input-active-state-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      time-input-active-state-background-color: map.get($systems, md-sys-color, secondary-container),
+      time-input-focus-state-outline-color: map.get($systems, md-sys-color, secondary),
+      time-input-focus-state-placeholder-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      time-input-focus-state-background-color: map.get($systems, md-sys-color, secondary-container),
+      time-ampm-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      time-ampm-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+    ),
+    tertiary: (
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, tertiary),
+      clock-hand-background-color: map.get($systems, md-sys-color, tertiary),
+      clock-cell-selected-state-background-color: map.get($systems, md-sys-color, tertiary),
+      time-input-active-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      time-input-active-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+      time-input-focus-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      time-input-focus-state-placeholder-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      time-input-focus-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+      time-ampm-selected-state-text-color: map.get($systems, md-sys-color, on-error-container),
+      time-ampm-selected-state-background-color: map.get($systems, md-sys-color, error-container),
+    ),
+    error: (
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-error),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
+      clock-hand-background-color: map.get($systems, md-sys-color, error),
+      clock-cell-selected-state-background-color: map.get($systems, md-sys-color, error),
+      time-input-active-state-text-color: map.get($systems, md-sys-color, on-error-container),
+      time-input-active-state-background-color: map.get($systems, md-sys-color, error-container),
+      time-input-focus-state-outline-color: map.get($systems, md-sys-color, error),
+      time-input-focus-state-placeholder-text-color: map.get($systems, md-sys-color, on-error-container),
+      time-input-focus-state-background-color: map.get($systems, md-sys-color, error-container),
+      time-ampm-selected-state-text-color: map.get($systems, md-sys-color, on-primary-container),
+      time-ampm-selected-state-background-color: map.get($systems, md-sys-color, primary-container),
+    )
+  ));
+}
+
+@function drawer($systems, $exclude-hardcoded) {
+  @return (
+    container-shape: map.get($systems, md-sys-shape, corner-large),
+
+    container-background-color: map.get($systems, md-sys-color, surface),
+    container-text-color: map.get($systems, md-sys-color, on-surface-variant),
+  );
+}
+
+@function grid($systems, $exclude-hardcoded) {
+  @return (
+    container-shape:  map.get($systems, md-sys-shape, corner-medium),
+    table-cell-min-width: _hardcode(80px, $exclude-hardcoded),
+
+    outline-color: map.get($systems, md-sys-color, outline-variant),
+    column-menu-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    column-menu-divider-color: map.get($systems, md-sys-color, outline-variant),
+    table-footer-background-color: map.get($systems, md-sys-color, surface-container),
+    table-row-striped-background-color: map.get($systems, md-sys-color, surface-container),
+    table-row-hover-background-color: map.get($systems, md-sys-color, secondary-container),
+    table-row-selected-background-color: map.get($systems, md-sys-color, secondary-container),
+    table-row-selected-hover-background-color: map.get($systems, md-sys-color, primary-container),
+    table-cell-selected-outline-color: map.get($systems, md-sys-color, primary),
+    resizable-handle-active-background-color: map.get($systems, md-sys-color, primary),
+    resizable-handle-hover-background-color: map.get($systems, md-sys-color, primary),
+    resizable-handle-disabled-background-color: map.get($systems, md-sys-color, outline-variant),
+  );
+}
+
+@function loader($systems, $exclude-hardcoded) {
+  @return (
+    backdrop-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, surface),
+      $alpha: 0.75
+    ),
+  );
+}
+
+@function popover($systems, $exclude-hardcoded) {
+  @return (
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+
+    outline-color: map.get($systems, md-sys-color, surface-container),
+    background-color: map.get($systems, md-sys-color, surface-container),
+    text-color: map.get($systems, md-sys-color, on-surface),
+  );
+}
+
+@function progress($systems, $exclude-hardcoded) {
+  @return (
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+
+    track-color: map.get($systems, md-sys-color, surface-container),
+    indicator-color: map.get($systems, md-sys-color, outline-variant),
+    text-color: map.get($systems, md-sys-color, on-surface),
+    info-indicator-color: map.get(matx.$m3-blue-palette, 50),
+    info-text-color:_hardcode(white, $exclude-hardcoded),
+    success-indicator-color: map.get(matx.$m3-green-palette, 50),
+    success-text-color:_hardcode(white, $exclude-hardcoded),
+    warning-indicator-color: map.get(matx.$m3-orange-palette, 50),
+    warning-text-color:_hardcode(white, $exclude-hardcoded),
+    danger-indicator-color: map.get(matx.$m3-red-palette, 50),
+    danger-text-color:_hardcode(white, $exclude-hardcoded),
+  );
+}
+
+@function select($systems, $exclude-hardcoded) {
+  @return ((
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+
+    container-text-color: map.get($systems, md-sys-color, on-surface),
+    placeholder-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    disabled-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+
+    multiple-value-background-color: _hardcode(transparent, $exclude-hardcoded),
+    multiple-value-outline-color: map.get($systems, md-sys-color, outline),
+    multiple-value-icon-hover-background-color: map.get($systems, md-sys-color, outline-variant),
+
+    clear-icon-color: map.get($systems, md-sys-color, on-surface),
+    clear-icon-hover-color: map.get($systems, md-sys-color, error),
+
+    enabled-arrow-color: map.get($systems, md-sys-color, on-surface),
+    disabled-arrow-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    invalid-arrow-color: map.get($systems, md-sys-color, error),
+
+    panel-background-color: map.get($systems, md-sys-color, surface-container),
+    panel-divider-color: map.get($systems, md-sys-color, outline),
+    optgroup-label-text-color: map.get($systems, md-sys-color, on-surface),
+    option-label-text-color: map.get($systems, md-sys-color, on-surface),
+    option-selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
+    option-selected-state-text-color: map.get($systems, md-sys-color, on-surface),
+    option-hover-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+    ),
+    option-disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+  ), (
+    // Color variants:
+    primary: (
+      option-selected-state-background-color: map.get($systems, md-sys-color, primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      option-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+    ),
+    error: (
+      option-selected-state-background-color: map.get($systems, md-sys-color, error-container),
+    )
+  ));
+}
+
+@function split($systems, $exclude-hardcoded) {
+  @return ((
+    gutter-background-color: map.get($systems, md-sys-color, outline-variant),
+    gutter-hover-state-background-color: map.get($systems, md-sys-color, primary),
+  ), (
+    primary: (),
+    secondary: (
+      gutter-hover-state-background-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      gutter-hover-state-background-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      gutter-hover-state-background-color: map.get($systems, md-sys-color, error),
+    )
+  ));
+}

package/core/theming/m3/_definition.scss

@@ -0,0 +1,104 @@
+// This file contains functions used to define Angular Material theme objects.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@angular/material-experimental' as matx;
+@use './m3-tokens';
+@use './config-validation';
+
+/// Map key used to store internals of theme config.
+$internals: _mat-theming-internals-do-not-access;
+/// The theme version of generated themes.
+$theme-version: 1;
+
+/// Defines an Angular Material theme object with color, typography, and density settings.
+/// @param {Map} $config The theme configuration
+/// @return {Map} A theme object
+@function define-theme($config: ()) {
+  $err: config-validation.validate-theme-config($config);
+  @if $err {
+    @error $err;
+  }
+
+  @return mat.private-deep-merge-all(
+      define-colors(map.get($config, color) or ()),
+      define-typography(map.get($config, typography) or ()),
+      define-density(map.get($config, density) or ()),
+      ($internals: (base-tokens: m3-tokens.generate-base-tokens())),
+  );
+}
+
+/// Defines an Angular Material theme object with color settings.
+/// @param {Map} $config The color configuration
+/// @return {Map} A theme object
+@function define-colors($config: ()) {
+  $err: config-validation.validate-color-config($config);
+  @if $err {
+    @error $err;
+  }
+
+  $type: map.get($config, theme-type) or light;
+  $primary: map.get($config, primary) or matx.$m3-violet-palette;
+  $tertiary: map.get($config, tertiary) or $primary;
+
+  @return (
+    $internals: (
+      theme-version: $theme-version,
+      theme-type: $type,
+      palettes: (
+        primary: map.remove($primary, neutral, neutral-variant, secondary),
+        secondary: map.get($primary, secondary),
+        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
+        neutral: map.get($primary, neutral),
+        neutral-variant: map.get($primary, neutral-variant),
+        error: map.get($primary, error),
+      ),
+      color-tokens: m3-tokens.generate-color-tokens(
+          $type, $primary, $tertiary, map.get($primary, error))
+    )
+  );
+}
+
+/// Defines an Angular Material theme object with typography settings.
+/// @param {Map} $config The typography configuration
+/// @return {Map} A theme object
+@function define-typography($config: ()) {
+  $err: config-validation.validate-typography-config($config);
+  @if $err {
+    @error $err;
+  }
+
+  $plain: map.get($config, plain-family) or (Roboto, sans-serif);
+  $brand: map.get($config, brand-family) or $plain;
+  $bold: map.get($config, bold-weight) or 700;
+  $medium: map.get($config, medium-weight) or 500;
+  $regular: map.get($config, regular-weight) or 400;
+
+  @return (
+    $internals: (
+      theme-version: $theme-version,
+      typography-tokens: m3-tokens.generate-typography-tokens(
+          $brand, $plain, $bold, $medium, $regular)
+    )
+  );
+}
+
+/// Defines an Angular Material theme object with density settings.
+/// @param {Map} $config The density configuration
+/// @return {Map} A theme object
+@function define-density($config: ()) {
+  $err: config-validation.validate-density-config($config);
+  @if $err {
+    @error $err;
+  }
+
+  $density-scale: map.get($config, scale) or 0;
+
+  @return (
+    $internals: (
+      theme-version: $theme-version,
+      density-scale: $density-scale,
+      density-tokens: m3-tokens.generate-density-tokens($density-scale)
+    )
+  );
+}

package/core/theming/m3/_format-tokens.scss

@@ -0,0 +1,5 @@
+// DO NOT REMOVE
+// This function is used internally.
+@function private-format-tokens($systems) {
+  @return $systems;
+}

package/core/theming/m3/_m3-density.scss

@@ -0,0 +1,50 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+/// Maps namespaced tokens to per-density-scale values.
+/// This is used as a temporary solution for density, since Material Design currently does not have
+/// systemized density.
+/// Format:
+/// (
+///   (mdc, comp): (
+///     token: (<scale 0 value>, <scale -1 value>, <scale -2 value>, ...),
+///     ...
+///   ),
+///   ...
+/// )
+// TODO(mmalerba): Add density tokens for remaining components.
+$_density-tokens: (
+);
+
+/// Gets the value for the given density scale from the given set of density values.
+/// @param {List} $density-values The list of values for each density scale.
+/// @param {Number} $scale The density scale to get the value for.
+/// @return {*} The value for the given scale.
+@function _get-value-for-scale($density-values, $scale) {
+  $scale: mat.private-clamp-density($scale, -1 * list.length($density-values) + 1);
+  $index: -$scale + 1;
+  @return list.nth($density-values, $index);
+}
+
+/// Gets a map of all density tokens for the given scale
+/// @param {Number} $scale The density scale
+/// @return {Map} Map of all fully qualified density tokens for the given scale.
+@function get-tokens-for-scale($scale) {
+  $result: ();
+  @each $namespace, $tokens in $_density-tokens {
+    @each $token, $density-values in $tokens {
+      $tokens: map.set($tokens, $token, _get-value-for-scale($density-values, $scale));
+    }
+    $result: map.set($result, $namespace, $tokens);
+  }
+  @return $result;
+}
+
+/// Checks whether the given token is systemized by Angular Material's made up density system.
+/// @param {List} $namespace The namespace of the token
+/// @param {String} $token The name of the token
+/// @return {Boolean} Whether the token is systemized by the density system
+@function is-systemized($namespace, $token) {
+  @return map.get($_density-tokens, $namespace, $token) != null;
+}