josh
7c0d422228
Ground-up TypeScript rewrite of the Vector hardware parts inventory
system. Ships the full roadmap (Phases 0-8) in one initial commit:
- pnpm + Turbo monorepo: apps/{api,web,e2e}, packages/{db,shared,ui,config}
- Express 5 + Prisma 5 + zod validation + JWT w/ refresh-token rotation
- React 19 + Vite + shadcn/ui + TanStack Query/Table + nuqs URL state
- Repair/RMA, tags, bulk ops, saved views, CSV audit export
- Analytics dashboard on Recharts + EOL tracking
- Signed webhook subscriptions (HMAC-SHA256) with in-process emitter
- Vitest unit tests (shared schemas, api services/helpers) + Playwright skeleton
- Gitea Actions CI (lint, typecheck, test+coverage, build) + Renovate
Deferred follow-ups: Postgres cutover (data-migration script ready),
BullMQ worker for webhook delivery, @react-pdf PDF export, CSV import wizard.
118 lines
3.4 KiB
CSS
118 lines
3.4 KiB
CSS
/*
|
|
* Vector design tokens — Tailwind v4 CSS-first theme preset.
|
|
* Consumers: @import this file, then add @source entries pointing at packages/ui/src
|
|
* so Tailwind scans the shadcn primitives for class names.
|
|
*
|
|
* Palette = shadcn "new-york" with a Vector-specific accent. Radius and typography
|
|
* are tuned for a dense inventory app (8px grid, 13px base font).
|
|
*/
|
|
|
|
@theme {
|
|
/* Color tokens are wired through OKLCH for perceptual-linear dark theme mixing. */
|
|
--color-background: oklch(0.145 0 0);
|
|
--color-foreground: oklch(0.985 0 0);
|
|
|
|
--color-card: oklch(0.175 0 0);
|
|
--color-card-foreground: oklch(0.985 0 0);
|
|
|
|
--color-popover: oklch(0.175 0 0);
|
|
--color-popover-foreground: oklch(0.985 0 0);
|
|
|
|
--color-primary: oklch(0.985 0 0);
|
|
--color-primary-foreground: oklch(0.205 0 0);
|
|
|
|
--color-secondary: oklch(0.269 0 0);
|
|
--color-secondary-foreground: oklch(0.985 0 0);
|
|
|
|
--color-muted: oklch(0.225 0 0);
|
|
--color-muted-foreground: oklch(0.708 0 0);
|
|
|
|
--color-accent: oklch(0.269 0 0);
|
|
--color-accent-foreground: oklch(0.985 0 0);
|
|
|
|
--color-destructive: oklch(0.584 0.205 27.325);
|
|
--color-destructive-foreground: oklch(0.985 0 0);
|
|
|
|
--color-success: oklch(0.696 0.17 162.48);
|
|
--color-success-foreground: oklch(0.145 0 0);
|
|
|
|
--color-warning: oklch(0.769 0.188 70.08);
|
|
--color-warning-foreground: oklch(0.145 0 0);
|
|
|
|
--color-border: oklch(1 0 0 / 0.12);
|
|
--color-input: oklch(1 0 0 / 0.14);
|
|
--color-ring: oklch(0.556 0 0);
|
|
|
|
/* Brand accent — used for primary CTAs in pages (not in shell chrome). */
|
|
--color-brand: oklch(0.663 0.186 250);
|
|
--color-brand-foreground: oklch(0.985 0 0);
|
|
|
|
/* Radius (8px grid). */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 0.75rem;
|
|
--radius-2xl: 1rem;
|
|
|
|
/* Typography. */
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: ui-monospace, "JetBrains Mono", "Menlo", monospace;
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.875rem;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.125rem;
|
|
--text-2xl: 1.375rem;
|
|
--text-3xl: 1.75rem;
|
|
|
|
/* Spacing extension — adds half-step 2.5/3.5 already in Tailwind plus shell widths. */
|
|
--spacing-sidebar: 16rem;
|
|
--spacing-sidebar-collapsed: 3.5rem;
|
|
--spacing-topbar: 3.25rem;
|
|
|
|
/* Shadow. */
|
|
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
|
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55);
|
|
|
|
/* Animation. */
|
|
--animate-fade-in: fade-in 120ms ease-out;
|
|
--animate-slide-up: slide-up 180ms ease-out;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Base layer — body and selection defaults. */
|
|
@layer base {
|
|
html, body, #root {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
background-color: var(--color-background);
|
|
color: var(--color-foreground);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-base);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
::selection {
|
|
background-color: color-mix(in oklch, var(--color-brand) 40%, transparent);
|
|
color: var(--color-foreground);
|
|
}
|
|
*:focus-visible {
|
|
outline: 2px solid var(--color-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|