/*! * osTicket-IDIN9 — Unified Design Tokens (Phase 1, UI Upgrade) * Single source of truth for the client portal and the staff modern UI. * Human reference: /DESIGN.md · Plan: /docs/ui-upgrade/PLAN.md * * Principles encoded: * - Typography: 1.250 Major Third scale, base 16px, rem-based * - Spacing: 8pt grid (4px micro, 12px compact half-step) * - Color: 60-30-10 (neutral surfaces / slate structure / one accent) * - WCAG 2.2: every text/semantic color ≥ 4.5:1 on its surface, * focus ring tokens, 44px target minimum, reduced motion * - Theming: dark / light / system via `data-theme` attribute on * using the light-dark() function + color-scheme. No explicit * data-theme (or data-theme="system") follows the OS. * * Intentional changes vs. the legacy scp/css/modern/tokens.css values * (kept token NAMES identical for backward compatibility): * - --text-xs/sm/base/lg/xl/2xl: px → Major Third rem scale (11/13/15/18/22/28px * → 12.8/14/16/20/25/31px) — readability + small-text contrast compliance * - --text-tertiary: #94a3b8 → #64748b (2.9:1 → 4.8:1, AA) * - --success: #059669 → #065f46 (WCAG AA: 6.0:1 on white as fill, 5.8:1 on subtle as text) * - --warning: #d97706 → #92400e (WCAG AA: 4.7:1 on subtle as text, 13:1 on white) * - --danger: #dc2626 → #b91c1c (WCAG AA: 5.6:1 on white as fill, 5.1:1 on subtle as text) * - --info: #0891b2 → #155e75 (WCAG AA: 5.3:1 on subtle as text) */ :root { /* ---- Typography: 1.250 Major Third (base 16px) ---- */ --text-xs: 0.8rem; /* 12.8px — badges, fine print */ --text-sm: 0.875rem; /* 14px — dense UI (off-scale exception) */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.25rem; /* 20px — h4, card titles */ --text-xl: 1.563rem; /* 25px — h3 */ --text-2xl: 1.953rem; /* 31px — h2 */ --text-3xl: 2.441rem; /* 39px — h1 */ --text-4xl: 3.052rem; /* 49px — hero only */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --line-height-body: 1.5; --line-height-heading: 1.2; --measure: 70ch; /* max readable line length (Miller's Law) */ /* ---- Spacing: 8pt grid ---- */ --space-1: 4px; /* micro adjustments only */ --space-2: 8px; --space-3: 12px; /* compact half-step */ --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Shape & elevation ---- */ --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-full: 9999px; /* ---- Interaction (Fitts's Law / WCAG 2.2 Target Size) ---- */ --target-min: 44px; /* preferred minimum for interactive targets */ --target-aa: 24px; /* absolute WCAG 2.2 AA floor */ --transition: 150ms ease; /* ---- Layout ---- */ --content-max: 1600px; --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; } /* * Theme control. * * - data-theme="light" → force light * - data-theme="dark" → force dark * - data-theme="system" or no attribute → follow prefers-color-scheme * * `color-scheme` tells the UA to render native controls (inputs, selects, * checkboxes, scrollbars, date pickers) in the active scheme — this fixes the * "dark mode but white native controls" readability issue at the browser level. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ================= Light theme (default) ================= */ :root, [data-theme="light"] { /* 60% — dominant neutral surfaces */ --surface-base: #ffffff; --surface-0: #ffffff; --surface-1: #f8fafc; --surface-2: #f1f5f9; --surface-3: #e2e8f0; /* 30% — secondary structure */ --surface-inverse: #0f172a; /* header/nav structure */ --border: #cbd5e1; /* strengthened for visible structure */ --border-light: #e2e8f0; /* Text — all AA-verified on --surface-0 (see DESIGN.md) */ --text-primary: #0f172a; /* 17.7:1 */ --text-secondary: #475569; /* 7.5:1 */ --text-tertiary: #64748b; /* 4.8:1 — never below --text-xs */ /* 10% — accent (CTA / interactive only) */ --accent: #1d4ed8; /* 7.0:1 on white */ --accent-hover: #1e40af; /* 8.6:1 */ --accent-subtle: #dbeafe; --text-link: #1d4ed8; --text-link-hover: #1e40af; /* Semantic — dual-use: text on subtle bg (≥ 4.5:1), white text on solid fill (≥ 4.5:1) */ --success: #065f46; --success-subtle: #d1fae5; --warning: #92400e; --warning-subtle: #fef3c7; --danger: #b91c1c; --danger-subtle: #fee2e2; --info: #155e75; --info-subtle: #cffafe; /* Structure aliases */ --header-bg: #ffffff; --header-border: #cbd5e1; --nav-bg: #f8fafc; --nav-active: #1d4ed8; --subnav-bg: #f1f5f9; --table-header-bg: #f8fafc; --table-row-hover: #f1f5f9; --table-stripe: #fafafa; --thread-message: #dbeafe; --thread-response: #fef3c7; --thread-note: #fef9c3; --thread-system: #f1f5f9; /* Forms */ --input-bg: #ffffff; --input-border: #94a3b8; /* 3.4:1 on white — clearly delineated fields */ --input-focus-ring: #93c5fd; /* Focus ring — WCAG 2.2 Focus Appearance (≥ 3:1 vs. adjacent) */ --focus-ring: #1d4ed8; --focus-ring-width: 3px; --focus-ring-offset: 2px; --dialog-overlay: rgba(15, 23, 42, 0.4); --skeleton-base: #e2e8f0; --skeleton-shine: #f1f5f9; } /* ================= Dark theme (Elevation & High-Contrast science) ================= */ [data-theme="dark"] { /* Surface Elevation Scale (11% -> 15% -> 20% -> 26%) */ --surface-base: #0b0f19; /* canvas background */ --surface-0: #111827; /* cards, primary containers, input bg */ --surface-1: #1f2937; /* elevated headers, wells, table headers, sticky bars */ --surface-2: #374151; /* table row hover, elevated cards, dropdown items */ --surface-3: #4b5563; /* modals, dialogs, popovers, tooltips */ --surface-inverse: #f9fafb; --border: #374151; /* visible structure borders */ --border-light: #4b5563; /* inner dividers */ --text-primary: #f9fafb; /* 98% lightness - high contrast AAA */ --text-secondary: #e5e7eb; /* 90% lightness - body text & labels AA */ --text-tertiary: #9ca3af; /* 65% lightness - meta, placeholders (4.8:1 on surface-0) */ --accent: #3b82f6; /* desaturated accessible blue */ --accent-hover: #60a5fa; --accent-subtle: #1e3a8a; /* brand-tinted active surface */ --text-link: #60a5fa; /* high-contrast link text */ --text-link-hover: #93c5fd; --success: #34d399; /* emerald text/icon */ --success-subtle: #064e3b; /* dark emerald fill */ --warning: #fbbf24; /* amber text/icon */ --warning-subtle: #78350f; /* dark amber fill */ --danger: #f87171; /* red text/icon */ --danger-subtle: #7f1d1d; /* dark red fill */ --info: #38bdf8; /* sky blue text/icon */ --info-subtle: #0c4a6e; /* dark sky blue fill */ --header-bg: #1f2937; --header-border: #374151; --nav-bg: #111827; --nav-active: #3b82f6; --subnav-bg: #1f2937; --table-header-bg: #1f2937; --table-row-hover: #374151; --table-stripe: #182234; --thread-message: #1e293b; --thread-response: #1e3a5f; --thread-note: #713f12; --thread-system: #1f2937; --input-bg: #111827; --input-border: #4b5563; --input-focus-ring: #3b82f6; --focus-ring: #60a5fa; --dialog-overlay: rgba(0, 0, 0, 0.75); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --skeleton-base: #374151; --skeleton-shine: #1f2937; } /* System dark mode (no explicit data-theme, or data-theme="system") */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Surface Elevation Scale (11% -> 15% -> 20% -> 26%) */ --surface-base: #0b0f19; /* canvas background */ --surface-0: #111827; /* cards, primary containers, input bg */ --surface-1: #1f2937; /* elevated headers, wells, table headers, sticky bars */ --surface-2: #374151; /* table row hover, elevated cards, dropdown items */ --surface-3: #4b5563; /* modals, dialogs, popovers, tooltips */ --surface-inverse: #f9fafb; --border: #374151; /* visible structure borders */ --border-light: #4b5563; /* inner dividers */ --text-primary: #f9fafb; /* 98% lightness - high contrast AAA */ --text-secondary: #e5e7eb; /* 90% lightness - body text & labels AA */ --text-tertiary: #9ca3af; /* 65% lightness - meta, placeholders (4.8:1 on surface-0) */ --accent: #3b82f6; /* desaturated accessible blue */ --accent-hover: #60a5fa; --accent-subtle: #1e3a8a; /* brand-tinted active surface */ --text-link: #60a5fa; /* high-contrast link text */ --text-link-hover: #93c5fd; --success: #34d399; /* emerald text/icon */ --success-subtle: #064e3b; /* dark emerald fill */ --warning: #fbbf24; /* amber text/icon */ --warning-subtle: #78350f; /* dark amber fill */ --danger: #f87171; /* red text/icon */ --danger-subtle: #7f1d1d; /* dark red fill */ --info: #38bdf8; /* sky blue text/icon */ --info-subtle: #0c4a6e; /* dark sky blue fill */ --header-bg: #1f2937; --header-border: #374151; --nav-bg: #111827; --nav-active: #3b82f6; --subnav-bg: #1f2937; --table-header-bg: #1f2937; --table-row-hover: #374151; --table-stripe: #182234; --thread-message: #1e293b; --thread-response: #1e3a5f; --thread-note: #713f12; --thread-system: #1f2937; --input-bg: #111827; --input-border: #4b5563; --input-focus-ring: #3b82f6; --focus-ring: #60a5fa; --dialog-overlay: rgba(0, 0, 0, 0.75); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --skeleton-base: #374151; --skeleton-shine: #1f2937; } } /* ================= Shared a11y primitives ================= */ /* Visible keyboard focus everywhere (WCAG 2.2 Focus Appearance) */ :root a:focus-visible, :root button:focus-visible, :root input:focus-visible, :root select:focus-visible, :root textarea:focus-visible, :root [tabindex]:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Visually hidden, screen-reader accessible */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms linear; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }