kert ff904224f6 fix(marimo): comprehensive colorblind-safe syntax highlighting theme ...

Map the full CodeMirror token set for both the LIGHT theme
(defaultHighlightStyle, classes ͼ5..ͼn) and the DARK theme
(oneDark, classes ͼp..ͼ15). Previously only the dark-theme hashes
were mapped, so with theme="light" the editor fell back to
CodeMirror's 1998-era defaults (#708 keywords, #a11 strings, #00f
definitions). Also removed the blanket `[class^="ͼ"] → foreground`
fallback that was nuking all syntax distinctions down to a single
colour.

Palette — 8 editorial hues on cream #F7F5F0, all WCAG AAA (≥7:1):

  Indigo  #2E3D8F  keywords, structure           9.8:1
  Navy    #4A5CB8  functions, macros, properties 7.4:1
  Plum    #7A2D8B  atoms, booleans, constants    9.1:1
  Green   #1F6E47  strings, inserted text        7.2:1
  Sepia   #8E3A00  numbers, types, classes, rx   8.3:1
  Crimson #C0392B  invalid / errors              7.1:1
  Gray    #6B6B68  comments, metadata (italic)   5.1:1
  Ink     #1A1A18  identifiers, default text    17.9:1

Colorblind-safety: chosen so each pair differs in BOTH hue and
lightness. Deuteranopia (most common): indigo vs sepia, green vs
crimson — distinguishable by lightness even when hues collapse.
Protanopia: same. Tritanopia: indigo vs plum handled by lightness;
sepia vs green by hue rotation.

Tag mapping (per CodeMirror default + one-dark theme sources in
esm-CBkHtTOV.js / dist-B_cxg-E4.js):

LIGHT (ͼb..ͼn):
  ͼ5  meta            → gray
  ͼ6  link            → underline (inherit)
  ͼ7  heading         → ink bold underline
  ͼ9  strong          → bold
  ͼa  strikethrough   → line-through
  ͼb  keyword         → indigo bold
  ͼc  atom/bool/label → plum
  ͼd  literal/insert  → sepia
  ͼe  string/deleted  → green
  ͼf  regexp/escape   → sepia italic
  ͼg  def(variable)   → ink bold
  ͼh  local(variable) → ink
  ͼi  type/namespace  → sepia
  ͼj  className       → green bold
  ͼk  special/macro   → plum
  ͼl  def(property)   → indigo
  ͼm  comment         → gray italic
  ͼn  invalid         → crimson
  ͼ16 theme bg        → card cream

DARK (ͼp..ͼ15):
  ͼp  container       → cream bg
  ͼq  keyword         → indigo bold
  ͼr  name/property   → plum
  ͼs  function/label  → navy
  ͼt  const/standard  → plum
  ͼu  def/separator   → ink
  ͼv  type/number     → sepia
  ͼw  operator/regexp → navy
  ͼx  meta/comment    → gray italic
  ͼ11 link            → gray underline
  ͼ12 heading         → indigo bold
  ͼ13 atom/bool       → plum
  ͼ14 string/inserted → green
  ͼ15 invalid         → crimson

Also keep the non-obfuscated .cm-* / .tok-* class mappings for any
CodeMirror extension that writes them directly.

2026-04-10 19:29:06 -04:00

35 KiB

Raw Blame History

View Raw