@boostdev/design-system-components 0.1.18 → 1.0.0

package/src/stories/DesignSystem/Spacing.mdx

@@ -0,0 +1,74 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Design System/Spacing" />
+
+export const SpaceStep = ({ token, mobile, tablet, desktop }) => (
+  <div style={{ display: 'grid', gridTemplateColumns: '10rem auto 1fr', gap: '0 1.5rem', alignItems: 'center', padding: '0.625rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
+    <code style={{ fontSize: '0.75rem' }}>{token}</code>
+    <div style={{ width: `var(${token})`, height: '1.25rem', background: 'var(--bds-interactive)', borderRadius: '0.125rem', minWidth: '2px' }} />
+    <div style={{ fontSize: '0.75rem', color: 'var(--bds-grey)', fontFamily: 'monospace' }}>
+      {mobile}{tablet !== mobile ? ` → ${tablet}` : ''}{desktop !== tablet ? ` → ${desktop}` : ''}
+    </div>
+  </div>
+);
+
+# Spacing
+
+All spacing values use a named scale — `xxxs` through `xxxxl`. Larger values are responsive and grow at `40rem`, `48rem`, and `64rem` breakpoints. Use these tokens for margins, paddings, and gaps everywhere.
+
+**Never use raw `px` or `rem` values in component CSS.** Use the scale tokens.
+
+## Scale
+
+<SpaceStep token="--bds-space_xxxs" mobile="2px" tablet="2px" desktop="2px" />
+<SpaceStep token="--bds-space_xxs"  mobile="4px" tablet="4px" desktop="4px" />
+<SpaceStep token="--bds-space_xs"   mobile="8px" tablet="8px" desktop="8px" />
+<SpaceStep token="--bds-space_s"    mobile="12px" tablet="12px" desktop="12px" />
+<SpaceStep token="--bds-space_m"    mobile="16px" tablet="16px" desktop="16px" />
+<SpaceStep token="--bds-space_l"    mobile="16px" tablet="24px" desktop="24px" />
+<SpaceStep token="--bds-space_xl"   mobile="16px" tablet="24px" desktop="32px" />
+<SpaceStep token="--bds-space_xxl"  mobile="24px" tablet="32px" desktop="48px" />
+<SpaceStep token="--bds-space_xxxl" mobile="32px" tablet="40px" desktop="64px" />
+<SpaceStep token="--bds-space_xxxxl" mobile="40px" tablet="48px" desktop="96px" />
+
+## Responsive values
+
+| Token | Mobile | 40rem+ | 48rem+ |
+|-------|--------|--------|--------|
+| `--bds-space_xxxs` | 0.125rem | 0.125rem | 0.125rem |
+| `--bds-space_xxs` | 0.25rem | 0.25rem | 0.25rem |
+| `--bds-space_xs` | 0.5rem | 0.5rem | 0.5rem |
+| `--bds-space_s` | 0.75rem | 0.75rem | 0.75rem |
+| `--bds-space_m` | 1rem | 1rem | 1rem |
+| `--bds-space_l` | 1rem | 1.5rem | 1.5rem |
+| `--bds-space_xl` | 1rem | 1.5rem | 2rem |
+| `--bds-space_xxl` | 1.5rem | 2rem | 3rem |
+| `--bds-space_xxxl` | 2rem | 2.5rem | 4rem |
+| `--bds-space_xxxxl` | 2.5rem | 3rem | 6rem |
+
+---
+
+## Container tokens
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--bds-container_max-width` | Responsive | Page-level container width |
+| `--bds-container_max-width--narrow` | 48rem (fixed) | Narrow content like forms, articles |
+| `--bds-container_min-width` | min-content | Prevents overflow |
+| `--bds-container_spacing` | Responsive | Outer page margin |
+| `--bds-container_spacing-inline` | Responsive | Horizontal gutter padding |
+
+---
+
+## Usage
+
+```css
+.card {
+  padding: var(--bds-space_m);
+  gap: var(--bds-space_s);
+}
+
+.section {
+  padding-block: var(--bds-space_xxxl);
+}
+```

package/src/stories/DesignSystem/Typography.mdx

@@ -0,0 +1,110 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Design System/Typography" />
+
+export const TypeScale = ({ token, label, style = {} }) => (
+  <div style={{ display: 'grid', gridTemplateColumns: '10rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-on-bg--muted, var(--bds-grey))', lineHeight: 1.4 }}>
+      {token}
+    </div>
+    <div style={{ fontFamily: 'var(--bds-font_family--body)', fontSize: `var(${token})`, ...style }}>
+      {label}
+    </div>
+  </div>
+);
+
+export const WeightSample = ({ weight, token, label }) => (
+  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-grey)' }}>
+      <div>{token}</div>
+      <div style={{ opacity: 0.7 }}>{weight}</div>
+    </div>
+    <div style={{ fontFamily: 'var(--bds-font_family--body)', fontWeight: `var(${token})`, fontSize: '1.25rem' }}>
+      {label} — The quick brown fox
+    </div>
+  </div>
+);
+
+export const TrackingSample = ({ token, label, value }) => (
+  <div style={{ display: 'grid', gridTemplateColumns: '12rem 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline', padding: '0.75rem 0', borderBottom: '1px solid var(--bds-grey--subtle)' }}>
+    <div style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--bds-grey)' }}>
+      <div>{token}</div>
+      <div style={{ opacity: 0.7 }}>{value}</div>
+    </div>
+    <div style={{ fontFamily: 'var(--bds-font_family--body)', letterSpacing: `var(${token})`, fontSize: '1rem' }}>
+      {label}
+    </div>
+  </div>
+);
+
+# Typography
+
+## Font families
+
+| Token | Value |
+|-------|-------|
+| `--bds-font_family--heading` | Arial, Helvetica, sans-serif |
+| `--bds-font_family--body` | Arial, Helvetica, sans-serif |
+
+Override both tokens to apply a custom typeface globally:
+
+```css
+@layer tokens.override {
+  :root {
+    --bds-font_family--heading: 'Inter', sans-serif;
+    --bds-font_family--body:    'Inter', sans-serif;
+  }
+}
+```
+
+---
+
+## Font size scale
+
+Font sizes are responsive — they grow at `48rem` and `64rem` breakpoints.
+The values shown reflect the **desktop** (64rem+) scale.
+
+<TypeScale token="--bds-font_size--display" label="Display — Hero headlines" style={{ fontWeight: 700, lineHeight: 1.05 }} />
+<TypeScale token="--bds-font_size--heading-1" label="Heading 1 — Page titles" style={{ fontWeight: 700, lineHeight: 1.2 }} />
+<TypeScale token="--bds-font_size--heading-2" label="Heading 2 — Section titles" style={{ fontWeight: 700, lineHeight: 1.2 }} />
+<TypeScale token="--bds-font_size--heading-3" label="Heading 3 — Sub-sections" style={{ fontWeight: 600, lineHeight: 1.2 }} />
+<TypeScale token="--bds-font_size--body" label="Body — Default paragraph text" />
+<TypeScale token="--bds-font_size--body--s" label="Body small — Captions, hints, meta" />
+
+### Responsive values
+
+| Token | Mobile | Tablet (48rem) | Desktop (64rem) |
+|-------|--------|----------------|-----------------|
+| `--bds-font_size--display` | 3.5rem | 4.5rem | 6rem |
+| `--bds-font_size--heading-1` | 2rem | 2.5rem | 3rem |
+| `--bds-font_size--heading-2` | 1.5rem | 1.75rem | 2rem |
+| `--bds-font_size--heading-3` | 1.25rem | 1.375rem | 1.5rem |
+| `--bds-font_size--body` | 1em | 1em | 1em |
+| `--bds-font_size--body--s` | 0.875em | 0.875em | 0.875em |
+
+---
+
+## Font weight
+
+<WeightSample token="--bds-font_weight--light" weight="300" label="Light" />
+<WeightSample token="--bds-font_weight--medium" weight="400" label="Medium / Body" />
+<WeightSample token="--bds-font_weight--semibold" weight="600" label="Semibold / Subheading" />
+<WeightSample token="--bds-font_weight--bold" weight="700" label="Bold / Heading" />
+
+---
+
+## Line height
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--bds-font_line-height--display` | 1.05 | Display headings — very tight |
+| `--bds-font_line-height--heading` | 1.2 | Section headings |
+| `--bds-font_line-height--body` | 1.6 | Body text — comfortable reading |
+
+---
+
+## Letter spacing (tracking)
+
+<TrackingSample token="--bds-font_tracking--tight" label="Display headlines use tight tracking" value="-0.02em" />
+<TrackingSample token="--bds-font_tracking--normal" label="Body text uses normal tracking" value="0" />
+<TrackingSample token="--bds-font_tracking--wide" label="SMALL CAPS, BADGES USE WIDE TRACKING" value="0.06em" />

package/src/stories/Introduction.css

@@ -9,9 +9,9 @@
 }
 
 .card {
-    grid-column: var(--grid_span-25)
+    grid-column: var(--bds-grid_span-25)
 }
 
 .cardContent {
-    font-size: var(--font_size--body--s);
+    font-size: var(--bds-font_size--body--s);
 }

package/src/stories/Introduction.mdx

@@ -20,8 +20,8 @@ import {Card} from "../components/layout/Card/index.ts";
             Accessible, token-driven React components. Zero extra runtime.
         </p>
         <ButtonGroup variant="content">
-            <Button variant="secondary" href="https://www.npmjs.com/package/@boostdev/design-system-foundation">DS Foundation</Button>
-            <Button variant="secondary" href="https://www.npmjs.com/package/@boostdev/design-system-components">DS Components</Button>
+            <Button variant="ghost" href="https://www.npmjs.com/package/@boostdev/design-system-foundation">DS Foundation</Button>
+            <Button variant="ghost" href="https://www.npmjs.com/package/@boostdev/design-system-components">DS Components</Button>
         </ButtonGroup>
     </div>
     ---
@@ -93,11 +93,11 @@ import {Card} from "../components/layout/Card/index.ts";
     ```css
     @layer tokens.override {
         :root {
-            --color_cta:         var(--BASE__color--orange);
-            --color_on-cta:      var(--BASE__color--white);
-            --color_interactive: var(--BASE__color--orange);
-            --color_active:      var(--BASE__color--orange);
-            --color_on-active:   var(--BASE__color--white);
+            --bds-cta:         var(--bds-BASE__color--orange);
+            --bds-on-cta:      var(--bds-BASE__color--white);
+            --bds-interactive: var(--bds-BASE__color--orange);
+            --bds-active:      var(--bds-BASE__color--orange);
+            --bds-on-active:   var(--bds-BASE__color--white);
         }
     }
     ```