@angular/material 17.1.0 → 17.2.0-next.0

package/button/_fab-theme.scss

@@ -1,15 +1,20 @@
-@use 'sass:map';
 @use '@material/fab/fab-theme' as mdc-fab-theme;
+@use '@material/fab/fab-small-theme' as mdc-fab-small-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
+@use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small;
 @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
 @use '../core/tokens/m2/mat/fab' as tokens-mat-fab;
+@use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-fab.
+/// @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));
@@ -18,6 +23,7 @@
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
       @include mdc-fab-theme.theme(tokens-mdc-fab.get-unthemable-tokens());
+      @include mdc-fab-small-theme.theme(tokens-mdc-fab-small.get-unthemable-tokens());
       @include mdc-extended-fab-theme.theme(
           tokens-mdc-extended-fab.get-unthemable-tokens()
       );
@@ -40,17 +46,37 @@
   @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
 }
 
-@mixin color($theme) {
+@mixin _fab-small-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-fab-small.get-color-tokens($theme)
+  );
+
+  $mat-tokens: if($palette,
+    tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-fab-small.get-color-tokens($theme)
+  );
+
+  @include mdc-fab-small-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-tokens);
+}
+
+/// Outputs color theme styles for the mat-fab.
+/// @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 fab: primary, secondary, or tertiary
+///     (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
+      @include _fab-small-variant($theme, null);
       @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-color-tokens($theme));
 
-      .mat-mdc-fab,
-      .mat-mdc-mini-fab {
+      .mat-mdc-fab {
         &.mat-primary {
           @include _fab-variant($theme, primary);
         }
@@ -63,10 +89,26 @@
           @include _fab-variant($theme, warn);
         }
       }
+
+      .mat-mdc-mini-fab {
+        &.mat-primary {
+          @include _fab-small-variant($theme, primary);
+        }
+
+        &.mat-accent {
+          @include _fab-small-variant($theme, accent);
+        }
+
+        &.mat-warn {
+          @include _fab-small-variant($theme, warn);
+        }
+      }
     }
   }
 }
 
+/// Outputs typography theme styles for the mat-fab.
+/// @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));
@@ -74,21 +116,39 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-fab.$prefix,
+        tokens-mat-fab.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-fab-small.$prefix,
+        tokens-mat-fab-small.get-typography-tokens($theme));
     }
   }
 }
 
+/// Outputs density theme styles for the mat-fab.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-fab.$prefix,
+        tokens-mat-fab.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-fab-small.$prefix,
+        tokens-mat-fab-small.get-density-tokens($theme));
+    }
+  }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the fab: primary, secondary, or tertiary
+///     (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -105,11 +165,18 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-extended-fab-theme.theme(map.get($tokens, tokens-mdc-extended-fab.$prefix));
-    @include mdc-fab-theme.theme(map.get($tokens, tokens-mdc-fab.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-fab.$prefix, map.get($tokens, tokens-mat-fab.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-extended-fab-tokens: token-utils.get-tokens-for(
+      $tokens, tokens-mdc-extended-fab.$prefix, $options...);
+  $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
+  $mdc-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab-small.$prefix,
+    $options...);
+  $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
+  $mat-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab-small.$prefix,
+    $options...);
+  @include mdc-extended-fab-theme.theme($mdc-extended-fab-tokens);
+  @include mdc-fab-theme.theme($mdc-fab-tokens);
+  @include mdc-fab-small-theme.theme($mdc-fab-small-tokens);
+  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
+  @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens);
 }

package/button/_icon-button-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 @use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 @use '../core/style/sass-utils';
-@use './button-base';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -67,7 +66,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
+        tokens-mat-icon-button.get-typography-tokens($theme));
+    }
+  }
 }
 
 @mixin density($theme) {
@@ -91,6 +95,11 @@
       $property-name: size,
     );
 
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
+        tokens-mat-icon-button.get-density-tokens($theme));
+    }
+
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
     .mat-mdc-icon-button.mat-mdc-button-base {
       // Match the styles that used to be present. This is necessary for backwards
@@ -107,8 +116,6 @@
       width: var(--mdc-icon-button-state-layer-size);
       height: var(--mdc-icon-button-state-layer-size);
       padding: math.div($calculated-size - $icon-size, 2);
-
-      @include button-base.mat-private-button-touch-target-density($density-scale);
     }
   }
 }

package/button-toggle/_button-toggle-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -7,6 +6,9 @@
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-button-toggle.
+/// @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));
@@ -25,9 +27,14 @@
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-button-toggle.
+/// @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 button toggle: primary, secondary, tertiary,
+///      or error (If not specified, default secondary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -39,6 +46,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-button-toggle.
+/// @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));
@@ -53,6 +62,8 @@
   }
 }
 
+/// Outputs density theme styles for the mat-button-toggle.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -67,10 +78,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-button-toggle.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the button toggle: primary, secondary, tertiary,
+///      or error (If not specified, default secondary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -87,10 +103,9 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-        tokens-mat-standard-button-toggle.$prefix,
-        map.get($tokens, tokens-mat-standard-button-toggle.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mat-standard-button-toggle-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-standard-button-toggle.$prefix, $options...);
+  @include token-utils.create-token-values(
+      tokens-mat-standard-button-toggle.$prefix, $mat-standard-button-toggle-tokens);
 }

package/checkbox/_checkbox-theme.scss

@@ -1,14 +1,17 @@
-@use 'sass:map';
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field/form-field-theme' as mdc-form-field-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
+@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-checkbox.
+/// @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));
@@ -16,17 +19,26 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-unthemable-tokens());
     }
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-checkbox.
+/// @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 checkbox: primary, secondary, tertiary, or
+///     error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-color-tokens($theme));
     }
 
     .mat-mdc-checkbox {
@@ -39,15 +51,12 @@
       &.mat-warn {
         @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
       }
-
-      &.mat-mdc-checkbox-disabled label {
-        // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-        color: inspection.get-theme-color($theme, foreground, disabled-text);
-      }
     }
   }
 }
 
+/// Outputs typography theme styles for the mat-checkbox.
+/// @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));
@@ -55,6 +64,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-typography-tokens($theme));
     }
 
     .mat-mdc-checkbox {
@@ -63,6 +74,8 @@
   }
 }
 
+/// Outputs density theme styles for the mat-checkbox.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   $density-scale: inspection.get-theme-density($theme);
 
@@ -72,20 +85,21 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
-    }
-
-    @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
-      .mat-mdc-checkbox-touch-target {
-        display: none;
-      }
+      @include token-utils.create-token-values(
+        tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-density-tokens($theme));
     }
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the checkbox: primary, secondary, tertiary, or
+///     error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -102,10 +116,14 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
-    //   so this mixin is currently incomplete.
-    @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-checkbox-tokens: token-utils.get-tokens-for(
+      $tokens, tokens-mdc-checkbox.$prefix, $options...);
+  // Don't pass $options here, since the mdc-form-field doesn't support color options,
+  // only the mdc-checkbox does.
+  $mdc-form-field-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-form-field.$prefix);
+  $mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix);
+  @include mdc-checkbox-theme.theme($mdc-checkbox-tokens);
+  @include mdc-form-field-theme.theme($mdc-form-field-tokens);
+  @include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens);
 }

package/chips/_chips-theme.scss

@@ -1,11 +1,14 @@
-@use 'sass:map';
 @use 'sass:color';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
+@use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-chips.
+/// @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));
@@ -17,9 +20,14 @@
   }
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-chips.
+/// @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 selected chip: primary, secondary, tertiary,
+///      or error (If not specified, default secondary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     .mat-mdc-standard-chip {
@@ -47,6 +55,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-chips.
+/// @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));
@@ -60,6 +70,8 @@
   }
 }
 
+/// Outputs density theme styles for the mat-chips.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -73,10 +85,15 @@
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-chips.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the selected chip: primary, secondary, tertiary,
+///      or error (If not specified, default secondary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -93,8 +110,7 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include mdc-chip-theme.theme(map.get($tokens, tokens-mdc-chip.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
+  @include mdc-chip-theme.theme($mdc-chip-tokens);
 }

package/core/_core-theme.scss

@@ -10,37 +10,51 @@
 @use './typography/typography';
 @use './tokens/token-utils';
 @use './tokens/m2/mat/app' as tokens-mat-app;
+@use './tokens/m2/mat/ripple' as tokens-mat-ripple;
+@use './tokens/m2/mat/option' as tokens-mat-option;
+@use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
+@use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
 
 @mixin base($theme) {
-  @include ripple-theme.base($theme);
-  @include option-theme.base($theme);
-  @include optgroup-theme.base($theme);
-  @include pseudo-checkbox-theme.base($theme);
-  // TODO(mmalerba): Move additional core base tokens here
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include ripple-theme.base($theme);
+    @include option-theme.base($theme);
+    @include optgroup-theme.base($theme);
+    @include pseudo-checkbox-theme.base($theme);
+  }
 }
 
 @mixin color($theme) {
-  @include ripple-theme.color($theme);
-  @include option-theme.color($theme);
-  @include optgroup-theme.color($theme);
-  @include pseudo-checkbox-theme.color($theme);
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-app.$prefix,
-      tokens-mat-app.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
+  @else {
+    @include ripple-theme.color($theme);
+    @include option-theme.color($theme);
+    @include optgroup-theme.color($theme);
+    @include pseudo-checkbox-theme.color($theme);
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-app.$prefix,
+        tokens-mat-app.get-color-tokens($theme));
+    }
 
-  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-  // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-  // elevated.
-  @for $zValue from 0 through 24 {
-    $selector: elevation.$prefix + $zValue;
-    // We need the `mat-mdc-elevation-specific`, because some MDC mixins
-    // come with elevation baked in and we don't have a way of removing it.
-    .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-      @include private.private-theme-elevation($zValue, $theme);
+    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+    // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
+    // elevated.
+    @for $zValue from 0 through 24 {
+      $selector: elevation.$prefix + $zValue;
+      // We need the `mat-mdc-elevation-specific`, because some MDC mixins
+      // come with elevation baked in and we don't have a way of removing it.
+      .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
+        @include private.private-theme-elevation($zValue, $theme);
+      }
     }
   }
 
+  // TODO(crisbeto): move this into the base.
   // Marker that is used to determine whether the user has added a theme to their page.
   @at-root {
     .mat-theme-loaded-marker {
@@ -50,34 +64,67 @@
 }
 
 @mixin typography($theme) {
-  @include option-theme.typography($theme);
-  @include optgroup-theme.typography($theme);
-  @include pseudo-checkbox-theme.typography($theme);
-  @include ripple-theme.typography($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include option-theme.typography($theme);
+    @include optgroup-theme.typography($theme);
+    @include pseudo-checkbox-theme.typography($theme);
+    @include ripple-theme.typography($theme);
+  }
 }
 
 @mixin density($theme) {
-  @include option-theme.density($theme);
-  @include optgroup-theme.density($theme);
-  @include pseudo-checkbox-theme.density($theme);
-  @include ripple-theme.density($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    @include option-theme.density($theme);
+    @include optgroup-theme.density($theme);
+    @include pseudo-checkbox-theme.density($theme);
+    @include ripple-theme.density($theme);
+  }
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
-@mixin theme($theme) {
+@mixin theme($theme, $options...) {
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
+  $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
+  $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
+  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
+    tokens-mat-full-pseudo-checkbox.$prefix, $options...);
+  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
+    tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);
+
+  @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens);
+  @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens);
+  @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
+  @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
+    $mat-full-pseudo-checkbox-tokens);
+  @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $mat-minimal-pseudo-checkbox-tokens);
+}