@weni/unnnic-system 3.32.1 → 3.33.1-alpha.1

package/.cursor/skills/unnnic/SKILL.md

@@ -0,0 +1,222 @@
+# Unnnic Design System
+
+Use this skill when implementing UI with Weni's Unnnic Design System (`@weni/unnnic-system`).
+
+## Import
+
+```vue
+<script setup>
+import { UnnnicButton, UnnnicInput, UnnnicFormElement } from '@weni/unnnic-system';
+</script>
+```
+
+## Priority Components
+
+These are the most commonly used components. Use these first before looking for alternatives.
+
+### Form Controls
+
+| Component | Purpose | Key Props |
+|-----------|---------|-----------|
+| `UnnnicButton` | Actions | `type`: primary/secondary/tertiary/warning/attention, `size`: large/small, `loading`, `disabled`, `iconLeft`, `iconRight` |
+| `UnnnicInput` | Text input | `type`: normal/error, `size`: md/sm, `iconLeft`, `iconRight`, `placeholder` |
+| `UnnnicFormElement` | Form wrapper | `label`, `error`, `message`, `disabled` — wrap inputs with this |
+| `UnnnicTextArea` | Multiline text | `modelValue`, `maxlength` |
+| `UnnnicSelect` | Dropdown select | `options`, `modelValue` |
+| `UnnnicMultiSelect` | Multi Dropdown select | `options`, `modelValue` |
+| `UnnnicCheckbox` | Boolean toggle | `modelValue`, `label` |
+| `UnnnicCheckboxGroup` | Checkbox list | `options`, `modelValue` |
+| `UnnnicRadio` | Single option | `modelValue`, `value` |
+| `UnnnicRadioGroup` | Radio list | `options`, `modelValue` |
+| `UnnnicSwitch` | Toggle switch | `modelValue`, `label` |
+| `UnnnicDatePicker` | Date selection | `modelValue`, `format` |
+
+### Feedback & Overlays
+
+| Component | Purpose | Key Props |
+|-----------|---------|-----------|
+| `UnnnicDialog` | Modern dialog | Composable: `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogClose` |
+| `UnnnicDrawerNext` | Modern drawer | Composable: `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerClose` |
+| `UnnnicToast` | Notification | Use `unnnicToastManager.show({ type, message })` |
+| `UnnnicPopover` | Popover | Composable: `PopoverTrigger`, `PopoverContent` |
+| `UnnnicToolTip` | Tooltip | `text`, `side` |
+| `UnnnicDisclaimer` | Inline message | `type`: informational/success/attention/error/neutral, `title`, `description` |
+
+### Display
+
+| Component | Purpose | Key Props |
+|-----------|---------|-----------|
+| `UnnnicIcon` | Icon | `icon`, `scheme`, `size`: ant/sm/md/lg/xl |
+| `UnnnicChip` | Chip | `text`, `removable` |
+| `UnnnicTag` | Label | `text`, `type` |
+| `UnnnicSkeletonLoading` | Loading | `width`, `height` |
+| `UnnnicTabs` | Modern tabs | Composable: `TabsList`, `TabsTrigger`, `TabsContent` |
+| `UnnnicSegmentedControl` | Segmented toggle | Composable: `SegmentedControlList`, `SegmentedControlTrigger`, `SegmentedControlContent`, `size`: small/medium |
+| `UnnnicPageHeader` | Page header | `title`, `description`, slots for actions |
+
+## Other Components
+
+### Legacy (use modern alternatives when possible)
+
+| Legacy | Modern Alternative |
+|--------|-------------------|
+| `UnnnicModal` | `UnnnicDialog` |
+| `UnnnicDrawer` | `UnnnicDrawerNext` |
+| `UnnnicTab` | `UnnnicTabs` |
+| `UnnnicSelectSmart` | `UnnnicSelect` |
+
+### Additional Components
+
+| Component | Purpose | Key Props |
+|-----------|---------|-----------|
+| `UnnnicTable` | version="2" is Modern version="1" is Legacy | `headers`, use `UnnnicTableRow` for rows |
+| `UnnnicTableNext` | Legacy table | `headers`, `items`, `@row-click`, `@sort` |
+| `UnnnicDataTable` | Data table | `headers`, `items`, with pagination |
+| `UnnnicBreadcrumb` | Breadcrumbs | `crumbs` array |
+| `UnnnicPagination` | Page nav | `modelValue`, `total`, `perPage` |
+| `UnnnicAvatarIcon` | User avatar | `username`, `size` |
+
+## Tokens
+
+### Colors (SCSS)
+
+**Background:** `$unnnic-color-bg-{variant}`
+- `base`, `base-soft`, `muted` — neutrals
+- `accent-strong` — primary brand (teal)
+- `success`, `warning`, `critical`, `info` — semantic
+
+**Foreground:** `$unnnic-color-fg-{variant}`
+- `base`, `emphasized`, `muted`, `inverted`
+- `accent`, `success`, `warning`, `critical`, `info`
+
+**Border:** `$unnnic-color-border-{variant}`
+- `base`, `muted`, `emphasized`
+- `accent-strong`, `success`, `warning`, `critical`, `info`
+
+### Spacing (SCSS)
+
+`$unnnic-space-{n}` — Base unit: 4px
+
+| Token | Value |
+|-------|-------|
+| `space-05` | 2px |
+| `space-1` | 4px |
+| `space-2` | 8px |
+| `space-3` | 12px |
+| `space-4` | 16px |
+| `space-6` | 24px |
+| `space-8` | 32px |
+| `space-12` | 48px |
+| `space-16` | 64px |
+| `space-20` | 80px |
+
+### Icon sizer (SCSS)
+
+`$unnnic-icon-size-{n}` — Base unit: 4px
+
+| Token | Value |
+|-------|-------|
+| `size-3` | 12px |
+| `size-4` | 16px |
+| `size-5` | 20px |
+| `size-6` | 24px |
+| `size-7` | 32px |
+| `size-10` | 40px |
+
+### Typography (SCSS mixins)
+
+```scss
+@include unnnic-font-display-1;  // 24px bold
+@include unnnic-font-display-2;  // 20px semibold
+@include unnnic-font-body;       // 14px regular
+@include unnnic-font-caption-1;  // 12px regular
+@include unnnic-font-action;     // 14px semibold (buttons)
+```
+
+### Radii
+
+`$unnnic-radius-{n}` — 1, 2, 3, 4 or full (4px increments)
+
+### Shadows
+
+`$unnnic-shadow-{n}` — 1 or 2
+
+## Patterns
+
+### Form with Validation
+
+```vue
+<UnnnicFormElement label="Email" :error="errors.email">
+  <UnnnicInput 
+    v-model="email" 
+    :type="errors.email ? 'error' : 'normal'"
+    placeholder="user@example.com"
+  />
+</UnnnicFormElement>
+```
+
+### Button Hierarchy
+
+- **Primary action:** `type="primary"` — one per section
+- **Secondary action:** `type="secondary"`
+- **Tertiary/link:** `type="tertiary"`
+- **Destructive:** `type="warning"`
+- **Caution:** `type="attention"`
+
+### Toast Notifications
+
+```typescript
+import { unnnicToastManager } from '@weni/unnnic-system';
+
+unnnicToastManager.show({
+  type: 'success', // success | error | warning | info
+  message: 'Changes saved',
+});
+```
+
+### Modern Composable Components
+
+Newer components use composable patterns:
+
+```vue
+<UnnnicDialog>
+  <UnnnicDialogTrigger>
+    <UnnnicButton>Open</UnnnicButton>
+  </UnnnicDialogTrigger>
+  <UnnnicDialogContent>
+    <UnnnicDialogHeader>
+      <UnnnicDialogTitle>Title</UnnnicDialogTitle>
+    </UnnnicDialogHeader>
+    <!-- content -->
+    <UnnnicDialogFooter>
+      <UnnnicDialogClose>
+        <UnnnicButton type="secondary">Cancel</UnnnicButton>
+      </UnnnicDialogClose>
+      <UnnnicButton type="primary">Confirm</UnnnicButton>
+    </UnnnicDialogFooter>
+  </UnnnicDialogContent>
+</UnnnicDialog>
+```
+
+## Figma Integration
+
+When implementing from Figma designs:
+
+1. Use Figma MCP `get_design_context` to get component structure
+2. Match Figma component names to Unnnic exports (e.g., "Button" → `UnnnicButton`)
+3. Use semantic tokens — never hardcode colors
+4. Check for Code Connect snippets in Figma Dev Mode
+
+## Common Mistakes to Avoid
+
+- Don't use raw `<input>` — use `UnnnicInput` wrapped in `UnnnicFormElement`
+- Don't hardcode colors — use `$unnnic-color-*` tokens
+- Don't use multiple `type="primary"` buttons in same section
+- Don't forget error states — pass `error` prop to `UnnnicFormElement`
+- Don't use legacy `UnnnicModal` for new code — prefer `UnnnicModalNext` or `UnnnicDialog`
+
+## Resources
+
+- **Storybook:** https://unnnic.stg.cloud.weni.ai/
+- **Figma:** https://figma.com/design/YbvOpVPUBxTSEzg4J8pXKu/Weni---unnnic
+- **npm:** https://www.npmjs.com/package/@weni/unnnic-system

package/dist/index.d.ts

@@ -11987,7 +11987,11 @@ class?: HTMLAttributes["class"];
 export declare const UnnnicTableCell: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+    ellipsis: boolean;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
     P: {};
     B: {};
     D: {};
@@ -11996,13 +12000,21 @@ export declare const UnnnicTableCell: {
     Defaults: {};
     }, Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, {
+    ellipsis: boolean;
+    }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & ComponentOptionsBase<Readonly<{
 class?: HTMLAttributes["class"];
-}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+ellipsis?: boolean;
+width?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+ellipsis: boolean;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;
     };
@@ -12011,7 +12023,11 @@ class?: HTMLAttributes["class"];
 export declare const unnnicTableCell: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+    ellipsis: boolean;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
     P: {};
     B: {};
     D: {};
@@ -12020,13 +12036,21 @@ export declare const unnnicTableCell: {
     Defaults: {};
     }, Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, {
+    ellipsis: boolean;
+    }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & ComponentOptionsBase<Readonly<{
 class?: HTMLAttributes["class"];
-}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+ellipsis?: boolean;
+width?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+ellipsis: boolean;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;
     };
@@ -12035,7 +12059,11 @@ class?: HTMLAttributes["class"];
 export declare const UnnnicTableHead: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+    ellipsis: boolean;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
     P: {};
     B: {};
     D: {};
@@ -12044,13 +12072,21 @@ export declare const UnnnicTableHead: {
     Defaults: {};
     }, Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, {
+    ellipsis: boolean;
+    }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & ComponentOptionsBase<Readonly<{
 class?: HTMLAttributes["class"];
-}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+ellipsis?: boolean;
+width?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+ellipsis: boolean;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;
     };
@@ -12059,7 +12095,11 @@ class?: HTMLAttributes["class"];
 export declare const unnnicTableHead: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+    ellipsis: boolean;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLTableCellElement, ComponentProvideOptions, {
     P: {};
     B: {};
     D: {};
@@ -12068,13 +12108,21 @@ export declare const unnnicTableHead: {
     Defaults: {};
     }, Readonly<{
     class?: HTMLAttributes["class"];
-    }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    ellipsis?: boolean;
+    width?: string;
+    }> & Readonly<{}>, {}, {}, {}, {}, {
+    ellipsis: boolean;
+    }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & ComponentOptionsBase<Readonly<{
 class?: HTMLAttributes["class"];
-}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+ellipsis?: boolean;
+width?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+ellipsis: boolean;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;
     };

package/dist/scss/colors-hsl.scss

@@ -0,0 +1,179 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-color-gray-0-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-gray-1-hsl: 0 0% 96%; /* #F5F5F5 */
+$unnnic-color-gray-2-hsl: 0 0% 92%; /* #EBEBEB */
+$unnnic-color-gray-3-hsl: 0 0% 88%; /* #E0E0E0 */
+$unnnic-color-gray-4-hsl: 0 0% 84%; /* #D6D6D6 */
+$unnnic-color-gray-5-hsl: 0 0% 76%; /* #C2C2C2 */
+$unnnic-color-gray-6-hsl: 0 0% 68%; /* #ADADAD */
+$unnnic-color-gray-7-hsl: 0 0% 60%; /* #999999 */
+$unnnic-color-gray-8-hsl: 0 0% 52%; /* #858585 */
+$unnnic-color-gray-9-hsl: 0 0% 44%; /* #707070 */
+$unnnic-color-gray-10-hsl: 0 0% 36%; /* #5C5C5C */
+$unnnic-color-gray-11-hsl: 0 0% 24%; /* #3D3D3D */
+$unnnic-color-gray-12-hsl: 0 0% 12%; /* #1F1F1F */
+$unnnic-color-gray-13-hsl: 0 0% 0%; /* #000000 */
+$unnnic-color-teal-1-hsl: 173 63% 95%; /* #E9FAF8 */
+$unnnic-color-teal-2-hsl: 174 75% 89%; /* #CFF8F4 */
+$unnnic-color-teal-3-hsl: 174 73% 81%; /* #ABF2EB */
+$unnnic-color-teal-4-hsl: 175 69% 74%; /* #8DEAE3 */
+$unnnic-color-teal-5-hsl: 176 62% 63%; /* #66DBD3 */
+$unnnic-color-teal-6-hsl: 177 57% 52%; /* #40CAC2 */
+$unnnic-color-teal-7-hsl: 177 84% 39%; /* #10B6AF */
+$unnnic-color-teal-8-hsl: 177 99% 32%; /* #01A29B */
+$unnnic-color-teal-9-hsl: 178 99% 28%; /* #018D88 */
+$unnnic-color-teal-10-hsl: 177 98% 24%; /* #017873 */
+$unnnic-color-teal-11-hsl: 178 98% 20%; /* #016460 */
+$unnnic-color-teal-12-hsl: 177 72% 18%; /* #0D504D */
+$unnnic-color-teal-13-hsl: 177 53% 16%; /* #133D3B */
+$unnnic-color-green-1-hsl: 106 81% 94%; /* #E9FCE3 */
+$unnnic-color-green-2-hsl: 106 94% 87%; /* #CEFDC0 */
+$unnnic-color-green-3-hsl: 109 85% 79%; /* #AFF79E */
+$unnnic-color-green-4-hsl: 110 77% 73%; /* #97EF86 */
+$unnnic-color-green-5-hsl: 116 67% 65%; /* #74E26C */
+$unnnic-color-green-6-hsl: 121 58% 56%; /* #4FD051 */
+$unnnic-color-green-7-hsl: 126 65% 45%; /* #28BC37 */
+$unnnic-color-green-8-hsl: 130 91% 35%; /* #08A822 */
+$unnnic-color-green-9-hsl: 127 99% 29%; /* #019213 */
+$unnnic-color-green-10-hsl: 127 98% 25%; /* #017D10 */
+$unnnic-color-green-11-hsl: 129 98% 21%; /* #016810 */
+$unnnic-color-green-12-hsl: 129 98% 17%; /* #01540E */
+$unnnic-color-green-13-hsl: 129 97% 13%; /* #01410B */
+$unnnic-color-blue-1-hsl: 205 75% 97%; /* #F1F8FD */
+$unnnic-color-blue-2-hsl: 204 100% 94%; /* #E1F3FF */
+$unnnic-color-blue-3-hsl: 205 100% 90%; /* #CBE9FF */
+$unnnic-color-blue-4-hsl: 206 100% 86%; /* #B6DFFF */
+$unnnic-color-blue-5-hsl: 207 98% 79%; /* #97CFFE */
+$unnnic-color-blue-6-hsl: 209 94% 73%; /* #79BCFB */
+$unnnic-color-blue-7-hsl: 210 91% 66%; /* #5AA8F7 */
+$unnnic-color-blue-8-hsl: 211 89% 59%; /* #3993F4 */
+$unnnic-color-blue-9-hsl: 213 91% 52%; /* #157BF4 */
+$unnnic-color-blue-10-hsl: 213 97% 44%; /* #0366DD */
+$unnnic-color-blue-11-hsl: 212 99% 36%; /* #0155B7 */
+$unnnic-color-blue-12-hsl: 212 99% 29%; /* #014592 */
+$unnnic-color-blue-13-hsl: 212 98% 23%; /* #013672 */
+$unnnic-color-purple-1-hsl: 270 67% 98%; /* #F9F5FD */
+$unnnic-color-purple-2-hsl: 273 91% 96%; /* #F5EAFE */
+$unnnic-color-purple-3-hsl: 270 94% 93%; /* #EDDCFE */
+$unnnic-color-purple-4-hsl: 268 96% 90%; /* #E5CFFE */
+$unnnic-color-purple-5-hsl: 269 94% 86%; /* #DABAFD */
+$unnnic-color-purple-6-hsl: 267 94% 81%; /* #CBA3FC */
+$unnnic-color-purple-7-hsl: 267 93% 76%; /* #BC8AFB */
+$unnnic-color-purple-8-hsl: 267 91% 71%; /* #AD71F8 */
+$unnnic-color-purple-9-hsl: 267 87% 65%; /* #9C56F3 */
+$unnnic-color-purple-10-hsl: 267 77% 57%; /* #883CE6 */
+$unnnic-color-purple-11-hsl: 267 70% 48%; /* #7225D2 */
+$unnnic-color-purple-12-hsl: 267 82% 39%; /* #5C12B6 */
+$unnnic-color-purple-13-hsl: 266 86% 31%; /* #460B93 */
+$unnnic-color-red-1-hsl: 7 67% 98%; /* #FDF6F5 */
+$unnnic-color-red-2-hsl: 9 100% 96%; /* #FFEDEA */
+$unnnic-color-red-3-hsl: 9 100% 93%; /* #FFDFD9 */
+$unnnic-color-red-4-hsl: 10 100% 89%; /* #FFD0C7 */
+$unnnic-color-red-5-hsl: 10 100% 84%; /* #FFBBAD */
+$unnnic-color-red-6-hsl: 10 100% 77%; /* #FF9E8B */
+$unnnic-color-red-7-hsl: 9 100% 70%; /* #FF7F68 */
+$unnnic-color-red-8-hsl: 7 94% 63%; /* #F95D47 */
+$unnnic-color-red-9-hsl: 5 84% 54%; /* #EC3727 */
+$unnnic-color-red-10-hsl: 2 82% 45%; /* #D31A15 */
+$unnnic-color-red-11-hsl: 0 98% 36%; /* #B40202 */
+$unnnic-color-red-12-hsl: 0 96% 30%; /* #940303 */
+$unnnic-color-red-13-hsl: 0 100% 22%; /* #720000 */
+$unnnic-color-orange-1-hsl: 36 83% 95%; /* #FDF5E9 */
+$unnnic-color-orange-2-hsl: 38 100% 90%; /* #FFEDCD */
+$unnnic-color-orange-3-hsl: 37 100% 84%; /* #FFE0AE */
+$unnnic-color-orange-4-hsl: 36 98% 78%; /* #FED392 */
+$unnnic-color-orange-5-hsl: 34 99% 69%; /* #FEBC64 */
+$unnnic-color-orange-6-hsl: 32 100% 61%; /* #FFA138 */
+$unnnic-color-orange-7-hsl: 30 93% 52%; /* #F78612 */
+$unnnic-color-orange-8-hsl: 29 99% 45%; /* #E57001 */
+$unnnic-color-orange-9-hsl: 27 99% 40%; /* #CC5E01 */
+$unnnic-color-orange-10-hsl: 26 99% 35%; /* #B24D01 */
+$unnnic-color-orange-11-hsl: 25 99% 30%; /* #963E01 */
+$unnnic-color-orange-12-hsl: 23 98% 24%; /* #7B3001 */
+$unnnic-color-orange-13-hsl: 22 98% 19%; /* #622401 */
+$unnnic-color-yellow-1-hsl: 54 83% 91%; /* #FBF7D4 */
+$unnnic-color-yellow-2-hsl: 54 95% 84%; /* #FDF5AD */
+$unnnic-color-yellow-3-hsl: 54 93% 70%; /* #FAEC6D */
+$unnnic-color-yellow-4-hsl: 52 96% 55%; /* #FADE1E */
+$unnnic-color-yellow-5-hsl: 51 99% 46%; /* #E9C701 */
+$unnnic-color-yellow-6-hsl: 50 99% 43%; /* #D8B401 */
+$unnnic-color-yellow-7-hsl: 49 99% 39%; /* #C5A001 */
+$unnnic-color-yellow-8-hsl: 48 99% 35%; /* #B18D01 */
+$unnnic-color-yellow-9-hsl: 46 99% 31%; /* #9C7901 */
+$unnnic-color-yellow-10-hsl: 46 99% 26%; /* #866701 */
+$unnnic-color-yellow-11-hsl: 44 98% 22%; /* #715401 */
+$unnnic-color-yellow-12-hsl: 44 98% 18%; /* #5C4401 */
+$unnnic-color-yellow-13-hsl: 43 97% 15%; /* #493401 */
+$unnnic-color-cyan-1-hsl: 188 85% 95%; /* #E6FAFD */
+$unnnic-color-cyan-2-hsl: 186 100% 89%; /* #C6F9FF */
+$unnnic-color-cyan-3-hsl: 189 100% 82%; /* #A5F1FF */
+$unnnic-color-cyan-4-hsl: 190 93% 76%; /* #89E8FB */
+$unnnic-color-cyan-5-hsl: 191 87% 67%; /* #61D9F4 */
+$unnnic-color-cyan-6-hsl: 192 80% 56%; /* #34C6E9 */
+$unnnic-color-cyan-7-hsl: 193 84% 47%; /* #13B1DB */
+$unnnic-color-cyan-8-hsl: 193 98% 40%; /* #029DC9 */
+$unnnic-color-cyan-9-hsl: 195 99% 36%; /* #0187B5 */
+$unnnic-color-cyan-10-hsl: 197 99% 32%; /* #0172A0 */
+$unnnic-color-cyan-11-hsl: 199 99% 27%; /* #015E8A */
+$unnnic-color-cyan-12-hsl: 201 98% 23%; /* #014B74 */
+$unnnic-color-cyan-13-hsl: 203 98% 19%; /* #013A5E */
+$unnnic-color-pink-1-hsl: 345 67% 98%; /* #FDF5F7 */
+$unnnic-color-pink-2-hsl: 339 100% 96%; /* #FFEBF2 */
+$unnnic-color-pink-3-hsl: 338 100% 94%; /* #FFDFEB */
+$unnnic-color-pink-4-hsl: 338 100% 89%; /* #FFC8DC */
+$unnnic-color-pink-5-hsl: 339 97% 85%; /* #FEB2CD */
+$unnnic-color-pink-6-hsl: 337 100% 80%; /* #FF98BF */
+$unnnic-color-pink-7-hsl: 337 99% 73%; /* #FE78AC */
+$unnnic-color-pink-8-hsl: 335 82% 64%; /* #EF5997 */
+$unnnic-color-pink-9-hsl: 334 72% 55%; /* #DE387F */
+$unnnic-color-pink-10-hsl: 334 71% 46%; /* #CA226A */
+$unnnic-color-pink-11-hsl: 332 90% 36%; /* #AF0956 */
+$unnnic-color-pink-12-hsl: 331 97% 28%; /* #8F0246 */
+$unnnic-color-pink-13-hsl: 331 93% 24%; /* #74043B */
+$unnnic-color-bg-base-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-bg-base-soft-hsl: 0 0% 96%; /* #F5F5F5 */
+$unnnic-color-bg-muted-hsl: 0 0% 92%; /* #EBEBEB */
+$unnnic-color-bg-accent-plain-hsl: 174 75% 89%; /* #CFF8F4 */
+$unnnic-color-bg-accent-strong-hsl: 177 99% 32%; /* #01A29B */
+$unnnic-color-bg-info-hsl: 205 75% 97%; /* #F1F8FD */
+$unnnic-color-bg-success-hsl: 106 81% 94%; /* #E9FCE3 */
+$unnnic-color-bg-warning-hsl: 54 83% 91%; /* #FBF7D4 */
+$unnnic-color-bg-critical-hsl: 7 67% 98%; /* #FDF6F5 */
+$unnnic-color-bg-red-plain-hsl: 9 100% 93%; /* #FFDFD9 */
+$unnnic-color-bg-red-strong-hsl: 5 84% 54%; /* #EC3727 */
+$unnnic-color-bg-orange-plain-hsl: 37 100% 84%; /* #FFE0AE */
+$unnnic-color-bg-orange-strong-hsl: 29 99% 45%; /* #E57001 */
+$unnnic-color-bg-yellow-plain-hsl: 54 95% 84%; /* #FDF5AD */
+$unnnic-color-bg-yellow-strong-hsl: 48 99% 35%; /* #B18D01 */
+$unnnic-color-bg-green-plain-hsl: 109 85% 79%; /* #AFF79E */
+$unnnic-color-bg-green-strong-hsl: 130 91% 35%; /* #08A822 */
+$unnnic-color-bg-teal-plain-hsl: 174 73% 81%; /* #ABF2EB */
+$unnnic-color-bg-teal-strong-hsl: 177 99% 32%; /* #01A29B */
+$unnnic-color-bg-blue-plain-hsl: 205 100% 90%; /* #CBE9FF */
+$unnnic-color-bg-blue-strong-hsl: 211 89% 59%; /* #3993F4 */
+$unnnic-color-bg-purple-plain-hsl: 270 94% 93%; /* #EDDCFE */
+$unnnic-color-bg-purple-strong-hsl: 267 91% 71%; /* #AD71F8 */
+$unnnic-color-bg-pink-plain-hsl: 338 100% 94%; /* #FFDFEB */
+$unnnic-color-bg-pink-strong-hsl: 335 82% 64%; /* #EF5997 */
+$unnnic-color-bg-inverted-hsl: 0 0% 12%; /* #1F1F1F */
+$unnnic-color-fg-base-hsl: 0 0% 24%; /* #3D3D3D */
+$unnnic-color-fg-emphasized-hsl: 0 0% 12%; /* #1F1F1F */
+$unnnic-color-fg-muted-hsl: 0 0% 44%; /* #707070 */
+$unnnic-color-fg-inverted-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-fg-on-primary-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-fg-accent-hsl: 177 99% 32%; /* #01A29B */
+$unnnic-color-fg-info-hsl: 213 91% 52%; /* #157BF4 */
+$unnnic-color-fg-success-hsl: 127 99% 29%; /* #019213 */
+$unnnic-color-fg-warning-hsl: 46 99% 31%; /* #9C7901 */
+$unnnic-color-fg-critical-hsl: 5 84% 54%; /* #EC3727 */
+$unnnic-color-border-base-hsl: 0 0% 88%; /* #E0E0E0 */
+$unnnic-color-border-muted-hsl: 0 0% 92%; /* #EBEBEB */
+$unnnic-color-border-emphasized-hsl: 0 0% 60%; /* #999999 */
+$unnnic-color-border-accent-plain-hsl: 176 62% 63%; /* #66DBD3 */
+$unnnic-color-border-accent-strong-hsl: 177 99% 32%; /* #01A29B */
+$unnnic-color-border-info-hsl: 207 98% 79%; /* #97CFFE */
+$unnnic-color-border-success-hsl: 116 67% 65%; /* #74E26C */
+$unnnic-color-border-warning-hsl: 51 99% 46%; /* #E9C701 */
+$unnnic-color-border-critical-hsl: 10 100% 77%; /* #FF9E8B */

package/dist/scss/colors.scss

@@ -0,0 +1,134 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-color-gray-0: #FFFFFF;
+$unnnic-color-gray-1: #F5F5F5;
+$unnnic-color-gray-2: #EBEBEB;
+$unnnic-color-gray-3: #E0E0E0;
+$unnnic-color-gray-4: #D6D6D6;
+$unnnic-color-gray-5: #C2C2C2;
+$unnnic-color-gray-6: #ADADAD;
+$unnnic-color-gray-7: #999999;
+$unnnic-color-gray-8: #858585;
+$unnnic-color-gray-9: #707070;
+$unnnic-color-gray-10: #5C5C5C;
+$unnnic-color-gray-11: #3D3D3D;
+$unnnic-color-gray-12: #1F1F1F;
+$unnnic-color-gray-13: #000000;
+$unnnic-color-teal-1: #E9FAF8;
+$unnnic-color-teal-2: #CFF8F4;
+$unnnic-color-teal-3: #ABF2EB;
+$unnnic-color-teal-4: #8DEAE3;
+$unnnic-color-teal-5: #66DBD3;
+$unnnic-color-teal-6: #40CAC2;
+$unnnic-color-teal-7: #10B6AF;
+$unnnic-color-teal-8: #01A29B;
+$unnnic-color-teal-9: #018D88;
+$unnnic-color-teal-10: #017873;
+$unnnic-color-teal-11: #016460;
+$unnnic-color-teal-12: #0D504D;
+$unnnic-color-teal-13: #133D3B;
+$unnnic-color-green-1: #E9FCE3;
+$unnnic-color-green-2: #CEFDC0;
+$unnnic-color-green-3: #AFF79E;
+$unnnic-color-green-4: #97EF86;
+$unnnic-color-green-5: #74E26C;
+$unnnic-color-green-6: #4FD051;
+$unnnic-color-green-7: #28BC37;
+$unnnic-color-green-8: #08A822;
+$unnnic-color-green-9: #019213;
+$unnnic-color-green-10: #017D10;
+$unnnic-color-green-11: #016810;
+$unnnic-color-green-12: #01540E;
+$unnnic-color-green-13: #01410B;
+$unnnic-color-blue-1: #F1F8FD;
+$unnnic-color-blue-2: #E1F3FF;
+$unnnic-color-blue-3: #CBE9FF;
+$unnnic-color-blue-4: #B6DFFF;
+$unnnic-color-blue-5: #97CFFE;
+$unnnic-color-blue-6: #79BCFB;
+$unnnic-color-blue-7: #5AA8F7;
+$unnnic-color-blue-8: #3993F4;
+$unnnic-color-blue-9: #157BF4;
+$unnnic-color-blue-10: #0366DD;
+$unnnic-color-blue-11: #0155B7;
+$unnnic-color-blue-12: #014592;
+$unnnic-color-blue-13: #013672;
+$unnnic-color-purple-1: #F9F5FD;
+$unnnic-color-purple-2: #F5EAFE;
+$unnnic-color-purple-3: #EDDCFE;
+$unnnic-color-purple-4: #E5CFFE;
+$unnnic-color-purple-5: #DABAFD;
+$unnnic-color-purple-6: #CBA3FC;
+$unnnic-color-purple-7: #BC8AFB;
+$unnnic-color-purple-8: #AD71F8;
+$unnnic-color-purple-9: #9C56F3;
+$unnnic-color-purple-10: #883CE6;
+$unnnic-color-purple-11: #7225D2;
+$unnnic-color-purple-12: #5C12B6;
+$unnnic-color-purple-13: #460B93;
+$unnnic-color-red-1: #FDF6F5;
+$unnnic-color-red-2: #FFEDEA;
+$unnnic-color-red-3: #FFDFD9;
+$unnnic-color-red-4: #FFD0C7;
+$unnnic-color-red-5: #FFBBAD;
+$unnnic-color-red-6: #FF9E8B;
+$unnnic-color-red-7: #FF7F68;
+$unnnic-color-red-8: #F95D47;
+$unnnic-color-red-9: #EC3727;
+$unnnic-color-red-10: #D31A15;
+$unnnic-color-red-11: #B40202;
+$unnnic-color-red-12: #940303;
+$unnnic-color-red-13: #720000;
+$unnnic-color-orange-1: #FDF5E9;
+$unnnic-color-orange-2: #FFEDCD;
+$unnnic-color-orange-3: #FFE0AE;
+$unnnic-color-orange-4: #FED392;
+$unnnic-color-orange-5: #FEBC64;
+$unnnic-color-orange-6: #FFA138;
+$unnnic-color-orange-7: #F78612;
+$unnnic-color-orange-8: #E57001;
+$unnnic-color-orange-9: #CC5E01;
+$unnnic-color-orange-10: #B24D01;
+$unnnic-color-orange-11: #963E01;
+$unnnic-color-orange-12: #7B3001;
+$unnnic-color-orange-13: #622401;
+$unnnic-color-yellow-1: #FBF7D4;
+$unnnic-color-yellow-2: #FDF5AD;
+$unnnic-color-yellow-3: #FAEC6D;
+$unnnic-color-yellow-4: #FADE1E;
+$unnnic-color-yellow-5: #E9C701;
+$unnnic-color-yellow-6: #D8B401;
+$unnnic-color-yellow-7: #C5A001;
+$unnnic-color-yellow-8: #B18D01;
+$unnnic-color-yellow-9: #9C7901;
+$unnnic-color-yellow-10: #866701;
+$unnnic-color-yellow-11: #715401;
+$unnnic-color-yellow-12: #5C4401;
+$unnnic-color-yellow-13: #493401;
+$unnnic-color-cyan-1: #E6FAFD;
+$unnnic-color-cyan-2: #C6F9FF;
+$unnnic-color-cyan-3: #A5F1FF;
+$unnnic-color-cyan-4: #89E8FB;
+$unnnic-color-cyan-5: #61D9F4;
+$unnnic-color-cyan-6: #34C6E9;
+$unnnic-color-cyan-7: #13B1DB;
+$unnnic-color-cyan-8: #029DC9;
+$unnnic-color-cyan-9: #0187B5;
+$unnnic-color-cyan-10: #0172A0;
+$unnnic-color-cyan-11: #015E8A;
+$unnnic-color-cyan-12: #014B74;
+$unnnic-color-cyan-13: #013A5E;
+$unnnic-color-pink-1: #FDF5F7;
+$unnnic-color-pink-2: #FFEBF2;
+$unnnic-color-pink-3: #FFDFEB;
+$unnnic-color-pink-4: #FFC8DC;
+$unnnic-color-pink-5: #FEB2CD;
+$unnnic-color-pink-6: #FF98BF;
+$unnnic-color-pink-7: #FE78AC;
+$unnnic-color-pink-8: #EF5997;
+$unnnic-color-pink-9: #DE387F;
+$unnnic-color-pink-10: #CA226A;
+$unnnic-color-pink-11: #AF0956;
+$unnnic-color-pink-12: #8F0246;
+$unnnic-color-pink-13: #74043B;