@cbnventures/docusaurus-preset-nova 0.16.2 → 0.18.0

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

@@ -1,6 +1,6 @@
 import { ok } from 'node:assert/strict';
 import { describe, it } from 'vitest';
-import { CssGenerator } from '../../lib/css-generator.js';
+import { Runner as CssGenerator } from '../../lib/css-generator.js';
 describe('CssGenerator generate', async () => {
     it('produces CSS with all variable categories', () => {
         const result = CssGenerator.generate({
@@ -11,9 +11,24 @@ describe('CssGenerator generate', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -35,24 +50,33 @@ describe('CssGenerator generate', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         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 includesText = result.includes('--nova-color-text:');
+        const includesBorder = result.includes('--nova-color-border:');
+        const includesSurface = result.includes('--nova-color-surface-raised:');
         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:');
+        const includesMotionEasing = result.includes('--nova-motion-easing:');
         ok(includesRoot);
         ok(includesPrimary);
         ok(includesAccent);
-        ok(includesNeutral);
+        ok(includesText);
+        ok(includesBorder);
+        ok(includesSurface);
         ok(includesFont);
         ok(includesShape);
         ok(includesDepth);
         ok(includesMotion);
+        ok(includesMotionEasing);
         return;
     });
     it('includes all eleven shade levels for each color', () => {
@@ -64,9 +88,24 @@ describe('CssGenerator generate', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -88,6 +127,9 @@ describe('CssGenerator generate', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesFifty = result.includes('--nova-color-primary-50:');
@@ -110,9 +152,24 @@ describe('CssGenerator generate depth variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -134,6 +191,9 @@ describe('CssGenerator generate depth variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesNone = result.includes('--nova-depth-card-shadow: none;');
@@ -149,9 +209,24 @@ describe('CssGenerator generate depth variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -173,6 +248,9 @@ describe('CssGenerator generate depth variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesShadow = result.includes('--nova-depth-card-shadow: 0 4px 6px');
@@ -188,9 +266,24 @@ describe('CssGenerator generate depth variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -212,6 +305,9 @@ describe('CssGenerator generate depth variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesBlur = result.includes('--nova-depth-card-backdrop: blur(5px);');
@@ -230,9 +326,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -254,6 +365,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const sections = result.split('@media');
@@ -273,9 +387,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -297,6 +426,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const sections = result.split('@media');
@@ -316,9 +448,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -340,6 +487,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const sections = result.split('@media');
@@ -359,9 +509,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -383,6 +548,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const sections = result.split('@media');
@@ -407,9 +575,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -431,6 +614,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const sections = result.split('@media');
@@ -455,9 +641,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -479,6 +680,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const sections = result.split('@media');
@@ -503,9 +707,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -527,6 +746,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesFourEighty = result.includes('@media (min-width: 480px)');
@@ -544,9 +766,24 @@ describe('CssGenerator generate grid variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -568,6 +805,9 @@ describe('CssGenerator generate grid variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesRoot = result.includes(':root {');
@@ -590,9 +830,24 @@ describe('CssGenerator generate motion variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -614,6 +869,9 @@ describe('CssGenerator generate motion variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesZero = result.includes('--nova-motion-duration: 0ms;');
@@ -629,9 +887,24 @@ describe('CssGenerator generate motion variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -653,12 +926,72 @@ describe('CssGenerator generate motion variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesThreeHundred = result.includes('--nova-motion-duration: 300ms;');
         ok(includesThreeHundred);
         return;
     });
+    it('produces canonical Nova ease curve for motion easing', () => {
+        const result = CssGenerator.generate({
+            preset: {
+                logo: {
+                    title: 'Test',
+                    alt: 'Test',
+                    src: '/test/logo.svg',
+                },
+                colors: {
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
+                },
+                fonts: {
+                    display: 'Sora',
+                    body: 'DM Sans',
+                    code: 'JetBrains Mono',
+                },
+                shape: {
+                    radius: 'rounded',
+                    density: 'comfortable',
+                },
+                depth: {
+                    cards: 'flat',
+                    codeBlocks: 'flat',
+                },
+                motion: {
+                    speed: 'normal',
+                    staggeredReveals: false,
+                    hoverEffects: false,
+                },
+                navbar: 'bridge',
+                footer: 'commons',
+                cta: {
+                    contained: false,
+                },
+            },
+        });
+        const includesCurve = result.includes('--nova-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);');
+        ok(includesCurve);
+        return;
+    });
     return;
 });
 describe('CssGenerator generate shape variables', async () => {
@@ -671,9 +1004,24 @@ describe('CssGenerator generate shape variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -695,6 +1043,9 @@ describe('CssGenerator generate shape variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesZero = result.includes('--nova-shape-radius: 0;');
@@ -710,9 +1061,24 @@ describe('CssGenerator generate shape variables', async () => {
                     src: '/test/logo.svg',
                 },
                 colors: {
-                    primary: '#ea580c',
-                    accent: '#fbbf24',
-                    neutral: '#78716c',
+                    primary: {
+                        light: '#ea580c', dark: '#ea580c',
+                    },
+                    accent: {
+                        light: '#fbbf24', dark: '#fbbf24',
+                    },
+                    text: {
+                        light: '#1c1917', dark: '#e7e5e4',
+                    },
+                    border: {
+                        light: '#d6d3d1', dark: '#44403c',
+                    },
+                    warning: {
+                        light: '#f59e0b', dark: '#fbbf24',
+                    },
+                    danger: {
+                        light: '#ef4444', dark: '#f87171',
+                    },
                 },
                 fonts: {
                     display: 'Sora',
@@ -734,6 +1100,9 @@ describe('CssGenerator generate shape variables', async () => {
                 },
                 navbar: 'bridge',
                 footer: 'commons',
+                cta: {
+                    contained: false,
+                },
             },
         });
         const includesLargeRadius = result.includes('--nova-shape-radius: 9999px;');