feat(button): add dark mode for the text button

freenowtech · Aug 24, 2023 · fb0ca36 · fb0ca36
1 parent 38e3688
commit fb0ca36
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 60 deletions.
diff --git a/src/components/Button/TextButton.tsx b/src/components/Button/TextButton.tsx
@@ -8,10 +8,6 @@ import { getSemanticValue } from '../../utils/cssVariables';
 type Variant = 'default' | 'danger';
 
 interface TextButtonProps extends BaseButtonProps {
-    /**
-     * adjust color for display on a dark background
-     */
-    inverted?: boolean;
     /**
      * Define base colors
      */
@@ -51,43 +47,10 @@ const variantStyles = variant<ComponentSemanticTokens, Variant>({
     }
 });
 
-const invertedVariantStyles = variant<ComponentSemanticTokens, Variant>({
-    variants: {
-        default: {
-            color: getSemanticValue('foreground-on-background-primary'),
-            fill: getSemanticValue('foreground-on-background-primary'),
-
-            '&:hover': {
-                color: getSemanticValue('foreground-neutral-default'),
-                fill: getSemanticValue('foreground-neutral-default')
-            },
-
-            '&:disabled': {
-                color: getSemanticValue('foreground-disabled'),
-                fill: getSemanticValue('foreground-disabled')
-            }
-        },
-        danger: {
-            color: getSemanticValue('foreground-danger-default'),
-            fill: getSemanticValue('foreground-danger-default'),
-
-            '&:hover': {
-                color: getSemanticValue('foreground-danger-emphasized'),
-                fill: getSemanticValue('foreground-danger-emphasized')
-            },
-
-            '&:disabled': {
-                color: getSemanticValue('foreground-disabled'),
-                fill: getSemanticValue('foreground-disabled')
-            }
-        }
-    }
-});
-
 const TextButton = styled(BaseButton)<TextButtonProps>`
     transition: color 200ms, fill 200ms;
 
-    ${props => (props.inverted ? invertedVariantStyles(props) : variantStyles(props))};
+    ${variantStyles};
 `;
 
 TextButton.defaultProps = {

diff --git a/src/components/Button/docs/Button.stories.tsx b/src/components/Button/docs/Button.stories.tsx
@@ -2,7 +2,6 @@ import { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 import { Button } from '../Button';
 import TrashBinIcon from '../../../icons/actions/TrashBinIcon';
-import { onDarkBackground } from '../../../docs/parameters';
 
 const meta: Meta = {
     title: 'Components/Button/Button',

diff --git a/src/components/Button/docs/TextButton.stories.tsx b/src/components/Button/docs/TextButton.stories.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { TextButton } from '../TextButton';
-import { onDarkBackground } from '../../../docs/parameters';
 
 const meta: Meta = {
     title: 'Components/Button/TextButton',
@@ -71,12 +69,3 @@ export const Small: Story = {
         size: 'small'
     }
 };
-
-export const Inverted: Story = {
-    args: {
-        inverted: true
-    },
-    parameters: {
-        ...onDarkBackground
-    }
-};
diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts
@@ -208,14 +208,22 @@ export const SemanticColorsDarkSchema = {
     transparent: Colors.transparent,
     foreground: {
         primary: Colors.white,
+        accent: {
+            default: Colors.white,
+            emphasized: Colors.blue.primary[200]
+        },
         'on-background': {
             primary: Colors.blue.secondary[900],
             disabled: Colors.blue.primary[350],
             accent: Colors.white,
             neutral: Colors.blue.primary[900],
             danger: Colors.white
         },
-        disabled: Colors.blue.primary[350]
+        disabled: Colors.blue.primary[350],
+        danger: {
+            default: Colors.orange[900],
+            emphasized: Colors.orange[1000]
+        }
     },
     background: {
         page: Colors.blue.primary[900],

diff --git a/src/essentials/Colors/RedesignedColors.ts b/src/essentials/Colors/RedesignedColors.ts
@@ -194,3 +194,56 @@ export const SemanticColors = {
         default: Colors.neutral[200]
     }
 } satisfies SemanticColorsSchema;
+
+export const SemanticColorsDarkSchema = {
+    black: Colors.black,
+    white: Colors.white,
+    transparent: Colors.transparent,
+    foreground: {
+        primary: Colors.white,
+        accent: {
+            default: Colors.white,
+            emphasized: Colors.neutral[350]
+        },
+        'on-background': {
+            primary: Colors.primary[900],
+            disabled: Colors.neutral[350],
+            accent: Colors.primary[900],
+            neutral: Colors.neutral[900],
+            danger: Colors.white
+        },
+        disabled: Colors.neutral[550],
+        danger: {
+            default: Colors.red[350],
+            emphasized: Colors.primary[50]
+        }
+    },
+    background: {
+        page: Colors.neutral[900],
+        element: {
+            primary: {
+                default: Colors.neutral[50],
+                emphasized: Colors.white
+            },
+            disabled: {
+                faded: Colors.transparent, // page color
+                default: Colors.neutral[550]
+            },
+            neutral: {
+                default: Colors.transparent, // or as Page
+                emphasized: Colors.white
+            },
+            danger: {
+                faded: Colors.primary[50],
+                default: Colors.red[900],
+                emphasized: Colors.red[1000]
+            }
+        }
+    },
+    border: {
+        neutral: {
+            default: Colors.white
+        },
+        disabled: Colors.neutral[550]
+    }
+} // satisfies SemanticColorsSchema;
diff --git a/src/essentials/Colors/globalStyles.ts b/src/essentials/Colors/globalStyles.ts
@@ -2,28 +2,33 @@ import { createGlobalStyle } from 'styled-components';
 import {
     Colors as ClassicBrandColors,
     SemanticColors as ClassicSemanticColors,
-    SemanticColorsDarkSchema as ClassicDarkSemanticColors
+    SemanticColorsDarkSchema as ClassicSemanticColorsDark
 } from './Colors';
-import { Colors as ModernBrandColors, SemanticColors as ModernSemanticColors } from './RedesignedColors';
+import {
+    Colors as ModernBrandColors,
+    SemanticColors as ModernSemanticColors,
+    SemanticColorsDarkSchema as ModernSemanticColorsDark
+} from './RedesignedColors';
 import { generateBareTierCssVariables, generateSemanticTierCssVariables } from '../../utils/cssVariables';
 
 export const ClassicColors = createGlobalStyle`
   :root {
-    color-scheme: dark light;
+    color-scheme: light dark;
     ${generateBareTierCssVariables(ClassicBrandColors)}
     ${generateSemanticTierCssVariables(ClassicSemanticColors)}
-    
-    :root .dark-theme {
-      ${generateSemanticTierCssVariables(ClassicDarkSemanticColors)}
-    }
+
+  }
+
+  .dark-theme {
+    ${generateSemanticTierCssVariables(ClassicSemanticColorsDark)}
   }
 
   @media (prefers-color-scheme: dark) {
     :root {
-      ${generateSemanticTierCssVariables(ClassicDarkSemanticColors)}
+      ${generateSemanticTierCssVariables(ClassicSemanticColorsDark)}
     }
 
-    :root .light-theme {
+    .light-theme {
       ${generateBareTierCssVariables(ClassicBrandColors)}
       ${generateSemanticTierCssVariables(ClassicSemanticColors)}
     }
@@ -32,7 +37,23 @@ export const ClassicColors = createGlobalStyle`
 
 export const ModernColors = createGlobalStyle`
   :root {
+    color-scheme: light dark;
     ${generateBareTierCssVariables(ModernBrandColors)}
     ${generateSemanticTierCssVariables(ModernSemanticColors)}
   }
+
+  .dark-theme {
+    ${generateSemanticTierCssVariables(ModernSemanticColorsDark)}
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      ${generateSemanticTierCssVariables(ModernSemanticColorsDark)}
+    }
+
+    .light-theme {
+      ${generateBareTierCssVariables(ModernBrandColors)}
+      ${generateSemanticTierCssVariables(ModernSemanticColors)}
+    }
+  }
 `;