@vsn-ux/gaia-styles 0.2.5 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/all-no-reset-10pt.css +152 -21
  2. package/dist/all-no-reset.css +152 -21
  3. package/dist/all.css +152 -21
  4. package/dist/base.css +1 -1
  5. package/dist/components/avatar.css +1 -1
  6. package/dist/components/badge.css +1 -1
  7. package/dist/components/button.css +1 -1
  8. package/dist/components/card.css +1 -1
  9. package/dist/components/checkbox.css +1 -1
  10. package/dist/components/dropdown.css +14 -4
  11. package/dist/components/form-field.css +59 -4
  12. package/dist/components/input.css +1 -1
  13. package/dist/components/menu.css +91 -16
  14. package/dist/components/notification.css +1 -1
  15. package/dist/components/radio.css +1 -1
  16. package/dist/components/segmented-control.css +1 -1
  17. package/dist/components/select.css +1 -1
  18. package/dist/components/tag.css +1 -1
  19. package/dist/components/text-area.css +1 -1
  20. package/dist/components/tooltip.css +1 -1
  21. package/dist/components.css +149 -19
  22. package/dist/design-tokens.css +3 -2
  23. package/dist/design-tokens.d.ts +1 -0
  24. package/dist/design-tokens.js +20 -8
  25. package/package.json +1 -1
  26. package/src/design-tokens/dtcg-tokens.json +5 -2
  27. package/src/styles/components/dropdown.css +8 -4
  28. package/src/styles/components/form-field.css +31 -3
  29. package/src/styles/components/menu.css +67 -5
package/dist/all-no-reset-10pt.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -29,10 +29,11 @@
29
29
  --ga-color-grey-40: #b9b9b9;
30
30
  --ga-color-icon-action: var(--ga-color-primary);
31
31
  --ga-color-icon-action-hover: var(--ga-color-primary-60);
32
+ --ga-color-icon-disabled: var(--ga-color-neutral);
32
33
  --ga-color-icon-error: var(--ga-color-error);
33
34
  --ga-color-icon-information: var(--ga-color-information);
34
35
  --ga-color-icon-on-action: var(--ga-color-secondary);
35
- --ga-color-icon-on-disabled: var(--ga-color-utility-grey);
36
+ --ga-color-icon-on-disabled: var(--ga-color-neutral-60);
36
37
  --ga-color-icon-on-primary: var(--ga-color-white);
37
38
  --ga-color-icon-primary: var(--ga-color-primary-90);
38
39
  --ga-color-icon-success: var(--ga-color-success);
@@ -98,7 +99,7 @@
98
99
  --ga-color-text-action-hover: var(--ga-color-primary-90);
99
100
  --ga-color-text-body: var(--ga-color-primary-90);
100
101
  --ga-color-text-disable-selected: var(--ga-color-neutral-60);
101
- --ga-color-text-disabled: var(--ga-color-utility-grey);
102
+ --ga-color-text-disabled: var(--ga-color-neutral);
102
103
  --ga-color-text-error: var(--ga-color-primary-90);
103
104
  --ga-color-text-headings: var(--ga-color-primary-90);
104
105
  --ga-color-text-information: var(--ga-color-primary-90);
@@ -482,7 +483,7 @@
482
483
  .ga-dropdown {
483
484
  display: flex;
484
485
  max-height: calc(0.4rem * 81);
485
- min-width: calc(0.4rem * 36);
486
+ max-width: 80ch;
486
487
  flex-direction: column;
487
488
  align-items: stretch;
488
489
  overflow-y: auto;
@@ -491,12 +492,16 @@
491
492
  border-width: 1px;
492
493
  border-color: var(--ga-color-border-primary);
493
494
  background-color: var(--ga-color-surface-primary);
495
+ font-size: var(--ga-size-font-md);
496
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
497
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
494
498
  --tw-outline-style: none;
495
499
  outline-style: none;
496
500
  .ga-dropdown__item {
497
501
  position: relative;
498
502
  display: flex;
499
503
  height: calc(0.4rem * 9);
504
+ min-width: calc(0.4rem * 0);
500
505
  flex-shrink: 0;
501
506
  cursor: pointer;
502
507
  flex-direction: row;
@@ -569,29 +574,80 @@
569
574
  --tw-font-weight: 600;
570
575
  font-weight: 600;
571
576
  }
572
- .ga-dropdown__content-spinner {
577
+ .ga-dropdown__spinner {
573
578
  margin-inline: auto;
574
- margin-block: calc(0.4rem * 8);
579
+ margin-block: calc(0.4rem * 5);
575
580
  display: inline-flex;
576
581
  }
582
+ .ga-dropdown__item-label {
583
+ min-width: calc(0.4rem * 0);
584
+ overflow: hidden;
585
+ text-overflow: ellipsis;
586
+ white-space: nowrap;
587
+ }
577
588
  }
578
589
  .ga-form-field {
579
590
  display: flex;
580
591
  flex-direction: column;
581
592
  gap: calc(0.4rem * 2);
582
- > *, > .ga-select, > .ga-input {
593
+ > .ga-select, > .ga-input {
583
594
  width: 100%;
595
+ flex-shrink: 0;
584
596
  }
585
597
  .ga-form-field__label {
598
+ display: inline-flex;
599
+ height: calc(0.4rem * 5);
600
+ width: fit-content;
601
+ max-width: 100%;
602
+ min-width: calc(0.4rem * 0);
603
+ gap: calc(0.4rem * 1);
586
604
  padding-inline: calc(0.4rem * 1);
605
+ --tw-leading: calc(0.4rem * 5);
606
+ line-height: calc(0.4rem * 5);
607
+ &:focus-visible {
608
+ border-radius: var(--ga-radius);
609
+ outline-style: var(--tw-outline-style);
610
+ outline-width: 2px;
611
+ outline-offset: 2px;
612
+ outline-color: var(--ga-color-border-focus);
613
+ }
614
+ }
615
+ .ga-form-field__label-text {
616
+ min-width: calc(0.4rem * 0);
617
+ overflow: hidden;
618
+ text-overflow: ellipsis;
619
+ white-space: nowrap;
587
620
  font-size: var(--ga-size-font-md);
588
621
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
589
622
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
590
- --tw-leading: calc(0.4rem * 5);
591
- line-height: calc(0.4rem * 5);
592
623
  --tw-font-weight: 500;
593
624
  font-weight: 500;
594
625
  }
626
+ .ga-form-field__label-state {
627
+ font-size: var(--ga-size-font-sm);
628
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
629
+ letter-spacing: var(--tw-tracking, 0);
630
+ --tw-font-weight: 400;
631
+ font-weight: 400;
632
+ }
633
+ .ga-form-field__label--defined {
634
+ .ga-form-field__label-text {
635
+ border-bottom-style: var(--tw-border-style);
636
+ border-bottom-width: 2px;
637
+ --tw-border-style: dotted;
638
+ border-style: dotted;
639
+ color: var(--ga-color-text-action);
640
+ }
641
+ &:not(.ga-form-field__label--disabled) .ga-form-field__label-text:hover {
642
+ color: var(--ga-color-text-body);
643
+ }
644
+ }
645
+ .ga-form-field__label--disabled {
646
+ .ga-form-field__label-text, .ga-form-field__label-state {
647
+ border-color: var(--ga-color-border-disabled);
648
+ color: var(--ga-color-text-disabled);
649
+ }
650
+ }
595
651
  .ga-form-field__info {
596
652
  display: flex;
597
653
  align-items: center;
@@ -730,33 +786,32 @@
730
786
  }
731
787
  .ga-menu {
732
788
  display: flex;
733
- min-width: calc(0.4rem * 36);
789
+ max-height: calc(0.4rem * 81);
790
+ max-width: 80ch;
734
791
  flex-direction: column;
735
792
  align-items: stretch;
793
+ overflow-y: auto;
736
794
  border-radius: var(--ga-radius);
737
795
  border-style: var(--tw-border-style);
738
796
  border-width: 1px;
739
797
  border-color: var(--ga-color-border-primary);
740
798
  background-color: var(--ga-color-surface-primary);
799
+ font-size: var(--ga-size-font-md);
800
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
801
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
741
802
  .ga-menu__item {
742
803
  position: relative;
743
804
  display: flex;
744
- height: calc(0.4rem * 9);
805
+ min-height: calc(0.4rem * 9);
806
+ flex-shrink: 0;
745
807
  cursor: pointer;
746
808
  flex-direction: row;
747
- align-items: center;
748
809
  gap: calc(0.4rem * 2);
749
810
  padding-inline: calc(0.4rem * 3);
750
811
  padding-block: calc(0.4rem * 2);
751
812
  text-align: left;
752
- font-size: var(--ga-size-font-md);
753
- line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
754
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
755
813
  --tw-leading: 1;
756
814
  line-height: 1;
757
- --tw-font-weight: 500;
758
- font-weight: 500;
759
- color: var(--ga-color-text-action);
760
815
  &:first-child {
761
816
  border-top-left-radius: var(--ga-radius);
762
817
  border-top-right-radius: var(--ga-radius);
@@ -767,25 +822,47 @@
767
822
  }
768
823
  &:hover {
769
824
  background-color: var(--ga-color-surface-action-hover-2);
770
- color: var(--ga-color-text-action-hover);
825
+ .ga-menu__item-icon {
826
+ color: var(--ga-color-icon-action);
827
+ }
828
+ .ga-menu__item-label {
829
+ color: var(--ga-color-text-action-hover);
830
+ }
771
831
  }
772
832
  &:focus, &:focus-visible {
773
833
  --tw-outline-style: none;
774
834
  outline-style: none;
775
835
  }
776
836
  &.ga-menu__item--disabled {
837
+ cursor: not-allowed;
777
838
  background-color: var(--ga-color-surface-primary);
778
- color: var(--ga-color-text-disabled);
839
+ .ga-menu__item-icon {
840
+ color: var(--ga-color-icon-disabled);
841
+ }
842
+ .ga-menu__item-label {
843
+ color: var(--ga-color-text-disabled);
844
+ }
779
845
  }
780
846
  &.ga-menu__item--selected {
781
847
  background-color: var(--ga-color-surface-action);
782
848
  color: var(--ga-color-text-on-action);
849
+ .ga-menu__item-icon {
850
+ color: var(--ga-color-icon-on-action);
851
+ }
852
+ .ga-menu__item-label {
853
+ color: var(--ga-color-text-on-action);
854
+ }
783
855
  &:hover {
784
856
  background-color: var(--ga-color-surface-action-hover);
785
857
  }
786
858
  &.ga-menu__item--disabled {
787
859
  background-color: var(--ga-color-surface-primary);
788
- color: var(--ga-color-text-disable-selected);
860
+ .ga-menu__item-icon {
861
+ color: var(--ga-color-icon-on-disabled);
862
+ }
863
+ .ga-menu__item-label {
864
+ color: var(--ga-color-text-disable-selected);
865
+ }
789
866
  }
790
867
  }
791
868
  }
@@ -803,6 +880,60 @@
803
880
  --tw-content: '';
804
881
  content: var(--tw-content);
805
882
  }
883
+ &.ga-menu__item--selected {
884
+ &::after {
885
+ border-color: var(--ga-color-white);
886
+ }
887
+ }
888
+ }
889
+ .ga-menu__item-icon {
890
+ margin-top: calc(0.4rem * 0.5);
891
+ flex-shrink: 0;
892
+ color: var(--ga-color-icon-primary);
893
+ }
894
+ .ga-menu__item-content {
895
+ display: flex;
896
+ min-width: calc(0.4rem * 0);
897
+ flex-direction: column;
898
+ }
899
+ .ga-menu__item-title {
900
+ display: flex;
901
+ align-items: center;
902
+ gap: calc(0.4rem * 2);
903
+ }
904
+ .ga-menu__item-label {
905
+ height: calc(0.4rem * 5);
906
+ flex: 1;
907
+ overflow: hidden;
908
+ text-overflow: ellipsis;
909
+ white-space: nowrap;
910
+ font-size: var(--ga-size-font-md);
911
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
912
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
913
+ --tw-font-weight: 500;
914
+ font-weight: 500;
915
+ color: var(--ga-color-text-action);
916
+ }
917
+ .ga-menu__item-shortcut {
918
+ flex-shrink: 0;
919
+ border-radius: var(--ga-radius);
920
+ border-style: var(--tw-border-style);
921
+ border-width: 1px;
922
+ border-color: var(--ga-color-border-disabled);
923
+ background-color: #fff;
924
+ padding-inline: calc(0.4rem * 1);
925
+ font-size: var(--ga-size-font-xs);
926
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
927
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
928
+ --tw-font-weight: 500;
929
+ font-weight: 500;
930
+ color: var(--ga-color-text-body);
931
+ }
932
+ .ga-menu__item-description {
933
+ font-size: var(--ga-size-font-xs);
934
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
935
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
936
+ color: var(--ga-color-text-disable-selected);
806
937
  }
807
938
  .ga-menu__separator {
808
939
  margin-left: calc(0.4rem * 3);
package/dist/all-no-reset.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -29,10 +29,11 @@
29
29
  --ga-color-grey-40: #b9b9b9;
30
30
  --ga-color-icon-action: var(--ga-color-primary);
31
31
  --ga-color-icon-action-hover: var(--ga-color-primary-60);
32
+ --ga-color-icon-disabled: var(--ga-color-neutral);
32
33
  --ga-color-icon-error: var(--ga-color-error);
33
34
  --ga-color-icon-information: var(--ga-color-information);
34
35
  --ga-color-icon-on-action: var(--ga-color-secondary);
35
- --ga-color-icon-on-disabled: var(--ga-color-utility-grey);
36
+ --ga-color-icon-on-disabled: var(--ga-color-neutral-60);
36
37
  --ga-color-icon-on-primary: var(--ga-color-white);
37
38
  --ga-color-icon-primary: var(--ga-color-primary-90);
38
39
  --ga-color-icon-success: var(--ga-color-success);
@@ -98,7 +99,7 @@
98
99
  --ga-color-text-action-hover: var(--ga-color-primary-90);
99
100
  --ga-color-text-body: var(--ga-color-primary-90);
100
101
  --ga-color-text-disable-selected: var(--ga-color-neutral-60);
101
- --ga-color-text-disabled: var(--ga-color-utility-grey);
102
+ --ga-color-text-disabled: var(--ga-color-neutral);
102
103
  --ga-color-text-error: var(--ga-color-primary-90);
103
104
  --ga-color-text-headings: var(--ga-color-primary-90);
104
105
  --ga-color-text-information: var(--ga-color-primary-90);
@@ -482,7 +483,7 @@
482
483
  .ga-dropdown {
483
484
  display: flex;
484
485
  max-height: calc(0.25rem * 81);
485
- min-width: calc(0.25rem * 36);
486
+ max-width: 80ch;
486
487
  flex-direction: column;
487
488
  align-items: stretch;
488
489
  overflow-y: auto;
@@ -491,12 +492,16 @@
491
492
  border-width: 1px;
492
493
  border-color: var(--ga-color-border-primary);
493
494
  background-color: var(--ga-color-surface-primary);
495
+ font-size: var(--ga-size-font-md);
496
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
497
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
494
498
  --tw-outline-style: none;
495
499
  outline-style: none;
496
500
  .ga-dropdown__item {
497
501
  position: relative;
498
502
  display: flex;
499
503
  height: calc(0.25rem * 9);
504
+ min-width: calc(0.25rem * 0);
500
505
  flex-shrink: 0;
501
506
  cursor: pointer;
502
507
  flex-direction: row;
@@ -569,29 +574,80 @@
569
574
  --tw-font-weight: 600;
570
575
  font-weight: 600;
571
576
  }
572
- .ga-dropdown__content-spinner {
577
+ .ga-dropdown__spinner {
573
578
  margin-inline: auto;
574
- margin-block: calc(0.25rem * 8);
579
+ margin-block: calc(0.25rem * 5);
575
580
  display: inline-flex;
576
581
  }
582
+ .ga-dropdown__item-label {
583
+ min-width: calc(0.25rem * 0);
584
+ overflow: hidden;
585
+ text-overflow: ellipsis;
586
+ white-space: nowrap;
587
+ }
577
588
  }
578
589
  .ga-form-field {
579
590
  display: flex;
580
591
  flex-direction: column;
581
592
  gap: calc(0.25rem * 2);
582
- > *, > .ga-select, > .ga-input {
593
+ > .ga-select, > .ga-input {
583
594
  width: 100%;
595
+ flex-shrink: 0;
584
596
  }
585
597
  .ga-form-field__label {
598
+ display: inline-flex;
599
+ height: calc(0.25rem * 5);
600
+ width: fit-content;
601
+ max-width: 100%;
602
+ min-width: calc(0.25rem * 0);
603
+ gap: calc(0.25rem * 1);
586
604
  padding-inline: calc(0.25rem * 1);
605
+ --tw-leading: calc(0.25rem * 5);
606
+ line-height: calc(0.25rem * 5);
607
+ &:focus-visible {
608
+ border-radius: var(--ga-radius);
609
+ outline-style: var(--tw-outline-style);
610
+ outline-width: 2px;
611
+ outline-offset: 2px;
612
+ outline-color: var(--ga-color-border-focus);
613
+ }
614
+ }
615
+ .ga-form-field__label-text {
616
+ min-width: calc(0.25rem * 0);
617
+ overflow: hidden;
618
+ text-overflow: ellipsis;
619
+ white-space: nowrap;
587
620
  font-size: var(--ga-size-font-md);
588
621
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
589
622
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
590
- --tw-leading: calc(0.25rem * 5);
591
- line-height: calc(0.25rem * 5);
592
623
  --tw-font-weight: 500;
593
624
  font-weight: 500;
594
625
  }
626
+ .ga-form-field__label-state {
627
+ font-size: var(--ga-size-font-sm);
628
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
629
+ letter-spacing: var(--tw-tracking, 0);
630
+ --tw-font-weight: 400;
631
+ font-weight: 400;
632
+ }
633
+ .ga-form-field__label--defined {
634
+ .ga-form-field__label-text {
635
+ border-bottom-style: var(--tw-border-style);
636
+ border-bottom-width: 2px;
637
+ --tw-border-style: dotted;
638
+ border-style: dotted;
639
+ color: var(--ga-color-text-action);
640
+ }
641
+ &:not(.ga-form-field__label--disabled) .ga-form-field__label-text:hover {
642
+ color: var(--ga-color-text-body);
643
+ }
644
+ }
645
+ .ga-form-field__label--disabled {
646
+ .ga-form-field__label-text, .ga-form-field__label-state {
647
+ border-color: var(--ga-color-border-disabled);
648
+ color: var(--ga-color-text-disabled);
649
+ }
650
+ }
595
651
  .ga-form-field__info {
596
652
  display: flex;
597
653
  align-items: center;
@@ -730,33 +786,32 @@
730
786
  }
731
787
  .ga-menu {
732
788
  display: flex;
733
- min-width: calc(0.25rem * 36);
789
+ max-height: calc(0.25rem * 81);
790
+ max-width: 80ch;
734
791
  flex-direction: column;
735
792
  align-items: stretch;
793
+ overflow-y: auto;
736
794
  border-radius: var(--ga-radius);
737
795
  border-style: var(--tw-border-style);
738
796
  border-width: 1px;
739
797
  border-color: var(--ga-color-border-primary);
740
798
  background-color: var(--ga-color-surface-primary);
799
+ font-size: var(--ga-size-font-md);
800
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
801
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
741
802
  .ga-menu__item {
742
803
  position: relative;
743
804
  display: flex;
744
- height: calc(0.25rem * 9);
805
+ min-height: calc(0.25rem * 9);
806
+ flex-shrink: 0;
745
807
  cursor: pointer;
746
808
  flex-direction: row;
747
- align-items: center;
748
809
  gap: calc(0.25rem * 2);
749
810
  padding-inline: calc(0.25rem * 3);
750
811
  padding-block: calc(0.25rem * 2);
751
812
  text-align: left;
752
- font-size: var(--ga-size-font-md);
753
- line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
754
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
755
813
  --tw-leading: 1;
756
814
  line-height: 1;
757
- --tw-font-weight: 500;
758
- font-weight: 500;
759
- color: var(--ga-color-text-action);
760
815
  &:first-child {
761
816
  border-top-left-radius: var(--ga-radius);
762
817
  border-top-right-radius: var(--ga-radius);
@@ -767,25 +822,47 @@
767
822
  }
768
823
  &:hover {
769
824
  background-color: var(--ga-color-surface-action-hover-2);
770
- color: var(--ga-color-text-action-hover);
825
+ .ga-menu__item-icon {
826
+ color: var(--ga-color-icon-action);
827
+ }
828
+ .ga-menu__item-label {
829
+ color: var(--ga-color-text-action-hover);
830
+ }
771
831
  }
772
832
  &:focus, &:focus-visible {
773
833
  --tw-outline-style: none;
774
834
  outline-style: none;
775
835
  }
776
836
  &.ga-menu__item--disabled {
837
+ cursor: not-allowed;
777
838
  background-color: var(--ga-color-surface-primary);
778
- color: var(--ga-color-text-disabled);
839
+ .ga-menu__item-icon {
840
+ color: var(--ga-color-icon-disabled);
841
+ }
842
+ .ga-menu__item-label {
843
+ color: var(--ga-color-text-disabled);
844
+ }
779
845
  }
780
846
  &.ga-menu__item--selected {
781
847
  background-color: var(--ga-color-surface-action);
782
848
  color: var(--ga-color-text-on-action);
849
+ .ga-menu__item-icon {
850
+ color: var(--ga-color-icon-on-action);
851
+ }
852
+ .ga-menu__item-label {
853
+ color: var(--ga-color-text-on-action);
854
+ }
783
855
  &:hover {
784
856
  background-color: var(--ga-color-surface-action-hover);
785
857
  }
786
858
  &.ga-menu__item--disabled {
787
859
  background-color: var(--ga-color-surface-primary);
788
- color: var(--ga-color-text-disable-selected);
860
+ .ga-menu__item-icon {
861
+ color: var(--ga-color-icon-on-disabled);
862
+ }
863
+ .ga-menu__item-label {
864
+ color: var(--ga-color-text-disable-selected);
865
+ }
789
866
  }
790
867
  }
791
868
  }
@@ -803,6 +880,60 @@
803
880
  --tw-content: '';
804
881
  content: var(--tw-content);
805
882
  }
883
+ &.ga-menu__item--selected {
884
+ &::after {
885
+ border-color: var(--ga-color-white);
886
+ }
887
+ }
888
+ }
889
+ .ga-menu__item-icon {
890
+ margin-top: calc(0.25rem * 0.5);
891
+ flex-shrink: 0;
892
+ color: var(--ga-color-icon-primary);
893
+ }
894
+ .ga-menu__item-content {
895
+ display: flex;
896
+ min-width: calc(0.25rem * 0);
897
+ flex-direction: column;
898
+ }
899
+ .ga-menu__item-title {
900
+ display: flex;
901
+ align-items: center;
902
+ gap: calc(0.25rem * 2);
903
+ }
904
+ .ga-menu__item-label {
905
+ height: calc(0.25rem * 5);
906
+ flex: 1;
907
+ overflow: hidden;
908
+ text-overflow: ellipsis;
909
+ white-space: nowrap;
910
+ font-size: var(--ga-size-font-md);
911
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
912
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
913
+ --tw-font-weight: 500;
914
+ font-weight: 500;
915
+ color: var(--ga-color-text-action);
916
+ }
917
+ .ga-menu__item-shortcut {
918
+ flex-shrink: 0;
919
+ border-radius: var(--ga-radius);
920
+ border-style: var(--tw-border-style);
921
+ border-width: 1px;
922
+ border-color: var(--ga-color-border-disabled);
923
+ background-color: #fff;
924
+ padding-inline: calc(0.25rem * 1);
925
+ font-size: var(--ga-size-font-xs);
926
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
927
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
928
+ --tw-font-weight: 500;
929
+ font-weight: 500;
930
+ color: var(--ga-color-text-body);
931
+ }
932
+ .ga-menu__item-description {
933
+ font-size: var(--ga-size-font-xs);
934
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
935
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
936
+ color: var(--ga-color-text-disable-selected);
806
937
  }
807
938
  .ga-menu__separator {
808
939
  margin-left: calc(0.25rem * 3);