docs: update storybook global docs styles

cultureamp · Dec 20, 2024 · 5c1e224 · 5c1e224
1 parent 97ec35d
commit 5c1e224
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 44 deletions.
diff --git a/docs/.storybook/preview.css b/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);
+  }
+}
diff --git a/docs/.storybook/preview.tsx b/docs/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 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'

diff --git a/docs/components/LinkTo/LinkTo.tsx b/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}

diff --git a/docs/components/ResourceLinks/ResourceLinks.tsx b/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}

diff --git a/docs/tailwind.css b/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;
-    }
-  }
-}
diff --git a/...rc/__rc__/Menu/_docs/ApiSpecification.mdx → ...__/Menu/_docs/Menu--api-specification.mdx b/...rc/__rc__/Menu/_docs/ApiSpecification.mdx → ...__/Menu/_docs/Menu--api-specification.mdx
diff --git a/...components/src/__rc__/Menu/_docs/Menu.mdx → ...c__/Menu/_docs/Menu--usage-guidelines.mdx b/...components/src/__rc__/Menu/_docs/Menu.mdx → ...c__/Menu/_docs/Menu--usage-guidelines.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, Installation, DosAndDonts, DoOrDont } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as MenuDocsStories from './Menu.docs.stories'
 import * as MenuStories from './Menu.stories'
 
@@ -16,9 +16,10 @@ Updated July 6, 2024
   apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"
 />
 
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { MenuTrigger, Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } from "@kaizen/components/v3/actions"'
+<KAIOInstallation
+  exportNames={['Menu', 'MenuTrigger', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuHeader']}
+  family="actions"
+  version="3"
 />
 
 ## Overview
@@ -55,12 +56,12 @@ A menu displays a list of actions in a popover, toggled opened with a button.
 - Menu items may be organised into sections, with a heading for each section.
 - The menu trigger button, which may be any variation of a button.
 
-  ### When to use
+### When to use
 
 - When you have a group of related actions for a page or item on the page.
 - The actions either: - Cause an action on the page (e.g. delete), or - Navigate somewhere
 
-  ### When not to use
+### When not to use
 
 - When you want to persist a user selection.
   - Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
@@ -69,6 +70,8 @@ A menu displays a list of actions in a popover, toggled opened with a button.
   - It's recommended that you avoid this because of the complexity it adds for accessibility.
 - Inside a navigation bar - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
 
+### Specs
+
 #### Do use a menu for an overflow of actions
 
 Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.