@ng-matero/extensions 19.4.0 → 20.0.0

package/core/tokens/{m2/_index.scss → _m2-tokens.scss}

@@ -1,17 +1,17 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '@angular/material' as mat;
-@use './mtx/alert' as tokens-mtx-alert;
-@use './mtx/colorpicker' as tokens-mtx-colorpicker;
-@use './mtx/datetimepicker' as tokens-mtx-datetimepicker;
-@use './mtx/drawer' as tokens-mtx-drawer;
-@use './mtx/grid' as tokens-mtx-grid;
-@use './mtx/loader' as tokens-mtx-loader;
-@use './mtx/popover' as tokens-mtx-popover;
-@use './mtx/progress' as tokens-mtx-progress;
-@use './mtx/select' as tokens-mtx-select;
-@use './mtx/split' as tokens-mtx-split;
-@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+@use '../../alert/m2-alert';
+@use '../../colorpicker/m2-colorpicker';
+@use '../../datetimepicker/m2-datetimepicker';
+@use '../../drawer/m2-drawer';
+@use '../../grid/m2-grid';
+@use '../../loader/m2-loader';
+@use '../../popover/m2-popover';
+@use '../../progress/m2-progress';
+@use '../../select/m2-select';
+@use '../../split/m2-split';
+@use '../../tooltip/m2-tooltip';
 
 /// Gets the tokens for the given theme, m2 tokens module, and theming system.
 /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -56,16 +56,16 @@
 ///     )
 @function m2-tokens-from-theme($theme) {
   @return mat.private-deep-merge-all(
-    _get-tokens-for-module($theme, tokens-mtx-alert),
-    _get-tokens-for-module($theme, tokens-mtx-colorpicker),
-    _get-tokens-for-module($theme, tokens-mtx-datetimepicker),
-    _get-tokens-for-module($theme, tokens-mtx-drawer),
-    _get-tokens-for-module($theme, tokens-mtx-grid),
-    _get-tokens-for-module($theme, tokens-mtx-loader),
-    _get-tokens-for-module($theme, tokens-mtx-popover),
-    _get-tokens-for-module($theme, tokens-mtx-progress),
-    _get-tokens-for-module($theme, tokens-mtx-select),
-    _get-tokens-for-module($theme, tokens-mtx-split),
-    _get-tokens-for-module($theme, tokens-mdc-plain-tooltip),
+    _get-tokens-for-module($theme, m2-alert),
+    _get-tokens-for-module($theme, m2-colorpicker),
+    _get-tokens-for-module($theme, m2-datetimepicker),
+    _get-tokens-for-module($theme, m2-drawer),
+    _get-tokens-for-module($theme, m2-grid),
+    _get-tokens-for-module($theme, m2-loader),
+    _get-tokens-for-module($theme, m2-popover),
+    _get-tokens-for-module($theme, m2-progress),
+    _get-tokens-for-module($theme, m2-select),
+    _get-tokens-for-module($theme, m2-split),
+    _get-tokens-for-module($theme, m2-tooltip),
   );
 }

package/core/tokens/_m2-utils.scss

@@ -0,0 +1,108 @@
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+@use '../m2/typography';
+
+$_placeholder-color-palette: mat.m2-define-palette(mat.$m2-red-palette);
+
+// Indicates whether we're building internally. Used for backwards compatibility.
+$private-is-internal-build: false;
+
+// Placeholder color config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-color-config: (
+  primary: $_placeholder-color-palette,
+  accent: $_placeholder-color-palette,
+  warn: $_placeholder-color-palette,
+  is-dark: false,
+  foreground: mat.$m2-light-theme-foreground-palette,
+  background: mat.$m2-light-theme-background-palette,
+);
+
+$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+
+// Placeholder typography config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-typography-config: (
+  font-family: 'Roboto, sans-serif',
+  headline-1: $_placeholder-typography-level-config,
+  headline-2: $_placeholder-typography-level-config,
+  headline-3: $_placeholder-typography-level-config,
+  headline-4: $_placeholder-typography-level-config,
+  headline-5: $_placeholder-typography-level-config,
+  headline-6: $_placeholder-typography-level-config,
+  subtitle-1: $_placeholder-typography-level-config,
+  subtitle-2: $_placeholder-typography-level-config,
+  body-1: $_placeholder-typography-level-config,
+  body-2: $_placeholder-typography-level-config,
+  caption: $_placeholder-typography-level-config,
+  button: $_placeholder-typography-level-config,
+  overline: $_placeholder-typography-level-config,
+  subheading-1: $_placeholder-typography-level-config,
+  title: $_placeholder-typography-level-config,
+);
+
+// Placeholder density config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-density-config: 0;
+
+/// Inherited function from MDC that computes which contrast tone to use on top of a color.
+/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
+/// backwards compatibility.
+/// @param {Color} $value Color for which we're calculating the contrast tone.
+/// @param {Boolean} $is-dark Whether the current theme is dark.
+/// @return {Map} Either `dark` or `light`.
+@function contrast-tone($value, $is-dark) {
+  @if ($value =='dark') {
+    @return 'light';
+  }
+
+  @if ($value =='light') {
+    @return 'dark';
+  }
+
+  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
+  @if (meta.type-of($value) !='color') {
+    @return if($is-dark, 'light', 'dark');
+  }
+
+  $minimum-contrast: 3.1;
+  $light-contrast: _contrast($value, #fff);
+  $dark-contrast: _contrast($value, rgb(0, 0, 0, 0.87));
+
+  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
+    @return 'dark';
+  }
+
+  @return 'light';
+}
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+
+  @if ($normalized-channel-value < 0.03928) {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _contrast($back, $front) {
+  $back-lum: _luminance($back) + 0.05;
+  $fore-lum: _luminance($front) + 0.05;
+
+  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+}

package/core/tokens/_m3-system.scss

@@ -1,12 +1,21 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
-@use '@angular/material' as mat;
+@use '../../alert/m3-alert';
+@use '../../colorpicker/m3-colorpicker';
+@use '../../datetimepicker/m3-datetimepicker';
+@use '../../drawer/m3-drawer';
+@use '../../grid/m3-grid';
+@use '../../loader/m3-loader';
+@use '../../popover/m3-popover';
+@use '../../progress/m3-progress';
+@use '../../select/m3-select';
+@use '../../split/m3-split';
+@use '../../tooltip/m3-tooltip';
 @use '../style/elevation';
 @use '../theming/config-validation';
 @use '../theming/definition';
-@use './m3/definitions';
-@use './m3-tokens';
+@use '../theming/palettes';
+@use './m3';
 
 /// Emits necessary CSS variables for Material's system level values for the values defined in the
 /// config map. The config map can have values color, typography, and/or density.
@@ -46,9 +55,40 @@
       $color: map.set($color, theme-type, color-scheme);
     }
 
-    $color-config: if($is-palette,
-            definition.define-colors((primary: $color, theme-type: color-scheme)),
-            definition.define-colors($color));
+    $color-config: $color;
+    @if ($is-palette) {
+      $color: map.set($color, tertiary, $color);
+      $color-config: (
+        definition.$internals: (
+          palettes: (
+            primary: map.remove($color, neutral, neutral-variant, secondary),
+            secondary: map.get($color, secondary),
+            tertiary: map.remove($color, neutral, neutral-variant, secondary, error),
+            neutral: map.get($color, neutral),
+            neutral-variant: map.get($color, neutral-variant),
+            error: map.get($color, error),
+          ),
+          theme-type: color-scheme,
+        )
+      );
+    } @else {
+      $primary: map.get($color, primary) or palettes.$violet-palette;
+      $tertiary: map.get($color, tertiary) or $primary;
+      $color-config: (
+        definition.$internals: (
+          palettes: (
+            primary: map.remove($primary, neutral, neutral-variant, secondary),
+            secondary: map.get($primary, secondary),
+            tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error),
+            neutral: map.get($primary, neutral),
+            neutral-variant: map.get($primary, neutral-variant),
+            error: map.get($primary, error),
+          ),
+          theme-type: map.get($color, theme-type),
+        )
+      );
+    }
+
     @include system-level-colors($color-config, $overrides, definition.$system-fallback-prefix);
     @include system-level-elevation($color-config, $overrides, definition.$system-fallback-prefix);
   }
@@ -56,9 +96,31 @@
   $typography: map.get($config, typography);
   $typography-config: null;
   @if ($typography) {
-    $typography-config: if(meta.type-of($typography) == 'map',
-      definition.define-typography($typography),
-      definition.define-typography((plain-family: $typography)));
+    $plain: (Roboto, sans-serif);
+    $brand: $plain;
+    $bold: 700;
+    $medium: 500;
+    $regular: 400;
+    @if (meta.type-of($typography) == map) {
+      $plain: map.get($typography, plain-family);
+      $brand: map.get($typography, brand-family) or $plain;
+      $bold: map.get($typography, bold-weight) or $bold;
+      $medium: map.get($typography, medium-weight) or $medium;
+      $regular: map.get($typography, regular-weight) or $regular;
+    } @else {
+      $plain: $typography;
+    }
+    $typography-config: (
+      definition.$internals: (
+        font-definition: (
+          plain: $plain,
+          brand: $brand,
+          bold: $bold,
+          medium: $medium,
+          regular: $regular,
+        )
+      )
+    );
     @include system-level-typography(
         $typography-config, $overrides, definition.$system-fallback-prefix);
   }
@@ -66,17 +128,19 @@
   $density: map.get($config, density);
   $density-config: null;
   @if ($density) {
-    $density-config: if(meta.type-of($density) == 'map',
-      definition.define-density($density),
-      definition.define-density((scale: $density)));
-    $scale: map.get($density-config, _mat-theming-internals-do-not-access, density-scale);
+    $scale: 0;
+    @if (meta.type-of($density) == map) {
+      $scale: map.get($density, scale);
+    } @else {
+      $scale: $density;
+    }
     @if ($scale != 0) {
-      $all-tokens: m3-tokens.generate-density-tokens($scale);
-      @each $component-tokens in $all-tokens {
-        $namespace: list.nth($component-tokens, 1);
-        @each $tokens in list.nth($component-tokens, 2) {
-          --#{list.nth($namespace, 1)}-#{list.nth($namespace, 2)}-#{
-              list.nth($tokens, 1)}: #{list.nth($tokens, 2)};
+      // Emit component-level density tokens if the scale is lower than 0. The density tokens
+      // do not fallback to any system-level values and must be defined if the scale is different.
+      $density-tokens: get-density-tokens($scale);
+      @each $tokens in $density-tokens {
+        @each $token-name, $token-value in $tokens {
+          --mat-#{$token-name}: #{$token-value};
         }
       }
     }
@@ -86,15 +150,38 @@
   @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
 }
 
+// Gets all density-related tokens from the components.
+@function get-density-tokens($scale) {
+  @return (
+    m3-alert.get-density-tokens($scale),
+    m3-colorpicker.get-density-tokens($scale),
+    m3-datetimepicker.get-density-tokens($scale),
+    m3-drawer.get-density-tokens($scale),
+    m3-grid.get-density-tokens($scale),
+    m3-loader.get-density-tokens($scale),
+    m3-popover.get-density-tokens($scale),
+    m3-progress.get-density-tokens($scale),
+    m3-select.get-density-tokens($scale),
+    m3-split.get-density-tokens($scale),
+    m3-tooltip.get-density-tokens($scale),
+  );
+}
+
 /// Emits the system-level CSS variables for each of the provided override values. E.g. to
 /// change the primary color to red, use `mat.theme-overrides((primary: red));`
 @mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
   $sys-names: map-merge-all(
-      definitions.md-sys-color-values-light(),
-      definitions.md-sys-typescale-values(),
-      definitions.md-sys-elevation-values(),
-      definitions.md-sys-shape-values(),
-      definitions.md-sys-state-values());
+      m3.md-sys-color-values-light(palettes.$blue-palette),
+      m3.md-sys-typescale-values((
+        brand: (Roboto),
+        plain: (Roboto),
+        bold: 700,
+        medium: 500,
+        regular: 400
+      )),
+      m3.md-sys-elevation-values(),
+      m3.md-sys-shape-values(),
+      m3.md-sys-state-values());
 
   & {
     @each $name, $value in $overrides {
@@ -106,36 +193,21 @@
 }
 
 @mixin system-level-colors($theme, $overrides: (), $prefix: null) {
-  $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
-  $base-palettes: (
-    neutral: map.get($palettes, neutral),
-    neutral-variant: map.get($palettes, neutral-variant),
-    secondary: map.get($palettes, secondary),
-    error: map.get($palettes, error),
-  );
-
-  $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
-  $primary: map.merge(map.get($palettes, primary), $base-palettes);
-  $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
-  $error: map.get($palettes, error);
+  $palettes: map.get($theme, definition.$internals, palettes);
+  $type: map.get($theme, definition.$internals, theme-type);
 
   @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    $prefix: map.get($theme, definition.$internals,
         color-system-variables-prefix) or definition.$system-level-prefix;
   }
 
-  $ref: (
-    md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
-  );
 
-  $sys-colors: _generate-sys-colors($ref, $type);
+  $sys-colors: _generate-sys-colors($palettes, $type);
 
   // Manually insert a subset of palette values that are used directly by components
   // instead of system variables.
-  $sys-colors: map.set($sys-colors,
-    'neutral-variant20', map.get($ref, md-ref-palette, neutral-variant20));
-  $sys-colors: map.set($sys-colors,
-    'neutral10', map.get($ref, md-ref-palette, neutral10));
+  $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
+  $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
 
   & {
     @each $name, $value in $sys-colors {
@@ -144,13 +216,13 @@
   }
 }
 
-@function _generate-sys-colors($ref, $type) {
-  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+@function _generate-sys-colors($palettes, $type) {
+  $light-sys-colors: m3.md-sys-color-values-light($palettes);
   @if ($type == light) {
     @return $light-sys-colors;
   }
 
-  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  $dark-sys-colors: m3.md-sys-color-values-dark($palettes);
   @if ($type == dark) {
     @return $dark-sys-colors;
   }
@@ -169,23 +241,15 @@
 }
 
 @mixin system-level-typography($theme, $overrides: (), $prefix: null) {
-  $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
-  $brand: map.get($font-definition, brand);
-  $plain: map.get($font-definition, plain);
-  $bold: map.get($font-definition, bold);
-  $medium: map.get($font-definition, medium);
-  $regular: map.get($font-definition, regular);
-  $ref: (md-ref-typeface:
-      m3-tokens.generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
-  );
+  $font-definition: map.get($theme, definition.$internals, font-definition);
 
   @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    $prefix: map.get($theme, definition.$internals,
         typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   & {
-    @each $name, $value in definitions.md-sys-typescale-values($ref) {
+    @each $name, $value in m3.md-sys-typescale-values($font-definition) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -193,9 +257,9 @@
 
 @mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
   $shadow-color: map.get(
-      $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
+      $theme, definition.$internals, palettes, neutral, 0);
 
-  @each $name, $value in definitions.md-sys-elevation-values() {
+  @each $name, $value in m3.md-sys-elevation-values() {
     $level: map.get($overrides, $name) or $value;
     $value: elevation.get-box-shadow($level, $shadow-color);
 
@@ -207,7 +271,7 @@
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-shape-values() {
+    @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -215,54 +279,12 @@
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-state-values() {
+    @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
 }
 
-// Return a new map where the values are the same as the provided map's
-// keys, prefixed with "--mat-sys-". For example:
-// (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2)
-@function _create-system-app-vars-map($map) {
-  $new-map: ();
-  @each $key, $value in $map {
-    $new-map: map.set($new-map, $key, --#{definition.$system-fallback-prefix}-#{$key});
-  }
-  @return $new-map;
-}
-
-// Create a components tokens map where values are based on
-// system fallback variables referencing Material's system keys.
-// Includes density token fallbacks where density is 0.
-@function create-system-fallbacks() {
-  $app-vars: (
-    'md-sys-color':
-        _create-system-app-vars-map(definitions.md-sys-color-values-light()),
-    'md-sys-typescale':
-        _create-system-app-vars-map(definitions.md-sys-typescale-values()),
-    'md-sys-elevation':
-        _create-system-app-vars-map(definitions.md-sys-elevation-values()),
-    'md-sys-state':
-        _create-system-app-vars-map(definitions.md-sys-state-values()),
-    'md-sys-shape':
-        _create-system-app-vars-map(definitions.md-sys-shape-values()),
-    // Add a subset of palette-specific colors used by components instead of system values
-    'md-ref-palette':
-        _create-system-app-vars-map(
-          (
-            neutral10: '', // Form field native select option text color
-            neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
-          )
-        ),
-  );
-
-  @return mat.private-deep-merge-all(
-      m3-tokens.generate-tokens($app-vars, true, true),
-      m3-tokens.generate-density-tokens(0)
-  );
-}
-
 /// Creates a single merged map from the provided variable-length map arguments
 @function map-merge-all($maps...) {
   $result: ();