[LW 9606] Add dark mode to stories (#1122)

* feat: add dark mode to stories

* feat: add missing core storybook theme styles

Author: Lucas

packages/core/.storybook/index.scss

@@ -0,0 +1,49 @@
+@import './theme.scss';
+
+:global(.ant-radio:hover .ant-radio-inner) {
+  border-color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)) !important;
+  background: var(--color-white, var(--dark-mode-grey));
+}
+:global(.ant-tooltip) {
+  color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)) !important;
+  font-weight: 400 !important;
+  font-size: var(--bodySmall) !important;
+}
+:global(.ant-tooltip-inner) {
+  background-color: var(--dark-mode-mid-grey, #ffffff) !important;
+  border-radius: 11px !important;
+  color: var(--dark-mode-light-grey, --light-mode-dark-grey) !important;
+  padding: size_unit(1) size_unit(2) !important;
+}
+:global(.ant-tooltip-arrow-content) {
+  background-color: var(--dark-mode-mid-grey, #ffffff) !important;
+}
+
+:global(.ant-tooltip-arrow-content:before) {
+  background: var(--dark-mode-mid-grey, #ffffff) !important;
+}
+
+:global(.ant-modal-mask) {
+  background: var(--light-mode-black, var(--dark-mode-bg-black)) !important;
+  opacity: 0.9;
+}
+
+:global(.ant-drawer.ant-drawer-open .ant-drawer-mask) {
+  animation: none;
+}
+
+:global(.ant-drawer) {
+  transition: none;
+}
+
+:global {
+  .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: var(--primary-default) !important;
+    border-color: var(--primary-default) !important;
+  }
+}
+
+body {
+  background-color: var(--bg-color-body, #ffffff) !important;
+  color: var(--text-color-primary, #3d3b39);
+}

packages/core/.storybook/preview.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ThemeColorScheme, ThemeProvider } from '@lace/ui';
+import { ThemeColorScheme, ThemeProvider, colorSchemaDecorator } from '@lace/ui';
 import 'antd/dist/antd.css';
 import 'normalize.css';
-import './theme.scss';
+import './index.scss';
 
 export const preview = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -19,9 +19,16 @@ export const preview = {
 };
 
 export const decorators = [
-  (Story) => (
-    <ThemeProvider colorScheme={ThemeColorScheme.Light}>
-      <Story />
-    </ThemeProvider>
-  )
+  (Story, args) => {
+    const { decorators: { colorSchema = true } = {} } = args.parameters;
+    return colorSchema ? colorSchemaDecorator(Story, args) : <Story />;
+  },
+  (Story, args) => {
+    const { decorators: { theme } = {} } = args.parameters;
+    return (
+      <ThemeProvider colorScheme={theme ?? ThemeColorScheme.Light}>
+        <Story />
+      </ThemeProvider>
+    );
+  }
 ];

packages/core/.storybook/theme.scss

@@ -6,13 +6,14 @@
   /*
     in case the theme provider is not being used, this media query allows us to use the theme set on the user system
     */
-  @media (prefers-color-scheme: dark) {
+  @media (prefers-color-scheme: dark) and (data-theme: dark) {
     :root {
       @include theme-custom-properties($dark-theme);
     }
   }
 
-  html[data-theme='dark'] {
+  html[data-theme='dark'],
+  div[data-theme='dark'] {
     @include theme-custom-properties($dark-theme);
   }
 }
@@ -21,13 +22,14 @@
   /*
     in case the theme provider is not being used, this media query allows us to use the theme set on the user system
     */
-  @media (prefers-color-scheme: light) {
+  @media (prefers-color-scheme: light) and (data-theme: light) {
     :root {
       @include theme-custom-properties($light-theme);
     }
   }
 
-  html[data-theme='light'] {
+  html[data-theme='light'],
+  div[data-theme='light'] {
     @include theme-custom-properties($light-theme);
   }
 }

packages/core/src/ui/components/Account/DisableAccountConfirmation/DisableAccountConfirmation.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { DisableAccountConfirmation } from './DisableAccountConfirmation';
 import { ComponentProps } from 'react';
+import { ThemeColorScheme } from '@lace/ui';
 
 const meta: Meta<typeof DisableAccountConfirmation> = {
   title: 'Accounts/DisableAccountConfirmation',
@@ -29,5 +30,22 @@ const data: ComponentProps<typeof DisableAccountConfirmation> = {
 export const Overview: Story = {
   args: {
     ...data
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
+  }
+};
+
+export const WithDarkMode: Story = {
+  args: {
+    ...data
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false,
+      theme: ThemeColorScheme.Dark
+    }
   }
 };

packages/core/src/ui/components/Account/EditAccount/EditAccountDrawer.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { EditAccountDrawer } from './EditAccountDrawer';
 import { ComponentProps } from 'react';
+import { ThemeColorScheme } from '@lace/ui';
 
 const meta: Meta<typeof EditAccountDrawer> = {
   title: 'Accounts/EditAccountDrawer',
@@ -31,5 +32,22 @@ const data: ComponentProps<typeof EditAccountDrawer> = {
 export const Overview: Story = {
   args: {
     ...data
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
+  }
+};
+
+export const WithDarkMode: Story = {
+  args: {
+    ...data
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false,
+      theme: ThemeColorScheme.Dark
+    }
   }
 };

packages/core/src/ui/components/Account/EnableAccountConfirmWithHW/EnableAccountConfirmWithHW.stories.tsx

@@ -2,6 +2,7 @@ import { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EnableAccountConfirmWithHW } from './EnableAccountConfirmWithHW';
+import { ThemeColorScheme } from '@lace/ui';
 
 const meta: Meta<typeof EnableAccountConfirmWithHW> = {
   title: 'Accounts/EnableAccountConfirmWithHW',
@@ -37,19 +38,44 @@ const data: ComponentProps<typeof EnableAccountConfirmWithHW> = {
 };
 
 export const Waiting: Story = {
-  args: data
+  args: data,
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
+  }
 };
 
 export const Signing: Story = {
   args: {
     ...data,
     state: 'signing'
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
   }
 };
 
 export const ErrorCase: Story = {
   args: {
     ...data,
     state: 'error'
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
+  }
+};
+
+export const WithDarkMode: Story = {
+  args: data,
+  parameters: {
+    decorators: {
+      colorSchema: false,
+      theme: ThemeColorScheme.Dark
+    }
   }
 };

packages/core/src/ui/components/Account/EnableAccountPasswordPrompt/EnableAccountPasswordPrompt.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { EnableAccountPasswordPrompt } from './EnableAccountPasswordPrompt';
 import { ComponentProps } from 'react';
+import { ThemeColorScheme } from '@lace/ui';
 
 const meta: Meta<typeof EnableAccountPasswordPrompt> = {
   title: 'Accounts/EnableAccountPasswordPrompt',
@@ -34,19 +35,46 @@ const data: ComponentProps<typeof EnableAccountPasswordPrompt> = {
 export const Overview: Story = {
   args: {
     ...data
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
   }
 };
 
 export const PopUp: Story = {
   args: {
     ...data,
     isPopup: true
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
   }
 };
 
 export const IncorrectPassword: Story = {
   args: {
     ...data,
     wasPasswordIncorrect: true
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false
+    }
+  }
+};
+
+export const WithDarkMode: Story = {
+  args: {
+    ...data
+  },
+  parameters: {
+    decorators: {
+      colorSchema: false,
+      theme: ThemeColorScheme.Dark
+    }
   }
 };

packages/core/src/ui/components/ConfirmDRepRegistration/ConfirmDRepRegistration.stories.tsx

@@ -7,7 +7,7 @@ const customViewports = {
   popup: {
     name: 'Popup',
     styles: {
-      width: '360px',
+      width: '720px',
       height: '600'
     }
   }

packages/core/src/ui/components/ConfirmDRepRetirement/ConfirmDRepRetirement.stories.tsx

@@ -7,7 +7,7 @@ const customViewports = {
   popup: {
     name: 'Popup',
     styles: {
-      width: '360px',
+      width: '720px',
       height: '600'
     }
   }

packages/core/src/ui/components/ConfirmDRepUpdate/ConfirmDRepUpdate.stories.tsx

@@ -7,7 +7,7 @@ const customViewports = {
   popup: {
     name: 'Popup',
     styles: {
-      width: '360px',
+      width: '720px',
       height: '600'
     }
   }