Merge pull request #2492 from adevinta/SPA-359

feat: extend dark mode to entire Storybook UI
adevinta · Oct 29, 2024 · 6e52250 · 6e52250
2 parents 3c70f2b + 53ca89d
commit 6e52250
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 151 deletions.
diff --git a/.storybook/addons/SkinlessThemeSwitcherHandler.jsx b/.storybook/addons/SkinlessThemeSwitcherHandler.jsx
@@ -0,0 +1,25 @@
+import { memo, useEffect } from "react"
+
+import { useGlobals } from "@storybook/manager-api"
+
+export const SkinlessThemeSwitcherHandler = memo(function SkinlessThemeSwitcherHandler() {
+  const [globals] = useGlobals()
+  const theme = globals?.theme
+
+  useEffect(() => {
+    if (!theme) return
+
+    const htmlElement = document.querySelector("html")
+    if (htmlElement)  {
+      htmlElement.setAttribute("data-theme", theme)
+    }
+
+    const iframe = document.querySelector("#storybook-preview-iframe")
+    if (iframe) {
+      const iframeHtmlElement = iframe.contentDocument?.documentElement
+      iframeHtmlElement.setAttribute("data-theme", theme)
+    }
+  }, [theme])
+
+  return null
+})
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -0,0 +1,85 @@
+<style>
+  body {
+    color: var(--colors-on-background) !important;
+  }
+
+  html[data-theme='light'] {
+    --colors-background: #ffffff;
+    --colors-on-background: #152233;
+    --colors-surface-inverse: #2b3441;
+    --colors-on-surface-inverse: #ffffff;
+    --colors-neutral-container: #f0f2f5;
+    --colors-on-neutral-container: #3a4757;
+    --colors-main: #ec5a13;
+    --colors-support: #094171;
+    --colors-on-support: #ffffff;
+  }
+
+  html[data-theme='dark'] {
+    --colors-background: #202730;
+    --colors-on-background: #f6f8f9;
+    --colors-surface-inverse: #f6f8f9;
+    --colors-on-surface-inverse: #2b3441;
+    --colors-neutral-container: #3a4757;
+    --colors-on-neutral-container: #f6f8f9;
+    --colors-main: #f07b42;
+    --colors-support: #c2e0fa;
+    --colors-on-support: #152233;
+  }
+
+  /* === LEFT SIDEBAR === */
+  #storybook-explorer-tree .sidebar-item {
+    color: var(--colors-on-background) !important;
+  }
+
+  #storybook-explorer-tree .sidebar-item[data-selected='true'] {
+    background: var(--colors-support) !important;
+    color: var(--colors-on-support) !important;
+  }
+
+  nav.sidebar-container {
+    background: var(--colors-background) !important;
+  }
+
+  nav.sidebar-container input {
+    background-color: var(--colors-neutral-container) !important;
+    color: var(--colors-on-neutral-container) !important;
+  }
+
+  nav.sidebar-container input:focus {
+    background-color: var(--colors-neutral-container) !important;
+  }
+
+  nav.sidebar-container [role='combobox'] svg {
+    stroke: var(--colors-on-background) !important;
+  }
+
+  nav.sidebar-container ol[role='listbox'] mark {
+    color: var(--colors-main) !important;
+  }
+
+  nav.sidebar-container .sidebar-subheading {
+    color: var(--colors-on-background) !important;
+  }
+
+  /* === TOP STICKY BAR === */
+  .sb-bar {
+    background: var(--colors-background) !important;
+    color: var(--colors-on-background) !important;
+  }
+
+  .sb-bar button {
+    background-color: var(--colors-surface-inverse) !important;
+    color: var(--colors-on-surface-inverse) !important;
+  }
+
+  /* === THEME PICKER WIDGET (INSIDE TOP STICKY BAR) === */
+  [data-testid='tooltip'] {
+    background-color: var(--colors-surface-inverse) !important;
+    color: var(--colors-on-surface-inverse) !important;
+  }
+
+  [data-testid='tooltip'] span {
+    color: var(--colors-on-surface-inverse) !important;
+  }
+</style>
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,10 +1,17 @@
-import { addons } from '@storybook/manager-api'
-
-import { defaultTheme } from '@spark-ui/theme-utils'
 
+import { addons, types } from '@storybook/manager-api'
 import { getTheme } from './theme/getTheme.js'
+import { SkinlessThemeSwitcherHandler } from './addons/SkinlessThemeSwitcherHandler.jsx'
+
+addons.register('skinless-theme-switcher-handler', () => {
+  addons.add('skinless-theme-switcher-handler/tool', {
+    type: types.TOOL,
+    render: SkinlessThemeSwitcherHandler,
+  });
+});
 
 addons.setConfig({
+  theme: getTheme({ base: 'light' }),
   sidebar: {
     showRoots: true,
     collapsedRoots: ['using-spark', 'hooks', 'contributing', 'experimental', 'utils'],

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -12,10 +12,39 @@
     font-family: var(--font-family-sans) !important;
   }
 
+  html[data-theme="light"] {
+    --colors-code-block: #f5f5f6;
+  }
+
+  html[data-theme="dark"] {
+    --colors-code-block: #f6f8f9;
+  }
+
+  .sbdocs-wrapper .docblock-source pre {
+    background-color: var(--colors-code-block) !important;
+  }
+
   .sbdocs-wrapper {
+    background: rgb(var(--colors-background)) !important;
+    color: rgb(var(--colors-on-background)) !important;
     padding: 30px 20px !important;
   }
 
+  .sbdocs-wrapper :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+    color: rgb(var(--colors-on-background)) !important;
+  }
+
+  .sbdocs-wrapper :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+    color: rgb(var(--colors-on-background)) !important;
+  }
+
+  .sbdocs-wrapper #spark-doc-container > h2,
+  .sbdocs-wrapper #spark-doc-container > h3,
+  .sbdocs-wrapper #spark-doc-container > h4,
+  .sbdocs-wrapper #spark-doc-container > h5 {
+    color: rgb(var(--colors-support)) !important;
+  }
+
   .sbdocs-content {
     display: grid !important;
     grid-template-columns: 100% 0;
@@ -30,10 +59,6 @@
     }
   }
 
-  #spark-doc-container {
-    width: 100%;
-  }
-
   .docblock-source {
     border: 1px solid #ebebed7f !important;
     box-shadow: none !important;
@@ -46,8 +71,12 @@
     grid-template-columns: 100%;
   }
 
+  #spark-doc-container {
+    width: 100%;
+  }
+
   #spark-doc-container > h1 {
-    color: #EC5A13 !important;
+    color: #ec5a13 !important;
     font-weight: 700 !important;
   }
 
@@ -69,6 +98,21 @@
     background-color: rgb(var(--colors-alert));
     color: rgb(var(--colors-on-alert));
   }
+
+  /* === ArgTypes TABLE === */
+  table.docblock-argstable thead th {
+    color: rgb(var(--colors-on-background)) !important;
+  }
+
+  table.docblock-argstable tbody td {
+    background-color: rgb(var(--colors-background)) !important;
+    color: rgb(var(--colors-on-background)) !important;
+    border-inline-start-color: rgb(var(--colors-neutral-container)) !important;
+    border-inline-end-color: rgb(var(--colors-neutral-container)) !important;
+    border-block-start-color: rgb(var(--colors-neutral-container)) !important;
+    border-block-end-color: rgb(var(--colors-neutral-container)) !important;
+    border-top-color: rgb(var(--colors-neutral-container)) !important;
+  }
 </style>
 
 <link href="/normalize.css" rel="stylesheet" />
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -4,6 +4,7 @@ import { ShareExpand } from '@spark-ui/icons/dist/icons/ShareExpand'
 
 import '../src/tailwind.css'
 import './sb-theming.css'
+
 import { ToC } from '@docs/helpers/ToC'
 
 const ExampleContainer = ({ children, ...props }) => {
@@ -67,29 +68,39 @@ export const parameters = {
   },
 }
 
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Set the color theme',
-    defaultValue: 'light',
-    toolbar: {
-      // show the theme name once selected in the toolbar
-      dynamicTitle: true,
-      items: [
-        { value: 'light', right: '⚪️', title: 'Light' },
-        { value: 'dark', right: '⚫️', title: 'Dark' },
-      ],
+
+
+const preview = {
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Set the color theme',
+      defaultValue: 'light',
+      toolbar: {
+        // show the theme name once selected in the toolbar
+        dynamicTitle: true,
+        items: [
+          { value: 'light', right: '⚪️', title: 'Light' },
+          { value: 'dark', right: '⚫️', title: 'Dark' },
+        ],
+      },
     },
   },
-}
+  initialGlobals: {
+    theme: 'light',
+  },
+};
+
+export default preview
 
 export const decorators = [
   // custom theme decorator, see https://yannbraga.dev/blog/multi-theme-decorator
   (storyFn, { globals }) => {
+    const themeKey = globals.theme
 
     const htmlElement = document.querySelector("html")
     if (!htmlElement) return
-    htmlElement.setAttribute("data-theme", globals.theme)
+    htmlElement.setAttribute("data-theme", themeKey)
 
     return storyFn()
   },

diff --git a/.storybook/sb-theming.css b/.storybook/sb-theming.css
@@ -11,83 +11,3 @@
 li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li) kbd {
   color: rgb(var(--colors-on-background));
 }
-
-[data-theme='light'] {
-  --colors-basic: 9 65 113;
-  --colors-on-basic: 255 255 255;
-  --colors-basic-hovered: 12 82 145;
-  --colors-basic-container: 230 242 253;
-  --colors-on-basic-container: 21 34 51;
-  --colors-basic-container-hovered: 244 249 254;
-  --colors-accent: 133 38 217;
-  --colors-on-accent: 255 255 255;
-  --colors-accent-hovered: 159 71 235;
-  --colors-accent-container: 233 214 250;
-  --colors-on-accent-container: 54 37 85;
-  --colors-accent-container-hovered: 245 237 253;
-  --colors-accent-variant: 80 23 130;
-  --colors-on-accent-variant: 255 255 255;
-  --colors-accent-variant-hovered: 107 31 173;
-  --colors-main: 236 90 19;
-  --colors-on-main: 255 255 255;
-  --colors-main-hovered: 240 123 66;
-  --colors-main-container: 255 233 222;
-  --colors-on-main-container: 137 56 15;
-  --colors-main-container-hovered: 255 242 235;
-  --colors-main-variant: 184 74 20;
-  --colors-on-main-variant: 255 255 255;
-  --colors-main-variant-hovered: 236 90 19;
-  --colors-support: 9 65 113;
-  --colors-on-support: 255 255 255;
-  --colors-support-hovered: 12 82 145;
-  --colors-support-container: 230 242 253;
-  --colors-on-support-container: 21 34 51;
-  --colors-support-container-hovered: 244 249 254;
-  --colors-support-variant: 12 82 145;
-  --colors-on-support-variant: 255 255 255;
-  --colors-support-variant-hovered: 15 105 185;
-  --colors-success: 62 122 64;
-  --colors-on-success: 255 255 255;
-  --colors-success-hovered: 78 152 80;
-  --colors-success-container: 220 234 220;
-  --colors-on-success-container: 47 91 48;
-  --colors-success-container-hovered: 237 245 238;
-  --colors-alert: 255 170 0;
-  --colors-on-alert: 32 39 48;
-  --colors-alert-hovered: 255 187 51;
-  --colors-alert-container: 255 238 204;
-  --colors-on-alert-container: 153 102 0;
-  --colors-alert-container-hovered: 255 246 229;
-  --colors-error: 217 52 38;
-  --colors-on-error: 255 255 255;
-  --colors-error-hovered: 224 93 82;
-  --colors-error-container: 247 215 212;
-  --colors-on-error-container: 130 32 23;
-  --colors-error-container-hovered: 251 236 235;
-  --colors-info: 19 136 236;
-  --colors-on-info: 255 255 255;
-  --colors-info-hovered: 105 178 243;
-  --colors-info-container: 194 224 250;
-  --colors-on-info-container: 12 82 145;
-  --colors-info-container-hovered: 230 242 253;
-  --colors-neutral: 79 96 118;
-  --colors-on-neutral: 255 255 255;
-  --colors-neutral-hovered: 108 129 157;
-  --colors-neutral-container: 240 242 245;
-  --colors-on-neutral-container: 58 71 87;
-  --colors-neutral-container-hovered: 246 248 249;
-  --colors-background: 255 255 255;
-  --colors-on-background: 21 34 51;
-  --colors-background-variant: 244 249 254;
-  --colors-on-background-variant: 21 34 51;
-  --colors-surface: 255 255 255;
-  --colors-on-surface: 21 34 51;
-  --colors-surface-hovered: 246 248 249;
-  --colors-surface-inverse: 43 52 65;
-  --colors-on-surface-inverse: 255 255 255;
-  --colors-surface-inverse-hovered: 58 71 87;
-  --colors-outline: 172 184 199;
-  --colors-outline-high: 32 39 48;
-  --colors-overlay: 32 39 48;
-  --colors-on-overlay: 255 255 255;
-}