/home/mrjunejune/zenbu: design_system/test/design_system_policy_test.js comparison

comparison design_system/test/design_system_policy_test.js @ 258:60a876c4587a

[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Wed, 05 Aug 2026 05:25:40 -0700
parents	2b6e732087ff
children

comparison

equal deleted inserted replaced

-:609d3c6aff4e
+:60a876c4587a
 const RUNFILES = process.env.JS_BINARY__RUNFILES;
 const WORKSPACE = process.env.JS_BINARY__WORKSPACE;
 assert.ok(RUNFILES);
 assert.ok(WORKSPACE);
-const sourceRoot = path.join(RUNFILES, WORKSPACE, 'design_system/src');
+const designRoot = path.join(RUNFILES, WORKSPACE, 'design_system');
+const sourceRoot = path.join(designRoot, 'src');
 const files = [];
 function walk(directory) {
 for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
 const entryPath = path.join(directory, entry.name);
 else if (/\.(?:css|html|js)$/.test(entry.name)) files.push(entryPath);
 }
 }
 walk(sourceRoot);
+function listMarkdown(directory) {
+const markdown = [];
+for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+const entryPath = path.join(directory, entry.name);
+if (entry.isDirectory()) markdown.push(...listMarkdown(entryPath));
+else if (entry.name.endsWith('.md')) markdown.push(entryPath);
+}
+return markdown;
+}
+const documentationFiles = [
+...fs.readdirSync(designRoot)
+.filter(name => name.endsWith('.md'))
+.map(name => path.join(designRoot, name)),
+...listMarkdown(path.join(designRoot, 'wiki')),
+];
+const namingFiles = [
+...files,
+...documentationFiles,
+path.join(designRoot, 'main.c'),
+];
 function validateCallableDocumentation(
 relative,
 source,
 index,
 '#[0-9a-fA-F]{3,8}\\b',
 '\\b(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch)\\s*\\(',
 ].join('|'), 'gi');
 const forbiddenGlyph = /[×←→↑↓＋◆◇✓✔✕✖★☆⚠]/gu;
 const pictographic = /\p{Extended_Pictographic}/gu;
+const borrowedProductName =
+/(?:shadcn|storybook|sonner|radix|tailwind|react)/gi;
 const failures = [];
 for (const file of files) {
 const relative = path.relative(sourceRoot, file);
 const source = fs.readFileSync(file, 'utf8');
-if (relative !== 'styles/tokens.css') {
+if (![
+'styles/reference.css',
+'styles/tokens.css',
+].includes(relative)) {
 for (const match of source.matchAll(rawColor)) {
 failures.push(
 `${relative}:${source.slice(0, match.index).split('\n').length} ` +
 `raw color ${JSON.stringify(match[0])}`,
 );
 ].includes(property) ||
 (property.startsWith('border') &&
 !/(?:collapse|image|radius|spacing|style|width)/.test(property));
 if (!colorProperty) continue;
 const withoutTokens = value.replace(
-/var\(\s*--zen-[\w-]+\s*\)/g,
+/var\(\s*--(?:zenbu|zen)-[\w-]+\s*\)/g,
 '',
 );
 const words = withoutTokens.toLowerCase()
 .match(/[a-z][a-z-]*/g) || [];
 if (words.some(word => !allowedWords.has(word)) &&
 !/^\s*(?:0|none|transparent|currentColor|inherit)\s*$/i.test(
 value,
 )) {
 failures.push(
 `${relative}:${css.slice(0, declaration.index).split('\n').length} ` +
-`${property} must use a --zen-* token`,
+`${property} must use a --zenbu-sys-* token`,
 );
 }
 }
 }
 }
 failures.push(
 `${relative} imports external stylesheet ${JSON.stringify(match[1])}`,
 );
 }
 }
+}
+}
+const cssFiles = files.filter(file => file.endsWith('.css'));
+const zenbuDeclarations = new Set();
+for (const file of cssFiles) {
+const source = fs.readFileSync(file, 'utf8');
+for (const match of source.matchAll(/(--zenbu-[\w-]+)\s*:/g)) {
+zenbuDeclarations.add(match[1]);
+}
+}
+for (const file of cssFiles) {
+const relative = path.relative(sourceRoot, file);
+const source = fs.readFileSync(file, 'utf8');
+for (const match of source.matchAll(/var\(\s*(--zenbu-[\w-]+)/g)) {
+if (!zenbuDeclarations.has(match[1])) {
+failures.push(`${relative} references unknown token ${match[1]}`);
+}
+}
+if (![
+'styles/reference.css',
+'styles/semantic.css',
+'styles/themes.css',
+'styles/tokens.css',
+].includes(relative)) {
+for (const match of source.matchAll(
+/var\(\s*(--zenbu-ref-color-[\w-]+)/g,
+)) {
+failures.push(
+`${relative} consumes reference color ${match[1]} directly`,
+);
+}
+}
+if (![
+'styles/themes.css',
+'styles/tokens.css',
+].includes(relative) && /var\(\s*--zen-/.test(source)) {
+failures.push(`${relative} consumes deprecated --zen-* tokens`);
+}
+}
+for (const file of namingFiles) {
+const source = fs.readFileSync(file, 'utf8');
+for (const match of source.matchAll(borrowedProductName)) {
+failures.push(
+`${path.relative(designRoot, file)} uses borrowed product name ` +
+JSON.stringify(match[0]),
+);
 }
 }
 for (const file of files.filter(file =>
 file.endsWith('.js')