feat(accent): custom accent themes links, text selection, and focus rings
The accent previously only overrode the folds Primary.* family; links kept the hardcoded --tc-link blue, ::selection was browser-default, and focus rings were neutral grey (Other.FocusRing). Now all three derive from the chosen base color: - --tc-link → accent hex (messages, topics, URL previews) - ::selection via an injected <style id="lotus-accent-style"> (accent bg + WCAG-contrasting text) - Other.FocusRing → rgba(accent, 0.5) Deliberately NOT recolored: Secondary.* (doubles as the neutral text/button/ badge palette), Success.* + mention pills (semantic mention/notification green), scrollbar thumbs (folds styles them per-component; a global rule would only half-apply). removeCustomAccent() clears everything — no residue when switching off or to the TDS theme. +2 unit tests (561 total). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,8 @@ import {
|
||||
contrastingText,
|
||||
varNameFromToken,
|
||||
derivePrimaryPalette,
|
||||
deriveAccentExtras,
|
||||
buildAccentCss,
|
||||
} from './accentColor';
|
||||
|
||||
test('hexToRgb parses 6-digit hex (with/without #, trimmed)', () => {
|
||||
@@ -66,3 +68,22 @@ test('derivePrimaryPalette produces the full Primary token set', () => {
|
||||
assert.match(palette.MainHover, /^#[0-9a-f]{6}$/);
|
||||
assert.match(palette.MainActive, /^#[0-9a-f]{6}$/);
|
||||
});
|
||||
|
||||
test('deriveAccentExtras derives focus ring, link and selection from one base', () => {
|
||||
const base = { r: 255, g: 136, b: 0 };
|
||||
const extras = deriveAccentExtras(base);
|
||||
// focus ring keeps the translucent character in the accent hue
|
||||
assert.equal(extras.focusRing, 'rgba(255, 136, 0, 0.5)');
|
||||
// link + selection background are the solid base hex
|
||||
assert.equal(extras.link, '#ff8800');
|
||||
assert.equal(extras.selectionBg, '#ff8800');
|
||||
// selection text is WCAG-aware contrasting text over the base
|
||||
assert.equal(extras.selectionText, contrastingText(base));
|
||||
});
|
||||
|
||||
test('buildAccentCss emits selection rules using the derived palette', () => {
|
||||
const base = { r: 0, g: 0, b: 0 };
|
||||
const css = buildAccentCss(base);
|
||||
assert.match(css, /::selection\{background:#000000;color:#fff;\}/);
|
||||
assert.match(css, /::-moz-selection\{background:#000000;color:#fff;\}/);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user