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

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

@@ -0,0 +1,292 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NOVA_TAILWIND_COMPONENTS = void 0;
+/**
+ * Do not edit directly, this file was auto-generated
+ * @ref generate-tailwind-components.ts
+ */
+exports.NOVA_TAILWIND_COMPONENTS = {
+    '.nv-button': {
+        'textDecoration': 'none',
+        'display': 'inline-flex',
+        'justifyContent': 'center',
+        'alignItems': 'center',
+        'fontStyle': 'normal',
+        'fontWeight': 'var(--font-weight-medium-emphasis)',
+        'fontFamily': '\'TT Norms Pro\', sans-serif',
+        'transition': 'background-color 150ms ease-out',
+        'userSelect': 'none',
+        'cursor': 'pointer',
+        'height': 'fit-content',
+        'width': 'fit-content',
+        'padding': 'var(--button-md-padding-y) var(--button-md-padding-x)',
+        'gap': 'var(--button-md-gap)',
+        'borderRadius': 'var(--button-md-border-radius)',
+        'lineHeight': 'var(--button-md-line-height)',
+        'fontSize': 'var(--button-md-font-size)',
+        'background': 'var(--components-button-medium-background)',
+        'border': '1px solid var(--components-button-medium-border)',
+        'color': 'var(--components-button-medium-text)'
+    },
+    '.nv-button nv-icon > svg': {
+        'width': 'var(--spacing-5)',
+        'height': 'var(--spacing-5)',
+        'strokeWidth': '1.6px'
+    },
+    '.nv-button:hover': {
+        'background': 'var(--components-button-medium-background-hover)',
+        'border': '1px solid var(--components-button-medium-border)',
+        'color': 'var(--components-button-medium-text-hover)'
+    },
+    '.nv-button:focus, .nv-button:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button:focus-visible, .nv-button:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button:disabled:not([disabled=false])': {
+        'opacity': '0.5',
+        'cursor': 'not-allowed',
+        'boxShadow': 'none'
+    },
+    '.nv-button.danger': {
+        'background': 'var(--components-button-destructive-high-background)',
+        'border': '1px solid unset',
+        'color': 'var(--components-button-destructive-high-text)'
+    },
+    '.nv-button.danger:hover': {
+        'background': 'var(--components-button-destructive-high-background-hover)',
+        'border': '1px solid unset',
+        'color': 'var(--components-button-destructive-high-text-hover)'
+    },
+    '.nv-button.danger:focus, .nv-button.danger:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.danger:focus-visible, .nv-button.danger:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.size-xs': {
+        'padding': 'var(--button-xs-padding-y) var(--button-xs-padding-x)',
+        'gap': 'var(--button-xs-gap)',
+        'borderRadius': 'var(--button-xs-border-radius)',
+        'lineHeight': 'var(--button-xs-line-height)',
+        'fontSize': 'var(--button-xs-font-size)'
+    },
+    '.nv-button.size-xs nv-icon > svg': {
+        'width': 'var(--spacing-3)',
+        'height': 'var(--spacing-3)',
+        'strokeWidth': '1.2px'
+    },
+    '.nv-button.size-sm': {
+        'padding': 'var(--button-sm-padding-y) var(--button-sm-padding-x)',
+        'gap': 'var(--button-sm-gap)',
+        'borderRadius': 'var(--button-sm-border-radius)',
+        'lineHeight': 'var(--button-sm-line-height)',
+        'fontSize': 'var(--button-sm-font-size)'
+    },
+    '.nv-button.size-sm nv-icon > svg': {
+        'width': 'var(--spacing-4)',
+        'height': 'var(--spacing-4)',
+        'strokeWidth': '1.5px'
+    },
+    '.nv-button.size-md': {
+        'padding': 'var(--button-md-padding-y) var(--button-md-padding-x)',
+        'gap': 'var(--button-md-gap)',
+        'borderRadius': 'var(--button-md-border-radius)',
+        'lineHeight': 'var(--button-md-line-height)',
+        'fontSize': 'var(--button-md-font-size)'
+    },
+    '.nv-button.size-md nv-icon > svg': {
+        'width': 'var(--spacing-5)',
+        'height': 'var(--spacing-5)',
+        'strokeWidth': '1.6px'
+    },
+    '.nv-button.size-lg': {
+        'padding': 'var(--button-lg-padding-y) var(--button-lg-padding-x)',
+        'gap': 'var(--button-lg-gap)',
+        'borderRadius': 'var(--button-lg-border-radius)',
+        'lineHeight': 'var(--button-lg-line-height)',
+        'fontSize': 'var(--button-lg-font-size)'
+    },
+    '.nv-button.size-lg nv-icon > svg': {
+        'width': 'var(--spacing-6)',
+        'height': 'var(--spacing-6)',
+        'strokeWidth': '1.8px'
+    },
+    '.nv-button.emphasis-high': {
+        'background': 'var(--components-button-high-background)',
+        'border': '1px solid var(--components-button-high-border)',
+        'color': 'var(--components-button-high-text)'
+    },
+    '.nv-button.emphasis-high:hover': {
+        'background': 'var(--components-button-high-background-hover)',
+        'border': '1px solid var(--components-button-high-border)',
+        'color': 'var(--components-button-high-text-hover)'
+    },
+    '.nv-button.emphasis-high:focus, .nv-button.emphasis-high:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-high:focus-visible, .nv-button.emphasis-high:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.emphasis-high:disabled:not([disabled=false])': {
+        'opacity': '0.5',
+        'cursor': 'not-allowed',
+        'boxShadow': 'none'
+    },
+    '.nv-button.emphasis-high.danger': {
+        'background': 'var(--components-button-destructive-high-background)',
+        'border': '1px solid unset',
+        'color': 'var(--components-button-destructive-high-text)'
+    },
+    '.nv-button.emphasis-high.danger:hover': {
+        'background': 'var(--components-button-destructive-high-background-hover)',
+        'border': '1px solid unset',
+        'color': 'var(--components-button-destructive-high-text-hover)'
+    },
+    '.nv-button.emphasis-high.danger:focus, .nv-button.emphasis-high.danger:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-high.danger:focus-visible, .nv-button.emphasis-high.danger:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.emphasis-medium': {
+        'background': 'var(--components-button-medium-background)',
+        'border': '1px solid var(--components-button-medium-border)',
+        'color': 'var(--components-button-medium-text)'
+    },
+    '.nv-button.emphasis-medium:hover': {
+        'background': 'var(--components-button-medium-background-hover)',
+        'border': '1px solid var(--components-button-medium-border)',
+        'color': 'var(--components-button-medium-text-hover)'
+    },
+    '.nv-button.emphasis-medium:focus, .nv-button.emphasis-medium:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-medium:focus-visible, .nv-button.emphasis-medium:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.emphasis-medium:disabled:not([disabled=false])': {
+        'opacity': '0.5',
+        'cursor': 'not-allowed',
+        'boxShadow': 'none'
+    },
+    '.nv-button.emphasis-medium.danger': {
+        'background': 'var(--components-button-destructive-medium-background)',
+        'border': '1px solid var(--components-button-destructive-medium-border)',
+        'color': 'var(--components-button-destructive-medium-text)'
+    },
+    '.nv-button.emphasis-medium.danger:hover': {
+        'background': 'var(--components-button-destructive-medium-background-hover)',
+        'border': '1px solid var(--components-button-destructive-medium-border)',
+        'color': 'var(--components-button-destructive-medium-text-hover)'
+    },
+    '.nv-button.emphasis-medium.danger:focus, .nv-button.emphasis-medium.danger:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-medium.danger:focus-visible, .nv-button.emphasis-medium.danger:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.emphasis-low': {
+        'background': 'var(--components-button-low-background)',
+        'border': '1px solid var(--components-button-low-border)',
+        'color': 'var(--components-button-low-text)'
+    },
+    '.nv-button.emphasis-low:hover': {
+        'background': 'var(--components-button-low-background-hover)',
+        'border': '1px solid var(--components-button-low-border)',
+        'color': 'var(--components-button-low-text-hover)'
+    },
+    '.nv-button.emphasis-low:focus, .nv-button.emphasis-low:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-low:focus-visible, .nv-button.emphasis-low:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.emphasis-low:disabled:not([disabled=false])': {
+        'opacity': '0.5',
+        'cursor': 'not-allowed',
+        'boxShadow': 'none'
+    },
+    '.nv-button.emphasis-low.danger': {
+        'background': 'var(--components-button-destructive-low-background)',
+        'border': '1px solid var(--components-button-destructive-low-border)',
+        'color': 'var(--components-button-destructive-low-text)'
+    },
+    '.nv-button.emphasis-low.danger:hover': {
+        'background': 'var(--components-button-destructive-low-background-hover)',
+        'border': '1px solid var(--components-button-destructive-low-border)',
+        'color': 'var(--components-button-destructive-low-text-hover)'
+    },
+    '.nv-button.emphasis-low.danger:focus, .nv-button.emphasis-low.danger:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-low.danger:focus-visible, .nv-button.emphasis-low.danger:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.emphasis-lower': {
+        'background': 'var(--components-button-lower-background)',
+        'border': '1px solid var(--components-button-lower-border)',
+        'color': 'var(--components-button-lower-text)'
+    },
+    '.nv-button.emphasis-lower:hover': {
+        'background': 'var(--components-button-lower-background-hover)',
+        'border': '1px solid var(--components-button-lower-border)',
+        'color': 'var(--components-button-lower-text-hover)'
+    },
+    '.nv-button.emphasis-lower:focus, .nv-button.emphasis-lower:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-lower:focus-visible, .nv-button.emphasis-lower:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.emphasis-lower:disabled:not([disabled=false])': {
+        'opacity': '0.5',
+        'cursor': 'not-allowed',
+        'boxShadow': 'none'
+    },
+    '.nv-button.emphasis-lower.danger': {
+        'background': 'var(--components-button-destructive-lower-background)',
+        'border': '1px solid var(--components-button-destructive-lower-border)',
+        'color': 'var(--components-button-destructive-lower-text)'
+    },
+    '.nv-button.emphasis-lower.danger:hover': {
+        'background': 'var(--components-button-destructive-lower-background-hover)',
+        'border': '1px solid var(--components-button-destructive-lower-border)',
+        'color': 'var(--components-button-destructive-lower-text-hover)'
+    },
+    '.nv-button.emphasis-lower.danger:focus, .nv-button.emphasis-lower.danger:focus-within': {
+        'outline': 'none'
+    },
+    '.nv-button.emphasis-lower.danger:focus-visible, .nv-button.emphasis-lower.danger:has(:focus-visible)': {
+        'outline': 'var(--focus-outline-stroke) solid var(--color-focus-destructive)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)'
+    },
+    '.nv-button.fluid': {
+        'width': '100%'
+    },
+    '.nv-link': {
+        'color': 'var(--color-interaction-link-high-text)',
+        'fontWeight': '500',
+        'textDecoration': 'none'
+    },
+    '.nv-link:hover': {
+        'color': 'var(--color-interaction-link-high-text-hover)'
+    },
+    '.nv-tabs .nv-link': {
+        'borderColor': 'transparent'
+    },
+    '.nv-tabs .nv-link:hover,\n.nv-tabs .selected': {
+        'borderColor': 'var(--color-interaction-container-branded-high-border)'
+    }
+};

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

@@ -7,21 +7,6 @@ exports.NOVA_TAILWIND_TOKENS = void 0;
  * @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)'
-    },
     '.border-high': {
         'border-color': 'var(--color-content-high-border)'
     },
@@ -196,54 +181,6 @@ exports.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)'
     },
@@ -328,18 +265,6 @@ exports.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)'
     },
@@ -352,54 +277,6 @@ exports.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/cjs/{nova-plugin.js → lib/nova-plugin.js}

@@ -19,7 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (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");
+var nova_tailwind_tokens_js_1 = require("../generated/nova-tailwind-tokens.js");
+var nova_tailwind_components_js_1 = require("../generated/nova-tailwind-components.js");
 exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
     var addUtilities = _a.addUtilities, addComponents = _a.addComponents, addBase = _a.addBase, theme = _a.theme;
     addBase({
@@ -83,16 +84,7 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
             color: 'var(--color-content-low-text)',
         },
     });
-    addComponents({
-        '.link': {
-            color: 'var(--color-interaction-link-high-text)',
-            fontWeight: '500',
-            'text-decoration': 'none',
-        },
-        '.link:hover': {
-            color: 'var(--color-interaction-link-high-text-hover)',
-        },
-    });
+    addComponents(__assign({}, nova_tailwind_components_js_1.NOVA_TAILWIND_COMPONENTS));
     addUtilities(__assign(__assign({}, nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), { '.visually-hidden': {
             position: 'absolute',
             padding: '0',

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

@@ -19,7 +19,8 @@ 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");
+var nova_tailwind_tokens_js_1 = require("../generated/nova-tailwind-tokens.js");
+var nova_tailwind_components_js_1 = require("../generated/nova-tailwind-components.js");
 // Enables responsive spacing modifiers for safelist variants
 exports.responsive = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
 // Enables responsive color schemes for safelist variants
@@ -329,8 +330,10 @@ var utils = [
     { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
     { pattern: /^border-(high|medium|low)$/ },
 ];
-// From the nova tailwind plugin (nova-plugin.ts)
-var components = [{ pattern: /^link$/, variants: exports.pointer }];
+// From the nova tailwind components (nova-tailwind-components.ts)
+var components = __spreadArray([], Object.keys(nova_tailwind_components_js_1.NOVA_TAILWIND_COMPONENTS).filter(function (key) {
+    return /^\.[a-zA-Z0-9-]+$/.test(key);
+}), 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'] },