Skip to content

CVD-safe default categorical palette #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FarhanAliRaza wants to merge 1 commit into
base: main
Choose a base branch
from
+28 −20
Open

CVD-safe default categorical palette #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions examples/reflex/reflex_xy_app/reflex_xy_app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
}

CUSTOM_CHROME_SEGMENTS = [
{"label": "Enterprise", "color": "#4c78a8"},
{"label": "Growth", "color": "#f58518"},
{"label": "Self serve", "color": "#54a24b"},
{"label": "Enterprise", "color": "#3987e5"},
{"label": "Growth", "color": "#008300"},
{"label": "Self serve", "color": "#d55181"},
]

ANNOTATED_HEATMAP_MARKERS = [
Expand Down Expand Up @@ -247,9 +247,9 @@
def my_legend():
return rx.box(
rx.text("Segment"),
rx.hstack(rx.box(background="#4c78a8"), rx.text("Enterprise")),
rx.hstack(rx.box(background="#f58518"), rx.text("Growth")),
rx.hstack(rx.box(background="#54a24b"), rx.text("Self serve")),
rx.hstack(rx.box(background="#3987e5"), rx.text("Enterprise")),
rx.hstack(rx.box(background="#008300"), rx.text("Growth")),
rx.hstack(rx.box(background="#d55181"), rx.text("Self serve")),
)

def my_tooltip():
Expand Down
30 changes: 19 additions & 11 deletions python/xy/config.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,26 @@
DENSITY_SAMPLE_TARGET = 8_192
DENSITY_SAMPLE_SEED = 0

# CVD-safe default categorical palette (§20/§36 default theme).
# CVD-safe default categorical palette (§20/§36 default theme). Eight slots in
# a fixed order; charts render on unknown host surfaces, so every step sits in
# the OKLCH lightness band both light and dark modes share (L 0.48–0.67) and is
# validated against both reference surfaces (#fcfcfb / #1a1a19) with
# .claude/skills/xy-dataviz/scripts/validate_palette.py: chroma ≥ 0.10, worst
# adjacent-pair CVD ΔE 8.5 (Machado–Oliveira–Fernandes protan/deutan, ≥8
# target), worst adjacent normal-vision ΔE 19.1 (≥15 floor), all slots ≥3:1 on
# both surfaces. The ORDER is the CVD-safety mechanism — adjacency drives the
# ΔE gate — so never re-order or extend without re-running the validator.
# (Replaced Tableau10, whose adjacent red/green collapsed to ΔE 1.2 under
# deuteranopia and whose slots 1/5/7/9/10 sat below the chroma floor.)
DEFAULT_PALETTE = [
"#4c78a8",
"#f58518",
"#54a24b",
"#e45756",
"#72b7b2",
"#eeca3b",
"#b279a2",
"#ff9da6",
"#9d755d",
"#bab0ac",
"#3987e5", # blue
"#008300", # green
"#d55181", # magenta
"#c48300", # amber
"#199e70", # aqua
"#d95926", # orange
"#9085e9", # violet
"#e66767", # red
]

# Tile pyramid (§5 Tier 3): built lazily per density trace at/above this size;
Expand Down
6 changes: 3 additions & 3 deletions scripts/visual_regression_smoke.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -780,9 +780,9 @@ def _write_chrome_shell(
<iframe id="custom-chrome-frame" src="{chart_uri}" title="Custom chrome chart"></iframe>
<aside id="custom-chrome-legend" class="custom-chrome-legend">
<strong>Segment</strong>
<span><i style="background:#4c78a8"></i> Enterprise</span>
<span><i style="background:#f58518"></i> Growth</span>
<span><i style="background:#54a24b"></i> Self serve</span>
<span><i style="background:#3987e5"></i> Enterprise</span>
<span><i style="background:#008300"></i> Growth</span>
<span><i style="background:#d55181"></i> Self serve</span>
</aside>
<div id="custom-chrome-tooltip" class="custom-chrome-tooltip">
<strong id="custom-chrome-tooltip-title">Growth</strong>
Expand Down
Loading