@vsn-ux/gaia-styles 0.5.0 → 0.5.2

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 (13) hide show
  1. package/README.md +3 -2
  2. package/dist/all-10pt.css +39 -4
  3. package/dist/all-no-reset-10pt.css +39 -4
  4. package/dist/all-no-reset.css +39 -4
  5. package/dist/all.css +39 -4
  6. package/dist/components/button.css +36 -1
  7. package/dist/components/modal.css +2 -2
  8. package/dist/components/select.css +1 -1
  9. package/dist/components.css +39 -4
  10. package/package.json +1 -1
  11. package/src/styles/components/button.css +44 -4
  12. package/src/styles/components/modal.css +2 -2
  13. package/src/styles/components/select.css +1 -1
package/README.md CHANGED
@@ -146,14 +146,15 @@ Since the deployed path to the font files may vary depending on your project's s
146
146
  font-style: normal;
147
147
  font-weight: 400 700;
148
148
  font-display: swap;
149
- src: url('<path-to-your-assets-or-cdn>/InterVariable.woff2') format('woff2');
149
+ src: url('<path-to-your-assets-or-cdn>/InterVariable.woff2?v=4.1')
150
+ format('woff2');
150
151
  }
151
152
  @font-face {
152
153
  font-family: 'Inter';
153
154
  font-style: italic;
154
155
  font-weight: 400 700;
155
156
  font-display: swap;
156
- src: url('<path-to-your-assets-or-cdn>/InterVariable-Italic.woff2')
157
+ src: url('<path-to-your-assets-or-cdn>/InterVariable-Italic.woff2?v=4.1')
157
158
  format('woff2');
158
159
  }
159
160
  ```
package/dist/all-10pt.css CHANGED
@@ -489,6 +489,9 @@
489
489
  --tw-font-weight: 500;
490
490
  font-weight: 500;
491
491
  white-space: nowrap;
492
+ .ga-icon {
493
+ color: var(--ga-color-icon-action);
494
+ }
492
495
  &:focus-visible {
493
496
  outline-style: var(--tw-outline-style);
494
497
  outline-width: 2px;
@@ -497,10 +500,16 @@
497
500
  }
498
501
  &:disabled {
499
502
  cursor: not-allowed;
503
+ .ga-icon {
504
+ color: var(--ga-color-icon-on-disabled);
505
+ }
500
506
  }
501
507
  &.ga-button--primary {
502
508
  background-color: var(--ga-color-surface-action);
503
509
  color: var(--ga-color-text-on-action);
510
+ .ga-icon {
511
+ color: var(--ga-color-icon-on-action);
512
+ }
504
513
  &:hover {
505
514
  background-color: var(--ga-color-surface-action-hover);
506
515
  }
@@ -510,6 +519,9 @@
510
519
  &:disabled {
511
520
  background-color: var(--ga-color-surface-disabled);
512
521
  color: var(--ga-color-text-disable-selected);
522
+ .ga-icon {
523
+ color: var(--ga-color-icon-on-disabled);
524
+ }
513
525
  }
514
526
  }
515
527
  &.ga-button--secondary {
@@ -520,6 +532,9 @@
520
532
  color: var(--ga-color-text-action);
521
533
  &:hover {
522
534
  background-color: var(--ga-color-surface-action-hover-2);
535
+ .ga-icon {
536
+ color: var(--ga-color-icon-action-hover);
537
+ }
523
538
  }
524
539
  &:active {
525
540
  background-color: var(--ga-color-surface-primary);
@@ -528,19 +543,33 @@
528
543
  border-color: var(--ga-color-border-disabled);
529
544
  background-color: var(--ga-color-surface-page);
530
545
  color: var(--ga-color-text-disabled);
546
+ .ga-icon {
547
+ color: var(--ga-color-icon-on-disabled);
548
+ }
531
549
  }
532
550
  }
533
551
  &.ga-button--ghost {
552
+ border-style: var(--tw-border-style);
553
+ border-width: 1px;
554
+ border-color: transparent;
534
555
  background-color: transparent;
535
556
  color: var(--ga-color-text-action);
536
557
  &:hover {
558
+ border-color: var(--ga-color-border-action-hover);
537
559
  color: var(--ga-color-text-action-hover);
560
+ .ga-icon {
561
+ color: var(--ga-color-icon-action-hover);
562
+ }
538
563
  }
539
564
  &:active {
540
565
  color: var(--ga-color-text-action);
541
566
  }
542
567
  &:disabled {
568
+ border-color: transparent;
543
569
  color: var(--ga-color-text-disabled);
570
+ .ga-icon {
571
+ color: var(--ga-color-icon-disabled);
572
+ }
544
573
  }
545
574
  }
546
575
  &.ga-button--transparent {
@@ -551,6 +580,9 @@
551
580
  color: var(--ga-color-text-action);
552
581
  &:hover {
553
582
  background-color: var(--ga-color-surface-action-hover-2);
583
+ .ga-icon {
584
+ color: var(--ga-color-icon-action-hover);
585
+ }
554
586
  }
555
587
  &:focus-visible {
556
588
  border-color: var(--ga-color-border-action);
@@ -561,7 +593,10 @@
561
593
  &:disabled {
562
594
  border-color: var(--ga-color-border-disabled);
563
595
  background-color: transparent;
564
- color: var(--ga-color-text-disabled);
596
+ color: var(--ga-color-text-disable-selected);
597
+ .ga-icon {
598
+ color: var(--ga-color-icon-on-disabled);
599
+ }
565
600
  }
566
601
  }
567
602
  &.ga-button--icon-only {
@@ -1319,7 +1354,7 @@
1319
1354
  }
1320
1355
  .ga-modal__top-section {
1321
1356
  display: flex;
1322
- min-height: calc(0.4rem * 16);
1357
+ min-height: calc(0.4rem * 8);
1323
1358
  flex-shrink: 0;
1324
1359
  align-items: flex-start;
1325
1360
  gap: calc(0.4rem * 4);
@@ -1381,7 +1416,7 @@
1381
1416
  align-items: center;
1382
1417
  justify-content: flex-end;
1383
1418
  gap: calc(0.4rem * 2);
1384
- padding-right: calc(0.4rem * 2);
1419
+ padding-inline: calc(0.4rem * 2);
1385
1420
  }
1386
1421
  .ga-modal__close-icon {
1387
1422
  margin-top: calc(0.4rem * -2);
@@ -1715,7 +1750,7 @@
1715
1750
  min-height: calc(0.4rem * 10);
1716
1751
  .ga-select__main-area {
1717
1752
  display: flex;
1718
- max-height: calc(0.4rem * 24);
1753
+ max-height: calc(0.4rem * 23.5);
1719
1754
  min-height: calc(0.4rem * 0);
1720
1755
  flex: 1;
1721
1756
  flex-wrap: wrap;
package/dist/all-no-reset-10pt.css CHANGED
@@ -342,6 +342,9 @@
342
342
  --tw-font-weight: 500;
343
343
  font-weight: 500;
344
344
  white-space: nowrap;
345
+ .ga-icon {
346
+ color: var(--ga-color-icon-action);
347
+ }
345
348
  &:focus-visible {
346
349
  outline-style: var(--tw-outline-style);
347
350
  outline-width: 2px;
@@ -350,10 +353,16 @@
350
353
  }
351
354
  &:disabled {
352
355
  cursor: not-allowed;
356
+ .ga-icon {
357
+ color: var(--ga-color-icon-on-disabled);
358
+ }
353
359
  }
354
360
  &.ga-button--primary {
355
361
  background-color: var(--ga-color-surface-action);
356
362
  color: var(--ga-color-text-on-action);
363
+ .ga-icon {
364
+ color: var(--ga-color-icon-on-action);
365
+ }
357
366
  &:hover {
358
367
  background-color: var(--ga-color-surface-action-hover);
359
368
  }
@@ -363,6 +372,9 @@
363
372
  &:disabled {
364
373
  background-color: var(--ga-color-surface-disabled);
365
374
  color: var(--ga-color-text-disable-selected);
375
+ .ga-icon {
376
+ color: var(--ga-color-icon-on-disabled);
377
+ }
366
378
  }
367
379
  }
368
380
  &.ga-button--secondary {
@@ -373,6 +385,9 @@
373
385
  color: var(--ga-color-text-action);
374
386
  &:hover {
375
387
  background-color: var(--ga-color-surface-action-hover-2);
388
+ .ga-icon {
389
+ color: var(--ga-color-icon-action-hover);
390
+ }
376
391
  }
377
392
  &:active {
378
393
  background-color: var(--ga-color-surface-primary);
@@ -381,19 +396,33 @@
381
396
  border-color: var(--ga-color-border-disabled);
382
397
  background-color: var(--ga-color-surface-page);
383
398
  color: var(--ga-color-text-disabled);
399
+ .ga-icon {
400
+ color: var(--ga-color-icon-on-disabled);
401
+ }
384
402
  }
385
403
  }
386
404
  &.ga-button--ghost {
405
+ border-style: var(--tw-border-style);
406
+ border-width: 1px;
407
+ border-color: transparent;
387
408
  background-color: transparent;
388
409
  color: var(--ga-color-text-action);
389
410
  &:hover {
411
+ border-color: var(--ga-color-border-action-hover);
390
412
  color: var(--ga-color-text-action-hover);
413
+ .ga-icon {
414
+ color: var(--ga-color-icon-action-hover);
415
+ }
391
416
  }
392
417
  &:active {
393
418
  color: var(--ga-color-text-action);
394
419
  }
395
420
  &:disabled {
421
+ border-color: transparent;
396
422
  color: var(--ga-color-text-disabled);
423
+ .ga-icon {
424
+ color: var(--ga-color-icon-disabled);
425
+ }
397
426
  }
398
427
  }
399
428
  &.ga-button--transparent {
@@ -404,6 +433,9 @@
404
433
  color: var(--ga-color-text-action);
405
434
  &:hover {
406
435
  background-color: var(--ga-color-surface-action-hover-2);
436
+ .ga-icon {
437
+ color: var(--ga-color-icon-action-hover);
438
+ }
407
439
  }
408
440
  &:focus-visible {
409
441
  border-color: var(--ga-color-border-action);
@@ -414,7 +446,10 @@
414
446
  &:disabled {
415
447
  border-color: var(--ga-color-border-disabled);
416
448
  background-color: transparent;
417
- color: var(--ga-color-text-disabled);
449
+ color: var(--ga-color-text-disable-selected);
450
+ .ga-icon {
451
+ color: var(--ga-color-icon-on-disabled);
452
+ }
418
453
  }
419
454
  }
420
455
  &.ga-button--icon-only {
@@ -1172,7 +1207,7 @@
1172
1207
  }
1173
1208
  .ga-modal__top-section {
1174
1209
  display: flex;
1175
- min-height: calc(0.4rem * 16);
1210
+ min-height: calc(0.4rem * 8);
1176
1211
  flex-shrink: 0;
1177
1212
  align-items: flex-start;
1178
1213
  gap: calc(0.4rem * 4);
@@ -1234,7 +1269,7 @@
1234
1269
  align-items: center;
1235
1270
  justify-content: flex-end;
1236
1271
  gap: calc(0.4rem * 2);
1237
- padding-right: calc(0.4rem * 2);
1272
+ padding-inline: calc(0.4rem * 2);
1238
1273
  }
1239
1274
  .ga-modal__close-icon {
1240
1275
  margin-top: calc(0.4rem * -2);
@@ -1568,7 +1603,7 @@
1568
1603
  min-height: calc(0.4rem * 10);
1569
1604
  .ga-select__main-area {
1570
1605
  display: flex;
1571
- max-height: calc(0.4rem * 24);
1606
+ max-height: calc(0.4rem * 23.5);
1572
1607
  min-height: calc(0.4rem * 0);
1573
1608
  flex: 1;
1574
1609
  flex-wrap: wrap;
package/dist/all-no-reset.css CHANGED
@@ -342,6 +342,9 @@
342
342
  --tw-font-weight: 500;
343
343
  font-weight: 500;
344
344
  white-space: nowrap;
345
+ .ga-icon {
346
+ color: var(--ga-color-icon-action);
347
+ }
345
348
  &:focus-visible {
346
349
  outline-style: var(--tw-outline-style);
347
350
  outline-width: 2px;
@@ -350,10 +353,16 @@
350
353
  }
351
354
  &:disabled {
352
355
  cursor: not-allowed;
356
+ .ga-icon {
357
+ color: var(--ga-color-icon-on-disabled);
358
+ }
353
359
  }
354
360
  &.ga-button--primary {
355
361
  background-color: var(--ga-color-surface-action);
356
362
  color: var(--ga-color-text-on-action);
363
+ .ga-icon {
364
+ color: var(--ga-color-icon-on-action);
365
+ }
357
366
  &:hover {
358
367
  background-color: var(--ga-color-surface-action-hover);
359
368
  }
@@ -363,6 +372,9 @@
363
372
  &:disabled {
364
373
  background-color: var(--ga-color-surface-disabled);
365
374
  color: var(--ga-color-text-disable-selected);
375
+ .ga-icon {
376
+ color: var(--ga-color-icon-on-disabled);
377
+ }
366
378
  }
367
379
  }
368
380
  &.ga-button--secondary {
@@ -373,6 +385,9 @@
373
385
  color: var(--ga-color-text-action);
374
386
  &:hover {
375
387
  background-color: var(--ga-color-surface-action-hover-2);
388
+ .ga-icon {
389
+ color: var(--ga-color-icon-action-hover);
390
+ }
376
391
  }
377
392
  &:active {
378
393
  background-color: var(--ga-color-surface-primary);
@@ -381,19 +396,33 @@
381
396
  border-color: var(--ga-color-border-disabled);
382
397
  background-color: var(--ga-color-surface-page);
383
398
  color: var(--ga-color-text-disabled);
399
+ .ga-icon {
400
+ color: var(--ga-color-icon-on-disabled);
401
+ }
384
402
  }
385
403
  }
386
404
  &.ga-button--ghost {
405
+ border-style: var(--tw-border-style);
406
+ border-width: 1px;
407
+ border-color: transparent;
387
408
  background-color: transparent;
388
409
  color: var(--ga-color-text-action);
389
410
  &:hover {
411
+ border-color: var(--ga-color-border-action-hover);
390
412
  color: var(--ga-color-text-action-hover);
413
+ .ga-icon {
414
+ color: var(--ga-color-icon-action-hover);
415
+ }
391
416
  }
392
417
  &:active {
393
418
  color: var(--ga-color-text-action);
394
419
  }
395
420
  &:disabled {
421
+ border-color: transparent;
396
422
  color: var(--ga-color-text-disabled);
423
+ .ga-icon {
424
+ color: var(--ga-color-icon-disabled);
425
+ }
397
426
  }
398
427
  }
399
428
  &.ga-button--transparent {
@@ -404,6 +433,9 @@
404
433
  color: var(--ga-color-text-action);
405
434
  &:hover {
406
435
  background-color: var(--ga-color-surface-action-hover-2);
436
+ .ga-icon {
437
+ color: var(--ga-color-icon-action-hover);
438
+ }
407
439
  }
408
440
  &:focus-visible {
409
441
  border-color: var(--ga-color-border-action);
@@ -414,7 +446,10 @@
414
446
  &:disabled {
415
447
  border-color: var(--ga-color-border-disabled);
416
448
  background-color: transparent;
417
- color: var(--ga-color-text-disabled);
449
+ color: var(--ga-color-text-disable-selected);
450
+ .ga-icon {
451
+ color: var(--ga-color-icon-on-disabled);
452
+ }
418
453
  }
419
454
  }
420
455
  &.ga-button--icon-only {
@@ -1172,7 +1207,7 @@
1172
1207
  }
1173
1208
  .ga-modal__top-section {
1174
1209
  display: flex;
1175
- min-height: calc(0.25rem * 16);
1210
+ min-height: calc(0.25rem * 8);
1176
1211
  flex-shrink: 0;
1177
1212
  align-items: flex-start;
1178
1213
  gap: calc(0.25rem * 4);
@@ -1234,7 +1269,7 @@
1234
1269
  align-items: center;
1235
1270
  justify-content: flex-end;
1236
1271
  gap: calc(0.25rem * 2);
1237
- padding-right: calc(0.25rem * 2);
1272
+ padding-inline: calc(0.25rem * 2);
1238
1273
  }
1239
1274
  .ga-modal__close-icon {
1240
1275
  margin-top: calc(0.25rem * -2);
@@ -1568,7 +1603,7 @@
1568
1603
  min-height: calc(0.25rem * 10);
1569
1604
  .ga-select__main-area {
1570
1605
  display: flex;
1571
- max-height: calc(0.25rem * 24);
1606
+ max-height: calc(0.25rem * 23.5);
1572
1607
  min-height: calc(0.25rem * 0);
1573
1608
  flex: 1;
1574
1609
  flex-wrap: wrap;
package/dist/all.css CHANGED
@@ -489,6 +489,9 @@
489
489
  --tw-font-weight: 500;
490
490
  font-weight: 500;
491
491
  white-space: nowrap;
492
+ .ga-icon {
493
+ color: var(--ga-color-icon-action);
494
+ }
492
495
  &:focus-visible {
493
496
  outline-style: var(--tw-outline-style);
494
497
  outline-width: 2px;
@@ -497,10 +500,16 @@
497
500
  }
498
501
  &:disabled {
499
502
  cursor: not-allowed;
503
+ .ga-icon {
504
+ color: var(--ga-color-icon-on-disabled);
505
+ }
500
506
  }
501
507
  &.ga-button--primary {
502
508
  background-color: var(--ga-color-surface-action);
503
509
  color: var(--ga-color-text-on-action);
510
+ .ga-icon {
511
+ color: var(--ga-color-icon-on-action);
512
+ }
504
513
  &:hover {
505
514
  background-color: var(--ga-color-surface-action-hover);
506
515
  }
@@ -510,6 +519,9 @@
510
519
  &:disabled {
511
520
  background-color: var(--ga-color-surface-disabled);
512
521
  color: var(--ga-color-text-disable-selected);
522
+ .ga-icon {
523
+ color: var(--ga-color-icon-on-disabled);
524
+ }
513
525
  }
514
526
  }
515
527
  &.ga-button--secondary {
@@ -520,6 +532,9 @@
520
532
  color: var(--ga-color-text-action);
521
533
  &:hover {
522
534
  background-color: var(--ga-color-surface-action-hover-2);
535
+ .ga-icon {
536
+ color: var(--ga-color-icon-action-hover);
537
+ }
523
538
  }
524
539
  &:active {
525
540
  background-color: var(--ga-color-surface-primary);
@@ -528,19 +543,33 @@
528
543
  border-color: var(--ga-color-border-disabled);
529
544
  background-color: var(--ga-color-surface-page);
530
545
  color: var(--ga-color-text-disabled);
546
+ .ga-icon {
547
+ color: var(--ga-color-icon-on-disabled);
548
+ }
531
549
  }
532
550
  }
533
551
  &.ga-button--ghost {
552
+ border-style: var(--tw-border-style);
553
+ border-width: 1px;
554
+ border-color: transparent;
534
555
  background-color: transparent;
535
556
  color: var(--ga-color-text-action);
536
557
  &:hover {
558
+ border-color: var(--ga-color-border-action-hover);
537
559
  color: var(--ga-color-text-action-hover);
560
+ .ga-icon {
561
+ color: var(--ga-color-icon-action-hover);
562
+ }
538
563
  }
539
564
  &:active {
540
565
  color: var(--ga-color-text-action);
541
566
  }
542
567
  &:disabled {
568
+ border-color: transparent;
543
569
  color: var(--ga-color-text-disabled);
570
+ .ga-icon {
571
+ color: var(--ga-color-icon-disabled);
572
+ }
544
573
  }
545
574
  }
546
575
  &.ga-button--transparent {
@@ -551,6 +580,9 @@
551
580
  color: var(--ga-color-text-action);
552
581
  &:hover {
553
582
  background-color: var(--ga-color-surface-action-hover-2);
583
+ .ga-icon {
584
+ color: var(--ga-color-icon-action-hover);
585
+ }
554
586
  }
555
587
  &:focus-visible {
556
588
  border-color: var(--ga-color-border-action);
@@ -561,7 +593,10 @@
561
593
  &:disabled {
562
594
  border-color: var(--ga-color-border-disabled);
563
595
  background-color: transparent;
564
- color: var(--ga-color-text-disabled);
596
+ color: var(--ga-color-text-disable-selected);
597
+ .ga-icon {
598
+ color: var(--ga-color-icon-on-disabled);
599
+ }
565
600
  }
566
601
  }
567
602
  &.ga-button--icon-only {
@@ -1319,7 +1354,7 @@
1319
1354
  }
1320
1355
  .ga-modal__top-section {
1321
1356
  display: flex;
1322
- min-height: calc(0.25rem * 16);
1357
+ min-height: calc(0.25rem * 8);
1323
1358
  flex-shrink: 0;
1324
1359
  align-items: flex-start;
1325
1360
  gap: calc(0.25rem * 4);
@@ -1381,7 +1416,7 @@
1381
1416
  align-items: center;
1382
1417
  justify-content: flex-end;
1383
1418
  gap: calc(0.25rem * 2);
1384
- padding-right: calc(0.25rem * 2);
1419
+ padding-inline: calc(0.25rem * 2);
1385
1420
  }
1386
1421
  .ga-modal__close-icon {
1387
1422
  margin-top: calc(0.25rem * -2);
@@ -1715,7 +1750,7 @@
1715
1750
  min-height: calc(0.25rem * 10);
1716
1751
  .ga-select__main-area {
1717
1752
  display: flex;
1718
- max-height: calc(0.25rem * 24);
1753
+ max-height: calc(0.25rem * 23.5);
1719
1754
  min-height: calc(0.25rem * 0);
1720
1755
  flex: 1;
1721
1756
  flex-wrap: wrap;
package/dist/components/button.css CHANGED
@@ -23,6 +23,9 @@
23
23
  --tw-font-weight: 500;
24
24
  font-weight: 500;
25
25
  white-space: nowrap;
26
+ .ga-icon {
27
+ color: var(--ga-color-icon-action);
28
+ }
26
29
  &:focus-visible {
27
30
  outline-style: var(--tw-outline-style);
28
31
  outline-width: 2px;
@@ -31,10 +34,16 @@
31
34
  }
32
35
  &:disabled {
33
36
  cursor: not-allowed;
37
+ .ga-icon {
38
+ color: var(--ga-color-icon-on-disabled);
39
+ }
34
40
  }
35
41
  &.ga-button--primary {
36
42
  background-color: var(--ga-color-surface-action);
37
43
  color: var(--ga-color-text-on-action);
44
+ .ga-icon {
45
+ color: var(--ga-color-icon-on-action);
46
+ }
38
47
  &:hover {
39
48
  background-color: var(--ga-color-surface-action-hover);
40
49
  }
@@ -44,6 +53,9 @@
44
53
  &:disabled {
45
54
  background-color: var(--ga-color-surface-disabled);
46
55
  color: var(--ga-color-text-disable-selected);
56
+ .ga-icon {
57
+ color: var(--ga-color-icon-on-disabled);
58
+ }
47
59
  }
48
60
  }
49
61
  &.ga-button--secondary {
@@ -54,6 +66,9 @@
54
66
  color: var(--ga-color-text-action);
55
67
  &:hover {
56
68
  background-color: var(--ga-color-surface-action-hover-2);
69
+ .ga-icon {
70
+ color: var(--ga-color-icon-action-hover);
71
+ }
57
72
  }
58
73
  &:active {
59
74
  background-color: var(--ga-color-surface-primary);
@@ -62,19 +77,33 @@
62
77
  border-color: var(--ga-color-border-disabled);
63
78
  background-color: var(--ga-color-surface-page);
64
79
  color: var(--ga-color-text-disabled);
80
+ .ga-icon {
81
+ color: var(--ga-color-icon-on-disabled);
82
+ }
65
83
  }
66
84
  }
67
85
  &.ga-button--ghost {
86
+ border-style: var(--tw-border-style);
87
+ border-width: 1px;
88
+ border-color: transparent;
68
89
  background-color: transparent;
69
90
  color: var(--ga-color-text-action);
70
91
  &:hover {
92
+ border-color: var(--ga-color-border-action-hover);
71
93
  color: var(--ga-color-text-action-hover);
94
+ .ga-icon {
95
+ color: var(--ga-color-icon-action-hover);
96
+ }
72
97
  }
73
98
  &:active {
74
99
  color: var(--ga-color-text-action);
75
100
  }
76
101
  &:disabled {
102
+ border-color: transparent;
77
103
  color: var(--ga-color-text-disabled);
104
+ .ga-icon {
105
+ color: var(--ga-color-icon-disabled);
106
+ }
78
107
  }
79
108
  }
80
109
  &.ga-button--transparent {
@@ -85,6 +114,9 @@
85
114
  color: var(--ga-color-text-action);
86
115
  &:hover {
87
116
  background-color: var(--ga-color-surface-action-hover-2);
117
+ .ga-icon {
118
+ color: var(--ga-color-icon-action-hover);
119
+ }
88
120
  }
89
121
  &:focus-visible {
90
122
  border-color: var(--ga-color-border-action);
@@ -95,7 +127,10 @@
95
127
  &:disabled {
96
128
  border-color: var(--ga-color-border-disabled);
97
129
  background-color: transparent;
98
- color: var(--ga-color-text-disabled);
130
+ color: var(--ga-color-text-disable-selected);
131
+ .ga-icon {
132
+ color: var(--ga-color-icon-on-disabled);
133
+ }
99
134
  }
100
135
  }
101
136
  &.ga-button--icon-only {
package/dist/components/modal.css CHANGED
@@ -63,7 +63,7 @@
63
63
  }
64
64
  .ga-modal__top-section {
65
65
  display: flex;
66
- min-height: calc(0.25rem * 16);
66
+ min-height: calc(0.25rem * 8);
67
67
  flex-shrink: 0;
68
68
  align-items: flex-start;
69
69
  gap: calc(0.25rem * 4);
@@ -125,7 +125,7 @@
125
125
  align-items: center;
126
126
  justify-content: flex-end;
127
127
  gap: calc(0.25rem * 2);
128
- padding-right: calc(0.25rem * 2);
128
+ padding-inline: calc(0.25rem * 2);
129
129
  }
130
130
  .ga-modal__close-icon {
131
131
  margin-top: calc(0.25rem * -2);
package/dist/components/select.css CHANGED
@@ -149,7 +149,7 @@
149
149
  min-height: calc(0.25rem * 10);
150
150
  .ga-select__main-area {
151
151
  display: flex;
152
- max-height: calc(0.25rem * 24);
152
+ max-height: calc(0.25rem * 23.5);
153
153
  min-height: calc(0.25rem * 0);
154
154
  flex: 1;
155
155
  flex-wrap: wrap;
package/dist/components.css CHANGED
@@ -123,6 +123,9 @@
123
123
  --tw-font-weight: 500;
124
124
  font-weight: 500;
125
125
  white-space: nowrap;
126
+ .ga-icon {
127
+ color: var(--ga-color-icon-action);
128
+ }
126
129
  &:focus-visible {
127
130
  outline-style: var(--tw-outline-style);
128
131
  outline-width: 2px;
@@ -131,10 +134,16 @@
131
134
  }
132
135
  &:disabled {
133
136
  cursor: not-allowed;
137
+ .ga-icon {
138
+ color: var(--ga-color-icon-on-disabled);
139
+ }
134
140
  }
135
141
  &.ga-button--primary {
136
142
  background-color: var(--ga-color-surface-action);
137
143
  color: var(--ga-color-text-on-action);
144
+ .ga-icon {
145
+ color: var(--ga-color-icon-on-action);
146
+ }
138
147
  &:hover {
139
148
  background-color: var(--ga-color-surface-action-hover);
140
149
  }
@@ -144,6 +153,9 @@
144
153
  &:disabled {
145
154
  background-color: var(--ga-color-surface-disabled);
146
155
  color: var(--ga-color-text-disable-selected);
156
+ .ga-icon {
157
+ color: var(--ga-color-icon-on-disabled);
158
+ }
147
159
  }
148
160
  }
149
161
  &.ga-button--secondary {
@@ -154,6 +166,9 @@
154
166
  color: var(--ga-color-text-action);
155
167
  &:hover {
156
168
  background-color: var(--ga-color-surface-action-hover-2);
169
+ .ga-icon {
170
+ color: var(--ga-color-icon-action-hover);
171
+ }
157
172
  }
158
173
  &:active {
159
174
  background-color: var(--ga-color-surface-primary);
@@ -162,19 +177,33 @@
162
177
  border-color: var(--ga-color-border-disabled);
163
178
  background-color: var(--ga-color-surface-page);
164
179
  color: var(--ga-color-text-disabled);
180
+ .ga-icon {
181
+ color: var(--ga-color-icon-on-disabled);
182
+ }
165
183
  }
166
184
  }
167
185
  &.ga-button--ghost {
186
+ border-style: var(--tw-border-style);
187
+ border-width: 1px;
188
+ border-color: transparent;
168
189
  background-color: transparent;
169
190
  color: var(--ga-color-text-action);
170
191
  &:hover {
192
+ border-color: var(--ga-color-border-action-hover);
171
193
  color: var(--ga-color-text-action-hover);
194
+ .ga-icon {
195
+ color: var(--ga-color-icon-action-hover);
196
+ }
172
197
  }
173
198
  &:active {
174
199
  color: var(--ga-color-text-action);
175
200
  }
176
201
  &:disabled {
202
+ border-color: transparent;
177
203
  color: var(--ga-color-text-disabled);
204
+ .ga-icon {
205
+ color: var(--ga-color-icon-disabled);
206
+ }
178
207
  }
179
208
  }
180
209
  &.ga-button--transparent {
@@ -185,6 +214,9 @@
185
214
  color: var(--ga-color-text-action);
186
215
  &:hover {
187
216
  background-color: var(--ga-color-surface-action-hover-2);
217
+ .ga-icon {
218
+ color: var(--ga-color-icon-action-hover);
219
+ }
188
220
  }
189
221
  &:focus-visible {
190
222
  border-color: var(--ga-color-border-action);
@@ -195,7 +227,10 @@
195
227
  &:disabled {
196
228
  border-color: var(--ga-color-border-disabled);
197
229
  background-color: transparent;
198
- color: var(--ga-color-text-disabled);
230
+ color: var(--ga-color-text-disable-selected);
231
+ .ga-icon {
232
+ color: var(--ga-color-icon-on-disabled);
233
+ }
199
234
  }
200
235
  }
201
236
  &.ga-button--icon-only {
@@ -953,7 +988,7 @@
953
988
  }
954
989
  .ga-modal__top-section {
955
990
  display: flex;
956
- min-height: calc(0.25rem * 16);
991
+ min-height: calc(0.25rem * 8);
957
992
  flex-shrink: 0;
958
993
  align-items: flex-start;
959
994
  gap: calc(0.25rem * 4);
@@ -1015,7 +1050,7 @@
1015
1050
  align-items: center;
1016
1051
  justify-content: flex-end;
1017
1052
  gap: calc(0.25rem * 2);
1018
- padding-right: calc(0.25rem * 2);
1053
+ padding-inline: calc(0.25rem * 2);
1019
1054
  }
1020
1055
  .ga-modal__close-icon {
1021
1056
  margin-top: calc(0.25rem * -2);
@@ -1349,7 +1384,7 @@
1349
1384
  min-height: calc(0.25rem * 10);
1350
1385
  .ga-select__main-area {
1351
1386
  display: flex;
1352
- max-height: calc(0.25rem * 24);
1387
+ max-height: calc(0.25rem * 23.5);
1353
1388
  min-height: calc(0.25rem * 0);
1354
1389
  flex: 1;
1355
1390
  flex-wrap: wrap;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "storybook dev -p 6006",
package/src/styles/components/button.css CHANGED
@@ -1,17 +1,29 @@
1
1
  .ga-button {
2
2
  @apply text-md inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-medium whitespace-nowrap;
3
3
 
4
+ .ga-icon {
5
+ @apply text-(--ga-color-icon-action);
6
+ }
7
+
4
8
  &:focus-visible {
5
9
  @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
6
10
  }
7
11
 
8
12
  &:disabled {
9
13
  @apply cursor-not-allowed;
14
+
15
+ .ga-icon {
16
+ @apply text-(--ga-color-icon-on-disabled);
17
+ }
10
18
  }
11
19
 
12
20
  &.ga-button--primary {
13
21
  @apply bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);
14
22
 
23
+ .ga-icon {
24
+ @apply text-(--ga-color-icon-on-action);
25
+ }
26
+
15
27
  &:hover {
16
28
  @apply bg-(--ga-color-surface-action-hover);
17
29
  }
@@ -22,6 +34,10 @@
22
34
 
23
35
  &:disabled {
24
36
  @apply bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
37
+
38
+ .ga-icon {
39
+ @apply text-(--ga-color-icon-on-disabled);
40
+ }
25
41
  }
26
42
  }
27
43
 
@@ -30,6 +46,10 @@
30
46
 
31
47
  &:hover {
32
48
  @apply bg-(--ga-color-surface-action-hover-2);
49
+
50
+ .ga-icon {
51
+ @apply text-(--ga-color-icon-action-hover);
52
+ }
33
53
  }
34
54
 
35
55
  &:active {
@@ -38,14 +58,22 @@
38
58
 
39
59
  &:disabled {
40
60
  @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-page) text-(--ga-color-text-disabled);
61
+
62
+ .ga-icon {
63
+ @apply text-(--ga-color-icon-on-disabled);
64
+ }
41
65
  }
42
66
  }
43
67
 
44
68
  &.ga-button--ghost {
45
- @apply bg-transparent text-(--ga-color-text-action);
69
+ @apply border border-transparent bg-transparent text-(--ga-color-text-action);
46
70
 
47
71
  &:hover {
48
- @apply text-(--ga-color-text-action-hover);
72
+ @apply border-(--ga-color-border-action-hover) text-(--ga-color-text-action-hover);
73
+
74
+ .ga-icon {
75
+ @apply text-(--ga-color-icon-action-hover);
76
+ }
49
77
  }
50
78
 
51
79
  &:active {
@@ -53,7 +81,11 @@
53
81
  }
54
82
 
55
83
  &:disabled {
56
- @apply text-(--ga-color-text-disabled);
84
+ @apply border-transparent text-(--ga-color-text-disabled);
85
+
86
+ .ga-icon {
87
+ @apply text-(--ga-color-icon-disabled);
88
+ }
57
89
  }
58
90
  }
59
91
 
@@ -62,6 +94,10 @@
62
94
 
63
95
  &:hover {
64
96
  @apply bg-(--ga-color-surface-action-hover-2);
97
+
98
+ .ga-icon {
99
+ @apply text-(--ga-color-icon-action-hover);
100
+ }
65
101
  }
66
102
 
67
103
  &:focus-visible {
@@ -73,7 +109,11 @@
73
109
  }
74
110
 
75
111
  &:disabled {
76
- @apply border-(--ga-color-border-disabled) bg-transparent text-(--ga-color-text-disabled);
112
+ @apply border-(--ga-color-border-disabled) bg-transparent text-(--ga-color-text-disable-selected);
113
+
114
+ .ga-icon {
115
+ @apply text-(--ga-color-icon-on-disabled);
116
+ }
77
117
  }
78
118
  }
79
119
 
package/src/styles/components/modal.css CHANGED
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  .ga-modal__top-section {
49
- @apply flex min-h-16 shrink-0 items-start gap-4 px-2 pb-2;
49
+ @apply flex min-h-8 shrink-0 items-start gap-4 px-2 pb-2;
50
50
 
51
51
  &.ga-modal__top-section--scrollable {
52
52
  @apply shrink;
@@ -82,7 +82,7 @@
82
82
  }
83
83
 
84
84
  .ga-modal__actions {
85
- @apply mt-6 flex flex-wrap items-center justify-end gap-2 pr-2;
85
+ @apply mt-6 flex flex-wrap items-center justify-end gap-2 px-2;
86
86
  }
87
87
 
88
88
  .ga-modal__close-icon {
package/src/styles/components/select.css CHANGED
@@ -79,7 +79,7 @@
79
79
  @apply h-auto min-h-10;
80
80
 
81
81
  .ga-select__main-area {
82
- @apply flex max-h-24 min-h-0 flex-1 flex-wrap gap-2 overflow-y-auto;
82
+ @apply flex max-h-23.5 min-h-0 flex-1 flex-wrap gap-2 overflow-y-auto;
83
83
  scrollbar-width: thin;
84
84
  }
85
85