@awarebydefault/display-case 1.0.0

package/src/ui/design-system/components/showcase/Wordmark.case.tsx

@@ -0,0 +1,42 @@
+import { defineCases, tweak } from '@awarebydefault/display-case'
+import { Wordmark } from './Wordmark'
+
+export default defineCases(
+  'Wordmark',
+  {
+    Playground: {
+      tweaks: {
+        text: tweak.text('Display Case'),
+        fontSize: tweak.number(1.5),
+        maxWidth: tweak.number(0),
+      },
+      render: (t) => (
+        <Wordmark
+          style={{
+            fontSize: `${t.fontSize}rem`,
+            maxWidth: t.maxWidth ? `${t.maxWidth}rem` : undefined,
+          }}>
+          {t.text}
+        </Wordmark>
+      ),
+    },
+    Default: () => (
+      <Wordmark style={{ fontSize: '1.5rem' }}>Display Case</Wordmark>
+    ),
+    Sizes: () => (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24 }}>
+        <Wordmark style={{ fontSize: '0.875rem' }}>Small</Wordmark>
+        <Wordmark style={{ fontSize: '1.25rem' }}>Medium</Wordmark>
+        <Wordmark style={{ fontSize: '2rem' }}>Large</Wordmark>
+      </div>
+    ),
+    // The brackets stay pinned to the ends and stretch to the full text height
+    // as the text wraps inside them — they never wrap along with it.
+    Wrapping: () => (
+      <Wordmark style={{ fontSize: '1.5rem', maxWidth: '6rem' }}>
+        Display Case
+      </Wordmark>
+    ),
+  },
+  { level: 'atom' },
+)

package/src/ui/design-system/components/showcase/Wordmark.css

@@ -0,0 +1,31 @@
+.dcui-wordmark {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0.4em;
+  font-weight: var(--dc-weight-semibold);
+  letter-spacing: var(--dc-tracking-tight);
+  line-height: 1.25;
+  min-width: 0;
+}
+.dcui-wordmark-text {
+  min-width: 0;
+  overflow-wrap: break-word;
+  text-align: center;
+}
+.dcui-wordmark::before,
+.dcui-wordmark::after {
+  content: "";
+  flex: 0 0 auto;
+  align-self: stretch;
+  width: 0.3em;
+  /* Stroke scales sub-linearly with the text: the em term lets it thicken gently
+     as the text grows (not 1:1 with font-size, which gets heavy at large sizes),
+     while the 2px floor keeps it from ever going thinner than the base hairline. */
+  border: max(2px, calc(1.25px + 0.05em)) solid var(--dc-brand);
+}
+.dcui-wordmark::before {
+  border-right: 0;
+}
+.dcui-wordmark::after {
+  border-left: 0;
+}

package/src/ui/design-system/components/showcase/Wordmark.placard.md

@@ -0,0 +1,10 @@
+**Wordmark** — the bracketed wordmark, Display Case's own title; reach for it as the brand title, not as decoration.
+
+```tsx
+<Wordmark style={{ fontSize: '1.5rem' }}>Display Case</Wordmark>
+```
+
+The text wraps inside a pair of marigold brackets and the whole mark scales with `font-size` on the element.
+
+- **children**: the wordmark text
+- spreads remaining props onto the `<span>`

package/src/ui/design-system/components/showcase/Wordmark.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Wordmark } from './Wordmark'
+
+describe('Wordmark', () => {
+  test('wraps the text in the bracketed wordmark shell', () => {
+    const html = renderToStaticMarkup(<Wordmark>Display Case</Wordmark>)
+    expect(html).toContain('class="dcui-wordmark"')
+    expect(html).toContain('class="dcui-wordmark-text"')
+    expect(html).toContain('Display Case')
+  })
+
+  test('forwards arbitrary attributes to the root element', () => {
+    const html = renderToStaticMarkup(
+      <Wordmark id="brand" title="Display Case">
+        DC
+      </Wordmark>,
+    )
+    expect(html).toContain('id="brand"')
+    expect(html).toContain('title="Display Case"')
+  })
+})

package/src/ui/design-system/components/showcase/Wordmark.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Display Case — Wordmark
+ * The bracketed wordmark. The text wraps *inside* a pair of marigold brackets
+ * drawn with borders (not glyphs) as flex items pinned to the ends, so they stay
+ * put instead of wrapping with the text and stretch vertically to the full text
+ * height — one line or many. Scales with `font-size` (everything is em-based).
+ * Display Case's own title and the charm of the identity — never decoration.
+ */
+
+export interface WordmarkProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode
+}
+
+export function Wordmark({ children, ...rest }: WordmarkProps) {
+  return (
+    <span className="dcui-wordmark" {...rest}>
+      <span className="dcui-wordmark-text">{children}</span>
+    </span>
+  )
+}

package/src/ui/design-system/primer-specimens/brand.tsx

@@ -0,0 +1,26 @@
+/**
+ * Brand specimen for Display Case's own Primer — the icon vocabulary. Display
+ * Case has no icon font, no SVG set, and no emoji: its entire vocabulary is
+ * Unicode glyphs rendered in the UI font.
+ *
+ * A thin, document-specific wrapper: the glyph data lives here; the reusable
+ * {@link GlyphGrid} primitive (under `components/primer-specimen/`) renders it.
+ */
+import { GlyphGrid, type GlyphSpec } from '../components/primer-specimen'
+
+const GLYPHS: GlyphSpec[] = [
+  { glyph: '☰', use: 'Toggle nav' },
+  { glyph: '▸', use: 'Disclosure' },
+  { glyph: '⟲', use: 'Rotate' },
+  { glyph: '✕', use: 'Close' },
+  { glyph: '★', use: 'Emphasis' },
+  { glyph: '←', use: 'Prev' },
+  { glyph: '→', use: 'Next' },
+  { glyph: '−', use: 'Zoom out' },
+  { glyph: '＋', use: 'Zoom in' },
+  { glyph: '×', use: 'Dimension' },
+]
+
+export function Glyphs() {
+  return <GlyphGrid glyphs={GLYPHS} columns={5} />
+}

package/src/ui/design-system/primer-specimens/colors.tsx

@@ -0,0 +1,83 @@
+/**
+ * Colour specimens for Display Case's own Primer — the marigold accent ramp,
+ * the warm paper neutral ramp, the semantic role swatches (which re-paint under
+ * a forced `data-theme` scope), and the status hues reserved for check output.
+ *
+ * These are thin, document-specific wrappers: the Display-Case-specific data
+ * lives here, and the reusable {@link ColorRamp}/{@link SwatchGrid}/
+ * {@link StatusList} primitives (under `components/primer-specimen/`) do the
+ * rendering. Each chip references its `--dc-*` custom property as a complete
+ * literal (`var(--dc-marigold-600)`) so the swatches track the live theme *and*
+ * the token-conformance check can statically resolve every reference (a
+ * templated `var(--dc-${name})` cannot be resolved, so the full string is stored
+ * in the data).
+ */
+import {
+  ColorRamp,
+  type ColorStop,
+  type StatusItem,
+  StatusList,
+  type Swatch,
+  SwatchGrid,
+} from '../components/primer-specimen'
+
+const MARIGOLD: ColorStop[] = [
+  { name: 'marigold-200', color: 'var(--dc-marigold-200)', caption: '#fbe3bb' },
+  { name: 'marigold-300', color: 'var(--dc-marigold-300)', caption: '#f6c878' },
+  { name: 'marigold-400', color: 'var(--dc-marigold-400)', caption: '#f0a23b' },
+  { name: 'marigold-500', color: 'var(--dc-marigold-500)', caption: '#e0820b' },
+  {
+    name: 'marigold-600',
+    color: 'var(--dc-marigold-600)',
+    caption: '#c2690a',
+    star: true,
+  },
+  { name: 'marigold-700', color: 'var(--dc-marigold-700)', caption: '#9a4f0a' },
+]
+
+const PAPER: ColorStop[] = [
+  { name: 'paper-50', color: 'var(--dc-paper-50)', caption: '#fbfaf6' },
+  { name: 'paper-100', color: 'var(--dc-paper-100)', caption: '#f4f1e9' },
+  { name: 'paper-200', color: 'var(--dc-paper-200)', caption: '#e6e0d4' },
+  { name: 'paper-300', color: 'var(--dc-paper-300)', caption: '#d6cebe' },
+  { name: 'paper-400', color: 'var(--dc-paper-400)', caption: '#b3a896' },
+  { name: 'paper-500', color: 'var(--dc-paper-500)', caption: '#8a8073' },
+  { name: 'paper-600', color: 'var(--dc-paper-600)', caption: '#6b6259' },
+  { name: 'paper-700', color: 'var(--dc-paper-700)', caption: '#4a423a' },
+  { name: 'paper-800', color: 'var(--dc-paper-800)', caption: '#2e2822' },
+  { name: 'paper-900', color: 'var(--dc-paper-900)', caption: '#211d18' },
+  { name: 'paper-950', color: 'var(--dc-paper-950)', caption: '#15110d' },
+]
+
+const SEMANTIC: Swatch[] = [
+  { color: 'var(--dc-bg)', token: 'bg', role: 'canvas' },
+  { color: 'var(--dc-bg-subtle)', token: 'bg-subtle', role: 'sidebar' },
+  { color: 'var(--dc-surface)', token: 'surface', role: 'inputs' },
+  { color: 'var(--dc-border)', token: 'border', role: 'hairline' },
+  { color: 'var(--dc-fg)', token: 'fg', role: 'text' },
+  { color: 'var(--dc-fg-muted)', token: 'fg-muted', role: 'labels' },
+  { color: 'var(--dc-brand)', token: 'brand', role: 'accent' },
+  { color: 'var(--dc-brand-subtle)', token: 'brand-subtle', role: 'wash' },
+]
+
+const STATUS: StatusItem[] = [
+  { color: 'var(--dc-success)', name: 'success', caption: 'green-600' },
+  { color: 'var(--dc-warning)', name: 'warning', caption: 'amber-500' },
+  { color: 'var(--dc-danger)', name: 'danger', caption: 'red-600' },
+]
+
+export function MarigoldRamp() {
+  return <ColorRamp stops={MARIGOLD} chipHeight={56} />
+}
+
+export function PaperRamp() {
+  return <ColorRamp stops={PAPER} chipHeight={48} />
+}
+
+export function SemanticSwatches() {
+  return <SwatchGrid swatches={SEMANTIC} columns={4} />
+}
+
+export function StatusHues() {
+  return <StatusList items={STATUS} />
+}

package/src/ui/design-system/primer-specimens/components.tsx

@@ -0,0 +1,308 @@
+/**
+ * Components overview — the three grouped specimens for the Primer's
+ * "Components" section. Each maps to one `components/` subfolder and lays its
+ * members out as labelled rows (a mono tag on the left, live specimens on the
+ * right):
+ *
+ *   · ControlsOverview — the input atoms (`components/controls/`).
+ *   · ShowcaseOverview — the shell molecules & organisms (`components/showcase/`).
+ *   · PrimerOverview  — the Primer-authoring primitives (`components/primer-specimen/`).
+ *
+ * Like the other showcase specimens, these compose the design-system components
+ * directly, so they track the live theme. The labelled-row chrome
+ * (`dcpl-overview` / `dcpl-ovrow` / `dcpl-ovlabel`) is defined in
+ * `components/primer-specimen/styles.ts`.
+ */
+import { type ReactNode, useState } from 'react'
+import {
+  Button,
+  Chip,
+  Eyebrow,
+  FlowNav,
+  IconButton,
+  Input,
+  NavItem,
+  RenderAddress,
+  Select,
+  SelectMenu,
+  Sidebar,
+  Stage,
+  TweaksPanel,
+} from '../components'
+import {
+  type BoxSpec,
+  GlyphGrid,
+  type SpaceStep,
+  SpacingScale,
+  SpecimenBoxRow,
+  type Swatch,
+  SwatchGrid,
+} from '../components/primer-specimen'
+
+/** One labelled row inside an overview: mono tag left, specimens right. */
+function OverviewRow({
+  label,
+  align,
+  children,
+}: {
+  label: string
+  /** Top-align the tag when the row holds a tall specimen (a panel, a tree). */
+  align?: 'start'
+  children: ReactNode
+}) {
+  return (
+    <div className="dcpl-ovrow" data-align={align}>
+      <div className="dcpl-ovlabel">{label}</div>
+      <div className="dcpl-ovitems">{children}</div>
+    </div>
+  )
+}
+
+/** The input atoms — `components/controls/`. */
+export function ControlsOverview() {
+  // SelectMenu is controlled — the row owns its committed value.
+  const [device, setDevice] = useState('Desktop')
+  return (
+    <div className="dcpl-overview">
+      <OverviewRow label="Button">
+        <Button>Ghost</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="accent">Accent</Button>
+        <Button variant="subtle">Subtle</Button>
+        <Button size="sm">Small</Button>
+        <Button disabled>Disabled</Button>
+      </OverviewRow>
+      <OverviewRow label="Icon">
+        <IconButton glyph="☰" label="Nav" />
+        <IconButton glyph="⟲" label="Rotate" />
+        <IconButton glyph="✕" label="Close" active />
+        <IconButton glyph="＋" label="Zoom in" variant="bare" />
+        <IconButton glyph="－" label="Zoom out" variant="bare" />
+      </OverviewRow>
+      <OverviewRow label="Input">
+        <Input placeholder="Search cases…" style={{ width: '11rem' }} />
+        <Input
+          type="number"
+          defaultValue={1280}
+          suffix="px"
+          style={{ width: '6rem' }}
+        />
+        <Input placeholder="t. opacity" style={{ width: '8rem' }} />
+      </OverviewRow>
+      <OverviewRow label="Select">
+        <Select
+          defaultValue="Full"
+          options={[
+            { label: 'Responsive', options: ['Full', 'Desktop', 'Mobile'] },
+            { label: 'Devices', options: ['1080p', 'iPhone 15'] },
+          ]}
+        />
+        <Select size="sm" options={['light', 'dark']} />
+        <SelectMenu
+          aria-label="Device"
+          options={['Desktop', 'Tablet', 'Mobile']}
+          value={device}
+          onChange={setDevice}
+        />
+      </OverviewRow>
+    </div>
+  )
+}
+
+const FLOW_STEPS = [
+  { id: 'Request link', label: 'Request link' },
+  { id: 'Check email', label: 'Check email' },
+  { id: 'Signed in', label: 'Signed in' },
+]
+
+const TWEAK_ITEMS = [
+  {
+    label: 'label',
+    control: <Input size="sm" defaultValue="Save" style={{ width: '8rem' }} />,
+  },
+  {
+    label: 'kind',
+    control: <Select size="sm" options={['choice', 'text']} />,
+  },
+  {
+    label: 'disabled',
+    control: <input type="checkbox" aria-label="disabled" defaultChecked />,
+  },
+]
+
+const FLOAT_ITEMS = [
+  { label: 'kind', control: <Select size="sm" options={['choice', 'text']} /> },
+  {
+    label: 'disabled',
+    control: <input type="checkbox" aria-label="disabled" />,
+  },
+]
+
+/** A labelled showcase section — a mono label sitting above its specimen. */
+function Section({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <section className="dcpl-sc-block">
+      <div className="dcpl-ovlabel">{label}</div>
+      {children}
+    </section>
+  )
+}
+
+/** The shell molecules & organisms — `components/showcase/`. */
+export function ShowcaseOverview() {
+  const [active, setActive] = useState('Check email')
+  return (
+    <div className="dcpl-sc">
+      <div className="dcpl-sc-cols" data-pair="">
+        <div className="dcpl-sc-stack">
+          <Section label="Sidebar / NavItem">
+            <Sidebar style={{ width: '15rem' }}>
+              <NavItem
+                kind="component"
+                label="Button"
+                count={4}
+                current
+                expanded
+                onToggle={() => {}}
+                onSelect={() => {}}
+              />
+              <NavItem
+                kind="case"
+                label="Playground"
+                current
+                onSelect={() => {}}
+              />
+              <NavItem kind="case" label="Disabled" onSelect={() => {}} />
+              <NavItem
+                kind="component"
+                label="Stage"
+                count={3}
+                onToggle={() => {}}
+                onSelect={() => {}}
+              />
+            </Sidebar>
+          </Section>
+          <Section label="Eyebrow">
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.5rem',
+                alignItems: 'flex-start',
+              }}>
+              <Eyebrow>Components</Eyebrow>
+              <Eyebrow tone="strong">Documentation</Eyebrow>
+              <Eyebrow tone="accent">Tweaks</Eyebrow>
+            </div>
+          </Section>
+        </div>
+        <Section label="Stage">
+          <Stage
+            caption="Playground"
+            meta="390 × 844"
+            frame="fill"
+            grid
+            corners
+            style={{ width: '100%', flex: 1, minHeight: 0 }}>
+            <Chip variant="accent">exhibit goes here</Chip>
+          </Stage>
+        </Section>
+      </div>
+      <Section label="Chip">
+        <div className="dcpl-ovitems">
+          <Chip>atom</Chip>
+          <Chip>molecule</Chip>
+          <Chip variant="accent">flow</Chip>
+          <Chip variant="solid">page</Chip>
+          <Chip current index="2">
+            Check email
+          </Chip>
+        </div>
+      </Section>
+      <Section label="FlowNav">
+        <FlowNav steps={FLOW_STEPS} activeId={active} onSelect={setActive} />
+      </Section>
+      <Section label="TweaksPanel — docked / floating">
+        <div className="dcpl-sc-tweaks">
+          <TweaksPanel
+            url="?t.kind=choice&t.disabled=1"
+            items={TWEAK_ITEMS}
+            onToggleMode={() => {}}
+          />
+          <div className="dcpl-sc-float">
+            {'tall exhibit — pan & zoom'}
+            <TweaksPanel
+              mode="floating"
+              url="?t.kind=choice"
+              items={FLOAT_ITEMS}
+              onToggleMode={() => {}}
+            />
+          </div>
+        </div>
+      </Section>
+      <Section label="RenderAddress">
+        <RenderAddress url="/render/button/playground?theme=light&t.variant=accent" />
+      </Section>
+    </div>
+  )
+}
+
+const SWATCHES: Swatch[] = [
+  { token: 'brand', color: 'var(--dc-brand)', role: 'accent' },
+  { token: 'fg', color: 'var(--dc-fg)', role: 'text' },
+  { token: 'surface', color: 'var(--dc-surface)', role: 'inputs' },
+  { token: 'border', color: 'var(--dc-border)', role: 'hairline' },
+]
+
+const SPACE: SpaceStep[] = [
+  { token: 'space-2', value: '4px', width: 4 },
+  { token: 'space-4', value: '8px', width: 8 },
+  { token: 'space-8', value: '16px', width: 16 },
+  { token: 'space-16', value: '32px', width: 32 },
+]
+
+const GLYPHS = [
+  { glyph: '☰', use: 'nav' },
+  { glyph: '⟲', use: 'reset' },
+  { glyph: '✕', use: 'close' },
+  { glyph: '＋', use: 'zoom in' },
+  { glyph: '－', use: 'zoom out' },
+]
+
+const RADII: BoxSpec[] = [
+  {
+    label: 'sm',
+    note: '5px · controls',
+    boxStyle: { borderRadius: 'var(--dc-radius-sm)' },
+  },
+  {
+    label: 'md',
+    note: '8px · panels',
+    boxStyle: { borderRadius: 'var(--dc-radius-md)' },
+  },
+  {
+    label: 'full',
+    note: 'pills · dots',
+    boxStyle: { borderRadius: 'var(--dc-radius-full)', width: '48px' },
+  },
+]
+
+/** The Primer-authoring primitives — `components/primer-specimen/`. */
+export function PrimerOverview() {
+  return (
+    <div className="dcpl-overview">
+      <OverviewRow label="Swatches" align="start">
+        <SwatchGrid swatches={SWATCHES} columns={4} />
+      </OverviewRow>
+      <OverviewRow label="Spacing" align="start">
+        <SpacingScale steps={SPACE} />
+      </OverviewRow>
+      <OverviewRow label="Glyphs" align="start">
+        <GlyphGrid glyphs={GLYPHS} columns={5} />
+      </OverviewRow>
+      <OverviewRow label="Boxes" align="start">
+        <SpecimenBoxRow items={RADII} />
+      </OverviewRow>
+    </div>
+  )
+}

package/src/ui/design-system/primer-specimens/foundations.tsx

@@ -0,0 +1,71 @@
+/**
+ * Visual-foundation & content specimens for Display Case's own Primer — the
+ * content-voice definition list, the live interaction-states row, and the
+ * three-region layout mock.
+ *
+ * The definition list and layout mock are thin wrappers over the reusable
+ * {@link DefinitionList}/{@link LayoutMock} primitives (under
+ * `components/primer-specimen/`). The states row is built from the system's own
+ * components, so it tracks the live theme.
+ */
+import { Button, Chip, Input } from '../components'
+import {
+  type DefEntry,
+  DefinitionList,
+  LayoutMock as SpecimenLayoutMock,
+} from '../components/primer-specimen'
+
+const FUNDAMENTALS: DefEntry[] = [
+  {
+    term: 'Voice',
+    description:
+      'Plain, confident, technical-but-warm. It explains why, briefly, then moves on — like a thoughtful README from an engineer who respects your time.',
+  },
+  {
+    term: 'Person',
+    description:
+      'Addresses you. Refers to itself as Display Case or it — never we in UI copy.',
+  },
+  {
+    term: 'Casing',
+    description:
+      'Sentence case everywhere. The one exception is the eyebrow label: UPPERCASE mono with wide tracking.',
+  },
+  {
+    term: 'Length',
+    description:
+      'Terse. Buttons are one or two words; labels are a single token, often the literal prop name in mono.',
+  },
+  {
+    term: 'Numbers',
+    description:
+      'Shown in mono, exact, no fuss — 1280 × 800, 100%, /render/button/playground.',
+  },
+  { term: 'Emoji', description: "Not used in the UI. Don't reach for them." },
+]
+
+export function DefList() {
+  return <DefinitionList entries={FUNDAMENTALS} />
+}
+
+export function StatesRow() {
+  return (
+    <div className="dcpl-row">
+      <Button>Default</Button>
+      <Button variant="accent">Selected</Button>
+      <Chip current>active case</Chip>
+      <Input placeholder="focus me" style={{ width: '9rem' }} />
+      <Button disabled>Disabled</Button>
+    </div>
+  )
+}
+
+export function LayoutMock() {
+  return (
+    <SpecimenLayoutMock
+      header="header"
+      sidebar="sidebar"
+      main="main · the stage"
+    />
+  )
+}

package/src/ui/design-system/primer-specimens/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Primer specimens — Display Case's own document-specific specimens for its
+ * Primer wall text (colour ramps, type scale, spacing, brand, states, render
+ * address). These are thin wrappers: each supplies Display-Case-specific data to
+ * a reusable primitive under `components/primer-specimen/` (or, for the live
+ * states/flow/tweaks demos, composes the design-system components directly).
+ *
+ * They live outside `components/` so they aren't subject to the showcase
+ * coverage lint, and they're imported only by `primer.mdx`. Anyone building
+ * their own Primer should import the generic primitives from
+ * `components/primer-specimen` and feed them their own data — these wrappers
+ * are the worked example.
+ */
+
+export { Glyphs } from './brand'
+export { MarigoldRamp, PaperRamp, SemanticSwatches, StatusHues } from './colors'
+export {
+  ControlsOverview,
+  PrimerOverview,
+  ShowcaseOverview,
+} from './components'
+export { DefList, LayoutMock, StatesRow } from './foundations'
+export { FlowNavDemo, RenderAddress, TweaksPanelDemo } from './showcase'
+export { ElevationRow, RadiusRow, SpacingScale } from './spacing'
+export { FontFamilies, TypeScale, Weights } from './type'