@ng-matero/extensions 18.1.0 → 18.1.2

package/core/tokens/m2/mtx/_select.scss

@@ -1,10 +1,8 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '@material/textfield' as mdc-textfield;
-@use '@material/density' as mdc-density;
-@use '@material/elevation' as mdc-elevation;
 @use '@angular/material' as mat;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, select);
@@ -21,7 +19,7 @@ $prefix: (mtx, select);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+    container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 

package/core/tokens/m3/definitions/_index.scss

@@ -0,0 +1,8 @@
+@forward './md-ref-palette' as md-ref-palette-*;
+@forward './md-ref-typeface' as md-ref-typeface-*;
+@forward './md-sys-color' as md-sys-color-*;
+@forward './md-sys-elevation' as md-sys-elevation-*;
+@forward './md-sys-motion' as md-sys-motion-*;
+@forward './md-sys-shape' as md-sys-shape-*;
+@forward './md-sys-state' as md-sys-state-*;
+@forward './md-sys-typescale' as md-sys-typescale-*;

package/core/tokens/m3/definitions/_md-ref-palette.scss

@@ -0,0 +1,100 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'black': if($exclude-hardcoded-values, null, #000),
+    'error0': if($exclude-hardcoded-values, null, #000),
+    'error10': if($exclude-hardcoded-values, null, #410e0b),
+    'error100': if($exclude-hardcoded-values, null, #fff),
+    'error20': if($exclude-hardcoded-values, null, #601410),
+    'error30': if($exclude-hardcoded-values, null, #8c1d18),
+    'error40': if($exclude-hardcoded-values, null, #b3261e),
+    'error50': if($exclude-hardcoded-values, null, #dc362e),
+    'error60': if($exclude-hardcoded-values, null, #e46962),
+    'error70': if($exclude-hardcoded-values, null, #ec928e),
+    'error80': if($exclude-hardcoded-values, null, #f2b8b5),
+    'error90': if($exclude-hardcoded-values, null, #f9dedc),
+    'error95': if($exclude-hardcoded-values, null, #fceeee),
+    'error99': if($exclude-hardcoded-values, null, #fffbf9),
+    'neutral-variant0': if($exclude-hardcoded-values, null, #000),
+    'neutral-variant10': if($exclude-hardcoded-values, null, #1d1a22),
+    'neutral-variant100': if($exclude-hardcoded-values, null, #fff),
+    'neutral-variant20': if($exclude-hardcoded-values, null, #322f37),
+    'neutral-variant30': if($exclude-hardcoded-values, null, #49454f),
+    'neutral-variant40': if($exclude-hardcoded-values, null, #605d66),
+    'neutral-variant50': if($exclude-hardcoded-values, null, #79747e),
+    'neutral-variant60': if($exclude-hardcoded-values, null, #938f99),
+    'neutral-variant70': if($exclude-hardcoded-values, null, #aea9b4),
+    'neutral-variant80': if($exclude-hardcoded-values, null, #cac4d0),
+    'neutral-variant90': if($exclude-hardcoded-values, null, #e7e0ec),
+    'neutral-variant95': if($exclude-hardcoded-values, null, #f5eefa),
+    'neutral-variant99': if($exclude-hardcoded-values, null, #fffbfe),
+    'neutral0': if($exclude-hardcoded-values, null, #000),
+    'neutral10': if($exclude-hardcoded-values, null, #1c1b1f),
+    'neutral100': if($exclude-hardcoded-values, null, #fff),
+    'neutral12': if($exclude-hardcoded-values, null, #201f23),
+    'neutral17': if($exclude-hardcoded-values, null, #2b292d),
+    'neutral20': if($exclude-hardcoded-values, null, #313033),
+    'neutral22': if($exclude-hardcoded-values, null, #313033),
+    'neutral24': if($exclude-hardcoded-values, null, #313033),
+    'neutral30': if($exclude-hardcoded-values, null, #484649),
+    'neutral4': if($exclude-hardcoded-values, null, #0e0e11),
+    'neutral40': if($exclude-hardcoded-values, null, #605d62),
+    'neutral50': if($exclude-hardcoded-values, null, #787579),
+    'neutral6': if($exclude-hardcoded-values, null, #141317),
+    'neutral60': if($exclude-hardcoded-values, null, #939094),
+    'neutral70': if($exclude-hardcoded-values, null, #aeaaae),
+    'neutral80': if($exclude-hardcoded-values, null, #c9c5ca),
+    'neutral87': if($exclude-hardcoded-values, null, #ddd8dd),
+    'neutral90': if($exclude-hardcoded-values, null, #e6e1e5),
+    'neutral92': if($exclude-hardcoded-values, null, #ece7ec),
+    'neutral94': if($exclude-hardcoded-values, null, #f1ecf1),
+    'neutral95': if($exclude-hardcoded-values, null, #f4eff4),
+    'neutral96': if($exclude-hardcoded-values, null, #f7f2f7),
+    'neutral98': if($exclude-hardcoded-values, null, #fdf8fd),
+    'neutral99': if($exclude-hardcoded-values, null, #fffbfe),
+    'primary0': if($exclude-hardcoded-values, null, #000),
+    'primary10': if($exclude-hardcoded-values, null, #21005d),
+    'primary100': if($exclude-hardcoded-values, null, #fff),
+    'primary20': if($exclude-hardcoded-values, null, #381e72),
+    'primary30': if($exclude-hardcoded-values, null, #4f378b),
+    'primary40': if($exclude-hardcoded-values, null, #6750a4),
+    'primary50': if($exclude-hardcoded-values, null, #7f67be),
+    'primary60': if($exclude-hardcoded-values, null, #9a82db),
+    'primary70': if($exclude-hardcoded-values, null, #b69df8),
+    'primary80': if($exclude-hardcoded-values, null, #d0bcff),
+    'primary90': if($exclude-hardcoded-values, null, #eaddff),
+    'primary95': if($exclude-hardcoded-values, null, #f6edff),
+    'primary99': if($exclude-hardcoded-values, null, #fffbfe),
+    'secondary0': if($exclude-hardcoded-values, null, #000),
+    'secondary10': if($exclude-hardcoded-values, null, #1d192b),
+    'secondary100': if($exclude-hardcoded-values, null, #fff),
+    'secondary20': if($exclude-hardcoded-values, null, #332d41),
+    'secondary30': if($exclude-hardcoded-values, null, #4a4458),
+    'secondary40': if($exclude-hardcoded-values, null, #625b71),
+    'secondary50': if($exclude-hardcoded-values, null, #7a7289),
+    'secondary60': if($exclude-hardcoded-values, null, #958da5),
+    'secondary70': if($exclude-hardcoded-values, null, #b0a7c0),
+    'secondary80': if($exclude-hardcoded-values, null, #ccc2dc),
+    'secondary90': if($exclude-hardcoded-values, null, #e8def8),
+    'secondary95': if($exclude-hardcoded-values, null, #f6edff),
+    'secondary99': if($exclude-hardcoded-values, null, #fffbfe),
+    'tertiary0': if($exclude-hardcoded-values, null, #000),
+    'tertiary10': if($exclude-hardcoded-values, null, #31111d),
+    'tertiary100': if($exclude-hardcoded-values, null, #fff),
+    'tertiary20': if($exclude-hardcoded-values, null, #492532),
+    'tertiary30': if($exclude-hardcoded-values, null, #633b48),
+    'tertiary40': if($exclude-hardcoded-values, null, #7d5260),
+    'tertiary50': if($exclude-hardcoded-values, null, #986977),
+    'tertiary60': if($exclude-hardcoded-values, null, #b58392),
+    'tertiary70': if($exclude-hardcoded-values, null, #d29dac),
+    'tertiary80': if($exclude-hardcoded-values, null, #efb8c8),
+    'tertiary90': if($exclude-hardcoded-values, null, #ffd8e4),
+    'tertiary95': if($exclude-hardcoded-values, null, #ffecf1),
+    'tertiary99': if($exclude-hardcoded-values, null, #fffbfa),
+    'white': if($exclude-hardcoded-values, null, #fff)
+  );
+}

package/core/tokens/m3/definitions/_md-ref-typeface.scss

@@ -0,0 +1,14 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'brand': if($exclude-hardcoded-values, null, (Roboto)),
+    'plain': if($exclude-hardcoded-values, null, (Roboto)),
+    'weight-bold': if($exclude-hardcoded-values, null, 700),
+    'weight-medium': if($exclude-hardcoded-values, null, 500),
+    'weight-regular': if($exclude-hardcoded-values, null, 400)
+  );
+}

package/core/tokens/m3/definitions/_md-sys-color.scss

@@ -0,0 +1,126 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+
+@use './md-ref-palette';
+
+$_default-dark: (
+  'md-ref-palette': md-ref-palette.values(),
+);
+
+@function values-dark($deps: $_default-dark) {
+  @return (
+    'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'error': map.get($deps, 'md-ref-palette', 'error80'),
+    'error-container': map.get($deps, 'md-ref-palette', 'error30'),
+    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral20'),
+    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary40'),
+    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'on-background': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'on-error': map.get($deps, 'md-ref-palette', 'error20'),
+    'on-error-container': map.get($deps, 'md-ref-palette', 'error90'),
+    'on-primary': map.get($deps, 'md-ref-palette', 'primary20'),
+    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary90'),
+    'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'),
+    'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'),
+    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary20'),
+    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'),
+    'on-secondary-fixed-variant':
+      map.get($deps, 'md-ref-palette', 'secondary30'),
+    'on-surface': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary20'),
+    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'),
+    'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'),
+    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant60'),
+    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),
+    'primary': map.get($deps, 'md-ref-palette', 'primary80'),
+    'primary-container': map.get($deps, 'md-ref-palette', 'primary30'),
+    'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'),
+    'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'),
+    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'secondary': map.get($deps, 'md-ref-palette', 'secondary80'),
+    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary30'),
+    'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),
+    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'surface-bright': map.get($deps, 'md-ref-palette', 'neutral24'),
+    'surface-container': map.get($deps, 'md-ref-palette', 'neutral12'),
+    'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral17'),
+    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral22'),
+    'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral4'),
+    'surface-dim': map.get($deps, 'md-ref-palette', 'neutral6'),
+    'surface-tint': map.get($deps, 'md-ref-palette', 'primary80'),
+    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),
+    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary80'),
+    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary30'),
+    'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
+  );
+}
+
+$_default-light: (
+  'md-ref-palette': md-ref-palette.values(),
+);
+
+@function values-light($deps: $_default-light) {
+  @return (
+    'background': map.get($deps, 'md-ref-palette', 'neutral99'),
+    'error': map.get($deps, 'md-ref-palette', 'error40'),
+    'error-container': map.get($deps, 'md-ref-palette', 'error90'),
+    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral95'),
+    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary80'),
+    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral20'),
+    'on-background': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'on-error': map.get($deps, 'md-ref-palette', 'error100'),
+    'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),
+    'on-primary': map.get($deps, 'md-ref-palette', 'primary100'),
+    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),
+    'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'),
+    'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'),
+    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary100'),
+    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),
+    'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'),
+    'on-secondary-fixed-variant':
+      map.get($deps, 'md-ref-palette', 'secondary30'),
+    'on-surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),
+    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary100'),
+    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),
+    'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'),
+    'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'),
+    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant50'),
+    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+    'primary': map.get($deps, 'md-ref-palette', 'primary40'),
+    'primary-container': map.get($deps, 'md-ref-palette', 'primary90'),
+    'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'),
+    'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'),
+    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'secondary': map.get($deps, 'md-ref-palette', 'secondary40'),
+    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),
+    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'surface': map.get($deps, 'md-ref-palette', 'neutral99'),
+    'surface-bright': map.get($deps, 'md-ref-palette', 'neutral98'),
+    'surface-container': map.get($deps, 'md-ref-palette', 'neutral94'),
+    'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral92'),
+    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral96'),
+    'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral100'),
+    'surface-dim': map.get($deps, 'md-ref-palette', 'neutral87'),
+    'surface-tint': map.get($deps, 'md-ref-palette', 'primary40'),
+    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'),
+    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary40'),
+    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
+  );
+}

package/core/tokens/m3/definitions/_md-sys-elevation.scss

@@ -0,0 +1,15 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'level0': if($exclude-hardcoded-values, null, 0),
+    'level1': if($exclude-hardcoded-values, null, 1),
+    'level2': if($exclude-hardcoded-values, null, 3),
+    'level3': if($exclude-hardcoded-values, null, 6),
+    'level4': if($exclude-hardcoded-values, null, 8),
+    'level5': if($exclude-hardcoded-values, null, 12)
+  );
+}

package/core/tokens/m3/definitions/_md-sys-motion.scss

@@ -0,0 +1,46 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'duration-extra-long1': if($exclude-hardcoded-values, null, 700ms),
+    'duration-extra-long2': if($exclude-hardcoded-values, null, 800ms),
+    'duration-extra-long3': if($exclude-hardcoded-values, null, 900ms),
+    'duration-extra-long4': if($exclude-hardcoded-values, null, 1000ms),
+    'duration-long1': if($exclude-hardcoded-values, null, 450ms),
+    'duration-long2': if($exclude-hardcoded-values, null, 500ms),
+    'duration-long3': if($exclude-hardcoded-values, null, 550ms),
+    'duration-long4': if($exclude-hardcoded-values, null, 600ms),
+    'duration-medium1': if($exclude-hardcoded-values, null, 250ms),
+    'duration-medium2': if($exclude-hardcoded-values, null, 300ms),
+    'duration-medium3': if($exclude-hardcoded-values, null, 350ms),
+    'duration-medium4': if($exclude-hardcoded-values, null, 400ms),
+    'duration-short1': if($exclude-hardcoded-values, null, 50ms),
+    'duration-short2': if($exclude-hardcoded-values, null, 100ms),
+    'duration-short3': if($exclude-hardcoded-values, null, 150ms),
+    'duration-short4': if($exclude-hardcoded-values, null, 200ms),
+    'easing-emphasized':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),
+    'easing-emphasized-accelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 0.8, 0.15)),
+    'easing-emphasized-decelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.05, 0.7, 0.1, 1)),
+    'easing-legacy':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 0.2, 1)),
+    'easing-legacy-accelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 1, 1)),
+    'easing-legacy-decelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0.2, 1)),
+    'easing-linear':
+      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 1, 1)),
+    'easing-standard':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)),
+    'easing-standard-accelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 1, 1)),
+    'easing-standard-decelerate':
+      if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0, 1)),
+    'path': /** TODO: type "motion_path" is not supported. */ null
+  );
+}

package/core/tokens/m3/definitions/_md-sys-shape.scss

@@ -0,0 +1,24 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'corner-extra-large': if($exclude-hardcoded-values, null, 28px),
+    'corner-extra-large-top':
+      if($exclude-hardcoded-values, null, (28px 28px 0 0)),
+    'corner-extra-small': if($exclude-hardcoded-values, null, 4px),
+    'corner-extra-small-top':
+      if($exclude-hardcoded-values, null, (4px 4px 0 0)),
+    'corner-full': if($exclude-hardcoded-values, null, 9999px),
+    'corner-large': if($exclude-hardcoded-values, null, 16px),
+    'corner-large-end': if($exclude-hardcoded-values, null, (0 16px 16px 0)),
+    'corner-large-start':
+      if($exclude-hardcoded-values, null, (16px 0 0 16px)),
+    'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0 0)),
+    'corner-medium': if($exclude-hardcoded-values, null, 12px),
+    'corner-none': if($exclude-hardcoded-values, null, 0),
+    'corner-small': if($exclude-hardcoded-values, null, 8px)
+  );
+}

package/core/tokens/m3/definitions/_md-sys-state.scss

@@ -0,0 +1,13 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16),
+    'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12),
+    'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08),
+    'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12)
+  );
+}