@nova-design-system/nova-base 3.15.0 → 3.17.0

package/dist/plugin/nova-plugin.js

@@ -24,7 +24,7 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
         a: {
             color: 'var(--color-interaction-link-high-text)',
             'text-decoration': 'underline',
-            fontWeight: '700',
+            fontWeight: 'var(--font-weight-high-emphasis)',
         },
         'a:hover': {
             color: 'var(--color-interaction-link-high-text-hover)',
@@ -32,46 +32,113 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
         'no-underline': {
             'text-decoration': 'none',
         },
-        h1: {
-            fontSize: 'var(--global-typography-h1-font-size)',
-            lineHeight: 'var(--global-typography-h1-line-height)',
-            fontWeight: 'var(--global-typography-h1-font-weight)',
-            color: 'var(--color-content-high-text)',
-        },
-        h2: {
-            fontSize: 'var(--global-typography-h2-font-size)',
-            lineHeight: 'var(--global-typography-h2-line-height)',
-            fontWeight: 'var(--global-typography-h2-font-weight)',
-            color: 'var(--color-content-high-text)',
-        },
-        h3: {
-            fontSize: 'var(--global-typography-h3-font-size)',
-            lineHeight: 'var(--global-typography-h3-line-height)',
-            fontWeight: 'var(--global-typography-h3-font-weight)',
-            color: 'var(--color-content-high-text)',
-        },
-        h4: {
-            fontSize: 'var(--global-typography-h4-font-size)',
-            lineHeight: 'var(--global-typography-h4-line-height)',
-            fontWeight: 'var(--global-typography-h4-font-weight)',
-            color: 'var(--color-content-high-text)',
-        },
-        h5: {
-            fontSize: 'var(--global-typography-h4-font-size)',
-            lineHeight: 'var(--global-typography-h4-line-height)',
-            fontWeight: 'var(--font-weight-medium-emphasis)',
-            color: 'var(--color-content-medium-text)',
-        },
-        h6: {
-            fontSize: 'var(--global-typography-h4-font-size)',
-            lineHeight: 'var(--global-typography-h4-line-height)',
-            fontWeight: 'var(--font-weight-low-emphasis)',
-            color: 'var(--color-content-low-text)',
-        },
+        // Generate heading styles programmatically
+        ...(() => {
+            const headingConfig = {
+                h1: { level: 'h1', color: 'high' },
+                h2: { level: 'h2', color: 'high' },
+                h3: { level: 'h3', color: 'high' },
+                h4: { level: 'h4', color: 'high' },
+                h5: {
+                    level: 'h4',
+                    fontWeight: 'var(--font-weight-medium-emphasis)',
+                    color: 'medium',
+                },
+                h6: {
+                    level: 'h4',
+                    fontWeight: 'var(--font-weight-low-emphasis)',
+                    color: 'low',
+                },
+            };
+            return Object.entries(headingConfig).reduce((acc, [tag, config]) => {
+                acc[tag] = {
+                    fontSize: `var(--global-typography-${config.level}-font-size)`,
+                    lineHeight: `var(--global-typography-${config.level}-line-height)`,
+                    fontWeight: 'fontWeight' in config
+                        ? config.fontWeight
+                        : `var(--global-typography-${config.level}-font-weight)`,
+                    color: `var(--color-content-${config.color}-text)`,
+                };
+                return acc;
+            }, {});
+        })(),
     });
     addComponents({
         ...NOVA_TAILWIND_COMPONENTS,
     });
+    // Typography configuration for programmatic utility generation
+    const typographyConfig = {
+        heading: {
+            xl: {
+                size: '4xl',
+                lineHeight: 'leading-px-10',
+                letterSpacing: 'heading-xl',
+            },
+            lg: {
+                size: '3xl',
+                lineHeight: 'leading-px-8',
+                letterSpacing: 'heading-lg',
+            },
+            md: {
+                size: '2xl',
+                lineHeight: 'leading-px-7',
+                letterSpacing: 'heading-md',
+            },
+            sm: {
+                size: 'xl',
+                lineHeight: 'leading-px-6',
+                letterSpacing: 'heading-sm',
+            },
+            xs: {
+                size: 'lg',
+                lineHeight: 'leading-px-6',
+                letterSpacing: 'heading-xs',
+            },
+        },
+        text: {
+            xl: { size: 'xl', lineHeight: 'xl' },
+            lg: { size: 'lg', lineHeight: 'lg' },
+            md: { size: 'md', lineHeight: 'base' },
+            sm: { size: 'sm', lineHeight: 'sm' },
+            xs: { size: 'xs', lineHeight: 'xs' },
+        },
+        mono: {
+            md: { size: 'md', lineHeight: 'base' },
+            sm: { size: 'sm', lineHeight: 'sm' },
+            xs: { size: 'xs', lineHeight: 'xs' },
+        },
+    };
+    const weights = ['regular', 'medium', 'bold'];
+    const weightMap = {
+        regular: 'low-emphasis',
+        medium: 'medium-emphasis',
+        bold: 'high-emphasis',
+    };
+    // Generate typography utilities programmatically
+    const typographyUtilities = {};
+    Object.entries(typographyConfig).forEach(([type, sizes]) => {
+        Object.entries(sizes).forEach(([size, config]) => {
+            weights.forEach((weight) => {
+                const className = `.typo-${type}-${size}-${weight}`;
+                const baseStyles = {
+                    'font-size': `var(--font-size-${config.size})`,
+                    'font-weight': `var(--font-weight-${weightMap[weight]})`,
+                    'line-height': `var(--${config.lineHeight.startsWith('leading-')
+                        ? config.lineHeight
+                        : `line-height-${config.lineHeight}`})`,
+                };
+                // Add letter-spacing for headings
+                if (type === 'heading' && 'letterSpacing' in config) {
+                    baseStyles['letter-spacing'] = `var(--letter-spacing-${config.letterSpacing})`;
+                }
+                // Add font-family for mono
+                if (type === 'mono') {
+                    baseStyles['font-family'] = 'var(--font-family-mono), monospace';
+                }
+                typographyUtilities[className] = baseStyles;
+            });
+        });
+    });
     addUtilities({
         ...NOVA_TAILWIND_TOKENS,
         '.w-inherit': {
@@ -92,230 +159,8 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
         '.w-unset': {
             width: 'unset',
         },
-        // Typography utilities
-        // .typo-{type}-{size}-{weight}
-        // Headings
-        '.typo-heading-xl-regular': {
-            'font-size': 'var(--font-size-4xl)',
-            'font-weight': '400',
-            'line-height': 'var(--leading-px-10)',
-            'letter-spacing': 'var(--letter-spacing-heading-xl)',
-        },
-        '.typo-heading-xl-medium': {
-            'font-size': 'var(--font-size-4xl)',
-            'font-weight': '500',
-            'line-height': 'var(--leading-px-10)',
-            'letter-spacing': 'var(--letter-spacing-heading-xl)',
-        },
-        '.typo-heading-xl-bold': {
-            'font-size': 'var(--font-size-4xl)',
-            'font-weight': '700',
-            'line-height': 'var(--leading-px-10)',
-            'letter-spacing': 'var(--letter-spacing-heading-xl)',
-        },
-        '.typo-heading-lg-regular': {
-            'font-size': 'var(--font-size-3xl)',
-            'font-weight': '400',
-            'line-height': 'var(--leading-px-8)',
-            'letter-spacing': 'var(--letter-spacing-heading-lg)',
-        },
-        '.typo-heading-lg-medium': {
-            'font-size': 'var(--font-size-3xl)',
-            'font-weight': '500',
-            'line-height': 'var(--leading-px-8)',
-            'letter-spacing': 'var(--letter-spacing-heading-lg)',
-        },
-        '.typo-heading-lg-bold': {
-            'font-size': 'var(--font-size-3xl)',
-            'font-weight': '700',
-            'line-height': 'var(--leading-px-8)',
-            'letter-spacing': 'var(--letter-spacing-heading-lg)',
-        },
-        '.typo-heading-md-regular': {
-            'font-size': 'var(--font-size-2xl)',
-            'font-weight': '400',
-            'line-height': 'var(--leading-px-7)',
-            'letter-spacing': 'var(--letter-spacing-heading-md)',
-        },
-        '.typo-heading-md-medium': {
-            'font-size': 'var(--font-size-2xl)',
-            'font-weight': '500',
-            'line-height': 'var(--leading-px-7)',
-            'letter-spacing': 'var(--letter-spacing-heading-md)',
-        },
-        '.typo-heading-md-bold': {
-            'font-size': 'var(--font-size-2xl)',
-            'font-weight': '700',
-            'line-height': 'var(--leading-px-7)',
-            'letter-spacing': 'var(--letter-spacing-heading-md)',
-        },
-        '.typo-heading-sm-regular': {
-            'font-size': 'var(--font-size-xl)',
-            'font-weight': '400',
-            'line-height': 'var(--leading-px-6)',
-            'letter-spacing': 'var(--letter-spacing-heading-sm)',
-        },
-        '.typo-heading-sm-medium': {
-            'font-size': 'var(--font-size-xl)',
-            'font-weight': '500',
-            'line-height': 'var(--leading-px-6)',
-            'letter-spacing': 'var(--letter-spacing-heading-sm)',
-        },
-        '.typo-heading-sm-bold': {
-            'font-size': 'var(--font-size-xl)',
-            'font-weight': '700',
-            'line-height': 'var(--leading-px-6)',
-            'letter-spacing': 'var(--letter-spacing-heading-sm)',
-        },
-        '.typo-heading-xs-regular': {
-            'font-size': 'var(--font-size-lg)',
-            'font-weight': '400',
-            'line-height': 'var(--leading-px-6)',
-            'letter-spacing': 'var(--letter-spacing-heading-xs)',
-        },
-        '.typo-heading-xs-medium': {
-            'font-size': 'var(--font-size-lg)',
-            'font-weight': '500',
-            'line-height': 'var(--leading-px-6)',
-            'letter-spacing': 'var(--letter-spacing-heading-xs)',
-        },
-        '.typo-heading-xs-bold': {
-            'font-size': 'var(--font-size-lg)',
-            'font-weight': '700',
-            'line-height': 'var(--leading-px-6)',
-            'letter-spacing': 'var(--letter-spacing-heading-xs)',
-        },
-        // Text
-        '.typo-text-xl-regular': {
-            'font-size': 'var(--font-size-xl)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-xl)',
-        },
-        '.typo-text-xl-medium': {
-            'font-size': 'var(--font-size-xl)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-xl)',
-        },
-        '.typo-text-xl-bold': {
-            'font-size': 'var(--font-size-xl)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-xl)',
-        },
-        '.typo-text-lg-regular': {
-            'font-size': 'var(--font-size-lg)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-lg)',
-        },
-        '.typo-text-lg-medium': {
-            'font-size': 'var(--font-size-lg)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-lg)',
-        },
-        '.typo-text-lg-bold': {
-            'font-size': 'var(--font-size-lg)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-lg)',
-        },
-        '.typo-text-md-regular': {
-            'font-size': 'var(--font-size-md)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-base)',
-        },
-        '.typo-text-md-medium': {
-            'font-size': 'var(--font-size-md)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-base)',
-        },
-        '.typo-text-md-bold': {
-            'font-size': 'var(--font-size-md)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-base)',
-        },
-        '.typo-text-sm-regular': {
-            'font-size': 'var(--font-size-sm)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-sm)',
-        },
-        '.typo-text-sm-medium': {
-            'font-size': 'var(--font-size-sm)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-sm)',
-        },
-        '.typo-text-sm-bold': {
-            'font-size': 'var(--font-size-sm)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-sm)',
-        },
-        '.typo-text-xs-regular': {
-            'font-size': 'var(--font-size-xs)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-xs)',
-        },
-        '.typo-text-xs-medium': {
-            'font-size': 'var(--font-size-xs)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-xs)',
-        },
-        '.typo-text-xs-bold': {
-            'font-size': 'var(--font-size-xs)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-xs)',
-        },
-        // Mono
-        '.typo-mono-md-regular': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-md)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-base)',
-        },
-        '.typo-mono-md-medium': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-md)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-base)',
-        },
-        '.typo-mono-md-bold': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-md)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-base)',
-        },
-        '.typo-mono-sm-regular': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-sm)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-sm)',
-        },
-        '.typo-mono-sm-medium': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-sm)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-sm)',
-        },
-        '.typo-mono-sm-bold': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-sm)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-sm)',
-        },
-        '.typo-mono-xs-regular': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-xs)',
-            'font-weight': '400',
-            'line-height': 'var(--line-height-xs)',
-        },
-        '.typo-mono-xs-medium': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-xs)',
-            'font-weight': '500',
-            'line-height': 'var(--line-height-xs)',
-        },
-        '.typo-mono-xs-bold': {
-            'font-family': 'TT Norms Pro Mono',
-            'font-size': 'var(--font-size-xs)',
-            'font-weight': '700',
-            'line-height': 'var(--line-height-xs)',
-        },
+        // Typography utilities generated programmatically
+        ...typographyUtilities,
     });
 });
 export default novaTailwindPlugin;

package/dist/plugin/nova-safelist.js

@@ -313,11 +313,11 @@ const resize = [
     },
 ];
 // From the nova tailwind plugin (nova-plugin.ts)
-const utils = [
-    { pattern: /^text-(high|medium|low)$/ },
-    { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
-    { pattern: /^border-(high|medium|low)$/ },
-];
+/*const utils = [
+  { pattern: /^text-(high|medium|low)$/ },
+  { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
+  { pattern: /^border-(high|medium|low)$/ },
+];*/
 // From the nova tailwind components (nova-tailwind-components.ts)
 const components = [
     ...Object.keys(NOVA_TAILWIND_COMPONENTS).filter((key) => /^\.[a-zA-Z0-9-]+$/.test(key)),
@@ -349,7 +349,7 @@ export const novaThemeSafelist = [
     ...colors,
     ...cursors,
     ...resize,
-    ...utils,
+    //...utils,
     ...components,
     ...tokens,
 ];

package/dist/plugin/nova-theme.js

@@ -217,6 +217,32 @@ export const colors = {
         900: 'var(--color-orange-900)',
         950: 'var(--color-orange-950)',
     },
+    // Brand colors
+    brand: {
+        50: 'var(--color-brand-50)',
+        100: 'var(--color-brand-100)',
+        200: 'var(--color-brand-200)',
+        300: 'var(--color-brand-300)',
+        400: 'var(--color-brand-400)',
+        500: 'var(--color-brand-500)',
+        600: 'var(--color-brand-600)',
+        700: 'var(--color-brand-700)',
+        800: 'var(--color-brand-800)',
+        900: 'var(--color-brand-900)',
+    },
+    // Accent colors
+    accent: {
+        50: 'var(--color-accent-50)',
+        100: 'var(--color-accent-100)',
+        200: 'var(--color-accent-200)',
+        300: 'var(--color-accent-300)',
+        400: 'var(--color-accent-400)',
+        500: 'var(--color-accent-500)',
+        600: 'var(--color-accent-600)',
+        700: 'var(--color-accent-700)',
+        800: 'var(--color-accent-800)',
+        900: 'var(--color-accent-900)',
+    },
     // Base colors
     black: 'var(--color-base-black)',
     white: 'var(--color-base-white)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-base",
-  "version": "3.15.0",
+  "version": "3.17.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",