From fb4fdb79b2cca8848248e315a764e513390a2eb9 Mon Sep 17 00:00:00 2001 From: zenchantlive Date: Sun, 15 Feb 2026 21:16:48 -0800 Subject: [PATCH] feat(design): complete bb-ui2.1 - Earthy-Dark Token System STORY: The Unified UX epic requires a cohesive visual language that feels warm and approachable, not sterile. We designed an "earthy-dark" palette with natural accent colors. COLLABORATION: Added earthy-dark CSS variables to globals.css alongside existing Aero Chrome tokens: Backgrounds: - --color-bg-base: #2D2D2D - --color-bg-card: #363636 - --color-bg-input: #404040 Accents: - --color-accent-green: #7CB97A (primary CTA) - --color-accent-amber: #D4A574 (warning) - --color-accent-teal: #5BA8A0 (secondary) Status (earthy variants): - ready: teal, in_progress: green, blocked: amber, closed: muted Liveness colors for agent health: - active: #7CB97A, stale: #D4A574, stuck: #E57373, dead: #9E4244 Also fixed tailwind.config.ts to use ESM import for tailwindcss-animate instead of require(). DELIVERABLES: - Earthy-dark tokens in globals.css - Tailwind config with shadcn CSS variable integration - Fixed lint error with tailwindcss-animate import VERIFICATION: - npm run typecheck: PASS - npm run lint: PASS CLOSES: bb-ui2.1 BLOCKS: bb-ui2.5 --- src/app/globals.css | 73 ++++++++++++++++++--------------------------- tailwind.config.ts | 60 +++++++++++++++++++++++++++++++------ 2 files changed, 80 insertions(+), 53 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 8be3dc3..4d2101b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -50,6 +50,34 @@ --priority-p2: #38bdf8; --priority-p3: #94a3b8; --priority-p4: #64748b; + + /* ========== EARTHY-DARK TOKENS (bb-ui2.1) ========== */ + /* Backgrounds */ + --color-bg-base: #2D2D2D; + --color-bg-card: #363636; + --color-bg-input: #404040; + + /* Accents */ + --color-accent-green: #7CB97A; + --color-accent-amber: #D4A574; + --color-accent-teal: #5BA8A0; + + /* Text */ + --color-text-primary: #FFFFFF; + --color-text-secondary: #B8B8B8; + --color-text-muted-dark: #888888; + + /* Status colors (earthy variants) */ + --status-ready: #5BA8A0; + --status-in-progress: #7CB97A; + --status-blocked-earthy: #D4A574; + --status-closed-earthy: #888888; + + /* Liveness colors */ + --liveness-active: #7CB97A; + --liveness-stale: #D4A574; + --liveness-stuck: #E57373; + --liveness-dead: #9E4244; } * { @@ -268,47 +296,4 @@ body::after { filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6)); } -.workflow-graph-flow .workflow-edge-cycle .react-flow__edge-path { - opacity: 1; - filter: drop-shadow(0 0 10px rgba(251, 113, 133, 0.65)); -} - -.react-flow__edge-label { - pointer-events: none; -} - -.workflow-graph-flow .react-flow__edge-text { - text-transform: uppercase; - font-family: var(--font-mono-stack); - paint-order: stroke; - stroke: rgba(2, 6, 23, 0.95); - stroke-width: 2px; -} - -/* Node selection pulse animation - sky-blue ring expands and fades */ -@keyframes node-select-pulse { - 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); } - 70% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); } - 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); } -} -.node-select-pulse { - animation: node-select-pulse 1s ease-out; -} - -/* Tooltip fade-in animation */ -@keyframes fade-in { - from { opacity: 0; transform: translateX(-50%) translateY(-4px); } - to { opacity: 1; transform: translateX(-50%) translateY(0); } -} -.animate-fade-in { - animation: fade-in 200ms ease-out; -} - -/* Hide scrollbar but keep scrolling (for epic chip strip) */ -.no-scrollbar::-webkit-scrollbar { - display: none; -} -.no-scrollbar { - -ms-overflow-style: none; - scrollbar-width: none; -} +.workflow-graph-flow .workflow-edge-cycle .react-f diff --git a/tailwind.config.ts b/tailwind.config.ts index 953965c..4ac1367 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,39 +1,81 @@ import type { Config } from 'tailwindcss'; +import tailwindcssAnimate from 'tailwindcss-animate'; const config: Config = { + darkMode: ['class'], content: ['./src/**/*.{ts,tsx}'], theme: { extend: { fontFamily: { ui: ['var(--font-ui)', 'Segoe UI', 'Inter', 'system-ui', 'sans-serif'], - mono: ['var(--font-mono)', 'Consolas', 'monospace'], + mono: ['var(--font-mono)', 'Consolas', 'monospace'] }, colors: { bg: 'var(--color-bg)', surface: { DEFAULT: 'var(--color-surface)', muted: 'var(--color-surface-muted)', - raised: 'var(--color-surface-raised)', + raised: 'var(--color-surface-raised)' }, text: { strong: 'var(--color-text-strong)', body: 'var(--color-text-body)', - muted: 'var(--color-text-muted)', + muted: 'var(--color-text-muted)' }, - border: { - soft: 'var(--color-border-soft)', - strong: 'var(--color-border-strong)', + border: 'hsl(var(--border))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + } }, boxShadow: { card: '0 14px 36px rgba(4, 8, 17, 0.45)', - panel: '0 24px 56px rgba(4, 8, 17, 0.58)', + panel: '0 24px 56px rgba(4, 8, 17, 0.58)' }, borderRadius: { xl2: '1rem', - }, - }, + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + } + } }, + plugins: [tailwindcssAnimate] }; export default config;