@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/badge/badge.stories.js

@@ -1,302 +1,230 @@
 import { html } from 'lit';
 import './badge.js';
 
+const TONES    = ['default', 'primary', 'success', 'warning', 'error', 'info'];
+const SIZES    = ['sm', 'md', 'lg'];
+const VARIANTS = ['shade', 'fill'];
+
+/* flex-wrap, because a row of chips is wider than a phone. Measured at 320:
+   Tones pushed the page 156px wide, Count 22px and With icon 4px, and the
+   badges themselves were correct -- inline-flex with white-space: nowrap, which
+   is what a chip label should do. The overflow was this container refusing to
+   wrap, so it is fixed here rather than in the component. */
+const row = (label, cells) => html`
+  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-16);margin-bottom:var(--spacing-12)">
+    <code style="min-width:7ch;font-size:var(--typography-fontSize-xs);color:var(--color-neutral-600)">${label}</code>
+    ${cells}
+  </div>
+`;
+
 export default {
-  title     : 'Components/Badge',
+  title     : 'Atoms/Badge',
   tags      : ['autodocs'],
   parameters: {
     docs: {
       description: {
         component: `
-**BdBadge** is a Lit web component that renders a styled pill/badge with optional icon, size, color, and variant support.
+**BdBadge** renders a pill that labels or counts something. It has four
+independent axes — \`mode\`, \`size\`, \`tone\` and \`variant\` — which together
+cover the full \`ds-badge\` set.
+
+Every value comes from \`src/tokens/tokens.js\`. Nothing is hardcoded and
+nothing was copied out of the design tool as a literal: each measurement was
+matched to the token that already carries it.
 
 ### Usage
 \`\`\`html
-<bd-badge color="#026DFF" size="md">New</bd-badge>
-<bd-badge size="lg" icon="individual">Personal</bd-badge>
-<bd-badge size="sm" icon="family">Family</bd-badge>
+<bd-badge tone="success" variant="shade">Save 44%</bd-badge>
+<bd-badge tone="primary" variant="fill" size="sm">New</bd-badge>
+<bd-badge mode="count" tone="error" variant="fill">3</bd-badge>
+<bd-badge mode="dot" tone="warning" variant="fill"></bd-badge>
+<bd-badge tone="primary" variant="fill" icon="family">Family Pack</bd-badge>
 \`\`\`
 
 ### Props
 | Prop | Values | Default |
 |---|---|---|
-| \`color\` | Any hex or CSS color | \`#026DFF\` |
-| \`variant\` | Any string class name | \`''\` |
+| \`mode\` | \`text\`, \`dot\`, \`count\` | \`text\` |
 | \`size\` | \`sm\`, \`md\`, \`lg\` | \`md\` |
-| \`fontsize\` | \`12\`, \`14\`, \`16\` | \`14\` |
+| \`tone\` | \`default\`, \`primary\`, \`success\`, \`warning\`, \`error\`, \`info\` | \`default\` |
+| \`variant\` | \`shade\`, \`fill\` | \`shade\` |
 | \`icon\` | \`individual\`, \`family\`, \`''\` | \`''\` |
+| \`label\` | any string — accessible name for \`mode="dot"\` | tone name |
+
+### Tokens
+| | token |
+|---|---|
+| radius | \`--radius-full\` |
+| weight | \`--typography-fontWeight-medium\` |
+| line-height | \`--typography-lineHeight-tight\` |
+| type, sm / md / lg | \`--typography-fontSize-xxs\` / \`-xs\` / \`-sm\` |
+| padding, sm & md | \`--spacing-4\` \`--spacing-8\` |
+| padding, lg | \`--spacing-8\` \`--spacing-12\` |
+| dot | \`--spacing-8\` |
+| icon gap | \`--spacing-4\` |
 
 ### Notes
-- \`color\` sets the \`--badge-bg\` CSS custom property via \`updated()\`
-- \`size\` controls padding, border-radius, and default font size
-- \`fontsize\` overrides the font size independently from \`size\`
-- \`icon\` renders an SVG icon span before the slotted text
+- \`size\` has no effect in \`mode="dot"\` — the design keeps the dot at one
+  size across all three, so that is reproduced rather than invented around.
+- \`variant\` has no effect in \`mode="dot"\` either. A dot has no text, so
+  there is no foreground/background pair for shade and fill to describe — the
+  colour *is* the content, and it has to carry itself on the page. WCAG 1.4.11
+  asks 3:1 of a graphical object whose colour conveys meaning, and the tint a
+  shade badge sits on measures 1.08 to 1.33, so each tone uses a saturated
+  step instead: success is \`green-700\` and warning \`yellow-700\`, the
+  lightest steps in those families that clear 3:1 while still reading as
+  green and yellow.
+- \`success\` deviates from the design in both variants, and both are
+  deliberate. In \`shade\` it uses \`green-800\` on \`green-100\` (5.93:1) where
+  the design specifies \`green-700\`, which measures 4.17:1 and fails WCAG
+  1.4.3. In \`fill\` it is a \`green-700\` background with a white label, where
+  the design specifies \`green-500\` with a dark one — \`green-700\` is the
+  lightest green that carries white text at 4.5:1, measuring 4.75 against
+  \`green-600\`'s 3.20. Both should be reflected back into the design file.
+- \`mode="count"\` sets \`font-variant-numeric: tabular-nums\`, so a counter
+  does not change width as it counts — "12" and "99" measure the same.
+- \`variant="bd-light-blue"\` and \`variant="bd-light-green"\` still work; they
+  map onto \`primary\`/\`fill\` and \`success\`/\`shade\` respectively.
+- \`icon\` uses \`currentColor\`, so it follows the tone with nothing to sync.
         `
       }
     }
   },
   argTypes: {
-    color: {
-      control    : 'color',
-      description: 'Background color of the badge. Sets the `--badge-bg` CSS variable.',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '#026DFF' },
-        category    : 'Appearance'
-      }
-    },
-    variant: {
-      control    : 'text',
-      description: 'Additional CSS class applied to the inner `<span>` for custom variants.',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' },
-        category    : 'Appearance'
-      }
+    mode: {
+      control    : { type: 'inline-radio' },
+      options    : ['text', 'dot', 'count'],
+      description: 'What the badge carries: slotted text, a bare dot, or a numeral.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'text' }, category: 'Structure' }
     },
     size: {
-      control    : { type: 'select' },
-      options    : ['sm', 'md', 'lg'],
-      description: 'Controls padding, border-radius, and default font size.',
-      table      : {
-        type        : { summary: "'sm' | 'md' | 'lg'" },
-        defaultValue: { summary: 'md' },
-        category    : 'Size'
-      }
+      control    : { type: 'inline-radio' },
+      options    : SIZES,
+      description: 'Type size and padding. No effect when `mode="dot"`.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'md' }, category: 'Structure' }
     },
-    fontsize: {
+    tone: {
       control    : { type: 'select' },
-      options    : ['12', '14', '16'],
-      description: 'Explicitly overrides the font size, independent of `size`.',
-      table      : {
-        type        : { summary: "'12' | '14' | '16'" },
-        defaultValue: { summary: '14' },
-        category    : 'Size'
-      }
+      options    : TONES,
+      description: 'Semantic colour pairing.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'default' }, category: 'Appearance' }
+    },
+    variant: {
+      control    : { type: 'inline-radio' },
+      options    : VARIANTS,
+      description: '`shade` tints the background and keeps dark text; `fill` saturates it.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'shade' }, category: 'Appearance' }
     },
     icon: {
-      control    : { type: 'select' },
+      control    : { type: 'inline-radio' },
       options    : ['', 'individual', 'family'],
-      description: 'Renders an icon before the slotted text. Empty string means no icon.',
-      table      : {
-        type        : { summary: "'individual' | 'family' | ''" },
-        defaultValue: { summary: '' },
-        category    : 'Icon'
-      }
+      description: 'Optional leading icon. Inherits the tone via `currentColor`.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Appearance' }
     },
     label: {
       control    : 'text',
-      description: 'Slotted text content displayed inside the badge.',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'Badge' },
-        category    : 'Content'
-      }
-    }
-  }
-};
-
-const render = (args) => html`
-  <bd-badge
-    color="${args.color}"
-    variant="${args.variant}"
-    size="${args.size}"
-    fontsize="${args.fontsize}"
-    icon="${args.icon}"
-  >${args.label}</bd-badge>
-`;
-
-const defaultArgs = {
-  color   : '#026DFF',
-  variant : '',
-  size    : 'md',
-  fontsize: '14',
-  icon    : '',
-  label   : 'Badge'
-};
-
-// ─── Size Stories ──────────────────────────────────────────────────────────
-
-export const SizeSmall = {
-  name      : 'Size — Small (sm)',
-  render    : () => html`<bd-badge size="sm">Small Badge</bd-badge>`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Small badge with compact padding and smallest border-radius.'
-      }
-    }
-  }
-};
-
-export const SizeMedium = {
-  name      : 'Size — Medium (md)',
-  render    : () => html`<bd-badge size="md">Medium Badge</bd-badge>`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default medium size badge.'
-      }
-    }
-  }
-};
-
-export const SizeLarge = {
-  name      : 'Size — Large (lg)',
-  render    : () => html`<bd-badge size="lg">Large Badge</bd-badge>`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Large badge with more padding and a larger border-radius.'
-      }
-    }
-  }
-};
-
-export const AllSizes = {
-  name  : 'All Sizes',
-  render: () => html`
-    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
-      <bd-badge size="sm">Small</bd-badge>
-      <bd-badge size="md">Medium</bd-badge>
-      <bd-badge size="lg">Large</bd-badge>
-    </div>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'All three sizes rendered side by side for visual comparison.'
-      }
+      description: 'Accessible name used when `mode="dot"`. Falls back to the tone name.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    },
+    text: {
+      control    : 'text',
+      description: 'Slotted content.',
+      table      : { category: 'Content' }
     }
-  }
+  },
+  args: {
+    mode   : 'text',
+    size   : 'md',
+    tone   : 'default',
+    variant: 'shade',
+    icon   : '',
+    label  : '',
+    text   : 'Badge'
+  },
+  render: ({ mode, size, tone, variant, icon, label, text }) => html`
+    <bd-badge mode="${mode}" size="${size}" tone="${tone}" variant="${variant}" icon="${icon}" label="${label}">${text}</bd-badge>
+  `
 };
 
-// ─── Color Stories ─────────────────────────────────────────────────────────
-
-export const DefaultColor = {
-  name      : 'Color — Default Blue',
-  render    : () => html`<bd-badge color="#026DFF">Default</bd-badge>`,
-  parameters: {
-    docs: {
-      description: { story: 'Default blue badge using the `#026DFF` color.' }
-    }
+export const Playground = {
+  args: {
+    size : "lg",
+    label: "40% OFF"
   }
 };
 
-export const CustomColors = {
-  name  : 'Color — Custom Colors',
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-      <bd-badge color="#026DFF">Blue</bd-badge>
-      <bd-badge color="#E53935">Red</bd-badge>
-      <bd-badge color="#43A047">Green</bd-badge>
-      <bd-badge color="#FB8C00">Orange</bd-badge>
-      <bd-badge color="#8E24AA">Purple</bd-badge>
-      <bd-badge color="#333333">Dark</bd-badge>
-    </div>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Multiple badges with different `color` values applied via the `--badge-bg` CSS variable.'
-      }
-    }
-  }
+export const Tones = {
+  parameters: { docs: { description: { story: 'Every tone in both variants.' } } },
+  render    : () => html`
+    ${VARIANTS.map(variant => html`
+      <p style="font:var(--typography-fontWeight-semibold) var(--typography-fontSize-sm)/1.4 var(--typography-fontFamily-sans);margin:var(--spacing-24) 0 var(--spacing-12)">
+        variant="${variant}"
+      </p>
+      ${row(variant, TONES.map(tone => html`
+        <bd-badge tone="${tone}" variant="${variant}">${tone}</bd-badge>
+      `))}
+    `)}
+  `
 };
 
-// ─── Font Size Stories ─────────────────────────────────────────────────────
-
-export const FontSizes = {
-  name  : 'Font Sizes (12 / 14 / 16)',
-  render: () => html`
-    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
-      <bd-badge fontsize="12">Font 12</bd-badge>
-      <bd-badge fontsize="14">Font 14</bd-badge>
-      <bd-badge fontsize="16">Font 16</bd-badge>
-    </div>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'All three `fontsize` values rendered. Font size overrides the default derived from `size`.'
-      }
-    }
-  }
+export const Sizes = {
+  parameters: { docs: { description: { story: 'The three sizes, in both variants.' } } },
+  render    : () => html`
+    ${VARIANTS.map(variant => html`
+      ${row(variant, SIZES.map(size => html`
+        <bd-badge size="${size}" tone="primary" variant="${variant}">${size}</bd-badge>
+      `))}
+    `)}
+  `
 };
 
-// ─── Icon Stories ──────────────────────────────────────────────────────────
-
-export const IconIndividual = {
-  name      : 'Icon — Individual',
-  render    : () => html`<bd-badge icon="individual" size="md">Individual</bd-badge>`,
-  parameters: {
-    docs: {
-      description: {
-        story: '`icon="individual"` renders the individual user icon before the slotted text.'
-      }
-    }
-  }
+export const Counts = {
+  name      : 'Count',
+  parameters: { docs: { description: { story: 'Tabular numerals and a min-width keep a counter stable as it changes.' } } },
+  render    : () => html`
+    ${SIZES.map(size => html`
+      ${row(size, ['1', '9', '12', '99', '999'].map(n => html`
+        <bd-badge mode="count" size="${size}" tone="error" variant="fill">${n}</bd-badge>
+      `))}
+    `)}
+  `
 };
 
-export const IconFamily = {
-  name      : 'Icon — Family',
-  render    : () => html`<bd-badge icon="family" size="md">Family</bd-badge>`,
-  parameters: {
-    docs: {
-      description: {
-        story: '`icon="family"` renders the family icon before the slotted text.'
-      }
-    }
-  }
+export const Dots = {
+  name      : 'Dot',
+  parameters: { docs: { description: { story: 'A dot in every tone. Neither `size` nor `variant` affects a dot — both rows below are identical by design, because a dot has no foreground/background pair and needs a colour that carries 3:1 on the page.' } } },
+  render    : () => html`
+    ${row('any tone', TONES.map(tone => html`
+      <bd-badge mode="dot" tone="${tone}" label="${tone}"></bd-badge>
+    `))}
+    ${row('+ fill', TONES.map(tone => html`
+      <bd-badge mode="dot" tone="${tone}" variant="fill" label="${tone}"></bd-badge>
+    `))}
+  `
 };
 
-export const AllIcons = {
-  name  : 'All Icons',
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-      <bd-badge>No Icon</bd-badge>
+export const WithIcon = {
+  name      : 'With icon',
+  parameters: { docs: { description: { story: 'The icon takes its colour from the tone via `currentColor`.' } } },
+  render    : () => html`
+    ${row('shade', html`
       <bd-badge icon="individual">Individual</bd-badge>
-      <bd-badge icon="family">Family</bd-badge>
-    </div>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'All three icon states: no icon, individual, and family — displayed side by side.'
-      }
-    }
-  }
+      <bd-badge tone="success" icon="family">Family Pack</bd-badge>
+    `)}
+    ${row('fill', html`
+      <bd-badge variant="fill" tone="primary" icon="individual">Individual</bd-badge>
+      <bd-badge variant="fill" tone="success" icon="family">Family Pack</bd-badge>
+    `)}
+  `
 };
 
-// ─── Combined Stories ──────────────────────────────────────────────────────
-
-export const CombinedVariants = {
-  name  : 'Combined Variants',
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-      <bd-badge size="sm" color="#E53935">Sale</bd-badge>
-      <bd-badge size="md" color="#43A047" icon="individual">Personal Plan</bd-badge>
-      <bd-badge size="lg" color="#026DFF" icon="family" fontsize="16">Family Plan</bd-badge>
-    </div>
-  `,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Three badges combining different sizes, colors, icons, and font sizes for a real-world usage example.'
-      }
-    }
-  }
+export const Legacy = {
+  name      : 'Legacy variants',
+  parameters: { docs: { description: { story: 'Pre-`ds-badge` markup still renders, mapped onto the new axes.' } } },
+  render    : () => html`
+    ${row('mapped', html`
+      <bd-badge variant="bd-light-blue">bd-light-blue</bd-badge>
+      <bd-badge variant="bd-light-green">bd-light-green</bd-badge>
+    `)}
+  `
 };
-
-export const Playground = {
-  name      : '🛝 Playground',
-  args      : { ...defaultArgs },
-  render,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Fully interactive. Use Controls to adjust color, size, fontsize, icon, variant, and slotted label in real time.'
-      }
-    }
-  }
-};

package/src/components/bento-grid/bento-grid.css.js

@@ -1,21 +1,19 @@
 import { css } from "lit";
 
 export default css`
-    :host {
+  :host {
     display: block;
     width: 100%;
     box-sizing: border-box;
-    max-width: 1290px;
-    margin-inline: auto;
   }
 
-  /* === BACKGROUND VARIANT — section-level tint, applied to the whole
-     component (header + track), not per-card. Padding compensates so the
-     tinted area doesn't hug the header/cards edge-to-edge. === */
-  :host([background="tint"]) {
-    background-color: var(--color-blue-50, #f0f6ff);
-    border-radius: var(--radius-2xl, 24px);
-    padding: var(--spacing-40, 40px) var(--spacing-32, 32px);
+  /* === BACKGROUND VARIANT — section-level tint on the column (header +
+     track), not per-card, so the panel lands on the page edges every other
+     section uses. === */
+  :host([background="tint"]) .bd-ensemble {
+    background-color: var(--status-brand-surface);
+    border-radius: var(--radius-2xl);
+    padding-block: var(--spacing-40);
   }
 
   /* === HEADER (eyebrow / title / description) === */
@@ -31,28 +29,35 @@ export default css`
  .bd-bentogrid-eyebrow {
     display: block;
     margin: 0;
-    color: var(--color-blue-500);
-    --typography-body-regular-fontWeight: var(--typography-fontWeight-bold, 700);
+    /* The brand text role, not the brand primitive. This is a visible change and
+       not a refactor: the role is blue-600, so the eyebrow darkens and its
+       contrast on white goes 4.53:1 -> 6.18:1. blue-500 is the step CLAUDE.md
+       says is not for text, and no text role exists at blue-500's value -- the
+       roles sitting there are surface, border, action and indicator. */
+    color: var(--color-text-brand);
   }
 
   .bd-bentogrid-title {
     display: block;
     margin: 0;
-    color: var(--color-neutral-1000);
-    line-height: var(--typography-lineHeight-tight, 1.1);
   }
 
   .bd-bentogrid-description {
     display: block;
     margin: 0;
-    color: var(--color-neutral-600);
+    color: var(--color-text-muted);
   }
 
   /* === GRID === */
   .bd-bentogrid-track {
     display: grid;
     grid-template-columns: repeat(var(--bd-bento-total-units, 24), minmax(0, 1fr));
-    gap: var(--bd-bento-gap, 24px);
+    /* The fallback names the step rather than repeating its value: --spacing-24
+       IS 24px at the default root size, but in rem, so it grows when the reader
+       enlarges their text and 24px does not. Identical at 16px root, which is
+       why nothing looked wrong and no rule could see it -- the declaration
+       reads a legitimate var(). */
+    gap: var(--bd-bento-gap, var(--spacing-24));
     width: 100%;
   }
 

package/src/components/bento-grid/bento-grid.js

@@ -3,6 +3,7 @@ import { tokens } from "../../tokens/tokens.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import bentoGridCSS from "./bento-grid.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 import "./bento-item.js";
 
 const BREAKPOINT_WIDTHS = { xl: 1280, lg: 960, md: 640 };
@@ -78,7 +79,7 @@ class BentoGrid extends LitElement {
     _gap        : { state: true }
   };
 
-  static styles = [tokens, bentoGridCSS];
+  static styles = [tokens, ensembleCSS, bentoGridCSS];
 
   constructor() {
     super();
@@ -191,10 +192,19 @@ class BentoGrid extends LitElement {
     this.style.setProperty("--bd-bento-gap", `${gap}px`);
 
     if (columns <= 1) {
-      this._items.forEach((item) => item.style.setProperty("--bd-bento-span", String(TOTAL_UNITS)));
+      /* Collapse the subdivision, not just the spans. A 24-unit track carries
+         23 internal gaps, so its own minimum width is 23 * gap -- 368px at the
+         small gap -- whatever the viewport is: measured, the grid overflowed
+         320px by 64px and 375px by 9px for that reason alone. In one column
+         the units buy nothing, because every item spans the whole row either
+         way, so the track becomes a single column and the floor goes with it. */
+      this.style.setProperty("--bd-bento-total-units", "1");
+      this._items.forEach((item) => item.style.setProperty("--bd-bento-span", "1"));
       return;
     }
 
+    this.style.setProperty("--bd-bento-total-units", String(TOTAL_UNITS));
+
     this._applyWeights();
   }
 
@@ -204,12 +214,13 @@ class BentoGrid extends LitElement {
 
   render() {
     return html`
+      <div class="bd-ensemble">
       ${this.eyebrow || this.title || this.description
         ? html`
             <div class="bd-bentogrid-header">
               ${this.eyebrow
                 ? html`
-                    <bd-p kind="regular" class="bd-bentogrid-eyebrow">
+                    <bd-p variant="regular" class="bd-bentogrid-eyebrow">
                       <slot name="eyebrow">${this.eyebrow}</slot>
                     </bd-p>
                   `
@@ -225,7 +236,7 @@ class BentoGrid extends LitElement {
 
               ${this.description
                 ? html`
-                    <bd-p kind="regular" class="bd-bentogrid-description">
+                    <bd-p variant="regular" class="bd-bentogrid-description">
                       <slot name="description">${this.description}</slot>
                     </bd-p>
                   `
@@ -237,6 +248,7 @@ class BentoGrid extends LitElement {
       <div class="bd-bentogrid-track" role="list">
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
+      </div>
     `;
   }
 }