@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/x-ai/tokens.css

@@ -0,0 +1,268 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/x-ai/tokens.css
+ *
+ * Structured token bindings for "x-ai" — the dark-first, monospace-driven
+ * brutalist minimalism of Elon Musk's AI lab. A design system that
+ * communicates through absence: pure white on warm near-black, GeistMono
+ * as the display voice, zero shadows, zero gradients, zero accent color.
+ * Restraint as sophistication.
+ *
+ * Brand identity in three sentences:
+ *   1. Dark-first canvas at #1f2228 (warm near-black with a subtle blue
+ *      undertone, NEVER pure #000000) carries pure-white text as "the
+ *      voice", with hierarchy expressed through opacity (100 / 70 / 50 / 30)
+ *      rather than hue. There is no gray middle ground.
+ *   2. GeistMono runs at display sizes (up to a hero-only 320px at weight
+ *      300) and as the uppercase, letter-spaced button face. universalSans
+ *      handles body and section headings. The monospace-as-display choice
+ *      is the brand: terminal aesthetic as luxury.
+ *   3. Zero box-shadows, zero gradients, near-zero radii (0px default,
+ *      4px occasional softening). Depth comes from opacity-based borders
+ *      and surface tints, not from simulated light. The single chromatic
+ *      exception is the keyboard focus ring (Tailwind's default blue).
+ *
+ * Brand-specific schema decisions (each bends a schema convention to
+ * match xAI's voice rather than the cross-brand default):
+ *
+ *   1. `--bg` is `#1f2228`, NOT `#000000`. DESIGN.md §2 names this hue
+ *      explicitly: "This specific hue prevents the harsh eye strain of
+ *      `#000000` while maintaining deep darkness." Pure black is
+ *      forbidden by the brand.
+ *
+ *   2. `--accent` is `#ffffff`, not a chromatic color. xAI has no
+ *      accent palette — white IS the chromatic move. Primary CTAs render
+ *      with `var(--accent)` as background and `var(--accent-on)` as
+ *      foreground, producing the signature white-on-dark button. The
+ *      "≤2 accent uses per screen" lint still holds; the primary CTA and
+ *      the focus indicator are the only places white reverses against
+ *      the canvas.
+ *
+ *   3. `--font-display` is a GeistMono stack. Monospace AS the display
+ *      face is the defining aesthetic decision (DESIGN.md §3) — it
+ *      positions xAI not as a consumer product but as infrastructure,
+ *      as something built by people who live in terminals. `--font-mono`
+ *      aliases the same stack because GeistMono IS the monospace face
+ *      used for code, kbd, and tabular metrics.
+ *
+ *   4. The four-level foreground ramp is opacity-based (rgba 1.0 / 0.7
+ *      / 0.5 / 0.3), NOT a grayscale hex ramp. DESIGN.md §2 documents
+ *      the system literally as "white at α". Binding `--fg-2`, `--muted`,
+ *      and `--meta` as `rgba(255,255,255,α)` preserves the "white over
+ *      canvas" voice and keeps the tiers chromatically locked to the
+ *      single foreground color.
+ *
+ *   5. `--border` is `rgba(255, 255, 255, 0.1)` — DESIGN.md §2's default
+ *      "Border Default" alpha, NOT a solid hex. `--border-soft` drops to
+ *      0.05 for inner-row separators. The 0.2 "Border Strong" tier from
+ *      DESIGN.md lives inline per-component (hover/active state edges).
+ *
+ *   6. Radii are aggressively small: 0 / 0 / 4 / 9999. DESIGN.md §5:
+ *      "The near-zero radius philosophy is core to the brand's brutalist
+ *      identity." Buttons, inputs, and cards all default to 0px;
+ *      `--radius-lg` softens to 4px for the rare secondary container
+ *      (DESIGN.md's "Subtle (4px) occasional"). `--radius-pill` stays at
+ *      9999px because the schema slot requires a pill value, even though
+ *      xAI rarely renders one.
+ *
+ *   7. `--elev-raised` is literally `none`. DESIGN.md §6: "xAI rejects
+ *      the conventional shadow-based elevation system entirely. There
+ *      are no box-shadows anywhere on the site." Depth is communicated
+ *      through three other mechanisms documented in the same section:
+ *      opacity-based borders that brighten on interaction, subtle
+ *      background-opacity shifts (0.03 → 0.08), and the massive
+ *      typographic scale contrast. `--elev-ring` is kept as a hairline
+ *      border-as-shadow so components that target the elevation token
+ *      still get a visible edge.
+ *
+ *   8. `--focus-ring` is the ONLY chromatic exception to the otherwise
+ *      strictly monochromatic palette. DESIGN.md §2 names Tailwind's
+ *      default `--tw-ring-color` (`rgb(59, 130, 246) / 0.5`) as the
+ *      keyboard focus indicator. We reproduce it as a 3px halo
+ *      (Tailwind's `ring-2` shape) — the blue is intentional and
+ *      non-negotiable for a11y, even though the rest of the system is
+ *      achromatic.
+ *
+ *   9. The type scale tops out at 64px (`--text-4xl`), NOT the 320px
+ *      hero display DESIGN.md §3 names. 320px is a hero-only treatment,
+ *      not a token tier — components.html overrides `font-size` inline
+ *      for that one cinematic moment. Reserving `--text-4xl` at 64px
+ *      keeps the slot useful as the H1-equivalent ceiling for cards,
+ *      sections, and modals across the system. (See vercel/tokens.css
+ *      §6 for the same reasoning: tokens encode reusable tiers, not
+ *      one-off hero crops.)
+ *
+ *  10. `--tracking-display` stays `normal`. GeistMono at display scale
+ *      does NOT compress letter-spacing — the monospace grid is part of
+ *      the aesthetic and tightening would collapse it. The uppercase
+ *      button tracking (`1.4px`, DESIGN.md §4) is an interaction-specific
+ *      value that lives inline on `.btn` since it applies only to
+ *      command-line-styled labels, not display headlines.
+ *
+ * Source contracts:
+ *   - Standard token names: design-systems/_schema/tokens.schema.ts
+ *   - A2 fallback parity:   design-systems/_schema/defaults.css
+ *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
+ *
+ * Keep this file additive: never invent token names not also documented
+ * in DESIGN.md or the shared schema. The GeistMono and universalSans
+ * faces are referenced by name only — artifacts that render acceptably
+ * fall back to the OS monospace and sans-serif stacks listed inside the
+ * font-family declarations.
+ * ─────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ─────────────────────────────────────────────────────
+   * #1f2228 is the singular canvas — warm near-black with a subtle
+   * blue undertone. `--surface` is the barely-visible 0.03 white tint
+   * that cards sit on; `--surface-warm` rises to 0.05 for hover and
+   * elevated rows. DESIGN.md §6's elevation ramp uses both values
+   * verbatim as "Surface (Level 1)" and "Surface Hover". */
+  --bg:           #1f2228;                       /* warm near-black canvas — NEVER #000 */
+  --surface:      rgba(255, 255, 255, 0.03);     /* subtle card surface */
+  --surface-warm: rgba(255, 255, 255, 0.05);     /* hover / elevated tier */
+
+  /* ─── Foreground ──────────────────────────────────────────────────
+   * Four-level opacity ramp per DESIGN.md §2. Pure white is "the
+   * voice"; subsequent tiers express hierarchy by dimming rather
+   * than by hue. Binding as rgba (not hex) keeps the ramp locked
+   * chromatically to the single foreground color. */
+  --fg:    #ffffff;                              /* primary — headings, links, body */
+  --fg-2:  rgba(255, 255, 255, 0.7);             /* secondary — descriptions */
+  --muted: rgba(255, 255, 255, 0.5);             /* tertiary — captions, timestamps */
+  --meta:  rgba(255, 255, 255, 0.3);             /* quaternary — disabled, annotations */
+
+  /* ─── Border ──────────────────────────────────────────────────────
+   * Opacity-based borders — barely visible, never absent. 0.1 is the
+   * default card / divider edge; 0.05 is the inner-row separator
+   * that should not visually compete. The 0.2 "strong" tier from
+   * DESIGN.md §2 lives inline per-component (hover/active states). */
+  --border:      rgba(255, 255, 255, 0.1);       /* default card / divider */
+  --border-soft: rgba(255, 255, 255, 0.05);      /* inner row separator */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * White IS the accent. There is no chromatic color in xAI's
+   * monochromatic palette — primary CTAs are white-on-dark.
+   * `--accent-hover` dims to 0.9 alpha per DESIGN.md §4 (primary
+   * button hover); `--accent-active` drops a further step. The
+   * convention is REVERSED from most systems: hover dims, it does
+   * not brighten. */
+  --accent:        #ffffff;                      /* the voice as bg */
+  --accent-on:     #1f2228;                      /* canvas as fg on accent */
+  --accent-hover:  rgba(255, 255, 255, 0.9);     /* slight dimming on hover (DESIGN.md §4) */
+  --accent-active: rgba(255, 255, 255, 0.8);     /* deeper dim on press */
+
+  /* ─── Semantic ────────────────────────────────────────────────────
+   * DESIGN.md §7 actively discourages colored status indicators
+   * ("Don't use colored status indicators unless absolutely
+   * necessary — keep everything in the white/dark spectrum"). We
+   * inherit schema defaults so the slots remain useful for the rare
+   * cases where status truly must render chromatically — but
+   * components should prefer monochrome cues (opacity, weight). */
+  --success: #16a34a;
+  --warn:    #eab308;
+  --danger:  #dc2626;
+
+  /* ─── Typography — fonts ──────────────────────────────────────────
+   * GeistMono is the brand's defining typographic decision: a
+   * monospace face used at display sizes. universalSans handles
+   * body and section headings. `--font-mono` aliases the display
+   * stack because GeistMono IS the monospace face — there is no
+   * separate code typeface. */
+  --font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+  --font-body:    "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono:    "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+
+  /* Type scale — DESIGN.md §3 hierarchy table.
+   * The 320px display hero is intentionally NOT a token tier;
+   * components.html overrides `font-size` inline for that one
+   * cinematic treatment. `--text-4xl` instead caps at 64px, the
+   * realistic ceiling for marketing H1s across cards/sections.
+   * `--text-2xl` (30px) matches DESIGN.md's "Section Heading" tier. */
+  --text-xs:   12px;                             /* small / meta — timestamps, footnotes */
+  --text-sm:   14px;                             /* button label / caption */
+  --text-base: 16px;                             /* body — universalSans 1.5 */
+  --text-lg:   20px;                             /* body large / introductions */
+  --text-xl:   24px;                             /* card title */
+  --text-2xl:  30px;                             /* section heading — DESIGN.md §3 */
+  --text-3xl:  40px;                             /* H1 */
+  --text-4xl:  64px;                             /* display ceiling (320px hero is inline-only) */
+
+  /* Leading + tracking.
+   * `--leading-body: 1.5` is universalSans body (DESIGN.md §3).
+   * `--leading-tight: 1.2` matches the 30px section heading.
+   * `--tracking-display: normal` because GeistMono at scale does
+   * NOT compress letter-spacing — the monospace grid is the
+   * aesthetic and tightening would collapse it. */
+  --leading-body:     1.5;
+  --leading-tight:    1.2;
+  --tracking-display: normal;
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * DESIGN.md §5 documents a deliberately sparse scale concentrated
+   * at the small end: 4 / 8 / 24 / 48. We bind the full schema slot
+   * range — components reach for 1/2/6/12 most often; the
+   * intermediate tiers are preserved for edge cases where a
+   * narrower step is structurally required. */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-12: 48px;
+
+  /* Section rhythm — DESIGN.md §5: "generous section padding 48px–
+   * 96px". 96 desktop / 64 tablet / 48 phone preserves the
+   * cinematic emptiness that is itself a design statement; the
+   * absence of decoration means whitespace is the primary structural
+   * tool. */
+  --section-y-desktop: 96px;
+  --section-y-tablet:  64px;
+  --section-y-phone:   48px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * Brutalist precision. DESIGN.md §5: "Sharp (0px) primary
+   * treatment for buttons, cards, inputs — the default. Subtle (4px)
+   * occasional softening on secondary containers." `--radius-pill`
+   * stays at 9999px because the schema slot requires a pill value,
+   * even though xAI rarely renders one. */
+  --radius-sm:   0px;                            /* buttons, inputs — sharp */
+  --radius-md:   0px;                            /* cards — sharp */
+  --radius-lg:   4px;                            /* occasional secondary softening */
+  --radius-pill: 9999px;                         /* schema-required slot */
+
+  /* ─── Elevation ───────────────────────────────────────────────────
+   * Shadow-free system per DESIGN.md §6: "xAI rejects the
+   * conventional shadow-based elevation system entirely. There are
+   * no box-shadows anywhere on the site." `--elev-raised` is
+   * literally `none`; depth comes from opacity-based borders and
+   * background tints. `--elev-ring` preserves the hairline edge for
+   * components that read the elevation token. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: none;
+
+  /* ─── Focus ───────────────────────────────────────────────────────
+   * The single chromatic exception. Tailwind's default
+   * `--tw-ring-color` (DESIGN.md §2 "Ring Blue") at 50% opacity, as
+   * a 3px halo matching the `ring-2` shape xAI uses for keyboard
+   * accessibility focus states. Non-negotiable for a11y. */
+  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Schema defaults. xAI does not choreograph — transitions are
+   * short, purposeful, utilitarian. No long-form entrances. */
+  --motion-fast:   150ms;
+  --motion-base:   200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * DESIGN.md §5: "Max content width: approximately 1200px." Gutters
+   * narrow on mobile so the dense-but-deliberate vertical rhythm
+   * keeps reading even when the dark canvas reaches the edge. */
+  --container-max:            1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet:  16px;
+  --container-gutter-phone:   12px;
+}