Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw charts from one categorical palette, --chart-1…8

Browse Source 
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
This commit is contained in:
stroblme
2026-10-06 07:05:09 +02:00
co-authored by Claude Opus 5.5
parent d7ca933478
commit 4f4de1fd9d
12 changed files with 151 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+30 -17
View File
@@ -75,6 +75,9 @@
--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;
@@ -90,13 +93,17 @@
*
* `--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 chart ramp clears the 3:1 non-text guideline
* against `--primary` (`--chart-5`, which the bar used, measures 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.
* 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
@@ -134,11 +141,14 @@
--sidebar-border: #e4e4e4;
--sidebar-ring: #4a7189;
--status-success: #5e8b6d;
--chart-1: #3f5f74;
--chart-2: #4f768e;
--chart-3: #688ba1;
--chart-4: #83a2b5;
--chart-5: #9eb8c9;
--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 {
@@ -172,11 +182,14 @@
--sidebar-border: #2a2a2a;
--sidebar-ring: #7ba3b8;
--status-success: #87b596;
--chart-1: #94b0be;
--chart-2: #7999aa;
--chart-3: #5f8396;
--chart-4: #496d7f;
--chart-5: #395767;
--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 {