feat(button): add dark mode for the button

.storybook/preview.tsx

@@ -43,8 +43,9 @@ export const preview: Preview = {
  }
  },
  backgrounds: {
- default: 'light',
+ default: 'auto',
  values: [
+ { name: 'auto', value: getSemanticValue('background-page') },
  { name: 'light', value: getSemanticValue('background-surface-neutral-default') },
  { name: 'dark', value: getSemanticValue('background-surface-primary-default') }
  ]

src/components/Button/Button.tsx

@@ -9,10 +9,6 @@ import { ComponentSemanticTokens } from '../../essentials/Colors/types';
 type Variant = 'primary' | 'secondary' | 'danger';
 
 interface ButtonProps extends BaseButtonProps, ButtonStyleProps {
- /**
- * Adjust colors for display on a dark background
- */
- inverted?: boolean;
  /**
  * Define style of the button component, defaults to primary
  */
@@ -27,10 +23,12 @@ const variantStyles = variant<ComponentSemanticTokens, Variant>({
  background: getSemanticValue('background-element-primary-default'),
 
  '&:hover': {
+ color: getSemanticValue('foreground-on-background-accent'),
  background: getSemanticValue('background-element-primary-emphasized')
  },
 
  '&:disabled': {
+ color: getSemanticValue('foreground-on-background-disabled'),
  background: getSemanticValue('background-element-disabled-default')
  }
  },
@@ -41,6 +39,7 @@ const variantStyles = variant<ComponentSemanticTokens, Variant>({
  borderColor: getSemanticValue('border-neutral-default'),
 
  '&:hover': {
+ color: getSemanticValue('foreground-on-background-neutral'),
  background: getSemanticValue('background-element-neutral-emphasized')
  },
 
@@ -68,66 +67,10 @@ const variantStyles = variant<ComponentSemanticTokens, Variant>({
  }
 });
 
-const invertedVariantStyles = variant<ComponentSemanticTokens, Variant>({
- variants: {
- primary: {
- color: getSemanticValue('foreground-accent-default'),
- fill: getSemanticValue('foreground-accent-default'),
- background: getSemanticValue('background-element-neutral-default'),
-
- '&:hover': {
- color: getSemanticValue('foreground-on-background-accent'),
- fill: getSemanticValue('foreground-on-background-accent'),
- background: getSemanticValue('background-element-accent-emphasized'),
- borderColor: getSemanticValue('border-neutral-default')
- },
- '&:disabled': {
- color: getSemanticValue('foreground-disabled'),
- fill: getSemanticValue('foreground-disabled'),
- background: getSemanticValue('background-element-disabled-emphasized'),
- borderColor: getSemanticValue('border-disabled')
- }
- },
- secondary: {
- color: getSemanticValue('foreground-on-background-primary'),
- fill: getSemanticValue('foreground-on-background-primary'),
- background: getSemanticValue('transparent'),
- borderColor: getSemanticValue('border-neutral-faded'),
-
- '&:hover': {
- color: getSemanticValue('foreground-primary'),
- fill: getSemanticValue('foreground-primary'),
- background: getSemanticValue('background-element-neutral-default')
- },
- '&:disabled': {
- color: getSemanticValue('foreground-disabled'),
- fill: getSemanticValue('foreground-disabled'),
- background: getSemanticValue('transparent'),
- borderColor: getSemanticValue('border-disabled')
- }
- },
- danger: {
- color: getSemanticValue('foreground-on-background-danger'),
- fill: getSemanticValue('foreground-on-background-danger'),
- background: getSemanticValue('background-element-danger-default'),
-
- '&:hover': {
- background: getSemanticValue('background-element-danger-emphasized')
- },
- '&:disabled': {
- color: getSemanticValue('foreground-disabled'),
- fill: getSemanticValue('foreground-disabled'),
- background: getSemanticValue('background-element-disabled-default'),
- borderColor: getSemanticValue('border-disabled')
- }
- }
- }
-});
-
 const Button = styled(BaseButton).attrs({ theme })<ButtonProps>`
  transition: background ease 200ms, border-color ease 200ms, color ease 200ms, fill ease 200ms;
 
- ${p => (p.inverted ? invertedVariantStyles : variantStyles)};
+ ${variantStyles};
 `;
 
 Button.defaultProps = {

src/components/Button/docs/Button.stories.tsx

@@ -79,15 +79,6 @@ export const Small: Story = {
  }
 };
 
-export const Inverted: Story = {
- args: {
- inverted: true
- },
- parameters: {
- ...onDarkBackground
- }
-};
-
 export const WithIcon: Story = {
  args: {
  children: (

src/components/Button/docs/Button.storybook.mdx

@@ -24,6 +24,10 @@ Use the secondary button for less important actions and in multi button scenario
 
 ## Icons
 
+<ColorMode dark>
+ <Button>Button</Button>
+</ColorMode>
+
 Sometimes an icon can help clarify the usage of the button. The recommended sizes for the icons:
 
 - `<IconName size={20} />` — 20px for regular button

src/essentials/Colors/Colors.ts

@@ -67,7 +67,9 @@ export const SemanticColors = {
  info: Colors.white,
  success: Colors.white,
  warning: Colors.blue.primary[900],
- danger: Colors.white
+ danger: Colors.white,
+ disabled: Colors.white,
+ neutral: Colors.blue.primary[900]
  },
  disabled: Colors.blue.primary[200],
  focus: Colors.blue.secondary[900],
@@ -199,3 +201,47 @@ export const SemanticColors = {
  default: Colors.blue.primary[200]
  }
 } satisfies SemanticColorsSchema;
+
+export const SemanticColorsDarkSchema = {
+ black: Colors.black,
+ white: Colors.white,
+ transparent: Colors.transparent,
+ foreground: {
+ primary: Colors.white,
+ '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],
+ },
+ background: {
+ page: Colors.blue.primary[900],
+ element: {
+ primary: {
+ default: Colors.white,
+ emphasized: Colors.blue.secondary[900]
+ },
+ disabled: {
+ faded: Colors.transparent, // page color
+ default: Colors.blue.primary[550],
+ },
+ neutral: {
+ default: Colors.transparent, // or as Page
+ emphasized: Colors.white
+ },
+ danger: {
+ default: Colors.orange[900],
+ emphasized: Colors.orange[1000]
+ }
+ }
+ },
+ border: {
+ neutral: {
+ default: Colors.white,
+ },
+ disabled: Colors.blue.primary[550],
+ }
+} //satisfies SemanticColorsSchema;

src/essentials/Colors/RedesignedColors.ts

@@ -62,7 +62,9 @@ export const SemanticColors = {
  info: Colors.white,
  success: Colors.white,
  warning: Colors.neutral[900],
- danger: Colors.white
+ danger: Colors.white,
+ disabled: Colors.white,
+ neutral: Colors.neutral[900]
  },
  neutral: {
  faded: Colors.neutral[200],

src/essentials/Colors/globalStyles.ts

@@ -1,12 +1,20 @@
 import { createGlobalStyle } from 'styled-components';
-import { Colors as ClassicBrandColors, SemanticColors as ClassicSemanticColors } from './Colors';
+import { Colors as ClassicBrandColors, SemanticColors as ClassicSemanticColors, SemanticColorsDarkSchema as ClassicDarkSemanticColors } from './Colors';
 import { Colors as ModernBrandColors, SemanticColors as ModernSemanticColors } from './RedesignedColors';
 import { generateBareTierCssVariables, generateSemanticTierCssVariables } from '../../utils/cssVariables';
 
 export const ClassicColors = createGlobalStyle`
  :root {
+ color-scheme: dark light;
  ${generateBareTierCssVariables(ClassicBrandColors)}
  ${generateSemanticTierCssVariables(ClassicSemanticColors)}
+
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ ${generateSemanticTierCssVariables(ClassicDarkSemanticColors)}
+ }
  }
 `;
 

src/essentials/Colors/types.ts

@@ -2,7 +2,7 @@ import { Join, Leaves } from '../../utils/types';
 
 export type HSL = `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
 
-export type Color = HSL;
+export type Color = HSL | 'transparent';
 
 export interface SemanticColorsSchema {
  transparent: 'transparent';
@@ -121,6 +121,8 @@ export interface SemanticColorsSchema {
  success: Color;
  warning: Color;
  danger: Color;
+ disabled: Color;
+ neutral: Color;
  };
  neutral: {
  faded: Color;