/* Global design tokens */ /* ------------------------------------------------------------------------- */ /* The few global knobs of the design system (--ea- prefix), modeled on the shadcn/ui system. Changing these values re-themes the whole backend. IMPORTANT: tokens derived from other tokens must be declared on `:root, .ea-dark-scheme` (not just `:root`). Unregistered custom properties resolve their var()/calc() references on the element where they cascade and then inherit as resolved values; since the dark scheme class lives on , a derived token declared only on :root would keep its light-mode value in dark mode. */ :root { /* base border radius; all --border-radius-* values derive from it */ --ea-radius: 0.25rem; /* 4px */ /* base spacing unit; all padding/margin/gap values are multiples of it */ --ea-spacing: 0.125rem; /* 2px */ /* the accent color of interactive and highlighted elements */ --ea-primary: hsl(230, 61%, 58%); /* custom shade between indigo-400 and indigo-500 */ /* the color of text and icons that sit ON a solid --ea-primary fill (primary buttons, active pagination...). White suits the default indigo; a light themed primary (e.g. yellow) would need this set to a dark color, so it is its own per-scheme token ready for a future setTheme() to compute from the primary's luminance, rather than a hardcoded white. */ --ea-primary-foreground: var(--white); /* how thick the focus indicator is, for every focusable element. Keep it at 2px or more: WCAG 2.2 requires focus to stay clearly perceivable */ --ea-focus-ring-width: 3px; /* the two references the --ea-primary-* recipes below are mixed against: -mix-base is the surface a tint sits on, -contrast-base is the direction "more emphasis" moves in. Both flip per scheme, which is what lets one set of recipes serve light and dark. */ --ea-primary-mix-base: var(--white); --ea-primary-contrast-base: var(--black); } .ea-dark-scheme { /* the fill color, as in light: accent *text* is derived from it via --ea-primary-text, which lightens against the dark surface */ --ea-primary: hsl(224, 84%, 49%); --ea-primary-foreground: var(--white); --ea-primary-mix-base: var(--gray-900); --ea-primary-contrast-base: var(--white); } :root, .ea-dark-scheme { /* shades derived from --ea-primary, so setting that one knob re-tints every accent surface. Tints use oklab to stay perceptually even as the hue changes; the ring mixes in srgb because it fades to transparent. */ --ea-primary-subtle: color-mix(in oklab, var(--ea-primary) 8%, var(--ea-primary-mix-base)); --ea-primary-soft: color-mix(in oklab, var(--ea-primary) 16%, var(--ea-primary-mix-base)); --ea-primary-muted: color-mix(in oklab, var(--ea-primary) 30%, var(--ea-primary-mix-base)); --ea-primary-text: color-mix(in oklab, var(--ea-primary) 55%, var(--ea-primary-contrast-base)); --ea-primary-strong: color-mix(in oklab, var(--ea-primary) 80%, var(--ea-primary-contrast-base)); --ea-primary-ring: color-mix(in srgb, var(--ea-primary) 35%, transparent); /* derived border-radius scale (multiplicative, so --ea-radius scales all of them) */ --border-radius-none: 0; --border-radius-sm: calc(var(--ea-radius) * 0.5); /* 2px */ --border-radius: var(--ea-radius); /* 4px */ --border-radius-lg: calc(var(--ea-radius) * 2); /* 8px */ --border-radius-xl: calc(var(--ea-radius) * 3); /* 12px */ --border-radius-full: 50rem; /* fixed on purpose: pills and circles must not scale */ /* named spacing steps: the only spacing values allowed in this theme. Every padding/margin/gap must use one of these, so that changing --ea-spacing rescales the whole backend coherently. Each step is an integer multiple of the base unit (--ea-sp-N = N * --ea-spacing); fractional multiples are off the grid: don't add them. */ --ea-sp-1: calc(var(--ea-spacing) * 1); /* 2px */ --ea-sp-2: calc(var(--ea-spacing) * 2); /* 4px */ --ea-sp-3: calc(var(--ea-spacing) * 3); /* 6px */ --ea-sp-4: calc(var(--ea-spacing) * 4); /* 8px */ --ea-sp-5: calc(var(--ea-spacing) * 5); /* 10px */ --ea-sp-6: calc(var(--ea-spacing) * 6); /* 12px */ --ea-sp-7: calc(var(--ea-spacing) * 7); /* 14px */ --ea-sp-8: calc(var(--ea-spacing) * 8); /* 16px */ --ea-sp-10: calc(var(--ea-spacing) * 10); /* 20px */ --ea-sp-12: calc(var(--ea-spacing) * 12); /* 24px */ --ea-sp-14: calc(var(--ea-spacing) * 14); /* 28px */ --ea-sp-16: calc(var(--ea-spacing) * 16); /* 32px */ --ea-sp-18: calc(var(--ea-spacing) * 18); /* 36px */ --ea-sp-20: calc(var(--ea-spacing) * 20); /* 40px */ --ea-sp-22: calc(var(--ea-spacing) * 22); /* 44px */ --ea-sp-24: calc(var(--ea-spacing) * 24); /* 48px */ --ea-sp-28: calc(var(--ea-spacing) * 28); /* 56px */ --ea-sp-32: calc(var(--ea-spacing) * 32); /* 64px */ }