From b2687f942e3b9ea8e97f027b99fa61e710fdfa6c Mon Sep 17 00:00:00 2001
From: Liz Mitchell <lizmitchell@google.com>
Date: Wed, 3 Nov 2021 15:51:16 -0700
Subject: [PATCH] chore(sass): update components to use new sass folder

PiperOrigin-RevId: 407445058
---
 components/button/lib/_button-theme.scss      |  36 +-
 components/button/lib/_button.scss            |   2 +-
 .../button/lib/_elevated-button-theme.scss    |  33 +-
 components/button/lib/_elevation-theme.scss   | 142 +++---
 .../button/lib/_filled-button-theme.scss      |  33 +-
 components/button/lib/_icon-theme.scss        |  15 +-
 .../button/lib/_outlined-button-theme.scss    |  39 +-
 components/button/lib/_text-button-theme.scss |  21 +-
 .../button/lib/_tonal-button-theme.scss       |  33 +-
 components/elevation/_elevation-theme.scss    |   7 -
 .../lib/_elevation-overlay-theme.scss         |  95 +---
 .../elevation/lib/_elevation-theme.scss       | 436 +++---------------
 components/elevation/lib/_level-utils.scss    |  38 --
 components/fab/lib/_fab-extended-theme.scss   |  40 +-
 components/fab/lib/_fab-shared-theme.scss     | 276 ++++-------
 components/fab/lib/_fab-theme.scss            |  30 +-
 components/tokens/_resolvers.scss             |   6 -
 17 files changed, 374 insertions(+), 908 deletions(-)
 delete mode 100644 components/elevation/_elevation-theme.scss
 delete mode 100644 components/elevation/lib/_level-utils.scss
 delete mode 100644 components/tokens/_resolvers.scss

diff --git a/components/button/lib/_button-theme.scss b/components/button/lib/_button-theme.scss
index 361a6d31a..abaf6d75b 100644
--- a/components/button/lib/_button-theme.scss
+++ b/components/button/lib/_button-theme.scss
@@ -5,9 +5,7 @@
 
 @use 'sass:map';
 @use '@material/ripple/ripple-theme';
-@use '@material/shape/shape';
 @use '@material/theme/state';
-@use '@material/theme/theme';
 @use '@material/typography/typography';
 
 $light-theme: (
@@ -17,7 +15,7 @@ $light-theme: (
   label-text-size: 14px,
   label-text-tracking: typography.px-to-rem(0.1px),
   label-text-weight: 500,
-  with-icon-icon-size: 18px,
+  with-icon-icon-size: typography.px-to-rem(18px),
 );
 
 $selectors: (
@@ -30,14 +28,13 @@ $selectors: (
   pressed: ':active'
 );
 
-@mixin theme-styles($theme, $resolvers) {
+@mixin theme-styles($theme) {
   @include _set-label-text-typography(
     (
       family: map.get($theme, label-text-font),
       size: map.get($theme, label-text-size),
       tracking: map.get($theme, label-text-tracking),
       weight: map.get($theme, label-text-weight),
-      transform: map.get($theme, label-text-transform),
     )
   );
 
@@ -121,23 +118,22 @@ $selectors: (
 }
 
 @mixin _set-height($height) {
-  @include theme.property(height, $height);
+  height: $height;
 }
 
 @mixin _set-shape-radius($radius) {
-  @include shape.radius($radius);
-
+  &,
   .md3-button__ripple {
-    @include shape.radius($radius);
+    border-radius: $radius;
   }
 }
 
 @mixin _set-container-fill-color($color) {
-  @include theme.property(background-color, $color);
+  background-color: $color;
 }
 
 @mixin _set-ink-color($color) {
-  @include theme.property(color, $color);
+  color: $color;
 }
 
 @mixin _set-label-text-typography($typography-map) {
@@ -147,24 +143,24 @@ $selectors: (
   $weight: map.get($typography-map, weight);
   $transform: map.get($typography-map, transform);
 
-  @include theme.property(font-family, $family);
-  @include theme.property(font-size, $size);
-  @include theme.property(letter-spacing, $tracking);
-  @include theme.property(font-weight, $weight);
-  @include theme.property(text-transform, $transform);
+  font-family: $family;
+  font-size: $size;
+  letter-spacing: $tracking;
+  font-weight: $weight;
+  text-transform: $transform;
 }
 
 @mixin container-padding($padding) {
-  @include theme.property(padding-inline-start, $padding);
-  @include theme.property(padding-inline-end, $padding);
+  padding-inline-start: $padding;
+  padding-inline-end: $padding;
 }
 
 @mixin container-with-icon-padding($icon-padding) {
   &.md3-button--icon-trailing {
-    @include theme.property(padding-inline-end, $icon-padding);
+    padding-inline-end: $icon-padding;
   }
 
   &.md3-button--icon-leading {
-    @include theme.property(padding-inline-start, $icon-padding);
+    padding-inline-start: $icon-padding;
   }
 }
diff --git a/components/button/lib/_button.scss b/components/button/lib/_button.scss
index efb82316a..259264582 100644
--- a/components/button/lib/_button.scss
+++ b/components/button/lib/_button.scss
@@ -5,7 +5,7 @@
 
 @use '@material/touch-target/touch-target';
 @use '@material/theme/selector-ext';
-@use 'third_party/javascript/material_web_components/m3/elevation/lib/surface' as elevation-surface;
+@use '@material/mwc-../elevation/lib/surface' as elevation-surface;
 
 @mixin static-styles() {
   :host {
diff --git a/components/button/lib/_elevated-button-theme.scss b/components/button/lib/_elevated-button-theme.scss
index 6e647b1af..749568c7a 100644
--- a/components/button/lib/_elevated-button-theme.scss
+++ b/components/button/lib/_elevated-button-theme.scss
@@ -4,9 +4,8 @@
 //
 
 @use 'sass:map';
-@use '@material/theme/keys';
-@use '@material/theme/theme';
-@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 @use './button-theme';
 @use './elevation-theme';
 @use './icon-theme';
@@ -43,22 +42,24 @@ $light-theme: map.merge(
   )
 );
 
+@function _resolve-theme($theme, $resolvers) {
+  @return elevation-theme.resolve-theme($theme, $resolvers);
+}
+
 @mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
-  $theme: elevation-theme.resolve-theme-elevation-keys(
-    $theme,
-    $resolver: map.get($resolvers, elevation)
-  );
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
 
-  @include button-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include icon-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include elevation-theme.theme-styles($theme, $resolvers: $resolvers);
+  @include button-theme.theme-styles($theme);
+  @include icon-theme.theme-styles($theme);
+  @include elevation-theme.theme-styles($theme);
 }
diff --git a/components/button/lib/_elevation-theme.scss b/components/button/lib/_elevation-theme.scss
index e5a97fc09..4d9c414b3 100644
--- a/components/button/lib/_elevation-theme.scss
+++ b/components/button/lib/_elevation-theme.scss
@@ -7,86 +7,84 @@
 @use 'sass:meta';
 @use '@material/ripple/ripple-theme';
 @use '@material/theme/state';
-@use '@material/theme/theme';
-@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
-@use 'third_party/javascript/material_web_components/m3/elevation/lib/elevation-theme';
-@use 'third_party/javascript/material_web_components/m3/elevation/lib/elevation-overlay-theme';
-
+@use '@material/mwc-../elevation/lib/elevation-theme';
 @use './button-theme';
 
 $_selectors: button-theme.$selectors;
 
-@mixin theme-styles($theme, $resolvers) {
-  $elevation-resolver: map.get($resolvers, elevation);
-  @include _elevation(
-    $elevation-resolver,
-    $elevation-map: (
-      default: map.get($theme, container-elevation),
-      disabled: map.get($theme, disabled-container-elevation),
-      focus: map.get($theme, focus-container-elevation),
-      hover: map.get($theme, hover-container-elevation),
-      pressed: map.get($theme, pressed-container-elevation)
-    ),
-    $shadow-color: map.get($theme, container-shadow-color),
-    $overlay-tint-color: map.get($theme, container-surface-tint-layer-color)
-  );
-}
-
-@mixin _elevation(
-  $elevation-resolver,
-  $elevation-map,
-  $shadow-color,
-  $overlay-tint-color
-) {
-  @include elevation-theme.with-resolver(
-    $elevation-resolver,
-    $selectors: $_selectors,
-    $elevation: $elevation-map,
-    $shadow-color: $shadow-color
-  );
-
-  @include elevation-overlay-theme.theme-styles(
-    (
-      surface-tint-layer-color: $overlay-tint-color,
+@function resolve-theme($theme, $resolvers) {
+  @return elevation-theme.resolve-theme(
+    $theme,
+    map.get($resolvers, elevation),
+    $shadow-color-token: container-shadow-color,
+    $elevation-tokens: (
+      container-elevation,
+      disabled-container-elevation,
+      focus-container-elevation,
+      hover-container-elevation,
+      pressed-container-elevation
     )
   );
 }
 
-@function resolve-theme-elevation-keys($theme, $resolver) {
-  @if $resolver == null {
-    @return $theme;
-  }
-  $shadow-color: map.get($theme, container-shadow-color);
-
-  $elevation-keys: (
-    container-elevation,
-    hover-container-elevation,
-    focus-container-elevation,
-    pressed-container-elevation,
-    disabled-container-elevation
+@mixin theme-styles($theme) {
+  @include _elevation(
+    (
+      default: (
+        shadow: map.get($theme, container-elevation-shadow),
+        overlay-opacity: map.get($theme, container-elevation-overlay-opacity),
+      ),
+      hover: (
+        shadow: map.get($theme, hover-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, hover-container-elevation-overlay-opacity),
+      ),
+      focus: (
+        shadow: map.get($theme, focus-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, focus-container-elevation-overlay-opacity),
+      ),
+      pressed: (
+        shadow: map.get($theme, pressed-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, pressed-container-elevation-overlay-opacity),
+      ),
+      disabled: (
+        shadow: map.get($theme, disabled-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, disabled-container-elevation-overlay-opacity),
+      ),
+    )
   );
 
-  @each $key in $elevation-keys {
-    $elevation-level: map.get($theme, $key);
-    @if $elevation-level != null {
-      // Unlike `theme-styles`, which delegates to elevation module to resolve
-      // each state's elevation and place it under the correct selector, for
-      // runtime theming the state is managed here and the elevation resolver is
-      // passed a stateless (default state) value. This allows us to cleanly
-      // attach each state's resolved value to its corresponding key in
-      // $elevation-keys, without worrying about having to strip state prefixes
-      // from the resolved keys to match the `theme-styles` CSS custom prop names.
-      $elevation: (
-        default: $elevation-level,
-      );
-      $resolved-value: meta.call(
-        $resolver,
-        $elevation: $elevation,
-        $shadow-color: $shadow-color
-      );
-      // Update the key with the resolved value.
-      $theme: map.set($theme, $key, $resolved-value);
-    }
-  }
-  @return $theme;
+  @include elevation-theme.theme-styles(
+    (
+      surface-tint-layer-color:
+        map.get($theme, container-surface-tint-layer-color),
+    )
+  );
+}
+
+@mixin _elevation($elevations) {
+  @include state.default($_selectors) {
+    @include elevation-theme.theme-styles(state.get-default-state($elevations));
+  }
+
+  @include state.hover($_selectors) {
+    @include elevation-theme.theme-styles(state.get-hover-state($elevations));
+  }
+
+  @include state.focus($_selectors) {
+    @include elevation-theme.theme-styles(state.get-focus-state($elevations));
+  }
+
+  @include state.pressed($_selectors) {
+    @include elevation-theme.theme-styles(state.get-pressed-state($elevations));
+  }
+
+  @include state.disabled($_selectors) {
+    @include elevation-theme.theme-styles(
+      state.get-disabled-state($elevations)
+    );
+  }
 }
diff --git a/components/button/lib/_filled-button-theme.scss b/components/button/lib/_filled-button-theme.scss
index 1e629a13c..b4e067d4c 100644
--- a/components/button/lib/_filled-button-theme.scss
+++ b/components/button/lib/_filled-button-theme.scss
@@ -4,9 +4,8 @@
 //
 
 @use 'sass:map';
-@use '@material/theme/keys';
-@use '@material/theme/theme';
-@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 @use './button-theme';
 @use './elevation-theme';
 @use './icon-theme';
@@ -42,22 +41,24 @@ $light-theme: map.merge(
   )
 );
 
+@function _resolve-theme($theme, $resolvers) {
+  @return elevation-theme.resolve-theme($theme, $resolvers);
+}
+
 @mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
-  $theme: elevation-theme.resolve-theme-elevation-keys(
-    $theme,
-    $resolver: map.get($resolvers, elevation)
-  );
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
 
-  @include button-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include icon-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include elevation-theme.theme-styles($theme, $resolvers: $resolvers);
+  @include button-theme.theme-styles($theme);
+  @include icon-theme.theme-styles($theme);
+  @include elevation-theme.theme-styles($theme);
 }
diff --git a/components/button/lib/_icon-theme.scss b/components/button/lib/_icon-theme.scss
index ef45db66e..630c533e9 100644
--- a/components/button/lib/_icon-theme.scss
+++ b/components/button/lib/_icon-theme.scss
@@ -6,13 +6,11 @@
 @use 'sass:map';
 @use '@material/ripple/ripple-theme';
 @use '@material/theme/state';
-@use '@material/theme/theme';
-@use '@material/typography/typography';
 @use './button-theme';
 
 $_selectors: button-theme.$selectors;
 
-@mixin theme-styles($theme, $resolvers) {
+@mixin theme-styles($theme) {
   @include _set-icon-color(
     (
       default: map.get($theme, with-icon-icon-color),
@@ -51,16 +49,15 @@ $_selectors: button-theme.$selectors;
 @mixin _icon-color($color) {
   ::slotted([slot='icon']),
   .md3-button__icon {
-    @include theme.property(color, $color);
+    color: $color;
   }
 }
 
-@mixin _set-icon-size($size-px) {
-  $size-rem: typography.px-to-rem($size-px);
+@mixin _set-icon-size($size) {
   ::slotted([slot='icon']),
   .md3-button__icon {
-    @include theme.property(font-size, $size-rem);
-    @include theme.property(width, $size-rem);
-    @include theme.property(height, $size-rem);
+    font-size: $size;
+    width: $size;
+    height: $size;
   }
 }
diff --git a/components/button/lib/_outlined-button-theme.scss b/components/button/lib/_outlined-button-theme.scss
index fdb8539de..96e8df361 100644
--- a/components/button/lib/_outlined-button-theme.scss
+++ b/components/button/lib/_outlined-button-theme.scss
@@ -5,10 +5,9 @@
 
 @use 'sass:map';
 @use '@material/shape/shape';
-@use '@material/theme/keys';
 @use '@material/theme/state';
-@use '@material/theme/theme';
-@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 @use './button-theme';
 @use './icon-theme';
 
@@ -44,18 +43,18 @@ $light-theme: map.merge(
 );
 
 @mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
 
-  @include button-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include icon-theme.theme-styles($theme, $resolvers: $resolvers);
+  @include button-theme.theme-styles($theme);
+  @include icon-theme.theme-styles($theme);
   @include _shape-radius(map.get($theme, container-shape));
   @include _outline-color(
     (
@@ -69,7 +68,7 @@ $light-theme: map.merge(
 
 @mixin _shape-radius($radius) {
   .md3-button__outline {
-    @include shape.radius($radius);
+    border-radius: $radius;
   }
 }
 
@@ -97,26 +96,18 @@ $light-theme: map.merge(
 
 @mixin _set-outline-color($color) {
   .md3-button__outline {
-    @include theme.property(border-color, $color);
+    border-color: $color;
   }
 }
 
 @mixin _outline-width($width) {
   .md3-button__outline,
   .md3-button__ripple {
-    @include theme.property(border-width, $width);
+    border-width: $width;
   }
 
   .md3-button__ripple {
-    @include theme.property(
-      width,
-      'calc(100% - 2 * outline-width)',
-      $replace: (outline-width: $width)
-    );
-    @include theme.property(
-      height,
-      'calc(100% - 2 * outline-width)',
-      $replace: (outline-width: $width)
-    );
+    width: calc(100% - 2 * #{$width});
+    height: calc(100% - 2 * #{$width});
   }
 }
diff --git a/components/button/lib/_text-button-theme.scss b/components/button/lib/_text-button-theme.scss
index 0ec349e20..11ce9d273 100644
--- a/components/button/lib/_text-button-theme.scss
+++ b/components/button/lib/_text-button-theme.scss
@@ -4,9 +4,8 @@
 //
 
 @use 'sass:map';
-@use '@material/theme/keys';
-@use '@material/theme/theme';
-@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 @use './button-theme';
 @use './icon-theme';
 
@@ -35,16 +34,16 @@ $light-theme: map.merge(
 );
 
 @mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
 
-  @include button-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include icon-theme.theme-styles($theme, $resolvers: $resolvers);
+  @include button-theme.theme-styles($theme);
+  @include icon-theme.theme-styles($theme);
 }
diff --git a/components/button/lib/_tonal-button-theme.scss b/components/button/lib/_tonal-button-theme.scss
index 0cf5aef78..c15821ce8 100644
--- a/components/button/lib/_tonal-button-theme.scss
+++ b/components/button/lib/_tonal-button-theme.scss
@@ -4,9 +4,8 @@
 //
 
 @use 'sass:map';
-@use '@material/theme/keys';
-@use '@material/theme/theme';
-@use 'third_party/javascript/material_web_components/m3/tokens/resolvers';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 @use './button-theme';
 @use './elevation-theme';
 @use './icon-theme';
@@ -42,22 +41,24 @@ $light-theme: map.merge(
   )
 );
 
+@function _resolve-theme($theme, $resolvers) {
+  @return elevation-theme.resolve-theme($theme, $resolvers);
+}
+
 @mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
-  $theme: elevation-theme.resolve-theme-elevation-keys(
-    $theme,
-    $resolver: map.get($resolvers, elevation)
-  );
-  @include keys.declare-custom-properties($theme, $_custom-property-prefix);
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: keys.create-theme-properties(
-    $theme,
-    $prefix: $_custom-property-prefix
-  );
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
 
-  @include button-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include icon-theme.theme-styles($theme, $resolvers: $resolvers);
-  @include elevation-theme.theme-styles($theme, $resolvers: $resolvers);
+  @include button-theme.theme-styles($theme);
+  @include icon-theme.theme-styles($theme);
+  @include elevation-theme.theme-styles($theme);
 }
diff --git a/components/elevation/_elevation-theme.scss b/components/elevation/_elevation-theme.scss
deleted file mode 100644
index bf1a0d5b3..000000000
--- a/components/elevation/_elevation-theme.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@forward './lib/elevation-theme' show
-  resolver;
diff --git a/components/elevation/lib/_elevation-overlay-theme.scss b/components/elevation/lib/_elevation-overlay-theme.scss
index 1f191586c..1e4b19582 100644
--- a/components/elevation/lib/_elevation-overlay-theme.scss
+++ b/components/elevation/lib/_elevation-overlay-theme.scss
@@ -4,102 +4,25 @@
 //
 
 @use 'sass:map';
-@use '@material/theme/state';
-@use '@material/theme/theme';
-@use './level-utils';
 
-$_default-theme: (
-  surface-tint-layer-color: transparent,
+$transparent-theme: (
   overlay-opacity: 0,
-  disabled-overlay-opacity: 0,
-  focus-overlay-opacity: 0,
-  hover-overlay-opacity: 0,
-  pressed-overlay-opacity: 0,
+  surface-tint-layer-color: transparent,
 );
 
-$_selectors: (
-  enabled: ':enabled',
-  disabled: ':disabled',
-  focus: ':focus',
-  hover: ':hover',
-  pressed: ':active',
-);
-
-@mixin theme-styles($theme, $selectors: $_selectors) {
-  @include _set-overlay-color(map.get($theme, surface-tint-layer-color));
-
-  @include _overlay-opacity(
-    (
-      default: map.get($theme, overlay-opacity),
-      disabled: map.get($theme, disabled-overlay-opacity),
-      focus: map.get($theme, focus-overlay-opacity),
-      hover: map.get($theme, hover-overlay-opacity),
-      pressed: map.get($theme, pressed-overlay-opacity),
-    ),
-    $selectors
-  );
+@mixin theme-styles($theme) {
+  @include _overlay-color(map.get($theme, surface-tint-layer-color));
+  @include _overlay-opacity(map.get($theme, overlay-opacity));
 }
 
-@mixin _set-overlay-color($color) {
+@mixin _overlay-color($color) {
   .md3-elevation-overlay {
-    @include theme.property(background-color, $color);
+    background-color: $color;
   }
 }
 
-@mixin _overlay-opacity($opacity-map, $selectors: $_selectors) {
-  @include state.default($selectors) {
-    @include _set-overlay-opacity(state.get-default-state($opacity-map));
-  }
-
-  @include state.disabled($selectors) {
-    @include _set-overlay-opacity(state.get-disabled-state($opacity-map));
-  }
-
-  @include state.hover($selectors) {
-    @include _set-overlay-opacity(state.get-hover-state($opacity-map));
-  }
-
-  @include state.focus($selectors) {
-    @include _set-overlay-opacity(state.get-focus-state($opacity-map));
-  }
-
-  @include state.pressed($selectors) {
-    @include _set-overlay-opacity(state.get-pressed-state($opacity-map));
-  }
-}
-
-@mixin _set-overlay-opacity($opacity) {
+@mixin _overlay-opacity($opacity) {
   .md3-elevation-overlay {
-    @include theme.property(opacity, $opacity);
+    opacity: $opacity;
   }
 }
-
-///
-/// Returns the appropriate shadow for the given dp and shadow color.
-///
-/// @throw If the provided dp does not map to an elevation level.
-/// @param {number|null} $dp - the dp of the elevation system
-/// @return {number|null} - the opacity or null
-///
-@function overlay-opacity-by-dp($dp) {
-  $level: level-utils.dp-to-level($dp);
-  @return get-overlay-opacity($level);
-}
-
-$_overlay-opacity: (
-  0: 0,
-  1: 0.05,
-  2: 0.08,
-  3: 0.11,
-  4: 0.12,
-  5: 0.14,
-);
-
-///
-/// Returns the appropriate overlay opacity for the given level.
-/// @param {number} $level - the level of the elevation system
-/// @return {number|null} - the opacity or null
-///
-@function get-overlay-opacity($level) {
-  @return map.get($_overlay-opacity, $level);
-}
diff --git a/components/elevation/lib/_elevation-theme.scss b/components/elevation/lib/_elevation-theme.scss
index 7f9c14fb8..7fa06ee8f 100644
--- a/components/elevation/lib/_elevation-theme.scss
+++ b/components/elevation/lib/_elevation-theme.scss
@@ -5,406 +5,84 @@
 
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/theme/css';
-@use '@material/theme/custom-properties';
-@use '@material/theme/state';
-@use '@material/theme/theme';
-@use './level-utils';
+@use '@material/mwc-../sass/theme';
+@use '@material/mwc-../sass/var';
 @use './elevation-overlay-theme';
 
-$_baseline-color: #000;
-$_key-opacity: 0.3;
-$_ambient-opacity: 0.15;
-
-$_shadow-map: (
-  0: (
-    key: '0px 0px 0px 0px',
-    ambient: '0px 0px 0px 0px',
-  ),
-  1: (
-    key: '0px 1px 2px 0px',
-    ambient: '0px 1px 3px 1px',
-  ),
-  2: (
-    key: '0px 1px 2px 0px',
-    ambient: '0px 2px 6px 2px',
-  ),
-  3: (
-    key: '0px 1px 3px 0px',
-    ambient: '0px 4px 8px 3px',
-  ),
-  4: (
-    key: '0px 2px 3px 0px',
-    ambient: '0px 6px 10px 4px',
-  ),
-  5: (
-    key: '0px 4px 4px 0px',
-    ambient: '0px 8px 12px 6px',
-  ),
-);
-
-///
-/// Represents the configurable values of the elevation theme.
-///
-$_theme-values: (
-  disabled-shadow: null,
-  disabled-overlay-opacity: null,
-  focus-shadow: null,
-  focus-overlay-opacity: null,
-  hover-shadow: null,
-  hover-overlay-opacity: null,
-  overlay-opacity: null,
-  pressed-overlay-opacity: null,
-  pressed-shadow: null,
-  shadow: null,
-);
-
-///
-/// Applies the shadow theme-styles with the given $resolver function.
-/// @param {Function} $resolver - a function that returns a valid theme config.
-///   @see resolver for an example and expected arguments and return value.
-/// Accepts the following optional keyword args:
-/// @param {Map} $elevation - A state map of DP levels in the elevation system.
-/// @param {String} $shadow-color - the color used for the shadow.
-///
-@mixin with-resolver(
+@function resolve-theme(
+  $theme,
   $resolver,
-  $selectors: elevation-overlay-theme.$selectors,
-  $args...
+  $shadow-color-token,
+  $elevation-tokens
 ) {
-  @if $resolver {
-    @include theme-styles(
-      meta.call($resolver, $args...),
-      $selectors: $selectors
-    );
-  }
-}
-
-///
-/// Applies the given theme styles.
-/// @param {Map} $theme - @see $_theme-values for accepted theme properties.
-///
-@mixin theme-styles(
-  $theme: (),
-  $selectors: elevation-overlay-theme.$selectors
-) {
-  @include _box-shadow(
-    (
-      default: map.get($theme, shadow),
-      disabled: map.get($theme, disabled-shadow),
-      focus: map.get($theme, focus-shadow),
-      hover: map.get($theme, hover-shadow),
-      pressed: map.get($theme, pressed-shadow),
-    ),
-    $selectors: $selectors
-  );
-
-  @include elevation-overlay-theme.theme-styles(
-    (
-      overlay-opacity: map.get($theme, overlay-opacity),
-      disabled-overlay-opacity: map.get($theme, disabled-overlay-opacity),
-      focus-overlay-opacity: map.get($theme, focus-overlay-opacity),
-      hover-overlay-opacity: map.get($theme, hover-overlay-opacity),
-      pressed-overlay-opacity: map.get($theme, pressed-overlay-opacity),
-    ),
-    $selectors: $selectors
-  );
-}
-
-///
-/// Applies the styles for a state map of box shadows
-/// @param {Map} $shadow-map - state map of box shadow values
-/// @param {Map} $selectors - selector map for the state module
-///
-@mixin _box-shadow($shadow-map, $selectors) {
-  @include state.default($selectors) {
-    @include _set-box-shadow(state.get-default-state($shadow-map));
+  @if $resolver == null {
+    @return $theme;
   }
 
-  @include state.hover($selectors) {
-    @include _set-box-shadow(state.get-hover-state($shadow-map));
-  }
+  $shadow-color: map.get($theme, $shadow-color-token);
 
-  @include state.focus($selectors) {
-    @include _set-box-shadow(state.get-focus-state($shadow-map));
-  }
-
-  @include state.pressed($selectors) {
-    @include _set-box-shadow(state.get-pressed-state($shadow-map));
-  }
-
-  @include state.disabled($selectors) {
-    @include _set-box-shadow(state.get-disabled-state($shadow-map));
-  }
-}
-
-///
-/// Sets the box shadow of the element.
-///
-/// @param {String} $box-shadow - The shadow to apply to the element.
-///
-@mixin _set-box-shadow($box-shadow) {
-  @if custom-properties.is-custom-prop($box-shadow) {
-    // TODO(b/185188458): Use theme.property() once resolved.
-    $fallback: custom-properties.get-fallback($box-shadow);
-
-    // var(--<box-shadow-prop>, var(--elevation-box-shadow-for-gss))
-    $gss-custom-prop: custom-properties.create(
-      custom-properties.get-varname($box-shadow),
-      custom-properties.create(elevation-box-shadow-for-gss)
+  // Resolve the value for each state key.
+  @each $token in $elevation-tokens {
+    $value: map.get($theme, $token);
+    $elevation-theme: meta.call(
+      $resolver,
+      $elevation: $value,
+      $shadow-color: $shadow-color
     );
 
-    $value: custom-properties.create-var($gss-custom-prop);
-    @include css.declaration(box-shadow, $value, $fallback-value: $fallback);
-    @include custom-properties.declaration(
-      custom-properties.create(elevation-box-shadow-for-gss, $fallback)
-    );
-  } @else {
-    @include theme.property(box-shadow, $box-shadow);
-  }
-}
-
-///
-/// Returns the appropriate elevation theme for the given args.
-/// Warning: this is not to be called by end-user code. Any teams depending
-/// on this function are effectively out of SLO and will be expected to
-/// fix forward any unexpected breakages.
-///
-@function resolver($args...) {
-  $opts: meta.keywords($args);
-  $elevation-map: map.get($opts, elevation);
-  $shadow-color: map.get($opts, shadow-color);
-  $elevation-is-null: _is-map-null($elevation-map);
-
-  @if $elevation-is-null and $shadow-color == null {
-    @return ();
-  }
-
-  @if $elevation-is-null and $shadow-color != null {
-    @debug 'no elevation provided (both elevation and shadow-color are required)';
-    @return ();
-  }
-
-  @if $shadow-color == null and $elevation-is-null {
-    @debug 'no shadow-color provided (both shadow-color and elevation are required)';
-    @return ();
-  }
-
-  $shadow-map: _resolve-box-shadow($elevation-map, $shadow-color);
-  $opacity-map: _resolve-overlay-opacity($elevation-map);
-
-  $theme: (
-    shadow: state.get-default-state($shadow-map),
-    disabled-shadow: state.get-disabled-state($shadow-map),
-    focus-shadow: state.get-focus-state($shadow-map),
-    hover-shadow: state.get-hover-state($shadow-map),
-    pressed-shadow: state.get-pressed-state($shadow-map),
-    overlay-opacity: state.get-default-state($opacity-map),
-    disabled-overlay-opacity: state.get-disabled-state($opacity-map),
-    focus-overlay-opacity: state.get-focus-state($opacity-map),
-    hover-overlay-opacity: state.get-hover-state($opacity-map),
-    pressed-overlay-opacity: state.get-pressed-state($opacity-map),
-  );
-
-  // remove null values
-  $keys: map.keys($theme);
-  @each $key in $keys {
-    @if (map.get($theme, $key) == null) {
-      $theme: map.remove($theme, $key);
+    @each $resolved-token, $resolved-value in $elevation-theme {
+      $theme: map.set($theme, #{$token}-#{$resolved-token}, $resolved-value);
     }
+
+    // clean up unused elevation token
+    $theme: map.remove($theme, $token);
   }
 
+  // clean up unused shadow color token
+  $theme: map.remove($theme, $shadow-color-token);
+
   @return $theme;
 }
 
-@function _is-map-null($map-or-null) {
-  @if $map-or-null == null {
-    @return true;
-  }
-
-  $map: $map-or-null;
-  $keys: map.keys($map);
-  $is-null: true;
-  @each $key in $keys {
-    $is-null: map.get($map, $key) == null and $is-null;
-  }
-
-  @return $is-null;
-}
+/// Represents the configurable values of the elevation theme.
+$_flat-theme: map.merge(
+  elevation-overlay-theme.$transparent-theme,
+  (
+    shadow: none,
+  )
+);
 
+/// Applies the given theme styles.
 ///
-/// Resolves an elevation state map into a state map of box shadows
-/// @param {Map} $elevation-map - a state map of elevation DPs
-/// @param {color} $shadow-color - the color of the shadow
-/// @return {Map} - State map of box shadows
-///
-@function _resolve-box-shadow($elevation-map, $shadow-color) {
-  @return (
-    default:
-      _resolve-box-shadow-by-dp(
-        state.get-default-state($elevation-map),
-        $shadow-color
-      ),
-    disabled:
-      _resolve-box-shadow-by-dp(
-        state.get-disabled-state($elevation-map),
-        $shadow-color
-      ),
-    focus:
-      _resolve-box-shadow-by-dp(
-        state.get-focus-state($elevation-map),
-        $shadow-color
-      ),
-    hover:
-      _resolve-box-shadow-by-dp(
-        state.get-hover-state($elevation-map),
-        $shadow-color
-      ),
-    pressed:
-      _resolve-box-shadow-by-dp(
-        state.get-pressed-state($elevation-map),
-        $shadow-color
-      )
-  );
-}
-
-///
-/// Resolves an elevation state map into a state map of overlay opacities
-/// @param {Map} $elevation-map - a state map of elevation DPs
-/// @return {Map} - State map of overlay opacities
-///
-@function _resolve-overlay-opacity($elevation-map) {
-  @return (
-    default:
-      _resolve-overlay-opacity-by-dp(state.get-default-state($elevation-map)),
-    disabled:
-      _resolve-overlay-opacity-by-dp(state.get-disabled-state($elevation-map)),
-    focus: _resolve-overlay-opacity-by-dp(state.get-focus-state($elevation-map)),
-    hover: _resolve-overlay-opacity-by-dp(state.get-hover-state($elevation-map)),
-    pressed:
-      _resolve-overlay-opacity-by-dp(state.get-pressed-state($elevation-map))
-  );
-}
-
-///
-/// Resolves an elevation into a box-shadow
-/// @param {number|null} $elevation - The elevation in DPs
-/// @param {color} $shadow-color - The color of the shadow
-/// @return {string|null} - Box shadow for given elevation. null if elevation
-///     is null
-///
-@function _resolve-box-shadow-by-dp($elevation, $shadow-color) {
-  @if custom-properties.is-custom-prop($elevation) {
-    @return _resolve-custom-prop-shadow($elevation, $shadow-color);
-  }
-
-  @return _box-shadow-by-dp($elevation, $shadow-color);
-}
-
-///
-/// Resolves an elevation into an overlay-opacity
-/// @param {number|null} $elevation - The elevation in DPs
-/// @return {number|null} - Overlay opacity for given elevation. null if
-///     elevation is null
-///
-@function _resolve-overlay-opacity-by-dp($elevation) {
-  @if custom-properties.is-custom-prop($elevation) {
-    @return _resolve-custom-prop-overlay-opacity($elevation);
-  }
-
-  @return elevation-overlay-theme.overlay-opacity-by-dp($elevation);
-}
-
-///
-/// Resolve the shadow as a CSS custom property.
-///
-@function _resolve-custom-prop-shadow($elevation, $shadow-color) {
-  @if $elevation == null {
-    @return null;
-  }
-  $fallback-dp: custom-properties.get-fallback($elevation);
-  $fallback-shadow-color: custom-properties.get-fallback($shadow-color);
-  $elevation-varname: custom-properties.get-varname($elevation);
-
-  /// Create new custom properties derived from the elevation varname. These
-  /// will look like so:
-  /// --<prefix>-<component>-container-elevation-shadow
-
-  $shadow: custom-properties.create(
-    $elevation-varname + '-shadow',
-    _box-shadow-by-dp($fallback-dp, $fallback-shadow-color)
+/// @param {Map} $theme - @see $_flat-theme for accepted theme properties.
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme-styles(
+    $_flat-theme,
+    $theme,
+    $require-all: false
   );
 
-  @return $shadow;
+  @include _box-shadow(map.get($theme, shadow));
+  @include elevation-overlay-theme.theme-styles($theme);
 }
 
+/// Sets the box shadow of the element.
 ///
-/// Resolve the overlay opacity as a CSS custom property.
-///
-@function _resolve-custom-prop-overlay-opacity($elevation) {
-  @if $elevation == null {
-    @return null;
+/// @param {String} $box-shadow - The shadow to apply to the element.
+@mixin _box-shadow($box-shadow) {
+  @if var.is-var($box-shadow) {
+    // TODO(b/185188458): Set box-shadow directly once resolved
+    $fallback: var.deep-fallback($box-shadow);
+
+    // var(--<box-shadow-prop>, var(--elevation-box-shadow-for-gss))
+    $gss-custom-prop: var.deep-set-fallback(
+      $box-shadow,
+      var.create(elevation-box-shadow-for-gss)
+    );
+
+    box-shadow: $gss-custom-prop;
+    #{var.create-name(elevation-box-shadow-for-gss)}: $fallback;
+  } @else {
+    box-shadow: $box-shadow;
   }
-  $fallback-dp: custom-properties.get-fallback($elevation);
-  $elevation-varname: custom-properties.get-varname($elevation);
-
-  /// Create new custom properties derived from the elevation varname. These
-  /// will look like so:
-  /// --<prefix>-<component>-container-elevation-overlay-opacity
-
-  $overlay-opacity: custom-properties.create(
-    $elevation-varname + '-overlay-opacity',
-    elevation-overlay-theme.overlay-opacity-by-dp($fallback-dp)
-  );
-
-  @return $overlay-opacity;
-}
-
-///
-/// Returns the appropriate shadow for the given dp and shadow color.
-///
-/// @throw If the provided dp does not map to an elevation level.
-/// @param {number|null} $dp - the elevation dp
-/// @param {color|null} $shadow-color - the color of the shadow
-/// @return {list|string|null} - the constructed shadow, none, or null
-///
-@function _box-shadow-by-dp($dp, $shadow-color) {
-  @if $dp == null {
-    @return null;
-  }
-
-  $level: level-utils.dp-to-level($dp);
-  @return _box-shadow-by-level($level, $shadow-color);
-}
-
-///
-/// Returns the appropriate shadow for the given level and shadow color.
-/// @param {number} $level - the level of the elevation system
-/// @param {color} $shadow-color - the color of the shadow
-/// @return {list|string|null} - the constructed shadow, none, or null
-///
-@function _box-shadow-by-level($level, $shadow-color) {
-  // 5 is the max level of GM elevation.
-  @if $level == null or $level < 0 or $level > 5 or $shadow-color == null {
-    @return null;
-  }
-
-  @if $level == 0 {
-    @return none;
-  }
-
-  $spread: map.get($_shadow-map, $level);
-  $key-spread: map.get($spread, key);
-  $ambient-spread: map.get($spread, ambient);
-  $colors: colors($shadow-color);
-  $key-color: map.get($colors, key);
-  $ambient-color: map.get($colors, ambient);
-  @return (#{$key-spread} #{$key-color}, #{$ambient-spread} #{$ambient-color});
-}
-
-@function colors($color) {
-  @return (
-    key: rgba($color, $_key-opacity),
-    ambient: rgba($color, $_ambient-opacity)
-  );
 }
diff --git a/components/elevation/lib/_level-utils.scss b/components/elevation/lib/_level-utils.scss
deleted file mode 100644
index 731383bc6..000000000
--- a/components/elevation/lib/_level-utils.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-
-///
-/// $_dp-to-level-map associates elevation dps to elevation levels.
-///
-$_dp-to-level-map: (
-  // TODO: pull the keys from tokens
-  0: 0,
-  1: 1,
-  3: 2,
-  6: 3,
-  8: 4,
-  12: 5
-);
-
-/// Returns the appropriate elevation level for a given dp.
-///
-/// @throw If the provided dp does not map to an elevation level.
-/// @param {number|null} $dp The dp to convert to an elevation level.
-/// @return {number|null} The level of the elevation system, or null if the dp
-///     is null.
-@function dp-to-level($dp) {
-  @if $dp == null {
-    @return null;
-  }
-
-  $level: map.get($_dp-to-level-map, $dp);
-  @if $level == null {
-    @error '#{$dp} is not a valid Material You elevation dp level. Must be one of #{map.keys($_dp-to-level-map)}.';
-  }
-
-  @return $level;
-}
diff --git a/components/fab/lib/_fab-extended-theme.scss b/components/fab/lib/_fab-extended-theme.scss
index 6d44042c5..586c1a1f0 100644
--- a/components/fab/lib/_fab-extended-theme.scss
+++ b/components/fab/lib/_fab-extended-theme.scss
@@ -4,11 +4,10 @@
 //
 
 @use 'sass:map';
-@use '@material/theme/keys';
 @use '@material/theme/state';
-@use '@material/theme/theme';
 @use '@material/typography/typography';
-@use '@material/mwc-../tokens/lib/resolvers';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 @use './fab-shared-theme';
 
 $_elevation-1-dp: 1;
@@ -79,19 +78,24 @@ $dark-theme: (
   pressed-label-text-color: $dark-primary,
 );
 
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
+@function _resolve-theme($theme, $resolvers) {
+  @return fab-shared-theme.resolve-theme($theme, $resolvers);
+}
 
-  $theme: fab-shared-theme.resolve-theme($theme, $resolvers);
-  @include keys.declare-custom-properties($theme, fab-extended);
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, fab-extended);
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, fab-extended);
 
-  $theme: keys.create-theme-properties($theme, fab-extended);
-
-  @include fab-shared-theme.theme-styles($theme, $resolvers);
+  @include fab-shared-theme.theme-styles($theme);
 
   @include _set-container-height(map.get($theme, container-height));
 
@@ -116,7 +120,7 @@ $dark-theme: (
 }
 
 @mixin _set-container-height($height) {
-  @include theme.property(height, $height);
+  height: $height;
 }
 
 @mixin _label-color($color-or-map) {
@@ -139,14 +143,14 @@ $dark-theme: (
 
 @mixin _set-label-color($color) {
   .md3-fab__label {
-    @include theme.property(color, $color);
+    color: $color;
   }
 }
 
 @mixin _label-typography($typography-map) {
-  @include theme.property(font-family, map.get($typography-map, font));
-  @include theme.property(line-height, map.get($typography-map, line-height));
-  @include theme.property(font-size, map.get($typography-map, size));
-  @include theme.property(font-weight, map.get($typography-map, weight));
-  @include theme.property(letter-spacing, map.get($typography-map, tracking));
+  font-family: map.get($typography-map, font);
+  line-height: map.get($typography-map, line-height);
+  font-size: map.get($typography-map, size);
+  font-weight: map.get($typography-map, weight);
+  letter-spacing: map.get($typography-map, tracking);
 }
diff --git a/components/fab/lib/_fab-shared-theme.scss b/components/fab/lib/_fab-shared-theme.scss
index 3bc747a9d..0da399aae 100644
--- a/components/fab/lib/_fab-shared-theme.scss
+++ b/components/fab/lib/_fab-shared-theme.scss
@@ -5,13 +5,12 @@
 
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/shape/shape';
 @use '@material/theme/state';
-@use '@material/theme/theme';
 @use 'third_party/javascript/material_web_components/ripple/ripple-theme';
-@use '@material/mwc-../elevation/lib/elevation-overlay-theme';
 @use '@material/mwc-../elevation/lib/elevation-theme';
-@use '@material/mwc-../tokens/lib/resolvers';
+@use '@material/mwc-../sass/elevation';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 
 $selectors: (
   // May have to change to :not(:disabled) if we decide to support anchor tags
@@ -22,34 +21,80 @@ $selectors: (
   pressed: ':active'
 );
 
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+@function resolve-theme($theme, $resolvers) {
+  $theme: elevation-theme.resolve-theme(
+    $theme,
+    map.get($resolvers, elevation),
+    $shadow-color-token: container-shadow-color,
+    $elevation-tokens: (
+      container-elevation,
+      focus-container-elevation,
+      hover-container-elevation,
+      pressed-container-elevation,
+      lowered-container-elevation,
+      lowered-focus-container-elevation,
+      lowered-hover-container-elevation,
+      lowered-pressed-container-elevation
+    )
+  );
+
+  @return $theme;
+}
+
+@mixin theme-styles($theme) {
   @include _elevation(
     (
-      default: map.get($theme, container-elevation),
-      hover: map.get($theme, hover-container-elevation),
-      focus: map.get($theme, focus-container-elevation),
-      pressed: map.get($theme, pressed-container-elevation),
-    ),
-    $shadow-color: map.get($theme, container-shadow-color),
-    $resolver: map.get($resolvers, elevation)
+      default: (
+        shadow: map.get($theme, container-elevation-shadow),
+        overlay-opacity: map.get($theme, container-elevation-overlay-opacity),
+      ),
+      hover: (
+        shadow: map.get($theme, hover-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, hover-container-elevation-overlay-opacity),
+      ),
+      focus: (
+        shadow: map.get($theme, focus-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, focus-container-elevation-overlay-opacity),
+      ),
+      pressed: (
+        shadow: map.get($theme, pressed-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, pressed-container-elevation-overlay-opacity),
+      ),
+    )
   );
 
   @include _lowered-elevation(
     (
-      default: map.get($theme, lowered-container-elevation),
-      hover: map.get($theme, lowered-hover-container-elevation),
-      focus: map.get($theme, lowered-focus-container-elevation),
-      pressed: map.get($theme, lowered-pressed-container-elevation),
-    ),
-    $shadow-color: map.get($theme, container-shadow-color),
-    $resolver: map.get($resolvers, elevation)
+      default: (
+        shadow: map.get($theme, lowered-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, lowered-container-elevation-overlay-opacity),
+      ),
+      hover: (
+        shadow: map.get($theme, lowered-hover-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, lowered-hover-container-elevation-overlay-opacity),
+      ),
+      focus: (
+        shadow: map.get($theme, lowered-focus-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, lowered-focus-container-elevation-overlay-opacity),
+      ),
+      pressed: (
+        shadow: map.get($theme, lowered-pressed-container-elevation-shadow),
+        overlay-opacity:
+          map.get($theme, lowered-pressed-container-elevation-overlay-opacity),
+      ),
+    )
   );
 
-  @include elevation-overlay-theme.theme-styles(
+  @include elevation-theme.theme-styles(
     (
       surface-tint-layer-color: map.get($theme, surface-tint-layer-color),
-    ),
-    $selectors
+    )
   );
 
   @include _container-fill-color(
@@ -83,19 +128,36 @@ $selectors: (
   );
 }
 
-@mixin _lowered-elevation($elevation-map, $shadow-color, $resolver) {
+@mixin _lowered-elevation($elevation-map) {
   &.md3-fab--lowered {
-    @include _elevation($elevation-map, $shadow-color, $resolver);
+    @include _elevation($elevation-map);
   }
 }
 
-@mixin _elevation($elevation-map, $shadow-color, $resolver) {
-  @include elevation-theme.with-resolver(
-    $resolver,
-    $selectors: $selectors,
-    $elevation: $elevation-map,
-    $shadow-color: $shadow-color
-  );
+@mixin _elevation($elevation-map) {
+  @include state.default($selectors) {
+    @include elevation-theme.theme-styles(
+      state.get-default-state($elevation-map)
+    );
+  }
+
+  @include state.hover($selectors) {
+    @include elevation-theme.theme-styles(
+      state.get-hover-state($elevation-map)
+    );
+  }
+
+  @include state.focus($selectors) {
+    @include elevation-theme.theme-styles(
+      state.get-focus-state($elevation-map)
+    );
+  }
+
+  @include state.pressed($selectors) {
+    @include elevation-theme.theme-styles(
+      state.get-pressed-state($elevation-map)
+    );
+  }
 }
 
 @mixin _container-fill-color($color-or-map) {
@@ -105,13 +167,13 @@ $selectors: (
 }
 
 @mixin _set-container-fill-color($color) {
-  @include theme.property(background-color, $color);
+  background-color: $color;
 }
 
 @mixin _set-container-shape($radius) {
   &,
   .md3-fab__ripple {
-    @include shape.radius($radius);
+    border-radius: $radius;
   }
 }
 
@@ -135,16 +197,16 @@ $selectors: (
 
 @mixin _set-icon-color($color) {
   .md3-fab__icon {
-    @include theme.property(color, $color);
+    color: $color;
   }
 }
 
 @mixin _set-icon-size($size) {
   .md3-fab__icon {
-    @include theme.property(width, $size);
-    @include theme.property(height, $size);
-    @include theme.property(font-size, $size);
-    @include theme.property(--mdc-icon-size, $size);
+    width: $size;
+    height: $size;
+    font-size: $size;
+    --mdc-icon-size: $size;
   }
 }
 
@@ -153,141 +215,3 @@ $selectors: (
     @include ripple-theme.theme($ripple-theme);
   }
 }
-
-@function resolve-theme($theme, $resolvers) {
-  @return map.merge(
-    $theme,
-    _resolve-theme-elevation(
-      $theme,
-      map.get($resolvers, elevation),
-      $elevation-map: (
-        default: map.get($theme, container-elevation),
-        focus: map.get($theme, focus-container-elevation),
-        hover: map.get($theme, hover-container-elevation),
-        pressed: map.get($theme, pressed-container-elevation)
-      ),
-      $lowered-elevation-map: (
-        default: map.get($theme, lowered-container-elevation),
-        focus: map.get($theme, lowered-focus-container-elevation),
-        hover: map.get($theme, lowered-hover-container-elevation),
-        pressed: map.get($theme, lowered-pressed-container-elevation)
-      )
-    )
-  );
-}
-
-@function _resolve-theme-elevation(
-  $theme,
-  $resolver,
-  $elevation-map,
-  $lowered-elevation-map
-) {
-  @if $resolver == null {
-    @return $theme;
-  }
-
-  // Resolve the value for each state key.
-  $elevation-theme: meta.call(
-    $resolver,
-    $elevation: $elevation-map,
-    $shadow-color: map.get($theme, container-shadow-color)
-  );
-
-  $lowered-elevation-theme: meta.call(
-    $resolver,
-    $elevation: $lowered-elevation-map,
-    $shadow-color: map.get($theme, container-shadow-color)
-  );
-
-  $resolved-theme-values: _elevation-theme-to-fab-theme-props(
-    $elevation-theme,
-    $lowered-elevation-theme
-  );
-
-  // clean up unresolved elevation vals
-  $theme: map.remove(
-    $theme,
-    container-shadow-color,
-    container-elevation,
-    focus-container-elevation,
-    hover-container-elevation,
-    pressed-container-elevation,
-    lowered-container-elevation,
-    lowered-focus-container-elevation,
-    lowered-hover-container-elevation,
-    lowered-pressed-container-elevation
-  );
-
-  // Update the theme with the resolved value.
-  $resolved-theme: map.merge($theme, $resolved-theme-values);
-
-  @return $resolved-theme;
-}
-
-///
-/// Transforms an elevation theme and a lowered theme into fab theme props.
-///    @example
-///      (
-///        shadow: X,
-///        overlay-opacity: Y,
-///        hover-shadow: A,
-///        hover-overlay-opacity: B
-///      ) -> (
-///        container-elevation-shadow: X,
-///        container-overlay-opacity: Y,
-///        hover-container-elevation-shadow: A,
-///        hover-container-overlay-opacity: B
-///      )
-/// @param {Map} $elevation-theme - A theme for elevation
-///     @see elevation-theme.$_theme-values
-/// @param {Map} $lowered-elevation-theme - A theme for elevation for lowered
-///     fab values @see elevation-theme.$_theme-values
-/// @return {Map} - A theme map of elevation values to be turned into custom
-///     props.
-///
-@function _elevation-theme-to-fab-theme-props(
-  $elevation-theme,
-  $lowered-elevation-theme
-) {
-  $resolved-theme-values: (
-    container-elevation-shadow: map.get($elevation-theme, shadow),
-    container-elevation-overlay-opacity:
-      map.get($elevation-theme, overlay-opacity),
-    focus-container-elevation-shadow: map.get($elevation-theme, focus-shadow),
-    focus-container-elevation-overlay-opacity:
-      map.get($elevation-theme, focus-overlay-opacity),
-    hover-container-elevation-shadow: map.get($elevation-theme, hover-shadow),
-    hover-container-elevation-overlay-opacity:
-      map.get($elevation-theme, hover-overlay-opacity),
-    pressed-container-elevation-shadow:
-      map.get($elevation-theme, pressed-shadow),
-    pressed-container-elevation-overlay-opacity:
-      map.get($elevation-theme, pressed-overlay-opacity),
-    lowered-container-elevation-shadow:
-      map.get($lowered-elevation-theme, shadow),
-    lowered-container-elevation-overlay-opacity:
-      map.get($lowered-elevation-theme, overlay-opacity),
-    lowered-focus-container-elevation-shadow:
-      map.get($lowered-elevation-theme, focus-shadow),
-    lowered-focus-container-elevation-overlay-opacity:
-      map.get($lowered-elevation-theme, focus-overlay-opacity),
-    lowered-hover-container-elevation-shadow:
-      map.get($lowered-elevation-theme, hover-shadow),
-    lowered-hover-container-elevation-overlay-opacity:
-      map.get($lowered-elevation-theme, hover-overlay-opacity),
-    lowered-pressed-container-elevation-shadow:
-      map.get($lowered-elevation-theme, pressed-shadow),
-    lowered-pressed-container-elevation-overlay-opacity:
-      map.get($lowered-elevation-theme, pressed-overlay-opacity),
-  );
-
-  // remove null values
-  $keys: map.keys($resolved-theme-values);
-  @each $key in $keys {
-    @if (map.get($resolved-theme-values, $key) == null) {
-      $resolved-theme-values: map.remove($resolved-theme-values, $key);
-    }
-  }
-
-  @return $resolved-theme-values;
-}
diff --git a/components/fab/lib/_fab-theme.scss b/components/fab/lib/_fab-theme.scss
index bda44fae7..f6071a280 100644
--- a/components/fab/lib/_fab-theme.scss
+++ b/components/fab/lib/_fab-theme.scss
@@ -4,9 +4,8 @@
 //
 
 @use 'sass:map';
-@use '@material/theme/keys';
-@use '@material/theme/theme';
-@use '@material/mwc-../tokens/lib/resolvers';
+@use '@material/mwc-../sass/resolvers';
+@use '@material/mwc-../sass/theme';
 @use './fab-shared-theme';
 
 $_elevation-1-dp: 1;
@@ -65,19 +64,24 @@ $dark-theme: (
   pressed-state-layer-color: $dark-primary,
 );
 
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
+@function _resolve-theme($theme, $resolvers) {
+  @return fab-shared-theme.resolve-theme($theme, $resolvers);
+}
 
-  $theme: fab-shared-theme.resolve-theme($theme, $resolvers);
-  @include keys.declare-custom-properties($theme, fab);
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, fab);
+
+  @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($light-theme, $theme);
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, fab);
 
-  $theme: keys.create-theme-properties($theme, fab);
-
-  @include fab-shared-theme.theme-styles($theme, $resolvers);
+  @include fab-shared-theme.theme-styles($theme);
 
   @include _set-container-dimensions(
     map.get($theme, container-width),
@@ -86,6 +90,6 @@ $dark-theme: (
 }
 
 @mixin _set-container-dimensions($width, $height) {
-  @include theme.property(width, $height);
-  @include theme.property(height, $height);
+  width: $width;
+  height: $height;
 }
diff --git a/components/tokens/_resolvers.scss b/components/tokens/_resolvers.scss
deleted file mode 100644
index b7120f78c..000000000
--- a/components/tokens/_resolvers.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@forward "./lib/resolvers" show $material;