From 48ff856f56c50fbad321c807fcf38cb7a1a186b8 Mon Sep 17 00:00:00 2001
From: Nemes-Teodora <69592886+teodoranemes@users.noreply.github.com>
Date: Wed, 22 Oct 2025 12:08:59 +0000
Subject: [PATCH 1/2] chore: Update custom dev pages to use light-dark method
 (#3896)

Co-authored-by: Georgii Lobko <globko@amazon.de>
(cherry picked from commit 4c800089d5ef7d693a9f1cf868d6401ee6497861)
---
 pages/alert/style-custom-types.page.tsx       | 172 ++++-------
 pages/badge/style-custom-types.page.tsx       | 101 +++---
 .../button-group/style-custom-types.page.tsx  | 292 +++++-------------
 pages/button/style-custom-types.page.tsx      | 205 ++++--------
 pages/button/style-permutations.page.tsx      | 240 ++++++++------
 pages/checkbox/style-custom.page.tsx          |  31 +-
 pages/container/style-custom.page.tsx         |   7 +-
 pages/link/style-custom-types.page.tsx        |  92 ++----
 pages/radio-group/style-custom.page.tsx       |  35 +--
 pages/toggle/style-custom.page.tsx            |  28 +-
 10 files changed, 456 insertions(+), 747 deletions(-)

diff --git a/pages/alert/style-custom-types.page.tsx b/pages/alert/style-custom-types.page.tsx
index 5c3973da4b..549e73b0f6 100644
--- a/pages/alert/style-custom-types.page.tsx
+++ b/pages/alert/style-custom-types.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { Alert as CloudscapeAlert, Button, SpaceBetween } from '~components';
 
@@ -68,12 +66,6 @@ interface CustomAlertProps {
 }
 
 function CustomAlert({ children, type, dismissible, action }: CustomAlertProps) {
-  const mode = useCurrentMode(useRef(document.body));
-  const background = backgrounds[mode][type];
-  const borderColor = borderColors[mode][type];
-  const borderWidth = borderWidths[type];
-  const color = colors[mode];
-  const iconColor = iconColors[mode][type];
   return (
     <CloudscapeAlert
       dismissible={dismissible}
@@ -82,11 +74,11 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
       i18nStrings={i18nStrings}
       style={{
         root: {
-          background,
-          borderColor,
+          background: getBackground(type),
+          borderColor: getBorderColor(type),
           borderRadius: '8px',
-          borderWidth,
-          color,
+          borderWidth: getBorderWidth(type),
+          color: getColor(),
           focusRing: {
             borderColor: palette.red60,
             borderRadius: '4px',
@@ -94,14 +86,10 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
           },
         },
         icon: {
-          color: iconColor,
+          color: getIconColor(type),
         },
         dismissButton: {
-          color: {
-            default: dismissButtonColors[mode][type].default,
-            hover: dismissButtonColors[mode][type].hover,
-            active: dismissButtonColors[mode][type].active,
-          },
+          color: getDismissButtonColor(type),
           focusRing: {
             borderColor: palette.red60,
             borderRadius: '4px',
@@ -115,106 +103,72 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
   );
 }
 
-const backgrounds = {
-  light: {
-    info: palette.blue80,
-    success: palette.green80,
-    error: palette.red80,
-    warning: palette.teal90,
-  },
-  dark: {
-    info: palette.blue40,
-    success: palette.green20,
-    error: palette.red30,
-    warning: palette.teal20,
-  },
-};
+function getBackground(type: string) {
+  const backgrounds = {
+    info: `light-dark(${palette.blue80}, ${palette.blue40})`,
+    success: `light-dark(${palette.green80}, ${palette.green20})`,
+    error: `light-dark(${palette.red80}, ${palette.red30})`,
+    warning: `light-dark(${palette.teal90}, ${palette.teal20})`,
+  };
+  return backgrounds[type as keyof typeof backgrounds];
+}
 
-const colors = {
-  light: palette.neutral10,
-  dark: palette.neutral100,
-};
+function getColor() {
+  return `light-dark(${palette.neutral10}, ${palette.neutral100})`;
+}
 
-const borderColors = {
-  light: {
-    info: palette.neutral80,
-    success: palette.green80,
-    error: palette.blue90,
-    warning: palette.orange80,
-  },
-  dark: {
-    info: palette.neutral20,
-    success: palette.green30,
-    error: palette.red60,
-    warning: palette.orange40,
-  },
-};
+function getBorderColor(type: string) {
+  const borderColors = {
+    info: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
+    success: `light-dark(${palette.green80}, ${palette.green30})`,
+    error: `light-dark(${palette.blue90}, ${palette.red60})`,
+    warning: `light-dark(${palette.orange80}, ${palette.orange40})`,
+  };
+  return borderColors[type as keyof typeof borderColors];
+}
 
-const borderWidths = {
-  info: '4px',
-  success: '0px',
-  error: '6px',
-  warning: '0px',
-};
+function getBorderWidth(type: string) {
+  const borderWidths = {
+    info: '4px',
+    success: '0px',
+    error: '6px',
+    warning: '0px',
+  };
+  return borderWidths[type as keyof typeof borderWidths];
+}
 
-const iconColors = {
-  light: {
-    info: palette.orange80,
-    success: palette.red60,
-    error: palette.blue80,
-    warning: palette.neutral10,
-  },
-  dark: {
-    info: palette.red30,
-    success: palette.red60,
-    error: palette.blue40,
-    warning: palette.neutral90,
-  },
-};
+function getIconColor(type: string) {
+  const iconColors = {
+    info: `light-dark(${palette.orange80}, ${palette.red30})`,
+    success: `light-dark(${palette.red60}, ${palette.red60})`,
+    error: `light-dark(${palette.blue80}, ${palette.blue40})`,
+    warning: `light-dark(${palette.neutral10}, ${palette.neutral90})`,
+  };
+  return iconColors[type as keyof typeof iconColors];
+}
 
-const dismissButtonColors = {
-  light: {
-    info: {
-      default: palette.green60,
-      hover: palette.neutral80,
-      active: palette.neutral90,
-    },
-    success: {
-      default: palette.green60,
-      hover: palette.green80,
-      active: palette.green90,
-    },
-    error: {
-      default: palette.red60,
-      hover: palette.red60,
-      active: palette.red80,
-    },
-    warning: {
-      default: palette.orange60,
-      hover: palette.orange80,
-      active: palette.orange90,
-    },
-  },
-  dark: {
+function getDismissButtonColor(type: string) {
+  const dismissButtonColors = {
     info: {
-      default: palette.neutral40,
-      hover: palette.neutral20,
-      active: palette.neutral10,
+      default: `light-dark(${palette.green60}, ${palette.neutral40})`,
+      hover: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
+      active: `light-dark(${palette.neutral90}, ${palette.neutral10})`,
     },
     success: {
-      default: palette.green30,
-      hover: palette.green20,
-      active: palette.green10,
+      default: `light-dark(${palette.green60}, ${palette.green30})`,
+      hover: `light-dark(${palette.green80}, ${palette.green20})`,
+      active: `light-dark(${palette.green90}, ${palette.green10})`,
     },
     error: {
-      default: palette.red60,
-      hover: palette.red20,
-      active: palette.red10,
+      default: `light-dark(${palette.red60}, ${palette.red60})`,
+      hover: `light-dark(${palette.red60}, ${palette.red20})`,
+      active: `light-dark(${palette.red80}, ${palette.red10})`,
     },
     warning: {
-      default: palette.orange40,
-      hover: palette.orange20,
-      active: palette.orange10,
+      default: `light-dark(${palette.orange60}, ${palette.orange40})`,
+      hover: `light-dark(${palette.orange80}, ${palette.orange20})`,
+      active: `light-dark(${palette.orange90}, ${palette.orange10})`,
     },
-  },
-};
+  };
+  return dismissButtonColors[type as keyof typeof dismissButtonColors];
+}
diff --git a/pages/badge/style-custom-types.page.tsx b/pages/badge/style-custom-types.page.tsx
index 7dfbed298d..4ed8d13ad9 100644
--- a/pages/badge/style-custom-types.page.tsx
+++ b/pages/badge/style-custom-types.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { Badge as CloudscapeBadge, SpaceBetween } from '~components';
 
@@ -31,20 +29,15 @@ interface CustomBadgeProps {
 }
 
 function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
-  const mode = useCurrentMode(useRef(document.body));
-  const background = backgrounds[mode][colorTheme];
-  const borderColor = borderColors[mode][colorTheme];
-  const borderWidth = borderWidths[colorTheme];
-  const color = colors[mode];
   return (
     <CloudscapeBadge
       style={{
         root: {
-          background,
-          borderColor,
+          background: getBackground(colorTheme),
+          borderColor: getBorderColor(colorTheme),
           borderRadius: '8px',
-          color,
-          borderWidth,
+          color: getColor(),
+          borderWidth: getBorderWidth(colorTheme),
           paddingBlock: '8px',
           paddingInline: '12px',
         },
@@ -55,54 +48,42 @@ function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
   );
 }
 
-const backgrounds = {
-  light: {
-    blue: palette.blue80,
-    critical: palette.red80,
-    high: palette.red60,
-    medium: palette.green80,
-    low: palette.teal90,
-    neutral: palette.neutral80,
-  },
-  dark: {
-    blue: palette.blue40,
-    critical: palette.red30,
-    high: palette.red30,
-    medium: palette.green20,
-    low: palette.teal20,
-    neutral: palette.neutral20,
-  },
-};
+function getBackground(colorTheme: string) {
+  const backgrounds = {
+    blue: `light-dark(${palette.blue80}, ${palette.blue40})`,
+    critical: `light-dark(${palette.red80}, ${palette.red30})`,
+    high: `light-dark(${palette.red60}, ${palette.red30})`,
+    medium: `light-dark(${palette.green80}, ${palette.green20})`,
+    low: `light-dark(${palette.teal90}, ${palette.teal20})`,
+    neutral: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
+  };
+  return backgrounds[colorTheme as keyof typeof backgrounds];
+}
 
-const colors = {
-  light: 'white',
-  dark: 'black',
-};
+function getColor() {
+  return 'light-dark(white, black)';
+}
 
-const borderColors = {
-  light: {
-    blue: palette.neutral80,
-    critical: palette.blue90,
-    high: palette.red80,
-    medium: palette.green80,
-    low: palette.neutral80,
-    neutral: palette.teal80,
-  },
-  dark: {
-    blue: palette.neutral20,
-    critical: palette.red60,
-    high: palette.red10,
-    medium: palette.green30,
-    low: palette.neutral20,
-    neutral: palette.teal40,
-  },
-};
+function getBorderColor(colorTheme: string) {
+  const borderColors = {
+    blue: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
+    critical: `light-dark(${palette.blue90}, ${palette.red60})`,
+    high: `light-dark(${palette.red80}, ${palette.red10})`,
+    medium: `light-dark(${palette.green80}, ${palette.green30})`,
+    low: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
+    neutral: `light-dark(${palette.teal80}, ${palette.teal40})`,
+  };
+  return borderColors[colorTheme as keyof typeof borderColors];
+}
 
-const borderWidths = {
-  blue: '2px',
-  critical: '4px',
-  high: '0px',
-  medium: '0px',
-  low: '0px',
-  neutral: '0px',
-};
+function getBorderWidth(colorTheme: string) {
+  const borderWidths = {
+    blue: '2px',
+    critical: '4px',
+    high: '0px',
+    medium: '0px',
+    low: '0px',
+    neutral: '0px',
+  };
+  return borderWidths[colorTheme as keyof typeof borderWidths];
+}
diff --git a/pages/button-group/style-custom-types.page.tsx b/pages/button-group/style-custom-types.page.tsx
index 1fc4b7f8bb..21cc69a344 100644
--- a/pages/button-group/style-custom-types.page.tsx
+++ b/pages/button-group/style-custom-types.page.tsx
@@ -1,9 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { ButtonGroup as CloudscapeButtonGroup, SpaceBetween } from '~components';
 
@@ -27,7 +25,6 @@ export default function CustomButtonGroupTypes() {
 }
 
 function BasicExample() {
-  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -56,26 +53,26 @@ function BasicExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].blue,
+            background: `light-dark(rgba(166, 222, 255, 0.91), rgba(64, 123, 178, 0.8))`,
             borderRadius: '20px',
             paddingBlock: '14px',
             paddingInline: '18px',
-            boxShadow: boxShadows[mode].blue,
+            boxShadow: getBoxShadow('blue'),
             focusRing: {
-              borderColor: focusRingColors[mode].blue,
+              borderColor: `light-dark(${palette.blue80}, ${palette.blue40})`,
               borderWidth: '3px',
               borderRadius: '20px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].blue.active,
-              default: itemColors[mode].blue.default,
-              hover: itemColors[mode].blue.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.blue100}, ${palette.blue10})`,
+              default: `light-dark(${palette.blue90}, ${palette.blue20})`,
+              hover: `light-dark(${palette.blue100}, ${palette.blue10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].blue,
+              borderColor: `light-dark(${palette.blue80}, ${palette.blue40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -87,7 +84,6 @@ function BasicExample() {
 }
 
 function ActionsExample() {
-  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -110,28 +106,28 @@ function ActionsExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].green,
+            background: `light-dark(rgba(152, 234, 182, 0.87), rgba(34, 197, 94, 0.3))`,
             borderRadius: '16px',
             paddingBlock: '8px',
             paddingInline: '12px',
-            boxShadow: boxShadows[mode].green,
+            boxShadow: getBoxShadow('green'),
             borderWidth: '4px',
-            borderColor: borderColors[mode].green,
+            borderColor: `light-dark(rgba(24, 146, 69, 0.4), rgba(34, 197, 94, 0.6))`,
             focusRing: {
-              borderColor: focusRingColors[mode].green,
+              borderColor: `light-dark(${palette.green60}, ${palette.green30})`,
               borderWidth: '3px',
               borderRadius: '16px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].green.active,
-              default: itemColors[mode].green.default,
-              hover: itemColors[mode].green.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.green100}, ${palette.green10})`,
+              default: `light-dark(${palette.green90}, ${palette.green20})`,
+              hover: `light-dark(${palette.green100}, ${palette.green10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].green,
+              borderColor: `light-dark(${palette.green60}, ${palette.green30})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -143,7 +139,6 @@ function ActionsExample() {
 }
 
 function FeedbackExample() {
-  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -169,26 +164,26 @@ function FeedbackExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].orange,
+            background: `light-dark(rgba(223, 146, 91, 1), rgba(204, 90, 9, 0.81))`,
             borderRadius: '50px',
             paddingBlock: '14px',
             paddingInline: '12px',
-            boxShadow: boxShadows[mode].orange,
+            boxShadow: getBoxShadow('orange'),
             focusRing: {
-              borderColor: focusRingColors[mode].orange,
+              borderColor: `light-dark(${palette.orange60}, ${palette.orange40})`,
               borderWidth: '3px',
               borderRadius: '50px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].orange.active,
-              default: itemColors[mode].orange.default,
-              hover: itemColors[mode].orange.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.orange100}, ${palette.orange10})`,
+              default: `light-dark(${palette.orange90}, ${palette.orange20})`,
+              hover: `light-dark(${palette.orange100}, ${palette.orange10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].orange,
+              borderColor: `light-dark(${palette.orange60}, ${palette.orange40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -200,7 +195,6 @@ function FeedbackExample() {
 }
 
 function MenuDropdownExample() {
-  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
       <CloudscapeButtonGroup
@@ -229,28 +223,28 @@ function MenuDropdownExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].red,
+            background: `light-dark(rgba(234, 91, 86, 0.52), rgba(210, 60, 60, 0.63))`,
             borderRadius: '18px',
             paddingBlock: '12px',
             paddingInline: '12px',
-            boxShadow: boxShadows[mode].red,
+            boxShadow: getBoxShadow('red'),
             borderWidth: '2px',
-            borderColor: borderColors[mode].red,
+            borderColor: `light-dark(rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.6))`,
             focusRing: {
-              borderColor: focusRingColors[mode].red,
+              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].red.active,
-              default: itemColors[mode].red.default,
-              hover: itemColors[mode].red.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.red100}, ${palette.red10})`,
+              default: `light-dark(${palette.red80}, ${palette.red20})`,
+              hover: `light-dark(${palette.red100}, ${palette.red10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].red,
+              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -273,28 +267,28 @@ function MenuDropdownExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].red,
+            background: `light-dark(rgba(234, 91, 86, 0.52), rgba(210, 60, 60, 0.63))`,
             borderRadius: '50%',
             paddingBlock: '12px',
             paddingInline: '12px',
-            boxShadow: boxShadows[mode].red,
+            boxShadow: getBoxShadow('red'),
             borderWidth: '2px',
-            borderColor: borderColors[mode].red,
+            borderColor: `light-dark(rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.6))`,
             focusRing: {
-              borderColor: focusRingColors[mode].red,
+              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].red.active,
-              default: itemColors[mode].red.default,
-              hover: itemColors[mode].red.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.red100}, ${palette.red10})`,
+              default: `light-dark(${palette.red80}, ${palette.red20})`,
+              hover: `light-dark(${palette.red100}, ${palette.red10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].red,
+              borderColor: `light-dark(${palette.red80}, ${palette.red30})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -306,7 +300,6 @@ function MenuDropdownExample() {
 }
 
 function FileInputExample() {
-  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -329,26 +322,26 @@ function FileInputExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].teal,
+            background: `light-dark(rgba(138, 237, 225, 0.76), rgba(9, 188, 155, 0.71))`,
             borderRadius: '24px',
             paddingBlock: '12px',
             paddingInline: '16px',
-            boxShadow: boxShadows[mode].teal,
+            boxShadow: getBoxShadow('teal'),
             focusRing: {
-              borderColor: focusRingColors[mode].teal,
+              borderColor: `light-dark(${palette.teal80}, ${palette.teal40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].teal.active,
-              default: itemColors[mode].teal.default,
-              hover: itemColors[mode].teal.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.teal100}, ${palette.teal10})`,
+              default: `light-dark(${palette.teal80}, ${palette.teal20})`,
+              hover: `light-dark(${palette.teal100}, ${palette.teal10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].teal,
+              borderColor: `light-dark(${palette.teal80}, ${palette.teal40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -360,7 +353,6 @@ function FileInputExample() {
 }
 
 function NavExample() {
-  const mode = useCurrentMode(useRef(document.body));
   return (
     <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
       <CloudscapeButtonGroup
@@ -388,26 +380,26 @@ function NavExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].nav,
+            background: `light-dark(rgba(205, 202, 202, 0.85), rgba(124, 122, 122, 1))`,
             borderRadius: '24px',
             paddingBlock: '12px',
             paddingInline: '16px',
-            boxShadow: boxShadows[mode].nav,
+            boxShadow: getBoxShadow('nav'),
             focusRing: {
-              borderColor: focusRingColors[mode].nav,
+              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].nav.active,
-              default: itemColors[mode].nav.default,
-              hover: itemColors[mode].nav.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+              default: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
+              hover: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].nav,
+              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -427,26 +419,26 @@ function NavExample() {
         ]}
         style={{
           root: {
-            background: backgrounds[mode].nav,
+            background: `light-dark(rgba(205, 202, 202, 0.85), rgba(124, 122, 122, 1))`,
             borderRadius: '24px',
             paddingBlock: '12px',
             paddingInline: '16px',
-            boxShadow: boxShadows[mode].nav,
+            boxShadow: getBoxShadow('nav'),
             focusRing: {
-              borderColor: focusRingColors[mode].nav,
+              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
           },
           item: {
             color: {
-              active: itemColors[mode].nav.active,
-              default: itemColors[mode].nav.default,
-              hover: itemColors[mode].nav.hover,
-              disabled: itemColors[mode].disabled,
+              active: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+              default: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
+              hover: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+              disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
             },
             focusRing: {
-              borderColor: focusRingColors[mode].nav,
+              borderColor: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
               borderWidth: '2px',
               borderRadius: '8px',
             },
@@ -456,140 +448,14 @@ function NavExample() {
     </div>
   );
 }
-
-const backgrounds = {
-  light: {
-    blue: 'rgba(166, 222, 255, 0.91)',
-    green: 'rgba(152, 234, 182, 0.87)',
-    orange: 'rgba(223, 146, 91, 1)',
-    red: 'rgba(234, 91, 86, 0.52)',
-    teal: 'rgba(138, 237, 225, 0.76)',
-    nav: 'rgba(205, 202, 202, 0.85)',
-  },
-  dark: {
-    blue: 'rgba(64, 123, 178, 0.8)',
-    green: 'rgba(34, 197, 94, 0.3)',
-    orange: 'rgba(204, 90, 9, 0.81)',
-    red: 'rgba(210, 60, 60, 0.63)',
-    teal: 'rgba(9, 188, 155, 0.71)',
-    nav: 'rgba(124, 122, 122, 1)',
-  },
-};
-
-const borderColors = {
-  light: {
-    green: 'rgba(24, 146, 69, 0.4)',
-    red: 'rgba(239, 68, 68, 0.4)',
-  },
-  dark: {
-    green: 'rgba(34, 197, 94, 0.6)',
-    red: 'rgba(239, 68, 68, 0.6)',
-  },
-};
-
-const boxShadows = {
-  light: {
-    blue: '0 2px 12px rgba(59, 130, 246, 0.15)',
-    green: '0 2px 12px rgba(34, 197, 94, 0.15)',
-    orange: '0 2px 12px rgba(249, 115, 22, 0.15)',
-    red: '0 2px 12px rgba(239, 68, 68, 0.15)',
-    teal: '0 2px 12px rgba(20, 184, 166, 0.15)',
-    nav: '0 4px 20px rgba(0, 0, 0, 0.1)',
-  },
-  dark: {
-    blue: '0 2px 12px rgba(59, 130, 246, 0.25)',
-    green: '0 2px 12px rgba(34, 197, 94, 0.25)',
-    orange: '0 2px 12px rgba(249, 115, 22, 0.25)',
-    red: '0 2px 12px rgba(239, 68, 68, 0.25)',
-    teal: '0 2px 12px rgba(20, 184, 166, 0.25)',
-    nav: '0 4px 20px rgba(255, 255, 255, 0.1)',
-  },
-};
-
-const focusRingColors = {
-  light: {
-    blue: palette.blue80,
-    green: palette.green60,
-    orange: palette.orange60,
-    red: palette.red80,
-    teal: palette.teal80,
-    nav: palette.neutral80,
-  },
-  dark: {
-    blue: palette.blue40,
-    green: palette.green30,
-    orange: palette.orange40,
-    red: palette.red30,
-    teal: palette.teal40,
-    nav: palette.neutral40,
-  },
-};
-
-const itemColors = {
-  light: {
-    blue: {
-      active: palette.blue100,
-      default: palette.blue90,
-      hover: palette.blue100,
-    },
-    green: {
-      active: palette.green100,
-      default: palette.green90,
-      hover: palette.green100,
-    },
-    orange: {
-      active: palette.orange100,
-      default: palette.orange90,
-      hover: palette.orange100,
-    },
-    red: {
-      active: palette.red100,
-      default: palette.red80,
-      hover: palette.red100,
-    },
-    teal: {
-      active: palette.teal100,
-      default: palette.teal80,
-      hover: palette.teal100,
-    },
-    nav: {
-      active: palette.neutral100,
-      default: palette.neutral80,
-      hover: palette.neutral100,
-    },
-    disabled: palette.neutral60,
-  },
-  dark: {
-    blue: {
-      active: palette.blue10,
-      default: palette.blue20,
-      hover: palette.blue10,
-    },
-    green: {
-      active: palette.green10,
-      default: palette.green20,
-      hover: palette.green10,
-    },
-    orange: {
-      active: palette.orange10,
-      default: palette.orange20,
-      hover: palette.orange10,
-    },
-    red: {
-      active: palette.red10,
-      default: palette.red20,
-      hover: palette.red10,
-    },
-    teal: {
-      active: palette.teal10,
-      default: palette.teal20,
-      hover: palette.teal10,
-    },
-    nav: {
-      active: palette.neutral10,
-      default: palette.neutral20,
-      hover: palette.neutral10,
-    },
-    disabled: palette.neutral40,
-  },
-};
+function getBoxShadow(colorTheme: string) {
+  const boxShadows = {
+    blue: `0 2px 12px light-dark(rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.25))`,
+    green: `0 2px 12px light-dark(rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.25))`,
+    orange: `0 2px 12px light-dark(rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.25))`,
+    red: `0 2px 12px light-dark(rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25))`,
+    teal: `0 2px 12px light-dark(rgba(20, 184, 166, 0.15),rgba(20, 184, 166, 0.25))`,
+    nav: `0 4px 20px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))`,
+  };
+  return boxShadows[colorTheme as keyof typeof boxShadows];
+}
diff --git a/pages/button/style-custom-types.page.tsx b/pages/button/style-custom-types.page.tsx
index 7d3f4e5c03..05c0c5bf6b 100644
--- a/pages/button/style-custom-types.page.tsx
+++ b/pages/button/style-custom-types.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { Button as CloudscapeButton, SpaceBetween } from '~components';
 
@@ -52,11 +50,6 @@ interface CustomButtonProps {
 }
 
 function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick, variation }: CustomButtonProps) {
-  const mode = useCurrentMode(useRef(document.body));
-  const background = backgrounds[mode][colorTheme];
-  const color = isDisabled || isLoading ? colors[mode] : colors[mode];
-  const focusRing = focusRings[mode];
-
   return (
     <CloudscapeButton
       data-testid={id}
@@ -66,14 +59,14 @@ function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick
       variant={variation}
       style={{
         root: {
-          background,
+          background: getBackground(colorTheme),
           borderRadius: '4px',
           borderWidth: '0px',
-          color,
-          focusRing,
+          color: getColor(),
+          focusRing: getFocusRing(),
           paddingBlock: '12px',
           paddingInline: '16px',
-          boxShadow: boxShadows[mode][colorTheme],
+          boxShadow: getBoxShadow(colorTheme),
         },
       }}
     >
@@ -82,162 +75,90 @@ function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick
   );
 }
 
-const backgrounds = {
-  light: {
-    default: {
-      active: palette.teal100,
-      default: palette.teal80,
-      disabled: palette.neutral40,
-      hover: palette.teal90,
-    },
-    error: {
-      active: palette.red100,
-      default: palette.red80,
-      disabled: palette.neutral40,
-      hover: palette.red90,
-    },
-    info: {
-      active: palette.blue100,
-      default: palette.blue80,
-      disabled: palette.neutral40,
-      hover: palette.blue90,
-    },
-    success: {
-      active: palette.green100,
-      default: palette.green80,
-      disabled: palette.neutral40,
-      hover: palette.green90,
-    },
-    warning: {
-      active: palette.orange100,
-      default: palette.orange80,
-      disabled: palette.neutral40,
-      hover: palette.orange90,
-    },
-  },
-  dark: {
+function getBackground(colorTheme: string) {
+  const backgrounds = {
     default: {
-      active: palette.teal10,
-      default: palette.teal30,
-      disabled: palette.neutral80,
-      hover: palette.teal20,
+      active: `light-dark(${palette.teal100}, ${palette.teal10})`,
+      default: `light-dark(${palette.teal80}, ${palette.teal30})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
     },
     error: {
-      active: palette.red10,
-      default: palette.red30,
-      disabled: palette.neutral80,
-      hover: palette.red20,
+      active: `light-dark(${palette.red100}, ${palette.red10})`,
+      default: `light-dark(${palette.red80}, ${palette.red30})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.red90}, ${palette.red20})`,
     },
     info: {
-      active: palette.blue10,
-      default: palette.blue40,
-      disabled: palette.neutral80,
-      hover: palette.blue20,
+      active: `light-dark(${palette.blue100}, ${palette.blue10})`,
+      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.blue90}, ${palette.blue20})`,
     },
     success: {
-      active: palette.green10,
-      default: palette.green30,
-      disabled: palette.neutral80,
-      hover: palette.green20,
+      active: `light-dark(${palette.green100}, ${palette.green10})`,
+      default: `light-dark(${palette.green80}, ${palette.green30})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.green90}, ${palette.green20})`,
     },
     warning: {
-      active: palette.orange10,
-      default: palette.orange40,
-      disabled: palette.neutral80,
-      hover: palette.orange20,
+      active: `light-dark(${palette.orange100}, ${palette.orange10})`,
+      default: `light-dark(${palette.orange80}, ${palette.orange40})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.orange90}, ${palette.orange20})`,
     },
-  },
-};
+  };
+  return backgrounds[colorTheme as keyof typeof backgrounds];
+}
 
-const colors = {
-  light: {
-    active: palette.neutral10,
-    default: palette.neutral10,
-    hover: palette.neutral10,
-    disabled: palette.neutral60,
-  },
-  dark: {
-    active: palette.neutral100,
-    default: palette.neutral100,
-    hover: palette.neutral100,
-    disabled: palette.neutral60,
-  },
-};
+function getColor() {
+  return {
+    active: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
+    default: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
+    hover: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
+    disabled: `light-dark(${palette.neutral60}, ${palette.neutral60})`,
+  };
+}
 
-const focusRings = {
-  light: {
-    borderColor: 'rgb(0, 64, 77)',
+function getFocusRing() {
+  return {
+    borderColor: 'light-dark(rgb(0, 64, 77), rgb(233, 249, 252))',
     borderWidth: '2px',
-  },
-  dark: {
-    borderColor: 'rgb(233, 249, 252)',
-    borderWidth: '2px',
-  },
-};
+  };
+}
 
-const boxShadows = {
-  light: {
+function getBoxShadow(colorTheme: string) {
+  const boxShadows = {
     default: {
-      active: '0 4px 8px rgba(0, 128, 128, 0.3)',
-      default: '0 2px 4px rgba(0, 128, 128, 0.2)',
+      active: `0 4px 8px light-dark(rgba(0, 128, 128, 0.3), rgba(0, 255, 255, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(0, 128, 128, 0.2), rgba(0, 255, 255, 0.3))`,
       disabled: 'none',
-      hover: '0 6px 12px rgba(0, 128, 128, 0.25)',
+      hover: `0 6px 12px light-dark(rgba(0, 128, 128, 0.25), rgba(0, 255, 255, 0.35))`,
     },
     error: {
-      active: '0 4px 8px rgba(255, 0, 0, 0.3)',
-      default: '0 2px 4px rgba(255, 0, 0, 0.2)',
+      active: `0 4px 8px light-dark(rgba(255, 0, 0, 0.3), rgba(255, 100, 100, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(255, 0, 0, 0.2), rgba(255, 100, 100, 0.3))`,
       disabled: 'none',
-      hover: '0 6px 12px rgba(255, 0, 0, 0.25)',
+      hover: `0 6px 12px light-dark(rgba(255, 0, 0, 0.25), rgba(255, 100, 100, 0.35))`,
     },
     info: {
-      active: '0 4px 8px rgba(0, 0, 255, 0.3)',
-      default: '0 2px 4px rgba(0, 0, 255, 0.2)',
+      active: `0 4px 8px light-dark(rgba(0, 0, 255, 0.3), rgba(100, 100, 255, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(0, 0, 255, 0.2), rgba(100, 100, 255, 0.3))`,
       disabled: 'none',
-      hover: '0 6px 12px rgba(0, 0, 255, 0.25)',
+      hover: `0 6px 12px light-dark(rgba(0, 0, 255, 0.25), rgba(100, 100, 255, 0.35))`,
     },
     success: {
-      active: '0 4px 8px rgba(0, 255, 0, 0.3)',
-      default: '0 2px 4px rgba(0, 255, 0, 0.2)',
+      active: `0 4px 8px light-dark(rgba(0, 255, 0, 0.3), rgba(100, 255, 100, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(0, 255, 0, 0.2), rgba(100, 255, 100, 0.3))`,
       disabled: 'none',
-      hover: '0 6px 12px rgba(0, 255, 0, 0.25)',
+      hover: `0 6px 12px light-dark(rgba(0, 255, 0, 0.25), rgba(100, 255, 100, 0.35))`,
     },
     warning: {
-      active: '0 4px 8px rgba(255, 165, 0, 0.3)',
-      default: '0 2px 4px rgba(255, 165, 0, 0.2)',
+      active: `0 4px 8px light-dark(rgba(255, 165, 0, 0.3), rgba(255, 200, 100, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(255, 165, 0, 0.2), rgba(255, 200, 100, 0.3))`,
       disabled: 'none',
-      hover: '0 6px 12px rgba(255, 165, 0, 0.25)',
+      hover: `0 6px 12px light-dark(rgba(255, 165, 0, 0.25), rgba(255, 200, 100, 0.35))`,
     },
-  },
-  dark: {
-    default: {
-      active: '0 4px 8px rgba(0, 255, 255, 0.4)',
-      default: '0 2px 4px rgba(0, 255, 255, 0.3)',
-      disabled: 'none',
-      hover: '0 6px 12px rgba(0, 255, 255, 0.35)',
-    },
-    error: {
-      active: '0 4px 8px rgba(255, 100, 100, 0.4)',
-      default: '0 2px 4px rgba(255, 100, 100, 0.3)',
-      disabled: 'none',
-      hover: '0 6px 12px rgba(255, 100, 100, 0.35)',
-    },
-    info: {
-      active: '0 4px 8px rgba(100, 100, 255, 0.4)',
-      default: '0 2px 4px rgba(100, 100, 255, 0.3)',
-      disabled: 'none',
-      hover: '0 6px 12px rgba(100, 100, 255, 0.35)',
-    },
-    success: {
-      active: '0 4px 8px rgba(100, 255, 100, 0.4)',
-      default: '0 2px 4px rgba(100, 255, 100, 0.3)',
-      disabled: 'none',
-      hover: '0 6px 12px rgba(100, 255, 100, 0.35)',
-    },
-    warning: {
-      active: '0 4px 8px rgba(255, 200, 100, 0.4)',
-      default: '0 2px 4px rgba(255, 200, 100, 0.3)',
-      disabled: 'none',
-      hover: '0 6px 12px rgba(255, 200, 100, 0.35)',
-    },
-  },
-};
+  };
+  return boxShadows[colorTheme as keyof typeof boxShadows];
+}
diff --git a/pages/button/style-permutations.page.tsx b/pages/button/style-permutations.page.tsx
index 93a06b0946..05c0c5bf6b 100644
--- a/pages/button/style-permutations.page.tsx
+++ b/pages/button/style-permutations.page.tsx
@@ -2,99 +2,163 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import Button, { ButtonProps } from '~components/button';
+import { Button as CloudscapeButton, SpaceBetween } from '~components';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
+import { palette } from '../app/themes/style-api';
 import ScreenshotArea from '../utils/screenshot-area';
 
-const permutations = createPermutations<ButtonProps>([
-  {
-    ariaLabel: ['Border Styles'],
-    children: ['Border Styles'],
-    disabled: [false, true],
-    iconName: ['add-plus'],
-    iconAlt: ['add-plus'],
-    style: [
-      {
-        root: {
-          borderColor: {
-            active: 'purple',
-            default: 'magenta',
-            hover: 'orange',
-            disabled: 'brown',
-          },
-          borderRadius: '2px',
-          borderWidth: '4px',
-        },
-      },
-    ],
-    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
-  },
-  {
-    ariaLabel: ['Background and Color Styles'],
-    children: ['Background and Color Styles'],
-    disabled: [false, true],
-    iconName: ['arrow-left'],
-    iconAlt: ['arrow-left'],
-    loading: [false, true],
-    style: [
-      {
+export default function CustomButtonTypes() {
+  return (
+    <ScreenshotArea disableAnimations={true}>
+      <h1>Custom Button Types</h1>
+
+      <SpaceBetween direction="horizontal" size="m">
+        <CustomButton colorTheme="default" variation="primary" id="default">
+          Default
+        </CustomButton>
+        <CustomButton colorTheme="success" variation="primary">
+          Success
+        </CustomButton>
+        <CustomButton colorTheme="error" variation="primary">
+          Error
+        </CustomButton>
+        <CustomButton colorTheme="info" variation="primary">
+          Info
+        </CustomButton>
+        <CustomButton colorTheme="warning" variation="primary">
+          Warning
+        </CustomButton>
+        <CustomButton colorTheme="success" variation="primary" isDisabled={true}>
+          isDisabled
+        </CustomButton>
+        <CustomButton colorTheme="success" variation="primary" isLoading={true}>
+          isLoading
+        </CustomButton>
+      </SpaceBetween>
+    </ScreenshotArea>
+  );
+}
+
+interface CustomButtonProps {
+  children?: React.ReactNode;
+  colorTheme: 'default' | 'error' | 'info' | 'warning' | 'success';
+  id?: string;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  onClick?: any;
+  variation: 'primary';
+}
+
+function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick, variation }: CustomButtonProps) {
+  return (
+    <CloudscapeButton
+      data-testid={id}
+      disabled={isDisabled}
+      loading={isLoading}
+      onClick={onClick}
+      variant={variation}
+      style={{
         root: {
-          background: {
-            active: 'brown',
-            default: 'purple',
-            hover: 'brown',
-            disabled: '#ccc',
-          },
+          background: getBackground(colorTheme),
+          borderRadius: '4px',
           borderWidth: '0px',
-          color: {
-            active: 'white',
-            default: 'white',
-            hover: 'white',
-            disabled: 'black',
-          },
-        },
-      },
-    ],
-    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
-  },
-  {
-    ariaLabel: ['Padding Styles'],
-    children: ['Padding Styles'],
-    disabled: [false, true],
-    iconName: ['delete-marker'],
-    iconAlt: ['delete-marker'],
-    iconAlign: ['left', 'right'],
-    loading: [false, true],
-    fullWidth: [false, true],
-    style: [
-      {
-        root: {
-          borderColor: {
-            active: 'black',
-            default: 'black',
-            disabled: 'black',
-            hover: 'black',
-          },
-          borderWidth: '2px',
-          borderRadius: '1px',
-          paddingBlock: '22px',
-          paddingInline: '44px',
+          color: getColor(),
+          focusRing: getFocusRing(),
+          paddingBlock: '12px',
+          paddingInline: '16px',
+          boxShadow: getBoxShadow(colorTheme),
         },
-      },
-    ],
-    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
-  },
-]);
-
-export default function ButtonStylePermutations() {
-  return (
-    <>
-      <h1>Button Style permutations</h1>
-      <ScreenshotArea disableAnimations={true}>
-        <PermutationsView permutations={permutations} render={permutation => <Button {...permutation} />} />
-      </ScreenshotArea>
-    </>
+      }}
+    >
+      <span style={{ fontSize: '16px' }}>{children}</span>
+    </CloudscapeButton>
   );
 }
+
+function getBackground(colorTheme: string) {
+  const backgrounds = {
+    default: {
+      active: `light-dark(${palette.teal100}, ${palette.teal10})`,
+      default: `light-dark(${palette.teal80}, ${palette.teal30})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
+    },
+    error: {
+      active: `light-dark(${palette.red100}, ${palette.red10})`,
+      default: `light-dark(${palette.red80}, ${palette.red30})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.red90}, ${palette.red20})`,
+    },
+    info: {
+      active: `light-dark(${palette.blue100}, ${palette.blue10})`,
+      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.blue90}, ${palette.blue20})`,
+    },
+    success: {
+      active: `light-dark(${palette.green100}, ${palette.green10})`,
+      default: `light-dark(${palette.green80}, ${palette.green30})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.green90}, ${palette.green20})`,
+    },
+    warning: {
+      active: `light-dark(${palette.orange100}, ${palette.orange10})`,
+      default: `light-dark(${palette.orange80}, ${palette.orange40})`,
+      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
+      hover: `light-dark(${palette.orange90}, ${palette.orange20})`,
+    },
+  };
+  return backgrounds[colorTheme as keyof typeof backgrounds];
+}
+
+function getColor() {
+  return {
+    active: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
+    default: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
+    hover: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
+    disabled: `light-dark(${palette.neutral60}, ${palette.neutral60})`,
+  };
+}
+
+function getFocusRing() {
+  return {
+    borderColor: 'light-dark(rgb(0, 64, 77), rgb(233, 249, 252))',
+    borderWidth: '2px',
+  };
+}
+
+function getBoxShadow(colorTheme: string) {
+  const boxShadows = {
+    default: {
+      active: `0 4px 8px light-dark(rgba(0, 128, 128, 0.3), rgba(0, 255, 255, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(0, 128, 128, 0.2), rgba(0, 255, 255, 0.3))`,
+      disabled: 'none',
+      hover: `0 6px 12px light-dark(rgba(0, 128, 128, 0.25), rgba(0, 255, 255, 0.35))`,
+    },
+    error: {
+      active: `0 4px 8px light-dark(rgba(255, 0, 0, 0.3), rgba(255, 100, 100, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(255, 0, 0, 0.2), rgba(255, 100, 100, 0.3))`,
+      disabled: 'none',
+      hover: `0 6px 12px light-dark(rgba(255, 0, 0, 0.25), rgba(255, 100, 100, 0.35))`,
+    },
+    info: {
+      active: `0 4px 8px light-dark(rgba(0, 0, 255, 0.3), rgba(100, 100, 255, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(0, 0, 255, 0.2), rgba(100, 100, 255, 0.3))`,
+      disabled: 'none',
+      hover: `0 6px 12px light-dark(rgba(0, 0, 255, 0.25), rgba(100, 100, 255, 0.35))`,
+    },
+    success: {
+      active: `0 4px 8px light-dark(rgba(0, 255, 0, 0.3), rgba(100, 255, 100, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(0, 255, 0, 0.2), rgba(100, 255, 100, 0.3))`,
+      disabled: 'none',
+      hover: `0 6px 12px light-dark(rgba(0, 255, 0, 0.25), rgba(100, 255, 100, 0.35))`,
+    },
+    warning: {
+      active: `0 4px 8px light-dark(rgba(255, 165, 0, 0.3), rgba(255, 200, 100, 0.4))`,
+      default: `0 2px 4px light-dark(rgba(255, 165, 0, 0.2), rgba(255, 200, 100, 0.3))`,
+      disabled: 'none',
+      hover: `0 6px 12px light-dark(rgba(255, 165, 0, 0.25), rgba(255, 200, 100, 0.35))`,
+    },
+  };
+  return boxShadows[colorTheme as keyof typeof boxShadows];
+}
diff --git a/pages/checkbox/style-custom.page.tsx b/pages/checkbox/style-custom.page.tsx
index a4c7b93cc0..31add54867 100644
--- a/pages/checkbox/style-custom.page.tsx
+++ b/pages/checkbox/style-custom.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { Checkbox, SpaceBetween } from '~components';
 
@@ -10,25 +8,6 @@ import { palette } from '../app/themes/style-api';
 import ScreenshotArea from '../utils/screenshot-area';
 
 export default function CustomCheckbox() {
-  const mode = useCurrentMode(useRef(document.body));
-
-  const colors = {
-    light: {
-      checked: palette.neutral100,
-      default: palette.neutral100,
-      disabled: palette.neutral60,
-      indeterminate: palette.neutral100,
-      readOnly: palette.neutral80,
-    },
-    dark: {
-      checked: palette.neutral10,
-      default: palette.neutral10,
-      disabled: palette.neutral40,
-      indeterminate: palette.neutral10,
-      readOnly: palette.neutral40,
-    },
-  };
-
   const style = {
     input: {
       fill: {
@@ -60,7 +39,13 @@ export default function CustomCheckbox() {
       },
     },
     label: {
-      color: { ...colors[mode] },
+      color: {
+        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        disabled: `light-dark(${palette.neutral60}, ${palette.neutral40})`,
+        indeterminate: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        readOnly: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+      },
     },
   };
 
diff --git a/pages/container/style-custom.page.tsx b/pages/container/style-custom.page.tsx
index ed7628761c..67bde0cc2b 100644
--- a/pages/container/style-custom.page.tsx
+++ b/pages/container/style-custom.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { Box, Container, SpaceBetween } from '~components';
 
@@ -10,8 +8,7 @@ import ScreenshotArea from '../utils/screenshot-area';
 import image43 from './images/4-3.png';
 
 export default function CustomContainer() {
-  const mode = useCurrentMode(useRef(document.body));
-  const background = mode === 'light' ? '#fcfcfc' : '#000';
+  const background = 'light-dark(#fcfcfc, #000)';
 
   return (
     <ScreenshotArea>
diff --git a/pages/link/style-custom-types.page.tsx b/pages/link/style-custom-types.page.tsx
index 3b8e5cb9a0..41935cd84c 100644
--- a/pages/link/style-custom-types.page.tsx
+++ b/pages/link/style-custom-types.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { Link as CloudscapeLink, SpaceBetween } from '~components';
 
@@ -30,9 +28,6 @@ interface CustomLinkProps {
 }
 
 function CustomLink({ children, colorTheme }: CustomLinkProps) {
-  const mode = useCurrentMode(useRef(document.body));
-  const color = colors[mode][colorTheme];
-  const focusRing = focusRings[mode];
   const linkProps = getLinkProps(colorTheme);
 
   return (
@@ -40,8 +35,8 @@ function CustomLink({ children, colorTheme }: CustomLinkProps) {
       {...linkProps}
       style={{
         root: {
-          color,
-          focusRing,
+          color: getColor(colorTheme),
+          focusRing: getFocusRing(),
         },
       }}
     >
@@ -50,75 +45,44 @@ function CustomLink({ children, colorTheme }: CustomLinkProps) {
   );
 }
 
-const colors = {
-  light: {
+function getColor(colorTheme: string) {
+  const colors = {
     secondary: {
-      active: palette.blue100,
-      default: palette.blue80,
-      hover: palette.green90,
+      active: `light-dark(${palette.blue100}, ${palette.blue20})`,
+      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
+      hover: `light-dark(${palette.green90}, ${palette.blue60})`,
     },
     primary: {
-      active: palette.blue100,
-      default: palette.blue80,
-      hover: palette.blue90,
+      active: `light-dark(${palette.blue100}, ${palette.blue20})`,
+      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
+      hover: `light-dark(${palette.blue90}, ${palette.blue40})`,
     },
     external: {
-      active: palette.red80,
-      default: palette.red60,
-      hover: palette.red60,
+      active: `light-dark(${palette.red80}, ${palette.red20})`,
+      default: `light-dark(${palette.red60}, ${palette.red30})`,
+      hover: `light-dark(${palette.red60}, ${palette.red30})`,
     },
     button: {
-      active: palette.green100,
-      default: palette.green80,
-      hover: palette.green90,
+      active: `light-dark(${palette.green100}, ${palette.green10})`,
+      default: `light-dark(${palette.green80}, ${palette.green20})`,
+      hover: `light-dark(${palette.green90}, ${palette.green60})`,
     },
     info: {
-      active: palette.teal100,
-      default: palette.teal90,
-      hover: palette.teal90,
-    },
-  },
-  dark: {
-    secondary: {
-      active: palette.blue20,
-      default: palette.blue40,
-      hover: palette.blue60,
-    },
-    primary: {
-      active: palette.blue20,
-      default: palette.blue40,
-      hover: palette.blue40,
-    },
-    external: {
-      active: palette.red20,
-      default: palette.red30,
-      hover: palette.red30,
-    },
-    button: {
-      active: palette.green10,
-      default: palette.green20,
-      hover: palette.green60,
+      active: `light-dark(${palette.teal100}, ${palette.teal10})`,
+      default: `light-dark(${palette.teal90}, ${palette.teal20})`,
+      hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
     },
-    info: {
-      active: palette.teal10,
-      default: palette.teal20,
-      hover: palette.teal20,
-    },
-  },
-};
+  };
+  return colors[colorTheme as keyof typeof colors];
+}
 
-const focusRings = {
-  light: {
-    borderColor: palette.blue80,
+function getFocusRing() {
+  return {
+    borderColor: `light-dark(${palette.blue80}, ${palette.red60})`,
     borderRadius: '4px',
     borderWidth: '2px',
-  },
-  dark: {
-    borderColor: palette.red60,
-    borderRadius: '4px',
-    borderWidth: '2px',
-  },
-};
+  };
+}
 
 function getLinkProps(colorTheme: string) {
   const baseProps = {
diff --git a/pages/radio-group/style-custom.page.tsx b/pages/radio-group/style-custom.page.tsx
index 8b2e5f5e81..29ff870930 100644
--- a/pages/radio-group/style-custom.page.tsx
+++ b/pages/radio-group/style-custom.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { RadioGroup, SpaceBetween } from '~components';
 
@@ -10,8 +8,6 @@ import { palette } from '../app/themes/style-api';
 import ScreenshotArea from '../utils/screenshot-area';
 
 export default function CustomRadio() {
-  const mode = useCurrentMode(useRef(document.body));
-
   const items = [
     {
       value: 'first',
@@ -31,21 +27,6 @@ export default function CustomRadio() {
     },
   ];
 
-  const colors = {
-    light: {
-      checked: palette.neutral100,
-      default: palette.neutral100,
-      disabled: palette.neutral80,
-      readOnly: palette.neutral80,
-    },
-    dark: {
-      checked: palette.neutral10,
-      default: palette.neutral10,
-      disabled: palette.neutral40,
-      readOnly: palette.neutral40,
-    },
-  };
-
   const style = {
     input: {
       stroke: {
@@ -73,10 +54,20 @@ export default function CustomRadio() {
       },
     },
     label: {
-      color: { ...colors[mode] },
+      color: {
+        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        disabled: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+        readOnly: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+      },
     },
     description: {
-      color: { ...colors[mode] },
+      color: {
+        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        disabled: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+        readOnly: `light-dark(${palette.neutral80}, ${palette.neutral40})`,
+      },
     },
   };
 
diff --git a/pages/toggle/style-custom.page.tsx b/pages/toggle/style-custom.page.tsx
index fca150ea6e..eee1207858 100644
--- a/pages/toggle/style-custom.page.tsx
+++ b/pages/toggle/style-custom.page.tsx
@@ -1,8 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-
-import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
+import React from 'react';
 
 import { SpaceBetween, Toggle } from '~components';
 
@@ -10,23 +8,6 @@ import { palette } from '../app/themes/style-api';
 import ScreenshotArea from '../utils/screenshot-area';
 
 export default function CustomToggle() {
-  const mode = useCurrentMode(useRef(document.body));
-
-  const colors = {
-    light: {
-      checked: palette.neutral100,
-      default: palette.neutral100,
-      disabled: palette.neutral90,
-      readOnly: palette.neutral100,
-    },
-    dark: {
-      checked: palette.neutral10,
-      default: palette.neutral10,
-      disabled: palette.neutral40,
-      readOnly: palette.neutral10,
-    },
-  };
-
   const style = {
     input: {
       background: {
@@ -50,7 +31,12 @@ export default function CustomToggle() {
       },
     },
     label: {
-      color: { ...colors[mode] },
+      color: {
+        checked: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        default: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+        disabled: `light-dark(${palette.neutral90}, ${palette.neutral40})`,
+        readOnly: `light-dark(${palette.neutral100}, ${palette.neutral10})`,
+      },
     },
   };
 

From 344a5bbcc76c8285b4952516f6fe3c3dc3339151 Mon Sep 17 00:00:00 2001
From: Georgii Lobko <globko@amazon.de>
Date: Wed, 29 Oct 2025 15:16:41 +0100
Subject: [PATCH 2/2] chore: Revert changes form button style-permutations page

---
 pages/button/style-permutations.page.tsx | 240 +++++++++--------------
 1 file changed, 88 insertions(+), 152 deletions(-)

diff --git a/pages/button/style-permutations.page.tsx b/pages/button/style-permutations.page.tsx
index 05c0c5bf6b..93a06b0946 100644
--- a/pages/button/style-permutations.page.tsx
+++ b/pages/button/style-permutations.page.tsx
@@ -2,163 +2,99 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { Button as CloudscapeButton, SpaceBetween } from '~components';
+import Button, { ButtonProps } from '~components/button';
 
-import { palette } from '../app/themes/style-api';
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
-export default function CustomButtonTypes() {
-  return (
-    <ScreenshotArea disableAnimations={true}>
-      <h1>Custom Button Types</h1>
-
-      <SpaceBetween direction="horizontal" size="m">
-        <CustomButton colorTheme="default" variation="primary" id="default">
-          Default
-        </CustomButton>
-        <CustomButton colorTheme="success" variation="primary">
-          Success
-        </CustomButton>
-        <CustomButton colorTheme="error" variation="primary">
-          Error
-        </CustomButton>
-        <CustomButton colorTheme="info" variation="primary">
-          Info
-        </CustomButton>
-        <CustomButton colorTheme="warning" variation="primary">
-          Warning
-        </CustomButton>
-        <CustomButton colorTheme="success" variation="primary" isDisabled={true}>
-          isDisabled
-        </CustomButton>
-        <CustomButton colorTheme="success" variation="primary" isLoading={true}>
-          isLoading
-        </CustomButton>
-      </SpaceBetween>
-    </ScreenshotArea>
-  );
-}
-
-interface CustomButtonProps {
-  children?: React.ReactNode;
-  colorTheme: 'default' | 'error' | 'info' | 'warning' | 'success';
-  id?: string;
-  isDisabled?: boolean;
-  isLoading?: boolean;
-  onClick?: any;
-  variation: 'primary';
-}
-
-function CustomButton({ children, colorTheme, id, isDisabled, isLoading, onClick, variation }: CustomButtonProps) {
-  return (
-    <CloudscapeButton
-      data-testid={id}
-      disabled={isDisabled}
-      loading={isLoading}
-      onClick={onClick}
-      variant={variation}
-      style={{
+const permutations = createPermutations<ButtonProps>([
+  {
+    ariaLabel: ['Border Styles'],
+    children: ['Border Styles'],
+    disabled: [false, true],
+    iconName: ['add-plus'],
+    iconAlt: ['add-plus'],
+    style: [
+      {
         root: {
-          background: getBackground(colorTheme),
-          borderRadius: '4px',
+          borderColor: {
+            active: 'purple',
+            default: 'magenta',
+            hover: 'orange',
+            disabled: 'brown',
+          },
+          borderRadius: '2px',
+          borderWidth: '4px',
+        },
+      },
+    ],
+    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
+  },
+  {
+    ariaLabel: ['Background and Color Styles'],
+    children: ['Background and Color Styles'],
+    disabled: [false, true],
+    iconName: ['arrow-left'],
+    iconAlt: ['arrow-left'],
+    loading: [false, true],
+    style: [
+      {
+        root: {
+          background: {
+            active: 'brown',
+            default: 'purple',
+            hover: 'brown',
+            disabled: '#ccc',
+          },
           borderWidth: '0px',
-          color: getColor(),
-          focusRing: getFocusRing(),
-          paddingBlock: '12px',
-          paddingInline: '16px',
-          boxShadow: getBoxShadow(colorTheme),
+          color: {
+            active: 'white',
+            default: 'white',
+            hover: 'white',
+            disabled: 'black',
+          },
         },
-      }}
-    >
-      <span style={{ fontSize: '16px' }}>{children}</span>
-    </CloudscapeButton>
-  );
-}
-
-function getBackground(colorTheme: string) {
-  const backgrounds = {
-    default: {
-      active: `light-dark(${palette.teal100}, ${palette.teal10})`,
-      default: `light-dark(${palette.teal80}, ${palette.teal30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.teal90}, ${palette.teal20})`,
-    },
-    error: {
-      active: `light-dark(${palette.red100}, ${palette.red10})`,
-      default: `light-dark(${palette.red80}, ${palette.red30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.red90}, ${palette.red20})`,
-    },
-    info: {
-      active: `light-dark(${palette.blue100}, ${palette.blue10})`,
-      default: `light-dark(${palette.blue80}, ${palette.blue40})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.blue90}, ${palette.blue20})`,
-    },
-    success: {
-      active: `light-dark(${palette.green100}, ${palette.green10})`,
-      default: `light-dark(${palette.green80}, ${palette.green30})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.green90}, ${palette.green20})`,
-    },
-    warning: {
-      active: `light-dark(${palette.orange100}, ${palette.orange10})`,
-      default: `light-dark(${palette.orange80}, ${palette.orange40})`,
-      disabled: `light-dark(${palette.neutral40}, ${palette.neutral80})`,
-      hover: `light-dark(${palette.orange90}, ${palette.orange20})`,
-    },
-  };
-  return backgrounds[colorTheme as keyof typeof backgrounds];
-}
-
-function getColor() {
-  return {
-    active: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    default: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    hover: `light-dark(${palette.neutral10}, ${palette.neutral100})`,
-    disabled: `light-dark(${palette.neutral60}, ${palette.neutral60})`,
-  };
-}
-
-function getFocusRing() {
-  return {
-    borderColor: 'light-dark(rgb(0, 64, 77), rgb(233, 249, 252))',
-    borderWidth: '2px',
-  };
-}
+      },
+    ],
+    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
+  },
+  {
+    ariaLabel: ['Padding Styles'],
+    children: ['Padding Styles'],
+    disabled: [false, true],
+    iconName: ['delete-marker'],
+    iconAlt: ['delete-marker'],
+    iconAlign: ['left', 'right'],
+    loading: [false, true],
+    fullWidth: [false, true],
+    style: [
+      {
+        root: {
+          borderColor: {
+            active: 'black',
+            default: 'black',
+            disabled: 'black',
+            hover: 'black',
+          },
+          borderWidth: '2px',
+          borderRadius: '1px',
+          paddingBlock: '22px',
+          paddingInline: '44px',
+        },
+      },
+    ],
+    variant: ['primary', 'normal', 'link', 'icon', 'inline-icon', 'inline-link'],
+  },
+]);
 
-function getBoxShadow(colorTheme: string) {
-  const boxShadows = {
-    default: {
-      active: `0 4px 8px light-dark(rgba(0, 128, 128, 0.3), rgba(0, 255, 255, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 128, 128, 0.2), rgba(0, 255, 255, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 128, 128, 0.25), rgba(0, 255, 255, 0.35))`,
-    },
-    error: {
-      active: `0 4px 8px light-dark(rgba(255, 0, 0, 0.3), rgba(255, 100, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(255, 0, 0, 0.2), rgba(255, 100, 100, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(255, 0, 0, 0.25), rgba(255, 100, 100, 0.35))`,
-    },
-    info: {
-      active: `0 4px 8px light-dark(rgba(0, 0, 255, 0.3), rgba(100, 100, 255, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 0, 255, 0.2), rgba(100, 100, 255, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 0, 255, 0.25), rgba(100, 100, 255, 0.35))`,
-    },
-    success: {
-      active: `0 4px 8px light-dark(rgba(0, 255, 0, 0.3), rgba(100, 255, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(0, 255, 0, 0.2), rgba(100, 255, 100, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(0, 255, 0, 0.25), rgba(100, 255, 100, 0.35))`,
-    },
-    warning: {
-      active: `0 4px 8px light-dark(rgba(255, 165, 0, 0.3), rgba(255, 200, 100, 0.4))`,
-      default: `0 2px 4px light-dark(rgba(255, 165, 0, 0.2), rgba(255, 200, 100, 0.3))`,
-      disabled: 'none',
-      hover: `0 6px 12px light-dark(rgba(255, 165, 0, 0.25), rgba(255, 200, 100, 0.35))`,
-    },
-  };
-  return boxShadows[colorTheme as keyof typeof boxShadows];
+export default function ButtonStylePermutations() {
+  return (
+    <>
+      <h1>Button Style permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView permutations={permutations} render={permutation => <Button {...permutation} />} />
+      </ScreenshotArea>
+    </>
+  );
 }