@awarebydefault/display-case 1.0.0

package/src/ui/design-system/components/primer-specimen/WeightSpecimen.placard.md

@@ -0,0 +1,15 @@
+**WeightSpecimen** — a row of weight samples, each word set at its own font-weight over a mono
+caption. A reusable Primer specimen for showing the weights a system uses and
+what each is for. An optional `footer` slot hangs extra content (a divider, an
+eyebrow sample) below the row.
+
+```tsx
+<WeightSpecimen
+  weights={[
+    { weight: 400, name: 'Normal', role: 'body' },
+    { weight: 600, name: 'Semibold', role: 'titles' },
+  ]}
+/>
+```
+
+Use this for weights. For size steps reach for `TypeScale`; for which families exist reach for `FontFamilies`.

package/src/ui/design-system/components/primer-specimen/WeightSpecimen.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Display Case — WeightSpecimen
+ * A row of weight samples, each set at its own font-weight over a mono caption.
+ * Generic specimen primitive for a Primer — use it to show the weights a system
+ * uses and what each is for. An optional `footer` slot hangs extra content (a
+ * divider, an eyebrow sample) below the row.
+ */
+
+export interface WeightSpec {
+  /** Numeric font-weight (also the React key). */
+  weight: number
+  /** Sample word shown at this weight. */
+  name: string
+  /** Mono role caption (e.g. `body`, `titles`). */
+  role?: string
+}
+
+export interface WeightSpecimenProps {
+  weights: WeightSpec[]
+  /** Optional content rendered below the weights (e.g. a divider + eyebrow). */
+  footer?: ReactNode
+}
+
+export function WeightSpecimen({ weights, footer }: WeightSpecimenProps) {
+  return (
+    <div className="dcpl-block">
+      <div className="dcpl-weights">
+        {weights.map((w) => (
+          <div
+            className="dcpl-weight"
+            key={w.weight}
+            style={{ fontWeight: w.weight }}>
+            {w.name}
+            <span>
+              {w.weight}
+              {w.role ? ` · ${w.role}` : null}
+            </span>
+          </div>
+        ))}
+      </div>
+      {footer}
+    </div>
+  )
+}

package/src/ui/design-system/components/primer-specimen/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Primer-specimen components — reusable foundation specimens for building a
+ * Primer (a long-form design-system "wall text" page). Unlike the original
+ * document-specific specimens, these are generic and prop-driven: feed them your
+ * own ramps, swatches, type scale, spacing steps, glyphs, and so on. They live
+ * under `components/` so they're showcased and importable like any other
+ * design-system component.
+ */
+
+export type { ColorRampProps, ColorStop } from './ColorRamp'
+export { ColorRamp } from './ColorRamp'
+export type { DefEntry, DefinitionListProps } from './DefinitionList'
+export { DefinitionList } from './DefinitionList'
+export type { FontFamiliesProps, FontFamily } from './FontFamilies'
+export { FontFamilies } from './FontFamilies'
+export type { GlyphGridProps, GlyphSpec } from './GlyphGrid'
+export { GlyphGrid } from './GlyphGrid'
+export type { LayoutMockProps } from './LayoutMock'
+export { LayoutMock } from './LayoutMock'
+export type { SpaceStep, SpacingScaleProps } from './SpacingScale'
+export { SpacingScale } from './SpacingScale'
+export type { BoxSpec, SpecimenBoxRowProps } from './SpecimenBoxRow'
+export { SpecimenBoxRow } from './SpecimenBoxRow'
+export type { StatusItem, StatusListProps } from './StatusList'
+export { StatusList } from './StatusList'
+export type { Swatch, SwatchGridProps } from './SwatchGrid'
+export { SwatchGrid } from './SwatchGrid'
+export type { TypeScaleProps, TypeStep } from './TypeScale'
+export { TypeScale } from './TypeScale'
+export type { WeightSpec, WeightSpecimenProps } from './WeightSpecimen'
+export { WeightSpecimen } from './WeightSpecimen'

package/src/ui/design-system/components/primer-specimen/styles.css

@@ -0,0 +1,476 @@
+/* Full-width specimen block — stacks inside a flex body. */
+.dcpl-block {
+  width: 100%;
+}
+.dcpl-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dc-space-8);
+  align-items: center;
+  width: 100%;
+}
+
+/* Colour ramp. */
+.dcpl-ramp {
+  display: grid;
+  gap: var(--dc-space-3);
+  width: 100%;
+}
+.dcpl-sw {
+  min-width: 0;
+}
+.dcpl-sw-chip {
+  border-radius: var(--dc-radius-sm);
+  border: var(--dc-border-line);
+}
+.dcpl-sw-meta {
+  margin-top: var(--dc-space-2);
+}
+.dcpl-sw-name {
+  font-family: var(--dc-font-sans);
+  font-size: var(--dc-text-sm);
+  font-weight: var(--dc-weight-medium);
+  color: var(--dc-fg);
+}
+.dcpl-sw-star {
+  color: var(--dc-brand);
+}
+.dcpl-sw-hex {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+}
+
+/* Semantic role swatch grid. */
+.dcpl-swgrid {
+  display: grid;
+  gap: var(--dc-space-6);
+  width: 100%;
+}
+.dcpl-swrow {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-4);
+}
+.dcpl-swchip {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: var(--dc-radius-sm);
+  border: var(--dc-border-line);
+}
+.dcpl-swtok {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  min-width: 0;
+}
+.dcpl-swtok b {
+  display: block;
+  font-family: var(--dc-font-sans);
+  font-weight: var(--dc-weight-medium);
+  font-size: var(--dc-text-sm);
+  color: var(--dc-fg);
+}
+.dcpl-swtok span {
+  color: var(--dc-fg-muted);
+}
+
+/* Status list. */
+.dcpl-status {
+  display: flex;
+  gap: var(--dc-space-6);
+  flex-wrap: wrap;
+  width: 100%;
+}
+.dcpl-statusitem {
+  flex: 1;
+  min-width: 9rem;
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-4);
+  border: var(--dc-border-line);
+  border-radius: var(--dc-radius-sm);
+  padding: var(--dc-space-6);
+}
+.dcpl-statusdot {
+  width: 14px;
+  height: 14px;
+  border-radius: var(--dc-radius-full);
+  flex: 0 0 auto;
+}
+.dcpl-statusitem b {
+  display: block;
+  font-size: var(--dc-text-sm);
+  font-weight: var(--dc-weight-medium);
+  color: var(--dc-fg);
+}
+.dcpl-statusitem span {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+}
+
+/* Definition list. */
+.dcpl-deflist {
+  border: var(--dc-border-line);
+  border-radius: var(--dc-radius-md);
+  /* border-box so width:100% includes the border — otherwise the right border
+     overflows its parent and is clipped when the list fills a flush Display. */
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+}
+.dcpl-defrow {
+  display: grid;
+  /* Column widths come from a custom property set per-row (see DefinitionList),
+     not an inline grid-template — so the responsive override below wins through
+     the normal cascade instead of needing !important to beat an inline style. */
+  grid-template-columns: var(--dcpl-term-width, 7.5rem) 1fr;
+  gap: var(--dc-space-8);
+  padding: var(--dc-space-6) var(--dc-space-8);
+  border-top: var(--dc-border-line);
+}
+.dcpl-defrow:first-child {
+  border-top: 0;
+}
+.dcpl-defterm {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  font-weight: var(--dc-weight-medium);
+  letter-spacing: var(--dc-tracking-label);
+  text-transform: uppercase;
+  color: var(--dc-brand);
+}
+.dcpl-defdesc {
+  font-size: var(--dc-text-sm);
+  line-height: var(--dc-leading-normal);
+  color: var(--dc-fg-muted);
+}
+.dcpl-defdesc strong {
+  color: var(--dc-fg);
+  font-weight: var(--dc-weight-semibold);
+}
+
+/* Layout mock. */
+.dcpl-layout {
+  width: 100%;
+  max-width: 26rem;
+  border: var(--dc-border-line);
+  border-radius: var(--dc-radius-md);
+  overflow: hidden;
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+}
+.dcpl-layout-head {
+  padding: var(--dc-space-4) var(--dc-space-5);
+  border-bottom: var(--dc-border-line);
+  background: var(--dc-bg);
+}
+.dcpl-layout-body {
+  display: flex;
+  min-height: 72px;
+}
+.dcpl-layout-side {
+  width: 32%;
+  padding: var(--dc-space-5);
+  border-right: var(--dc-border-line);
+  background: var(--dc-bg-subtle);
+}
+.dcpl-layout-main {
+  flex: 1;
+  padding: var(--dc-space-5);
+  background: var(--dc-surface);
+}
+
+/* Type families. */
+.dcpl-fam {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-8);
+  width: 100%;
+}
+.dcpl-famrow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--dc-space-8);
+  flex-wrap: wrap;
+}
+.dcpl-famtag {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  font-weight: var(--dc-weight-medium);
+  letter-spacing: var(--dc-tracking-label);
+  text-transform: uppercase;
+  color: var(--dc-fg-muted);
+  width: 6.5rem;
+  flex: 0 0 auto;
+}
+.dcpl-famsample {
+  font-size: 23px;
+  color: var(--dc-fg);
+}
+.dcpl-famsample[data-font="mono"] {
+  font-family: var(--dc-font-mono);
+  font-size: 21px;
+}
+.dcpl-famsample[data-font="sans"] {
+  font-family: var(--dc-font-sans);
+}
+.dcpl-famnote {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-subtle);
+  margin-top: var(--dc-space-1);
+}
+
+/* Type scale. */
+.dcpl-scale {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-6);
+  width: 100%;
+}
+.dcpl-scalerow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--dc-space-8);
+}
+.dcpl-scaletag {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+  width: 6rem;
+  flex: 0 0 auto;
+}
+.dcpl-scalespec {
+  line-height: var(--dc-leading-tight);
+  color: var(--dc-fg);
+}
+
+/* Weights. */
+.dcpl-weights {
+  display: flex;
+  gap: var(--dc-space-16);
+  align-items: baseline;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.dcpl-weight {
+  font-size: 22px;
+  color: var(--dc-fg);
+}
+.dcpl-weight span {
+  display: block;
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+  font-weight: var(--dc-weight-normal);
+  margin-top: var(--dc-space-1);
+}
+.dcpl-divider {
+  height: 1px;
+  background: var(--dc-border);
+  margin: var(--dc-space-8) 0;
+  width: 100%;
+}
+
+/* Spacing scale. */
+.dcpl-spacescale {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-4);
+  width: 100%;
+}
+.dcpl-spacerow {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-6);
+}
+.dcpl-spacetag {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+  width: 4.5rem;
+  flex: 0 0 auto;
+}
+.dcpl-spacepx {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-subtle);
+  width: 2.75rem;
+  flex: 0 0 auto;
+}
+.dcpl-spacebar {
+  height: 12px;
+  background: var(--dc-brand);
+  border-radius: var(--dc-radius-sm);
+}
+
+/* Box row (radius, elevation, any labelled box specimen). */
+.dcpl-boxrow {
+  display: flex;
+  gap: var(--dc-space-10);
+  flex-wrap: wrap;
+  width: 100%;
+}
+.dcpl-boxitem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dc-space-4);
+}
+.dcpl-box {
+  width: 64px;
+  height: 48px;
+  background: var(--dc-bg-subtle);
+  border: var(--dc-border-line);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--dc-text-sm);
+  color: var(--dc-fg-muted);
+}
+.dcpl-boxlbl {
+  text-align: center;
+}
+.dcpl-boxlbl b {
+  display: block;
+  font-size: var(--dc-text-sm);
+  font-weight: var(--dc-weight-medium);
+  color: var(--dc-fg);
+}
+.dcpl-boxlbl span {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+}
+
+/* Glyph grid. */
+.dcpl-icongrid {
+  display: grid;
+  gap: var(--dc-space-6);
+  width: 100%;
+}
+.dcpl-iconitem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dc-space-3);
+  border: var(--dc-border-line);
+  border-radius: var(--dc-radius-sm);
+  padding: var(--dc-space-6) var(--dc-space-3);
+}
+.dcpl-iconglyph {
+  font-size: var(--dc-text-lg);
+  line-height: 1;
+  color: var(--dc-fg);
+}
+.dcpl-iconuse {
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+  text-align: center;
+}
+
+/* Components overview — labelled rows grouping a whole component category
+   (one row per member: a mono tag on the left, live specimens on the right). */
+.dcpl-overview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-10);
+  width: 100%;
+}
+.dcpl-ovrow {
+  display: grid;
+  grid-template-columns: 4.5rem 1fr;
+  gap: var(--dc-space-8);
+  align-items: center;
+}
+.dcpl-ovrow[data-align="start"] {
+  align-items: start;
+}
+.dcpl-ovlabel {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  font-weight: var(--dc-weight-medium);
+  letter-spacing: var(--dc-tracking-label);
+  text-transform: uppercase;
+  color: var(--dc-fg-muted);
+  line-height: var(--dc-leading-tight);
+}
+.dcpl-ovitems {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dc-space-6);
+  align-items: center;
+  min-width: 0;
+}
+
+/* Showcase overview — labelled sections stacked vertically, each label sitting
+   above its specimen. The sidebar + stage pair share a two-column top row; the
+   docked + floating tweaks panels stack in one section. */
+.dcpl-sc {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-10);
+  width: 100%;
+}
+.dcpl-sc-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-4);
+  min-width: 0;
+  min-height: 0;
+}
+.dcpl-sc-cols {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--dc-space-10);
+  align-items: start;
+}
+/* Pair variant — the left column stacks two specimens (sidebar above eyebrow)
+   and the right specimen (stage) stretches to their combined height. */
+.dcpl-sc-cols[data-pair] {
+  align-items: stretch;
+}
+.dcpl-sc-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-10);
+  min-width: 0;
+}
+.dcpl-sc-tweaks {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-8);
+  width: 100%;
+}
+/* The floating panel uses position:fixed; the transform makes this surface its
+   containing block so it anchors to this corner instead of the viewport. */
+.dcpl-sc-float {
+  position: relative;
+  transform: translateZ(0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+  width: 100%;
+  border: 1px dashed var(--dc-border);
+  border-radius: var(--dc-radius-md);
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-sm);
+  color: var(--dc-fg-subtle);
+}
+
+@media (max-width: 680px) {
+  .dcpl-defrow {
+    grid-template-columns: 1fr;
+    gap: var(--dc-space-2);
+  }
+  .dcpl-ovrow {
+    grid-template-columns: 1fr;
+    gap: var(--dc-space-3);
+  }
+  .dcpl-sc-cols {
+    grid-template-columns: 1fr;
+  }
+}