feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140

Merged
kateebonner merged 2 commits into
mainfrom
kate/light-mode-brand-yellow
Jul 15, 2026
Merged

feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom
kate/light-mode-brand-yellow

Conversation

@kateebonner

@kateebonnerkateebonner commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Why

On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.

The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.

What

Reframe the single --color-accent into three honest roles:

tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).

Testing

  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.

Follow-up

The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.

🤖 Generated with Claude Code

kateebonnerand others added 2 commits July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner mentioned this pull request Jul 15, 2026
Closed
kateebonner added a commit to harmoniqs/opencode that referenced this pull request Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner merged commit cec66de into mainJul 15, 2026
5 checks passed
This was referenced Aug 8, 2026
Closed
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140
Merged
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Jul 15, 2026
Merged
feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Conversation
@kateebonner
@kateebonnerkateebonner
commented
Jul 15, 2026

Copy link


Copy Markdown

Contributor
Why
On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.
The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.
What
Reframe the single --color-accent into three honest roles:
tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).
Testing
  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.
Follow-up
The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.
🤖 Generated with Claude Code
kateebonnerand others
added 2 commits
July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner
mentioned this pull request
Jul 15, 2026
 Closed

kateebonner added a commit
to harmoniqs/opencode
that referenced
this pull request
Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner
merged commit cec66de
into
mainJul 15, 2026

5 checks passed


This was referenced Aug 8, 2026

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140
Merged
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Jul 15, 2026
Merged
feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Conversation
@kateebonner
@kateebonnerkateebonner
commented
Jul 15, 2026

Copy link


Copy Markdown

Contributor
Why
On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.
The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.
What
Reframe the single --color-accent into three honest roles:
tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).
Testing
  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.
Follow-up
The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.
🤖 Generated with Claude Code
kateebonnerand others
added 2 commits
July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner
mentioned this pull request
Jul 15, 2026
 Closed

kateebonner added a commit
to harmoniqs/opencode
that referenced
this pull request
Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner
merged commit cec66de
into
mainJul 15, 2026

5 checks passed


This was referenced Aug 8, 2026

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140
Merged
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Jul 15, 2026
Merged
feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Conversation
@kateebonner
@kateebonnerkateebonner
commented
Jul 15, 2026

Copy link


Copy Markdown

Contributor
Why
On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.
The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.
What
Reframe the single --color-accent into three honest roles:
tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).
Testing
  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.
Follow-up
The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.
🤖 Generated with Claude Code
kateebonnerand others
added 2 commits
July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner
mentioned this pull request
Jul 15, 2026
 Closed

kateebonner added a commit
to harmoniqs/opencode
that referenced
this pull request
Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner
merged commit cec66de
into
mainJul 15, 2026

5 checks passed


This was referenced Aug 8, 2026

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140
Merged
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Jul 15, 2026
Merged
feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Conversation
@kateebonner
@kateebonnerkateebonner
commented
Jul 15, 2026

Copy link


Copy Markdown

Contributor
Why
On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.
The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.
What
Reframe the single --color-accent into three honest roles:
tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).
Testing
  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.
Follow-up
The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.
🤖 Generated with Claude Code
kateebonnerand others
added 2 commits
July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner
mentioned this pull request
Jul 15, 2026
 Closed

kateebonner added a commit
to harmoniqs/opencode
that referenced
this pull request
Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner
merged commit cec66de
into
mainJul 15, 2026

5 checks passed


This was referenced Aug 8, 2026

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140
Merged
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Jul 15, 2026
Merged
feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Conversation
@kateebonner
@kateebonnerkateebonner
commented
Jul 15, 2026

Copy link


Copy Markdown

Contributor
Why
On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.
The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.
What
Reframe the single --color-accent into three honest roles:
tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).
Testing
  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.
Follow-up
The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.
🤖 Generated with Claude Code
kateebonnerand others
added 2 commits
July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner
mentioned this pull request
Jul 15, 2026
 Closed

kateebonner added a commit
to harmoniqs/opencode
that referenced
this pull request
Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner
merged commit cec66de
into
mainJul 15, 2026

5 checks passed


This was referenced Aug 8, 2026

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140
Merged
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Jul 15, 2026
Merged
feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Conversation
@kateebonner
@kateebonnerkateebonner
commented
Jul 15, 2026

Copy link


Copy Markdown

Contributor
Why
On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.
The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.
What
Reframe the single --color-accent into three honest roles:
tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).
Testing
  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.
Follow-up
The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.
🤖 Generated with Claude Code
kateebonnerand others
added 2 commits
July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner
mentioned this pull request
Jul 15, 2026
 Closed

kateebonner added a commit
to harmoniqs/opencode
that referenced
this pull request
Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner
merged commit cec66de
into
mainJul 15, 2026

5 checks passed


This was referenced Aug 8, 2026

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(brand): light-mode yellow as a bordered fill, not a dimmed line - #140
Merged
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Jul 15, 2026
Merged
feat(brand): light-mode yellow as a bordered fill, not a dimmed line#140
kateebonner merged 2 commits into
mainfrom 
kate/light-mode-brand-yellow
Conversation
@kateebonner
@kateebonnerkateebonner
commented
Jul 15, 2026

Copy link


Copy Markdown

Contributor
Why
On dark themes the Harmoniqs lemon (#FFF676) sings (14.8:1 vs the editor bg). On light themes it's invisible (1.1:1 vs white), so the accent solver dimmed it to a muddy gold (#A09829) and used it as a line — losing the brand. The gold also fails as a border: it clears the white page (2.99:1) but not the lemon fill it bounds (2.66:1), so edges read mushy.
The fix isn't a darker yellow — it's the same yellow, given a thin dark edge with dark text on top. A border has to out-contrast two things: the page behind it and the fill it bounds. A 1px dark hairline clears both by ~15:1; a dimmed yellow can't.
What
Reframe the single --color-accent into three honest roles:
tokenlightdark
--color-accent-fill#FFF676#FFF676
--color-on-accent#000 (never yellow text)#000
--color-accent-edge1px --vscode-foreground hairlinetransparent (fill separates itself)
--color-accent-inkneutral foreground#FFF676
  • Solver (brand_accent.ts) — decides light/dark by bg luminance and emits fill/edge/ink; the OKLCH gold binary-search and --border-color-hero are retired.
  • Hero — the Run Inspector's single hero (fidelity) gets an opt-in filled-lemon flag (metric(…, { flag: true })) that appears when the value lands, replacing the washed-out border+tint. The catalog's four hero cards deliberately don't flag, so the brand moment stays singular.
  • Thin lines that can't be fills — sparkline stroke, button hover, catalog "proposed" dashed border, pulseplot focus fallback — move to ink (legible on both themes).
Testing
  • dev/brand_harness/ — new standalone page (pnpm run dev:brand) renders the real components in light/dark through the actual solver, with a live token readout. Mirrors dev/pulseplot_harness.
  • Rewrote brand_accent.test.ts: asserts the light edge clears both the page and the fill, and that dark draws no edge.
  • Fast suite: 574 passed; typecheck + prettier clean.
Follow-up
The opencode chat UI carries the identical light-mode problem in its own theme (oc-2.json light v2-text/icon-accent = gold #857A00). That's a separate PR on harmoniqs/opencode, which then re-vendors the rebuilt binary here.
🤖 Generated with Claude Code
kateebonnerand others
added 2 commits
July 15, 2026 10:47
@kateebonner@claude
feat(brand): light-mode yellow as a bordered fill, not a dimmed line
525665b
On light themes the brand lemon (#FFF676, 1.1:1 vs white) was dimmed to a
muddy gold (#A09829) and used as a line — losing the brand. The gold also
failed as a border: it cleared the white page (2.99:1) but not the lemon
fill it bounded (2.66:1), so edges read mushy.
Reframe the single --color-accent into three honest roles:
• fill — the true brand lemon on EVERY theme, dark ink on top (never yellow text)
• edge — a 1px dark hairline on light (the theme's own foreground, ~15:1 vs
both page and fill); transparent on dark (the lemon separates itself)
• ink — thin lines that can't be fills: lemon on dark, neutral fg on light
Retire the OKLCH gold binary-search and --border-color-hero. The Run
Inspector hero's brand moment becomes an opt-in filled-lemon flag (metric
flag: true) instead of a washed-out border+tint; the catalog's four hero
cards keep neutral emphasis so the flag stays singular. Migrate button
hover, sparkline stroke, catalog "proposed" border, and pulseplot focus to
the ink token.
Tests rewritten to assert the edge clears BOTH the page and the fill on
light, and that dark draws no edge. Full suite green (574 passed); typecheck
+ prettier clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner@claude
chore(dev): brand-accent harness for eyeballing light/dark treatment
7555002
A standalone browser page (mirrors dev/pulseplot_harness) that mounts the
real components — swatch, flagged/neutral hero metrics, buttons, sparkline,
catalog card — against stubbed VS Code theme vars, driven by the actual
applyBrandAccent solver. Toggle flips light/dark and shows the live
fill/edge/ink readout. Not shipped (dev/ excluded from the VSIX); built
bundle gitignored like the pulseplot harness. Run: pnpm run dev:brand
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonnerkateebonner
mentioned this pull request
Jul 15, 2026
 Closed

kateebonner added a commit
to harmoniqs/opencode
that referenced
this pull request
Jul 15, 2026
@kateebonner@claude
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gol…
bc73269
…d ink
The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for
`text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg
(1.1:1). But that made every accent text/icon/border read muddy on light and
lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140):
yellow is a FILL, never an ink.
- oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold →
neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the
"edge" role — dark on light, lemon on dark — for free.
- amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now
fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a
dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is
byte-for-byte unchanged.
oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still
upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand
accent to blue. Patch map (AMICODE-PATCHES.md #12) updated.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@kateebonner
kateebonner
merged commit cec66de
into
mainJul 15, 2026

5 checks passed


This was referenced Aug 8, 2026

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@kateebonner