186 lines
5.9 KiB
CSS
186 lines
5.9 KiB
CSS
/* ============================================================
|
|
ARIA — global stylesheet
|
|
Tailwind v4 + the Aria design tokens. The @theme inline block
|
|
wires Tailwind's utility namespaces to the existing CSS-variable
|
|
tokens, so `bg-navy-900`, `rounded-lg`, `shadow-md`, `font-numeric`
|
|
etc. all resolve to the design system, with zero duplication.
|
|
============================================================ */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Inter+Tight:wght@500;600;700;800&display=swap');
|
|
@import 'tailwindcss';
|
|
@import './tokens/colors.css';
|
|
@import './tokens/typography.css';
|
|
@import './tokens/spacing.css';
|
|
|
|
@theme inline {
|
|
/* ---- Brand: Navy ---- */
|
|
--color-navy-950: var(--navy-950);
|
|
--color-navy-900: var(--navy-900);
|
|
--color-navy-800: var(--navy-800);
|
|
--color-navy-700: var(--navy-700);
|
|
--color-navy-600: var(--navy-600);
|
|
--color-navy-500: var(--navy-500);
|
|
--color-navy-400: var(--navy-400);
|
|
|
|
/* ---- Brand: Sunrise ---- */
|
|
--color-sunrise-600: var(--sunrise-600);
|
|
--color-sunrise-500: var(--sunrise-500);
|
|
--color-sunrise-400: var(--sunrise-400);
|
|
--color-sunrise-300: var(--sunrise-300);
|
|
--color-sunrise-200: var(--sunrise-200);
|
|
--color-sunrise-100: var(--sunrise-100);
|
|
|
|
/* ---- Semantic: Emerald / Amber / Ruby / Sky ---- */
|
|
--color-emerald-700: var(--emerald-700);
|
|
--color-emerald-600: var(--emerald-600);
|
|
--color-emerald-500: var(--emerald-500);
|
|
--color-emerald-300: var(--emerald-300);
|
|
--color-emerald-100: var(--emerald-100);
|
|
--color-amber-700: var(--amber-700);
|
|
--color-amber-600: var(--amber-600);
|
|
--color-amber-500: var(--amber-500);
|
|
--color-amber-300: var(--amber-300);
|
|
--color-amber-100: var(--amber-100);
|
|
--color-ruby-700: var(--ruby-700);
|
|
--color-ruby-600: var(--ruby-600);
|
|
--color-ruby-500: var(--ruby-500);
|
|
--color-ruby-100: var(--ruby-100);
|
|
--color-sky-700: var(--sky-700);
|
|
--color-sky-600: var(--sky-600);
|
|
--color-sky-500: var(--sky-500);
|
|
--color-sky-100: var(--sky-100);
|
|
|
|
/* ---- Neutral: Slate ---- */
|
|
--color-slate-950: var(--slate-950);
|
|
--color-slate-900: var(--slate-900);
|
|
--color-slate-800: var(--slate-800);
|
|
--color-slate-700: var(--slate-700);
|
|
--color-slate-600: var(--slate-600);
|
|
--color-slate-500: var(--slate-500);
|
|
--color-slate-400: var(--slate-400);
|
|
--color-slate-300: var(--slate-300);
|
|
--color-slate-200: var(--slate-200);
|
|
--color-slate-150: var(--slate-150);
|
|
--color-slate-100: var(--slate-100);
|
|
--color-slate-50: var(--slate-50);
|
|
|
|
/* ---- Semantic aliases (short, readable utility names) ---- */
|
|
--color-app: var(--surface-app);
|
|
--color-card: var(--surface-card);
|
|
--color-sunk: var(--surface-sunk);
|
|
--color-strong: var(--text-strong);
|
|
--color-body: var(--text-body);
|
|
--color-muted: var(--text-muted);
|
|
--color-faint: var(--text-faint);
|
|
--color-on-navy: var(--text-on-navy);
|
|
--color-on-navy-muted: var(--text-on-navy-muted);
|
|
--color-accent: var(--text-accent);
|
|
--color-link: var(--text-link);
|
|
--color-border-subtle: var(--border-subtle);
|
|
--color-border-default: var(--border-default);
|
|
|
|
/* Aria status semantics */
|
|
--color-autonomous: var(--status-autonomous);
|
|
--color-autonomous-soft: var(--status-autonomous-soft);
|
|
--color-escalated: var(--status-escalated);
|
|
--color-escalated-soft: var(--status-escalated-soft);
|
|
--color-info-soft: var(--status-info-soft);
|
|
|
|
/* ---- Radii ---- */
|
|
--radius-xs: var(--radius-xs);
|
|
--radius-sm: var(--radius-sm);
|
|
--radius-md: var(--radius-md);
|
|
--radius-lg: var(--radius-lg);
|
|
--radius-xl: var(--radius-xl);
|
|
--radius-2xl: var(--radius-2xl);
|
|
--radius-pill: var(--radius-pill);
|
|
|
|
/* ---- Elevation ---- */
|
|
--shadow-xs: var(--shadow-xs);
|
|
--shadow-sm: var(--shadow-sm);
|
|
--shadow-md: var(--shadow-md);
|
|
--shadow-lg: var(--shadow-lg);
|
|
--shadow-xl: var(--shadow-xl);
|
|
--shadow-sunrise: var(--shadow-sunrise);
|
|
|
|
/* ---- Fonts ---- */
|
|
--font-sans: var(--font-sans);
|
|
--font-numeric: var(--font-numeric);
|
|
--font-mono: var(--font-mono);
|
|
|
|
/* ---- Type scale ---- */
|
|
--text-2xs: var(--text-2xs);
|
|
--text-xs: var(--text-xs);
|
|
--text-sm: var(--text-sm);
|
|
--text-base: var(--text-base);
|
|
--text-md: var(--text-md);
|
|
--text-lg: var(--text-lg);
|
|
--text-xl: var(--text-xl);
|
|
--text-2xl: var(--text-2xl);
|
|
--text-3xl: var(--text-3xl);
|
|
--text-4xl: var(--text-4xl);
|
|
--text-5xl: var(--text-5xl);
|
|
--text-6xl: var(--text-6xl);
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
height: 100%;
|
|
}
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
background: var(--surface-app);
|
|
color: var(--text-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Brand gradients — not expressible as plain utilities. */
|
|
.bg-sunrise {
|
|
background-image: var(--gradient-sunrise);
|
|
}
|
|
.bg-sunrise-soft {
|
|
background-image: var(--gradient-sunrise-soft);
|
|
}
|
|
.bg-navy-grad {
|
|
background-image: var(--gradient-navy);
|
|
}
|
|
/* Tabular figures for aligning currency & scores. */
|
|
.nums {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Sunrise focus ring on inputs/selects. */
|
|
.focus-ring:focus-within {
|
|
border-color: var(--sunrise-500);
|
|
box-shadow: var(--shadow-focus);
|
|
}
|
|
/* Slim, theme-tinted scrollbar for in-panel scroll areas (agenda, rail,
|
|
modal body). The 2px transparent border + padding-box clip makes the thumb
|
|
read as a thin rounded pill with breathing room; darkens on hover. */
|
|
.scrollbar-slim {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-default) transparent;
|
|
}
|
|
.scrollbar-slim::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.scrollbar-slim::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.scrollbar-slim::-webkit-scrollbar-thumb {
|
|
background-color: var(--border-default);
|
|
background-clip: padding-box;
|
|
border: 3px solid transparent;
|
|
border-radius: 9999px;
|
|
}
|
|
.scrollbar-slim:hover::-webkit-scrollbar-thumb {
|
|
background-color: var(--text-faint);
|
|
}
|
|
}
|