/* ── intermo editor token themes ── Ported from intermo-hci intermo-codemirror/src/theme.css. Palette blocks + chip-* / measure-chrome / sep-staff / prov-* rules are VERBATIM; the note-block, expanded-measure, fill-gutter, lint, tooltip and line-number sections are dropped (their features aren't ported). A .seg-* section for the segmentation overlay is added at the end. Colour × brightness: .theme-pitch/.theme-code × .theme-dark/.theme-light, applied as classes on . Default: .theme-light.theme-pitch */ /* ── Dark × Pitch (vivid-on-dark hues) ── */ .theme-dark.theme-pitch { --pc-0: 239, 107, 115; /* C */ --pc-1: 234, 134, 104; /* C# */ --pc-2: 229, 160, 92; /* D */ --pc-3: 230, 180, 83; /* D# */ --pc-4: 232, 200, 74; /* E */ --pc-5: 126, 200, 126; /* F */ --pc-6: 111, 188, 183; /* F# */ --pc-7: 97, 175, 239; /* G */ --pc-8: 111, 164, 226; /* G# */ --pc-9: 124, 153, 212; /* A */ --pc-10: 166, 138, 194; /* A# */ --pc-11: 208, 124, 176; /* B */ --pc-neutral: 200, 200, 200; --chip-bg-a: 0.08; --chip-edge-a: 0.40; --dur: #636c76; --dur-carry: #4a525c; --rest: #636c76; --chrome-bg: #000000; --chrome-fg: #8b949e; --rewind-bg: #000000; --rewind-fg: #8b949e; --staff-label: #58a6ff; --annotation: #8b949e; --lyric: #8b949e; --error-bg: #3d1214; --error-fg: #f85149; } /* ── Dark × Code (uniform coding accents) ── */ .theme-dark.theme-code { --pc-0: 97, 175, 239; /* C */ --pc-1: 97, 175, 239; /* C# */ --pc-2: 97, 175, 239; /* D */ --pc-3: 97, 175, 239; /* D# */ --pc-4: 97, 175, 239; /* E */ --pc-5: 97, 175, 239; /* F */ --pc-6: 97, 175, 239; /* F# */ --pc-7: 97, 175, 239; /* G */ --pc-8: 97, 175, 239; /* G# */ --pc-9: 97, 175, 239; /* A */ --pc-10: 97, 175, 239; /* A# */ --pc-11: 97, 175, 239; /* B */ --pc-neutral: 200, 200, 200; --chip-bg-a: 0.06; --chip-edge-a: 0.35; --dur: #d19a66; --dur-carry: #8b7a5e; --rest: #636c76; --chrome-bg: #000000; --chrome-fg: #e06c75; --rewind-bg: #000000; --rewind-fg: #e06c75; --staff-label: #7ec87e; --annotation: #636c76; --lyric: #7ec87e; --error-bg: #3d1214; --error-fg: #f85149; } /* ── Light × Pitch (saturated hues legible on white) ── */ .theme-light.theme-pitch { --pc-0: 201, 60, 69; /* C */ --pc-1: 192, 90, 59; /* C# */ --pc-2: 184, 116, 48; /* D */ --pc-3: 161, 119, 36; /* D# */ --pc-4: 138, 122, 24; /* E */ --pc-5: 45, 138, 45; /* F */ --pc-6: 43, 127, 160; /* F# */ --pc-7: 41, 117, 196; /* G */ --pc-8: 63, 110, 182; /* G# */ --pc-9: 84, 104, 168; /* A */ --pc-10: 124, 91, 151; /* A# */ --pc-11: 164, 78, 134; /* B */ --pc-neutral: 100, 100, 100; --chip-bg-a: 0.07; --chip-edge-a: 0.30; --dur: #6e7681; --dur-carry: #8b949e; --rest: #6e7681; --chrome-bg: #f0f2f5; --chrome-fg: #57606a; --rewind-bg: #f0f2f5; --rewind-fg: #57606a; --staff-label: #0969da; --annotation: #6e7681; --lyric: #57606a; --error-bg: #ffebe9; --error-fg: #cf222e; } /* ── Light × Code (uniform blue accents on white) ── */ .theme-light.theme-code { --pc-0: 9, 105, 218; /* C */ --pc-1: 9, 105, 218; /* C# */ --pc-2: 9, 105, 218; /* D */ --pc-3: 9, 105, 218; /* D# */ --pc-4: 9, 105, 218; /* E */ --pc-5: 9, 105, 218; /* F */ --pc-6: 9, 105, 218; /* F# */ --pc-7: 9, 105, 218; /* G */ --pc-8: 9, 105, 218; /* G# */ --pc-9: 9, 105, 218; /* A */ --pc-10: 9, 105, 218; /* A# */ --pc-11: 9, 105, 218; /* B */ --pc-neutral: 100, 100, 100; --chip-bg-a: 0.06; --chip-edge-a: 0.25; --dur: #953800; --dur-carry: #b88a60; --rest: #6e7681; --chrome-bg: #f0f2f5; --chrome-fg: #cf222e; --rewind-bg: #f0f2f5; --rewind-fg: #cf222e; --staff-label: #1a7f37; --annotation: #6e7681; --lyric: #1a7f37; --error-bg: #ffebe9; --error-fg: #cf222e; } /* ── Base editor ── */ .cm-editor .cm-content { padding: 10px 6px; } .cm-editor .cm-line { line-height: 1.6; } .cm-editor.cm-focused { outline: none; } /* ── Event blocks / pitch-class chips (#193) ── TWELVE hues keyed on `midi % 12`, not seven keyed on the letter: the colour denotes the SOUNDING note, so C# and D- share one — and a `reloct` wire whose token reads a bare `E` gets the hue of the note it actually sounds. The seven ported hues keep their pitch classes; the five chromatics sit between their neighbours, so the visual language is unchanged. One rule per class instead of 48: the palette blocks above carry each hue as an "R, G, B" triple plus the theme's background/edge alphas, so dark × light × pitch × code all fall out of the same four declarations. */ .chip-event { border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; /* Unpitched (percussion) and not-yet-parsed tokens: a neutral chip, never a guessed hue. A visibly pending token beats a plausible wrong one. */ background: rgba(var(--pc-neutral), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-neutral), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-neutral), var(--chip-edge-a)); } .chip-event.chip-pc-0 { background: rgba(var(--pc-0), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-0), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-0), var(--chip-edge-a)); } .chip-event.chip-pc-1 { background: rgba(var(--pc-1), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-1), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-1), var(--chip-edge-a)); } .chip-event.chip-pc-2 { background: rgba(var(--pc-2), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-2), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-2), var(--chip-edge-a)); } .chip-event.chip-pc-3 { background: rgba(var(--pc-3), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-3), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-3), var(--chip-edge-a)); } .chip-event.chip-pc-4 { background: rgba(var(--pc-4), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-4), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-4), var(--chip-edge-a)); } .chip-event.chip-pc-5 { background: rgba(var(--pc-5), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-5), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-5), var(--chip-edge-a)); } .chip-event.chip-pc-6 { background: rgba(var(--pc-6), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-6), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-6), var(--chip-edge-a)); } .chip-event.chip-pc-7 { background: rgba(var(--pc-7), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-7), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-7), var(--chip-edge-a)); } .chip-event.chip-pc-8 { background: rgba(var(--pc-8), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-8), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-8), var(--chip-edge-a)); } .chip-event.chip-pc-9 { background: rgba(var(--pc-9), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-9), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-9), var(--chip-edge-a)); } .chip-event.chip-pc-10 { background: rgba(var(--pc-10), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-10), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-10), var(--chip-edge-a)); } .chip-event.chip-pc-11 { background: rgba(var(--pc-11), var(--chip-bg-a)); box-shadow: 1px 0 0 rgba(var(--pc-11), var(--chip-edge-a)), -1px 0 0 rgba(var(--pc-11), var(--chip-edge-a)); } /* ── Measure chrome (barline/rewind column) ── */ .measure-chrome { background: var(--chrome-bg); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .chrome-anchor { color: var(--chrome-fg) !important; font-weight: 700; background: var(--chrome-bg); box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* ── Pitch tokens (!important needed to override CM6's scoped highlight styles) ── Painted on the SEMANTIC channel's note sub-spans, so a chord colours each member and an unpitched note simply gets no rule at all. */ .chip-pc-0 { color: rgb(var(--pc-0)) !important; } .chip-pc-1 { color: rgb(var(--pc-1)) !important; } .chip-pc-2 { color: rgb(var(--pc-2)) !important; } .chip-pc-3 { color: rgb(var(--pc-3)) !important; } .chip-pc-4 { color: rgb(var(--pc-4)) !important; } .chip-pc-5 { color: rgb(var(--pc-5)) !important; } .chip-pc-6 { color: rgb(var(--pc-6)) !important; } .chip-pc-7 { color: rgb(var(--pc-7)) !important; } .chip-pc-8 { color: rgb(var(--pc-8)) !important; } .chip-pc-9 { color: rgb(var(--pc-9)) !important; } .chip-pc-10 { color: rgb(var(--pc-10)) !important; } .chip-pc-11 { color: rgb(var(--pc-11)) !important; } .theme-dark .chip-pending { outline: 1px dashed rgba(255, 255, 255, 0.25); } .theme-light .chip-pending { outline: 1px dashed rgba(0, 0, 0, 0.20); } /* ── Duration tails (gray, no background) ── */ .chip-tail-gray { color: var(--dur) !important; } .chip-tail-carry { color: var(--dur-carry) !important; } /* ── Rests (dim, no background) ── */ .chip-invisible-rest { color: var(--rest) !important; opacity: 0.5; font-style: italic; } .chip-rest { color: var(--rest) !important; } /* ── Staff labels ── */ .sep-staff { color: var(--staff-label) !important; } /* ── Note decorations (articulations, fingerings — softer than pitch) ── */ .chip-decoration { color: var(--dur) !important; opacity: 0.7; } /* ── Annotations & lyrics (quiet, structural) ── */ .chip-annotation { color: var(--annotation) !important; } .chip-lyric { color: var(--lyric) !important; font-style: italic; } /* Instrument / staff names in the pitch view — neutral (default ink) + italic so the pitch hues carry the color and names stay in the background. */ .chip-instrument { color: inherit !important; font-style: italic; } /* ── Comments / section headings (# lines) ── */ .chip-comment { color: var(--annotation) !important; font-style: italic; } /* Timestamp riding its host token (`C5<|26.68|>`) — legible but recessive. */ .chip-stamp { color: var(--dur-carry) !important; opacity: 0.65; font-size: 0.85em; } /* ── Function (role) coloring — the linter-style view ────────────────────── One consistent color per musical FUNCTION (not per pitch). Distinct hues, text-only (no backgrounds), readable on the light editor. */ .fn-downbeat { color: #8250df !important; font-weight: 600; } /* barline / downbeat */ .fn-beat { color: #6e7681 !important; } /* * beat marker */ .fn-onset { color: #1a7f37 !important; } /* note onset (uppercase) */ .fn-offset { color: #0e7490 !important; } /* note offset (lowercase) */ .fn-instrument { color: inherit !important; font-style: italic; }/* instrument / staff names (Drum:) */ .fn-staff { color: #0969da !important; } /* staff marks (&mf, &>) */ .fn-context { color: #24292f !important; } /* other UpperName context */ .fn-conductor { color: #bc4c00 !important; } /* @conductor text */ .fn-interval { color: #953800 !important; } /* metric interval /4 */ .fn-interval-offset { color: #bf3989 !important; } /* interval + offsets /4, */ .fn-rest { color: #8b949e !important; font-style: italic; }/* rests */ .fn-comment { color: #6e7681 !important; font-style: italic; }/* # comments */ .fn-meta { color: #8b949e !important; } /* <|...|> fenced meta */ /* ── Errors ── */ .chip-error { background: var(--error-bg); color: var(--error-fg) !important; text-decoration: underline wavy var(--error-fg); } /* ── Provenance (dim inferred/inherited values) ── */ .prov-inferred { opacity: 0.5; font-weight: 400; } .prov-inherited { opacity: 0.6; font-weight: 400; } /* ── Segmentation overlay (pluggable tokenizer boundaries + alternating tint) ── When a segmentation provider is active the editor DOM gets .seg-active, which suppresses the coloring chip backgrounds so the tint reads cleanly. */ .cm-editor.seg-active .chip-event { background: none !important; box-shadow: none !important; } .seg-tint-a { background: rgba(97, 175, 239, 0.08); } .seg-tint-b { background: rgba(229, 160, 92, 0.08); } /* Every moment gets the same weight — a prominent 2px gray rule. */ .seg-boundary { border-left: 2px solid rgba(110, 118, 129, 0.75); } /* ── Playback highlight (now-playing token, master-clock driven) ── A warm wash + underline, echoing the score glow. Its own channel, painted over coloring/segmentation; readable in both brightnesses. */ .play-highlight { background: rgba(255, 196, 0, 0.28); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.5); } .theme-light .play-highlight { background: rgba(255, 176, 0, 0.35); box-shadow: 0 0 0 1px rgba(230, 150, 0, 0.55); }