diff --git a/README.md b/README.md
index 1aa10b68..8fd99562 100644
--- a/README.md
+++ b/README.md
@@ -76,12 +76,12 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar
           themeMode: themeMode,
           theme: ThemeData(
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: light.background,
+            scaffoldBackgroundColor: light.surfaceTertiary,
             colorScheme: light,
           ),
           darkTheme: ThemeData(
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: dark.background,
+            scaffoldBackgroundColor: dark.surfaceTertiary,
             colorScheme: dark,
           ),
         );
diff --git a/example/lib/main.dart b/example/lib/main.dart
index 596eed2e..cf16ece0 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -51,14 +51,14 @@ class ZetaExample extends StatelessWidget {
           theme: ThemeData(
             useMaterial3: true,
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: light.background,
+            scaffoldBackgroundColor: light.surfaceTertiary,
             colorScheme: light,
             textTheme: zetaTextTheme,
           ),
           darkTheme: ThemeData(
             useMaterial3: true,
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: dark.background,
+            scaffoldBackgroundColor: dark.surfaceTertiary,
             colorScheme: dark,
             textTheme: zetaTextTheme,
           ),
diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart
index 3fe929b1..cc2b4b70 100644
--- a/example/lib/pages/components/progress_example.dart
+++ b/example/lib/pages/components/progress_example.dart
@@ -12,7 +12,7 @@ class ProgressExample extends StatefulWidget {
 }
 
 class ProgressExampleState extends State<ProgressExample> {
-  MaterialStatesController controller = MaterialStatesController();
+  WidgetStatesController controller = WidgetStatesController();
 
   @override
   void initState() {
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index 2b38a3e9..db897fd3 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -190,14 +190,14 @@ class HotReload extends StatelessWidget {
                       themeMode: themeMode,
                       theme: ThemeData(
                         useMaterial3: true,
-                        scaffoldBackgroundColor: light.background,
+                        scaffoldBackgroundColor: light.surfaceTertiary,
                         colorScheme: light,
                         textTheme: zetaTextTheme,
                         brightness: Brightness.light,
                       ),
                       darkTheme: ThemeData(
                         useMaterial3: true,
-                        scaffoldBackgroundColor: dark.background,
+                        scaffoldBackgroundColor: dark.surfaceTertiary,
                         colorScheme: dark,
                         textTheme: zetaTextTheme,
                         brightness: Brightness.dark,
diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart
index 5fc24290..208044e8 100644
--- a/lib/src/components/accordion/accordion.dart
+++ b/lib/src/components/accordion/accordion.dart
@@ -110,25 +110,25 @@ class _ZetaAccordionState extends State<ZetaAccordion> with TickerProviderStateM
           children: [
             TextButton(
               style: ButtonStyle(
-                shape: MaterialStatePropertyAll(
+                shape: WidgetStatePropertyAll(
                   RoundedRectangleBorder(borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none),
                 ),
-                overlayColor: MaterialStateProperty.resolveWith((states) {
-                  if (states.contains(MaterialState.hovered)) {
+                overlayColor: WidgetStateProperty.resolveWith((states) {
+                  if (states.contains(WidgetState.hovered)) {
                     return zetaColors.cool.shade20;
                   }
-                  if (states.contains(MaterialState.pressed)) {
+                  if (states.contains(WidgetState.pressed)) {
                     return zetaColors.cool.shade30;
                   }
 
-                  if (states.contains(MaterialState.focused)) {
+                  if (states.contains(WidgetState.focused)) {
                     return Colors.transparent;
                   }
 
                   return null;
                 }),
-                side: MaterialStateProperty.resolveWith((states) {
-                  if (states.contains(MaterialState.focused)) {
+                side: WidgetStateProperty.resolveWith((states) {
+                  if (states.contains(WidgetState.focused)) {
                     return BorderSide(color: zetaColors.blue.shade50, width: 2);
                   }
                   return null;
diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart
index f318946d..267d9394 100644
--- a/lib/src/components/breadcrumbs/breadcrumbs.dart
+++ b/lib/src/components/breadcrumbs/breadcrumbs.dart
@@ -169,7 +169,7 @@ class ZetaBreadCrumb extends StatefulWidget {
 }
 
 class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
-  final controller = MaterialStatesController();
+  final controller = WidgetStatesController();
 
   @override
   void initState() {
@@ -189,7 +189,7 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
       onTap: widget.onPressed,
       enableFeedback: false,
       splashColor: Colors.transparent,
-      overlayColor: MaterialStateProperty.resolveWith((states) {
+      overlayColor: WidgetStateProperty.resolveWith((states) {
         return Colors.transparent;
       }),
       child: Row(
@@ -212,8 +212,8 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
   }
 
   /// Get color of breadcrumb based on state.
-  Color getColor(Set<MaterialState> states, ZetaColors colors) {
-    if (states.contains(MaterialState.hovered)) {
+  Color getColor(Set<WidgetState> states, ZetaColors colors) {
+    if (states.contains(WidgetState.hovered)) {
       return colors.blue;
     }
     if (widget.isSelected) return colors.black;
@@ -224,7 +224,7 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties.add(
-      DiagnosticsProperty<MaterialStatesController>(
+      DiagnosticsProperty<WidgetStatesController>(
         'controller',
         controller,
       ),
@@ -272,31 +272,31 @@ class _BreadCrumbsTruncatedState extends State<BreadCrumbsTruncated> {
               });
             },
             style: ButtonStyle(
-              backgroundColor: MaterialStateProperty.resolveWith((states) {
-                if (states.contains(MaterialState.hovered)) {
+              backgroundColor: WidgetStateProperty.resolveWith((states) {
+                if (states.contains(WidgetState.hovered)) {
                   return colors.surfaceHovered;
                 }
-                if (states.contains(MaterialState.pressed)) {
+                if (states.contains(WidgetState.pressed)) {
                   return colors.primary.shade10;
                 }
-                if (states.contains(MaterialState.disabled)) {
+                if (states.contains(WidgetState.disabled)) {
                   return colors.surfaceDisabled;
                 }
                 return colors.warm.shade10;
               }),
-              foregroundColor: MaterialStateProperty.resolveWith((states) {
-                if (states.contains(MaterialState.disabled)) {
+              foregroundColor: WidgetStateProperty.resolveWith((states) {
+                if (states.contains(WidgetState.disabled)) {
                   return colors.textDisabled;
                 }
                 return colors.textDefault;
               }),
-              shape: MaterialStatePropertyAll(
+              shape: WidgetStatePropertyAll(
                 RoundedRectangleBorder(
                   borderRadius: (widget.rounded ? ZetaRadius.minimal : ZetaRadius.none),
                 ),
               ),
-              side: MaterialStateProperty.resolveWith((states) {
-                if (states.contains(MaterialState.focused)) {
+              side: WidgetStateProperty.resolveWith((states) {
+                if (states.contains(WidgetState.focused)) {
                   return BorderSide(
                     width: ZetaSpacing.x0_5,
                     color: colors.primary.shade100,
@@ -307,9 +307,9 @@ class _BreadCrumbsTruncatedState extends State<BreadCrumbsTruncated> {
                 }
                 return null;
               }),
-              padding: MaterialStateProperty.all(EdgeInsets.zero),
-              minimumSize: MaterialStateProperty.all(Size.zero),
-              elevation: const MaterialStatePropertyAll(0),
+              padding: WidgetStateProperty.all(EdgeInsets.zero),
+              minimumSize: WidgetStateProperty.all(Size.zero),
+              elevation: const WidgetStatePropertyAll(0),
             ),
             child: Icon(
               widget.rounded ? ZetaIcons.more_horizontal_round : ZetaIcons.more_horizontal_sharp,
diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart
index 1f30db8e..a89f5064 100644
--- a/lib/src/components/buttons/button_group.dart
+++ b/lib/src/components/buttons/button_group.dart
@@ -189,14 +189,14 @@ class ZetaGroupButton extends StatefulWidget {
 }
 
 class _ZetaGroupButtonState extends State<ZetaGroupButton> {
-  late MaterialStatesController controller;
+  late WidgetStatesController controller;
 
   @override
   void initState() {
     super.initState();
-    controller = MaterialStatesController();
+    controller = WidgetStatesController();
     controller.addListener(() {
-      if (!controller.value.contains(MaterialState.disabled) && context.mounted && mounted) {
+      if (!controller.value.contains(WidgetState.disabled) && context.mounted && mounted) {
         // TODO(UX-1005): setState causing exception when going from disabled to enabled.
         setState(() {});
       }
@@ -225,7 +225,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
           top: borderSide,
           left: borderSide,
           bottom: borderSide,
-          right: controller.value.contains(MaterialState.focused)
+          right: controller.value.contains(WidgetState.focused)
               ? BorderSide(color: colors.blue.shade50, width: 2)
               : (widget.isFinal)
                   ? borderSide
@@ -259,15 +259,15 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
   double get _padding => widget.isLarge ? ZetaSpacing.x4 : ZetaSpacing.x3;
 
   BorderSide _getBorderSide(
-    Set<MaterialState> states,
+    Set<WidgetState> states,
     ZetaColors colors,
     bool finalButton,
   ) {
-    if (states.contains(MaterialState.focused)) {
+    if (states.contains(WidgetState.focused)) {
       return BorderSide(color: colors.blue.shade50, width: ZetaSpacing.x0_5);
     }
     if (widget.isInverse) return BorderSide(color: colors.black);
-    if (states.contains(MaterialState.disabled)) {
+    if (states.contains(WidgetState.disabled)) {
       return BorderSide(color: colors.cool.shade40);
     }
     return BorderSide(
@@ -293,45 +293,40 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
 
   ButtonStyle getStyle(ZetaWidgetBorder borderType, ZetaColors colors) {
     return ButtonStyle(
-      shape: MaterialStateProperty.all(
+      shape: WidgetStateProperty.all(
         RoundedRectangleBorder(
           borderRadius: _getRadius(borderType),
         ),
       ),
-      backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
+      backgroundColor: WidgetStateProperty.resolveWith<Color?>((states) {
         if (widget.isInverse) return colors.cool.shade100;
 
-        if (states.contains(MaterialState.disabled)) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.surfaceDisabled;
         }
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return colors.primary.shade10;
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return colors.cool.shade20;
         }
         return colors.surfacePrimary;
       }),
-      foregroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
-        if (states.contains(MaterialState.disabled)) {
+      foregroundColor: WidgetStateProperty.resolveWith<Color?>((states) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.textDisabled;
         }
         if (widget.isInverse) return colors.cool.shade100.onColor;
         return colors.textDefault;
       }),
-      elevation: const MaterialStatePropertyAll(0),
-      padding: MaterialStateProperty.all(EdgeInsets.zero),
+      elevation: const WidgetStatePropertyAll(0),
+      padding: WidgetStateProperty.all(EdgeInsets.zero),
     );
   }
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(
-      DiagnosticsProperty<MaterialStatesController>(
-        'controller',
-        controller,
-      ),
-    );
+    properties.add(DiagnosticsProperty<WidgetStatesController>('controller', controller));
   }
 }
diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart
index b37967bb..269cd311 100644
--- a/lib/src/components/buttons/button_style.dart
+++ b/lib/src/components/buttons/button_style.dart
@@ -91,28 +91,28 @@ ButtonStyle buttonStyle(
   final bool isSolid = type.solid || backgroundColor != null;
 
   return ButtonStyle(
-    minimumSize: MaterialStateProperty.all(const Size.square(32)),
-    shape: MaterialStateProperty.all(
+    minimumSize: WidgetStateProperty.all(const Size.square(32)),
+    shape: WidgetStateProperty.all(
       RoundedRectangleBorder(borderRadius: borderType.radius),
     ),
-    backgroundColor: MaterialStateProperty.resolveWith<Color?>(
+    backgroundColor: WidgetStateProperty.resolveWith<Color?>(
       (states) {
-        if (states.contains(MaterialState.disabled)) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.surfaceDisabled;
         }
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return isSolid ? color.shade70 : colors.primary.shade10;
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return isSolid ? color.shade50 : colors.cool.shade20;
         }
         if (backgroundColor != null) return backgroundColor;
         return isSolid ? color : Colors.transparent;
       },
     ),
-    foregroundColor: MaterialStateProperty.resolveWith<Color?>(
+    foregroundColor: WidgetStateProperty.resolveWith<Color?>(
       (states) {
-        if (states.contains(MaterialState.disabled)) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.textDisabled;
         }
         switch (type) {
@@ -129,15 +129,15 @@ ButtonStyle buttonStyle(
         }
       },
     ),
-    overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+    overlayColor: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
       return null;
     }),
-    side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (type.border && states.contains(MaterialState.disabled)) {
+    side: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (type.border && states.contains(WidgetState.disabled)) {
         return BorderSide(color: colors.borderDisabled);
       }
       // TODO(thelukewalton): This removes a defualt border when focused, rather than adding a second border when focused.
-      if (states.contains(MaterialState.focused)) {
+      if (states.contains(WidgetState.focused)) {
         return BorderSide(color: colors.blue, width: ZetaSpacing.x0_5);
       }
       if (type.border) {
@@ -148,7 +148,7 @@ ButtonStyle buttonStyle(
 
       return null;
     }),
-    elevation: const MaterialStatePropertyAll(0),
-    padding: MaterialStateProperty.all(EdgeInsets.zero),
+    elevation: const WidgetStatePropertyAll(0),
+    padding: WidgetStateProperty.all(EdgeInsets.zero),
   );
 }
diff --git a/lib/src/components/buttons/fab.dart b/lib/src/components/buttons/fab.dart
index 2d7eb2b7..8a5cee49 100644
--- a/lib/src/components/buttons/fab.dart
+++ b/lib/src/components/buttons/fab.dart
@@ -127,14 +127,14 @@ class _ZetaFABState extends State<ZetaFAB> {
         backgroundColor: backgroundColor,
         foregroundColor: backgroundColor.onColor,
       ).copyWith(
-        overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-          if (states.contains(MaterialState.hovered)) return colors.hover;
-          if (states.contains(MaterialState.pressed)) return colors.selected;
+        overlayColor: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+          if (states.contains(WidgetState.hovered)) return colors.hover;
+          if (states.contains(WidgetState.pressed)) return colors.selected;
           return null;
         }),
-        side: MaterialStateProperty.resolveWith(
-          (Set<MaterialState> states) {
-            if (states.contains(MaterialState.focused)) {
+        side: WidgetStateProperty.resolveWith(
+          (Set<WidgetState> states) {
+            if (states.contains(WidgetState.focused)) {
               // TODO(thelukewalton): This removes a defualt border when focused, rather than adding a second border when focused.
               return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaSpacing.x0_5);
             }
diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart
index 42a9b768..5996357b 100644
--- a/lib/src/components/chips/chip.dart
+++ b/lib/src/components/chips/chip.dart
@@ -95,45 +95,45 @@ class _ZetaChipState extends State<ZetaChip> {
         }
       },
       style: ButtonStyle(
-        shape: MaterialStateProperty.all(
+        shape: WidgetStateProperty.all(
           RoundedRectangleBorder(borderRadius: widget.rounded ? ZetaRadius.full : ZetaRadius.none),
         ),
-        textStyle: MaterialStateProperty.all(ZetaTextStyles.bodySmall),
-        backgroundColor: MaterialStateProperty.resolveWith((states) {
-          if (states.contains(MaterialState.disabled)) {
+        textStyle: WidgetStateProperty.all(ZetaTextStyles.bodySmall),
+        backgroundColor: WidgetStateProperty.resolveWith((states) {
+          if (states.contains(WidgetState.disabled)) {
             return colors.surfaceDisabled;
           }
           if (selected) {
             return colors.cool.shade90;
           }
-          if (states.contains(MaterialState.pressed) || states.contains(MaterialState.dragged)) {
+          if (states.contains(WidgetState.pressed) || states.contains(WidgetState.dragged)) {
             return colors.surfaceSelected;
           }
 
-          if (states.contains(MaterialState.hovered)) {
+          if (states.contains(WidgetState.hovered)) {
             return colors.surfaceHovered;
           }
 
           return colors.surfacePrimary;
         }),
-        foregroundColor: MaterialStateProperty.all(foregroundColor),
-        mouseCursor: MaterialStateProperty.resolveWith((states) {
-          if (states.contains(MaterialState.disabled)) {
+        foregroundColor: WidgetStateProperty.all(foregroundColor),
+        mouseCursor: WidgetStateProperty.resolveWith((states) {
+          if (states.contains(WidgetState.disabled)) {
             return SystemMouseCursors.forbidden;
           }
-          if (states.contains(MaterialState.dragged)) {
+          if (states.contains(WidgetState.dragged)) {
             return SystemMouseCursors.grabbing;
           }
           return SystemMouseCursors.click;
         }),
-        elevation: MaterialStateProperty.all(0),
-        side: MaterialStateProperty.resolveWith((states) {
-          if (states.contains(MaterialState.focused)) {
+        elevation: WidgetStateProperty.all(0),
+        side: WidgetStateProperty.resolveWith((states) {
+          if (states.contains(WidgetState.focused)) {
             return BorderSide(width: ZetaSpacing.x0_5, color: colors.blue.shade50);
           }
           return BorderSide(color: colors.borderDefault);
         }),
-        padding: MaterialStateProperty.all(
+        padding: WidgetStateProperty.all(
           EdgeInsets.fromLTRB(
             widget.leading != null ? ZetaSpacing.x2_5 : ZetaSpacing.x3,
             0,
diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart
index 0d098932..88c9410e 100644
--- a/lib/src/components/dial_pad/dial_pad.dart
+++ b/lib/src/components/dial_pad/dial_pad.dart
@@ -202,11 +202,11 @@ class ZetaDialPadButton extends StatelessWidget {
           child: InkWell(
             onTap: () => onTap?.call(primary),
             borderRadius: ZetaRadius.full,
-            overlayColor: MaterialStateProperty.resolveWith((states) {
-              if (states.contains(MaterialState.pressed)) {
+            overlayColor: WidgetStateProperty.resolveWith((states) {
+              if (states.contains(WidgetState.pressed)) {
                 return colors.surfaceSelectedHovered;
               }
-              if (states.contains(MaterialState.hovered)) {
+              if (states.contains(WidgetState.hovered)) {
                 return colors.surfaceHovered;
               }
               return null;
diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart
index b88036c5..32672c8e 100644
--- a/lib/src/components/dropdown/dropdown.dart
+++ b/lib/src/components/dropdown/dropdown.dart
@@ -291,13 +291,13 @@ class _DropdownItem<T> extends StatefulWidget {
 }
 
 class _DropdownItemState<T> extends State<_DropdownItem<T>> {
-  final controller = MaterialStatesController();
+  final controller = WidgetStatesController();
 
   @override
   void initState() {
     super.initState();
     controller.addListener(() {
-      if (context.mounted && mounted && !controller.value.contains(MaterialState.disabled)) {
+      if (context.mounted && mounted && !controller.value.contains(WidgetState.disabled)) {
         setState(() {});
       }
     });
@@ -377,37 +377,37 @@ class _DropdownItemState<T> extends State<_DropdownItem<T>> {
 
   ButtonStyle _getStyle(ZetaColors colors) {
     return ButtonStyle(
-      backgroundColor: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.disabled)) {
+      backgroundColor: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.surfaceDisabled;
         }
         if (widget.selected) {
           return colors.surfaceSelected;
         }
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return colors.surfaceSelected;
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return colors.surfaceHovered;
         }
 
         return colors.surfacePrimary;
       }),
-      foregroundColor: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.disabled)) {
+      foregroundColor: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.textDisabled;
         }
         return colors.textDefault;
       }),
-      shape: MaterialStateProperty.all(
+      shape: WidgetStateProperty.all(
         RoundedRectangleBorder(
           borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none,
         ),
       ),
-      side: const MaterialStatePropertyAll(BorderSide.none),
-      padding: const MaterialStatePropertyAll(EdgeInsets.zero),
-      elevation: const MaterialStatePropertyAll(0),
-      overlayColor: const MaterialStatePropertyAll(Colors.transparent),
+      side: const WidgetStatePropertyAll(BorderSide.none),
+      padding: const WidgetStatePropertyAll(EdgeInsets.zero),
+      elevation: const WidgetStatePropertyAll(0),
+      overlayColor: const WidgetStatePropertyAll(Colors.transparent),
     );
   }
 
@@ -415,7 +415,7 @@ class _DropdownItemState<T> extends State<_DropdownItem<T>> {
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties.add(
-      DiagnosticsProperty<MaterialStatesController>(
+      DiagnosticsProperty<WidgetStatesController>(
         'controller',
         controller,
       ),
diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart
index 7971e2ca..1ac8e8fa 100644
--- a/lib/src/components/radio/radio.dart
+++ b/lib/src/components/radio/radio.dart
@@ -68,15 +68,14 @@ class _ZetaRadioState<T> extends State<ZetaRadio<T>> with TickerProviderStateMix
               ..focusColor = zetaColors.blue.shade50
               ..splashRadius = 12
               ..downPosition = downPosition
-              ..isFocused = states.contains(MaterialState.focused)
-              ..isHovered = states.contains(MaterialState.hovered)
-              ..activeColor =
-                  states.contains(MaterialState.disabled) ? zetaColors.cool.shade30 : zetaColors.blue.shade60
+              ..isFocused = states.contains(WidgetState.focused)
+              ..isHovered = states.contains(WidgetState.hovered)
+              ..activeColor = states.contains(WidgetState.disabled) ? zetaColors.cool.shade30 : zetaColors.blue.shade60
               ..inactiveColor =
-                  states.contains(MaterialState.disabled) ? zetaColors.cool.shade30 : zetaColors.cool.shade70,
-            mouseCursor: MaterialStateProperty.all(
-              MaterialStateProperty.resolveAs<MouseCursor>(
-                MaterialStateMouseCursor.clickable,
+                  states.contains(WidgetState.disabled) ? zetaColors.cool.shade30 : zetaColors.cool.shade70,
+            mouseCursor: WidgetStateProperty.all(
+              WidgetStateProperty.resolveAs<MouseCursor>(
+                WidgetStateMouseCursor.clickable,
                 states,
               ),
             ),
@@ -87,7 +86,7 @@ class _ZetaRadioState<T> extends State<ZetaRadio<T>> with TickerProviderStateMix
             onTap: () => onChanged?.call(true),
             child: DefaultTextStyle(
               style: ZetaTextStyles.bodyMedium.copyWith(
-                color: states.contains(MaterialState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault,
+                color: states.contains(WidgetState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault,
                 height: 1.33,
               ),
               child: widget.label!,
diff --git a/lib/src/components/select_input/select_input.dart b/lib/src/components/select_input/select_input.dart
index b371d920..239dae56 100644
--- a/lib/src/components/select_input/select_input.dart
+++ b/lib/src/components/select_input/select_input.dart
@@ -518,43 +518,43 @@ class ZetaSelectInputItem extends StatelessWidget {
       ZetaWidgetSize.small => -4.0,
     };
     return ButtonStyle(
-      backgroundColor: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.hovered)) {
+      backgroundColor: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.hovered)) {
           return colors.surfaceHovered;
         }
 
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return colors.surfaceSelected;
         }
 
-        if (states.contains(MaterialState.disabled) || onPressed == null) {
+        if (states.contains(WidgetState.disabled) || onPressed == null) {
           return colors.surfaceDisabled;
         }
         return colors.surfacePrimary;
       }),
-      foregroundColor: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.disabled)) {
+      foregroundColor: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.textDisabled;
         }
         return colors.textDefault;
       }),
-      shape: MaterialStateProperty.all(
+      shape: WidgetStateProperty.all(
         RoundedRectangleBorder(
           borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none,
         ),
       ),
-      side: MaterialStatePropertyAll(
+      side: WidgetStatePropertyAll(
         selected ? BorderSide(color: colors.primary.shade60) : BorderSide.none,
       ),
-      padding: const MaterialStatePropertyAll(
+      padding: const WidgetStatePropertyAll(
         EdgeInsets.symmetric(horizontal: ZetaSpacing.b),
       ),
-      elevation: const MaterialStatePropertyAll(0),
-      overlayColor: const MaterialStatePropertyAll(Colors.transparent),
-      textStyle: MaterialStatePropertyAll<TextStyle>(
+      elevation: const WidgetStatePropertyAll(0),
+      overlayColor: const WidgetStatePropertyAll(Colors.transparent),
+      textStyle: WidgetStatePropertyAll<TextStyle>(
         size == ZetaWidgetSize.small ? ZetaTextStyles.bodyXSmall : ZetaTextStyles.bodyMedium,
       ),
-      minimumSize: const MaterialStatePropertyAll<Size>(Size.fromHeight(48)),
+      minimumSize: const WidgetStatePropertyAll<Size>(Size.fromHeight(ZetaSpacing.x12)),
       alignment: Alignment.centerLeft,
       visualDensity: VisualDensity(
         horizontal: visualDensity,
diff --git a/lib/src/components/switch/material_switch.dart b/lib/src/components/switch/material_switch.dart
index 34cf6d62..00cfc92f 100644
--- a/lib/src/components/switch/material_switch.dart
+++ b/lib/src/components/switch/material_switch.dart
@@ -61,17 +61,17 @@ class MaterialSwitch extends StatefulWidget {
   final ImageErrorListener? onActiveThumbImageError;
   final ImageProvider? inactiveThumbImage;
   final ImageErrorListener? onInactiveThumbImageError;
-  final MaterialStateProperty<Color?>? thumbColor;
-  final MaterialStateProperty<Color?>? trackColor;
-  final MaterialStateProperty<Color?>? trackOutlineColor;
-  final MaterialStateProperty<double?>? trackOutlineWidth;
-  final MaterialStateProperty<Icon?>? thumbIcon;
+  final WidgetStateProperty<Color?>? thumbColor;
+  final WidgetStateProperty<Color?>? trackColor;
+  final WidgetStateProperty<Color?>? trackOutlineColor;
+  final WidgetStateProperty<double?>? trackOutlineWidth;
+  final WidgetStateProperty<Icon?>? thumbIcon;
   final MaterialTapTargetSize? materialTapTargetSize;
   final DragStartBehavior dragStartBehavior;
   final MouseCursor? mouseCursor;
   final Color? focusColor;
   final Color? hoverColor;
-  final MaterialStateProperty<Color?>? overlayColor;
+  final WidgetStateProperty<Color?>? overlayColor;
   final double? splashRadius;
   final FocusNode? focusNode;
   final ValueChanged<bool>? onFocusChange;
@@ -139,21 +139,21 @@ class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStat
     }
   }
 
-  MaterialStateProperty<Color?> get _widgetThumbColor {
-    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.disabled)) {
+  WidgetStateProperty<Color?> get _widgetThumbColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.disabled)) {
         return widget.inactiveThumbColor;
       }
-      if (states.contains(MaterialState.selected)) {
+      if (states.contains(WidgetState.selected)) {
         return widget.activeColor;
       }
       return widget.inactiveThumbColor;
     });
   }
 
-  MaterialStateProperty<Color?> get _widgetTrackColor {
-    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color?> get _widgetTrackColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
         return widget.activeTrackColor;
       }
       return widget.inactiveTrackColor;
@@ -224,8 +224,8 @@ class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStat
 
     // Colors need to be resolved in selected and non selected states separately
     // so that they can be lerped between.
-    final Set<MaterialState> activeStates = states..add(MaterialState.selected);
-    final Set<MaterialState> inactiveStates = states..remove(MaterialState.selected);
+    final Set<WidgetState> activeStates = states..add(WidgetState.selected);
+    final Set<WidgetState> inactiveStates = states..remove(WidgetState.selected);
 
     final Color? activeThumbColor = widget.thumbColor?.resolve(activeStates) ??
         _widgetThumbColor.resolve(activeStates) ??
@@ -266,19 +266,19 @@ class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStat
     final Color effectiveActiveIconColor = effectiveActiveIcon?.color ?? effectiveActiveThumbColor;
     final Color effectiveInactiveIconColor = effectiveInactiveIcon?.color ?? effectiveInactiveThumbColor;
 
-    final Set<MaterialState> focusedStates = states..add(MaterialState.focused);
+    final Set<WidgetState> focusedStates = states..add(WidgetState.focused);
     final Color effectiveFocusOverlayColor = widget.overlayColor?.resolve(focusedStates) ??
         widget.focusColor ??
         switchTheme.overlayColor?.resolve(focusedStates) ??
         defaults.overlayColor!.resolve(focusedStates)!;
 
-    final Set<MaterialState> hoveredStates = states..add(MaterialState.hovered);
+    final Set<WidgetState> hoveredStates = states..add(WidgetState.hovered);
     final Color effectiveHoverOverlayColor = widget.overlayColor?.resolve(hoveredStates) ??
         widget.hoverColor ??
         switchTheme.overlayColor?.resolve(hoveredStates) ??
         defaults.overlayColor!.resolve(hoveredStates)!;
 
-    final Set<MaterialState> activePressedStates = activeStates..add(MaterialState.pressed);
+    final Set<WidgetState> activePressedStates = activeStates..add(WidgetState.pressed);
     final Color effectiveActivePressedThumbColor = widget.thumbColor?.resolve(activePressedStates) ??
         _widgetThumbColor.resolve(activePressedStates) ??
         switchTheme.thumbColor?.resolve(activePressedStates) ??
@@ -288,7 +288,7 @@ class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStat
         activeThumbColor?.withAlpha(kRadialReactionAlpha) ??
         defaults.overlayColor!.resolve(activePressedStates)!;
 
-    final Set<MaterialState> inactivePressedStates = inactiveStates..add(MaterialState.pressed);
+    final Set<WidgetState> inactivePressedStates = inactiveStates..add(WidgetState.pressed);
     final Color effectiveInactivePressedThumbColor = widget.thumbColor?.resolve(inactivePressedStates) ??
         _widgetThumbColor.resolve(inactivePressedStates) ??
         switchTheme.thumbColor?.resolve(inactivePressedStates) ??
@@ -298,9 +298,9 @@ class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStat
         inactiveThumbColor?.withAlpha(kRadialReactionAlpha) ??
         defaults.overlayColor!.resolve(inactivePressedStates)!;
 
-    final MaterialStateProperty<MouseCursor> effectiveMouseCursor =
-        MaterialStateProperty.resolveWith<MouseCursor>((Set<MaterialState> states) {
-      return MaterialStateProperty.resolveAs<MouseCursor?>(widget.mouseCursor, states) ??
+    final WidgetStateProperty<MouseCursor> effectiveMouseCursor =
+        WidgetStateProperty.resolveWith<MouseCursor>((Set<WidgetState> states) {
+      return WidgetStateProperty.resolveAs<MouseCursor?>(widget.mouseCursor, states) ??
           switchTheme.mouseCursor?.resolve(states) ??
           defaults.mouseCursor!.resolve(states)!;
     });
@@ -337,9 +337,9 @@ class _MaterialSwitchState extends State<MaterialSwitch> with TickerProviderStat
             ..focusColor = effectiveFocusOverlayColor
             ..splashRadius = effectiveSplashRadius
             ..downPosition = downPosition
-            ..isFocused = states.contains(MaterialState.focused)
+            ..isFocused = states.contains(WidgetState.focused)
             // Zeta change: added `widget.showHover` to the below condition.
-            ..isHovered = widget.showHover && states.contains(MaterialState.hovered)
+            ..isHovered = widget.showHover && states.contains(WidgetState.hovered)
             ..activeColor = effectiveActiveThumbColor
             ..inactiveColor = effectiveInactiveThumbColor
             ..activePressedColor = effectiveActivePressedThumbColor
@@ -969,33 +969,33 @@ class _SwitchDefaultsM3 extends SwitchThemeData {
   late final ColorScheme _colors = Theme.of(context).colorScheme;
 
   @override
-  MaterialStateProperty<Color> get thumbColor {
-    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.disabled)) {
-        if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color> get thumbColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.disabled)) {
+        if (states.contains(WidgetState.selected)) {
           return _colors.surface.withOpacity(1);
         }
         return _colors.onSurface.withOpacity(0.38);
       }
-      if (states.contains(MaterialState.selected)) {
-        if (states.contains(MaterialState.pressed)) {
+      if (states.contains(WidgetState.selected)) {
+        if (states.contains(WidgetState.pressed)) {
           return _colors.primaryContainer;
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return _colors.primaryContainer;
         }
-        if (states.contains(MaterialState.focused)) {
+        if (states.contains(WidgetState.focused)) {
           return _colors.primaryContainer;
         }
         return _colors.onPrimary;
       }
-      if (states.contains(MaterialState.pressed)) {
+      if (states.contains(WidgetState.pressed)) {
         return _colors.onSurfaceVariant;
       }
-      if (states.contains(MaterialState.hovered)) {
+      if (states.contains(WidgetState.hovered)) {
         return _colors.onSurfaceVariant;
       }
-      if (states.contains(MaterialState.focused)) {
+      if (states.contains(WidgetState.focused)) {
         return _colors.onSurfaceVariant;
       }
       return _colors.outline;
@@ -1003,46 +1003,46 @@ class _SwitchDefaultsM3 extends SwitchThemeData {
   }
 
   @override
-  MaterialStateProperty<Color> get trackColor {
-    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.disabled)) {
-        if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color> get trackColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.disabled)) {
+        if (states.contains(WidgetState.selected)) {
           return _colors.onSurface.withOpacity(0.12);
         }
-        return _colors.surfaceVariant.withOpacity(0.12);
+        return _colors.surfaceContainerHighest.withOpacity(0.12);
       }
-      if (states.contains(MaterialState.selected)) {
-        if (states.contains(MaterialState.pressed)) {
+      if (states.contains(WidgetState.selected)) {
+        if (states.contains(WidgetState.pressed)) {
           return _colors.primary;
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return _colors.primary;
         }
-        if (states.contains(MaterialState.focused)) {
+        if (states.contains(WidgetState.focused)) {
           return _colors.primary;
         }
         return _colors.primary;
       }
-      if (states.contains(MaterialState.pressed)) {
-        return _colors.surfaceVariant;
+      if (states.contains(WidgetState.pressed)) {
+        return _colors.surfaceContainerHighest;
       }
-      if (states.contains(MaterialState.hovered)) {
-        return _colors.surfaceVariant;
+      if (states.contains(WidgetState.hovered)) {
+        return _colors.surfaceContainerHighest;
       }
-      if (states.contains(MaterialState.focused)) {
-        return _colors.surfaceVariant;
+      if (states.contains(WidgetState.focused)) {
+        return _colors.surfaceContainerHighest;
       }
-      return _colors.surfaceVariant;
+      return _colors.surfaceContainerHighest;
     });
   }
 
   @override
-  MaterialStateProperty<Color?> get trackOutlineColor {
-    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color?> get trackOutlineColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
         return Colors.transparent;
       }
-      if (states.contains(MaterialState.disabled)) {
+      if (states.contains(WidgetState.disabled)) {
         return _colors.onSurface.withOpacity(0.12);
       }
       return _colors.outline;
@@ -1050,27 +1050,27 @@ class _SwitchDefaultsM3 extends SwitchThemeData {
   }
 
   @override
-  MaterialStateProperty<Color?> get overlayColor {
-    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
-        if (states.contains(MaterialState.pressed)) {
+  WidgetStateProperty<Color?> get overlayColor {
+    return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
+        if (states.contains(WidgetState.pressed)) {
           return _colors.primary.withOpacity(0.12);
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return _colors.primary.withOpacity(0.08);
         }
-        if (states.contains(MaterialState.focused)) {
+        if (states.contains(WidgetState.focused)) {
           return _colors.primary.withOpacity(0.12);
         }
         return null;
       }
-      if (states.contains(MaterialState.pressed)) {
+      if (states.contains(WidgetState.pressed)) {
         return _colors.onSurface.withOpacity(0.12);
       }
-      if (states.contains(MaterialState.hovered)) {
+      if (states.contains(WidgetState.hovered)) {
         return _colors.onSurface.withOpacity(0.08);
       }
-      if (states.contains(MaterialState.focused)) {
+      if (states.contains(WidgetState.focused)) {
         return _colors.onSurface.withOpacity(0.12);
       }
       return null;
@@ -1078,14 +1078,14 @@ class _SwitchDefaultsM3 extends SwitchThemeData {
   }
 
   @override
-  MaterialStateProperty<MouseCursor> get mouseCursor {
-    return MaterialStateProperty.resolveWith(
-      (Set<MaterialState> states) => MaterialStateMouseCursor.clickable.resolve(states),
+  WidgetStateProperty<MouseCursor> get mouseCursor {
+    return WidgetStateProperty.resolveWith(
+      (Set<WidgetState> states) => WidgetStateMouseCursor.clickable.resolve(states),
     );
   }
 
   @override
-  MaterialStatePropertyAll<double> get trackOutlineWidth => const MaterialStatePropertyAll<double>(2);
+  WidgetStatePropertyAll<double> get trackOutlineWidth => const WidgetStatePropertyAll<double>(2);
 
   // Zeta change: `splashRadius` was fixed value in Flutter's [Switch],
   // but not we use `size.height` for this.
diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart
index 0dd121ae..1dc1c7c6 100644
--- a/lib/src/components/switch/zeta_switch.dart
+++ b/lib/src/components/switch/zeta_switch.dart
@@ -81,17 +81,17 @@ class ZetaSwitch extends StatelessWidget {
 
     return MaterialSwitch(
       size: _size,
-      trackOutlineWidth: const MaterialStatePropertyAll(0),
-      trackOutlineColor: const MaterialStatePropertyAll(Colors.transparent),
-      trackColor: MaterialStateProperty.resolveWith((states) {
-        if (states.contains(MaterialState.disabled)) {
+      trackOutlineWidth: const WidgetStatePropertyAll(0),
+      trackOutlineColor: const WidgetStatePropertyAll(Colors.transparent),
+      trackColor: WidgetStateProperty.resolveWith((states) {
+        if (states.contains(WidgetState.disabled)) {
           return zetaColors.cool.shade30;
         } else {
-          return states.contains(MaterialState.selected) ? zetaColors.primary : zetaColors.cool.shade50;
+          return states.contains(WidgetState.selected) ? zetaColors.primary : zetaColors.cool.shade50;
         }
       }),
-      thumbColor: MaterialStateProperty.resolveWith(
-        (states) => states.contains(MaterialState.disabled) ? zetaColors.cool.shade50 : zetaColors.cool.shade20,
+      thumbColor: WidgetStateProperty.resolveWith(
+        (states) => states.contains(WidgetState.disabled) ? zetaColors.cool.shade50 : zetaColors.cool.shade20,
       ),
       value: value ?? false,
       onChanged: onChanged,
diff --git a/lib/src/theme/color_scheme.dart b/lib/src/theme/color_scheme.dart
index c8cebf6a..42edad6d 100644
--- a/lib/src/theme/color_scheme.dart
+++ b/lib/src/theme/color_scheme.dart
@@ -32,9 +32,9 @@ class ZetaColorScheme extends ColorScheme with Diagnosticable {
     /// If null, defaults to  [kZetaFontFamily];
     this.fontFamily = kZetaFontFamily,
     required super.brightness,
-    required super.background,
+    @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') super.background,
     required super.error,
-    required super.onBackground,
+    @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') super.onBackground,
     required super.onError,
     required super.onPrimary,
     required super.onSecondary,
@@ -59,9 +59,25 @@ class ZetaColorScheme extends ColorScheme with Diagnosticable {
     super.secondaryContainer,
     super.shadow,
     super.surfaceTint,
+    @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.')
     super.surfaceVariant,
     super.tertiary,
     super.tertiaryContainer,
+    super.primaryFixed,
+    super.primaryFixedDim,
+    super.onPrimaryFixed,
+    super.onPrimaryFixedVariant,
+    super.secondaryFixed,
+    super.secondaryFixedDim,
+    super.onSecondaryFixed,
+    super.onSecondaryFixedVariant,
+    super.surfaceDim,
+    super.surfaceBright,
+    super.surfaceContainerLowest,
+    super.surfaceContainerLow,
+    super.surfaceContainer,
+    super.surfaceContainerHigh,
+    super.surfaceContainerHighest,
   });
 
   /// Current instance of the [ZetaColors]
@@ -85,23 +101,43 @@ class ZetaColorScheme extends ColorScheme with Diagnosticable {
     Color? onPrimary,
     Color? primaryContainer,
     Color? onPrimaryContainer,
+    Color? primaryFixed,
+    Color? primaryFixedDim,
+    Color? onPrimaryFixed,
+    Color? onPrimaryFixedVariant,
     Color? secondary,
     Color? onSecondary,
     Color? secondaryContainer,
     Color? onSecondaryContainer,
+    Color? secondaryFixed,
+    Color? secondaryFixedDim,
+    Color? onSecondaryFixed,
+    Color? onSecondaryFixedVariant,
     Color? tertiary,
     Color? onTertiary,
     Color? tertiaryContainer,
     Color? onTertiaryContainer,
+    Color? tertiaryFixed,
+    Color? tertiaryFixedDim,
+    Color? onTertiaryFixed,
+    Color? onTertiaryFixedVariant,
     Color? error,
     Color? onError,
     Color? errorContainer,
     Color? onErrorContainer,
-    Color? background,
-    Color? onBackground,
+    @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? background,
+    @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? onBackground,
     Color? surface,
     Color? onSurface,
+    @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.')
     Color? surfaceVariant,
+    Color? surfaceDim,
+    Color? surfaceBright,
+    Color? surfaceContainerLowest,
+    Color? surfaceContainerLow,
+    Color? surfaceContainer,
+    Color? surfaceContainerHigh,
+    Color? surfaceContainerHighest,
     Color? onSurfaceVariant,
     Color? outline,
     Color? outlineVariant,
@@ -118,10 +154,18 @@ class ZetaColorScheme extends ColorScheme with Diagnosticable {
       brightness: brightness ?? this.brightness,
       primary: primary ?? this.primary,
       onPrimary: onPrimary ?? this.onPrimary,
+      primaryFixed: primaryFixed ?? this.primaryFixed,
+      primaryFixedDim: primaryFixedDim ?? this.primaryFixedDim,
+      onPrimaryFixed: onPrimaryFixed ?? this.onPrimaryFixed,
+      onPrimaryFixedVariant: onPrimaryFixedVariant ?? this.onPrimaryFixedVariant,
       primaryContainer: primaryContainer ?? this.primaryContainer,
       onPrimaryContainer: onPrimaryContainer ?? this.onPrimaryContainer,
       secondary: secondary ?? this.secondary,
       onSecondary: onSecondary ?? this.onSecondary,
+      secondaryFixed: secondaryFixed ?? this.secondaryFixed,
+      secondaryFixedDim: secondaryFixedDim ?? this.secondaryFixedDim,
+      onSecondaryFixed: onSecondaryFixed ?? this.onSecondaryFixed,
+      onSecondaryFixedVariant: onSecondaryFixedVariant ?? this.onSecondaryFixedVariant,
       secondaryContainer: secondaryContainer ?? this.secondaryContainer,
       onSecondaryContainer: onSecondaryContainer ?? this.onSecondaryContainer,
       tertiary: tertiary ?? this.tertiary,
@@ -132,11 +176,15 @@ class ZetaColorScheme extends ColorScheme with Diagnosticable {
       onError: onError ?? this.onError,
       errorContainer: errorContainer ?? this.errorContainer,
       onErrorContainer: onErrorContainer ?? this.onErrorContainer,
-      background: background ?? this.background,
-      onBackground: onBackground ?? this.onBackground,
       surface: surface ?? this.surface,
       onSurface: onSurface ?? this.onSurface,
-      surfaceVariant: surfaceVariant ?? this.surfaceVariant,
+      surfaceDim: surfaceDim ?? this.surfaceDim,
+      surfaceBright: surfaceBright ?? this.surfaceBright,
+      surfaceContainerLowest: surfaceContainerLowest ?? this.surfaceContainerLowest,
+      surfaceContainerLow: surfaceContainerLow ?? this.surfaceContainerLow,
+      surfaceContainer: surfaceContainer ?? this.surfaceContainer,
+      surfaceContainerHigh: surfaceContainerHigh ?? this.surfaceContainerHigh,
+      surfaceContainerHighest: surfaceContainerHighest ?? this.surfaceContainerHighest,
       onSurfaceVariant: onSurfaceVariant ?? this.onSurfaceVariant,
       outline: outline ?? this.outline,
       outlineVariant: outlineVariant ?? this.outlineVariant,
diff --git a/lib/src/theme/colors.dart b/lib/src/theme/colors.dart
index 1e54689e..507bc576 100644
--- a/lib/src/theme/colors.dart
+++ b/lib/src/theme/colors.dart
@@ -231,7 +231,7 @@ class ZetaColors {
   ///
   /// Defaults to `ZetaColors.cool.70`.
   ///
-  /// Maps to [ColorScheme.onBackground].
+  /// Maps to [ColorScheme.onSurface].
   ///
   /// {@macro zeta-color-dark}
   Color get textSubtle => cool.shade70;
@@ -245,7 +245,7 @@ class ZetaColors {
 
   /// Inverse text / icon color.
   ///
-  /// Used for text that is not on [ColorScheme.background] or [ThemeData.scaffoldBackgroundColor].
+  /// Used for text that is not on [ColorScheme.surface] or [ThemeData.scaffoldBackgroundColor].
   ///
   /// Defaults to `ZetaColors.cool.20`.
   ///
@@ -265,7 +265,7 @@ class ZetaColors {
   ///
   /// Defaults to `ZetaColors.cool.70`.
   ///
-  /// Maps to [ColorScheme.onBackground].
+  /// Maps to [ColorScheme.onSurface].
   ///
   /// {@macro zeta-color-dark}
   Color get iconSubtle => textSubtle;
@@ -279,7 +279,7 @@ class ZetaColors {
 
   /// Inverse icon color.
   ///
-  /// Used for text that is not on [ColorScheme.background] or [ThemeData.scaffoldBackgroundColor].
+  /// Used for text that is not on [ColorScheme.surface] or [ThemeData.scaffoldBackgroundColor].
   ///
   /// Defaults to `ZetaColors.cool.20`.
   ///
@@ -348,7 +348,7 @@ class ZetaColors {
 
   /// Tertiary surface color.
   ///
-  /// Maps to [ColorScheme.background] and [ThemeData.scaffoldBackgroundColor]
+  /// Maps to [ThemeData.scaffoldBackgroundColor]
   ///
   /// * `ZetaColors.warm.10`.
   final Color surfaceTertiary;
@@ -564,9 +564,7 @@ class ZetaColors {
     return ZetaColorScheme(
       zetaColors: this,
       brightness: brightness,
-      background: surfaceTertiary,
       error: effectiveError,
-      onBackground: textDefault,
       onError: effectiveError.onColor,
       onPrimary: effectivePrimary.onColor,
       onSecondary: effectiveSecondary.onColor,
@@ -723,7 +721,7 @@ extension ZetaColorGetters on ColorScheme {
   ///
   /// Defaults to `ZetaColors.cool.70`.
   ///
-  /// Maps to [ColorScheme.onBackground].
+  /// Maps to [ColorScheme.onSurface].
   ///
   /// {@macro zeta-color-dark}
   Color get textSubtle => _resolve?.zetaColors.textSubtle ?? _resolveDefault(_ZetaColorProperties.textSubtle);
@@ -737,7 +735,7 @@ extension ZetaColorGetters on ColorScheme {
 
   /// Inverse text / icon color.
   ///
-  /// Used for text that is not on [ColorScheme.background] or [ThemeData.scaffoldBackgroundColor].
+  /// Used for text that is not on [ColorScheme.surface] or [ThemeData.scaffoldBackgroundColor].
   ///
   /// Defaults to `ZetaColors.cool.20`.
   ///
@@ -808,7 +806,7 @@ extension ZetaColorGetters on ColorScheme {
 
   /// Tertiary surface color.
   ///
-  /// Maps to [ColorScheme.background] and [ThemeData.scaffoldBackgroundColor]
+  /// Maps to [ThemeData.scaffoldBackgroundColor].
   ///
   /// * `ZetaColors.warm.10`.
   Color get surfaceTertiary =>