brendan/bchen-ui
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: @bchen/ui v0.1.0 — dark-mode token palette and 16px base rule #2

Merged
brendan merged 2 commits from feat/v0.1.0-tokens-extraction into main 2026-05-14 01:02:13 +00:00
Conversation 0 Commits 2 Files Changed 11 +3 -14
2 changed files with 3 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8511e0c720 - Show all commits

5
tests/base.test.ts
View File

@@ -8,9 +8,4 @@ describe('base.css', () => {
expect(css).toMatch(/input\s*,\s*textarea\s*,\s*select\s*\{[^}]*font-size\s*:\s*16px/); expect(css).toMatch(/input\s*,\s*textarea\s*,\s*select\s*\{[^}]*font-size\s*:\s*16px/);
}); });
it('covers all three form control selectors in one rule', () => {
expect(css).toMatch(/input/);
expect(css).toMatch(/textarea/);
expect(css).toMatch(/select/);
});
}); });

12
tests/tokens.test.ts
View File

@@ -5,17 +5,11 @@ const css = readFileSync(new URL('../dist/tokens.css', import.meta.url), 'utf-8'
// ---- CSS parser helpers ---- // ---- CSS parser helpers ----
function extractRootBlock(src: string): string { function extractBlock(src: string): string {
const m = src.match(/:root\s*\{([^}]+)\}/); const m = src.match(/:root\s*\{([^}]+)\}/);
return m?.[1] ?? ''; return m?.[1] ?? '';
} }
function extractDarkBlock(src: string): string {
const afterMedia = src.split('@media (prefers-color-scheme: dark)')[1] ?? '';
const m = afterMedia.match(/:root\s*\{([^}]+)\}/);
return m?.[1] ?? '';
}
function parseProps(block: string): Map<string, string> { function parseProps(block: string): Map<string, string> {
const map = new Map<string, string>(); const map = new Map<string, string>();
const re = /--([\w-]+)\s*:\s*([^;]+);/g; const re = /--([\w-]+)\s*:\s*([^;]+);/g;
@@ -63,8 +57,8 @@ function contrast(hex1: string, hex2: string): number {
// ---- Fixtures ---- // ---- Fixtures ----
const rootProps = parseProps(extractRootBlock(css)); const rootProps = parseProps(extractBlock(css));
const darkProps = parseProps(extractDarkBlock(css)); const darkProps = parseProps(extractBlock(css.split('@media (prefers-color-scheme: dark)')[1] ?? ''));
// Merged: dark overrides on top of light primitives so var() refs resolve correctly. // Merged: dark overrides on top of light primitives so var() refs resolve correctly.
const mergedDark = new Map([...rootProps, ...darkProps]); const mergedDark = new Map([...rootProps, ...darkProps]);