revert: Update custom dev pages to use light-dark method (#3896) (#3963)

Author: georgylobko

pages/alert/style-custom-types.page.tsx

@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Alert as CloudscapeAlert, Button, SpaceBetween } from '~components';
 
@@ -66,6 +68,12 @@ 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}
@@ -74,22 +82,26 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
       i18nStrings={i18nStrings}
       style={{
         root: {
-          background: getBackground(type),
-          borderColor: getBorderColor(type),
+          background,
+          borderColor,
           borderRadius: '8px',
-          borderWidth: getBorderWidth(type),
-          color: getColor(),
+          borderWidth,
+          color,
           focusRing: {
             borderColor: palette.red60,
             borderRadius: '4px',
             borderWidth: '2px',
           },
         },
         icon: {
-          color: getIconColor(type),
+          color: iconColor,
         },
         dismissButton: {
-          color: getDismissButtonColor(type),
+          color: {
+            default: dismissButtonColors[mode][type].default,
+            hover: dismissButtonColors[mode][type].hover,
+            active: dismissButtonColors[mode][type].active,
+          },
           focusRing: {
             borderColor: palette.red60,
             borderRadius: '4px',
@@ -103,72 +115,106 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
   );
 }
 
-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 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 getColor() {
-  return `light-dark(${palette.neutral10}, ${palette.neutral100})`;
-}
+const colors = {
+  light: palette.neutral10,
+  dark: palette.neutral100,
+};
 
-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 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 getBorderWidth(type: string) {
-  const borderWidths = {
-    info: '4px',
-    success: '0px',
-    error: '6px',
-    warning: '0px',
-  };
-  return borderWidths[type as keyof typeof borderWidths];
-}
+const borderWidths = {
+  info: '4px',
+  success: '0px',
+  error: '6px',
+  warning: '0px',
+};
 
-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 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 getDismissButtonColor(type: string) {
-  const dismissButtonColors = {
+const dismissButtonColors = {
+  light: {
     info: {
-      default: `light-dark(${palette.green60}, ${palette.neutral40})`,
-      hover: `light-dark(${palette.neutral80}, ${palette.neutral20})`,
-      active: `light-dark(${palette.neutral90}, ${palette.neutral10})`,
+      default: palette.green60,
+      hover: palette.neutral80,
+      active: palette.neutral90,
     },
     success: {
-      default: `light-dark(${palette.green60}, ${palette.green30})`,
-      hover: `light-dark(${palette.green80}, ${palette.green20})`,
-      active: `light-dark(${palette.green90}, ${palette.green10})`,
+      default: palette.green60,
+      hover: palette.green80,
+      active: palette.green90,
     },
     error: {
-      default: `light-dark(${palette.red60}, ${palette.red60})`,
-      hover: `light-dark(${palette.red60}, ${palette.red20})`,
-      active: `light-dark(${palette.red80}, ${palette.red10})`,
+      default: palette.red60,
+      hover: palette.red60,
+      active: palette.red80,
     },
     warning: {
-      default: `light-dark(${palette.orange60}, ${palette.orange40})`,
-      hover: `light-dark(${palette.orange80}, ${palette.orange20})`,
-      active: `light-dark(${palette.orange90}, ${palette.orange10})`,
+      default: palette.orange60,
+      hover: palette.orange80,
+      active: palette.orange90,
     },
-  };
-  return dismissButtonColors[type as keyof typeof dismissButtonColors];
-}
+  },
+  dark: {
+    info: {
+      default: palette.neutral40,
+      hover: palette.neutral20,
+      active: palette.neutral10,
+    },
+    success: {
+      default: palette.green30,
+      hover: palette.green20,
+      active: palette.green10,
+    },
+    error: {
+      default: palette.red60,
+      hover: palette.red20,
+      active: palette.red10,
+    },
+    warning: {
+      default: palette.orange40,
+      hover: palette.orange20,
+      active: palette.orange10,
+    },
+  },
+};

pages/badge/style-custom-types.page.tsx

@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
+
+import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { Badge as CloudscapeBadge, SpaceBetween } from '~components';
 
@@ -29,15 +31,20 @@ 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: getBackground(colorTheme),
-          borderColor: getBorderColor(colorTheme),
+          background,
+          borderColor,
           borderRadius: '8px',
-          color: getColor(),
-          borderWidth: getBorderWidth(colorTheme),
+          color,
+          borderWidth,
           paddingBlock: '8px',
           paddingInline: '12px',
         },
@@ -48,42 +55,54 @@ function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
   );
 }
 
-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 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 getColor() {
-  return 'light-dark(white, black)';
-}
+const colors = {
+  light: 'white',
+  dark: 'black',
+};
 
-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 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 getBorderWidth(colorTheme: string) {
-  const borderWidths = {
-    blue: '2px',
-    critical: '4px',
-    high: '0px',
-    medium: '0px',
-    low: '0px',
-    neutral: '0px',
-  };
-  return borderWidths[colorTheme as keyof typeof borderWidths];
-}
+const borderWidths = {
+  blue: '2px',
+  critical: '4px',
+  high: '0px',
+  medium: '0px',
+  low: '0px',
+  neutral: '0px',
+};