@ng-matero/extensions 18.1.2 → 18.2.0

package/alert/alert.scss

@@ -11,7 +11,7 @@
   @include token-utils.use-tokens(tokens-mtx-alert.$prefix, tokens-mtx-alert.get-token-slots()) {
     $border-color: token-utils.get-token-variable(outline-color);
 
-    border: 1px solid var($border-color);
+    border: 1px solid $border-color;
 
     @include token-utils.create-token-slot(border-radius, container-shape);
     @include token-utils.create-token-slot(background-color, background-color);

package/core/theming/_definition.scss

@@ -37,9 +37,10 @@ $theme-version: 1;
   }
 
   $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or mat.$violet-palette;
+  $primary: map.get($config, primary) or palettes.$violet-palette;
   $tertiary: map.get($config, tertiary) or $primary;
-  // mat.$private-use-system-color-variables: map.get($config, use-system-variables) or false;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
+  mat.$private-use-system-color-variables: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (
@@ -53,8 +54,9 @@ $theme-version: 1;
         neutral-variant: map.get($primary, neutral-variant),
         error: map.get($primary, error),
       ),
+      color-system-variables-prefix: $system-variables-prefix,
       color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $tertiary, map.get($primary, error))
+          $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
     )
   );
 }
@@ -73,13 +75,22 @@ $theme-version: 1;
   $bold: map.get($config, bold-weight) or 700;
   $medium: map.get($config, medium-weight) or 500;
   $regular: map.get($config, regular-weight) or 400;
-  // mat.$private-use-system-typography-variables: map.get($config, use-system-variables) or false;
+  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
+  mat.$private-use-system-typography-variables: map.get($config, use-system-variables) or false;
 
   @return (
     $internals: (
       theme-version: $theme-version,
+      font-definition: (
+        plain: $plain,
+        brand: $brand,
+        bold: $bold,
+        medium: $medium,
+        regular: $regular,
+      ),
+      typography-system-variables-prefix: $system-variables-prefix,
       typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular)
+          $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
     )
   );
 }

package/core/tokens/_m3-tokens.scss

@@ -3,9 +3,17 @@
 @use './m3';
 @use './m3/definitions' as m3-token-definitions;
 @use '../tokens/m2' as m2-tokens;
+@use '../style/elevation';
 @use './density';
 @use './format-tokens';
 
+// Default system level prefix to use when directly calling the `system-level-*` mixins
+$_system-level-prefix: sys;
+
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
+$_system-fallback-prefix: mat-app;
+
 /// 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
@@ -85,8 +93,9 @@ $_cached-token-slots: null;
 /// 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
+/// @param {Boolean} $include-density Whether to include density tokens
 /// @return {Map} A map of namespaced tokens
-@function _generate-tokens($systems, $include-non-systemized: false) {
+@function _generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
   $systems: map.merge((
     md-sys-color: (),
     md-sys-elevation: (),
@@ -115,173 +124,321 @@ $_cached-token-slots: null;
   // 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) {
+      @if density.is-systemized($namespace, $token) and not $include-density {
         $tokens: map.remove($tokens, $token);
       }
     }
     $result: map.set($result, $namespace, $tokens);
   }
+
+  @return $result;
+}
+
+// Return a new map where the values are the same as the provided map's
+// keys, prefixed with "--mat-app-". For example:
+// (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
+@function _create-system-app-vars-map($map) {
+  $new-map: ();
+  @each $key, $value in $map {
+    $new-map: map.set($new-map, $key, --#{$_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(m3-token-definitions.md-sys-color-values-light()),
+    'md-sys-typescale':
+        _create-system-app-vars-map(m3-token-definitions.md-sys-typescale-values()),
+    'md-sys-elevation':
+        _create-system-app-vars-map(m3-token-definitions.md-sys-elevation-values()),
+    'md-sys-state':
+        _create-system-app-vars-map(m3-token-definitions.md-sys-state-values()),
+    'md-sys-shape':
+        _create-system-app-vars-map(m3-token-definitions.md-sys-shape-values()),
+  );
+
+  @return mat.private-deep-merge-all(
+    _generate-tokens($app-vars, true, true),
+    generate-density-tokens(0)
+  );
+}
+
+// Emits CSS variables for Material's system level values. Uses the
+// namespace prefix in $_system-fallback-prefix.
+// e.g. --mat-app-surface: #E5E5E5
+@mixin theme($theme, $overrides: ()) {
+  @include system-level-colors($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-typography($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-shape($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-motion($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-state($theme, $overrides, $_system-fallback-prefix);
+}
+
+@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);
+
+  @if (not $prefix) {
+    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+        color-system-variables-prefix) or $_system-level-prefix;
+  }
+
+  $ref: (
+    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
+  );
+
+  $sys-colors: if($type == dark,
+    m3-token-definitions.md-sys-color-values-dark($ref),
+    m3-token-definitions.md-sys-color-values-light($ref));
+
+  @each $name, $value in $sys-colors {
+    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  }
+}
+
+@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: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
+  );
+
+  @if (not $prefix) {
+    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+        typography-system-variables-prefix) or $_system-level-prefix;
+  }
+
+  @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) {
+    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  }
+}
+
+@function create-map($keys, $prefix) {
+  $result: ();
+  @each $key in $keys {
+    $result: map.merge($result, ($key: var(--#{$prefix}-#{$key})));
+  }
   @return $result;
 }
 
-@function _get-sys-color($type, $ref) {
+@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  $shadow-color: map.get(
+      $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
+
+  @for $level from 0 through 24 {
+    $value: elevation.get-box-shadow($level, $shadow-color);
+
+    --#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
+  }
+
+  @each $name, $value in m3-token-definitions.md-sys-elevation-values() {
+    $level: map.get($overrides, $name) or $value;
+    $value: elevation.get-box-shadow($level, $shadow-color);
+
+    --#{$prefix}-#{$name}: #{$value};
+  }
+}
+
+@mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  @each $name, $value in m3-token-definitions.md-sys-shape-values() {
+    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  }
+}
+
+@mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  @each $name, $value in m3-token-definitions.md-sys-state-values() {
+    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  }
+}
+
+@mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  @each $name, $value in m3-token-definitions.md-sys-motion-values() {
+    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+  }
+}
+
+@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));
 
   @if (mat.$private-use-system-color-variables) {
-    @return (
-      'background': var(--sys-background),
-      'error': var(--sys-error),
-      'error-container': var(--sys-error-container),
-      'inverse-on-surface': var(--sys-inverse-on-surface),
-      'inverse-primary': var(--sys-inverse-primary),
-      'inverse-surface': var(--sys-inverse-surface),
-      'on-background': var(--sys-on-background),
-      'on-error': var(--sys-on-error),
-      'on-error-container': var(--sys-on-error-container),
-      'on-primary': var(--sys-on-primary),
-      'on-primary-container': var(--sys-on-primary-container),
-      'on-primary-fixed': var(--sys-on-primary-fixed),
-      'on-primary-fixed-variant': var(--sys-on-primary-fixed-variant),
-      'on-secondary': var(--sys-on-secondary),
-      'on-secondary-container': var(--sys-on-secondary-container),
-      'on-secondary-fixed': var(--sys-on-secondary-fixed),
-      'on-secondary-fixed-variant': var(--sys-on-secondary-fixed-variant),
-      'on-surface': var(--sys-on-surface),
-      'on-surface-variant': var(--sys-on-surface-variant),
-      'on-tertiary': var(--sys-on-tertiary),
-      'on-tertiary-container': var(--sys-on-tertiary-container),
-      'on-tertiary-fixed': var(--sys-on-tertiary-fixed),
-      'on-tertiary-fixed-variant': var(--sys-on-tertiary-fixed-variant),
-      'outline': var(--sys-outline),
-      'outline-variant': var(--sys-outline-variant),
-      'primary': var(--sys-primary),
-      'primary-container': var(--sys-primary-container),
-      'primary-fixed': var(--sys-primary-fixed),
-      'primary-fixed-dim': var(--sys-primary-fixed-dim),
-      'scrim': var(--sys-scrim),
-      'secondary': var(--sys-secondary),
-      'secondary-container': var(--sys-secondary-container),
-      'secondary-fixed': var(--sys-secondary-fixed),
-      'secondary-fixed-dim': var(--sys-secondary-fixed-dim),
-      'shadow': map.get($mdc-sys-color, shadow),
-      'surface': var(--sys-surface),
-      'surface-bright': var(--sys-surface-bright),
-      'surface-container': var(--sys-surface-container),
-      'surface-container-high': var(--sys-surface-container-high),
-      'surface-container-highest': var(--sys-surface-container-highest),
-      'surface-container-low': var(--sys-surface-container-low),
-      'surface-container-lowest': var(--sys-surface-container-lowest),
-      'surface-dim': var(--sys-surface-dim),
-      'surface-tint': var(--sys-surface-tint),
-      'surface-variant': var(--sys-surface-variant),
-      'tertiary': var(--sys-tertiary),
-      'tertiary-container': var(--sys-tertiary-container),
-      'tertiary-fixed': var(--sys-tertiary-fixed),
-      'tertiary-fixed-dim': var(--sys-tertiary-fixed-dim),
+    $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)
+    ));
   }
 
   @return $mdc-sys-color;
 }
 
-@function _get-sys-typeface($ref) {
+@function _get-sys-typeface($ref, $prefix) {
   @if (mat.$private-use-system-typography-variables) {
-    @return (
-      'body-large': var(--sys-body-large),
-      'body-large-font': var(--sys-body-large-font),
-      'body-large-line-height': var(--sys-body-large-line-height),
-      'body-large-size': var(--sys-body-large-size),
-      'body-large-tracking': var(--sys-body-large-tracking),
-      'body-large-weight': var(--sys-body-large-weight),
-      'body-medium': var(--sys-body-medium),
-      'body-medium-font': var(--sys-body-medium-font),
-      'body-medium-line-height': var(--sys-body-medium-line-height),
-      'body-medium-size': var(--sys-body-medium-size),
-      'body-medium-tracking': var(--sys-body-medium-tracking),
-      'body-medium-weight': var(--sys-body-medium-weight),
-      'body-small': var(--sys-body-small),
-      'body-small-font': var(--sys-body-small-font),
-      'body-small-line-height': var(--sys-body-small-line-height),
-      'body-small-size': var(--sys-body-small-size),
-      'body-small-tracking': var(--sys-body-small-tracking),
-      'body-small-weight': var(--sys-body-small-weight),
-      'display-large': var(--sys-display-large),
-      'display-large-font': var(--sys-display-large-font),
-      'display-large-line-height': var(--sys-display-large-line-height),
-      'display-large-size': var(--sys-display-large-size),
-      'display-large-tracking': var(--sys-display-large-tracking),
-      'display-large-weight': var(--sys-display-large-weight),
-      'display-medium': var(--sys-display-medium),
-      'display-medium-font': var(--sys-display-medium-font),
-      'display-medium-line-height': var(--sys-display-medium-line-height),
-      'display-medium-size': var(--sys-display-medium-size),
-      'display-medium-tracking': var(--sys-display-medium-tracking),
-      'display-medium-weight': var(--sys-display-medium-weight),
-      'display-small': var(--sys-display-small),
-      'display-small-font': var(--sys-display-small-font),
-      'display-small-line-height': var(--sys-display-small-line-height),
-      'display-small-size': var(--sys-display-small-size),
-      'display-small-tracking': var(--sys-display-small-tracking),
-      'display-small-weight': var(--sys-display-small-weight),
-      'headline-large': var(--sys-headline-large),
-      'headline-large-font': var(--sys-headline-large-font),
-      'headline-large-line-height': var(--sys-headline-large-line-height),
-      'headline-large-size': var(--sys-headline-large-size),
-      'headline-large-tracking': var(--sys-headline-large-tracking),
-      'headline-large-weight': var(--sys-headline-large-weight),
-      'headline-medium': var(--sys-headline-medium),
-      'headline-medium-font': var(--sys-headline-medium-font),
-      'headline-medium-line-height': var(--sys-headline-medium-line-height),
-      'headline-medium-size': var(--sys-headline-medium-size),
-      'headline-medium-tracking': var(--sys-headline-medium-tracking),
-      'headline-medium-weight': var(--sys-headline-medium-weight),
-      'headline-small': var(--sys-headline-small),
-      'headline-small-font': var(--sys-headline-small-font),
-      'headline-small-line-height': var(--sys-headline-small-line-height),
-      'headline-small-size': var(--sys-headline-small-size),
-      'headline-small-tracking': var(--sys-headline-small-tracking),
-      'headline-small-weight': var(--sys-headline-small-weight),
-      'label-large': var(--sys-label-large),
-      'label-large-font': var(--sys-label-large-font),
-      'label-large-line-height': var(--sys-label-large-line-height),
-      'label-large-size': var(--sys-label-large-size),
-      'label-large-tracking': var(--sys-label-large-tracking),
-      'label-large-weight': var(--sys-label-large-weight),
-      'label-large-weight-prominent': var(--sys-label-large-weight-prominent),
-      'label-medium': var(--sys-label-medium),
-      'label-medium-font': var(--sys-label-medium-font),
-      'label-medium-line-height': var(--sys-label-medium-line-height),
-      'label-medium-size': var(--sys-label-medium-size),
-      'label-medium-tracking': var(--sys-label-medium-tracking),
-      'label-medium-weight': var(--sys-label-medium-weight),
-      'label-medium-weight-prominent': var(--sys-label-medium-weight-prominent),
-      'label-small': var(--sys-label-small),
-      'label-small-font': var(--sys-label-small-font),
-      'label-small-line-height': var(--sys-label-small-line-height),
-      'label-small-size': var(--sys-label-small-size),
-      'label-small-tracking': var(--sys-label-small-tracking),
-      'label-small-weight': var(--sys-label-small-weight),
-      'title-large': var(--sys-title-large),
-      'title-large-font': var(--sys-title-large-font),
-      'title-large-line-height': var(--sys-title-large-line-height),
-      'title-large-size': var(--sys-title-large-size),
-      'title-large-tracking': var(--sys-title-large-tracking),
-      'title-large-weight': var(--sys-title-large-weight),
-      'title-medium': var(--sys-title-medium),
-      'title-medium-font': var(--sys-title-medium-font),
-      'title-medium-line-height': var(--sys-title-medium-line-height),
-      'title-medium-size': var(--sys-title-medium-size),
-      'title-medium-tracking': var(--sys-title-medium-tracking),
-      'title-medium-weight': var(--sys-title-medium-weight),
-      'title-small': var(--sys-title-small),
-      'title-small-font': var(--sys-title-small-font),
-      'title-small-line-height': var(--sys-title-small-line-height),
-      'title-small-size': var(--sys-title-small-size),
-      'title-small-tracking': var(--sys-title-small-tracking),
-      'title-small-weight': var(--sys-title-small-weight),
+    $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);
   }
   @return m3-token-definitions.md-sys-typescale-values($ref);
 }
@@ -291,13 +448,14 @@ $_cached-token-slots: null;
 /// @param {Map} $primary The primary palette
 /// @param {Map} $tertiary The tertiary palette
 /// @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) {
+@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);
+  $sys-color: _get-sys-color($type, $ref, $system-variables-prefix);
 
   @return _generate-tokens(map.merge($ref, (
     // Used to get the theme type
@@ -321,14 +479,14 @@ $_cached-token-slots: null;
 /// @param {String|Number} $bold The bold font-weight
 /// @param {String|Number} $medium The medium font-weight
 /// @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) {
+@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);
-
+  $sys-typeface: _get-sys-typeface($ref, $system-variables-prefix);
   @return _generate-tokens((
     md-sys-typescale: $sys-typeface
   ));