chore: Update custom dev pages to use light-dark method

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,26 +74,22 @@ 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',
             borderWidth: '2px',
           },
         },
         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];
+}

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];
+}