Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions frontend/src/v2/__tests__/signalTokens.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,30 @@ describe('D223 Signal tokens in v2.css', () => {
expect(valueIn(light, 'v2-shadow')).toBe('none');
expect(valueIn(light, 'v2-shadow-lg')).toBe('none');
});

// CSS comments don't nest: the first `*/` ends one. A comment that quotes a
// glob like `--v2-radius-*/--v2-shadow-*` ends early, and the browser then
// throws away its tail and everything up to the next `;`, which takes the
// declaration after it too. The raw text still reads right, so the pins
// above can't see it: light --v2-ink-2 was empty in Chromium this way.
const asCssReadsIt = (text: string): string => text.replace(/\/\*[\s\S]*?\*\//g, ' ');

test('no comment in v2.css ends early', () => {
expect(asCssReadsIt(css)).not.toContain('*/');
});

test('each Signal token opens its own declaration in every set', () => {
const swallowed: string[] = [];
for (const [label, block] of [['light', light], ['dark', dark], ['media', media]] as const) {
const read = asCssReadsIt(block);
for (const name of Object.keys(ARTBOARD)) {
const at = read.indexOf(`--${name}:`);
const before = read.slice(0, at).trimEnd().slice(-1);
if (at === -1 || !/[;{]/.test(before)) swallowed.push(`${label} --${name}`);
}
}
expect(swallowed).toEqual([]);
});
});

// TASK-681: three surfaces were hard-coded to light values and vanished in dark.
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/v2/v2.css
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ body.modern-ui.v2-canvas {
--v2-radius-pill: 999px;

/* D223 Signal primitives (TASK-730), from the d215 artboard :root. Additive:
the old --v2-radius-*/--v2-shadow-* values above stay until PR2 moves
the old --v2-radius and --v2-shadow values above stay until PR2 moves
consumers onto the scale. Pinned by __tests__/signalTokens.test.ts. */
--v2-ink-2: #1d2433;
--v2-fill-a: #333c4e;
Expand Down
Loading