@nova-design-system/nova-base 3.0.0-beta.30 → 3.0.0-beta.33

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-plugin.js → lib/nova-plugin.js}

@@ -2,12 +2,25 @@
 /**
  * @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("../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({
@@ -27,62 +40,52 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
             '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)',
-        },
-    });
-    addComponents({
-        '.link': {
-            color: 'var(--color-interaction-link-standalone-text)',
-            fontWeight: '500',
-            'text-decoration': 'none',
-        },
-        '.link:hover': {
-            color: 'var(--color-interaction-link-standalone-text-hover)',
+            color: 'var(--color-content-low-text)',
         },
     });
-    addUtilities({
-        '.visually-hidden': {
+    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',
             border: '0',
@@ -92,72 +95,17 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
             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': {
+        }, '.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 → lib/nova-safelist.js}

@@ -19,6 +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("../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
@@ -324,10 +326,16 @@ var resize = [
 // From the nova tailwind plugin (nova-plugin.ts)
 var utils = [
     { pattern: /^visually-hidden$/, variants: exports.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)
-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 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'] },
+], 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-theme.js → lib/nova-theme.js}

@@ -87,8 +87,20 @@ exports.lineHeight = {
     '9xl': 'var(--line-height-9xl)',
 };
 exports.colors = {
-    background: 'var(--color-base-level-00)',
-    text: 'var(--color-base-content-medium-emphasis)',
+    background: 'var(--color-level-00-background)',
+    text: 'var(--color-content-medium-text)',
+    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)',