91788737b0
Some checks failed
Build & Publish / publish (push) Failing after 45s
- Add ButtonGroup primitive: multi-select toggle with colored dot indicators - Replace FilterPill status filters with ButtonGroup in TopBar and EventFeed - Add light/dark mode toggle to TopBar (moon/sun icon) - Fix dark theme: add --purple/--purple-bg tokens, replace all hardcoded #F3EEFA/#7C3AED with tokens, fix --amber-light text contrast in sidebar, brighten --sidebar-text/--sidebar-muted tokens, use color-mix for ProcessorTimeline bar fills - Remove all "shift" references (presets, labels, badges) - Shrink SegmentedTabs height to match search bar and ButtonGroup - Update COMPONENT_GUIDE.md with new components and updated descriptions - Add ButtonGroup demo to Inventory - Add README.md with setup instructions and navigation guide Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
133 lines
3.2 KiB
CSS
133 lines
3.2 KiB
CSS
:root {
|
|
/* Surface palette (warm parchment) */
|
|
--bg-body: #F5F2ED;
|
|
--bg-surface: #FFFFFF;
|
|
--bg-raised: #FAF8F5;
|
|
--bg-inset: #F0EDE8;
|
|
--bg-hover: #F5F0EA;
|
|
|
|
/* Sidebar (warm charcoal) */
|
|
--sidebar-bg: #2C2520;
|
|
--sidebar-hover: #3A322C;
|
|
--sidebar-active: #4A3F38;
|
|
--sidebar-text: #D8D0C6;
|
|
--sidebar-muted: #9C9184;
|
|
|
|
/* Text */
|
|
--text-primary: #1A1612;
|
|
--text-secondary: #5C5347;
|
|
--text-muted: #9C9184;
|
|
--text-faint: #C4BAB0;
|
|
|
|
/* Borders */
|
|
--border: #E4DFD8;
|
|
--border-subtle: #EDE9E3;
|
|
|
|
/* Brand accent (amber-gold) */
|
|
--amber: #C6820E;
|
|
--amber-light: #F0D9A8;
|
|
--amber-bg: #FDF6E9;
|
|
--amber-deep: #8B5A06;
|
|
|
|
/* Status colors (warm) */
|
|
--success: #3D7C47;
|
|
--success-bg: #EFF7F0;
|
|
--success-border: #C2DFC6;
|
|
--warning: #C27516;
|
|
--warning-bg: #FEF5E7;
|
|
--warning-border: #F0D9A8;
|
|
--error: #C0392B;
|
|
--error-bg: #FDF0EE;
|
|
--error-border: #F0C4BE;
|
|
--running: #1A7F8E;
|
|
--running-bg: #E8F5F7;
|
|
--running-border: #B0DDE4;
|
|
|
|
/* Typography */
|
|
--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
|
|
/* Spacing & Radii */
|
|
--radius-sm: 5px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(44, 37, 32, 0.06);
|
|
--shadow-md: 0 2px 8px rgba(44, 37, 32, 0.08);
|
|
--shadow-lg: 0 4px 16px rgba(44, 37, 32, 0.10);
|
|
--shadow-card: 0 1px 3px rgba(44, 37, 32, 0.04), 0 0 0 1px rgba(44, 37, 32, 0.04);
|
|
|
|
/* Accent: purple (for choice/router elements) */
|
|
--purple: #7C3AED;
|
|
--purple-bg: #F3EEFA;
|
|
|
|
/* Chart palette */
|
|
--chart-1: #C6820E;
|
|
--chart-2: #3D7C47;
|
|
--chart-3: #1A7F8E;
|
|
--chart-4: #C27516;
|
|
--chart-5: #8B5A06;
|
|
--chart-6: #6B8E4E;
|
|
--chart-7: #C0392B;
|
|
--chart-8: #9C7A3C;
|
|
}
|
|
|
|
/* Dark theme — muted redesign, same token names */
|
|
[data-theme="dark"] {
|
|
--bg-body: #1A1714;
|
|
--bg-surface: #242019;
|
|
--bg-raised: #2A2620;
|
|
--bg-inset: #151310;
|
|
--bg-hover: #302B24;
|
|
|
|
--sidebar-bg: #141210;
|
|
--sidebar-hover: #1E1B17;
|
|
--sidebar-active: #28241E;
|
|
--sidebar-text: #CCC4B8;
|
|
--sidebar-muted: #6A6058;
|
|
|
|
--text-primary: #E8E0D6;
|
|
--text-secondary: #B0A698;
|
|
--text-muted: #7A7068;
|
|
--text-faint: #4A4238;
|
|
|
|
--border: #3A3530;
|
|
--border-subtle: #2E2A25;
|
|
|
|
--amber: #D4941E;
|
|
--amber-light: #4A3A1E;
|
|
--amber-bg: #2A2418;
|
|
--amber-deep: #E8B04A;
|
|
|
|
--success: #5DB866;
|
|
--success-bg: #1A2A1C;
|
|
--success-border: #2A3E2C;
|
|
--warning: #D4901E;
|
|
--warning-bg: #2A2418;
|
|
--warning-border: #3E3420;
|
|
--error: #E05A4C;
|
|
--error-bg: #2A1A18;
|
|
--error-border: #4A2A24;
|
|
--running: #2AA0B0;
|
|
--running-bg: #1A2628;
|
|
--running-border: #243A3E;
|
|
|
|
--purple: #A78BFA;
|
|
--purple-bg: rgba(124, 58, 237, 0.15);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
|
|
--chart-1: #D4941E;
|
|
--chart-2: #5DB866;
|
|
--chart-3: #2AA0B0;
|
|
--chart-4: #D4901E;
|
|
--chart-5: #E8B04A;
|
|
--chart-6: #7AAE5E;
|
|
--chart-7: #E05A4C;
|
|
--chart-8: #B89A4C;
|
|
}
|