stroblmeandClaude Opus 5.5
4f4de1fd9d
The one-hue ramp told lines apart by lightness alone. --chart-1 is now --primary and slots 2-8 are distinct hues (orange, violet, green, orchid, ochre, teal, magenta) that clear 3:1 on --card and stay apart under protanopia and deuteranopia; red and sage are left out as the status colours. A chart takes the slots in order instead of spreading a ramp, and a dashboard's own palette continues after its primary and listed colours with slots 2-8 rather than tints of its scheme. Line charts stay at five series. Tokens mirror index's, as design-check requires. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013GAeg4Jo6xjZzjwy9QDWMQ
260 lines
8.9 KiB
CSS
260 lines
8.9 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/*
|
|
* Self-hosted font, duplicated verbatim across the fluksio and website repos (a
|
|
* sync point like `lib/motion.ts`; see the root DESIGN-GUIDELINES.md,
|
|
* Typography). Kept OUT of the byte-identical `@theme inline` / `:root` /
|
|
* `.dark` blocks. Inter is used for both body (set on `body` in `@layer base`)
|
|
* and the display face applied via the `.font-display` class below.
|
|
*/
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("/fonts/inter-latin-variable.woff2") format("woff2");
|
|
}
|
|
|
|
@theme inline {
|
|
--radius: 1rem; /* base: surface radius (16px) */
|
|
--radius-sm: 0.5rem; /* 8px: checkbox, small chips, nested items */
|
|
--radius-md: 0.75rem; /* 12px: menus, popovers, dropdowns, tooltips, textarea */
|
|
--radius-lg: 1rem; /* 16px: cards, panels, dialogs, alerts, sidebar */
|
|
--radius-xl: 1.75rem; /* 28px: large / hero containers */
|
|
/* Controls (button/input/toggle/chip) use the `rounded-full` utility (pill). */
|
|
|
|
/* Two-layer elevation: cards rest low (e1); floating surfaces e2; modals e3. */
|
|
--shadow-e1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);
|
|
--shadow-e2: 0 2px 6px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.12);
|
|
--shadow-e3: 0 8px 24px rgb(0 0 0 / 0.18), 0 2px 8px rgb(0 0 0 / 0.12);
|
|
|
|
/* Shared motion timing, consumed by CSS transitions and the lib/motion.ts presets. */
|
|
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--duration-fast: 150ms;
|
|
--duration-base: 200ms;
|
|
--duration-slow: 300ms;
|
|
/* One-shot feedback (a message arriving, a node emitting) rather than a UI
|
|
state change, so it lingers long enough to be noticed. */
|
|
--duration-pulse: 500ms;
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary-nested: var(--primary-nested);
|
|
--color-brand-secondary: var(--brand-secondary);
|
|
--color-brand-secondary-foreground: var(--brand-secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-status-success: var(--status-success);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-6: var(--chart-6);
|
|
--color-chart-7: var(--chart-7);
|
|
--color-chart-8: var(--chart-8);
|
|
--font-mono:
|
|
ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas,
|
|
monospace;
|
|
}
|
|
|
|
/*
|
|
* Fluksio palette. Neutral surfaces, brand on controls only.
|
|
*
|
|
* `--primary` is #4a7189, not the identity blue #59849b: the latter measures
|
|
* 4.04:1 against white, below AA for the label sitting on a bg-primary fill.
|
|
* #59849b remains the wordmark colour (index/src/assets/fluksio-*.svg). See the root
|
|
* DESIGN-GUIDELINES.md → Colour tokens.
|
|
*
|
|
* `--primary-nested` is that same hue and saturation a few steps deeper, for
|
|
* a reading drawn inside a `--primary` fill — the bar widget's stacked
|
|
* segments. No slot of the one-hue chart ramp that came before the palette
|
|
* cleared the 3:1 non-text guideline against `--primary` (`--chart-5`, which
|
|
* the bar used, measured 2.53:1), so the nested fill needs a token of its
|
|
* own. It cannot clear 3:1 against `--muted` as well in dark: `--primary` and
|
|
* `--muted` are only 5.82:1 apart there, and a colour 3:1 from both would have
|
|
* to sit in a 9:1 gap. The segment is therefore drawn inside a gutter of the
|
|
* fill rather than ever bordering the track.
|
|
*
|
|
* `--chart-1…8` is one categorical palette, taken in order: slot 1 is
|
|
* `--primary`, the rest are hues that clear 3:1 against `--card` and stay
|
|
* apart under colour blindness. See DESIGN-GUIDELINES.md → Colour tokens.
|
|
*/
|
|
/* `.light` is the symmetric half of `.dark` below: both are plain classes, so
|
|
either themes a subtree as well as the whole document — which is what lets a
|
|
dashboard forced to one theme sit inside a shell on the other. `:root` is
|
|
listed second so the parity grep keeps its anchor line. */
|
|
.light,
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #333232;
|
|
--card: #ffffff;
|
|
--card-foreground: #333232;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #333232;
|
|
--primary: #4a7189;
|
|
--primary-foreground: #ffffff;
|
|
--primary-nested: #152128; /* on --primary 3.14:1, on --muted 14.6:1 */
|
|
--brand-secondary: #de8f6e;
|
|
--brand-secondary-foreground: #333232;
|
|
--secondary: #f2f2f2;
|
|
--secondary-foreground: #333232;
|
|
--muted: #f2f2f2;
|
|
--muted-foreground: #6b6b6b;
|
|
--accent: #f5f5f5;
|
|
--accent-foreground: #333232;
|
|
--destructive: #b94d4d;
|
|
--border: #e4e4e4;
|
|
--input: #e4e4e4;
|
|
--ring: #4a7189;
|
|
--sidebar: #ffffff;
|
|
--sidebar-foreground: #333232;
|
|
--sidebar-primary: #4a7189;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #f5f5f5;
|
|
--sidebar-accent-foreground: #333232;
|
|
--sidebar-border: #e4e4e4;
|
|
--sidebar-ring: #4a7189;
|
|
--status-success: #5e8b6d;
|
|
--chart-1: #4a7189;
|
|
--chart-2: #e26f00;
|
|
--chart-3: #6f49ca;
|
|
--chart-4: #00721b;
|
|
--chart-5: #c66ae1;
|
|
--chart-6: #966a00;
|
|
--chart-7: #00a093;
|
|
--chart-8: #b32474;
|
|
}
|
|
|
|
.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #f5f5f5;
|
|
--card: #1a1a1a;
|
|
--card-foreground: #f5f5f5;
|
|
--popover: #1a1a1a;
|
|
--popover-foreground: #f5f5f5;
|
|
--primary: #7ba3b8;
|
|
--primary-foreground: #0a0a0a;
|
|
--primary-nested: #345160; /* on --primary 3.12:1, on --muted 1.86:1 */
|
|
--brand-secondary: #e5a184;
|
|
--brand-secondary-foreground: #0a0a0a;
|
|
--secondary: #232323;
|
|
--secondary-foreground: #f5f5f5;
|
|
--muted: #232323;
|
|
--muted-foreground: #a3a3a3;
|
|
--accent: #262626;
|
|
--accent-foreground: #f5f5f5;
|
|
--destructive: #cf6666;
|
|
--border: #2a2a2a;
|
|
--input: #2a2a2a;
|
|
--ring: #7ba3b8;
|
|
--sidebar: #1a1a1a;
|
|
--sidebar-foreground: #f5f5f5;
|
|
--sidebar-primary: #7ba3b8;
|
|
--sidebar-primary-foreground: #0a0a0a;
|
|
--sidebar-accent: #262626;
|
|
--sidebar-accent-foreground: #f5f5f5;
|
|
--sidebar-border: #2a2a2a;
|
|
--sidebar-ring: #7ba3b8;
|
|
--status-success: #87b596;
|
|
--chart-1: #7ba3b8;
|
|
--chart-2: #d26600;
|
|
--chart-3: #8d71e6;
|
|
--chart-4: #55c15e;
|
|
--chart-5: #dd8bf6;
|
|
--chart-6: #ae7c00;
|
|
--chart-7: #00c0b1;
|
|
--chart-8: #bf4483;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
button,
|
|
[role="button"] {
|
|
cursor: pointer;
|
|
}
|
|
/* Number fields are typed into, not clicked up and down one step at a time,
|
|
and the spinner crowds the pill. */
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/* Display face for headings / wordmarks. Plain class so it stays outside the
|
|
byte-identical token blocks; falls back to the body stack. */
|
|
.font-display {
|
|
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* ── Loading mark (FluksioLoader) ───────────────────────────────────── */
|
|
/*
|
|
* The brand ring is a single subpath with `pathLength="1"`, so a `1 1` dash is
|
|
* exactly one lap of it: offset 1 hides the mark, 0 completes it, and -1 wipes
|
|
* it off the same end it was drawn from. The hold in the middle is what makes
|
|
* the mark legible once per lap instead of only flashing through.
|
|
*/
|
|
@keyframes fluksio-draw {
|
|
0% {
|
|
stroke-dashoffset: 1;
|
|
}
|
|
45%,
|
|
55% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: -1;
|
|
}
|
|
}
|
|
|
|
.fluksio-loader-line {
|
|
stroke-dasharray: 1 1;
|
|
animation: fluksio-draw 1.6s var(--ease-standard) infinite;
|
|
}
|
|
|
|
/* `MotionConfig reducedMotion="user"` reaches JS animations only. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.fluksio-loader-line {
|
|
stroke-dasharray: none;
|
|
animation: none;
|
|
}
|
|
}
|