@nuvia-ui/tokens 4.0.1

package/build/ai-context.md

@@ -0,0 +1,332 @@
+# Design System - AI Context
+
+> Auto-generated file for AI assistants. Use these tokens when generating UI code.
+
+## 🎯 Quick Rules
+
+1. **Always use CSS variables**, never raw values
+2. **Use semantic tokens**, not primitives
+3. **Prefix**: All tokens start with `--ds-`
+
+## ✅ Correct Usage
+
+```css
+/* Good - semantic tokens */
+color: var(--ds-color-text-primary);
+background: var(--ds-color-bg-brand);
+padding: var(--ds-space-md);
+
+/* Bad - raw values */
+color: #262523;
+background: #0060ff;
+padding: 16px;
+```
+
+---
+
+## 📦 Token Reference
+
+### Colors
+
+| Token | Value | Usage |
+|-------|-------|-------|
+
+### Spacing
+
+| Token | Value | Description |
+|-------|-------|-------------|
+| `--ds-space-none` | `0px` | none |
+| `--ds-space-xxs` | `2px` | xxs |
+| `--ds-space-xs` | `4px` | xs |
+| `--ds-space-sm` | `8px` | sm |
+| `--ds-space-md` | `16px` | **Base unit** |
+| `--ds-space-lg` | `24px` | lg |
+| `--ds-space-xl` | `32px` | xl |
+| `--ds-space-2xl` | `48px` | 2xl |
+| `--ds-space-3xl` | `64px` | 3xl |
+| `--ds-space-4xl` | `80px` | 4xl |
+
+### Typography
+
+| Style | Font Size | Line Height |
+|-------|-----------|-------------|
+
+### Icon Sizes
+
+| Token | Value |
+|-------|-------|
+| `--ds-icon-size-xs` | `16px` |
+| `--ds-icon-size-sm` | `20px` |
+| `--ds-icon-size-md` | `32px` |
+| `--ds-icon-size-lg` | `48px` |
+
+### Border Radius
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--ds-radius-action` | `999px` | Buttons, FABs |
+| `--ds-radius-input` | `0px` | Form fields |
+| `--ds-radius-container` | `0px` | Cards, Panels |
+| `--ds-radius-badge` | `0px` | Status indicators |
+| `--ds-radius-avatar` | `999px` | User images |
+| `--ds-radius-media` | `0px` | Images, thumbnails |
+
+### Z-Index Layers
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--ds-zindex-layout-panel` | `100` | Side panels, drawers |
+| `--ds-zindex-footer` | `200` | Page footer |
+| `--ds-zindex-header` | `300` | Page header, navigation |
+| `--ds-zindex-overlap` | `600` | Dropdowns, popovers |
+| `--ds-zindex-message` | `700` | Toast notifications |
+| `--ds-zindex-backdrop` | `800` | Modal backdrops |
+| `--ds-zindex-modal` | `900` | Modal dialogs |
+| `--ds-zindex-tooltip` | `1000` | Tooltips (highest) |
+
+### Breakpoints
+
+| Token | Value | Device Category |
+|-------|-------|----------------|
+| `--ds-breakpoint-xs` | `305px` | Mobile (portrait) |
+| `--ds-breakpoint-sm` | `600px` | Mobile (landscape) / Small tablet |
+| `--ds-breakpoint-md` | `960px` | Tablet |
+| `--ds-breakpoint-lg` | `1280px` | Desktop |
+| `--ds-breakpoint-xl` | `1600px` | Large desktop |
+| `--ds-breakpoint-2xl` | `1904px` | Extra large desktop |
+
+**Usage in Media Queries:**
+```css
+/* Mobile first approach */
+@media (min-width: var(--ds-breakpoint-md)) {
+  /* Tablet and above */
+}
+```
+
+### Elevation
+
+| Token | Value | Description |
+|-------|-------|-------------|
+| `--ds-elevation-floating` | `0 2px 12px 0 #e6e2dc` | Shadow layer |
+
+---
+
+## 🧩 Common Patterns
+
+### Button
+```css
+.button {
+  background: var(--ds-color-bg-brand);
+  color: var(--ds-color-text-inverse);
+  padding: var(--ds-space-sm) var(--ds-space-md);
+  border: none;
+  border-radius: var(--ds-radius-action);
+}
+
+.button:hover {
+  background: var(--ds-color-bg-brand-hover);
+}
+```
+
+### Card
+```css
+.card {
+  background: var(--ds-color-bg-default);
+  border: 1px solid var(--ds-color-border-default);
+  padding: var(--ds-space-lg);
+  border-radius: var(--ds-radius-container);
+}
+```
+
+### Text Hierarchy
+```css
+h1 { font-size: var(--ds-typo-heading-xl-size); }
+h2 { font-size: var(--ds-typo-heading-lg-size); }
+p  { font-size: var(--ds-typo-content-body-size); }
+```
+
+---
+
+## 📋 Full Token List
+
+### Color
+```
+--ds-color-text-default: #262523;
+--ds-color-text-secondary: #7b736b;
+--ds-color-text-inverse: #ffffff;
+--ds-color-text-disabled: #9d968d;
+--ds-color-text-link: #0060ff;
+--ds-color-text-link-hover: #0042b0;
+--ds-color-text-error: #c62828;
+--ds-color-text-brand: #0060ff;
+--ds-color-text-brand-hover: #0042b0;
+--ds-color-text-brand-pressed: #003386;
+--ds-color-text-header: #262523;
+--ds-color-text-footer: #262523;
+--ds-color-icon-default: #262523;
+--ds-color-icon-secondary: #7b736b;
+--ds-color-icon-inverse: #ffffff;
+--ds-color-icon-disabled: #9d968d;
+--ds-color-icon-brand: #0060ff;
+--ds-color-icon-brand-hover: #0042b0;
+--ds-color-icon-brand-pressed: #003386;
+--ds-color-icon-error: #c62828;
+--ds-color-icon-success: #659a2d;
+--ds-color-icon-selected: #0060ff;
+--ds-color-icon-header: #262523;
+--ds-color-icon-footer: #262523;
+--ds-color-border-default: #e6e2dc;
+--ds-color-border-strong: #bfb8af;
+--ds-color-border-strongest: #262523;
+--ds-color-border-inverse: #ffffff;
+--ds-color-border-disabled: #e6e2dc;
+--ds-color-border-brand: #0060ff;
+--ds-color-border-brand-hover: #0042b0;
+--ds-color-border-brand-pressed: #003386;
+--ds-color-border-error: #c62828;
+--ds-color-border-focus: #0060ff;
+--ds-color-border-selected: #0060ff;
+--ds-color-border-selected-secondary: #262523;
+--ds-color-border-header: #e6e2dc;
+--ds-color-border-footer: #e6e2dc;
+--ds-color-bg-default: #ffffff;
+--ds-color-bg-secondary: #f5f3f1;
+--ds-color-bg-inverse: #262523;
+--ds-color-bg-disabled: #f5f3f1;
+--ds-color-bg-hover: #e6e2dc;
+--ds-color-bg-pressed: #d3cec8;
+--ds-color-bg-selected: #d3cec8;
+--ds-color-bg-skeleton: #e6e2dc;
+--ds-color-bg-backdrop: #fbfaf9cc;
+--ds-color-bg-brand: #0060ff;
+--ds-color-bg-brand-hover: #0042b0;
+--ds-color-bg-brand-pressed: #003386;
+--ds-color-bg-brand-subtle: #cadeff;
+--ds-color-bg-brand-subtle-hover: #9dc2ff;
+--ds-color-bg-layout-page: #fbfaf9;
+--ds-color-bg-layout-page-secondary: #ffffff;
+--ds-color-bg-layout-panel: #f5f3f1;
+--ds-color-bg-layout-panel-secondary: #fbfaf9;
+--ds-color-bg-success-subtle: #d4e1c7;
+--ds-color-bg-warning-subtle: #fff2d7;
+--ds-color-bg-error: #c62828;
+--ds-color-bg-error-subtle: #f4d5d5;
+--ds-color-bg-info-subtle: #cadeff;
+--ds-color-bg-neutral-subtle: #bfb8af;
+--ds-color-bg-header: #ffffff;
+--ds-color-bg-header-hover: #e6e2dc;
+--ds-color-bg-header-pressed: #d3cec8;
+--ds-color-bg-header-selected: #d3cec8;
+--ds-color-bg-footer: #ffffff;
+--ds-color-chart-brand: #388aff;
+--ds-color-chart-neutral: #e6e2dc;
+--ds-color-chart-categorical-1: #823cdd;
+--ds-color-chart-categorical-2: #1d9ca5;
+--ds-color-chart-categorical-3: #b95b1d;
+--ds-color-chart-categorical-4: #388aff;
+--ds-color-chart-categorical-5: #0042b0;
+--ds-color-chart-categorical-6: #dd6490;
+--ds-color-chart-categorical-7: #c18501;
+--ds-color-chart-categorical-8: #901944;
+--ds-color-chart-categorical-9: #a774e7;
+--ds-color-chart-categorical-10: #157379;
+--ds-color-chart-categorical-11: #36a061;
+--ds-color-chart-categorical-12: #893e01;
+--ds-color-chart-sequential-1: #eaf2ff;
+--ds-color-chart-sequential-2: #cadeff;
+--ds-color-chart-sequential-3: #9dc2ff;
+--ds-color-chart-sequential-4: #71a6ff;
+--ds-color-chart-sequential-5: #388aff;
+--ds-color-chart-sequential-6: #0060ff;
+--ds-color-chart-sequential-7: #0042b0;
+--ds-color-chart-sequential-8: #003386;
+--ds-color-chart-sequential-9: #002461;
+--ds-color-chart-sequential-10: #00163c;
+--ds-color-status-success: #659a2d;
+--ds-color-status-warning-major: #d96e17;
+--ds-color-status-warning-minor: #df9a01;
+--ds-color-status-fail: #c62828;
+--ds-color-status-critical: #c62828;
+--ds-color-status-danger: #c62828;
+--ds-color-status-neutral: #7b736b;
+--ds-color-status-new: #0060ff;
+--ds-color-status-inprogress: #262523;
+--ds-color-status-pending: #7b736b;
+--ds-color-status-info: #262523;
+```
+
+### Elevation
+```
+--ds-elevation-floating: 0 2px 12px 0 #e6e2dc;
+```
+
+### Icon
+```
+--ds-icon-size-xs: 16px;
+--ds-icon-size-sm: 20px;
+--ds-icon-size-md: 32px;
+--ds-icon-size-lg: 48px;
+```
+
+### Radius
+```
+--ds-radius-action: 999px;
+--ds-radius-input: 0px;
+--ds-radius-container: 0px;
+--ds-radius-badge: 0px;
+--ds-radius-avatar: 999px;
+--ds-radius-media: 0px;
+```
+
+### Space
+```
+--ds-space-none: 0px;
+--ds-space-xxs: 2px;
+--ds-space-xs: 4px;
+--ds-space-sm: 8px;
+--ds-space-md: 16px;
+--ds-space-lg: 24px;
+--ds-space-xl: 32px;
+--ds-space-2xl: 48px;
+--ds-space-3xl: 64px;
+--ds-space-4xl: 80px;
+```
+
+### Typo
+```
+--ds-typo-heading-3xl: normal 700 36px/48px 'Noto Sans', sans-serif;
+--ds-typo-heading-2xl: normal 700 32px/40px 'Noto Sans', sans-serif;
+--ds-typo-heading-xl: normal 700 28px/36px 'Noto Sans', sans-serif;
+--ds-typo-heading-lg: normal 700 24px/32px 'Noto Sans', sans-serif;
+--ds-typo-heading-md: normal 700 20px/28px 'Noto Sans', sans-serif;
+--ds-typo-heading-sm: normal 700 18px/24px 'Noto Sans', sans-serif;
+--ds-typo-content-body-regular: normal 400 14px/20px 'Noto Sans', sans-serif;
+--ds-typo-content-body-bold: normal 700 14px/20px 'Noto Sans', sans-serif;
+--ds-typo-content-caption-regular: normal 400 12px/16px 'Noto Sans', sans-serif;
+--ds-typo-content-caption-bold: normal 700 12px/16px 'Noto Sans', sans-serif;
+--ds-typo-content-viz-regular: normal 400 10px/16px 'Noto Sans', sans-serif;
+--ds-typo-content-viz-bold: normal 700 10px/16px 'Noto Sans', sans-serif;
+```
+
+### Zindex
+```
+--ds-zindex-layout-panel: 100;
+--ds-zindex-footer: 200;
+--ds-zindex-header: 300;
+--ds-zindex-overlap: 600;
+--ds-zindex-message: 700;
+--ds-zindex-backdrop: 800;
+--ds-zindex-modal: 900;
+--ds-zindex-tooltip: 1000;
+```
+
+### Breakpoint
+```
+--ds-breakpoint-xs: 305px;
+--ds-breakpoint-sm: 600px;
+--ds-breakpoint-md: 960px;
+--ds-breakpoint-lg: 1280px;
+--ds-breakpoint-xl: 1600px;
+--ds-breakpoint-2xl: 1904px;
+```
+

package/build/css/light.css

@@ -0,0 +1,150 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-theme="light"],
+:root {
+  --ds-color-text-default: var(--ds-color-gray-90);
+  --ds-color-text-secondary: var(--ds-color-gray-60);
+  --ds-color-text-inverse: var(--ds-color-base-white);
+  --ds-color-text-disabled: var(--ds-color-gray-50);
+  --ds-color-text-link: var(--ds-color-blue-60);
+  --ds-color-text-link-hover: var(--ds-color-blue-70);
+  --ds-color-text-error: var(--ds-color-red-60);
+  --ds-color-text-brand: var(--ds-color-blue-60);
+  --ds-color-text-brand-hover: var(--ds-color-blue-70);
+  --ds-color-text-brand-pressed: var(--ds-color-blue-80);
+  --ds-color-text-header: var(--ds-color-gray-90);
+  --ds-color-text-footer: var(--ds-color-gray-90);
+  --ds-color-icon-default: var(--ds-color-gray-90);
+  --ds-color-icon-secondary: var(--ds-color-gray-60);
+  --ds-color-icon-inverse: var(--ds-color-base-white);
+  --ds-color-icon-disabled: var(--ds-color-gray-50);
+  --ds-color-icon-brand: var(--ds-color-blue-60);
+  --ds-color-icon-brand-hover: var(--ds-color-blue-70);
+  --ds-color-icon-brand-pressed: var(--ds-color-blue-80);
+  --ds-color-icon-error: var(--ds-color-red-60);
+  --ds-color-icon-success: var(--ds-color-lime-50);
+  --ds-color-icon-selected: var(--ds-color-blue-60);
+  --ds-color-icon-header: var(--ds-color-gray-90);
+  --ds-color-icon-footer: var(--ds-color-gray-90);
+  --ds-color-border-default: var(--ds-color-gray-30);
+  --ds-color-border-strong: var(--ds-color-gray-40);
+  --ds-color-border-strongest: var(--ds-color-gray-90);
+  --ds-color-border-inverse: var(--ds-color-base-white);
+  --ds-color-border-disabled: var(--ds-color-gray-30);
+  --ds-color-border-brand: var(--ds-color-blue-60);
+  --ds-color-border-brand-hover: var(--ds-color-blue-70);
+  --ds-color-border-brand-pressed: var(--ds-color-blue-80);
+  --ds-color-border-error: var(--ds-color-red-60);
+  --ds-color-border-focus: var(--ds-color-blue-60);
+  --ds-color-border-selected: var(--ds-color-blue-60);
+  --ds-color-border-selected-secondary: var(--ds-color-gray-90);
+  --ds-color-border-header: var(--ds-color-gray-30);
+  --ds-color-border-footer: var(--ds-color-gray-30);
+  --ds-color-bg-default: var(--ds-color-base-white);
+  --ds-color-bg-secondary: var(--ds-color-gray-20);
+  --ds-color-bg-inverse: var(--ds-color-gray-90);
+  --ds-color-bg-disabled: var(--ds-color-gray-20);
+  --ds-color-bg-hover: var(--ds-color-gray-30);
+  --ds-color-bg-pressed: var(--ds-color-gray-35);
+  --ds-color-bg-selected: var(--ds-color-gray-35);
+  --ds-color-bg-skeleton: var(--ds-color-gray-30);
+  --ds-color-bg-backdrop: #fbfaf9cc;
+  --ds-color-bg-brand: var(--ds-color-blue-60);
+  --ds-color-bg-brand-hover: var(--ds-color-blue-70);
+  --ds-color-bg-brand-pressed: var(--ds-color-blue-80);
+  --ds-color-bg-brand-subtle: var(--ds-color-blue-20);
+  --ds-color-bg-brand-subtle-hover: var(--ds-color-blue-30);
+  --ds-color-bg-layout-page: var(--ds-color-gray-10);
+  --ds-color-bg-layout-page-secondary: var(--ds-color-base-white);
+  --ds-color-bg-layout-panel: var(--ds-color-gray-20);
+  --ds-color-bg-layout-panel-secondary: var(--ds-color-gray-10);
+  --ds-color-bg-success-subtle: var(--ds-color-lime-20);
+  --ds-color-bg-warning-subtle: var(--ds-color-light-orange-10);
+  --ds-color-bg-error: var(--ds-color-red-60);
+  --ds-color-bg-error-subtle: var(--ds-color-red-20);
+  --ds-color-bg-info-subtle: var(--ds-color-blue-20);
+  --ds-color-bg-neutral-subtle: var(--ds-color-gray-40);
+  --ds-color-bg-header: var(--ds-color-base-white);
+  --ds-color-bg-header-hover: var(--ds-color-gray-30);
+  --ds-color-bg-header-pressed: var(--ds-color-gray-35);
+  --ds-color-bg-header-selected: var(--ds-color-gray-35);
+  --ds-color-bg-footer: var(--ds-color-base-white);
+  --ds-color-chart-brand: var(--ds-color-blue-50);
+  --ds-color-chart-neutral: var(--ds-color-gray-30);
+  --ds-color-chart-categorical-1: var(--ds-color-purple-60);
+  --ds-color-chart-categorical-2: var(--ds-color-teal-50);
+  --ds-color-chart-categorical-3: var(--ds-color-orange-60);
+  --ds-color-chart-categorical-4: var(--ds-color-blue-50);
+  --ds-color-chart-categorical-5: var(--ds-color-blue-70);
+  --ds-color-chart-categorical-6: var(--ds-color-magenta-50);
+  --ds-color-chart-categorical-7: var(--ds-color-light-orange-50);
+  --ds-color-chart-categorical-8: var(--ds-color-magenta-70);
+  --ds-color-chart-categorical-9: var(--ds-color-purple-50);
+  --ds-color-chart-categorical-10: var(--ds-color-teal-60);
+  --ds-color-chart-categorical-11: var(--ds-color-green-50);
+  --ds-color-chart-categorical-12: var(--ds-color-orange-70);
+  --ds-color-chart-sequential-1: var(--ds-color-blue-10);
+  --ds-color-chart-sequential-2: var(--ds-color-blue-20);
+  --ds-color-chart-sequential-3: var(--ds-color-blue-30);
+  --ds-color-chart-sequential-4: var(--ds-color-blue-40);
+  --ds-color-chart-sequential-5: var(--ds-color-blue-50);
+  --ds-color-chart-sequential-6: var(--ds-color-blue-60);
+  --ds-color-chart-sequential-7: var(--ds-color-blue-70);
+  --ds-color-chart-sequential-8: var(--ds-color-blue-80);
+  --ds-color-chart-sequential-9: var(--ds-color-blue-90);
+  --ds-color-chart-sequential-10: var(--ds-color-blue-100);
+  --ds-color-status-success: var(--ds-color-lime-50);
+  --ds-color-status-warning-major: var(--ds-color-orange-50);
+  --ds-color-status-warning-minor: var(--ds-color-light-orange-40);
+  --ds-color-status-fail: var(--ds-color-red-60);
+  --ds-color-status-critical: var(--ds-color-red-60);
+  --ds-color-status-danger: var(--ds-color-red-60);
+  --ds-color-status-neutral: var(--ds-color-gray-60);
+  --ds-color-status-new: var(--ds-color-blue-60);
+  --ds-color-status-inprogress: var(--ds-color-gray-90);
+  --ds-color-status-pending: var(--ds-color-gray-60);
+  --ds-color-status-info: var(--ds-color-gray-90);
+  --ds-elevation-floating: 0 2px 12px 0 var(--ds-color-gray-30);
+  --ds-icon-size-xs: var(--ds-size-16);
+  --ds-icon-size-sm: var(--ds-size-20);
+  --ds-icon-size-md: var(--ds-size-32);
+  --ds-icon-size-lg: var(--ds-size-48);
+  --ds-radius-action: var(--ds-size-999);
+  --ds-radius-input: var(--ds-size-0);
+  --ds-radius-container: var(--ds-size-0);
+  --ds-radius-badge: var(--ds-size-0);
+  --ds-radius-avatar: var(--ds-size-999);
+  --ds-radius-media: var(--ds-size-0);
+  --ds-space-none: var(--ds-size-0);
+  --ds-space-xxs: var(--ds-size-2);
+  --ds-space-xs: var(--ds-size-4);
+  --ds-space-sm: var(--ds-size-8);
+  --ds-space-md: var(--ds-size-16);
+  --ds-space-lg: var(--ds-size-24);
+  --ds-space-xl: var(--ds-size-32);
+  --ds-space-2xl: var(--ds-size-48);
+  --ds-space-3xl: var(--ds-size-64);
+  --ds-space-4xl: var(--ds-size-80);
+  --ds-typo-heading-3xl: normal var(--ds-font-weight-bold) var(--ds-size-36)/var(--ds-size-48) var(--ds-font-family-heading);
+  --ds-typo-heading-2xl: normal var(--ds-font-weight-bold) var(--ds-size-32)/var(--ds-size-40) var(--ds-font-family-heading);
+  --ds-typo-heading-xl: normal var(--ds-font-weight-bold) var(--ds-size-28)/var(--ds-size-36) var(--ds-font-family-heading);
+  --ds-typo-heading-lg: normal var(--ds-font-weight-bold) var(--ds-size-24)/var(--ds-size-32) var(--ds-font-family-heading);
+  --ds-typo-heading-md: normal var(--ds-font-weight-bold) var(--ds-size-20)/var(--ds-size-28) var(--ds-font-family-heading);
+  --ds-typo-heading-sm: normal var(--ds-font-weight-bold) var(--ds-size-18)/var(--ds-size-24) var(--ds-font-family-content);
+  --ds-typo-content-body-regular: normal var(--ds-font-weight-regular) var(--ds-size-14)/var(--ds-size-20) var(--ds-font-family-content);
+  --ds-typo-content-body-bold: normal var(--ds-font-weight-bold) var(--ds-size-14)/var(--ds-size-20) var(--ds-font-family-content);
+  --ds-typo-content-caption-regular: normal var(--ds-font-weight-regular) var(--ds-size-12)/var(--ds-size-16) var(--ds-font-family-content);
+  --ds-typo-content-caption-bold: normal var(--ds-font-weight-bold) var(--ds-size-12)/var(--ds-size-16) var(--ds-font-family-content);
+  --ds-typo-content-viz-regular: normal var(--ds-font-weight-regular) var(--ds-size-10)/var(--ds-size-16) var(--ds-font-family-content);
+  --ds-typo-content-viz-bold: normal var(--ds-font-weight-bold) var(--ds-size-10)/var(--ds-size-16) var(--ds-font-family-content);
+  --ds-zindex-layout-panel: var(--ds-zindex-10);
+  --ds-zindex-footer: var(--ds-zindex-20);
+  --ds-zindex-header: var(--ds-zindex-30);
+  --ds-zindex-overlap: var(--ds-zindex-60);
+  --ds-zindex-message: var(--ds-zindex-70);
+  --ds-zindex-backdrop: var(--ds-zindex-80);
+  --ds-zindex-modal: var(--ds-zindex-90);
+  --ds-zindex-tooltip: var(--ds-zindex-100);
+}

package/build/css/primitives.css

@@ -0,0 +1,163 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --ds-breakpoint-xs: 305px;
+  --ds-breakpoint-sm: 600px;
+  --ds-breakpoint-md: 960px;
+  --ds-breakpoint-lg: 1280px;
+  --ds-breakpoint-xl: 1600px;
+  --ds-breakpoint-2xl: 1904px;
+  --ds-color-red-10: #faeeee;
+  --ds-color-red-20: #f4d5d5;
+  --ds-color-red-30: #ebb3b3;
+  --ds-color-red-40: #e19090;
+  --ds-color-red-50: #d86e6e;
+  --ds-color-red-60: #c62828;
+  --ds-color-red-70: #911d1d;
+  --ds-color-red-80: #6f1717;
+  --ds-color-red-90: #501010;
+  --ds-color-red-100: #310a0a;
+  --ds-color-orange-10: #fff1e6;
+  --ds-color-orange-20: #ffdbbd;
+  --ds-color-orange-30: #febc85;
+  --ds-color-orange-40: #fe8623;
+  --ds-color-orange-50: #d96e17;
+  --ds-color-orange-60: #b95b1d;
+  --ds-color-orange-70: #893e01;
+  --ds-color-orange-80: #602c00;
+  --ds-color-orange-90: #472000;
+  --ds-color-orange-100: #241000;
+  --ds-color-light-orange-10: #fff2d7;
+  --ds-color-light-orange-20: #fedd94;
+  --ds-color-light-orange-30: #fec037;
+  --ds-color-light-orange-40: #df9a01;
+  --ds-color-light-orange-50: #c18501;
+  --ds-color-light-orange-60: #936601;
+  --ds-color-light-orange-70: #704d01;
+  --ds-color-light-orange-80: #4c3500;
+  --ds-color-light-orange-90: #382700;
+  --ds-color-light-orange-100: #1d1400;
+  --ds-color-lime-10: #edf3e7;
+  --ds-color-lime-20: #d4e1c7;
+  --ds-color-lime-30: #b1c897;
+  --ds-color-lime-40: #84b453;
+  --ds-color-lime-50: #659a2d;
+  --ds-color-lime-60: #457413;
+  --ds-color-lime-70: #32540d;
+  --ds-color-lime-80: #263f0a;
+  --ds-color-lime-90: #1b2d07;
+  --ds-color-lime-100: #101b04;
+  --ds-color-green-10: #e2f5ea;
+  --ds-color-green-20: #b7e7cb;
+  --ds-color-green-30: #7bd39e;
+  --ds-color-green-40: #3fbc71;
+  --ds-color-green-50: #36a061;
+  --ds-color-green-60: #277647;
+  --ds-color-green-70: #1d5633;
+  --ds-color-green-80: #164027;
+  --ds-color-green-90: #0f2d1b;
+  --ds-color-green-100: #091b11;
+  --ds-color-teal-10: #def5f6;
+  --ds-color-teal-20: #b1e6ea;
+  --ds-color-teal-30: #6cd0d7;
+  --ds-color-teal-40: #22b7c1;
+  --ds-color-teal-50: #1d9ca5;
+  --ds-color-teal-60: #157379;
+  --ds-color-teal-70: #0f5358;
+  --ds-color-teal-80: #0c3f43;
+  --ds-color-teal-90: #082c2f;
+  --ds-color-teal-100: #051b1d;
+  --ds-color-blue-10: #eaf2ff;
+  --ds-color-blue-20: #cadeff;
+  --ds-color-blue-30: #9dc2ff;
+  --ds-color-blue-40: #71a6ff;
+  --ds-color-blue-50: #388aff;
+  --ds-color-blue-60: #0060ff;
+  --ds-color-blue-70: #0042b0;
+  --ds-color-blue-80: #003386;
+  --ds-color-blue-90: #002461;
+  --ds-color-blue-100: #00163c;
+  --ds-color-aqua-10: #e6f2fc;
+  --ds-color-aqua-20: #c3e1f8;
+  --ds-color-aqua-30: #90c7f3;
+  --ds-color-aqua-40: #5caded;
+  --ds-color-aqua-50: #3993da;
+  --ds-color-aqua-60: #206ca8;
+  --ds-color-aqua-70: #174e7a;
+  --ds-color-aqua-80: #123b5d;
+  --ds-color-aqua-90: #0c2a41;
+  --ds-color-aqua-100: #081928;
+  --ds-color-purple-10: #f4edfc;
+  --ds-color-purple-20: #e6d7f8;
+  --ds-color-purple-30: #d1b6f2;
+  --ds-color-purple-40: #bb95ec;
+  --ds-color-purple-50: #a774e7;
+  --ds-color-purple-60: #823cdd;
+  --ds-color-purple-70: #5f3399;
+  --ds-color-purple-80: #472a6d;
+  --ds-color-purple-90: #321d4d;
+  --ds-color-purple-100: #1e122e;
+  --ds-color-magenta-10: #fbeef3;
+  --ds-color-magenta-20: #f6d3e0;
+  --ds-color-magenta-30: #eeb0c6;
+  --ds-color-magenta-40: #e68bac;
+  --ds-color-magenta-50: #dd6490;
+  --ds-color-magenta-60: #c5225d;
+  --ds-color-magenta-70: #901944;
+  --ds-color-magenta-80: #6f1334;
+  --ds-color-magenta-90: #4f0e25;
+  --ds-color-magenta-100: #310917;
+  --ds-color-gray-10: #fbfaf9;
+  --ds-color-gray-20: #f5f3f1;
+  --ds-color-gray-30: #e6e2dc;
+  --ds-color-gray-35: #d3cec8;
+  --ds-color-gray-40: #bfb8af;
+  --ds-color-gray-50: #9d968d;
+  --ds-color-gray-60: #7b736b;
+  --ds-color-gray-70: #4f4d4a;
+  --ds-color-gray-80: #3c3b39;
+  --ds-color-gray-90: #262523;
+  --ds-color-gray-100: #151414;
+  --ds-color-base-white: #ffffff;
+  --ds-color-base-black: #000000;
+  --ds-size-0: 0px;
+  --ds-size-2: 2px;
+  --ds-size-4: 4px;
+  --ds-size-6: 6px;
+  --ds-size-8: 8px;
+  --ds-size-10: 10px;
+  --ds-size-12: 12px;
+  --ds-size-14: 14px;
+  --ds-size-16: 16px;
+  --ds-size-18: 18px;
+  --ds-size-20: 20px;
+  --ds-size-24: 24px;
+  --ds-size-28: 28px;
+  --ds-size-32: 32px;
+  --ds-size-36: 36px;
+  --ds-size-40: 40px;
+  --ds-size-44: 44px;
+  --ds-size-48: 48px;
+  --ds-size-56: 56px;
+  --ds-size-64: 64px;
+  --ds-size-72: 72px;
+  --ds-size-80: 80px;
+  --ds-size-999: 999px;
+  --ds-font-family-heading: 'Noto Sans', sans-serif;
+  --ds-font-family-content: 'Noto Sans', sans-serif;
+  --ds-font-family-mono: 'Noto Sans Mono', monospace;
+  --ds-font-weight-regular: 400;
+  --ds-font-weight-bold: 700;
+  --ds-zindex-10: 100;
+  --ds-zindex-20: 200;
+  --ds-zindex-30: 300;
+  --ds-zindex-40: 400;
+  --ds-zindex-50: 500;
+  --ds-zindex-60: 600;
+  --ds-zindex-70: 700;
+  --ds-zindex-80: 800;
+  --ds-zindex-90: 900;
+  --ds-zindex-100: 1000;
+}

package/build/js/tokens.js

@@ -0,0 +1,308 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const tokens = {
+  breakpoint_xs: '305px',
+  breakpoint_sm: '600px',
+  breakpoint_md: '960px',
+  breakpoint_lg: '1280px',
+  breakpoint_xl: '1600px',
+  breakpoint_2xl: '1904px',
+  color_red_10: '#faeeee',
+  color_red_20: '#f4d5d5',
+  color_red_30: '#ebb3b3',
+  color_red_40: '#e19090',
+  color_red_50: '#d86e6e',
+  color_red_60: '#c62828',
+  color_red_70: '#911d1d',
+  color_red_80: '#6f1717',
+  color_red_90: '#501010',
+  color_red_100: '#310a0a',
+  color_orange_10: '#fff1e6',
+  color_orange_20: '#ffdbbd',
+  color_orange_30: '#febc85',
+  color_orange_40: '#fe8623',
+  color_orange_50: '#d96e17',
+  color_orange_60: '#b95b1d',
+  color_orange_70: '#893e01',
+  color_orange_80: '#602c00',
+  color_orange_90: '#472000',
+  color_orange_100: '#241000',
+  color_light_orange_10: '#fff2d7',
+  color_light_orange_20: '#fedd94',
+  color_light_orange_30: '#fec037',
+  color_light_orange_40: '#df9a01',
+  color_light_orange_50: '#c18501',
+  color_light_orange_60: '#936601',
+  color_light_orange_70: '#704d01',
+  color_light_orange_80: '#4c3500',
+  color_light_orange_90: '#382700',
+  color_light_orange_100: '#1d1400',
+  color_lime_10: '#edf3e7',
+  color_lime_20: '#d4e1c7',
+  color_lime_30: '#b1c897',
+  color_lime_40: '#84b453',
+  color_lime_50: '#659a2d',
+  color_lime_60: '#457413',
+  color_lime_70: '#32540d',
+  color_lime_80: '#263f0a',
+  color_lime_90: '#1b2d07',
+  color_lime_100: '#101b04',
+  color_green_10: '#e2f5ea',
+  color_green_20: '#b7e7cb',
+  color_green_30: '#7bd39e',
+  color_green_40: '#3fbc71',
+  color_green_50: '#36a061',
+  color_green_60: '#277647',
+  color_green_70: '#1d5633',
+  color_green_80: '#164027',
+  color_green_90: '#0f2d1b',
+  color_green_100: '#091b11',
+  color_teal_10: '#def5f6',
+  color_teal_20: '#b1e6ea',
+  color_teal_30: '#6cd0d7',
+  color_teal_40: '#22b7c1',
+  color_teal_50: '#1d9ca5',
+  color_teal_60: '#157379',
+  color_teal_70: '#0f5358',
+  color_teal_80: '#0c3f43',
+  color_teal_90: '#082c2f',
+  color_teal_100: '#051b1d',
+  color_blue_10: '#eaf2ff',
+  color_blue_20: '#cadeff',
+  color_blue_30: '#9dc2ff',
+  color_blue_40: '#71a6ff',
+  color_blue_50: '#388aff',
+  color_blue_60: '#0060ff',
+  color_blue_70: '#0042b0',
+  color_blue_80: '#003386',
+  color_blue_90: '#002461',
+  color_blue_100: '#00163c',
+  color_aqua_10: '#e6f2fc',
+  color_aqua_20: '#c3e1f8',
+  color_aqua_30: '#90c7f3',
+  color_aqua_40: '#5caded',
+  color_aqua_50: '#3993da',
+  color_aqua_60: '#206ca8',
+  color_aqua_70: '#174e7a',
+  color_aqua_80: '#123b5d',
+  color_aqua_90: '#0c2a41',
+  color_aqua_100: '#081928',
+  color_purple_10: '#f4edfc',
+  color_purple_20: '#e6d7f8',
+  color_purple_30: '#d1b6f2',
+  color_purple_40: '#bb95ec',
+  color_purple_50: '#a774e7',
+  color_purple_60: '#823cdd',
+  color_purple_70: '#5f3399',
+  color_purple_80: '#472a6d',
+  color_purple_90: '#321d4d',
+  color_purple_100: '#1e122e',
+  color_magenta_10: '#fbeef3',
+  color_magenta_20: '#f6d3e0',
+  color_magenta_30: '#eeb0c6',
+  color_magenta_40: '#e68bac',
+  color_magenta_50: '#dd6490',
+  color_magenta_60: '#c5225d',
+  color_magenta_70: '#901944',
+  color_magenta_80: '#6f1334',
+  color_magenta_90: '#4f0e25',
+  color_magenta_100: '#310917',
+  color_gray_10: '#fbfaf9',
+  color_gray_20: '#f5f3f1',
+  color_gray_30: '#e6e2dc',
+  color_gray_35: '#d3cec8',
+  color_gray_40: '#bfb8af',
+  color_gray_50: '#9d968d',
+  color_gray_60: '#7b736b',
+  color_gray_70: '#4f4d4a',
+  color_gray_80: '#3c3b39',
+  color_gray_90: '#262523',
+  color_gray_100: '#151414',
+  color_base_white: '#ffffff',
+  color_base_black: '#000000',
+  size_0: '0px',
+  size_2: '2px',
+  size_4: '4px',
+  size_6: '6px',
+  size_8: '8px',
+  size_10: '10px',
+  size_12: '12px',
+  size_14: '14px',
+  size_16: '16px',
+  size_18: '18px',
+  size_20: '20px',
+  size_24: '24px',
+  size_28: '28px',
+  size_32: '32px',
+  size_36: '36px',
+  size_40: '40px',
+  size_44: '44px',
+  size_48: '48px',
+  size_56: '56px',
+  size_64: '64px',
+  size_72: '72px',
+  size_80: '80px',
+  size_999: '999px',
+  font_family_heading: ''Noto Sans', sans-serif',
+  font_family_content: ''Noto Sans', sans-serif',
+  font_family_mono: ''Noto Sans Mono', monospace',
+  font_weight_regular: '400',
+  font_weight_bold: '700',
+  zindex_10: '100',
+  zindex_20: '200',
+  zindex_30: '300',
+  zindex_40: '400',
+  zindex_50: '500',
+  zindex_60: '600',
+  zindex_70: '700',
+  zindex_80: '800',
+  zindex_90: '900',
+  zindex_100: '1000',
+  color_text_default: '#262523',
+  color_text_secondary: '#7b736b',
+  color_text_inverse: '#ffffff',
+  color_text_disabled: '#9d968d',
+  color_text_link: '#0060ff',
+  color_text_link_hover: '#0042b0',
+  color_text_error: '#c62828',
+  color_text_brand: '#0060ff',
+  color_text_brand_hover: '#0042b0',
+  color_text_brand_pressed: '#003386',
+  color_text_header: '#262523',
+  color_text_footer: '#262523',
+  color_icon_default: '#262523',
+  color_icon_secondary: '#7b736b',
+  color_icon_inverse: '#ffffff',
+  color_icon_disabled: '#9d968d',
+  color_icon_brand: '#0060ff',
+  color_icon_brand_hover: '#0042b0',
+  color_icon_brand_pressed: '#003386',
+  color_icon_error: '#c62828',
+  color_icon_success: '#659a2d',
+  color_icon_selected: '#0060ff',
+  color_icon_header: '#262523',
+  color_icon_footer: '#262523',
+  color_border_default: '#e6e2dc',
+  color_border_strong: '#bfb8af',
+  color_border_strongest: '#262523',
+  color_border_inverse: '#ffffff',
+  color_border_disabled: '#e6e2dc',
+  color_border_brand: '#0060ff',
+  color_border_brand_hover: '#0042b0',
+  color_border_brand_pressed: '#003386',
+  color_border_error: '#c62828',
+  color_border_focus: '#0060ff',
+  color_border_selected: '#0060ff',
+  color_border_selected_secondary: '#262523',
+  color_border_header: '#e6e2dc',
+  color_border_footer: '#e6e2dc',
+  color_bg_default: '#ffffff',
+  color_bg_secondary: '#f5f3f1',
+  color_bg_inverse: '#262523',
+  color_bg_disabled: '#f5f3f1',
+  color_bg_hover: '#e6e2dc',
+  color_bg_pressed: '#d3cec8',
+  color_bg_selected: '#d3cec8',
+  color_bg_skeleton: '#e6e2dc',
+  color_bg_backdrop: '#fbfaf9cc',
+  color_bg_brand: '#0060ff',
+  color_bg_brand_hover: '#0042b0',
+  color_bg_brand_pressed: '#003386',
+  color_bg_brand_subtle: '#cadeff',
+  color_bg_brand_subtle_hover: '#9dc2ff',
+  color_bg_layout_page: '#fbfaf9',
+  color_bg_layout_page_secondary: '#ffffff',
+  color_bg_layout_panel: '#f5f3f1',
+  color_bg_layout_panel_secondary: '#fbfaf9',
+  color_bg_success_subtle: '#d4e1c7',
+  color_bg_warning_subtle: '#fff2d7',
+  color_bg_error: '#c62828',
+  color_bg_error_subtle: '#f4d5d5',
+  color_bg_info_subtle: '#cadeff',
+  color_bg_neutral_subtle: '#bfb8af',
+  color_bg_header: '#ffffff',
+  color_bg_header_hover: '#e6e2dc',
+  color_bg_header_pressed: '#d3cec8',
+  color_bg_header_selected: '#d3cec8',
+  color_bg_footer: '#ffffff',
+  color_chart_brand: '#388aff',
+  color_chart_neutral: '#e6e2dc',
+  color_chart_categorical_1: '#823cdd',
+  color_chart_categorical_2: '#1d9ca5',
+  color_chart_categorical_3: '#b95b1d',
+  color_chart_categorical_4: '#388aff',
+  color_chart_categorical_5: '#0042b0',
+  color_chart_categorical_6: '#dd6490',
+  color_chart_categorical_7: '#c18501',
+  color_chart_categorical_8: '#901944',
+  color_chart_categorical_9: '#a774e7',
+  color_chart_categorical_10: '#157379',
+  color_chart_categorical_11: '#36a061',
+  color_chart_categorical_12: '#893e01',
+  color_chart_sequential_1: '#eaf2ff',
+  color_chart_sequential_2: '#cadeff',
+  color_chart_sequential_3: '#9dc2ff',
+  color_chart_sequential_4: '#71a6ff',
+  color_chart_sequential_5: '#388aff',
+  color_chart_sequential_6: '#0060ff',
+  color_chart_sequential_7: '#0042b0',
+  color_chart_sequential_8: '#003386',
+  color_chart_sequential_9: '#002461',
+  color_chart_sequential_10: '#00163c',
+  color_status_success: '#659a2d',
+  color_status_warning_major: '#d96e17',
+  color_status_warning_minor: '#df9a01',
+  color_status_fail: '#c62828',
+  color_status_critical: '#c62828',
+  color_status_danger: '#c62828',
+  color_status_neutral: '#7b736b',
+  color_status_new: '#0060ff',
+  color_status_inprogress: '#262523',
+  color_status_pending: '#7b736b',
+  color_status_info: '#262523',
+  elevation_floating: '0 2px 12px 0 #e6e2dc',
+  icon_size_xs: '16px',
+  icon_size_sm: '20px',
+  icon_size_md: '32px',
+  icon_size_lg: '48px',
+  radius_action: '999px',
+  radius_input: '0px',
+  radius_container: '0px',
+  radius_badge: '0px',
+  radius_avatar: '999px',
+  radius_media: '0px',
+  space_none: '0px',
+  space_xxs: '2px',
+  space_xs: '4px',
+  space_sm: '8px',
+  space_md: '16px',
+  space_lg: '24px',
+  space_xl: '32px',
+  space_2xl: '48px',
+  space_3xl: '64px',
+  space_4xl: '80px',
+  typo_heading_3xl: 'normal 700 36px/48px 'Noto Sans', sans-serif',
+  typo_heading_2xl: 'normal 700 32px/40px 'Noto Sans', sans-serif',
+  typo_heading_xl: 'normal 700 28px/36px 'Noto Sans', sans-serif',
+  typo_heading_lg: 'normal 700 24px/32px 'Noto Sans', sans-serif',
+  typo_heading_md: 'normal 700 20px/28px 'Noto Sans', sans-serif',
+  typo_heading_sm: 'normal 700 18px/24px 'Noto Sans', sans-serif',
+  typo_content_body_regular: 'normal 400 14px/20px 'Noto Sans', sans-serif',
+  typo_content_body_bold: 'normal 700 14px/20px 'Noto Sans', sans-serif',
+  typo_content_caption_regular: 'normal 400 12px/16px 'Noto Sans', sans-serif',
+  typo_content_caption_bold: 'normal 700 12px/16px 'Noto Sans', sans-serif',
+  typo_content_viz_regular: 'normal 400 10px/16px 'Noto Sans', sans-serif',
+  typo_content_viz_bold: 'normal 700 10px/16px 'Noto Sans', sans-serif',
+  zindex_layout_panel: '100',
+  zindex_footer: '200',
+  zindex_header: '300',
+  zindex_overlap: '600',
+  zindex_message: '700',
+  zindex_backdrop: '800',
+  zindex_modal: '900',
+  zindex_tooltip: '1000',
+};
+
+export default tokens;

package/build/ts/tokens.d.ts

@@ -0,0 +1,309 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export interface Tokens {
+  breakpoint_xs: string;
+  breakpoint_sm: string;
+  breakpoint_md: string;
+  breakpoint_lg: string;
+  breakpoint_xl: string;
+  breakpoint_2xl: string;
+  color_red_10: string;
+  color_red_20: string;
+  color_red_30: string;
+  color_red_40: string;
+  color_red_50: string;
+  color_red_60: string;
+  color_red_70: string;
+  color_red_80: string;
+  color_red_90: string;
+  color_red_100: string;
+  color_orange_10: string;
+  color_orange_20: string;
+  color_orange_30: string;
+  color_orange_40: string;
+  color_orange_50: string;
+  color_orange_60: string;
+  color_orange_70: string;
+  color_orange_80: string;
+  color_orange_90: string;
+  color_orange_100: string;
+  color_light_orange_10: string;
+  color_light_orange_20: string;
+  color_light_orange_30: string;
+  color_light_orange_40: string;
+  color_light_orange_50: string;
+  color_light_orange_60: string;
+  color_light_orange_70: string;
+  color_light_orange_80: string;
+  color_light_orange_90: string;
+  color_light_orange_100: string;
+  color_lime_10: string;
+  color_lime_20: string;
+  color_lime_30: string;
+  color_lime_40: string;
+  color_lime_50: string;
+  color_lime_60: string;
+  color_lime_70: string;
+  color_lime_80: string;
+  color_lime_90: string;
+  color_lime_100: string;
+  color_green_10: string;
+  color_green_20: string;
+  color_green_30: string;
+  color_green_40: string;
+  color_green_50: string;
+  color_green_60: string;
+  color_green_70: string;
+  color_green_80: string;
+  color_green_90: string;
+  color_green_100: string;
+  color_teal_10: string;
+  color_teal_20: string;
+  color_teal_30: string;
+  color_teal_40: string;
+  color_teal_50: string;
+  color_teal_60: string;
+  color_teal_70: string;
+  color_teal_80: string;
+  color_teal_90: string;
+  color_teal_100: string;
+  color_blue_10: string;
+  color_blue_20: string;
+  color_blue_30: string;
+  color_blue_40: string;
+  color_blue_50: string;
+  color_blue_60: string;
+  color_blue_70: string;
+  color_blue_80: string;
+  color_blue_90: string;
+  color_blue_100: string;
+  color_aqua_10: string;
+  color_aqua_20: string;
+  color_aqua_30: string;
+  color_aqua_40: string;
+  color_aqua_50: string;
+  color_aqua_60: string;
+  color_aqua_70: string;
+  color_aqua_80: string;
+  color_aqua_90: string;
+  color_aqua_100: string;
+  color_purple_10: string;
+  color_purple_20: string;
+  color_purple_30: string;
+  color_purple_40: string;
+  color_purple_50: string;
+  color_purple_60: string;
+  color_purple_70: string;
+  color_purple_80: string;
+  color_purple_90: string;
+  color_purple_100: string;
+  color_magenta_10: string;
+  color_magenta_20: string;
+  color_magenta_30: string;
+  color_magenta_40: string;
+  color_magenta_50: string;
+  color_magenta_60: string;
+  color_magenta_70: string;
+  color_magenta_80: string;
+  color_magenta_90: string;
+  color_magenta_100: string;
+  color_gray_10: string;
+  color_gray_20: string;
+  color_gray_30: string;
+  color_gray_35: string;
+  color_gray_40: string;
+  color_gray_50: string;
+  color_gray_60: string;
+  color_gray_70: string;
+  color_gray_80: string;
+  color_gray_90: string;
+  color_gray_100: string;
+  color_base_white: string;
+  color_base_black: string;
+  size_0: string;
+  size_2: string;
+  size_4: string;
+  size_6: string;
+  size_8: string;
+  size_10: string;
+  size_12: string;
+  size_14: string;
+  size_16: string;
+  size_18: string;
+  size_20: string;
+  size_24: string;
+  size_28: string;
+  size_32: string;
+  size_36: string;
+  size_40: string;
+  size_44: string;
+  size_48: string;
+  size_56: string;
+  size_64: string;
+  size_72: string;
+  size_80: string;
+  size_999: string;
+  font_family_heading: string;
+  font_family_content: string;
+  font_family_mono: string;
+  font_weight_regular: string;
+  font_weight_bold: string;
+  zindex_10: string;
+  zindex_20: string;
+  zindex_30: string;
+  zindex_40: string;
+  zindex_50: string;
+  zindex_60: string;
+  zindex_70: string;
+  zindex_80: string;
+  zindex_90: string;
+  zindex_100: string;
+  color_text_default: string;
+  color_text_secondary: string;
+  color_text_inverse: string;
+  color_text_disabled: string;
+  color_text_link: string;
+  color_text_link_hover: string;
+  color_text_error: string;
+  color_text_brand: string;
+  color_text_brand_hover: string;
+  color_text_brand_pressed: string;
+  color_text_header: string;
+  color_text_footer: string;
+  color_icon_default: string;
+  color_icon_secondary: string;
+  color_icon_inverse: string;
+  color_icon_disabled: string;
+  color_icon_brand: string;
+  color_icon_brand_hover: string;
+  color_icon_brand_pressed: string;
+  color_icon_error: string;
+  color_icon_success: string;
+  color_icon_selected: string;
+  color_icon_header: string;
+  color_icon_footer: string;
+  color_border_default: string;
+  color_border_strong: string;
+  color_border_strongest: string;
+  color_border_inverse: string;
+  color_border_disabled: string;
+  color_border_brand: string;
+  color_border_brand_hover: string;
+  color_border_brand_pressed: string;
+  color_border_error: string;
+  color_border_focus: string;
+  color_border_selected: string;
+  color_border_selected_secondary: string;
+  color_border_header: string;
+  color_border_footer: string;
+  color_bg_default: string;
+  color_bg_secondary: string;
+  color_bg_inverse: string;
+  color_bg_disabled: string;
+  color_bg_hover: string;
+  color_bg_pressed: string;
+  color_bg_selected: string;
+  color_bg_skeleton: string;
+  color_bg_backdrop: string;
+  color_bg_brand: string;
+  color_bg_brand_hover: string;
+  color_bg_brand_pressed: string;
+  color_bg_brand_subtle: string;
+  color_bg_brand_subtle_hover: string;
+  color_bg_layout_page: string;
+  color_bg_layout_page_secondary: string;
+  color_bg_layout_panel: string;
+  color_bg_layout_panel_secondary: string;
+  color_bg_success_subtle: string;
+  color_bg_warning_subtle: string;
+  color_bg_error: string;
+  color_bg_error_subtle: string;
+  color_bg_info_subtle: string;
+  color_bg_neutral_subtle: string;
+  color_bg_header: string;
+  color_bg_header_hover: string;
+  color_bg_header_pressed: string;
+  color_bg_header_selected: string;
+  color_bg_footer: string;
+  color_chart_brand: string;
+  color_chart_neutral: string;
+  color_chart_categorical_1: string;
+  color_chart_categorical_2: string;
+  color_chart_categorical_3: string;
+  color_chart_categorical_4: string;
+  color_chart_categorical_5: string;
+  color_chart_categorical_6: string;
+  color_chart_categorical_7: string;
+  color_chart_categorical_8: string;
+  color_chart_categorical_9: string;
+  color_chart_categorical_10: string;
+  color_chart_categorical_11: string;
+  color_chart_categorical_12: string;
+  color_chart_sequential_1: string;
+  color_chart_sequential_2: string;
+  color_chart_sequential_3: string;
+  color_chart_sequential_4: string;
+  color_chart_sequential_5: string;
+  color_chart_sequential_6: string;
+  color_chart_sequential_7: string;
+  color_chart_sequential_8: string;
+  color_chart_sequential_9: string;
+  color_chart_sequential_10: string;
+  color_status_success: string;
+  color_status_warning_major: string;
+  color_status_warning_minor: string;
+  color_status_fail: string;
+  color_status_critical: string;
+  color_status_danger: string;
+  color_status_neutral: string;
+  color_status_new: string;
+  color_status_inprogress: string;
+  color_status_pending: string;
+  color_status_info: string;
+  elevation_floating: string;
+  icon_size_xs: string;
+  icon_size_sm: string;
+  icon_size_md: string;
+  icon_size_lg: string;
+  radius_action: string;
+  radius_input: string;
+  radius_container: string;
+  radius_badge: string;
+  radius_avatar: string;
+  radius_media: string;
+  space_none: string;
+  space_xxs: string;
+  space_xs: string;
+  space_sm: string;
+  space_md: string;
+  space_lg: string;
+  space_xl: string;
+  space_2xl: string;
+  space_3xl: string;
+  space_4xl: string;
+  typo_heading_3xl: string;
+  typo_heading_2xl: string;
+  typo_heading_xl: string;
+  typo_heading_lg: string;
+  typo_heading_md: string;
+  typo_heading_sm: string;
+  typo_content_body_regular: string;
+  typo_content_body_bold: string;
+  typo_content_caption_regular: string;
+  typo_content_caption_bold: string;
+  typo_content_viz_regular: string;
+  typo_content_viz_bold: string;
+  zindex_layout_panel: string;
+  zindex_footer: string;
+  zindex_header: string;
+  zindex_overlap: string;
+  zindex_message: string;
+  zindex_backdrop: string;
+  zindex_modal: string;
+  zindex_tooltip: string;
+}
+
+export declare const tokens: Tokens;
+export default tokens;

package/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "@nuvia-ui/tokens",
+    "version": "4.0.1",
+    "description": "Design tokens for the UI Kit",
+    "main": "index.css",
+    "exports": {
+        ".": "./index.css",
+        "./css": "./build/css/",
+        "./css/*": "./build/css/*",
+        "./js": "./build/js/tokens.js"
+    },
+    "files": [
+        "build/",
+        "index.css"
+    ],
+    "scripts": {
+        "build": "node scripts/build.js"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    }
+}