diff --git a/color/_color.scss b/color/_color.scss
index 1bd5ff52c..df2281f99 100644
--- a/color/_color.scss
+++ b/color/_color.scss
@@ -10,6 +10,50 @@
 @use '../tokens';
 // go/keep-sorted end
 
+/// `color.theme()` emits `--md-sys-color-*` custom properties for a given color
+/// scheme.
+///
+/// @example scss
+///   @use '@material/web/color/color';
+///
+///   :root {
+///     @include color.theme(
+///       'primary': /* ... */,
+///       'primary-container': /* ... */,
+///       'primary-fixed': /* ... */,
+///       'primary-fixed-dim': /* ... */,
+///       /* ... */
+///     );
+///   }
+///
+///   /* Generated CSS */
+///   :root {
+///     --md-sys-color-primary: /* ... */;
+///     --md-sys-color-primary-container: /* ... */;
+///     --md-sys-color-primary-fixed: /* ... */;
+///     --md-sys-color-primary-fixed-dim: /* ... */;
+///     /* ... */
+///   }
+///
+/// To generate a color scheme, use the Material Theme Builder Figma plugin.
+///
+/// @link https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
+///
+/// @param {Map} $tokens - A Map with `md-sys-color` token name keys and their
+///     corresponding values.
+/// @output Emits `--md-sys-color-*` custom properties for a given color scheme.
+@mixin theme($tokens) {
+  @each $token, $value in $tokens {
+    @if list.index(tokens.$md-sys-color-supported-tokens, $token) == null {
+      @error 'md-sys-color `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-sys-color-#{$token}: #{$value};
+    }
+  }
+}
+
 /// `color.light-theme()` emits `--md-sys-color-*` custom properties for a light
 /// theme from the given color palette.
 ///
@@ -151,43 +195,3 @@
     )
   );
 }
-
-/// `color.theme()` emits `--md-sys-color-*` custom properties for a given color
-/// scheme.
-///
-/// @example scss
-///   @use '@material/web/color/color';
-///
-///   :root {
-///     @include color.theme(
-///       'primary': /* ... */,
-///       'primary-container': /* ... */,
-///       'primary-fixed': /* ... */,
-///       'primary-fixed-dim': /* ... */,
-///       /* ... */
-///     );
-///   }
-///
-///   /* Generated CSS */
-///   :root {
-///     --md-sys-color-primary: /* ... */;
-///     --md-sys-color-primary-container: /* ... */;
-///     --md-sys-color-primary-fixed: /* ... */;
-///     --md-sys-color-primary-fixed-dim: /* ... */;
-///     /* ... */
-///   }
-///
-/// @param {Map} $tokens - A Map with `md-sys-color` token name keys and their
-///     corresponding values.
-/// @output Emits `--md-sys-color-*` custom properties for a given color scheme.
-@mixin theme($tokens) {
-  @each $token, $value in $tokens {
-    @if list.index(tokens.$md-sys-color-supported-tokens, $token) == null {
-      @error 'md-sys-color `#{$token}` is not a supported token.';
-    }
-
-    @if $value {
-      --md-sys-color-#{$token}: #{$value};
-    }
-  }
-}
diff --git a/tokens/_md-comp-primary-tab.scss b/tokens/_md-comp-primary-tab.scss
index 19148fd95..8f1ad96e3 100644
--- a/tokens/_md-comp-primary-tab.scss
+++ b/tokens/_md-comp-primary-tab.scss
@@ -16,14 +16,6 @@
 @use './values';
 // go/keep-sorted end
 
-$_default: (
-  'md-sys-color': md-sys-color.values-light(),
-  'md-sys-elevation': md-sys-elevation.values(),
-  'md-sys-shape': md-sys-shape.values(),
-  'md-sys-state': md-sys-state.values(),
-  'md-sys-typescale': md-sys-typescale.values(),
-);
-
 $supported-tokens: (
   // go/keep-sorted start
   'active-focus-icon-color',
@@ -77,6 +69,14 @@ $unsupported-tokens: (
   // go/keep-sorted end
 );
 
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-elevation': md-sys-elevation.values(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-primary-navigation-tab.values(
     $deps,
diff --git a/tokens/_md-comp-secondary-tab.scss b/tokens/_md-comp-secondary-tab.scss
index 34c6257b2..4193f04b5 100644
--- a/tokens/_md-comp-secondary-tab.scss
+++ b/tokens/_md-comp-secondary-tab.scss
@@ -16,14 +16,6 @@
 @use './values';
 // go/keep-sorted end
 
-$_default: (
-  'md-sys-color': md-sys-color.values-light(),
-  'md-sys-elevation': md-sys-elevation.values(),
-  'md-sys-shape': md-sys-shape.values(),
-  'md-sys-state': md-sys-state.values(),
-  'md-sys-typescale': md-sys-typescale.values(),
-);
-
 $supported-tokens: (
   // go/keep-sorted start
   'active-focus-icon-color',
@@ -75,6 +67,14 @@ $unsupported-tokens: (
   'focus-state-layer-opacity'
 );
 
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-elevation': md-sys-elevation.values(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: md-comp-secondary-navigation-tab.values(
     $deps,
diff --git a/tokens/_md-comp-slider.scss b/tokens/_md-comp-slider.scss
index c497faadf..9f7dabb80 100644
--- a/tokens/_md-comp-slider.scss
+++ b/tokens/_md-comp-slider.scss
@@ -60,15 +60,7 @@ $supported-tokens: (
   // go/keep-sorted end
 );
 
-$_default: (
-  'md-sys-color': md-sys-color.values-light(),
-  'md-sys-elevation': md-sys-elevation.values(),
-  'md-sys-shape': md-sys-shape.values(),
-  'md-sys-state': md-sys-state.values(),
-  'md-sys-typescale': md-sys-typescale.values(),
-);
-
-$_unsupported-tokens: (
+$unsupported-tokens: (
   'disabled-handle-opacity',
   'label-container-elevation',
   'label-text-type',
@@ -85,11 +77,19 @@ $_unsupported-tokens: (
   'focus-state-layer-opacity'
 );
 
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-elevation': md-sys-elevation.values(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: values.validate(
     md-comp-slider.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $_unsupported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
     $renamed-tokens: (
       'label-label-text-color': 'label-text-color',
       'label-label-text-type': 'label-text-type',
diff --git a/tokens/_md-ref-typeface.scss b/tokens/_md-ref-typeface.scss
index 15c59616b..d3b2b91ca 100644
--- a/tokens/_md-ref-typeface.scss
+++ b/tokens/_md-ref-typeface.scss
@@ -32,8 +32,13 @@ $supported-tokens: (
   @if not $exclude-custom-properties {
     // Create --md-ref-typeface-* custom properties
     @each $token, $value in $tokens {
-      $var: var(--md-ref-typeface-#{$token}, #{$value});
-      $tokens: map.set($tokens, $token, $var);
+      @if $value != null {
+        $tokens: map.set(
+          $tokens,
+          $token,
+          var(--md-ref-typeface-#{$token}, #{$value})
+        );
+      }
     }
   }
 
diff --git a/tokens/_md-sys-color.scss b/tokens/_md-sys-color.scss
index 6c38fa6e8..795f95ca5 100644
--- a/tokens/_md-sys-color.scss
+++ b/tokens/_md-sys-color.scss
@@ -79,8 +79,13 @@ $_default-dark: (
   @if not $exclude-custom-properties {
     // Create --md-sys-color-* custom properties
     @each $token, $value in $tokens {
-      $var: var(--md-sys-color-#{$token}, #{$value});
-      $tokens: map.set($tokens, $token, $var);
+      @if $value != null {
+        $tokens: map.set(
+          $tokens,
+          $token,
+          var(--md-sys-color-#{$token}, #{$value})
+        );
+      }
     }
   }
 
@@ -100,8 +105,13 @@ $_default-light: (
   @if not $exclude-custom-properties {
     // Create --md-sys-color-* custom properties
     @each $token, $value in $tokens {
-      $var: var(--md-sys-color-#{$token}, #{$value});
-      $tokens: map.set($tokens, $token, $var);
+      @if $value != null {
+        $tokens: map.set(
+          $tokens,
+          $token,
+          var(--md-sys-color-#{$token}, #{$value})
+        );
+      }
     }
   }
 
diff --git a/tokens/_md-sys-typescale.scss b/tokens/_md-sys-typescale.scss
index 6da9d3ad4..d80b53fcc 100644
--- a/tokens/_md-sys-typescale.scss
+++ b/tokens/_md-sys-typescale.scss
@@ -131,8 +131,13 @@ $_default: (
   @if not $exclude-custom-properties {
     // Create --md-sys-typescale-* custom properties
     @each $token, $value in $tokens {
-      $var: var(--md-sys-typescale-#{$token}, #{$value});
-      $tokens: map.set($tokens, $token, $var);
+      @if $value != null {
+        $tokens: map.set(
+          $tokens,
+          $token,
+          var(--md-sys-typescale-#{$token}, #{$value})
+        );
+      }
     }
   }