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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/.cursor/skills/unnnic/SKILL.md +222 -0
  2. package/dist/scss/colors-hsl.scss +179 -0
  3. package/dist/scss/colors.scss +134 -0
  4. package/dist/scss/deprecated/colors.scss +436 -0
  5. package/dist/scss/deprecated/fonts.scss +140 -0
  6. package/dist/scss/deprecated/grid.scss +52 -0
  7. package/dist/scss/deprecated/spacing.scss +103 -0
  8. package/dist/scss/fonts.scss +73 -0
  9. package/dist/scss/icon-sizes.scss +9 -0
  10. package/dist/scss/radii.scss +9 -0
  11. package/dist/scss/scheme-colors.scss +418 -0
  12. package/dist/scss/semantic-colors.scss +48 -0
  13. package/dist/scss/semantic-text-utilities.scss +26 -0
  14. package/dist/scss/shadows.scss +5 -0
  15. package/dist/scss/spaces.scss +17 -0
  16. package/dist/scss/tailwind.scss +104 -0
  17. package/dist/scss/theme.scss +98 -0
  18. package/dist/scss/unnnic.scss +20 -0
  19. package/dist/style.css +1 -1
  20. package/dist/unnnic.mjs +1 -1
  21. package/dist/unnnic.umd.js +1 -1
  22. package/package.json +10 -6
  23. package/src/components/ui/table/TableRow.vue +0 -1
package/.cursor/skills/unnnic/SKILL.md ADDED
@@ -0,0 +1,222 @@
1
+ # Unnnic Design System
2
+
3
+ Use this skill when implementing UI with Weni's Unnnic Design System (`@weni/unnnic-system`).
4
+
5
+ ## Import
6
+
7
+ ```vue
8
+ <script setup>
9
+ import { UnnnicButton, UnnnicInput, UnnnicFormElement } from '@weni/unnnic-system';
10
+ </script>
11
+ ```
12
+
13
+ ## Priority Components
14
+
15
+ These are the most commonly used components. Use these first before looking for alternatives.
16
+
17
+ ### Form Controls
18
+
19
+ | Component | Purpose | Key Props |
20
+ |-----------|---------|-----------|
21
+ | `UnnnicButton` | Actions | `type`: primary/secondary/tertiary/warning/attention, `size`: large/small, `loading`, `disabled`, `iconLeft`, `iconRight` |
22
+ | `UnnnicInput` | Text input | `type`: normal/error, `size`: md/sm, `iconLeft`, `iconRight`, `placeholder` |
23
+ | `UnnnicFormElement` | Form wrapper | `label`, `error`, `message`, `disabled` — wrap inputs with this |
24
+ | `UnnnicTextArea` | Multiline text | `modelValue`, `maxlength` |
25
+ | `UnnnicSelect` | Dropdown select | `options`, `modelValue` |
26
+ | `UnnnicMultiSelect` | Multi Dropdown select | `options`, `modelValue` |
27
+ | `UnnnicCheckbox` | Boolean toggle | `modelValue`, `label` |
28
+ | `UnnnicCheckboxGroup` | Checkbox list | `options`, `modelValue` |
29
+ | `UnnnicRadio` | Single option | `modelValue`, `value` |
30
+ | `UnnnicRadioGroup` | Radio list | `options`, `modelValue` |
31
+ | `UnnnicSwitch` | Toggle switch | `modelValue`, `label` |
32
+ | `UnnnicDatePicker` | Date selection | `modelValue`, `format` |
33
+
34
+ ### Feedback & Overlays
35
+
36
+ | Component | Purpose | Key Props |
37
+ |-----------|---------|-----------|
38
+ | `UnnnicDialog` | Modern dialog | Composable: `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogClose` |
39
+ | `UnnnicDrawerNext` | Modern drawer | Composable: `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerClose` |
40
+ | `UnnnicToast` | Notification | Use `unnnicToastManager.show({ type, message })` |
41
+ | `UnnnicPopover` | Popover | Composable: `PopoverTrigger`, `PopoverContent` |
42
+ | `UnnnicToolTip` | Tooltip | `text`, `side` |
43
+ | `UnnnicDisclaimer` | Inline message | `type`: informational/success/attention/error/neutral, `title`, `description` |
44
+
45
+ ### Display
46
+
47
+ | Component | Purpose | Key Props |
48
+ |-----------|---------|-----------|
49
+ | `UnnnicIcon` | Icon | `icon`, `scheme`, `size`: ant/sm/md/lg/xl |
50
+ | `UnnnicChip` | Chip | `text`, `removable` |
51
+ | `UnnnicTag` | Label | `text`, `type` |
52
+ | `UnnnicSkeletonLoading` | Loading | `width`, `height` |
53
+ | `UnnnicTabs` | Modern tabs | Composable: `TabsList`, `TabsTrigger`, `TabsContent` |
54
+ | `UnnnicSegmentedControl` | Segmented toggle | Composable: `SegmentedControlList`, `SegmentedControlTrigger`, `SegmentedControlContent`, `size`: small/medium |
55
+ | `UnnnicPageHeader` | Page header | `title`, `description`, slots for actions |
56
+
57
+ ## Other Components
58
+
59
+ ### Legacy (use modern alternatives when possible)
60
+
61
+ | Legacy | Modern Alternative |
62
+ |--------|-------------------|
63
+ | `UnnnicModal` | `UnnnicDialog` |
64
+ | `UnnnicDrawer` | `UnnnicDrawerNext` |
65
+ | `UnnnicTab` | `UnnnicTabs` |
66
+ | `UnnnicSelectSmart` | `UnnnicSelect` |
67
+
68
+ ### Additional Components
69
+
70
+ | Component | Purpose | Key Props |
71
+ |-----------|---------|-----------|
72
+ | `UnnnicTable` | version="2" is Modern version="1" is Legacy | `headers`, use `UnnnicTableRow` for rows |
73
+ | `UnnnicTableNext` | Legacy table | `headers`, `items`, `@row-click`, `@sort` |
74
+ | `UnnnicDataTable` | Data table | `headers`, `items`, with pagination |
75
+ | `UnnnicBreadcrumb` | Breadcrumbs | `crumbs` array |
76
+ | `UnnnicPagination` | Page nav | `modelValue`, `total`, `perPage` |
77
+ | `UnnnicAvatarIcon` | User avatar | `username`, `size` |
78
+
79
+ ## Tokens
80
+
81
+ ### Colors (SCSS)
82
+
83
+ **Background:** `$unnnic-color-bg-{variant}`
84
+ - `base`, `base-soft`, `muted` — neutrals
85
+ - `accent-strong` — primary brand (teal)
86
+ - `success`, `warning`, `critical`, `info` — semantic
87
+
88
+ **Foreground:** `$unnnic-color-fg-{variant}`
89
+ - `base`, `emphasized`, `muted`, `inverted`
90
+ - `accent`, `success`, `warning`, `critical`, `info`
91
+
92
+ **Border:** `$unnnic-color-border-{variant}`
93
+ - `base`, `muted`, `emphasized`
94
+ - `accent-strong`, `success`, `warning`, `critical`, `info`
95
+
96
+ ### Spacing (SCSS)
97
+
98
+ `$unnnic-space-{n}` — Base unit: 4px
99
+
100
+ | Token | Value |
101
+ |-------|-------|
102
+ | `space-05` | 2px |
103
+ | `space-1` | 4px |
104
+ | `space-2` | 8px |
105
+ | `space-3` | 12px |
106
+ | `space-4` | 16px |
107
+ | `space-6` | 24px |
108
+ | `space-8` | 32px |
109
+ | `space-12` | 48px |
110
+ | `space-16` | 64px |
111
+ | `space-20` | 80px |
112
+
113
+ ### Icon sizer (SCSS)
114
+
115
+ `$unnnic-icon-size-{n}` — Base unit: 4px
116
+
117
+ | Token | Value |
118
+ |-------|-------|
119
+ | `size-3` | 12px |
120
+ | `size-4` | 16px |
121
+ | `size-5` | 20px |
122
+ | `size-6` | 24px |
123
+ | `size-7` | 32px |
124
+ | `size-10` | 40px |
125
+
126
+ ### Typography (SCSS mixins)
127
+
128
+ ```scss
129
+ @include unnnic-font-display-1; // 24px bold
130
+ @include unnnic-font-display-2; // 20px semibold
131
+ @include unnnic-font-body; // 14px regular
132
+ @include unnnic-font-caption-1; // 12px regular
133
+ @include unnnic-font-action; // 14px semibold (buttons)
134
+ ```
135
+
136
+ ### Radii
137
+
138
+ `$unnnic-radius-{n}` — 1, 2, 3, 4 or full (4px increments)
139
+
140
+ ### Shadows
141
+
142
+ `$unnnic-shadow-{n}` — 1 or 2
143
+
144
+ ## Patterns
145
+
146
+ ### Form with Validation
147
+
148
+ ```vue
149
+ <UnnnicFormElement label="Email" :error="errors.email">
150
+ <UnnnicInput
151
+ v-model="email"
152
+ :type="errors.email ? 'error' : 'normal'"
153
+ placeholder="user@example.com"
154
+ />
155
+ </UnnnicFormElement>
156
+ ```
157
+
158
+ ### Button Hierarchy
159
+
160
+ - **Primary action:** `type="primary"` — one per section
161
+ - **Secondary action:** `type="secondary"`
162
+ - **Tertiary/link:** `type="tertiary"`
163
+ - **Destructive:** `type="warning"`
164
+ - **Caution:** `type="attention"`
165
+
166
+ ### Toast Notifications
167
+
168
+ ```typescript
169
+ import { unnnicToastManager } from '@weni/unnnic-system';
170
+
171
+ unnnicToastManager.show({
172
+ type: 'success', // success | error | warning | info
173
+ message: 'Changes saved',
174
+ });
175
+ ```
176
+
177
+ ### Modern Composable Components
178
+
179
+ Newer components use composable patterns:
180
+
181
+ ```vue
182
+ <UnnnicDialog>
183
+ <UnnnicDialogTrigger>
184
+ <UnnnicButton>Open</UnnnicButton>
185
+ </UnnnicDialogTrigger>
186
+ <UnnnicDialogContent>
187
+ <UnnnicDialogHeader>
188
+ <UnnnicDialogTitle>Title</UnnnicDialogTitle>
189
+ </UnnnicDialogHeader>
190
+ <!-- content -->
191
+ <UnnnicDialogFooter>
192
+ <UnnnicDialogClose>
193
+ <UnnnicButton type="secondary">Cancel</UnnnicButton>
194
+ </UnnnicDialogClose>
195
+ <UnnnicButton type="primary">Confirm</UnnnicButton>
196
+ </UnnnicDialogFooter>
197
+ </UnnnicDialogContent>
198
+ </UnnnicDialog>
199
+ ```
200
+
201
+ ## Figma Integration
202
+
203
+ When implementing from Figma designs:
204
+
205
+ 1. Use Figma MCP `get_design_context` to get component structure
206
+ 2. Match Figma component names to Unnnic exports (e.g., "Button" → `UnnnicButton`)
207
+ 3. Use semantic tokens — never hardcode colors
208
+ 4. Check for Code Connect snippets in Figma Dev Mode
209
+
210
+ ## Common Mistakes to Avoid
211
+
212
+ - Don't use raw `<input>` — use `UnnnicInput` wrapped in `UnnnicFormElement`
213
+ - Don't hardcode colors — use `$unnnic-color-*` tokens
214
+ - Don't use multiple `type="primary"` buttons in same section
215
+ - Don't forget error states — pass `error` prop to `UnnnicFormElement`
216
+ - Don't use legacy `UnnnicModal` for new code — prefer `UnnnicModalNext` or `UnnnicDialog`
217
+
218
+ ## Resources
219
+
220
+ - **Storybook:** https://unnnic.stg.cloud.weni.ai/
221
+ - **Figma:** https://figma.com/design/YbvOpVPUBxTSEzg4J8pXKu/Weni---unnnic
222
+ - **npm:** https://www.npmjs.com/package/@weni/unnnic-system
package/dist/scss/colors-hsl.scss ADDED
@@ -0,0 +1,179 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $unnnic-color-gray-0-hsl: 0 0% 100%; /* #FFFFFF */
5
+ $unnnic-color-gray-1-hsl: 0 0% 96%; /* #F5F5F5 */
6
+ $unnnic-color-gray-2-hsl: 0 0% 92%; /* #EBEBEB */
7
+ $unnnic-color-gray-3-hsl: 0 0% 88%; /* #E0E0E0 */
8
+ $unnnic-color-gray-4-hsl: 0 0% 84%; /* #D6D6D6 */
9
+ $unnnic-color-gray-5-hsl: 0 0% 76%; /* #C2C2C2 */
10
+ $unnnic-color-gray-6-hsl: 0 0% 68%; /* #ADADAD */
11
+ $unnnic-color-gray-7-hsl: 0 0% 60%; /* #999999 */
12
+ $unnnic-color-gray-8-hsl: 0 0% 52%; /* #858585 */
13
+ $unnnic-color-gray-9-hsl: 0 0% 44%; /* #707070 */
14
+ $unnnic-color-gray-10-hsl: 0 0% 36%; /* #5C5C5C */
15
+ $unnnic-color-gray-11-hsl: 0 0% 24%; /* #3D3D3D */
16
+ $unnnic-color-gray-12-hsl: 0 0% 12%; /* #1F1F1F */
17
+ $unnnic-color-gray-13-hsl: 0 0% 0%; /* #000000 */
18
+ $unnnic-color-teal-1-hsl: 173 63% 95%; /* #E9FAF8 */
19
+ $unnnic-color-teal-2-hsl: 174 75% 89%; /* #CFF8F4 */
20
+ $unnnic-color-teal-3-hsl: 174 73% 81%; /* #ABF2EB */
21
+ $unnnic-color-teal-4-hsl: 175 69% 74%; /* #8DEAE3 */
22
+ $unnnic-color-teal-5-hsl: 176 62% 63%; /* #66DBD3 */
23
+ $unnnic-color-teal-6-hsl: 177 57% 52%; /* #40CAC2 */
24
+ $unnnic-color-teal-7-hsl: 177 84% 39%; /* #10B6AF */
25
+ $unnnic-color-teal-8-hsl: 177 99% 32%; /* #01A29B */
26
+ $unnnic-color-teal-9-hsl: 178 99% 28%; /* #018D88 */
27
+ $unnnic-color-teal-10-hsl: 177 98% 24%; /* #017873 */
28
+ $unnnic-color-teal-11-hsl: 178 98% 20%; /* #016460 */
29
+ $unnnic-color-teal-12-hsl: 177 72% 18%; /* #0D504D */
30
+ $unnnic-color-teal-13-hsl: 177 53% 16%; /* #133D3B */
31
+ $unnnic-color-green-1-hsl: 106 81% 94%; /* #E9FCE3 */
32
+ $unnnic-color-green-2-hsl: 106 94% 87%; /* #CEFDC0 */
33
+ $unnnic-color-green-3-hsl: 109 85% 79%; /* #AFF79E */
34
+ $unnnic-color-green-4-hsl: 110 77% 73%; /* #97EF86 */
35
+ $unnnic-color-green-5-hsl: 116 67% 65%; /* #74E26C */
36
+ $unnnic-color-green-6-hsl: 121 58% 56%; /* #4FD051 */
37
+ $unnnic-color-green-7-hsl: 126 65% 45%; /* #28BC37 */
38
+ $unnnic-color-green-8-hsl: 130 91% 35%; /* #08A822 */
39
+ $unnnic-color-green-9-hsl: 127 99% 29%; /* #019213 */
40
+ $unnnic-color-green-10-hsl: 127 98% 25%; /* #017D10 */
41
+ $unnnic-color-green-11-hsl: 129 98% 21%; /* #016810 */
42
+ $unnnic-color-green-12-hsl: 129 98% 17%; /* #01540E */
43
+ $unnnic-color-green-13-hsl: 129 97% 13%; /* #01410B */
44
+ $unnnic-color-blue-1-hsl: 205 75% 97%; /* #F1F8FD */
45
+ $unnnic-color-blue-2-hsl: 204 100% 94%; /* #E1F3FF */
46
+ $unnnic-color-blue-3-hsl: 205 100% 90%; /* #CBE9FF */
47
+ $unnnic-color-blue-4-hsl: 206 100% 86%; /* #B6DFFF */
48
+ $unnnic-color-blue-5-hsl: 207 98% 79%; /* #97CFFE */
49
+ $unnnic-color-blue-6-hsl: 209 94% 73%; /* #79BCFB */
50
+ $unnnic-color-blue-7-hsl: 210 91% 66%; /* #5AA8F7 */
51
+ $unnnic-color-blue-8-hsl: 211 89% 59%; /* #3993F4 */
52
+ $unnnic-color-blue-9-hsl: 213 91% 52%; /* #157BF4 */
53
+ $unnnic-color-blue-10-hsl: 213 97% 44%; /* #0366DD */
54
+ $unnnic-color-blue-11-hsl: 212 99% 36%; /* #0155B7 */
55
+ $unnnic-color-blue-12-hsl: 212 99% 29%; /* #014592 */
56
+ $unnnic-color-blue-13-hsl: 212 98% 23%; /* #013672 */
57
+ $unnnic-color-purple-1-hsl: 270 67% 98%; /* #F9F5FD */
58
+ $unnnic-color-purple-2-hsl: 273 91% 96%; /* #F5EAFE */
59
+ $unnnic-color-purple-3-hsl: 270 94% 93%; /* #EDDCFE */
60
+ $unnnic-color-purple-4-hsl: 268 96% 90%; /* #E5CFFE */
61
+ $unnnic-color-purple-5-hsl: 269 94% 86%; /* #DABAFD */
62
+ $unnnic-color-purple-6-hsl: 267 94% 81%; /* #CBA3FC */
63
+ $unnnic-color-purple-7-hsl: 267 93% 76%; /* #BC8AFB */
64
+ $unnnic-color-purple-8-hsl: 267 91% 71%; /* #AD71F8 */
65
+ $unnnic-color-purple-9-hsl: 267 87% 65%; /* #9C56F3 */
66
+ $unnnic-color-purple-10-hsl: 267 77% 57%; /* #883CE6 */
67
+ $unnnic-color-purple-11-hsl: 267 70% 48%; /* #7225D2 */
68
+ $unnnic-color-purple-12-hsl: 267 82% 39%; /* #5C12B6 */
69
+ $unnnic-color-purple-13-hsl: 266 86% 31%; /* #460B93 */
70
+ $unnnic-color-red-1-hsl: 7 67% 98%; /* #FDF6F5 */
71
+ $unnnic-color-red-2-hsl: 9 100% 96%; /* #FFEDEA */
72
+ $unnnic-color-red-3-hsl: 9 100% 93%; /* #FFDFD9 */
73
+ $unnnic-color-red-4-hsl: 10 100% 89%; /* #FFD0C7 */
74
+ $unnnic-color-red-5-hsl: 10 100% 84%; /* #FFBBAD */
75
+ $unnnic-color-red-6-hsl: 10 100% 77%; /* #FF9E8B */
76
+ $unnnic-color-red-7-hsl: 9 100% 70%; /* #FF7F68 */
77
+ $unnnic-color-red-8-hsl: 7 94% 63%; /* #F95D47 */
78
+ $unnnic-color-red-9-hsl: 5 84% 54%; /* #EC3727 */
79
+ $unnnic-color-red-10-hsl: 2 82% 45%; /* #D31A15 */
80
+ $unnnic-color-red-11-hsl: 0 98% 36%; /* #B40202 */
81
+ $unnnic-color-red-12-hsl: 0 96% 30%; /* #940303 */
82
+ $unnnic-color-red-13-hsl: 0 100% 22%; /* #720000 */
83
+ $unnnic-color-orange-1-hsl: 36 83% 95%; /* #FDF5E9 */
84
+ $unnnic-color-orange-2-hsl: 38 100% 90%; /* #FFEDCD */
85
+ $unnnic-color-orange-3-hsl: 37 100% 84%; /* #FFE0AE */
86
+ $unnnic-color-orange-4-hsl: 36 98% 78%; /* #FED392 */
87
+ $unnnic-color-orange-5-hsl: 34 99% 69%; /* #FEBC64 */
88
+ $unnnic-color-orange-6-hsl: 32 100% 61%; /* #FFA138 */
89
+ $unnnic-color-orange-7-hsl: 30 93% 52%; /* #F78612 */
90
+ $unnnic-color-orange-8-hsl: 29 99% 45%; /* #E57001 */
91
+ $unnnic-color-orange-9-hsl: 27 99% 40%; /* #CC5E01 */
92
+ $unnnic-color-orange-10-hsl: 26 99% 35%; /* #B24D01 */
93
+ $unnnic-color-orange-11-hsl: 25 99% 30%; /* #963E01 */
94
+ $unnnic-color-orange-12-hsl: 23 98% 24%; /* #7B3001 */
95
+ $unnnic-color-orange-13-hsl: 22 98% 19%; /* #622401 */
96
+ $unnnic-color-yellow-1-hsl: 54 83% 91%; /* #FBF7D4 */
97
+ $unnnic-color-yellow-2-hsl: 54 95% 84%; /* #FDF5AD */
98
+ $unnnic-color-yellow-3-hsl: 54 93% 70%; /* #FAEC6D */
99
+ $unnnic-color-yellow-4-hsl: 52 96% 55%; /* #FADE1E */
100
+ $unnnic-color-yellow-5-hsl: 51 99% 46%; /* #E9C701 */
101
+ $unnnic-color-yellow-6-hsl: 50 99% 43%; /* #D8B401 */
102
+ $unnnic-color-yellow-7-hsl: 49 99% 39%; /* #C5A001 */
103
+ $unnnic-color-yellow-8-hsl: 48 99% 35%; /* #B18D01 */
104
+ $unnnic-color-yellow-9-hsl: 46 99% 31%; /* #9C7901 */
105
+ $unnnic-color-yellow-10-hsl: 46 99% 26%; /* #866701 */
106
+ $unnnic-color-yellow-11-hsl: 44 98% 22%; /* #715401 */
107
+ $unnnic-color-yellow-12-hsl: 44 98% 18%; /* #5C4401 */
108
+ $unnnic-color-yellow-13-hsl: 43 97% 15%; /* #493401 */
109
+ $unnnic-color-cyan-1-hsl: 188 85% 95%; /* #E6FAFD */
110
+ $unnnic-color-cyan-2-hsl: 186 100% 89%; /* #C6F9FF */
111
+ $unnnic-color-cyan-3-hsl: 189 100% 82%; /* #A5F1FF */
112
+ $unnnic-color-cyan-4-hsl: 190 93% 76%; /* #89E8FB */
113
+ $unnnic-color-cyan-5-hsl: 191 87% 67%; /* #61D9F4 */
114
+ $unnnic-color-cyan-6-hsl: 192 80% 56%; /* #34C6E9 */
115
+ $unnnic-color-cyan-7-hsl: 193 84% 47%; /* #13B1DB */
116
+ $unnnic-color-cyan-8-hsl: 193 98% 40%; /* #029DC9 */
117
+ $unnnic-color-cyan-9-hsl: 195 99% 36%; /* #0187B5 */
118
+ $unnnic-color-cyan-10-hsl: 197 99% 32%; /* #0172A0 */
119
+ $unnnic-color-cyan-11-hsl: 199 99% 27%; /* #015E8A */
120
+ $unnnic-color-cyan-12-hsl: 201 98% 23%; /* #014B74 */
121
+ $unnnic-color-cyan-13-hsl: 203 98% 19%; /* #013A5E */
122
+ $unnnic-color-pink-1-hsl: 345 67% 98%; /* #FDF5F7 */
123
+ $unnnic-color-pink-2-hsl: 339 100% 96%; /* #FFEBF2 */
124
+ $unnnic-color-pink-3-hsl: 338 100% 94%; /* #FFDFEB */
125
+ $unnnic-color-pink-4-hsl: 338 100% 89%; /* #FFC8DC */
126
+ $unnnic-color-pink-5-hsl: 339 97% 85%; /* #FEB2CD */
127
+ $unnnic-color-pink-6-hsl: 337 100% 80%; /* #FF98BF */
128
+ $unnnic-color-pink-7-hsl: 337 99% 73%; /* #FE78AC */
129
+ $unnnic-color-pink-8-hsl: 335 82% 64%; /* #EF5997 */
130
+ $unnnic-color-pink-9-hsl: 334 72% 55%; /* #DE387F */
131
+ $unnnic-color-pink-10-hsl: 334 71% 46%; /* #CA226A */
132
+ $unnnic-color-pink-11-hsl: 332 90% 36%; /* #AF0956 */
133
+ $unnnic-color-pink-12-hsl: 331 97% 28%; /* #8F0246 */
134
+ $unnnic-color-pink-13-hsl: 331 93% 24%; /* #74043B */
135
+ $unnnic-color-bg-base-hsl: 0 0% 100%; /* #FFFFFF */
136
+ $unnnic-color-bg-base-soft-hsl: 0 0% 96%; /* #F5F5F5 */
137
+ $unnnic-color-bg-muted-hsl: 0 0% 92%; /* #EBEBEB */
138
+ $unnnic-color-bg-accent-plain-hsl: 174 75% 89%; /* #CFF8F4 */
139
+ $unnnic-color-bg-accent-strong-hsl: 177 99% 32%; /* #01A29B */
140
+ $unnnic-color-bg-info-hsl: 205 75% 97%; /* #F1F8FD */
141
+ $unnnic-color-bg-success-hsl: 106 81% 94%; /* #E9FCE3 */
142
+ $unnnic-color-bg-warning-hsl: 54 83% 91%; /* #FBF7D4 */
143
+ $unnnic-color-bg-critical-hsl: 7 67% 98%; /* #FDF6F5 */
144
+ $unnnic-color-bg-red-plain-hsl: 9 100% 93%; /* #FFDFD9 */
145
+ $unnnic-color-bg-red-strong-hsl: 5 84% 54%; /* #EC3727 */
146
+ $unnnic-color-bg-orange-plain-hsl: 37 100% 84%; /* #FFE0AE */
147
+ $unnnic-color-bg-orange-strong-hsl: 29 99% 45%; /* #E57001 */
148
+ $unnnic-color-bg-yellow-plain-hsl: 54 95% 84%; /* #FDF5AD */
149
+ $unnnic-color-bg-yellow-strong-hsl: 48 99% 35%; /* #B18D01 */
150
+ $unnnic-color-bg-green-plain-hsl: 109 85% 79%; /* #AFF79E */
151
+ $unnnic-color-bg-green-strong-hsl: 130 91% 35%; /* #08A822 */
152
+ $unnnic-color-bg-teal-plain-hsl: 174 73% 81%; /* #ABF2EB */
153
+ $unnnic-color-bg-teal-strong-hsl: 177 99% 32%; /* #01A29B */
154
+ $unnnic-color-bg-blue-plain-hsl: 205 100% 90%; /* #CBE9FF */
155
+ $unnnic-color-bg-blue-strong-hsl: 211 89% 59%; /* #3993F4 */
156
+ $unnnic-color-bg-purple-plain-hsl: 270 94% 93%; /* #EDDCFE */
157
+ $unnnic-color-bg-purple-strong-hsl: 267 91% 71%; /* #AD71F8 */
158
+ $unnnic-color-bg-pink-plain-hsl: 338 100% 94%; /* #FFDFEB */
159
+ $unnnic-color-bg-pink-strong-hsl: 335 82% 64%; /* #EF5997 */
160
+ $unnnic-color-bg-inverted-hsl: 0 0% 12%; /* #1F1F1F */
161
+ $unnnic-color-fg-base-hsl: 0 0% 24%; /* #3D3D3D */
162
+ $unnnic-color-fg-emphasized-hsl: 0 0% 12%; /* #1F1F1F */
163
+ $unnnic-color-fg-muted-hsl: 0 0% 44%; /* #707070 */
164
+ $unnnic-color-fg-inverted-hsl: 0 0% 100%; /* #FFFFFF */
165
+ $unnnic-color-fg-on-primary-hsl: 0 0% 100%; /* #FFFFFF */
166
+ $unnnic-color-fg-accent-hsl: 177 99% 32%; /* #01A29B */
167
+ $unnnic-color-fg-info-hsl: 213 91% 52%; /* #157BF4 */
168
+ $unnnic-color-fg-success-hsl: 127 99% 29%; /* #019213 */
169
+ $unnnic-color-fg-warning-hsl: 46 99% 31%; /* #9C7901 */
170
+ $unnnic-color-fg-critical-hsl: 5 84% 54%; /* #EC3727 */
171
+ $unnnic-color-border-base-hsl: 0 0% 88%; /* #E0E0E0 */
172
+ $unnnic-color-border-muted-hsl: 0 0% 92%; /* #EBEBEB */
173
+ $unnnic-color-border-emphasized-hsl: 0 0% 60%; /* #999999 */
174
+ $unnnic-color-border-accent-plain-hsl: 176 62% 63%; /* #66DBD3 */
175
+ $unnnic-color-border-accent-strong-hsl: 177 99% 32%; /* #01A29B */
176
+ $unnnic-color-border-info-hsl: 207 98% 79%; /* #97CFFE */
177
+ $unnnic-color-border-success-hsl: 116 67% 65%; /* #74E26C */
178
+ $unnnic-color-border-warning-hsl: 51 99% 46%; /* #E9C701 */
179
+ $unnnic-color-border-critical-hsl: 10 100% 77%; /* #FF9E8B */
package/dist/scss/colors.scss ADDED
@@ -0,0 +1,134 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $unnnic-color-gray-0: #FFFFFF;
5
+ $unnnic-color-gray-1: #F5F5F5;
6
+ $unnnic-color-gray-2: #EBEBEB;
7
+ $unnnic-color-gray-3: #E0E0E0;
8
+ $unnnic-color-gray-4: #D6D6D6;
9
+ $unnnic-color-gray-5: #C2C2C2;
10
+ $unnnic-color-gray-6: #ADADAD;
11
+ $unnnic-color-gray-7: #999999;
12
+ $unnnic-color-gray-8: #858585;
13
+ $unnnic-color-gray-9: #707070;
14
+ $unnnic-color-gray-10: #5C5C5C;
15
+ $unnnic-color-gray-11: #3D3D3D;
16
+ $unnnic-color-gray-12: #1F1F1F;
17
+ $unnnic-color-gray-13: #000000;
18
+ $unnnic-color-teal-1: #E9FAF8;
19
+ $unnnic-color-teal-2: #CFF8F4;
20
+ $unnnic-color-teal-3: #ABF2EB;
21
+ $unnnic-color-teal-4: #8DEAE3;
22
+ $unnnic-color-teal-5: #66DBD3;
23
+ $unnnic-color-teal-6: #40CAC2;
24
+ $unnnic-color-teal-7: #10B6AF;
25
+ $unnnic-color-teal-8: #01A29B;
26
+ $unnnic-color-teal-9: #018D88;
27
+ $unnnic-color-teal-10: #017873;
28
+ $unnnic-color-teal-11: #016460;
29
+ $unnnic-color-teal-12: #0D504D;
30
+ $unnnic-color-teal-13: #133D3B;
31
+ $unnnic-color-green-1: #E9FCE3;
32
+ $unnnic-color-green-2: #CEFDC0;
33
+ $unnnic-color-green-3: #AFF79E;
34
+ $unnnic-color-green-4: #97EF86;
35
+ $unnnic-color-green-5: #74E26C;
36
+ $unnnic-color-green-6: #4FD051;
37
+ $unnnic-color-green-7: #28BC37;
38
+ $unnnic-color-green-8: #08A822;
39
+ $unnnic-color-green-9: #019213;
40
+ $unnnic-color-green-10: #017D10;
41
+ $unnnic-color-green-11: #016810;
42
+ $unnnic-color-green-12: #01540E;
43
+ $unnnic-color-green-13: #01410B;
44
+ $unnnic-color-blue-1: #F1F8FD;
45
+ $unnnic-color-blue-2: #E1F3FF;
46
+ $unnnic-color-blue-3: #CBE9FF;
47
+ $unnnic-color-blue-4: #B6DFFF;
48
+ $unnnic-color-blue-5: #97CFFE;
49
+ $unnnic-color-blue-6: #79BCFB;
50
+ $unnnic-color-blue-7: #5AA8F7;
51
+ $unnnic-color-blue-8: #3993F4;
52
+ $unnnic-color-blue-9: #157BF4;
53
+ $unnnic-color-blue-10: #0366DD;
54
+ $unnnic-color-blue-11: #0155B7;
55
+ $unnnic-color-blue-12: #014592;
56
+ $unnnic-color-blue-13: #013672;
57
+ $unnnic-color-purple-1: #F9F5FD;
58
+ $unnnic-color-purple-2: #F5EAFE;
59
+ $unnnic-color-purple-3: #EDDCFE;
60
+ $unnnic-color-purple-4: #E5CFFE;
61
+ $unnnic-color-purple-5: #DABAFD;
62
+ $unnnic-color-purple-6: #CBA3FC;
63
+ $unnnic-color-purple-7: #BC8AFB;
64
+ $unnnic-color-purple-8: #AD71F8;
65
+ $unnnic-color-purple-9: #9C56F3;
66
+ $unnnic-color-purple-10: #883CE6;
67
+ $unnnic-color-purple-11: #7225D2;
68
+ $unnnic-color-purple-12: #5C12B6;
69
+ $unnnic-color-purple-13: #460B93;
70
+ $unnnic-color-red-1: #FDF6F5;
71
+ $unnnic-color-red-2: #FFEDEA;
72
+ $unnnic-color-red-3: #FFDFD9;
73
+ $unnnic-color-red-4: #FFD0C7;
74
+ $unnnic-color-red-5: #FFBBAD;
75
+ $unnnic-color-red-6: #FF9E8B;
76
+ $unnnic-color-red-7: #FF7F68;
77
+ $unnnic-color-red-8: #F95D47;
78
+ $unnnic-color-red-9: #EC3727;
79
+ $unnnic-color-red-10: #D31A15;
80
+ $unnnic-color-red-11: #B40202;
81
+ $unnnic-color-red-12: #940303;
82
+ $unnnic-color-red-13: #720000;
83
+ $unnnic-color-orange-1: #FDF5E9;
84
+ $unnnic-color-orange-2: #FFEDCD;
85
+ $unnnic-color-orange-3: #FFE0AE;
86
+ $unnnic-color-orange-4: #FED392;
87
+ $unnnic-color-orange-5: #FEBC64;
88
+ $unnnic-color-orange-6: #FFA138;
89
+ $unnnic-color-orange-7: #F78612;
90
+ $unnnic-color-orange-8: #E57001;
91
+ $unnnic-color-orange-9: #CC5E01;
92
+ $unnnic-color-orange-10: #B24D01;
93
+ $unnnic-color-orange-11: #963E01;
94
+ $unnnic-color-orange-12: #7B3001;
95
+ $unnnic-color-orange-13: #622401;
96
+ $unnnic-color-yellow-1: #FBF7D4;
97
+ $unnnic-color-yellow-2: #FDF5AD;
98
+ $unnnic-color-yellow-3: #FAEC6D;
99
+ $unnnic-color-yellow-4: #FADE1E;
100
+ $unnnic-color-yellow-5: #E9C701;
101
+ $unnnic-color-yellow-6: #D8B401;
102
+ $unnnic-color-yellow-7: #C5A001;
103
+ $unnnic-color-yellow-8: #B18D01;
104
+ $unnnic-color-yellow-9: #9C7901;
105
+ $unnnic-color-yellow-10: #866701;
106
+ $unnnic-color-yellow-11: #715401;
107
+ $unnnic-color-yellow-12: #5C4401;
108
+ $unnnic-color-yellow-13: #493401;
109
+ $unnnic-color-cyan-1: #E6FAFD;
110
+ $unnnic-color-cyan-2: #C6F9FF;
111
+ $unnnic-color-cyan-3: #A5F1FF;
112
+ $unnnic-color-cyan-4: #89E8FB;
113
+ $unnnic-color-cyan-5: #61D9F4;
114
+ $unnnic-color-cyan-6: #34C6E9;
115
+ $unnnic-color-cyan-7: #13B1DB;
116
+ $unnnic-color-cyan-8: #029DC9;
117
+ $unnnic-color-cyan-9: #0187B5;
118
+ $unnnic-color-cyan-10: #0172A0;
119
+ $unnnic-color-cyan-11: #015E8A;
120
+ $unnnic-color-cyan-12: #014B74;
121
+ $unnnic-color-cyan-13: #013A5E;
122
+ $unnnic-color-pink-1: #FDF5F7;
123
+ $unnnic-color-pink-2: #FFEBF2;
124
+ $unnnic-color-pink-3: #FFDFEB;
125
+ $unnnic-color-pink-4: #FFC8DC;
126
+ $unnnic-color-pink-5: #FEB2CD;
127
+ $unnnic-color-pink-6: #FF98BF;
128
+ $unnnic-color-pink-7: #FE78AC;
129
+ $unnnic-color-pink-8: #EF5997;
130
+ $unnnic-color-pink-9: #DE387F;
131
+ $unnnic-color-pink-10: #CA226A;
132
+ $unnnic-color-pink-11: #AF0956;
133
+ $unnnic-color-pink-12: #8F0246;
134
+ $unnnic-color-pink-13: #74043B;