@ng-matero/extensions 17.3.5 → 18.0.1

package/experimental/theming/_m3-tokens.scss

@@ -1,308 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-@use '@material/tokens/v0_161' as mdc-tokens;
-@use './m3-density';
-@use './custom-tokens';
-@use './format-tokens';
-@use '../../core/tokens/m2';
-
-/// Picks a submap containing only the given keys out the given map.
-/// @param {Map} $map The map to pick from.
-/// @param {List} $keys The map keys to pick.
-/// @return {Map} A submap containing only the given keys.
-@function _pick($map, $keys) {
-  $result: ();
-  @each $key in $keys {
-    @if map.has-key($map, $key) {
-      $result: map.set($result, $key, map.get($map, $key));
-    }
-  }
-  @return $result;
-}
-
-/// Filters keys with a null value out of the map.
-/// @param {Map} $map The map to filter.
-/// @return {Map} The given map with all of the null keys filtered out.
-@function _filter-nulls($map) {
-  $result: ();
-  @each $key, $val in $map {
-    @if $val != null {
-      $result: map.set($result, $key, $val);
-    }
-  }
-  @return $result;
-}
-
-/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
-/// @param {List} $prefix The token prefix for the given tokens.
-/// @param {Map|(Map, Map)} $m3-values A map of M3 token values for the given prefix.
-///  This param may also be a tuple of maps, the first one representing the default M3 token values,
-//   and the second containing overrides for different color variants.
-//   Single map example:
-//     (token1: green, token2: 2px)
-//   Tuple example:
-//     (
-//       (token1: green, token2: 2px),
-//       (
-//         secondary: (token1: blue),
-//         error: (token1: red),
-//       )
-//     )
-/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
-/// @param {String|null} $variant The name of the variant the token values are for.
-/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
-@function _namespace-tokens($prefix, $m3-values, $slots, $variant: null) {
-  $result: ();
-  @if $variant == null and meta.type-of($m3-values) == 'list' and list.length($m3-values == 2) {
-    $variants: list.nth($m3-values, 2);
-    $m3-values: list.nth($m3-values, 1);
-    @each $variant, $overrides in $variants {
-      $result: map.merge($result, _namespace-tokens($prefix, $overrides, $slots, $variant));
-    }
-  }
-  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
-  $used-m3-tokens: _pick(_filter-nulls($m3-values), $used-token-names);
-  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
-  @return map.merge($result, ($prefix: $used-m3-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
-/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_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
-/// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_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,
-  );
-}
-
-/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
-/// token and a separate opacity token. This function applies the opacity to the color and drops the
-/// opacity key from the map. Can be removed once b/213331407 is resolved.
-/// @param {Map} $tokens The map of tokens currently being generated
-/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
-/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
-/// `((color: 'color-key', opacity: 'opacity-key'))`.
-/// @return {Map} The initial tokens with the combined color values.
-@function _combine-color-tokens($tokens, $opacity-lookup, $pairs) {
-  $result: $tokens;
-
-  @each $pair in $pairs {
-    $color-key: map.get($pair, color);
-    $opacity-key: map.get($pair, opacity);
-    $color: map.get($tokens, $color-key);
-    $opacity: map.get($opacity-lookup, $opacity-key);
-
-    @if meta.type-of($color) == 'color' {
-      @if meta.type-of($opacity) != 'number' {
-        @error 'Cannot find valid opacity value for color token "#{$color-key}"';
-      }
-
-      $result: map.remove($result, $opacity-key);
-      $result: map.set($result, $color-key, rgba($color, $opacity));
-    }
-  }
-
-  @return $result;
-}
-
-/// Generates a set of namespaced tokens for all components.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
-/// @return {Map} A map of namespaced tokens
-@function _generate-tokens($systems, $include-non-systemized: false) {
-  $systems: map.merge((
-    md-sys-color: (),
-    md-sys-elevation: (),
-    md-sys-motion: (),
-    md-sys-shape: (),
-    md-sys-state: (),
-    md-sys-typescale: ()
-  ), $systems);
-  $exclude-hardcoded: not $include-non-systemized;
-
-  // DO NOT REMOVE
-  // This function is used internally.
-  $systems: format-tokens.private-format-tokens($systems);
-
-  // 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.define-light-theme((
-    color: (
-      primary: mat.define-palette(mat.$red-palette),
-      accent: mat.define-palette(mat.$red-palette),
-      warn: mat.define-palette(mat.$red-palette),
-    ),
-    typography: mat.define-typography-config(),
-    density: 0
-  ));
-  $token-slots: m2.m2-tokens-from-theme($fake-theme);
-
-  // TODO(mmalerba): Fill in remaining tokens.
-  $result: mat.private-deep-merge-all(
-    _namespace-tokens(
-      (mtx, alert),
-      custom-tokens.alert($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, colorpicker),
-      custom-tokens.colorpicker($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, datetimepicker),
-      custom-tokens.datetimepicker($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, drawer),
-      custom-tokens.drawer($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, grid),
-      custom-tokens.grid($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, loader),
-      custom-tokens.loader($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, popover),
-      custom-tokens.popover($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, progress),
-      custom-tokens.progress($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, select),
-      custom-tokens.select($systems, $exclude-hardcoded),
-      $token-slots
-    ),
-    _namespace-tokens(
-      (mtx, split),
-      custom-tokens.split($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 m3-density.is-systemized($namespace, $token) {
-        $tokens: map.remove($tokens, $token);
-      }
-    }
-    $result: map.set($result, $namespace, $tokens);
-  }
-  @return $result;
-}
-
-/// Generates a set of namespaced color tokens for all components.
-/// @param {String} $type The type of theme system (light or dark)
-/// @param {Map} $primary The primary palette
-/// @param {Map} $tertiary The tertiary palette
-/// @param {Map} $error The error palette
-/// @return {Map} A map of namespaced color tokens
-@function generate-color-tokens($type, $primary, $tertiary, $error) {
-  $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
-  );
-  $sys-color: if($type == dark,
-    mdc-tokens.md-sys-color-values-dark($ref),
-    mdc-tokens.md-sys-color-values-light($ref));
-  @return _generate-tokens(map.merge($ref, (
-    md-sys-color: $sys-color,
-    // 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: mdc-tokens.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: mdc-tokens.md-sys-state-values(),
-  )));
-}
-
-/// Generates a set of namespaced color tokens for all components.
-/// @param {String|List} $brand The brand font-family
-/// @param {String|List} $plain The plain fort-family
-/// @param {String|Number} $bold The bold font-weight
-/// @param {String|Number} $medium The medium font-weight
-/// @param {String|Number} $regular The regular font-weight
-/// @return {Map} A map of namespaced typography tokens
-@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular) {
-  $ref: (
-    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
-  );
-  @return _generate-tokens((
-    md-sys-typescale: mdc-tokens.md-sys-typescale-values($ref)
-  ));
-}
-
-/// 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 m3-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: mdc-tokens.md-sys-motion-values(),
-    md-sys-shape: mdc-tokens.md-sys-shape-values(),
-  ), $include-non-systemized: true);
-}