@cbnventures/docusaurus-preset-nova 0.0.0 → 0.15.1

package/build/src/tests/lib/css-generator.test.js

@@ -0,0 +1,745 @@
+import { ok } from 'node:assert/strict';
+import { describe, it } from 'vitest';
+import { CssGenerator } from '../../lib/css-generator.js';
+describe('CssGenerator generate', async () => {
+    it('produces CSS with all variable categories', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'elevated',
+                    codeBlocks: 'bordered',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesRoot = result.includes(':root {');
+        const includesPrimary = result.includes('--nova-color-primary-');
+        const includesAccent = result.includes('--nova-color-accent-');
+        const includesNeutral = result.includes('--nova-color-neutral-');
+        const includesFont = result.includes('--nova-font-display:');
+        const includesShape = result.includes('--nova-shape-radius:');
+        const includesDepth = result.includes('--nova-depth-card-');
+        const includesMotion = result.includes('--nova-motion-duration:');
+        ok(includesRoot);
+        ok(includesPrimary);
+        ok(includesAccent);
+        ok(includesNeutral);
+        ok(includesFont);
+        ok(includesShape);
+        ok(includesDepth);
+        ok(includesMotion);
+        return;
+    });
+    it('includes all eleven shade levels for each color', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'none',
+                    staggeredReveals: false,
+                    hoverEffects: false,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesFifty = result.includes('--nova-color-primary-50:');
+        const includesNineHundred = result.includes('--nova-color-primary-900:');
+        const includesNineFifty = result.includes('--nova-color-primary-950:');
+        ok(includesFifty);
+        ok(includesNineHundred);
+        ok(includesNineFifty);
+        return;
+    });
+    return;
+});
+describe('CssGenerator generate depth variables', async () => {
+    it('produces flat card depth with no shadow', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesNone = result.includes('--nova-depth-card-shadow: none;');
+        ok(includesNone);
+        return;
+    });
+    it('produces elevated card depth with shadow', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'elevated',
+                    codeBlocks: 'bordered',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesShadow = result.includes('--nova-depth-card-shadow: 0 4px 6px');
+        ok(includesShadow);
+        return;
+    });
+    it('produces glass card depth with backdrop blur', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'glass',
+                    codeBlocks: 'elevated',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesBlur = result.includes('--nova-depth-card-backdrop: blur(5px);');
+        ok(includesBlur);
+        return;
+    });
+    return;
+});
+describe('CssGenerator generate grid variables', async () => {
+    it('produces 12px gutter and padding for compact density', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'compact',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const sections = result.split('@media');
+        const rootBlock = String(sections[0]);
+        const includesGutterTwelve = rootBlock.includes('--nova-grid-gutter: 12px;');
+        const includesPaddingTwelve = rootBlock.includes('--nova-grid-padding: 12px;');
+        ok(includesGutterTwelve);
+        ok(includesPaddingTwelve);
+        return;
+    });
+    it('produces 16px gutter and padding for comfortable density', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const sections = result.split('@media');
+        const rootBlock = String(sections[0]);
+        const includesGutterSixteen = rootBlock.includes('--nova-grid-gutter: 16px;');
+        const includesPaddingSixteen = rootBlock.includes('--nova-grid-padding: 16px;');
+        ok(includesGutterSixteen);
+        ok(includesPaddingSixteen);
+        return;
+    });
+    it('produces 20px gutter and padding for spacious density', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'spacious',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const sections = result.split('@media');
+        const rootBlock = String(sections[0]);
+        const includesGutterTwenty = rootBlock.includes('--nova-grid-gutter: 20px;');
+        const includesPaddingTwenty = rootBlock.includes('--nova-grid-padding: 20px;');
+        ok(includesGutterTwenty);
+        ok(includesPaddingTwenty);
+        return;
+    });
+    it('produces correct medium and large breakpoint values for compact density', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'compact',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const sections = result.split('@media');
+        const mediumBlock = String(sections[1]);
+        const largeBlock = String(sections[2]);
+        const includesMediumGutterSixteen = mediumBlock.includes('--nova-grid-gutter: 16px;');
+        const includesMediumPaddingSixteen = mediumBlock.includes('--nova-grid-padding: 16px;');
+        const includesLargeGutterTwenty = largeBlock.includes('--nova-grid-gutter: 20px;');
+        const includesLargePaddingTwenty = largeBlock.includes('--nova-grid-padding: 20px;');
+        ok(includesMediumGutterSixteen);
+        ok(includesMediumPaddingSixteen);
+        ok(includesLargeGutterTwenty);
+        ok(includesLargePaddingTwenty);
+        return;
+    });
+    it('produces correct medium and large breakpoint values for comfortable density', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const sections = result.split('@media');
+        const mediumBlock = String(sections[1]);
+        const largeBlock = String(sections[2]);
+        const includesMediumGutterTwenty = mediumBlock.includes('--nova-grid-gutter: 20px;');
+        const includesMediumPaddingTwenty = mediumBlock.includes('--nova-grid-padding: 20px;');
+        const includesLargeGutterTwentyFour = largeBlock.includes('--nova-grid-gutter: 24px;');
+        const includesLargePaddingTwentyFour = largeBlock.includes('--nova-grid-padding: 24px;');
+        ok(includesMediumGutterTwenty);
+        ok(includesMediumPaddingTwenty);
+        ok(includesLargeGutterTwentyFour);
+        ok(includesLargePaddingTwentyFour);
+        return;
+    });
+    it('produces correct medium and large breakpoint values for spacious density', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'spacious',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const sections = result.split('@media');
+        const mediumBlock = String(sections[1]);
+        const largeBlock = String(sections[2]);
+        const includesMediumGutterTwentyFour = mediumBlock.includes('--nova-grid-gutter: 24px;');
+        const includesMediumPaddingTwentyFour = mediumBlock.includes('--nova-grid-padding: 24px;');
+        const includesLargeGutterThirtyTwo = largeBlock.includes('--nova-grid-gutter: 32px;');
+        const includesLargePaddingThirtyTwo = largeBlock.includes('--nova-grid-padding: 32px;');
+        ok(includesMediumGutterTwentyFour);
+        ok(includesMediumPaddingTwentyFour);
+        ok(includesLargeGutterThirtyTwo);
+        ok(includesLargePaddingThirtyTwo);
+        return;
+    });
+    it('includes responsive media query blocks', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesFourEighty = result.includes('@media (min-width: 480px)');
+        const includesSevenSixtyEight = result.includes('@media (min-width: 768px)');
+        ok(includesFourEighty);
+        ok(includesSevenSixtyEight);
+        return;
+    });
+    it('integration: generate output contains root block and post-root media queries', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesRoot = result.includes(':root {');
+        const includesMedia = result.includes('@media (min-width:');
+        const includesGutter = result.includes('--nova-grid-gutter:');
+        ok(includesRoot);
+        ok(includesMedia);
+        ok(includesGutter);
+        return;
+    });
+    return;
+});
+describe('CssGenerator generate motion variables', async () => {
+    it('produces zero duration for none speed', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'none',
+                    staggeredReveals: false,
+                    hoverEffects: false,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesZero = result.includes('--nova-motion-duration: 0ms;');
+        ok(includesZero);
+        return;
+    });
+    it('produces 300ms duration for expressive speed', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'expressive',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesThreeHundred = result.includes('--nova-motion-duration: 300ms;');
+        ok(includesThreeHundred);
+        return;
+    });
+    return;
+});
+describe('CssGenerator generate shape variables', async () => {
+    it('produces zero radius for sharp shape', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'sharp',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesZero = result.includes('--nova-shape-radius: 0;');
+        ok(includesZero);
+        return;
+    });
+    it('produces 9999px radius for pill shape', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: '#ea580c',
+                    accent: '#fbbf24',
+                    neutral: '#78716c',
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'pill',
+                    density: 'spacious',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: true,
+                    hoverEffects: true,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+            },
+        });
+        const includesLargeRadius = result.includes('--nova-shape-radius: 9999px;');
+        ok(includesLargeRadius);
+        return;
+    });
+    return;
+});
+//# sourceMappingURL=css-generator.test.js.map