@ng-matero/extensions 19.4.1 → 20.0.1

package/core/tokens/_m3-tokens.scss

@@ -1,86 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use './m3';
-@use './m3/definitions' as m3-token-definitions;
-@use '../tokens/m2' as m2-tokens;
-@use './density';
-@use './format-tokens';
-
-/// Generates tokens for the given palette with the given prefix.
-/// @param {Map} $palette The palette to generate tokens for
-/// @param {String} $prefix The key prefix used to name the tokens
-/// @return {Map} A set of tokens for the given palette
-@function _generate-palette-tokens($palette, $prefix) {
-  $palette: map.remove($palette, neutral, neutral-variant);
-  $result: ();
-  @each $hue, $value in $palette {
-    $result: map.set($result, '#{$prefix}#{$hue}', $value);
-  }
-  @return $result;
-}
-
-/// Creates a set of `md-ref-palette` tokens from the given palettes. (See
-/// ./m3/definitions/_md-ref-palette.scss)
-/// @param {Map} $primary The primary palette
-/// @param {Map} $secondary The secondary palette
-/// @param {Map} $tertiary The tertiary palette
-/// @param {Map} $error The error palette
-/// @return {Map} A set of `md-ref-palette` tokens
-@function generate-ref-palette-tokens($primary, $tertiary, $error) {
-  @return mat.private-merge-all(
-      (black: #000, white: #fff),
-      _generate-palette-tokens($primary, primary),
-      _generate-palette-tokens(map.get($primary, secondary), secondary),
-      _generate-palette-tokens($tertiary, tertiary),
-      _generate-palette-tokens(map.get($primary, neutral), neutral),
-      _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant),
-      _generate-palette-tokens($error, error),
-  );
-}
-
-/// Creates a set of `md-ref-typeface` tokens from the given palettes. (See
-/// ./m3/definitions/_md-ref-typeface.scss)
-/// @param {List|String} $brand The font-family to use for brand text
-/// @param {List|String} $plain The font-family to use for plain text
-/// @param {String} $bold The font-weight to use for bold text
-/// @param {String} $medium The font-weight to use for medium text
-/// @param {String} $regular The font-weight to use for regular text
-/// @return {Map} A set of `md-ref-typeface` tokens
-@function generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
-  @return (
-    brand: $brand,
-    plain: $plain,
-    weight-bold: $bold,
-    weight-medium: $medium,
-    weight-regular: $regular,
-  );
-}
-
-$_cached-token-slots: null;
-
-/// Determines the token slots for all components.
-@function _get-token-slots() {
-  // Cache the slots since they're constant and calculating
-  // them appears to be expensive (see #29009).
-  @if ($_cached-token-slots) {
-    @return $_cached-token-slots;
-  }
-
-  // TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
-  //  material-experimental. This is a hack for now because there is no good way to get the token
-  //  slots in material-experimental without exposing them all from material.
-  $fake-theme: mat.m2-define-light-theme((
-    color: (
-      primary: mat.m2-define-palette(mat.$m2-red-palette),
-      accent: mat.m2-define-palette(mat.$m2-red-palette),
-      warn: mat.m2-define-palette(mat.$m2-red-palette),
-    ),
-    typography: mat.m2-define-typography-config(),
-    density: 0
-  ));
-  $_cached-token-slots: m2-tokens.m2-tokens-from-theme($fake-theme) !global;
-  @return $_cached-token-slots;
-}
 
 /// Generates a set of namespaced tokens for all components.
 /// @param {Map} $systems The MDC system tokens
@@ -98,31 +18,15 @@ $_cached-token-slots: null;
   ), $systems);
   $exclude-hardcoded: not $include-non-systemized;
 
-  // DO NOT REMOVE
-  // This function is used internally.
-  $systems: format-tokens.private-format-tokens($systems);
-  $token-slots: _get-token-slots();
-
   // TODO(mmalerba): Fill in remaining tokens.
   $result: mat.private-deep-merge-all(
     // Add the system color & typography tokens (so we can give users access via an API).
     (
-      (mdc, theme): map.get($systems, md-sys-color),
-      (mdc, typography): map.get($systems, md-sys-typescale),
+      (mat, theme): map.get($systems, md-sys-color),
+      (mat, typography): map.get($systems, md-sys-typescale),
     ),
-    m3.get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
   );
 
-  // Strip out tokens that are systemized by our made up density system.
-  @each $namespace, $tokens in $result {
-    @each $token, $value in $tokens {
-      @if density.is-systemized($namespace, $token) and not $include-density {
-        $tokens: map.remove($tokens, $token);
-      }
-    }
-    $result: map.set($result, $namespace, $tokens);
-  }
-
   @return $result;
 }
 
@@ -134,170 +38,34 @@ $_cached-token-slots: null;
   @return $result;
 }
 
-@function _get-sys-color($type, $ref, $prefix) {
-  $mdc-sys-color: if($type == dark,
-    m3-token-definitions.md-sys-color-values-dark($ref),
-    m3-token-definitions.md-sys-color-values-light($ref));
+@function get-sys-color($type, $palettes, $prefix) {
+  $sys-color: if($type == dark,
+    m3.md-sys-color-values-dark($palettes),
+    m3.md-sys-color-values-light($palettes));
 
   @if (mat.$private-use-system-color-variables) {
-    $keys: (
-            'background',
-            'error',
-            'error-container',
-            'inverse-on-surface',
-            'inverse-primary',
-            'inverse-surface',
-            'on-background',
-            'on-error',
-            'on-error-container',
-            'on-primary',
-            'on-primary-container',
-            'on-primary-fixed',
-            'on-primary-fixed-variant',
-            'on-secondary',
-            'on-secondary-container',
-            'on-secondary-fixed',
-            'on-secondary-fixed-variant',
-            'on-surface',
-            'on-surface-variant',
-            'on-tertiary',
-            'on-tertiary-container',
-            'on-tertiary-fixed',
-            'on-tertiary-fixed-variant',
-            'outline',
-            'outline-variant',
-            'primary',
-            'primary-container',
-            'primary-fixed',
-            'primary-fixed-dim',
-            'scrim',
-            'secondary',
-            'secondary-container',
-            'secondary-fixed',
-            'secondary-fixed-dim',
-            'surface',
-            'surface-bright',
-            'surface-container',
-            'surface-container-high',
-            'surface-container-highest',
-            'surface-container-low',
-            'surface-container-lowest',
-            'surface-dim',
-            'surface-tint',
-            'surface-variant',
-            'tertiary',
-            'tertiary-container',
-            'tertiary-fixed',
-            'tertiary-fixed-dim'
-    );
-    @return map.merge(create-map($keys, $prefix), (
-            shadow: map.get($mdc-sys-color, shadow)
-    ));
+    $var-values: ();
+    @each $key in map.keys($sys-color) {
+      $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
+    }
+    $var-values: map.set($var-values, shadow, map.get($sys-color, shadow));
+    @return $var-values;
   }
 
-  @return $mdc-sys-color;
+  @return $sys-color;
 }
 
-@function _get-sys-typeface($ref, $prefix) {
+@function get-sys-typeface($typography, $prefix) {
+  $sys-typography: m3.md-sys-typescale-values($typography);
   @if (mat.$private-use-system-typography-variables) {
-    $keys: (
-            'body-large',
-            'body-large-font',
-            'body-large-line-height',
-            'body-large-size',
-            'body-large-tracking',
-            'body-large-weight',
-            'body-medium',
-            'body-medium-font',
-            'body-medium-line-height',
-            'body-medium-size',
-            'body-medium-tracking',
-            'body-medium-weight',
-            'body-small',
-            'body-small-font',
-            'body-small-line-height',
-            'body-small-size',
-            'body-small-tracking',
-            'body-small-weight',
-            'display-large',
-            'display-large-font',
-            'display-large-line-height',
-            'display-large-size',
-            'display-large-tracking',
-            'display-large-weight',
-            'display-medium',
-            'display-medium-font',
-            'display-medium-line-height',
-            'display-medium-size',
-            'display-medium-tracking',
-            'display-medium-weight',
-            'display-small',
-            'display-small-font',
-            'display-small-line-height',
-            'display-small-size',
-            'display-small-tracking',
-            'display-small-weight',
-            'headline-large',
-            'headline-large-font',
-            'headline-large-line-height',
-            'headline-large-size',
-            'headline-large-tracking',
-            'headline-large-weight',
-            'headline-medium',
-            'headline-medium-font',
-            'headline-medium-line-height',
-            'headline-medium-size',
-            'headline-medium-tracking',
-            'headline-medium-weight',
-            'headline-small',
-            'headline-small-font',
-            'headline-small-line-height',
-            'headline-small-size',
-            'headline-small-tracking',
-            'headline-small-weight',
-            'label-large',
-            'label-large-font',
-            'label-large-line-height',
-            'label-large-size',
-            'label-large-tracking',
-            'label-large-weight',
-            'label-large-weight-prominent',
-            'label-medium',
-            'label-medium-font',
-            'label-medium-line-height',
-            'label-medium-size',
-            'label-medium-tracking',
-            'label-medium-weight',
-            'label-medium-weight-prominent',
-            'label-small',
-            'label-small-font',
-            'label-small-line-height',
-            'label-small-size',
-            'label-small-tracking',
-            'label-small-weight',
-            'title-large',
-            'title-large-font',
-            'title-large-line-height',
-            'title-large-size',
-            'title-large-tracking',
-            'title-large-weight',
-            'title-medium',
-            'title-medium-font',
-            'title-medium-line-height',
-            'title-medium-size',
-            'title-medium-tracking',
-            'title-medium-weight',
-            'title-small',
-            'title-small-font',
-            'title-small-line-height',
-            'title-small-size',
-            'title-small-tracking',
-            'title-small-weight'
-    );
-
-    @return create-map($keys, $prefix);
+    $var-values: ();
+    @each $key in map.keys($sys-typography) {
+      $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
+    }
+    @return $var-values;
   }
-  @return m3-token-definitions.md-sys-typescale-values($ref);
+
+  @return $sys-typography;
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -307,27 +75,24 @@ $_cached-token-slots: null;
 /// @param {Map} $error The error palette
 /// @param {String} $system-variables-prefix The prefix of system tokens
 /// @return {Map} A map of namespaced color tokens
-@function generate-color-tokens($type, $primary, $tertiary, $error, $system-variables-prefix) {
-  $ref: (
-    md-ref-palette: generate-ref-palette-tokens($primary, $tertiary, $error)
-  );
-
-  $sys-color: _get-sys-color($type, $ref, $system-variables-prefix);
-
-  @return generate-tokens(map.merge($ref, (
-    // Used to get the theme type
-    md-sys-type: $type,
+@function generate-color-tokens($type, $palettes, $system-variables-prefix) {
+  $sys-color: get-sys-color($type, $palettes, $system-variables-prefix);
 
+  @return generate-tokens((
     md-sys-color: $sys-color,
+    md-ref-palette: (
+      neutral-10: map.get($palettes, neutral, 10),
+      neutral-variant20: map.get($palettes, neutral-variant, 20),
+    ),
     // Because the elevation values are always combined with color values to create the box shadow,
     // elevation needs to be part of the color dimension.
-    md-sys-elevation: m3-token-definitions.md-sys-elevation-values(),
+    md-sys-elevation: m3.md-sys-elevation-values(),
     // Because the state values are sometimes combined with color values to create rgba colors,
     // state needs to be part of color dimension.
     // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
     //  state to the base dimension.
-    md-sys-state: m3-token-definitions.md-sys-state-values(),
-  )));
+    md-sys-state: m3.md-sys-state-values(),
+  ));
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -338,31 +103,20 @@ $_cached-token-slots: null;
 /// @param {String|Number} $regular The regular font-weight
 /// @param {String} $system-variables-prefix The prefix of system tokens
 /// @return {Map} A map of namespaced typography tokens
-@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular,
-$system-variables-prefix) {
-  $ref: (
-    md-ref-typeface: generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
-  );
-  $sys-typeface: _get-sys-typeface($ref, $system-variables-prefix);
+@function generate-typography-tokens($typography, $system-variables-prefix) {
+  $sys-typeface: get-sys-typeface($typography, $system-variables-prefix);
   @return generate-tokens((
     md-sys-typescale: $sys-typeface
   ));
 }
 
-/// Generates a set of namespaced density tokens for all components.
-/// @param {String|Number} $scale The regular font-weight
-/// @return {Map} A map of namespaced density tokens
-@function generate-density-tokens($scale) {
-  @return density.get-tokens-for-scale($scale);
-}
-
 /// Generates a set of namespaced tokens not related to color, typography, or density for all
 /// components.
 /// @return {Map} A map of namespaced tokens not related to color, typography, or density
 @function generate-base-tokens() {
   // TODO(mmalerba): Exclude density tokens once implemented.
   @return generate-tokens((
-    md-sys-motion: m3-token-definitions.md-sys-motion-values(),
-    md-sys-shape: m3-token-definitions.md-sys-shape-values(),
+    md-sys-motion: m3.md-sys-motion-values(),
+    md-sys-shape: m3.md-sys-shape-values(),
   ), $include-non-systemized: true);
 }

package/core/tokens/_m3-utils.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+// Replaces color tokens in the map with those defined as the variant color.
+@function replace-colors-with-variant($system, $color, $variant) {
+  $system: map.set($system, on-#{$color}, map.get($system, on-#{$variant}));
+  $system: map.set($system, on-#{$color}-container, map.get($system, on-#{$variant}-container));
+  $system: map.set($system, #{$color}, map.get($system, #{$variant}));
+  $system: map.set($system, #{$color}-container, map.get($system, #{$variant}-container));
+  @return $system;
+}
+
+// Gets the theme's system values as a flat map.
+@function get-system($theme) {
+  $system: ();
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-color));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-elevation));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-shape));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-state));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-typescale));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-ref-palette));
+  @return $system;
+}
+
+// Returns the color with an opacity value using color-mix. If the color is a variable name, it
+// will wrap it with `var()`.
+@function color-with-opacity($color, $opacity) {
+  @if (meta.type-of($color) == string and string.index($color, '--') == 1) {
+    $color: var($color);
+  }
+
+  // Opacity may be a system level value less than 1, instead of the intended
+  // whole percentage, e.g. 38%. Remove this support when possible.
+  @if (meta.type-of($opacity) == string and string.index($opacity, '--') == 1) {
+    $opacity: 'calc(var(#{$opacity}) * 100%)';
+  } @else if (meta.type-of($opacity) == number and $opacity < 1) {
+    $opacity: '#{$opacity * 100}%';
+  }
+
+  @return color-mix(in srgb, #{$color} #{$opacity}, transparent);
+}