From 49791203e9e966ccbc80b09de1fe5cf68cc8145f Mon Sep 17 00:00:00 2001 From: Andrii Shutov Date: Sat, 27 Jun 2026 14:07:58 -0400 Subject: [PATCH] Theme for the website replaced to UUI DS with implementation of dark and light theme based on browser setup or manual toggle --- client/src/App.vue | 333 +++++++++------ client/src/assets/design-tokens.css | 370 +++++++++++++++++ client/src/components/BacklogDetailModal.vue | 66 +-- client/src/components/CostDetailModal.vue | 56 +-- client/src/components/FilterBar.vue | 75 ++-- .../src/components/InventoryDetailModal.vue | 215 +++++----- client/src/components/LanguageSwitcher.vue | 66 +-- client/src/components/ProductDetailModal.vue | 48 +-- client/src/components/ProfileDetailsModal.vue | 126 +++--- client/src/components/ProfileMenu.vue | 131 +++--- client/src/components/TasksModal.vue | 267 ++++++------ client/src/composables/useTheme.js | 24 ++ client/src/main.js | 1 + client/src/views/Backlog.vue | 4 +- client/src/views/Dashboard.vue | 393 ++++++------------ client/src/views/Demand.vue | 52 +-- client/src/views/Inventory.vue | 32 +- client/src/views/Orders.vue | 14 +- client/src/views/Reports.vue | 50 +-- client/src/views/Spending.vue | 80 ++-- 20 files changed, 1384 insertions(+), 1019 deletions(-) create mode 100644 client/src/assets/design-tokens.css create mode 100644 client/src/composables/useTheme.js diff --git a/client/src/App.vue b/client/src/App.vue index c2da05a5..ad1a31a6 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -3,7 +3,7 @@
+ diff --git a/client/src/assets/design-tokens.css b/client/src/assets/design-tokens.css new file mode 100644 index 00000000..8ed4161e --- /dev/null +++ b/client/src/assets/design-tokens.css @@ -0,0 +1,370 @@ +/* ============================================================ + EPAM UUI Design System — Design Tokens + Source: claude.ai/design project 7097e02d-a822-4704-8af9-4591f841d406 + Two themes: light (default) and dark ([data-theme="dark"] on ) + ============================================================ */ + +/* Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap'); + +:root { + /* ───────────────────────────────────── + PRIMITIVE PALETTE + ───────────────────────────────────── */ + + /* Neutral (night) */ + --uui-white: #ffffff; + --uui-night-50: #fafafc; + --uui-night-100: #f5f6fa; + --uui-night-200: #ebedf5; + --uui-night-300: #e1e3eb; + --uui-night-400: #ced0db; + --uui-night-500: #acafbf; + --uui-night-600: #6c6f80; + --uui-night-700: #474a59; + --uui-night-800: #303240; + --uui-night-900: #1d1e26; + + /* Blue (primary) */ + --uui-blue-10: #eff6ff; + --uui-blue-20: #cee3fc; + --uui-blue-30: #a1c9f4; + --uui-blue-50: #2b97f0; + --uui-blue-60: #0c8ce9; + --uui-blue-70: #0a68f1; + --uui-blue-80: #0a5dc2; + --uui-blue-90: #08489a; + + /* Violet (accent) */ + --uui-violet-10: #f0ecff; + --uui-violet-20: #d9d1ff; + --uui-violet-30: #bdb0ff; + --uui-violet-50: #8871ff; + --uui-violet-60: #7b61ff; + --uui-violet-70: #614dc9; + --uui-violet-90: #3f3185; + + /* Cyan (info) */ + --uui-cyan-10: #e1f4fb; + --uui-cyan-30: #80d4ee; + --uui-cyan-60: #009ecc; + --uui-cyan-70: #0079a1; + + /* Green (success) */ + --uui-green-10: #edf6de; + --uui-green-30: #b6db8a; + --uui-green-60: #67a300; + --uui-green-70: #528500; + + /* Amber (warning) */ + --uui-amber-10: #fff3de; + --uui-amber-30: #ffd789; + --uui-amber-60: #ffa000; + --uui-amber-70: #cc8000; + + /* Fire (error/critical) */ + --uui-fire-10: #fceeec; + --uui-fire-30: #ffb3ac; + --uui-fire-50: #ff4242; + --uui-fire-60: #e5452d; + --uui-fire-70: #c42e12; + + /* ───────────────────────────────────── + SEMANTIC TOKENS — SURFACES + ───────────────────────────────────── */ + --uui-surface-app: var(--uui-night-100); + --uui-surface-main: var(--uui-white); + --uui-surface-higher: var(--uui-white); + --uui-surface-lowest: var(--uui-night-50); + --uui-surface-sunken: var(--uui-night-100); + --uui-surface-contrast: var(--uui-night-800); + --uui-overlay: rgba(29, 30, 38, 0.45); + + /* ───────────────────────────────────── + SEMANTIC TOKENS — TEXT + ───────────────────────────────────── */ + --uui-text-primary: var(--uui-night-800); + --uui-text-secondary: var(--uui-night-600); + --uui-text-tertiary: var(--uui-night-500); + --uui-text-disabled: var(--uui-night-400); + --uui-text-brand: var(--uui-blue-70); + --uui-text-contrast: var(--uui-white); + + /* ───────────────────────────────────── + SEMANTIC TOKENS — ICONS + ───────────────────────────────────── */ + --uui-icon: var(--uui-night-600); + --uui-icon-active: var(--uui-night-800); + --uui-icon-disabled: var(--uui-night-400); + --uui-icon-contrast: var(--uui-white); + + /* ───────────────────────────────────── + SEMANTIC TOKENS — CONTROLS + ───────────────────────────────────── */ + --uui-control-bg: var(--uui-white); + --uui-control-bg-disabled: var(--uui-night-100); + --uui-control-border: var(--uui-night-400); + --uui-control-border-hover: var(--uui-night-500); + --uui-control-placeholder: var(--uui-night-500); + --uui-control-text: var(--uui-night-800); + + /* ───────────────────────────────────── + SEMANTIC TOKENS — LINKS + ───────────────────────────────────── */ + --uui-link: var(--uui-blue-70); + --uui-link-hover: var(--uui-blue-80); + --uui-link-visited: var(--uui-violet-70); + + /* ───────────────────────────────────── + SEMANTIC TOKENS — BORDERS + ───────────────────────────────────── */ + --uui-border: var(--uui-night-300); + --uui-border-subtle: var(--uui-night-200); + --uui-border-strong: var(--uui-night-400); + --uui-divider: var(--uui-night-200); + + /* ───────────────────────────────────── + SEMANTIC TOKENS — BRAND / PRIMARY + ───────────────────────────────────── */ + --uui-primary: var(--uui-blue-60); + --uui-primary-hover: var(--uui-blue-70); + --uui-primary-active: var(--uui-blue-80); + --uui-primary-subtle: var(--uui-blue-10); + + /* Accent */ + --uui-accent: var(--uui-violet-60); + --uui-accent-hover: var(--uui-violet-70); + --uui-accent-subtle: var(--uui-violet-10); + + /* ───────────────────────────────────── + SEMANTIC TOKENS — STATUS + ───────────────────────────────────── */ + --uui-info: var(--uui-cyan-60); + --uui-info-subtle: var(--uui-cyan-10); + --uui-success: var(--uui-green-60); + --uui-success-subtle: var(--uui-green-10); + --uui-warning: var(--uui-amber-60); + --uui-warning-subtle: var(--uui-amber-10); + --uui-error: var(--uui-fire-60); + --uui-error-hover: var(--uui-fire-70); + --uui-error-subtle: var(--uui-fire-10); + + /* Focus ring */ + --uui-focus: var(--uui-blue-60); + + /* ───────────────────────────────────── + TYPOGRAPHY + ───────────────────────────────────── */ + --uui-font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --uui-font-ui: "Inter", "Source Sans 3", system-ui, sans-serif; + --uui-font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; + + --uui-fw-regular: 400; + --uui-fw-semibold: 600; + --uui-fw-bold: 700; + + --uui-display-size: 48px; --uui-display-lh: 60px; --uui-display-fw: 700; + --uui-h1-size: 36px; --uui-h1-lh: 48px; --uui-h1-fw: 700; + --uui-h2-size: 30px; --uui-h2-lh: 42px; --uui-h2-fw: 700; + --uui-h3-size: 24px; --uui-h3-lh: 30px; --uui-h3-fw: 600; + --uui-h4-size: 18px; --uui-h4-lh: 24px; --uui-h4-fw: 600; + --uui-h5-size: 16px; --uui-h5-lh: 24px; --uui-h5-fw: 600; + + --uui-text-l-size: 18px; --uui-text-l-lh: 24px; + --uui-text-m-size: 16px; --uui-text-m-lh: 24px; + --uui-text-s-size: 14px; --uui-text-s-lh: 18px; + --uui-text-xs-size: 12px; --uui-text-xs-lh: 18px; + + --uui-overline-size: 12px; --uui-overline-lh: 18px; --uui-overline-tracking: 0.06em; + --uui-mono-size: 14px; --uui-mono-lh: 24px; + + /* ───────────────────────────────────── + SPACING (6px grid) + ───────────────────────────────────── */ + --uui-space-0: 0; + --uui-space-3: 3px; + --uui-space-6: 6px; + --uui-space-12: 12px; + --uui-space-18: 18px; + --uui-space-24: 24px; + --uui-space-30: 30px; + --uui-space-36: 36px; + --uui-space-48: 48px; + --uui-space-60: 60px; + --uui-space-72: 72px; + --uui-space-90: 90px; + --uui-space-120: 120px; + + --uui-size-24: 24px; + --uui-size-30: 30px; + --uui-size-36: 36px; + --uui-size-42: 42px; + --uui-size-48: 48px; + + --uui-page-gutter: 24px; + --uui-content-max: 1280px; + + /* ───────────────────────────────────── + BORDER RADIUS + ───────────────────────────────────── */ + --uui-radius-0: 0; + --uui-radius-2: 2px; + --uui-radius-3: 3px; + --uui-radius-6: 6px; + --uui-radius-12: 12px; + --uui-radius-18: 18px; + --uui-radius-24: 24px; + --uui-radius-full: 9999px; + + /* ───────────────────────────────────── + ELEVATION / SHADOWS + ───────────────────────────────────── */ + --uui-shadow-100: 0 1px 3px rgba(29, 30, 38, 0.10); + --uui-shadow-200: 0 3px 6px rgba(29, 30, 38, 0.10), 0 1px 2px rgba(29, 30, 38, 0.06); + --uui-shadow-300: 0 6px 18px rgba(29, 30, 38, 0.12), 0 2px 4px rgba(29, 30, 38, 0.06); + --uui-shadow-400: 0 12px 36px rgba(29, 30, 38, 0.18), 0 3px 8px rgba(29, 30, 38, 0.08); + --uui-shadow-focus: 0 0 0 3px rgba(12, 140, 233, 0.30); + + /* Z-index scale */ + --uui-z-base: 0; + --uui-z-sticky: 100; + --uui-z-dropdown: 400; + --uui-z-overlay: 900; + --uui-z-modal: 1000; + --uui-z-tooltip: 1500; + --uui-z-toast: 2000; +} + +/* ============================================================ + LIGHT / DARK COLOR-SCHEME HINT + Tells the browser to style native UI (scrollbars, form controls) + to match the active theme. + ============================================================ */ +:root { + color-scheme: light dark; +} + +:root[data-theme="light"] { + color-scheme: light; +} + +:root[data-theme="dark"] { + color-scheme: dark; +} + +/* ============================================================ + DARK THEME — semantic token overrides + Two triggers (DRY note: kept intentionally explicit): + 1. OS/browser prefers dark AND the user hasn't forced light + 2. User has manually forced dark via [data-theme="dark"] + ============================================================ */ + +/* ── Trigger 1: OS / browser dark preference ── */ +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --uui-surface-app: #14151c; + --uui-surface-main: var(--uui-night-900); + --uui-surface-higher: var(--uui-night-800); + --uui-surface-lowest: #0f1015; + --uui-surface-sunken: #14151c; + --uui-surface-contrast: var(--uui-white); + --uui-overlay: rgba(0, 0, 0, 0.65); + + --uui-text-primary: var(--uui-white); + --uui-text-secondary: var(--uui-night-400); + --uui-text-tertiary: var(--uui-night-500); + --uui-text-disabled: var(--uui-night-600); + --uui-text-brand: var(--uui-blue-50); + + --uui-icon: var(--uui-night-400); + --uui-icon-active: var(--uui-white); + --uui-icon-disabled: var(--uui-night-600); + + --uui-control-bg: var(--uui-night-800); + --uui-control-bg-disabled: var(--uui-night-900); + --uui-control-border: var(--uui-night-600); + --uui-control-border-hover: var(--uui-night-500); + --uui-control-placeholder: var(--uui-night-500); + --uui-control-text: var(--uui-white); + + --uui-link: var(--uui-blue-50); + --uui-link-hover: var(--uui-blue-30); + + --uui-border: var(--uui-night-700); + --uui-border-subtle: var(--uui-night-800); + --uui-border-strong: var(--uui-night-600); + --uui-divider: var(--uui-night-700); + + --uui-primary-subtle: rgba(12, 140, 233, 0.18); + --uui-accent-subtle: rgba(123, 97, 255, 0.18); + + --uui-info-subtle: rgba(0, 158, 204, 0.18); + --uui-success-subtle: rgba(103, 163, 0, 0.18); + --uui-warning-subtle: rgba(255, 160, 0, 0.18); + --uui-error-subtle: rgba(229, 69, 45, 0.18); + + --uui-info: var(--uui-cyan-30); + --uui-success: var(--uui-green-30); + --uui-warning: var(--uui-amber-30); + --uui-error: var(--uui-fire-30); + + --uui-shadow-100: 0 1px 3px rgba(0, 0, 0, 0.40); + --uui-shadow-200: 0 3px 6px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.25); + --uui-shadow-300: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25); + --uui-shadow-400: 0 12px 36px rgba(0, 0, 0, 0.60), 0 3px 8px rgba(0, 0, 0, 0.35); + } +} + +/* ── Trigger 2: manually forced dark (overrides system light) ── */ +:root[data-theme="dark"] { + --uui-surface-app: #14151c; + --uui-surface-main: var(--uui-night-900); + --uui-surface-higher: var(--uui-night-800); + --uui-surface-lowest: #0f1015; + --uui-surface-sunken: #14151c; + --uui-surface-contrast: var(--uui-white); + --uui-overlay: rgba(0, 0, 0, 0.65); + + --uui-text-primary: var(--uui-white); + --uui-text-secondary: var(--uui-night-400); + --uui-text-tertiary: var(--uui-night-500); + --uui-text-disabled: var(--uui-night-600); + --uui-text-brand: var(--uui-blue-50); + + --uui-icon: var(--uui-night-400); + --uui-icon-active: var(--uui-white); + --uui-icon-disabled: var(--uui-night-600); + + --uui-control-bg: var(--uui-night-800); + --uui-control-bg-disabled: var(--uui-night-900); + --uui-control-border: var(--uui-night-600); + --uui-control-border-hover: var(--uui-night-500); + --uui-control-placeholder: var(--uui-night-500); + --uui-control-text: var(--uui-white); + + --uui-link: var(--uui-blue-50); + --uui-link-hover: var(--uui-blue-30); + + --uui-border: var(--uui-night-700); + --uui-border-subtle: var(--uui-night-800); + --uui-border-strong: var(--uui-night-600); + --uui-divider: var(--uui-night-700); + + --uui-primary-subtle: rgba(12, 140, 233, 0.18); + --uui-accent-subtle: rgba(123, 97, 255, 0.18); + + --uui-info-subtle: rgba(0, 158, 204, 0.18); + --uui-success-subtle: rgba(103, 163, 0, 0.18); + --uui-warning-subtle: rgba(255, 160, 0, 0.18); + --uui-error-subtle: rgba(229, 69, 45, 0.18); + + --uui-info: var(--uui-cyan-30); + --uui-success: var(--uui-green-30); + --uui-warning: var(--uui-amber-30); + --uui-error: var(--uui-fire-30); + + --uui-shadow-100: 0 1px 3px rgba(0, 0, 0, 0.40); + --uui-shadow-200: 0 3px 6px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.25); + --uui-shadow-300: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25); + --uui-shadow-400: 0 12px 36px rgba(0, 0, 0, 0.60), 0 3px 8px rgba(0, 0, 0, 0.35); +} diff --git a/client/src/components/BacklogDetailModal.vue b/client/src/components/BacklogDetailModal.vue index 280958ac..aa9abb55 100644 --- a/client/src/components/BacklogDetailModal.vue +++ b/client/src/components/BacklogDetailModal.vue @@ -139,7 +139,7 @@ const formatDate = (dateString) => { } .modal-container { - background: white; + background: var(--uui-surface-main); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); max-width: 700px; @@ -155,20 +155,20 @@ const formatDate = (dateString) => { align-items: center; justify-content: space-between; padding: 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); } .modal-title { font-size: 1.25rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); letter-spacing: -0.025em; } .close-button { background: none; border: none; - color: #64748b; + color: var(--uui-text-secondary); cursor: pointer; padding: 0.5rem; display: flex; @@ -179,8 +179,8 @@ const formatDate = (dateString) => { } .close-button:hover { - background: #f1f5f9; - color: #0f172a; + background: var(--uui-surface-sunken); + color: var(--uui-text-primary); } .modal-body { @@ -194,14 +194,14 @@ const formatDate = (dateString) => { align-items: center; gap: 1.25rem; padding-bottom: 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); margin-bottom: 1.5rem; } .shortage-icon { width: 64px; height: 64px; - background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + background: linear-gradient(135deg, var(--uui-error) 0%, var(--uui-error-hover) 100%); border-radius: 12px; display: flex; align-items: center; @@ -218,13 +218,13 @@ const formatDate = (dateString) => { .item-name { font-size: 1.5rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); margin: 0 0 0.5rem 0; } .item-sku { font-size: 0.875rem; - color: #64748b; + color: var(--uui-text-secondary); font-family: 'Monaco', 'Courier New', monospace; } @@ -239,18 +239,18 @@ const formatDate = (dateString) => { } .priority-badge.high { - background: #fecaca; - color: #991b1b; + background: var(--uui-error-subtle); + color: var(--uui-error); } .priority-badge.medium { - background: #fed7aa; - color: #92400e; + background: var(--uui-warning-subtle); + color: var(--uui-warning); } .priority-badge.low { - background: #dbeafe; - color: #1e40af; + background: var(--uui-primary-subtle); + color: var(--uui-primary); } .shortage-summary { @@ -267,13 +267,13 @@ const formatDate = (dateString) => { } .summary-card.danger { - border-color: #fecaca; - background: #fef2f2; + border-color: var(--uui-error-subtle); + background: var(--uui-error-subtle); } .summary-card.warning { - border-color: #fed7aa; - background: #fffbeb; + border-color: var(--uui-warning-subtle); + background: var(--uui-warning-subtle); } .summary-label { @@ -281,22 +281,22 @@ const formatDate = (dateString) => { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: #64748b; + color: var(--uui-text-secondary); margin-bottom: 0.5rem; } .summary-value { font-size: 1.875rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); } .summary-card.danger .summary-value { - color: #dc2626; + color: var(--uui-error); } .summary-card.warning .summary-value { - color: #f59e0b; + color: var(--uui-warning); } .info-grid { @@ -316,24 +316,24 @@ const formatDate = (dateString) => { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: #64748b; + color: var(--uui-text-secondary); } .info-value { font-size: 0.938rem; - color: #0f172a; + color: var(--uui-text-primary); font-weight: 500; } .info-value.order-id, .info-value.sku { font-family: 'Monaco', 'Courier New', monospace; - color: #2563eb; + color: var(--uui-primary); } .modal-footer { padding: 1.5rem; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--uui-border); display: flex; justify-content: flex-end; gap: 0.75rem; @@ -341,20 +341,20 @@ const formatDate = (dateString) => { .btn-secondary { padding: 0.625rem 1.25rem; - background: #f1f5f9; - border: 1px solid #e2e8f0; + background: var(--uui-surface-sunken); + border: 1px solid var(--uui-border); border-radius: 8px; font-weight: 500; font-size: 0.875rem; - color: #334155; + color: var(--uui-text-primary); cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .btn-secondary:hover { - background: #e2e8f0; - border-color: #cbd5e1; + background: var(--uui-surface-sunken); + border-color: var(--uui-border); } /* Modal transition animations */ diff --git a/client/src/components/CostDetailModal.vue b/client/src/components/CostDetailModal.vue index aa31bd14..183c481c 100644 --- a/client/src/components/CostDetailModal.vue +++ b/client/src/components/CostDetailModal.vue @@ -165,7 +165,7 @@ const close = () => { } .modal-container { - background: white; + background: var(--uui-surface-main); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); max-width: 600px; @@ -181,20 +181,20 @@ const close = () => { align-items: center; justify-content: space-between; padding: 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); } .modal-title { font-size: 1.25rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); letter-spacing: -0.025em; } .close-button { background: none; border: none; - color: #64748b; + color: var(--uui-text-secondary); cursor: pointer; padding: 0.5rem; display: flex; @@ -205,8 +205,8 @@ const close = () => { } .close-button:hover { - background: #f1f5f9; - color: #0f172a; + background: var(--uui-surface-sunken); + color: var(--uui-text-primary); } .modal-body { @@ -226,7 +226,7 @@ const close = () => { } .summary-card.total { - background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); + background: linear-gradient(135deg, var(--uui-primary) 0%, var(--uui-primary-hover) 100%); color: white; } @@ -257,23 +257,23 @@ const close = () => { } .cost-item.procurement { - border-color: #93c5fd; - background: #eff6ff; + border-color: var(--uui-primary-subtle); + background: var(--uui-primary-subtle); } .cost-item.operational { - border-color: #c4b5fd; - background: #f5f3ff; + border-color: var(--uui-accent-subtle); + background: var(--uui-accent-subtle); } .cost-item.labor { - border-color: #86efac; - background: #f0fdf4; + border-color: var(--uui-success-subtle); + background: var(--uui-success-subtle); } .cost-item.overhead { - border-color: #fcd34d; - background: #fffbeb; + border-color: var(--uui-warning-subtle); + background: var(--uui-warning-subtle); } .cost-header { @@ -294,22 +294,22 @@ const close = () => { } .cost-item.procurement .cost-icon { - background: #3b82f6; + background: var(--uui-primary); color: white; } .cost-item.operational .cost-icon { - background: #8b5cf6; + background: var(--uui-accent); color: white; } .cost-item.labor .cost-icon { - background: #10b981; + background: var(--uui-success); color: white; } .cost-item.overhead .cost-icon { - background: #f59e0b; + background: var(--uui-warning); color: white; } @@ -319,7 +319,7 @@ const close = () => { .cost-name { font-weight: 600; - color: #0f172a; + color: var(--uui-text-primary); font-size: 1rem; margin-bottom: 0.25rem; } @@ -327,38 +327,38 @@ const close = () => { .cost-amount { font-size: 1.5rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); } .cost-percentage { font-size: 0.875rem; - color: #64748b; + color: var(--uui-text-secondary); font-weight: 500; } .modal-footer { padding: 1.5rem; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--uui-border); display: flex; justify-content: flex-end; } .btn-secondary { padding: 0.625rem 1.25rem; - background: #f1f5f9; - border: 1px solid #e2e8f0; + background: var(--uui-surface-sunken); + border: 1px solid var(--uui-border); border-radius: 8px; font-weight: 500; font-size: 0.875rem; - color: #334155; + color: var(--uui-text-primary); cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .btn-secondary:hover { - background: #e2e8f0; - border-color: #cbd5e1; + background: var(--uui-surface-sunken); + border-color: var(--uui-border); } /* Modal transition animations */ diff --git a/client/src/components/FilterBar.vue b/client/src/components/FilterBar.vue index 9e12b694..5bd45413 100644 --- a/client/src/components/FilterBar.vue +++ b/client/src/components/FilterBar.vue @@ -102,93 +102,98 @@ export default { diff --git a/client/src/components/InventoryDetailModal.vue b/client/src/components/InventoryDetailModal.vue index 9d648af3..d981a1cb 100644 --- a/client/src/components/InventoryDetailModal.vue +++ b/client/src/components/InventoryDetailModal.vue @@ -61,7 +61,7 @@
Units Remaining
- + {{ inventoryItem.quantity_on_hand - inventoryItem.reorder_point }} units
@@ -177,22 +177,19 @@ const getSummaryCardClass = () => { diff --git a/client/src/components/LanguageSwitcher.vue b/client/src/components/LanguageSwitcher.vue index dde97df1..aaf34fb4 100644 --- a/client/src/components/LanguageSwitcher.vue +++ b/client/src/components/LanguageSwitcher.vue @@ -96,35 +96,37 @@ const selectLanguage = (locale) => { .language-button { display: flex; align-items: center; - gap: 0.5rem; - padding: 0.5rem 0.875rem; - background: white; - border: 1px solid #e2e8f0; - border-radius: 8px; + gap: var(--uui-space-6); + height: var(--uui-size-36); + padding: 0 var(--uui-space-12); + background: var(--uui-control-bg); + border: 1px solid var(--uui-border); + border-radius: var(--uui-radius-6); cursor: pointer; - transition: all 0.2s ease; - font-family: inherit; - font-size: 0.875rem; - color: #334155; + transition: all 0.12s ease; + font-family: var(--uui-font); + font-size: var(--uui-text-s-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-primary); } .language-button:hover { - background: #f8fafc; - border-color: #cbd5e1; + background: var(--uui-night-100); + border-color: var(--uui-border-strong); } .globe-icon { - color: #64748b; + color: var(--uui-icon); flex-shrink: 0; } .language-label { - font-weight: 500; + font-weight: var(--uui-fw-semibold); } .chevron { - color: #64748b; - transition: transform 0.2s ease; + color: var(--uui-icon); + transition: transform 0.12s ease; flex-shrink: 0; } @@ -134,14 +136,14 @@ const selectLanguage = (locale) => { .dropdown-menu { position: absolute; - top: calc(100% + 0.5rem); + top: calc(100% + var(--uui-space-6)); right: 0; min-width: 160px; - background: white; - border: 1px solid #e2e8f0; - border-radius: 10px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); - z-index: 1000; + background: var(--uui-surface-higher); + border: 1px solid var(--uui-border); + border-radius: var(--uui-radius-12); + box-shadow: var(--uui-shadow-300); + z-index: var(--uui-z-dropdown); overflow: hidden; } @@ -150,26 +152,26 @@ const selectLanguage = (locale) => { display: flex; align-items: center; justify-content: space-between; - gap: 0.75rem; - padding: 0.75rem 1rem; + gap: var(--uui-space-12); + padding: var(--uui-space-12); background: none; border: none; text-align: left; cursor: pointer; - transition: background 0.15s ease; - font-family: inherit; - font-size: 0.875rem; - font-weight: 500; - color: #334155; + transition: background 0.12s ease; + font-family: var(--uui-font); + font-size: var(--uui-text-s-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-primary); } .dropdown-item:hover { - background: #f8fafc; + background: var(--uui-night-100); } .dropdown-item.active { - background: #eff6ff; - color: #2563eb; + background: var(--uui-primary-subtle); + color: var(--uui-blue-80); } .language-name { @@ -177,7 +179,7 @@ const selectLanguage = (locale) => { } .check-icon { - color: #2563eb; + color: var(--uui-primary); flex-shrink: 0; } diff --git a/client/src/components/ProductDetailModal.vue b/client/src/components/ProductDetailModal.vue index 76218306..fe5c4349 100644 --- a/client/src/components/ProductDetailModal.vue +++ b/client/src/components/ProductDetailModal.vue @@ -146,7 +146,7 @@ const getStockBadgeClass = (stockLevel) => { } .modal-container { - background: white; + background: var(--uui-surface-main); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); max-width: 700px; @@ -162,20 +162,20 @@ const getStockBadgeClass = (stockLevel) => { align-items: center; justify-content: space-between; padding: 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); } .modal-title { font-size: 1.25rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); letter-spacing: -0.025em; } .close-button { background: none; border: none; - color: #64748b; + color: var(--uui-text-secondary); cursor: pointer; padding: 0.5rem; display: flex; @@ -186,8 +186,8 @@ const getStockBadgeClass = (stockLevel) => { } .close-button:hover { - background: #f1f5f9; - color: #0f172a; + background: var(--uui-surface-sunken); + color: var(--uui-text-primary); } .modal-body { @@ -201,14 +201,14 @@ const getStockBadgeClass = (stockLevel) => { align-items: center; gap: 1.25rem; padding-bottom: 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); margin-bottom: 2rem; } .product-icon { width: 64px; height: 64px; - background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); + background: linear-gradient(135deg, var(--uui-primary) 0%, var(--uui-primary-hover) 100%); border-radius: 12px; display: flex; align-items: center; @@ -225,13 +225,13 @@ const getStockBadgeClass = (stockLevel) => { .product-name { font-size: 1.5rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); margin: 0 0 0.5rem 0; } .product-sku { font-size: 0.875rem; - color: #64748b; + color: var(--uui-text-secondary); font-family: 'Monaco', 'Courier New', monospace; } @@ -246,18 +246,18 @@ const getStockBadgeClass = (stockLevel) => { } .stock-badge.success { - background: #d1fae5; - color: #065f46; + background: var(--uui-success-subtle); + color: var(--uui-success); } .stock-badge.warning { - background: #fed7aa; - color: #92400e; + background: var(--uui-warning-subtle); + color: var(--uui-warning); } .stock-badge.danger { - background: #fecaca; - color: #991b1b; + background: var(--uui-error-subtle); + color: var(--uui-error); } .info-grid { @@ -277,18 +277,18 @@ const getStockBadgeClass = (stockLevel) => { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: #64748b; + color: var(--uui-text-secondary); } .info-value { font-size: 0.938rem; - color: #0f172a; + color: var(--uui-text-primary); font-weight: 500; } .modal-footer { padding: 1.5rem; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--uui-border); display: flex; justify-content: flex-end; gap: 0.75rem; @@ -296,20 +296,20 @@ const getStockBadgeClass = (stockLevel) => { .btn-secondary { padding: 0.625rem 1.25rem; - background: #f1f5f9; - border: 1px solid #e2e8f0; + background: var(--uui-surface-sunken); + border: 1px solid var(--uui-border); border-radius: 8px; font-weight: 500; font-size: 0.875rem; - color: #334155; + color: var(--uui-text-primary); cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .btn-secondary:hover { - background: #e2e8f0; - border-color: #cbd5e1; + background: var(--uui-surface-sunken); + border-color: var(--uui-border); } /* Modal transition animations */ diff --git a/client/src/components/ProfileDetailsModal.vue b/client/src/components/ProfileDetailsModal.vue index 4896a602..a843bdd8 100644 --- a/client/src/components/ProfileDetailsModal.vue +++ b/client/src/components/ProfileDetailsModal.vue @@ -99,22 +99,19 @@ const formatDate = (dateString) => { diff --git a/client/src/components/ProfileMenu.vue b/client/src/components/ProfileMenu.vue index 5706d24c..a00cd782 100644 --- a/client/src/components/ProfileMenu.vue +++ b/client/src/components/ProfileMenu.vue @@ -123,44 +123,45 @@ const handleLogout = () => { .profile-button { display: flex; align-items: center; - gap: 0.625rem; - padding: 0.5rem 0.875rem; - background: white; - border: 1px solid #e2e8f0; - border-radius: 8px; + gap: var(--uui-space-6); + height: var(--uui-size-36); + padding: 0 var(--uui-space-12); + background: var(--uui-control-bg); + border: 1px solid var(--uui-border); + border-radius: var(--uui-radius-6); cursor: pointer; - transition: all 0.2s ease; - font-family: inherit; + transition: all 0.12s ease; + font-family: var(--uui-font); } .profile-button:hover { - background: #f8fafc; - border-color: #cbd5e1; + background: var(--uui-night-100); + border-color: var(--uui-border-strong); } .avatar { - width: 32px; - height: 32px; - border-radius: 50%; - background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); - color: white; + width: 28px; + height: 28px; + border-radius: var(--uui-radius-full); + background: var(--uui-primary); + color: var(--uui-white); display: flex; align-items: center; justify-content: center; - font-weight: 600; - font-size: 0.75rem; - letter-spacing: 0.025em; + font-weight: var(--uui-fw-semibold); + font-size: var(--uui-text-xs-size); + flex-shrink: 0; } .profile-name { - font-size: 0.875rem; - font-weight: 500; - color: #0f172a; + font-size: var(--uui-text-s-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-primary); } .chevron { - color: #64748b; - transition: transform 0.2s ease; + color: var(--uui-icon); + transition: transform 0.12s ease; } .chevron-open { @@ -169,37 +170,37 @@ const handleLogout = () => { .dropdown-menu { position: absolute; - top: calc(100% + 0.5rem); + top: calc(100% + var(--uui-space-6)); right: 0; min-width: 280px; - background: white; - border: 1px solid #e2e8f0; - border-radius: 10px; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); - z-index: 1000; + background: var(--uui-surface-higher); + border: 1px solid var(--uui-border); + border-radius: var(--uui-radius-12); + box-shadow: var(--uui-shadow-300); + z-index: var(--uui-z-dropdown); overflow: hidden; } .dropdown-header { - padding: 1rem; + padding: var(--uui-space-12); display: flex; - gap: 0.875rem; + gap: var(--uui-space-12); align-items: center; - background: #f8fafc; + background: var(--uui-surface-lowest); + border-bottom: 1px solid var(--uui-divider); } .avatar-large { - width: 48px; - height: 48px; - border-radius: 50%; - background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); - color: white; + width: var(--uui-size-48); + height: var(--uui-size-48); + border-radius: var(--uui-radius-full); + background: var(--uui-primary); + color: var(--uui-white); display: flex; align-items: center; justify-content: center; - font-weight: 700; - font-size: 1rem; - letter-spacing: 0.025em; + font-weight: var(--uui-fw-bold); + font-size: var(--uui-text-m-size); flex-shrink: 0; } @@ -209,15 +210,15 @@ const handleLogout = () => { } .user-name { - font-weight: 600; - color: #0f172a; - font-size: 0.938rem; - margin-bottom: 0.25rem; + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-primary); + font-size: var(--uui-text-m-size); + margin-bottom: var(--uui-space-3); } .user-email { - font-size: 0.813rem; - color: #64748b; + font-size: var(--uui-text-xs-size); + color: var(--uui-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -225,56 +226,56 @@ const handleLogout = () => { .dropdown-divider { height: 1px; - background: #e2e8f0; - margin: 0.5rem 0; + background: var(--uui-divider); + margin: var(--uui-space-3) 0; } .dropdown-item { width: 100%; display: flex; align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; + gap: var(--uui-space-12); + padding: var(--uui-space-12) var(--uui-space-12); background: none; border: none; text-align: left; cursor: pointer; - transition: background 0.15s ease; - font-family: inherit; - font-size: 0.875rem; - font-weight: 500; - color: #334155; + transition: background 0.12s ease; + font-family: var(--uui-font); + font-size: var(--uui-text-s-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-primary); } .dropdown-item:hover { - background: #f8fafc; + background: var(--uui-night-100); } .dropdown-item svg { - color: #64748b; + color: var(--uui-icon); flex-shrink: 0; } .dropdown-item.logout { - color: #dc2626; + color: var(--uui-error); } .dropdown-item.logout svg { - color: #dc2626; + color: var(--uui-error); } .dropdown-item.logout:hover { - background: #fef2f2; + background: var(--uui-error-subtle); } .task-badge { margin-left: auto; - background: #2563eb; - color: white; - font-size: 0.75rem; - font-weight: 600; - padding: 0.125rem 0.5rem; - border-radius: 12px; + background: var(--uui-primary); + color: var(--uui-white); + font-size: var(--uui-text-xs-size); + font-weight: var(--uui-fw-semibold); + padding: 1px var(--uui-space-6); + border-radius: var(--uui-radius-full); min-width: 20px; text-align: center; } diff --git a/client/src/components/TasksModal.vue b/client/src/components/TasksModal.vue index 67d44638..3ad00488 100644 --- a/client/src/components/TasksModal.vue +++ b/client/src/components/TasksModal.vue @@ -247,21 +247,18 @@ export default { diff --git a/client/src/composables/useTheme.js b/client/src/composables/useTheme.js new file mode 100644 index 00000000..b46cca35 --- /dev/null +++ b/client/src/composables/useTheme.js @@ -0,0 +1,24 @@ +import { ref } from 'vue' + +const mq = window.matchMedia('(prefers-color-scheme: dark)') +const isDark = ref(mq.matches) + +function applyTheme(dark) { + document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light') +} + +applyTheme(isDark.value) + +mq.addEventListener('change', (e) => { + isDark.value = e.matches + applyTheme(e.matches) +}) + +export function useTheme() { + const toggleTheme = () => { + isDark.value = !isDark.value + applyTheme(isDark.value) + } + + return { isDark, toggleTheme } +} diff --git a/client/src/main.js b/client/src/main.js index 477c2d96..14194575 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,3 +1,4 @@ +import './assets/design-tokens.css' import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import App from './App.vue' diff --git a/client/src/views/Backlog.vue b/client/src/views/Backlog.vue index bb3bac21..366a6502 100644 --- a/client/src/views/Backlog.vue +++ b/client/src/views/Backlog.vue @@ -32,7 +32,7 @@

Backlog Items

-

+

✓ No backlog items - all orders can be fulfilled!

@@ -63,7 +63,7 @@ - + {{ item.days_delayed }} days diff --git a/client/src/views/Dashboard.vue b/client/src/views/Dashboard.vue index 437da9c2..2561af9d 100644 --- a/client/src/views/Dashboard.vue +++ b/client/src/views/Dashboard.vue @@ -85,19 +85,19 @@
- - + - - - @@ -105,10 +105,10 @@ {{ orderHealthMetrics.totalOrders }}
-
{{ t('status.delivered') }}
-
{{ t('status.shipped') }}
-
{{ t('status.processing') }}
-
{{ t('status.backordered') }}
+
{{ t('status.delivered') }}
+
{{ t('status.shipped') }}
+
{{ t('status.processing') }}
+
{{ t('status.backordered') }}
@@ -199,7 +199,7 @@ - + {{ item.days_delayed }} {{ t('dashboard.inventoryShortages.days') }} @@ -409,7 +409,7 @@ export default { const categoryMap = {} // Use a single neutral slate/gray color for all categories - const singleColor = '#64748b' // Neutral slate gray color + const singleColor = 'var(--uui-primary)' // Get SKUs from orders in the filtered time period const orderedSkus = new Set() @@ -731,90 +731,92 @@ export default { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1rem; + margin-bottom: var(--uui-space-12); } .header-meta { - font-size: 0.813rem; - color: #64748b; + font-size: var(--uui-text-xs-size); + color: var(--uui-text-secondary); } .kpi-section { - margin-bottom: 1.5rem; + margin-bottom: var(--uui-space-24); } .section-title { - font-size: 1rem; - font-weight: 600; - color: #475569; + font-size: var(--uui-overline-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-secondary); text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 1rem; + letter-spacing: var(--uui-overline-tracking); + margin-bottom: var(--uui-space-12); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 1rem; + gap: var(--uui-space-18); } .kpi-card { - background: white; - border: 1px solid #e2e8f0; - border-radius: 10px; - padding: 1rem; + background: var(--uui-surface-main); + border: 1px solid var(--uui-border); + border-radius: var(--uui-radius-12); + padding: var(--uui-space-18); } .kpi-header { - margin-bottom: 0.75rem; + margin-bottom: var(--uui-space-12); + min-height: 32px; } .kpi-label { - font-size: 0.813rem; - font-weight: 600; - color: #64748b; + font-size: var(--uui-overline-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-secondary); text-transform: uppercase; - letter-spacing: 0.025em; + letter-spacing: var(--uui-overline-tracking); + line-height: var(--uui-overline-lh); } .kpi-value { - font-size: 2rem; - font-weight: 700; - color: #0f172a; - margin-bottom: 0.5rem; - letter-spacing: -0.025em; + font-size: 34px; + font-weight: var(--uui-fw-bold); + color: var(--uui-text-primary); + margin-bottom: var(--uui-space-6); + line-height: 1; } .kpi-goal { - font-size: 0.813rem; - color: #64748b; - margin-bottom: 0.75rem; + font-size: var(--uui-text-xs-size); + color: var(--uui-text-secondary); + margin-bottom: var(--uui-space-12); } .kpi-progress-bar { width: 100%; height: 6px; - background: #f1f5f9; - border-radius: 3px; + background: var(--uui-night-200); + border-radius: var(--uui-radius-full); overflow: hidden; } .kpi-progress { height: 100%; - background: #3b82f6; - border-radius: 3px; + background: var(--uui-primary); + border-radius: var(--uui-radius-full); transition: width 0.6s ease; } .kpi-progress.success { - background: #10b981; + background: var(--uui-success); } .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 1.25rem; - margin-bottom: 1.5rem; + gap: var(--uui-space-18); + margin-bottom: var(--uui-space-24); } .chart-card.full-width { @@ -822,14 +824,14 @@ export default { } .chart-content { - padding: 1rem; + padding: var(--uui-space-12); } .donut-chart { display: flex; align-items: center; justify-content: center; - gap: 3rem; + gap: var(--uui-space-48); } .donut-svg { @@ -840,30 +842,30 @@ export default { .donut-legend { display: flex; flex-direction: column; - gap: 0.75rem; + gap: var(--uui-space-12); } .legend-item { display: flex; align-items: center; - gap: 0.625rem; - font-size: 0.875rem; - color: #475569; + gap: var(--uui-space-6); + font-size: var(--uui-text-s-size); + color: var(--uui-text-secondary); } .legend-dot { width: 10px; height: 10px; - border-radius: 2px; + border-radius: var(--uui-radius-2); } -/* Order Health Dashboard Styles */ +/* Order Health */ .order-health-container { display: grid; grid-template-columns: 1fr 1fr; - gap: 1.5rem; + gap: var(--uui-space-24); align-items: center; - padding: 1rem; + padding: var(--uui-space-12); min-height: 240px; } @@ -872,8 +874,8 @@ export default { flex-direction: column; align-items: center; justify-content: center; - gap: 1rem; - padding: 0 1rem; + gap: var(--uui-space-12); + padding: 0 var(--uui-space-12); } .donut-svg-compact { @@ -883,37 +885,37 @@ export default { .donut-center-label { font-size: 12px; - fill: #64748b; - font-weight: 500; + fill: var(--uui-night-600); + font-weight: 600; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.04em; } .donut-center-value { font-size: 36px; - fill: #0f172a; + fill: var(--uui-night-800); font-weight: 700; } .donut-legend-compact { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 0.625rem 1.25rem; + gap: var(--uui-space-6) var(--uui-space-18); } .legend-item-compact { display: flex; align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - color: #475569; - font-weight: 500; + gap: var(--uui-space-6); + font-size: var(--uui-text-s-size); + color: var(--uui-text-secondary); + font-weight: var(--uui-fw-semibold); } .order-health-metrics { display: flex; flex-direction: column; - gap: 1.25rem; + gap: var(--uui-space-18); justify-content: center; align-items: center; } @@ -921,65 +923,65 @@ export default { .health-metric { display: flex; flex-direction: column; - gap: 0.375rem; + gap: var(--uui-space-3); text-align: center; width: 100%; } .health-metric-label { - font-size: 0.688rem; - color: #64748b; - font-weight: 600; + font-size: var(--uui-overline-size); + color: var(--uui-text-secondary); + font-weight: var(--uui-fw-semibold); text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: var(--uui-overline-tracking); } .health-metric-value { - font-size: 1.75rem; - font-weight: 700; - color: #0f172a; - letter-spacing: -0.025em; + font-size: 28px; + font-weight: var(--uui-fw-bold); + color: var(--uui-text-primary); + line-height: 1; } .metric-good { - color: #10b981; + color: var(--uui-success); } .metric-warning { - color: #f59e0b; + color: var(--uui-warning); } .metric-bad { - color: #ef4444; + color: var(--uui-error); } .horizontal-bar-chart { display: flex; flex-direction: column; - gap: 1.5rem; - padding: 0 1rem; + gap: var(--uui-space-18); + padding: 0 var(--uui-space-12); } .h-bar-item { display: flex; align-items: center; - gap: 1rem; + gap: var(--uui-space-12); } .h-bar-label { width: 120px; min-width: 120px; - font-size: 0.875rem; - font-weight: 600; - color: #475569; + font-size: var(--uui-text-s-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-secondary); flex-shrink: 0; } .h-bar-container { flex: 1; height: 32px; - background: #f8fafc; - border-radius: 6px; + background: var(--uui-night-100); + border-radius: var(--uui-radius-6); overflow: hidden; } @@ -988,19 +990,19 @@ export default { display: flex; align-items: center; justify-content: flex-end; - padding-right: 0.75rem; + padding-right: var(--uui-space-12); transition: width 0.6s ease; } .h-bar-value { - font-size: 0.813rem; - font-weight: 700; - color: white; + font-size: var(--uui-text-xs-size); + font-weight: var(--uui-fw-bold); + color: var(--uui-white); } .line-chart { display: flex; - gap: 1.5rem; + gap: var(--uui-space-24); height: 280px; } @@ -1008,10 +1010,10 @@ export default { display: flex; flex-direction: column; justify-content: space-between; - padding-right: 1rem; - font-size: 0.75rem; - color: #94a3b8; - border-right: 1px solid #e2e8f0; + padding-right: var(--uui-space-12); + font-size: var(--uui-text-xs-size); + color: var(--uui-text-tertiary); + border-right: 1px solid var(--uui-border); } .line-chart-area { @@ -1019,7 +1021,7 @@ export default { display: flex; align-items: flex-end; justify-content: space-around; - gap: 0.5rem; + gap: var(--uui-space-6); } .line-bar-group { @@ -1028,7 +1030,7 @@ export default { align-items: center; flex: 1; max-width: 80px; - gap: 0.5rem; + gap: var(--uui-space-6); } .line-bar-wrapper { @@ -1044,228 +1046,105 @@ export default { width: 100%; max-width: 60px; min-height: 8px; - background: #3b82f6; - border-radius: 6px 6px 0 0; + background: var(--uui-primary); + border-radius: var(--uui-radius-6) var(--uui-radius-6) 0 0; transition: all 0.3s ease; cursor: pointer; - box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); + box-shadow: 0 2px 4px rgba(12, 140, 233, 0.25); } .line-bar.empty-bar { - background: #e2e8f0; + background: var(--uui-night-300); box-shadow: none; min-height: 4px; } .line-bar:hover { - background: #2563eb; + background: var(--uui-primary-hover); transform: scaleY(1.05); } .line-bar.empty-bar:hover { - background: #cbd5e1; + background: var(--uui-night-400); transform: none; } .line-bar-label { - font-size: 0.75rem; - font-weight: 600; - color: #64748b; + font-size: var(--uui-text-xs-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-text-secondary); white-space: nowrap; } .no-data { - padding: 2rem; + padding: var(--uui-space-24); text-align: center; - color: #94a3b8; - font-size: 0.875rem; + color: var(--uui-text-tertiary); + font-size: var(--uui-text-s-size); } .no-backlog { - padding: 3rem; + padding: var(--uui-space-48); text-align: center; display: flex; flex-direction: column; align-items: center; - gap: 1rem; + gap: var(--uui-space-12); } .success-icon { width: 48px; height: 48px; - color: #10b981; + color: var(--uui-success); } .no-backlog-text { - font-size: 1.125rem; - color: #10b981; - font-weight: 600; + font-size: var(--uui-h4-size); + font-weight: var(--uui-fw-semibold); + color: var(--uui-success); margin: 0; } .clickable-row { cursor: pointer; - transition: background-color 0.15s ease; + transition: background-color 0.12s ease; } .clickable-row:hover { - background: #eff6ff !important; -} - -/* Tasks Card Styles */ -.tasks-card { - margin-bottom: 2rem; -} - -.tasks-content { - padding: 1.5rem; -} - -.task-input-container { - display: flex; - gap: 0.75rem; - margin-bottom: 1rem; -} - -.task-input { - flex: 1; - padding: 0.75rem; - border: 2px solid #e2e8f0; - border-radius: 8px; - font-size: 0.95rem; - transition: border-color 0.2s ease; -} - -.task-input:focus { - outline: none; - border-color: #667eea; -} - -.task-add-btn { - padding: 0.75rem 1.5rem; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - border-radius: 8px; - font-weight: 600; - cursor: pointer; - transition: transform 0.2s ease, opacity 0.2s ease; -} - -.task-add-btn:hover:not(:disabled) { - transform: translateY(-2px); -} - -.task-add-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.no-tasks { - text-align: center; - padding: 2rem; - color: #64748b; - font-style: italic; -} - -.tasks-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.task-item { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem; - background: #f8fafc; - border-radius: 8px; - border: 2px solid transparent; - transition: all 0.2s ease; -} - -.task-item:hover { - border-color: #e2e8f0; - background: white; -} - -.task-item.completed { - opacity: 0.6; -} - -.task-item.completed .task-text { - text-decoration: line-through; - color: #94a3b8; -} - -.task-checkbox { - width: 20px; - height: 20px; - cursor: pointer; - accent-color: #667eea; -} - -.task-text { - flex: 1; - cursor: pointer; - user-select: none; - color: #0f172a; - font-size: 0.95rem; -} - -.task-delete-btn { - width: 28px; - height: 28px; - background: #ef4444; - color: white; - border: none; - border-radius: 6px; - font-size: 1.25rem; - line-height: 1; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - padding: 0; -} - -.task-delete-btn:hover { - background: #dc2626; - transform: scale(1.1); + background: var(--uui-primary-subtle) !important; } +/* PO buttons */ .po-button { - padding: 0.5rem 1rem; + height: var(--uui-size-30); + padding: 0 var(--uui-space-12); border: none; - border-radius: 6px; - font-size: 0.813rem; - font-weight: 600; + border-radius: var(--uui-radius-6); + font-family: var(--uui-font); + font-size: var(--uui-text-xs-size); + font-weight: var(--uui-fw-semibold); cursor: pointer; - transition: all 0.2s ease; + transition: all 0.12s ease; white-space: nowrap; } .po-button.create { - background: #3b82f6; - color: white; + background: var(--uui-primary); + color: var(--uui-white); } .po-button.create:hover { - background: #2563eb; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); + background: var(--uui-primary-hover); + box-shadow: var(--uui-shadow-100); } .po-button.view { - background: #64748b; - color: white; + background: var(--uui-night-700); + color: var(--uui-white); } .po-button.view:hover { - background: #475569; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3); + background: var(--uui-night-800); + box-shadow: var(--uui-shadow-100); } diff --git a/client/src/views/Demand.vue b/client/src/views/Demand.vue index 2cdf01a6..6de6b435 100644 --- a/client/src/views/Demand.vue +++ b/client/src/views/Demand.vue @@ -181,12 +181,12 @@ export default { // If change is within ±2%, consider it stable and show blue if (changePercent <= 2) { - return '#3b82f6' // Blue for stable + return 'var(--uui-primary)' } - if (change > 0) return '#10b981' // Green for increasing - if (change < 0) return '#ef4444' // Red for decreasing - return '#3b82f6' // Blue for no change + if (change > 0) return 'var(--uui-success)' + if (change < 0) return 'var(--uui-error)' + return 'var(--uui-primary)' } const translatePeriod = (period) => { @@ -232,8 +232,8 @@ export default { } .trend-card { - background: white; - border: 1px solid #e2e8f0; + background: var(--uui-surface-main); + border: 1px solid var(--uui-border); border-radius: 10px; padding: 1.5rem; transition: all 0.2s ease; @@ -244,15 +244,15 @@ export default { } .increasing-card { - border-left: 4px solid #10b981; + border-left: 4px solid var(--uui-success); } .stable-card { - border-left: 4px solid #3b82f6; + border-left: 4px solid var(--uui-primary); } .decreasing-card { - border-left: 4px solid #ef4444; + border-left: 4px solid var(--uui-error); } .trend-header { @@ -261,7 +261,7 @@ export default { gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--uui-surface-sunken); } .trend-icon { @@ -277,24 +277,24 @@ export default { } .increasing-card .trend-icon { - background: #d1fae5; - color: #059669; + background: var(--uui-success-subtle); + color: var(--uui-success); } .stable-card .trend-icon { - background: #dbeafe; - color: #2563eb; + background: var(--uui-primary-subtle); + color: var(--uui-primary); } .decreasing-card .trend-icon { - background: #fee2e2; - color: #dc2626; + background: var(--uui-error-subtle); + color: var(--uui-error); } .trend-label { font-size: 0.875rem; font-weight: 600; - color: #64748b; + color: var(--uui-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } @@ -302,7 +302,7 @@ export default { .trend-count { font-size: 1.5rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); margin-top: 0.25rem; } @@ -317,18 +317,18 @@ export default { justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; - background: #f8fafc; + background: var(--uui-surface-lowest); border-radius: 6px; transition: background 0.2s; } .trend-item:hover { - background: #f1f5f9; + background: var(--uui-surface-sunken); } .item-name { font-size: 0.875rem; - color: #0f172a; + color: var(--uui-text-primary); font-weight: 500; flex: 1; overflow: hidden; @@ -344,24 +344,24 @@ export default { } .increasing-card .item-change { - color: #059669; + color: var(--uui-success); } .stable-card .item-change { - color: #3b82f6; + color: var(--uui-primary); } .decreasing-card .item-change { - color: #dc2626; + color: var(--uui-error); } .item-change.neutral { - color: #64748b; + color: var(--uui-text-secondary); } .more-items { font-size: 0.813rem; - color: #64748b; + color: var(--uui-text-secondary); font-style: italic; text-align: center; padding: 0.5rem; diff --git a/client/src/views/Inventory.vue b/client/src/views/Inventory.vue index 4819326e..fa11bf6c 100644 --- a/client/src/views/Inventory.vue +++ b/client/src/views/Inventory.vue @@ -234,7 +234,7 @@ export default { } .page-header p { - color: #64748b; + color: var(--uui-text-secondary); font-size: 0.875rem; } @@ -244,13 +244,13 @@ export default { align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); } .card-title { font-size: 1rem; font-weight: 600; - color: #0f172a; + color: var(--uui-text-primary); margin: 0; } @@ -266,30 +266,30 @@ export default { left: 0.75rem; width: 18px; height: 18px; - color: #94a3b8; + color: var(--uui-text-tertiary); pointer-events: none; } .search-input { width: 100%; padding: 0.5rem 2.5rem 0.5rem 2.5rem; - border: 1px solid #cbd5e1; + border: 1px solid var(--uui-border); border-radius: 8px; font-size: 0.875rem; - color: #0f172a; - background: #f8fafc; + color: var(--uui-text-primary); + background: var(--uui-surface-lowest); transition: all 0.2s; } .search-input:focus { outline: none; - border-color: #3b82f6; - background: white; + border-color: var(--uui-primary); + background: var(--uui-surface-main); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .search-input::placeholder { - color: #94a3b8; + color: var(--uui-text-tertiary); } .clear-search { @@ -302,14 +302,14 @@ export default { background: transparent; border: none; border-radius: 4px; - color: #94a3b8; + color: var(--uui-text-tertiary); cursor: pointer; transition: all 0.2s; } .clear-search:hover { - background: #e2e8f0; - color: #64748b; + background: var(--uui-surface-sunken); + color: var(--uui-text-secondary); } .clear-search svg { @@ -321,11 +321,11 @@ export default { .error { padding: 2rem; text-align: center; - color: #64748b; + color: var(--uui-text-secondary); } .error { - color: #ef4444; + color: var(--uui-error); } .clickable-row { @@ -334,6 +334,6 @@ export default { } .clickable-row:hover { - background: #eff6ff !important; + background: var(--uui-primary-subtle) !important; } diff --git a/client/src/views/Orders.vue b/client/src/views/Orders.vue index 7413f6e6..ea1971c5 100644 --- a/client/src/views/Orders.vue +++ b/client/src/views/Orders.vue @@ -210,7 +210,7 @@ export default { .items-summary { cursor: pointer; - color: #3b82f6; + color: var(--uui-primary); font-weight: 500; list-style: none; user-select: none; @@ -234,7 +234,7 @@ export default { } .items-summary:hover { - color: #2563eb; + color: var(--uui-primary-hover); text-decoration: underline; } @@ -244,8 +244,8 @@ export default { top: 100%; left: 0; margin-top: 0.5rem; - background: white; - border: 1px solid #e2e8f0; + background: var(--uui-surface-main); + border: 1px solid var(--uui-border); border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 0.75rem; @@ -259,7 +259,7 @@ export default { flex-direction: column; gap: 0.25rem; padding: 0.5rem; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--uui-surface-sunken); } .item-entry:last-child { @@ -269,11 +269,11 @@ export default { .item-name { font-size: 0.875rem; font-weight: 500; - color: #0f172a; + color: var(--uui-text-primary); } .item-meta { font-size: 0.813rem; - color: #64748b; + color: var(--uui-text-secondary); } diff --git a/client/src/views/Reports.vue b/client/src/views/Reports.vue index 35187eaf..cbd88bfc 100644 --- a/client/src/views/Reports.vue +++ b/client/src/views/Reports.vue @@ -322,7 +322,7 @@ export default { } .card { - background: white; + background: var(--uui-surface-main); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; @@ -336,7 +336,7 @@ export default { .card-title { font-size: 1.25rem; font-weight: 600; - color: #0f172a; + color: var(--uui-text-primary); margin: 0; } @@ -346,21 +346,21 @@ export default { } .reports-table th { - background: #f8fafc; + background: var(--uui-surface-lowest); padding: 0.75rem; text-align: left; font-weight: 600; - color: #64748b; - border-bottom: 2px solid #e2e8f0; + color: var(--uui-text-secondary); + border-bottom: 2px solid var(--uui-border); } .reports-table td { padding: 0.75rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); } .reports-table tr:hover { - background: #f8fafc; + background: var(--uui-surface-lowest); } .chart-container { @@ -393,20 +393,20 @@ export default { .bar { width: 100%; - background: linear-gradient(to top, #3b82f6, #60a5fa); + background: linear-gradient(to top, var(--uui-primary), var(--uui-primary-subtle)); border-radius: 4px 4px 0 0; transition: all 0.3s; cursor: pointer; } .bar:hover { - background: linear-gradient(to top, #2563eb, #3b82f6); + background: linear-gradient(to top, var(--uui-primary-hover), var(--uui-primary)); } .bar-label { margin-top: 0.5rem; font-size: 0.75rem; - color: #64748b; + color: var(--uui-text-secondary); text-align: center; transform: rotate(-45deg); white-space: nowrap; @@ -421,23 +421,23 @@ export default { } .stat-card { - background: white; + background: var(--uui-surface-main); border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - border-left: 4px solid #3b82f6; + border-left: 4px solid var(--uui-primary); } .stat-label { font-size: 0.875rem; - color: #64748b; + color: var(--uui-text-secondary); margin-bottom: 0.5rem; } .stat-value { font-size: 1.875rem; font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); } .badge { @@ -448,39 +448,39 @@ export default { } .badge.success { - background: #dcfce7; - color: #166534; + background: var(--uui-success-subtle); + color: var(--uui-success); } .badge.warning { - background: #fef3c7; - color: #92400e; + background: var(--uui-warning-subtle); + color: var(--uui-warning); } .badge.danger { - background: #fee2e2; - color: #991b1b; + background: var(--uui-error-subtle); + color: var(--uui-error); } .positive-change { - color: #16a34a; + color: var(--uui-success); font-weight: 600; } .negative-change { - color: #dc2626; + color: var(--uui-error); font-weight: 600; } .loading { text-align: center; padding: 3rem; - color: #64748b; + color: var(--uui-text-secondary); } .error { - background: #fee2e2; - color: #991b1b; + background: var(--uui-error-subtle); + color: var(--uui-error); padding: 1rem; border-radius: 8px; margin: 1rem 0; diff --git a/client/src/views/Spending.vue b/client/src/views/Spending.vue index 17af4d10..79aa8899 100644 --- a/client/src/views/Spending.vue +++ b/client/src/views/Spending.vue @@ -501,11 +501,11 @@ export default { } .stat-change.positive { - color: #059669; + color: var(--uui-success); } .stat-change.negative { - color: #dc2626; + color: var(--uui-error); } .change-icon { @@ -527,7 +527,7 @@ export default { display: flex; align-items: center; gap: 0.5rem; - color: #64748b; + color: var(--uui-text-secondary); } .legend-dot { @@ -536,12 +536,12 @@ export default { border-radius: 3px; } -.legend-dot.procurement { background: #3b82f6; } -.legend-dot.operational { background: #8b5cf6; } -.legend-dot.labor { background: #10b981; } -.legend-dot.overhead { background: #f59e0b; } -.legend-dot.revenue-color { background: #0f172a; } -.legend-dot.cost-color { background: #ef4444; } +.legend-dot.procurement { background: var(--uui-primary); } +.legend-dot.operational { background: var(--uui-accent); } +.legend-dot.labor { background: var(--uui-success); } +.legend-dot.overhead { background: var(--uui-warning); } +.legend-dot.revenue-color { background: var(--uui-text-primary); } +.legend-dot.cost-color { background: var(--uui-error); } .stats-grid-finance { display: grid; @@ -551,21 +551,21 @@ export default { } .revenue-card { - border-left: 4px solid #0f172a; + border-left: 4px solid var(--uui-text-primary); } .cost-card { - border-left: 4px solid #ef4444; + border-left: 4px solid var(--uui-error); } .profit-card { - border-left: 4px solid #3b82f6; + border-left: 4px solid var(--uui-primary); } .stat-meta { margin-top: 0.5rem; font-size: 0.813rem; - color: #64748b; + color: var(--uui-text-secondary); } .bar-group-revenue { @@ -597,11 +597,11 @@ export default { } .revenue-bar { - background: #0f172a; + background: var(--uui-text-primary); } .cost-bar { - background: #ef4444; + background: var(--uui-error); } .revenue-bar:hover, .cost-bar:hover { @@ -625,8 +625,8 @@ export default { justify-content: space-between; padding-right: 1rem; font-size: 0.75rem; - color: #94a3b8; - border-right: 1px solid #e2e8f0; + color: var(--uui-text-tertiary); + border-right: 1px solid var(--uui-border); } .chart-area { @@ -676,10 +676,10 @@ export default { border-radius: 6px 6px 0 0; } -.bar-segment.procurement { background: #3b82f6; } -.bar-segment.operational { background: #8b5cf6; } -.bar-segment.labor { background: #10b981; } -.bar-segment.overhead { background: #f59e0b; } +.bar-segment.procurement { background: var(--uui-primary); } +.bar-segment.operational { background: var(--uui-accent); } +.bar-segment.labor { background: var(--uui-success); } +.bar-segment.overhead { background: var(--uui-warning); } .bar-segment:hover { opacity: 0.8; @@ -689,7 +689,7 @@ export default { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; - color: #64748b; + color: var(--uui-text-secondary); } .two-column-grid { @@ -718,26 +718,26 @@ export default { .category-name { font-weight: 600; - color: #0f172a; + color: var(--uui-text-primary); } .category-amount { font-weight: 700; - color: #2563eb; + color: var(--uui-primary); font-size: 1.125rem; } .category-bar-container { width: 100%; height: 8px; - background: #f1f5f9; + background: var(--uui-surface-sunken); border-radius: 4px; overflow: hidden; } .category-bar { height: 100%; - background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); + background: linear-gradient(90deg, var(--uui-primary) 0%, var(--uui-primary-hover) 100%); border-radius: 4px; transition: width 0.6s ease; } @@ -749,7 +749,7 @@ export default { } .percentage { - color: #64748b; + color: var(--uui-text-secondary); } .change { @@ -757,11 +757,11 @@ export default { } .change.positive { - color: #059669; + color: var(--uui-success); } .change.negative { - color: #dc2626; + color: var(--uui-error); } .transactions-card { @@ -782,7 +782,7 @@ export default { .transactions-table thead { position: sticky; top: 0; - background: #f8fafc; + background: var(--uui-surface-lowest); z-index: 1; } @@ -790,11 +790,11 @@ export default { text-align: left; padding: 0.625rem 0.75rem; font-weight: 600; - color: #475569; + color: var(--uui-text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--uui-border); } .transactions-table th.text-right { @@ -803,7 +803,7 @@ export default { .transactions-table td { padding: 0.75rem 0.75rem; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--uui-surface-sunken); font-size: 0.875rem; } @@ -813,37 +813,37 @@ export default { } .transactions-table tbody tr:hover { - background: #f8fafc; + background: var(--uui-surface-lowest); } .transactions-table tbody tr.clickable-row:hover { - background: #eff6ff; + background: var(--uui-primary-subtle); } .transaction-id { - color: #64748b; + color: var(--uui-text-secondary); font-weight: 500; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.813rem; } .transaction-description { - color: #0f172a; + color: var(--uui-text-primary); font-weight: 500; } .transaction-vendor { - color: #64748b; + color: var(--uui-text-secondary); } .transaction-date { - color: #64748b; + color: var(--uui-text-secondary); font-size: 0.813rem; } .transaction-amount { font-weight: 700; - color: #0f172a; + color: var(--uui-text-primary); } .text-right {