@angular/material 20.0.0-rc.1 → 20.0.0

package/core/theming/_color-api-backwards-compatibility.scss

@@ -24,92 +24,109 @@
 $_overrides-only: true;
 
 @mixin _color-variant-styles($theme, $color-variant) {
-  $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only);
-
-  // Some components use the secondary color rather than primary color for `.mat-primary`.
-  // Those components should use the $secondary-color-variant.
-  $secondary-options: (
-    color-variant: if($color-variant == primary, secondary, $color-variant),
-    emit-overrides-only: $_overrides-only
-  );
+  $secondary-when-primary: if($color-variant == primary, secondary, $color-variant);
 
   & {
-    @include option-theme.color($theme, $secondary-options...);
+    @if ($color-variant != primary) {
+      @include option-theme.color($theme, $secondary-when-primary);
+    }
   }
 
   & {
-    @include progress-spinner-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include progress-spinner-theme.color($theme, $color-variant);
+    }
   }
 
   & {
-    @include pseudo-checkbox-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include pseudo-checkbox-theme.color($theme, $color-variant);
+    }
   }
 
   & {
-    @include stepper-theme.color($theme, $primary-options...);
+    @include stepper-theme.color($theme, $color-variant);
   }
 
   &.mat-icon {
-    @include icon-theme.color($theme, $primary-options...);
+    @include icon-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-checkbox {
-    @include checkbox-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include checkbox-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-slider {
-    @include slider-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include slider-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-tab-group,
   &.mat-mdc-tab-nav-bar {
-    @include tabs-theme.color($theme, $primary-options...);
+      @include tabs-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-slide-toggle {
-    @include slide-toggle-theme.color($theme, $primary-options...);
+    @include slide-toggle-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-form-field {
-    @include select-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include select-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-radio-button {
-    @include radio-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include radio-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-progress-bar {
-    @include progress-bar-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include progress-bar-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-mdc-form-field {
-    @include form-field-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include form-field-theme.color($theme, $color-variant);
+    }
   }
 
   &.mat-datepicker-content {
-    @include datepicker-theme.color($theme, $primary-options...);
+    @include datepicker-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-button-base {
-    @include button-theme.color($theme, $primary-options...);
-    @include icon-button-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include button-theme.color($theme, $color-variant);
+    }
+    @include icon-button-theme.color($theme, $color-variant);
   }
 
   &.mat-mdc-standard-chip {
-    @include chips-theme.color($theme, $secondary-options...);
+    @if ($color-variant != primary) {
+      @include chips-theme.color($theme, $secondary-when-primary);
+    }
   }
 
   .mdc-list-item__start,
   .mdc-list-item__end {
-    @include checkbox-theme.color($theme, $primary-options...);
-    @include radio-theme.color($theme, $primary-options...);
+    @if ($color-variant != primary) {
+      @include checkbox-theme.color($theme, $color-variant);
+      @include radio-theme.color($theme, $color-variant);
+    }
   }
 
   // M3 dropped support for warn/error color FABs.
-  @if $color-variant != error {
+  @if $color-variant != error and $color-variant != primary {
     &.mat-mdc-fab,
     &.mat-mdc-mini-fab {
-      @include fab-theme.color($theme, $primary-options...);
+      @include fab-theme.color($theme, $color-variant);
     }
   }
 }

package/core/theming/_definition.scss

@@ -89,6 +89,12 @@ $theme-version: 1;
       md-sys-motion: m3.md-sys-motion-values(),
       md-sys-shape: m3.md-sys-shape-values(),
       md-sys-state: m3.md-sys-state-values(),
+      md-ref-palette: (
+        // Form field native select option text color
+        neutral10: map.get($palettes, neutral, 10),
+        // Sidenav scrim (container background shadow when opened),
+        neutral-variant20: map.get($palettes, neutral-variant, 20),
+      ),
       md-sys-typescale:
         m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
       palettes: $palettes,

package/core/theming/_inspection.scss

@@ -280,31 +280,6 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
 }
 
-/// Gets the set of tokens from the given theme, limited to those affected by the requested theming
-/// systems.
-/// @param {Map} $theme The theme to get tokens from.
-/// @param {String...} $systems The theming systems to get tokens for. Valid values are: color,
-///   typography, density, base. If no systems are passed, all tokens will be returned.
-/// @return {Map} The requested tokens for the theme.
-@function get-theme-tokens($theme, $systems...) {
-  $systems: if(list.length($systems) == 0, (color, typography, density, base), $systems);
-  $err: _validate-theme-object($theme);
-  @if $err {
-    @error #{'Expected $theme to be an Angular Material theme object. Got:'} $theme;
-  }
-  $err: validation.validate-allowed-values($systems, color, typography, density, base);
-  @if $err {
-    @error #{'Expected $systems to contain valid system names (color, typography, density, or'}
-    #{'base). Got invalid system names:'} $err;
-  }
-  $result: ();
-  @each $system in $systems {
-    $result: map.deep-merge($result, map.get($theme, $internals, '#{$system}-tokens') or ());
-  }
-
-  @return $result;
-}
-
 /// Gets a version of the theme with a modified typography config that preserves old behavior in
 /// some components that previously used `private-typography-to-2014-config`.
 /// Do not introduce new usages of this, it should be cleaned up and removed.

package/core/tokens/_m3-system.scss

@@ -16,13 +16,10 @@
 @use '../../toolbar/m3-toolbar';
 @use '../../tree/m3-tree';
 @use '../style/elevation';
-@use '../style/sass-utils';
 @use '../theming/config-validation';
 @use '../theming/definition';
 @use '../theming/palettes';
 @use './m3';
-@use './m3-tokens';
-@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 
@@ -147,9 +144,9 @@
       // Emit component-level density tokens if the scale is lower than 0. The density tokens
       // do not fallback to any system-level values and must be defined if the scale is different.
       $density-tokens: get-density-tokens($scale);
-      @each $prefix, $tokens in $density-tokens {
+      @each $tokens in $density-tokens {
         @each $token-name, $token-value in $tokens {
-          --#{list.nth($prefix, 1)}-#{list.nth($prefix, 2)}-#{$token-name}: #{$token-value};
+          --mat-#{$token-name}: #{$token-value};
         }
       }
     }
@@ -162,23 +159,23 @@
 // Gets all density-related tokens from the components.
 @function get-density-tokens($scale) {
   @return (
-    m3-checkbox.$prefix: m3-checkbox.get-density-tokens($scale),
-    m3-chip.$prefix: m3-chip.get-density-tokens($scale),
-    m3-expansion.$prefix: m3-expansion.get-density-tokens($scale),
-    m3-fab.$prefix: m3-fab.get-density-tokens($scale),
-    m3-button.$prefix: m3-button.get-density-tokens($scale),
-    m3-form-field.$prefix: m3-form-field.get-density-tokens($scale),
-    m3-icon-button.$prefix: m3-icon-button.get-density-tokens($scale),
-    m3-list.$prefix: m3-list.get-density-tokens($scale),
-    m3-paginator.$prefix: m3-paginator.get-density-tokens($scale),
-    m3-radio.$prefix: m3-radio.get-density-tokens($scale),
-    m3-tabs.$prefix: m3-tabs.get-density-tokens($scale),
-    m3-select.$prefix: m3-select.get-density-tokens($scale),
-    m3-button-toggle.$prefix: m3-button-toggle.get-density-tokens($scale),
-    m3-stepper.$prefix: m3-stepper.get-density-tokens($scale),
-    m3-table.$prefix: m3-table.get-density-tokens($scale),
-    m3-toolbar.$prefix: m3-toolbar.get-density-tokens($scale),
-    m3-tree.$prefix: m3-tree.get-density-tokens($scale),
+    m3-checkbox.get-density-tokens($scale),
+    m3-chip.get-density-tokens($scale),
+    m3-expansion.get-density-tokens($scale),
+    m3-fab.get-density-tokens($scale),
+    m3-button.get-density-tokens($scale),
+    m3-form-field.get-density-tokens($scale),
+    m3-icon-button.get-density-tokens($scale),
+    m3-list.get-density-tokens($scale),
+    m3-paginator.get-density-tokens($scale),
+    m3-radio.get-density-tokens($scale),
+    m3-tabs.get-density-tokens($scale),
+    m3-select.get-density-tokens($scale),
+    m3-button-toggle.get-density-tokens($scale),
+    m3-stepper.get-density-tokens($scale),
+    m3-table.get-density-tokens($scale),
+    m3-toolbar.get-density-tokens($scale),
+    m3-tree.get-density-tokens($scale),
   );
 }
 
@@ -299,27 +296,6 @@
   }
 }
 
-// Return a new map where the values are the same as the provided map's
-// keys, prefixed with "--mat-sys-". For example:
-// (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2)
-@function _create-system-app-vars-map($map) {
-  $new-map: ();
-  @each $key, $value in $map {
-    $new-map: map.set($new-map, $key, --#{definition.$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() {
-  @return sass-utils.deep-merge-all(
-      m3-tokens.generate-tokens($app-vars, true, true),
-      get-density-tokens(0),
-  );
-}
-
 /// Creates a single merged map from the provided variable-length map arguments
 @function map-merge-all($maps...) {
   $result: ();
@@ -328,28 +304,3 @@
   }
   @return $result;
 }
-
-$placeholder-palettes: m3.md-sys-color-values-light(palettes.$blue-palette);
-$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
-$app-vars: (
-  'md-sys-color': _create-system-app-vars-map(m3.md-sys-color-values-light($placeholder-palettes)),
-  'md-sys-typescale': _create-system-app-vars-map(m3.md-sys-typescale-values((
-    brand: (Roboto),
-    plain: (Roboto),
-    bold: 700,
-    medium: 500,
-    regular: 400
-  ))),
-  'md-sys-elevation': _create-system-app-vars-map(m3.md-sys-elevation-values()),
-  'md-sys-state': _create-system-app-vars-map(m3.md-sys-state-values()),
-  'md-sys-shape': _create-system-app-vars-map(m3.md-sys-shape-values()),
-  // Add a subset of palette-specific colors used by components instead of system values
-  'md-ref-palette': _create-system-app-vars-map(
-      (
-        neutral10: '', // Form field native select option text color
-        neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
-      )
-  ),
-);
-
-$theme-with-system-vars: (definition.$internals: $app-vars);

package/core/tokens/_m3-tokens.scss

@@ -1,75 +1,7 @@
-@use '../../autocomplete/m3-autocomplete';
-@use '../../bottom-sheet/m3-bottom-sheet';
-@use '../../button-toggle/m3-button-toggle';
-@use '../../button/m3-button';
-@use '../../button/m3-fab';
-@use '../../button/m3-icon-button';
-@use '../../card/m3-card';
-@use '../../checkbox/m3-checkbox';
-@use '../../chips/m3-chip';
-@use '../../datepicker/m3-datepicker';
-@use '../../dialog/m3-dialog';
-@use '../../divider/m3-divider';
-@use '../../expansion/m3-expansion';
-@use '../../form-field/m3-form-field';
-@use '../../grid-list/m3-grid-list';
-@use '../../icon/m3-icon';
-@use '../../list/m3-list';
-@use '../../menu/m3-menu';
-@use '../../paginator/m3-paginator';
-@use '../../progress-bar/m3-progress-bar';
-@use '../../progress-spinner/m3-progress-spinner';
-@use '../../radio/m3-radio';
-@use '../../select/m3-select';
-@use '../../sidenav/m3-sidenav';
-@use '../../slide-toggle/m3-slide-toggle';
-@use '../../slider/m3-slider';
-@use '../../snack-bar/m3-snack-bar';
-@use '../../sort/m3-sort';
-@use '../../stepper/m3-stepper';
-@use '../../table/m3-table';
-@use '../../tabs/m3-tabs';
-@use '../../timepicker/m3-timepicker';
-@use '../../toolbar/m3-toolbar';
-@use '../../tooltip/m3-tooltip';
-@use '../../tree/m3-tree';
-@use '../m2' as m2-theming;
-@use '../m3-app';
-@use '../option/m3-optgroup';
-@use '../option/m3-option';
-@use '../ripple/m3-ripple';
-@use '../selection/pseudo-checkbox/m3-pseudo-checkbox';
 @use '../style/sass-utils';
-@use './m2-tokens';
 @use './m3';
 @use 'sass:map';
 
-$_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: m2-theming.define-light-theme((
-    color: (
-      primary: m2-theming.define-palette(m2-theming.$red-palette),
-      accent: m2-theming.define-palette(m2-theming.$red-palette),
-      warn: m2-theming.define-palette(m2-theming.$red-palette),
-    ),
-    typography: m2-theming.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
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -86,8 +18,6 @@ $_cached-token-slots: null;
   ), $systems);
   $exclude-hardcoded: not $include-non-systemized;
 
-  $token-slots: _get-token-slots();
-
   // TODO(mmalerba): Fill in remaining tokens.
   $result: sass-utils.deep-merge-all(
     // Add the system color & typography tokens (so we can give users access via an API).
@@ -95,7 +25,6 @@ $_cached-token-slots: null;
       (mat, theme): map.get($systems, md-sys-color),
       (mat, typography): map.get($systems, md-sys-typescale),
     ),
-    get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
   );
 
   @return $result;
@@ -191,60 +120,3 @@ $_cached-token-slots: null;
     md-sys-shape: m3.md-sys-shape-values(),
   ), $include-non-systemized: true);
 }
-
-/// Gets the full set of M3 tokens for the given theme object.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} Full set of M3 tokens
-@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens-list: (
-    m3-app.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-chip.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-dialog.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-divider.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-expansion.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-icon.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-menu.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-option.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-paginator.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-progress-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-progress-spinner.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tabs.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-select.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-slide-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-table.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tree.get-tokens($systems, $exclude-hardcoded, $token-slots),
-  );
-
-  $merged-tokens: ();
-  @each $tokens in $tokens-list {
-    $merged-tokens: map.deep-merge($merged-tokens, $tokens);
-  }
-
-  @return $merged-tokens;
-}

package/core/tokens/_m3-utils.scss

@@ -1,90 +1,7 @@
 @use 'sass:map';
-@use 'sass:list';
 @use 'sass:meta';
 @use 'sass:string';
 
-/// 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)} $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($prefix, $values, $slots, $variant: null) {
-  $result: ();
-  @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) {
-    $variants: list.nth($values, 2);
-    $values: list.nth($values, 1);
-    @each $variant, $overrides in $variants {
-
-      $result: map.merge($result, namespace($prefix, $overrides, $slots, $variant));
-    }
-  }
-  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
-  $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names);
-  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
-  @return map.merge($result, ($prefix: $used-m3-tokens));
-}
-
-/// Hardcode the given value, or null if hardcoded values are excluded.
-@function hardcode($value, $exclude-hardcoded) {
-  @return if($exclude-hardcoded, null, $value);
-}
-
-/// 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;
-}
-
-/// 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;
-}
-
 // 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}));
@@ -107,6 +24,8 @@
       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;
 }
 
@@ -116,5 +35,14 @@
   @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);
 }