@vsn-ux/gaia-styles 0.5.1 → 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.
- package/README.md +3 -2
- package/dist/all-10pt.css +37 -5
- package/dist/all-no-reset-10pt.css +37 -5
- package/dist/all-no-reset.css +37 -5
- package/dist/all.css +37 -5
- package/dist/components/button.css +35 -3
- package/dist/components/modal.css +2 -2
- package/dist/components.css +37 -5
- package/package.json +1 -1
- package/src/styles/components/button.css +44 -4
- package/src/styles/components/modal.css +2 -2
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')
|
|
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,22 +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 {
|
|
537
|
-
border-style: var(--tw-border-style);
|
|
538
|
-
border-width: 1px;
|
|
539
558
|
border-color: var(--ga-color-border-action-hover);
|
|
540
559
|
color: var(--ga-color-text-action-hover);
|
|
560
|
+
.ga-icon {
|
|
561
|
+
color: var(--ga-color-icon-action-hover);
|
|
562
|
+
}
|
|
541
563
|
}
|
|
542
564
|
&:active {
|
|
543
565
|
color: var(--ga-color-text-action);
|
|
544
566
|
}
|
|
545
567
|
&:disabled {
|
|
568
|
+
border-color: transparent;
|
|
546
569
|
color: var(--ga-color-text-disabled);
|
|
570
|
+
.ga-icon {
|
|
571
|
+
color: var(--ga-color-icon-disabled);
|
|
572
|
+
}
|
|
547
573
|
}
|
|
548
574
|
}
|
|
549
575
|
&.ga-button--transparent {
|
|
@@ -554,6 +580,9 @@
|
|
|
554
580
|
color: var(--ga-color-text-action);
|
|
555
581
|
&:hover {
|
|
556
582
|
background-color: var(--ga-color-surface-action-hover-2);
|
|
583
|
+
.ga-icon {
|
|
584
|
+
color: var(--ga-color-icon-action-hover);
|
|
585
|
+
}
|
|
557
586
|
}
|
|
558
587
|
&:focus-visible {
|
|
559
588
|
border-color: var(--ga-color-border-action);
|
|
@@ -564,7 +593,10 @@
|
|
|
564
593
|
&:disabled {
|
|
565
594
|
border-color: var(--ga-color-border-disabled);
|
|
566
595
|
background-color: transparent;
|
|
567
|
-
color: var(--ga-color-text-
|
|
596
|
+
color: var(--ga-color-text-disable-selected);
|
|
597
|
+
.ga-icon {
|
|
598
|
+
color: var(--ga-color-icon-on-disabled);
|
|
599
|
+
}
|
|
568
600
|
}
|
|
569
601
|
}
|
|
570
602
|
&.ga-button--icon-only {
|
|
@@ -1322,7 +1354,7 @@
|
|
|
1322
1354
|
}
|
|
1323
1355
|
.ga-modal__top-section {
|
|
1324
1356
|
display: flex;
|
|
1325
|
-
min-height: calc(0.4rem *
|
|
1357
|
+
min-height: calc(0.4rem * 8);
|
|
1326
1358
|
flex-shrink: 0;
|
|
1327
1359
|
align-items: flex-start;
|
|
1328
1360
|
gap: calc(0.4rem * 4);
|
|
@@ -1384,7 +1416,7 @@
|
|
|
1384
1416
|
align-items: center;
|
|
1385
1417
|
justify-content: flex-end;
|
|
1386
1418
|
gap: calc(0.4rem * 2);
|
|
1387
|
-
padding-
|
|
1419
|
+
padding-inline: calc(0.4rem * 2);
|
|
1388
1420
|
}
|
|
1389
1421
|
.ga-modal__close-icon {
|
|
1390
1422
|
margin-top: calc(0.4rem * -2);
|
|
@@ -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,22 +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 {
|
|
390
|
-
border-style: var(--tw-border-style);
|
|
391
|
-
border-width: 1px;
|
|
392
411
|
border-color: var(--ga-color-border-action-hover);
|
|
393
412
|
color: var(--ga-color-text-action-hover);
|
|
413
|
+
.ga-icon {
|
|
414
|
+
color: var(--ga-color-icon-action-hover);
|
|
415
|
+
}
|
|
394
416
|
}
|
|
395
417
|
&:active {
|
|
396
418
|
color: var(--ga-color-text-action);
|
|
397
419
|
}
|
|
398
420
|
&:disabled {
|
|
421
|
+
border-color: transparent;
|
|
399
422
|
color: var(--ga-color-text-disabled);
|
|
423
|
+
.ga-icon {
|
|
424
|
+
color: var(--ga-color-icon-disabled);
|
|
425
|
+
}
|
|
400
426
|
}
|
|
401
427
|
}
|
|
402
428
|
&.ga-button--transparent {
|
|
@@ -407,6 +433,9 @@
|
|
|
407
433
|
color: var(--ga-color-text-action);
|
|
408
434
|
&:hover {
|
|
409
435
|
background-color: var(--ga-color-surface-action-hover-2);
|
|
436
|
+
.ga-icon {
|
|
437
|
+
color: var(--ga-color-icon-action-hover);
|
|
438
|
+
}
|
|
410
439
|
}
|
|
411
440
|
&:focus-visible {
|
|
412
441
|
border-color: var(--ga-color-border-action);
|
|
@@ -417,7 +446,10 @@
|
|
|
417
446
|
&:disabled {
|
|
418
447
|
border-color: var(--ga-color-border-disabled);
|
|
419
448
|
background-color: transparent;
|
|
420
|
-
color: var(--ga-color-text-
|
|
449
|
+
color: var(--ga-color-text-disable-selected);
|
|
450
|
+
.ga-icon {
|
|
451
|
+
color: var(--ga-color-icon-on-disabled);
|
|
452
|
+
}
|
|
421
453
|
}
|
|
422
454
|
}
|
|
423
455
|
&.ga-button--icon-only {
|
|
@@ -1175,7 +1207,7 @@
|
|
|
1175
1207
|
}
|
|
1176
1208
|
.ga-modal__top-section {
|
|
1177
1209
|
display: flex;
|
|
1178
|
-
min-height: calc(0.4rem *
|
|
1210
|
+
min-height: calc(0.4rem * 8);
|
|
1179
1211
|
flex-shrink: 0;
|
|
1180
1212
|
align-items: flex-start;
|
|
1181
1213
|
gap: calc(0.4rem * 4);
|
|
@@ -1237,7 +1269,7 @@
|
|
|
1237
1269
|
align-items: center;
|
|
1238
1270
|
justify-content: flex-end;
|
|
1239
1271
|
gap: calc(0.4rem * 2);
|
|
1240
|
-
padding-
|
|
1272
|
+
padding-inline: calc(0.4rem * 2);
|
|
1241
1273
|
}
|
|
1242
1274
|
.ga-modal__close-icon {
|
|
1243
1275
|
margin-top: calc(0.4rem * -2);
|
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,22 +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 {
|
|
390
|
-
border-style: var(--tw-border-style);
|
|
391
|
-
border-width: 1px;
|
|
392
411
|
border-color: var(--ga-color-border-action-hover);
|
|
393
412
|
color: var(--ga-color-text-action-hover);
|
|
413
|
+
.ga-icon {
|
|
414
|
+
color: var(--ga-color-icon-action-hover);
|
|
415
|
+
}
|
|
394
416
|
}
|
|
395
417
|
&:active {
|
|
396
418
|
color: var(--ga-color-text-action);
|
|
397
419
|
}
|
|
398
420
|
&:disabled {
|
|
421
|
+
border-color: transparent;
|
|
399
422
|
color: var(--ga-color-text-disabled);
|
|
423
|
+
.ga-icon {
|
|
424
|
+
color: var(--ga-color-icon-disabled);
|
|
425
|
+
}
|
|
400
426
|
}
|
|
401
427
|
}
|
|
402
428
|
&.ga-button--transparent {
|
|
@@ -407,6 +433,9 @@
|
|
|
407
433
|
color: var(--ga-color-text-action);
|
|
408
434
|
&:hover {
|
|
409
435
|
background-color: var(--ga-color-surface-action-hover-2);
|
|
436
|
+
.ga-icon {
|
|
437
|
+
color: var(--ga-color-icon-action-hover);
|
|
438
|
+
}
|
|
410
439
|
}
|
|
411
440
|
&:focus-visible {
|
|
412
441
|
border-color: var(--ga-color-border-action);
|
|
@@ -417,7 +446,10 @@
|
|
|
417
446
|
&:disabled {
|
|
418
447
|
border-color: var(--ga-color-border-disabled);
|
|
419
448
|
background-color: transparent;
|
|
420
|
-
color: var(--ga-color-text-
|
|
449
|
+
color: var(--ga-color-text-disable-selected);
|
|
450
|
+
.ga-icon {
|
|
451
|
+
color: var(--ga-color-icon-on-disabled);
|
|
452
|
+
}
|
|
421
453
|
}
|
|
422
454
|
}
|
|
423
455
|
&.ga-button--icon-only {
|
|
@@ -1175,7 +1207,7 @@
|
|
|
1175
1207
|
}
|
|
1176
1208
|
.ga-modal__top-section {
|
|
1177
1209
|
display: flex;
|
|
1178
|
-
min-height: calc(0.25rem *
|
|
1210
|
+
min-height: calc(0.25rem * 8);
|
|
1179
1211
|
flex-shrink: 0;
|
|
1180
1212
|
align-items: flex-start;
|
|
1181
1213
|
gap: calc(0.25rem * 4);
|
|
@@ -1237,7 +1269,7 @@
|
|
|
1237
1269
|
align-items: center;
|
|
1238
1270
|
justify-content: flex-end;
|
|
1239
1271
|
gap: calc(0.25rem * 2);
|
|
1240
|
-
padding-
|
|
1272
|
+
padding-inline: calc(0.25rem * 2);
|
|
1241
1273
|
}
|
|
1242
1274
|
.ga-modal__close-icon {
|
|
1243
1275
|
margin-top: calc(0.25rem * -2);
|
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,22 +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 {
|
|
537
|
-
border-style: var(--tw-border-style);
|
|
538
|
-
border-width: 1px;
|
|
539
558
|
border-color: var(--ga-color-border-action-hover);
|
|
540
559
|
color: var(--ga-color-text-action-hover);
|
|
560
|
+
.ga-icon {
|
|
561
|
+
color: var(--ga-color-icon-action-hover);
|
|
562
|
+
}
|
|
541
563
|
}
|
|
542
564
|
&:active {
|
|
543
565
|
color: var(--ga-color-text-action);
|
|
544
566
|
}
|
|
545
567
|
&:disabled {
|
|
568
|
+
border-color: transparent;
|
|
546
569
|
color: var(--ga-color-text-disabled);
|
|
570
|
+
.ga-icon {
|
|
571
|
+
color: var(--ga-color-icon-disabled);
|
|
572
|
+
}
|
|
547
573
|
}
|
|
548
574
|
}
|
|
549
575
|
&.ga-button--transparent {
|
|
@@ -554,6 +580,9 @@
|
|
|
554
580
|
color: var(--ga-color-text-action);
|
|
555
581
|
&:hover {
|
|
556
582
|
background-color: var(--ga-color-surface-action-hover-2);
|
|
583
|
+
.ga-icon {
|
|
584
|
+
color: var(--ga-color-icon-action-hover);
|
|
585
|
+
}
|
|
557
586
|
}
|
|
558
587
|
&:focus-visible {
|
|
559
588
|
border-color: var(--ga-color-border-action);
|
|
@@ -564,7 +593,10 @@
|
|
|
564
593
|
&:disabled {
|
|
565
594
|
border-color: var(--ga-color-border-disabled);
|
|
566
595
|
background-color: transparent;
|
|
567
|
-
color: var(--ga-color-text-
|
|
596
|
+
color: var(--ga-color-text-disable-selected);
|
|
597
|
+
.ga-icon {
|
|
598
|
+
color: var(--ga-color-icon-on-disabled);
|
|
599
|
+
}
|
|
568
600
|
}
|
|
569
601
|
}
|
|
570
602
|
&.ga-button--icon-only {
|
|
@@ -1322,7 +1354,7 @@
|
|
|
1322
1354
|
}
|
|
1323
1355
|
.ga-modal__top-section {
|
|
1324
1356
|
display: flex;
|
|
1325
|
-
min-height: calc(0.25rem *
|
|
1357
|
+
min-height: calc(0.25rem * 8);
|
|
1326
1358
|
flex-shrink: 0;
|
|
1327
1359
|
align-items: flex-start;
|
|
1328
1360
|
gap: calc(0.25rem * 4);
|
|
@@ -1384,7 +1416,7 @@
|
|
|
1384
1416
|
align-items: center;
|
|
1385
1417
|
justify-content: flex-end;
|
|
1386
1418
|
gap: calc(0.25rem * 2);
|
|
1387
|
-
padding-
|
|
1419
|
+
padding-inline: calc(0.25rem * 2);
|
|
1388
1420
|
}
|
|
1389
1421
|
.ga-modal__close-icon {
|
|
1390
1422
|
margin-top: calc(0.25rem * -2);
|
|
@@ -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,22 +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 {
|
|
71
|
-
border-style: var(--tw-border-style);
|
|
72
|
-
border-width: 1px;
|
|
73
92
|
border-color: var(--ga-color-border-action-hover);
|
|
74
93
|
color: var(--ga-color-text-action-hover);
|
|
94
|
+
.ga-icon {
|
|
95
|
+
color: var(--ga-color-icon-action-hover);
|
|
96
|
+
}
|
|
75
97
|
}
|
|
76
98
|
&:active {
|
|
77
99
|
color: var(--ga-color-text-action);
|
|
78
100
|
}
|
|
79
101
|
&:disabled {
|
|
102
|
+
border-color: transparent;
|
|
80
103
|
color: var(--ga-color-text-disabled);
|
|
104
|
+
.ga-icon {
|
|
105
|
+
color: var(--ga-color-icon-disabled);
|
|
106
|
+
}
|
|
81
107
|
}
|
|
82
108
|
}
|
|
83
109
|
&.ga-button--transparent {
|
|
@@ -88,6 +114,9 @@
|
|
|
88
114
|
color: var(--ga-color-text-action);
|
|
89
115
|
&:hover {
|
|
90
116
|
background-color: var(--ga-color-surface-action-hover-2);
|
|
117
|
+
.ga-icon {
|
|
118
|
+
color: var(--ga-color-icon-action-hover);
|
|
119
|
+
}
|
|
91
120
|
}
|
|
92
121
|
&:focus-visible {
|
|
93
122
|
border-color: var(--ga-color-border-action);
|
|
@@ -98,7 +127,10 @@
|
|
|
98
127
|
&:disabled {
|
|
99
128
|
border-color: var(--ga-color-border-disabled);
|
|
100
129
|
background-color: transparent;
|
|
101
|
-
color: var(--ga-color-text-
|
|
130
|
+
color: var(--ga-color-text-disable-selected);
|
|
131
|
+
.ga-icon {
|
|
132
|
+
color: var(--ga-color-icon-on-disabled);
|
|
133
|
+
}
|
|
102
134
|
}
|
|
103
135
|
}
|
|
104
136
|
&.ga-button--icon-only {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
.ga-modal__top-section {
|
|
65
65
|
display: flex;
|
|
66
|
-
min-height: calc(0.25rem *
|
|
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-
|
|
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.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,22 +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 {
|
|
171
|
-
border-style: var(--tw-border-style);
|
|
172
|
-
border-width: 1px;
|
|
173
192
|
border-color: var(--ga-color-border-action-hover);
|
|
174
193
|
color: var(--ga-color-text-action-hover);
|
|
194
|
+
.ga-icon {
|
|
195
|
+
color: var(--ga-color-icon-action-hover);
|
|
196
|
+
}
|
|
175
197
|
}
|
|
176
198
|
&:active {
|
|
177
199
|
color: var(--ga-color-text-action);
|
|
178
200
|
}
|
|
179
201
|
&:disabled {
|
|
202
|
+
border-color: transparent;
|
|
180
203
|
color: var(--ga-color-text-disabled);
|
|
204
|
+
.ga-icon {
|
|
205
|
+
color: var(--ga-color-icon-disabled);
|
|
206
|
+
}
|
|
181
207
|
}
|
|
182
208
|
}
|
|
183
209
|
&.ga-button--transparent {
|
|
@@ -188,6 +214,9 @@
|
|
|
188
214
|
color: var(--ga-color-text-action);
|
|
189
215
|
&:hover {
|
|
190
216
|
background-color: var(--ga-color-surface-action-hover-2);
|
|
217
|
+
.ga-icon {
|
|
218
|
+
color: var(--ga-color-icon-action-hover);
|
|
219
|
+
}
|
|
191
220
|
}
|
|
192
221
|
&:focus-visible {
|
|
193
222
|
border-color: var(--ga-color-border-action);
|
|
@@ -198,7 +227,10 @@
|
|
|
198
227
|
&:disabled {
|
|
199
228
|
border-color: var(--ga-color-border-disabled);
|
|
200
229
|
background-color: transparent;
|
|
201
|
-
color: var(--ga-color-text-
|
|
230
|
+
color: var(--ga-color-text-disable-selected);
|
|
231
|
+
.ga-icon {
|
|
232
|
+
color: var(--ga-color-icon-on-disabled);
|
|
233
|
+
}
|
|
202
234
|
}
|
|
203
235
|
}
|
|
204
236
|
&.ga-button--icon-only {
|
|
@@ -956,7 +988,7 @@
|
|
|
956
988
|
}
|
|
957
989
|
.ga-modal__top-section {
|
|
958
990
|
display: flex;
|
|
959
|
-
min-height: calc(0.25rem *
|
|
991
|
+
min-height: calc(0.25rem * 8);
|
|
960
992
|
flex-shrink: 0;
|
|
961
993
|
align-items: flex-start;
|
|
962
994
|
gap: calc(0.25rem * 4);
|
|
@@ -1018,7 +1050,7 @@
|
|
|
1018
1050
|
align-items: center;
|
|
1019
1051
|
justify-content: flex-end;
|
|
1020
1052
|
gap: calc(0.25rem * 2);
|
|
1021
|
-
padding-
|
|
1053
|
+
padding-inline: calc(0.25rem * 2);
|
|
1022
1054
|
}
|
|
1023
1055
|
.ga-modal__close-icon {
|
|
1024
1056
|
margin-top: calc(0.25rem * -2);
|
package/package.json
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 border
|
|
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-
|
|
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
|
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.ga-modal__top-section {
|
|
49
|
-
@apply flex min-h-
|
|
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
|
|
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 {
|