chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: implement monochrome design system across entire frontend

Browse Source 
Migrate all 84 frontend files from the old themed/colored design to a
monochrome glass-morphism design system. Pure black backgrounds, white
text with opacity levels, glass-card components with backdrop-blur, and
functional color reserved for status indicators only.

Foundation: remap CSS variables to monochrome, simplify Tailwind config,
remove theme toggle, convert brand logo/wordmark to white. Pages: all
14 pages updated. Components: all common, library, session, step-library,
tree-editor, tree-preview, admin, and subscription components converted.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-09 21:41:29 -05:00
parent 1381aaae99
commit f4ce1595d6
88 changed files with 2976 additions and 1596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/src/index.css
View File

@@ -4,50 +4,27 @@
@layer base {
:root {
/* Light mode (fallback) */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 243 75% 59%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 243 75% 59%;
--radius: 0.75rem;
}
.dark {
/* ResolutionFlow Dark Theme */
--background: 240 10% 3.9%;
/* Monochrome Design System — Dark Only */
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--card: 240 10% 9.4%;
--card: 0 0% 4%;
--card-foreground: 0 0% 100%;
--popover: 240 10% 9.4%;
--popover: 0 0% 4%;
--popover-foreground: 0 0% 100%;
--primary: 243 75% 59%;
--primary-foreground: 0 0% 100%;
--secondary: 240 5.9% 15%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 0%;
--secondary: 0 0% 10%;
--secondary-foreground: 0 0% 100%;
--muted: 240 5.9% 15%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 5.9% 15%;
--muted: 0 0% 10%;
--muted-foreground: 0 0% 50%;
--accent: 0 0% 8%;
--accent-foreground: 0 0% 100%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 100%;
--border: 240 5.9% 15%;
--input: 240 5.9% 15%;
--ring: 243 75% 59%;
--border: 0 0% 12%;
--input: 0 0% 12%;
--ring: 0 0% 100%;
--radius: 0.75rem;
}
}
@@ -78,7 +55,7 @@
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
}
@@ -111,10 +88,6 @@
}
@layer utilities {
.text-gradient-brand {
@apply bg-gradient-brand bg-clip-text text-transparent;
}
.animate-fade-in {
animation: fade-in 200ms ease-out;
}
@@ -135,45 +108,67 @@
animation: scale-in 150ms ease-out;
}
/* Button press feedback for primary action buttons */
/* Button press feedback */
.btn-press {
@apply active:scale-[0.98] transition-transform;
}
/* Glass card effect */
.glass-card {
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
}
.glass-card-hover {
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
border-color: rgba(255, 255, 255, 0.12);
}
/* Active/highlighted card glow */
.glass-card-glow {
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
}
/* Stat card */
.glass-stat {
background: rgba(20, 20, 25, 0.5);
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
}
}
/* Sonner Toast Customization - ResolutionFlow Design System */
/* Sonner Toast Customization */
@layer components {
/* Base toast styling matching Modal/Card components */
:where([data-sonner-toast]) {
@apply bg-card text-card-foreground;
@apply border border-border shadow-lg;
@apply rounded-lg;
@apply rounded-xl;
font-family: 'Inter', system-ui, sans-serif;
backdrop-filter: blur(10px);
}
/* Toast title using heading font */
:where([data-sonner-toast]) [data-title] {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
}
/* Success toast - uses primary brand color */
:where([data-sonner-toast][data-type="success"]) {
@apply border-primary/30;
border-color: rgba(52, 211, 153, 0.3);
}
:where([data-sonner-toast][data-type="success"]) [data-icon] {
@apply text-primary;
color: #34d399;
}
/* Error toast - uses destructive color */
:where([data-sonner-toast][data-type="error"]) {
@apply border-destructive/30;
border-color: rgba(248, 113, 113, 0.3);
}
:where([data-sonner-toast][data-type="error"]) [data-icon] {
@apply text-destructive;
color: #f87171;
}
/* Info toast - uses muted color */
:where([data-sonner-toast][data-type="info"]) {
@apply border-border;
}
@@ -181,26 +176,23 @@
@apply text-muted-foreground;
}
/* Warning toast - uses amber color */
:where([data-sonner-toast][data-type="warning"]) {
border-color: hsl(38 92% 50% / 0.3);
border-color: rgba(251, 191, 36, 0.3);
}
:where([data-sonner-toast][data-type="warning"]) [data-icon] {
color: hsl(38 92% 50%);
color: #fbbf24;
}
/* Close button matching Modal close button */
:where([data-sonner-toast]) [data-close-button] {
@apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
@apply rounded-md transition-colors;
}
/* Loading spinner uses primary color */
:where([data-sonner-toast]) [data-icon][data-loading] {
@apply text-primary;
@apply text-white;
}
/* React Day Picker Customization - ResolutionFlow Design System */
/* React Day Picker Customization */
.rdp-custom {
@apply text-foreground;
}
@@ -242,7 +234,7 @@
}
.rdp-custom .rdp-day_selected {
@apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
@apply bg-white text-black hover:bg-white/90 hover:text-black;
}
.rdp-custom .rdp-day_today {