@nova-design-system/nova-base 3.0.0-beta.27 → 3.0.0-beta.29

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

@@ -2,12 +2,24 @@
 /**
  * @fileoverview This file contains various tailwind utilities for nova
  */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.novaTailwindPlugin = void 0;
 var plugin_js_1 = __importDefault(require("tailwindcss/plugin.js"));
+var nova_tailwind_tokens_js_1 = require("./nova-tailwind-tokens.js");
 exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
     var addUtilities = _a.addUtilities, addComponents = _a.addComponents, addBase = _a.addBase, theme = _a.theme;
     addBase({
@@ -81,8 +93,7 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
             color: 'var(--color-interaction-link-standalone-text-hover)',
         },
     });
-    addUtilities({
-        '.visually-hidden': {
+    addUtilities(__assign(__assign({}, nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), { '.visually-hidden': {
             position: 'absolute',
             padding: '0',
             border: '0',
@@ -92,72 +103,49 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
             height: '1px',
             margin: '-1px',
             clip: 'rect(0, 0, 0, 0)',
-        },
-        '.text-high-emphasis': {
+        }, '.text-high-emphasis': {
             color: 'var(--color-base-content-high-emphasis)',
-        },
-        '.text-medium-emphasis': {
+        }, '.text-medium-emphasis': {
             color: 'var(--color-base-content-medium-emphasis)',
-        },
-        '.text-low-emphasis': {
+        }, '.text-low-emphasis': {
             color: 'var(--color-base-content-low-emphasis)',
-        },
-        '.bg-level-00': {
+        }, '.bg-level-00': {
             'background-color': 'var(--color-base-level-00)',
-        },
-        '.bg-level-00-hover': {
+        }, '.bg-level-00-hover': {
             'background-color': 'var(--color-base-level-00-hover)',
-        },
-        '.bg-level-10': {
+        }, '.bg-level-10': {
             'background-color': 'var(--color-base-level-10)',
-        },
-        '.bg-level-10-hover': {
+        }, '.bg-level-10-hover': {
             'background-color': 'var(--color-base-level-10-hover)',
-        },
-        '.bg-level-20': {
+        }, '.bg-level-20': {
             'background-color': 'var(--color-base-level-20)',
-        },
-        '.bg-level-20-hover': {
+        }, '.bg-level-20-hover': {
             'background-color': 'var(--color-base-level-20-hover)',
-        },
-        '.bg-level-30': {
+        }, '.bg-level-30': {
             'background-color': 'var(--color-base-level-30)',
-        },
-        '.bg-level-30-hover': {
+        }, '.bg-level-30-hover': {
             'background-color': 'var(--color-base-level-30-hover)',
-        },
-        '.bg-level-40': {
+        }, '.bg-level-40': {
             'background-color': 'var(--color-base-level-40)',
-        },
-        '.bg-level-40-hover': {
+        }, '.bg-level-40-hover': {
             'background-color': 'var(--color-base-level-40-hover)',
-        },
-        '.border-high-emphasis': {
+        }, '.border-high-emphasis': {
             'border-color': 'var(--color-base-border-high-emphasis)',
-        },
-        '.border-medium-emphasis': {
+        }, '.border-medium-emphasis': {
             'border-color': 'var(--color-base-border-medium-emphasis)',
-        },
-        '.border-low-emphasis': {
+        }, '.border-low-emphasis': {
             'border-color': 'var(--color-base-border-low-emphasis)',
-        },
-        '.w-inherit': {
+        }, '.w-inherit': {
             width: 'inherit',
-        },
-        '.w-initial': {
+        }, '.w-initial': {
             width: 'initial',
-        },
-        '.w-max-content': {
+        }, '.w-max-content': {
             width: 'max-content',
-        },
-        '.w-min-content': {
+        }, '.w-min-content': {
             width: 'min-content',
-        },
-        '.w-revert': {
+        }, '.w-revert': {
             width: 'revert',
-        },
-        '.w-unset': {
+        }, '.w-unset': {
             width: 'unset',
-        },
-    });
+        } }));
 });

package/dist/lib/cjs/nova-safelist.js

@@ -19,6 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.novaThemeSafelist = exports.gap = exports.margin = exports.padding = exports.pointer = exports.colorSchemes = exports.responsive = void 0;
 var nova_theme_js_1 = require("./nova-theme.js");
+var nova_tailwind_tokens_js_1 = require("./nova-tailwind-tokens.js");
 // Enables responsive spacing modifiers for safelist variants
 exports.responsive = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 // Enables responsive color schemes for safelist variants
@@ -330,4 +331,8 @@ var utils = [
 ];
 // From the nova tailwind plugin (nova-plugin.ts)
 var components = [{ pattern: /^link$/, variants: exports.pointer }];
-exports.novaThemeSafelist = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], exports.padding, true), exports.margin, true), exports.gap, true), flexBox, true), grid, true), spaceBetween, true), overflow, true), position, true), display, true), textAlign, true), textSize, true), whitespace, true), verticalAlign, true), fontWeight, true), borders, true), width, true), height, true), colors, true), cursors, true), resize, true), utils, true), components, true);
+// From the nova tailwind tokens (nova-tailwind-tokens.ts)
+var tokens = __spreadArray(__spreadArray([], Object.keys(nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), true), [
+    { pattern: /-hover$/, variants: ['hover'] },
+], false);
+exports.novaThemeSafelist = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], exports.padding, true), exports.margin, true), exports.gap, true), flexBox, true), grid, true), spaceBetween, true), overflow, true), position, true), display, true), textAlign, true), textSize, true), whitespace, true), verticalAlign, true), fontWeight, true), borders, true), width, true), height, true), colors, true), cursors, true), resize, true), utils, true), components, true), tokens, true);

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

@@ -0,0 +1,307 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NOVA_TAILWIND_TOKENS = void 0;
+/**
+ * Do not edit directly, this file was auto-generated
+ * @ref generate-tailwind-tokens.ts
+ */
+exports.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)'
+    },
+    '.text-base-high-emphasis': {
+        'color': 'var(--color-base-content-high-emphasis)'
+    },
+    '.text-base-inverted-high-emphasis': {
+        'color': 'var(--color-base-content-inverted-high-emphasis)'
+    },
+    '.text-base-inverted-low-emphasis': {
+        'color': 'var(--color-base-content-inverted-low-emphasis)'
+    },
+    '.text-base-inverted-medium-emphasis': {
+        'color': 'var(--color-base-content-inverted-medium-emphasis)'
+    },
+    '.text-base-low-emphasis': {
+        'color': 'var(--color-base-content-low-emphasis)'
+    },
+    '.text-base-lower-emphasis': {
+        'color': 'var(--color-base-content-lower-emphasis)'
+    },
+    '.text-base-medium-emphasis': {
+        'color': 'var(--color-base-content-medium-emphasis)'
+    },
+    '.bg-dont-use': {
+        'background-color': 'var(--color-dont-use-background)'
+    },
+    '.border-dont-use': {
+        'border-color': 'var(--color-dont-use-border)'
+    },
+    '.text-dont-use': {
+        'color': 'var(--color-dont-use-content)'
+    },
+    '.bg-feedback-error-high': {
+        'background-color': 'var(--color-feedback-error-high-background)'
+    },
+    '.border-feedback-error-high': {
+        'border-color': 'var(--color-feedback-error-high-border)'
+    },
+    '.text-feedback-error-high': {
+        'color': 'var(--color-feedback-error-high-content)'
+    },
+    '.bg-feedback-error-low': {
+        'background-color': 'var(--color-feedback-error-low-background)'
+    },
+    '.border-feedback-error-low': {
+        'border-color': 'var(--color-feedback-error-low-border)'
+    },
+    '.text-feedback-error-low': {
+        'color': 'var(--color-feedback-error-low-content)'
+    },
+    '.bg-feedback-information-high': {
+        'background-color': 'var(--color-feedback-information-high-background)'
+    },
+    '.border-feedback-information-high': {
+        'border-color': 'var(--color-feedback-information-high-border)'
+    },
+    '.text-feedback-information-high': {
+        'color': 'var(--color-feedback-information-high-content)'
+    },
+    '.bg-feedback-information-low': {
+        'background-color': 'var(--color-feedback-information-low-background)'
+    },
+    '.border-feedback-information-low': {
+        'border-color': 'var(--color-feedback-information-low-border)'
+    },
+    '.text-feedback-information-low': {
+        'color': 'var(--color-feedback-information-low-content)'
+    },
+    '.bg-feedback-neutral-high': {
+        'background-color': 'var(--color-feedback-neutral-high-background)'
+    },
+    '.border-feedback-neutral-high': {
+        'border-color': 'var(--color-feedback-neutral-high-border)'
+    },
+    '.text-feedback-neutral-high': {
+        'color': 'var(--color-feedback-neutral-high-content)'
+    },
+    '.bg-feedback-neutral-low': {
+        'background-color': 'var(--color-feedback-neutral-low-background)'
+    },
+    '.border-feedback-neutral-low': {
+        'border-color': 'var(--color-feedback-neutral-low-border)'
+    },
+    '.text-feedback-neutral-low': {
+        'color': 'var(--color-feedback-neutral-low-content)'
+    },
+    '.bg-feedback-success-high': {
+        'background-color': 'var(--color-feedback-success-high-background)'
+    },
+    '.border-feedback-success-high': {
+        'border-color': 'var(--color-feedback-success-high-border)'
+    },
+    '.text-feedback-success-high': {
+        'color': 'var(--color-feedback-success-high-content)'
+    },
+    '.bg-feedback-success-low': {
+        'background-color': 'var(--color-feedback-success-low-background)'
+    },
+    '.border-feedback-success-low': {
+        'border-color': 'var(--color-feedback-success-low-border)'
+    },
+    '.text-feedback-success-low': {
+        'color': 'var(--color-feedback-success-low-content)'
+    },
+    '.bg-feedback-warning-high': {
+        'background-color': 'var(--color-feedback-warning-high-background)'
+    },
+    '.border-feedback-warning-high': {
+        'border-color': 'var(--color-feedback-warning-high-border)'
+    },
+    '.text-feedback-warning-high': {
+        'color': 'var(--color-feedback-warning-high-content)'
+    },
+    '.bg-feedback-warning-low': {
+        'background-color': 'var(--color-feedback-warning-low-background)'
+    },
+    '.border-feedback-warning-low': {
+        'border-color': 'var(--color-feedback-warning-low-border)'
+    },
+    '.text-feedback-warning-low': {
+        'color': 'var(--color-feedback-warning-low-content)'
+    },
+    '.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)'
+    },
+    '.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)'
+    },
+    '.text-interaction-brand-low': {
+        'color': 'var(--color-interaction-brand-low-text)'
+    },
+    '.text-interaction-brand-low-hover': {
+        'color': 'var(--color-interaction-brand-low-text-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)'
+    },
+    '.text-interaction-link-standalone': {
+        'color': 'var(--color-interaction-link-standalone-text)'
+    },
+    '.text-interaction-link-standalone-hover': {
+        'color': 'var(--color-interaction-link-standalone-text-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)'
+    },
+    '.text-interaction-neutral': {
+        'color': 'var(--color-interaction-neutral-text)'
+    },
+    '.text-interaction-neutral-hover': {
+        'color': 'var(--color-interaction-neutral-text-hover)'
+    },
+    '.bg-rainbow-1': {
+        'background-color': 'var(--color-rainbow-1-background)'
+    },
+    '.border-rainbow-1': {
+        'border-color': 'var(--color-rainbow-1-border)'
+    },
+    '.text-rainbow-1': {
+        'color': 'var(--color-rainbow-1-content)'
+    },
+    '.bg-rainbow-10': {
+        'background-color': 'var(--color-rainbow-10-background)'
+    },
+    '.border-rainbow-10': {
+        'border-color': 'var(--color-rainbow-10-border)'
+    },
+    '.text-rainbow-10': {
+        'color': 'var(--color-rainbow-10-content)'
+    },
+    '.bg-rainbow-2': {
+        'background-color': 'var(--color-rainbow-2-background)'
+    },
+    '.border-rainbow-2': {
+        'border-color': 'var(--color-rainbow-2-border)'
+    },
+    '.text-rainbow-2': {
+        'color': 'var(--color-rainbow-2-content)'
+    },
+    '.bg-rainbow-3': {
+        'background-color': 'var(--color-rainbow-3-background)'
+    },
+    '.border-rainbow-3': {
+        'border-color': 'var(--color-rainbow-3-border)'
+    },
+    '.text-rainbow-3': {
+        'color': 'var(--color-rainbow-3-content)'
+    },
+    '.bg-rainbow-4': {
+        'background-color': 'var(--color-rainbow-4-background)'
+    },
+    '.border-rainbow-4': {
+        'border-color': 'var(--color-rainbow-4-border)'
+    },
+    '.text-rainbow-4': {
+        'color': 'var(--color-rainbow-4-content)'
+    },
+    '.bg-rainbow-5': {
+        'background-color': 'var(--color-rainbow-5-background)'
+    },
+    '.border-rainbow-5': {
+        'border-color': 'var(--color-rainbow-5-border)'
+    },
+    '.text-rainbow-5': {
+        'color': 'var(--color-rainbow-5-content)'
+    },
+    '.bg-rainbow-6': {
+        'background-color': 'var(--color-rainbow-6-background)'
+    },
+    '.border-rainbow-6': {
+        'border-color': 'var(--color-rainbow-6-border)'
+    },
+    '.text-rainbow-6': {
+        'color': 'var(--color-rainbow-6-content)'
+    },
+    '.bg-rainbow-7': {
+        'background-color': 'var(--color-rainbow-7-background)'
+    },
+    '.border-rainbow-7': {
+        'border-color': 'var(--color-rainbow-7-border)'
+    },
+    '.text-rainbow-7': {
+        'color': 'var(--color-rainbow-7-content)'
+    },
+    '.bg-rainbow-8': {
+        'background-color': 'var(--color-rainbow-8-background)'
+    },
+    '.border-rainbow-8': {
+        'border-color': 'var(--color-rainbow-8-border)'
+    },
+    '.text-rainbow-8': {
+        'color': 'var(--color-rainbow-8-content)'
+    },
+    '.bg-rainbow-9': {
+        'background-color': 'var(--color-rainbow-9-background)'
+    },
+    '.border-rainbow-9': {
+        'border-color': 'var(--color-rainbow-9-border)'
+    },
+    '.text-rainbow-9': {
+        'color': 'var(--color-rainbow-9-content)'
+    }
+};

package/dist/lib/cjs/nova-theme.js

@@ -89,6 +89,18 @@ exports.lineHeight = {
 exports.colors = {
     background: 'var(--color-base-level-00)',
     text: 'var(--color-base-content-medium-emphasis)',
+    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/dist/lib/nova-plugin.js

@@ -2,6 +2,7 @@
  * @fileoverview This file contains various tailwind utilities for nova
  */
 import plugin from 'tailwindcss/plugin.js';
+import { NOVA_TAILWIND_TOKENS } from './nova-tailwind-tokens.js';
 export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase, theme }) => {
     addBase({
         'body, html': {
@@ -75,6 +76,7 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
         },
     });
     addUtilities({
+        ...NOVA_TAILWIND_TOKENS,
         '.visually-hidden': {
             position: 'absolute',
             padding: '0',

package/dist/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

@@ -7,6 +7,7 @@
  * 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';
 // Enables responsive spacing modifiers for safelist variants
 export const responsive = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 // Enables responsive color schemes for safelist variants
@@ -318,6 +319,11 @@ const utils = [
 ];
 // From the nova tailwind plugin (nova-plugin.ts)
 const components = [{ pattern: /^link$/, variants: pointer }];
+// From the nova tailwind tokens (nova-tailwind-tokens.ts)
+const tokens = [
+    ...Object.keys(NOVA_TAILWIND_TOKENS),
+    { pattern: /-hover$/, variants: ['hover'] },
+];
 export const novaThemeSafelist = [
     ...padding,
     ...margin,
@@ -341,4 +347,5 @@ export const novaThemeSafelist = [
     ...resize,
     ...utils,
     ...components,
+    ...tokens,
 ];