/* * RideXpress Design System — Tokens v1 * * Source of truth for every color, type, spacing, radius, shadow, and * motion value used across the public site and every internal portal. * * Grounded in the brand values already live in static/css/style.css's * :root block (--theme-color #dab024, --color-dark #1c2b39, Abril * Fatface + Poppins) rather than an invented palette. Gaps that block * building real components (spacing scale, semantic status colors, * typographic scale, a genuine text-appropriate body color) are filled * in below, not reinvented from scratch. * * Usage: components.css and every new template/component should read * these custom properties, never hardcode a hex value or px size. */ :root { /* ---------- Brand (from static/css/style.css, unchanged) ---------- */ --rx-color-brand: #DAB024; /* gold/amber — primary CTA, links, accents */ --rx-color-brand-strong: #7A5F09; /* darker gold — hover/active states AND text-on-light use. Darkened from the original #B8930F: that value failed WCAG AA both as text on white/brand-soft (2.9:1/2.4:1) and as a background under white text on .rx-btn--primary:hover (2.9:1, same ratio -- contrast is symmetric). This value passes AA (>=4.5:1) in both directions; verified via a WCAG relative-luminance contrast check, not eyeballed. */ --rx-color-brand-soft: #F4E9C8; /* pale gold — subtle fills, badges */ --rx-color-ink: #1C2B39; /* dark navy — headings on light, dark surfaces */ --rx-color-ink-soft: #3A4C5E; /* ---------- Neutrals (gap-filled: site had no light-mode text scale) ---------- */ --rx-color-white: #FFFFFF; --rx-color-surface: #FFFFFF; --rx-color-surface-alt: #F9F9F9; /* == existing --theme-bg-light */ --rx-color-surface-sunken: #F1F1F1; --rx-color-border: #E2E0EB; --rx-color-text: #1C2B39; /* == existing --color-dark, used as body text on light */ --rx-color-text-muted: #5C6B7A; --rx-color-text-on-dark: #F5FAFF; /* == existing --footer-text-color */ --rx-color-text-on-dark-muted:#B7C2CC; /* ---------- Dark surfaces (site's existing dark sections/footer) ---------- */ --rx-color-dark-surface: #1C2B39; /* == existing --footer-bg */ --rx-color-dark-surface-2: #14212C; --rx-color-hero-overlay: #01060F; /* == existing --hero-overlay-color */ /* ---------- Semantic status (site had green/blue/yellow ad hoc; formalized here) --- */ --rx-color-success: #0A7A47; /* darkened from #11B76B (2.4:1 on --rx-color-success-bg, failed AA as .rx-badge--success / .rx-stat-card__trend text) to 4.9:1, passing. == existing --color-green, darkened for accessibility -- see brand-strong's comment above for the same class of fix. */ --rx-color-success-bg: #E6F9F0; --rx-color-info: #0049D0; /* == existing --color-blue */ --rx-color-info-bg: #E8F0FE; --rx-color-warning: #FBA707; /* == existing --color-yellow */ --rx-color-warning-bg: #FEF3E0; --rx-color-danger: #C62828; /* gap-filled — no error red existed in tokens. Darkened from #E14848: that value failed WCAG AA as a solid fill under the white .rx-btn--danger label (4.02:1, needs 4.5:1). #C62828 gives 5.62:1 against white in both themes. Same class of computed fix as brand-strong/success above — see docs/engineering/ACCESSIBILITY_AUDIT.md finding 4. */ --rx-color-danger-bg: #FDEAEA; /* ---------- Accessible foregrounds + focus (ACCESSIBILITY_AUDIT.md) ---------- * The status hues above are *fill/border* colors: they sit under white * text (.rx-btn--danger) or act as a border. They are NOT safe as text * on their own tinted --*-bg container, and the dark theme below only * inverted the -bg halves — which left every badge/alert/toast dark-on- * dark (worst measured: 1.25:1). These `on-*-bg` tokens are the * text-on-container pair for each, and they DO invert per theme. * Every value below was picked with a WCAG relative-luminance script, * not eyeballed — same standard as brand-strong/success above. */ --rx-color-on-success-bg: #0A5C36; /* 7.38:1 on --success-bg, 8.09:1 on white */ --rx-color-on-info-bg: #0B2E6B; /* 11.33:1 on --info-bg */ --rx-color-on-warning-bg: #7A4E00; /* 6.55:1 on --warning-bg */ --rx-color-on-danger-bg: #7A1F1F; /* 8.87:1 on --danger-bg, 10.28:1 on white */ /* Focus ring. Split from --rx-color-brand-strong specifically because brand-strong is a *dark* gold tuned for text-on-light: as an outline on the dark theme's surfaces it measured 2.39-2.93:1, under the 3:1 WCAG 1.4.11 floor for a focus indicator, on every dark-theme page. */ --rx-color-focus-ring: #7A5F09; /* light: 6.05/5.75/5.36:1 on surface/alt/sunken */ /* Form-control border. --rx-color-border (1.30:1 on white) is correct for decorative dividers but fails 1.4.11's 3:1 for the border that *identifies an input as an input*. Scoped to form controls only so card/table dividers keep their current lighter treatment. */ --rx-color-border-strong: #767F8C; /* 4.05:1 on white */ /* ---------- Typography (real pairing already in use across templates) ---------- */ --rx-font-display: 'Abril Fatface', serif; /* headings, hero copy */ --rx-font-body: 'Poppins', sans-serif; /* body text, UI, forms, tables */ --rx-font-mono: ui-monospace, 'SF Mono', Consolas, monospace; /* booking IDs, amounts */ --rx-text-xs: 0.75rem; /* 12px — captions, table meta */ --rx-text-sm: 0.875rem; /* 14px — body small, form labels */ --rx-text-base: 1rem; /* 16px — body */ --rx-text-lg: 1.125rem; /* 18px */ --rx-text-xl: 1.375rem; /* 22px — card/section titles */ --rx-text-2xl: 1.75rem; /* 28px — page titles */ --rx-text-3xl: 2.25rem; /* 36px — hero subheads */ --rx-text-4xl: 3rem; /* 48px — hero headline */ --rx-weight-regular: 400; --rx-weight-medium: 500; --rx-weight-semibold:600; --rx-weight-bold: 700; --rx-leading-tight: 1.2; --rx-leading-normal: 1.55; --rx-leading-loose: 1.8; /* ---------- Spacing scale (gap-filled — 4px base, matches existing ad hoc values) --- */ --rx-space-1: 4px; --rx-space-2: 8px; --rx-space-3: 12px; --rx-space-4: 16px; --rx-space-5: 20px; --rx-space-6: 24px; --rx-space-8: 32px; --rx-space-10: 40px; --rx-space-12: 48px; --rx-space-16: 64px; /* ---------- Radii ---------- */ --rx-radius-sm: 4px; --rx-radius-md: 8px; --rx-radius-lg: 12px; --rx-radius-full: 999px; /* ---------- Shadows (formalized from existing --box-shadow/--box-shadow2) ---------- */ --rx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --rx-shadow-md: 0 0 15px rgba(0, 0, 0, 0.17); /* == existing --box-shadow2 */ --rx-shadow-lg: 0 0 40px 5px rgba(0, 0, 0, 0.05); /* == existing --box-shadow */ /* ---------- Motion — the RideXpress Motion Language ---------- * Replaces the prior `all 0.3s/0.5s ease-in-out` pair (kept below, * deprecated) with a researched duration scale + asymmetric easing, * per docs/engineering/MOTION_LANGUAGE.md. Two problems with the old * pair, concretely: (1) `all` forces the browser to interpolate every * animatable property on the element, including ones that shouldn't * be transitioning -- a real rendering-cost and correctness issue, * not just a style preference; every component now transitions only * the specific properties it actually changes. (2) A single * symmetric `ease-in-out` was used for every direction of motion -- * real interfaces (Material Design 3's published motion spec is the * source for the values below) use *asymmetric* curves: elements * entering the screen decelerate into place, elements leaving * accelerate away, matching how attention naturally moves. * * Duration scale (Material Design 3's own token values -- already * extensively user-tested at this exact granularity, not re-derived * from scratch): */ --rx-motion-instant: 100ms; /* the "feels immediate" threshold -- roughly a human eye-blink; hover/press feedback only */ --rx-motion-fast: 150ms; /* small UI: dropdown/tooltip/badge appearing */ --rx-motion-base: 250ms; /* the default: modal/drawer/toast, most transitions */ --rx-motion-slow: 400ms; /* spatially larger motion: full-screen drawer, page-level HTMX swaps */ --rx-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* general-purpose (Material Design 3) */ --rx-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); /* entering elements -- fast start, gentle settle */ --rx-ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /* exiting elements -- slow start, fast exit */ /* ---------- Z-index scale (gap-filled — no scale existed, prevents ad hoc stacking bugs) */ --rx-z-dropdown: 1000; --rx-z-sticky: 1020; --rx-z-overlay: 1030; --rx-z-modal: 1040; --rx-z-toast: 1050; /* ---------- Breakpoints (documentation only -- see note below) ---------- */ /* Custom properties can't be referenced inside an @media condition, so these exist as the single source of truth for what each breakpoint *means*; every actual @media rule in this file and patterns.css must hardcode these same pixel values rather than inventing new ones. See docs/engineering/FRONTEND_ARCHITECTURE.md section 4. */ --rx-bp-sm: 480px; /* large phone */ --rx-bp-md: 768px; /* tablet / mobile nav collapse point */ --rx-bp-lg: 1024px; /* small desktop / staff-portal dashboard minimum */ --rx-bp-xl: 1280px; /* wide desktop */ } /* * ---------- Dark theme ---------- * Only surface/text/border tokens invert -- brand and semantic-status * hues are unchanged (a status color that means "danger" needs to keep * meaning "danger" in both themes). Dark-surface values reuse the same * --rx-color-dark-surface(-2) already defined above for the site's * existing dark sections/footer, not a newly invented palette. * * prefers-color-scheme covers OS-level preference; the [data-theme] * selectors cover an explicit in-app toggle (not yet built) and must * win over the media query in both directions, per the artifact/theming * convention this design system otherwise follows. */ @media (prefers-color-scheme: dark) { :root { --rx-color-surface: #14212C; --rx-color-surface-alt: #1C2B39; --rx-color-surface-sunken: #0F1922; --rx-color-border: #2C3E4E; --rx-color-text: #F5FAFF; --rx-color-text-muted: #B7C2CC; --rx-color-success-bg: #0F2A1E; --rx-color-info-bg: #10203D; --rx-color-warning-bg: #332405; --rx-color-danger-bg: #3A1414; /* Foreground halves — must invert with the -bg halves above, or every badge/alert/toast renders dark-on-dark (ACCESSIBILITY_AUDIT.md #3). */ --rx-color-on-success-bg: #5FD9A0; /* 8.70:1 on --success-bg, 9.29:1 on surface */ --rx-color-on-info-bg: #8AB4FF; /* 7.76:1 on --info-bg */ --rx-color-on-warning-bg: #F5C063; /* 9.03:1 on --warning-bg */ --rx-color-on-danger-bg: #FF9A9A; /* 8.02:1 on --danger-bg, 8.06:1 on surface */ --rx-color-focus-ring: #DAB024; /* 7.96/7.03/8.64:1 on surface/alt/sunken */ --rx-color-border-strong: #6B7D8F; /* 3.86:1 on surface */ } } :root[data-theme="dark"] { --rx-color-surface: #14212C; --rx-color-surface-alt: #1C2B39; --rx-color-surface-sunken: #0F1922; --rx-color-border: #2C3E4E; --rx-color-text: #F5FAFF; --rx-color-text-muted: #B7C2CC; --rx-color-success-bg: #0F2A1E; --rx-color-info-bg: #10203D; --rx-color-warning-bg: #332405; --rx-color-danger-bg: #3A1414; --rx-color-on-success-bg: #5FD9A0; --rx-color-on-info-bg: #8AB4FF; --rx-color-on-warning-bg: #F5C063; --rx-color-on-danger-bg: #FF9A9A; --rx-color-focus-ring: #DAB024; --rx-color-border-strong: #6B7D8F; } :root[data-theme="light"] { --rx-color-surface: #FFFFFF; --rx-color-surface-alt: #F9F9F9; --rx-color-surface-sunken: #F1F1F1; --rx-color-border: #E2E0EB; --rx-color-text: #1C2B39; --rx-color-text-muted: #5C6B7A; --rx-color-success-bg: #E6F9F0; --rx-color-info-bg: #E8F0FE; --rx-color-warning-bg: #FEF3E0; --rx-color-danger-bg: #FDEAEA; --rx-color-on-success-bg: #0A5C36; --rx-color-on-info-bg: #0B2E6B; --rx-color-on-warning-bg: #7A4E00; --rx-color-on-danger-bg: #7A1F1F; --rx-color-focus-ring: #7A5F09; --rx-color-border-strong: #767F8C; }