@cobre-npm/ds-v3 0.4.0 → 0.5.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 (7) hide show
  1. package/dist/cobre-ds-v3-lib.es.js +1165 -1161
  2. package/dist/style.css +1 -1
  3. package/dist/tokens/_components.scss +1087 -697
  4. package/dist/tokens/_primitives.scss +72 -71
  5. package/dist/tokens/_semantics.scss +0 -132
  6. package/dist/types/components/CobreSideMenu/components/SideMenuItem.vue.d.ts +1 -1
  7. package/package.json +1 -1
package/dist/tokens/_components.scss CHANGED
@@ -1,829 +1,1219 @@
1
- // DS
2
-
3
1
  /**
4
- * INPUT
5
- */
2
+ * HEADER
3
+ */
6
4
 
7
- :root {
8
- --cobre-input-height: 32px;
9
- --cobre-input-bg: transparent;
10
- --cobre-input-color: var(--cobre-primary-95);
11
- --cobre-input-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
12
- --cobre-input-placeholder-color: var(--cobre-primary-50);
13
- --cobre-input-radius: var(--cobre-radius-XS);
14
- --cobre-input-fs: var(--cobre-label-small-fs);
15
- --cobre-optional-label-fs: var(--cobre-label-small-fs);
5
+ :root {
6
+ --cobre-header-bg: var(--cobre-primary-5);
7
+ --cobre-header-border-bottom: 1px solid #ebebeb;
8
+ --cobre-header-shadow: 0 0 0 1px var(--cobre-header-border-color);
9
+ --cobre-header-height: 56px;
10
+ --cobre-header-menu-bg: var(--cobre-white);
11
+ --cobre-header-icon-color: var(--cobre-primary-95);
12
+
13
+ // Item
14
+ --cobre-header-item-font-family: 'Inter', sans-serif;
15
+ --cobre-header-item-font-size: initial;
16
+ --cobre-header-item-bg: transparent;
17
+ --cobre-header-item-color: var(--cobre-primary-95);
18
+ --cobre-header-item-hover-bg: var(--cobre-primary-7);
19
+ --cobre-header-item-hover-color: var(--cobre-secondary);
20
+ --cobre-header-item-padding-x: 12px;
21
+ --cobre-header-item-min-width: initial;
22
+
23
+ // Active Item
24
+ --cobre-header-item-active-radius: 0px;
25
+ --cobre-header-item-active-bg: transparent;
26
+ --cobre-header-item-active-color: var(--cobre-secondary-50);
27
+
28
+ // Desktop Item
29
+ --cobre-header-desktop-item-bg: transparent;
30
+ --cobre-header-desktop-item-hover-bg: var(--cobre-primary-7);
31
+ --cobre-header-desktop-item-color: var(--cobre-primary-95);
32
+ --cobre-header-desktop-item-padding-x: 2px;
33
+
34
+ // Desktop Active Item
35
+ --cobre-header-desktop-item-active-radius: 8px;
36
+ --cobre-header-desktop-item-active-bg: transparent;
37
+ --cobre-header-desktop-item-active-color: var(--cobre-secondary-50);
38
+ --cobre-header-desktop-item-active-hover-color: var(--cobre-secondary-50);
39
+ }
40
+
41
+ /**
42
+ * BUTTONS
43
+ */
16
44
 
17
- --cobre-input-error-border: var(--cobre-border-stroke-M) solid var(--cobre-red-50);
18
- --cobre-input-error-color: var(--cobre-red-50);
19
- --cobre-input-error-fs: var(--cobre-label-small-fs);
45
+ :root {
46
+ // Generals
47
+ --cobre-btn-radius: 8px;
48
+ --cobre-btn-font-family: 'Inter', sans-serif;
49
+ --cobre-btn-font-size: 14.22px;
50
+
51
+ // By Sizes
52
+ --cobre-btn-small-height: 40px;
53
+ --cobre-btn-small-min-width: 176px;
54
+
55
+ --cobre-btn-medium-height: 40px;
56
+ --cobre-btn-medium-min-width: 176px;
57
+
58
+ --cobre-btn-big-height: 52px;
59
+ --cobre-btn-big-min-width: 176px;
60
+
61
+ --cobre-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--cobre-secondary-50-rgba), .5);
62
+
63
+ // Primary
64
+ --cobre-btn-primary-bg: var(--cobre-primary-95);
65
+ --cobre-btn-primary-color: var(--cobre-white);
66
+ --cobre-btn-primary-hover-bg: var(--cobre-primary-80);
67
+ --cobre-btn-primary-active-bg: var(--cobre-primary-60);
68
+ --cobre-btn-primary-focus-bg: var(--cobre-primary-95);
69
+ --cobre-btn-primary-disabled-bg: var(--cobre-primary-20);
70
+
71
+ // Secondary
72
+ --cobre-btn-secondary-bg: transparent;
73
+ --cobre-btn-secondary-border: 1px solid var(--cobre-primary-20);
74
+ --cobre-btn-secondary-color: var(--cobre-primary-95);
75
+ --cobre-btn-secondary-hover-bg: var(--cobre-primary-10);
76
+ --cobre-btn-secondary-active-bg: var(--cobre-primary-20);
77
+ --cobre-btn-secondary-focus-bg: var(--cobre-white);
78
+ --cobre-btn-secondary-disabled-bg: var(--cobre-white);
79
+ --cobre-btn-secondary-disabled-color: var(--cobre-primary-30);
80
+
81
+ // Single
82
+ --cobre-btn-single-bg: transparent;
83
+ --cobre-btn-single-color: var(--cobre-secondary-50);
84
+ --cobre-btn-single-hover-bg: var(--cobre-header-item-hover-bg);
85
+ --cobre-btn-single-hover-color: var(--cobre-secondary-80);
86
+ --cobre-btn-single-disabled-bg: none;
87
+ --cobre-btn-single-disabled-color: var(--cobre-primary-20);
88
+ --cobre-btn-single-padding-x: 8px;
89
+ --cobre-btn-single-padding-y: 2px;
90
+
91
+ // Ghost
92
+ --cobre-btn-ghost-bg: transparent;
93
+ --cobre-btn-ghost-color: var(--cobre-secondary-50);
94
+ --cobre-btn-ghost-hover-bg: transparent;
95
+ --cobre-btn-ghost-hover-color: var(--cobre-secondary-80);
96
+ --cobre-btn-ghost-active-color: var(--cobre-secondary-70);
97
+ --cobre-btn-ghost-focus-color: var(--cobre-secondary-50);
98
+ --cobre-btn-ghost-disabled-color: var(--cobre-primary-20);
99
+
100
+ // Link
101
+ --cobre-btn-link-bg: transparent;
102
+ --cobre-btn-link-color: var(--cobre-secondary-50);
103
+ --cobre-btn-link-fw: 600;
104
+ --cobre-btn-link-hover-bg: transparent;
105
+ --cobre-btn-link-hover-color: var(--cobre-secondary-80);
106
+ --cobre-btn-link-active-color: var(--cobre-secondary-70);
107
+ --cobre-btn-link-focus-color: var(--cobre-secondary-50);
108
+ --cobre-btn-link-disabled-color: var(--cobre-primary-20);
109
+ }
110
+
111
+ /**
112
+ * BUTTONS V3
113
+ */
20
114
 
21
- --cobre-input-focus-border: var(--cobre-border-stroke-M) solid var(--cobre-secondary-50);
22
- --cobre-input-focus-shadow: 0 0 0 0.25rem var(--cobre-secondary-10);
23
- --cobre-input-focus-color: var(--cobre-primary-95);
24
- --cobre-input-focus-bg: transparent;
115
+ :root {
116
+ // Generals
117
+ --cobre-btn-v3-radius: 999px;
118
+ --cobre-btn-v3-font-family: 'Inter', sans-serif;
119
+ --cobre-btn-v3-font-size: 14px;
120
+ --cobre-btn-v3-small-font-size: 12px;
121
+ --cobre-btn-v3-padding: 0 8px;
122
+
123
+ // By Sizes
124
+ --cobre-btn-v3-small-height: 32px;
125
+
126
+ --cobre-btn-v3-medium-height: 32px;
127
+
128
+ --cobre-btn-v3-big-height: 52px;
129
+
130
+ --cobre-btn-v3-icon-small: 16px;
131
+
132
+ --cobre-btn-v3-icon-medium: 20px;
133
+
134
+ // Primary
135
+ --cobre-btn-v3-primary-bg: var(--cobre-primary-95);
136
+ --cobre-btn-v3-primary-color: var(--cobre-white);
137
+ --cobre-btn-v3-primary-hover-bg: var(--cobre-primary-80);
138
+ --cobre-btn-v3-primary-active-bg: var(--cobre-primary-60);
139
+ --cobre-btn-v3-primary-focus-bg: var(--cobre-primary-95);
140
+ --cobre-btn-v3-primary-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
141
+ --cobre-btn-v3-primary-disabled-bg: var(--cobre-primary-20);
142
+
143
+ // Secondary
144
+ --cobre-btn-v3-secondary-bg: transparent;
145
+ --cobre-btn-v3-secondary-border: 0.5px solid var(--cobre-primary-20);
146
+ --cobre-btn-v3-secondary-color: var(--cobre-primary-95);
147
+ --cobre-btn-v3-secondary-hover-bg: var(--cobre-primary-10);
148
+ --cobre-btn-v3-secondary-active-bg: var(--cobre-primary-20);
149
+ --cobre-btn-v3-secondary-active-border: 1px solid var(--cobre-primary-95);
150
+ --cobre-btn-v3-secondary-focus-border: 1px solid var(--cobre-brand);
151
+ --cobre-btn-v3-secondary-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
152
+ --cobre-btn-v3-secondary-disabled-color: var(--cobre-primary-30);
153
+ --cobre-btn-v3-secondary-disabled-border: 0.5px solid var(--cobre-primary-20);
154
+
155
+ // Secondary Cloudy
156
+ --cobre-btn-v3-secondary-cloudy-bg: transparent;
157
+ --cobre-btn-v3-secondary-cloudy-border: 0.5px solid var(--cobre-primary-20);
158
+ --cobre-btn-v3-secondary-cloudy-color: var(--cobre-primary-95);
159
+ --cobre-btn-v3-secondary-cloudy-hover-bg: var(--cobre-primary-30);
160
+ --cobre-btn-v3-secondary-cloudy-active-bg: var(--cobre-primary-20);
161
+ --cobre-btn-v3-secondary-cloudy-active-border: 1px solid var(--cobre-primary-95);
162
+ --cobre-btn-v3-secondary-cloudy-focus-border: 1px solid var(--cobre-brand);
163
+ --cobre-btn-v3-secondary-cloudy-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
164
+ --cobre-btn-v3-secondary-cloudy-disabled-color: var(--cobre-primary-30);
165
+ --cobre-btn-v3-secondary-cloudy-disabled-border: 0.5px solid var(--cobre-primary-20);
166
+
167
+ // Ghost
168
+ --cobre-btn-v3-ghost-bg: transparent;
169
+ --cobre-btn-v3-ghost-color: var(--cobre-primary-95);
170
+ --cobre-btn-v3-ghost-hover-bg: transparent;
171
+ --cobre-btn-v3-ghost-hover-color: var(--cobre-secondary-50);
172
+ --cobre-btn-v3-ghost-active-color: var(--cobre-secondary-70);
173
+ --cobre-btn-v3-ghost-focus-color: var(--cobre-secondary-50);
174
+ --cobre-btn-v3-ghost-focus-border: 1px solid var(--cobre-brand);
175
+ --cobre-btn-v3-ghost-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
176
+ --cobre-btn-v3-ghost-disabled-color: var(--cobre-primary-20);
177
+
178
+ // Ghost Teal
179
+ --cobre-btn-v3-ghost-teal-bg: transparent;
180
+ --cobre-btn-v3-ghost-teal-color: var(--cobre-secondary-30);
181
+ --cobre-btn-v3-ghost-teal-hover-bg: transparent;
182
+ --cobre-btn-v3-ghost-teal-hover-color: var(--cobre-secondary-40);
183
+ --cobre-btn-v3-ghost-teal-active-color: var(--cobre-secondary-50);
184
+ --cobre-btn-v3-ghost-teal-focus-color: var(--cobre-primary-80);
185
+ --cobre-btn-v3-ghost-teal-focus-border: 1px solid var(--cobre-brand);
186
+ --cobre-btn-v3-ghost-teal-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
187
+ --cobre-btn-v3-ghost-teal-disabled-color: var(--cobre-primary-60);
188
+
189
+ // Link
190
+ --cobre-btn-v3-link-bg: transparent;
191
+ --cobre-btn-v3-link-color: var(--cobre-primary-95);
192
+ --cobre-btn-v3-link-fw: 500;
193
+ --cobre-btn-v3-link-hover-bg: transparent;
194
+ --cobre-btn-v3-link-hover-color: var(--cobre-secondary-50);
195
+ --cobre-btn-v3-link-active-color: var(--cobre-secondary-70);
196
+ --cobre-btn-v3-link-focus-color: var(--cobre-secondary-50);
197
+ --cobre-btn-v3-link-focus-border: 1px solid var(--cobre-brand);
198
+ --cobre-btn-v3-link-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
199
+ --cobre-btn-v3-link-disabled-color: var(--cobre-secondary-20);
200
+
201
+ // Filter
202
+ --cobre-btn-v3-filter-radius: var(--cobre-radius-XS);
203
+ --cobre-btn-v3-filter-bg: transparent;
204
+ --cobre-btn-v3-filter-color: var(--cobre-primary-80);
205
+ --cobre-btn-v3-filter-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
206
+ --cobre-btn-v3-filter-padding: 0 8px;
207
+ --cobre-btn-v3-filter-height: 24px;
208
+ --cobre-btn-v3-filter-fs: var(--cobre-label-small-fs);
209
+ --cobre-btn-v3-filter-lh: var(--cobre-label-small-lh);
210
+ --cobre-btn-v3-filter-hover-bg: var(--cobre-white);
211
+ --cobre-btn-v3-filter-active-bg: var(--cobre-primary-30);
212
+ --cobre-btn-v3-filter-focus-bg: var(--cobre-secondary-5);
213
+ --cobre-btn-v3-filter-focus-border-color: var(--cobre-secondary-50);
214
+ --cobre-btn-v3-filter-font-weight: 400;
215
+ --cobre-btn-v3-filter-width: fit-content;
216
+
217
+ // Chip
218
+ --cobre-btn-v3-chip-height: 20px;
219
+ --cobre-btn-v3-chip-radius: var(--cobre-radius-full);
220
+ --cobre-btn-v3-chip-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
221
+ --cobre-btn-v3-chip-bg: var(--cobre-white);
222
+ --cobre-btn-v3-chip-color: var(--cobre-primary-80);
223
+ --cobre-btn-v3-chip-padding: 0 4px;
224
+ --cobre-btn-v3-chip-fs: 12px;
225
+ --cobre-btn-v3-chip-fw: 400;
226
+ --cobre-btn-v3-chip-hover-border: var(--cobre-border-stroke-M) solid var(--cobre-secondary-50);
227
+ --cobre-btn-v3-chip-hover-bg: var(--cobre-secondary-10);
228
+ --cobre-btn-v3-chip-disabled-bg: transparent;
229
+ --cobre-btn-v3-chip-disabled-color: var(--cobre-primary-60);
230
+
231
+ // Icon
232
+ --cobre-btn-v3-icon-fs: transparent;
233
+ --cobre-btn-v3-icon-bg: transparent;
234
+ --cobre-btn-v3-icon-color: var(--cobre-primary-95);
235
+ --cobre-btn-v3-icon-radius: var(--cobre-radius-full);
236
+ --cobre-btn-v3-icon-hover-bg: var(--cobre-primary-10);
237
+ --cobre-btn-v3-icon-active-bg: var(--cobre-primary-20);
238
+ --cobre-btn-v3-icon-focus-border: 1px solid var(--cobre-brand);
239
+ --cobre-btn-v3-icon-focus-box-shadow: 0 0 0 2px #A8C5C4;
240
+ --cobre-btn-v3-icon-disabled-color: var(--cobre-primary-50);
241
+
242
+ // Icon cloudy
243
+ --cobre-btn-v3-icon-cloudy-fs: transparent;
244
+ --cobre-btn-v3-icon-cloudy-bg: transparent;
245
+ --cobre-btn-v3-icon-cloudy-color: var(--cobre-primary-95);
246
+ --cobre-btn-v3-icon-cloudy-radius: var(--cobre-radius-full);
247
+ --cobre-btn-v3-icon-cloudy-hover-bg: var(--cobre-primary-20);
248
+ --cobre-btn-v3-icon-cloudy-active-bg: var(--cobre-primary-30);
249
+ --cobre-btn-v3-icon-cloudy-focus-border: 1px solid var(--cobre-brand);
250
+ --cobre-btn-v3-icon-cloudy-focus-box-shadow: 0 0 0 2px #A8C5C4;
251
+ --cobre-btn-v3-icon-cloudy-disabled-color: var(--cobre-primary-50);
252
+
253
+ // Search
254
+ --cobre-btn-v3-toolbar-radius: 4px;
255
+ --cobre-btn-v3-toolbar-fs: 12px;
256
+ --cobre-btn-v3-toolbar-bg: transparent;
257
+ --cobre-btn-v3-toolbar-color: var(--cobre-primary-80);
258
+ --cobre-btn-v3-toolbar-hover-bg: var(--cobre-primary-10);
259
+ --cobre-btn-v3-toolbar-hover-color: var(--cobre-primary-80);
260
+
261
+
262
+ // Primary Warning
263
+ --cobre-btn-v3-primary-warning-bg: var(--cobre-red-50);
264
+ --cobre-btn-v3-primary-warning-color: var(--cobre-primary-5);
265
+ --cobre-btn-v3-primary-warning-hover-bg: var(--cobre-red-60);
266
+ --cobre-btn-v3-primary-warning-active-bg: var(--cobre-red-70);
267
+ --cobre-btn-v3-primary-warning-focus-bg: var(--cobre-red-50);
268
+ --cobre-btn-v3-primary-warning-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
269
+ --cobre-btn-v3-primary-warning-disabled-bg: var(--cobre-red-40);
270
+ }
271
+
272
+ /**
273
+ * CHIPS V3
274
+ */
25
275
 
26
- --cobre-input-hover-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-95);
27
- --cobre-input-hover-bg: var(--cobre-primary-10);
276
+ :root {
277
+ --cobre-chips-disabled-color: var(--cobre-primary-20);
278
+ --cobre-chips-divider-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
279
+ --cobre-chips-button-color: var(--cobre-primary-80);
280
+ --cobre-chips-button-disabled-color: var(--cobre-primary-20);
281
+ }
28
282
 
29
- --cobre-input-disabled-color: var(--cobre-primary-50);
30
- --cobre-input-disabled-bg: var(--cobre-white);
31
- --cobre-input-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-50);
283
+ /**
284
+ * ACTION LIST
285
+ */
32
286
 
33
- --cobre-input-active-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
34
- --cobre-input-active-bg: var(--cobre-primary-10);
287
+ :root {
288
+ --cobre-action-list-bg: var(--cobre-white);
289
+ --cobre-action-list-shadow: 0px 2px 15px rgba(40, 40, 43, 0.05), 0px 4px 20px rgba(40, 40, 43, 0.04);
290
+ --cobre-action-list-radius: 8px;
291
+ --cobre-action-list-width: 269px;
292
+ --cobre-action-list-border: none;
293
+ --cobre-action-list-header-padding: 12px;
294
+
295
+ // Item Icon
296
+ --cobre-action-list-icon-wrap-bg: var(--cobre-secondary-10);
297
+ --cobre-action-list-icon-wrap-radius: 8px;
298
+ --cobre-action-list-icon-wrap-padding: 4px;
299
+ --cobre-action-list-icon-wrap-size: 24px;
300
+ --cobre-action-list-icon-wrap-disabled-bg: var(--cobre-primary-10);
301
+ --cobre-action-list-icon-color: var(--cobre-brand);
302
+ --cobre-action-list-icon-disabled-color: var(--cobre-primary-30);
303
+
304
+ // Item
305
+ --cobre-action-list-item-bg: var(--cobre-white);
306
+ --cobre-action-list-item-color: initial;
307
+ --cobre-action-list-item-padding: 12px;
308
+ --cobre-action-list-item-margin: 0 0 8px 0;
309
+ --cobre-action-list-item-font-size: var(--cobre-body-large-fs);
310
+ --cobre-action-list-item-font-line-height: var(--cobre-body-large-lh);
311
+ --cobre-action-list-item-font-letter-spacing: var(--cobre-body-large-ls);
312
+ --cobre-action-list-item-font-weight: 400;
313
+ --cobre-action-list-item-font-color: initial;
314
+ --cobre-action-list-item-radius: 0;
315
+
316
+ // --cobre-action-list-item-hover-bg: var(--cobre-secondary-5);
317
+ --cobre-action-list-item-hover-color: initial;
318
+
319
+ --cobre-action-list-item-focus-bg: var(--cobre-secondary-10);
320
+ --cobre-action-list-item-focus-color: initial;
321
+
322
+ --cobre-action-list-item-active-bg: var(--cobre-secondary-20);
323
+ --cobre-action-list-item-active-color: initial;
324
+ }
325
+
326
+ /**
327
+ * BADGES
328
+ */
35
329
 
36
- --cobre-input-autofill-border: var(--cobre-border-stroke-M) solid var(--cobre-secondary-50);
330
+ :root {
331
+ --cobre-badge-radius: 30px;
332
+ --cobre-badge-font-size: 12.64px;
333
+ --cobre-badge-padding-x: 8px;
334
+ --cobre-badge-padding-y: 2px;
335
+ --cobre-badge-height: 24px;
336
+ --cobre-badge-font-size: 14.22px;
337
+
338
+ --cobre-badge-neutral-bg: var(--cobre-primary-10);
339
+ --cobre-badge-neutral-color: var(--cobre-primary-80);
340
+
341
+ --cobre-badge-success-bg: var(--cobre-green-10);
342
+ --cobre-badge-success-border: none;
343
+ --cobre-badge-success-color: var(--cobre-primary-95);
344
+
345
+ --cobre-badge-info-bg: var(--cobre-blue-10);
346
+ --cobre-badge-info-border: none;
347
+ --cobre-badge-info-color: var(--cobre-primary-95);
348
+
349
+ --cobre-badge-warning-bg: var(--cobre-yellow-10);
350
+ --cobre-badge-warning-border: none;
351
+ --cobre-badge-warning-color: var(--cobre-primary-95);
352
+
353
+ --cobre-badge-error-bg: var(--cobre-red-10);
354
+ --cobre-badge-error-border: none;
355
+ --cobre-badge-error-color: var(--cobre-primary-95);
356
+
357
+ --cobre-badge-inactive-bg: var(--cobre-primary-10);
358
+ --cobre-badge-inactive-border: none;
359
+ --cobre-badge-inactive-color: var(--cobre-primary-95);
360
+
361
+ // Status
362
+ --cobre-badge-status-finished-bg: var(--cobre-green-10);
363
+ --cobre-badge-status-finished-color: var(--cobre-green-50);
364
+ --cobre-badge-status-finished-border: none;
365
+
366
+ --cobre-badge-status-progress-bg: var(--cobre-blue-10);
367
+ --cobre-badge-status-progress-color: var(--cobre-blue-50);
368
+ --cobre-badge-status-progress-border: none;
369
+
370
+ --cobre-badge-status-error-bg: var(--cobre-red-10);
371
+ --cobre-badge-status-error-color: var(--cobre-red-50);
372
+ --cobre-badge-status-error-border: none;
373
+
374
+ --cobre-badge-status-pending-bg: var(--cobre-yellow-10);
375
+ --cobre-badge-status-pending-color: var(--cobre-yellow-50);
376
+ --cobre-badge-status-pending-border: none;
377
+
378
+ --cobre-badge-status-inactive-bg: var(--cobre-primary-10);
379
+ --cobre-badge-status-inactive-color: var(--cobre-primary-50);
380
+ --cobre-badge-status-inactive-border: none;
381
+
382
+ --cobre-badge-filter-bg: transparent;
383
+ --cobre-badge-filter-color: var(--cobre-primary-95);
384
+ --cobre-badge-filter-border: var(--cobre-brand);
385
+ --cobre-badge-filter-label-color: var(--cobre-brand);
386
+ --cobre-badge-filter-hover-bg: var(--cobre-brand-light);
387
+
388
+ --cobre-badge-outline-bg: var(--cobre-white);
389
+ --cobre-badge-outline-border: var(--cobre-primary-20) 1px solid;
390
+ --cobre-badge-outline-color: var(--cobre-primary-95);
391
+
392
+ --cobre-badge-alert-bg: var(--cobre-yellow-5);
393
+ --cobre-badge-alert-color: var(--cobre-yellow-20);
394
+ --cobre-badge-alert-border: 1px solid var(--cobre-yellow-20);
395
+ }
396
+
397
+ /**
398
+ * TABS
399
+ */
400
+
401
+ :root {
402
+ --cobre-tabs-bg: transparent !important;
403
+ --cobre-tabs-border: var(--cobre-border-stroke-L) solid transparent !important;
404
+ --cobre-tabs-color: var(--cobre-primary-80) !important;
405
+ --cobre-tabs-font-weight: 400 !important;
406
+ --cobre-tabs-font-size: var(--cobre-label-medium-fs) !important;
407
+ --cobre-tabs-radius: 0px !important;
408
+ --cobre-tabs-padding: 8px 0px !important;
409
+ --cobre-tabs-margin: 8px !important;
410
+ --cobre-tabs-height: auto !important;
411
+
412
+ --cobre-tabs-hover-bg: transparent !important;
413
+ --cobre-tabs-hover-border: var(--cobre-border-stroke-L) solid var(--cobre-seconday-50) !important;
414
+ --cobre-tabs-hover-color: var(--cobre-secondary-50) !important;
415
+ --cobre-tabs-hover-radius: 0px !important;
416
+
417
+ // Active (Selected)
418
+ --cobre-tabs-active-bg: transparent !important;
419
+ --cobre-tabs-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95) !important;
420
+ --cobre-tabs-active-color: var(--cobre-primary-95) !important;
421
+ --cobre-tabs-active-font-weight: 500 !important;
422
+ --cobre-tabs-active-radius: 0px !important;
423
+
424
+ // Pressed (Selected)
425
+ --cobre-tabs-pressed-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-80);
426
+ --cobre-tabs-pressed-color: var(--cobre-secondary-80);
427
+
428
+ // Disabled
429
+ --cobre-tabs-disabled-bg: transparent !important;
430
+ --cobre-tabs-disabled-border: none !important;
431
+ --cobre-tabs-disabled-color: var(--cobre-primary-40) !important;
432
+ --cobre-tabs-disabled-radius: 0px !important;
433
+ }
434
+
435
+ /**
436
+ * Select
437
+ */
37
438
 
38
- --cobre-input-label-fw: 400;
39
- --cobre-input-label-color: rgba(87, 86, 85, 0.8);
40
- --cobre-input-label-disabled-color: var(--cobre-primary-50);
41
- --cobre-input-label-fs: var(--cobre-label-small-fs);
439
+ :root {
440
+ --cobre-select-height: 38px;
441
+ --cobre-select-bg: var(--cobre-white);
442
+ --cobre-select-color: var(--cobre-primary-40);
443
+ --cobre-select-border: 1px solid #ebebeb;
444
+ --cobre-select-radius: 8px;
445
+ --cobre-select-arrow: 18px;
446
+ --cobre-select-border-radius: 8px;
447
+
448
+ --cobre-select-hover-bg: var(--cobre-primary-7);
449
+ --cobre-select-hover-color: var(--cobre-primary-95);
450
+ --cobre-select-hover-border-color: var(--cobre-primary-30);
451
+
452
+ --cobre-select-active-color: var(--cobre-primary-95);
453
+ --cobre-select-active-border-color: var(--cobre-secondary-50);
454
+
455
+ --cobre-select-active-focus-color: var(--cobre-primary-95);
456
+ --cobre-select-active-focus-shadow: none;
457
+
458
+ --cobre-select-disabled-border: var(--cobre-primary-95);
459
+ --cobre-select-disabled-bg: var(--cobre-primary-10);
460
+ --cobre-select-disabled-color: var(--cobre-primary-50);
461
+
462
+ --cobre-select-selected-bg: var(--cobre-secondary-20);
463
+ --cobre-select-selected-color: var(--cobre-white);
464
+ --cobre-select-selected-input-color: var(--cobre-primary-80);
465
+
466
+ --cobre-select-dropdown-border: var(--cobre-primary-10);
467
+ --cobre-select-dropdown-margin-top: 8px;
468
+ --cobre-select-dropdown-item-height: 37px;
469
+ --cobre-select-dropdown-item-font-size: 14px;
470
+ --cobre-select-dropdown-item-padding: 8px;
471
+ --cobre-select-dropdown-item-color: var(--cobre-primary-80);
472
+ --cobre-select-dropdown-item-disabled-bg: var(--cobre-primary-7);
473
+ --cobel-select-dropdown-item-disabled-color: var(--cobre-primary-40);
474
+ --cobre-select-dropdown-item-active-bg: var(--cobre-secondary-10);
475
+ --cobre-select-dropdown-item-margin: 0px;
476
+
477
+ --cobre-select-add-item-color: var(--cobre-secondary-50);
478
+
479
+ --cobre-select-badge-color: var(--cobre-primary-95);
480
+ }
481
+
482
+ /**
483
+ * Option Switch
484
+ */
42
485
 
43
- --cobre-input-url-top: calc(50% - 10px);
44
- --cobre-input-url-padding-left: 48px;
45
- }
486
+ :root {
487
+ --cobre-option-switch-bg: var(--cobre-primary-5);
488
+ --cobre-option-switch-color: var(--cobre-primary-50);
489
+ --cobre-option-switch-radius: 12px;
490
+ --cobre-option-switch-height: 40px;
491
+ --cobre-option-switch-min-width: 110px;
492
+ --cobre-option-switch-font-size: 14.22px;
493
+ --cobre-option-switch-shadow: none;
46
494
 
495
+ --cobre-option-switch-disabled-bg: var(--cobre-primary-10);
496
+ --cobre-option-switch-disabled-color: var(--cobre-primary-50);
47
497
 
48
- /**
49
- * Input V3
50
- */
498
+ --cobre-option-switch-selected-bg: var(--cobre-secondary-50);
499
+ --cobre-option-switch-selected-color: var(--cobre-white);
500
+ --cobre-option-switch-selected-fw: 400;
51
501
 
52
- :root {
53
- --cobre-input-v3-height: 32px;
54
- --cobre-input-v3-color: var(--cobre-primary-95);
55
- --cobre-input-v3-radius: 4px;
56
- --cobre-input-v3-fw: 400;
57
- --cobre-input-v3-fs: 12px;
58
- --cobre-input-label-disabled-color: var(--cobre-primary-50);
502
+ --cobre-option-switch-desktop-min-width: 160px;
503
+ }
59
504
 
60
- --cobre-input-v3-placeholder-color: var(--cobre-primary-50);
61
- --cobre-input-v3-placeholder-fw: 400 !important;
505
+ /**
506
+ * Modal
507
+ */
62
508
 
63
- --cobre-input-v3-focus-border: 0.5px solid var(--cobre-secondary-50);
64
- --cobre-input-v3-autofill-border: 0.5px solid var(--cobre-secondary-50);
509
+ :root {
510
+ --cobre-modal-border-radius: 8px;
511
+ --cobre-modal-padding: 16px;
512
+ }
65
513
 
66
- --cobre-input-v3-error-border: 0.5px solid var(--cobre-red-50);
67
- --cobre-input-v3-error-color: var(--cobre-red-50);
514
+ /**
515
+ * Modal Step
516
+ */
68
517
 
69
- --cobre-input-v3-optional-label-fs: 12px;
70
- --cobre-input-v3-optional-label-color: var(--cobre-primary-95);
71
- --cobre-input-v3-optional-label-disabled-color: var(--cobre-primary-50);
518
+ :root {
519
+ --cobre-modal-step-bg: var(--cobre-white);
520
+ --cobre-modal-step-header-bg: var(--cobre-white);
521
+ --cobre-modal-step-border-bottom: 1px solid var(--cobre-primary-10);
522
+ --cobre-modal-step-color: var(--cobre-primary-95);
523
+ --cobre-modal-step-close-btn-color: var(--cobre-primary-95);
524
+ --cobre-modal-step-footer-bg: var(--cobre-white);
525
+ }
526
+
527
+ /**
528
+ * OTP Form
529
+ */
72
530
 
73
- // input search
74
- --cobre-input-search-v3-color: var(--cobre-primary-80);
75
- --cobre-input-search-v3-border: 0;
76
- --cobre-input-search-v3-border-bottom: 1px solid var(--cobre-primary-95);
77
- --cobre-input-search-v3-focus-border-bottom: 1px solid var(--cobre-secondary-50);
78
- --cobre-input-search-v3-focus-search-color: var(--cobre-brand);
531
+ :root {
532
+ --cobre-otp-title-box-bg: transparent;
533
+ --cobre-otp-input-box-bg: transparent;
534
+ --cobre-otp-input-box-padding: 0px;
535
+ }
79
536
 
80
- --cobre-input-v3-focus-bg: var(--cobre-white);
81
- --cobre-input-v3-focus-border-bottom: 1px solid var(--cobre-brand);
82
- --cobre-input-v3-focus-search-color: var(--cobre-brand);
83
- --cobre-input-v3-focus-fw: 500;
537
+ /**
538
+ * Error Screen Paths
539
+ */
84
540
 
85
- // theme white
541
+ :root {
542
+ --cobre-error-screen-path-radius: 8px;
543
+ }
86
544
 
87
- --cobre-input-v3-white-bg: var(--cobre-white);
88
- --cobre-input-v3-white-border: 0.5px solid var(--cobre-primary-20);
89
- --cobre-input-v3-white-hover-border: 0.5px solid var(--cobre-primary-95);
90
- --cobre-input-v3-white-hover-bg: var(--cobre-primary-5);
545
+ /**
546
+ * Radio
547
+ */
91
548
 
92
- --cobre-input-v3-white-disabled-bg: var(--cobre-primary-10);
93
- --cobre-input-v3-white-disabled-color: var(--cobre-primary-50);
94
- --cobre-input-v3-white-disabled-border: none;
549
+ :root {
550
+ --cobre-radio-size: 24px;
551
+ --cobre-radio-bg: var(--cobre-primary-10);
552
+ --cobre-radio-border: var(--cobre-primary-20);
553
+ --cobre-radio-disabled-color: var(--cobre-primary-10);
554
+ --cobre-radio-label-color: var(--cobre-primary-95);
555
+ --cobre-radio-label-fw: 600;
556
+ --cobre-radio-label-fs: var(--cobre-label-medium-fs);
557
+ --cobre-radio-description-color: var(--cobre-primary-80);
558
+ --cobre-radio-description-margin: 6px 32px;
559
+ --cobre-radio-description-fs: var(--cobre-label-medium-fs);
560
+
561
+ --cobre-radio-input-checked-bg: var(--cobre-secondary-70);
562
+ --cobre-radio-input-checked-border: 1px solid var(--cobre-secondary-70);
563
+ --cobre-radio-input-checked-hover-bg: var(--cobre-secondary-50);
564
+ --cobre-radio-input-checked-disabled-border: 1px solid var(--cobre-secondary-50);
565
+
566
+ --cobre-radio-input-hover-bg: var(--cobre-secondary-10);
567
+ --cobre-radio-input-hover-border: 1px solid var(--cobre-secondary-10);
568
+
569
+ --cobre-radio-input-disabled-bg: var(--cobre-primary-5);
570
+ }
571
+
572
+ /**
573
+ * Radio Box
574
+ */
95
575
 
96
- --cobre-input-v3-white-active-bg: var(--cobre-white);
97
- --cobre-input-v3-white-active-border: 1px solid var(--cobre-secondary-50);
98
- --cobre-input-v3-white-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
576
+ :root {
577
+ --cobre-radio-box-radius: 12px;
578
+ --cobre-radio-box-bg: var(--cobre-white);
579
+ --cobre-radio-box-border: 1px solid var(--cobre-primary-10);
99
580
 
100
- // theme cloudy
581
+ --cobre-radio-box-active-bg: var(--cobre-secondary-5);
582
+ --cobre-radio-box-active-border: 1px solid var(--cobre-secondary-50);
583
+ }
101
584
 
102
- --cobre-input-v3-cloudy-bg: var(--cobre-white);
103
- --cobre-input-v3-cloudy-border: 0.5px solid var(--cobre-primary-40);
104
- --cobre-input-v3-cloudy-hover-border: 0.5px solid var(--cobre-primary-95);
105
- --cobre-input-v3-cloudy-hover-bg: var(--cobre-primary-10);
585
+ /**
586
+ * Uploader
587
+ */
106
588
 
107
- --cobre-input-v3-cloudy-disabled-bg: var(--cobre-primary-20);
108
- --cobre-input-v3-cloudy-disabled-color: var(--cobre-primary-50);
109
- --cobre-input-v3-cloudy-disabled-border: 0.5px solid var(--cobre-primary-60);
589
+ :root {
590
+ --cobre-uploader-bg: var(--cobre-white);
591
+ --cobre-uploader-color: var(--cobre-primary-60);
592
+ --cobre-uploader-border: 1.5px dashed var(--cobre-primary-50);
593
+ --cobre-uploader-height: 240px;
594
+ --cobre-uploader-radius: 8px;
595
+ --cobre-uploader-disabled-color: var(--cobre-primary-30);
596
+
597
+ --cobre-uploader-icon-color: var(--cobre-primary-95);
598
+ --cobre-uploader-text-color: var(--cobre-primary-30);
599
+ --cobre-uploader-text-disabled-color: var(--cobre-primary-40);
600
+
601
+ --cobre-uploader-disabled-box-bg: var(--cobre-primary-7);
602
+ --cobre-uploader-active-drop-bg: var(--cobre-secondary-5);
603
+ --cobre-uploader-active-drop-color: var(--cobre-secondary-50);
604
+
605
+ --cobre-uploader-drag-area-active-bg: var(--cobre-secondary-5);
606
+ --cobre-uploader-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
607
+ --cobre-uploader-drag-area-disabled-bg: var(--cobre-primary-5);
608
+ --cobre-uploader-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
609
+
610
+ --cobre-uploader-selected-file-border: 1px solid var(--cobre-secondary-50);
611
+ --cobre-uploader-selected-file-bg: var(--cobre-primary-5);
612
+ --cobre-uploader-selected-file-color: var(--cobre-primary-95);
613
+ }
614
+
615
+ /**
616
+ * Checkbox
617
+ */
110
618
 
111
- --cobre-input-v3-cloudy-active-bg: var(--cobre-white);
112
- --cobre-input-v3-cloudy-active-border: 1px solid var(--cobre-secondary-50);
113
- --cobre-input-v3-cloudy-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
114
- }
619
+ :root {
620
+ --cobre-checkbox-size-small: 20px;
621
+ --cobre-checkbox-size-medium: 24px;
622
+ --cobre-checkbox-radius-small: 6px;
623
+ --cobre-checkbox-radius-medium: 8px;
624
+ --cobre-checkbox-bg: var(--cobre-primary-10);
625
+ --cobre-checkbox-border: none;
626
+ --cobre-checkbox-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
115
627
 
628
+ --cobre-checkbox-input-checked-bg: var(--cobre-secondary-50);
629
+ --cobre-checkbox-input-checked-hover-bg: var(--cobre-secondary-70);
116
630
 
117
- /**
118
- * Avatar
119
- */
631
+ --cobre-checkbox-input-hover-bg: var(--cobre-secondary-10);
632
+ --cobre-checkbox-input-hover-box-shadow: 0 0 0 0.5px var(--cobre-secondary-50);
120
633
 
121
- :root {
122
- --cobre-avatar-bg: var(--cobre-secondary-50);
123
- --cobre-avatar-color: var(--cobre-white);
634
+ --cobre-checkbox-input-disabled-bg: var(--cobre-secondary-30);
635
+ }
124
636
 
125
- --cobre-avatar-hover-outline: var(--cobre-border-stroke-XL) solid var(--cobre-secondary-30);
637
+ /**
638
+ * Stepper
639
+ */
126
640
 
127
- --cobre-avatar-small: 24px;
128
- --cobre-avatar-medium: 32px;
129
- --cobre-avatar-large: 40px;
130
- }
641
+ :root {
642
+ --cobre-stepper-progress-bg: var(--cobre-primary-20);
643
+ --cobre-stepper-progress-height: 2px;
644
+
645
+ --cobre-stepper-progress-bar-bg: var(--cobre-secondary-50);
646
+
647
+ --cobre-stepper-item-color: var(--cobre-primary-20);
648
+ --cobre-stepper-item-counter-bg: var(--cobre-primary-10);
649
+ --cobre-stepper-item-counter-color: var(--cobre-primary-40);
650
+ --cobre-stepper-item-counter-radius: 100%;
651
+ --cobre-stepper-item-counter-size: 24px;
652
+
653
+ --cobre-stepper-item-success-color: var(--cobre-secondary-50);
654
+ --cobre-stepper-item-success-counter-border-color: var(--cobre-secondary-50);
655
+ --cobre-stepper-item-success-counter-bg: var(--cobre-secondary-50);
656
+ --cobre-stepper-item-success-counter-color: var(--cobre-white);
657
+
658
+ --cobre-stepper-item-current-item-title-color: var(--cobre-secondary-50);
659
+ --cobre-stepper-item-current-counter-border-color: var(--cobre-secondary-50);
660
+ --cobre-stepper-item-current-counter-bg: var(--cobre-secondary-50);
661
+ --cobre-stepper-item-current-counter-color: var(--cobre-white);
662
+ --cobre-stepper-item-current-counter-outline: 2px solid var(--cobre-secondary-20);
663
+ --cobre-stepper-item-current-counter-shadow: 0px 4px 4px var(--cobre-primary-20);
664
+ }
665
+
666
+ /**
667
+ * Switch
668
+ */
131
669
 
132
- /**
133
- * BADGES
134
- */
670
+ :root {
671
+ --cobre-switch-bg: var(--cobre-primary-40);
672
+ --cobre-switch-point-bg: var(--cobre-white);
673
+ --cobre-switch-hover-bg: var(--cobre-primary-60);
674
+ --cobre-switch-border-hover-color: var(--cobre-primary-60);
675
+ --cobre-switch-shadow: 0 0 8px rgba(99, 97, 95, 0.5);
676
+ --cobre-switch-border-color: var(--cobre-primary-40);
677
+
678
+ --cobre-switch-checked-bg: var(--cobre-secondary-50);
679
+ --cobre-switch-point-checked-bg: var(--cobre-white);
680
+ --cobre-switch-checked-disabled-bg: var(--cobre-secondary-30);
681
+ --cobre-switch-checked-disabled-border-color: var(--cobre-secondary-30);
682
+ --cobre-switch-checked-hover-bg: var(--cobre-secondary-70);
683
+ --cobre-switch-checked-border-hover-color: var(--cobre-secondary-70);
684
+ --cobre-switch-checked-shadow: 0 0 8px rgba(31, 93, 93, 0.5);
685
+ --cobre-switch-checked-border-color: var(--cobre-secondary-50);
686
+
687
+ --cobre-switch-disabled-bg: var(--cobre-primary-20);
688
+ --cobre-switch-point-disabled-bg: var(--cobre-white);
689
+ --cobre-switch-disabled-label-color: var(--cobre-primary-40);
690
+ --cobre-switch-disabled-border-color: var(--cobre-primary-20);
691
+ }
692
+
693
+ /**
694
+ * Calendar
695
+ */
696
+
697
+ :root {
698
+ --cobre-calendar-day-today-color: var(--cobre-primary-95);
699
+ --cobre-calendar-day-today-selected-color: var(--cobre-primary-40);
700
+ --cobre-calendar-color: var(--cobre-brand);
701
+ --cobre-calendar-color-light: var(--cobre-brand-light);
702
+
703
+ --cobre-calendar-menu-padding: 10px;
704
+
705
+ --cobre-calendar-input-height: 40px;
706
+ --cobre-calendar-input-radius: 8px;
707
+ --cobre-calendar-input-border: 1px solid var(--cobre-primary-20);
708
+ --cobre-calendar-input-font-size: var(--cobre-label-medium-fs);
709
+ --cobre-calendar-input-readonly-bg: var(--cobre-primary-5);
710
+ --cobre-calendar-input-readonly-border-color: var(--cobre-primary-20);
711
+ --cobre-calendar-input-readonly-color: var(--cobre-primary-40);
712
+ --cobre-calendar-input-hover-border-color: var(--cobre-calendar-color);
713
+
714
+ --cobre-calendar-cell-font-size: 13px;
715
+ --cobre-calendar-cell-range-start-radius: 20px 0 0 20px;
716
+ --cobre-calendar-cell-range-start-bg: var(--cobre-calendar-color);
717
+ --cobre-calendar-cell-range-end-radius: 0 20px 20px 0;
718
+ --cobre-calendar-cell-range-end-bg: var(--cobre-calendar-color);
719
+ --cobre-calendar-cell-range-between-bg: var(--cobre-calendar-color-light);
720
+ --cobre-calendar-cell-active-bg: var(--cobre-calendar-color);
721
+ --cobre-calendar-cell-active-color: var(--cobre-white);
722
+ --cobre-calendar-cell-active-radius: 20px;
723
+ --cobre-calendar-cell-today-radius: 20px;
724
+ --cobre-calendar-cell-today-border-width: 2px;
725
+ --cobre-calendar-cell-today-color: var(--cobre-calendar-day-today-color);
726
+ --cobre-calendar-cell-today-border: 2px solid var(--cobre-calendar-color);
727
+ --cobre-calendar-range-end-today-color: var(--cobre-calendar-day-today-selected-color);
728
+
729
+ --cobre-calendar-disabled-bg: var(--cobre-primary-5);
730
+ --cobre-calendar-disabled-border-color: var(--cobre-primary-20);
731
+ --cobre-calendar-disabled-color: var(--cobre-primary-40);
732
+
733
+ --cobre-calendar-overlay-bg: var(--cobre-calendar-color);
734
+ --cobre-calendar-overlay-color: var(--cobre-white);
735
+ }
736
+
737
+ /**
738
+ * Alert
739
+ */
135
740
 
136
- :root {
137
- --cobre-badge-radius: var(--cobre-radius-XS);
138
- --cobre-badge-font-size: var(--cobre-label-small-fs);
139
- --cobre-badge-padding-x: 4px;
140
- --cobre-badge-padding-y: 0px;
141
- --cobre-badge-height: 20px;
741
+ :root {
742
+ --cobre-alert-radius: 8px;
743
+ --cobre-alert-padding: 14px;
744
+ --cobre-alert-color: var(--cobre-primary-80);
142
745
 
143
- --cobre-badge-neutral-bg: var(--cobre-primary-5);
144
- --cobre-badge-neutral-color: var(--cobre-primary-80);
746
+ --cobre-alert-warning-bg: var(--cobre-yellow-10);
747
+ --cobre-alert-warning-icon-color: var(--cobre-yellow-50);
748
+ --cobre-alert-warning-border: 1px solid var(--cobre-yellow-10);
145
749
 
146
- --cobre-badge-success-bg: var(--cobre-green-10);
147
- --cobre-badge-success-border: none;
148
- --cobre-badge-success-color: var(--cobre-green-50);
750
+ --cobre-alert-success-bg: var(--cobre-green-10);
751
+ --cobre-alert-success-icon-color: var(--cobre-green-50);
752
+ --cobre-alert-success-border: 1px solid var(--cobre-green-10);
149
753
 
150
- --cobre-badge-info-bg: var(--cobre-blue-10);
151
- --cobre-badge-info-border: none;
152
- --cobre-badge-info-color: var(--cobre-blue-50);
754
+ --cobre-alert-info-bg: var(--cobre-blue-10);
755
+ --cobre-alert-info-icon-color: var(--cobre-blue-50);
756
+ --cobre-alert-info-border: 1px solid var(--cobre-blue-10);
153
757
 
154
- --cobre-badge-warning-bg: var(--cobre-yellow-10);
155
- --cobre-badge-warning-border: none;
156
- --cobre-badge-warning-color: var(--cobre-yellow-10);
758
+ --cobre-alert-error-bg: var(--cobre-red-10);
759
+ --cobre-alert-error-icon-color: var(--cobre-red-50);
760
+ --cobre-alert-error-border: 1px solid var(--cobre-red-10);
157
761
 
158
- --cobre-badge-error-bg: var(--cobre-red-10);
159
- --cobre-badge-error-border: none;
160
- --cobre-badge-error-color: var(--cobre-red-50);
762
+ --cobre-alert-transp-icon-color: var(--cobre-primary-50);
161
763
 
162
- --cobre-badge-outline-bg: var(--cobre-white);
163
- --cobre-badge-outline-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-40);
164
- --cobre-badge-outline-color: var(--cobre-primary-80);
165
- }
166
764
 
167
- /**
168
- * TABS
765
+ }
766
+
767
+ /**
768
+ * Input
169
769
  */
170
770
 
171
- :root {
172
- --cobre-tabs-bg: transparent;
173
- --cobre-tabs-border: var(--cobre-border-stroke-L) solid transparent;
174
- --cobre-tabs-color: var(--cobre-primary-80);
175
- --cobre-tabs-font-weight: 400;
176
- --cobre-tabs-font-size: var(--cobre-label-medium-fs);
177
- --cobre-tabs-radius: 0px;
178
- --cobre-tabs-padding: 8px 0px;
179
- --cobre-tabs-margin: 8px;
180
- --cobre-tabs-height: auto;
181
-
182
- --cobre-tabs-hover-bg: transparent;
183
- --cobre-tabs-hover-border: var(--cobre-border-stroke-L) solid var(--cobre-seconday-50);
184
- --cobre-tabs-hover-color: var(--cobre-secondary-50);
185
- --cobre-tabs-hover-radius: 0px;
186
- --cobre-tabs-counter-hover-bg: var(--cobre-secondary-70);
187
- --cobre-tabs-counter-hover-color: var(--cobre-secondary-10);
188
-
189
- // Active (Selected)
190
- --cobre-tabs-active-bg: transparent;
191
- --cobre-tabs-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95);
192
- --cobre-tabs-active-color: var(--cobre-primary-95);
193
- --cobre-tabs-active-font-weight: 500;
194
- --cobre-tabs-active-radius: 0px;
195
-
196
- // Pressed (Selected)
197
- --cobre-tabs-pressed-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-80);
198
- --cobre-tabs-pressed-color: var(--cobre-secondary-80);
199
-
200
- // Disabled
201
- --cobre-tabs-disabled-bg: transparent;
202
- --cobre-tabs-disabled-border: none;
203
- --cobre-tabs-disabled-color: var(--cobre-primary-40);
204
- --cobre-tabs-disabled-radius: 0px;
205
- }
771
+ :root {
772
+ --cobre-input-height: 40px;
773
+ --cobre-input-bg: var(--cobre-white);
774
+ --cobre-input-color: var(--cobre-primary-80);
775
+ --cobre-input-fw: 400;
776
+ --cobre-input-border: 1px solid var(--cobre-primary-20);
777
+ --cobre-input-placeholder-color: #bfbfc1;
778
+ --cobre-input-placeholder-fw: 400;
779
+ --cobre-input-radius: 8px;
780
+ --cobre-input-fs: 16px;
781
+ --cobre-optional-label-fs: 14.22px;
206
782
 
207
- /**
208
- * ACTION LIST
209
- */
783
+ --cobre-input-error-border: 1px solid var(--cobre-red-60);
784
+ --cobre-input-error-color: var(--cobre-red-60);
785
+ --cobre-input-error-fs: 12.6px;
210
786
 
211
- :root {
212
- --cobre-action-list-bg: var(--cobre-white);
213
- --cobre-action-list-shadow: 0px 4px 4px 0px rgba(40, 40, 43, 0.02);
214
- --cobre-action-list-radius: 8px;
215
- --cobre-action-list-width: 224px;
216
- --cobre-action-list-header-padding: 12px 4px 0px 4px;
217
- --cobre-action-list-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
218
-
219
-
220
- // Item Icon
221
- --cobre-action-list-icon-wrap-bg: transparent;
222
- --cobre-action-list-icon-wrap-radius: none;
223
- --cobre-action-list-icon-wrap-padding: 0;
224
- --cobre-action-list-icon-wrap-size: 20px;
225
- --cobre-action-list-icon-wrap-disabled-bg: var(--cobre-primary-10);
226
- --cobre-action-list-item-padding: 8px;
227
- --cobre-action-list-item-margin: 4px;
228
- --cobre-action-list-icon-color: var(--cobre-gray-95);
229
- --cobre-action-list-icon-disabled-color: var(--cobre-gray-30);
230
-
231
- // Item
232
- --cobre-action-list-item-bg: var(--cobre-white);
233
- --cobre-action-list-item-color: var(--cobre-primary-80);
234
- --cobre-action-list-item-font-color: var(--cobre-primary-80);
235
- --cobre-action-list-item-font-size: var(--cobre-body-medium-fs);
236
- --cobre-action-list-item-font-line-height: var(--cobre-body-medium-lh);
237
- --cobre-action-list-item-font-letter-spacing: var(--cobre-body-medium-ls);
238
- --cobre-action-list-item-font-weight: 400;
239
- --cobre-action-list-item-radius: 4px;
240
-
241
- --cobre-row-hover-bg: var(--cobre-gray-10);
242
- --cobre-action-list-item-hover-color: initial;
243
-
244
- --cobre-action-list-item-focus-bg: var(--cobre-gray-30);
245
- --cobre-action-list-item-focus-color: initial;
246
-
247
- --cobre-action-list-item-active-bg: var(--cobre-gray-30);
248
- --cobre-action-list-item-active-color: initial;
249
- }
787
+ --cobre-input-focus-border: 1px solid (--cobre-secondary-50);
788
+ --cobre-input-focus-shadow: 0 0 0 0.25rem #21212140;
789
+ --cobre-input-focus-color: #202223;
790
+ --cobre-input-focus-bg: var(--cobre-white);
250
791
 
251
- /**
252
- * Modal
253
- */
792
+ --cobre-input-hover-border: 1px solid var(--cobre-primary-20);
793
+ --cobre-input-hover-bg: var(--cobre-white);
254
794
 
255
- :root {
256
- --cobre-modal-padding: 24px;
257
- }
795
+ --cobre-input-disabled-color: var(--cobre-primary-20);
796
+ --cobre-input-disabled-bg: var(--cobre-primary-7);
797
+ --cobre-input-disabled-border: 1px solid var(--cobre-primary-20);
258
798
 
259
- /**
260
- * Radio
261
- */
799
+ --cobre-input-active-border: 1px solid var(--cobre-primary-20);
800
+ --cobre-input-active-bg: var(--cobre-white);
262
801
 
263
- :root {
264
- --cobre-radio-label-fw: 500;
265
- --cobre-radio-label-fs: var(--cobre-label-small-fs);
266
- --cobre-radio-size: 14px;
267
- --cobre-radio-bg: var(--cobre-white);
268
- --cobre-radio-border: var(--cobre-primary-20);
269
- --cobre-radio-description-fs: var(--cobre-label-small-fs);
270
- --cobre-radio-description-color: var(--cobre-primary-80);
271
- --cobre-radio-description-margin: 4px 23px;
272
- }
802
+ --cobre-input-autofill-border: 1px solid var(--cobre-primary-20);
273
803
 
804
+ --cobre-input-label-fw: 400;
805
+ --cobre-input-label-color: var(--cobre-primary-40);
806
+ --cobre-input-label-disabled-color: var(--cobre-primary-60);
807
+ --cobre-input-label-fs: var(--cobre-body-medium-fs);
274
808
 
275
- // V3
809
+ --cobre-input-url-top: calc(50% - 14px);
810
+ --cobre-input-url-padding-left: 59px;
276
811
 
277
- /**
278
- * BUTTONS V3
279
- */
280
-
281
- :root {
282
- // Generals
283
- --cobre-btn-v3-radius: 999px;
284
- --cobre-btn-v3-font-family: 'Inter', sans-serif;
285
- --cobre-btn-v3-font-size: 14px;
286
- --cobre-btn-v3-small-font-size: 12px;
287
- --cobre-btn-v3-padding: 0 8px;
288
-
289
- // By Sizes
290
- --cobre-btn-v3-small-height: 32px;
291
- --cobre-btn-v3-medium-height: 32px;
292
- --cobre-btn-v3-big-height: 52px;
293
- --cobre-btn-v3-icon-small: 16px;
294
- --cobre-btn-v3-icon-medium: 20px;
295
-
296
- // Primary
297
- --cobre-btn-v3-primary-bg: var(--cobre-primary-95);
298
- --cobre-btn-v3-primary-color: var(--cobre-primary-10);
299
- --cobre-btn-v3-primary-hover-bg: var(--cobre-primary-90);
300
- --cobre-btn-v3-primary-active-bg: var(--cobre-primary-90);
301
- --cobre-btn-v3-primary-focus-bg: var(--cobre-primary-95);
302
- --cobre-btn-v3-primary-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
303
- --cobre-btn-v3-primary-disabled-bg: var(--cobre-primary-50);
304
-
305
- // Secondary
306
- --cobre-btn-v3-secondary-bg: transparent;
307
- --cobre-btn-v3-secondary-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-95);
308
- --cobre-btn-v3-secondary-color: var(--cobre-primary-95);
309
- --cobre-btn-v3-secondary-hover-bg: var(--cobre-primary-10);
310
- --cobre-btn-v3-secondary-active-bg: var(--cobre-primary-20);
311
- --cobre-btn-v3-secondary-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95);
312
- --cobre-btn-v3-secondary-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
313
- --cobre-btn-v3-secondary-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
314
- --cobre-btn-v3-secondary-disabled-color: var(--cobre-primary-50);
315
- --cobre-btn-v3-secondary-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-50);
316
-
317
- // Secondary Cloudy
318
- --cobre-btn-v3-secondary-cloudy-bg: transparent;
319
- --cobre-btn-v3-secondary-cloudy-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-95);
320
- --cobre-btn-v3-secondary-cloudy-color: var(--cobre-primary-95);
321
- --cobre-btn-v3-secondary-cloudy-hover-bg: var(--cobre-primary-20);
322
- --cobre-btn-v3-secondary-cloudy-active-bg: var(--cobre-primary-30);
323
- --cobre-btn-v3-secondary-cloudy-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95);
324
- --cobre-btn-v3-secondary-cloudy-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
325
- --cobre-btn-v3-secondary-cloudy-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
326
- --cobre-btn-v3-secondary-cloudy-disabled-color: var(--cobre-primary-50);
327
- --cobre-btn-v3-secondary-cloudy-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-50);
328
-
329
- // Ghost
330
- --cobre-btn-v3-ghost-bg: transparent;
331
- --cobre-btn-v3-ghost-color: var(--cobre-primary-80);
332
- --cobre-btn-v3-ghost-hover-bg: transparent;
333
- --cobre-btn-v3-ghost-hover-color: var(--cobre-secondary-50);
334
- --cobre-btn-v3-ghost-active-color: var(--cobre-secondary-90);
335
- --cobre-btn-v3-ghost-focus-color: var(--cobre-secondary-80);
336
- --cobre-btn-v3-ghost-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
337
- --cobre-btn-v3-ghost-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
338
- --cobre-btn-v3-ghost-disabled-color: var(--cobre-secondary-50);
339
-
340
- // Link
341
- --cobre-btn-v3-link-bg: transparent;
342
- --cobre-btn-v3-link-color: var(--cobre-secondary-50);
343
- --cobre-btn-v3-link-fw: 500;
344
- --cobre-btn-v3-link-hover-bg: transparent;
345
- --cobre-btn-v3-link-hover-color: var(--cobre-secondary-80);
346
- --cobre-btn-v3-link-active-color: var(--cobre-secondary-70);
347
- --cobre-btn-v3-link-focus-color: var(--cobre-secondary-50);
348
- --cobre-btn-v3-link-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
349
- --cobre-btn-v3-link-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
350
- --cobre-btn-v3-link-disabled-color: var(--cobre-secondary-40);
351
-
352
- // Filter
353
- --cobre-btn-v3-filter-radius: var(--cobre-radius-XS);
354
- --cobre-btn-v3-filter-bg: var(--cobre-white);
355
- --cobre-btn-v3-filter-color: var(--cobre-primary-80);
356
- --cobre-btn-v3-filter-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
357
- --cobre-btn-v3-filter-padding: 0 8px;
358
- --cobre-btn-v3-filter-height: 24px;
359
- --cobre-btn-v3-filter-fs: var(--cobre-label-small-fs);
360
- --cobre-btn-v3-filter-lh: var(--cobre-label-small-lh);
361
- --cobre-btn-v3-filter-hover-bg: var(--cobre-primary-10);
362
- --cobre-btn-v3-filter-active-bg: var(--cobre-primary-30);
363
- --cobre-btn-v3-filter-focus-bg: var(--cobre-secondary-5);
364
- --cobre-btn-v3-filter-focus-border-color: var(--cobre-secondary-50);
365
-
366
- // Icon
367
- --cobre-btn-v3-icon-fs: transparent;
368
- --cobre-btn-v3-icon-bg: transparent;
369
- --cobre-btn-v3-icon-color: var(--cobre-primary-95);
370
- --cobre-btn-v3-icon-radius: var(--cobre-radius-full);
371
- --cobre-btn-v3-icon-hover-bg: var(--cobre-primary-10);
372
- --cobre-btn-v3-icon-active-bg: var(--cobre-primary-20);
373
- --cobre-btn-v3-icon-focus-border: 1px solid var(--cobre-brand);
374
- --cobre-btn-v3-icon-focus-box-shadow: 0 0 0 2px #A8C5C4;
375
- --cobre-btn-v3-icon-disabled-color: var(--cobre-primary-50);
376
-
377
- // Icon cloudy
378
- --cobre-btn-v3-icon-cloudy-fs: transparent;
379
- --cobre-btn-v3-icon-cloudy-bg: transparent;
380
- --cobre-btn-v3-icon-cloudy-color: var(--cobre-primary-95);
381
- --cobre-btn-v3-icon-cloudy-radius: var(--cobre-radius-full);
382
- --cobre-btn-v3-icon-cloudy-hover-bg: var(--cobre-primary-20);
383
- --cobre-btn-v3-icon-cloudy-active-bg: var(--cobre-primary-30);
384
- --cobre-btn-v3-icon-cloudy-focus-border: 1px solid var(--cobre-brand);
385
- --cobre-btn-v3-icon-cloudy-focus-box-shadow: 0 0 0 2px var(--cobre-secondary-20);
386
- --cobre-btn-v3-icon-cloudy-disabled-color: var(--cobre-primary-50);
387
-
388
- // Search
389
- --cobre-btn-v3-search-radius: 4px;
390
- --cobre-btn-v3-search-fz: 12px;
391
- --cobre-btn-v3-search-bg: transparent;
392
- --cobre-btn-v3-search-color: var(--cobre-primary-80);
393
- --cobre-btn-v3-search-hover-bg: var(--cobre-primary-10);
394
- --cobre-btn-v3-search-hover-color: var(--cobre-primary-80);
395
-
396
- // Primary Warning
397
- --cobre-btn-v3-primary-warning-bg: var(--cobre-red-50);
398
- --cobre-btn-v3-primary-warning-color: var(--cobre-gray-5);
399
- --cobre-btn-v3-primary-warning-hover-bg: var(--cobre-red-60);
400
- --cobre-btn-v3-primary-warning-active-bg: var(--cobre-red-70);
401
- --cobre-btn-v3-primary-warning-focus-bg: var(--cobre-red-50);
402
- --cobre-btn-v3-primary-warning-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
403
- --cobre-btn-v3-primary-warning-disabled-bg: var(--cobre-red-40);
404
- }
812
+ }
405
813
 
406
- /**
407
- * CHIPS V3
408
- */
814
+ /**
815
+ * Avatar
816
+ */
409
817
 
410
- :root {
411
- --cobre-chips-disabled-color: var(--cobre-primary-50);
412
- --cobre-chips-divider-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
413
- --cobre-chips-button-color: var(--cobre-primary-80);
414
- --cobre-chips-button-disabled-color: var(--cobre-primary-50);
415
- }
818
+ :root {
819
+ --cobre-avatar-bg: #9C3314; // TODO: Migrate to variable when new colors palette is ready
820
+ --cobre-avatar-color: var(--cobre-white);
416
821
 
417
- /**
418
- * HEADER V3
419
- */
822
+ --cobre-avatar-disabled-bg: var(--cobre-primary-10);
823
+ --cobre-avatar-disabled-color: var(--cobre-primary-40);
824
+ --cobre-avatar-disabled-border: 1px dashed var(--cobre-primary-20);
420
825
 
421
- :root {
422
- --cobre-header-v3-padding: 4px 0px 4px 0px;
423
- --cobre-header-v3-background: var(--cobre-white);
424
- --cobre-header-v3-height: 48px;
425
- }
826
+ --cobre-avatar-empty-bg: var(--cobre-primary-20);
827
+ --cobre-avatar-empty-color: var(--cobre-primary-40);
828
+ --cobre-avatar-empty-border: 1px dashed var(--cobre-primary-10);
426
829
 
427
- /**
428
- * SIDEMENU
429
- */
430
-
431
- :root {
432
- --cobre-side-menu-bg: var(--cobre-primary-95);
433
- --cobre-side-menu-divider-color: var(--cobre-border-stroke-L) solid var(--cobre-primary-50);
434
- --cobre-side-menu-color: var(--cobre-primary-30);
435
- --cobre-side-menu-item-bg: var(--cobre-primary-95);
436
- --cobre-side-menu-active-bg: var(--cobre-primary-90);
437
- --cobre-side-menu-active-color: var(--cobre-primary-20);
438
- --cobre-side-menu-focus-bg: var(--cobre-primary-90);
439
- --cobre-side-menu-focus-color: var(--cobre-primary-20);
440
- --cobre-side-menu-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-20);
441
- --cobre-side-menu-hover-bg: var(--cobre-primary-80);
442
- --cobre-side-menu-hover-color: var(--cobre-primary-20);
443
- --cobre-side-menu-disabled-color: var(--cobre-primary-50);
444
- --cobre-side-menu-item-padding: 12px 8px;
445
- --cobre-side-menu-item-width: 173px;
446
- --cobre-side-menu-item-height: 40px;
447
- --cobre-side-menu-item-radius: var(--cobre-radius-S);
448
-
449
- --cobre-side-menu-option-bg: var(--cobre-gray-90);
450
- --cobre-side-menu-option-color: var(--cobre-primary-5);
451
- --cobre-side-menu-option-padding: 4px 8px;
452
- --cobre-side-menu-option-height: 40px;
453
- --cobre-side-menu-option-radius: 8px;
454
-
455
- --cobre-side-menu-option-active-bg: var(--cobre-primary-80);
456
- --cobre-side-menu-option-active-color: var(--cobre-gray-10);
457
-
458
- --cobre-side-menu-option-hover-bg: var(--cobre-primary-80);
459
- --cobre-side-menu-option-hover-color: var(--cobre-primary-10);
460
- --cobre-side-menu-option-focus-border: 1px solid var(--cobre-secondary-20);
461
- }
830
+ --cobre-avatar-hover-outline: none;
462
831
 
832
+ --cobre-avatar-small: 24px;
833
+ --cobre-avatar-medium: 32px;
834
+ --cobre-avatar-large: 40px;
835
+ }
463
836
 
464
- /**
465
- * Empty state
466
- */
837
+ /**
838
+ * Avatar Group
839
+ */
467
840
 
468
- :root {
469
- --cobre-empty-state-v3-color: var(--cobre-gray-95);
470
- }
841
+ :root {
842
+ --cobre-avatar-group-first-bg: #9C3314; // TODO: Migrate to variable when new colors palette is ready
843
+ --cobre-avatar-group-second-bg: #9ECBEC; // TODO: Migrate to variable when new colors palette is ready
844
+ }
471
845
 
472
- /**
473
- * Calendar
474
- */
846
+ /**
847
+ * Timeline
848
+ */
475
849
 
476
- :root {
477
- --dp-font-family: var(--cobre-font-family);
478
- --cobre-calendar-day-today-color: var(--cobre-gray-95);
479
- --cobre-calendar-day-today-selected-color: var(--cobre-primary-40);
480
- --cobre-calendar-color: var(--cobre-brand);
481
- --cobre-calendar-color-light: var(--cobre-brand-light);
482
-
483
- --cobre-calendar-menu-padding: 8px;
484
-
485
- --cobre-calendar-input-height: 40px;
486
- --cobre-calendar-input-radius: var(--cobre-radius-S);
487
- --cobre-calendar-input-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-20);
488
- --cobre-calendar-input-font-size: var(--cobre-label-medium-fs);
489
- --cobre-calendar-input-readonly-bg: var(--cobre-primary-5);
490
- --cobre-calendar-input-readonly-border-color: var(--cobre-primary-20);
491
- --cobre-calendar-input-readonly-color: var(--cobre-primary-40);
492
- --cobre-calendar-input-hover-border-color: var(--cobre-calendar-color);
493
-
494
- --cobre-calendar-cell-font-size: var(--cobre-label-small-fs);
495
- --cobre-calendar-cell-range-start-radius: 20px 0 0 20px;
496
- --cobre-calendar-cell-range-start-bg: var(--cobre-calendar-color);
497
- --cobre-calendar-cell-range-end-radius: 0 20px 20px 0;
498
- --cobre-calendar-cell-range-end-bg: var(--cobre-calendar-color);
499
- --cobre-calendar-cell-range-between-bg: var(--cobre-calendar-color-light);
500
- --cobre-calendar-cell-active-bg: var(--cobre-calendar-color);
501
- --cobre-calendar-cell-active-color: var(--cobre-white);
502
- --cobre-calendar-cell-active-radius: 20px;
503
- --cobre-calendar-cell-today-radius: 20px;
504
- --cobre-calendar-cell-today-border-width: 2px;
505
- --cobre-calendar-cell-today-color: var(--cobre-calendar-day-today-color);
506
- --cobre-calendar-cell-today-border: var(--cobre-border-stroke-XL) solid var(--cobre-calendar-color);
507
- --cobre-calendar-range-end-today-color: var(--cobre-calendar-day-today-selected-color);
508
-
509
- --cobre-calendar-disabled-bg: var(--cobre-primary-5);
510
- --cobre-calendar-disabled-border-color: var(--cobre-primary-20);
511
- --cobre-calendar-disabled-color: var(--cobre-primary-40);
512
-
513
- --cobre-calendar-overlay-bg: var(--cobre-calendar-color);
514
- --cobre-calendar-overlay-color: var(--cobre-white);
515
- }
850
+ :root {
851
+ --cobre-timeline-line-bg: var(--cobre-primary-20);
852
+ }
516
853
 
854
+ /**
855
+ * Accordion
856
+ */
517
857
 
518
- /**
519
- * Card v3
520
- */
858
+ :root {
859
+ --cobre-accordion-border-radius: 8px;
860
+ }
521
861
 
522
- :root {
523
- --cobre-card-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
524
- --cobre-card-border-radius: var(--cobre-radius-S);
525
- --cobre-card-padding: 24px;
526
862
 
527
- --cobre-card-header-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
528
- --cobre-card-header-padding: 24px;
863
+ /**
864
+ * SideMenu
865
+ */
529
866
 
530
- --cobre-card-content-padding: 24px 0 0 0;
531
- }
867
+ :root {
868
+ --cobre-side-menu-bg: var(--cobre-primary-95);
869
+ --cobre-side-menu-divider-color: 1px solid var(--cobre-primary-60);
870
+ --cobre-side-menu-color: var(--cobre-primary-30);
871
+ --cobre-side-menu-item-bg: var(--cobre-primary-95);
872
+ --cobre-side-menu-active-bg: var(--cobre-primary-90);
873
+ --cobre-side-menu-active-color: var(--cobre-primary-20);
874
+ --cobre-side-menu-focus-bg: var(--cobre-primary-90);
875
+ --cobre-side-menu-focus-color: var(--cobre-primary-20);
876
+ --cobre-side-menu-focus-border: 1px solid var(--cobre-primary-20);
877
+ --cobre-side-menu-hover-bg: var(--cobre-primary-40);
878
+ --cobre-side-menu-hover-color: var(--cobre-primary-20);
879
+ --cobre-side-menu-disabled-color: var(--cobre-primary-50);
880
+ --cobre-side-menu-item-padding: 12px 8px;
881
+ --cobre-side-menu-item-width: 173px;
882
+ --cobre-side-menu-item-height: 40px;
883
+ --cobre-side-menu-item-radius: 8px;
884
+
885
+ --cobre-side-menu-option-bg: var(--cobre-primary-90);
886
+ --cobre-side-menu-option-color: var(--cobre-primary-95);
887
+ --cobre-side-menu-option-padding: 4px 8px;
888
+ --cobre-side-menu-option-height: 40px;
889
+ --cobre-side-menu-option-radius: 8px;
890
+
891
+ --cobre-side-menu-option-active-bg: var(--cobre-primary-80);
892
+ --cobre-side-menu-option-active-color: var(--cobre-primary-10);
893
+
894
+ --cobre-side-menu-option-hover-bg: var(--cobre-primary-80);
895
+ --cobre-side-menu-option-hover-color: var(--cobre-primary-10);
896
+ --cobre-side-menu-option-focus-border: 1px solid var(--cobre-secondary-20);
897
+ }
898
+
899
+ /**
900
+ * Header V3
901
+ */
532
902
 
533
- /**
534
- * Flow Result v3
535
- */
903
+ :root {
904
+ --cobre-header-v3-background: var(--cobre-white);
905
+ --cobre-header-v3-height: 48px;
906
+ }
536
907
 
537
- :root {
538
- --cobre-flow-result-border-bottom: var(--cobre-gray-20);
539
908
 
540
- // Danger
541
- --cobre-flow-result-danger-bg: var(--cobre-red-10);
542
- --cobre-flow-result-danger-color: var(--cobre-red-50);
909
+ /**
910
+ * Input V3
911
+ */
543
912
 
544
- // Success
545
- --cobre-flow-result-success-bg: var(--cobre-green-10);
546
- --cobre-flow-result-success-color: var(--cobre-green-50);
913
+ :root {
914
+ --cobre-input-v3-height: 32px;
915
+ --cobre-input-v3-color: var(--cobre-primary-95);
916
+ --cobre-input-v3-radius: 4px;
917
+ --cobre-input-v3-fw: 400;
918
+ --cobre-input-v3-fs: 12px;
547
919
 
548
- // Info
549
- --cobre-flow-result-info-bg: var(--cobre-blue-10);
550
- --cobre-flow-result-info-color: var(--cobre-blue-50);
920
+ --cobre-input-v3-placeholder-color: var(--cobre-primary-50);
921
+ --cobre-input-v3-placeholder-fw: 400 !important;
551
922
 
552
- // Warning
553
- --cobre-flow-result-warning-bg: var(--cobre-yellow-10);
554
- --cobre-flow-result-warning-color: var(--cobre-yellow-50);
923
+ --cobre-input-v3-focus-border: 0.5px solid var(--cobre-secondary-50);
924
+ --cobre-input-v3-autofill-border: 0.5px solid var(--cobre-secondary-50);
555
925
 
556
- // Logout
557
- --cobre-flow-result-logout-bg: var(--cobre-blue-10);
558
- --cobre-flow-result-logout-color: var(--cobre-blue-50);
926
+ --cobre-input-v3-error-border: 0.5px solid var(--cobre-red-50);
927
+ --cobre-input-v3-error-color: var(--cobre-red-50);
559
928
 
560
- // Otp
561
- --cobre-flow-result-otp-bg: var(--cobre-blue-10);
562
- --cobre-flow-result-otp-color: var(--cobre-blue-50);
563
- }
929
+ --cobre-input-v3-optional-label-fs: 12px;
930
+ --cobre-input-v3-optional-label-color: var(--cobre-primary-95);
931
+ --cobre-input-v3-optional-label-disabled-color: var(--cobre-primary-50);
564
932
 
565
- /**
566
- * Options Switch
567
- */
933
+ // input search
934
+ --cobre-input-search-v3-color: var(--cobre-primary-80);
935
+ --cobre-input-search-v3-border: 0;
936
+ --cobre-input-search-v3-border-bottom: 1px solid var(--cobre-primary-95);
937
+ --cobre-input-search-v3-focus-border-bottom: 1px solid var(--cobre-secondary-50);
938
+ --cobre-input-search-v3-focus-search-color: var(--cobre-brand);
568
939
 
569
- :root {
570
- --cobre-option-switch-bg: var(--cobre-gray-5);
571
- --cobre-option-switch-color: var(--cobre-gray-80);
572
- --cobre-option-switch-radius: 8px;
573
- --cobre-option-switch-height: 32px;
574
- --cobre-option-switch-min-width: 110px;
575
- --cobre-option-switch-font-size: 12px;
576
- --cobre-option-switch-shadow: none;
940
+ --cobre-input-v3-focus-bg: var(--cobre-white);
941
+ --cobre-input-v3-focus-border-bottom: 1px solid var(--cobre-brand);
942
+ --cobre-input-v3-focus-search-color: var(--cobre-brand);
943
+ --cobre-input-v3-focus-fw: 500;
577
944
 
578
- --cobre-option-switch-selected-bg: var(--cobre-white);
579
- --cobre-option-switch-selected-color: var(--cobre-gray-80);
580
- --cobre-option-switch-selected-fw: 400;
945
+ // theme white
581
946
 
582
- --cobre-option-switch-disabled-bg: var(--cobre-gray-10);
583
- --cobre-option-switch-disabled-color: var(--cobre-gray-50);
947
+ --cobre-input-v3-white-bg: var(--cobre-white);
948
+ --cobre-input-v3-white-border: 0.5px solid var(--cobre-primary-20);
949
+ --cobre-input-v3-white-hover-border: 0.5px solid var(--cobre-primary-95);
950
+ --cobre-input-v3-white-hover-bg: var(--cobre-primary-5);
584
951
 
585
- --cobre-option-switch-desktop-min-width: 135px;
586
- }
952
+ --cobre-input-v3-white-disabled-bg: var(--cobre-primary-10);
953
+ --cobre-input-v3-white-disabled-color: var(--cobre-primary-50);
954
+ --cobre-input-v3-white-disabled-border: none;
587
955
 
588
- /**
589
- * Float Modal
590
- */
956
+ --cobre-input-v3-white-active-bg: var(--cobre-white);
957
+ --cobre-input-v3-white-active-border: 1px solid var(--cobre-secondary-50);
958
+ --cobre-input-v3-white-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
591
959
 
592
- :root {
593
- --cobre-float-modal-bg: var(--cobre-opacity-40);
594
- --cobre-float-modal-bg-filter: blur(4px);
595
- --cobre-float-modal-opacity: 1;
596
- --cobre-float-modal-z-index: 15;
597
- }
960
+ // theme cloudy
598
961
 
599
- /**
600
- * Toast Alert
601
- */
962
+ --cobre-input-v3-cloudy-bg: var(--cobre-white);
963
+ --cobre-input-v3-cloudy-border: 0.5px solid var(--cobre-primary-40);
964
+ --cobre-input-v3-cloudy-hover-border: 0.5px solid var(--cobre-primary-95);
965
+ --cobre-input-v3-cloudy-hover-bg: var(--cobre-primary-10);
602
966
 
603
- :root {
604
- --cobre-toast-padding: 12px;
967
+ --cobre-input-v3-cloudy-disabled-bg: var(--cobre-primary-20);
968
+ --cobre-input-v3-cloudy-disabled-color: var(--cobre-primary-50);
969
+ --cobre-input-v3-cloudy-disabled-border: 0.5px solid var(--cobre-primary-60);
605
970
 
606
- --cobre-toast-title-font-weight: 600;
607
- --cobre-toast-title-color: var(--cobre-primary-95);
971
+ --cobre-input-v3-cloudy-active-bg: var(--cobre-white);
972
+ --cobre-input-v3-cloudy-active-border: 1px solid var(--cobre-secondary-50);
973
+ --cobre-input-v3-cloudy-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
974
+ }
608
975
 
609
- --cobre-toast-content-font-weight: 400;
610
- --cobre-toast-content-color: var(--cobre-primary-85);
976
+ /**
977
+ * Empty State v3
978
+ */
611
979
 
612
- --cobre-toast-text-font-weight: 600;
980
+ :root {
981
+ --cobre-empty-state-v3-color: var(--cobre-primary-95);
982
+ }
613
983
 
614
- --cobre-toast-description-font-size: 16px;
615
- --cobre-toast-description-font-weight: 400;
984
+ /**
985
+ * RADIUS
986
+ */
616
987
 
617
- --cobre-toast-icon-close-color: var(--cobre-primary-95);
618
- --cobre-toast-icon-close-font-size: 16px;
619
- --cobre-toast-icon-close-font-weight: 400;
620
- --cobre-toast-icon-close-top: 1px;
988
+ :root {
989
+ --cobre-radius-full: 62.4375rem;
990
+ --cobre-radius-M: 1rem;
991
+ --cobre-radius-S: 0.5rem;
992
+ --cobre-radius-XS: 0.25rem;
993
+ }
621
994
 
622
- --cobre-toast-warning-bg: var(--cobre-white);
623
- --cobre-toast-warning-border: var(--cobre-border-stroke-L) solid var(--cobre-yellow-50);
995
+ /**
996
+ * BORDER
997
+ */
624
998
 
625
- --cobre-toast-danger-bg: var(--cobre-white);
626
- --cobre-toast-danger-border: var(--cobre-border-stroke-L) solid var(--cobre-red-50);
999
+ :root {
1000
+ --cobre-border-stroke-XXXL: 0.1875rem;
1001
+ --cobre-border-stroke-XL: 0.125rem;
1002
+ --cobre-border-stroke-L: 0.0625rem;
1003
+ --cobre-border-stroke-M: 0.03125rem;
627
1004
 
628
- --cobre-toast-success-bg: var(--cobre-white);
629
- --cobre-toast-success-border: var(--cobre-border-stroke-L) solid var(--cobre-green-50);
1005
+ }
630
1006
 
631
- --cobre-toast-info-bg: var(--cobre-white);
632
- --cobre-toast-info-border: var(--cobre-border-stroke-L) solid var(--cobre-blue-50);
1007
+ /**
1008
+ * Card v3
1009
+ */
633
1010
 
634
- --cobre-toast-icon-padding: 3px;
635
- --cobre-toast-icon-border-radius: 20px;
1011
+ :root {
1012
+ --cobre-card-border: 0.5px solid var(--cobre-primary-20);
1013
+ --cobre-card-border-radius: 8px;
1014
+ --cobre-card-padding: 24px;
636
1015
 
637
- --cobre-toast-icon-warning-color: var(--cobre-yellow-50);
638
- --cobre-toast-icon-warning-bg: var(--cobre-yellow-10);
1016
+ --cobre-card-header-border: 0.5px solid var(--cobre-primary-20);
1017
+ --cobre-card-header-padding: 24px;
639
1018
 
640
- --cobre-toast-icon-danger-color: var(--cobre-red-50);
641
- --cobre-toast-icon-danger-bg: var(--cobre-red-10);
1019
+ --cobre-card-content-padding: 24px 0;
1020
+ }
642
1021
 
643
- --cobre-toast-icon-success-color: var(--cobre-green-50);
644
- --cobre-toast-icon-success-bg: var(--cobre-green-10);
1022
+ /**
1023
+ * Flow Result v3
1024
+ */
645
1025
 
646
- --cobre-toast-icon-info-color: var(--cobre-blue-50);
647
- --cobre-toast-icon-info-bg: var(--cobre-blue-10);
648
- }
1026
+ :root {
1027
+ --cobre-flow-result-border: 0.5px solid var(--cobre-primary-20);
649
1028
 
650
- /**
651
- * Uploader V3
652
- */
1029
+ // Danger
1030
+ --cobre-flow-result-danger-bg: var(--cobre-red-10);
1031
+ --cobre-flow-result-danger-color: var(--cobre-red-50);
653
1032
 
654
- :root {
655
- --cobre-uploader-v3-bg: var(--cobre-primary-5);
656
- --cobre-uploader-v3-color: var(--cobre-primary-80);
657
- --cobre-uploader-v3-border: var(--cobre-border-stroke-L) dashed var(--cobre-primary-20);
658
- --cobre-uploader-v3-height: 174px;
659
- --cobre-uploader-v3-radius: var(--cobre-radius-S);
660
- --cobre-uploader-v3-disabled-color: var(--cobre-gray-30);
1033
+ // Success
1034
+ --cobre-flow-result-success-bg: var(--cobre-green-10);
1035
+ --cobre-flow-result-success-color: var(--cobre-green-50);
661
1036
 
662
- --cobre-uploader-v3-title-color: var(--cobre-text-primary-light);
1037
+ // Info
1038
+ --cobre-flow-result-info-bg: var(--cobre-blue-10);
1039
+ --cobre-flow-result-info-color: var(--cobre-blue-50);
663
1040
 
664
- --cobre-uploader-v3-icon-color: var(--cobre-primary-80);
665
- --cobre-uploader-v3-text-color: var(--cobre-primary-50);
1041
+ // Warning
1042
+ --cobre-flow-result-warning-bg: var(--cobre-yellow-10);
1043
+ --cobre-flow-result-warning-color: var(--cobre-yellow-50);
666
1044
 
667
- --cobre-uploader-v3-active-drop-bg: var(--cobre-secondary-5);
668
- --cobre-uploader-v3-active-drop-color: var(--cobre-secondary-50);
1045
+ // Logout
1046
+ --cobre-flow-result-logout-bg: var(--cobre-blue-10);
1047
+ --cobre-flow-result-logout-color: var(--cobre-blue-50);
669
1048
 
670
- --cobre-uploader-v3-drag-area-active-bg: var(--cobre-secondary-5);
671
- --cobre-uploader-v3-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
672
- --cobre-uploader-v3-drag-area-disabled-bg: var(--cobre-primary-5);
673
- --cobre-uploader-v3-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
1049
+ // Otp
1050
+ --cobre-flow-result-otp-bg: var(--cobre-blue-10);
1051
+ --cobre-flow-result-otp-color: var(--cobre-blue-50)
1052
+ }
674
1053
 
675
- --cobre-uploader-v3-selected-file-border: 1px solid var(--cobre-secondary-50);
676
- --cobre-uploader-v3-selected-file-bg: var(--cobre-primary-5);
677
- --cobre-uploader-v3-selected-file-color: var(--cobre-gray-95);
678
- }
1054
+ /**
1055
+ * Float Modal
1056
+ */
679
1057
 
680
- /**
681
- * Loader
682
- */
1058
+ :root {
1059
+ --cobre-float-modal-bg: var(--cobre-primary-20);
1060
+ --cobre-float-modal-bg-filter: none;
1061
+ --cobre-float-modal-opacity: 0.3;
1062
+ --cobre-float-modal-z-index: 2;
683
1063
 
684
- :root {
685
- --cobre-loader-border-color: var(--cobre-primary-95) var(--cobre-primary-95) #0000 #0000
686
- }
1064
+ --cobre-float-modal-footer-border: 0.5px solid var(--cobre-primary-20);
1065
+ }
687
1066
 
688
- /**
689
- * Select
690
- */
691
-
692
- :root {
693
- --cobre-select-height: 32px;
694
- --cobre-select-bg: var(--cobre-white);
695
- --cobre-select-color: var(--cobre-primary-95);
696
- --cobre-select-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
697
- --cobre-select-radius: 4px;
698
- --cobre-select-arrow: 16px;
699
- --cobre-select-border-radius: 4px;
700
-
701
- --cobre-select-hover-bg: var(--cobre-primary-10);
702
- --cobre-select-hover-color: var(--cobre-primary-95);
703
- --cobre-select-hover-border-color: var(--cobre-primary-95);
704
-
705
- --cobre-select-active-color: var(--cobre-primary-95);
706
- --cobre-select-active-border-color: var(--cobre-teal-50);
707
-
708
- --cobre-select-active-focus-color: var(--cobre-gray-95);
709
- --cobre-select-active-focus-shadow: none;
710
-
711
- --cobre-select-disabled-border: var(--cobre-gray-95);
712
-
713
- --cobre-select-selected-bg: var(--cobre-primary-20);
714
- --cobre-select-selected-color: var(--cobre-primary-95);
715
- --cobre-select-selected-input-color: var(--cobre-gray-80);
716
-
717
- --cobre-select-dropdown-border: var(--cobre-primary-10);
718
- --cobre-select-dropdown-margin-top: 4px;
719
- --cobre-select-dropdown-item-height: 28px;
720
- --cobre-select-dropdown-item-font-size: 12px;
721
- --cobre-select-dropdown-item-padding: 4px;
722
- --cobre-select-dropdown-item-color: var(--cobre-primary-80);
723
- --cobre-select-dropdown-item-disabled-bg: var(--cobre-white);
724
- --cobre-select-dropdown-item-disabled-color: var(--cobre-primary-50);
725
- --cobre-select-dropdown-item-active-bg: var(--cobre-primary-20);
726
- --cobre-select-dropdown-item-margin: 4px;
727
-
728
- --cobre-select-add-item-color: var(--cobre-primary-50);
729
-
730
- --cobre-select-badge-color: var(--cobre-gray-95);
731
- }
732
1067
 
733
- /**
734
- * Select V3
1068
+ /**
1069
+ * Toast Alert
735
1070
  */
736
1071
 
737
- :root {
1072
+ :root {
1073
+ --cobre-toast-padding: 12px 8px;
738
1074
 
739
- --cobre-input-border-selected: var(--cobre-secondary-50);
1075
+ --cobre-toast-title-font-weight: 600;
1076
+ --cobre-toast-title-color: var(--cobre-primary-95);
740
1077
 
741
- --cobre-select-v3-hover-color: var(--cobre-primary-95);
742
- --cobre-select-v3-hover-border-color: var(--cobre-primary-30);
1078
+ --cobre-toast-content-font-weight: 400;
1079
+ --cobre-toast-content-color: var(--cobre-primary-80);
743
1080
 
744
- --cobre-select-v3-active-color: var(--cobre-primary-95);
1081
+ --cobre-toast-text-font-weight: 600;
745
1082
 
746
- --cobre-select-v3-active-focus-color: var(--cobre-primary-95);
747
- --cobre-select-v3-active-focus-shadow: none;
1083
+ --cobre-toast-description-font-size: 16px;
1084
+ --cobre-toast-description-font-weight: 400;
748
1085
 
749
- --cobre-select-disabled-border: var(--cobre-primary-95);
1086
+ --cobre-toast-icon-close-color: var(--cobre-primary-95);
1087
+ --cobre-toast-icon-close-font-size: 24px;
1088
+ --cobre-toast-icon-close-font-weight: 400;
1089
+ --cobre-toast-icon-close-top: -12px;
750
1090
 
751
- --cobre-select-v3-selected-bg: var(--cobre-primary-20);
752
- --cobre-select-v3-selected-color: var(--cobre-primary-95);
1091
+ --cobre-toast-warning-bg: var(--cobre-yellow-10);
1092
+ --cobre-toast-warning-border: none;
753
1093
 
754
- --cobre-select-v3-dropdown-item-margin: 4px;
755
- --cobre-select-v3-dropdown-item-height: 28px;
1094
+ --cobre-toast-danger-bg: var(--cobre-red-10);
1095
+ --cobre-toast-danger-border: none;
756
1096
 
757
- /* z-index */
758
- --vs-dropdown-z-index: 2 !important;
1097
+ --cobre-toast-success-bg: var(--cobre-green-10);
1098
+ --cobre-toast-success-border: none;
759
1099
 
760
- /* Search Input */
761
- --vs-search-input-bg: var(--cobre-input-bg) !important;
762
- --vs-search-input-placeholder-color: var(--cobre-primary-50) !important;
1100
+ --cobre-toast-info-bg: var(--cobre-blue-10);
1101
+ --cobre-toast-info-border: none;
763
1102
 
764
- /* Font */
765
- --vs-font-size: var(--cobre-label-small-fs) !important;
1103
+ --cobre-toast-icon-padding: 3px;
1104
+ --cobre-toast-icon-border-radius: 20px;
766
1105
 
767
- /* Disabled State */
768
- --vs-disabled-bg: var(--cobre-primary-5) !important;
769
- --vs-disabled-color: var(--cobre-primary-40) !important;
1106
+ --cobre-toast-icon-warning-color: var(--cobre-yellow-50);
1107
+ --cobre-toast-icon-warning-bg: var(--cobre-yellow-10);
770
1108
 
771
- /* Borders */
772
- --vs-border-color: var(--cobre-primary-20) !important;
773
- --vs-border-width: var(--cobre-border-stroke-M) !important;
774
- --vs-border-radius: var(--cobre-radius-XS) !important;
1109
+ --cobre-toast-icon-danger-color: var(--cobre-red-50);
1110
+ --cobre-toast-icon-danger-bg: var(--cobre-red-10);
775
1111
 
776
- /* Actions: house the component controls */
777
- --vs-actions-padding: 4px 6px 0 3px;
1112
+ --cobre-toast-icon-success-color: var(--cobre-green-50);
1113
+ --cobre-toast-icon-success-bg: var(--cobre-green-10);
778
1114
 
779
- /* Selected */
780
- --vs-selected-bg: var(--cobre-input-bg) !important;
781
- --vs-selected-color: var(--cobre-input-color) !important;
1115
+ --cobre-toast-icon-info-color: var(--cobre-blue-50);
1116
+ --cobre-toast-icon-info-bg: var(--cobre-blue-10);
1117
+ }
782
1118
 
783
- /* Dropdown */
784
- --vs-dropdown-bg: var(--cobre-select-bg) !important;
1119
+ /**
1120
+ * Uploader V3
1121
+ */
785
1122
 
786
- /* Options */
787
- --vs-dropdown-option-color: var(--cobre-input-color) !important;
788
- --vs-dropdown-option-padding: 4px !important;
1123
+ :root {
1124
+ --cobre-uploader-v3-bg: var(--cobre-white);
1125
+ --cobre-uploader-v3-color: var(--cobre-primary-60);
1126
+ --cobre-uploader-v3-border: 1.5px dashed var(--cobre-primary-50);
1127
+ --cobre-uploader-v3-height: auto;
1128
+ --cobre-uploader-v3-radius: 8px;
1129
+ --cobre-uploader-v3-disabled-color: var(--cobre-primary-30);
1130
+ --cobre-uploader-v3-title-color: var(--cobre-primary-95);
789
1131
 
790
- /* Active State */
791
- --vs-dropdown-option--active-bg: var(--cobre-select-v3-selected-bg) !important;
792
- --vs-dropdown-option--active-color: var(--cobre-input-color) !important;
793
- }
1132
+ --cobre-uploader-v3-icon-color: var(--cobre-primary-95);
1133
+ --cobre-uploader-v3-text-color: var(--cobre-primary-30);
1134
+ --cobre-uploader-v3-text-disabled-color: var(--cobre-primary-40);
794
1135
 
795
- /**
796
- * SnackBar
797
- */
1136
+ --cobre-uploader-v3-disabled-box-bg: var(--cobre-primary-7);
1137
+ --cobre-uploader-v3-active-drop-bg: var(--cobre-secondary-5);
1138
+ --cobre-uploader-v3-active-drop-color: var(--cobre-secondary-50);
798
1139
 
799
- :root {
800
- --toastify-toast-width: auto;
801
- --toastify-toast-min-height: 40px;
802
- --toastify-color-light: var(--cobre-primary-95);
803
- --toastify-text-color-light: var(--cobre-primary-5);
804
- --toastify-font-family: var(--cobre-font-family);
805
- --cobre-select-badge-color: var(--cobre-gray-95);
806
- }
1140
+ --cobre-uploader-v3-drag-area-active-bg: var(--cobre-secondary-5);
1141
+ --cobre-uploader-v3-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
1142
+ --cobre-uploader-v3-drag-area-disabled-bg: var(--cobre-primary-5);
1143
+ --cobre-uploader-v3-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
807
1144
 
1145
+ --cobre-uploader-v3-selected-file-border: 1px solid var(--cobre-secondary-50);
1146
+ --cobre-uploader-v3-selected-file-bg: var(--cobre-primary-5);
1147
+ --cobre-uploader-v3-selected-file-color: var(--cobre-primary-95);
1148
+ }
808
1149
 
809
- /**
810
- * CheckBox
811
- */
812
-
813
- :root {
814
- --cobre-checkbox-size-small: 16px;
815
- --cobre-checkbox-size-medium: 24px;
816
- --cobre-checkbox-radius-small: 4px;
817
- --cobre-checkbox-radius-medium: 8px;
818
- --cobre-checkbox-bg: var(--cobre-bg-primary);
819
- --cobre-checkbox-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
820
- --cobre-checkbox-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
821
-
822
- --cobre-checkbox-input-checked-bg: var(--cobre-secondary-50);
823
- --cobre-checkbox-input-checked-hover-bg: var(--cobre-secondary-70);
824
-
825
- --cobre-checkbox-input-hover-bg: var(--cobre-secondary-10);
826
- --cobre-checkbox-input-hover-border: 1px solid var(--cobre-secondary-50);
827
-
828
- --cobre-checkbox-input-disabled-bg: var(--cobre-secondary-30);
829
- }
1150
+
1151
+ /**
1152
+ * Loader
1153
+ */
1154
+
1155
+ :root {
1156
+ --cobre-loader-border-color: var(--cobre-brand) var(--cobre-brand) #0000 #0000
1157
+ }
1158
+
1159
+ /**
1160
+ * Select V3
1161
+ */
1162
+
1163
+ :root {
1164
+
1165
+ --cobre-input-border-selected: var(--cobre-secondary-50);
1166
+
1167
+ --cobre-select-v3-hover-color: var(--cobre-primary-95);
1168
+ --cobre-select-v3-hover-border-color: var(--cobre-primary-30);
1169
+
1170
+ --cobre-select-v3-active-color: var(--cobre-primary-95);
1171
+
1172
+ --cobre-select-v3-active-focus-color: var(--cobre-primary-95);
1173
+ --cobre-select-v3-active-focus-shadow: none;
1174
+
1175
+ --cobre-select-disabled-border: var(--cobre-primary-95);
1176
+
1177
+ --cobre-select-v3-selected-bg: var(--cobre-primary-20);
1178
+ --cobre-select-v3-selected-color: var(--cobre-primary-95);
1179
+
1180
+ --cobre-select-v3-dropdown-item-margin: 4px;
1181
+ --cobre-select-v3-dropdown-item-height: 28px;
1182
+
1183
+ /* z-index */
1184
+ --vs-dropdown-z-index: 2 !important;
1185
+
1186
+ /* Search Input */
1187
+ --vs-search-input-bg: var(--cobre-input-bg) !important;
1188
+ --vs-search-input-placeholder-color: var(--cobre-primary-50) !important;
1189
+
1190
+ /* Font */
1191
+ --vs-font-size: var(--cobre-label-small-fs) !important;
1192
+
1193
+ /* Disabled State */
1194
+ --vs-disabled-bg: var(--cobre-primary-5) !important;
1195
+ --vs-disabled-color: var(--cobre-primary-40) !important;
1196
+
1197
+ /* Borders */
1198
+ --vs-border-color: var(--cobre-primary-20) !important;
1199
+ --vs-border-width: var(--cobre-border-stroke-M) !important;
1200
+ --vs-border-radius: var(--cobre-radius-XS) !important;
1201
+
1202
+ /* Actions: house the component controls */
1203
+ --vs-actions-padding: 4px 6px 0 3px;
1204
+
1205
+ /* Selected */
1206
+ --vs-selected-bg: var(--cobre-input-bg) !important;
1207
+ --vs-selected-color: var(--cobre-input-color) !important;
1208
+
1209
+ /* Dropdown */
1210
+ --vs-dropdown-bg: var(--cobre-select-bg) !important;
1211
+
1212
+ /* Options */
1213
+ --vs-dropdown-option-color: var(--cobre-input-color) !important;
1214
+ --vs-dropdown-option-padding: 4px !important;
1215
+
1216
+ /* Active State */
1217
+ --vs-dropdown-option--active-bg: var(--cobre-select-v3-selected-bg) !important;
1218
+ --vs-dropdown-option--active-color: var(--cobre-input-color) !important;
1219
+ }