diff --git a/src/frontend/src/assets/douzone.css b/src/frontend/src/assets/douzone.css index 82adec41..38423c7b 100644 --- a/src/frontend/src/assets/douzone.css +++ b/src/frontend/src/assets/douzone.css @@ -1,27 +1,27 @@ /* Douzone ERP & Enterprise Premium Design System for Vue 3 SPA */ :root { - --douzone-navy: #2C3E50; - --douzone-slate: #34495E; - --douzone-bg: #F4F6F9; + --douzone-navy: #1E293B; + --douzone-slate: #334155; + --douzone-bg: #F1F5F9; --douzone-border: #CBD5E1; --douzone-input-bg: #FFFFFF; - --douzone-readonly-bg: #ECF0F1; + --douzone-readonly-bg: #F8FAFC; - --status-pass: #2ECC71; - --status-pass-bg: #E8F8F5; - --status-pass-text: #117864; + --status-pass: #059669; + --status-pass-bg: #D1FAE5; + --status-pass-text: #047857; - --status-warning: #F39C12; - --status-warning-bg: #FEF9E7; - --status-warning-text: #B9770E; + --status-warning: #D97706; + --status-warning-bg: #FEF3C7; + --status-warning-text: #92400E; - --status-error: #E74C3C; - --status-error-bg: #FDEDEC; - --status-error-text: #922B21; + --status-error: #DC2626; + --status-error-bg: #FFE4E6; + --status-error-text: #9F1239; - --focus-highlight: #2980B9; - --focus-box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.25); + --focus-highlight: #2563EB; + --focus-box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); } * { @@ -40,6 +40,18 @@ body { overflow: hidden; } +/* Form Element Fonts & High Contrast Defaults */ +input, select, textarea, button { + font-family: inherit; + font-size: inherit; + color: #0F172A; +} + +input::placeholder, textarea::placeholder { + color: #94A3B8 !important; + opacity: 1; +} + /* Base Layout Utilities */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } @@ -68,6 +80,7 @@ body { .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } +.p-5 { padding: 20px; } .p-6 { padding: 24px; } .px-2 { padding-left: 8px; padding-right: 8px; } @@ -96,53 +109,56 @@ body { .sticky { position: sticky; } .bottom-0 { bottom: 0; } -/* Colors & Backgrounds */ -.bg-white { background-color: #FFFFFF; } -.bg-slate-50 { background-color: #F8FAFC; } -.bg-slate-100 { background-color: #F1F5F9; } -.bg-slate-200 { background-color: #E2E8F0; } -.bg-slate-800 { background-color: #1E293B; } -.bg-slate-900 { background-color: #0F172A; } -.bg-blue-50 { background-color: #EFF6FF; } -.bg-blue-100 { background-color: #DBEAFE; } -.bg-blue-600 { background-color: #2563EB; } -.bg-blue-700 { background-color: #1D4ED8; } -.bg-emerald-50 { background-color: #ECFDF5; } -.bg-emerald-100 { background-color: #D1FAE5; } -.bg-emerald-600 { background-color: #059669; } -.bg-amber-50 { background-color: #FFFBEB; } -.bg-amber-100 { background-color: #FEF3C7; } -.bg-rose-50 { background-color: #FFF1F2; } -.bg-rose-100 { background-color: #FFE4E6; } -.bg-rose-600 { background-color: #E11D48; } +/* Backgrounds & Text Color Contrast Safety */ +.bg-white { background-color: #FFFFFF; color: #0F172A; } +.bg-slate-50 { background-color: #F8FAFC; color: #0F172A; } +.bg-slate-100 { background-color: #F1F5F9; color: #0F172A; } +.bg-slate-200 { background-color: #E2E8F0; color: #0F172A; } +.bg-slate-800 { background-color: #1E293B; color: #F8FAFC; } +.bg-slate-900 { background-color: #0F172A; color: #F8FAFC; } +.bg-blue-50 { background-color: #EFF6FF; color: #1E40AF; } +.bg-blue-100 { background-color: #DBEAFE; color: #1E40AF; } +.bg-blue-600 { background-color: #2563EB; color: #FFFFFF; } +.bg-blue-700 { background-color: #1D4ED8; color: #FFFFFF; } +.bg-emerald-50 { background-color: #ECFDF5; color: #047857; } +.bg-emerald-100 { background-color: #D1FAE5; color: #047857; } +.bg-emerald-600 { background-color: #059669; color: #FFFFFF; } +.bg-amber-50 { background-color: #FFFBEB; color: #92400E; } +.bg-amber-100 { background-color: #FEF3C7; color: #92400E; } +.bg-rose-50 { background-color: #FFF1F2; color: #9F1239; } +.bg-rose-100 { background-color: #FFE4E6; color: #9F1239; } +.bg-rose-600 { background-color: #E11D48; color: #FFFFFF; } -/* Text Styles */ +/* Text Color Classes */ .text-xs { font-size: 12px; } .text-sm { font-size: 14px; } .text-base { font-size: 16px; } .text-xl { font-size: 20px; } .font-bold { font-weight: 700; } +.font-extrabold { font-weight: 800; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .font-mono { font-family: monospace; } .text-right { text-align: right; } .text-center { text-align: center; } -.text-white { color: #FFFFFF; } -.text-slate-400 { color: #94A3B8; } -.text-slate-500 { color: #64748B; } -.text-slate-600 { color: #475569; } -.text-slate-700 { color: #334155; } -.text-slate-800 { color: #1E293B; } -.text-slate-900 { color: #0F172A; } -.text-blue-600 { color: #2563EB; } -.text-blue-700 { color: #1D4ED8; } -.text-blue-800 { color: #1E40AF; } -.text-emerald-600 { color: #059669; } -.text-emerald-700 { color: #047857; } -.text-amber-800 { color: #92400E; } -.text-rose-700 { color: #BE123C; } -.text-rose-800 { color: #9F1239; } +.text-white { color: #FFFFFF !important; } +.text-amber-300 { color: #FCD34D !important; } +.text-slate-400 { color: #94A3B8 !important; } +.text-slate-500 { color: #64748B !important; } +.text-slate-600 { color: #475569 !important; } +.text-slate-700 { color: #334155 !important; } +.text-slate-800 { color: #1E293B !important; } +.text-slate-900 { color: #0F172A !important; } +.text-blue-600 { color: #2563EB !important; } +.text-blue-700 { color: #1D4ED8 !important; } +.text-blue-800 { color: #1E40AF !important; } +.text-emerald-600 { color: #059669 !important; } +.text-emerald-700 { color: #047857 !important; } +.text-amber-800 { color: #92400E !important; } +.text-rose-600 { color: #DC2626 !important; } +.text-rose-700 { color: #BE123C !important; } +.text-rose-800 { color: #9F1239 !important; } /* Borders & Shadows */ .border { border-width: 1px; border-style: solid; } @@ -161,22 +177,24 @@ body { .rounded-lg { border-radius: 8px; } .rounded-full { border-radius: 9999px; } -.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } +.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } +.shadow-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .transition { transition: all 0.15s ease-in-out; } -/* AG Grid Enterprise High-Density Theme Override */ +/* AG Grid High-Contrast Custom Theme Override */ .ag-theme-alpine { width: 100%; height: 100%; - min-height: 400px; - --ag-header-background-color: #F8FAFC; - --ag-header-foreground-color: #1E293B; + min-height: 200px; + --ag-header-background-color: #F1F5F9; + --ag-header-foreground-color: #0F172A; + --ag-data-color: #0F172A; --ag-selected-row-background-color: rgba(37, 99, 235, 0.12); - --ag-row-hover-color: rgba(226, 232, 240, 0.6); + --ag-row-hover-color: rgba(226, 232, 240, 0.7); --ag-font-size: 12px; --ag-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - --ag-border-color: #E2E8F0; + --ag-border-color: #CBD5E1; --ag-row-height: 36px; --ag-header-height: 38px; } @@ -188,5 +206,5 @@ body { .ag-header-cell-label { font-weight: 700 !important; - color: #1E293B !important; + color: #0F172A !important; }