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