@nova-design-system/nova-base 3.28.0 → 3.30.0

package/README.md

@@ -36,54 +36,47 @@ Include the tokens CSS in your project (two themes are available: Spark and Ocea
 @import '@nova-design-system/nova-base/dist/css/ocean.css';
 ```
 
-### Recommended Approach: Using Tailwind CSS with Nova Theme and Plugin
+### Recommended Approach: Using Tailwind CSS v4 with Nova Theme and Plugin
 
-The recommended approach is to set up Tailwind CSS and use our tokens, `novaTailwindTheme`, and `novaTailwindPlugin` for the Tailwind configuration. This method provides a smaller CSS bundle and access to more utilities than the precompiled CSS.
+The recommended approach is to set up Tailwind CSS v4 and use the Nova theme and plugin via CSS directives. This method provides a smaller CSS bundle and access to more utilities than the precompiled CSS.
 
 #### Prerequisites
 
-Ensure that Tailwind CSS is installed in your project. If not, you can install it by following the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).
+Ensure that Tailwind CSS v4 is installed in your project. If not, you can install it by following the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).
 
-#### Tailwind Configuration
+#### CSS Configuration
 
-After setting up Tailwind CSS, add the following to your `tailwind.config.js`:
+Tailwind CSS v4 uses a CSS-first configuration. In your main CSS file, import Tailwind and configure the Nova plugin and theme:
 
-```js
-import {
-  novaTailwindTheme,
-  novaTailwindPlugin,
-} from '@nova-design-system/nova-base/theme';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  // ...
-  theme: novaTailwindTheme,
-  plugins: [novaTailwindPlugin],
-};
-```
+```css
+/* Import the theme tokens */
+@import '@nova-design-system/nova-base/dist/css/spark.css';
+/* Or: @import '@nova-design-system/nova-base/dist/css/ocean.css'; */
 
-The `novaTailwindTheme` maps our CSS variable tokens to utilities, ensuring consistent styling across your project. The `novaTailwindPlugin` adds additional base styles, components, and utilities.
+@import "tailwindcss";
 
-#### Importing Theme Tokens in CSS
+@plugin "@nova-design-system/nova-base/theme/plugin";
+@config "./tailwind.config.ts";
+```
 
-In your CSS file, along with the default Tailwind imports, you should import the tokens for the theme:
+Then create a minimal `tailwind.config.ts` with the Nova theme:
 
-```css
-/* Import the theme tokens */
-@import '@nova-design-system/nova-base/dist/css/spark.css';
+```ts
+import type { Config } from 'tailwindcss';
+import { novaTailwindTheme } from '@nova-design-system/nova-base/theme';
 
-/* Tailwind CSS imports */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+const config: Config = {
+  theme: novaTailwindTheme,
+};
 
-/* Or, for the Ocean theme */
-/* @import '@nova-design-system/nova-base/dist/css/ocean.css'; */
+export default config;
 ```
 
+The `novaTailwindTheme` maps Nova CSS variable tokens to Tailwind utilities. The `novaTailwindPlugin` (loaded via `@plugin`) adds base styles, components, and custom utilities like `text-high`, `bg-level-00`, and typography classes.
+
 #### Benefits of Using Tailwind CSS with Nova Theme and Plugin
 
-- **Smaller CSS Bundle:** By configuring Tailwind CSS with our theme and plugin, you eliminate unused styles, resulting in a significantly smaller CSS file.
+- **Smaller CSS Bundle:** Tailwind CSS v4 only generates CSS for classes actually used in your source files, resulting in a significantly smaller output.
 - **More Utilities:** Gain access to a wider range of utilities beyond those included in the precompiled CSS.
 - **Customization:** Tailwind CSS allows you to customize and extend your styles as needed.
 
@@ -97,4 +90,4 @@ import '@nova-design-system/nova-base/dist/css/spark.css';
 import '@nova-design-system/nova-base/dist/css/nova-utils.css';
 ```
 
-**Note:** The precompiled CSS includes a whitelist of Tailwind classes and is quite large. This approach is only recommended if you cannot set up Tailwind CSS yourself.
+**Note:** The precompiled CSS includes a broad set of pre-generated Tailwind utility classes and is quite large. This approach is only recommended if you cannot set up Tailwind CSS yourself.

package/dist/cjs/generated/nova-tailwind-components.js

@@ -208,6 +208,9 @@ exports.NOVA_TAILWIND_COMPONENTS = {
         'fontStyle': 'normal',
         'lineHeight': 'var(--form-description-line-height)'
     },
+    '.nv-fieldtext > .error-description[hidden]': {
+        'display': 'none'
+    },
     '.nv-button': {
         'textDecoration': 'none',
         'display': 'inline-flex',

package/dist/cjs/generated/nova-tailwind-tokens.js

@@ -91,6 +91,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-feedback-error-low': {
         'border-color': 'var(--color-feedback-error-low-border)'
     },
+    '.border-feedback-error-low-subtle': {
+        'border-color': 'var(--color-feedback-error-low-border-subtle)'
+    },
     '.icon-feedback-error-low': {
         'color': 'var(--color-feedback-error-low-icon)'
     },
@@ -127,6 +130,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-feedback-information-low': {
         'border-color': 'var(--color-feedback-information-low-border)'
     },
+    '.border-feedback-information-low-subtle': {
+        'border-color': 'var(--color-feedback-information-low-border-subtle)'
+    },
     '.icon-feedback-information-low': {
         'color': 'var(--color-feedback-information-low-icon)'
     },
@@ -163,6 +169,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-feedback-neutral-low': {
         'border-color': 'var(--color-feedback-neutral-low-border)'
     },
+    '.border-feedback-neutral-low-subtle': {
+        'border-color': 'var(--color-feedback-neutral-low-border-subtle)'
+    },
     '.icon-feedback-neutral-low': {
         'color': 'var(--color-feedback-neutral-low-icon)'
     },
@@ -199,6 +208,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-feedback-success-low': {
         'border-color': 'var(--color-feedback-success-low-border)'
     },
+    '.border-feedback-success-low-subtle': {
+        'border-color': 'var(--color-feedback-success-low-border-subtle)'
+    },
     '.icon-feedback-success-low': {
         'color': 'var(--color-feedback-success-low-icon)'
     },
@@ -235,6 +247,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-feedback-warning-low': {
         'border-color': 'var(--color-feedback-warning-low-border)'
     },
+    '.border-feedback-warning-low-subtle': {
+        'border-color': 'var(--color-feedback-warning-low-border-subtle)'
+    },
     '.icon-feedback-warning-low': {
         'color': 'var(--color-feedback-warning-low-icon)'
     },
@@ -475,6 +490,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-1': {
         'border-color': 'var(--color-rainbow-1-border)'
     },
+    '.border-rainbow-1-light': {
+        'border-color': 'var(--color-rainbow-1-border-light)'
+    },
     '.icon-rainbow-1': {
         'color': 'var(--color-rainbow-1-icon)'
     },
@@ -487,6 +505,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-10': {
         'border-color': 'var(--color-rainbow-10-border)'
     },
+    '.border-rainbow-10-light': {
+        'border-color': 'var(--color-rainbow-10-border-light)'
+    },
     '.icon-rainbow-10': {
         'color': 'var(--color-rainbow-10-icon)'
     },
@@ -499,6 +520,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-2': {
         'border-color': 'var(--color-rainbow-2-border)'
     },
+    '.border-rainbow-2-light': {
+        'border-color': 'var(--color-rainbow-2-border-light)'
+    },
     '.icon-rainbow-2': {
         'color': 'var(--color-rainbow-2-icon)'
     },
@@ -511,6 +535,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-3': {
         'border-color': 'var(--color-rainbow-3-border)'
     },
+    '.border-rainbow-3-light': {
+        'border-color': 'var(--color-rainbow-3-border-light)'
+    },
     '.icon-rainbow-3': {
         'color': 'var(--color-rainbow-3-icon)'
     },
@@ -523,6 +550,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-4': {
         'border-color': 'var(--color-rainbow-4-border)'
     },
+    '.border-rainbow-4-light': {
+        'border-color': 'var(--color-rainbow-4-border-light)'
+    },
     '.icon-rainbow-4': {
         'color': 'var(--color-rainbow-4-icon)'
     },
@@ -535,6 +565,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-5': {
         'border-color': 'var(--color-rainbow-5-border)'
     },
+    '.border-rainbow-5-light': {
+        'border-color': 'var(--color-rainbow-5-border-light)'
+    },
     '.icon-rainbow-5': {
         'color': 'var(--color-rainbow-5-icon)'
     },
@@ -547,6 +580,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-6': {
         'border-color': 'var(--color-rainbow-6-border)'
     },
+    '.border-rainbow-6-light': {
+        'border-color': 'var(--color-rainbow-6-border-light)'
+    },
     '.icon-rainbow-6': {
         'color': 'var(--color-rainbow-6-icon)'
     },
@@ -559,6 +595,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-7': {
         'border-color': 'var(--color-rainbow-7-border)'
     },
+    '.border-rainbow-7-light': {
+        'border-color': 'var(--color-rainbow-7-border-light)'
+    },
     '.icon-rainbow-7': {
         'color': 'var(--color-rainbow-7-icon)'
     },
@@ -571,6 +610,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-8': {
         'border-color': 'var(--color-rainbow-8-border)'
     },
+    '.border-rainbow-8-light': {
+        'border-color': 'var(--color-rainbow-8-border-light)'
+    },
     '.icon-rainbow-8': {
         'color': 'var(--color-rainbow-8-icon)'
     },
@@ -583,6 +625,9 @@ exports.NOVA_TAILWIND_TOKENS = {
     '.border-rainbow-9': {
         'border-color': 'var(--color-rainbow-9-border)'
     },
+    '.border-rainbow-9-light': {
+        'border-color': 'var(--color-rainbow-9-border-light)'
+    },
     '.icon-rainbow-9': {
         'color': 'var(--color-rainbow-9-icon)'
     },

package/dist/cjs/plugin/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./nova-plugin.js"), exports);
-__exportStar(require("./nova-safelist.js"), exports);
 __exportStar(require("./nova-theme.js"), exports);

package/dist/cjs/plugin/nova-plugin.js

@@ -21,6 +21,7 @@ exports.novaTailwindPlugin = void 0;
 var plugin_js_1 = __importDefault(require("tailwindcss/plugin.js"));
 var nova_tailwind_tokens_js_1 = require("../generated/nova-tailwind-tokens.js");
 var nova_tailwind_components_js_1 = require("../generated/nova-tailwind-components.js");
+var typography_js_1 = require("./typography.js");
 exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
     var addUtilities = _a.addUtilities, addComponents = _a.addComponents, addBase = _a.addBase, theme = _a.theme;
     addBase(__assign({ 'body, html': {
@@ -73,105 +74,6 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
         }, {});
     })()));
     addComponents(__assign({}, nova_tailwind_components_js_1.NOVA_TAILWIND_COMPONENTS));
-    // Typography configuration for programmatic utility generation
-    var 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',
-            },
-        },
-    };
-    var weights = ['regular', 'medium', 'bold'];
-    var weightMap = {
-        regular: 'low-emphasis',
-        medium: 'medium-emphasis',
-        bold: 'high-emphasis',
-    };
-    // Generate typography utilities programmatically
-    var typographyUtilities = {};
-    Object.entries(typographyConfig).forEach(function (_a) {
-        var type = _a[0], sizes = _a[1];
-        Object.entries(sizes).forEach(function (_a) {
-            var size = _a[0], config = _a[1];
-            weights.forEach(function (weight) {
-                var className = ".typo-".concat(type, "-").concat(size, "-").concat(weight);
-                var baseStyles = {
-                    'font-size': "var(--font-size-".concat(config.size, ")"),
-                    'font-weight': "var(--font-weight-".concat(weightMap[weight], ")"),
-                    'line-height': "var(--".concat(config.lineHeight.startsWith('leading-')
-                        ? config.lineHeight
-                        : "line-height-".concat(config.lineHeight), ")"),
-                };
-                // Add letter-spacing for headings
-                if (type === 'heading' && 'letterSpacing' in config) {
-                    baseStyles['letter-spacing'] = "var(--letter-spacing-".concat(config.letterSpacing, ")");
-                }
-                // Add font-family for mono
-                if (type === 'mono') {
-                    baseStyles['font-family'] = 'var(--font-family-mono), monospace';
-                }
-                typographyUtilities[className] = baseStyles;
-            });
-        });
-    });
     addUtilities(__assign(__assign(__assign({}, nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), { '.w-inherit': {
             width: 'inherit',
         }, '.w-initial': {
@@ -184,6 +86,6 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
             width: 'revert',
         }, '.w-unset': {
             width: 'unset',
-        } }), typographyUtilities));
+        } }), (0, typography_js_1.getTypographyUtilities)()));
 });
 exports.default = exports.novaTailwindPlugin;

package/dist/cjs/plugin/typography.js

@@ -0,0 +1,135 @@
+"use strict";
+/**
+ * @fileoverview Shared source of truth for the `.typo-{type}-{size}-{weight}`
+ * utility classes. Consumed by the Tailwind plugin (runtime utilities), the
+ * `@source inline()` generator (CSS safelisting), and the LLM extractor
+ * (structured JSON for AI consumers).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTypographyTokenEntries = exports.getTypographyClassNames = exports.getTypographyUtilities = exports.TYPOGRAPHY_CONFIG = exports.TYPOGRAPHY_WEIGHT_MAP = exports.TYPOGRAPHY_WEIGHTS = void 0;
+exports.TYPOGRAPHY_WEIGHTS = ['regular', 'medium', 'bold'];
+exports.TYPOGRAPHY_WEIGHT_MAP = {
+    regular: 'low-emphasis',
+    medium: 'medium-emphasis',
+    bold: 'high-emphasis',
+};
+exports.TYPOGRAPHY_CONFIG = {
+    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' },
+    },
+};
+/**
+ * Resolves a line-height config value to its CSS custom-property name.
+ * @param {string} lineHeight - Raw token value (either a `leading-*` utility name or a size suffix).
+ * @returns {string} CSS custom-property name including the leading `--`.
+ */
+function resolveLineHeightVar(lineHeight) {
+    return lineHeight.startsWith('leading-')
+        ? "--".concat(lineHeight)
+        : "--line-height-".concat(lineHeight);
+}
+/**
+ * Expands `TYPOGRAPHY_CONFIG` into the flat list of typography utility entries,
+ * one per type × size × weight combination.
+ * @returns {TypographyTokenEntry[]} Array of structured typography entries.
+ */
+function buildTypographyEntries() {
+    var entries = [];
+    Object.entries(exports.TYPOGRAPHY_CONFIG).forEach(function (_a) {
+        var type = _a[0], sizes = _a[1];
+        Object.entries(sizes).forEach(function (_a) {
+            var size = _a[0], config = _a[1];
+            exports.TYPOGRAPHY_WEIGHTS.forEach(function (weight) {
+                var tokens = {
+                    fontSize: "--font-size-".concat(config.size),
+                    fontWeight: "--font-weight-".concat(exports.TYPOGRAPHY_WEIGHT_MAP[weight]),
+                    lineHeight: resolveLineHeightVar(config.lineHeight),
+                };
+                if (type === 'heading' && 'letterSpacing' in config) {
+                    tokens.letterSpacing = "--letter-spacing-".concat(config.letterSpacing);
+                }
+                if (type === 'mono') {
+                    tokens.fontFamily = '--font-family-mono';
+                }
+                entries.push({
+                    className: "typo-".concat(type, "-").concat(size, "-").concat(weight),
+                    type: type,
+                    size: size,
+                    weight: weight,
+                    tokens: tokens,
+                });
+            });
+        });
+    });
+    return entries;
+}
+/**
+ * Returns the `{ '.typo-...': { 'font-size': 'var(--...)', ... } }` map
+ * consumed by Tailwind's `addUtilities`.
+ * @returns {Record<string, Record<string, string>>} Map from utility class selector to CSS declaration block.
+ */
+function getTypographyUtilities() {
+    var utilities = {};
+    buildTypographyEntries().forEach(function (entry) {
+        var styles = {
+            'font-size': "var(".concat(entry.tokens.fontSize, ")"),
+            'font-weight': "var(".concat(entry.tokens.fontWeight, ")"),
+            'line-height': "var(".concat(entry.tokens.lineHeight, ")"),
+        };
+        if (entry.tokens.letterSpacing) {
+            styles['letter-spacing'] = "var(".concat(entry.tokens.letterSpacing, ")");
+        }
+        if (entry.tokens.fontFamily) {
+            styles['font-family'] = "var(".concat(entry.tokens.fontFamily, "), monospace");
+        }
+        utilities[".".concat(entry.className)] = styles;
+    });
+    return utilities;
+}
+exports.getTypographyUtilities = getTypographyUtilities;
+/**
+ * Returns the typography class names without the leading `.`, suitable for
+ * Tailwind v4 `@source inline()` directives.
+ * @returns {string[]} List of utility class names.
+ */
+function getTypographyClassNames() {
+    return buildTypographyEntries().map(function (entry) { return entry.className; });
+}
+exports.getTypographyClassNames = getTypographyClassNames;
+/**
+ * Returns structured, JSON-friendly typography token entries for LLM and
+ * documentation consumers.
+ * @returns {TypographyTokenEntry[]} Array of structured typography entries.
+ */
+function getTypographyTokenEntries() {
+    return buildTypographyEntries();
+}
+exports.getTypographyTokenEntries = getTypographyTokenEntries;