@nova-design-system/nova-base 3.0.0-beta.16

package/dist/lib/nova-plugin.js

@@ -0,0 +1,156 @@
+/**
+ * @fileoverview This file contains various tailwind utilities for nova
+ */
+import plugin from 'tailwindcss/plugin.js';
+export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase, theme }) => {
+    addBase({
+        'body, html': {
+            'background-color': theme('colors.background'),
+            color: theme('colors.text'),
+        },
+        '*:disabled': {
+            cursor: 'not-allowed',
+        },
+        '*:focus, *:focus-within': {
+            outline: 'none',
+        },
+        'button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible': {
+            outline: 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
+            'outline-offset': 'var(--focus-outline-offset)',
+            'border-radius': 'var(--radius-rounded)',
+        },
+        a: {
+            color: 'var(--color-interaction-link-inline-text)',
+            'text-decoration': 'underline',
+            fontWeight: '700',
+        },
+        'a:hover': {
+            color: 'var(--color-interaction-link-inline-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)',
+        },
+        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)',
+        },
+        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)',
+        },
+        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)',
+        },
+        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)',
+        },
+        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)',
+        },
+    });
+    addComponents({
+        '.link': {
+            color: 'var(--color-interaction-link-standalone-text)',
+            fontWeight: '500',
+            'text-decoration': 'none',
+        },
+        '.link:hover': {
+            color: 'var(--color-interaction-link-standalone-text-hover)',
+        },
+    });
+    addUtilities({
+        '.visually-hidden': {
+            position: 'absolute',
+            padding: '0',
+            border: '0',
+            overflow: 'hidden',
+            'white-space': 'nowrap',
+            width: '1px',
+            height: '1px',
+            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',
+        },
+        '.w-initial': {
+            width: 'initial',
+        },
+        '.w-max-content': {
+            width: 'max-content',
+        },
+        '.w-min-content': {
+            width: 'min-content',
+        },
+        '.w-revert': {
+            width: 'revert',
+        },
+        '.w-unset': {
+            width: 'unset',
+        },
+    });
+});

package/dist/lib/nova-safelist.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @fileoverview Tailwind safelists for Nova
+ *
+ * This file defines various Tailwind safelists used to compile a CSS file
+ * containing utility classes frequently needed in Nova. The output CSS is
+ * comprehensive and may be large. If users prefer a more lightweight approach,
+ * they can configure Tailwind directly without using the predefined safelists.
+ */
+export declare const responsive: string[];
+export declare const colorSchemes: string[];
+export declare const pointer: string[];
+export declare const padding: {
+    pattern: RegExp;
+    variants: string[];
+}[];
+export declare const margin: {
+    pattern: RegExp;
+    variants: string[];
+}[];
+export declare const gap: {
+    pattern: RegExp;
+    variants: string[];
+}[];
+export declare const novaThemeSafelist: {
+    pattern: RegExp;
+}[];

package/dist/lib/nova-safelist.js

@@ -0,0 +1,344 @@
+/**
+ * @fileoverview Tailwind safelists for Nova
+ *
+ * This file defines various Tailwind safelists used to compile a CSS file
+ * containing utility classes frequently needed in Nova. The output CSS is
+ * comprehensive and may be large. If users prefer a more lightweight approach,
+ * they can configure Tailwind directly without using the predefined safelists.
+ */
+import { spacing } from './nova-theme.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
+export const colorSchemes = ['light', 'dark'];
+// Enables pointer states for safelist variants
+export const pointer = ['hover', 'focus', 'active'];
+export const padding = [
+    {
+        pattern: new RegExp(`^p-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^py-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^px-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^pt-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^pr-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^pb-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^pl-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+];
+export const margin = [
+    {
+        pattern: new RegExp(`^m-(${Object.keys(spacing).join('|')}|auto)$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^my-(${Object.keys(spacing).join('|')}|auto)$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^mx-(${Object.keys(spacing).join('|')}|auto)$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^mt-(${Object.keys(spacing).join('|')}|auto)$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^mr-(${Object.keys(spacing).join('|')}|auto)$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^mb-(${Object.keys(spacing).join('|')}|auto)$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^ml-(${Object.keys(spacing).join('|')}|auto)$`),
+        variants: responsive,
+    },
+];
+export const gap = [
+    {
+        pattern: new RegExp(`^gap-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^gap-x-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+    {
+        pattern: new RegExp(`^gap-y-(${Object.keys(spacing).join('|')})$`),
+        variants: responsive,
+    },
+];
+const flexBox = [
+    { pattern: /^flex$/, variants: responsive },
+    { pattern: /^inline-flex$/, variants: responsive },
+    { pattern: /^flex-row$/, variants: responsive },
+    { pattern: /^flex-row-reverse$/, variants: responsive },
+    { pattern: /^flex-col$/, variants: responsive },
+    { pattern: /^flex-col-reverse$/, variants: responsive },
+    { pattern: /^flex-wrap$/, variants: responsive },
+    { pattern: /^flex-wrap-reverse$/, variants: responsive },
+    { pattern: /^flex-nowrap$/, variants: responsive },
+    {
+        pattern: /^place-content-(start|end|center|between|around|evenly)$/,
+        variants: responsive,
+    },
+    { pattern: /^place-items-(start|end|center|stretch)$/, variants: responsive },
+    {
+        pattern: /^place-self-(auto|start|end|center|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^justify-(start|end|center|between|around|evenly)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^justify-items-(start|end|center|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^justify-self-(auto|start|end|center|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^align-(start|end|center|baseline|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^items-(start|end|center|baseline|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^self-(auto|start|end|center|baseline|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^content-(start|end|center|between|around|evenly)$/,
+        variants: responsive,
+    },
+    { pattern: /^order-(\d+|first|last|none)$/, variants: responsive },
+    { pattern: /^flex-(\d+|none|auto|initial)$/, variants: responsive },
+    { pattern: /^grow-(0|1)$/, variants: responsive },
+    { pattern: /^shrink-(0|1)$/, variants: responsive },
+];
+const grid = [
+    { pattern: /^grid$/, variants: responsive },
+    { pattern: /^inline-grid$/, variants: responsive },
+    { pattern: /^grid-cols-(\d+|none|auto)$/, variants: responsive },
+    { pattern: /^grid-rows-(\d+|none|auto)$/, variants: responsive },
+    { pattern: /^col-span-(\d+|full)$/, variants: responsive },
+    { pattern: /^col-start-(\d+|auto)$/, variants: responsive },
+    { pattern: /^col-end-(\d+|auto)$/, variants: responsive },
+    { pattern: /^row-span-(\d+|full)$/, variants: responsive },
+    { pattern: /^row-start-(\d+|auto)$/, variants: responsive },
+    { pattern: /^row-end-(\d+|auto)$/, variants: responsive },
+    { pattern: /^gap-(\d+|px)$/, variants: responsive },
+    { pattern: /^gap-x-(\d+|px)$/, variants: responsive },
+    { pattern: /^gap-y-(\d+|px)$/, variants: responsive },
+    {
+        pattern: /^auto-cols-(auto|min|max|fr)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^auto-rows-(auto|min|max|fr)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^place-content-(start|end|center|between|around|evenly|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^place-items-(start|end|center|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^place-self-(auto|start|end|center|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^justify-items-(start|end|center|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^justify-self-(auto|start|end|center|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^align-(start|end|center|baseline|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^items-(start|end|center|baseline|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^self-(auto|start|end|center|baseline|stretch)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^content-(start|end|center|between|around|evenly|stretch)$/,
+        variants: responsive,
+    },
+];
+const spaceBetween = [
+    {
+        pattern: /^space-x-(\d+|px|reverse)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^space-y-(\d+|px|reverse)$/,
+        variants: responsive,
+    },
+];
+const overflow = [
+    { pattern: /^overflow-(auto|hidden|visible|scroll)$/, variants: responsive },
+    {
+        pattern: /^overflow-x-(auto|hidden|visible|scroll)$/,
+        variants: responsive,
+    },
+    {
+        pattern: /^overflow-y-(auto|hidden|visible|scroll)$/,
+        variants: responsive,
+    },
+];
+const position = [
+    {
+        pattern: /^(static|fixed|absolute|relative|sticky)$/,
+        variants: responsive,
+    },
+    { pattern: /^inset-(0|auto|full)$/ },
+    { pattern: /^inset-x-(0|auto|full)$/ },
+    { pattern: /^inset-y-(0|auto|full)$/ },
+    { pattern: /^top-(0|auto|full)$/, variants: responsive },
+    { pattern: /^right-(0|auto|full)$/, variants: responsive },
+    { pattern: /^bottom-(0|auto|full)$/, variants: responsive },
+    { pattern: /^left-(0|auto|full)$/, variants: responsive },
+    { pattern: /^z-(\d+|auto)$/ },
+];
+const display = [
+    {
+        pattern: /^(block|inline-block|inline|flex|inline-flex|table|inline-table|table-caption|table-cell|table-column|table-column-group|table-footer-group|table-header-group|table-row-group|table-row|flow-root|grid|inline-grid|contents|hidden)$/,
+    },
+];
+const textAlign = [
+    { pattern: /^text-(left|center|right|justify)$/, variants: responsive },
+];
+const textSize = [
+    {
+        pattern: /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+        variants: responsive,
+    },
+];
+const whitespace = [
+    {
+        pattern: /^whitespace-(normal|nowrap|pre|pre-line|pre-wrap)$/,
+        variants: responsive,
+    },
+];
+const verticalAlign = [
+    { pattern: /^align-(baseline|top|middle|bottom|text-top|text-bottom)$/ },
+];
+const fontWeight = [
+    {
+        pattern: /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
+    },
+];
+const borders = [
+    { pattern: /^border$/ },
+    { pattern: /^border-(\d+|0)$/ },
+    { pattern: /^border-(solid|dashed|dotted|double|none)$/ },
+    { pattern: /^border-(t|r|b|l|x|y)$/ },
+    { pattern: /^border-(t|r|b|l|x|y)-(\d+|0)$/ },
+    { pattern: /^rounded$/ },
+    { pattern: /^rounded-(t|r|b|l|full|none)$/ },
+    { pattern: /^rounded-(tl|tr|bl|br)$/ },
+    { pattern: /^rounded-(\d+|sm|md|lg|xl|2xl|3xl)$/ },
+];
+const width = [
+    {
+        pattern: /^w-(\d+|auto|full|screen|inherit|initial|max-content|min-content|revert|unset)$/,
+    },
+    {
+        pattern: /^max-w-(\d+|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|min|max|prose|screen-(sm|md|lg|xl|2xl))$/,
+    },
+];
+const height = [
+    { pattern: /^h-(\d+|auto|full|screen)$/ },
+    {
+        pattern: /^max-h-(\d+|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|min|max|prose|screen-(sm|md|lg|xl|2xl))$/,
+    },
+];
+const colors = [
+    { pattern: /^bg-(\w+)$/, variants: colorSchemes },
+    { pattern: /^text-(\w+)$/, variants: colorSchemes },
+    {
+        pattern: /^bg-(green|turquoise|petrol|lime|crimson|red|yellow|gray|amber|orange)-(?!(950))\d{1,3}$/,
+        variants: colorSchemes,
+    },
+    {
+        pattern: /^text-(green|turquoise|petrol|lime|crimson|red|yellow|gray|amber|orange)-(?!(950))\d{1,3}$/,
+        variants: colorSchemes,
+    },
+];
+const cursors = [
+    {
+        pattern: /^cursor-(auto|default|pointer|wait|text|move|help|not-allowed|none|progress|crosshair|zoom-in|zoom-out|grab|grabbing|col-resize|row-resize|all-scroll)$/,
+    },
+];
+const resize = [
+    {
+        pattern: /^resize-(none|y|x)$/,
+        variants: responsive,
+    },
+];
+// From the nova tailwind plugin (nova-plugin.ts)
+const utils = [
+    { pattern: /^visually-hidden$/, variants: responsive },
+    { pattern: /^font-(high|medium|low)-emphasis$/ },
+    { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
+    { pattern: /^border-(high|medium|low)-emphasis$/ },
+];
+// From the nova tailwind plugin (nova-plugin.ts)
+const components = [{ pattern: /^link$/, variants: pointer }];
+export const novaThemeSafelist = [
+    ...padding,
+    ...margin,
+    ...gap,
+    ...flexBox,
+    ...grid,
+    ...spaceBetween,
+    ...overflow,
+    ...position,
+    ...display,
+    ...textAlign,
+    ...textSize,
+    ...whitespace,
+    ...verticalAlign,
+    ...fontWeight,
+    ...borders,
+    ...width,
+    ...height,
+    ...colors,
+    ...cursors,
+    ...resize,
+    ...utils,
+    ...components,
+];

package/dist/lib/nova-theme.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @fileoverview This file contains various tailwind extensions for nova
+ */
+import type { Config } from 'tailwindcss';
+export declare const spacing: {
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+    px: string;
+};
+export declare const fontFamily: {
+    sans: string;
+    mono: string;
+};
+export declare const borderRadius: {
+    none: string;
+    sm: string;
+    DEFAULT: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+};
+export declare const fontSize: {
+    xs: [string, string];
+    sm: [string, string];
+    md: [string, string];
+    lg: [string, string];
+    xl: [string, string];
+    '2xl': [string, string];
+    '3xl': [string, string];
+    '4xl': [string, string];
+    '5xl': [string, string];
+    '6xl': [string, string];
+    '7xl': [string, string];
+    '8xl': [string, string];
+    '9xl': [string, string];
+};
+export declare const lineHeight: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+    '9xl': string;
+};
+export declare const colors: Config['theme']['colors'];
+export declare const novaTailwindTheme: Config['theme'];