docs: update global Storybook docs styles

.changeset/giant-bulldogs-chew.md

@@ -0,0 +1,2 @@
+---
+---

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 docs/storybook-static
-docs/.storybook/preview.css
+docs/.storybook/tailwind-build.css
 .DS_Store
 dist
 .turbo

.stylelintignore

@@ -4,4 +4,3 @@ packages/components/dist/*
 packages/components/locales/*
 docs/storybook-static/*
 docs/tailwind.css
-docs/preview.css

docs/.storybook/preview.css

@@ -0,0 +1,109 @@
+pre code {
+  font-family: ui-monospace, Menlo, Monaco, 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
+    'Source Code Pro', 'Droid Sans Mono', 'Courier New', monospace !important;
+  font-size: 13px !important;
+  line-height: 19px;
+  border: 1px solid hsla(203, 50%, 30%, 0.15);
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+  border-radius: 4px;
+  padding: 20px !important;
+  font-weight: 300 !important;
+  -webkit-font-smoothing: antialiased;
+}
+
+.sbdocs-wrapper {
+  padding: 2.5rem;
+}
+
+.sbdocs.sbdocs-content {
+  max-width: unset;
+
+  :where(:not(.sb-anchor, .sb-unstyled, .sb-unstyled *)) {
+    color: var(--color-purple-800);
+  }
+
+  :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) {
+    font-family: var(--typography-display-0-font-family);
+    font-weight: var(--typography-heading-1-font-weight);
+    font-size: var(--typography-heading-1-font-size);
+    line-height: var(--typography-heading-1-line-height);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
+    font-family: var(--typography-heading-2-font-family);
+    font-weight: var(--typography-heading-2-font-weight);
+    font-size: var(--typography-heading-2-font-size);
+    line-height: var(--typography-heading-2-line-height);
+    letter-spacing: var(--typography-heading-2-letter-spacing);
+    border-bottom: 0;
+    text-decoration: none;
+  }
+
+  :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
+    font-family: var(--typography-heading-3-font-family);
+    font-weight: var(--typography-heading-3-font-weight);
+    font-size: var(--typography-heading-3-font-size);
+    line-height: var(--typography-heading-3-line-height);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
+  }
+
+  :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
+  }
+
+  :where(h5:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)) {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+
+  :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+    margin: 0 0 var(--spacing-16);
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+
+    code {
+      font-size: 0.9em;
+      margin: var(--spacing-2);
+      padding: var(--spacing-4) var(--spacing-6);
+    }
+  }
+
+  :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    color: var(--color-blue-500);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    code {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+
+  :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+    margin: 0;
+    padding: 0;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}

docs/.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import '../../packages/components/styles/global.css'
 import 'highlight.js/styles/a11y-light.css'
 import './preview.css'
+import './tailwind-build.css'
 
 import React, { useEffect } from 'react'
 import { decorators as bgDecorators } from '@storybook/addon-backgrounds/preview'

docs/components/LinkTo/LinkTo.tsx

@@ -18,7 +18,7 @@ export const LinkTo = ({
     type="button"
     onClick={linkTo(pageId, sectionName)}
     className={classnames(
-      'bg-transparent border-none text-blue-400 hover:underline cursor-pointer p-0',
+      'bg-transparent border-none text-blue-500 hover:underline cursor-pointer p-0',
       className,
     )}
     {...restButtonAttributes}

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -15,7 +15,7 @@ const ResourceLink = ({ href, text }: ResourceLinkProps): JSX.Element => (
       href={href}
       target="_blank"
       rel="noopener noreferrer nofollow"
-      className="border rounded inline-flex gap-4 items-center p-8 text-blue-400 no-underline"
+      className="border rounded inline-flex gap-4 items-center p-8 text-blue-500 no-underline"
     >
       <Text variant="small" tag="span" classNameOverride="text-inherit">
         {text}

docs/components/index.ts

@@ -5,4 +5,3 @@ export * from './LinkTo'
 export * from './NoClipCanvas'
 export * from './ResourceLinks'
 export * from './SbReleaseNotification'
-export * from './SbContent'

docs/package.json

@@ -10,7 +10,7 @@
     "build:docs": "storybook build --docs",
     "build:test": "storybook build --test",
     "build:chromatic": "storybook build --webpack-stats-json",
-    "build:tailwind": "npx tailwindcss -i ./tailwind.css -o ./.storybook/preview.css",
+    "build:tailwind": "npx tailwindcss -i ./tailwind.css -o ./.storybook/tailwind-build.css",
     "test:storybook": "test-storybook --skipTags='skip-test' --url http://127.0.0.1:6006",
     "clean": "rimraf './storybook-static' './node_modules' '.turbo'"
   },

docs/tailwind.css

@@ -1,39 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-pre code {
-  font-family: ui-monospace, Menlo, Monaco, 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
-    'Source Code Pro', 'Droid Sans Mono', 'Courier New', monospace !important;
-  font-size: 13px !important;
-  line-height: 19px;
-  border: 1px solid hsla(203, 50%, 30%, 0.15);
-  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
-  border-radius: 4px;
-  padding: 20px !important;
-  font-weight: 300 !important;
-  -webkit-font-smoothing: antialiased;
-}
-
-#storybook-docs {
-  .sbdocs-wrapper {
-    padding: 2.5rem;
-  }
-
-  .sbdocs-content {
-    max-width: unset;
-  }
-
-  .sbdocs-a {
-    color: var(--color-blue-400);
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    & code {
-      color: inherit;
-      text-decoration: underline;
-    }
-  }
-}

docs/turbo.json

@@ -4,7 +4,7 @@
     "build:tailwind": {
       "dependsOn": ["@kaizen/tailwind#build"],
       "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
-      "outputs": ["docs/.storybook/preview.css"],
+      "outputs": ["docs/.storybook/tailwind-build.css"],
       "cache": false
     },
     "build:docs": {

eslint.config.js

@@ -197,7 +197,7 @@ export default tseslint.config(
       'import/no-unresolved': [
         'error',
         {
-          ignore: ['^@kaizen/', '/preview.css$'],
+          ignore: ['^@kaizen/', '/tailwind-build.css$'],
         },
       ],
     },