/* * Desk design tokens (5.2). * Two palettes (spec, g3) × two themes (light, dark) — selectors gate * which set is active on . * Desk CSS consumes --desk-* tokens exclusively; palette swap = one * attribute flip on . */ /* === Spec palette (default) — section 4a verbatim === */ [data-palette="spec"][data-theme="light"], [data-palette="g3"][data-theme="light"] { --desk-color-comment-underline: rgba(234, 179, 8, 0.5); --desk-color-comment-underline-active: rgba(202, 138, 4, 1.0); --desk-color-comment-highlight: rgba(234, 179, 8, 0.25); --desk-color-comment-highlight-active: rgba(202, 138, 4, 0.55); --desk-color-link: #2563eb; } [data-palette="spec"][data-theme="dark"], [data-palette="g3"][data-theme="dark"] { --desk-color-comment-underline: rgba(202, 138, 4, 0.6); --desk-color-comment-underline-active: rgba(234, 179, 8, 1.0); --desk-color-comment-highlight: rgba(202, 138, 4, 0.2); --desk-color-comment-highlight-active: rgba(202, 138, 4, 0.5); --desk-color-link: #60a5fa; } [data-palette="spec"][data-theme="light"] { --desk-color-bg: #f5f5f0; --desk-color-bg-elevated: #e8e8e2; --desk-color-bg-surface: #ffffff; --desk-color-bg-panel: #eeece5; --desk-color-bg-margin: #f0f5f2; --desk-color-bg-modal: rgba(0, 0, 0, 0.5); --desk-color-text: #1a1a1a; --desk-color-text-secondary: #666660; --desk-color-text-muted: #999990; --desk-color-tooltip-bg: #374151; --desk-color-tooltip-text: #fff; --desk-color-border: #b8b8b0; --desk-color-border-subtle: #c8c8c0; --desk-color-accent: #4f6372; /* g3-slate hardcoded so desk doesn't require global3.css */ --desk-color-rust: #98583c; --desk-color-rust-soft: rgba(152, 88, 60, 0.10); --desk-color-button: #2563eb; --desk-color-shadow: rgba(0, 0, 0, 0.08); } [data-palette="spec"][data-theme="dark"] { --desk-color-bg: #1a1a1e; --desk-color-bg-elevated: #242428; --desk-color-bg-surface: #2a2a2e; --desk-color-bg-panel: #222226; --desk-color-bg-margin: #1e2220; --desk-color-bg-modal: rgba(0, 0, 0, 0.7); --desk-color-text: #e0e0dc; --desk-color-text-secondary: #9a9a94; --desk-color-text-muted: #6a6a64; --desk-color-tooltip-bg: #f5f5f5; --desk-color-tooltip-text: #111; --desk-color-border: #5a5a60; --desk-color-border-subtle: #3e3e44; --desk-color-accent: #7390a8; --desk-color-rust: #c4896a; --desk-color-rust-soft: rgba(196, 137, 106, 0.16); --desk-color-button: #60a5fa; --desk-color-shadow: rgba(0, 0, 0, 0.3); } /* === G3 palette — maps --desk-* to existing --g3-* in global3.css === */ [data-palette="g3"][data-theme="light"] { --desk-color-bg: var(--g3-oat-0); --desk-color-bg-elevated: var(--g3-oat-1); --desk-color-bg-surface: var(--g3-white); --desk-color-bg-panel: var(--g3-oat-1); --desk-color-bg-margin: var(--g3-oat-1); --desk-color-bg-modal: rgba(0, 0, 0, 0.5); --desk-color-text: var(--g3-ink); --desk-color-text-secondary: var(--g3-ink-soft); --desk-color-text-muted: var(--g3-ink-muted); --desk-color-border: var(--g3-ink-18); --desk-color-border-subtle: var(--g3-ink-08); --desk-color-accent: var(--g3-rust); --desk-color-rust: var(--g3-rust); --desk-color-rust-soft: var(--g3-rust-12); --desk-color-button: var(--desk-color-link); --desk-color-shadow: var(--g3-ink-08); } [data-palette="g3"][data-theme="dark"] { /* g3 has no native dark palette — reuse spec-dark hex values for dogfood. */ --desk-color-bg: #1a1a1e; --desk-color-bg-elevated: #242428; --desk-color-bg-surface: #2a2a2e; --desk-color-bg-panel: #222226; --desk-color-bg-margin: #1e2220; --desk-color-bg-modal: rgba(0, 0, 0, 0.7); --desk-color-text: #e0e0dc; --desk-color-text-secondary: #9a9a94; --desk-color-text-muted: #6a6a64; --desk-color-border: #3a3a3e; --desk-color-border-subtle: #2e2e32; --desk-color-accent: #7390a8; --desk-color-rust: #c4896a; --desk-color-rust-soft: rgba(196, 137, 106, 0.16); --desk-color-button: #60a5fa; --desk-color-shadow: rgba(0, 0, 0, 0.3); } /* === Animation tokens (section 4c) — palette/theme-independent === */ :root { --desk-transition-speed: 300ms; --desk-transition-ease: cubic-bezier(0.4, 0, 0.2, 1); --desk-radius-sm: 8px; --desk-radius-md: 14px; }