@aexol/spectral 0.9.270 → 0.9.272

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

@@ -1,268 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * 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;
-}