adam/shoc-frontend-new
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/shoc-frontend-new.git synced 2026-10-02 12:03:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
shoc-frontend-new/src/styles/theme.css

293 lines
11 KiB
CSS
Raw Normal View History

Feat/vite typescript migration (#16) * chore: add eslint, prettier, husky and commitlint tooling * ci: add GitHub Actions workflow for lint and build * build: migrate from CRA to Vite with TypeScript config * docs: add architecture plan and design system documentation * fix: scope ESLint to new components and hooks directories * feat: add HTTP client, query cache and shared utilities * feat: add theme system and global application styles * feat: add shared UI, layout and domain badge components * feat: add auth domain, provider and login page * feat: add app shell, file-based routing and bootstrap * feat: add protected layout and dashboard module * feat: add accounts CRUD module * feat: add assets CRUD module * feat: add contacts CRUD module * feat: add employees CRUD module * feat: add locations CRUD module * feat: add calendar events module * feat: add follow-ups CRUD module * feat: add PM schedules CRUD module * feat: add work orders module with dispatch modals * feat: add vendors CRUD and portal token panel * feat: add vendor purchase orders module * feat: add uplifts queue module * feat: add settings for dropdowns and task templates * feat: add vendor portal routes and signature capture * test: add Vitest setup and Playwright login e2e spec * chore: remove legacy CRA pages, Redux store and JS hooks * chore: update gitignore and env example for Vite * docs: translate pt-BR docs and Cursor rules to English * fix(ci): fix login e2e session mock and prettier formatting * fix(build): use mjs router script for Node 20 CI compatibility * chore: remove migration scripts and unused generouted router * fix(auth): restore JWT and align CRUD with backend routes * fix(api): add no-content helpers and align paths with backend * fix(accounts): align detail and mutation payloads with backend * fix(contacts): resolve detail via GetContacts and map address DTOs * fix(work-orders): align routes, delete body, and create payload * fix(vendors): delete vendors via REST route * fix(pm-schedules): handle empty save and delete responses * fix(employees): add fallbacks for detail and dropdown calls * chore(calendar): disable routes until backend exists * chore(env): switch tracked env vars to Vite prefixes * fix(api): align frontend contracts with backend review findings Correct Work Order getById query param, asset site options via Location API, Employee JobTitleId payload, and remove stale API paths. * fix(employees,pm-schedules): align forms with backend API contracts Align PM Schedule form and save payload with PMSchedule_DTO fields. Bind employee Job Title select to jobTitleId for create/update payloads. Add regression tests for both flows. * fix(pm-schedules): gate edit/delete for Dev API contract Production Dev API exposes only GetList and Save. Hide unsupported edit/delete UI and block the edit route. Add regression tests for disabled actions. * docs(env): document VITE_API_URL must include /api suffix * refactor(api): extract shared API prefix URL resolution * feat(build): fail build on misconfigured absolute VITE_API_URL * test(api): cover API URL contract and prefix resolution * feat(auth): disable login submit until email and password are valid * test(auth): align login tests with disabled submit behavior * Feat/ab/menu-and-header (#17) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> * ci: add frontend PR quality baseline (#18) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar * ci: add PR quality baseline checks * ci: avoid self-matching standards guard * ci: split frontend quality gates --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> Co-authored-by: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
2026-06-18 14:41:17 -03:00
:root {
/* Body typography reference — do not set on html (rem/Tailwind use 16px root) */
--font-size: 14px;
/* ── TYPOGRAPHY (runtime CSS vars — used by inline styles + Tailwind) */
--font-family-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
--font-family-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
--font-family-mono: "JetBrains Mono", ui-monospace, monospace;
--font-display: var(--font-family-display);
--font-sans: var(--font-family-sans);
--font-mono: var(--font-family-mono);
--font-heading: var(--font-family-display);
/* ── TYPOGRAPHY SCALE ───────────────────────────────────────────── */
--text-xs: 11px;
--text-sm: 12px;
--text-base-sm: 13px;
--text-base: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.05em;
--tracking-wider: 0.08em;
/* ── LAYOUT SPACING ─────────────────────────────────────────────── */
--spacing-sidebar: 244px;
--spacing-topbar: 64px;
--spacing-sidebar-collapsed: 76px;
/* ── RADIUS SCALE (scale resolves to 4 / 6 / 8 / 12) ────────────── */
--radius: 8px;
--radius-md: 6px;
--radius-sm: 4px;
--radius-xl: 12px;
/* ── ELEVATION ──────────────────────────────────────────────────── */
--shadow-sm: 0 1px 3px rgba(22, 30, 56, 0.06), 0 1px 2px rgba(22, 30, 56, 0.04);
--shadow-md: 0 4px 6px -1px rgba(22, 30, 56, 0.08), 0 2px 4px -2px rgba(22, 30, 56, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(22, 30, 56, 0.1), 0 4px 6px -4px rgba(22, 30, 56, 0.08);
--shadow-brand-mark: 0 2px 6px -1px rgba(28, 117, 188, 0.45);
/* ── SHADCN BASE (Seahaven DS) ──────────────────────────────────── */
--background: #ffffff;
--foreground: #262262;
--placeholder-foreground: color-mix(in srgb, var(--foreground) 50%, transparent);
--card: #ffffff;
--card-foreground: #262262;
--popover: #ffffff;
--popover-foreground: #262262;
--primary: #1c75bc;
--primary-hover: #155a92;
--primary-foreground: #ffffff;
--secondary: #f1f4f9;
--secondary-foreground: #262262;
--muted: #e6e7e8;
--muted-foreground: #58595b;
--accent: #27aae1;
--accent-foreground: #ffffff;
--success: #00a79d;
--warning: #d97706;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #dfe3ea;
--border-hover: #c8d0e0;
--input: transparent;
--input-background: #f9fafb;
--switch-background: #c8d0e0;
--ring: #1c75bc;
--chart-1: #1c75bc;
--chart-2: #00a79d;
--chart-3: #d97706;
--chart-4: #7c3aed;
--chart-5: #dc2626;
/* ── SIDEBAR (light surface — Seahaven DS) ──────────────────────── */
--sidebar: #f6f8fb;
--sidebar-bg: #f6f8fb;
--sidebar-foreground: #262262;
--sidebar-primary: #1c75bc;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #e6f4fb;
--sidebar-accent-foreground: #155a92;
--sidebar-border: #dfe3ea;
--sidebar-ring: #1c75bc;
/* ── SEAHAVEN SEMANTIC ALIASES (consumed across the app) ────────── */
--color-primary: var(--primary);
--color-primary-hover: var(--primary-hover);
--color-primary-foreground: #ffffff;
--color-primary-tint: #e6f4fb;
--color-accent: var(--accent);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--foreground);
--color-ring: var(--ring);
--color-bg-page: #f9fafb;
--color-bg-surface: var(--card);
--color-bg-muted: #f1f4f9;
--color-border: var(--border);
--color-border-hover: #c8d0e0;
--color-text-primary: var(--foreground);
--color-text-secondary: #58595b;
--color-text-muted: #6b7a96;
--color-text-inverse: #ffffff;
/* ── SIDEBAR ALIASES (light) ────────────────────────────────────── */
--color-sidebar-bg: var(--sidebar-bg);
--color-sidebar-text: #262262;
--color-sidebar-text-hover: #155a92;
--color-sidebar-active-bg: var(--sidebar-accent);
--color-sidebar-active-text: var(--sidebar-accent-foreground);
--color-sidebar-hover-bg: #eef2f7;
--color-sidebar-label: #6b7a96;
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-badge-bg: #e6f4fb;
--color-sidebar-badge-text: #155a92;
--color-sidebar-item-active-bg: var(--card);
--color-sidebar-item-active-shadow: 0 1px 3px rgba(38, 34, 98, 0.08);
/* ── SEMANTIC (universal meaning) ───────────────────────────────── */
--color-destructive: var(--destructive);
--color-destructive-fg: #ffffff;
--color-warning: var(--warning);
--color-success: var(--success);
/* ── WO TYPE TOKENS (immutable — CLAUDE.md §3) ──────────────────── */
--type-pm-bg: #eff6ff;
--type-pm-text: #1d4ed8;
--type-reactive-bg: #fff7ed;
--type-reactive-text: #c2410c;
--type-emergency-bg: #fef2f2;
--type-emergency-text: #b91c1c;
--type-addon-bg: #f5f3ff;
--type-addon-text: #6d28d9;
--type-overdue-bg: #fff1f2;
--type-overdue-text: #9f1239;
/* ── WO STATUS TOKENS (immutable) ───────────────────────────────── */
--status-incomplete-bg: #f3f4f6;
--status-incomplete-text: #374151;
--status-pending-bg: #fff7ed;
--status-pending-text: #92400e;
--status-scheduled-bg: #eff6ff;
--status-scheduled-text: #1e40af;
--status-inroute-bg: #f0f9ff;
--status-inroute-text: #0369a1;
--status-onsite-bg: #ecfdf5;
--status-onsite-text: #065f46;
--status-inprogress-bg: #eff6ff;
--status-inprogress-text: #1d4ed8;
--status-completed-bg: #f0fdf4;
--status-completed-text: #166534;
--status-rescheduled-bg: #fffbeb;
--status-rescheduled-text: #92400e;
--status-canceled-bg: #f9fafb;
--status-canceled-text: #6b7280;
--status-pendingquote-bg: #faf5ff;
--status-pendingquote-text: #6b21a8;
--status-pastdue-bg: #fff1f2;
--status-pastdue-text: #9f1239;
/* ── COMPLETION DOCUMENT (immutable) ────────────────────────────── */
--doc-yes-bg: #f0fdf4;
--doc-yes-text: #166534;
--doc-no-bg: #fff1f2;
--doc-no-text: #be123c;
--doc-nn-bg: #f3f4f6;
--doc-nn-text: #6b7280;
/* ── CARRIED OVER / RESCHEDULE INDICATORS (immutable) ───────────── */
--indicator-co-1-bg: #fffbeb;
--indicator-co-1-text: #92400e;
--indicator-co-2-bg: #fef3c7;
--indicator-co-2-text: #b45309;
--indicator-co-3-bg: #fef2f2;
--indicator-co-3-text: #9f1239;
/* ── SLA (immutable) ────────────────────────────────────────────── */
--sla-safe: #16a34a;
--sla-warning: #d97706;
--sla-critical: #dc2626;
/* ── LAB (experiment UI accents) ────────────────────────────────── */
--color-lab-accent-bg: #fef3c7;
--color-lab-accent-text: #92400e;
--color-lab-accent-border: #f59e0b;
/* ── HEADER (app shell top bar) ─────────────────────────────────── */
--color-header-bg-start: #1b1f52;
--color-header-bg-mid: #1c4f8f;
--color-header-bg-end: var(--primary);
--color-header-gradient: linear-gradient(
100deg,
var(--color-header-bg-start) 0%,
var(--color-header-bg-mid) 58%,
var(--color-header-bg-end) 100%
);
--color-header-shadow: 0 1px 0 rgba(38, 34, 98, 0.18), 0 6px 18px -10px rgba(28, 117, 188, 0.5);
--color-header-surface: rgba(255, 255, 255, 0.08);
--color-header-surface-hover: rgba(255, 255, 255, 0.18);
--color-header-chip-hover: rgba(255, 255, 255, 0.12);
--color-header-icon: #eaf3fb;
--color-header-text: #ffffff;
--color-header-text-muted: #bdd8f0;
--color-header-avatar-ring: rgba(255, 255, 255, 0.25);
/* ── SERVICE TYPE TOKENS (Completion Docs) ──────────────────────── */
--service-scrubber-pit-bg: #eff6ff;
--service-scrubber-pit-text: #1d4ed8;
--service-backflow-preventers-bg: #ecfdf5;
--service-backflow-preventers-text: #065f46;
--service-tank-water-heater-bg: #fff7ed;
--service-tank-water-heater-text: #c2410c;
--service-floor-drain-bg: #f0f9ff;
--service-floor-drain-text: #0369a1;
--service-hvac-bg: #f5f3ff;
--service-hvac-text: #6d28d9;
--service-parking-lot-lighting-bg: #fffbeb;
--service-parking-lot-lighting-text: #92400e;
--service-pumping-systems-bg: #faf5ff;
--service-pumping-systems-text: #6b21a8;
--service-door-hardware-bg: #f0fdf4;
--service-door-hardware-text: #166534;
--service-pressure-reducing-valve-bg: #fff1f2;
--service-pressure-reducing-valve-text: #9f1239;
--service-fire-suppression-bg: #fef2f2;
--service-fire-suppression-text: #b91c1c;
}
@theme inline {
--font-display: var(--font-family-display);
--font-sans: var(--font-family-sans);
--font-mono: var(--font-family-mono);
--font-heading: var(--font-family-display);
--spacing-sidebar: var(--spacing-sidebar);
--spacing-topbar: var(--spacing-topbar);
--spacing-sidebar-collapsed: var(--spacing-sidebar-collapsed);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-input-background: var(--input-background);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-success: var(--success);
--color-warning: var(--warning);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-sm: var(--shadow-sm);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
}
Reference in a new issue Copy permalink