@angular/material 20.0.0-rc.0 → 20.0.0-rc.1

package/badge/_badge-theme.scss

@@ -1,18 +1,22 @@
-@use 'sass:color';
-@use '../core/theming/theming';
+@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
+@use '../core/theming/theming';
 @use '../core/theming/validation';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-badge';
-@use '../core/tokens/token-utils';
-@use '../core/style/sass-utils';
+@use './m3-badge';
+@use 'sass:color';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-badge.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -25,12 +29,14 @@
 
 /// Outputs color theme styles for the mat-badge.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
-///      or error (If not specified, default error color will be used).
-@mixin color($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for
+///     the badge: primary, secondary, tertiary, or error (If not specified,
+///     default error color will be used).
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -59,7 +65,9 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -74,7 +82,9 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), density));
   } @else {
   }
 }
@@ -100,10 +110,13 @@
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
 ///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
 ///      or error (If not specified, default error color will be used).
-@mixin theme($theme, $options...) {
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/badge/_m3-badge.scss

@@ -1,81 +1,53 @@
 @use 'sass:map';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
 
 /// Generates custom tokens for the mat-badge.
-/// @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} A set of custom tokens for the mat-badge
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    background-color: map.get($systems, md-sys-color, error),
-    text-color: map.get($systems, md-sys-color, on-error),
-    disabled-state-background-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, error),
-      $alpha: 0.38),
-    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
-    text-font: map.get($systems, md-sys-typescale, label-small-font),
-    text-size: map.get($systems, md-sys-typescale, label-small-size),
-    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
-    small-size-text-size: m3-utils.hardcode(0, $exclude-hardcoded),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
-    line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-    legacy-small-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-    small-size-container-size: m3-utils.hardcode(6px, $exclude-hardcoded),
-    small-size-line-height: m3-utils.hardcode(6px, $exclude-hardcoded),
-    container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
-    small-size-container-padding: m3-utils.hardcode(0, $exclude-hardcoded),
-    container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
-    small-size-container-offset: m3-utils.hardcode(-6px 0, $exclude-hardcoded),
-    container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
-    small-size-container-overlap-offset: m3-utils.hardcode(-6px, $exclude-hardcoded),
-
-    // This size isn't in the M3 spec so we emit the same values as for `medium`.
-    large-size-container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
-    large-size-line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
-    large-size-container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
-    large-size-container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
-    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
-    large-size-container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-  );
+@function get-tokens($theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, error, $color-variant);
+  }
 
-  $variant-tokens: (
-    primary: (
-      background-color: map.get($systems, md-sys-color, primary),
-      text-color: map.get($systems, md-sys-color, on-primary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
+  $tokens: (
+    base: (
+      container-shape: map.get($system, corner-full),
+      container-size: 16px,
+      legacy-container-size: unset,
+      legacy-small-size-container-size: unset,
+      small-size-container-size: 6px,
+      container-padding: 0 4px,
+      small-size-container-padding: 0,
+      container-offset: -12px 0,
+      small-size-container-offset: -6px 0,
+      container-overlap-offset: -12px,
+      small-size-container-overlap-offset: -6px,
+      large-size-container-size: 16px,
+      large-size-container-offset: -12px 0,
+      large-size-container-overlap-offset: -12px,
+      large-size-container-padding: 0 4px,
+      legacy-large-size-container-size: unset,
     ),
-    secondary: (
-      background-color: map.get($systems, md-sys-color, secondary),
-      text-color: map.get($systems, md-sys-color, on-secondary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, secondary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
+    color: (
+      background-color: map.get($system, error),
+      text-color: map.get($system, on-error),
+      disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%),
+      disabled-state-text-color: map.get($system, on-error),
     ),
-    tertiary: (
-      background-color: map.get($systems, md-sys-color, tertiary),
-      text-color: map.get($systems, md-sys-color, on-tertiary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, tertiary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+    typography: (
+      text-font: map.get($system, label-small-font),
+      text-size: map.get($system, label-small-size),
+      text-weight: map.get($system, label-small-weight),
+      large-size-text-size: map.get($system, label-small-size),
+      small-size-text-size: 0,
+      line-height: 16px,
+      small-size-line-height: 6px,
+      large-size-line-height: 16px,
     ),
-    error: () // Default, no overrides needed
+    density: (),
   );
 
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+  @return $tokens;
 }

package/button-toggle/_m3-button-toggle.scss

@@ -17,7 +17,7 @@ $prefix: (mat, button-toggle);
   $tokens: sass-utils.merge-all(
     m3-utils.generate-typography-tokens($systems, label-text, label-large),
   (
-    shape: map.get($systems, md-sys-shape, corner-full),
+    shape: map.get($systems, md-sys-shape, corner-extra-large),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     text-color: map.get($systems, md-sys-color, on-surface),

package/core/color/_all-color.scss

@@ -7,7 +7,7 @@
     @error 'No color configuration specified.';
   }
 
-  @include all-theme.all-component-themes(
+  @include all-theme.all-component-colors(
       inspection.theme-remove($theme, base, typography, density));
 }
 

package/core/theming/_all-theme.scss

@@ -125,6 +125,47 @@
   @include timepicker-theme.base($theme);
 }
 
+@mixin all-component-colors($theme) {
+  @include core-theme.color($theme);
+  @include card-theme.color($theme);
+  @include progress-bar-theme.color($theme);
+  @include tooltip-theme.color($theme);
+  @include form-field-theme.color($theme);
+  @include input-theme.color($theme);
+  @include select-theme.color($theme);
+  @include autocomplete-theme.color($theme);
+  @include dialog-theme.color($theme);
+  @include chips-theme.color($theme);
+  @include slide-toggle-theme.color($theme);
+  @include radio-theme.color($theme);
+  @include slider-theme.color($theme);
+  @include menu-theme.color($theme);
+  @include list-theme.color($theme);
+  @include paginator-theme.color($theme);
+  @include tabs-theme.color($theme);
+  @include checkbox-theme.color($theme);
+  @include button-theme.color($theme);
+  @include icon-button-theme.color($theme);
+  @include fab-theme.color($theme);
+  @include snack-bar-theme.color($theme);
+  @include table-theme.color($theme);
+  @include progress-spinner-theme.color($theme);
+  @include badge-theme.color($theme);
+  @include bottom-sheet-theme.color($theme);
+  @include button-toggle-theme.color($theme);
+  @include datepicker-theme.color($theme);
+  @include divider-theme.color($theme);
+  @include expansion-theme.color($theme);
+  @include grid-list-theme.color($theme);
+  @include icon-theme.color($theme);
+  @include sidenav-theme.color($theme);
+  @include stepper-theme.color($theme);
+  @include sort-theme.color($theme);
+  @include toolbar-theme.color($theme);
+  @include tree-theme.color($theme);
+  @include timepicker-theme.color($theme);
+}
+
 // @deprecated Use `all-component-themes`.
 @mixin angular-material-theme($theme) {
   @include all-component-themes($theme);

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

@@ -119,23 +119,20 @@ $_overrides-only: true;
     @include _color-variant-styles($theme, primary);
   }
   .mat-badge {
-    @include badge-theme.color($theme, $color-variant: primary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: primary);
   }
 
   .mat-accent {
     @include _color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
-    @include badge-theme.color($theme, $color-variant: tertiary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: tertiary);
   }
 
   .mat-warn {
     @include _color-variant-styles($theme, error);
   }
   .mat-badge-warn {
-    @include badge-theme.color($theme, $color-variant: error,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: error);
   }
 }

package/core/theming/_definition.scss

@@ -5,6 +5,7 @@
 @use './palettes';
 @use '../tokens/m3-tokens';
 @use './config-validation';
+@use '../tokens/m3';
 
 // Prefix used for component token fallback variables, e.g.
 // `color: var(--mat-text-button-label-text-color, var(--mat-sys-primary));`
@@ -18,6 +19,7 @@ $system-level-prefix: mat-sys;
 
 /// 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;
 
@@ -30,97 +32,95 @@ $theme-version: 1;
     @error $err;
   }
 
-  @return sass-utils.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())),
+  $color-config: map.get($config, color) or ();
+  $typography-config: map.get($config, typography) or ();
+  $density-config: map.get($config, density) or ();
+
+  // colors
+  $type: map.get($color-config, theme-type) or light;
+  $primary: map.get($color-config, primary) or palettes.$violet-palette;
+  $tertiary: map.get($color-config, tertiary) or $primary;
+  $color-system-variables-prefix:
+    map.get($color-config, system-variables-prefix) or $system-level-prefix;
+  sass-utils.$use-system-color-variables: map.get($color-config, use-system-variables) or false;
+
+  $palettes: (
+    primary: map.remove($primary, neutral, neutral-variant, secondary),
+    secondary: map.get($primary, secondary),
+    tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error),
+    neutral: map.get($primary, neutral),
+    neutral-variant: map.get($primary, neutral-variant),
+    error: map.get($primary, error),
   );
-}
 
-/// 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;
-  }
+  // typography
+  $default-plain: (Roboto, sans-serif);
+  $default-brand: $default-plain;
+  $plain: map.get($typography-config, plain-family) or $default-plain;
+  $brand: map.get($typography-config, brand-family) or $default-brand;
+  $bold: map.get($typography-config, bold-weight) or 700;
+  $medium: map.get($typography-config, medium-weight) or 500;
+  $regular: map.get($typography-config, regular-weight) or 400;
+  $typography-system-variables-prefix: map.get($typography-config, system-variables-prefix) or
+    $system-level-prefix;
+  sass-utils.$use-system-typography-variables:
+    map.get($typography-config, use-system-variables) or false;
+  $typography: (
+    plain: $plain,
+    brand: $brand,
+    bold: $bold,
+    medium: $medium,
+    regular: $regular,
+  );
 
-  $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or palettes.$violet-palette;
-  $tertiary: map.get($config, tertiary) or $primary;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
-  sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
+  // density
+  $density-scale: map.get($density-config, scale) or 0;
 
   @return (
     $internals: (
-      theme-version: $theme-version,
+      base-tokens: m3-tokens.generate-base-tokens(),
+      color-system-variables-prefix: $color-system-variables-prefix,
+      color-tokens:
+        m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
+      density-scale: $density-scale,
+      font-definition: $typography,
+      md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
+      md-sys-elevation: m3.md-sys-elevation-values(),
+      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-sys-typescale:
+        m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
+      palettes: $palettes,
       theme-type: $type,
-      palettes: (
-        primary: map.remove($primary, neutral, neutral-variant, secondary),
-        secondary: map.get($primary, secondary),
-        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
-        neutral: map.get($primary, neutral),
-        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), $system-variables-prefix)
+      theme-version: $theme-version,
+      typography-system-variables-prefix: $typography-system-variables-prefix,
+      typography-tokens:
+          m3-tokens.generate-typography-tokens($typography, $typography-system-variables-prefix),
     )
   );
 }
 
+/// Defines an Angular Material theme object with color settings.
+/// @param {Map} $config The color configuration
+/// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "color" key
+@function define-colors($config: ()) {
+  @return define-theme((color: $config));
+}
+
 /// Defines an Angular Material theme object with typography settings.
 /// @param {Map} $config The typography configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "typography" key
 @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;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
-  sass-utils.$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, $system-variables-prefix)
-    )
-  );
+  @return define-theme((typography: $config));
 }
 
 /// Defines an Angular Material theme object with density settings.
 /// @param {Map} $config The density configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "density" key
 @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,
-    )
-  );
+  @return define-theme((density: $config));
 }

package/core/theming/_inspection.scss

@@ -3,7 +3,7 @@
 @use '../style/validation';
 @use './m2-inspection';
 
-$_internals: _mat-theming-internals-do-not-access;
+$internals: _mat-theming-internals-do-not-access;
 
 $_m3-typescales: (
   display-large,
@@ -30,7 +30,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Boolean|Null} true if the theme has errors, else null.
 @function _validate-theme-object($theme) {
   $err: validation.validate-type($theme, 'map') or
-        map.get($theme, $_internals, theme-version) == null;
+        map.get($theme, $internals, theme-version) == null;
   @return if($err, true, null);
 }
 
@@ -40,7 +40,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Number} The version number of the theme (0 if unknown).
 @function get-theme-version($theme) {
   $err: _validate-theme-object($theme);
-  @return if($err, 0, map.get($theme, $_internals, theme-version) or 0);
+  @return if($err, 0, map.get($theme, $internals, theme-version) or 0);
 }
 
 /// Gets the type of theme represented by a theme object (light or dark).
@@ -55,13 +55,15 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if not theme-has($theme, color) {
       @error 'Color information is not available on this theme.';
     }
-    @return map.get($theme, $_internals, theme-type) or light;
+    @return map.get($theme, $internals, theme-type) or light;
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
   }
 }
 
+
+
 /// Gets a color from a theme object. This function take a different amount of arguments depending
 /// on if it's working with an M2 or M3 theme:
 /// - With an M3 theme it accepts either 2 or 3 arguments. If 2 arguments are passed, the second
@@ -119,7 +121,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
-  $color-roles: map.get($theme, $_internals, color-tokens, (mat, theme));
+  $color-roles: map.get($theme, $internals, color-tokens, (mat, theme));
   $result: map.get($color-roles, $color-role-name);
   @if not $result {
     @error #{'Valid color roles are: #{map.keys($color-roles)}. Got:'} $color-role-name;
@@ -141,7 +143,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
-  $palettes: map.get($theme, $_internals, palettes);
+  $palettes: map.get($theme, $internals, palettes);
   $palette: map.get($palettes, $palette-name);
   @if not $palette {
     $supported-palettes: map.keys($palettes);
@@ -185,7 +187,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
       font-weight: '-weight'
     ), $property);
     $token-name: '#{$typescale}#{$property-key}';
-    @return map.get($theme, $_internals, typography-tokens, (mat, typography), $token-name);
+    @return map.get($theme, $internals, typography-tokens, (mat, typography), $token-name);
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
@@ -204,7 +206,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if not theme-has($theme, density) {
       @error 'Density information is not available on this theme.';
     }
-    @return map.get($theme, $_internals, density-scale);
+    @return map.get($theme, $internals, density-scale);
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
@@ -222,18 +224,18 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   @else if $version == 1 {
     @if $system == base {
-      @return map.get($theme, $_internals, base-tokens) != null;
+      @return map.get($theme, $internals, base-tokens) != null;
     }
     @if $system == color {
-      @return map.get($theme, $_internals, color-tokens) != null and
-        map.get($theme, $_internals, theme-type) != null and
-        map.get($theme, $_internals, palettes) != null;
+      @return map.get($theme, $internals, color-tokens) != null and
+        map.get($theme, $internals, theme-type) != null and
+        map.get($theme, $internals, palettes) != null;
     }
     @if $system == typography {
-      @return map.get($theme, $_internals, typography-tokens) != null;
+      @return map.get($theme, $internals, typography-tokens) != null;
     }
     @if $system == density {
-      @return map.get($theme, $_internals, density-scale) != null;
+      @return map.get($theme, $internals, density-scale) != null;
     }
     @error 'Valid systems are: base, color, typography, density. Got:' $system;
   }
@@ -259,19 +261,19 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @else if $version == 1 {
     @each $system in $systems {
       @if $system == base {
-        $theme: map.deep-remove($theme, $_internals, base-tokens);
+        $theme: map.deep-remove($theme, $internals, base-tokens);
       }
       @else if $system == color {
-        $theme: map.deep-remove($theme, $_internals, color-tokens);
-        $theme: map.deep-remove($theme, $_internals, theme-type);
-        $theme: map.deep-remove($theme, $_internals, palettes);
+        $theme: map.deep-remove($theme, $internals, color-tokens);
+        $theme: map.deep-remove($theme, $internals, theme-type);
+        $theme: map.deep-remove($theme, $internals, palettes);
       }
       @else if $system == typography {
-        $theme: map.deep-remove($theme, $_internals, typography-tokens);
+        $theme: map.deep-remove($theme, $internals, typography-tokens);
       }
       @else if $system == density {
-        $theme: map.deep-remove($theme, $_internals, density-scale);
-        $theme: map.deep-remove($theme, $_internals, density-tokens);
+        $theme: map.deep-remove($theme, $internals, density-scale);
+        $theme: map.deep-remove($theme, $internals, density-tokens);
       }
     }
     @return $theme;
@@ -297,7 +299,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $result: ();
   @each $system in $systems {
-    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens') or ());
+    $result: map.deep-merge($result, map.get($theme, $internals, '#{$system}-tokens') or ());
   }
 
   @return $result;