103 lines
3.7 KiB
CSS
103 lines
3.7 KiB
CSS
/* Color tokens — primitive palette + semantic mappings.
|
|
*
|
|
* Layers:
|
|
* 1. Primitives (--gray-*, --blue-*, etc.) — raw scale, never used directly
|
|
* in components.
|
|
* 2. Semantics (--color-bg-*, --color-fg-*, --color-action-*) — used by
|
|
* components. Swap themes by remapping semantics to different primitives.
|
|
* 3. Legacy aliases (--accent, --bg, etc.) — kept temporarily so existing
|
|
* components keep working. Remove after full migration.
|
|
*/
|
|
|
|
:root {
|
|
/* Primitives — gray scale */
|
|
--gray-0: #ffffff;
|
|
--gray-50: #fafafa;
|
|
--gray-100: #f5f5f7;
|
|
--gray-200: #e5e5ea;
|
|
--gray-300: #d1d1d6;
|
|
--gray-400: #aeaeb2;
|
|
--gray-500: #86868b;
|
|
--gray-600: #6e6e73;
|
|
--gray-700: #48484a;
|
|
--gray-800: #2c2c2e;
|
|
--gray-850: #1c1c1e;
|
|
--gray-900: #141416;
|
|
--gray-950: #0a0a0c;
|
|
--gray-1000: #000000;
|
|
|
|
/* Primitives — accents */
|
|
--blue-400: #4ea8ff;
|
|
--blue-500: #0a84ff;
|
|
--blue-600: #0071e3;
|
|
--blue-700: #0058b3;
|
|
|
|
--red-500: #ff453a;
|
|
--red-600: #d70015;
|
|
--green-500: #30d158;
|
|
--green-600: #248a3d;
|
|
--amber-500: #ff9f0a;
|
|
--amber-600: #c93400;
|
|
|
|
/* Semantic — backgrounds (dark theme baseline) */
|
|
/* Canvas uses gray-950 (#0a0a0c), NOT gray-1000 (#000000). Pure-black
|
|
* canvas collides with the slightly-lighter card surfaces (gray-900
|
|
* #141416) and creates a harsh transition wherever a page's content
|
|
* ends before the `min-height: 100vh` wrapper does (long docs page,
|
|
* sparse user profile, etc.). gray-1000 stays available in the palette
|
|
* for intentional black uses (overlays, code-block accents). */
|
|
--color-bg-canvas: var(--gray-950);
|
|
--color-bg-surface-1: var(--gray-900);
|
|
--color-bg-surface-2: var(--gray-850);
|
|
--color-bg-surface-3: var(--gray-800);
|
|
--color-bg-input: var(--gray-850);
|
|
--color-bg-overlay: rgba(0, 0, 0, 0.6);
|
|
|
|
/* Semantic — foreground */
|
|
--color-fg-default: var(--gray-100);
|
|
--color-fg-muted: var(--gray-500);
|
|
--color-fg-subtle: var(--gray-600);
|
|
--color-fg-on-action: var(--gray-0);
|
|
|
|
/* Semantic — borders */
|
|
--color-border-default: rgba(255, 255, 255, 0.09);
|
|
--color-border-strong: rgba(255, 255, 255, 0.16);
|
|
|
|
/* Semantic — actions */
|
|
/* Solid UI doctrine: interactive surfaces use SOLID fills of these
|
|
* tokens (white text/icon, border:none) — never neon hues or
|
|
* translucent "outline" borders. Green/red are semantic only
|
|
* (success/error). See branding/README.md "Solid UI doctrine". */
|
|
--color-action-primary: var(--blue-600);
|
|
--color-action-primary-hover: var(--blue-500);
|
|
--color-action-primary-fg: var(--gray-0);
|
|
--color-action-secondary: var(--gray-800);
|
|
--color-action-secondary-hover: var(--gray-700);
|
|
|
|
/* Semantic — feedback */
|
|
--color-feedback-error: var(--red-500);
|
|
--color-feedback-success: var(--green-500);
|
|
--color-feedback-warning: var(--amber-500);
|
|
|
|
/* Focus ring — used by *:focus-visible across all interactives */
|
|
--color-focus-ring: 0 0 0 2px var(--color-action-primary);
|
|
|
|
/* Tier badges (pro overlay reads these) */
|
|
--color-tier-free: var(--gray-500);
|
|
--color-tier-pro: var(--blue-600);
|
|
--color-tier-team: var(--amber-500);
|
|
|
|
/* Legacy aliases — DO NOT use in new code. Remove after migration. */
|
|
--accent: var(--color-action-primary);
|
|
--accent-hover: var(--color-action-primary-hover);
|
|
--bg: var(--color-bg-canvas);
|
|
--bg-card: var(--color-bg-surface-1);
|
|
--bg-elevated: var(--color-bg-surface-3);
|
|
--bg-input: var(--color-bg-input);
|
|
--border: var(--color-border-default);
|
|
--border-hi: var(--color-border-strong);
|
|
--text: var(--color-fg-default);
|
|
--text-muted: var(--color-fg-muted);
|
|
--text-dim: var(--color-fg-subtle);
|
|
}
|