/* ============================================================================ VolTrack UI — a token-driven, accessible component system. Namespaced under `.ui-*` so it's drop-in safe alongside existing app/landing styles. Tokens drive everything; theme by overriding tokens (see [data-theme]). Layers: 1) tokens 2) primitives 3) components 4) utilities. ============================================================================ */ /* ── 1. Design tokens ─────────────────────────────────────────────────────── */ :root { /* Brand */ --ui-primary: #4F46E5; --ui-primary-hover: #4338CA; --ui-primary-active: #3730A3; --ui-primary-weak: #EEF2FF; /* tinted surface */ --ui-on-primary: #FFFFFF; /* Semantic */ --ui-success: #10B981; --ui-success-weak: #ECFDF5; --ui-success-text: #047857; --ui-warning: #F59E0B; --ui-warning-weak: #FFFBEB; --ui-warning-text: #B45309; --ui-danger: #EF4444; --ui-danger-weak: #FEF2F2; --ui-danger-text: #B91C1C; --ui-info: #3B82F6; --ui-info-weak: #EFF6FF; --ui-info-text: #1D4ED8; /* Neutrals / surfaces */ --ui-bg: #FBFBFE; --ui-surface: #FFFFFF; --ui-surface-2: #F6F7FB; --ui-border: #E6E9F0; --ui-border-strong: #CBD2E0; /* Text */ --ui-text: #0F172A; --ui-text-2: #51607A; --ui-text-3: #8A97AD; --ui-text-on-dark: rgba(255,255,255,.92); /* Typography */ --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ui-fs-xs: .75rem; --ui-fs-sm: .8125rem; --ui-fs-md: .875rem; --ui-fs-lg: 1rem; --ui-fs-xl: 1.25rem; --ui-fs-2xl: 1.5rem; --ui-fw-medium: 500; --ui-fw-semibold: 600; --ui-fw-bold: 700; --ui-leading: 1.5; /* Spacing scale (4px base) */ --ui-space-1: .25rem; --ui-space-2: .5rem; --ui-space-3: .75rem; --ui-space-4: 1rem; --ui-space-5: 1.5rem; --ui-space-6: 2rem; --ui-space-8: 3rem; /* Radii */ --ui-radius-sm: 6px; --ui-radius: 10px; --ui-radius-lg: 14px; --ui-radius-pill: 999px; /* Elevation */ --ui-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05); --ui-shadow: 0 4px 6px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.08); --ui-shadow-lg: 0 20px 48px rgba(15,23,42,.16); /* Motion */ --ui-transition: 150ms cubic-bezier(.2,.7,.3,1); /* Focus ring (visible, consistent everywhere) */ --ui-ring: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 35%, transparent); /* Sizing */ --ui-control-h-sm: 32px; --ui-control-h-md: 40px; --ui-control-h-lg: 48px; --ui-z-modal: 1000; --ui-z-toast: 1100; } /* Dark theme — OPT-IN only, via (or any ancestor). Deliberately NOT auto-applied from prefers-color-scheme: the VolTrack app is light-only, and these components are loaded app-wide, so auto-dark would flip ui-* components dark on a light page for OS-dark users. Opt in explicitly when a full dark theme exists. */ [data-theme="dark"] { --ui-bg: #0B1020; --ui-surface: #131A2C; --ui-surface-2: #1B2336; --ui-border: #2A3550; --ui-border-strong: #3A4768; --ui-text: #E8ECF4; --ui-text-2: #A9B4C9; --ui-text-3: #6B7790; --ui-primary-weak: #1E2547; --ui-success-weak: #0C2A20; --ui-warning-weak: #2A2008; --ui-danger-weak: #2C1414; --ui-info-weak: #11233F; /* Semantic colors lightened for contrast on dark surfaces */ --ui-success: #34D399; --ui-success-text: #6EE7B7; --ui-warning: #FBBF24; --ui-warning-text: #FCD34D; --ui-danger: #F87171; --ui-danger-text: #FCA5A5; --ui-info: #60A5FA; --ui-info-text: #93C5FD; --ui-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --ui-shadow: 0 8px 24px rgba(0,0,0,.45); --ui-shadow-lg: 0 24px 56px rgba(0,0,0,.6); } /* ── 2. Primitives ────────────────────────────────────────────────────────── */ .ui-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ui-stack { display: flex; flex-direction: column; gap: var(--ui-space-4); } .ui-row { display: flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; } /* Consistent focus ring on any focusable .ui element */ .ui-btn:focus-visible, .ui-field-input:focus-visible, .ui-alert-close:focus-visible, .ui-badge[tabindex]:focus-visible { outline: none; box-shadow: var(--ui-ring); } /* Spinner — used standalone and inside buttons */ .ui-spinner { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .6s linear infinite; vertical-align: -0.125em; } .ui-spinner--lg { width: 1.75rem; height: 1.75rem; border-width: 3px; } @keyframes ui-spin { to { transform: rotate(360deg); } } /* ── 3. Components ────────────────────────────────────────────────────────── */ /* Button -------------------------------------------------------------------- */ .ui-btn { --_bg: var(--ui-primary); --_fg: var(--ui-on-primary); --_bg-hover: var(--ui-primary-hover); --_border: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2); height: var(--ui-control-h-md); padding: 0 var(--ui-space-4); font-family: var(--ui-font); font-size: var(--ui-fs-md); font-weight: var(--ui-fw-semibold); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); transition: background var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition), transform var(--ui-transition), opacity var(--ui-transition); user-select: none; } .ui-btn:hover { background: var(--_bg-hover); } .ui-btn:active { transform: translateY(1px); } .ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; box-shadow: none; } .ui-btn[aria-busy="true"] { cursor: progress; pointer-events: none; } .ui-btn--secondary { --_bg: var(--ui-surface); --_fg: var(--ui-text); --_bg-hover: var(--ui-surface-2); --_border: var(--ui-border-strong); } .ui-btn--ghost { --_bg: transparent; --_fg: var(--ui-text); --_bg-hover: var(--ui-surface-2); box-shadow: none; } .ui-btn--danger { --_bg: var(--ui-danger); --_fg: #fff; --_bg-hover: #DC2626; } .ui-btn--success { --_bg: var(--ui-success); --_fg: #fff; --_bg-hover: #059669; } .ui-btn--sm { height: var(--ui-control-h-sm); padding: 0 var(--ui-space-3); font-size: var(--ui-fs-sm); } .ui-btn--lg { height: var(--ui-control-h-lg); padding: 0 var(--ui-space-5); font-size: var(--ui-fs-lg); } .ui-btn--block { width: 100%; } .ui-btn--icon { padding: 0; width: var(--ui-control-h-md); } .ui-btn--icon.ui-btn--sm { width: var(--ui-control-h-sm); } /* Loading: keep label width stable, overlay a spinner, hide label from a11y tree */ .ui-btn__label { display: inline-flex; align-items: center; gap: var(--ui-space-2); } .ui-btn[aria-busy="true"] .ui-btn__label { visibility: hidden; } .ui-btn[aria-busy="true"] .ui-btn__spinner { position: absolute; } .ui-btn { position: relative; } /* Badge / status pill ------------------------------------------------------- */ .ui-badge { display: inline-flex; align-items: center; gap: var(--ui-space-1); padding: 2px 10px; border-radius: var(--ui-radius-pill); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-semibold); line-height: 1.4; background: var(--ui-surface-2); color: var(--ui-text-2); white-space: nowrap; } .ui-badge--success { background: var(--ui-success-weak); color: var(--ui-success-text); } .ui-badge--warning { background: var(--ui-warning-weak); color: var(--ui-warning-text); } .ui-badge--danger { background: var(--ui-danger-weak); color: var(--ui-danger-text); } .ui-badge--info { background: var(--ui-info-weak); color: var(--ui-info-text); } .ui-badge--primary { background: var(--ui-primary-weak); color: var(--ui-primary); } .ui-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Alert --------------------------------------------------------------------- */ .ui-alert { display: flex; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-fs-md); } .ui-alert__icon { flex: 0 0 auto; font-size: 1.1em; line-height: var(--ui-leading); } .ui-alert__body { flex: 1; min-width: 0; } .ui-alert__title { font-weight: var(--ui-fw-semibold); margin: 0 0 2px; } .ui-alert__msg { color: var(--ui-text-2); margin: 0; } .ui-alert__close { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: 1.1rem; line-height: 1; padding: 2px; border-radius: var(--ui-radius-sm); } .ui-alert__close:hover { opacity: 1; } .ui-alert--success { background: var(--ui-success-weak); border-color: color-mix(in srgb, var(--ui-success) 30%, transparent); } .ui-alert--success .ui-alert__icon { color: var(--ui-success); } .ui-alert--warning { background: var(--ui-warning-weak); border-color: color-mix(in srgb, var(--ui-warning) 35%, transparent); } .ui-alert--warning .ui-alert__icon { color: var(--ui-warning-text); } .ui-alert--danger { background: var(--ui-danger-weak); border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent); } .ui-alert--danger .ui-alert__icon { color: var(--ui-danger); } .ui-alert--info { background: var(--ui-info-weak); border-color: color-mix(in srgb, var(--ui-info) 30%, transparent); } .ui-alert--info .ui-alert__icon { color: var(--ui-info); } /* Card ---------------------------------------------------------------------- */ .ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm); overflow: hidden; } .ui-card__header, .ui-card__footer { padding: var(--ui-space-4) var(--ui-space-5); } .ui-card__header { border-bottom: 1px solid var(--ui-border); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); } .ui-card__title { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); margin: 0; } .ui-card__body { padding: var(--ui-space-5); } .ui-card__footer { border-top: 1px solid var(--ui-border); background: var(--ui-surface-2); } .ui-card--interactive { transition: box-shadow var(--ui-transition), transform var(--ui-transition), border-color var(--ui-transition); cursor: pointer; } .ui-card--interactive:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); border-color: var(--ui-border-strong); } /* Empty state --------------------------------------------------------------- */ .ui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--ui-space-8) var(--ui-space-5); gap: var(--ui-space-2); } .ui-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: var(--ui-space-2); border-radius: var(--ui-radius-lg); background: var(--ui-primary-weak); color: var(--ui-primary); font-size: 1.5rem; } .ui-empty__title { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-semibold); margin: 0; } .ui-empty__desc { color: var(--ui-text-2); max-width: 42ch; margin: 0; } .ui-empty__actions { margin-top: var(--ui-space-3); display: flex; gap: var(--ui-space-2); flex-wrap: wrap; justify-content: center; } /* Skeleton (loading placeholder) -------------------------------------------- */ .ui-skeleton { display: block; border-radius: var(--ui-radius-sm); background: linear-gradient(90deg, var(--ui-surface-2) 25%, color-mix(in srgb, var(--ui-surface-2) 60%, var(--ui-border)) 37%, var(--ui-surface-2) 63%); background-size: 400% 100%; animation: ui-shimmer 1.4s ease infinite; height: 1em; } .ui-skeleton--text { height: .8em; margin: .25em 0; } .ui-skeleton--title { height: 1.25em; width: 50%; } .ui-skeleton--circle { border-radius: 50%; } @keyframes ui-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Form field ---------------------------------------------------------------- */ .ui-field { display: flex; flex-direction: column; gap: var(--ui-space-2); } .ui-field__label { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); color: var(--ui-text); } .ui-field__req { color: var(--ui-danger); margin-left: 2px; } .ui-field__optional { color: var(--ui-text-3); font-weight: 400; margin-left: 4px; } .ui-field-input { width: 100%; height: var(--ui-control-h-md); padding: 0 var(--ui-space-3); font-family: var(--ui-font); font-size: var(--ui-fs-md); color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); transition: border-color var(--ui-transition), box-shadow var(--ui-transition); } textarea.ui-field-input { height: auto; min-height: 84px; padding: var(--ui-space-3); line-height: var(--ui-leading); resize: vertical; } .ui-field-input::placeholder { color: var(--ui-text-3); } .ui-field-input:focus-visible { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-ring); } .ui-field-input:disabled { background: var(--ui-surface-2); color: var(--ui-text-3); cursor: not-allowed; } .ui-field-input[aria-invalid="true"] { border-color: var(--ui-danger); } .ui-field-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 30%, transparent); } .ui-field__help { font-size: var(--ui-fs-sm); color: var(--ui-text-3); margin: 0; } .ui-field__error { font-size: var(--ui-fs-sm); color: var(--ui-danger-text); margin: 0; display: flex; align-items: center; gap: var(--ui-space-1); } /* ── 4. Reduced motion ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ui-spinner, .ui-skeleton { animation-duration: 0.001ms; animation-iteration-count: 1; } .ui-btn, .ui-card--interactive { transition: none; } .ui-btn:active { transform: none; } }