mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Paul BakausandCursor
7648af0095
Restyle the live picker to match the site kinpaku kit, persist pick mode in localStorage, fix DESIGN.md color swatches in the parser, and land the neo-kinpaku site refresh with new tokens, assets, palette script, and detector rules. Co-authored-by: Cursor <cursoragent@cursor.com>
124 lines
3.4 KiB
JavaScript
124 lines
3.4 KiB
JavaScript
/**
|
|
* Tests for design-parser.mjs — frontmatter + body extraction.
|
|
* Run with: node --test tests/design-parser.test.mjs
|
|
*/
|
|
|
|
import { describe, it } from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { parseDesignMd } from '../skill/scripts/design-parser.mjs';
|
|
|
|
describe('parseDesignMd frontmatter branch', () => {
|
|
it('returns null frontmatter when the file has no YAML header', () => {
|
|
const md = `# Design System: Demo
|
|
|
|
## 1. Overview
|
|
|
|
Some prose.
|
|
`;
|
|
const model = parseDesignMd(md);
|
|
assert.equal(model.schemaVersion, 2);
|
|
assert.equal(model.frontmatter, null);
|
|
assert.equal(model.title, 'Design System: Demo');
|
|
});
|
|
|
|
it('parses a Stitch-shaped frontmatter and strips it from the body', () => {
|
|
const md = `---
|
|
name: Demo System
|
|
description: A quiet editorial look.
|
|
colors:
|
|
primary: "#b8422e"
|
|
neutral-bg: "#faf7f2"
|
|
typography:
|
|
display:
|
|
fontFamily: "Cormorant Garamond, Georgia, serif"
|
|
fontWeight: 300
|
|
lineHeight: 1
|
|
body:
|
|
fontFamily: "Inter, sans-serif"
|
|
rounded:
|
|
sm: "4px"
|
|
md: "8px"
|
|
components:
|
|
button-primary:
|
|
backgroundColor: "{colors.primary}"
|
|
textColor: "{colors.neutral-bg}"
|
|
rounded: "{rounded.sm}"
|
|
---
|
|
|
|
# Design System: Demo
|
|
|
|
## 1. Overview
|
|
|
|
Opening prose.
|
|
`;
|
|
const model = parseDesignMd(md);
|
|
assert.equal(model.schemaVersion, 2);
|
|
assert.equal(model.title, 'Design System: Demo');
|
|
assert.ok(model.frontmatter);
|
|
assert.equal(model.frontmatter.name, 'Demo System');
|
|
assert.equal(model.frontmatter.description, 'A quiet editorial look.');
|
|
assert.equal(model.frontmatter.colors.primary, '#b8422e');
|
|
assert.equal(model.frontmatter.colors['neutral-bg'], '#faf7f2');
|
|
assert.equal(model.frontmatter.typography.display.fontFamily, 'Cormorant Garamond, Georgia, serif');
|
|
assert.equal(model.frontmatter.typography.display.fontWeight, 300);
|
|
assert.equal(model.frontmatter.typography.display.lineHeight, 1);
|
|
assert.equal(model.frontmatter.rounded.md, '8px');
|
|
assert.equal(model.frontmatter.components['button-primary'].backgroundColor, '{colors.primary}');
|
|
});
|
|
|
|
it('recovers gracefully when frontmatter has no closing marker', () => {
|
|
// No `---` terminator: the whole file is treated as body, not partial
|
|
// frontmatter. The H1 title still resolves from the body.
|
|
const md = `---
|
|
this is not valid yaml : : :
|
|
no closing marker
|
|
# Design System: Broken
|
|
|
|
## 1. Overview
|
|
|
|
Prose.
|
|
`;
|
|
const model = parseDesignMd(md);
|
|
assert.equal(model.frontmatter, null);
|
|
assert.equal(model.title, 'Design System: Broken');
|
|
});
|
|
|
|
it('ignores line-only comments but preserves unquoted hex values', () => {
|
|
const md = `---
|
|
# Top-level comment
|
|
colors:
|
|
primary: #b8422e
|
|
# mid-block comment
|
|
accent: "#ec4899"
|
|
---
|
|
|
|
# Design System: Commented
|
|
|
|
## 1. Overview
|
|
|
|
Prose.
|
|
`;
|
|
const model = parseDesignMd(md);
|
|
assert.equal(model.frontmatter.colors.primary, '#b8422e');
|
|
assert.equal(model.frontmatter.colors.accent, '#ec4899');
|
|
});
|
|
|
|
it('strips inline comments after quoted OKLCH values', () => {
|
|
const md = `---
|
|
colors:
|
|
kinpaku-gold: "oklch(84% 0.19 80.46)" # primary accent
|
|
gold-hairline: "oklch(58% 0.065 82 / 0.32)" # default rule
|
|
---
|
|
|
|
# Design System: Kinpaku
|
|
|
|
## 1. Overview
|
|
|
|
Prose.
|
|
`;
|
|
const model = parseDesignMd(md);
|
|
assert.equal(model.frontmatter.colors['kinpaku-gold'], 'oklch(84% 0.19 80.46)');
|
|
assert.equal(model.frontmatter.colors['gold-hairline'], 'oklch(58% 0.065 82 / 0.32)');
|
|
});
|
|
});
|