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

package/dist/plugin/typography.js

@@ -0,0 +1,127 @@
+/**
+ * @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).
+ */
+export const TYPOGRAPHY_WEIGHTS = ['regular', 'medium', 'bold'];
+export const TYPOGRAPHY_WEIGHT_MAP = {
+    regular: 'low-emphasis',
+    medium: 'medium-emphasis',
+    bold: 'high-emphasis',
+};
+export const 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-')
+        ? `--${lineHeight}`
+        : `--line-height-${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() {
+    const entries = [];
+    Object.entries(TYPOGRAPHY_CONFIG).forEach(([type, sizes]) => {
+        Object.entries(sizes).forEach(([size, config]) => {
+            TYPOGRAPHY_WEIGHTS.forEach((weight) => {
+                const tokens = {
+                    fontSize: `--font-size-${config.size}`,
+                    fontWeight: `--font-weight-${TYPOGRAPHY_WEIGHT_MAP[weight]}`,
+                    lineHeight: resolveLineHeightVar(config.lineHeight),
+                };
+                if (type === 'heading' && 'letterSpacing' in config) {
+                    tokens.letterSpacing = `--letter-spacing-${config.letterSpacing}`;
+                }
+                if (type === 'mono') {
+                    tokens.fontFamily = '--font-family-mono';
+                }
+                entries.push({
+                    className: `typo-${type}-${size}-${weight}`,
+                    type,
+                    size,
+                    weight,
+                    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.
+ */
+export function getTypographyUtilities() {
+    const utilities = {};
+    buildTypographyEntries().forEach((entry) => {
+        const styles = {
+            'font-size': `var(${entry.tokens.fontSize})`,
+            'font-weight': `var(${entry.tokens.fontWeight})`,
+            'line-height': `var(${entry.tokens.lineHeight})`,
+        };
+        if (entry.tokens.letterSpacing) {
+            styles['letter-spacing'] = `var(${entry.tokens.letterSpacing})`;
+        }
+        if (entry.tokens.fontFamily) {
+            styles['font-family'] = `var(${entry.tokens.fontFamily}), monospace`;
+        }
+        utilities[`.${entry.className}`] = styles;
+    });
+    return utilities;
+}
+/**
+ * Returns the typography class names without the leading `.`, suitable for
+ * Tailwind v4 `@source inline()` directives.
+ * @returns {string[]} List of utility class names.
+ */
+export function getTypographyClassNames() {
+    return buildTypographyEntries().map((entry) => entry.className);
+}
+/**
+ * Returns structured, JSON-friendly typography token entries for LLM and
+ * documentation consumers.
+ * @returns {TypographyTokenEntry[]} Array of structured typography entries.
+ */
+export function getTypographyTokenEntries() {
+    return buildTypographyEntries();
+}

package/generated/figma-to-tailwind-mapping.json

@@ -1,6 +1,5 @@
 {
   "metadata": {
-    "generatedAt": "2026-03-18T09:53:09.738Z",
     "themes": [
       "ocean",
       "spark"
@@ -9,7 +8,7 @@
       "light",
       "dark"
     ],
-    "totalTokens": 194
+    "totalTokens": 209
   },
   "tokens": [
     {
@@ -546,9 +545,9 @@
       "tailwindClass": ".bg-rainbow-3",
       "cssProperty": "background-color",
       "values": {
-        "oceanLight": "#ffecb3",
+        "oceanLight": "#fff7df",
         "oceanDark": "#4d3a00",
-        "sparkLight": "#ffecb3",
+        "sparkLight": "#fff7df",
         "sparkDark": "#4d3a00"
       }
     },
@@ -559,9 +558,9 @@
       "cssProperty": "background-color",
       "values": {
         "oceanLight": "#f9e3e3",
-        "oceanDark": "#610e0e",
+        "oceanDark": "#3d0909",
         "sparkLight": "#f9e3e3",
-        "sparkDark": "#610e0e"
+        "sparkDark": "#3d0909"
       }
     },
     {
@@ -583,9 +582,9 @@
       "cssProperty": "background-color",
       "values": {
         "oceanLight": "#f7e9ee",
-        "oceanDark": "#490019",
+        "oceanDark": "#2e0010",
         "sparkLight": "#f7e9ee",
-        "sparkDark": "#490019"
+        "sparkDark": "#2e0010"
       }
     },
     {
@@ -597,7 +596,7 @@
         "oceanLight": "#e2f0e2",
         "oceanDark": "#09400c",
         "sparkLight": "#e2f0e2",
-        "sparkDark": "#09400c"
+        "sparkDark": "#062908"
       }
     },
     {
@@ -607,9 +606,9 @@
       "cssProperty": "background-color",
       "values": {
         "oceanLight": "#e4f0f2",
-        "oceanDark": "#124148",
+        "oceanDark": "#0b292e",
         "sparkLight": "#e4f0f2",
-        "sparkDark": "#124148"
+        "sparkDark": "#0b292e"
       }
     },
     {
@@ -708,6 +707,18 @@
         "sparkDark": "#ff6161"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-feedback-error-low-border-subtle",
+      "tailwindClass": ".border-feedback-error-low-subtle",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#f5c4c4",
+        "oceanDark": "#911515",
+        "sparkLight": "#f5c4c4",
+        "sparkDark": "#911515"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-feedback-information-high-border",
@@ -744,6 +755,18 @@
         "sparkDark": "#659fff"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-feedback-information-low-border-subtle",
+      "tailwindClass": ".border-feedback-information-low-subtle",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#c7dcff",
+        "oceanDark": "#113a80",
+        "sparkLight": "#c7dcff",
+        "sparkDark": "#113a80"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-feedback-neutral-high-border",
@@ -780,6 +803,18 @@
         "sparkDark": "#a9a9a9"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-feedback-neutral-low-border-subtle",
+      "tailwindClass": ".border-feedback-neutral-low-subtle",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#e1e4e6",
+        "oceanDark": "#394d55",
+        "sparkLight": "#e3e3e3",
+        "sparkDark": "#484848"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-feedback-success-high-border",
@@ -816,6 +851,18 @@
         "sparkDark": "#45d24d"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-feedback-success-low-border-subtle",
+      "tailwindClass": ".border-feedback-success-low-subtle",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#c8facb",
+        "oceanDark": "#035707",
+        "sparkLight": "#c8facb",
+        "sparkDark": "#035707"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-feedback-warning-high-border",
@@ -852,6 +899,18 @@
         "sparkDark": "#e0a917"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-feedback-warning-low-border-subtle",
+      "tailwindClass": ".border-feedback-warning-low-subtle",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#fae49d",
+        "oceanDark": "#805c00",
+        "sparkLight": "#fae49d",
+        "sparkDark": "#805c00"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-interaction-container-branded-high-border",
@@ -972,6 +1031,18 @@
         "sparkDark": "#f0801a"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-1-border-light",
+      "tailwindClass": ".border-rainbow-1-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#fbd9ba",
+        "oceanDark": "#9c5311",
+        "sparkLight": "#fbd9ba",
+        "sparkDark": "#9c5311"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-10-border",
@@ -984,6 +1055,18 @@
         "sparkDark": "#a9a9a9"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-10-border-light",
+      "tailwindClass": ".border-rainbow-10-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#c6ced1",
+        "oceanDark": "#3f555e",
+        "sparkLight": "#cccccc",
+        "sparkDark": "#4f4f4f"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-2-border",
@@ -996,6 +1079,18 @@
         "sparkDark": "#eb7247"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-2-border-light",
+      "tailwindClass": ".border-rainbow-2-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#f8ccbc",
+        "oceanDark": "#963715",
+        "sparkLight": "#f8ccbc",
+        "sparkDark": "#963715"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-3-border",
@@ -1008,6 +1103,18 @@
         "sparkDark": "#d29f00"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-3-border-light",
+      "tailwindClass": ".border-rainbow-3-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#ffe286",
+        "oceanDark": "#a67d00",
+        "sparkLight": "#ffe286",
+        "sparkDark": "#a67d00"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-4-border",
@@ -1020,6 +1127,18 @@
         "sparkDark": "#e79494"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-4-border-light",
+      "tailwindClass": ".border-rainbow-4-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#f0bbbb",
+        "oceanDark": "#a81818",
+        "sparkLight": "#f0bbbb",
+        "sparkDark": "#a81818"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-5-border",
@@ -1027,9 +1146,21 @@
       "cssProperty": "border-color",
       "values": {
         "oceanLight": "#32504c",
-        "oceanDark": "#6aa9a0",
+        "oceanDark": "#84b8b1",
         "sparkLight": "#32504c",
-        "sparkDark": "#6aa9a0"
+        "sparkDark": "#84b8b1"
+      }
+    },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-5-border-light",
+      "tailwindClass": ".border-rainbow-5-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#d2e5e3",
+        "oceanDark": "#456e68",
+        "sparkLight": "#d2e5e3",
+        "sparkDark": "#456e68"
       }
     },
     {
@@ -1044,6 +1175,18 @@
         "sparkDark": "#cf869f"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-6-border-light",
+      "tailwindClass": ".border-rainbow-6-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#e0b3c2",
+        "oceanDark": "#7e002c",
+        "sparkLight": "#e0b3c2",
+        "sparkDark": "#7e002c"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-7-border",
@@ -1056,6 +1199,18 @@
         "sparkDark": "#66b16a"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-7-border-light",
+      "tailwindClass": ".border-rainbow-7-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#b8dbba",
+        "oceanDark": "#106f15",
+        "sparkLight": "#b8dbba",
+        "sparkDark": "#106f15"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-8-border",
@@ -1068,6 +1223,18 @@
         "sparkDark": "#71b2bc"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-8-border-light",
+      "tailwindClass": ".border-rainbow-8-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#bedce0",
+        "oceanDark": "#1f717d",
+        "sparkLight": "#bedce0",
+        "sparkDark": "#1f717d"
+      }
+    },
     {
       "type": "border",
       "figmaToken": "--color-rainbow-9-border",
@@ -1080,6 +1247,18 @@
         "sparkDark": "#8da930"
       }
     },
+    {
+      "type": "border",
+      "figmaToken": "--color-rainbow-9-border-light",
+      "tailwindClass": ".border-rainbow-9-light",
+      "cssProperty": "border-color",
+      "values": {
+        "oceanLight": "#dde5c1",
+        "oceanDark": "#5c6e1f",
+        "sparkLight": "#dde5c1",
+        "sparkDark": "#5c6e1f"
+      }
+    },
     {
       "type": "icon",
       "figmaToken": "--color-content-high-icon",
@@ -1651,9 +1830,9 @@
       "cssProperty": "color",
       "values": {
         "oceanLight": "#32504c",
-        "oceanDark": "#6aa9a0",
+        "oceanDark": "#84b8b1",
         "sparkLight": "#32504c",
-        "sparkDark": "#6aa9a0"
+        "sparkDark": "#84b8b1"
       }
     },
     {
@@ -2229,7 +2408,7 @@
         "oceanLight": "#9c5311",
         "oceanDark": "#f0801a",
         "sparkLight": "#9c5311",
-        "sparkDark": "#f0801a"
+        "sparkDark": "#f39642"
       }
     },
     {
@@ -2287,9 +2466,9 @@
       "cssProperty": "color",
       "values": {
         "oceanLight": "#32504c",
-        "oceanDark": "#6aa9a0",
+        "oceanDark": "#84b8b1",
         "sparkLight": "#32504c",
-        "sparkDark": "#6aa9a0"
+        "sparkDark": "#84b8b1"
       }
     },
     {

package/generated/nova-tailwind-components.ts

@@ -206,6 +206,9 @@ export const 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/generated/nova-tailwind-tokens.ts

@@ -89,6 +89,9 @@ export const 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)'
   },
@@ -125,6 +128,9 @@ export const 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)'
   },
@@ -161,6 +167,9 @@ export const 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)'
   },
@@ -197,6 +206,9 @@ export const 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)'
   },
@@ -233,6 +245,9 @@ export const 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)'
   },
@@ -473,6 +488,9 @@ export const 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)'
   },
@@ -485,6 +503,9 @@ export const 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)'
   },
@@ -497,6 +518,9 @@ export const 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)'
   },
@@ -509,6 +533,9 @@ export const 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)'
   },
@@ -521,6 +548,9 @@ export const 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)'
   },
@@ -533,6 +563,9 @@ export const 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)'
   },
@@ -545,6 +578,9 @@ export const 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)'
   },
@@ -557,6 +593,9 @@ export const 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)'
   },
@@ -569,6 +608,9 @@ export const 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)'
   },
@@ -581,6 +623,9 @@ export const 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)'
   },