@nova-design-system/nova-base 3.0.0-beta.30 → 3.0.0-beta.33

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

@@ -2,6 +2,8 @@
  * @fileoverview This file contains various tailwind utilities for nova
  */
 import plugin from 'tailwindcss/plugin.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': {
@@ -20,61 +22,55 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
             'border-radius': 'var(--radius-rounded)',
         },
         a: {
-            color: 'var(--color-interaction-link-inline-text)',
+            color: 'var(--color-interaction-link-high-text)',
             'text-decoration': 'underline',
             fontWeight: '700',
         },
         'a:hover': {
-            color: 'var(--color-interaction-link-inline-text-hover)',
+            color: 'var(--color-interaction-link-high-text-hover)',
         },
         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-base-content-high-emphasis)',
+            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-base-content-high-emphasis)',
+            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-base-content-high-emphasis)',
+            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-base-content-high-emphasis)',
+            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-base-content-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-base-content-low-emphasis)',
+            color: 'var(--color-content-low-text)',
         },
     });
     addComponents({
-        '.link': {
-            color: 'var(--color-interaction-link-standalone-text)',
-            fontWeight: '500',
-            'text-decoration': 'none',
-        },
-        '.link:hover': {
-            color: 'var(--color-interaction-link-standalone-text-hover)',
-        },
+        ...NOVA_TAILWIND_COMPONENTS,
     });
     addUtilities({
+        ...NOVA_TAILWIND_TOKENS,
         '.visually-hidden': {
             position: 'absolute',
             padding: '0',
@@ -86,54 +82,6 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
             margin: '-1px',
             clip: 'rect(0, 0, 0, 0)',
         },
-        '.text-high-emphasis': {
-            color: 'var(--color-base-content-high-emphasis)',
-        },
-        '.text-medium-emphasis': {
-            color: 'var(--color-base-content-medium-emphasis)',
-        },
-        '.text-low-emphasis': {
-            color: 'var(--color-base-content-low-emphasis)',
-        },
-        '.bg-level-00': {
-            'background-color': 'var(--color-base-level-00)',
-        },
-        '.bg-level-00-hover': {
-            'background-color': 'var(--color-base-level-00-hover)',
-        },
-        '.bg-level-10': {
-            'background-color': 'var(--color-base-level-10)',
-        },
-        '.bg-level-10-hover': {
-            'background-color': 'var(--color-base-level-10-hover)',
-        },
-        '.bg-level-20': {
-            'background-color': 'var(--color-base-level-20)',
-        },
-        '.bg-level-20-hover': {
-            'background-color': 'var(--color-base-level-20-hover)',
-        },
-        '.bg-level-30': {
-            'background-color': 'var(--color-base-level-30)',
-        },
-        '.bg-level-30-hover': {
-            'background-color': 'var(--color-base-level-30-hover)',
-        },
-        '.bg-level-40': {
-            'background-color': 'var(--color-base-level-40)',
-        },
-        '.bg-level-40-hover': {
-            'background-color': 'var(--color-base-level-40-hover)',
-        },
-        '.border-high-emphasis': {
-            'border-color': 'var(--color-base-border-high-emphasis)',
-        },
-        '.border-medium-emphasis': {
-            'border-color': 'var(--color-base-border-medium-emphasis)',
-        },
-        '.border-low-emphasis': {
-            'border-color': 'var(--color-base-border-low-emphasis)',
-        },
         '.w-inherit': {
             width: 'inherit',
         },

package/dist/lib/{nova-safelist.d.ts → lib/nova-safelist.d.ts}

@@ -21,6 +21,6 @@ export declare const gap: {
     pattern: RegExp;
     variants: string[];
 }[];
-export declare const novaThemeSafelist: {
+export declare const novaThemeSafelist: (string | {
     pattern: RegExp;
-}[];
+})[];

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

@@ -7,6 +7,8 @@
  * they can configure Tailwind directly without using the predefined safelists.
  */
 import { spacing } from './nova-theme.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
@@ -312,12 +314,19 @@ const resize = [
 // From the nova tailwind plugin (nova-plugin.ts)
 const utils = [
     { pattern: /^visually-hidden$/, variants: responsive },
-    { pattern: /^font-(high|medium|low)-emphasis$/ },
+    { pattern: /^text-(high|medium|low)$/ },
     { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
-    { pattern: /^border-(high|medium|low)-emphasis$/ },
+    { 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)),
+];
+// From the nova tailwind tokens (nova-tailwind-tokens.ts)
+const tokens = [
+    ...Object.keys(NOVA_TAILWIND_TOKENS),
+    { pattern: /-hover$/, variants: ['hover'] },
 ];
-// From the nova tailwind plugin (nova-plugin.ts)
-const components = [{ pattern: /^link$/, variants: pointer }];
 export const novaThemeSafelist = [
     ...padding,
     ...margin,
@@ -341,4 +350,5 @@ export const novaThemeSafelist = [
     ...resize,
     ...utils,
     ...components,
+    ...tokens,
 ];

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

@@ -84,8 +84,20 @@ export const lineHeight = {
     '9xl': 'var(--line-height-9xl)',
 };
 export const colors = {
-    background: 'var(--color-base-level-00)',
-    text: 'var(--color-base-content-medium-emphasis)',
+    background: 'var(--color-level-00-background)',
+    text: 'var(--color-content-medium-text)',
+    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)',
+    },
     green: {
         50: 'var(--color-green-50)',
         100: 'var(--color-green-100)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-base",
-  "version": "3.0.0-beta.30",
+  "version": "3.0.0-beta.33",
   "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/*",