From 94825a9ddce4828df4aa6fe12b40841f13c6c1e2 Mon Sep 17 00:00:00 2001 From: Manuel de Brito Fontes Date: Mon, 9 Nov 2026 12:50:10 -0300 Subject: [PATCH] palette: a chart's series and statuses, one set held on both pages The installation's Grafana dashboards drew in Grafana's classic palette: no colour in them was the brand's, because the brand had none for a chart. A dashboard is one JSON drawn in whichever theme the viewer chose, so [chart] is one set for both modes: eight series in a fixed order (the mark's blue first) and the three steps a threshold climbs through. Each holds 3:1 as a line on dark's page and on light's, each series is apart from the next and each status from the others at the meaning tier, in every view. tokens.json carries them. Co-Authored-By: Claude Opus 5.5 --- README.md | 4 +++ cmd/palette/checks.go | 68 +++++++++++++++++++++++++++++++++++++++++- cmd/palette/main.go | 31 +++++++++++++++++++ cmd/palette/outputs.go | 15 +++++++++- dist/perception.js | 2 +- dist/tokens.json | 15 ++++++++++ palette.toml | 22 ++++++++++++++ 7 files changed, 154 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bdf7055..9d29d7a 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,10 @@ Firewall (`go tool sfw check`), from [go-tools](https://github.com/spin-stack/go panel at 30% backlight, and through each dichromacy (Machado, Oliveira and Fernandes 2009, severity 1.0), protan and deutan also on the IPS panel. The floors are in `checks.go`, each with its reason; they follow spin-stack's sibling CONSTRUCT. +- **Charts** (`[chart]`, `tokens.json`'s `chart`): eight series in a fixed order and three + threshold statuses, one set for both modes because Grafana draws one dashboard JSON in either + theme. Each holds 3:1 on dark's page and on light's, and each series is held apart from the + next, and each status from the others, at the meaning tier. - **No meaning by hue alone**: a status carries a shape too (the preview's states: a dot, a diamond, a square), since a floor for colour-vision deficiencies is a floor, not comfort. diff --git a/cmd/palette/checks.go b/cmd/palette/checks.go index 683f940..d996a09 100644 --- a/cmd/palette/checks.go +++ b/cmd/palette/checks.go @@ -49,7 +49,8 @@ var tiers = map[string][2]float64{ "line": {6, 4}, // a 1px border against the surface outside it "state": {10, 6}, // selected against not selected "hover": {3, 2}, // a step under the pointer - "meaning": {20, 10}, // hue that carries meaning: status against status and against the accent + "meaning": {20, 10}, // hue that carries meaning: status against status and against the accent, + // a chart's series against the one drawn next to it, and a chart's statuses against each other } // meaningTritan is the floor for meaning through tritanopia, where blue and green are one: a @@ -153,6 +154,11 @@ func holds(p palette) ([]result, error) { return nil, err } out = append(out, term...) + ch, err := chartHolds(p) + if err != nil { + return nil, err + } + out = append(out, ch...) for _, r := range out { if math.IsNaN(r.contrast) { return nil, fmt.Errorf("%s %s: not a number", r.mode, r.what) @@ -195,6 +201,66 @@ func terminalHolds(p palette) ([]result, error) { return out, nil } +// chartHolds is the chart's colours, one set for both modes: each a line or a fill that holds +// 3:1 on either mode's page, each series apart from the one drawn next to it, and each status +// apart from the others. +func chartHolds(p palette) ([]result, error) { + series, statuses, err := p.Chart.colors() + if err != nil { + return nil, fmt.Errorf("chart: %w", err) + } + dark, err := colors(p.Dark) + if err != nil { + return nil, err + } + light, err := colors(p.Light) + if err != nil { + return nil, err + } + var out []result + hold := func(what string, fg rgb) { + for _, page := range []struct { + mode string + c rgb + }{{"dark", dark["page"]}, {"light", light["page"]}} { + r := result{mode: page.mode, kind: "non-text", what: what + " on page", contrast: contrast(fg, page.c), floor: nonText} + r.ok = r.contrast >= nonText + out = append(out, r) + } + } + apart := func(tier, what string, a, b rgb) { + f := tiers[tier] + r := result{mode: "chart", kind: tier, what: what, distance: map[string]float64{}, floor: f[0], worst: f[1], ok: true} + for _, v := range views { + d := deltaE00(v.fn(a.linear()).lab(), v.fn(b.linear()).lab()) + r.distance[v.name] = d + floor := f[1] + if v.name == "drawn" { + floor = f[0] + } + if d < floor { + r.ok = false + } + } + out = append(out, r) + } + for i, c := range series { + hold(fmt.Sprintf("series %d", i+1), c) + if i > 0 { + apart("meaning", fmt.Sprintf("series %d | series %d", i, i+1), series[i-1], c) + } + } + for _, s := range chartStatuses { + hold(s, statuses[s]) + } + for i, a := range chartStatuses { + for _, b := range chartStatuses[i+1:] { + apart("meaning", a+" | "+b, statuses[a], statuses[b]) + } + } + return out, nil +} + // colors reads a mode's roles by name. func colors(m mode) (map[string]rgb, error) { named := map[string]string{ diff --git a/cmd/palette/main.go b/cmd/palette/main.go index 9c16ced..8c4b338 100644 --- a/cmd/palette/main.go +++ b/cmd/palette/main.go @@ -64,10 +64,41 @@ func (t terminal) colors() (map[string]rgb, error) { return parseNamed(named) } +// chart is the colours a chart draws with, one set for both modes (palette.toml says why). +type chart struct { + Series []string + Good, Warning, Critical string +} + +// chartStatuses are a threshold's steps, in the order a value climbs through them. +var chartStatuses = []string{"good", "warning", "critical"} + +// colors is the series in their order and the statuses by name. Fewer than two series is no +// palette: a chart with one series takes the first, and a palette of one was never checked apart. +func (c chart) colors() ([]rgb, map[string]rgb, error) { + if len(c.Series) < 2 { + return nil, nil, fmt.Errorf("%d series, want at least two", len(c.Series)) + } + series := make([]rgb, 0, len(c.Series)) + for i, hex := range c.Series { + v, err := parseHex(hex) + if err != nil { + return nil, nil, fmt.Errorf("series %d: %w", i+1, err) + } + series = append(series, v) + } + statuses, err := parseNamed(map[string]string{"good": c.Good, "warning": c.Warning, "critical": c.Critical}) + if err != nil { + return nil, nil, err + } + return series, statuses, nil +} + type palette struct { Brand map[string]string Dark mode Light mode + Chart chart // A terminal's roles and its sixteen ANSI colours, the same in either theme. Terminal terminal Tint struct{ Hover, Selected, Scrim, Fill, Badge float64 } diff --git a/cmd/palette/outputs.go b/cmd/palette/outputs.go index 7ca58e0..16d34ab 100644 --- a/cmd/palette/outputs.go +++ b/cmd/palette/outputs.go @@ -25,7 +25,7 @@ func outputs(p palette, results []result) (map[string][]byte, error) { files := map[string][]byte{} j, err := json.MarshalIndent(map[string]any{ - "brand": p.Brand, "dark": hexes(dark), "light": hexes(light), "terminal": hexes(term), + "brand": p.Brand, "dark": hexes(dark), "light": hexes(light), "terminal": hexes(term), "chart": chartJSON(p.Chart), "tint": p.Tint, "type": p.Type, "layout": p.Layout, "controls": p.Controls, "elevation": p.Elevation, "motion": p.Motion, }, "", " ") if err != nil { @@ -42,6 +42,19 @@ func outputs(p palette, results []result) (map[string][]byte, error) { const header = "/* Written by `task palette` from palette.toml (spin-stack/brand). Edit palette.toml, not this file. */\n" +// chartJSON is the chart's colours as tokens.json carries them: the series in their order, and +// each status by name, in the case palette.toml writes them. +func chartJSON(c chart) map[string]any { + series := make([]string, 0, len(c.Series)) + for _, s := range c.Series { + series = append(series, strings.ToUpper(s)) + } + return map[string]any{ + "series": series, "good": strings.ToUpper(c.Good), + "warning": strings.ToUpper(c.Warning), "critical": strings.ToUpper(c.Critical), + } +} + func hexes(c map[string]rgb) map[string]string { out := map[string]string{} for k, v := range c { diff --git a/dist/perception.js b/dist/perception.js index 8f1621f..1d3b94c 100644 --- a/dist/perception.js +++ b/dist/perception.js @@ -1,2 +1,2 @@ // Written by `task palette`: every pair palette.toml is held to, and how it held. -export const perception = [{"Mode":"dark","Kind":"text","What":"text on page","Contrast":15.37,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on page","Contrast":7.41,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on page","Contrast":9.6,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on page","Contrast":8.31,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on page","Contrast":9.27,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on page","Contrast":7.1,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on surface","Contrast":13.9,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on surface","Contrast":6.7,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on surface","Contrast":8.68,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on surface","Contrast":7.52,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on surface","Contrast":8.39,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on surface","Contrast":6.42,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on raised","Contrast":12.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on raised","Contrast":5.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on raised","Contrast":7.55,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on raised","Contrast":6.54,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on raised","Contrast":7.3,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on raised","Contrast":5.59,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on overlay","Contrast":10.17,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on overlay","Contrast":4.9,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on overlay","Contrast":6.35,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on overlay","Contrast":5.5,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on overlay","Contrast":6.14,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on overlay","Contrast":4.7,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on its badge over page","Contrast":6.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on its badge over page","Contrast":7.54,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on its badge over page","Contrast":5.99,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on its badge over page","Contrast":7.69,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on its badge over surface","Contrast":6.06,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on its badge over surface","Contrast":6.69,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on its badge over surface","Contrast":5.34,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on its badge over surface","Contrast":6.8,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on its badge over raised","Contrast":5.24,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on its badge over raised","Contrast":5.79,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on its badge over raised","Contrast":4.64,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on its badge over raised","Contrast":5.87,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"label on page","Contrast":8.27,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on the selected tint over page","Contrast":7.07,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on the selected tint over page","Contrast":11.32,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"label on surface","Contrast":7.48,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on the selected tint over surface","Contrast":6.36,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on the selected tint over surface","Contrast":10.19,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"on_accent on accent","Contrast":4.53,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"white on destructive","Contrast":5.22,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"on_accent on accent under the pointer","Contrast":5.58,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"on_accent on accent pressed","Contrast":6.94,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"white on destructive under the pointer","Contrast":6.37,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"white on destructive pressed","Contrast":7.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on a secondary button","Contrast":12.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on a secondary button under the pointer","Contrast":10.17,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"border_strong on page","Contrast":4.15,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"accent (the focus ring) on page","Contrast":4.07,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"border_strong on raised","Contrast":3.27,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"accent (the focus ring) on raised","Contrast":3.2,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"edge","What":"page | surface","Distance":{"deutan":3.6,"deutan+ips":3.3,"dim":3.1,"drawn":3.6,"ips":3.3,"protan":3.6,"protan+ips":3.4,"tritan":4.2},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"edge","What":"surface | raised","Distance":{"deutan":4.1,"deutan+ips":4,"dim":3.9,"drawn":4.2,"ips":4.1,"protan":4.2,"protan+ips":4.1,"tritan":4},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"edge","What":"page | raised","Distance":{"deutan":7.7,"deutan+ips":7.3,"dim":7,"drawn":7.8,"ips":7.4,"protan":7.9,"protan+ips":7.5,"tritan":8.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"line","What":"border on page","Distance":{"deutan":14.5,"deutan+ips":13.6,"dim":12.9,"drawn":14.6,"ips":13.8,"protan":15,"protan+ips":14.1,"tritan":15},"Floor":6,"Worst":4,"OK":true},{"Mode":"dark","Kind":"line","What":"border on raised","Distance":{"deutan":7.3,"deutan+ips":6.9,"dim":6.6,"drawn":7.4,"ips":7,"protan":7.5,"protan+ips":7.1,"tritan":7.4},"Floor":6,"Worst":4,"OK":true},{"Mode":"dark","Kind":"state","What":"selected tint over page | page","Distance":{"deutan":9.7,"deutan+ips":9.3,"dim":9.6,"drawn":10.9,"ips":10.3,"protan":10,"protan+ips":9.5,"tritan":12.6},"Floor":10,"Worst":6,"OK":true},{"Mode":"dark","Kind":"hover","What":"hover tint over page | page","Distance":{"deutan":3.9,"deutan+ips":3.7,"dim":3.7,"drawn":4.4,"ips":4.1,"protan":3.8,"protan+ips":3.6,"tritan":7},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"state","What":"selected tint over surface | surface","Distance":{"deutan":8.4,"deutan+ips":8.3,"dim":9.2,"drawn":10.2,"ips":9.7,"protan":8.9,"protan+ips":8.6,"tritan":10.8},"Floor":10,"Worst":6,"OK":true},{"Mode":"dark","Kind":"hover","What":"hover tint over surface | surface","Distance":{"deutan":3.2,"deutan+ips":3.2,"dim":3.6,"drawn":4.2,"ips":3.9,"protan":3.3,"protan+ips":3.2,"tritan":5.4},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"hover","What":"accent under the pointer | accent","Distance":{"deutan":5.4,"deutan+ips":5.4,"dim":5.6,"drawn":5.7,"ips":5.7,"protan":6.2,"protan+ips":6.1,"tritan":6.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"hover","What":"destructive under the pointer | destructive","Distance":{"deutan":5.8,"deutan+ips":5.8,"dim":5.2,"drawn":5.3,"ips":5.2,"protan":3.9,"protan+ips":3.9,"tritan":5.3},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"hover","What":"secondary under the pointer | secondary","Distance":{"deutan":4,"deutan+ips":3.8,"dim":3.7,"drawn":4,"ips":3.9,"protan":4.1,"protan+ips":4,"tritan":4},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"edge","What":"secondary button | page","Distance":{"deutan":7.7,"deutan+ips":7.3,"dim":7,"drawn":7.8,"ips":7.4,"protan":7.9,"protan+ips":7.5,"tritan":8.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"meaning","What":"success | error","Distance":{"deutan":14.6,"deutan+ips":14.5,"dim":69,"drawn":69.9,"ips":69.6,"protan":32.4,"protan+ips":32.2,"tritan":64.2},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"success | warning","Distance":{"deutan":16.7,"deutan+ips":16.6,"dim":35.1,"drawn":35.5,"ips":35.4,"protan":11.5,"protan+ips":11.4,"tritan":51.9},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"warning | error","Distance":{"deutan":28.9,"deutan+ips":28.8,"dim":47.7,"drawn":48.5,"ips":48.2,"protan":41.5,"protan+ips":41.2,"tritan":11.5},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"accent | success","Distance":{"deutan":40.6,"deutan+ips":40.3,"dim":41.6,"drawn":42.3,"ips":42,"protan":42.5,"protan+ips":42.2,"tritan":18},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"accent | error","Distance":{"deutan":27,"deutan+ips":26.7,"dim":46.4,"drawn":47.3,"ips":47,"protan":10.8,"protan+ips":10.7,"tritan":62.5},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"text","What":"text on page","Contrast":17.74,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on page","Contrast":6.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on page","Contrast":7.46,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on page","Contrast":6.81,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on page","Contrast":6.71,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on page","Contrast":7.67,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on surface","Contrast":16.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on surface","Contrast":6.01,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on surface","Contrast":6.76,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on surface","Contrast":6.18,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on surface","Contrast":6.09,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on surface","Contrast":6.95,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on raised","Contrast":14.27,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on raised","Contrast":5.33,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on raised","Contrast":6,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on raised","Contrast":5.48,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on raised","Contrast":5.4,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on raised","Contrast":6.17,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on overlay","Contrast":17.74,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on overlay","Contrast":6.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on overlay","Contrast":7.46,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on overlay","Contrast":6.81,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on overlay","Contrast":6.71,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on overlay","Contrast":7.67,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on its badge over page","Contrast":5.68,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on its badge over page","Contrast":5.61,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on its badge over page","Contrast":6.25,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on its badge over page","Contrast":6.17,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on its badge over surface","Contrast":5.18,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on its badge over surface","Contrast":5.12,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on its badge over surface","Contrast":5.7,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on its badge over surface","Contrast":5.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on its badge over raised","Contrast":4.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on its badge over raised","Contrast":4.57,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on its badge over raised","Contrast":5.08,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on its badge over raised","Contrast":5.03,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"label on page","Contrast":7.6,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on the selected tint over page","Contrast":5.02,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on the selected tint over page","Contrast":11.94,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"label on surface","Contrast":6.9,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on the selected tint over surface","Contrast":4.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on the selected tint over surface","Contrast":11.01,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"on_accent on accent","Contrast":5.5,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"white on destructive","Contrast":5.62,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"on_accent on accent under the pointer","Contrast":6.68,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"on_accent on accent pressed","Contrast":8.14,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"white on destructive under the pointer","Contrast":6.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"white on destructive pressed","Contrast":8.33,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on a secondary button","Contrast":16.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on a secondary button under the pointer","Contrast":14.27,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"border_strong on page","Contrast":3.86,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"accent (the focus ring) on page","Contrast":5.5,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"border_strong on raised","Contrast":3.1,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"accent (the focus ring) on raised","Contrast":4.43,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"edge","What":"page | surface","Distance":{"deutan":3.6,"deutan+ips":3.6,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.5},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"edge","What":"surface | raised","Distance":{"deutan":3.5,"deutan+ips":3.5,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.6},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"edge","What":"page | raised","Distance":{"deutan":7.1,"deutan+ips":7,"dim":6.8,"drawn":6.8,"ips":6.8,"protan":6.6,"protan+ips":6.6,"tritan":7.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"line","What":"border on page","Distance":{"deutan":13.1,"deutan+ips":13,"dim":12.7,"drawn":12.8,"ips":12.7,"protan":12.5,"protan+ips":12.4,"tritan":13},"Floor":6,"Worst":4,"OK":true},{"Mode":"light","Kind":"line","What":"border on raised","Distance":{"deutan":6.5,"deutan+ips":6.5,"dim":6.3,"drawn":6.4,"ips":6.4,"protan":6.3,"protan+ips":6.3,"tritan":6.4},"Floor":6,"Worst":4,"OK":true},{"Mode":"light","Kind":"state","What":"selected tint over page | page","Distance":{"deutan":13.2,"deutan+ips":13.1,"dim":13.8,"drawn":13.9,"ips":13.9,"protan":11.3,"protan+ips":11.3,"tritan":17},"Floor":10,"Worst":6,"OK":true},{"Mode":"light","Kind":"hover","What":"hover tint over page | page","Distance":{"deutan":5.1,"deutan+ips":5.1,"dim":5.6,"drawn":5.6,"ips":5.6,"protan":4.3,"protan+ips":4.3,"tritan":7.4},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"state","What":"selected tint over surface | surface","Distance":{"deutan":12.1,"deutan+ips":12.1,"dim":12.8,"drawn":12.9,"ips":12.9,"protan":10.4,"protan+ips":10.3,"tritan":15.6},"Floor":10,"Worst":6,"OK":true},{"Mode":"light","Kind":"hover","What":"hover tint over surface | surface","Distance":{"deutan":4.6,"deutan+ips":4.6,"dim":5.1,"drawn":5.2,"ips":5.1,"protan":3.9,"protan+ips":3.9,"tritan":6.6},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"hover","What":"accent under the pointer | accent","Distance":{"deutan":4.6,"deutan+ips":4.6,"dim":4.8,"drawn":4.9,"ips":4.8,"protan":5.3,"protan+ips":5.3,"tritan":5.3},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"hover","What":"destructive under the pointer | destructive","Distance":{"deutan":5.6,"deutan+ips":5.5,"dim":4.9,"drawn":5,"ips":5,"protan":3.7,"protan+ips":3.6,"tritan":5.2},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"hover","What":"secondary under the pointer | secondary","Distance":{"deutan":3.5,"deutan+ips":3.5,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.6},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"edge","What":"secondary button | page","Distance":{"deutan":3.6,"deutan+ips":3.6,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.5},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"meaning","What":"success | error","Distance":{"deutan":10.3,"deutan+ips":10,"dim":61.3,"drawn":64.1,"ips":62.9,"protan":29.7,"protan+ips":29,"tritan":56.5},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"success | warning","Distance":{"deutan":16.1,"deutan+ips":15.6,"dim":35.2,"drawn":36.7,"ips":36.1,"protan":11.5,"protan+ips":10.8,"tritan":46.6},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"warning | error","Distance":{"deutan":24.6,"deutan+ips":24,"dim":37.8,"drawn":41.1,"ips":39.7,"protan":38.6,"protan+ips":37.4,"tritan":9.3},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"accent | success","Distance":{"deutan":32.2,"deutan+ips":31.7,"dim":33.3,"drawn":34.3,"ips":33.9,"protan":34.9,"protan+ips":34.5,"tritan":9.7},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"accent | error","Distance":{"deutan":19.9,"deutan+ips":19.8,"dim":44.2,"drawn":45.6,"ips":45,"protan":16.6,"protan+ips":16.4,"tritan":61.3},"Floor":20,"Worst":10,"OK":true},{"Mode":"term","Kind":"text","What":"foreground on background","Contrast":16.34,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"foreground on black","Contrast":11.69,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"red on background","Contrast":6.81,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"green on background","Contrast":8.84,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"yellow on background","Contrast":9.86,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"blue on background","Contrast":7.3,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"magenta on background","Contrast":8.02,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"cyan on background","Contrast":9.04,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"white on background","Contrast":12.73,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_black on background","Contrast":5.47,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_red on background","Contrast":9.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_green on background","Contrast":12.27,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_yellow on background","Contrast":13.13,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_blue on background","Contrast":10.62,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_magenta on background","Contrast":11.41,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_cyan on background","Contrast":12.53,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_white on background","Contrast":19.57,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"foreground on selection","Contrast":9.51,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"background on cursor","Contrast":9.04,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"non-text","What":"cursor on background","Contrast":9.04,"Floor":3,"Worst":0,"OK":true}]; +export const perception = [{"Mode":"dark","Kind":"text","What":"text on page","Contrast":15.37,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on page","Contrast":7.41,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on page","Contrast":9.6,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on page","Contrast":8.31,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on page","Contrast":9.27,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on page","Contrast":7.1,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on surface","Contrast":13.9,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on surface","Contrast":6.7,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on surface","Contrast":8.68,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on surface","Contrast":7.52,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on surface","Contrast":8.39,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on surface","Contrast":6.42,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on raised","Contrast":12.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on raised","Contrast":5.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on raised","Contrast":7.55,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on raised","Contrast":6.54,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on raised","Contrast":7.3,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on raised","Contrast":5.59,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on overlay","Contrast":10.17,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"muted on overlay","Contrast":4.9,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on overlay","Contrast":6.35,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on overlay","Contrast":5.5,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on overlay","Contrast":6.14,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on overlay","Contrast":4.7,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on its badge over page","Contrast":6.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on its badge over page","Contrast":7.54,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on its badge over page","Contrast":5.99,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on its badge over page","Contrast":7.69,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on its badge over surface","Contrast":6.06,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on its badge over surface","Contrast":6.69,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on its badge over surface","Contrast":5.34,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on its badge over surface","Contrast":6.8,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"success on its badge over raised","Contrast":5.24,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"warning on its badge over raised","Contrast":5.79,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"error on its badge over raised","Contrast":4.64,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on its badge over raised","Contrast":5.87,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"label on page","Contrast":8.27,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on the selected tint over page","Contrast":7.07,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on the selected tint over page","Contrast":11.32,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"label on surface","Contrast":7.48,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"accent_text on the selected tint over surface","Contrast":6.36,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on the selected tint over surface","Contrast":10.19,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"on_accent on accent","Contrast":4.53,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"white on destructive","Contrast":5.22,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"on_accent on accent under the pointer","Contrast":5.58,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"on_accent on accent pressed","Contrast":6.94,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"white on destructive under the pointer","Contrast":6.37,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"white on destructive pressed","Contrast":7.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on a secondary button","Contrast":12.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"text","What":"text on a secondary button under the pointer","Contrast":10.17,"Floor":7,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"border_strong on page","Contrast":4.15,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"accent (the focus ring) on page","Contrast":4.07,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"border_strong on raised","Contrast":3.27,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"accent (the focus ring) on raised","Contrast":3.2,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"edge","What":"page | surface","Distance":{"deutan":3.6,"deutan+ips":3.3,"dim":3.1,"drawn":3.6,"ips":3.3,"protan":3.6,"protan+ips":3.4,"tritan":4.2},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"edge","What":"surface | raised","Distance":{"deutan":4.1,"deutan+ips":4,"dim":3.9,"drawn":4.2,"ips":4.1,"protan":4.2,"protan+ips":4.1,"tritan":4},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"edge","What":"page | raised","Distance":{"deutan":7.7,"deutan+ips":7.3,"dim":7,"drawn":7.8,"ips":7.4,"protan":7.9,"protan+ips":7.5,"tritan":8.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"line","What":"border on page","Distance":{"deutan":14.5,"deutan+ips":13.6,"dim":12.9,"drawn":14.6,"ips":13.8,"protan":15,"protan+ips":14.1,"tritan":15},"Floor":6,"Worst":4,"OK":true},{"Mode":"dark","Kind":"line","What":"border on raised","Distance":{"deutan":7.3,"deutan+ips":6.9,"dim":6.6,"drawn":7.4,"ips":7,"protan":7.5,"protan+ips":7.1,"tritan":7.4},"Floor":6,"Worst":4,"OK":true},{"Mode":"dark","Kind":"state","What":"selected tint over page | page","Distance":{"deutan":9.7,"deutan+ips":9.3,"dim":9.6,"drawn":10.9,"ips":10.3,"protan":10,"protan+ips":9.5,"tritan":12.6},"Floor":10,"Worst":6,"OK":true},{"Mode":"dark","Kind":"hover","What":"hover tint over page | page","Distance":{"deutan":3.9,"deutan+ips":3.7,"dim":3.7,"drawn":4.4,"ips":4.1,"protan":3.8,"protan+ips":3.6,"tritan":7},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"state","What":"selected tint over surface | surface","Distance":{"deutan":8.4,"deutan+ips":8.3,"dim":9.2,"drawn":10.2,"ips":9.7,"protan":8.9,"protan+ips":8.6,"tritan":10.8},"Floor":10,"Worst":6,"OK":true},{"Mode":"dark","Kind":"hover","What":"hover tint over surface | surface","Distance":{"deutan":3.2,"deutan+ips":3.2,"dim":3.6,"drawn":4.2,"ips":3.9,"protan":3.3,"protan+ips":3.2,"tritan":5.4},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"hover","What":"accent under the pointer | accent","Distance":{"deutan":5.4,"deutan+ips":5.4,"dim":5.6,"drawn":5.7,"ips":5.7,"protan":6.2,"protan+ips":6.1,"tritan":6.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"hover","What":"destructive under the pointer | destructive","Distance":{"deutan":5.8,"deutan+ips":5.8,"dim":5.2,"drawn":5.3,"ips":5.2,"protan":3.9,"protan+ips":3.9,"tritan":5.3},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"hover","What":"secondary under the pointer | secondary","Distance":{"deutan":4,"deutan+ips":3.8,"dim":3.7,"drawn":4,"ips":3.9,"protan":4.1,"protan+ips":4,"tritan":4},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"edge","What":"secondary button | page","Distance":{"deutan":7.7,"deutan+ips":7.3,"dim":7,"drawn":7.8,"ips":7.4,"protan":7.9,"protan+ips":7.5,"tritan":8.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"dark","Kind":"meaning","What":"success | error","Distance":{"deutan":14.6,"deutan+ips":14.5,"dim":69,"drawn":69.9,"ips":69.6,"protan":32.4,"protan+ips":32.2,"tritan":64.2},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"success | warning","Distance":{"deutan":16.7,"deutan+ips":16.6,"dim":35.1,"drawn":35.5,"ips":35.4,"protan":11.5,"protan+ips":11.4,"tritan":51.9},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"warning | error","Distance":{"deutan":28.9,"deutan+ips":28.8,"dim":47.7,"drawn":48.5,"ips":48.2,"protan":41.5,"protan+ips":41.2,"tritan":11.5},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"accent | success","Distance":{"deutan":40.6,"deutan+ips":40.3,"dim":41.6,"drawn":42.3,"ips":42,"protan":42.5,"protan+ips":42.2,"tritan":18},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"meaning","What":"accent | error","Distance":{"deutan":27,"deutan+ips":26.7,"dim":46.4,"drawn":47.3,"ips":47,"protan":10.8,"protan+ips":10.7,"tritan":62.5},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"text","What":"text on page","Contrast":17.74,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on page","Contrast":6.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on page","Contrast":7.46,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on page","Contrast":6.81,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on page","Contrast":6.71,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on page","Contrast":7.67,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on surface","Contrast":16.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on surface","Contrast":6.01,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on surface","Contrast":6.76,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on surface","Contrast":6.18,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on surface","Contrast":6.09,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on surface","Contrast":6.95,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on raised","Contrast":14.27,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on raised","Contrast":5.33,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on raised","Contrast":6,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on raised","Contrast":5.48,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on raised","Contrast":5.4,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on raised","Contrast":6.17,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on overlay","Contrast":17.74,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"muted on overlay","Contrast":6.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on overlay","Contrast":7.46,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on overlay","Contrast":6.81,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on overlay","Contrast":6.71,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on overlay","Contrast":7.67,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on its badge over page","Contrast":5.68,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on its badge over page","Contrast":5.61,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on its badge over page","Contrast":6.25,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on its badge over page","Contrast":6.17,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on its badge over surface","Contrast":5.18,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on its badge over surface","Contrast":5.12,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on its badge over surface","Contrast":5.7,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on its badge over surface","Contrast":5.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"success on its badge over raised","Contrast":4.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"warning on its badge over raised","Contrast":4.57,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"error on its badge over raised","Contrast":5.08,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on its badge over raised","Contrast":5.03,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"label on page","Contrast":7.6,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on the selected tint over page","Contrast":5.02,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on the selected tint over page","Contrast":11.94,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"label on surface","Contrast":6.9,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"accent_text on the selected tint over surface","Contrast":4.63,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on the selected tint over surface","Contrast":11.01,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"on_accent on accent","Contrast":5.5,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"white on destructive","Contrast":5.62,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"on_accent on accent under the pointer","Contrast":6.68,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"on_accent on accent pressed","Contrast":8.14,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"white on destructive under the pointer","Contrast":6.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"white on destructive pressed","Contrast":8.33,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on a secondary button","Contrast":16.09,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"text","What":"text on a secondary button under the pointer","Contrast":14.27,"Floor":7,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"border_strong on page","Contrast":3.86,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"accent (the focus ring) on page","Contrast":5.5,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"border_strong on raised","Contrast":3.1,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"accent (the focus ring) on raised","Contrast":4.43,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"edge","What":"page | surface","Distance":{"deutan":3.6,"deutan+ips":3.6,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.5},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"edge","What":"surface | raised","Distance":{"deutan":3.5,"deutan+ips":3.5,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.6},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"edge","What":"page | raised","Distance":{"deutan":7.1,"deutan+ips":7,"dim":6.8,"drawn":6.8,"ips":6.8,"protan":6.6,"protan+ips":6.6,"tritan":7.1},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"line","What":"border on page","Distance":{"deutan":13.1,"deutan+ips":13,"dim":12.7,"drawn":12.8,"ips":12.7,"protan":12.5,"protan+ips":12.4,"tritan":13},"Floor":6,"Worst":4,"OK":true},{"Mode":"light","Kind":"line","What":"border on raised","Distance":{"deutan":6.5,"deutan+ips":6.5,"dim":6.3,"drawn":6.4,"ips":6.4,"protan":6.3,"protan+ips":6.3,"tritan":6.4},"Floor":6,"Worst":4,"OK":true},{"Mode":"light","Kind":"state","What":"selected tint over page | page","Distance":{"deutan":13.2,"deutan+ips":13.1,"dim":13.8,"drawn":13.9,"ips":13.9,"protan":11.3,"protan+ips":11.3,"tritan":17},"Floor":10,"Worst":6,"OK":true},{"Mode":"light","Kind":"hover","What":"hover tint over page | page","Distance":{"deutan":5.1,"deutan+ips":5.1,"dim":5.6,"drawn":5.6,"ips":5.6,"protan":4.3,"protan+ips":4.3,"tritan":7.4},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"state","What":"selected tint over surface | surface","Distance":{"deutan":12.1,"deutan+ips":12.1,"dim":12.8,"drawn":12.9,"ips":12.9,"protan":10.4,"protan+ips":10.3,"tritan":15.6},"Floor":10,"Worst":6,"OK":true},{"Mode":"light","Kind":"hover","What":"hover tint over surface | surface","Distance":{"deutan":4.6,"deutan+ips":4.6,"dim":5.1,"drawn":5.2,"ips":5.1,"protan":3.9,"protan+ips":3.9,"tritan":6.6},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"hover","What":"accent under the pointer | accent","Distance":{"deutan":4.6,"deutan+ips":4.6,"dim":4.8,"drawn":4.9,"ips":4.8,"protan":5.3,"protan+ips":5.3,"tritan":5.3},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"hover","What":"destructive under the pointer | destructive","Distance":{"deutan":5.6,"deutan+ips":5.5,"dim":4.9,"drawn":5,"ips":5,"protan":3.7,"protan+ips":3.6,"tritan":5.2},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"hover","What":"secondary under the pointer | secondary","Distance":{"deutan":3.5,"deutan+ips":3.5,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.6},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"edge","What":"secondary button | page","Distance":{"deutan":3.6,"deutan+ips":3.6,"dim":3.4,"drawn":3.4,"ips":3.4,"protan":3.3,"protan+ips":3.3,"tritan":3.5},"Floor":3,"Worst":2,"OK":true},{"Mode":"light","Kind":"meaning","What":"success | error","Distance":{"deutan":10.3,"deutan+ips":10,"dim":61.3,"drawn":64.1,"ips":62.9,"protan":29.7,"protan+ips":29,"tritan":56.5},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"success | warning","Distance":{"deutan":16.1,"deutan+ips":15.6,"dim":35.2,"drawn":36.7,"ips":36.1,"protan":11.5,"protan+ips":10.8,"tritan":46.6},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"warning | error","Distance":{"deutan":24.6,"deutan+ips":24,"dim":37.8,"drawn":41.1,"ips":39.7,"protan":38.6,"protan+ips":37.4,"tritan":9.3},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"accent | success","Distance":{"deutan":32.2,"deutan+ips":31.7,"dim":33.3,"drawn":34.3,"ips":33.9,"protan":34.9,"protan+ips":34.5,"tritan":9.7},"Floor":20,"Worst":10,"OK":true},{"Mode":"light","Kind":"meaning","What":"accent | error","Distance":{"deutan":19.9,"deutan+ips":19.8,"dim":44.2,"drawn":45.6,"ips":45,"protan":16.6,"protan+ips":16.4,"tritan":61.3},"Floor":20,"Worst":10,"OK":true},{"Mode":"term","Kind":"text","What":"foreground on background","Contrast":16.34,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"foreground on black","Contrast":11.69,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"red on background","Contrast":6.81,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"green on background","Contrast":8.84,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"yellow on background","Contrast":9.86,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"blue on background","Contrast":7.3,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"magenta on background","Contrast":8.02,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"cyan on background","Contrast":9.04,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"white on background","Contrast":12.73,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_black on background","Contrast":5.47,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_red on background","Contrast":9.83,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_green on background","Contrast":12.27,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_yellow on background","Contrast":13.13,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_blue on background","Contrast":10.62,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_magenta on background","Contrast":11.41,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_cyan on background","Contrast":12.53,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"bright_white on background","Contrast":19.57,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"foreground on selection","Contrast":9.51,"Floor":7,"Worst":0,"OK":true},{"Mode":"term","Kind":"text","What":"background on cursor","Contrast":9.04,"Floor":4.5,"Worst":0,"OK":true},{"Mode":"term","Kind":"non-text","What":"cursor on background","Contrast":9.04,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 1 on page","Contrast":3.8,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 1 on page","Contrast":4.85,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 2 on page","Contrast":5.03,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 2 on page","Contrast":3.66,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"series 1 | series 2","Distance":{"deutan":61.8,"deutan+ips":61.3,"dim":47.8,"drawn":48.8,"ips":48.4,"protan":55.2,"protan+ips":54.7,"tritan":64.3},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 3 on page","Contrast":5.54,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 3 on page","Contrast":3.32,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"series 2 | series 3","Distance":{"deutan":28.6,"deutan+ips":28.3,"dim":51.6,"drawn":52.3,"ips":52,"protan":22.1,"protan+ips":21.7,"tritan":61.9},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 4 on page","Contrast":5.45,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 4 on page","Contrast":3.38,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"series 3 | series 4","Distance":{"deutan":30,"deutan+ips":29.7,"dim":37.9,"drawn":38.7,"ips":38.4,"protan":23.1,"protan+ips":22.7,"tritan":49.5},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 5 on page","Contrast":4.45,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 5 on page","Contrast":4.14,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"series 4 | series 5","Distance":{"deutan":37.7,"deutan+ips":37.3,"dim":52.5,"drawn":54.1,"ips":53.5,"protan":47.5,"protan+ips":46.9,"tritan":11.6},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 6 on page","Contrast":5.27,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 6 on page","Contrast":3.49,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"series 5 | series 6","Distance":{"deutan":32.1,"deutan+ips":31.8,"dim":72.8,"drawn":74.3,"ips":73.7,"protan":46.1,"protan+ips":45.7,"tritan":57},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 7 on page","Contrast":3.98,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 7 on page","Contrast":4.62,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"series 6 | series 7","Distance":{"deutan":53.9,"deutan+ips":53.5,"dim":54.8,"drawn":55.6,"ips":55.3,"protan":57.4,"protan+ips":57,"tritan":21.7},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"non-text","What":"series 8 on page","Contrast":4.28,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"series 8 on page","Contrast":4.3,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"series 7 | series 8","Distance":{"deutan":49.2,"deutan+ips":48.9,"dim":34.2,"drawn":34.6,"ips":34.5,"protan":38.1,"protan+ips":37.8,"tritan":43.2},"Floor":20,"Worst":10,"OK":true},{"Mode":"dark","Kind":"non-text","What":"good on page","Contrast":5.17,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"good on page","Contrast":3.56,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"warning on page","Contrast":5.02,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"warning on page","Contrast":3.67,"Floor":3,"Worst":0,"OK":true},{"Mode":"dark","Kind":"non-text","What":"critical on page","Contrast":4.52,"Floor":3,"Worst":0,"OK":true},{"Mode":"light","Kind":"non-text","What":"critical on page","Contrast":4.07,"Floor":3,"Worst":0,"OK":true},{"Mode":"chart","Kind":"meaning","What":"good | warning","Distance":{"deutan":14.3,"deutan+ips":14,"dim":35.5,"drawn":36.2,"ips":35.9,"protan":10.9,"protan+ips":10.5,"tritan":50.4},"Floor":20,"Worst":10,"OK":true},{"Mode":"chart","Kind":"meaning","What":"good | critical","Distance":{"deutan":25.5,"deutan+ips":25.2,"dim":73.7,"drawn":75.1,"ips":74.5,"protan":40.9,"protan+ips":40.6,"tritan":63.8},"Floor":20,"Worst":10,"OK":true},{"Mode":"chart","Kind":"meaning","What":"warning | critical","Distance":{"deutan":37.6,"deutan+ips":37.2,"dim":51.8,"drawn":53.6,"ips":52.9,"protan":47.7,"protan+ips":47.1,"tritan":11.3},"Floor":20,"Worst":10,"OK":true}]; diff --git a/dist/tokens.json b/dist/tokens.json index e42a788..8b57993 100644 --- a/dist/tokens.json +++ b/dist/tokens.json @@ -7,6 +7,21 @@ "mint": "#5FE3D6", "navy": "#111827" }, + "chart": { + "critical": "#D04A9E", + "good": "#2F9A5C", + "series": [ + "#2F6BE3", + "#D9622B", + "#1C9E8C", + "#B58300", + "#C94F9B", + "#4F9A3A", + "#7A5FE0", + "#D24B57" + ], + "warning": "#B07C00" + }, "controls": { "Sm": 28, "Md": 32, diff --git a/palette.toml b/palette.toml index ce6ac69..74292ba 100644 --- a/palette.toml +++ b/palette.toml @@ -88,6 +88,28 @@ bright_magenta = "#EBB2F7" bright_cyan = "#5FE3D6" bright_white = "#FFFFFF" +# Charts: the installation's Grafana dashboards, the only charts Spinbox draws. One set for both +# modes, because a dashboard is one JSON that Grafana draws in whichever theme the viewer chose, +# and a colour in it is one hex: each holds 3:1 as a line on dark's page and on light's (WCAG +# 1.4.11), which puts them all in the middle band of lightness. Series are given in this order, +# never cycled - a ninth series is folded into "other", not a generated hue - and the first is the +# mark's blue. The statuses are a threshold's steps (good, warning, critical) and are never a +# series: a value in one is always printed beside it, so the hue is never alone. +[chart] +series = [ + "#2F6BE3", # the mark's blue + "#D9622B", # orange + "#1C9E8C", # teal, the mint's hue darkened into the band + "#B58300", # ochre + "#C94F9B", # magenta + "#4F9A3A", # green + "#7A5FE0", # violet + "#D24B57", # red +] +good = "#2F9A5C" +warning = "#B07C00" +critical = "#D04A9E" # magenta-leaning, as error is: a deutan tells it from good by its blue + # The accent over a surface, for what is selected or hovered on the site (the current page in the # sidebar, a hovered link): an alpha, so one value serves every surface. The label on a tint is # accent_text. The dashboard keeps the accent for its one primary action and the focus ring: its