polpo 0.1.13 → 0.1.15

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/components.cjs +3 -3
  2. package/dist/components.cjs.map +1 -1
  3. package/dist/components.css +325 -341
  4. package/dist/components.css.map +1 -1
  5. package/dist/components.js +3 -3
  6. package/dist/components.js.map +1 -1
  7. package/package.json +4 -4
package/dist/components.css CHANGED
@@ -147,25 +147,25 @@
147
147
  margin: 0;
148
148
  padding: 0.5em 0 0.4em;
149
149
  &.primary {
150
- color: var(--primary-500);
150
+ color: var(--color-primary-500);
151
151
  }
152
152
  &.secondary {
153
- color: var(--secondary-500);
153
+ color: var(--color-secondary-500);
154
154
  }
155
155
  &.tertiary {
156
- color: var(--tertiary-500);
156
+ color: var(--color-tertiary-500);
157
157
  }
158
158
  &.active {
159
- color: var(--active-500);
159
+ color: var(--color-active-500);
160
160
  }
161
161
  &.alert {
162
- color: var(--alert-500);
162
+ color: var(--color-alert-500);
163
163
  }
164
164
  &.warning {
165
- color: var(--warning-500);
165
+ color: var(--color-warning-500);
166
166
  }
167
167
  &.info {
168
- color: var(--info-500);
168
+ color: var(--color-info-500);
169
169
  }
170
170
  &.recommended-width {
171
171
  max-width: 70ch;
@@ -203,44 +203,28 @@
203
203
  line-clamp: 5;
204
204
  }
205
205
  &.hero {
206
- font-size: var(--typography-size-hero);
207
- line-height: var(--typography-line-height-header);
208
- font-weight: 700;
206
+ @apply text-hero;
209
207
  }
210
208
  &.header1 {
211
- font-size: var(--typography-size-header1);
212
- line-height: var(--typography-line-height-header);
213
- font-weight: 700;
209
+ @apply text-header1;
214
210
  }
215
211
  &.header2 {
216
- font-size: var(--typography-size-header2);
217
- line-height: var(--typography-line-height-header);
218
- font-weight: 700;
212
+ @apply text-header2;
219
213
  }
220
214
  &.header3 {
221
- font-size: var(--typography-size-header3);
222
- line-height: var(--typography-line-height-header);
223
- font-weight: 700;
215
+ @apply text-header3;
224
216
  }
225
217
  &.header4 {
226
- font-size: var(--typography-size-header4);
227
- line-height: var(--typography-line-height-header);
228
- font-weight: 700;
218
+ @apply text-header4;
229
219
  }
230
220
  &.body {
231
- font-size: var(--typography-size-body);
232
- line-height: var(--typography-line-height-common);
233
- font-weight: 400;
221
+ @apply text-body;
234
222
  }
235
223
  &.label {
236
- font-size: var(--typography-size-label);
237
- line-height: var(--typography-line-height-common);
238
- font-weight: 400;
224
+ @apply text-label;
239
225
  }
240
226
  &.small {
241
- font-size: var(--typography-size-small);
242
- line-height: var(--typography-line-height-common);
243
- font-weight: 400;
227
+ @apply text-small;
244
228
  }
245
229
  &.bold {
246
230
  font-weight: 700;
@@ -287,20 +271,20 @@
287
271
  /* src/components/button/button.styles.css */
288
272
  .button {
289
273
  --button-blur: 2px;
290
- --color: var(--neutral-800);
291
- --solid-background: var(--neutral-900);
292
- --solid-text: var(--neutral-50);
293
- --solid-hover-background: var(--neutral-800);
294
- --solid-active-background: var(--neutral-900);
295
- --flat-background: hsl(from var(--neutral-100) h s l / 80%);
296
- --flat-hover-background: var(--neutral-50);
297
- --flat-active-background: var(--neutral-100);
298
- --outlined-hover-background: hsl(from var(--neutral-100) h s l / 20%);
299
- --outlined-active-background: hsl(from var(--neutral-100) h s l / 50%);
300
- --text-hover-background: hsl(from var(--neutral-100) h s l / 20%);
301
- --text-active-background: hsl(from var(--neutral-100) h s l / 50%);
302
- --shadow-color: hsl(from var(--neutral-800) h s l / 20%);
303
- --focus-background: hsl(from var(--neutral-100) h s l / 20%);
274
+ --color: var(--color-gray-800);
275
+ --solid-background: var(--color-gray-900);
276
+ --solid-text: var(--color-gray-50);
277
+ --solid-hover-background: var(--color-gray-800);
278
+ --solid-active-background: var(--color-gray-900);
279
+ --flat-background: hsl(from var(--color-gray-100) h s l / 80%);
280
+ --flat-hover-background: var(--color-gray-50);
281
+ --flat-active-background: var(--color-gray-100);
282
+ --outlined-hover-background: hsl(from var(--color-gray-100) h s l / 20%);
283
+ --outlined-active-background: hsl(from var(--color-gray-100) h s l / 50%);
284
+ --text-hover-background: hsl(from var(--color-gray-100) h s l / 20%);
285
+ --text-active-background: hsl(from var(--color-gray-100) h s l / 50%);
286
+ --shadow-color: hsl(from var(--color-gray-800) h s l / 20%);
287
+ --focus-background: hsl(from var(--color-gray-100) h s l / 20%);
304
288
  display: flex;
305
289
  flex-direction: row;
306
290
  justify-content: center;
@@ -310,7 +294,7 @@
310
294
  width: auto;
311
295
  border-radius: 0.5em;
312
296
  font-weight: bold;
313
- font-size: var(--typography-size-label);
297
+ @apply text-label;
314
298
  cursor: pointer;
315
299
  outline: none;
316
300
  transition: all 150ms ease;
@@ -327,13 +311,13 @@
327
311
  text-overflow: ellipsis;
328
312
  }
329
313
  &.size-small {
330
- font-size: var(--typography-size-small);
314
+ @apply text-small;
331
315
  }
332
316
  &.size-regular {
333
- font-size: var(--typography-size-label);
317
+ @apply text-label;
334
318
  }
335
319
  &.size-large {
336
- font-size: var(--typography-size-body);
320
+ @apply text-body;
337
321
  }
338
322
  &.radius-none {
339
323
  border-radius: 0;
@@ -421,127 +405,127 @@
421
405
  background: var(--focus-background);
422
406
  }
423
407
  &.primary {
424
- --color: var(--primary-500);
425
- --solid-background: var(--primary-500);
426
- --solid-text: var(--primary-50);
427
- --solid-hover-background: var(--primary-400);
428
- --solid-active-background: var(--primary-600);
429
- --flat-background: hsl(from var(--primary-100) h s l / 80%);
430
- --flat-hover-background: var(--primary-50);
431
- --flat-active-background: var(--primary-100);
432
- --outlined-hover-background: hsl(from var(--primary-100) h s l / 20%);
433
- --outlined-active-background: hsl(from var(--primary-100) h s l / 50%);
434
- --text-hover-background: hsl(from var(--primary-100) h s l / 20%);
435
- --text-active-background: hsl(from var(--primary-100) h s l / 50%);
436
- --shadow-color: hsl(from var(--primary-500) h s l / 20%);
437
- --focus-background: hsl(from var(--primary-100) h s l / 20%);
408
+ --color: var(--color-primary-500);
409
+ --solid-background: var(--color-primary-500);
410
+ --solid-text: var(--color-primary-50);
411
+ --solid-hover-background: var(--color-primary-400);
412
+ --solid-active-background: var(--color-primary-600);
413
+ --flat-background: hsl(from var(--color-primary-100) h s l / 80%);
414
+ --flat-hover-background: var(--color-primary-50);
415
+ --flat-active-background: var(--color-primary-100);
416
+ --outlined-hover-background: hsl(from var(--color-primary-100) h s l / 20%);
417
+ --outlined-active-background: hsl(from var(--color-primary-100) h s l / 50%);
418
+ --text-hover-background: hsl(from var(--color-primary-100) h s l / 20%);
419
+ --text-active-background: hsl(from var(--color-primary-100) h s l / 50%);
420
+ --shadow-color: hsl(from var(--color-primary-500) h s l / 20%);
421
+ --focus-background: hsl(from var(--color-primary-100) h s l / 20%);
438
422
  }
439
423
  &.secondary {
440
- --color: var(--secondary-500);
441
- --solid-background: var(--secondary-500);
442
- --solid-text: var(--secondary-50);
443
- --solid-hover-background: var(--secondary-400);
444
- --solid-active-background: var(--secondary-600);
445
- --flat-background: hsl(from var(--secondary-100) h s l / 80%);
446
- --flat-hover-background: var(--secondary-50);
447
- --flat-active-background: var(--secondary-100);
448
- --outlined-hover-background: hsl(from var(--secondary-100) h s l / 20%);
449
- --outlined-active-background: hsl(from var(--secondary-100) h s l / 50%);
450
- --text-hover-background: hsl(from var(--secondary-100) h s l / 20%);
451
- --text-active-background: hsl(from var(--secondary-100) h s l / 50%);
452
- --shadow-color: hsl(from var(--secondary-500) h s l / 20%);
453
- --focus-background: hsl(from var(--secondary-100) h s l / 20%);
424
+ --color: var(--color-secondary-500);
425
+ --solid-background: var(--color-secondary-500);
426
+ --solid-text: var(--color-secondary-50);
427
+ --solid-hover-background: var(--color-secondary-400);
428
+ --solid-active-background: var(--color-secondary-600);
429
+ --flat-background: hsl(from var(--color-secondary-100) h s l / 80%);
430
+ --flat-hover-background: var(--color-secondary-50);
431
+ --flat-active-background: var(--color-secondary-100);
432
+ --outlined-hover-background: hsl(from var(--color-secondary-100) h s l / 20%);
433
+ --outlined-active-background: hsl(from var(--color-secondary-100) h s l / 50%);
434
+ --text-hover-background: hsl(from var(--color-secondary-100) h s l / 20%);
435
+ --text-active-background: hsl(from var(--color-secondary-100) h s l / 50%);
436
+ --shadow-color: hsl(from var(--color-secondary-500) h s l / 20%);
437
+ --focus-background: hsl(from var(--color-secondary-100) h s l / 20%);
454
438
  }
455
439
  &.tertiary {
456
- --color: var(--tertiary-500);
457
- --solid-background: var(--tertiary-500);
458
- --solid-text: var(--tertiary-50);
459
- --solid-hover-background: var(--tertiary-400);
460
- --solid-active-background: var(--tertiary-600);
461
- --flat-background: hsl(from var(--tertiary-100) h s l / 80%);
462
- --flat-hover-background: var(--tertiary-50);
463
- --flat-active-background: var(--tertiary-100);
464
- --outlined-hover-background: hsl(from var(--tertiary-100) h s l / 20%);
465
- --outlined-active-background: hsl(from var(--tertiary-100) h s l / 50%);
466
- --text-hover-background: hsl(from var(--tertiary-100) h s l / 20%);
467
- --text-active-background: hsl(from var(--tertiary-100) h s l / 50%);
468
- --shadow-color: hsl(from var(--tertiary-500) h s l / 20%);
469
- --focus-background: hsl(from var(--tertiary-100) h s l / 20%);
440
+ --color: var(--color-tertiary-500);
441
+ --solid-background: var(--color-tertiary-500);
442
+ --solid-text: var(--color-tertiary-50);
443
+ --solid-hover-background: var(--color-tertiary-400);
444
+ --solid-active-background: var(--color-tertiary-600);
445
+ --flat-background: hsl(from var(--color-tertiary-100) h s l / 80%);
446
+ --flat-hover-background: var(--color-tertiary-50);
447
+ --flat-active-background: var(--color-tertiary-100);
448
+ --outlined-hover-background: hsl(from var(--color-tertiary-100) h s l / 20%);
449
+ --outlined-active-background: hsl(from var(--color-tertiary-100) h s l / 50%);
450
+ --text-hover-background: hsl(from var(--color-tertiary-100) h s l / 20%);
451
+ --text-active-background: hsl(from var(--color-tertiary-100) h s l / 50%);
452
+ --shadow-color: hsl(from var(--color-tertiary-500) h s l / 20%);
453
+ --focus-background: hsl(from var(--color-tertiary-100) h s l / 20%);
470
454
  }
471
455
  &.active {
472
- --color: var(--active-500);
473
- --solid-background: var(--active-500);
474
- --solid-text: var(--active-50);
475
- --solid-hover-background: var(--active-400);
476
- --solid-active-background: var(--active-600);
477
- --flat-background: hsl(from var(--active-100) h s l / 80%);
478
- --flat-hover-background: var(--active-50);
479
- --flat-active-background: var(--active-100);
480
- --outlined-hover-background: hsl(from var(--active-100) h s l / 20%);
481
- --outlined-active-background: hsl(from var(--active-100) h s l / 50%);
482
- --text-hover-background: hsl(from var(--active-100) h s l / 20%);
483
- --text-active-background: hsl(from var(--active-100) h s l / 50%);
484
- --shadow-color: hsl(from var(--active-500) h s l / 20%);
485
- --focus-background: hsl(from var(--active-100) h s l / 20%);
456
+ --color: var(--color-active-500);
457
+ --solid-background: var(--color-active-500);
458
+ --solid-text: var(--color-active-50);
459
+ --solid-hover-background: var(--color-active-400);
460
+ --solid-active-background: var(--color-active-600);
461
+ --flat-background: hsl(from var(--color-active-100) h s l / 80%);
462
+ --flat-hover-background: var(--color-active-50);
463
+ --flat-active-background: var(--color-active-100);
464
+ --outlined-hover-background: hsl(from var(--color-active-100) h s l / 20%);
465
+ --outlined-active-background: hsl(from var(--color-active-100) h s l / 50%);
466
+ --text-hover-background: hsl(from var(--color-active-100) h s l / 20%);
467
+ --text-active-background: hsl(from var(--color-active-100) h s l / 50%);
468
+ --shadow-color: hsl(from var(--color-active-500) h s l / 20%);
469
+ --focus-background: hsl(from var(--color-active-100) h s l / 20%);
486
470
  }
487
471
  &.warning {
488
- --color: var(--warning-500);
489
- --solid-background: var(--warning-500);
490
- --solid-text: var(--warning-50);
491
- --solid-hover-background: var(--warning-400);
492
- --solid-active-background: var(--warning-600);
493
- --flat-background: hsl(from var(--warning-100) h s l / 80%);
494
- --flat-hover-background: var(--warning-50);
495
- --flat-active-background: var(--warning-100);
496
- --outlined-hover-background: hsl(from var(--warning-100) h s l / 20%);
497
- --outlined-active-background: hsl(from var(--warning-100) h s l / 50%);
498
- --text-hover-background: hsl(from var(--warning-100) h s l / 20%);
499
- --text-active-background: hsl(from var(--warning-100) h s l / 50%);
500
- --shadow-color: hsl(from var(--warning-500) h s l / 20%);
501
- --focus-background: hsl(from var(--warning-100) h s l / 20%);
472
+ --color: var(--color-warning-500);
473
+ --solid-background: var(--color-warning-500);
474
+ --solid-text: var(--color-warning-50);
475
+ --solid-hover-background: var(--color-warning-400);
476
+ --solid-active-background: var(--color-warning-600);
477
+ --flat-background: hsl(from var(--color-warning-100) h s l / 80%);
478
+ --flat-hover-background: var(--color-warning-50);
479
+ --flat-active-background: var(--color-warning-100);
480
+ --outlined-hover-background: hsl(from var(--color-warning-100) h s l / 20%);
481
+ --outlined-active-background: hsl(from var(--color-warning-100) h s l / 50%);
482
+ --text-hover-background: hsl(from var(--color-warning-100) h s l / 20%);
483
+ --text-active-background: hsl(from var(--color-warning-100) h s l / 50%);
484
+ --shadow-color: hsl(from var(--color-warning-500) h s l / 20%);
485
+ --focus-background: hsl(from var(--color-warning-100) h s l / 20%);
502
486
  }
503
487
  &.alert {
504
- --color: var(--alert-500);
505
- --solid-background: var(--alert-500);
506
- --solid-text: var(--alert-50);
507
- --solid-hover-background: var(--alert-400);
508
- --solid-active-background: var(--alert-600);
509
- --flat-background: hsl(from var(--alert-100) h s l / 80%);
510
- --flat-hover-background: var(--alert-50);
511
- --flat-active-background: var(--alert-100);
512
- --outlined-hover-background: hsl(from var(--alert-100) h s l / 20%);
513
- --outlined-active-background: hsl(from var(--alert-100) h s l / 50%);
514
- --text-hover-background: hsl(from var(--alert-100) h s l / 20%);
515
- --text-active-background: hsl(from var(--alert-100) h s l / 50%);
516
- --shadow-color: hsl(from var(--alert-500) h s l / 20%);
517
- --focus-background: hsl(from var(--alert-100) h s l / 20%);
488
+ --color: var(--color-alert-500);
489
+ --solid-background: var(--color-alert-500);
490
+ --solid-text: var(--color-alert-50);
491
+ --solid-hover-background: var(--color-alert-400);
492
+ --solid-active-background: var(--color-alert-600);
493
+ --flat-background: hsl(from var(--color-alert-100) h s l / 80%);
494
+ --flat-hover-background: var(--color-alert-50);
495
+ --flat-active-background: var(--color-alert-100);
496
+ --outlined-hover-background: hsl(from var(--color-alert-100) h s l / 20%);
497
+ --outlined-active-background: hsl(from var(--color-alert-100) h s l / 50%);
498
+ --text-hover-background: hsl(from var(--color-alert-100) h s l / 20%);
499
+ --text-active-background: hsl(from var(--color-alert-100) h s l / 50%);
500
+ --shadow-color: hsl(from var(--color-alert-500) h s l / 20%);
501
+ --focus-background: hsl(from var(--color-alert-100) h s l / 20%);
518
502
  }
519
503
  &.info {
520
- --color: var(--info-500);
521
- --solid-background: var(--info-500);
522
- --solid-text: var(--info-50);
523
- --solid-hover-background: var(--info-400);
524
- --solid-active-background: var(--info-600);
525
- --flat-background: hsl(from var(--info-100) h s l / 80%);
526
- --flat-hover-background: var(--info-50);
527
- --flat-active-background: var(--info-100);
528
- --outlined-hover-background: hsl(from var(--info-100) h s l / 20%);
529
- --outlined-active-background: hsl(from var(--info-100) h s l / 50%);
530
- --text-hover-background: hsl(from var(--info-100) h s l / 20%);
531
- --text-active-background: hsl(from var(--info-100) h s l / 50%);
532
- --shadow-color: hsl(from var(--info-500) h s l / 20%);
533
- --focus-background: hsl(from var(--info-100) h s l / 20%);
504
+ --color: var(--color-info-500);
505
+ --solid-background: var(--color-info-500);
506
+ --solid-text: var(--color-info-50);
507
+ --solid-hover-background: var(--color-info-400);
508
+ --solid-active-background: var(--color-info-600);
509
+ --flat-background: hsl(from var(--color-info-100) h s l / 80%);
510
+ --flat-hover-background: var(--color-info-50);
511
+ --flat-active-background: var(--color-info-100);
512
+ --outlined-hover-background: hsl(from var(--color-info-100) h s l / 20%);
513
+ --outlined-active-background: hsl(from var(--color-info-100) h s l / 50%);
514
+ --text-hover-background: hsl(from var(--color-info-100) h s l / 20%);
515
+ --text-active-background: hsl(from var(--color-info-100) h s l / 50%);
516
+ --shadow-color: hsl(from var(--color-info-500) h s l / 20%);
517
+ --focus-background: hsl(from var(--color-info-100) h s l / 20%);
534
518
  }
535
519
  &:disabled {
536
- color: var(--neutral-200);
520
+ color: var(--color-gray-200);
537
521
  pointer-events: none;
538
522
  }
539
523
  &.solid:disabled {
540
- background: var(--neutral-200);
541
- color: var(--neutral-50);
524
+ background: var(--color-gray-200);
525
+ color: var(--color-gray-50);
542
526
  }
543
527
  &.flat:disabled {
544
- background: hsl(from var(--neutral-50) h s l / 80%);
528
+ background: hsl(from var(--color-gray-50) h s l / 80%);
545
529
  }
546
530
  &.outlined:disabled,
547
531
  &.text:disabled {
@@ -573,7 +557,7 @@
573
557
  margin-top: -15px;
574
558
  width: 30px;
575
559
  height: 30px;
576
- border: 2px solid var(--primary-500);
560
+ border: 2px solid var(--color-primary-500);
577
561
  box-sizing: border-box;
578
562
  z-index: 99999999;
579
563
  opacity: 0.5;
@@ -588,7 +572,7 @@
588
572
  margin-top: -40px;
589
573
  width: 80px;
590
574
  height: 80px;
591
- background-color: var(--primary-500);
575
+ background-color: var(--color-primary-500);
592
576
  opacity: 0.3;
593
577
  }
594
578
  &.cursor-text {
@@ -596,7 +580,7 @@
596
580
  margin-top: -40px;
597
581
  width: 4px;
598
582
  height: 80px;
599
- background-color: var(--primary-500);
583
+ background-color: var(--color-primary-500);
600
584
  opacity: 0.3;
601
585
  }
602
586
  }
@@ -606,7 +590,7 @@
606
590
  width: 6px;
607
591
  height: 6px;
608
592
  z-index: 99999999;
609
- background-color: var(--primary-500);
593
+ background-color: var(--color-primary-500);
610
594
  transition: opacity 0.3s ease-in-out;
611
595
  opacity: 1;
612
596
  &.cursor-hover {
@@ -618,7 +602,7 @@
618
602
  /* src/components/form/checkbox/checkbox.styles.css */
619
603
  .checkbox {
620
604
  border-radius: 40%;
621
- background: var(--background-paper);
605
+ background: var(--color-background-paper);
622
606
  transition: all 300ms ease;
623
607
  width: 1em;
624
608
  height: 1em;
@@ -665,9 +649,9 @@
665
649
  }
666
650
  }
667
651
  .checkbox-container {
668
- --color: var(--neutral-800);
669
- --color-icon: var(--neutral-50);
670
- --color-hover: hsl(from var(--neutral-800) h s l / 50%);
652
+ --color: var(--color-gray-800);
653
+ --color-icon: var(--color-gray-50);
654
+ --color-hover: hsl(from var(--color-gray-800) h s l / 50%);
671
655
  display: grid;
672
656
  grid-auto-flow: column;
673
657
  grid-auto-columns: auto 1fr;
@@ -718,39 +702,39 @@
718
702
  box-shadow: 0 0 0 0.3em var(--color-hover);
719
703
  }
720
704
  &.color-primary {
721
- --color: var(--primary-500);
722
- --color-icon: var(--primary-50);
723
- --color-hover: hsl(from var(--primary-500) h s l / 50%);
705
+ --color: var(--color-primary-500);
706
+ --color-icon: var(--color-primary-50);
707
+ --color-hover: hsl(from var(--color-primary-500) h s l / 50%);
724
708
  }
725
709
  &.color-secondary {
726
- --color: var(--secondary-500);
727
- --color-icon: var(--secondary-50);
728
- --color-hover: hsl(from var(--secondary-500) h s l / 50%);
710
+ --color: var(--color-secondary-500);
711
+ --color-icon: var(--color-secondary-50);
712
+ --color-hover: hsl(from var(--color-secondary-500) h s l / 50%);
729
713
  }
730
714
  &.color-tertiary {
731
- --color: var(--tertiary-500);
732
- --color-icon: var(--tertiary-50);
733
- --color-hover: hsl(from var(--tertiary-500) h s l / 50%);
715
+ --color: var(--color-tertiary-500);
716
+ --color-icon: var(--color-tertiary-50);
717
+ --color-hover: hsl(from var(--color-tertiary-500) h s l / 50%);
734
718
  }
735
719
  &.color-active {
736
- --color: var(--active-500);
737
- --color-icon: var(--active-50);
738
- --color-hover: hsl(from var(--active-500) h s l / 50%);
720
+ --color: var(--color-active-500);
721
+ --color-icon: var(--color-active-50);
722
+ --color-hover: hsl(from var(--color-active-500) h s l / 50%);
739
723
  }
740
724
  &.color-warning {
741
- --color: var(--warning-500);
742
- --color-icon: var(--warning-50);
743
- --color-hover: hsl(from var(--warning-500) h s l / 50%);
725
+ --color: var(--color-warning-500);
726
+ --color-icon: var(--color-warning-50);
727
+ --color-hover: hsl(from var(--color-warning-500) h s l / 50%);
744
728
  }
745
729
  &.color-alert {
746
- --color: var(--alert-500);
747
- --color-icon: var(--alert-50);
748
- --color-hover: hsl(from var(--alert-500) h s l / 50%);
730
+ --color: var(--color-alert-500);
731
+ --color-icon: var(--color-alert-50);
732
+ --color-hover: hsl(from var(--color-alert-500) h s l / 50%);
749
733
  }
750
734
  &.color-info {
751
- --color: var(--info-500);
752
- --color-icon: var(--info-50);
753
- --color-hover: hsl(from var(--info-500) h s l / 50%);
735
+ --color: var(--color-info-500);
736
+ --color-icon: var(--color-info-50);
737
+ --color-hover: hsl(from var(--color-info-500) h s l / 50%);
754
738
  }
755
739
  }
756
740
 
@@ -784,10 +768,10 @@
784
768
  }
785
769
  &.variant-content-border {
786
770
  .field-content {
787
- border: 1px solid var(--border);
771
+ border: 1px solid var(--color-border);
788
772
  border-radius: 4px;
789
773
  padding: 1em;
790
- background: var(--background);
774
+ background: var(--color-background);
791
775
  }
792
776
  }
793
777
  &.variant-content-line {
@@ -797,10 +781,10 @@
797
781
  }
798
782
  }
799
783
  &.variant-full-border {
800
- border: 1px solid var(--border);
784
+ border: 1px solid var(--color-border);
801
785
  border-radius: 4px;
802
786
  padding: 0.5em 0;
803
- background: var(--background);
787
+ background: var(--color-background);
804
788
  .field-label,
805
789
  .field-content,
806
790
  .field-message {
@@ -816,20 +800,20 @@
816
800
  }
817
801
  }
818
802
  &.error {
819
- color: var(--alert-500);
820
- border-color: var(--alert-500);
803
+ color: var(--color-alert-500);
804
+ border-color: var(--color-alert-500);
821
805
  }
822
806
  &.focus {
823
- color: var(--info-500);
824
- border-color: var(--info-500);
807
+ color: var(--color-info-500);
808
+ border-color: var(--color-info-500);
825
809
  }
826
810
  &.error,
827
811
  &.focus {
828
812
  .field-left-icon,
829
813
  .field-right-icon,
830
814
  .field-children {
831
- color: var(--foreground);
832
- border-color: var(--foreground);
815
+ color: var(--color-foreground);
816
+ border-color: var(--color-foreground);
833
817
  }
834
818
  }
835
819
  .field-children > * {
@@ -844,7 +828,7 @@
844
828
  pointer-events: none;
845
829
  }
846
830
  .modal-content {
847
- background: var(--background-paper);
831
+ background: var(--color-background-paper);
848
832
  pointer-events: initial;
849
833
  &.animation-fade-down {
850
834
  animation: fadeInDown 200ms ease;
@@ -916,7 +900,7 @@
916
900
  display: grid;
917
901
  }
918
902
  .action-modal-content {
919
- background: var(--background);
903
+ background: var(--color-background);
920
904
  padding: 3em 4em 2em;
921
905
  display: grid;
922
906
  gap: 1em;
@@ -937,7 +921,7 @@
937
921
  left: 50%;
938
922
  transform: translate(-50%);
939
923
  z-index: -1;
940
- background: var(--primary-500);
924
+ background: var(--color-primary-500);
941
925
  border-radius: 10px;
942
926
  display: block;
943
927
  transition: top 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
@@ -948,8 +932,8 @@
948
932
  top: 0;
949
933
  left: 50%;
950
934
  transform: translate(-50%, -50%);
951
- background: var(--primary-500);
952
- color: var(--primary-50);
935
+ background: var(--color-primary-500);
936
+ color: var(--color-primary-50);
953
937
  padding: 0;
954
938
  border-radius: 50%;
955
939
  width: 2em;
@@ -959,37 +943,37 @@
959
943
  transition: box-shadow 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
960
944
  z-index: 1;
961
945
  box-shadow:
962
- 0 0 0 0 hsl(from var(--primary-500) h s l / 53%),
963
- 0 0 0 0 hsl(from var(--primary-500) h s l / 40%),
964
- 0 0 0 0 hsl(from var(--primary-500) h s l / 27%),
965
- 0 0 0 0 hsl(from var(--primary-500) h s l / 14%);
946
+ 0 0 0 0 hsl(from var(--color-primary-500) h s l / 53%),
947
+ 0 0 0 0 hsl(from var(--color-primary-500) h s l / 40%),
948
+ 0 0 0 0 hsl(from var(--color-primary-500) h s l / 27%),
949
+ 0 0 0 0 hsl(from var(--color-primary-500) h s l / 14%);
966
950
  }
967
951
  .close-modal-button {
968
952
  width: 1em;
969
953
  height: 1em;
970
954
  border-radius: 50%;
971
955
  cursor: pointer;
972
- background: var(--background);
956
+ background: var(--color-background);
973
957
  position: absolute;
974
958
  top: 10px;
975
959
  right: 5px;
976
- font-size: var(--typography-size-label);
960
+ @apply text-label;
977
961
  opacity: 0;
978
962
  transition: opacity 300ms ease;
979
963
  z-index: 1;
980
964
  }
981
965
  &.line-on-top {
982
966
  .action-modal-content {
983
- border-top: 5px solid var(--primary-500);
967
+ border-top: 5px solid var(--color-primary-500);
984
968
  }
985
969
  }
986
970
  &:hover {
987
971
  .action-modal-icon {
988
972
  box-shadow:
989
- 0 0 0 7px hsl(from var(--primary-500) h s l / 53%),
990
- 0 0 0 14px hsl(from var(--primary-500) h s l / 40%),
991
- 0 0 0 21px hsl(from var(--primary-500) h s l / 27%),
992
- 0 0 0 28px hsl(from var(--primary-500) h s l / 14%);
973
+ 0 0 0 7px hsl(from var(--color-primary-500) h s l / 53%),
974
+ 0 0 0 14px hsl(from var(--color-primary-500) h s l / 40%),
975
+ 0 0 0 21px hsl(from var(--color-primary-500) h s l / 27%),
976
+ 0 0 0 28px hsl(from var(--color-primary-500) h s l / 14%);
993
977
  }
994
978
  .close-modal-button {
995
979
  opacity: 1;
@@ -1002,7 +986,7 @@
1002
986
 
1003
987
  /* src/components/modals/aside-modal/aside-modal.styles.css */
1004
988
  .aside-modal {
1005
- color: var(--foreground);
989
+ color: var(--color-foreground);
1006
990
  overflow: auto;
1007
991
  height: 100%;
1008
992
  .aside-modal-content {
@@ -1013,13 +997,13 @@
1013
997
  cursor: pointer;
1014
998
  display: grid;
1015
999
  place-content: center;
1016
- background: var(--background);
1017
- border: 4px solid var(--primary-500);
1000
+ background: var(--color-background);
1001
+ border: 4px solid var(--color-primary-500);
1018
1002
  position: absolute;
1019
1003
  padding: 0.5em;
1020
1004
  }
1021
1005
  &.left {
1022
- border-right: 4px solid var(--primary-500);
1006
+ border-right: 4px solid var(--color-primary-500);
1023
1007
  animation: slideIn-left 300ms ease;
1024
1008
  &.modal-close {
1025
1009
  animation: slideOut-left 300ms ease;
@@ -1032,7 +1016,7 @@
1032
1016
  }
1033
1017
  }
1034
1018
  &.right {
1035
- border-left: 4px solid var(--primary-500);
1019
+ border-left: 4px solid var(--color-primary-500);
1036
1020
  animation: slideIn-right 300ms ease;
1037
1021
  &.modal-close {
1038
1022
  animation: slideOut-right 300ms ease;
@@ -1045,7 +1029,7 @@
1045
1029
  }
1046
1030
  }
1047
1031
  &.top {
1048
- border-bottom: 4px solid var(--primary-500);
1032
+ border-bottom: 4px solid var(--color-primary-500);
1049
1033
  animation: slideIn-top 300ms ease;
1050
1034
  &.modal-close {
1051
1035
  animation: slideOut-top 300ms ease;
@@ -1058,7 +1042,7 @@
1058
1042
  }
1059
1043
  }
1060
1044
  &.bottom {
1061
- border-top: 4px solid var(--primary-500);
1045
+ border-top: 4px solid var(--color-primary-500);
1062
1046
  animation: slideIn-bottom 300ms ease;
1063
1047
  &.modal-close {
1064
1048
  animation: slideOut-bottom 300ms ease;
@@ -1091,9 +1075,9 @@
1091
1075
  /* src/components/modals/menu/menu.styles.css */
1092
1076
  .menu-modal {
1093
1077
  border-radius: 0.5em;
1094
- border: 1px solid var(--border);
1095
- background: var(--background);
1096
- box-shadow: 0 0 25px var(--background-paper);
1078
+ border: 1px solid var(--color-border);
1079
+ background: var(--color-background);
1080
+ box-shadow: 0 0 25px var(--color-background-paper);
1097
1081
  user-select: none;
1098
1082
  position: relative;
1099
1083
  overflow-y: auto;
@@ -1110,12 +1094,12 @@
1110
1094
  }
1111
1095
  .divider {
1112
1096
  margin: 0.4em 0;
1113
- color: var(--border);
1097
+ color: var(--color-border);
1114
1098
  }
1115
1099
  }
1116
1100
  .menu-label {
1117
- background: var(--background);
1118
- color: var(--foreground);
1101
+ background: var(--color-background);
1102
+ color: var(--color-foreground);
1119
1103
  font-weight: lighter;
1120
1104
  padding: 0.5em 1.2em;
1121
1105
  position: sticky;
@@ -1134,7 +1118,7 @@
1134
1118
  margin: 0 0.2em;
1135
1119
  position: relative;
1136
1120
  .ripple-effect {
1137
- background: hsl(from var(--foreground) h s l / 31%);
1121
+ background: hsl(from var(--color-foreground) h s l / 31%);
1138
1122
  }
1139
1123
  &:first-child {
1140
1124
  margin-top: 5px;
@@ -1152,13 +1136,13 @@
1152
1136
  }
1153
1137
  &:focus,
1154
1138
  &:hover {
1155
- background: hsl(from var(--background-paper) h s l / 25%);
1139
+ background: hsl(from var(--color-background-paper) h s l / 25%);
1156
1140
  }
1157
1141
  &.is-selected {
1158
- background: var(--background-paper);
1142
+ background: var(--color-background-paper);
1159
1143
  &:focus,
1160
1144
  &:hover {
1161
- background: hsl(from var(--background-paper) h s l / 75%);
1145
+ background: hsl(from var(--color-background-paper) h s l / 75%);
1162
1146
  }
1163
1147
  }
1164
1148
  }
@@ -1189,8 +1173,8 @@
1189
1173
  padding-right: 1em;
1190
1174
  border-radius: inherit;
1191
1175
  width: 100%;
1192
- font-size: var(--typography-size-label);
1193
- font-family: var(--typography-family-main) sans-serif;
1176
+ @apply text-label;
1177
+ font-family: var(--font-main) sans-serif;
1194
1178
  }
1195
1179
  }
1196
1180
  .input-color-box {
@@ -1216,12 +1200,12 @@
1216
1200
  .input-color-selector {
1217
1201
  display: grid;
1218
1202
  gap: 10px;
1219
- background: var(--background);
1220
- color: var(--foreground);
1203
+ background: var(--color-background);
1204
+ color: var(--color-foreground);
1221
1205
  padding: 10px;
1222
1206
  border-radius: 0 18px 18px 18px;
1223
1207
  border: 1px solid;
1224
- box-shadow: 0 5px 30px -5px var(--neutral-900);
1208
+ box-shadow: 0 5px 30px -5px var(--color-gray-900);
1225
1209
  .react-colorful__pointer {
1226
1210
  width: 1em;
1227
1211
  height: 1em;
@@ -1248,11 +1232,11 @@
1248
1232
  .color-input {
1249
1233
  padding: 0;
1250
1234
  border-radius: inherit;
1251
- background: var(--background);
1252
- color: var(--foreground);
1235
+ background: var(--color-background);
1236
+ color: var(--color-foreground);
1253
1237
  width: 100%;
1254
- font-size: var(--typography-size-label);
1255
- font-family: var(--typography-family-main) sans-serif;
1238
+ @apply text-label;
1239
+ font-family: var(--font-main) sans-serif;
1256
1240
  letter-spacing: 2px;
1257
1241
  text-align: center;
1258
1242
  }
@@ -1276,15 +1260,15 @@
1276
1260
  grid-template-columns: 32px 1fr;
1277
1261
  padding: 10px;
1278
1262
  gap: 10px;
1279
- background: var(--secondary-500);
1280
- color: var(--secondary-50);
1263
+ background: var(--color-secondary-500);
1264
+ color: var(--color-secondary-50);
1281
1265
  align-items: center;
1282
1266
  .input-file--box--icon {
1283
1267
  width: 32px;
1284
1268
  height: 32px;
1285
1269
  border-radius: 5px;
1286
- background: var(--primary-50);
1287
- color: var(--primary-500);
1270
+ background: var(--color-primary-50);
1271
+ color: var(--color-primary-500);
1288
1272
  display: grid;
1289
1273
  place-content: center;
1290
1274
  }
@@ -1298,11 +1282,11 @@
1298
1282
  opacity: 0;
1299
1283
  }
1300
1284
  &:hover {
1301
- background: var(--primary-50);
1302
- color: var(--primary-500);
1285
+ background: var(--color-primary-50);
1286
+ color: var(--color-primary-500);
1303
1287
  .input-file--box--icon {
1304
- background: var(--primary-500);
1305
- color: var(--primary-50);
1288
+ background: var(--color-primary-500);
1289
+ color: var(--color-primary-50);
1306
1290
  }
1307
1291
  }
1308
1292
  }
@@ -1337,8 +1321,8 @@
1337
1321
  width: 2em;
1338
1322
  font-size: 0.8em;
1339
1323
  &:hover {
1340
- background: var(--primary-500);
1341
- color: var(--primary-50);
1324
+ background: var(--color-primary-500);
1325
+ color: var(--color-primary-50);
1342
1326
  }
1343
1327
  }
1344
1328
  }
@@ -1349,18 +1333,18 @@
1349
1333
  gap: 1em;
1350
1334
  align-items: center;
1351
1335
  padding: 10px;
1352
- background: var(--background);
1336
+ background: var(--color-background);
1353
1337
  &:not(:last-child) {
1354
1338
  border-bottom: 1px dashed;
1355
1339
  }
1356
1340
  &:hover {
1357
1341
  .file-card--delete {
1358
- color: var(--primary-500);
1342
+ color: var(--color-primary-500);
1359
1343
  }
1360
1344
  }
1361
1345
  .file-card--image {
1362
- background: var(--primary-500);
1363
- color: var(--primary-50);
1346
+ background: var(--color-primary-500);
1347
+ color: var(--color-primary-50);
1364
1348
  width: 32px;
1365
1349
  height: 32px;
1366
1350
  border-radius: 5px;
@@ -1382,8 +1366,8 @@
1382
1366
  cursor: pointer;
1383
1367
  transition: all 0.3s ease;
1384
1368
  &:hover {
1385
- background: var(--primary-500);
1386
- color: var(--primary-50);
1369
+ background: var(--color-primary-500);
1370
+ color: var(--color-primary-50);
1387
1371
  }
1388
1372
  }
1389
1373
  }
@@ -1391,7 +1375,7 @@
1391
1375
  /* src/components/form/radio/radio.styles.css */
1392
1376
  .radio {
1393
1377
  border-radius: 50%;
1394
- background: var(--background-paper);
1378
+ background: var(--color-background-paper);
1395
1379
  transition: all 300ms ease;
1396
1380
  width: 1em;
1397
1381
  height: 1em;
@@ -1427,7 +1411,7 @@
1427
1411
  height: 0;
1428
1412
  }
1429
1413
  .radio-container {
1430
- --color: var(--neutral-800);
1414
+ --color: var(--color-gray-800);
1431
1415
  display: flex;
1432
1416
  align-items: center;
1433
1417
  gap: 1em;
@@ -1463,25 +1447,25 @@
1463
1447
  }
1464
1448
  }
1465
1449
  &.color-primary {
1466
- --color: var(--primary-500);
1450
+ --color: var(--color-primary-500);
1467
1451
  }
1468
1452
  &.color-secondary {
1469
- --color: var(--secondary-500);
1453
+ --color: var(--color-secondary-500);
1470
1454
  }
1471
1455
  &.color-tertiary {
1472
- --color: var(--tertiary-500);
1456
+ --color: var(--color-tertiary-500);
1473
1457
  }
1474
1458
  &.color-active {
1475
- --color: var(--active-500);
1459
+ --color: var(--color-active-500);
1476
1460
  }
1477
1461
  &.color-warning {
1478
- --color: var(--warning-500);
1462
+ --color: var(--color-warning-500);
1479
1463
  }
1480
1464
  &.color-alert {
1481
- --color: var(--alert-500);
1465
+ --color: var(--color-alert-500);
1482
1466
  }
1483
1467
  &.color-info {
1484
- --color: var(--info-500);
1468
+ --color: var(--color-info-500);
1485
1469
  }
1486
1470
  }
1487
1471
 
@@ -1519,7 +1503,7 @@
1519
1503
  font-size: 0.6em;
1520
1504
  padding: 0.5em;
1521
1505
  &:hover {
1522
- background: hsl(from var(--foreground) h s l / 33%);
1506
+ background: hsl(from var(--color-foreground) h s l / 33%);
1523
1507
  }
1524
1508
  }
1525
1509
  .select-container {
@@ -1596,13 +1580,13 @@
1596
1580
  }
1597
1581
  }
1598
1582
  .select-options-header {
1599
- background: var(--background);
1583
+ background: var(--color-background);
1600
1584
  padding: 2px 5px;
1601
- border-bottom: 1px solid var(--border);
1585
+ border-bottom: 1px solid var(--color-border);
1602
1586
  .input-search {
1603
1587
  outline: none;
1604
1588
  padding: 0.8em 5px;
1605
- font-size: var(--typography-size-label);
1589
+ @apply text-label;
1606
1590
  width: 100%;
1607
1591
  }
1608
1592
  }
@@ -1627,8 +1611,8 @@
1627
1611
  width: 20px;
1628
1612
  height: 20px;
1629
1613
  border-radius: 1em;
1630
- background: var(--primary-500);
1631
- box-shadow: 0 0 0 0 var(--neutral-500);
1614
+ background: var(--color-primary-500);
1615
+ box-shadow: 0 0 0 0 var(--color-gray-500);
1632
1616
  margin-top: -8px;
1633
1617
  transition: all 300ms ease;
1634
1618
  cursor: pointer;
@@ -1636,40 +1620,40 @@
1636
1620
  &::-webkit-slider-runnable-track {
1637
1621
  height: 4px;
1638
1622
  border-radius: 1em;
1639
- background: hsl(from var(--primary-200) h s l / 50%);
1623
+ background: hsl(from var(--color-primary-200) h s l / 50%);
1640
1624
  transition: all 300ms ease;
1641
1625
  }
1642
1626
  &:focus,
1643
1627
  &:hover {
1644
1628
  &::-webkit-slider-thumb {
1645
- background: var(--primary-500);
1646
- box-shadow: 0 0 0 6px hsl(from var(--primary-500) h s l / 50%);
1629
+ background: var(--color-primary-500);
1630
+ box-shadow: 0 0 0 6px hsl(from var(--color-primary-500) h s l / 50%);
1647
1631
  cursor: grab;
1648
1632
  }
1649
1633
  }
1650
1634
  &:active {
1651
1635
  &::-webkit-slider-thumb {
1652
- box-shadow: 0 0 0 12px hsl(from var(--primary-500) h s l / 31%);
1636
+ box-shadow: 0 0 0 12px hsl(from var(--color-primary-500) h s l / 31%);
1653
1637
  cursor: grabbing;
1654
1638
  }
1655
1639
  }
1656
1640
  &:focus {
1657
1641
  &::-webkit-slider-runnable-track {
1658
- background: var(--primary-300);
1642
+ background: var(--color-primary-300);
1659
1643
  }
1660
1644
  }
1661
1645
  }
1662
1646
  &:has(.slider-number:focus) .slider::-webkit-slider-thumb,
1663
1647
  &:has(.slider-number:hover) .slider::-webkit-slider-thumb {
1664
- background: var(--primary-500);
1665
- box-shadow: 0 0 0 6px hsl(from var(--primary-500) h s l / 31%);
1648
+ background: var(--color-primary-500);
1649
+ box-shadow: 0 0 0 6px hsl(from var(--color-primary-500) h s l / 31%);
1666
1650
  }
1667
1651
  .slider-number {
1668
1652
  transition: all 300ms ease;
1669
1653
  border: 1px solid;
1670
1654
  border-radius: 5px;
1671
1655
  text-align: center;
1672
- font-size: var(--typography-size-label);
1656
+ @apply text-label;
1673
1657
  appearance: none;
1674
1658
  -webkit-appearance: none;
1675
1659
  -moz-appearance: none;
@@ -1685,7 +1669,7 @@
1685
1669
  }
1686
1670
  &.is-focus {
1687
1671
  .slider-number {
1688
- color: var(--primary-500);
1672
+ color: var(--color-primary-500);
1689
1673
  }
1690
1674
  }
1691
1675
  }
@@ -1699,8 +1683,8 @@
1699
1683
 
1700
1684
  /* src/components/tooltips/tooltip/tooltip.styles.css */
1701
1685
  .tooltip {
1702
- color: var(--foreground);
1703
- font-size: var(--typography-size-small);
1686
+ color: var(--color-foreground);
1687
+ @apply text-small;
1704
1688
  line-height: 1em;
1705
1689
  border-radius: 5px;
1706
1690
  padding: 0.5em 1em;
@@ -1710,15 +1694,15 @@
1710
1694
  &::before {
1711
1695
  content: "";
1712
1696
  display: block;
1713
- background: var(--background-paper);
1697
+ background: var(--color-background-paper);
1714
1698
  position: absolute;
1715
1699
  z-index: 1;
1716
1700
  width: 10px;
1717
1701
  height: 10px;
1718
1702
  border-left: 1px solid transparent;
1719
1703
  border-top: 1px solid transparent;
1720
- border-right: 1px solid var(--foreground);
1721
- border-bottom: 1px solid var(--foreground);
1704
+ border-right: 1px solid var(--color-foreground);
1705
+ border-bottom: 1px solid var(--color-foreground);
1722
1706
  border-radius: 0 0 3px 0;
1723
1707
  }
1724
1708
  &.left {
@@ -1781,9 +1765,9 @@
1781
1765
  --dot-size: attr(data-dot-size);
1782
1766
  --dot-hover-size: attr(data-dot-hover-size);
1783
1767
  --padding: attr(data-padding);
1784
- --color: var(--neutral-500);
1785
- --color-dark: var(--neutral-800);
1786
- --color-contrast: var(--neutral-50);
1768
+ --color: var(--color-gray-500);
1769
+ --color-dark: var(--color-gray-800);
1770
+ --color-contrast: var(--color-gray-50);
1787
1771
  display: flex;
1788
1772
  align-items: center;
1789
1773
  gap: 0.5em;
@@ -1791,7 +1775,7 @@
1791
1775
  .switch {
1792
1776
  width: calc(var(--width) + var(--padding) * 2);
1793
1777
  border-radius: 100em;
1794
- background: var(--background-paper);
1778
+ background: var(--color-background-paper);
1795
1779
  padding: var(--padding);
1796
1780
  transition: all 300ms ease;
1797
1781
  position: relative;
@@ -1835,13 +1819,13 @@
1835
1819
  }
1836
1820
  }
1837
1821
  &:not(.is-readonly):has(input:disabled) {
1838
- background: var(--background-disabled);
1822
+ background: var(--color-background-disabled);
1839
1823
  .switch-dot {
1840
- background: var(--foreground-disabled);
1824
+ background: var(--color-foreground-disabled);
1841
1825
  }
1842
1826
  .switch-internal-left-icon,
1843
1827
  .switch-internal-right-icon {
1844
- color: var(--foreground-disabled);
1828
+ color: var(--color-foreground-disabled);
1845
1829
  }
1846
1830
  &.is-checked {
1847
1831
  background: var(--color-dark);
@@ -1879,45 +1863,45 @@
1879
1863
  margin-left: calc(var(--width) - var(--dot-hover-size));
1880
1864
  }
1881
1865
  &.color-primary {
1882
- --color: var(--primary-500);
1883
- --color-dark: var(--primary-700);
1884
- --color-contrast: var(--primary-50);
1866
+ --color: var(--color-primary-500);
1867
+ --color-dark: var(--color-primary-700);
1868
+ --color-contrast: var(--color-primary-50);
1885
1869
  }
1886
1870
  &.color-secondary {
1887
- --color: var(--secondary-500);
1888
- --color-dark: var(--secondary-700);
1889
- --color-contrast: var(--secondary-50);
1871
+ --color: var(--color-secondary-500);
1872
+ --color-dark: var(--color-secondary-700);
1873
+ --color-contrast: var(--color-secondary-50);
1890
1874
  }
1891
1875
  &.color-tertiary {
1892
- --color: var(--tertiary-500);
1893
- --color-dark: var(--tertiary-700);
1894
- --color-contrast: var(--tertiary-50);
1876
+ --color: var(--color-tertiary-500);
1877
+ --color-dark: var(--color-tertiary-700);
1878
+ --color-contrast: var(--color-tertiary-50);
1895
1879
  }
1896
1880
  &.color-active {
1897
- --color: var(--active-500);
1898
- --color-dark: var(--active-700);
1899
- --color-contrast: var(--active-50);
1881
+ --color: var(--color-active-500);
1882
+ --color-dark: var(--color-active-700);
1883
+ --color-contrast: var(--color-active-50);
1900
1884
  }
1901
1885
  &.color-warning {
1902
- --color: var(--warning-500);
1903
- --color-dark: var(--warning-700);
1904
- --color-contrast: var(--warning-50);
1886
+ --color: var(--color-warning-500);
1887
+ --color-dark: var(--color-warning-700);
1888
+ --color-contrast: var(--color-warning-50);
1905
1889
  }
1906
1890
  &.color-alert {
1907
- --color: var(--alert-500);
1908
- --color-dark: var(--alert-700);
1909
- --color-contrast: var(--alert-50);
1891
+ --color: var(--color-alert-500);
1892
+ --color-dark: var(--color-alert-700);
1893
+ --color-contrast: var(--color-alert-50);
1910
1894
  }
1911
1895
  &.color-info {
1912
- --color: var(--info-500);
1913
- --color-dark: var(--info-700);
1914
- --color-contrast: var(--info-50);
1896
+ --color: var(--color-info-500);
1897
+ --color-dark: var(--color-info-700);
1898
+ --color-contrast: var(--color-info-50);
1915
1899
  }
1916
1900
  }
1917
1901
 
1918
1902
  /* src/components/smart-table/smart-table.styles.css */
1919
1903
  .smart-table-container {
1920
- border: 0 solid var(--primary-500);
1904
+ border: 0 solid var(--color-primary-500);
1921
1905
  border-radius: 5px;
1922
1906
  overflow: auto;
1923
1907
  height: 100%;
@@ -1940,24 +1924,24 @@
1940
1924
  top: 0;
1941
1925
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
1942
1926
  tr {
1943
- background: var(--primary-500);
1944
- color: var(--primary-50);
1927
+ background: var(--color-primary-500);
1928
+ color: var(--color-primary-50);
1945
1929
  transition: all 300ms ease;
1946
1930
  }
1947
1931
  }
1948
1932
  tbody {
1949
1933
  tr {
1950
- box-shadow: inset 0 0 0 0 var(--primary-500);
1934
+ box-shadow: inset 0 0 0 0 var(--color-primary-500);
1951
1935
  transition: box-shadow 300ms ease;
1952
1936
  &.row-selected,
1953
1937
  &:hover {
1954
- background: var(--background-paper);
1938
+ background: var(--color-background-paper);
1955
1939
  }
1956
1940
  &.row-selected {
1957
- box-shadow: inset 10px 0 0 -5px var(--primary-500);
1941
+ box-shadow: inset 10px 0 0 -5px var(--color-primary-500);
1958
1942
  }
1959
1943
  &:not(:last-child) {
1960
- border-bottom: 1px solid var(--border);
1944
+ border-bottom: 1px solid var(--color-border);
1961
1945
  }
1962
1946
  }
1963
1947
  }
@@ -2003,8 +1987,8 @@
2003
1987
  transition: all 300ms ease;
2004
1988
  }
2005
1989
  .tab-list {
2006
- --color: var(--neutral-900);
2007
- --color-contrast: var(--neutral-50);
1990
+ --color: var(--color-gray-900);
1991
+ --color-contrast: var(--color-gray-50);
2008
1992
  --inner-radius: 0;
2009
1993
  --outer-radius: 0;
2010
1994
  display: grid;
@@ -2012,20 +1996,20 @@
2012
1996
  gap: 1em;
2013
1997
  align-items: center;
2014
1998
  position: relative;
2015
- font-size: var(--typography-size-label);
1999
+ @apply text-label;
2016
2000
  border-radius: var(--outer-radius);
2017
2001
  .tab,
2018
2002
  .tabs-selector {
2019
2003
  border-radius: var(--inner-radius);
2020
2004
  }
2021
2005
  &.size-small {
2022
- font-size: var(--typography-size-small);
2006
+ @apply text-small;
2023
2007
  }
2024
2008
  &.size-medium {
2025
- font-size: var(--typography-size-label);
2009
+ @apply text-label;
2026
2010
  }
2027
2011
  &.size-large {
2028
- font-size: var(--typography-size-body);
2012
+ @apply text-body;
2029
2013
  }
2030
2014
  .tabs-selector {
2031
2015
  position: absolute;
@@ -2045,7 +2029,7 @@
2045
2029
  color: var(--color-contrast);
2046
2030
  }
2047
2031
  &:not(.is-open):hover {
2048
- color: var(--neutral-900);
2032
+ color: var(--color-gray-900);
2049
2033
  }
2050
2034
  }
2051
2035
  &.radius-none {
@@ -2074,8 +2058,8 @@
2074
2058
  align-content: start;
2075
2059
  }
2076
2060
  &.variant-solid {
2077
- background: var(--background-paper);
2078
- color: var(--foreground);
2061
+ background: var(--color-background-paper);
2062
+ color: var(--color-foreground);
2079
2063
  padding: 0.5em;
2080
2064
  }
2081
2065
  &.variant-ghost {
@@ -2087,7 +2071,7 @@
2087
2071
  &.variant-line {
2088
2072
  border-radius: 0;
2089
2073
  &:not(.vertical-direction) {
2090
- border-bottom: 2px solid var(--border);
2074
+ border-bottom: 2px solid var(--color-border);
2091
2075
  }
2092
2076
  .tabs-selector {
2093
2077
  border-radius: 0;
@@ -2100,41 +2084,41 @@
2100
2084
  }
2101
2085
  }
2102
2086
  &.color-primary {
2103
- --color: var(--primary-500);
2104
- --color-contrast: var(--primary-50);
2087
+ --color: var(--color-primary-500);
2088
+ --color-contrast: var(--color-primary-50);
2105
2089
  }
2106
2090
  &.color-secondary {
2107
- --color: var(--secondary-500);
2108
- --color-contrast: var(--secondary-50);
2091
+ --color: var(--color-secondary-500);
2092
+ --color-contrast: var(--color-secondary-50);
2109
2093
  }
2110
2094
  &.color-tertiary {
2111
- --color: var(--tertiary-500);
2112
- --color-contrast: var(--tertiary-50);
2095
+ --color: var(--color-tertiary-500);
2096
+ --color-contrast: var(--color-tertiary-50);
2113
2097
  }
2114
2098
  &.color-active {
2115
- --color: var(--active-500);
2116
- --color-contrast: var(--active-50);
2099
+ --color: var(--color-active-500);
2100
+ --color-contrast: var(--color-active-50);
2117
2101
  }
2118
2102
  &.color-warning {
2119
- --color: var(--warning-500);
2120
- --color-contrast: var(--warning-50);
2103
+ --color: var(--color-warning-500);
2104
+ --color-contrast: var(--color-warning-50);
2121
2105
  }
2122
2106
  &.color-alert {
2123
- --color: var(--alert-500);
2124
- --color-contrast: var(--alert-50);
2107
+ --color: var(--color-alert-500);
2108
+ --color-contrast: var(--color-alert-50);
2125
2109
  }
2126
2110
  &.color-info {
2127
- --color: var(--info-500);
2128
- --color-contrast: var(--info-50);
2111
+ --color: var(--color-info-500);
2112
+ --color-contrast: var(--color-info-50);
2129
2113
  }
2130
2114
  }
2131
2115
 
2132
2116
  /* src/components/tag/tag.styles.css */
2133
2117
  .tag {
2134
- --background: attr(data-background, var(--primary-500));
2135
- --text: attr(data-text, var(--primary-50));
2136
- --background-selected: attr(data-background-selected, var(--primary-700));
2137
- --text-selected: attr(data-text-selected, var(--primary-50));
2118
+ --background: attr(data-background, var(--color-primary-500));
2119
+ --text: attr(data-text, var(--color-primary-50));
2120
+ --background-selected: attr(data-background-selected, var(--color-primary-700));
2121
+ --text-selected: attr(data-text-selected, var(--color-primary-50));
2138
2122
  padding: 0.4em 0.8em;
2139
2123
  border-radius: 0.3em;
2140
2124
  border: 1px solid;
@@ -2142,7 +2126,7 @@
2142
2126
  color: var(--text);
2143
2127
  transition: all 300ms ease;
2144
2128
  display: inline-block;
2145
- font-size: var(--typography-size-label);
2129
+ @apply text-label;
2146
2130
  user-select: none;
2147
2131
  &.no-wrap {
2148
2132
  white-space: nowrap;