From 61df5e3dccfce2c688bf3e2be59d5f3ba0d5f2e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mats=20T=C3=B6rnberg?= Date: Sat, 12 Sep 2026 18:41:42 +0200 Subject: [PATCH] non ai theme --- AGENTS.md | 40 +- src/App.css | 1755 +++++++++++++++++++++----- src/App.tsx | 32 +- src/components/AIWorkflowSection.tsx | 182 +++ src/components/Icon.tsx | 2 + src/components/RightRail.tsx | 15 +- src/components/Topbar.tsx | 26 +- src/components/ui/Alert.tsx | 53 + src/components/ui/Badge.tsx | 18 + src/components/ui/Card.tsx | 61 + src/components/ui/Dialog.tsx | 144 +++ src/components/ui/EmptyState.tsx | 48 + src/components/ui/Kbd.tsx | 6 + src/components/ui/Progress.tsx | 37 + src/components/ui/Sheet.tsx | 144 +++ src/components/ui/Skeleton.tsx | 32 + src/components/ui/StatCard.tsx | 85 ++ src/components/ui/Switch.tsx | 49 + src/components/ui/Table.tsx | 49 + src/components/ui/Tabs.tsx | 81 ++ src/components/ui/Tooltip.tsx | 19 + src/components/ui/index.ts | 14 + src/data/ai-rules.ts | 46 + src/data/library.ts | 24 +- src/index.css | 1 + src/tokens.css | 270 ++-- src/utils.css | 533 ++++++++ src/utils/cn.ts | 29 + 28 files changed, 3347 insertions(+), 448 deletions(-) create mode 100644 src/components/AIWorkflowSection.tsx create mode 100644 src/components/ui/Alert.tsx create mode 100644 src/components/ui/Badge.tsx create mode 100644 src/components/ui/Card.tsx create mode 100644 src/components/ui/Dialog.tsx create mode 100644 src/components/ui/EmptyState.tsx create mode 100644 src/components/ui/Kbd.tsx create mode 100644 src/components/ui/Progress.tsx create mode 100644 src/components/ui/Sheet.tsx create mode 100644 src/components/ui/Skeleton.tsx create mode 100644 src/components/ui/StatCard.tsx create mode 100644 src/components/ui/Switch.tsx create mode 100644 src/components/ui/Table.tsx create mode 100644 src/components/ui/Tabs.tsx create mode 100644 src/components/ui/Tooltip.tsx create mode 100644 src/components/ui/index.ts create mode 100644 src/data/ai-rules.ts create mode 100644 src/utils.css create mode 100644 src/utils/cn.ts diff --git a/AGENTS.md b/AGENTS.md index 8e0f8cb..769cc44 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -17,26 +17,42 @@ React 19 + Vite 8 + TypeScript design-system showcase. Dark-first, token-driven ## Design tokens — the contract -1. **Single source of truth: `src/tokens.css`.** Every font size, color, spacing, radius, and shadow color in `src/App.css` comes from a token. The guard `scripts/check-tokens.mjs` (in `npm run check`) bans hardcoded hex colors, px font sizes, and raw `rgba()` in application CSS — new colors go in as tokens, accent washes use `color-mix(in srgb, var(--accent) N%, transparent)`. -2. Typography scale (`--text-3xs` … `--text-2xl`, `--text-hero`) is rem-based on a 9→28px grid. Longform body `--text-md`, buttons/nav `--text-xs`, meta/eyebrows `--text-2xs`/`--text-3xs`. -3. **Global density knob: `--root-font-size`** (default `112%` readability preset, baseline 16px = `100%`). One line scales every token-driven size app-wide; spacing tokens follow. -4. **Theming:** components read only `var(--*)` and never know the theme. `:root[data-theme='light']` in tokens.css holds the daylight palette. Toggle = `document.documentElement.dataset.theme` (Topbar's sun/moon button, persisted in `localStorage['ns-theme']`). Adding a third theme = one more token block. -5. "Make the small text a bit larger" = bump `--text-xs`/`--text-2xs`. "Soften a surface" = its token. No grep, no per-component edits. +1. **Single source of truth: `src/tokens.css`.** Every font size, color, spacing, radius, and shadow color comes from a token. The palette is defined in modern CSS Color 4 `lab(...)` color space: + - Dark theme (`.dark`, `[data-theme='dark']`): Pitch black base (`lab(0% 0 0)`), deep cards (`lab(.903296% 0 0)`), radiant electric mint/cyan primary (`lab(89.9321% -47.9163 -15.7303)`), vivid destructive (`lab(54.5811% 71.684 50.9279)`), chart colors 1–5, and subtle dot grid (`--dot-color`). + - Light theme (`:root`, `[data-theme='light']`): Pure white daylight base (`lab(100% 0 0)`), crisp charcoal primary (`lab(7.78201% -.0000149012 0)`), and high-contrast surfaces. +2. The guard `scripts/check-tokens.mjs` (in `npm run check`) bans hardcoded hex colors, px font sizes, and raw `rgba()` in application CSS — new colors go in as tokens, accent washes use `color-mix(in srgb, var(--primary) N%, transparent)`. +3. Typography scale (`--text-3xs` … `--text-2xl`, `--text-hero`) is rem-based on a 9→28px grid. Longform body `--text-md`, buttons/nav `--text-xs`, meta/eyebrows `--text-2xs`/`--text-3xs`. +4. **Global density knob: `--root-font-size`** (default `112%` readability preset, baseline 16px = `100%`). One line scales every token-driven size app-wide; spacing tokens follow. +5. **Theming:** components read only `var(--*)` and never know the theme. Toggle synchronizes both `document.documentElement.dataset.theme` and `.dark`/`.light` classes. + +## Smart Utils & AI Workflow + +- **Class helper**: `src/utils/cn.ts` — zero-dependency classnames merging utility for conditional component styles. +- **Smart CSS**: `src/utils.css` — ready-to-use helpers (`.dot-canvas`, `.surface-card`, `.surface-sidebar`, `.badge-*`, `.hover-lift`, `.kbd-tag`, `.skeleton-pulse`). +- **Composable Primitives**: `src/components/ui/` (`Badge.tsx`, `Card.tsx`, `StatCard.tsx`, `Kbd.tsx`). +- **AI Agent System Prompt & Recipes**: `src/data/ai-rules.ts`. ## Structure ``` src/ - tokens.css ← design tokens + light theme (edit this first) - index.css ← fonts, tokens import, base resets - App.css ← all component styles (token-driven, plain CSS) - App.tsx ← page composition only - components/ ← one component per file, readable multi-line JSX - Topbar.tsx ← owns the theme toggle (useTheme inside) + tokens.css ← lab() design tokens + dark & light themes (edit this first) + utils.css ← token-compliant smart CSS utility classes + index.css ← fonts, tokens & utils import, base resets + App.css ← application component styles (token-driven, plain CSS) + App.tsx ← page composition & showcase layout + utils/ + cn.ts ← conditional classnames utility + components/ + ui/ ← composable UI primitives (Badge, Card, StatCard, Kbd) + AIWorkflowSection.tsx ← AI workflow and smart utils showcase + Topbar.tsx ← owns the theme toggle (.dark & data-theme) Hero.tsx, CodeSample.tsx, RightRail.tsx, ButtonMatrix.tsx, Sidebar.tsx, Section.tsx, FormField.tsx, TokenGrid.tsx, MarkdownRenderer.tsx, CodeEditor.tsx, Button.tsx, Icon.tsx - data/library.ts ← demo content for the showcase + data/ + library.ts ← demo content and color token data for the showcase + ai-rules.ts ← AI copilot prompt and quick implementation recipes scripts/check-tokens.mjs ← token contract guard (part of npm run check) ``` diff --git a/src/App.css b/src/App.css index eae3c92..adc87ad 100644 --- a/src/App.css +++ b/src/App.css @@ -4,361 +4,1490 @@ Patterns: • typography ......... var(--text-*) (+ var(--font-mono)) - • surfaces/borders ... var(--panel-*), var(--line-*), var(--text-*) - • accent washes ...... color-mix(in srgb, var(--accent) N%, transparent) - • spacing / radius ... var(--space-*), var(--radius-*) + • surfaces/borders ... var(--card), var(--border), var(--foreground) + • brand highlights ... var(--primary), var(--primary-foreground) + • muted copy ......... var(--muted-foreground) + • sidebar navigation . var(--sidebar-*), var(--sidebar-foreground) */ /* ── Shell & topbar ─────────────────────────────────────────── */ -.app-shell{min-height:100vh;background:var(--bg);background-image:radial-gradient(circle at 71% 1%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 28rem)} +.app-shell { + min-height: 100vh; + background: var(--background); + background-image: radial-gradient(circle at 71% 1%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 28rem); +} -.topbar{height:68px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px);display:flex;align-items:center;padding:0 var(--space-7);gap:var(--space-7);position:sticky;top:0;z-index:10} -.brand,.top-links,.top-search,.hero-actions,.showcase-foot,.status-line,.code-head,.section-heading,.release-icon,.input-with-action,.toggle-field{display:flex;align-items:center} +.topbar { + height: 68px; + border-bottom: 1px solid var(--border); + background: color-mix(in srgb, var(--background) 85%, transparent); + backdrop-filter: blur(18px); + display: flex; + align-items: center; + padding: 0 var(--space-7); + gap: var(--space-7); + position: sticky; + top: 0; + z-index: 10; +} -.brand{gap:10px;white-space:nowrap} -.brand-mark{width:26px;height:26px;border:1px solid var(--accent);border-radius:var(--radius-md);display:grid;place-items:center;transform:rotate(45deg)} -.brand-mark span{width:9px;height:9px;background:var(--accent);border-radius:3px} -.brand-mark.large{width:42px;height:42px;border-radius:var(--radius-xl)} -.brand-mark.large span{width:14px;height:14px} -.brand b{font-weight:800;letter-spacing:-.04em;font-size:var(--text-base)} +.brand, +.top-links, +.top-search, +.hero-actions, +.showcase-foot, +.status-line, +.code-head, +.section-heading, +.release-icon, +.input-with-action, +.toggle-field { + display: flex; + align-items: center; +} -.version,.api-pill,.nav-count{font:var(--text-3xs) var(--font-mono);color:var(--muted);border:1px solid var(--line);padding:var(--space-1) 7px;border-radius:var(--radius-sm)} +.brand { + gap: 10px; + white-space: nowrap; +} -.top-search{max-width:380px;flex:1;margin-left:auto;margin-right:auto;gap:10px;color:var(--subtle);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:var(--space-2) 11px} -.top-search:focus-within{border-color:var(--line-focus)} -.top-search input{background:none;border:0;outline:0;color:var(--text);min-width:0;flex:1;font-size:var(--text-sm)} -.top-search kbd{font:var(--text-3xs) var(--font-mono);color:var(--subtle);border:1px solid var(--line);border-radius:4px;padding:var(--space-1) var(--space-1)} +.brand-mark { + width: 26px; + height: 26px; + border: 1px solid var(--primary); + border-radius: var(--radius-md); + display: grid; + place-items: center; + transform: rotate(45deg); +} -.top-links{gap:var(--space-5);font-size:var(--text-sm);color:var(--muted)} -.top-links a:hover,.text-button:hover{color:var(--text)} +.brand-mark span { + width: 9px; + height: 9px; + background: var(--primary); + border-radius: 3px; +} -.icon-button,.avatar{border:0;background:none;color:var(--muted);display:grid;place-items:center;padding:7px;border-radius:var(--radius-md)} -.icon-button:hover{background:var(--panel-3);color:var(--text)} -.avatar{width:28px;height:28px;background:color-mix(in srgb,var(--accent) 14%,var(--panel-2));color:color-mix(in srgb,var(--accent) 85%,white);font-size:var(--text-3xs);font-weight:700} -.mobile-menu{display:none} +.brand-mark.large { + width: 42px; + height: 42px; + border-radius: var(--radius-xl); +} -.body-layout{display:grid;grid-template-columns:240px minmax(0,1fr)} +.brand-mark.large span { + width: 14px; + height: 14px; +} + +.brand b { + font-weight: 800; + letter-spacing: -0.04em; + font-size: var(--text-base); + color: var(--foreground); +} + +.version, +.api-pill, +.nav-count { + font: var(--text-3xs) var(--font-mono); + color: var(--muted-foreground); + border: 1px solid var(--border); + padding: var(--space-1) 7px; + border-radius: var(--radius-sm); +} + +.top-search { + max-width: 380px; + flex: 1; + margin-left: auto; + margin-right: auto; + gap: 10px; + color: var(--muted-foreground); + background: var(--card); + border: 1px solid var(--border); + border-radius: 7px; + padding: var(--space-2) 11px; +} + +.top-search:focus-within { + border-color: var(--ring); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); +} + +.top-search input { + background: none; + border: 0; + outline: 0; + color: var(--foreground); + min-width: 0; + flex: 1; + font-size: var(--text-sm); +} + +.top-search kbd { + font: var(--text-3xs) var(--font-mono); + color: var(--muted-foreground); + border: 1px solid var(--border); + border-radius: 4px; + padding: var(--space-1) var(--space-1); +} + +.top-links { + gap: var(--space-5); + font-size: var(--text-sm); + color: var(--muted-foreground); +} + +.top-links a { + color: var(--muted-foreground); + text-decoration: none; +} + +.top-links a:hover, +.text-button:hover { + color: var(--foreground); +} + +.icon-button, +.avatar { + border: 0; + background: none; + color: var(--muted-foreground); + display: grid; + place-items: center; + padding: 7px; + border-radius: var(--radius-md); +} + +.icon-button:hover { + background: var(--secondary); + color: var(--foreground); +} + +.avatar { + width: 28px; + height: 28px; + background: color-mix(in srgb, var(--primary) 18%, var(--secondary)); + color: var(--primary); + font-size: var(--text-3xs); + font-weight: 700; +} + +.mobile-menu { + display: none; +} + +.body-layout { + display: grid; + grid-template-columns: 240px minmax(0, 1fr); +} /* ── Sidebar ────────────────────────────────────────────────── */ -.sidebar{border-right:1px solid var(--line);min-height:calc(100vh - 68px);padding:var(--space-7) var(--space-4) var(--space-6);display:flex;flex-direction:column;position:sticky;top:68px;height:calc(100vh - 68px)} -.sidebar-intro{padding:0 var(--space-3) var(--space-7);border-bottom:1px solid var(--line);margin-bottom:var(--space-6)} -.sidebar-intro p{font-size:var(--text-3xs);line-height:1.6;color:var(--subtle);margin:var(--space-2) 0 0;max-width:150px} +.sidebar { + border-right: 1px solid var(--sidebar-border); + min-height: calc(100vh - 68px); + padding: var(--space-5) 0 var(--space-4); + display: flex; + flex-direction: column; + position: sticky; + top: 68px; + height: calc(100vh - 68px); + background: var(--sidebar); +} -.eyebrow,.section-index,.nav-label{font:var(--text-3xs) var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)} -.accent{color:var(--accent)} +.sidebar-heading { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5) var(--space-5); + border-bottom: 1px solid var(--sidebar-border); +} -.nav-group{margin-bottom:var(--space-6)} -.nav-label{display:block;padding:0 var(--space-3);margin-bottom:9px} -.nav-item{width:100%;border:0;background:none;color:var(--muted);text-align:left;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);display:flex;align-items:center;gap:10px;transition:.2s} -.nav-item:hover{color:var(--text);background:var(--panel)} -.nav-item.active{color:var(--text);background:var(--panel-3);box-shadow:inset 2px 0 var(--accent)} -.nav-dot{width:4px;height:4px;border-radius:50%;background:var(--subtle)} -.active .nav-dot{background:var(--accent)} -.nav-count{margin-left:auto;padding:2px var(--space-1);color:var(--accent);border-color:var(--line-hover)} -.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:var(--space-4) var(--space-3) 0} -.status-line{gap:var(--space-2);color:var(--muted);font-size:var(--text-3xs);margin-bottom:7px} -.status-dot{width:6px;height:6px;background:var(--positive);box-shadow:0 0 10px var(--positive);border-radius:50%} -.mono{font-family:var(--font-mono);font-size:var(--text-3xs)} -.muted{color:var(--subtle)} +.sidebar-library { + display: flex; + align-items: center; + gap: var(--space-2); + color: var(--sidebar-foreground); + font: 500 var(--text-xs) var(--font-mono); + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.sidebar-library svg { + color: var(--sidebar-primary); +} + +.sidebar-collapse { + border: 0; + background: none; + color: var(--muted-foreground); + font: var(--text-xs) var(--font-mono); + padding: 4px 0; +} + +.sidebar-collapse:hover { + color: var(--sidebar-foreground); +} + +.sidebar-intro { + padding: var(--space-5) var(--space-5) var(--space-5); + margin: 0; + border-bottom: 1px solid var(--sidebar-border); +} + +.sidebar-intro p { + font-size: var(--text-3xs); + line-height: 1.6; + color: var(--muted-foreground); + margin: var(--space-2) 0 0; + max-width: 180px; +} + +.eyebrow, +.section-index, +.nav-label { + font: var(--text-3xs) var(--font-mono); + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--muted-foreground); +} + +.accent { + color: var(--primary); +} + +.sidebar nav { + padding-top: var(--space-5); +} + +.nav-group { + margin-bottom: var(--space-5); +} + +.nav-label { + display: block; + padding: 0 var(--space-5); + margin-bottom: var(--space-2); + color: var(--muted-foreground); + font-size: var(--text-3xs); +} + +.nav-item { + position: relative; + width: 100%; + border: 0; + background: none; + color: var(--sidebar-foreground); + text-align: left; + padding: 9px var(--space-5); + border-radius: 0; + font-size: var(--text-sm); + display: flex; + align-items: center; + gap: 11px; + letter-spacing: -0.01em; + transition: 0.2s; +} + +.nav-item:hover { + color: var(--sidebar-accent-foreground); + background: var(--sidebar-accent); +} + +.nav-item.active { + color: var(--sidebar-foreground); + background: linear-gradient(90deg, color-mix(in srgb, var(--sidebar-primary) 18%, transparent), color-mix(in srgb, var(--sidebar-primary) 5%, transparent)); + box-shadow: inset 2px 0 var(--sidebar-primary); +} + +.nav-item.active::before { + content: ""; + position: absolute; + right: var(--space-5); + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--sidebar-primary); + box-shadow: 0 0 10px color-mix(in srgb, var(--sidebar-primary) 80%, transparent); +} + +.nav-glyph { + width: 13px; + color: var(--muted-foreground); + font: var(--text-md) var(--font-mono); + line-height: 1; + text-align: center; +} + +.nav-item.active .nav-glyph { + color: var(--sidebar-primary); +} + +.nav-count { + margin-left: auto; + padding: 0; + border: 0; + background: none; + color: var(--sidebar-primary); + font-size: var(--text-3xs); +} + +.sidebar-bottom { + margin-top: auto; + border-top: 1px solid var(--sidebar-border); + padding: var(--space-4) var(--space-5) 0; +} + +.status-line { + gap: var(--space-2); + color: var(--muted-foreground); + font-size: var(--text-3xs); + margin-bottom: 7px; +} + +.status-dot { + width: 6px; + height: 6px; + background: var(--chart-2); + box-shadow: 0 0 10px var(--chart-2); + border-radius: 50%; +} + +.mono { + font-family: var(--font-mono); + font-size: var(--text-3xs); +} + +.muted { + color: var(--muted-foreground); +} /* ── Main column ────────────────────────────────────────────── */ -.main-content{min-width:0} -.breadcrumbs{max-width:1180px;margin:0 auto;padding:var(--space-6) var(--space-9) 0;display:flex;gap:10px;font:var(--text-3xs) var(--font-mono);color:var(--subtle)} -.breadcrumbs strong{color:var(--accent);font-weight:400} +.main-content { + min-width: 0; +} -.hero-section{max-width:1180px;margin:0 auto;padding:var(--space-10) var(--space-9) var(--space-11);display:flex;justify-content:space-between;gap:var(--space-8);min-height:386px} -.hero-copy{max-width:590px} -.hero-copy h1{font-size:var(--text-hero);line-height:1.02;letter-spacing:-.07em;margin:var(--space-4) 0 var(--space-5);font-weight:800} -.hero-copy p{color:var(--muted);font-size:var(--text-base);line-height:1.7;max-width:510px} -.hero-actions{gap:var(--space-3);margin-top:var(--space-7)} +.breadcrumbs { + max-width: 1180px; + margin: 0 auto; + padding: var(--space-6) var(--space-9) 0; + display: flex; + gap: 10px; + font: var(--text-3xs) var(--font-mono); + color: var(--muted-foreground); +} -.button{border:1px solid transparent;border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);color:var(--text);font-size:var(--text-xs);display:inline-flex;align-items:center;gap:var(--space-2);transition:.2s;white-space:nowrap} -.button.primary{background:var(--accent);color:var(--accent-contrast);font-weight:700} -.button.primary:hover{filter:brightness(1.12);transform:translateY(-1px)} -.button.secondary{background:var(--panel-3);border-color:var(--line)} -.button.secondary:hover,.button.hover-state{background:var(--panel-active)} -.button.danger{background:color-mix(in srgb,var(--critical) 12%,transparent);color:var(--critical);border-color:color-mix(in srgb,var(--critical) 18%,transparent)} -.button.ghost{background:transparent;color:var(--muted)} -.button.ghost:hover{color:var(--text);background:var(--panel)} +.breadcrumbs strong { + color: var(--primary); + font-weight: 500; +} -.hero-orbit{width:280px;height:225px;position:relative;flex:0 0 280px;margin:var(--space-2) var(--space-8) 0 0} -.orbit{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line-soft));border-radius:50%;transform:rotate(-22deg)} -.orbit-one{width:270px;height:112px;top:45px;left:0} -.orbit-two{width:215px;height:215px;top:2px;left:28px;transform:rotate(58deg);border-color:color-mix(in srgb,var(--accent) 6%,var(--line-soft))} -.orbit-core{position:absolute;top:71px;right:88px;width:105px;height:83px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--panel-3));background:color-mix(in srgb,var(--panel-3) 88%,transparent);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;gap:var(--space-2);color:var(--muted);font:var(--text-3xs) var(--font-mono);line-height:1.4;box-shadow:0 0 45px color-mix(in srgb,var(--accent) 12%,transparent)} -.orbit-core b{color:var(--positive);font-weight:400} -.orbit-label{position:absolute;font:var(--text-3xs) var(--font-mono);color:var(--subtle);letter-spacing:.08em} -.orbit-label b{display:block;color:var(--accent);font-weight:400;margin-top:4px} -.label-one{top:13px;right:5px} -.label-two{bottom:4px;left:7px} -.label-three{bottom:31px;right:0} +.hero-section { + max-width: 1180px; + margin: 0 auto; + padding: var(--space-10) var(--space-9) var(--space-11); + display: flex; + justify-content: space-between; + gap: var(--space-8); + min-height: 386px; +} -.content-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--space-10);padding:0 var(--space-9)} -.content-main{min-width:0} +.hero-copy { + max-width: 590px; +} -.section-block{padding:var(--space-9) 0;border-top:1px solid var(--line)} -.section-heading{justify-content:space-between;align-items:flex-start;gap:var(--space-5)} -.section-heading h2{font-size:var(--text-2xl);letter-spacing:-.05em;margin:10px 0 7px} -.section-heading p{margin:0;color:var(--muted);font-size:var(--text-sm)} -.api-pill{white-space:nowrap;margin-top:var(--space-1)} -.text-button{display:inline-flex;gap:var(--space-2);align-items:center;border:0;background:none;color:var(--accent);font-size:var(--text-xs);margin-top:10px} +.hero-copy h1 { + font-size: var(--text-hero); + line-height: 1.02; + letter-spacing: -0.07em; + margin: var(--space-4) 0 var(--space-5); + font-weight: 800; +} + +.hero-copy p { + color: var(--muted-foreground); + font-size: var(--text-base); + line-height: 1.7; + max-width: 510px; +} + +.hero-actions { + gap: var(--space-3); + margin-top: var(--space-7); +} + +/* ── Action buttons ─────────────────────────────────────────── */ +.button { + border: 1px solid transparent; + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-4); + color: var(--foreground); + font-size: var(--text-xs); + display: inline-flex; + align-items: center; + gap: var(--space-2); + transition: 0.2s; + white-space: nowrap; + font-weight: 500; + position: relative; + overflow: hidden; +} + +.button.primary { + background: var(--primary); + color: var(--primary-foreground); + font-weight: 700; + box-shadow: 0 4px 18px color-mix(in srgb, var(--primary) 28%, transparent); +} + +.button.primary:hover { + filter: brightness(1.1); + transform: translateY(-1px); + box-shadow: 0 6px 22px color-mix(in srgb, var(--primary) 40%, transparent); +} + +.button.secondary { + background: color-mix(in srgb, var(--foreground) 8%, var(--card)); + border: 1px solid color-mix(in srgb, var(--foreground) 16%, var(--border)); + color: var(--foreground); +} + +.button.secondary:hover, +.button.hover-state { + background: color-mix(in srgb, var(--foreground) 14%, var(--card)); + border-color: var(--ring); +} + +.button.danger { + background: color-mix(in srgb, var(--destructive) 14%, transparent); + color: var(--destructive); + border: 1px solid color-mix(in srgb, var(--destructive) 32%, transparent); +} + +.button.danger:hover { + background: var(--destructive); + color: var(--destructive-foreground); +} + +.button.ghost { + background: transparent; + color: var(--muted-foreground); +} + +.button.ghost:hover { + color: var(--foreground); + background: var(--accent); +} + +.hero-orbit { + width: 280px; + height: 225px; + position: relative; + flex: 0 0 280px; + margin: var(--space-2) var(--space-8) 0 0; +} + +.orbit { + position: absolute; + border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border)); + border-radius: 50%; + transform: rotate(-22deg); +} + +.orbit-one { + width: 270px; + height: 112px; + top: 45px; + left: 0; +} + +.orbit-two { + width: 215px; + height: 215px; + top: 2px; + left: 28px; + transform: rotate(58deg); + border-color: color-mix(in srgb, var(--primary) 8%, var(--border)); +} + +.orbit-core { + position: absolute; + top: 71px; + right: 88px; + width: 105px; + height: 83px; + border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); + background: color-mix(in srgb, var(--card) 90%, transparent); + border-radius: var(--radius-xl); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + color: var(--muted-foreground); + font: var(--text-3xs) var(--font-mono); + line-height: 1.4; + box-shadow: 0 0 45px color-mix(in srgb, var(--primary) 14%, transparent); +} + +.orbit-core b { + color: var(--chart-2); + font-weight: 500; +} + +.orbit-label { + position: absolute; + font: var(--text-3xs) var(--font-mono); + color: var(--muted-foreground); + letter-spacing: 0.08em; +} + +.orbit-label b { + display: block; + color: var(--primary); + font-weight: 600; + margin-top: 4px; +} + +.label-one { top: 13px; right: 5px; } +.label-two { bottom: 4px; left: 7px; } +.label-three { bottom: 31px; right: 0; } + +.content-grid { + max-width: 1180px; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 1fr) 220px; + gap: var(--space-10); + padding: 0 var(--space-9); +} + +.content-main { + min-width: 0; +} + +.section-block { + padding: var(--space-9) 0; + border-top: 1px solid var(--border); +} + +.section-heading { + justify-content: space-between; + align-items: flex-start; + gap: var(--space-5); +} + +.section-heading h2 { + font-size: var(--text-2xl); + letter-spacing: -0.05em; + margin: 10px 0 7px; + color: var(--foreground); +} + +.section-heading p { + margin: 0; + color: var(--muted-foreground); + font-size: var(--text-sm); +} + +.api-pill { + white-space: nowrap; + margin-top: var(--space-1); +} + +.text-button { + display: inline-flex; + gap: var(--space-2); + align-items: center; + border: 0; + background: none; + color: var(--primary); + font-size: var(--text-xs); + margin-top: 10px; +} /* ── Button showcase ────────────────────────────────────────── */ -.tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--line);margin-top:var(--space-7)} -.tab{border:0;background:none;color:var(--subtle);font-size:var(--text-xs);padding:0 0 var(--space-3);border-bottom:1px solid transparent} -.tab.active{color:var(--text);border-color:var(--accent)} -.showcase{margin-top:var(--space-5);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} -.showcase-head,.showcase-foot{padding:var(--space-4) var(--space-4);border-bottom:1px solid var(--line);justify-content:space-between} -.button-matrix{padding:7px var(--space-4);overflow-x:auto} -.button-row{min-height:58px;min-width:560px;display:grid;grid-template-columns:90px 1fr 1fr 42px 1fr;align-items:center;gap:var(--space-4);border-bottom:1px solid var(--line-soft)} -.button-row:last-child{border:0} -.row-label{font:var(--text-3xs) var(--font-mono);color:var(--muted)} -.icon-only{padding:var(--space-2)!important;justify-content:center} -.loading{color:var(--muted)!important;background:var(--panel-2)!important;border-color:var(--line)!important} -.spinner{width:12px;height:12px;border:2px solid color-mix(in srgb,var(--muted) 25%,var(--panel-3));border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite} -@keyframes spin{to{transform:rotate(360deg)}} -.showcase-foot{border-top:1px solid var(--line);border-bottom:0;justify-content:flex-start;gap:7px} -.density{border:1px solid transparent;background:none;color:var(--subtle);font:var(--text-3xs) var(--font-mono);padding:var(--space-2) var(--space-2);border-radius:var(--radius-sm)} -.density span{color:var(--subtle)} -.density.active{background:color-mix(in srgb,var(--accent) 10%,var(--panel-3));color:var(--accent)} -.foot-check{margin-left:auto;color:var(--positive);font:var(--text-3xs) var(--font-mono);display:flex;align-items:center;gap:var(--space-1)} +.tabs { + display: flex; + gap: var(--space-5); + border-bottom: 1px solid var(--border); + margin-top: var(--space-7); +} + +.tab { + border: 0; + background: none; + color: var(--muted-foreground); + font-size: var(--text-xs); + padding: 0 0 var(--space-3); + border-bottom: 1px solid transparent; +} + +.tab.active { + color: var(--foreground); + border-color: var(--primary); +} + +.showcase { + margin-top: var(--space-5); + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + overflow: hidden; +} + +.showcase-head, +.showcase-foot { + padding: var(--space-4) var(--space-4); + border-bottom: 1px solid var(--border); + justify-content: space-between; +} + +.button-matrix { + padding: 7px var(--space-4); + overflow-x: auto; +} + +.button-row { + min-height: 58px; + min-width: 560px; + display: grid; + grid-template-columns: 90px 1fr 1fr 42px 1fr; + align-items: center; + gap: var(--space-4); + border-bottom: 1px solid var(--border); +} + +.button-row:last-child { + border: 0; +} + +.row-label { + font: var(--text-3xs) var(--font-mono); + color: var(--muted-foreground); +} + +.icon-only { + padding: var(--space-2) !important; + justify-content: center; +} + +.loading { + color: var(--muted-foreground) !important; + background: color-mix(in srgb, var(--foreground) 6%, var(--card)) !important; + border: 1px solid var(--border) !important; +} + +.spinner { + width: 12px; + height: 12px; + border: 2px solid color-mix(in srgb, var(--muted-foreground) 25%, transparent); + border-top-color: var(--primary); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.showcase-foot { + border-top: 1px solid var(--border); + border-bottom: 0; + justify-content: flex-start; + gap: 7px; +} + +.density { + border: 1px solid transparent; + background: none; + color: var(--muted-foreground); + font: var(--text-3xs) var(--font-mono); + padding: var(--space-2) var(--space-2); + border-radius: var(--radius-sm); +} + +.density.active { + background: color-mix(in srgb, var(--primary) 14%, var(--secondary)); + color: var(--primary); +} + +.foot-check { + margin-left: auto; + color: var(--chart-2); + font: var(--text-3xs) var(--font-mono); + display: flex; + align-items: center; + gap: var(--space-1); +} /* ── Color tokens & forms ───────────────────────────────────── */ -.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin-top:var(--space-5)} -.color-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-3);display:grid;grid-template-columns:32px 1fr 16px;align-items:center;gap:9px} -.swatch{width:32px;height:32px;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} -.color-card strong,.color-card span{display:block;font-size:var(--text-xs)} -.color-card .mono{color:var(--subtle);margin-top:4px} -.copy-icon{border:0;background:none;color:var(--subtle);padding:0} -.copy-icon:hover{color:var(--text)} +.color-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-2); + margin-top: var(--space-5); +} -.forms-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-4);margin-top:var(--space-5);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5)} -.field{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted)} -.field em{font:var(--text-3xs) var(--font-mono);font-style:normal;color:var(--accent);float:right;text-transform:uppercase} -.field input{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3);color:var(--text);outline:0;font-size:var(--text-sm)} -.field input:focus{border-color:var(--line-focus)} -.field small,.toggle-field small{font-size:var(--text-3xs);color:var(--subtle)} -.input-with-action{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm)} -.input-with-action input{border:0;flex:1;min-width:0;background:transparent} -.input-with-action button{border:0;background:none;color:var(--subtle);padding:0 11px} -.toggle-field{grid-column:1/-1;background:var(--panel-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3);justify-content:space-between} -.toggle-field b,.toggle-field small{display:block} -.toggle-field small{margin-top:4px} -.toggle{width:36px;height:20px;border:0;border-radius:var(--radius-pill);background:var(--line);padding:var(--space-1)} -.toggle span{display:block;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:.2s} -.toggle.on{background:var(--accent)} -.toggle.on span{background:var(--accent-contrast);transform:translateX(16px)} -.bottom-section{padding-bottom:var(--space-7)} +.color-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: var(--space-3); + display: grid; + grid-template-columns: 32px 1fr 16px; + align-items: center; + gap: 9px; +} + +.swatch { + width: 32px; + height: 32px; + border-radius: var(--radius-md); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); +} + +.color-card strong, +.color-card span { + display: block; + font-size: var(--text-xs); + color: var(--foreground); +} + +.color-card .mono { + color: var(--muted-foreground); + margin-top: 4px; +} + +.copy-icon { + border: 0; + background: none; + color: var(--muted-foreground); + padding: 0; +} + +.copy-icon:hover { + color: var(--foreground); +} + +.forms-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-5) var(--space-4); + margin-top: var(--space-5); + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: var(--space-5); +} + +.field { + display: flex; + flex-direction: column; + gap: var(--space-2); + font-size: var(--text-xs); + color: var(--muted-foreground); +} + +.field em { + font: var(--text-3xs) var(--font-mono); + font-style: normal; + color: var(--primary); + float: right; + text-transform: uppercase; +} + +.field input { + background: var(--secondary); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + padding: var(--space-3); + color: var(--foreground); + outline: 0; + font-size: var(--text-sm); +} + +.field input:focus { + border-color: var(--ring); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); +} + +.field small, +.toggle-field small { + font-size: var(--text-3xs); + color: var(--muted-foreground); +} + +.input-with-action { + background: var(--secondary); + border: 1px solid var(--border); + border-radius: var(--radius-sm); +} + +.input-with-action input { + border: 0; + flex: 1; + min-width: 0; + background: transparent; + color: var(--foreground); +} + +.input-with-action button { + border: 0; + background: none; + color: var(--muted-foreground); + padding: 0 11px; +} + +.toggle-field { + grid-column: 1 / -1; + background: color-mix(in srgb, var(--foreground) 3%, var(--card)); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-3); + justify-content: space-between; +} + +.toggle-field b { + color: var(--foreground); +} + +.toggle-field b, +.toggle-field small { + display: block; +} + +.toggle-field small { + margin-top: 4px; +} + +.toggle { + width: 36px; + height: 20px; + border: 0; + border-radius: var(--radius-pill); + background: var(--border); + padding: var(--space-1); +} + +.toggle span { + display: block; + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--muted-foreground); + transition: 0.2s; +} + +.toggle.on { + background: var(--primary); +} + +.toggle.on span { + background: var(--primary-foreground); + transform: translateX(16px); +} + +.bottom-section { + padding-bottom: var(--space-7); +} /* ── Code presentation ──────────────────────────────────────── */ -.code-card{background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius-lg);margin-top:var(--space-5);overflow:hidden} -.code-head{justify-content:space-between;background:var(--panel);padding:10px var(--space-4);border-bottom:1px solid var(--line)} -.segmented{display:flex;gap:var(--space-1)} -.segmented button,.copy-button{border:0;background:none;color:var(--subtle);font:var(--text-3xs) var(--font-mono);padding:var(--space-1) 7px;border-radius:4px} -.segmented button.selected{background:color-mix(in srgb,var(--accent) 10%,var(--panel-3));color:var(--accent)} -.copy-button{display:flex;gap:var(--space-1);align-items:center} -.copy-button:hover{color:var(--text)} -.code-card pre{margin:0;padding:var(--space-5);font:var(--text-sm)/1.7 var(--font-mono);color:var(--text-code);overflow:auto} -.pink{color:var(--pink)} -.green{color:var(--positive)} -.blue{color:var(--blue)} +.code-card { + background: var(--sidebar); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + margin-top: var(--space-5); + overflow: hidden; +} + +.code-head { + justify-content: space-between; + background: var(--card); + padding: 10px var(--space-4); + border-bottom: 1px solid var(--border); +} + +.segmented { + display: flex; + gap: var(--space-1); +} + +.segmented button, +.copy-button { + border: 0; + background: none; + color: var(--muted-foreground); + font: var(--text-3xs) var(--font-mono); + padding: var(--space-1) 7px; + border-radius: 4px; +} + +.segmented button.selected { + background: color-mix(in srgb, var(--primary) 14%, var(--secondary)); + color: var(--primary); + font-weight: 500; +} + +.copy-button { + display: flex; + gap: var(--space-1); + align-items: center; +} + +.copy-button:hover { + color: var(--foreground); +} + +.code-card pre { + margin: 0; + padding: var(--space-5); + font: var(--text-sm) / 1.7 var(--font-mono); + color: var(--foreground); + overflow: auto; +} + +.pink { color: var(--chart-5); } +.green { color: var(--chart-2); } +.blue { color: var(--chart-4); } /* ── Right rail & footer ────────────────────────────────────── */ -.right-rail{padding-top:var(--space-9)} -.rail-card{border-top:1px solid var(--line);padding:var(--space-4) 0 var(--space-5)} -.rail-link{display:flex;gap:11px;padding:9px 0;color:var(--muted);font-size:var(--text-xs);text-decoration:none} -.rail-link span{font:var(--text-3xs) var(--font-mono);color:var(--subtle)} -.rail-link.active,.rail-link:hover{color:var(--accent)} -.release{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 4%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--accent) 8%,var(--line-soft));border-radius:var(--radius-lg);padding:var(--space-4);margin:10px 0 var(--space-4)} -.release-icon{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel-3));width:31px;height:31px;justify-content:center;border-radius:7px;margin-bottom:var(--space-4)} -.release strong{font-size:var(--text-sm)} -.release p,.rail-copy{color:var(--muted);font-size:var(--text-xs);line-height:1.7;margin:var(--space-2) 0 var(--space-4)} -.full{width:100%;justify-content:center} -.release .text-button{margin-top:0} -footer{max-width:1180px;margin:0 auto;padding:var(--space-7) var(--space-9) var(--space-8);border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--subtle);font-size:var(--text-3xs)} +.right-rail { + padding-top: var(--space-9); +} + +.rail-card { + border-top: 1px solid var(--border); + padding: var(--space-4) 0 var(--space-5); +} + +.rail-link { + display: flex; + gap: 11px; + padding: 9px 0; + color: var(--muted-foreground); + font-size: var(--text-xs); + text-decoration: none; +} + +.rail-link span { + font: var(--text-3xs) var(--font-mono); + color: var(--muted-foreground); +} + +.rail-link.active, +.rail-link:hover { + color: var(--primary); +} + +.release { + background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 6%, var(--card)), var(--card)); + border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border)); + border-radius: var(--radius-lg); + padding: var(--space-4); + margin: 10px 0 var(--space-4); +} + +.release-icon { + color: var(--primary); + background: color-mix(in srgb, var(--primary) 14%, var(--secondary)); + width: 31px; + height: 31px; + justify-content: center; + border-radius: 7px; + margin-bottom: var(--space-4); +} + +.release strong { + font-size: var(--text-sm); + color: var(--foreground); +} + +.release p, +.rail-copy { + color: var(--muted-foreground); + font-size: var(--text-xs); + line-height: 1.7; + margin: var(--space-2) 0 var(--space-4); +} + +.full { + width: 100%; + justify-content: center; +} + +.release .text-button { + margin-top: 0; +} + +footer { + max-width: 1180px; + margin: 0 auto; + padding: var(--space-7) var(--space-9) var(--space-8); + border-top: 1px solid var(--border); + display: flex; + justify-content: space-between; + color: var(--muted-foreground); + font-size: var(--text-3xs); +} /* ── Responsive ─────────────────────────────────────────────── */ -@media(max-width:1020px){ - .topbar{padding:0 var(--space-5);gap:var(--space-4)} - .top-links a{display:none} - .body-layout{grid-template-columns:200px minmax(0,1fr)} - .hero-section,.content-grid{padding-left:var(--space-7);padding-right:var(--space-7)} - .content-grid{gap:var(--space-7);grid-template-columns:minmax(0,1fr) 190px} - .hero-orbit{transform:scale(.82);transform-origin:right top;margin-right:0} +@media (max-width: 1020px) { + .topbar { padding: 0 var(--space-5); gap: var(--space-4); } + .top-links a { display: none; } + .body-layout { grid-template-columns: 200px minmax(0, 1fr); } + .hero-section, .content-grid { padding-left: var(--space-7); padding-right: var(--space-7); } + .content-grid { gap: var(--space-7); grid-template-columns: minmax(0, 1fr) 190px; } + .hero-orbit { transform: scale(0.82); transform-origin: right top; margin-right: 0; } } -@media(max-width:760px){ - .topbar{height:60px} - .top-search{order:3;position:absolute;left:18px;right:18px;top:68px;max-width:none;display:none} - .top-links{margin-left:auto} - .mobile-menu{display:grid} - .body-layout{display:block} - .sidebar{display:none;position:fixed;z-index:9;top:60px;left:0;right:0;bottom:0;height:auto;background:color-mix(in srgb,var(--bg) 98%,transparent);border:0} - .menu-open .sidebar{display:flex} - .breadcrumbs{padding:var(--space-5) var(--space-5) 0} - .hero-section{display:block;padding:var(--space-9) var(--space-5) var(--space-10)} - .hero-copy h1{font-size:var(--text-hero)} - .hero-orbit{display:none} - .content-grid{display:block;padding:0 var(--space-5)} - .right-rail{display:none} - .section-block{padding:var(--space-7) 0} - .section-heading{display:block} - .api-pill{display:inline-block;margin-top:var(--space-4)} - .button-row{grid-template-columns:70px 1fr 1fr;gap:var(--space-2)} - .button-row .icon-only,.button-row .loading{display:none} - .color-grid{grid-template-columns:1fr 1fr} - .forms-grid{grid-template-columns:1fr} - .toggle-field{grid-column:auto} - footer{padding:var(--space-6) var(--space-5) var(--space-7);display:block} - footer .mono{display:block;margin-top:var(--space-2)} + +@media (max-width: 760px) { + .topbar { height: 60px; } + .top-search { order: 3; position: absolute; left: 18px; right: 18px; top: 68px; max-width: none; display: none; } + .top-links { margin-left: auto; } + .mobile-menu { display: grid; } + .body-layout { display: block; } + .sidebar { display: none; position: fixed; z-index: 9; top: 60px; left: 0; right: 0; bottom: 0; height: auto; background: color-mix(in srgb, var(--background) 98%, transparent); border: 0; } + .menu-open .sidebar { display: flex; } + .breadcrumbs { padding: var(--space-5) var(--space-5) 0; } + .hero-section { display: block; padding: var(--space-9) var(--space-5) var(--space-10); } + .hero-copy h1 { font-size: var(--text-hero); } + .hero-orbit { display: none; } + .content-grid { display: block; padding: 0 var(--space-5); } + .right-rail { display: none; } + .section-block { padding: var(--space-7) 0; } + .section-heading { display: block; } + .api-pill { display: inline-block; margin-top: var(--space-4); } + .button-row { grid-template-columns: 70px 1fr 1fr; gap: var(--space-2); } + .button-row .icon-only, .button-row .loading { display: none; } + .color-grid { grid-template-columns: 1fr 1fr; } + .forms-grid { grid-template-columns: 1fr; } + .toggle-field { grid-column: auto; } + footer { padding: var(--space-6) var(--space-5) var(--space-7); display: block; } + footer .mono { display: block; margin-top: var(--space-2); } } -@media(max-width:450px){ - .version{display:none} - .brand b{font-size:var(--text-md)} - .hero-actions{align-items:stretch;flex-direction:column} - .hero-actions .button{justify-content:center} - .button-row{grid-template-columns:58px 1fr 1fr} - .button{padding:var(--space-2);font-size:var(--text-2xs)} - .showcase-foot{flex-wrap:wrap} - .foot-check{margin-left:0;width:100%;margin-top:var(--space-2)} - .color-card{grid-template-columns:28px 1fr} - .color-card .swatch{width:28px;height:28px} - .color-card .copy-icon{display:none} + +@media (max-width: 450px) { + .version { display: none; } + .brand b { font-size: var(--text-md); } + .hero-actions { align-items: stretch; flex-direction: column; } + .hero-actions .button { justify-content: center; } + .button-row { grid-template-columns: 58px 1fr 1fr; } + .button { padding: var(--space-2); font-size: var(--text-2xs); } + .showcase-foot { flex-wrap: wrap; } + .foot-check { margin-left: 0; width: 100%; margin-top: var(--space-2); } + .color-card { grid-template-columns: 28px 1fr; } + .color-card .swatch { width: 28px; height: 28px; } + .color-card .copy-icon { display: none; } } /* ── Markdown & CodeMirror surfaces ─────────────────────────── */ -.markdown-card,.editor-card{margin-top:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel)} -.markdown-toolbar,.editor-tabs{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);background:var(--bg-deep)} -.markdown-body{max-width:700px;margin:0 auto;padding:var(--space-8) var(--space-9) var(--space-8);color:var(--text-soft);font-size:var(--text-md);line-height:1.75} -.md-kicker{font:var(--text-3xs) var(--font-mono);letter-spacing:.13em;color:var(--accent)} -.markdown-body h3{color:var(--text);font-size:var(--text-xl);letter-spacing:-.05em;line-height:1.2;margin:var(--space-3) 0 10px} -.markdown-body h4{color:var(--text);font-size:var(--text-md);margin:var(--space-5) 0 7px} -.markdown-body p{margin:0 0 var(--space-4)} -.markdown-body code{font:var(--text-xs) var(--font-mono);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel-3));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--panel-3));border-radius:4px;padding:2px var(--space-1)} -.md-callout{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin:var(--space-5) 0;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--panel-3));border-left:2px solid var(--accent);border-radius:var(--radius-md);background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 4%,var(--panel-2)),var(--panel-2))} -.md-callout p{margin:0;font-size:var(--text-sm);line-height:1.6} -.md-callout strong{color:var(--text)} -.callout-mark{color:var(--accent);font-size:var(--text-base)} -.markdown-body ul{margin:0 0 var(--space-5);padding-left:var(--space-5)} -.markdown-body li{padding-left:var(--space-1)} -.markdown-body li::marker{color:var(--accent)} -.md-table{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;font-size:var(--text-xs)} -.md-table>div{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:10px;padding:9px var(--space-3);border-bottom:1px solid var(--line)} -.md-table>div:last-child{border-bottom:0} -.md-table>div:first-child{color:var(--subtle);font:var(--text-3xs) var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--panel-2)} -.md-table code{font-size:var(--text-3xs);background:none;border:0;padding:0} -.md-accent{color:var(--accent)} +.markdown-card, +.editor-card { + margin-top: var(--space-5); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + overflow: hidden; + background: var(--card); +} -.editor-card{background:var(--bg-deep);border-color:var(--line);box-shadow:0 16px 35px rgba(0,0,0,.18)} -.editor-tabs{justify-content:flex-start;gap:0;padding:0 var(--space-3);background:var(--panel-2)} -.editor-dot{width:8px;height:8px;border-radius:50%;background:var(--positive);box-shadow:0 0 8px color-mix(in srgb,var(--positive) 60%,transparent);margin-right:var(--space-4)} -.editor-tab{padding:var(--space-3) var(--space-4);color:var(--subtle);font:var(--text-3xs) var(--font-mono);border-right:1px solid var(--line)} -.editor-tab.active{color:var(--text-bright);background:var(--bg-deep);border-top:2px solid var(--accent);padding-top:10px} -.editor-actions{margin-left:auto;color:var(--subtle);font:var(--text-3xs) var(--font-mono);letter-spacing:3px} -.editor-body{display:grid;grid-template-columns:43px 1fr;min-height:218px;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent),transparent 16%)} -.line-numbers{padding:var(--space-4) 10px var(--space-4) 0;border-right:1px solid var(--line-soft);text-align:right;color:var(--subtle);font:var(--text-xs)/1.72 var(--font-mono);user-select:none} -.editor-body pre{margin:0;padding:var(--space-4) var(--space-5);font:var(--text-sm)/1.72 var(--font-mono);overflow:auto;color:var(--text-code)} -.cm-comment{color:var(--subtle);font-style:italic} -.cm-keyword{color:var(--pink)} -.cm-variable{color:var(--accent)} -.cm-property{color:var(--blue)} -.cm-string{color:var(--positive)} -.editor-status{display:flex;gap:var(--space-4);padding:var(--space-2) var(--space-4);border-top:1px solid var(--line-soft);background:var(--panel-2);color:var(--subtle);font:var(--text-3xs) var(--font-mono)} -.editor-ready{margin-left:auto;color:var(--positive);display:flex;align-items:center;gap:var(--space-1)} +.markdown-toolbar, +.editor-tabs { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--border); + background: var(--secondary); +} -@media(max-width:760px){ - .markdown-body{padding:var(--space-6) var(--space-5) var(--space-7)} - .md-table{font-size:var(--text-3xs)} - .editor-body pre{padding:var(--space-4) var(--space-3)} - .editor-status{gap:10px;font-size:var(--text-3xs)} - .editor-status span:nth-child(2){display:none} +.markdown-body { + max-width: 700px; + margin: 0 auto; + padding: var(--space-8) var(--space-9) var(--space-8); + color: var(--foreground); + font-size: var(--text-md); + line-height: 1.75; +} + +.md-kicker { + font: var(--text-3xs) var(--font-mono); + letter-spacing: 0.13em; + color: var(--primary); +} + +.markdown-body h3 { + color: var(--foreground); + font-size: var(--text-xl); + letter-spacing: -0.05em; + line-height: 1.2; + margin: var(--space-3) 0 10px; +} + +.markdown-body h4 { + color: var(--foreground); + font-size: var(--text-md); + margin: var(--space-5) 0 7px; +} + +.markdown-body p { + margin: 0 0 var(--space-4); + color: var(--muted-foreground); +} + +.markdown-body code { + font: var(--text-xs) var(--font-mono); + color: var(--primary); + background: color-mix(in srgb, var(--primary) 8%, var(--card)); + border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); + border-radius: 4px; + padding: 2px var(--space-1); +} + +.md-callout { + display: flex; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + margin: var(--space-5) 0; + border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); + border-left: 2px solid var(--primary); + border-radius: var(--radius-md); + background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 6%, var(--card)), var(--card)); +} + +.md-callout p { + margin: 0; + font-size: var(--text-sm); + line-height: 1.6; + color: var(--foreground); +} + +.callout-mark { + color: var(--primary); + font-size: var(--text-base); +} + +.markdown-body ul { + margin: 0 0 var(--space-5); + padding-left: var(--space-5); + color: var(--muted-foreground); +} + +.markdown-body li { + padding-left: var(--space-1); +} + +.markdown-body li::marker { + color: var(--primary); +} + +.md-table { + border: 1px solid var(--border); + border-radius: var(--radius-md); + overflow: hidden; + font-size: var(--text-xs); +} + +.md-table > div { + display: grid; + grid-template-columns: 1.1fr 1fr 1.4fr; + gap: 10px; + padding: 9px var(--space-3); + border-bottom: 1px solid var(--border); +} + +.md-table > div:last-child { + border-bottom: 0; +} + +.md-table > div:first-child { + color: var(--muted-foreground); + font: var(--text-3xs) var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.08em; + background: var(--secondary); +} + +.md-table code { + font-size: var(--text-3xs); + background: none; + border: 0; + padding: 0; +} + +.md-accent { + color: var(--primary); +} + +.editor-card { + background: var(--sidebar); + border-color: var(--border); + box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18); +} + +.editor-tabs { + justify-content: flex-start; + gap: 0; + padding: 0 var(--space-3); + background: var(--secondary); +} + +.editor-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--chart-2); + box-shadow: 0 0 8px color-mix(in srgb, var(--chart-2) 60%, transparent); + margin-right: var(--space-4); +} + +.editor-tab { + padding: var(--space-3) var(--space-4); + color: var(--muted-foreground); + font: var(--text-3xs) var(--font-mono); + border-right: 1px solid var(--border); +} + +.editor-tab.active { + color: var(--foreground); + background: var(--card); + border-top: 2px solid var(--primary); + padding-top: 10px; +} + +.editor-actions { + margin-left: auto; + color: var(--muted-foreground); + font: var(--text-3xs) var(--font-mono); + letter-spacing: 3px; +} + +.editor-body { + display: grid; + grid-template-columns: 43px 1fr; + min-height: 218px; + background: linear-gradient(90deg, color-mix(in srgb, var(--background) 70%, transparent), transparent 16%); +} + +.line-numbers { + padding: var(--space-4) 10px var(--space-4) 0; + border-right: 1px solid var(--border); + text-align: right; + color: var(--muted-foreground); + font: var(--text-xs) / 1.72 var(--font-mono); + user-select: none; +} + +.editor-body pre { + margin: 0; + padding: var(--space-4) var(--space-5); + font: var(--text-sm) / 1.72 var(--font-mono); + overflow: auto; + color: var(--foreground); +} + +.cm-comment { color: var(--muted-foreground); font-style: italic; } +.cm-keyword { color: var(--chart-5); } +.cm-variable { color: var(--primary); } +.cm-property { color: var(--chart-4); } +.cm-string { color: var(--chart-2); } + +.editor-status { + display: flex; + gap: var(--space-4); + padding: var(--space-2) var(--space-4); + border-top: 1px solid var(--border); + background: var(--secondary); + color: var(--muted-foreground); + font: var(--text-3xs) var(--font-mono); +} + +.editor-ready { + margin-left: auto; + color: var(--chart-2); + display: flex; + align-items: center; + gap: var(--space-1); +} + +@media (max-width: 760px) { + .markdown-body { padding: var(--space-6) var(--space-5) var(--space-7); } + .md-table { font-size: var(--text-3xs); } + .editor-body pre { padding: var(--space-4) var(--space-3); } + .editor-status { gap: 10px; font-size: var(--text-3xs); } + .editor-status span:nth-child(2) { display: none; } } /* ── Motion & finishing touches ─────────────────────────────── */ -@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} -@keyframes soft-glow{0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 34px color-mix(in srgb,var(--accent) 16%,transparent)}} -@keyframes orbit-drift{from{transform:rotate(-22deg) rotate(0deg)}to{transform:rotate(-22deg) rotate(360deg)}} -@keyframes orbit-drift-reverse{from{transform:rotate(58deg) rotate(360deg)}to{transform:rotate(58deg) rotate(0deg)}} -@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} -@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.72)}} - -.hero-section{animation:rise-in .7s cubic-bezier(.2,.8,.2,1) both} -.hero-copy h1{background:linear-gradient(110deg,var(--text-bright) 15%,var(--accent) 55%,var(--text-bright) 85%);background-size:220% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:shimmer 9s linear infinite} -.hero-copy p{animation:rise-in .7s .1s cubic-bezier(.2,.8,.2,1) both} -.hero-actions{animation:rise-in .7s .18s cubic-bezier(.2,.8,.2,1) both} -.hero-orbit{animation:rise-in .9s .18s cubic-bezier(.2,.8,.2,1) both} -.orbit-one{animation:orbit-drift 24s linear infinite} -.orbit-two{animation:orbit-drift-reverse 30s linear infinite} -.orbit-core{animation:soft-glow 4s ease-in-out infinite} -.orbit-label{animation:rise-in .7s .7s both} -.section-block{animation:rise-in .65s .1s cubic-bezier(.2,.8,.2,1) both} -.section-block:nth-child(2){animation-delay:.16s} -.section-block:nth-child(3){animation-delay:.22s} -.section-block:nth-child(4){animation-delay:.28s} -.button-row{transition:background .25s ease,transform .25s ease} -.button-row:hover{background:color-mix(in srgb,var(--accent) 4%,transparent);transform:translateX(3px)} -.button{position:relative;overflow:hidden} -.button:not(:disabled)::after,.copy-button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.13) 50%,transparent 75%);transform:translateX(-120%);transition:transform .55s ease} -.button:hover::after,.copy-button:hover::after{transform:translateX(120%)} -.button:focus-visible,.tab:focus-visible,.nav-item:focus-visible,.density:focus-visible,.segmented button:focus-visible,.text-button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} -.button.primary{box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 18%,transparent)} -.button.primary:active{transform:translateY(1px) scale(.98)} -.button.secondary:hover,.button.ghost:hover,.density:hover{border-color:var(--line-hover)} -.swatch{transition:transform .3s ease,box-shadow .3s ease} -.color-card{transition:transform .25s ease,border-color .25s ease,background .25s ease} -.color-card:hover{transform:translateY(-4px);border-color:var(--line-hover);background:var(--panel-hover)} -.color-card:hover .swatch{transform:scale(1.08);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 0 0 1px rgba(255,255,255,.2)} -.nav-item{position:relative} -.nav-item::after{content:"";position:absolute;right:10px;width:0;height:1px;background:var(--accent);transition:width .25s ease} -.nav-item:hover::after{width:12px} -.status-dot{animation:pulse-dot 2.5s ease-in-out infinite} -.field input,.input-with-action{transition:border-color .25s ease,box-shadow .25s ease,background .25s ease} -.field input:hover,.input-with-action:hover{background:var(--panel-hover);border-color:var(--line-hover)} -.field input:focus,.input-with-action:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent),0 0 20px color-mix(in srgb,var(--accent) 6%,transparent)} -.toggle{transition:background .25s ease,transform .2s ease} -.toggle:active{transform:scale(.94)} -.release{transition:transform .3s ease,box-shadow .3s ease} -.release:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(0,0,0,.2),0 0 25px color-mix(in srgb,var(--accent) 6%,transparent)} -.release-icon{transition:transform .4s cubic-bezier(.2,.8,.2,1)} -.release:hover .release-icon{transform:rotate(-8deg) scale(1.08)} -.code-card{transition:border-color .3s ease,box-shadow .3s ease} -.code-card:hover{border-color:var(--line-hover);box-shadow:0 15px 40px rgba(0,0,0,.14)} -.copy-button{position:relative;overflow:hidden} -.top-search{transition:border-color .25s ease,box-shadow .25s ease} -.top-search:hover{border-color:var(--line-hover)} -.top-search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent)} - -@media(prefers-reduced-motion:reduce){ - *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important} - .hero-copy h1{background:none;color:var(--text)} +@keyframes rise-in { + from { opacity: 0; transform: translateY(14px); } + to { opacity: 1; transform: translateY(0); } } -/* ── Sidebar refinement: editorial, flat, easy to scan ──────── */ -.sidebar{padding:var(--space-5) 0 var(--space-4);background:linear-gradient(180deg,var(--bg-deep) 0%,var(--bg) 76%)} -.sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5) var(--space-5);border-bottom:1px solid var(--line)} -.sidebar-library{display:flex;align-items:center;gap:var(--space-2);color:var(--text);font:500 var(--text-xs) var(--font-mono);letter-spacing:.05em;text-transform:uppercase} -.sidebar-library svg{color:var(--accent)} -.sidebar-collapse{border:0;background:none;color:var(--subtle);font:var(--text-xs) var(--font-mono);padding:4px 0} -.sidebar-collapse:hover{color:var(--text)} -.sidebar-intro{padding:var(--space-5) var(--space-5) var(--space-5);margin:0;border-bottom:1px solid var(--line)} -.sidebar-intro p{max-width:180px;margin-top:var(--space-2)} -.sidebar nav{padding-top:var(--space-5)} -.nav-group{margin-bottom:var(--space-5)} -.nav-label{padding:0 var(--space-5);margin-bottom:var(--space-2);color:var(--subtle);font-size:var(--text-3xs)} -.nav-item{position:relative;width:100%;border-radius:0;padding:9px var(--space-5);gap:11px;letter-spacing:-.01em} -.nav-item:hover{background:var(--panel-hover)} -.nav-item.active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent) 4%,transparent));box-shadow:inset 2px 0 var(--accent);color:var(--text-bright)} -.nav-item.active::before{content:"";position:absolute;right:var(--space-5);width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 80%,transparent)} -.nav-item::after{display:none} -.nav-glyph{width:13px;color:var(--subtle);font:var(--text-md) var(--font-mono);line-height:1;text-align:center} -.nav-item.active .nav-glyph{color:var(--accent)} -.nav-count{border:0;padding:0;margin-left:auto;color:color-mix(in srgb,var(--accent) 60%,var(--subtle));background:none;font-size:var(--text-3xs)} -.sidebar-bottom{padding:var(--space-4) var(--space-5) 0} -.sidebar-bottom .status-line{font-size:var(--text-3xs)} - -@media(max-width:760px){ - .sidebar{padding-top:var(--space-4)} - .sidebar-heading{padding-left:var(--space-5);padding-right:var(--space-5)} - .sidebar-intro{padding-top:var(--space-4)} - .sidebar nav{padding-top:var(--space-5)} - .nav-item{padding-top:10px;padding-bottom:10px} +@keyframes soft-glow { + 0%, 100% { box-shadow: 0 0 0 transparent; } + 50% { box-shadow: 0 0 34px color-mix(in srgb, var(--primary) 18%, transparent); } +} + +@keyframes orbit-drift { + from { transform: rotate(-22deg) rotate(0deg); } + to { transform: rotate(-22deg) rotate(360deg); } +} + +@keyframes orbit-drift-reverse { + from { transform: rotate(58deg) rotate(360deg); } + to { transform: rotate(58deg) rotate(0deg); } +} + +@keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.55; transform: scale(0.72); } +} + +.hero-section { animation: rise-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; } +.hero-copy h1 { + background: linear-gradient(110deg, var(--foreground) 15%, var(--primary) 55%, var(--foreground) 85%); + background-size: 220% auto; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + animation: shimmer 9s linear infinite; +} +.hero-copy p { animation: rise-in 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; } +.hero-actions { animation: rise-in 0.7s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; } +.hero-orbit { animation: rise-in 0.9s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; } +.orbit-one { animation: orbit-drift 24s linear infinite; } +.orbit-two { animation: orbit-drift-reverse 30s linear infinite; } +.orbit-core { animation: soft-glow 4s ease-in-out infinite; } +.orbit-label { animation: rise-in 0.7s 0.7s both; } +.section-block { animation: rise-in 0.65s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; } +.section-block:nth-child(2) { animation-delay: 0.16s; } +.section-block:nth-child(3) { animation-delay: 0.22s; } +.section-block:nth-child(4) { animation-delay: 0.28s; } + +.button-row { + transition: background 0.25s ease, transform 0.25s ease; +} + +.button-row:hover { + background: color-mix(in srgb, var(--primary) 5%, transparent); + transform: translateX(3px); +} + +.button:not(:disabled)::after, +.copy-button::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.13) 50%, transparent 75%); + transform: translateX(-120%); + transition: transform 0.55s ease; +} + +.button:hover::after, +.copy-button:hover::after { + transform: translateX(120%); +} + +.button:focus-visible, +.tab:focus-visible, +.nav-item:focus-visible, +.density:focus-visible, +.segmented button:focus-visible, +.text-button:focus-visible { + outline: var(--focus-ring); + outline-offset: var(--focus-offset); +} + +.swatch { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.color-card { + transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; +} + +.color-card:hover { + transform: translateY(-4px); + border-color: var(--ring); + background: color-mix(in srgb, var(--foreground) 4%, var(--card)); +} + +.color-card:hover .swatch { + transform: scale(1.08); + box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +.status-dot { + animation: pulse-dot 2.5s ease-in-out infinite; +} + +.field input, +.input-with-action { + transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; +} + +.field input:hover, +.input-with-action:hover { + background: color-mix(in srgb, var(--foreground) 4%, var(--secondary)); + border-color: var(--ring); +} + +.toggle { + transition: background 0.25s ease, transform 0.2s ease; +} + +.toggle:active { + transform: scale(0.94); +} + +.release { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.release:hover { + transform: translateY(-4px); + box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2), 0 0 25px color-mix(in srgb, var(--primary) 10%, transparent); +} + +.release-icon { + transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +.release:hover .release-icon { + transform: rotate(-8deg) scale(1.08); +} + +.code-card { + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.code-card:hover { + border-color: var(--ring); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14); +} + +.top-search { + transition: border-color 0.25s ease, box-shadow 0.25s ease; +} + +.top-search:hover { + border-color: var(--ring); +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + } + .hero-copy h1 { + background: none; + color: var(--foreground); + } } diff --git a/src/App.tsx b/src/App.tsx index c0e7a88..47e2053 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import { FormField, TextInput } from './components/FormField' import { CodeSample } from './components/CodeSample' import { MarkdownRenderer } from './components/MarkdownRenderer' import { CodeEditor } from './components/CodeEditor' +import { AIWorkflowSection } from './components/AIWorkflowSection' import { Section } from './components/Section' import { RightRail } from './components/RightRail' import { Icon } from './components/Icon' @@ -49,8 +50,18 @@ export default function App() {
lab() colors · cn() · primitives} + > + +
+ +
Button · 12 variants} @@ -65,9 +76,10 @@ export default function App() {
View all tokens @@ -78,7 +90,8 @@ export default function App() {
@@ -107,7 +120,8 @@ export default function App() {
@@ -115,7 +129,8 @@ export default function App() {
Markdown · styled} @@ -124,7 +139,8 @@ export default function App() {
codemirror · dark} diff --git a/src/components/AIWorkflowSection.tsx b/src/components/AIWorkflowSection.tsx new file mode 100644 index 0000000..7a5336f --- /dev/null +++ b/src/components/AIWorkflowSection.tsx @@ -0,0 +1,182 @@ +import { useState } from 'react' +import { StatCard } from './ui/StatCard' +import { Badge } from './ui/Badge' +import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/Card' +import { Kbd } from './ui/Kbd' +import { Icon } from './Icon' +import { AI_SYSTEM_PROMPT, AI_QUICK_RECIPES } from '../data/ai-rules' + +export function AIWorkflowSection() { + const [copied, setCopied] = useState(false) + const [activeRecipe, setActiveRecipe] = useState(0) + + const copyPrompt = () => { + navigator.clipboard?.writeText(AI_SYSTEM_PROMPT) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } + + return ( +
+ {/* ── Metric Highlights using StatCard Primitives ── */} +
+ } + /> + } + /> + } + /> +
+ + {/* ── Dot Canvas & Composable UI Showcase ── */} +
+
+
+
+ AI Greenfield + lab() Color 4 + Uniform Architecture +
+

+ High-Velocity Autonomous Building Canvas +

+

+ Rendered on the user-defined --dot-color canvas with composable primitives. +

+
+ + +
+ + {/* ── Component Primitives Gallery ── */} +
+ + +
+ Autonomous Agent Run + Active +
+ + Executing token validation and layout synthesis across 4 workers. + + + +
+
+ Token Verification + PASS (0 errors) +
+
+ Color Engine + CSS Color 4 lab() +
+
+ Theme Switching + .dark & [data-theme] +
+
+ + + + Press ⌘ + K for palette + + + + + + + +
+ Smart Primitives & Status + Composable +
+ + Zero-drift badges, cards, and keyboard indicators ready for prompt generation. + + + +
+
+ Badge Variants: +
+
+ Primary + Positive + Secondary + Destructive + Outline +
+
+ Shortcuts & Flags: +
+
+ Shift + D + toggle theme +
+
+ + + + ✓ Strict token contract compliant + + + +
+
+ + {/* ── AI Quick Prompt Recipes ── */} +
+
+
+ {AI_QUICK_RECIPES.map((recipe, idx) => ( + + ))} +
+ +
+ 
+          {AI_QUICK_RECIPES[activeRecipe].code}
+
+
+
+ ) +} diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 8a98478..cd5ba7a 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -10,6 +10,8 @@ const paths: Record = { arrow: 'M5 12h14m-6-6 6 6-6 6', menu: 'M4 6h16M4 12h16M4 18h16', layers: 'm12 3 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5M3 16l9 5 9-5', + sparkle: 'm12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3Z', + terminal: 'm4 17 6-6-6-6m8 14h8', } export function Icon({ name, size = 18 }: IconProps) { diff --git a/src/components/RightRail.tsx b/src/components/RightRail.tsx index 0fab884..2906985 100644 --- a/src/components/RightRail.tsx +++ b/src/components/RightRail.tsx @@ -8,12 +8,15 @@ export function RightRail({ sections }: RightRailProps) {