feat: add missing core storybook theme styles

input-output-hk · May 7, 2024 · 4ce49be · 4ce49be
1 parent 3f84c8e
commit 4ce49be
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 7 deletions.
diff --git a/packages/core/.storybook/index.scss b/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);
+}
diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
@@ -2,7 +2,7 @@ import React from 'react';
 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].*' },

diff --git a/packages/core/.storybook/theme.scss b/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);
   }
 }

diff --git a/packages/core/src/ui/components/Account/EditAccount/EditAccountDrawer.stories.ts b/packages/core/src/ui/components/Account/EditAccount/EditAccountDrawer.stories.ts
@@ -46,6 +46,7 @@ export const WithDarkMode: Story = {
   },
   parameters: {
     decorators: {
+      colorSchema: false,
       theme: ThemeColorScheme.Dark
     }
   }

diff --git a/...c/ui/components/Account/EnableAccountConfirmWithHW/EnableAccountConfirmWithHW.stories.tsx b/...c/ui/components/Account/EnableAccountConfirmWithHW/EnableAccountConfirmWithHW.stories.tsx
@@ -74,6 +74,7 @@ export const WithDarkMode: Story = {
   args: data,
   parameters: {
     decorators: {
+      colorSchema: false,
       theme: ThemeColorScheme.Dark
     }
   }

diff --git a/.../ui/components/Account/EnableAccountPasswordPrompt/EnableAccountPasswordPrompt.stories.ts b/.../ui/components/Account/EnableAccountPasswordPrompt/EnableAccountPasswordPrompt.stories.ts
@@ -73,6 +73,7 @@ export const WithDarkMode: Story = {
   },
   parameters: {
     decorators: {
+      colorSchema: false,
       theme: ThemeColorScheme.Dark
     }
   }

diff --git a/packages/ui/src/design-system/decorators/color-schema/color-schema.decorator.tsx b/packages/ui/src/design-system/decorators/color-schema/color-schema.decorator.tsx
@@ -4,7 +4,6 @@ import type { DecoratorFunction } from '@storybook/csf/dist/story';
 import type { ReactFramework } from '@storybook/react';
 
 import { ThemeColorScheme, LocalThemeProvider } from '../../../design-tokens';
-import { Box } from '../../box';
 import { Flex } from '../../flex';
 
 import * as styles from './color-schema.css';
@@ -13,7 +12,12 @@ export const colorSchemaDecorator: DecoratorFunction<
   ReactFramework
 > = Story => (
   <Flex className={styles.root} flexDirection="row">
-    <Box className={styles.storyContainer}>{<Story />}</Box>
+    <LocalThemeProvider
+      colorScheme={ThemeColorScheme.Light}
+      className={styles.storyContainer}
+    >
+      <Story />
+    </LocalThemeProvider>
     <LocalThemeProvider
       colorScheme={ThemeColorScheme.Dark}
       className={styles.storyContainer}

diff --git a/packages/ui/src/design-tokens/theme/local-theme-provider.component.tsx b/packages/ui/src/design-tokens/theme/local-theme-provider.component.tsx
@@ -32,6 +32,7 @@ export const LocalThemeProvider = ({
   return (
     <ThemeContext.Provider value={value}>
       <div
+        data-theme={colorScheme}
         className={cs(cx.root, className, {
           [darkTheme]: colorScheme === ThemeColorScheme.Dark,
           [lightTheme]: colorScheme === ThemeColorScheme.Light,