Adopt the research map's region colours, and pin the one unit that wasn't px
THE DRIVER RULED ON THE PALETTE. He compared the two screens himself: "when i
look on teh color ffor th regiosn tab of the simpel research map i don tsee the
you using htes colors on the reigosn dashbarod hwen you shoudl". Two surfaces
disagreeing about what Africa's colour means is a defect whichever palette is
prettier, and he chose which one wins. library/colors/wagf-region.js now
carries doxa-research-map/src/colors/doxa-region.js's values.
The blast radius turned out to be nil, and my earlier escalation overstated it:
wagf-region.js is imported by exactly two files, both mine. I had reported it as
needing a cross-agent decision on the grounds that seven surfaces would be
repainted. They would not have been — nobody else imports it.
WHAT THE CHANGE COST, measured with the same validator and surface the previous
palette was stepped against:
lightness band FAIL #1ee05f .793 · #FFEB3B .928 · #00e0bd .810 sit
above the .43–.77 band
chroma floor PASS all 7 >= .1
CVD separation PASS worst adjacent #FFEB3B/#1ee05f dE 8.7 protan
normal vision PASS worst adjacent dE 21.0
contrast WARN under 3:1 vs surface: #1ee05f 1.72 · #FFEB3B 1.19
· #00e0bd 1.65 · #ff7f11 2.47
The palette this replaced passed all five. The contrast warning is survivable
here for a reason and not by dismissal: it obligates relief through a secondary
encoding, and both surfaces already carry one — the chooser renders a legend of
labelled chips in these colours, the dashboard renders the same seven as a
table. Identity never rests on hue alone. The lightness failure has no such
relief: three of these read faintly as pins on a light basemap. Darkening those
three by about 10% L would enter the band with the hue still recognisable, and
that is the Driver's call, so it is asked rather than done quietly.
_chk-region-palette-agrees.mjs is what stops the two drifting apart again. It
compares them value by value and names both files on a disagreement. Ours is
imported; theirs is parsed, because doxa-region.js imports a Vite alias and node
refuses the module — so the parse asserts its own shape first, requiring the
eight entries that file declares, and fails rather than comparing against an
empty object if anyone refactors it to computed values. Negative-tested: flip
one hex and it names that region and both paths.
AND ONE UNIT IN THIS PORT WAS NOT PX. The chevron's gap was a literal 1rem,
ported from their `.with-icon .icon.right { margin-inline-start: 1rem }` — 10px
at their 10px root. `rem` resolves against the document root wherever the
element lives, which is the whole reason dxlife-tokens.js resolves their scale
to px, so ours rendered 16px on our own leaf and would render 10px by accident
on a host with the common 62.5% reset. Pinned to 10px. No diff caught it: the
list diff's link spec reads colour, decoration, weight, display and alignItems,
and never a margin. It reads the icon's margin now.
This commit is contained in:
parent
1257ab575b
commit
fac00c00bf
8 changed files with 69 additions and 20 deletions
|
|
@ -1,6 +1,32 @@
|
|||
/**
|
||||
* WAGF region color strategy — colors pins by the region they belong to.
|
||||
*
|
||||
* ★ THE VALUES ARE THE RESEARCH MAP'S, ON THE DRIVER'S INSTRUCTION (2026-09-24). He compared the
|
||||
* two surfaces himself: "when i look on teh color ffor th regiosn tab of the simpel research map i
|
||||
* don tsee the you using htes colors on the reigosn dashbarod hwen you shoudl". Two surfaces
|
||||
* disagreeing about what Africa's colour means is a product defect whichever palette is prettier,
|
||||
* and he chose which one wins. Source of truth:
|
||||
* plugin-designs/doxa-research-map/src/colors/doxa-region.js, which the research dashboard and
|
||||
* three other consumers already paint from.
|
||||
*
|
||||
* WHAT THE CHANGE COST, measured rather than glossed (dataviz validate_palette.js, light mode,
|
||||
* surface #fcfcfb — the same tool and surface the previous palette was stepped against):
|
||||
* Lightness band FAIL #1ee05f 0.793 · #FFEB3B 0.928 · #00e0bd 0.810 sit above the 0.43–0.77 band
|
||||
* Chroma floor PASS all 7 >= 0.1
|
||||
* CVD separation PASS worst adjacent #FFEB3B<->#1ee05f dE 8.7 protan (>= 8), tritan 14.7
|
||||
* Normal vision PASS worst adjacent dE 21.0
|
||||
* Contrast WARN under 3:1 vs the surface: #1ee05f 1.72 · #FFEB3B 1.19 · #00e0bd 1.65 · #ff7f11 2.47
|
||||
* The palette this replaced passed all five. So the trade is real and it is recorded here rather
|
||||
* than in a commit message nobody will read next year.
|
||||
*
|
||||
* WHY THE CONTRAST WARN IS SURVIVABLE HERE, and it is a reason, not a dismissal: that check
|
||||
* obligates relief through a secondary encoding, and both surfaces already carry one — the chooser
|
||||
* renders a LEGEND of labelled chips in these exact colours, and the dashboard renders the same
|
||||
* seven regions as a TABLE with names and figures. Identity never rests on hue alone on either.
|
||||
* The LIGHTNESS FAIL is the part with no relief: three of these read faintly as PINS on a light
|
||||
* basemap. Darkening those three by ~10% L would enter the band while keeping the hue
|
||||
* recognisable, and that is the Driver's call to make, not mine to make quietly — asked, not done.
|
||||
*
|
||||
* WHY THIS EXISTS. The regions element's no-selection state is a CHOOSER: the Driver's brief was
|
||||
* "some type of map that would show the regions and countries and let you select one". For the
|
||||
* seven regions to read AS regions the moment the map loads, the pins have to be colored by
|
||||
|
|
@ -37,7 +63,13 @@
|
|||
|
||||
export const PROPERTY_KEY = 'region'
|
||||
|
||||
const DEFAULT_COLOR = '#6d766e' // DX-life --color-brand-lighter: an unknown region reads as chrome
|
||||
// DX-life --color-brand-lighter: an unknown region reads as chrome, not as an eighth region.
|
||||
// ★ DELIBERATELY NOT THEIRS. doxa-region.js uses '#0098FF' for null/undefined and keys
|
||||
// 'No WAGF Region/Bloc' to '#1a1a2e'. Neither is a REGION colour — they are what an absent value
|
||||
// looks like — and the Driver's instruction was about the seven regions. A bright blue for
|
||||
// "unknown" would also read as a region on a map whose every other pin is a region. Every row in
|
||||
// this feed carries a wagf_region, so this value is almost never painted; it is chrome on purpose.
|
||||
const DEFAULT_COLOR = '#6d766e'
|
||||
|
||||
/** Region value → display label, as the prayer API labels them. Used by the legend. */
|
||||
export const WAGF_REGIONS = {
|
||||
|
|
@ -50,15 +82,22 @@ export const WAGF_REGIONS = {
|
|||
'oceania': 'Oceania',
|
||||
}
|
||||
|
||||
/** Region value → color, in the validated order. Do not reorder without re-running the validator. */
|
||||
/**
|
||||
* Region value → color. THE RESEARCH MAP'S VALUES, so the two surfaces agree — see the header.
|
||||
* Mapped from its label-keyed table: Africa #ff2e2e, Asia #1a8cff, Europe #1ee05f,
|
||||
* Latin America & Caribbean #FFEB3B, Middle East #a83dff,
|
||||
* North America & Non-Spanish Caribbean #00e0bd, Oceania #ff7f11.
|
||||
* The order is still the fixed alphabetical one (colour follows the entity, never its rank), which
|
||||
* is also the order the adjacent-pair CVD result in the header was measured in.
|
||||
*/
|
||||
export const PALETTE = {
|
||||
'africa': '#2563eb',
|
||||
'asia': '#d97706',
|
||||
'europe': '#7c3aed',
|
||||
'latin_america_&_caribbean': '#15803d',
|
||||
'middle_east': '#dc2626',
|
||||
'north_america_&_non-spanish_caribbean': '#0891b2',
|
||||
'oceania': '#be185d',
|
||||
'africa': '#ff2e2e',
|
||||
'asia': '#1a8cff',
|
||||
'europe': '#1ee05f',
|
||||
'latin_america_&_caribbean': '#FFEB3B',
|
||||
'middle_east': '#a83dff',
|
||||
'north_america_&_non-spanish_caribbean': '#00e0bd',
|
||||
'oceania': '#ff7f11',
|
||||
}
|
||||
|
||||
/** The fixed render order — the same order the palette was validated in. */
|
||||
|
|
|
|||
|
|
@ -413,8 +413,18 @@ useShadowStyles(
|
|||
// not a text glyph. Ported verbatim (fill:currentColor tracks the surrounding text colour,
|
||||
// same as their `.icon{ fill:currentColor }` utility) and rotated 90deg to point right, same
|
||||
// as their `rotate-90` class. getComputedStyle measured it at 33.38px square on the live page.
|
||||
// ★ 1rem WAS THE ONE UNIT IN THIS PORT THAT INHERITS THE HOST PAGE'S ROOT, and it was wrong on
|
||||
// our own leaf, not only in an embed. `rem` resolves against the DOCUMENT root wherever the
|
||||
// element lives — which is the whole reason dxlife-tokens.js resolves their scale to px — and
|
||||
// their root is 10px (html{font-size: var(--font-size-base)}, $font-size-base: 10px). Ours
|
||||
// inherits whatever the host sets: 16px by default, so this gap rendered 16px against their
|
||||
// 10px, and on a host with the common html{font-size:62.5%} reset it would render 10px by
|
||||
// accident. Pinned to the value their root produces, like every other token here.
|
||||
// No diff caught it: the list diff's `link` spec reads colour, decoration, weight, display and
|
||||
// alignItems — no margin — so the icon's own spacing was never a measured property. It is now.
|
||||
// (Credit where due: the class of bug came to me as a flock relay from another agent's sweep.)
|
||||
'.region-card__icon{ width:0.7em; height:0.7em; flex:none; fill:currentColor; transform:rotate(90deg);' +
|
||||
' margin-inline-start:1rem; }' +
|
||||
' margin-inline-start:10px; }' +
|
||||
// .region-card__summary: --font-size-md (var(--font-size-md)), 0.85 opacity, on the header band.
|
||||
'.region-card__summary{ font-size:var(--font-size-md); opacity:0.85; margin:0; }' +
|
||||
// .region-card__body: padding --spacing-lg / clamp(...) / --spacing-xl -> var(--spacing-lg) / clamp / var(--spacing-xl)
|
||||
|
|
|
|||
2
public/doxa-maps/index.html
generated
2
public/doxa-maps/index.html
generated
File diff suppressed because one or more lines are too long
8
public/doxa-maps/manifest.json
generated
8
public/doxa-maps/manifest.json
generated
|
|
@ -879,7 +879,7 @@
|
|||
"bundle": "regions-dashboard",
|
||||
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
|
||||
"output": "doxa-maps/regions-dashboard/regions-dashboard.js",
|
||||
"integrity": "sha384-3bh/fwBIk9Wn7vXpXEvbyjRLeR6VpGzcjosbsJYWx175LciG/3aTO1rwImc/Jlw+",
|
||||
"integrity": "sha384-RROi/svcB/vhqo1W8SwZCYhJbi2HbGft9lGxxJQ4UAYjNzrbHKjSzJ6MmS7imr6o",
|
||||
"elements": [
|
||||
"regions-dashboard"
|
||||
],
|
||||
|
|
@ -899,7 +899,7 @@
|
|||
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./regions-dashboard/region-dashboards/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-3bh/fwBIk9Wn7vXpXEvbyjRLeR6VpGzcjosbsJYWx175LciG/3aTO1rwImc/Jlw+\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-RROi/svcB/vhqo1W8SwZCYhJbi2HbGft9lGxxJQ4UAYjNzrbHKjSzJ6MmS7imr6o\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -913,7 +913,7 @@
|
|||
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./regions-dashboard/regions-list/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-3bh/fwBIk9Wn7vXpXEvbyjRLeR6VpGzcjosbsJYWx175LciG/3aTO1rwImc/Jlw+\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-RROi/svcB/vhqo1W8SwZCYhJbi2HbGft9lGxxJQ4UAYjNzrbHKjSzJ6MmS7imr6o\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -927,7 +927,7 @@
|
|||
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./regions-dashboard/regions-mfe/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-3bh/fwBIk9Wn7vXpXEvbyjRLeR6VpGzcjosbsJYWx175LciG/3aTO1rwImc/Jlw+\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-RROi/svcB/vhqo1W8SwZCYhJbi2HbGft9lGxxJQ4UAYjNzrbHKjSzJ6MmS7imr6o\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
|
||||
<script src="../regions-dashboard.js" integrity="sha384-3bh/fwBIk9Wn7vXpXEvbyjRLeR6VpGzcjosbsJYWx175LciG/3aTO1rwImc/Jlw+" crossorigin="anonymous"></script>
|
||||
<script src="../regions-dashboard.js" integrity="sha384-RROi/svcB/vhqo1W8SwZCYhJbi2HbGft9lGxxJQ4UAYjNzrbHKjSzJ6MmS7imr6o" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
|
||||
<script src="../regions-dashboard.js" integrity="sha384-3bh/fwBIk9Wn7vXpXEvbyjRLeR6VpGzcjosbsJYWx175LciG/3aTO1rwImc/Jlw+" crossorigin="anonymous"></script>
|
||||
<script src="../regions-dashboard.js" integrity="sha384-RROi/svcB/vhqo1W8SwZCYhJbi2HbGft9lGxxJQ4UAYjNzrbHKjSzJ6MmS7imr6o" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
|
||||
<script src="../regions-dashboard.js" integrity="sha384-3bh/fwBIk9Wn7vXpXEvbyjRLeR6VpGzcjosbsJYWx175LciG/3aTO1rwImc/Jlw+" crossorigin="anonymous"></script>
|
||||
<script src="../regions-dashboard.js" integrity="sha384-RROi/svcB/vhqo1W8SwZCYhJbi2HbGft9lGxxJQ4UAYjNzrbHKjSzJ6MmS7imr6o" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
Loading…
Reference in a new issue