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

package/dist/lib/nova-plugin.js

@@ -21,58 +21,58 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
             'border-radius': 'var(--radius-rounded)',
         },
         a: {
-            color: 'var(--color-interaction-link-inline-text)',
+            color: 'var(--color-interaction-link-high-text)',
             'text-decoration': 'underline',
             fontWeight: '700',
         },
         'a:hover': {
-            color: 'var(--color-interaction-link-inline-text-hover)',
+            color: 'var(--color-interaction-link-high-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)',
+            color: 'var(--color-content-high-text)',
         },
         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)',
+            color: 'var(--color-content-high-text)',
         },
         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)',
+            color: 'var(--color-content-high-text)',
         },
         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)',
+            color: 'var(--color-content-high-text)',
         },
         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)',
+            color: 'var(--color-content-medium-text)',
         },
         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)',
+            color: 'var(--color-content-low-text)',
         },
     });
     addComponents({
         '.link': {
-            color: 'var(--color-interaction-link-standalone-text)',
+            color: 'var(--color-interaction-link-high-text)',
             fontWeight: '500',
             'text-decoration': 'none',
         },
         '.link:hover': {
-            color: 'var(--color-interaction-link-standalone-text-hover)',
+            color: 'var(--color-interaction-link-high-text-hover)',
         },
     });
     addUtilities({
@@ -88,54 +88,6 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
             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',
         },

package/dist/lib/nova-safelist.js

@@ -313,9 +313,9 @@ const resize = [
 // From the nova tailwind plugin (nova-plugin.ts)
 const utils = [
     { pattern: /^visually-hidden$/, variants: responsive },
-    { pattern: /^font-(high|medium|low)-emphasis$/ },
+    { pattern: /^text-(high|medium|low)$/ },
     { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
-    { pattern: /^border-(high|medium|low)-emphasis$/ },
+    { pattern: /^border-(high|medium|low)$/ },
 ];
 // From the nova tailwind plugin (nova-plugin.ts)
 const components = [{ pattern: /^link$/, variants: pointer }];

package/dist/lib/nova-tailwind-tokens.d.ts

@@ -18,25 +18,52 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-base-medium-emphasis': {
         'border-color': string;
     };
-    '.text-base-high-emphasis': {
+    '.border-high': {
+        'border-color': string;
+    };
+    '.icon-high': {
+        color: string;
+    };
+    '.text-high': {
+        color: string;
+    };
+    '.icon-inverted-high': {
+        color: string;
+    };
+    '.text-inverted-high': {
+        color: string;
+    };
+    '.icon-inverted-low': {
         color: string;
     };
-    '.text-base-inverted-high-emphasis': {
+    '.text-inverted-low': {
         color: string;
     };
-    '.text-base-inverted-low-emphasis': {
+    '.icon-inverted-medium': {
         color: string;
     };
-    '.text-base-inverted-medium-emphasis': {
+    '.text-inverted-medium': {
         color: string;
     };
-    '.text-base-low-emphasis': {
+    '.border-low': {
+        'border-color': string;
+    };
+    '.icon-low': {
+        color: string;
+    };
+    '.text-low': {
+        color: string;
+    };
+    '.text-lower': {
         color: string;
     };
-    '.text-base-lower-emphasis': {
+    '.border-medium': {
+        'border-color': string;
+    };
+    '.icon-medium': {
         color: string;
     };
-    '.text-base-medium-emphasis': {
+    '.text-medium': {
         color: string;
     };
     '.bg-dont-use': {
@@ -45,15 +72,15 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-dont-use': {
         'border-color': string;
     };
-    '.text-dont-use': {
-        color: string;
-    };
     '.bg-feedback-error-high': {
         'background-color': string;
     };
     '.border-feedback-error-high': {
         'border-color': string;
     };
+    '.icon-feedback-error-high': {
+        color: string;
+    };
     '.text-feedback-error-high': {
         color: string;
     };
@@ -63,6 +90,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-error-low': {
         'border-color': string;
     };
+    '.icon-feedback-error-low': {
+        color: string;
+    };
     '.text-feedback-error-low': {
         color: string;
     };
@@ -72,6 +102,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-information-high': {
         'border-color': string;
     };
+    '.icon-feedback-information-high': {
+        color: string;
+    };
     '.text-feedback-information-high': {
         color: string;
     };
@@ -81,6 +114,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-information-low': {
         'border-color': string;
     };
+    '.icon-feedback-information-low': {
+        color: string;
+    };
     '.text-feedback-information-low': {
         color: string;
     };
@@ -90,6 +126,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-neutral-high': {
         'border-color': string;
     };
+    '.icon-feedback-neutral-high': {
+        color: string;
+    };
     '.text-feedback-neutral-high': {
         color: string;
     };
@@ -99,6 +138,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-neutral-low': {
         'border-color': string;
     };
+    '.icon-feedback-neutral-low': {
+        color: string;
+    };
     '.text-feedback-neutral-low': {
         color: string;
     };
@@ -108,6 +150,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-success-high': {
         'border-color': string;
     };
+    '.icon-feedback-success-high': {
+        color: string;
+    };
     '.text-feedback-success-high': {
         color: string;
     };
@@ -117,6 +162,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-success-low': {
         'border-color': string;
     };
+    '.icon-feedback-success-low': {
+        color: string;
+    };
     '.text-feedback-success-low': {
         color: string;
     };
@@ -126,6 +174,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-warning-high': {
         'border-color': string;
     };
+    '.icon-feedback-warning-high': {
+        color: string;
+    };
     '.text-feedback-warning-high': {
         color: string;
     };
@@ -135,6 +186,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-feedback-warning-low': {
         'border-color': string;
     };
+    '.icon-feedback-warning-low': {
+        color: string;
+    };
     '.text-feedback-warning-low': {
         color: string;
     };
@@ -150,6 +204,12 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-interaction-brand-high-hover': {
         'border-color': string;
     };
+    '.icon-interaction-brand-high': {
+        color: string;
+    };
+    '.icon-interaction-brand-high-hover': {
+        color: string;
+    };
     '.text-interaction-brand-high': {
         color: string;
     };
@@ -168,24 +228,144 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-interaction-brand-low-hover': {
         'border-color': string;
     };
+    '.icon-interaction-brand-low': {
+        color: string;
+    };
+    '.icon-interaction-brand-low-hover': {
+        color: string;
+    };
     '.text-interaction-brand-low': {
         color: string;
     };
     '.text-interaction-brand-low-hover': {
         color: string;
     };
+    '.bg-interaction-container-branded-high': {
+        'background-color': string;
+    };
+    '.bg-interaction-container-branded-high-hover': {
+        'background-color': string;
+    };
+    '.border-interaction-container-branded-high': {
+        'border-color': string;
+    };
+    '.border-interaction-container-branded-high-hover': {
+        'border-color': string;
+    };
+    '.icon-interaction-container-branded-high': {
+        color: string;
+    };
+    '.icon-interaction-container-branded-high-hover': {
+        color: string;
+    };
+    '.text-interaction-container-branded-high': {
+        color: string;
+    };
+    '.text-interaction-container-branded-high-hover': {
+        color: string;
+    };
+    '.bg-interaction-container-branded-low': {
+        'background-color': string;
+    };
+    '.bg-interaction-container-branded-low-hover': {
+        'background-color': string;
+    };
+    '.border-interaction-container-branded-low': {
+        'border-color': string;
+    };
+    '.border-interaction-container-branded-low-hover': {
+        'border-color': string;
+    };
+    '.icon-interaction-container-branded-low': {
+        color: string;
+    };
+    '.icon-interaction-container-branded-low-hover': {
+        color: string;
+    };
+    '.text-interaction-container-branded-low': {
+        color: string;
+    };
+    '.text-interaction-container-branded-low-hover': {
+        color: string;
+    };
+    '.bg-interaction-container-neutral': {
+        'background-color': string;
+    };
+    '.bg-interaction-container-neutral-hover': {
+        'background-color': string;
+    };
+    '.border-interaction-container-neutral': {
+        'border-color': string;
+    };
+    '.border-interaction-container-neutral-hover': {
+        'border-color': string;
+    };
+    '.icon-interaction-container-neutral': {
+        color: string;
+    };
+    '.icon-interaction-container-neutral-hover': {
+        color: string;
+    };
+    '.text-interaction-container-neutral': {
+        color: string;
+    };
+    '.text-interaction-container-neutral-hover': {
+        color: string;
+    };
+    '.icon-interaction-link-high': {
+        color: string;
+    };
+    '.icon-interaction-link-high-hover': {
+        color: string;
+    };
+    '.text-interaction-link-high': {
+        color: string;
+    };
+    '.text-interaction-link-high-hover': {
+        color: string;
+    };
+    '.icon-interaction-link-inline': {
+        color: string;
+    };
+    '.icon-interaction-link-inline-hover': {
+        color: string;
+    };
     '.text-interaction-link-inline': {
         color: string;
     };
     '.text-interaction-link-inline-hover': {
         color: string;
     };
+    '.icon-interaction-link-low': {
+        color: string;
+    };
+    '.icon-interaction-link-low-hover': {
+        color: string;
+    };
+    '.text-interaction-link-low': {
+        color: string;
+    };
+    '.text-interaction-link-low-hover': {
+        color: string;
+    };
+    '.icon-interaction-link-standalone': {
+        color: string;
+    };
+    '.icon-interaction-link-standalone-hover': {
+        color: string;
+    };
     '.text-interaction-link-standalone': {
         color: string;
     };
     '.text-interaction-link-standalone-hover': {
         color: string;
     };
+    '.icon-interaction-link-table': {
+        color: string;
+    };
+    '.icon-interaction-link-table-hover': {
+        color: string;
+    };
     '.text-interaction-link-table': {
         color: string;
     };
@@ -204,18 +384,45 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-interaction-neutral-hover': {
         'border-color': string;
     };
+    '.icon-interaction-neutral': {
+        color: string;
+    };
+    '.icon-interaction-neutral-hover': {
+        color: string;
+    };
     '.text-interaction-neutral': {
         color: string;
     };
     '.text-interaction-neutral-hover': {
         color: string;
     };
+    '.bg-level-00': {
+        'background-color': string;
+    };
+    '.bg-level-05': {
+        'background-color': string;
+    };
+    '.bg-level-10': {
+        'background-color': string;
+    };
+    '.bg-level-20': {
+        'background-color': string;
+    };
+    '.bg-level-30': {
+        'background-color': string;
+    };
+    '.bg-level-40': {
+        'background-color': string;
+    };
     '.bg-rainbow-1': {
         'background-color': string;
     };
     '.border-rainbow-1': {
         'border-color': string;
     };
+    '.icon-rainbow-1': {
+        color: string;
+    };
     '.text-rainbow-1': {
         color: string;
     };
@@ -225,6 +432,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-10': {
         'border-color': string;
     };
+    '.icon-rainbow-10': {
+        color: string;
+    };
     '.text-rainbow-10': {
         color: string;
     };
@@ -234,6 +444,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-2': {
         'border-color': string;
     };
+    '.icon-rainbow-2': {
+        color: string;
+    };
     '.text-rainbow-2': {
         color: string;
     };
@@ -243,6 +456,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-3': {
         'border-color': string;
     };
+    '.icon-rainbow-3': {
+        color: string;
+    };
     '.text-rainbow-3': {
         color: string;
     };
@@ -252,6 +468,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-4': {
         'border-color': string;
     };
+    '.icon-rainbow-4': {
+        color: string;
+    };
     '.text-rainbow-4': {
         color: string;
     };
@@ -261,6 +480,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-5': {
         'border-color': string;
     };
+    '.icon-rainbow-5': {
+        color: string;
+    };
     '.text-rainbow-5': {
         color: string;
     };
@@ -270,6 +492,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-6': {
         'border-color': string;
     };
+    '.icon-rainbow-6': {
+        color: string;
+    };
     '.text-rainbow-6': {
         color: string;
     };
@@ -279,6 +504,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-7': {
         'border-color': string;
     };
+    '.icon-rainbow-7': {
+        color: string;
+    };
     '.text-rainbow-7': {
         color: string;
     };
@@ -288,6 +516,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-8': {
         'border-color': string;
     };
+    '.icon-rainbow-8': {
+        color: string;
+    };
     '.text-rainbow-8': {
         color: string;
     };
@@ -297,6 +528,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
     '.border-rainbow-9': {
         'border-color': string;
     };
+    '.icon-rainbow-9': {
+        color: string;
+    };
     '.text-rainbow-9': {
         color: string;
     };