From 87a5d5a4b7ccd0c56d91e669b0f258b9f7ea6fa2 Mon Sep 17 00:00:00 2001 From: acd02 Date: Fri, 25 Oct 2024 12:34:55 +0200 Subject: [PATCH] feat: extend dark mode to entire Storybook UI --- .storybook/manager-head.html | 58 +++++++++++++++++ .storybook/manager.js | 4 +- .storybook/preview-head.html | 42 +++++++++++-- .storybook/preview.jsx | 12 ++++ .storybook/sb-theming.css | 80 ------------------------ .storybook/spark-logo.svg | 12 ++-- .storybook/theme/getTheme.js | 51 +++------------ .storybook/utils.js | 31 +++++++++ documentation/helpers/ArgTypes/index.tsx | 1 - documentation/helpers/ToC/index.tsx | 1 - 10 files changed, 155 insertions(+), 137 deletions(-) create mode 100644 .storybook/manager-head.html create mode 100644 .storybook/utils.js diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html new file mode 100644 index 000000000..9699d996e --- /dev/null +++ b/.storybook/manager-head.html @@ -0,0 +1,58 @@ + diff --git a/.storybook/manager.js b/.storybook/manager.js index 6b77a02d3..49b0fbcc5 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,10 +1,8 @@ import { addons } from '@storybook/manager-api' - -import { defaultTheme } from '@spark-ui/theme-utils' - import { getTheme } from './theme/getTheme.js' 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 index 700b4c670..6a8f664c5 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -13,9 +13,26 @@ } .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 +47,6 @@ } } - #spark-doc-container { - width: 100%; - } - .docblock-source { border: 1px solid #ebebed7f !important; box-shadow: none !important; @@ -46,8 +59,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 +86,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; + } diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index fd650a010..e2f2ebc49 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -4,6 +4,8 @@ import { ShareExpand } from '@spark-ui/icons/dist/icons/ShareExpand' import '../src/tailwind.css' import './sb-theming.css' + +import {setSparkThemeCSSVariables} from './utils' import { ToC } from '@docs/helpers/ToC' const ExampleContainer = ({ children, ...props }) => { @@ -91,6 +93,16 @@ export const decorators = [ if (!htmlElement) return htmlElement.setAttribute("data-theme", globals.theme) + + const parentDocument = parent.document; + const parentHTML = parentDocument.documentElement; + if (!parentHTML) return + + const themeKey = globals.theme + parentHTML.setAttribute("data-theme", themeKey) + + setSparkThemeCSSVariables(parentHTML, themeKey) + return storyFn() }, (storyFn, { id, viewMode }) => { diff --git a/.storybook/sb-theming.css b/.storybook/sb-theming.css index f0b7ada6a..0f9886620 100644 --- 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; -} diff --git a/.storybook/spark-logo.svg b/.storybook/spark-logo.svg index 6d5312a22..3191c6b9d 100644 --- a/.storybook/spark-logo.svg +++ b/.storybook/spark-logo.svg @@ -1,12 +1,12 @@ - - - - - - + + + + + + diff --git a/.storybook/theme/getTheme.js b/.storybook/theme/getTheme.js index 3676a9581..11e62d6d4 100644 --- a/.storybook/theme/getTheme.js +++ b/.storybook/theme/getTheme.js @@ -1,48 +1,17 @@ -import { create } from '@storybook/theming/create' -import logoUrl from '../spark-logo.svg' +import { create } from "@storybook/theming/create"; +import logoUrl from "../spark-logo.svg"; // https://github.com/storybookjs/storybook/blob/next/code/lib/theming/src/types.ts -export const getTheme = ({ base, sparkTheme }) => - create({ +export const getTheme = ({ base }) => { + return create({ base, - // Brand - colorPrimary: sparkTheme.colors.main, - colorSecondary: sparkTheme.colors.support, - - // UI - appBg: sparkTheme.colors.backgroundVariant, - appContentBg: sparkTheme.colors.background, - // appPreviewBg: TODO - appBorderColor: sparkTheme.colors.basicContainer, - appBorderRadius: sparkTheme.borderRadius.lg, - // Typography fontBase: '"Nunito", sans-serif', - fontCode: 'monospace', - - // Text colors - textColor: sparkTheme.colors.onBackground, - textInverseColor: sparkTheme.colors.background, - // textMutedColor: TODO + fontCode: "monospace", - // Toolbar default and active colors - barTextColor: sparkTheme.colors.onBackground, - barHoverColor: sparkTheme.colors.basicContainerHovered, - barSelectedColor: sparkTheme.colors.basicContainer, - barBg: sparkTheme.colors.backgroundVariant, - - // Form colors - buttonBg: sparkTheme.colors.primary, - buttonBorder: 'transparent', - inputBg: 'transparent', - inputBorder: sparkTheme.colors.basic, - inputTextColor: sparkTheme.colors.basic, - inputBorderRadius: sparkTheme.borderRadius.sm, - - brandTitle: 'Spark design system', - brandUrl: 'https://zeroheight.com/1186e1705/p/0879a9-colors/b/27d7a3', + brandTitle: "Spark design system", + brandUrl: "https://zeroheight.com/1186e1705/p/0879a9-colors/b/27d7a3", brandImage: logoUrl, - brandTarget: '_self', - - // gridCellSize?: TODO - }) + brandTarget: "_self", + }); +}; diff --git a/.storybook/utils.js b/.storybook/utils.js new file mode 100644 index 000000000..25cbf468e --- /dev/null +++ b/.storybook/utils.js @@ -0,0 +1,31 @@ +import { defaultTheme, defaultThemeDark } from '@spark-ui/theme-utils' + +export function setSparkThemeCSSVariables(htmlElement, themeKey) { + if (themeKey === 'light') { + htmlElement.style.setProperty('--colors-background', defaultTheme.colors.background) + htmlElement.style.setProperty('--colors-on-background', defaultTheme.colors.onBackground) + + htmlElement.style.setProperty('--colors-surface-inverse', defaultTheme.colors.surfaceInverse) + htmlElement.style.setProperty('--colors-on-surface-inverse', defaultTheme.colors.neutralContainer) + + htmlElement.style.setProperty('--colors-neutral-container', defaultTheme.colors.neutralContainer) + + htmlElement.style.setProperty('--colors-main', defaultTheme.colors.main) + + htmlElement.style.setProperty('--colors-support', defaultTheme.colors.support) + htmlElement.style.setProperty('--colors-on-support', defaultTheme.colors.onSupport) + } else { + htmlElement.style.setProperty('--colors-background', defaultThemeDark.colors.background) + htmlElement.style.setProperty('--colors-on-background', defaultThemeDark.colors.onBackground) + + htmlElement.style.setProperty('--colors-surface-inverse', defaultThemeDark.colors.surfaceInverse) + htmlElement.style.setProperty('--colors-on-surface-inverse', defaultThemeDark.colors.onSurfaceInverse) + + htmlElement.style.setProperty('--colors-neutral-container', defaultThemeDark.colors.neutralContainer) + + htmlElement.style.setProperty('--colors-main', defaultThemeDark.colors.main) + + htmlElement.style.setProperty('--colors-support', defaultThemeDark.colors.support) + htmlElement.style.setProperty('--colors-on-support', defaultThemeDark.colors.onSupport) + } +} diff --git a/documentation/helpers/ArgTypes/index.tsx b/documentation/helpers/ArgTypes/index.tsx index a24750cb8..6c1efe434 100644 --- a/documentation/helpers/ArgTypes/index.tsx +++ b/documentation/helpers/ArgTypes/index.tsx @@ -55,7 +55,6 @@ export const ArgTypes = ({ return ( { return (