@angular/material-experimental 16.2.0 → 17.0.0-next.0

package/theming/_custom-tokens.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+/// 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;
+}
+
+/// Generates custom tokens for the mat-card.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-card
+@function card($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+      _generate-typography-tokens($systems, title-text, title-large),
+      _generate-typography-tokens($systems, subtitle-text, title-medium),
+      (
+        subtitle-text-color: map.get($systems, md-ref-color, on-surface)
+      )
+  );
+}

package/theming/_definition.scss

@@ -0,0 +1,105 @@
+// This file contains functions used to define Angular Material theme objects.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './m3-palettes';
+@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 m3-palettes.$indigo-palette;
+  $secondary: map.get($config, secondary) or $primary;
+  $tertiary: map.get($config, tertiary) or $secondary;
+
+  @return (
+    $internals: (
+      theme-version: $theme-version,
+      theme-type: $type,
+      palettes: (
+        primary: map.remove($primary, neutral-variant),
+        secondary: map.remove($secondary, neutral-variant),
+        tertiary: map.remove($tertiary, neutral-variant),
+        neutral: m3-palettes.$neutral-palette,
+        neutral-variant: map.get($primary, neutral-variant),
+        error: m3-palettes.$red-palette
+      ),
+      color-tokens: m3-tokens.generate-color-tokens($type, $primary, $secondary, $tertiary,
+        m3-palettes.$neutral-palette, m3-palettes.$red-palette)
+    )
+  );
+}
+
+/// 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/theming/_m3-density.scss

@@ -0,0 +1,56 @@
+@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: (
+    (mdc, checkbox): (
+    state-layer-size: (40px, 36px, 32px, 28px),
+  ),
+    (mdc, elevated-card): (),
+    (mdc, outlined-card): (),
+    (mat, card): (),
+);
+
+/// 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;
+}

package/theming/_m3-palettes.scss

@@ -0,0 +1,251 @@
+/// Red color palette to be used as primary, secondary, or tertiary palette.
+$red-palette: (
+  0: #000,
+  10: #410000,
+  20: #690100,
+  30: #930100,
+  40: #c00100,
+  50: #ef0000,
+  60: #ff5540,
+  70: #ff8a78,
+  80: #ffb4a8,
+  90: #ffdad4,
+  95: #ffedea,
+  99: #fffbff,
+  100: #fff,
+  neutral-variant: (
+    0: #000,
+    10: #251917,
+    20: #3b2d2b,
+    30: #534341,
+    40: #6c5a58,
+    50: #857370,
+    60: #a08c89,
+    70: #bca7a3,
+    80: #d8c2be,
+    90: #f5ddda,
+    95: #ffedea,
+    99: #fffbff,
+    100: #fff,
+  ),
+);
+
+/// Orange color palette to be used as primary, secondary, or tertiary palette.
+$orange-palette: (
+  0: #000,
+  10: #2a1700,
+  20: #462a00,
+  30: #653e00,
+  40: #855400,
+  50: #a66a00,
+  60: #c98100,
+  70: #ed9900,
+  80: #ffb95c,
+  90: #ffddb7,
+  95: #ffeede,
+  99: #fffbff,
+  100: #fff,
+  neutral-variant: (
+    0: #000,
+    10: #221a10,
+    20: #382f24,
+    30: #504539,
+    40: #685c50,
+    50: #827568,
+    60: #9c8e80,
+    70: #b8a99a,
+    80: #d4c4b5,
+    90: #f0e0d0,
+    95: #ffeede,
+    99: #fffbff,
+    100: #fff,
+  ),
+);
+
+/// Yellow color palette to be used as primary, secondary, or tertiary palette.
+$yellow-palette: (
+  0: #000,
+  10: #1d1d00,
+  20: #323200,
+  30: #494900,
+  40: #626200,
+  50: #7b7b00,
+  60: #969600,
+  70: #b1b100,
+  80: #cdcd00,
+  90: #eaea00,
+  95: #f9f900,
+  99: #fffbff,
+  100: #fff,
+  neutral-variant: (
+    0: #000,
+    10: #1c1c11,
+    20: #313125,
+    30: #48473a,
+    40: #605f51,
+    50: #797869,
+    60: #939182,
+    70: #aeac9b,
+    80: #cac7b6,
+    90: #e6e3d1,
+    95: #f4f1df,
+    99: #fffbff,
+    100: #fff,
+  ),
+);
+
+/// Green color palette to be used as primary, secondary, or tertiary palette.
+$green-palette: (
+  0: #000,
+  10: #002200,
+  20: #013a00,
+  30: #015300,
+  40: #026e00,
+  50: #038b00,
+  60: #03a800,
+  70: #03c700,
+  80: #02e600,
+  90: #77ff61,
+  95: #cbffb8,
+  99: #f7ffee,
+  100: #fff,
+  neutral-variant: (
+    0: #000,
+    10: #1a1c18,
+    20: #2f312d,
+    30: #454743,
+    40: #5d5f5a,
+    50: #767872,
+    60: #90918c,
+    70: #abaca6,
+    80: #c6c7c1,
+    90: #e2e3dc,
+    95: #f1f1eb,
+    99: #fcfdf6,
+    100: #fff,
+  ),
+);
+
+/// Blue color palette to be used as primary, secondary, or tertiary palette.
+$blue-palette: (
+  0: #000,
+  10: #00006e,
+  20: #0001ac,
+  30: #0000ef,
+  40: #343dff,
+  50: #5a64ff,
+  60: #7c84ff,
+  70: #9da3ff,
+  80: #bec2ff,
+  90: #e0e0ff,
+  95: #f1efff,
+  99: #fffbff,
+  100: #fff,
+  neutral-variant: (
+    0: #000,
+    10: #1b1b23,
+    20: #303038,
+    30: #46464f,
+    40: #5e5d67,
+    50: #777680,
+    60: #91909a,
+    70: #acaab4,
+    80: #c7c5d0,
+    90: #e4e1ec,
+    95: #f2effa,
+    99: #fffbff,
+    100: #fff,
+  ),
+);
+
+/// Indigo color palette to be used as primary, secondary, or tertiary palette.
+$indigo-palette: (
+  0: #000,
+  10: #2c0050,
+  20: #4a0080,
+  30: #622599,
+  40: #7b41b3,
+  50: #965bce,
+  60: #b175ea,
+  70: #cb93ff,
+  80: #ddb7ff,
+  90: #f0dbff,
+  95: #faecff,
+  99: #fffbff,
+  100: #fff,
+  neutral-variant: (
+    0: #000,
+    10: #1e1a22,
+    20: #342f37,
+    30: #4a454e,
+    40: #625c65,
+    50: #7c757e,
+    60: #968e98,
+    70: #b1a8b3,
+    80: #cdc4ce,
+    90: #e9dfeb,
+    95: #f7eef9,
+    99: #fffbff,
+    100: #fff,
+  ),
+);
+
+/// Violet color palette to be used as primary, secondary, or tertiary palette.
+$violet-palette: (
+  0: #000,
+  10: #270057,
+  20: #42008a,
+  30: #5e00c1,
+  40: #7d00fa,
+  50: #934bff,
+  60: #a974ff,
+  70: #bf98ff,
+  80: #d5baff,
+  90: #ecdcff,
+  95: #f7edff,
+  99: #fffbff,
+  100: #fff,
+  neutral-variant: (
+    0: #000,
+    10: #1d1a22,
+    20: #332f37,
+    30: #49454e,
+    40: #615c66,
+    50: #7b757f,
+    60: #958e99,
+    70: #afa9b3,
+    80: #cbc4cf,
+    90: #e8e0eb,
+    95: #f6eef9,
+    99: #fffbff,
+    100: #fff,
+  ),
+);
+
+/// Gray palette used for backgrounds and surfaces.
+$neutral-palette: (
+  0: #000,
+  4: #0e0e11,
+  6: #141317,
+  10: #1c1b1f,
+  12: #201f23,
+  17: #2b292d,
+  20: #313033,
+  22: #313033,
+  24: #313033,
+  30: #484649,
+  40: #605d62,
+  50: #787579,
+  60: #939094,
+  70: #aeaaae,
+  80: #c9c5ca,
+  87: #ddd8dd,
+  90: #e6e1e5,
+  92: #ece7ec,
+  94: #f1ecf1,
+  95: #f4eff4,
+  96: #f7f2f7,
+  98: #fdf8fd,
+  99: #fffbfe,
+  100: #fff,
+);