/* Storybook chrome only — NOT part of the design system and NOT part of the * extracted component layer. Built from the system's own tokens so a reviewer * never mistakes scaffolding for brand. Load order per page: * ../colors_and_type.css → tw-bridge.css → storybook.css * (index.html and project-chip.html also load components.css for .cc-chip, * the one Astro port.) */ /* body carries no padding at all — top padding would sit above the sticky nav (body's first child) and side padding would inset the bar's own background and hairline. Both belong on the shell. The gutter ladder below is .page-container's, repeated verbatim so the shell's content lines up with the nav's; .ds-nav-inner IS a .page-container and is border-box, so this one has to be too. */ body { padding: 0 0 6rem; } .sb { box-sizing: border-box; max-width: var(--max-width-desktop); margin: 0 auto; padding: 4rem var(--gutter-base) 0; } @media (min-width: 768px) { .sb { padding-inline: var(--gutter-md); } } @media (min-width: 1280px) { .sb { padding-inline: var(--gutter-xl); } } .sb-back { display: inline-block; margin-bottom: 2rem; color: var(--color-body-secondary-lighter); font-size: var(--text-caption); text-decoration: none; } .sb-back:hover { color: var(--color-hovered); } /* ---- component header ---------------------------------------------------- */ .sb-head { padding-bottom: 2rem; margin-bottom: 3rem; border-bottom: 1px solid var(--color-surface-quaternary); } /* #5F20FE is 2.94:1 on the rebuilt #0A0A0B page — below every WCAG floor at any size, so the eyebrow uses --color-hovered (8.41:1). DESIGN.md §10.5. */ .sb-head .eyebrow { margin: 0 0 0.75rem; color: var(--color-hovered); font-size: var(--text-caption); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; } .sb-head h1 { margin: 0; font-size: var(--text-heading-sm); line-height: var(--text-heading-sm--line-height); } .sb-head p { max-width: 70ch; margin: 1rem 0 0; color: var(--color-body-secondary-lighter); font-size: var(--text-md); line-height: var(--leading-md); } .sb-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .sb-tag { padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid var(--color-surface-quaternary); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-body-secondary-lighter); } .sb-tag.is-vue { border-color: var(--color-action); color: var(--color-hovered); } .sb-tag.is-astro { border-color: var(--color-surface-quaternary); } /* ---- sections ------------------------------------------------------------ */ .sb-section { margin-top: 3.5rem; } .sb-section > h2 { margin: 0 0 0.5rem; font-size: var(--text-subhead); line-height: var(--leading-subhead); } .sb-section > p { max-width: 72ch; margin: 0 0 1.5rem; color: var(--color-body-secondary-lighter); font-size: var(--text-caption); line-height: var(--leading-caption); } /* ---- the story canvas ---------------------------------------------------- */ .sb-stories { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .sb-stories.is-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); } .sb-stories.is-single { grid-template-columns: 1fr; } .sb-story { border: 1px solid var(--color-surface-quaternary); border-radius: var(--radius-card); overflow: hidden; } /* The canvas is the page ground, never a lighter panel — a component judged on the wrong surface is judged wrong. */ .sb-canvas { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; min-height: 9rem; padding: 2rem; background: var(--color-surface-primary); } .sb-canvas.is-tall { min-height: 15rem; } /* The canvas establishes its own inherited baseline, because otherwise every mounted component inherits the DOCUMENTATION's — and this package's body is not the site's. Production ships no `body` rule at all; its baseline is Tailwind's preflight, so that is what a specimen has to sit on. line-height is the one that actually bites. The docs body sets `--leading-body`, which is `1.5rem` — an absolute length. Tailwind's stock is unitless `1.5`. At 16px the two agree at 24px, which is why this went unnoticed; the moment a mounted element changes font size without carrying a `text-*` utility they diverge, because a length does not scale and a ratio does. Measured before this rule: a 14px element inside a canvas inherited 24px of leading where the site gives it 21px. The tokens resolve to the SITE's values here, not the docs', because tw-bridge.css scopes production's :root and @theme to these same two selectors. */ .sb-canvas, .sb-mount { color: var(--color-body-primary); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; } /* colors_and_type.css paints docs-chrome anchors violet with an UNLAYERED `a` rule, which out-cascades every layered utility a mounted component carries (unlayered beats @layer regardless of specificity). Inside the canvases, roll anchor color back to the layered world so the component's own classes decide — falling back to the bridge's preflight-equivalent `color: inherit` when no utility is present. The same rule also sets `text-underline-offset: 0.2em`, which production has nowhere — measured at 3.2px on a canvas link against Tailwind's stock `auto` — so that reverts with it. */ .sb-canvas a, .sb-mount a, .sb-canvas a:hover, .sb-mount a:hover { color: revert-layer; text-underline-offset: revert-layer; } /* Same story for headings: the docs baseline sizes h1–h3 with unlayered element rules that production's global.css does not have. Roll them back so a mounted component's own text-* utilities decide. */ .sb-canvas :is(h1, h2, h3, h4, h5, h6), .sb-mount :is(h1, h2, h3, h4, h5, h6) { color: revert-layer; font-size: revert-layer; font-weight: revert-layer; line-height: revert-layer; } /* And the same story a third time, for focus. colors_and_type.css gives the documentation a global `:focus-visible { outline: 2px solid --color-hovered; outline-offset: 2px }`. It is unlayered, so inside a canvas it out-cascades the `outline-none` / `focus:outline-none` that InputText, TextField and Checkbox carry as layered utilities — and the components mean it: both text fields replace the ring with a glow (`input:focus` / `div:focus-within` box-shadow) and drawing a hard 2px rectangle inside that soft halo is a second, competing focus indicator the site never renders. Production's global.css has no `:focus-visible` rule at all. revert-layer hands the decision back to the layered cascade: a component with an outline utility gets its own, and one with none falls through to the UA ring — which is exactly what the site does. Docs chrome outside the canvases keeps its ring. */ .sb-canvas :focus-visible, .sb-mount :focus-visible { outline: revert-layer; outline-offset: revert-layer; } .sb-canvas.is-start { justify-content: flex-start; align-items: flex-start; } .sb-canvas.is-block { display: block; } .sb-story-body { padding: 0.875rem 1rem; border-top: 1px solid var(--color-surface-quaternary); background: var(--color-surface-secondary); } .sb-story-name { display: block; color: var(--color-heading); font-size: var(--text-caption); font-weight: var(--font-weight-bold); } .sb-story-args { display: block; margin-top: 0.375rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; color: var(--color-hovered); word-break: break-word; } .sb-story-note { display: block; margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.5; color: var(--color-body-secondary-lighter); } /* ---- props table --------------------------------------------------------- */ table.sb-props { width: 100%; border-collapse: collapse; font-size: var(--text-caption); } .sb-props th { text-align: left; padding: 0.75rem 1rem; color: var(--color-body-secondary-lighter); font-weight: var(--font-weight-bold); border-bottom: 1px solid var(--color-surface-quaternary); } .sb-props td { padding: 0.75rem 1rem; vertical-align: top; border-bottom: 1px solid var(--color-surface-quaternary); color: var(--color-body-secondary-lighter); } .sb-props td:first-child { color: var(--color-heading); font-weight: var(--font-weight-bold); } .sb-props code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-hovered); } .sb-req { color: var(--color-action); font-family: var(--font-mono); } /* ---- callouts ------------------------------------------------------------ */ .sb-note { padding: 1rem 1.25rem; border-radius: var(--radius-control); border: 1px solid var(--color-surface-quaternary); color: var(--color-body-secondary-lighter); font-size: var(--text-caption); line-height: var(--leading-caption); } .sb-note + .sb-note { margin-top: 0.75rem; } .sb-note strong { color: var(--color-heading); } .sb-note code { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-hovered); } .sb-note.is-warn { border-color: var(--color-action); } /* ---- live assertion readout ---------------------------------------------- Used by pain-points-item.html, whose sanitiser story is an actual test rather than a claim: it renders hostile markdown through the real component and reports what survived. Kept general in case a second specimen needs to prove something instead of asserting it, but it is deliberately not a general "code block" style — a specimen that merely SHOWS code should use inside .sb-note like everything else. */ .sb-verdict { margin-top: 0.75rem; padding: 0.625rem 0.875rem; border-radius: var(--radius-control); border: 1px solid var(--color-surface-quaternary); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; color: var(--color-body-secondary-lighter); } .sb-verdict b { display: block; margin-bottom: 0.375rem; font-weight: inherit; } .sb-verdict.is-pass b { color: var(--color-success, #4ADE80); } .sb-verdict.is-fail { border-color: var(--color-error-100, #FE9A9A); } .sb-verdict.is-fail b { color: var(--color-error-100, #FE9A9A); } .sb-verdict pre { margin: 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--color-hovered); } /* ---- catalog (index) ----------------------------------------------------- */ .sb-cat { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } /* A card used to be one big , but the thumbs now MOUNT the real components — several of which render anchors of their own, and anchors cannot nest. So the card is a
: the .meta anchor stretches itself over the whole card with ::after, and the thumb carries `inert` because it is decoration, not a second set of controls. */ .sb-cat .sb-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-surface-quaternary); transition: border-color var(--transition-colors); } .sb-cat .sb-card:hover { border-color: var(--color-action); } .sb-cat a.meta { text-decoration: none; } .sb-cat a.meta::after { content: ""; position: absolute; inset: 0; } .sb-cat .thumb { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; height: 8rem; padding: 1rem; background: var(--color-surface-primary); overflow: hidden; } .sb-cat .meta { padding: 1rem; border-top: 1px solid var(--color-surface-quaternary); background: var(--color-surface-secondary); } /* Meta typography is scoped to .meta children ONLY. A bare `.sb-cat span` out-specifies the .cc-* component classes and flattens every mini-demo in the thumbs into stacked blocks. */ .sb-cat .meta { display: block; } .sb-cat .meta strong { display: block; color: var(--color-heading); font-size: var(--text-caption); } .sb-cat .meta > span { display: block; margin-top: 0.375rem; color: var(--color-body-secondary-lighter); font-size: 0.75rem; line-height: 1.5; } .sb-cat .meta > code { display: block; margin-top: 0.625rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-hovered); word-break: break-all; } .sb-cat .meta span code { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-hovered); }