@nova-design-system/nova-base 3.0.0-beta.31 → 3.0.0-beta.34

package/dist/lib/{nova-tailwind-tokens.d.ts → generated/nova-tailwind-tokens.d.ts}

@@ -3,21 +3,6 @@
  * @ref generate-tailwind-tokens.ts
  */
 export declare const NOVA_TAILWIND_TOKENS: {
-    '.border-base-focus': {
-        'border-color': string;
-    };
-    '.border-base-focus-high': {
-        'border-color': string;
-    };
-    '.border-base-high-emphasis': {
-        'border-color': string;
-    };
-    '.border-base-low-emphasis': {
-        'border-color': string;
-    };
-    '.border-base-medium-emphasis': {
-        'border-color': string;
-    };
     '.border-high': {
         'border-color': string;
     };
@@ -192,54 +177,6 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.text-feedback-warning-low': {
         color: string;
     };
-    '.bg-interaction-brand-high': {
-        'background-color': string;
-    };
-    '.bg-interaction-brand-high-hover': {
-        'background-color': string;
-    };
-    '.border-interaction-brand-high': {
-        'border-color': string;
-    };
-    '.border-interaction-brand-high-hover': {
-        'border-color': string;
-    };
-    '.icon-interaction-brand-high': {
-        color: string;
-    };
-    '.icon-interaction-brand-high-hover': {
-        color: string;
-    };
-    '.text-interaction-brand-high': {
-        color: string;
-    };
-    '.text-interaction-brand-high-hover': {
-        color: string;
-    };
-    '.bg-interaction-brand-low': {
-        'background-color': string;
-    };
-    '.bg-interaction-brand-low-hover': {
-        'background-color': string;
-    };
-    '.border-interaction-brand-low': {
-        'border-color': string;
-    };
-    '.border-interaction-brand-low-hover': {
-        'border-color': string;
-    };
-    '.icon-interaction-brand-low': {
-        color: string;
-    };
-    '.icon-interaction-brand-low-hover': {
-        color: string;
-    };
-    '.text-interaction-brand-low': {
-        color: string;
-    };
-    '.text-interaction-brand-low-hover': {
-        color: string;
-    };
     '.bg-interaction-container-branded-high': {
         'background-color': string;
     };
@@ -324,18 +261,6 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.text-interaction-link-high-hover': {
         color: string;
     };
-    '.icon-interaction-link-inline': {
-        color: string;
-    };
-    '.icon-interaction-link-inline-hover': {
-        color: string;
-    };
-    '.text-interaction-link-inline': {
-        color: string;
-    };
-    '.text-interaction-link-inline-hover': {
-        color: string;
-    };
     '.icon-interaction-link-low': {
         color: string;
     };
@@ -348,54 +273,6 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.text-interaction-link-low-hover': {
         color: string;
     };
-    '.icon-interaction-link-standalone': {
-        color: string;
-    };
-    '.icon-interaction-link-standalone-hover': {
-        color: string;
-    };
-    '.text-interaction-link-standalone': {
-        color: string;
-    };
-    '.text-interaction-link-standalone-hover': {
-        color: string;
-    };
-    '.icon-interaction-link-table': {
-        color: string;
-    };
-    '.icon-interaction-link-table-hover': {
-        color: string;
-    };
-    '.text-interaction-link-table': {
-        color: string;
-    };
-    '.text-interaction-link-table-hover': {
-        color: string;
-    };
-    '.bg-interaction-neutral': {
-        'background-color': string;
-    };
-    '.bg-interaction-neutral-hover': {
-        'background-color': string;
-    };
-    '.border-interaction-neutral': {
-        'border-color': string;
-    };
-    '.border-interaction-neutral-hover': {
-        'border-color': string;
-    };
-    '.icon-interaction-neutral': {
-        color: string;
-    };
-    '.icon-interaction-neutral-hover': {
-        color: string;
-    };
-    '.text-interaction-neutral': {
-        color: string;
-    };
-    '.text-interaction-neutral-hover': {
-        color: string;
-    };
     '.bg-level-00': {
         'background-color': string;
     };

package/dist/lib/{nova-tailwind-tokens.js → generated/nova-tailwind-tokens.js}

@@ -4,21 +4,6 @@
  * @ref generate-tailwind-tokens.ts
  */
 export const NOVA_TAILWIND_TOKENS = {
-    '.border-base-focus': {
-        'border-color': 'var(--color-base-border-focus)'
-    },
-    '.border-base-focus-high': {
-        'border-color': 'var(--color-base-border-focus-high)'
-    },
-    '.border-base-high-emphasis': {
-        'border-color': 'var(--color-base-border-high-emphasis)'
-    },
-    '.border-base-low-emphasis': {
-        'border-color': 'var(--color-base-border-low-emphasis)'
-    },
-    '.border-base-medium-emphasis': {
-        'border-color': 'var(--color-base-border-medium-emphasis)'
-    },
     '.border-high': {
         'border-color': 'var(--color-content-high-border)'
     },
@@ -193,54 +178,6 @@ export const NOVA_TAILWIND_TOKENS = {
     '.text-feedback-warning-low': {
         'color': 'var(--color-feedback-warning-low-text)'
     },
-    '.bg-interaction-brand-high': {
-        'background-color': 'var(--color-interaction-brand-high-background)'
-    },
-    '.bg-interaction-brand-high-hover': {
-        'background-color': 'var(--color-interaction-brand-high-background-hover)'
-    },
-    '.border-interaction-brand-high': {
-        'border-color': 'var(--color-interaction-brand-high-border)'
-    },
-    '.border-interaction-brand-high-hover': {
-        'border-color': 'var(--color-interaction-brand-high-border-hover)'
-    },
-    '.icon-interaction-brand-high': {
-        'color': 'var(--color-interaction-brand-high-icon)'
-    },
-    '.icon-interaction-brand-high-hover': {
-        'color': 'var(--color-interaction-brand-high-icon-hover)'
-    },
-    '.text-interaction-brand-high': {
-        'color': 'var(--color-interaction-brand-high-text)'
-    },
-    '.text-interaction-brand-high-hover': {
-        'color': 'var(--color-interaction-brand-high-text-hover)'
-    },
-    '.bg-interaction-brand-low': {
-        'background-color': 'var(--color-interaction-brand-low-background)'
-    },
-    '.bg-interaction-brand-low-hover': {
-        'background-color': 'var(--color-interaction-brand-low-background-hover)'
-    },
-    '.border-interaction-brand-low': {
-        'border-color': 'var(--color-interaction-brand-low-border)'
-    },
-    '.border-interaction-brand-low-hover': {
-        'border-color': 'var(--color-interaction-brand-low-border-hover)'
-    },
-    '.icon-interaction-brand-low': {
-        'color': 'var(--color-interaction-brand-low-icon)'
-    },
-    '.icon-interaction-brand-low-hover': {
-        'color': 'var(--color-interaction-brand-low-icon-hover)'
-    },
-    '.text-interaction-brand-low': {
-        'color': 'var(--color-interaction-brand-low-text)'
-    },
-    '.text-interaction-brand-low-hover': {
-        'color': 'var(--color-interaction-brand-low-text-hover)'
-    },
     '.bg-interaction-container-branded-high': {
         'background-color': 'var(--color-interaction-container-branded-high-background)'
     },
@@ -325,18 +262,6 @@ export const NOVA_TAILWIND_TOKENS = {
     '.text-interaction-link-high-hover': {
         'color': 'var(--color-interaction-link-high-text-hover)'
     },
-    '.icon-interaction-link-inline': {
-        'color': 'var(--color-interaction-link-inline-icon)'
-    },
-    '.icon-interaction-link-inline-hover': {
-        'color': 'var(--color-interaction-link-inline-icon-hover)'
-    },
-    '.text-interaction-link-inline': {
-        'color': 'var(--color-interaction-link-inline-text)'
-    },
-    '.text-interaction-link-inline-hover': {
-        'color': 'var(--color-interaction-link-inline-text-hover)'
-    },
     '.icon-interaction-link-low': {
         'color': 'var(--color-interaction-link-low-icon)'
     },
@@ -349,54 +274,6 @@ export const NOVA_TAILWIND_TOKENS = {
     '.text-interaction-link-low-hover': {
         'color': 'var(--color-interaction-link-low-text-hover)'
     },
-    '.icon-interaction-link-standalone': {
-        'color': 'var(--color-interaction-link-standalone-icon)'
-    },
-    '.icon-interaction-link-standalone-hover': {
-        'color': 'var(--color-interaction-link-standalone-icon-hover)'
-    },
-    '.text-interaction-link-standalone': {
-        'color': 'var(--color-interaction-link-standalone-text)'
-    },
-    '.text-interaction-link-standalone-hover': {
-        'color': 'var(--color-interaction-link-standalone-text-hover)'
-    },
-    '.icon-interaction-link-table': {
-        'color': 'var(--color-interaction-link-table-icon)'
-    },
-    '.icon-interaction-link-table-hover': {
-        'color': 'var(--color-interaction-link-table-icon-hover)'
-    },
-    '.text-interaction-link-table': {
-        'color': 'var(--color-interaction-link-table-text)'
-    },
-    '.text-interaction-link-table-hover': {
-        'color': 'var(--color-interaction-link-table-text-hover)'
-    },
-    '.bg-interaction-neutral': {
-        'background-color': 'var(--color-interaction-neutral-background)'
-    },
-    '.bg-interaction-neutral-hover': {
-        'background-color': 'var(--color-interaction-neutral-background-hover)'
-    },
-    '.border-interaction-neutral': {
-        'border-color': 'var(--color-interaction-neutral-border)'
-    },
-    '.border-interaction-neutral-hover': {
-        'border-color': 'var(--color-interaction-neutral-border-hover)'
-    },
-    '.icon-interaction-neutral': {
-        'color': 'var(--color-interaction-neutral-icon)'
-    },
-    '.icon-interaction-neutral-hover': {
-        'color': 'var(--color-interaction-neutral-icon-hover)'
-    },
-    '.text-interaction-neutral': {
-        'color': 'var(--color-interaction-neutral-text)'
-    },
-    '.text-interaction-neutral-hover': {
-        'color': 'var(--color-interaction-neutral-text-hover)'
-    },
     '.bg-level-00': {
         'background-color': 'var(--color-level-00-background)'
     },

package/dist/lib/{nova-plugin.js → lib/nova-plugin.js}

@@ -2,7 +2,8 @@
  * @fileoverview This file contains various tailwind utilities for nova
  */
 import plugin from 'tailwindcss/plugin.js';
-import { NOVA_TAILWIND_TOKENS } from './nova-tailwind-tokens.js';
+import { NOVA_TAILWIND_TOKENS } from '../generated/nova-tailwind-tokens.js';
+import { NOVA_TAILWIND_COMPONENTS } from '../generated/nova-tailwind-components.js';
 export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase, theme }) => {
     addBase({
         'body, html': {
@@ -66,14 +67,7 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
         },
     });
     addComponents({
-        '.link': {
-            color: 'var(--color-interaction-link-high-text)',
-            fontWeight: '500',
-            'text-decoration': 'none',
-        },
-        '.link:hover': {
-            color: 'var(--color-interaction-link-high-text-hover)',
-        },
+        ...NOVA_TAILWIND_COMPONENTS,
     });
     addUtilities({
         ...NOVA_TAILWIND_TOKENS,

package/dist/lib/{nova-safelist.js → lib/nova-safelist.js}

@@ -7,7 +7,8 @@
  * they can configure Tailwind directly without using the predefined safelists.
  */
 import { spacing } from './nova-theme.js';
-import { NOVA_TAILWIND_TOKENS } from './nova-tailwind-tokens.js';
+import { NOVA_TAILWIND_TOKENS } from '../generated/nova-tailwind-tokens.js';
+import { NOVA_TAILWIND_COMPONENTS } from '../generated/nova-tailwind-components.js';
 // Enables responsive spacing modifiers for safelist variants
 export const responsive = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 // Enables responsive color schemes for safelist variants
@@ -317,8 +318,10 @@ const utils = [
     { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
     { pattern: /^border-(high|medium|low)$/ },
 ];
-// From the nova tailwind plugin (nova-plugin.ts)
-const components = [{ pattern: /^link$/, variants: pointer }];
+// From the nova tailwind components (nova-tailwind-components.ts)
+const components = [
+    ...Object.keys(NOVA_TAILWIND_COMPONENTS).filter((key) => /^\.[a-zA-Z0-9-]+$/.test(key)),
+];
 // From the nova tailwind tokens (nova-tailwind-tokens.ts)
 const tokens = [
     ...Object.keys(NOVA_TAILWIND_TOKENS),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-base",
-  "version": "3.0.0-beta.31",
+  "version": "3.0.0-beta.34",
   "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",
@@ -14,9 +14,10 @@
     "generate-tokens": "tsx scripts/extract-tokens.ts && tsx scripts/generate-token-files.ts",
     "generate-css-utils": "tailwindcss -i ./lib/tailwind.css -o ./dist/css/nova-utils.css",
     "generate-tailwind-tokens": "tsx scripts/generate-tailwind-tokens.ts",
+    "generate-tailwind-components": "tsx scripts/generate-tailwind-components.ts",
     "build-lib": "tsc && tsc --module CommonJS --moduleResolution Node --declaration false --outDir ./dist/lib/cjs",
     "merge-css": "tsx scripts/merge-css.ts",
-    "build": "tsx scripts/generate-tokens.ts && npm run merge-css && npm run generate-tailwind-tokens && npm run generate-css-utils && npm run build-lib",
+    "build": "npm run clean && tsx scripts/generate-tokens.ts && npm run generate-tailwind-components && npm run merge-css && npm run generate-tailwind-tokens && npm run generate-css-utils && npm run build-lib",
     "clean": "rimraf dist",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.node.json --noEmit"
   },
@@ -28,6 +29,10 @@
     "style-dictionary": "4.0.0",
     "tailwindcss": "3.4.10"
   },
+  "devDependencies": {
+    "nova-utils": "*",
+    "sass": "1.83.4"
+  },
   "exports": {
     "./dist/*": "./dist/*",
     "./assets/*": "./assets/*",