Spaces:
Running
Running
File size: 8,925 Bytes
d879501 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | /* ==========================================================================
DAREBench homepage: color tokens (light theme only)
--------------------------------------------------------------------------
Visual source: the paper's Fig. 2 panel colors (1 blue / 2 green /
3 orange / 4 purple) plus the OpenClaw lobster red.
Method: dataviz color formula. Every DATA token below was checked with the
official validator (validate_palette.js, --mode light) against both page
surfaces, cream #FFF8EC and white #FFFFFF.
Verdicts are in palette.json; the usage rules are summarized below.
RULES FOR CHART AUTHORS
- Marks carry series colors. Labels, values, legends and axis text use ink
tokens, never a series color.
- Color follows the entity, not its rank. Keep the slot order below fixed.
- WARN: the light workload steps (--wl-text-ss, --wl-mm-ss) and
--pareto-muted are below 3:1 on the surface. Any chart that uses them
needs a relief channel: visible direct labels or the table view (every
chart ships a table view anyway).
- Status colors are reserved for state. Always pair them with an icon and
a label. Never use them for a series.
- Labels inside a colored mark use the matching --*-on token, which is the
one that clears 4.5:1. If a fill has no 4.5:1 on-color, put the label
outside the bar end in --ink.
========================================================================== */
:root {
color-scheme: light;
/* ---- Surfaces ---------------------------------------------------------- */
--surface-page: #FFF8EC; /* cream page plane (validator surface #1) */
--surface-card: #FFFFFF; /* chart cards / figures (validator surface #2) */
--surface-sunken: #F6ECDA; /* code blocks, table zebra, wells */
/* ---- Ink (text + cartoon outline) --------------------------------------
Contrast on cream / white:
ink 14.92 / 15.75, ink-2 7.84 / 8.28, ink-muted 5.89 / 6.22 (all pass AA) */
--ink: #2B2118; /* primary text, thick cartoon outlines, hard shadows */
--ink-2: #5A4C3D; /* secondary text */
--ink-muted: #6B5F50; /* captions, axis tick labels (still >= 4.5:1) */
--ink-inverse: #FFFFFF;
--outline: var(--ink);
/* ---- Chart chrome (hairlines, recessive) ------------------------------- */
--chart-grid: #ECE3D3; /* 1px solid gridlines */
--chart-axis: #CDBFA8; /* 1px baseline / axis rule */
--chart-ring: var(--surface-card); /* 2px surface ring around dots */
--chart-gap: var(--surface-card); /* 2px surface gap between touching bars */
/* ---- Brand: OpenClaw lobster (UI accent, NOT a data color) -------------- */
--lobster: #EC624A; /* fills, logo, big shapes; ink text on it 4.81:1 */
--lobster-ink: #B93D27; /* lobster-colored text/links: 5.29 cream / 5.59 white */
/* ---- Section chrome (from Fig. 2 panels; UI only, NOT data colors) -----
Contrast: fill vs --ink >= 13.6; sec ink vs its fill >= 4.9; edge vs cream >= 3.27;
white on badge >= 5.17 */
--sec-blue-fill: #EAF2FD; --sec-blue-edge: #4774CA; --sec-blue-badge: #1455B8; --sec-blue-ink: #1455B8;
--sec-green-fill: #EDF8EA; --sec-green-edge: #578E31; --sec-green-badge: #29793A; --sec-green-ink: #29793A;
--sec-orange-fill: #FDF0E2; --sec-orange-edge: #D86C1F; --sec-orange-badge: #B0520C; --sec-orange-ink: #A94F0A;
--sec-purple-fill: #F1ECFB; --sec-purple-edge: #6F2F9F; --sec-purple-badge: #6C47AD; --sec-purple-ink: #6C47AD;
/* ======================================================================
DATA COLORS
====================================================================== */
/* (a) Deployment: API vs Local. 2 slots, fixed order.
PASS on cream and white: CVD dE 23.7 (deutan), normal dE 31.1, both >= 3:1 */
--series-api: #7444B4; /* violet, from Fig. 2 panel 4 */
--series-local: #3C8836; /* green, from Fig. 2 panel 2 */
--series-api-on: #FFFFFF; /* 6.50:1 */
--series-local-on:#FFFFFF; /* 4.41:1, so bold >= 14pt only; otherwise label outside the bar in --ink */
/* (b) Modality: Text vs Multimodal. 2 slots, fixed order.
PASS on cream and white: CVD dE 28.6 (protan), normal dE 31.6, both >= 3:1.
These are the middle steps of the two workload families in (c). */
--series-text: #4A7AE4; /* blue, from Fig. 2 panel 1 */
--series-mm: #CC580B; /* orange, from Fig. 2 panel 3 */
--series-text-on: #FFFFFF; /* 4.04:1, so bold >= 14pt only */
--series-mm-on: #FFFFFF; /* 4.23:1, so bold >= 14pt only */
/* (b') Overall = both modalities combined (the leaderboard's aggregate column).
A DELIBERATE NEUTRAL, not a third categorical hue: it must not compete with
text/mm, and every free hue is taken (violet = API, green = local,
raspberry = Pareto, teal = heat ramp, reds/yellows = status).
validate_palette "#4A7AE4,#CC580B,#5B6878" (white and #F3FAFB):
lightness band PASS, CVD PASS (dE 13.6 protan), normal-vision PASS
(dE 21.1), contrast PASS (5.68:1 on white); chroma floor FAIL as expected
for a neutral (C 0.03). Distinct from the text token --ink-2 (1.48:1). */
--series-overall: #5B6878;
/* (c) Workload groups. 6 slots in a FIXED order:
text-ss, text-ms, text-mt, mm-ss, mm-ms, mm-mt
Composite encoding: hue = modality (blue family / orange family) and
lightness = execution complexity (single-step light, multi-step mid,
multi-step+tools dark), which mirrors the paper's Workload Matrix.
Categorical, adjacent pairs: PASS on both surfaces (worst CVD dE 13.6,
normal dE 15.7). The same holds on all pairs, so scatter and small
multiples are allowed.
WARN: contrast. --wl-text-ss (2.21 cream / 2.33 white) and --wl-mm-ss
(2.28 / 2.41) are below 3:1 and need relief (direct labels or table view).
Each family also PASSES the --ordinal ramp check (monotone L, dL >= 0.06,
hue spread 36 deg). */
--wl-text-ss: #18B6F2;
--wl-text-ms: #4A7AE4;
--wl-text-mt: #2C45AE;
--wl-mm-ss: #E29805;
--wl-mm-ms: #CC580B;
--wl-mm-mt: #922B01;
/* in-mark label colors (>= 4.5:1 only where noted; else label outside in --ink) */
--wl-text-ss-on: #2B2118; /* 6.76 */
--wl-text-mt-on: #FFFFFF; /* 8.17 */
--wl-mm-ss-on: #2B2118; /* 6.54 */
--wl-mm-mt-on: #FFFFFF; /* 8.18 */
/* --wl-text-ms and --wl-mm-ms: best on-color is 4.04 / 4.23, so use only for
bold text >= 14pt (18.66px), otherwise put the label outside the bar */
/* (d) Sequential heat ramp for leaderboard cells: one hue (teal), light to dark.
Teal is not used by any series, so a heat cell never reads as a modality or
a deployment type. Lightness is monotone and every step gap is >= 0.06.
Full 100-700 ramp: the light end recedes to the surface by design
(sequential), so the ordinal "light-end >= 2:1" check FAILS as expected.
Steps 400-700 used as an ordinal ramp: PASS on both surfaces. The
leaderboard's heat mode uses exactly these four steps (light end 2.16:1
on white, validate_palette --ordinal PASS).
Always print the number in the cell and show a scale legend, so color never
carries the value alone. */
--seq-100: #DEFAF7; --seq-100-on: #2B2118; /* 14.34 */
--seq-200: #B0EBE7; --seq-200-on: #2B2118; /* 11.91 */
--seq-300: #7EDAD7; --seq-300-on: #2B2118; /* 9.67 */
--seq-400: #40C2C3; --seq-400-on: #2B2118; /* 7.29 */
--seq-500: #02A6AD; --seq-500-on: #2B2118; /* 5.29 */
--seq-600: #0A818B; --seq-600-on: #FFFFFF; /* 4.64 */
--seq-700: #055F6C; --seq-700-on: #FFFFFF; /* 7.34 */
/* (e) Pareto emphasis: highlight the frontier, mute everything else.
The highlight is raspberry, a hue no series uses, so it reads the same in
the Text and Multimodal panels.
Highlight alone: PASS (L 0.52, C 0.20, 5.84 cream / 6.16 white).
Highlight vs muted: CVD dE 17.7 (deutan), normal dE 26.9, PASS. The
separation is carried mainly by lightness, which survives CVD.
Expected findings on the muted gray: chroma-floor FAIL (it is a
de-emphasis gray, not a categorical slot) and a contrast WARN
(2.54 cream / 2.68 white), so give muted points hover/focus tooltips
plus the table view.
All-pairs co-occurrence PASS: with (b) {text, mm, pareto-hi}, worst CVD
dE 16.8; with (a) {api, local, pareto-hi}, worst CVD dE 10.1. */
--pareto-hi: #B51C79;
--pareto-hi-on: #FFFFFF; /* 6.16 */
--pareto-muted: #A59D92;
--pareto-muted-on:#2B2118; /* 5.88 */
/* ---- Status (fixed, reserved; always icon + label, never a series) ----- */
--status-good: #0CA30C;
--status-warning: #FAB219;
--status-serious: #EC835A;
--status-critical: #D03B3B;
--status-good-text:#006300; /* success text on light surfaces */
}
|