@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/tokens/__tests__/colors.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=colors.test.d.ts.map

package/dist/tokens/__tests__/colors.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/colors.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/colors.test.js

@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest';
+import { backgroundColors, textColors, brandColors, accentColors, strokeColors, uiColors, sidebarColors, lightColors, darkColors, colors, legacyAliases } from '../colors';
+describe('Background Colors', () => {
+    it('has light theme background colors', () => {
+        expect(backgroundColors.light['bg-primary']).toBe('0 0% 100%');
+        expect(backgroundColors.light['bg-secondary']).toBe('220 7% 97%');
+        expect(backgroundColors.light['bg-tertiary']).toBe('220 7% 94%');
+        expect(backgroundColors.light['bg-quaternary']).toBe('220 6% 91%');
+    });
+    it('has dark theme background colors', () => {
+        expect(backgroundColors.dark['bg-primary']).toBe('220 20% 18%');
+        expect(backgroundColors.dark['bg-secondary']).toBe('221 50% 10%');
+        expect(backgroundColors.dark['bg-tertiary']).toBe('221 50% 6%');
+        expect(backgroundColors.dark['bg-quaternary']).toBe('0 0% 0%');
+    });
+});
+describe('Text Colors', () => {
+    it('has light theme text colors', () => {
+        expect(textColors.light['text-primary']).toBe('221 50% 10%');
+        expect(textColors.light['text-secondary']).toBe('220 20% 18%');
+        expect(textColors.light['text-tertiary']).toBe('221 9% 44%');
+        expect(textColors.light['text-head']).toBe('221 9% 44%');
+    });
+    it('has dark theme text colors', () => {
+        expect(textColors.dark['text-primary']).toBe('220 7% 97%');
+        expect(textColors.dark['text-secondary']).toBe('220 7% 94%');
+        expect(textColors.dark['text-tertiary']).toBe('220 6% 91%');
+        expect(textColors.dark['text-head']).toBe('220 9% 70%');
+    });
+});
+describe('Brand Colors', () => {
+    it('has light theme brand color', () => {
+        expect(brandColors.light['brand-primary']).toBe('209 99% 50%');
+    });
+    it('has dark theme brand color', () => {
+        expect(brandColors.dark['brand-primary']).toBe('220 89% 63%');
+    });
+});
+describe('Accent Colors', () => {
+    it('has light theme accent colors', () => {
+        expect(accentColors.light['accent-warning']).toBe('28 100% 59%');
+        expect(accentColors.light['accent-danger']).toBe('0 100% 70%');
+        expect(accentColors.light['accent-success']).toBe('131 77% 35%');
+    });
+    it('has dark theme accent colors', () => {
+        expect(accentColors.dark['accent-warning']).toBe('30 100% 70%');
+        expect(accentColors.dark['accent-danger']).toBe('0 100% 70%');
+        expect(accentColors.dark['accent-success']).toBe('142 71% 45%');
+    });
+});
+describe('Stroke Colors', () => {
+    it('has light theme stroke colors', () => {
+        expect(strokeColors.light['stroke-primary']).toBe('216 6% 84%');
+        expect(strokeColors.light['stroke-secondary']).toBe('216 6% 84%');
+        expect(strokeColors.light['border']).toBe('220 13% 91%');
+    });
+    it('has dark theme stroke colors', () => {
+        expect(strokeColors.dark['stroke-primary']).toBe('220 20% 28%');
+        expect(strokeColors.dark['stroke-secondary']).toBe('220 20% 28%');
+        expect(strokeColors.dark['border']).toBe('215 27.9% 16.9%');
+    });
+});
+describe('UI Colors', () => {
+    it('has light theme UI colors', () => {
+        expect(uiColors.light['card']).toBeDefined();
+        expect(uiColors.light['popover']).toBeDefined();
+        expect(uiColors.light['muted']).toBeDefined();
+        expect(uiColors.light['hover-primary']).toBeDefined();
+    });
+    it('has dark theme UI colors', () => {
+        expect(uiColors.dark['card']).toBeDefined();
+        expect(uiColors.dark['popover']).toBeDefined();
+        expect(uiColors.dark['muted']).toBeDefined();
+        expect(uiColors.dark['hover-primary']).toBeDefined();
+    });
+});
+describe('Sidebar Colors', () => {
+    it('has light theme sidebar colors', () => {
+        expect(sidebarColors.light['sidebar-background']).toBeDefined();
+        expect(sidebarColors.light['sidebar-foreground']).toBeDefined();
+        expect(sidebarColors.light['sidebar-border']).toBeDefined();
+        expect(sidebarColors.light['sidebar-primary']).toBeDefined();
+        expect(sidebarColors.light['sidebar-primary-foreground']).toBeDefined();
+    });
+    it('has dark theme sidebar colors', () => {
+        expect(sidebarColors.dark['sidebar-background']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-foreground']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-border']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-primary']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-primary-foreground']).toBeDefined();
+    });
+});
+describe('Combined Color Objects', () => {
+    it('lightColors contains all color categories', () => {
+        // Background
+        expect(lightColors['bg-primary']).toBeDefined();
+        // Text
+        expect(lightColors['text-primary']).toBeDefined();
+        // Brand
+        expect(lightColors['brand-primary']).toBeDefined();
+        // Accent
+        expect(lightColors['accent-warning']).toBeDefined();
+        // Stroke
+        expect(lightColors['stroke-primary']).toBeDefined();
+        // UI
+        expect(lightColors['card']).toBeDefined();
+        // Sidebar
+        expect(lightColors['sidebar-background']).toBeDefined();
+    });
+    it('darkColors contains all color categories', () => {
+        expect(darkColors['bg-primary']).toBeDefined();
+        expect(darkColors['text-primary']).toBeDefined();
+        expect(darkColors['brand-primary']).toBeDefined();
+        expect(darkColors['accent-warning']).toBeDefined();
+        expect(darkColors['stroke-primary']).toBeDefined();
+        expect(darkColors['card']).toBeDefined();
+        expect(darkColors['sidebar-background']).toBeDefined();
+    });
+    it('colors object has light and dark themes', () => {
+        expect(colors.light).toEqual(lightColors);
+        expect(colors.dark).toEqual(darkColors);
+    });
+    it('colors object has legacy aliases', () => {
+        expect(colors.aliases).toEqual(legacyAliases);
+    });
+});
+describe('Legacy Aliases', () => {
+    it('maps PascalCase to kebab-case', () => {
+        expect(legacyAliases['BG-Primary']).toBe('bg-primary');
+        expect(legacyAliases['BG-Secondary']).toBe('bg-secondary');
+        expect(legacyAliases['Text-Primary']).toBe('text-primary');
+        expect(legacyAliases['Brand-Primary']).toBe('brand-primary');
+        expect(legacyAliases['Accent-Warning']).toBe('accent-warning');
+        expect(legacyAliases['Accent-Danger']).toBe('accent-danger');
+        expect(legacyAliases['Accent-Success']).toBe('accent-success');
+        expect(legacyAliases['Stroke-Primary']).toBe('stroke-primary');
+    });
+    it('has typo-preserved legacy alias for tertiary', () => {
+        // Note: Original has typo "Tartiary"
+        expect(legacyAliases['Text-Tartiary']).toBe('text-tertiary');
+    });
+});
+describe('Color Value Format', () => {
+    it('uses HSL channel format (H S% L%)', () => {
+        // All values should be in "H S% L%" format for Tailwind compatibility
+        const hslPattern = /^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/;
+        expect(lightColors['bg-primary']).toMatch(hslPattern);
+        expect(lightColors['text-primary']).toMatch(hslPattern);
+        expect(darkColors['bg-primary']).toMatch(hslPattern);
+        expect(darkColors['text-primary']).toMatch(hslPattern);
+    });
+});

package/dist/tokens/__tests__/radius.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radius.test.d.ts.map

package/dist/tokens/__tests__/radius.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/radius.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/radius.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { borderRadius, radiusAliases } from '../radius';
+describe('Border Radius Tokens', () => {
+    it('has none radius', () => {
+        expect(borderRadius.none).toBe('0px');
+    });
+    it('has sm radius', () => {
+        expect(borderRadius.sm).toBe('0.125rem');
+    });
+    it('has default radius', () => {
+        expect(borderRadius.DEFAULT).toBe('0.25rem');
+    });
+    it('has md radius', () => {
+        expect(borderRadius.md).toBe('0.375rem');
+    });
+    it('has lg radius', () => {
+        expect(borderRadius.lg).toBe('0.5rem');
+    });
+    it('has xl radius', () => {
+        expect(borderRadius.xl).toBe('0.75rem');
+    });
+    it('has 2xl radius', () => {
+        expect(borderRadius['2xl']).toBe('1rem');
+    });
+    it('has 3xl radius', () => {
+        expect(borderRadius['3xl']).toBe('1.5rem');
+    });
+    it('has full radius for circles', () => {
+        expect(borderRadius.full).toBe('9999px');
+    });
+});
+describe('Radius Scale Order', () => {
+    it('radii increase in size', () => {
+        const sizes = [
+            borderRadius.none,
+            borderRadius.sm,
+            borderRadius.DEFAULT,
+            borderRadius.md,
+            borderRadius.lg,
+            borderRadius.xl,
+            borderRadius['2xl'],
+            borderRadius['3xl'],
+        ];
+        // Parse rem values and check they increase
+        for (let i = 0; i < sizes.length - 1; i++) {
+            const current = parseFloat(sizes[i]);
+            const next = parseFloat(sizes[i + 1]);
+            expect(next).toBeGreaterThan(current);
+        }
+    });
+});
+describe('Radius Aliases', () => {
+    it('button uses lg radius', () => {
+        expect(radiusAliases.button).toBe(borderRadius.lg);
+        expect(radiusAliases.button).toBe('0.5rem');
+    });
+    it('input uses lg radius', () => {
+        expect(radiusAliases.input).toBe(borderRadius.lg);
+        expect(radiusAliases.input).toBe('0.5rem');
+    });
+    it('card uses xl radius', () => {
+        expect(radiusAliases.card).toBe(borderRadius.xl);
+        expect(radiusAliases.card).toBe('0.75rem');
+    });
+    it('modal uses 2xl radius', () => {
+        expect(radiusAliases.modal).toBe(borderRadius['2xl']);
+        expect(radiusAliases.modal).toBe('1rem');
+    });
+    it('badge uses full radius', () => {
+        expect(radiusAliases.badge).toBe(borderRadius.full);
+        expect(radiusAliases.badge).toBe('9999px');
+    });
+    it('avatar uses full radius', () => {
+        expect(radiusAliases.avatar).toBe(borderRadius.full);
+        expect(radiusAliases.avatar).toBe('9999px');
+    });
+    it('dropdown uses lg radius', () => {
+        expect(radiusAliases.dropdown).toBe(borderRadius.lg);
+    });
+    it('tooltip uses md radius', () => {
+        expect(radiusAliases.tooltip).toBe(borderRadius.md);
+        expect(radiusAliases.tooltip).toBe('0.375rem');
+    });
+});
+describe('Radius Value Formats', () => {
+    it('all rem values are valid', () => {
+        const remPattern = /^\d+(\.\d+)?rem$/;
+        const pxPattern = /^\d+px$/;
+        Object.entries(borderRadius).forEach(([key, value]) => {
+            expect(value.match(remPattern) || value.match(pxPattern)).toBeTruthy();
+        });
+    });
+    it('none is 0px', () => {
+        expect(borderRadius.none).toMatch(/^0px$/);
+    });
+    it('full uses high px value for pill shape', () => {
+        expect(parseInt(borderRadius.full)).toBeGreaterThan(1000);
+    });
+});
+describe('Alias Semantic Meaning', () => {
+    it('interactive elements share same radius', () => {
+        expect(radiusAliases.button).toBe(radiusAliases.input);
+        expect(radiusAliases.button).toBe(radiusAliases.dropdown);
+    });
+    it('circular elements share same radius', () => {
+        expect(radiusAliases.badge).toBe(radiusAliases.avatar);
+    });
+    it('card has larger radius than buttons', () => {
+        const cardRadius = parseFloat(radiusAliases.card);
+        const buttonRadius = parseFloat(radiusAliases.button);
+        expect(cardRadius).toBeGreaterThan(buttonRadius);
+    });
+    it('modal has largest container radius', () => {
+        const modalRadius = parseFloat(radiusAliases.modal);
+        const cardRadius = parseFloat(radiusAliases.card);
+        expect(modalRadius).toBeGreaterThan(cardRadius);
+    });
+});

package/dist/tokens/__tests__/shadows.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=shadows.test.d.ts.map

package/dist/tokens/__tests__/shadows.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/shadows.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/shadows.test.js

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import { boxShadow, customShadows, shadows } from '../shadows';
+describe('Box Shadow Tokens', () => {
+    it('has sm shadow', () => {
+        expect(boxShadow.sm).toContain('0 1px 2px');
+        expect(boxShadow.sm).toContain('rgb(0 0 0');
+    });
+    it('has DEFAULT shadow', () => {
+        expect(boxShadow.DEFAULT).toContain('0 1px 3px');
+    });
+    it('has md shadow', () => {
+        expect(boxShadow.md).toContain('0 4px 6px');
+    });
+    it('has lg shadow', () => {
+        expect(boxShadow.lg).toContain('0 10px 15px');
+    });
+    it('has xl shadow', () => {
+        expect(boxShadow.xl).toContain('0 20px 25px');
+    });
+    it('has 2xl shadow', () => {
+        expect(boxShadow['2xl']).toContain('0 25px 50px');
+    });
+    it('has inner shadow (inset)', () => {
+        expect(boxShadow.inner).toContain('inset');
+        expect(boxShadow.inner).toContain('0 2px 4px');
+    });
+    it('has none shadow', () => {
+        expect(boxShadow.none).toBe('none');
+    });
+});
+describe('Shadow Scale Progression', () => {
+    it('shadows increase in blur radius', () => {
+        // Extract first blur value from each shadow
+        const getFirstBlurRadius = (shadow) => {
+            const match = shadow.match(/(\d+)px/);
+            return match ? parseInt(match[1]) : 0;
+        };
+        const smBlur = getFirstBlurRadius(boxShadow.sm);
+        const defaultBlur = getFirstBlurRadius(boxShadow.DEFAULT);
+        const mdBlur = getFirstBlurRadius(boxShadow.md);
+        const lgBlur = getFirstBlurRadius(boxShadow.lg);
+        const xlBlur = getFirstBlurRadius(boxShadow.xl);
+        expect(defaultBlur).toBeGreaterThanOrEqual(smBlur);
+        expect(mdBlur).toBeGreaterThanOrEqual(defaultBlur);
+        expect(lgBlur).toBeGreaterThan(mdBlur);
+        expect(xlBlur).toBeGreaterThan(lgBlur);
+    });
+});
+describe('Custom Shadows', () => {
+    it('has modal shadow', () => {
+        expect(customShadows.modal).toContain('0 0 31px');
+    });
+    it('has dropdown shadow', () => {
+        expect(customShadows.dropdown).toBeDefined();
+        expect(customShadows.dropdown).toContain('0 4px 6px');
+    });
+    it('has cardHover shadow', () => {
+        expect(customShadows.cardHover).toBeDefined();
+        expect(customShadows.cardHover).toContain('0 10px 15px');
+    });
+    it('has buttonHover shadow', () => {
+        expect(customShadows.buttonHover).toBeDefined();
+    });
+    it('has toast shadow', () => {
+        expect(customShadows.toast).toBeDefined();
+    });
+    it('has tooltip shadow', () => {
+        expect(customShadows.tooltip).toBeDefined();
+    });
+    it('has focusRing shadow with blue color', () => {
+        expect(customShadows.focusRing).toContain('0 0 0 3px');
+        expect(customShadows.focusRing).toContain('rgb(59 130 246');
+    });
+    it('has focusRingDanger shadow with red color', () => {
+        expect(customShadows.focusRingDanger).toContain('0 0 0 3px');
+        expect(customShadows.focusRingDanger).toContain('rgb(239 68 68');
+    });
+});
+describe('Combined Shadows Object', () => {
+    it('contains all boxShadow tokens', () => {
+        expect(shadows.sm).toBe(boxShadow.sm);
+        expect(shadows.DEFAULT).toBe(boxShadow.DEFAULT);
+        expect(shadows.md).toBe(boxShadow.md);
+        expect(shadows.lg).toBe(boxShadow.lg);
+        expect(shadows.none).toBe(boxShadow.none);
+    });
+    it('contains all customShadow tokens', () => {
+        expect(shadows.modal).toBe(customShadows.modal);
+        expect(shadows.dropdown).toBe(customShadows.dropdown);
+        expect(shadows.focusRing).toBe(customShadows.focusRing);
+    });
+});
+describe('Shadow Value Format', () => {
+    it('all shadows use rgb() color format', () => {
+        const allShadows = Object.values(boxShadow).filter(v => v !== 'none');
+        allShadows.forEach(shadow => {
+            expect(shadow).toContain('rgb(');
+        });
+    });
+    it('custom shadows use rgb() color format', () => {
+        Object.values(customShadows).forEach(shadow => {
+            expect(shadow).toContain('rgb(');
+        });
+    });
+});

package/dist/tokens/__tests__/spacing.test.js

@@ -50,17 +50,20 @@ describe('spacing tokens', () => {
     describe('gapScale', () => {
         describe('semantic', () => {
             it('provides semantic gap names with Tailwind classes', () => {
-                expect(gapScale.semantic.tight).toBe('gap-1');
+                expect(gapScale.semantic.minimal).toBe('gap-1');
                 expect(gapScale.semantic.compact).toBe('gap-1.5');
                 expect(gapScale.semantic.item).toBe('gap-2');
                 expect(gapScale.semantic.group).toBe('gap-3');
+                expect(gapScale.semantic.tight).toBe('gap-4');
                 expect(gapScale.semantic.content).toBe('gap-4');
+                expect(gapScale.semantic.standard).toBe('gap-6');
                 expect(gapScale.semantic.section).toBe('gap-6');
+                expect(gapScale.semantic.spacious).toBe('gap-8');
                 expect(gapScale.semantic.layout).toBe('gap-8');
                 expect(gapScale.semantic.page).toBe('gap-12');
             });
-            it('has 8 semantic gap values', () => {
-                expect(Object.keys(gapScale.semantic)).toHaveLength(8);
+            it('has 11 semantic gap values', () => {
+                expect(Object.keys(gapScale.semantic)).toHaveLength(11);
             });
         });
         describe('numeric', () => {
@@ -120,8 +123,8 @@ describe('spacing tokens', () => {
             expect(gapMap.standard).toBe('gap-6');
             expect(gapMap.spacious).toBe('gap-8');
         });
-        it('allows grid values to override semantic values with same key', () => {
-            // grid.tight (gap-4) should override semantic.tight (gap-1)
+        it('grid and semantic values with same key have same value', () => {
+            // Both semantic.tight and grid-tight map to gap-4
             expect(gapMap.tight).toBe('gap-4');
         });
         it('contains all expected keys', () => {
@@ -130,10 +133,10 @@ describe('spacing tokens', () => {
                 '0', '1', '1.5', '2', '3', '4', '6', '8', '12', '16',
                 // legacy
                 'none', 'xs', 'sm', 'md', 'lg', 'xl',
-                // semantic (excluding 'tight' which is overwritten by grid)
-                'compact', 'item', 'group', 'content', 'section', 'layout', 'page',
+                // semantic
+                'minimal', 'compact', 'item', 'group', 'tight', 'content', 'standard', 'section', 'spacious', 'layout', 'page',
                 // grid
-                'tight', 'standard', 'spacious',
+                'grid-tight', 'grid-standard', 'grid-spacious',
             ];
             for (const key of expectedKeys) {
                 expect(gapMap).toHaveProperty(key);

package/dist/tokens/__tests__/typography-base.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=typography-base.test.d.ts.map

package/dist/tokens/__tests__/typography-base.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-base.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/typography-base.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/typography-base.test.js

@@ -0,0 +1,138 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+// Read the CSS file content for testing
+const cssPath = join(__dirname, '../typography-base.css');
+const cssContent = readFileSync(cssPath, 'utf-8');
+describe('Typography Base CSS', () => {
+    describe('File Structure', () => {
+        it('uses @layer base for element styles', () => {
+            expect(cssContent).toContain('@layer base');
+        });
+        it('contains documentation header', () => {
+            expect(cssContent).toContain('Typography Base Styles');
+            expect(cssContent).toContain('Usage in app.css');
+        });
+    });
+    describe('Heading Styles', () => {
+        it('defines styles for all heading levels', () => {
+            expect(cssContent).toMatch(/h1\s*\{/);
+            expect(cssContent).toMatch(/h2\s*\{/);
+            expect(cssContent).toMatch(/h3\s*\{/);
+            expect(cssContent).toMatch(/h4\s*\{/);
+            expect(cssContent).toMatch(/h5\s*\{/);
+            expect(cssContent).toMatch(/h6\s*\{/);
+        });
+        it('headings use semibold weight', () => {
+            // Each heading should have font-semibold
+            const headingMatches = cssContent.match(/h[1-6]\s*\{[^}]+\}/g) || [];
+            expect(headingMatches.length).toBeGreaterThanOrEqual(6);
+            headingMatches.forEach(match => {
+                expect(match).toContain('font-semibold');
+            });
+        });
+        it('headings have dark mode support', () => {
+            const headingMatches = cssContent.match(/h[1-6]\s*\{[^}]+\}/g) || [];
+            headingMatches.forEach(match => {
+                expect(match).toContain('dark:text-white');
+            });
+        });
+    });
+    describe('Body Text Styles', () => {
+        it('defines paragraph style', () => {
+            expect(cssContent).toMatch(/p\s*\{/);
+        });
+        it('paragraph uses secondary color for visual hierarchy', () => {
+            const pMatch = cssContent.match(/p\s*\{[^}]+\}/);
+            expect(pMatch).toBeTruthy();
+            expect(pMatch[0]).toContain('text-gray-600');
+            expect(pMatch[0]).toContain('dark:text-gray-300');
+        });
+        it('paragraph has relaxed line height', () => {
+            const pMatch = cssContent.match(/p\s*\{[^}]+\}/);
+            expect(pMatch[0]).toContain('leading-relaxed');
+        });
+    });
+    describe('Form Elements', () => {
+        it('defines label style', () => {
+            expect(cssContent).toMatch(/label\s*\{/);
+        });
+        it('label has medium weight', () => {
+            const labelMatch = cssContent.match(/label\s*\{[^}]+\}/);
+            expect(labelMatch).toBeTruthy();
+            expect(labelMatch[0]).toContain('font-medium');
+        });
+    });
+    describe('Links', () => {
+        it('defines anchor style', () => {
+            expect(cssContent).toMatch(/a\s*\{/);
+        });
+        it('links have blue color and hover underline', () => {
+            const aMatch = cssContent.match(/a\s*\{[^}]+\}/);
+            expect(aMatch).toBeTruthy();
+            expect(aMatch[0]).toContain('text-blue-600');
+            expect(aMatch[0]).toContain('hover:underline');
+        });
+    });
+    describe('Code Elements', () => {
+        it('defines code and pre styles', () => {
+            expect(cssContent).toMatch(/code\s*\{/);
+            expect(cssContent).toMatch(/pre\s*\{/);
+        });
+        it('code uses monospace font', () => {
+            const codeMatch = cssContent.match(/(?<!pre\s*)code\s*\{[^}]+\}/);
+            expect(codeMatch).toBeTruthy();
+            expect(codeMatch[0]).toContain('font-mono');
+        });
+        it('pre code resets background', () => {
+            expect(cssContent).toMatch(/pre\s+code\s*\{[^}]+bg-transparent/);
+        });
+    });
+    describe('Additional Elements', () => {
+        it('defines small text style', () => {
+            expect(cssContent).toMatch(/small\s*\{/);
+        });
+        it('defines list styles', () => {
+            expect(cssContent).toMatch(/ul,\s*ol\s*\{/);
+            expect(cssContent).toMatch(/li\s*\{/);
+        });
+        it('defines blockquote style', () => {
+            expect(cssContent).toMatch(/blockquote\s*\{/);
+        });
+        it('defines emphasis styles', () => {
+            expect(cssContent).toMatch(/strong,\s*b\s*\{/);
+            expect(cssContent).toMatch(/em,\s*i\s*\{/);
+        });
+        it('defines mark/highlight style', () => {
+            expect(cssContent).toMatch(/mark\s*\{/);
+        });
+    });
+    describe('No Conflicting Utilities', () => {
+        it('does NOT define .text-muted utility (app-specific)', () => {
+            expect(cssContent).not.toMatch(/\.text-muted\s*\{/);
+        });
+        it('does NOT define .text-primary utility (app-specific)', () => {
+            expect(cssContent).not.toMatch(/\.text-primary\s*\{/);
+        });
+        it('does NOT define .text-secondary utility (app-specific)', () => {
+            expect(cssContent).not.toMatch(/\.text-secondary\s*\{/);
+        });
+    });
+});
+describe('Typography Base CSS Consistency with typography.ts', () => {
+    // Note: typography-base.css intentionally uses different colors for <p> elements
+    // to create visual hierarchy. The CSS styles raw HTML elements, while typography.ts
+    // provides class-based tokens for explicit styling.
+    //
+    // Design decision:
+    // - <p> without classes: secondary color (gray-600) for body text
+    // - typography.body class: primary color (gray-900) for emphasized content
+    //
+    // This is intentional and not a bug.
+    it('documents the intentional difference between CSS <p> and typography.body', () => {
+        // This test exists to document the design decision
+        const pMatch = cssContent.match(/p\s*\{[^}]+\}/);
+        expect(pMatch[0]).toContain('text-gray-600'); // CSS uses secondary
+        // typography.body uses gray-900 (primary) - verified in typography.test.ts
+    });
+});

package/dist/tokens/__tests__/typography.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=typography.test.d.ts.map

package/dist/tokens/__tests__/typography.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/typography.test.ts"],"names":[],"mappings":""}