@weni/unnnic-system 3.0.0 → 3.0.1-alpha.1
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.
- package/dist/components/DataTable/index.vue.d.ts +156 -0
- package/dist/components/DataTable/index.vue.d.ts.map +1 -0
- package/dist/components/index.d.ts +255 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/{es-53eae08e.mjs → es-10af465a.mjs} +1 -1
- package/dist/{index-9d05efa7.mjs → index-2b77db3c.mjs} +7038 -6852
- package/dist/{pt-br-80860566.mjs → pt-br-dbc4fe4a.mjs} +1 -1
- package/dist/style.css +1 -1
- package/dist/unnnic.mjs +54 -53
- package/dist/unnnic.umd.js +37 -37
- package/package.json +1 -2
- package/src/assets/scss/colors.scss +219 -67
- package/src/assets/scss/fonts.scss +23 -0
- package/src/assets/scss/spacing.scss +36 -0
- package/src/components/DataTable/index.vue +493 -0
- package/src/components/index.ts +4 -1
- package/src/stories/DataTable.stories.js +332 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@weni/unnnic-system",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1-alpha.1",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -82,7 +82,6 @@
|
|
|
82
82
|
"@vitest/ui": "^1.6.0",
|
|
83
83
|
"@vue/eslint-config-prettier": "^9.0.0",
|
|
84
84
|
"@vue/test-utils": "^2.4.6",
|
|
85
|
-
|
|
86
85
|
"eslint": "^8.0.0",
|
|
87
86
|
"eslint-config-prettier": "^9.1.0",
|
|
88
87
|
"eslint-plugin-prettier": "^5.1.3",
|
|
@@ -1,74 +1,137 @@
|
|
|
1
|
-
$unnnic-color-
|
|
2
|
-
$unnnic-color-
|
|
3
|
-
$unnnic-color-
|
|
4
|
-
$unnnic-color-
|
|
5
|
-
$unnnic-color-
|
|
6
|
-
$unnnic-color-
|
|
7
|
-
$unnnic-color-
|
|
8
|
-
$unnnic-color-
|
|
9
|
-
$unnnic-color-
|
|
10
|
-
$unnnic-color-
|
|
11
|
-
$unnnic-color-
|
|
12
|
-
|
|
13
|
-
$unnnic-color-
|
|
14
|
-
$unnnic-color-
|
|
15
|
-
$unnnic-color-
|
|
16
|
-
$unnnic-color-
|
|
17
|
-
$unnnic-color-
|
|
18
|
-
$unnnic-color-
|
|
19
|
-
$unnnic-color-
|
|
20
|
-
$unnnic-color-
|
|
21
|
-
$unnnic-color-
|
|
22
|
-
$unnnic-color-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
$unnnic-color-
|
|
26
|
-
|
|
27
|
-
$unnnic-color-
|
|
28
|
-
$unnnic-color-
|
|
29
|
-
|
|
30
|
-
$unnnic-color-
|
|
31
|
-
$unnnic-color-
|
|
1
|
+
$unnnic-color-teal-50: #EFFEFC;
|
|
2
|
+
$unnnic-color-teal-100: #C7FFF7;
|
|
3
|
+
$unnnic-color-teal-200: #90FFEF;
|
|
4
|
+
$unnnic-color-teal-300: #51F7E7;
|
|
5
|
+
$unnnic-color-teal-400: #1DE4D7;
|
|
6
|
+
$unnnic-color-teal-500: #04C8BD;
|
|
7
|
+
$unnnic-color-teal-600: #00A49F;
|
|
8
|
+
$unnnic-color-teal-700: #05807D;
|
|
9
|
+
$unnnic-color-teal-800: #0A6564;
|
|
10
|
+
$unnnic-color-teal-900: #0D5453;
|
|
11
|
+
$unnnic-color-teal-950: #003133;
|
|
12
|
+
|
|
13
|
+
$unnnic-color-gray-950: #23262E;
|
|
14
|
+
$unnnic-color-gray-900: #353945;
|
|
15
|
+
$unnnic-color-gray-800: #3B4151;
|
|
16
|
+
$unnnic-color-gray-700: #454D5F;
|
|
17
|
+
$unnnic-color-gray-600: #545E75;
|
|
18
|
+
$unnnic-color-gray-500: #67738B;
|
|
19
|
+
$unnnic-color-gray-400: #8893A8;
|
|
20
|
+
$unnnic-color-gray-300: #B2B9C7;
|
|
21
|
+
$unnnic-color-gray-200: #D6D9E1;
|
|
22
|
+
$unnnic-color-gray-100: #ECEEF2;
|
|
23
|
+
$unnnic-color-gray-50: #F6F7F9;
|
|
24
|
+
|
|
25
|
+
$unnnic-color-white: #FFFFFF;
|
|
26
|
+
|
|
27
|
+
$unnnic-color-weni-50: $unnnic-color-teal-50;
|
|
28
|
+
$unnnic-color-weni-100: $unnnic-color-teal-100;
|
|
29
|
+
$unnnic-color-weni-200: $unnnic-color-teal-200;
|
|
30
|
+
$unnnic-color-weni-300: $unnnic-color-teal-300;
|
|
31
|
+
$unnnic-color-weni-400: $unnnic-color-teal-400;
|
|
32
|
+
$unnnic-color-weni-500: $unnnic-color-teal-500;
|
|
33
|
+
$unnnic-color-weni-600: $unnnic-color-teal-600;
|
|
34
|
+
$unnnic-color-weni-700: $unnnic-color-teal-700;
|
|
35
|
+
$unnnic-color-weni-800: $unnnic-color-teal-800;
|
|
36
|
+
$unnnic-color-weni-900: $unnnic-color-teal-900;
|
|
37
|
+
$unnnic-color-weni-950: $unnnic-color-teal-950;
|
|
38
|
+
|
|
39
|
+
$unnnic-color-neutral-black: $unnnic-color-gray-900;
|
|
40
|
+
$unnnic-color-neutral-darkest: $unnnic-color-gray-800;
|
|
41
|
+
$unnnic-color-neutral-dark: $unnnic-color-gray-700;
|
|
42
|
+
$unnnic-color-neutral-cloudy: $unnnic-color-gray-500;
|
|
43
|
+
$unnnic-color-neutral-clean: $unnnic-color-gray-300;
|
|
44
|
+
$unnnic-color-neutral-cleanest: $unnnic-color-gray-200;
|
|
45
|
+
$unnnic-color-neutral-soft: $unnnic-color-gray-100;
|
|
46
|
+
$unnnic-color-neutral-light: $unnnic-color-gray-50;
|
|
47
|
+
$unnnic-color-neutral-lightest: $unnnic-color-gray-50;
|
|
48
|
+
$unnnic-color-neutral-white: $unnnic-color-white;
|
|
49
|
+
|
|
50
|
+
$unnnic-color-background-solo: $unnnic-color-teal-50;
|
|
51
|
+
$unnnic-color-background-sky: $unnnic-color-gray-50;
|
|
52
|
+
$unnnic-color-background-grass: $unnnic-color-gray-50;
|
|
53
|
+
$unnnic-color-background-lightest: $unnnic-color-gray-50;
|
|
54
|
+
$unnnic-color-background-white: $unnnic-color-white;
|
|
55
|
+
$unnnic-color-background-soft: #1A1A1A;
|
|
56
|
+
|
|
57
|
+
$unnnic-color-aux-green-50: #F0F9F3;
|
|
58
|
+
$unnnic-color-aux-green-100: #DAF1E0;
|
|
59
|
+
$unnnic-color-aux-green-200: #B7E3C6;
|
|
60
|
+
$unnnic-color-aux-green-300: #88CDA4;
|
|
61
|
+
$unnnic-color-aux-green-400: #56B17E;
|
|
32
62
|
$unnnic-color-aux-green-500: #38A169;
|
|
33
|
-
$unnnic-color-aux-green-
|
|
34
|
-
$unnnic-color-aux-green-
|
|
35
|
-
|
|
36
|
-
$unnnic-color-aux-
|
|
37
|
-
$unnnic-color-aux-
|
|
63
|
+
$unnnic-color-aux-green-600: #24774C;
|
|
64
|
+
$unnnic-color-aux-green-700: #1D5F3F;
|
|
65
|
+
$unnnic-color-aux-green-800: #194C34;
|
|
66
|
+
$unnnic-color-aux-green-900: #153F2C;
|
|
67
|
+
$unnnic-color-aux-green-950: #0B2318;
|
|
68
|
+
|
|
69
|
+
$unnnic-color-aux-blue-50: #F2F7FD;
|
|
70
|
+
$unnnic-color-aux-blue-100: #E5EEF9;
|
|
71
|
+
$unnnic-color-aux-blue-200: #C4DBF3;
|
|
72
|
+
$unnnic-color-aux-blue-300: #90BDE9;
|
|
73
|
+
$unnnic-color-aux-blue-400: #559BDB;
|
|
38
74
|
$unnnic-color-aux-blue-500: #3182CE;
|
|
39
|
-
$unnnic-color-aux-blue-
|
|
40
|
-
$unnnic-color-aux-blue-
|
|
41
|
-
|
|
42
|
-
$unnnic-color-aux-
|
|
43
|
-
$unnnic-color-aux-
|
|
44
|
-
|
|
45
|
-
$unnnic-color-aux-purple-
|
|
46
|
-
$unnnic-color-aux-purple-
|
|
47
|
-
|
|
48
|
-
$unnnic-color-aux-
|
|
49
|
-
$unnnic-color-aux-
|
|
50
|
-
$unnnic-color-aux-
|
|
51
|
-
$unnnic-color-aux-
|
|
52
|
-
$unnnic-color-aux-
|
|
53
|
-
|
|
54
|
-
$unnnic-color-aux-
|
|
55
|
-
$unnnic-color-aux-
|
|
56
|
-
|
|
57
|
-
$unnnic-color-aux-
|
|
58
|
-
$unnnic-color-aux-
|
|
59
|
-
|
|
60
|
-
$unnnic-color-aux-
|
|
61
|
-
$unnnic-color-aux-
|
|
62
|
-
$unnnic-color-aux-
|
|
63
|
-
$unnnic-color-aux-
|
|
64
|
-
$unnnic-color-aux-
|
|
75
|
+
$unnnic-color-aux-blue-600: #3182CE;
|
|
76
|
+
$unnnic-color-aux-blue-700: #1B4F89;
|
|
77
|
+
$unnnic-color-aux-blue-800: #1A4472;
|
|
78
|
+
$unnnic-color-aux-blue-900: #1B3A5F;
|
|
79
|
+
$unnnic-color-aux-blue-950: #12253F;
|
|
80
|
+
|
|
81
|
+
$unnnic-color-aux-purple-50: #F6F5FD;
|
|
82
|
+
$unnnic-color-aux-purple-100: #EEECFB;
|
|
83
|
+
$unnnic-color-aux-purple-200: #DFDCF8;
|
|
84
|
+
$unnnic-color-aux-purple-300: #C7BFF3;
|
|
85
|
+
$unnnic-color-aux-purple-400: #AA9BEA;
|
|
86
|
+
$unnnic-color-aux-purple-500: #8D72E0;
|
|
87
|
+
$unnnic-color-aux-purple-600: #805AD5;
|
|
88
|
+
$unnnic-color-aux-purple-700: #6B41C0;
|
|
89
|
+
$unnnic-color-aux-purple-800: #5A36A1;
|
|
90
|
+
$unnnic-color-aux-purple-900: #4B2E84;
|
|
91
|
+
$unnnic-color-aux-purple-950: #2E1C59;
|
|
92
|
+
|
|
93
|
+
$unnnic-color-aux-red-50: #F6F5FD;
|
|
94
|
+
$unnnic-color-aux-red-100: #EEECFB;
|
|
95
|
+
$unnnic-color-aux-red-200: #DFDCF8;
|
|
96
|
+
$unnnic-color-aux-red-300: #C7BFF3;
|
|
97
|
+
$unnnic-color-aux-red-400: #AA9BEA;
|
|
98
|
+
$unnnic-color-aux-red-500: #8D72E0;
|
|
99
|
+
$unnnic-color-aux-red-600: #805AD5;
|
|
100
|
+
$unnnic-color-aux-red-700: #6B41C0;
|
|
101
|
+
$unnnic-color-aux-red-800: #5A36A1;
|
|
102
|
+
$unnnic-color-aux-red-900: #4B2E84;
|
|
103
|
+
$unnnic-color-aux-red-950: #2E1C59;
|
|
104
|
+
|
|
105
|
+
$unnnic-color-aux-orange-50: #FDF8EF;
|
|
106
|
+
$unnnic-color-aux-orange-100: #FBEED9;
|
|
107
|
+
$unnnic-color-aux-orange-200: #F7DAB1;
|
|
108
|
+
$unnnic-color-aux-orange-300: #F1C080;
|
|
109
|
+
$unnnic-color-aux-orange-400: #EB9D4C;
|
|
110
|
+
$unnnic-color-aux-orange-500: #E5812A;
|
|
111
|
+
$unnnic-color-aux-orange-600: #DD6B20;
|
|
112
|
+
$unnnic-color-aux-orange-700: #B2501C;
|
|
113
|
+
$unnnic-color-aux-orange-800: #8E401E;
|
|
114
|
+
$unnnic-color-aux-orange-900: #73361B;
|
|
115
|
+
$unnnic-color-aux-orange-950: #3E1A0C;
|
|
116
|
+
|
|
117
|
+
$unnnic-color-aux-yellow-50: #FBF7EB;
|
|
118
|
+
$unnnic-color-aux-yellow-100: #F5EDCC;
|
|
119
|
+
$unnnic-color-aux-yellow-200: #EDD89B;
|
|
120
|
+
$unnnic-color-aux-yellow-300: #E2BC62;
|
|
121
|
+
$unnnic-color-aux-yellow-400: #D69E2E;
|
|
122
|
+
$unnnic-color-aux-yellow-500: #C88D2A;
|
|
123
|
+
$unnnic-color-aux-yellow-600: #AC6E22;
|
|
124
|
+
$unnnic-color-aux-yellow-700: #8A501E;
|
|
125
|
+
$unnnic-color-aux-yellow-800: #734120;
|
|
126
|
+
$unnnic-color-aux-yellow-900: #633720;
|
|
127
|
+
$unnnic-color-aux-yellow-950: #391B0F;
|
|
65
128
|
|
|
66
129
|
$unnnic-color-floweditor-blue: #0080A3;
|
|
67
130
|
$unnnic-color-floweditor-purple: #7A00A3;
|
|
68
131
|
$unnnic-color-floweditor-wine: #A3006A;
|
|
69
132
|
$unnnic-color-floweditor-orange: #F99707;
|
|
70
133
|
$unnnic-color-floweditor-pink: #DE16BA;
|
|
71
|
-
$unnnic-color-floweditor-turquoise: $unnnic-color-
|
|
134
|
+
$unnnic-color-floweditor-turquoise: $unnnic-color-teal-500;
|
|
72
135
|
$unnnic-color-floweditor-green: #00A339;
|
|
73
136
|
|
|
74
137
|
/* Background */
|
|
@@ -99,9 +162,9 @@ $unnnic-color-aux-baby-green: #B2FCA6;
|
|
|
99
162
|
$unnnic-color-aux-baby-pink: #FFCBF6;
|
|
100
163
|
|
|
101
164
|
/* Brand */
|
|
102
|
-
$unnnic-color-brand-weni: $unnnic-color-
|
|
103
|
-
$unnnic-color-brand-weni-dark: $unnnic-color-
|
|
104
|
-
$unnnic-color-brand-weni-soft: $unnnic-color-
|
|
165
|
+
$unnnic-color-brand-weni: $unnnic-color-teal-600;
|
|
166
|
+
$unnnic-color-brand-weni-dark: $unnnic-color-teal-800;
|
|
167
|
+
$unnnic-color-brand-weni-soft: $unnnic-color-teal-600;
|
|
105
168
|
$unnnic-color-brand-sec-dark: $unnnic-color-neutral-black;
|
|
106
169
|
$unnnic-color-brand-sec-soft: $unnnic-color-neutral-dark;
|
|
107
170
|
$unnnic-color-brand-sec: $unnnic-color-neutral-cleanest;
|
|
@@ -152,41 +215,77 @@ $scheme-colors:
|
|
|
152
215
|
"aux-baby-green" $unnnic-color-aux-baby-green,
|
|
153
216
|
"aux-baby-pink" $unnnic-color-aux-baby-pink,
|
|
154
217
|
|
|
218
|
+
"aux-green-50" $unnnic-color-aux-green-50,
|
|
155
219
|
"aux-green-100" $unnnic-color-aux-green-100,
|
|
220
|
+
"aux-green-200" $unnnic-color-aux-green-200,
|
|
156
221
|
"aux-green-300" $unnnic-color-aux-green-300,
|
|
222
|
+
"aux-green-400" $unnnic-color-aux-green-400,
|
|
157
223
|
"aux-green-500" $unnnic-color-aux-green-500,
|
|
224
|
+
"aux-green-600" $unnnic-color-aux-green-600,
|
|
158
225
|
"aux-green-700" $unnnic-color-aux-green-700,
|
|
226
|
+
"aux-green-800" $unnnic-color-aux-green-800,
|
|
159
227
|
"aux-green-900" $unnnic-color-aux-green-900,
|
|
228
|
+
"aux-green-950" $unnnic-color-aux-green-950,
|
|
160
229
|
|
|
230
|
+
"aux-blue-50" $unnnic-color-aux-blue-50,
|
|
161
231
|
"aux-blue-100" $unnnic-color-aux-blue-100,
|
|
232
|
+
"aux-blue-200" $unnnic-color-aux-blue-200,
|
|
162
233
|
"aux-blue-300" $unnnic-color-aux-blue-300,
|
|
234
|
+
"aux-blue-400" $unnnic-color-aux-blue-400,
|
|
163
235
|
"aux-blue-500" $unnnic-color-aux-blue-500,
|
|
236
|
+
"aux-blue-600" $unnnic-color-aux-blue-600,
|
|
164
237
|
"aux-blue-700" $unnnic-color-aux-blue-700,
|
|
238
|
+
"aux-blue-800" $unnnic-color-aux-blue-800,
|
|
165
239
|
"aux-blue-900" $unnnic-color-aux-blue-900,
|
|
240
|
+
"aux-blue-950" $unnnic-color-aux-blue-950,
|
|
166
241
|
|
|
242
|
+
"aux-purple-50" $unnnic-color-aux-purple-50,
|
|
167
243
|
"aux-purple-100" $unnnic-color-aux-purple-100,
|
|
244
|
+
"aux-purple-200" $unnnic-color-aux-purple-200,
|
|
168
245
|
"aux-purple-300" $unnnic-color-aux-purple-300,
|
|
246
|
+
"aux-purple-400" $unnnic-color-aux-purple-400,
|
|
169
247
|
"aux-purple-500" $unnnic-color-aux-purple-500,
|
|
248
|
+
"aux-purple-600" $unnnic-color-aux-purple-600,
|
|
170
249
|
"aux-purple-700" $unnnic-color-aux-purple-700,
|
|
250
|
+
"aux-purple-800" $unnnic-color-aux-purple-800,
|
|
171
251
|
"aux-purple-900" $unnnic-color-aux-purple-900,
|
|
252
|
+
"aux-purple-950" $unnnic-color-aux-purple-950,
|
|
172
253
|
|
|
254
|
+
"aux-red-50" $unnnic-color-aux-red-50,
|
|
173
255
|
"aux-red-100" $unnnic-color-aux-red-100,
|
|
256
|
+
"aux-red-200" $unnnic-color-aux-red-200,
|
|
174
257
|
"aux-red-300" $unnnic-color-aux-red-300,
|
|
258
|
+
"aux-red-400" $unnnic-color-aux-red-400,
|
|
175
259
|
"aux-red-500" $unnnic-color-aux-red-500,
|
|
260
|
+
"aux-red-600" $unnnic-color-aux-red-600,
|
|
176
261
|
"aux-red-700" $unnnic-color-aux-red-700,
|
|
262
|
+
"aux-red-800" $unnnic-color-aux-red-800,
|
|
177
263
|
"aux-red-900" $unnnic-color-aux-red-900,
|
|
264
|
+
"aux-red-950" $unnnic-color-aux-red-950,
|
|
178
265
|
|
|
266
|
+
"aux-orange-50" $unnnic-color-aux-orange-50,
|
|
179
267
|
"aux-orange-100" $unnnic-color-aux-orange-100,
|
|
268
|
+
"aux-orange-200" $unnnic-color-aux-orange-200,
|
|
180
269
|
"aux-orange-300" $unnnic-color-aux-orange-300,
|
|
270
|
+
"aux-orange-400" $unnnic-color-aux-orange-400,
|
|
181
271
|
"aux-orange-500" $unnnic-color-aux-orange-500,
|
|
272
|
+
"aux-orange-600" $unnnic-color-aux-orange-600,
|
|
182
273
|
"aux-orange-700" $unnnic-color-aux-orange-700,
|
|
274
|
+
"aux-orange-800" $unnnic-color-aux-orange-800,
|
|
183
275
|
"aux-orange-900" $unnnic-color-aux-orange-900,
|
|
276
|
+
"aux-orange-950" $unnnic-color-aux-orange-950,
|
|
184
277
|
|
|
278
|
+
"aux-yellow-50" $unnnic-color-aux-yellow-50,
|
|
185
279
|
"aux-yellow-100" $unnnic-color-aux-yellow-100,
|
|
280
|
+
"aux-yellow-200" $unnnic-color-aux-yellow-200,
|
|
186
281
|
"aux-yellow-300" $unnnic-color-aux-yellow-300,
|
|
282
|
+
"aux-yellow-400" $unnnic-color-aux-yellow-400,
|
|
187
283
|
"aux-yellow-500" $unnnic-color-aux-yellow-500,
|
|
284
|
+
"aux-yellow-600" $unnnic-color-aux-yellow-600,
|
|
188
285
|
"aux-yellow-700" $unnnic-color-aux-yellow-700,
|
|
286
|
+
"aux-yellow-800" $unnnic-color-aux-yellow-800,
|
|
189
287
|
"aux-yellow-900" $unnnic-color-aux-yellow-900,
|
|
288
|
+
"aux-yellow-950" $unnnic-color-aux-yellow-950,
|
|
190
289
|
|
|
191
290
|
"floweditor-blue" $unnnic-color-floweditor-blue,
|
|
192
291
|
"floweditor-purple" $unnnic-color-floweditor-purple,
|
|
@@ -209,12 +308,65 @@ $scheme-colors:
|
|
|
209
308
|
"weni-900" $unnnic-color-weni-900,
|
|
210
309
|
"weni-950" $unnnic-color-weni-950,
|
|
211
310
|
|
|
311
|
+
"teal-50" $unnnic-color-teal-50,
|
|
312
|
+
"teal-100" $unnnic-color-teal-100,
|
|
313
|
+
"teal-200" $unnnic-color-teal-200,
|
|
314
|
+
"teal-300" $unnnic-color-teal-300,
|
|
315
|
+
"teal-400" $unnnic-color-teal-400,
|
|
316
|
+
"teal-500" $unnnic-color-teal-500,
|
|
317
|
+
"teal-600" $unnnic-color-teal-600,
|
|
318
|
+
"teal-700" $unnnic-color-teal-700,
|
|
319
|
+
"teal-800" $unnnic-color-teal-800,
|
|
320
|
+
"teal-900" $unnnic-color-teal-900,
|
|
321
|
+
"teal-950" $unnnic-color-teal-950,
|
|
322
|
+
|
|
323
|
+
"gray-50" $unnnic-color-gray-50,
|
|
324
|
+
"gray-100" $unnnic-color-gray-100,
|
|
325
|
+
"gray-200" $unnnic-color-gray-200,
|
|
326
|
+
"gray-300" $unnnic-color-gray-300,
|
|
327
|
+
"gray-400" $unnnic-color-gray-400,
|
|
328
|
+
"gray-500" $unnnic-color-gray-500,
|
|
329
|
+
"gray-600" $unnnic-color-gray-600,
|
|
330
|
+
"gray-700" $unnnic-color-gray-700,
|
|
331
|
+
"gray-800" $unnnic-color-gray-800,
|
|
332
|
+
"gray-900" $unnnic-color-gray-900,
|
|
333
|
+
"gray-950" $unnnic-color-gray-950,
|
|
334
|
+
|
|
212
335
|
"brand-weni" $unnnic-color-brand-weni,
|
|
213
336
|
"brand-weni-dark" $unnnic-color-brand-weni-dark,
|
|
214
337
|
"brand-weni-soft" $unnnic-color-brand-weni-soft,
|
|
215
338
|
"brand-sec-dark" $unnnic-color-brand-sec-dark,
|
|
216
339
|
"brand-sec-soft" $unnnic-color-brand-sec-soft,
|
|
217
|
-
"brand-sec" $unnnic-color-brand-sec
|
|
340
|
+
"brand-sec" $unnnic-color-brand-sec,
|
|
341
|
+
|
|
342
|
+
// Background semantic colors
|
|
343
|
+
"bg-base" $unnnic-color-white,
|
|
344
|
+
"bg-soft" $unnnic-color-gray-50,
|
|
345
|
+
"bg-muted" $unnnic-color-gray-200,
|
|
346
|
+
"bg-info" $unnnic-color-aux-blue-50,
|
|
347
|
+
"bg-success" $unnnic-color-aux-green-50,
|
|
348
|
+
"bg-warning" $unnnic-color-aux-yellow-50,
|
|
349
|
+
"bg-critical" $unnnic-color-aux-red-50,
|
|
350
|
+
|
|
351
|
+
// Text semantic colors
|
|
352
|
+
"text-base" $unnnic-color-gray-900,
|
|
353
|
+
"text-muted" $unnnic-color-gray-500,
|
|
354
|
+
"text-emphasized" $unnnic-color-gray-950,
|
|
355
|
+
"text-inverted" $unnnic-color-teal-500,
|
|
356
|
+
"text-info" $unnnic-color-aux-blue-500,
|
|
357
|
+
"text-success" $unnnic-color-aux-green-500,
|
|
358
|
+
"text-warning" $unnnic-color-aux-yellow-600,
|
|
359
|
+
"text-critical" $unnnic-color-aux-red-500,
|
|
360
|
+
|
|
361
|
+
// Border semantic colors
|
|
362
|
+
"border-base" $unnnic-color-gray-200,
|
|
363
|
+
"border-soft" $unnnic-color-gray-100,
|
|
364
|
+
"border-muted" $unnnic-color-gray-300,
|
|
365
|
+
"border-emphasized" $unnnic-color-gray-400,
|
|
366
|
+
"border-info" $unnnic-color-aux-blue-300,
|
|
367
|
+
"border-success" $unnnic-color-aux-green-300,
|
|
368
|
+
"border-warning" $unnnic-color-aux-yellow-300,
|
|
369
|
+
"border-critical" $unnnic-color-aux-red-300;
|
|
218
370
|
|
|
219
371
|
|
|
220
372
|
@each $name, $color in $scheme-colors {
|
|
@@ -10,6 +10,7 @@ $unnnic-font-family-secondary: Lato;
|
|
|
10
10
|
// Font weight
|
|
11
11
|
$unnnic-font-weight-black: 900;
|
|
12
12
|
$unnnic-font-weight-bold: 700;
|
|
13
|
+
$unnnic-font-weight-medium: 500;
|
|
13
14
|
$unnnic-font-weight-regular: 400;
|
|
14
15
|
$unnnic-font-weight-light: 300;
|
|
15
16
|
|
|
@@ -35,6 +36,28 @@ $unnnic-line-height-medium: 0.5 * $unnnic-font-size;
|
|
|
35
36
|
$unnnic-line-height-md: $unnnic-line-height-medium;
|
|
36
37
|
$unnnic-line-height-large: 1 * $unnnic-font-size;
|
|
37
38
|
|
|
39
|
+
// New typography tokens
|
|
40
|
+
$unnnic-text-display-1: 1.5 * $unnnic-font-size; // 24px
|
|
41
|
+
$unnnic-text-display-2: 1.25 * $unnnic-font-size; // 20px
|
|
42
|
+
$unnnic-text-display-3: 1 * $unnnic-font-size; // 16px
|
|
43
|
+
$unnnic-text-display-4: 1 * $unnnic-font-size; // 16px
|
|
44
|
+
$unnnic-text-body: 0.875 * $unnnic-font-size; // 14px
|
|
45
|
+
$unnnic-text-emphasis: 0.875 * $unnnic-font-size; // 14px
|
|
46
|
+
$unnnic-text-action: 0.875 * $unnnic-font-size; // 14px
|
|
47
|
+
$unnnic-text-caption-1: 0.75 * $unnnic-font-size; // 12px
|
|
48
|
+
$unnnic-text-caption-2: 0.75 * $unnnic-font-size; // 12px
|
|
49
|
+
|
|
50
|
+
// Typography line heights
|
|
51
|
+
$unnnic-line-height-display-1: 2 * $unnnic-font-size; // 32px
|
|
52
|
+
$unnnic-line-height-display-2: 1.6875 * $unnnic-font-size; // 27px
|
|
53
|
+
$unnnic-line-height-display-3: 1.375 * $unnnic-font-size; // 22px
|
|
54
|
+
$unnnic-line-height-display-4: 1.375 * $unnnic-font-size; // 22px
|
|
55
|
+
$unnnic-line-height-body: 1.3125 * $unnnic-font-size; // 21px
|
|
56
|
+
$unnnic-line-height-emphasis: 1.3125 * $unnnic-font-size; // 21px
|
|
57
|
+
$unnnic-line-height-action: 1.3125 * $unnnic-font-size; // 21px
|
|
58
|
+
$unnnic-line-height-caption-1: 1.125 * $unnnic-font-size; // 18px
|
|
59
|
+
$unnnic-line-height-caption-2: 1.125 * $unnnic-font-size; // 18px
|
|
60
|
+
|
|
38
61
|
.unnnic-font {
|
|
39
62
|
font-weight: $unnnic-font-weight-regular;
|
|
40
63
|
font-family: $unnnic-font-family-primary;
|
|
@@ -8,6 +8,14 @@ $unnnic-icon-size-ant: 1.25 * fonts.$unnnic-font-size;
|
|
|
8
8
|
$unnnic-icon-size-sm: 1 * fonts.$unnnic-font-size;
|
|
9
9
|
$unnnic-icon-size-xs: 0.75 * fonts.$unnnic-font-size;
|
|
10
10
|
|
|
11
|
+
// New icon size tokens
|
|
12
|
+
$unnnic-icon-size-3: 0.75 * fonts.$unnnic-font-size; // 12px
|
|
13
|
+
$unnnic-icon-size-4: 1 * fonts.$unnnic-font-size; // 16px
|
|
14
|
+
$unnnic-icon-size-5: 1.25 * fonts.$unnnic-font-size; // 20px
|
|
15
|
+
$unnnic-icon-size-6: 1.5 * fonts.$unnnic-font-size; // 24px
|
|
16
|
+
$unnnic-icon-size-7: 2 * fonts.$unnnic-font-size; // 32px
|
|
17
|
+
$unnnic-icon-size-10: 2.5 * fonts.$unnnic-font-size; // 40px
|
|
18
|
+
|
|
11
19
|
// Avatar size
|
|
12
20
|
$unnnic-avatar-size-lg: 6.5 * fonts.$unnnic-font-size;
|
|
13
21
|
$unnnic-avatar-size-md: 4.5 * fonts.$unnnic-font-size;
|
|
@@ -21,6 +29,14 @@ $unnnic-border-radius-md: 0.5 * fonts.$unnnic-font-size;
|
|
|
21
29
|
$unnnic-border-radius-lg: 1 * fonts.$unnnic-font-size;
|
|
22
30
|
$unnnic-border-radius-pill: 37.5 * fonts.$unnnic-font-size;
|
|
23
31
|
|
|
32
|
+
// New border radius tokens
|
|
33
|
+
$unnnic-border-radius-0: 0;
|
|
34
|
+
$unnnic-border-radius-2: 0.25 * fonts.$unnnic-font-size; // 4px
|
|
35
|
+
$unnnic-border-radius-4: 0.5 * fonts.$unnnic-font-size; // 8px
|
|
36
|
+
$unnnic-border-radius-6: 0.75 * fonts.$unnnic-font-size; // 12px
|
|
37
|
+
$unnnic-border-radius-8: 1 * fonts.$unnnic-font-size; // 16px
|
|
38
|
+
$unnnic-border-radius-full: 100%; // 100% rounded
|
|
39
|
+
|
|
24
40
|
// Border width
|
|
25
41
|
$unnnic-border-width-thinner: 0.0625 * fonts.$unnnic-font-size;
|
|
26
42
|
$unnnic-border-width-thin: 0.125 * fonts.$unnnic-font-size;
|
|
@@ -32,6 +48,10 @@ $unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
|
|
|
32
48
|
$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
|
|
33
49
|
$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
|
|
34
50
|
|
|
51
|
+
// New shadow levels
|
|
52
|
+
$unnnic-shadow-1: 0px 4px 8px rgba(0, 0, 0, .16);
|
|
53
|
+
$unnnic-shadow-2: 0px 24px 48px rgba(0, 0, 0, .16);
|
|
54
|
+
|
|
35
55
|
// Opacity levels
|
|
36
56
|
$unnnic-opacity-level-darkest: 0.8;
|
|
37
57
|
$unnnic-opacity-level-dark: 0.64;
|
|
@@ -53,6 +73,22 @@ $unnnic-spacing-giant: 3 * fonts.$unnnic-font-size;
|
|
|
53
73
|
$unnnic-spacing-xgiant: 4 * fonts.$unnnic-font-size;
|
|
54
74
|
$unnnic-spacing-awesome: 5 * fonts.$unnnic-font-size;
|
|
55
75
|
|
|
76
|
+
// New spacing tokens
|
|
77
|
+
$unnnic-space-0: 0;
|
|
78
|
+
$unnnic-space-05: 0.125 * fonts.$unnnic-font-size; // 2px
|
|
79
|
+
$unnnic-space-1: 0.25 * fonts.$unnnic-font-size; // 4px
|
|
80
|
+
$unnnic-space-2: 0.5 * fonts.$unnnic-font-size; // 8px
|
|
81
|
+
$unnnic-space-3: 0.75 * fonts.$unnnic-font-size; // 12px
|
|
82
|
+
$unnnic-space-4: 1 * fonts.$unnnic-font-size; // 16px
|
|
83
|
+
$unnnic-space-5: 1.25 * fonts.$unnnic-font-size; // 20px
|
|
84
|
+
$unnnic-space-6: 1.5 * fonts.$unnnic-font-size; // 24px
|
|
85
|
+
$unnnic-space-7: 1.75 * fonts.$unnnic-font-size; // 28px
|
|
86
|
+
$unnnic-space-8: 2 * fonts.$unnnic-font-size; // 32px
|
|
87
|
+
$unnnic-space-10: 2.5 * fonts.$unnnic-font-size; // 40px
|
|
88
|
+
$unnnic-space-12: 3 * fonts.$unnnic-font-size; // 48px
|
|
89
|
+
$unnnic-space-16: 4 * fonts.$unnnic-font-size; // 64px
|
|
90
|
+
$unnnic-space-20: 5 * fonts.$unnnic-font-size; // 80px
|
|
91
|
+
|
|
56
92
|
$unnnic-inset-nano: $unnnic-spacing-xs;
|
|
57
93
|
$unnnic-inset-xs: $unnnic-spacing-ant;
|
|
58
94
|
$unnnic-inset-sm: $unnnic-spacing-sm;
|