bvandeusenandClaude Opus 5.5
fdee77eaec
release / web (push) Successful in 1m22s
release / govulncheck (push) Successful in 38s
release / go (push) Successful in 1m48s
release / integration (push) Successful in 5m1s
release / android (push) Successful in 5m41s
release / Build signed APK (releases and dev) (push) Successful in 5m11s
release / Attach APK to the Release (tag releases only) (push) Skipped
release / Build + push container image (push) Successful in 1m17s
release / Verify release artifacts (tag releases only) (push) Skipped
A hue painted as text on a color-mix tint of itself sits close to the surface under it. On Minstrel's surfaces the raw accent on its 15% tint measures 1.97:1 at worst (dark mode, hover surface), against AA's 4.5. - tokens.json gains colors.fg: the five FabledSword -fg formulas (accent 45%, success 45%, warning, error and info 50%), each mixed toward parchment so one declaration serves both modes. Success is Minstrel's moss. tokens-to-css emits them in :root. - Tailwind exposes them as text-accent-fg, text-warning-fg, text-error-fg and text-info-fg. - 23 sites swapped: 14 Tailwind class strings (PlayerBar and the admin count pills) and 9 CSS rules (StatusPill's four tones and five accent chips). Worst case after: accent-fg 5.03, error-fg 4.75, warning-fg 4.92, success-fg 4.85. - scripts/check-tint-contrast.js finds the pair in either spelling. Its test scans src in the web Vitest lane and fails on any new site, with fixture cases showing it can fail. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
54 lines
2.0 KiB
JavaScript
54 lines
2.0 KiB
JavaScript
import { describe, expect, test } from 'vitest';
|
|
import { emit } from './tokens-to-css.js';
|
|
|
|
const sample = {
|
|
colors: {
|
|
dark: { obsidian: '#000', parchment: '#FFF' },
|
|
light: { obsidian: '#FFF', parchment: '#000' },
|
|
flat: { accent: '#4A6B5C', 'on-action': '#E8E4D8' },
|
|
fg: { 'accent-fg': 'color-mix(in srgb, var(--fs-accent) 45%, var(--fs-parchment))' }
|
|
},
|
|
radii: { sm: '4px' },
|
|
fontStacks: {
|
|
display: "'Fraunces', serif",
|
|
body: "'Inter', sans-serif",
|
|
mono: "'JetBrains Mono', monospace"
|
|
}
|
|
};
|
|
|
|
describe('tokens-to-css emit()', () => {
|
|
test('emits :root block with dark and flat tokens', () => {
|
|
const css = emit(sample);
|
|
expect(css).toMatch(/:root \{[\s\S]*--fs-obsidian: #000;[\s\S]*--fs-parchment: #FFF;[\s\S]*--fs-accent: #4A6B5C;[\s\S]*--fs-on-action: #E8E4D8;[\s\S]*\}/);
|
|
});
|
|
|
|
test('emits [data-theme="light"] block with light tokens only', () => {
|
|
const css = emit(sample);
|
|
expect(css).toMatch(/\[data-theme="light"\] \{[\s\S]*--fs-obsidian: #FFF;[\s\S]*--fs-parchment: #000;[\s\S]*\}/);
|
|
});
|
|
|
|
test('flat tokens are not duplicated into the light block', () => {
|
|
const css = emit(sample);
|
|
const match = css.match(/\[data-theme="light"\] \{([\s\S]*?)\}/);
|
|
expect(match).not.toBeNull();
|
|
const lightBlock = match[1];
|
|
expect(lightBlock).not.toContain('--fs-accent');
|
|
expect(lightBlock).not.toContain('--fs-on-action');
|
|
});
|
|
|
|
test('preserves radii and font stacks in :root', () => {
|
|
const css = emit(sample);
|
|
expect(css).toContain('--fs-radius-sm: 4px;');
|
|
expect(css).toContain("--fs-font-display: 'Fraunces', serif;");
|
|
});
|
|
|
|
test('emits the -fg tokens in :root, not the light block', () => {
|
|
const css = emit(sample);
|
|
const root = css.match(/:root \{([\s\S]*?)\}/);
|
|
expect(root).not.toBeNull();
|
|
expect(root[1]).toContain('--fs-accent-fg: color-mix(in srgb, var(--fs-accent) 45%, var(--fs-parchment));');
|
|
const light = css.match(/\[data-theme="light"\] \{([\s\S]*?)\}/);
|
|
expect(light[1]).not.toContain('-fg');
|
|
});
|
|
});
|