designlang 6.0.0 → 7.0.0

package/tests/formatters.test.js

@@ -7,6 +7,13 @@ import { formatCssVars } from '../src/formatters/css-vars.js';
 import { formatPreview } from '../src/formatters/preview.js';
 import { formatFigma } from '../src/formatters/figma.js';
 import { formatReactTheme, formatShadcnTheme } from '../src/formatters/theme.js';
+import { formatDtcgTokens } from '../src/formatters/dtcg-tokens.js';
+import { resolveRef } from '../src/formatters/_token-ref.js';
+import { formatIosSwiftUI } from '../src/formatters/ios-swiftui.js';
+import { formatAndroidCompose } from '../src/formatters/android-compose.js';
+import { formatFlutterDart } from '../src/formatters/flutter-dart.js';
+import { formatWordPressTheme } from '../src/formatters/wordpress.js';
+import { formatAgentRules } from '../src/formatters/agent-rules.js';
 
 // ── Shared mock design object ───────────────────────────────────
 
@@ -226,6 +233,44 @@ describe('formatTokens', () => {
   });
 });
 
+// ── formatDtcgTokens ────────────────────────────────────────────
+
+describe('formatDtcgTokens', () => {
+  const minimalDesign = {
+    colors: { primary: '#3b82f6', secondary: '#10b981', neutrals: ['#111','#888','#eee'], backgrounds: ['#fff'], text: ['#111'], all: [] },
+    typography: { families: ['Inter'], scale: [{ size:'16px', weight:'400', lineHeight:'1.5' }] },
+    spacing: { scale: ['4px','8px','16px'], base: '4px' },
+    shadows: { values: ['0 1px 2px rgba(0,0,0,0.1)'] },
+    borders: { radii: ['4px','8px'] },
+    variables: {},
+  };
+
+  it('emits $value/$type for every leaf', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    assert.equal(out.primitive.color.brand.primary.$value, '#3b82f6');
+    assert.equal(out.primitive.color.brand.primary.$type, 'color');
+  });
+
+  it('emits semantic aliases referencing primitives', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    assert.match(out.semantic.color.action.primary.$value, /^\{primitive\.color\.brand\.primary\}$/);
+    assert.equal(out.semantic.color.action.primary.$type, 'color');
+  });
+
+  it('emits composite typography tokens', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    const body = out.semantic.typography.body;
+    assert.equal(body.$type, 'typography');
+    assert.equal(body.$value.fontFamily, 'Inter');
+    assert.equal(body.$value.fontSize, '16px');
+  });
+
+  it('round-trips through JSON unchanged', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    assert.deepEqual(JSON.parse(JSON.stringify(out)), out);
+  });
+});
+
 // ── formatTailwind ──────────────────────────────────────────────
 
 describe('formatTailwind', () => {
@@ -475,3 +520,190 @@ describe('formatShadcnTheme', () => {
     assert.ok(result.includes('shadcn/ui'));
   });
 });
+
+// ── resolveRef (token reference helper) ─────────────────────────
+
+describe('resolveRef', () => {
+  const tokens = {
+    primitive: {
+      color: { brand: { primary: { $value: '#3B82F6', $type: 'color' } } },
+      spacing: { s0: { $value: '4px', $type: 'dimension' } },
+    },
+    semantic: {
+      color: {
+        action: {
+          primary: { $value: '{primitive.color.brand.primary}', $type: 'color' },
+        },
+      },
+      alias: {
+        ref: { $value: '{semantic.color.action.primary}', $type: 'color' },
+      },
+    },
+  };
+
+  it('returns the raw $value for non-reference tokens', () => {
+    assert.equal(resolveRef(tokens, 'primitive.color.brand.primary'), '#3B82F6');
+  });
+
+  it('follows one-level references', () => {
+    assert.equal(resolveRef(tokens, 'semantic.color.action.primary'), '#3B82F6');
+  });
+
+  it('follows chained references', () => {
+    assert.equal(resolveRef(tokens, 'semantic.alias.ref'), '#3B82F6');
+  });
+
+  it('returns undefined for missing paths', () => {
+    assert.equal(resolveRef(tokens, 'primitive.does.not.exist'), undefined);
+  });
+
+  it('resolves dimension tokens', () => {
+    assert.equal(resolveRef(tokens, 'primitive.spacing.s0'), '4px');
+  });
+});
+
+// ── formatIosSwiftUI ────────────────────────────────────────────
+
+describe('formatIosSwiftUI', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+
+  it('emits import SwiftUI and extension Color', () => {
+    const result = formatIosSwiftUI(tokens);
+    assert.ok(result.includes('import SwiftUI'));
+    assert.ok(result.includes('extension Color'));
+  });
+
+  it('emits actionPrimary with resolved primitive hex', () => {
+    const result = formatIosSwiftUI(tokens);
+    // mockDesign primary is #0066cc → semantic.color.action.primary resolves to #0066cc
+    assert.ok(
+      /static let actionPrimary = Color\(hex: 0x0066CC\)/.test(result),
+      'expected actionPrimary with resolved hex',
+    );
+  });
+
+  it('resolves semantic references (no raw {...} strings in output)', () => {
+    const result = formatIosSwiftUI(tokens);
+    assert.ok(!result.includes('{primitive.'), 'should not leak DTCG refs');
+  });
+
+  it('is idempotent', () => {
+    const a = formatIosSwiftUI(tokens);
+    const b = formatIosSwiftUI(tokens);
+    assert.equal(a, b);
+  });
+});
+
+// ── formatAndroidCompose ────────────────────────────────────────
+
+describe('formatAndroidCompose', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+
+  it('Theme.kt contains object DesignTokens and ActionPrimary', () => {
+    const out = formatAndroidCompose(tokens);
+    assert.ok(out['Theme.kt'].includes('object DesignTokens'));
+    assert.ok(/val ActionPrimary = Color\(0xFF0066CC\)/.test(out['Theme.kt']));
+  });
+
+  it('colors.xml has <color name="action_primary">', () => {
+    const out = formatAndroidCompose(tokens);
+    assert.ok(out['colors.xml'].includes('<color name="action_primary">#FF0066CC</color>'));
+  });
+
+  it('dimens.xml has <dimen name="spacing_s0"> with dp unit', () => {
+    const out = formatAndroidCompose(tokens);
+    assert.ok(/<dimen name="spacing_s0">\d+dp<\/dimen>/.test(out['dimens.xml']));
+  });
+});
+
+// ── formatFlutterDart ───────────────────────────────────────────
+
+describe('formatFlutterDart', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+
+  it('contains class DesignTokens', () => {
+    const out = formatFlutterDart(tokens);
+    assert.ok(out.includes('class DesignTokens'));
+  });
+
+  it('emits actionPrimary with resolved ARGB hex', () => {
+    const out = formatFlutterDart(tokens);
+    assert.ok(
+      /static const Color actionPrimary = Color\(0xFF0066CC\);/.test(out),
+      'expected actionPrimary with resolved hex',
+    );
+  });
+});
+
+// ── formatWordPressTheme (block-theme skeleton) ─────────────────
+
+describe('formatWordPressTheme', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+  const out = formatWordPressTheme(tokens, mockDesign);
+
+  it('theme.json parses and has color palette with at least one entry', () => {
+    const parsed = JSON.parse(out['theme.json']);
+    assert.ok(Array.isArray(parsed.settings.color.palette));
+    assert.ok(parsed.settings.color.palette.length > 0);
+    // At least one entry should have a hex color derived from semantics
+    const actionPrimary = parsed.settings.color.palette.find(p => p.slug === 'action-primary');
+    assert.ok(actionPrimary);
+    assert.equal(actionPrimary.color.toLowerCase(), '#0066cc');
+  });
+
+  it('theme.json is version 3', () => {
+    const parsed = JSON.parse(out['theme.json']);
+    assert.equal(parsed.version, 3);
+  });
+
+  it('style.css contains Theme Name and --action-primary custom prop', () => {
+    assert.ok(out['style.css'].includes('Theme Name:'));
+    assert.ok(out['style.css'].includes('--action-primary:'));
+  });
+
+  it('functions.php starts with <?php', () => {
+    assert.ok(out['functions.php'].startsWith('<?php'));
+  });
+});
+
+// ── formatAgentRules ────────────────────────────────────────────
+
+describe('formatAgentRules', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+  const url = 'https://example.com';
+  const designWithRegions = { ...mockDesign, regions: [{ role: 'hero' }, { role: 'footer' }] };
+  const out = formatAgentRules({ design: designWithRegions, tokens, url });
+
+  it('emits all four files, each non-empty', () => {
+    for (const key of [
+      '.cursor/rules/designlang.mdc',
+      '.claude/skills/designlang/SKILL.md',
+      'CLAUDE.md.fragment',
+      'agents.md',
+    ]) {
+      assert.ok(typeof out[key] === 'string' && out[key].length > 0, `missing ${key}`);
+    }
+  });
+
+  it('Cursor .mdc begins with frontmatter containing alwaysApply: true', () => {
+    const mdc = out['.cursor/rules/designlang.mdc'];
+    assert.ok(mdc.startsWith('---'), 'expected frontmatter start');
+    const fm = mdc.split('---')[1];
+    assert.ok(fm.includes('alwaysApply: true'), 'expected alwaysApply: true');
+  });
+
+  it('all four files reference the source URL', () => {
+    for (const key of Object.keys(out)) {
+      assert.ok(out[key].includes(url), `${key} missing url`);
+    }
+  });
+
+  it('all four files contain resolved hex for semantic.color.action.primary', () => {
+    // mockDesign primary is #0066cc — resolved value should appear verbatim,
+    // and the raw DTCG reference must not leak.
+    for (const key of Object.keys(out)) {
+      assert.ok(out[key].toLowerCase().includes('#0066cc'), `${key} missing resolved hex`);
+      assert.ok(!out[key].includes('{primitive.color.brand.primary}'), `${key} leaked raw DTCG ref`);
+    }
+  });
+});

package/tests/mcp.test.js

@@ -0,0 +1,68 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { buildResources } from '../src/mcp/resources.js';
+import { buildTools } from '../src/mcp/tools.js';
+
+const tokens = {
+  $metadata: { source: 'https://x.com' },
+  primitive: { color: { brand: { primary: { $value: '#3b82f6', $type: 'color' } } } },
+  semantic: { color: { action: { primary: { $value: '{primitive.color.brand.primary}', $type: 'color' } } } },
+};
+const design = {
+  colors: { all: ['#000', '#111', '#555', '#fff'] },
+  regions: [{ role: 'hero', bounds: { x:0,y:0,w:1280,h:600 }, heading: 'Build' }],
+  componentClusters: [{ kind: 'button', instanceCount: 5, variants: [{ css: { bg: '#3b82f6' }, instanceCount: 3 }] }],
+  accessibility: { remediation: [{ fg:'#eee', bg:'#fff', ratio:1.1, rule:'AA-normal', suggestion:{replace:'fg',color:'#000',newRatio:21}}] },
+  cssHealth: null,
+};
+
+describe('MCP resources', () => {
+  it('lists five URIs', () => {
+    const r = buildResources({ design, tokens });
+    assert.equal(r.list().length, 5);
+    assert.ok(r.list().find(x => x.uri === 'designlang://tokens/semantic'));
+  });
+  it('reads semantic tokens', () => {
+    const r = buildResources({ design, tokens });
+    const out = r.read('designlang://tokens/semantic');
+    const body = JSON.parse(out.text);
+    assert.ok(body.color?.action?.primary);
+  });
+  it('throws for unknown uri', () => {
+    const r = buildResources({ design, tokens });
+    assert.throws(() => r.read('designlang://nope'));
+  });
+});
+
+describe('MCP tools', () => {
+  it('search_tokens finds semantic token by substring', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('search_tokens', { query: 'action.primary' });
+    assert.ok(JSON.stringify(res.matches).includes('action.primary'));
+  });
+  it('find_nearest_color returns a palette color passing AA', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('find_nearest_color', { hex: '#ffffff', level: 'AA-normal' });
+    assert.ok(res.color);
+    assert.ok(res.newRatio >= 4.5);
+  });
+  it('get_region returns hero', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('get_region', { name: 'hero' });
+    assert.equal(res.role, 'hero');
+  });
+  it('get_component returns button cluster', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('get_component', { name: 'button' });
+    assert.equal(res.kind, 'button');
+  });
+  it('list_failing_contrast_pairs returns remediation array', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('list_failing_contrast_pairs');
+    assert.equal(res.length, 1);
+  });
+  it('throws on unknown tool', async () => {
+    const t = buildTools({ design, tokens });
+    await assert.rejects(() => t.call('nope', {}));
+  });
+});

package/website/app/globals.css

@@ -1,9 +1,9 @@
 :root {
-  --red: #ff0000;
+  --red: #ffffff;
   --black: #0a0a0a;
-  --white: #f5f0e8;
-  --cream: #e8e0d0;
-  --yellow: #ffdd00;
+  --white: #ffffff;
+  --cream: #ffffff;
+  --yellow: #ffffff;
   --gray: #333;
 }
 
@@ -47,7 +47,7 @@ a { color: inherit; }
   font-family: 'Unbounded', sans-serif;
   font-size: 14vw;
   font-weight: 900;
-  color: rgba(255, 0, 0, 0.03);
+  color: rgba(255, 255, 255, 0.03);
   white-space: nowrap;
   pointer-events: none;
   animation: scroll-text 20s linear infinite;
@@ -216,7 +216,7 @@ section {
   font-family: 'Unbounded', sans-serif;
   font-size: 80px;
   font-weight: 900;
-  color: rgba(255, 0, 0, 0.06);
+  color: rgba(255, 255, 255, 0.06);
   line-height: 1;
 }
 
@@ -302,13 +302,13 @@ section {
 .command-card {
   background: var(--black);
   padding: 32px;
-  border: 2px solid rgba(255,0,0,0.3);
+  border: 2px solid rgba(255,255,255,0.3);
   transition: all 0.15s;
 }
 
 .command-card:hover {
   border-color: var(--red);
-  background: rgba(255, 0, 0, 0.05);
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .command-name {
@@ -668,9 +668,9 @@ footer a:hover {
   font-weight: 700;
 }
 
-.extractor-a11y-score.good { color: #4ade80; }
-.extractor-a11y-score.ok { color: var(--yellow); }
-.extractor-a11y-score.bad { color: var(--red); }
+.extractor-a11y-score.good { color: #ffffff; }
+.extractor-a11y-score.ok { color: #aaaaaa; }
+.extractor-a11y-score.bad { color: #666666; }
 
 .extractor-a11y-fails {
   font-family: 'JetBrains Mono', monospace;