diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
index 3c036d8989..02fc9f52a9 100644
--- a/button/lib/_shared.scss
+++ b/button/lib/_shared.scss
@@ -28,12 +28,12 @@
 
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        focus-state-layer-color: var(--_focus-state-layer-color),
-        pressed-state-layer-color: var(--_pressed-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        focus-color: var(--_focus-state-layer-color),
+        pressed-color: var(--_pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
 
diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss
index 78d4616383..d89a338d49 100644
--- a/checkbox/lib/_checkbox.scss
+++ b/checkbox/lib/_checkbox.scss
@@ -145,14 +145,13 @@ $_checkmark-bottom-left: 7px, -14px;
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_unselected-pressed-state-layer-opacity),
-        state-layer-shape: var(--_state-layer-shape),
+        focus-color: var(--_unselected-focus-state-layer-color),
+        focus-opacity: var(--_unselected-focus-state-layer-opacity),
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_unselected-hover-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
+        shape: var(--_state-layer-shape),
       )
     );
   }
@@ -160,13 +159,12 @@ $_checkmark-bottom-left: 7px, -14px;
   .selected md-ripple {
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_selected-pressed-state-layer-opacity),
+        focus-color: var(--_selected-focus-state-layer-color),
+        focus-opacity: var(--_selected-focus-state-layer-opacity),
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
       )
     );
   }
@@ -174,13 +172,13 @@ $_checkmark-bottom-left: 7px, -14px;
   .error md-ripple {
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_error-focus-state-layer-color),
+        focus-color: var(--_error-focus-state-layer-color),
         // TODO(b/262409702): add once token is added
-        // focus-state-layer-opacity: var(--_error-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_error-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_error-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_error-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_error-pressed-state-layer-opacity),
+        // focus-opacity: var(--_error-focus-state-layer-opacity),
+        hover-color: var(--_error-hover-state-layer-color),
+        hover-opacity: var(--_error-hover-state-layer-opacity),
+        pressed-color: var(--_error-pressed-state-layer-color),
+        pressed-opacity: var(--_error-pressed-state-layer-opacity),
       )
     );
   }
diff --git a/chips/chip/lib/_chip-theme.scss b/chips/chip/lib/_chip-theme.scss
index f9bcc3cdef..b0ab1786e0 100644
--- a/chips/chip/lib/_chip-theme.scss
+++ b/chips/chip/lib/_chip-theme.scss
@@ -385,42 +385,32 @@ $_custom-property-prefix: 'chip';
   );
   @include _ripple-theme(
     (
-      focus-state-layer-color: map.get($theme, focus-state-layer-color),
-      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
-      hover-state-layer-color: map.get($theme, hover-state-layer-color),
-      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
-      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
-      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
+      focus-color: map.get($theme, focus-state-layer-color),
+      focus-opacity: map.get($theme, focus-state-layer-opacity),
+      hover-color: map.get($theme, hover-state-layer-color),
+      hover-opacity: map.get($theme, hover-state-layer-opacity),
+      pressed-color: map.get($theme, pressed-state-layer-color),
+      pressed-opacity: map.get($theme, pressed-state-layer-opacity),
     )
   );
   @include _selected-ripple-theme(
     (
-      focus-state-layer-color: map.get($theme, selected-focus-state-layer-color),
-      focus-state-layer-opacity:
-        map.get($theme, selected-focus-state-layer-opacity),
-      hover-state-layer-color: map.get($theme, selected-hover-state-layer-color),
-      hover-state-layer-opacity:
-        map.get($theme, selected-hover-state-layer-opacity),
-      pressed-state-layer-color:
-        map.get($theme, selected-pressed-state-layer-color),
-      pressed-state-layer-opacity:
-        map.get($theme, selected-pressed-state-layer-opacity),
+      focus-color: map.get($theme, selected-focus-state-layer-color),
+      focus-opacity: map.get($theme, selected-focus-state-layer-opacity),
+      hover-color: map.get($theme, selected-hover-state-layer-color),
+      hover-opacity: map.get($theme, selected-hover-state-layer-opacity),
+      pressed-color: map.get($theme, selected-pressed-state-layer-color),
+      pressed-opacity: map.get($theme, selected-pressed-state-layer-opacity),
     )
   );
   @include _unselected-ripple-theme(
     (
-      focus-state-layer-color:
-        map.get($theme, unselected-focus-state-layer-color),
-      focus-state-layer-opacity:
-        map.get($theme, unselected-focus-state-layer-opacity),
-      hover-state-layer-color:
-        map.get($theme, unselected-hover-state-layer-color),
-      hover-state-layer-opacity:
-        map.get($theme, unselected-hover-state-layer-opacity),
-      pressed-state-layer-color:
-        map.get($theme, unselected-pressed-state-layer-color),
-      pressed-state-layer-opacity:
-        map.get($theme, unselected-pressed-state-layer-opacity),
+      focus-color: map.get($theme, unselected-focus-state-layer-color),
+      focus-opacity: map.get($theme, unselected-focus-state-layer-opacity),
+      hover-color: map.get($theme, unselected-hover-state-layer-color),
+      hover-opacity: map.get($theme, unselected-hover-state-layer-opacity),
+      pressed-color: map.get($theme, unselected-pressed-state-layer-color),
+      pressed-opacity: map.get($theme, unselected-pressed-state-layer-opacity),
     )
   );
 }
@@ -450,16 +440,12 @@ $_custom-property-prefix: 'chip';
   .md3-chip__action--primary {
     @include ripple.theme(
       (
-        focus-state-layer-color: map.get($ripple-theme, focus-state-layer-color),
-        focus-state-layer-opacity:
-          map.get($ripple-theme, focus-state-layer-opacity),
-        hover-state-layer-color: map.get($ripple-theme, hover-state-layer-color),
-        hover-state-layer-opacity:
-          map.get($ripple-theme, hover-state-layer-opacity),
-        pressed-state-layer-color:
-          map.get($ripple-theme, pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          map.get($ripple-theme, pressed-state-layer-opacity),
+        focus-color: map.get($ripple-theme, focus-state-layer-color),
+        focus-opacity: map.get($ripple-theme, focus-state-layer-opacity),
+        hover-color: map.get($ripple-theme, hover-state-layer-color),
+        hover-opacity: map.get($ripple-theme, hover-state-layer-opacity),
+        pressed-color: map.get($ripple-theme, pressed-state-layer-color),
+        pressed-opacity: map.get($ripple-theme, pressed-state-layer-opacity),
       ),
       $ripple-target: $ripple-target
     );
diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss
index c8d362055e..4f5963160e 100644
--- a/fab/lib/_shared.scss
+++ b/fab/lib/_shared.scss
@@ -54,12 +54,12 @@
 
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        focus-state-layer-color: var(--_focus-state-layer-color),
-        pressed-state-layer-color: var(--_pressed-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        focus-color: var(--_focus-state-layer-color),
+        pressed-color: var(--_pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
 
diff --git a/iconbutton/lib/_filled-icon-button.scss b/iconbutton/lib/_filled-icon-button.scss
index 6c3dc27a3d..e5cf79b6b3 100644
--- a/iconbutton/lib/_filled-icon-button.scss
+++ b/iconbutton/lib/_filled-icon-button.scss
@@ -73,12 +73,12 @@ $_custom-property-prefix: 'filled-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        focus-color: var(--_focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
@@ -103,12 +103,9 @@ $_custom-property-prefix: 'filled-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color:
-          var(--_toggle-unselected-focus-state-layer-color),
-        hover-state-layer-color:
-          var(--_toggle-unselected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-unselected-pressed-state-layer-color),
+        focus-color: var(--_toggle-unselected-focus-state-layer-color),
+        hover-color: var(--_toggle-unselected-hover-state-layer-color),
+        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
       )
     );
   }
@@ -133,10 +130,9 @@ $_custom-property-prefix: 'filled-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-selected-pressed-state-layer-color),
+        focus-color: var(--_toggle-selected-focus-state-layer-color),
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
       )
     );
   }
diff --git a/iconbutton/lib/_filled-tonal-icon-button.scss b/iconbutton/lib/_filled-tonal-icon-button.scss
index 23fd181f15..f8505068d6 100644
--- a/iconbutton/lib/_filled-tonal-icon-button.scss
+++ b/iconbutton/lib/_filled-tonal-icon-button.scss
@@ -73,12 +73,12 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        focus-color: var(--_focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
@@ -103,12 +103,9 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color:
-          var(--_toggle-unselected-focus-state-layer-color),
-        hover-state-layer-color:
-          var(--_toggle-unselected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-unselected-pressed-state-layer-color),
+        focus-color: var(--_toggle-unselected-focus-state-layer-color),
+        hover-color: var(--_toggle-unselected-hover-state-layer-color),
+        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
       )
     );
   }
@@ -133,10 +130,9 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-selected-pressed-state-layer-color),
+        focus-color: var(--_toggle-selected-focus-state-layer-color),
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
       )
     );
   }
diff --git a/iconbutton/lib/_outlined-icon-button.scss b/iconbutton/lib/_outlined-icon-button.scss
index d9e91ccfb9..6926a814e4 100644
--- a/iconbutton/lib/_outlined-icon-button.scss
+++ b/iconbutton/lib/_outlined-icon-button.scss
@@ -58,12 +58,12 @@ $_custom-property-prefix: 'outlined-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        focus-color: var(--_unselected-focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
 
@@ -136,12 +136,12 @@ $_custom-property-prefix: 'outlined-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        focus-color: var(--_selected-focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
diff --git a/iconbutton/lib/_standard-icon-button.scss b/iconbutton/lib/_standard-icon-button.scss
index b39d3906f9..d70ef5cb32 100644
--- a/iconbutton/lib/_standard-icon-button.scss
+++ b/iconbutton/lib/_standard-icon-button.scss
@@ -59,15 +59,14 @@ $_shape-property: 'state-layer-shape';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_unselected-pressed-state-layer-opacity),
+        focus-color: var(--_unselected-focus-state-layer-color),
+        focus-opacity: var(--_unselected-focus-state-layer-opacity),
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_unselected-hover-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
         // TODO(b/263517885): replace with ripple.theme(state-layer-shape)
-        state-layer-shape: var(--_state-layer-shape-start-start),
+        shape: var(--_state-layer-shape-start-start),
       )
     );
 
@@ -107,13 +106,12 @@ $_shape-property: 'state-layer-shape';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_selected-pressed-state-layer-opacity),
+        focus-color: var(--_selected-focus-state-layer-color),
+        focus-opacity: var(--_selected-focus-state-layer-opacity),
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
       )
     );
   }
diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
index fd3c8b1ac2..d0c9ec1959 100644
--- a/list/lib/listitem/_list-item.scss
+++ b/list/lib/listitem/_list-item.scss
@@ -52,13 +52,12 @@
     );
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_list-item-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_list-item-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_list-item-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_list-item-pressed-state-layer-opacity),
-        focus-state-layer-color: var(--_list-item-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_list-item-focus-state-layer-opacity),
+        hover-color: var(--_list-item-hover-state-layer-color),
+        hover-opacity: var(--_list-item-hover-state-layer-opacity),
+        pressed-color: var(--_list-item-pressed-state-layer-color),
+        pressed-opacity: var(--_list-item-pressed-state-layer-opacity),
+        focus-color: var(--_list-item-focus-state-layer-color),
+        focus-opacity: var(--_list-item-focus-state-layer-opacity),
       )
     );
   }
diff --git a/menu/lib/menuitem/_menu-item.scss b/menu/lib/menuitem/_menu-item.scss
index 92aef52b0c..c7705e7a19 100644
--- a/menu/lib/menuitem/_menu-item.scss
+++ b/menu/lib/menuitem/_menu-item.scss
@@ -44,7 +44,7 @@ $_custom-property-prefix: 'menu';
     */
     @include ripple.theme(
       (
-        hover-state-layer-opacity: 0,
+        hover-opacity: 0,
       )
     );
   }
diff --git a/navigationtab/lib/_navigation-tab.scss b/navigationtab/lib/_navigation-tab.scss
index dc3a8b7e5b..c9e4071b13 100644
--- a/navigationtab/lib/_navigation-tab.scss
+++ b/navigationtab/lib/_navigation-tab.scss
@@ -200,12 +200,12 @@ $_custom-property-prefix: 'navigation-bar';
 
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_active-hover-state-layer-color),
-        focus-state-layer-color: var(--_active-focus-state-layer-color),
-        pressed-state-layer-color: var(--_active-pressed-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_active-hover-state-layer-color),
+        focus-color: var(--_active-focus-state-layer-color),
+        pressed-color: var(--_active-pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
@@ -251,12 +251,12 @@ $_custom-property-prefix: 'navigation-bar';
 
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_inactive-hover-state-layer-color),
-        focus-state-layer-color: var(--_inactive-focus-state-layer-color),
-        pressed-state-layer-color: var(--_inactive-pressed-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_inactive-hover-state-layer-color),
+        focus-color: var(--_inactive-focus-state-layer-color),
+        pressed-color: var(--_inactive-pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
index 5e74708707..72ef20ac75 100644
--- a/radio/lib/_radio.scss
+++ b/radio/lib/_radio.scss
@@ -30,13 +30,12 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_unselected-pressed-state-layer-opacity),
+        focus-color: var(--_unselected-focus-state-layer-color),
+        focus-opacity: var(--_unselected-focus-state-layer-opacity),
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_unselected-hover-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
       )
     );
 
@@ -59,13 +58,12 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   :host([checked]) {
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_selected-pressed-state-layer-opacity),
+        focus-color: var(--_selected-focus-state-layer-color),
+        focus-opacity: var(--_selected-focus-state-layer-opacity),
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
       )
     );
   }
diff --git a/ripple/lib/_md-comp-ripple.scss b/ripple/lib/_md-comp-ripple.scss
index 9dde5779d0..e1c364e8f6 100644
--- a/ripple/lib/_md-comp-ripple.scss
+++ b/ripple/lib/_md-comp-ripple.scss
@@ -6,24 +6,21 @@
 @use 'sass:map';
 @use '../../tokens';
 
-@function values($exclude-hardcoded-values: false) {
-  $state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
-  $default-shape: map.get(
-    tokens.md-sys-shape-values($exclude-hardcoded-values),
-    corner-none
-  );
-  $default-color: if($exclude-hardcoded-values, null, black);
-  // add missing tokens
-  $values: map.merge(
-    $state-values,
-    (
-      state-layer-shape: $default-shape,
-      focus-state-layer-color: $default-color,
-      hover-state-layer-color: $default-color,
-      pressed-state-layer-color: $default-color,
-      dragged-state-layer-color: $default-color,
-    )
-  );
+$_default-deps: (
+  md-sys-color: tokens.md-sys-color-values-light(),
+  md-sys-shape: tokens.md-sys-shape-values(),
+  md-sys-state: tokens.md-sys-state-values(),
+);
 
-  @return $values;
+@function values($deps: $_default-deps) {
+  @return (
+    'focus-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'focus-opacity': map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
+    'hover-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'hover-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
+    'pressed-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'pressed-opacity':
+      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
+    'shape': map.get($deps, 'md-sys-shape', 'corner-none')
+  );
 }
diff --git a/ripple/lib/_ripple.scss b/ripple/lib/_ripple.scss
index 11b6c56e5c..5dd483ccc5 100644
--- a/ripple/lib/_ripple.scss
+++ b/ripple/lib/_ripple.scss
@@ -46,7 +46,7 @@
     // Remove Safari workaround for incorrect ripple overflow when addressed.
     // This addresses `hover` and `pressed` state oveflow.
     will-change: transform;
-    border-radius: var(--_state-layer-shape);
+    border-radius: var(--_shape);
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
@@ -59,7 +59,7 @@
     }
 
     &::before {
-      background-color: var(--_hover-state-layer-color);
+      background-color: var(--_hover-color);
       transition: opacity 15ms linear, background-color 15ms linear;
       inset: 0;
     }
@@ -68,7 +68,7 @@
       // press ripple fade-out
       background: radial-gradient(
         closest-side,
-        var(--_pressed-state-layer-color) max(calc(100% - 70px), 65%),
+        var(--_pressed-color) max(calc(100% - 70px), 65%),
         transparent 100%
       );
       transition: opacity 375ms linear;
@@ -77,29 +77,29 @@
   }
 
   .hovered::before {
-    background-color: var(--_hover-state-layer-color);
-    opacity: var(--_hover-state-layer-opacity);
+    background-color: var(--_hover-color);
+    opacity: var(--_hover-opacity);
   }
 
   .focused::before {
-    background-color: var(--_focus-state-layer-color);
-    opacity: var(--_focus-state-layer-opacity);
+    background-color: var(--_focus-color);
+    opacity: var(--_focus-opacity);
     transition-duration: 75ms;
   }
 
   .pressed::after {
     // press ripple fade-in
-    opacity: var(--_pressed-state-layer-opacity);
+    opacity: var(--_pressed-opacity);
     transition-duration: 105ms;
   }
 
   .unbounded {
     $unbounded: (
-      state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
+      shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
     );
     $unbounded: theme.create-theme-vars($unbounded, ripple);
 
-    --_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
+    --_shape: #{map.get($unbounded, 'shape')};
   }
 
   @media screen and (forced-colors: active) {
diff --git a/segmentedbutton/lib/_shared.scss b/segmentedbutton/lib/_shared.scss
index 63d004ff6f..81156fb9e2 100644
--- a/segmentedbutton/lib/_shared.scss
+++ b/segmentedbutton/lib/_shared.scss
@@ -195,12 +195,12 @@
 
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        focus-color: var(--_unselected-focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
@@ -242,12 +242,12 @@
 
     @include ripple.theme(
       (
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        focus-color: var(--_selected-focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
diff --git a/switch/lib/_handle.scss b/switch/lib/_handle.scss
index 4f34f61a49..5448fab1ad 100644
--- a/switch/lib/_handle.scss
+++ b/switch/lib/_handle.scss
@@ -138,13 +138,12 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     .md3-switch--selected & {
       @include ripple.theme(
         (
-          hover-state-layer-color: var(--_selected-hover-state-layer-color),
-          focus-state-layer-color: var(--_selected-focus-state-layer-color),
-          pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-          hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
-          focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
-          pressed-state-layer-opacity:
-            var(--_selected-pressed-state-layer-opacity),
+          hover-color: var(--_selected-hover-state-layer-color),
+          focus-color: var(--_selected-focus-state-layer-color),
+          pressed-color: var(--_selected-pressed-state-layer-color),
+          hover-opacity: var(--_selected-hover-state-layer-opacity),
+          focus-opacity: var(--_selected-focus-state-layer-opacity),
+          pressed-opacity: var(--_selected-pressed-state-layer-opacity),
         )
       );
     }
@@ -152,16 +151,12 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
     .md3-switch--unselected & {
       @include ripple.theme(
         (
-          hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-          focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-          pressed-state-layer-color:
-            var(--_unselected-pressed-state-layer-color),
-          hover-state-layer-opacity:
-            var(--_unselected-hover-state-layer-opacity),
-          focus-state-layer-opacity:
-            var(--_unselected-focus-state-layer-opacity),
-          pressed-state-layer-opacity:
-            var(--_unselected-pressed-state-layer-opacity),
+          hover-color: var(--_unselected-hover-state-layer-color),
+          focus-color: var(--_unselected-focus-state-layer-color),
+          pressed-color: var(--_unselected-pressed-state-layer-color),
+          hover-opacity: var(--_unselected-hover-state-layer-opacity),
+          focus-opacity: var(--_unselected-focus-state-layer-opacity),
+          pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
         )
       );
     }