a424ac9d13
- Add _build_reason() to backend — per-patient reason strings with specific day counts (e.g. "Supply lapsed 70 days ago. Prescriber contact required.") - Add reason field to RecordOut model and backend /api/export CSV - Fix export column headers: Coverage End Date → Resupply End Date, Days Until Coverage End → Days Until Resupply End - Pass reason through apiRecordToLocal in frontend api.js - Display reason as muted sub-line under status badge in WorklistTable - Add reason column to client-side CSVExport - Add signal-ui React source to repo (was untracked) - CLAUDE.md: add Billing and CMS integrations to Phase 2 deferred table - research: restore Section 14 stat verification (May 23 recovery) Deployed to Railway production — health check confirmed live. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
168 lines
No EOL
4.9 KiB
CSS
168 lines
No EOL
4.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ── Signal Design Tokens — v1.0 ──
|
|
Source: docs/design-tokens-v1.json + docs/sttil-brand-system-v1.md
|
|
Accent family: tangerine (warm gold on dark, restrained copper on light)
|
|
*/
|
|
|
|
@theme {
|
|
/* ── Color: Teal (dominant system color) ── */
|
|
--color-teal-50: #EEF8F8;
|
|
--color-teal-100: #CBE9E9;
|
|
--color-teal-200: #97D3D3;
|
|
--color-teal-300: #5BBBBB;
|
|
--color-teal-400: #2EA3A3;
|
|
--color-teal-500: #1A8A8A;
|
|
--color-teal-600: #147A7A;
|
|
--color-teal-700: #0F5E5E;
|
|
--color-teal-800: #0A4444;
|
|
--color-teal-900: #072E2E;
|
|
--color-teal-950: #041A1A;
|
|
|
|
/* ── Color: Tangerine (accent) ── */
|
|
--color-tng-50: #FFF4EE;
|
|
--color-tng-100: #FFE4CC;
|
|
--color-tng-200: #FFC090;
|
|
--color-tng-300: #FFB070;
|
|
--color-tng-400: #F07840;
|
|
--color-tng-500: #E06028;
|
|
--color-tng-600: #C04E1C;
|
|
--color-tng-700: #903A14;
|
|
--color-tng-800: #6A2A0C;
|
|
--color-tng-900: #3E1808;
|
|
|
|
/* ── Color: Neutral (teal-toned) ── */
|
|
--color-neutral-0: #FFFFFF;
|
|
--color-neutral-50: #F4F9F9;
|
|
--color-neutral-100: #E5EEEE;
|
|
--color-neutral-200: #C8D8D8;
|
|
--color-neutral-300: #A3BEBE;
|
|
--color-neutral-400: #7A9E9E;
|
|
--color-neutral-500: #5A7E7E;
|
|
--color-neutral-600: #426060;
|
|
--color-neutral-700: #2E4444;
|
|
--color-neutral-800: #1C2C2C;
|
|
--color-neutral-900: #111A1A;
|
|
|
|
/* ── Color: Semantic ── */
|
|
--color-success-100: #C8EDD8;
|
|
--color-success-500: #1A7A4E;
|
|
--color-success-600: #146040;
|
|
--color-warning-100: #FDECD5;
|
|
--color-warning-400: #D97B35;
|
|
--color-warning-600: #A85A18;
|
|
--color-error-100: #F8CCCC;
|
|
--color-error-500: #C83030;
|
|
--color-error-600: #A02020;
|
|
--color-info-100: #C8E0EE;
|
|
--color-info-500: #1A6A9A;
|
|
--color-purple-100: #E2D8F0;
|
|
--color-purple-500: #7A5EA0;
|
|
|
|
/* ── Color: Mode-specific surfaces ── */
|
|
--color-warm-white: #FFFAF6;
|
|
--color-page-dark: #041A1A;
|
|
--color-card-dark: #072E2E;
|
|
--color-elevated-dark: #0A4444;
|
|
--color-border-dark: #0F5E5E;
|
|
|
|
/* ── Typography ── */
|
|
--font-heading: 'Plus Jakarta Sans', sans-serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.125rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.5rem;
|
|
--text-3xl: 1.875rem;
|
|
--text-4xl: 2.25rem;
|
|
--text-5xl: 3rem;
|
|
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
--leading-tight: 1.15;
|
|
--leading-snug: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.6;
|
|
|
|
--tracking-tight: -0.02em;
|
|
--tracking-normal: 0em;
|
|
--tracking-wide: 0.05em;
|
|
--tracking-wider: 0.08em;
|
|
--tracking-widest: 0.1em;
|
|
|
|
/* ── Border radius ── */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-2xl: 1.5rem;
|
|
|
|
/* ── Shadows ── */
|
|
--shadow-card-sm: 0 1px 3px rgba(7,46,46,0.10);
|
|
--shadow-card-md: 0 2px 10px rgba(4,26,26,0.14);
|
|
--shadow-card-lg: 0 4px 20px rgba(4,26,26,0.18);
|
|
--shadow-copper-dark: 0 0 24px rgba(240,120,64,0.30), 0 2px 10px rgba(4,26,26,0.70);
|
|
--shadow-copper-light: 0 0 16px rgba(224,96,40,0.20), 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* ── Base layer ── */
|
|
@layer base {
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-weight: var(--font-weight-regular);
|
|
font-size: var(--text-sm);
|
|
line-height: var(--leading-normal);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
|
|
/* ── Light mode (default) ── */
|
|
:root {
|
|
--bg-page: var(--color-neutral-50);
|
|
--bg-card: var(--color-neutral-0);
|
|
--bg-elevated: var(--color-neutral-100);
|
|
--text-heading: #0A3030;
|
|
--text-primary: var(--color-neutral-800);
|
|
--text-secondary:var(--color-neutral-500);
|
|
--text-muted: var(--color-neutral-400);
|
|
--border-color: var(--color-neutral-200);
|
|
--border-subtle: rgba(200,216,216,0.7);
|
|
--brand: var(--color-teal-600);
|
|
--brand-hover: var(--color-teal-700);
|
|
--accent: var(--color-tng-500);
|
|
--accent-text: var(--color-tng-500);
|
|
--accent-glow: var(--shadow-copper-light);
|
|
--row-hover: rgba(20,122,122,0.04);
|
|
}
|
|
|
|
/* ── Dark mode ── */
|
|
.dark {
|
|
--bg-page: var(--color-page-dark);
|
|
--bg-card: var(--color-card-dark);
|
|
--bg-elevated: var(--color-elevated-dark);
|
|
--text-heading: var(--color-warm-white);
|
|
--text-primary: #F0F4F4;
|
|
--text-secondary:var(--color-teal-300);
|
|
--text-muted: #5A8080;
|
|
--border-color: var(--color-border-dark);
|
|
--border-subtle: rgba(15,94,94,0.45);
|
|
--brand: var(--color-teal-400);
|
|
--brand-hover: #1A8A8A;
|
|
--accent: var(--color-tng-400);
|
|
--accent-text: var(--color-tng-300);
|
|
--accent-glow: var(--shadow-copper-dark);
|
|
--row-hover: rgba(46,163,163,0.06);
|
|
} |