Mercurial

comparison design_system/test/storybook_test.js @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 2b6e732087ff
children
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
136 /^text\/html/, 136 /^text\/html/,
137 ); 137 );
138 } 138 }
139 for (const asset of [ 139 for (const asset of [
140 '/styles/tokens.css', 140 '/styles/tokens.css',
141 '/styles/themes.css',
141 '/styles/components.css', 142 '/styles/components.css',
142 '/styles/shadcn.css', 143 '/styles/shadcn.css',
143 '/components/index.js', 144 '/components/index.js',
144 '/components/icon.js', 145 '/components/icon.js',
145 '/catalog.js', 146 '/catalog.js',
478 const darkMuted = value('surface-muted'); 479 const darkMuted = value('surface-muted');
479 const darkData = Array.from( 480 const darkData = Array.from(
480 { length: 10 }, 481 { length: 10 },
481 (_, index) => value(`data-${index + 1}`), 482 (_, index) => value(`data-${index + 1}`),
482 ); 483 );
484 const themes = ['paper', 'ink', 'playful'].map(theme => {
485 root.dataset.zenTheme = theme;
486 const channels = value => value.match(/\d+(?:\.\d+)?/g)
487 .slice(0, 3)
488 .map(Number);
489 const luminance = value => {
490 const converted = channels(value).map(channel => {
491 const normalized = channel / 255;
492 return normalized <= 0.04045
493 ? normalized / 12.92
494 : ((normalized + 0.055) / 1.055) ** 2.4;
495 });
496 return converted[0] * 0.2126 +
497 converted[1] * 0.7152 +
498 converted[2] * 0.0722;
499 };
500 const contrasts = [
501 'info',
502 'success',
503 'warning',
504 'danger',
505 ].map(tone => {
506 const probe = document.createElement('span');
507 probe.style.background = `var(--zen-color-${tone})`;
508 probe.style.color = `var(--zen-color-on-${tone})`;
509 document.body.append(probe);
510 const probeStyle = getComputedStyle(probe);
511 const foreground = luminance(probeStyle.color);
512 const background = luminance(probeStyle.backgroundColor);
513 const contrast = (Math.max(foreground, background) + 0.05) /
514 (Math.min(foreground, background) + 0.05);
515 probe.remove();
516 return contrast;
517 });
518 return {
519 canvas: value('canvas'),
520 contrast: Math.min(...contrasts),
521 font: getComputedStyle(root)
522 .getPropertyValue('--zen-font-sans')
523 .trim(),
524 name: theme,
525 radius: getComputedStyle(root)
526 .getPropertyValue('--zen-radius-lg')
527 .trim(),
528 };
529 });
483 delete root.dataset.zenTheme; 530 delete root.dataset.zenTheme;
484 return { 531 return {
485 darkData, 532 darkData,
486 darkMuted, 533 darkMuted,
487 data, 534 data,
488 lightMuted, 535 lightMuted,
489 materials, 536 materials,
490 rampsComplete, 537 rampsComplete,
538 themes,
491 }; 539 };
492 }); 540 });
493 assert.equal(colorTokenState.rampsComplete, true); 541 assert.equal(colorTokenState.rampsComplete, true);
494 assert.equal(new Set(colorTokenState.materials).size, 13); 542 assert.equal(new Set(colorTokenState.materials).size, 13);
495 assert.equal(new Set(colorTokenState.data).size, 10); 543 assert.equal(new Set(colorTokenState.data).size, 10);
496 assert.equal(new Set(colorTokenState.darkData).size, 10); 544 assert.equal(new Set(colorTokenState.darkData).size, 10);
497 assert.notDeepEqual(colorTokenState.data, colorTokenState.darkData); 545 assert.notDeepEqual(colorTokenState.data, colorTokenState.darkData);
546 assert.equal(
547 new Set(colorTokenState.themes.map(theme => theme.canvas)).size,
548 3,
549 );
550 assert.notEqual(
551 colorTokenState.themes.find(theme => theme.name === 'paper').radius,
552 colorTokenState.themes.find(theme => theme.name === 'playful').radius,
553 );
554 assert.ok(
555 colorTokenState.themes.every(theme => theme.contrast >= 4.5),
556 JSON.stringify(colorTokenState.themes),
557 );
498 assert.notEqual( 558 assert.notEqual(
499 colorTokenState.lightMuted, 559 colorTokenState.lightMuted,
500 colorTokenState.darkMuted, 560 colorTokenState.darkMuted,
501 ); 561 );
502 assert.equal(await page.locator('.palette-grid > div').count(), 13); 562 assert.equal(await page.locator('.palette-grid > div').count(), 13);