fix(design): implement DESIGN.md color system compliance across all UI/UX
Resolved critical design system inconsistencies by: 1. **tailwind.config.ts**: Added complete DESIGN.md color palette (40+ colors) - Primary: #ffb781 (from #F58618) - Secondary: #c8c6c5 (from #888888) - Tertiary: #00e639 (newly added) - All surface variants, on-color pairs, error colors - Added spacing tokens (unit, gutter, margin, stack-sm/md) 2. **globals.css**: Implemented full CSS variable system - 50+ CSS variables for complete design palette - Updated typography layer with proper letter-spacing per spec - Semantic color classes (headline-lg, body-md, label-md, mono-data) - Fixed scrollbar colors to use design tokens - Updated component utilities (.level-0, .level-1, .level-2, .btn-*, etc.) 3. **All component files**: Eliminated hardcoded Tailwind colors - Replaced bg-slate-* with design system equivalents - Replaced bg-gray-* with semantic colors - Replaced focus:ring-blue-500 with focus:ring-primary - Replaced text-gray-* with text-secondary/text-muted - Replaced all inline hex colors with Tailwind classes Files updated: 32 components + core config files Result: 100% DESIGN.md compliance in UI/UX, tailwind config, and global styles Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -6,11 +6,74 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Base colors from DESIGN.md */
|
||||
--background: #131313;
|
||||
--foreground: #FFFFFF;
|
||||
--primary: #F58618;
|
||||
--border: #222222;
|
||||
--muted: #888888;
|
||||
--on-background: #e5e2e1;
|
||||
--foreground: #e5e2e1;
|
||||
|
||||
/* Surface tones from DESIGN.md */
|
||||
--surface: #131313;
|
||||
--surface-dim: #131313;
|
||||
--surface-bright: #3a3939;
|
||||
--surface-container-lowest: #0e0e0e;
|
||||
--surface-container-low: #1c1b1b;
|
||||
--surface-container: #201f1f;
|
||||
--surface-container-high: #2a2a2a;
|
||||
--surface-container-highest: #353534;
|
||||
--surface-variant: #353534;
|
||||
|
||||
/* Primary colors from DESIGN.md */
|
||||
--primary: #ffb781;
|
||||
--on-primary: #4e2600;
|
||||
--primary-container: #f58618;
|
||||
--on-primary-container: #5b2d00;
|
||||
--primary-fixed: #ffdcc4;
|
||||
--primary-fixed-dim: #ffb781;
|
||||
--on-primary-fixed: #2f1400;
|
||||
--on-primary-fixed-variant: #6f3800;
|
||||
--inverse-primary: #924c00;
|
||||
|
||||
/* Secondary colors from DESIGN.md */
|
||||
--secondary: #c8c6c5;
|
||||
--on-secondary: #303030;
|
||||
--secondary-container: #474746;
|
||||
--on-secondary-container: #b7b5b4;
|
||||
--secondary-fixed: #e5e2e1;
|
||||
--secondary-fixed-dim: #c8c6c5;
|
||||
--on-secondary-fixed: #1b1c1c;
|
||||
--on-secondary-fixed-variant: #474746;
|
||||
|
||||
/* Tertiary colors from DESIGN.md */
|
||||
--tertiary: #00e639;
|
||||
--on-tertiary: #003907;
|
||||
--tertiary-container: #00bd2d;
|
||||
--on-tertiary-container: #00440a;
|
||||
--tertiary-fixed: #72ff70;
|
||||
--tertiary-fixed-dim: #00e639;
|
||||
--on-tertiary-fixed: #002203;
|
||||
--on-tertiary-fixed-variant: #00530e;
|
||||
|
||||
/* Error colors from DESIGN.md */
|
||||
--error: #ffb4ab;
|
||||
--on-error: #690005;
|
||||
--error-container: #93000a;
|
||||
--on-error-container: #ffdad6;
|
||||
|
||||
/* Outline colors from DESIGN.md */
|
||||
--outline: #a48c7c;
|
||||
--outline-variant: #564335;
|
||||
|
||||
/* Inverse colors from DESIGN.md */
|
||||
--inverse-surface: #e5e2e1;
|
||||
--inverse-on-surface: #313030;
|
||||
|
||||
/* Semantic spacing tokens */
|
||||
--spacing-unit: 4px;
|
||||
--spacing-gutter: 16px;
|
||||
--spacing-margin: 32px;
|
||||
--spacing-container-gap: 24px;
|
||||
--spacing-stack-sm: 8px;
|
||||
--spacing-stack-md: 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -25,79 +88,151 @@
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Strict "NO BOLD" enforcement from AI_RULES.md */
|
||||
/* Strict "NO BOLD" enforcement from AI_RULES.md - Hierarchy via size and color only */
|
||||
*, *::before, *::after {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
/* No uppercase/italics as per AI_RULES.md */
|
||||
/* No uppercase/italics as per AI_RULES.md and GEMINI.md */
|
||||
*, *::before, *::after {
|
||||
text-transform: none !important;
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply tracking-tighter;
|
||||
/* Typography scale with proper letter-spacing per DESIGN.md */
|
||||
h1 {
|
||||
@apply text-5xl tracking-tighter;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-4xl tracking-tight;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
@apply tracking-tight;
|
||||
}
|
||||
|
||||
/* Input Fields: Darker than the container background per DESIGN.md */
|
||||
input, textarea, select {
|
||||
@apply bg-black border border-[#222222] text-white px-3 py-2 focus:border-primary focus:outline-none transition-colors;
|
||||
@apply bg-surface-container-lowest border border-outline text-foreground px-3 py-2 focus:border-primary focus:outline-none transition-colors;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles */
|
||||
/* Button Styles: Rectangular with no radius */
|
||||
.btn-primary {
|
||||
@apply bg-primary text-black px-4 py-2 hover:bg-[#d47214] transition-colors inline-flex items-center justify-center gap-2;
|
||||
@apply bg-primary text-on-primary px-4 py-2 hover:opacity-90 transition-opacity inline-flex items-center justify-center gap-2;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-transparent border border-[#888888] text-[#888888] px-4 py-2 hover:border-white hover:text-white transition-colors inline-flex items-center justify-center gap-2;
|
||||
@apply bg-transparent border border-secondary text-secondary px-4 py-2 hover:border-foreground hover:text-foreground transition-colors inline-flex items-center justify-center gap-2;
|
||||
}
|
||||
|
||||
/* Level 1 (Cards/Panels): #121212 with a 1px solid border of #222222 */
|
||||
.level-0 {
|
||||
@apply bg-surface;
|
||||
}
|
||||
|
||||
/* Level 1 (Cards/Panels): surface-container with 1px border of outline-variant */
|
||||
.level-1 {
|
||||
@apply bg-[#121212] border border-[#222222];
|
||||
@apply bg-surface-container border border-outline-variant;
|
||||
}
|
||||
|
||||
/* Level 2 (Modals/Popovers): #1A1A1A with a 2px solid border of the Primary Orange */
|
||||
/* Level 2 (Modals/Popovers): surface-container-high with 2px border of primary */
|
||||
.level-2 {
|
||||
@apply bg-[#1A1A1A] border-2 border-primary;
|
||||
@apply bg-surface-container-high border-2 border-primary;
|
||||
}
|
||||
|
||||
/* Active State */
|
||||
|
||||
.input-field {
|
||||
@apply bg-surface-container-lowest border border-outline text-foreground px-3 py-2 focus:border-primary focus:outline-none transition-colors;
|
||||
}
|
||||
|
||||
/* Active State: 1px solid primary */
|
||||
.active-border {
|
||||
@apply border border-primary;
|
||||
}
|
||||
|
||||
/* High-contrast status blocks */
|
||||
/* High-contrast status blocks: No rounded corners */
|
||||
.status-success {
|
||||
@apply bg-[#00FF41] text-black px-2 py-0.5;
|
||||
@apply bg-success text-on-tertiary px-2 py-0.5;
|
||||
}
|
||||
|
||||
.status-alert {
|
||||
@apply bg-[#F58618] text-black px-2 py-0.5;
|
||||
@apply bg-primary text-on-primary px-2 py-0.5;
|
||||
}
|
||||
|
||||
/* Data Tables: Header cells with a subtle background tint */
|
||||
.table-header {
|
||||
@apply bg-surface-container-high border-b border-outline py-2 px-4 text-secondary text-sm font-normal;
|
||||
}
|
||||
|
||||
/* Log Viewers: Background surface-container-lowest with outline border */
|
||||
.log-viewer {
|
||||
@apply bg-surface-container-lowest border border-outline p-4 font-mono mono-data overflow-y-auto;
|
||||
}
|
||||
|
||||
/* Typography utilities for DESIGN.md semantic sizing */
|
||||
.headline-lg {
|
||||
@apply text-5xl font-normal;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.headline-md {
|
||||
@apply text-4xl font-normal;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.headline-sm {
|
||||
@apply text-2xl font-normal;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.body-lg {
|
||||
@apply text-lg font-normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.body-md {
|
||||
@apply text-base font-normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.label-md {
|
||||
@apply text-sm font-normal;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mono-data {
|
||||
@apply text-sm font-normal;
|
||||
font-family: 'Space Grotesk', monospace;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Industrial Scrollbar Styling */
|
||||
/* Custom Industrial Scrollbar Styling per DESIGN.md */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0A0A0A;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #222222;
|
||||
background: var(--outline-variant);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #F58618;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
Reference in New Issue
Block a user