@weni/unnnic-system 3.35.1-alpha.7 → 3.35.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/package.json +4 -7
- package/dist/scss/colors-hsl.scss +0 -179
- package/dist/scss/colors.scss +0 -134
- package/dist/scss/deprecated/colors.scss +0 -436
- package/dist/scss/deprecated/fonts.scss +0 -140
- package/dist/scss/deprecated/grid.scss +0 -52
- package/dist/scss/deprecated/spacing.scss +0 -103
- package/dist/scss/fonts.scss +0 -73
- package/dist/scss/icon-sizes.scss +0 -9
- package/dist/scss/radii.scss +0 -9
- package/dist/scss/scheme-colors.scss +0 -418
- package/dist/scss/semantic-colors.scss +0 -48
- package/dist/scss/semantic-text-utilities.scss +0 -26
- package/dist/scss/shadows.scss +0 -5
- package/dist/scss/spaces.scss +0 -17
- package/dist/scss/tailwind.scss +0 -104
- package/dist/scss/theme.scss +0 -98
- package/dist/scss/unnnic.scss +0 -20
|
@@ -1,436 +0,0 @@
|
|
|
1
|
-
@use '../colors' as *;
|
|
2
|
-
@use '../semantic-colors' as *;
|
|
3
|
-
|
|
4
|
-
// ============================================================
|
|
5
|
-
// Old primitive tokens (50-950 scale) mapped to new Shoreline (1-13)
|
|
6
|
-
// Mapping: 50->1, 100->2, 200->4, 300->5, 400->6, 500->7,
|
|
7
|
-
// 600->8, 700->10, 800->12, 900->13, 950->13
|
|
8
|
-
// ============================================================
|
|
9
|
-
|
|
10
|
-
$unnnic-color-white: $unnnic-color-gray-0;
|
|
11
|
-
$unnnic-color-black: $unnnic-color-gray-13;
|
|
12
|
-
|
|
13
|
-
$unnnic-color-gray-50: $unnnic-color-gray-1;
|
|
14
|
-
$unnnic-color-gray-100: $unnnic-color-gray-2;
|
|
15
|
-
$unnnic-color-gray-200: $unnnic-color-gray-4;
|
|
16
|
-
$unnnic-color-gray-300: $unnnic-color-gray-5;
|
|
17
|
-
$unnnic-color-gray-400: $unnnic-color-gray-6;
|
|
18
|
-
$unnnic-color-gray-500: $unnnic-color-gray-7;
|
|
19
|
-
$unnnic-color-gray-600: $unnnic-color-gray-8;
|
|
20
|
-
$unnnic-color-gray-700: $unnnic-color-gray-10;
|
|
21
|
-
$unnnic-color-gray-800: $unnnic-color-gray-12;
|
|
22
|
-
$unnnic-color-gray-900: $unnnic-color-gray-13;
|
|
23
|
-
$unnnic-color-gray-950: $unnnic-color-gray-13;
|
|
24
|
-
|
|
25
|
-
$unnnic-color-teal-50: $unnnic-color-teal-1;
|
|
26
|
-
$unnnic-color-teal-100: $unnnic-color-teal-2;
|
|
27
|
-
$unnnic-color-teal-200: $unnnic-color-teal-4;
|
|
28
|
-
$unnnic-color-teal-300: $unnnic-color-teal-5;
|
|
29
|
-
$unnnic-color-teal-400: $unnnic-color-teal-6;
|
|
30
|
-
$unnnic-color-teal-500: $unnnic-color-teal-7;
|
|
31
|
-
$unnnic-color-teal-600: $unnnic-color-teal-8;
|
|
32
|
-
$unnnic-color-teal-700: $unnnic-color-teal-10;
|
|
33
|
-
$unnnic-color-teal-800: $unnnic-color-teal-12;
|
|
34
|
-
$unnnic-color-teal-900: $unnnic-color-teal-13;
|
|
35
|
-
$unnnic-color-teal-950: $unnnic-color-teal-13;
|
|
36
|
-
|
|
37
|
-
$unnnic-color-green-50: $unnnic-color-green-1;
|
|
38
|
-
$unnnic-color-green-100: $unnnic-color-green-2;
|
|
39
|
-
$unnnic-color-green-200: $unnnic-color-green-4;
|
|
40
|
-
$unnnic-color-green-300: $unnnic-color-green-5;
|
|
41
|
-
$unnnic-color-green-400: $unnnic-color-green-6;
|
|
42
|
-
$unnnic-color-green-500: $unnnic-color-green-7;
|
|
43
|
-
$unnnic-color-green-600: $unnnic-color-green-8;
|
|
44
|
-
$unnnic-color-green-700: $unnnic-color-green-10;
|
|
45
|
-
$unnnic-color-green-800: $unnnic-color-green-12;
|
|
46
|
-
$unnnic-color-green-900: $unnnic-color-green-13;
|
|
47
|
-
$unnnic-color-green-950: $unnnic-color-green-13;
|
|
48
|
-
|
|
49
|
-
$unnnic-color-blue-50: $unnnic-color-blue-1;
|
|
50
|
-
$unnnic-color-blue-100: $unnnic-color-blue-2;
|
|
51
|
-
$unnnic-color-blue-200: $unnnic-color-blue-4;
|
|
52
|
-
$unnnic-color-blue-300: $unnnic-color-blue-5;
|
|
53
|
-
$unnnic-color-blue-400: $unnnic-color-blue-6;
|
|
54
|
-
$unnnic-color-blue-500: $unnnic-color-blue-7;
|
|
55
|
-
$unnnic-color-blue-600: $unnnic-color-blue-8;
|
|
56
|
-
$unnnic-color-blue-700: $unnnic-color-blue-10;
|
|
57
|
-
$unnnic-color-blue-800: $unnnic-color-blue-12;
|
|
58
|
-
$unnnic-color-blue-900: $unnnic-color-blue-13;
|
|
59
|
-
$unnnic-color-blue-950: $unnnic-color-blue-13;
|
|
60
|
-
|
|
61
|
-
$unnnic-color-purple-50: $unnnic-color-purple-1;
|
|
62
|
-
$unnnic-color-purple-100: $unnnic-color-purple-2;
|
|
63
|
-
$unnnic-color-purple-200: $unnnic-color-purple-4;
|
|
64
|
-
$unnnic-color-purple-300: $unnnic-color-purple-5;
|
|
65
|
-
$unnnic-color-purple-400: $unnnic-color-purple-6;
|
|
66
|
-
$unnnic-color-purple-500: $unnnic-color-purple-7;
|
|
67
|
-
$unnnic-color-purple-600: $unnnic-color-purple-8;
|
|
68
|
-
$unnnic-color-purple-700: $unnnic-color-purple-10;
|
|
69
|
-
$unnnic-color-purple-800: $unnnic-color-purple-12;
|
|
70
|
-
$unnnic-color-purple-900: $unnnic-color-purple-13;
|
|
71
|
-
$unnnic-color-purple-950: $unnnic-color-purple-13;
|
|
72
|
-
|
|
73
|
-
$unnnic-color-red-50: $unnnic-color-red-1;
|
|
74
|
-
$unnnic-color-red-100: $unnnic-color-red-2;
|
|
75
|
-
$unnnic-color-red-200: $unnnic-color-red-4;
|
|
76
|
-
$unnnic-color-red-300: $unnnic-color-red-5;
|
|
77
|
-
$unnnic-color-red-400: $unnnic-color-red-6;
|
|
78
|
-
$unnnic-color-red-500: $unnnic-color-red-7;
|
|
79
|
-
$unnnic-color-red-600: $unnnic-color-red-8;
|
|
80
|
-
$unnnic-color-red-700: $unnnic-color-red-10;
|
|
81
|
-
$unnnic-color-red-800: $unnnic-color-red-12;
|
|
82
|
-
$unnnic-color-red-900: $unnnic-color-red-13;
|
|
83
|
-
$unnnic-color-red-950: $unnnic-color-red-13;
|
|
84
|
-
|
|
85
|
-
$unnnic-color-orange-50: $unnnic-color-orange-1;
|
|
86
|
-
$unnnic-color-orange-100: $unnnic-color-orange-2;
|
|
87
|
-
$unnnic-color-orange-200: $unnnic-color-orange-4;
|
|
88
|
-
$unnnic-color-orange-300: $unnnic-color-orange-5;
|
|
89
|
-
$unnnic-color-orange-400: $unnnic-color-orange-6;
|
|
90
|
-
$unnnic-color-orange-500: $unnnic-color-orange-7;
|
|
91
|
-
$unnnic-color-orange-600: $unnnic-color-orange-8;
|
|
92
|
-
$unnnic-color-orange-700: $unnnic-color-orange-10;
|
|
93
|
-
$unnnic-color-orange-800: $unnnic-color-orange-12;
|
|
94
|
-
$unnnic-color-orange-900: $unnnic-color-orange-13;
|
|
95
|
-
$unnnic-color-orange-950: $unnnic-color-orange-13;
|
|
96
|
-
|
|
97
|
-
$unnnic-color-yellow-50: $unnnic-color-yellow-1;
|
|
98
|
-
$unnnic-color-yellow-100: $unnnic-color-yellow-2;
|
|
99
|
-
$unnnic-color-yellow-200: $unnnic-color-yellow-4;
|
|
100
|
-
$unnnic-color-yellow-300: $unnnic-color-yellow-5;
|
|
101
|
-
$unnnic-color-yellow-400: $unnnic-color-yellow-6;
|
|
102
|
-
$unnnic-color-yellow-500: $unnnic-color-yellow-7;
|
|
103
|
-
$unnnic-color-yellow-600: $unnnic-color-yellow-8;
|
|
104
|
-
$unnnic-color-yellow-700: $unnnic-color-yellow-10;
|
|
105
|
-
$unnnic-color-yellow-800: $unnnic-color-yellow-12;
|
|
106
|
-
$unnnic-color-yellow-900: $unnnic-color-yellow-13;
|
|
107
|
-
$unnnic-color-yellow-950: $unnnic-color-yellow-13;
|
|
108
|
-
|
|
109
|
-
// ============================================================
|
|
110
|
-
// Old semantic token aliases -> new names
|
|
111
|
-
// ============================================================
|
|
112
|
-
|
|
113
|
-
$unnnic-color-bg-soft: $unnnic-color-bg-base-soft;
|
|
114
|
-
$unnnic-color-bg-active: $unnnic-color-bg-accent-strong;
|
|
115
|
-
$unnnic-color-fg-active: $unnnic-color-fg-accent;
|
|
116
|
-
$unnnic-color-border-soft: $unnnic-color-border-base;
|
|
117
|
-
$unnnic-color-border-active: $unnnic-color-border-accent-strong;
|
|
118
|
-
|
|
119
|
-
// ============================================================
|
|
120
|
-
// Legacy tokens (older generation)
|
|
121
|
-
// ============================================================
|
|
122
|
-
|
|
123
|
-
$unnnic-color-weni-50: $unnnic-color-teal-50;
|
|
124
|
-
$unnnic-color-weni-100: $unnnic-color-teal-100;
|
|
125
|
-
$unnnic-color-weni-200: $unnnic-color-teal-200;
|
|
126
|
-
$unnnic-color-weni-300: $unnnic-color-teal-300;
|
|
127
|
-
$unnnic-color-weni-400: $unnnic-color-teal-400;
|
|
128
|
-
$unnnic-color-weni-500: $unnnic-color-teal-500;
|
|
129
|
-
$unnnic-color-weni-600: $unnnic-color-teal-600;
|
|
130
|
-
$unnnic-color-weni-700: $unnnic-color-teal-700;
|
|
131
|
-
$unnnic-color-weni-800: $unnnic-color-teal-800;
|
|
132
|
-
$unnnic-color-weni-900: $unnnic-color-teal-900;
|
|
133
|
-
$unnnic-color-weni-950: $unnnic-color-teal-950;
|
|
134
|
-
|
|
135
|
-
$unnnic-color-neutral-black: $unnnic-color-gray-12;
|
|
136
|
-
$unnnic-color-neutral-darkest: $unnnic-color-gray-12;
|
|
137
|
-
$unnnic-color-neutral-dark: $unnnic-color-gray-11;
|
|
138
|
-
$unnnic-color-neutral-cloudy: $unnnic-color-gray-11;
|
|
139
|
-
$unnnic-color-neutral-clean: $unnnic-color-gray-11;
|
|
140
|
-
$unnnic-color-neutral-cleanest: $unnnic-color-gray-7;
|
|
141
|
-
$unnnic-color-neutral-soft: $unnnic-color-gray-3;
|
|
142
|
-
$unnnic-color-neutral-light: $unnnic-color-gray-2;
|
|
143
|
-
$unnnic-color-neutral-lightest: $unnnic-color-gray-1;
|
|
144
|
-
$unnnic-color-neutral-white: $unnnic-color-gray-0;
|
|
145
|
-
|
|
146
|
-
$unnnic-color-background-solo: $unnnic-color-bg-accent-plain;
|
|
147
|
-
$unnnic-color-background-sky: $unnnic-color-bg-base-soft;
|
|
148
|
-
$unnnic-color-background-grass: $unnnic-color-bg-base-soft;
|
|
149
|
-
$unnnic-color-background-lightest: $unnnic-color-bg-base-soft;
|
|
150
|
-
$unnnic-color-background-white: $unnnic-color-bg-base;
|
|
151
|
-
$unnnic-color-background-soft: $unnnic-color-bg-base-soft;
|
|
152
|
-
|
|
153
|
-
$unnnic-color-aux-green-50: $unnnic-color-green-50;
|
|
154
|
-
$unnnic-color-aux-green-100: $unnnic-color-green-100;
|
|
155
|
-
$unnnic-color-aux-green-200: $unnnic-color-green-200;
|
|
156
|
-
$unnnic-color-aux-green-300: $unnnic-color-green-300;
|
|
157
|
-
$unnnic-color-aux-green-400: $unnnic-color-green-400;
|
|
158
|
-
$unnnic-color-aux-green-500: $unnnic-color-green-500;
|
|
159
|
-
$unnnic-color-aux-green-600: $unnnic-color-green-600;
|
|
160
|
-
$unnnic-color-aux-green-700: $unnnic-color-green-700;
|
|
161
|
-
$unnnic-color-aux-green-800: $unnnic-color-green-800;
|
|
162
|
-
$unnnic-color-aux-green-900: $unnnic-color-green-900;
|
|
163
|
-
$unnnic-color-aux-green-950: $unnnic-color-green-950;
|
|
164
|
-
|
|
165
|
-
$unnnic-color-aux-blue-50: $unnnic-color-blue-50;
|
|
166
|
-
$unnnic-color-aux-blue-100: $unnnic-color-blue-100;
|
|
167
|
-
$unnnic-color-aux-blue-200: $unnnic-color-blue-200;
|
|
168
|
-
$unnnic-color-aux-blue-300: $unnnic-color-blue-300;
|
|
169
|
-
$unnnic-color-aux-blue-400: $unnnic-color-blue-400;
|
|
170
|
-
$unnnic-color-aux-blue-500: $unnnic-color-blue-500;
|
|
171
|
-
$unnnic-color-aux-blue-600: $unnnic-color-blue-600;
|
|
172
|
-
$unnnic-color-aux-blue-700: $unnnic-color-blue-700;
|
|
173
|
-
$unnnic-color-aux-blue-800: $unnnic-color-blue-800;
|
|
174
|
-
$unnnic-color-aux-blue-900: $unnnic-color-blue-900;
|
|
175
|
-
$unnnic-color-aux-blue-950: $unnnic-color-blue-950;
|
|
176
|
-
|
|
177
|
-
$unnnic-color-aux-purple-50: $unnnic-color-purple-50;
|
|
178
|
-
$unnnic-color-aux-purple-100: $unnnic-color-purple-100;
|
|
179
|
-
$unnnic-color-aux-purple-200: $unnnic-color-purple-200;
|
|
180
|
-
$unnnic-color-aux-purple-300: $unnnic-color-purple-300;
|
|
181
|
-
$unnnic-color-aux-purple-400: $unnnic-color-purple-400;
|
|
182
|
-
$unnnic-color-aux-purple-500: $unnnic-color-purple-500;
|
|
183
|
-
$unnnic-color-aux-purple-600: $unnnic-color-purple-600;
|
|
184
|
-
$unnnic-color-aux-purple-700: $unnnic-color-purple-700;
|
|
185
|
-
$unnnic-color-aux-purple-800: $unnnic-color-purple-800;
|
|
186
|
-
$unnnic-color-aux-purple-900: $unnnic-color-purple-900;
|
|
187
|
-
$unnnic-color-aux-purple-950: $unnnic-color-purple-950;
|
|
188
|
-
|
|
189
|
-
$unnnic-color-aux-red-50: $unnnic-color-red-50;
|
|
190
|
-
$unnnic-color-aux-red-100: $unnnic-color-red-100;
|
|
191
|
-
$unnnic-color-aux-red-200: $unnnic-color-red-200;
|
|
192
|
-
$unnnic-color-aux-red-300: $unnnic-color-red-300;
|
|
193
|
-
$unnnic-color-aux-red-400: $unnnic-color-red-400;
|
|
194
|
-
$unnnic-color-aux-red-500: $unnnic-color-red-500;
|
|
195
|
-
$unnnic-color-aux-red-600: $unnnic-color-red-600;
|
|
196
|
-
$unnnic-color-aux-red-700: $unnnic-color-red-700;
|
|
197
|
-
$unnnic-color-aux-red-800: $unnnic-color-red-800;
|
|
198
|
-
$unnnic-color-aux-red-900: $unnnic-color-red-900;
|
|
199
|
-
$unnnic-color-aux-red-950: $unnnic-color-red-950;
|
|
200
|
-
|
|
201
|
-
$unnnic-color-aux-orange-50: $unnnic-color-orange-50;
|
|
202
|
-
$unnnic-color-aux-orange-100: $unnnic-color-orange-100;
|
|
203
|
-
$unnnic-color-aux-orange-200: $unnnic-color-orange-200;
|
|
204
|
-
$unnnic-color-aux-orange-300: $unnnic-color-orange-300;
|
|
205
|
-
$unnnic-color-aux-orange-400: $unnnic-color-orange-400;
|
|
206
|
-
$unnnic-color-aux-orange-500: $unnnic-color-orange-500;
|
|
207
|
-
$unnnic-color-aux-orange-600: $unnnic-color-orange-600;
|
|
208
|
-
$unnnic-color-aux-orange-700: $unnnic-color-orange-700;
|
|
209
|
-
$unnnic-color-aux-orange-800: $unnnic-color-orange-800;
|
|
210
|
-
$unnnic-color-aux-orange-900: $unnnic-color-orange-900;
|
|
211
|
-
$unnnic-color-aux-orange-950: $unnnic-color-orange-950;
|
|
212
|
-
|
|
213
|
-
$unnnic-color-aux-yellow-50: $unnnic-color-yellow-50;
|
|
214
|
-
$unnnic-color-aux-yellow-100: $unnnic-color-yellow-100;
|
|
215
|
-
$unnnic-color-aux-yellow-200: $unnnic-color-yellow-200;
|
|
216
|
-
$unnnic-color-aux-yellow-300: $unnnic-color-yellow-300;
|
|
217
|
-
$unnnic-color-aux-yellow-400: $unnnic-color-yellow-400;
|
|
218
|
-
$unnnic-color-aux-yellow-500: $unnnic-color-yellow-500;
|
|
219
|
-
$unnnic-color-aux-yellow-600: $unnnic-color-yellow-600;
|
|
220
|
-
$unnnic-color-aux-yellow-700: $unnnic-color-yellow-700;
|
|
221
|
-
$unnnic-color-aux-yellow-800: $unnnic-color-yellow-800;
|
|
222
|
-
$unnnic-color-aux-yellow-900: $unnnic-color-yellow-900;
|
|
223
|
-
$unnnic-color-aux-yellow-950: $unnnic-color-yellow-950;
|
|
224
|
-
|
|
225
|
-
$unnnic-color-floweditor-blue: $unnnic-color-cyan-10;
|
|
226
|
-
$unnnic-color-floweditor-purple: $unnnic-color-purple-11;
|
|
227
|
-
$unnnic-color-floweditor-wine: $unnnic-color-pink-11;
|
|
228
|
-
$unnnic-color-floweditor-orange: $unnnic-color-orange-7;
|
|
229
|
-
$unnnic-color-floweditor-pink: $unnnic-color-pink-10;
|
|
230
|
-
$unnnic-color-floweditor-turquoise: $unnnic-color-teal-7;
|
|
231
|
-
$unnnic-color-floweditor-green: $unnnic-color-green-9;
|
|
232
|
-
|
|
233
|
-
/* Background */
|
|
234
|
-
$unnnic-color-background-carpet: $unnnic-color-bg-base-soft;
|
|
235
|
-
$unnnic-color-background-snow: $unnnic-color-bg-base;
|
|
236
|
-
|
|
237
|
-
/* Neutral */
|
|
238
|
-
$unnnic-color-neutral-snow: $unnnic-color-bg-base;
|
|
239
|
-
|
|
240
|
-
/* Feedback colors */
|
|
241
|
-
$unnnic-color-feedback-red: $unnnic-color-red-8;
|
|
242
|
-
$unnnic-color-feedback-green: $unnnic-color-green-6;
|
|
243
|
-
$unnnic-color-feedback-yellow: $unnnic-color-orange-6;
|
|
244
|
-
$unnnic-color-feedback-blue: $unnnic-color-blue-9;
|
|
245
|
-
$unnnic-color-feedback-grey: $unnnic-color-gray-2;
|
|
246
|
-
|
|
247
|
-
/* Auxiliary colors */
|
|
248
|
-
$unnnic-color-aux-blue: $unnnic-color-teal-5;
|
|
249
|
-
$unnnic-color-aux-purple: $unnnic-color-purple-10;
|
|
250
|
-
$unnnic-color-aux-orange: $unnnic-color-orange-7;
|
|
251
|
-
$unnnic-color-aux-lemon: $unnnic-color-yellow-4;
|
|
252
|
-
$unnnic-color-aux-pink: $unnnic-color-pink-10;
|
|
253
|
-
|
|
254
|
-
$unnnic-color-aux-baby-blue: $unnnic-color-cyan-4;
|
|
255
|
-
$unnnic-color-aux-baby-yellow: $unnnic-color-yellow-2;
|
|
256
|
-
$unnnic-color-aux-baby-red: $unnnic-color-red-6;
|
|
257
|
-
$unnnic-color-aux-baby-green: $unnnic-color-green-3;
|
|
258
|
-
$unnnic-color-aux-baby-pink: $unnnic-color-pink-4;
|
|
259
|
-
|
|
260
|
-
/* Brand */
|
|
261
|
-
$unnnic-color-brand-weni: $unnnic-color-teal-8;
|
|
262
|
-
$unnnic-color-brand-weni-dark: $unnnic-color-teal-12;
|
|
263
|
-
$unnnic-color-brand-weni-soft: $unnnic-color-teal-8;
|
|
264
|
-
$unnnic-color-brand-sec-dark: $unnnic-color-gray-12;
|
|
265
|
-
$unnnic-color-brand-sec-soft: $unnnic-color-gray-11;
|
|
266
|
-
$unnnic-color-brand-sec: $unnnic-color-gray-7;
|
|
267
|
-
|
|
268
|
-
:export{
|
|
269
|
-
unnnicColorBackgroundSolo: $unnnic-color-background-solo;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
$scheme-colors:
|
|
273
|
-
"background-solo" $unnnic-color-background-solo,
|
|
274
|
-
"background-sky" $unnnic-color-background-sky,
|
|
275
|
-
"background-grass" $unnnic-color-background-grass,
|
|
276
|
-
"background-carpet" $unnnic-color-background-carpet,
|
|
277
|
-
"background-snow" $unnnic-color-background-snow,
|
|
278
|
-
"background-lightest" $unnnic-color-background-lightest,
|
|
279
|
-
"background-white" $unnnic-color-background-white,
|
|
280
|
-
|
|
281
|
-
/* Neutral */
|
|
282
|
-
"neutral-black" $unnnic-color-neutral-black,
|
|
283
|
-
"neutral-darkest" $unnnic-color-neutral-darkest,
|
|
284
|
-
"neutral-dark" $unnnic-color-neutral-dark,
|
|
285
|
-
"neutral-cloudy" $unnnic-color-neutral-cloudy,
|
|
286
|
-
"neutral-cleanest" $unnnic-color-neutral-cleanest,
|
|
287
|
-
"neutral-clean" $unnnic-color-neutral-clean,
|
|
288
|
-
"neutral-soft" $unnnic-color-neutral-soft,
|
|
289
|
-
"neutral-lightest" $unnnic-color-neutral-lightest,
|
|
290
|
-
"neutral-light" $unnnic-color-neutral-light,
|
|
291
|
-
"neutral-white" $unnnic-color-neutral-white,
|
|
292
|
-
"neutral-snow" $unnnic-color-neutral-snow,
|
|
293
|
-
|
|
294
|
-
/* Feedback colors */
|
|
295
|
-
"feedback-red" $unnnic-color-feedback-red,
|
|
296
|
-
"feedback-green" $unnnic-color-feedback-green,
|
|
297
|
-
"feedback-yellow" $unnnic-color-feedback-yellow,
|
|
298
|
-
"feedback-blue" $unnnic-color-feedback-blue,
|
|
299
|
-
"feedback-grey" $unnnic-color-feedback-grey,
|
|
300
|
-
|
|
301
|
-
/* Auxiliary colors */
|
|
302
|
-
"aux-blue" $unnnic-color-aux-blue,
|
|
303
|
-
"aux-purple" $unnnic-color-aux-purple,
|
|
304
|
-
"aux-orange" $unnnic-color-aux-orange,
|
|
305
|
-
"aux-lemon" $unnnic-color-aux-lemon,
|
|
306
|
-
"aux-pink" $unnnic-color-aux-pink,
|
|
307
|
-
|
|
308
|
-
"aux-baby-blue" $unnnic-color-aux-baby-blue,
|
|
309
|
-
"aux-baby-yellow" $unnnic-color-aux-baby-yellow,
|
|
310
|
-
"aux-baby-red" $unnnic-color-aux-baby-red,
|
|
311
|
-
"aux-baby-green" $unnnic-color-aux-baby-green,
|
|
312
|
-
"aux-baby-pink" $unnnic-color-aux-baby-pink,
|
|
313
|
-
|
|
314
|
-
"aux-green-50" $unnnic-color-aux-green-50,
|
|
315
|
-
"aux-green-100" $unnnic-color-aux-green-100,
|
|
316
|
-
"aux-green-200" $unnnic-color-aux-green-200,
|
|
317
|
-
"aux-green-300" $unnnic-color-aux-green-300,
|
|
318
|
-
"aux-green-400" $unnnic-color-aux-green-400,
|
|
319
|
-
"aux-green-500" $unnnic-color-aux-green-500,
|
|
320
|
-
"aux-green-600" $unnnic-color-aux-green-600,
|
|
321
|
-
"aux-green-700" $unnnic-color-aux-green-700,
|
|
322
|
-
"aux-green-800" $unnnic-color-aux-green-800,
|
|
323
|
-
"aux-green-900" $unnnic-color-aux-green-900,
|
|
324
|
-
"aux-green-950" $unnnic-color-aux-green-950,
|
|
325
|
-
|
|
326
|
-
"aux-blue-50" $unnnic-color-aux-blue-50,
|
|
327
|
-
"aux-blue-100" $unnnic-color-aux-blue-100,
|
|
328
|
-
"aux-blue-200" $unnnic-color-aux-blue-200,
|
|
329
|
-
"aux-blue-300" $unnnic-color-aux-blue-300,
|
|
330
|
-
"aux-blue-400" $unnnic-color-aux-blue-400,
|
|
331
|
-
"aux-blue-500" $unnnic-color-aux-blue-500,
|
|
332
|
-
"aux-blue-600" $unnnic-color-aux-blue-600,
|
|
333
|
-
"aux-blue-700" $unnnic-color-aux-blue-700,
|
|
334
|
-
"aux-blue-800" $unnnic-color-aux-blue-800,
|
|
335
|
-
"aux-blue-900" $unnnic-color-aux-blue-900,
|
|
336
|
-
"aux-blue-950" $unnnic-color-aux-blue-950,
|
|
337
|
-
|
|
338
|
-
"aux-purple-50" $unnnic-color-aux-purple-50,
|
|
339
|
-
"aux-purple-100" $unnnic-color-aux-purple-100,
|
|
340
|
-
"aux-purple-200" $unnnic-color-aux-purple-200,
|
|
341
|
-
"aux-purple-300" $unnnic-color-aux-purple-300,
|
|
342
|
-
"aux-purple-400" $unnnic-color-aux-purple-400,
|
|
343
|
-
"aux-purple-500" $unnnic-color-aux-purple-500,
|
|
344
|
-
"aux-purple-600" $unnnic-color-aux-purple-600,
|
|
345
|
-
"aux-purple-700" $unnnic-color-aux-purple-700,
|
|
346
|
-
"aux-purple-800" $unnnic-color-aux-purple-800,
|
|
347
|
-
"aux-purple-900" $unnnic-color-aux-purple-900,
|
|
348
|
-
"aux-purple-950" $unnnic-color-aux-purple-950,
|
|
349
|
-
|
|
350
|
-
"aux-red-50" $unnnic-color-aux-red-50,
|
|
351
|
-
"aux-red-100" $unnnic-color-aux-red-100,
|
|
352
|
-
"aux-red-200" $unnnic-color-aux-red-200,
|
|
353
|
-
"aux-red-300" $unnnic-color-aux-red-300,
|
|
354
|
-
"aux-red-400" $unnnic-color-aux-red-400,
|
|
355
|
-
"aux-red-500" $unnnic-color-aux-red-500,
|
|
356
|
-
"aux-red-600" $unnnic-color-aux-red-600,
|
|
357
|
-
"aux-red-700" $unnnic-color-aux-red-700,
|
|
358
|
-
"aux-red-800" $unnnic-color-aux-red-800,
|
|
359
|
-
"aux-red-900" $unnnic-color-aux-red-900,
|
|
360
|
-
"aux-red-950" $unnnic-color-aux-red-950,
|
|
361
|
-
|
|
362
|
-
"aux-orange-50" $unnnic-color-aux-orange-50,
|
|
363
|
-
"aux-orange-100" $unnnic-color-aux-orange-100,
|
|
364
|
-
"aux-orange-200" $unnnic-color-aux-orange-200,
|
|
365
|
-
"aux-orange-300" $unnnic-color-aux-orange-300,
|
|
366
|
-
"aux-orange-400" $unnnic-color-aux-orange-400,
|
|
367
|
-
"aux-orange-500" $unnnic-color-aux-orange-500,
|
|
368
|
-
"aux-orange-600" $unnnic-color-aux-orange-600,
|
|
369
|
-
"aux-orange-700" $unnnic-color-aux-orange-700,
|
|
370
|
-
"aux-orange-800" $unnnic-color-aux-orange-800,
|
|
371
|
-
"aux-orange-900" $unnnic-color-aux-orange-900,
|
|
372
|
-
"aux-orange-950" $unnnic-color-aux-orange-950,
|
|
373
|
-
|
|
374
|
-
"aux-yellow-50" $unnnic-color-aux-yellow-50,
|
|
375
|
-
"aux-yellow-100" $unnnic-color-aux-yellow-100,
|
|
376
|
-
"aux-yellow-200" $unnnic-color-aux-yellow-200,
|
|
377
|
-
"aux-yellow-300" $unnnic-color-aux-yellow-300,
|
|
378
|
-
"aux-yellow-400" $unnnic-color-aux-yellow-400,
|
|
379
|
-
"aux-yellow-500" $unnnic-color-aux-yellow-500,
|
|
380
|
-
"aux-yellow-600" $unnnic-color-aux-yellow-600,
|
|
381
|
-
"aux-yellow-700" $unnnic-color-aux-yellow-700,
|
|
382
|
-
"aux-yellow-800" $unnnic-color-aux-yellow-800,
|
|
383
|
-
"aux-yellow-900" $unnnic-color-aux-yellow-900,
|
|
384
|
-
"aux-yellow-950" $unnnic-color-aux-yellow-950,
|
|
385
|
-
|
|
386
|
-
"floweditor-blue" $unnnic-color-floweditor-blue,
|
|
387
|
-
"floweditor-purple" $unnnic-color-floweditor-purple,
|
|
388
|
-
"floweditor-wine" $unnnic-color-floweditor-wine,
|
|
389
|
-
"floweditor-orange" $unnnic-color-floweditor-orange,
|
|
390
|
-
"floweditor-pink" $unnnic-color-floweditor-pink,
|
|
391
|
-
"floweditor-turquoise" $unnnic-color-floweditor-turquoise,
|
|
392
|
-
"floweditor-green" $unnnic-color-floweditor-green,
|
|
393
|
-
|
|
394
|
-
/* Brand */
|
|
395
|
-
"weni-50" $unnnic-color-weni-50,
|
|
396
|
-
"weni-100" $unnnic-color-weni-100,
|
|
397
|
-
"weni-200" $unnnic-color-weni-200,
|
|
398
|
-
"weni-300" $unnnic-color-weni-300,
|
|
399
|
-
"weni-400" $unnnic-color-weni-400,
|
|
400
|
-
"weni-500" $unnnic-color-weni-500,
|
|
401
|
-
"weni-600" $unnnic-color-weni-600,
|
|
402
|
-
"weni-700" $unnnic-color-weni-700,
|
|
403
|
-
"weni-800" $unnnic-color-weni-800,
|
|
404
|
-
"weni-900" $unnnic-color-weni-900,
|
|
405
|
-
"weni-950" $unnnic-color-weni-950,
|
|
406
|
-
|
|
407
|
-
"brand-weni" $unnnic-color-brand-weni,
|
|
408
|
-
"brand-weni-dark" $unnnic-color-brand-weni-dark,
|
|
409
|
-
"brand-weni-soft" $unnnic-color-brand-weni-soft,
|
|
410
|
-
"brand-sec-dark" $unnnic-color-brand-sec-dark,
|
|
411
|
-
"brand-sec-soft" $unnnic-color-brand-sec-soft,
|
|
412
|
-
"brand-sec" $unnnic-color-brand-sec;
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
@each $name, $color in $scheme-colors {
|
|
416
|
-
.color-#{$name} {
|
|
417
|
-
color: $color;
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
.bg-#{$name} {
|
|
421
|
-
background-color: $color;
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
.u {
|
|
427
|
-
@each $name, $color in $scheme-colors {
|
|
428
|
-
&.color-#{$name} {
|
|
429
|
-
color: $color;
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
&.bg-#{$name} {
|
|
433
|
-
background-color: $color;
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
}
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..600;1,14..32,400..600&display=swap');
|
|
2
|
-
|
|
3
|
-
// Font family
|
|
4
|
-
$unnnic-font-family-primary: 'Inter', sans-serif;
|
|
5
|
-
$unnnic-font-family-secondary: $unnnic-font-family-primary;
|
|
6
|
-
|
|
7
|
-
// Font weight
|
|
8
|
-
$unnnic-font-weight-black: 900;
|
|
9
|
-
$unnnic-font-weight-light: 300;
|
|
10
|
-
|
|
11
|
-
// Font size
|
|
12
|
-
$unnnic-font-size-body-sm: 0.5 * 16px;
|
|
13
|
-
$unnnic-font-size-body-md: 0.75 * 16px;
|
|
14
|
-
$unnnic-font-size-body-gt: 0.875 * 16px;
|
|
15
|
-
$unnnic-font-size-body-lg: 1 * 16px;
|
|
16
|
-
|
|
17
|
-
$unnnic-font-size-title-sm: 1.25 * 16px;
|
|
18
|
-
$unnnic-font-size-title-md: 1.5 * 16px;
|
|
19
|
-
$unnnic-font-size-title-lg: 2 * 16px;
|
|
20
|
-
|
|
21
|
-
$unnnic-font-size-h4: 2.5 * 16px;
|
|
22
|
-
$unnnic-font-size-h3: 3 * 16px;
|
|
23
|
-
$unnnic-font-size-h2: 3.5 * 16px;
|
|
24
|
-
$unnnic-font-size-h1: 4.5 * 16px;
|
|
25
|
-
|
|
26
|
-
// Line height
|
|
27
|
-
// Add this to font size when using
|
|
28
|
-
$unnnic-line-height-small: 0.25 * 16px;
|
|
29
|
-
$unnnic-line-height-medium: 0.5 * 16px;
|
|
30
|
-
$unnnic-line-height-md: $unnnic-line-height-medium;
|
|
31
|
-
$unnnic-line-height-large: 1 * 16px;
|
|
32
|
-
|
|
33
|
-
// New typography tokens
|
|
34
|
-
$unnnic-text-display-1: 1.5 * 16px; // 24px
|
|
35
|
-
$unnnic-text-display-2: 1.25 * 16px; // 20px
|
|
36
|
-
$unnnic-text-display-3: 1 * 16px; // 16px
|
|
37
|
-
$unnnic-text-display-4: 1 * 16px; // 16px
|
|
38
|
-
$unnnic-text-body: 0.875 * 16px; // 14px
|
|
39
|
-
$unnnic-text-emphasis: 0.875 * 16px; // 14px
|
|
40
|
-
$unnnic-text-action: 0.875 * 16px; // 14px
|
|
41
|
-
$unnnic-text-caption-1: 0.75 * 16px; // 12px
|
|
42
|
-
$unnnic-text-caption-2: 0.75 * 16px; // 12px
|
|
43
|
-
|
|
44
|
-
// Typography line heights
|
|
45
|
-
$unnnic-line-height-display-1: 2 * 16px; // 32px
|
|
46
|
-
$unnnic-line-height-display-2: 1.6875 * 16px; // 27px
|
|
47
|
-
$unnnic-line-height-display-3: 1.375 * 16px; // 22px
|
|
48
|
-
$unnnic-line-height-display-4: 1.375 * 16px; // 22px
|
|
49
|
-
$unnnic-line-height-body: 1.3125 * 16px; // 21px
|
|
50
|
-
$unnnic-line-height-emphasis: 1.3125 * 16px; // 21px
|
|
51
|
-
$unnnic-line-height-action: 1.3125 * 16px; // 21px
|
|
52
|
-
$unnnic-line-height-caption-1: 1.125 * 16px; // 18px
|
|
53
|
-
$unnnic-line-height-caption-2: 1.125 * 16px; // 18px
|
|
54
|
-
|
|
55
|
-
.unnnic-font {
|
|
56
|
-
font-weight: 400;
|
|
57
|
-
font-family: $unnnic-font-family-primary;
|
|
58
|
-
|
|
59
|
-
$font-sizes:
|
|
60
|
-
"body-sm" $unnnic-font-size-body-sm,
|
|
61
|
-
"body-md" $unnnic-font-size-body-md,
|
|
62
|
-
"body-gt" $unnnic-font-size-body-gt,
|
|
63
|
-
"body-lg" $unnnic-font-size-body-lg,
|
|
64
|
-
|
|
65
|
-
"title-sm" $unnnic-font-size-title-sm,
|
|
66
|
-
"title-md" $unnnic-font-size-title-md,
|
|
67
|
-
"title-lg" $unnnic-font-size-title-lg,
|
|
68
|
-
|
|
69
|
-
"h4" $unnnic-font-size-h4,
|
|
70
|
-
"h3" $unnnic-font-size-h3,
|
|
71
|
-
"h2" $unnnic-font-size-h2,
|
|
72
|
-
"h1" $unnnic-font-size-h1;
|
|
73
|
-
|
|
74
|
-
$font-weights:
|
|
75
|
-
"black" $unnnic-font-weight-black,
|
|
76
|
-
"bold" 700,
|
|
77
|
-
"light" $unnnic-font-weight-light;
|
|
78
|
-
|
|
79
|
-
&.secondary {
|
|
80
|
-
font-family: $unnnic-font-family-secondary;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
@each $name, $size in $font-sizes {
|
|
84
|
-
&.#{$name} {
|
|
85
|
-
font-size: $size;
|
|
86
|
-
line-height: $size + $unnnic-line-height-md;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@each $name, $weight in $font-weights {
|
|
91
|
-
&.#{$name} {
|
|
92
|
-
font-weight: $weight;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
.u {
|
|
99
|
-
&.font {
|
|
100
|
-
font-weight: 400;
|
|
101
|
-
font-family: $unnnic-font-family-primary;
|
|
102
|
-
|
|
103
|
-
$font-sizes:
|
|
104
|
-
"body-sm" $unnnic-font-size-body-sm,
|
|
105
|
-
"body-md" $unnnic-font-size-body-md,
|
|
106
|
-
"body-gt" $unnnic-font-size-body-gt,
|
|
107
|
-
"body-lg" $unnnic-font-size-body-lg,
|
|
108
|
-
|
|
109
|
-
"title-sm" $unnnic-font-size-title-sm,
|
|
110
|
-
"title-md" $unnnic-font-size-title-md,
|
|
111
|
-
"title-lg" $unnnic-font-size-title-lg,
|
|
112
|
-
|
|
113
|
-
"h4" $unnnic-font-size-h4,
|
|
114
|
-
"h3" $unnnic-font-size-h3,
|
|
115
|
-
"h2" $unnnic-font-size-h2,
|
|
116
|
-
"h1" $unnnic-font-size-h1;
|
|
117
|
-
|
|
118
|
-
$font-weights:
|
|
119
|
-
"black" $unnnic-font-weight-black,
|
|
120
|
-
"bold" 700,
|
|
121
|
-
"light" $unnnic-font-weight-light;
|
|
122
|
-
|
|
123
|
-
&.secondary {
|
|
124
|
-
font-family: $unnnic-font-family-secondary;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
@each $name, $size in $font-sizes {
|
|
128
|
-
&.#{$name} {
|
|
129
|
-
font-size: $size;
|
|
130
|
-
line-height: $size + $unnnic-line-height-md;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
@each $name, $weight in $font-weights {
|
|
135
|
-
&.#{$name} {
|
|
136
|
-
font-weight: $weight;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
.unnnic-grid-xs {
|
|
2
|
-
display: grid;
|
|
3
|
-
grid-gap: 16px;
|
|
4
|
-
grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
|
|
5
|
-
padding: 0 16px;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.unnnic-grid-sm {
|
|
9
|
-
display: grid;
|
|
10
|
-
grid-gap: 16px;
|
|
11
|
-
grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
|
|
12
|
-
padding: 0 16px;
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.unnnic-grid-md {
|
|
17
|
-
display: grid;
|
|
18
|
-
grid-gap: 16px;
|
|
19
|
-
grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
|
|
20
|
-
padding: 0 48px;
|
|
21
|
-
box-sizing: border-box;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.unnnic-grid-lg {
|
|
25
|
-
display: grid;
|
|
26
|
-
grid-gap: 16px;
|
|
27
|
-
grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
|
|
28
|
-
padding: 0 64px;
|
|
29
|
-
box-sizing: border-box;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.unnnic-grid-xl {
|
|
33
|
-
display: grid;
|
|
34
|
-
grid-gap: 16px;
|
|
35
|
-
grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
|
|
36
|
-
padding: 0 176px;
|
|
37
|
-
box-sizing: border-box;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.unnnic-grid-giant {
|
|
41
|
-
display: grid;
|
|
42
|
-
grid-gap: 16px;
|
|
43
|
-
grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
|
|
44
|
-
padding: 0 24px;
|
|
45
|
-
box-sizing: border-box;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
@for $i from 1 to 13 {
|
|
49
|
-
.unnnic-grid-span-#{$i} {
|
|
50
|
-
grid-column: span #{$i};
|
|
51
|
-
}
|
|
52
|
-
}
|