@vsn-ux/gaia-styles 0.2.3 → 0.2.5

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 (16) hide show
  1. package/dist/all-no-reset-10pt.css +229 -22
  2. package/dist/all-no-reset.css +229 -22
  3. package/dist/all.css +229 -22
  4. package/dist/components/dropdown.css +7 -5
  5. package/dist/components/input.css +15 -13
  6. package/dist/components/menu.css +37 -2
  7. package/dist/components/select.css +1 -2
  8. package/dist/components/tag.css +185 -0
  9. package/dist/components.css +229 -22
  10. package/package.json +1 -1
  11. package/src/styles/components/dropdown.css +4 -4
  12. package/src/styles/components/input.css +13 -7
  13. package/src/styles/components/menu.css +27 -3
  14. package/src/styles/components/select.css +1 -1
  15. package/src/styles/components/tag.css +166 -0
  16. package/src/styles/components.css +1 -0
package/dist/all-no-reset-10pt.css CHANGED
@@ -481,7 +481,7 @@
481
481
  }
482
482
  .ga-dropdown {
483
483
  display: flex;
484
- max-height: calc(0.4rem * 41);
484
+ max-height: calc(0.4rem * 81);
485
485
  min-width: calc(0.4rem * 36);
486
486
  flex-direction: column;
487
487
  align-items: stretch;
@@ -497,6 +497,7 @@
497
497
  position: relative;
498
498
  display: flex;
499
499
  height: calc(0.4rem * 9);
500
+ flex-shrink: 0;
500
501
  cursor: pointer;
501
502
  flex-direction: row;
502
503
  align-items: center;
@@ -545,10 +546,10 @@
545
546
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
546
547
  &::after {
547
548
  position: absolute;
548
- top: 2px;
549
- left: 2px;
550
- height: calc(100% - 4px);
551
- width: calc(100% - 4px);
549
+ top: calc(0.4rem * 0);
550
+ left: calc(0.4rem * 0);
551
+ height: 100%;
552
+ width: 100%;
552
553
  border-radius: var(--ga-radius);
553
554
  border-style: var(--tw-border-style);
554
555
  border-width: 2px;
@@ -558,6 +559,7 @@
558
559
  }
559
560
  }
560
561
  .ga-dropdown__caption {
562
+ flex-shrink: 0;
561
563
  padding-inline: calc(0.4rem * 3);
562
564
  padding-top: calc(0.4rem * 3);
563
565
  padding-bottom: calc(0.4rem * 2);
@@ -616,7 +618,7 @@
616
618
  font-size: var(--ga-size-font-md);
617
619
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
618
620
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
619
- &:has(input:hover), &:is(input:hover) {
621
+ &:hover {
620
622
  border-color: var(--ga-color-border-action-hover);
621
623
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
622
624
  background-color: var(--ga-color-surface-action-hover-2);
@@ -628,10 +630,12 @@
628
630
  color: var(--ga-color-text-disable-selected);
629
631
  }
630
632
  &:has(input:focus), &:is(input:focus) {
631
- border-color: var(--ga-color-border-focus);
632
- outline-style: var(--tw-outline-style);
633
- outline-width: 1px;
634
- outline-color: var(--ga-color-border-focus);
633
+ &:not(.ga-input--invalid) {
634
+ border-color: var(--ga-color-border-focus);
635
+ outline-style: var(--tw-outline-style);
636
+ outline-width: 1px;
637
+ outline-color: var(--ga-color-border-focus);
638
+ }
635
639
  }
636
640
  &.ga-input--invalid {
637
641
  border-color: var(--ga-color-border-error);
@@ -642,20 +646,20 @@
642
646
  background-color: var(--ga-color-surface-error);
643
647
  }
644
648
  }
645
- input {
646
- height: calc(0.4rem * 6);
647
- width: 100%;
649
+ input, &:is(input) {
648
650
  min-width: calc(0.4rem * 0);
649
651
  --tw-leading: calc(0.4rem * 6);
650
652
  line-height: calc(0.4rem * 6);
653
+ &::placeholder {
654
+ color: var(--ga-color-text-disabled);
655
+ }
656
+ }
657
+ input {
658
+ height: calc(0.4rem * 6);
659
+ width: 100%;
651
660
  --tw-outline-style: none;
652
661
  outline-style: none;
653
662
  }
654
- &:is(input) {
655
- min-width: calc(0.4rem * 0);
656
- --tw-leading: calc(0.4rem * 6);
657
- line-height: calc(0.4rem * 6);
658
- }
659
663
  }
660
664
  .ga-notification {
661
665
  display: inline-flex;
@@ -735,6 +739,7 @@
735
739
  border-color: var(--ga-color-border-primary);
736
740
  background-color: var(--ga-color-surface-primary);
737
741
  .ga-menu__item {
742
+ position: relative;
738
743
  display: flex;
739
744
  height: calc(0.4rem * 9);
740
745
  cursor: pointer;
@@ -764,9 +769,39 @@
764
769
  background-color: var(--ga-color-surface-action-hover-2);
765
770
  color: var(--ga-color-text-action-hover);
766
771
  }
767
- &:active {
772
+ &:focus, &:focus-visible {
773
+ --tw-outline-style: none;
774
+ outline-style: none;
775
+ }
776
+ &.ga-menu__item--disabled {
777
+ background-color: var(--ga-color-surface-primary);
778
+ color: var(--ga-color-text-disabled);
779
+ }
780
+ &.ga-menu__item--selected {
768
781
  background-color: var(--ga-color-surface-action);
769
782
  color: var(--ga-color-text-on-action);
783
+ &:hover {
784
+ background-color: var(--ga-color-surface-action-hover);
785
+ }
786
+ &.ga-menu__item--disabled {
787
+ background-color: var(--ga-color-surface-primary);
788
+ color: var(--ga-color-text-disable-selected);
789
+ }
790
+ }
791
+ }
792
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active, .ga-menu__item:focus-visible {
793
+ &::after {
794
+ position: absolute;
795
+ top: 1px;
796
+ left: 1px;
797
+ height: calc(100% - 2px);
798
+ width: calc(100% - 2px);
799
+ border-radius: var(--ga-radius);
800
+ border-style: var(--tw-border-style);
801
+ border-width: 2px;
802
+ border-color: var(--ga-color-border-focus);
803
+ --tw-content: '';
804
+ content: var(--tw-content);
770
805
  }
771
806
  }
772
807
  .ga-menu__separator {
@@ -784,7 +819,6 @@
784
819
  letter-spacing: var(--tw-tracking, 0);
785
820
  --tw-font-weight: 600;
786
821
  font-weight: 600;
787
- color: var(--ga-color-text-disable-selected);
788
822
  }
789
823
  }
790
824
  .ga-radio-group {
@@ -991,9 +1025,8 @@
991
1025
  border-width: 1px;
992
1026
  border-color: var(--ga-color-border-primary);
993
1027
  background-color: var(--ga-color-surface-primary);
1028
+ padding-inline: calc(0.4rem * 3);
994
1029
  padding-block: calc(0.4rem * 2);
995
- padding-right: calc(0.4rem * 2);
996
- padding-left: calc(0.4rem * 3);
997
1030
  text-align: left;
998
1031
  font-size: var(--ga-size-font-md);
999
1032
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -1061,6 +1094,180 @@
1061
1094
  }
1062
1095
  }
1063
1096
  }
1097
+ .ga-tag {
1098
+ box-sizing: content-box;
1099
+ display: inline-flex;
1100
+ height: calc(0.4rem * 6);
1101
+ flex-direction: row;
1102
+ align-items: center;
1103
+ gap: calc(0.4rem * 1);
1104
+ border-radius: calc(infinity * 1px);
1105
+ border-style: var(--tw-border-style);
1106
+ border-width: 1px;
1107
+ border-color: var(--ga-color-border-action);
1108
+ padding-right: calc(0.4rem * 1);
1109
+ padding-left: calc(0.4rem * 2);
1110
+ font-size: var(--ga-size-font-sm);
1111
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
1112
+ letter-spacing: var(--tw-tracking, 0);
1113
+ &:focus-visible {
1114
+ outline-style: var(--tw-outline-style);
1115
+ outline-width: 2px;
1116
+ outline-offset: 2px;
1117
+ outline-color: var(--ga-color-border-focus);
1118
+ }
1119
+ &.ga-tag--information {
1120
+ border-color: var(--ga-color-border-information);
1121
+ background-color: var(--ga-color-surface-information);
1122
+ color: var(--ga-color-text-information);
1123
+ .ga-tag__icon {
1124
+ color: var(--ga-color-icon-information);
1125
+ }
1126
+ }
1127
+ &.ga-tag--success {
1128
+ border-color: var(--ga-color-border-success);
1129
+ background-color: var(--ga-color-surface-success);
1130
+ .ga-tag__icon {
1131
+ color: var(--ga-color-icon-success);
1132
+ }
1133
+ }
1134
+ &.ga-tag--error {
1135
+ border-color: var(--ga-color-border-error);
1136
+ background-color: var(--ga-color-surface-error);
1137
+ .ga-tag__icon {
1138
+ color: var(--ga-color-icon-error);
1139
+ }
1140
+ }
1141
+ &.ga-tag--warning {
1142
+ border-color: var(--ga-color-border-warning);
1143
+ background-color: var(--ga-color-surface-warning);
1144
+ .ga-tag__icon {
1145
+ color: var(--ga-color-icon-warning);
1146
+ }
1147
+ }
1148
+ &.ga-tag--disabled {
1149
+ border-color: var(--ga-color-border-disabled);
1150
+ background-color: var(--ga-color-surface-disabled);
1151
+ color: var(--ga-color-text-disable-selected);
1152
+ .ga-tag__icon {
1153
+ color: var(--ga-color-icon-on-disabled);
1154
+ }
1155
+ }
1156
+ &.ga-tag--interactive {
1157
+ cursor: pointer;
1158
+ --tw-border-style: dashed;
1159
+ border-style: dashed;
1160
+ &:hover {
1161
+ background-color: var(--ga-color-surface-action-hover-2);
1162
+ .ga-tag__icon {
1163
+ color: var(--ga-color-icon-action-hover);
1164
+ }
1165
+ }
1166
+ }
1167
+ &.ga-tag--interactive-disabled {
1168
+ cursor: not-allowed;
1169
+ --tw-border-style: dashed;
1170
+ border-style: dashed;
1171
+ border-color: var(--ga-color-border-disabled);
1172
+ color: var(--ga-color-text-disabled);
1173
+ .ga-tag__icon {
1174
+ color: var(--ga-color-icon-disabled);
1175
+ }
1176
+ }
1177
+ &.ga-tag--interactive-selected {
1178
+ --tw-border-style: solid;
1179
+ border-style: solid;
1180
+ color: var(--ga-color-text-action);
1181
+ &:hover {
1182
+ border-color: var(--ga-color-border-action-hover);
1183
+ .ga-tag__icon {
1184
+ color: var(--ga-color-icon-action-hover);
1185
+ }
1186
+ }
1187
+ }
1188
+ &.ga-tag--interactive-selected-disabled {
1189
+ cursor: not-allowed;
1190
+ --tw-border-style: solid;
1191
+ border-style: solid;
1192
+ border-color: var(--ga-color-surface-disable-selected);
1193
+ background-color: var(--ga-color-surface-disable-selected);
1194
+ color: var(--ga-color-text-on-action);
1195
+ .ga-tag__icon {
1196
+ color: var(--ga-color-icon-on-primary);
1197
+ }
1198
+ }
1199
+ &.ga-tag--utility-grey, &.ga-tag--utility-indigo, &.ga-tag--utility-teal, &.ga-tag--utility-lime, &.ga-tag--utility-purple, &.ga-tag--utility-pink, &.ga-tag--utility-rose, &.ga-tag--utility-yellow, &.ga-tag--utility-blue, &.ga-tag--utility-green, &.ga-tag--utility-orange, &.ga-tag--utility-disabled {
1200
+ border-radius: var(--ga-radius);
1201
+ padding-left: calc(0.4rem * 1.5);
1202
+ .ga-tag__icon {
1203
+ color: var(--ga-color-text-body);
1204
+ }
1205
+ }
1206
+ &.ga-tag--utility-grey {
1207
+ border-color: var(--ga-color-utility-grey);
1208
+ background-color: var(--ga-color-utility-grey-light);
1209
+ }
1210
+ &.ga-tag--utility-indigo {
1211
+ border-color: var(--ga-color-utility-indigo);
1212
+ background-color: var(--ga-color-utility-indigo-light);
1213
+ }
1214
+ &.ga-tag--utility-teal {
1215
+ border-color: var(--ga-color-utility-teal);
1216
+ background-color: var(--ga-color-utility-teal-light);
1217
+ }
1218
+ &.ga-tag--utility-lime {
1219
+ border-color: var(--ga-color-utility-lime);
1220
+ background-color: var(--ga-color-utility-lime-light);
1221
+ }
1222
+ &.ga-tag--utility-purple {
1223
+ border-color: var(--ga-color-utility-purple);
1224
+ background-color: var(--ga-color-utility-purple-light);
1225
+ }
1226
+ &.ga-tag--utility-pink {
1227
+ border-color: var(--ga-color-utility-pink);
1228
+ background-color: var(--ga-color-utility-pink-light);
1229
+ }
1230
+ &.ga-tag--utility-rose {
1231
+ border-color: var(--ga-color-utility-rose);
1232
+ background-color: var(--ga-color-utility-rose-light);
1233
+ }
1234
+ &.ga-tag--utility-yellow {
1235
+ border-color: var(--ga-color-utility-yellow);
1236
+ background-color: var(--ga-color-utility-yellow-light);
1237
+ }
1238
+ &.ga-tag--utility-blue {
1239
+ border-color: var(--ga-color-utility-blue);
1240
+ background-color: var(--ga-color-utility-blue-light);
1241
+ }
1242
+ &.ga-tag--utility-green {
1243
+ border-color: var(--ga-color-utility-green);
1244
+ background-color: var(--ga-color-utility-green-light);
1245
+ }
1246
+ &.ga-tag--utility-orange {
1247
+ border-color: var(--ga-color-utility-orange);
1248
+ background-color: var(--ga-color-utility-orange-light);
1249
+ }
1250
+ &.ga-tag--utility-disabled {
1251
+ border-color: var(--ga-color-border-disabled);
1252
+ background-color: var(--ga-color-surface-disabled);
1253
+ color: var(--ga-color-text-disable-selected);
1254
+ }
1255
+ .ga-tag__icon {
1256
+ flex-shrink: 0;
1257
+ color: var(--ga-color-icon-action);
1258
+ }
1259
+ .ga-tag__label {
1260
+ overflow: hidden;
1261
+ text-overflow: ellipsis;
1262
+ white-space: nowrap;
1263
+ padding-right: calc(0.4rem * 1);
1264
+ }
1265
+ .ga-tag__separator {
1266
+ height: calc(0.4rem * 5);
1267
+ width: 1px;
1268
+ background-color: var(--ga-color-border-primary);
1269
+ }
1270
+ }
1064
1271
  .ga-text-area {
1065
1272
  display: flex;
1066
1273
  width: calc(0.4rem * 50);
package/dist/all-no-reset.css CHANGED
@@ -481,7 +481,7 @@
481
481
  }
482
482
  .ga-dropdown {
483
483
  display: flex;
484
- max-height: calc(0.25rem * 41);
484
+ max-height: calc(0.25rem * 81);
485
485
  min-width: calc(0.25rem * 36);
486
486
  flex-direction: column;
487
487
  align-items: stretch;
@@ -497,6 +497,7 @@
497
497
  position: relative;
498
498
  display: flex;
499
499
  height: calc(0.25rem * 9);
500
+ flex-shrink: 0;
500
501
  cursor: pointer;
501
502
  flex-direction: row;
502
503
  align-items: center;
@@ -545,10 +546,10 @@
545
546
  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
546
547
  &::after {
547
548
  position: absolute;
548
- top: 2px;
549
- left: 2px;
550
- height: calc(100% - 4px);
551
- width: calc(100% - 4px);
549
+ top: calc(0.25rem * 0);
550
+ left: calc(0.25rem * 0);
551
+ height: 100%;
552
+ width: 100%;
552
553
  border-radius: var(--ga-radius);
553
554
  border-style: var(--tw-border-style);
554
555
  border-width: 2px;
@@ -558,6 +559,7 @@
558
559
  }
559
560
  }
560
561
  .ga-dropdown__caption {
562
+ flex-shrink: 0;
561
563
  padding-inline: calc(0.25rem * 3);
562
564
  padding-top: calc(0.25rem * 3);
563
565
  padding-bottom: calc(0.25rem * 2);
@@ -616,7 +618,7 @@
616
618
  font-size: var(--ga-size-font-md);
617
619
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
618
620
  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
619
- &:has(input:hover), &:is(input:hover) {
621
+ &:hover {
620
622
  border-color: var(--ga-color-border-action-hover);
621
623
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
622
624
  background-color: var(--ga-color-surface-action-hover-2);
@@ -628,10 +630,12 @@
628
630
  color: var(--ga-color-text-disable-selected);
629
631
  }
630
632
  &:has(input:focus), &:is(input:focus) {
631
- border-color: var(--ga-color-border-focus);
632
- outline-style: var(--tw-outline-style);
633
- outline-width: 1px;
634
- outline-color: var(--ga-color-border-focus);
633
+ &:not(.ga-input--invalid) {
634
+ border-color: var(--ga-color-border-focus);
635
+ outline-style: var(--tw-outline-style);
636
+ outline-width: 1px;
637
+ outline-color: var(--ga-color-border-focus);
638
+ }
635
639
  }
636
640
  &.ga-input--invalid {
637
641
  border-color: var(--ga-color-border-error);
@@ -642,20 +646,20 @@
642
646
  background-color: var(--ga-color-surface-error);
643
647
  }
644
648
  }
645
- input {
646
- height: calc(0.25rem * 6);
647
- width: 100%;
649
+ input, &:is(input) {
648
650
  min-width: calc(0.25rem * 0);
649
651
  --tw-leading: calc(0.25rem * 6);
650
652
  line-height: calc(0.25rem * 6);
653
+ &::placeholder {
654
+ color: var(--ga-color-text-disabled);
655
+ }
656
+ }
657
+ input {
658
+ height: calc(0.25rem * 6);
659
+ width: 100%;
651
660
  --tw-outline-style: none;
652
661
  outline-style: none;
653
662
  }
654
- &:is(input) {
655
- min-width: calc(0.25rem * 0);
656
- --tw-leading: calc(0.25rem * 6);
657
- line-height: calc(0.25rem * 6);
658
- }
659
663
  }
660
664
  .ga-notification {
661
665
  display: inline-flex;
@@ -735,6 +739,7 @@
735
739
  border-color: var(--ga-color-border-primary);
736
740
  background-color: var(--ga-color-surface-primary);
737
741
  .ga-menu__item {
742
+ position: relative;
738
743
  display: flex;
739
744
  height: calc(0.25rem * 9);
740
745
  cursor: pointer;
@@ -764,9 +769,39 @@
764
769
  background-color: var(--ga-color-surface-action-hover-2);
765
770
  color: var(--ga-color-text-action-hover);
766
771
  }
767
- &:active {
772
+ &:focus, &:focus-visible {
773
+ --tw-outline-style: none;
774
+ outline-style: none;
775
+ }
776
+ &.ga-menu__item--disabled {
777
+ background-color: var(--ga-color-surface-primary);
778
+ color: var(--ga-color-text-disabled);
779
+ }
780
+ &.ga-menu__item--selected {
768
781
  background-color: var(--ga-color-surface-action);
769
782
  color: var(--ga-color-text-on-action);
783
+ &:hover {
784
+ background-color: var(--ga-color-surface-action-hover);
785
+ }
786
+ &.ga-menu__item--disabled {
787
+ background-color: var(--ga-color-surface-primary);
788
+ color: var(--ga-color-text-disable-selected);
789
+ }
790
+ }
791
+ }
792
+ &:not(:focus-within) .ga-menu__item.ga-menu__item--active, .ga-menu__item:focus-visible {
793
+ &::after {
794
+ position: absolute;
795
+ top: 1px;
796
+ left: 1px;
797
+ height: calc(100% - 2px);
798
+ width: calc(100% - 2px);
799
+ border-radius: var(--ga-radius);
800
+ border-style: var(--tw-border-style);
801
+ border-width: 2px;
802
+ border-color: var(--ga-color-border-focus);
803
+ --tw-content: '';
804
+ content: var(--tw-content);
770
805
  }
771
806
  }
772
807
  .ga-menu__separator {
@@ -784,7 +819,6 @@
784
819
  letter-spacing: var(--tw-tracking, 0);
785
820
  --tw-font-weight: 600;
786
821
  font-weight: 600;
787
- color: var(--ga-color-text-disable-selected);
788
822
  }
789
823
  }
790
824
  .ga-radio-group {
@@ -991,9 +1025,8 @@
991
1025
  border-width: 1px;
992
1026
  border-color: var(--ga-color-border-primary);
993
1027
  background-color: var(--ga-color-surface-primary);
1028
+ padding-inline: calc(0.25rem * 3);
994
1029
  padding-block: calc(0.25rem * 2);
995
- padding-right: calc(0.25rem * 2);
996
- padding-left: calc(0.25rem * 3);
997
1030
  text-align: left;
998
1031
  font-size: var(--ga-size-font-md);
999
1032
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -1061,6 +1094,180 @@
1061
1094
  }
1062
1095
  }
1063
1096
  }
1097
+ .ga-tag {
1098
+ box-sizing: content-box;
1099
+ display: inline-flex;
1100
+ height: calc(0.25rem * 6);
1101
+ flex-direction: row;
1102
+ align-items: center;
1103
+ gap: calc(0.25rem * 1);
1104
+ border-radius: calc(infinity * 1px);
1105
+ border-style: var(--tw-border-style);
1106
+ border-width: 1px;
1107
+ border-color: var(--ga-color-border-action);
1108
+ padding-right: calc(0.25rem * 1);
1109
+ padding-left: calc(0.25rem * 2);
1110
+ font-size: var(--ga-size-font-sm);
1111
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
1112
+ letter-spacing: var(--tw-tracking, 0);
1113
+ &:focus-visible {
1114
+ outline-style: var(--tw-outline-style);
1115
+ outline-width: 2px;
1116
+ outline-offset: 2px;
1117
+ outline-color: var(--ga-color-border-focus);
1118
+ }
1119
+ &.ga-tag--information {
1120
+ border-color: var(--ga-color-border-information);
1121
+ background-color: var(--ga-color-surface-information);
1122
+ color: var(--ga-color-text-information);
1123
+ .ga-tag__icon {
1124
+ color: var(--ga-color-icon-information);
1125
+ }
1126
+ }
1127
+ &.ga-tag--success {
1128
+ border-color: var(--ga-color-border-success);
1129
+ background-color: var(--ga-color-surface-success);
1130
+ .ga-tag__icon {
1131
+ color: var(--ga-color-icon-success);
1132
+ }
1133
+ }
1134
+ &.ga-tag--error {
1135
+ border-color: var(--ga-color-border-error);
1136
+ background-color: var(--ga-color-surface-error);
1137
+ .ga-tag__icon {
1138
+ color: var(--ga-color-icon-error);
1139
+ }
1140
+ }
1141
+ &.ga-tag--warning {
1142
+ border-color: var(--ga-color-border-warning);
1143
+ background-color: var(--ga-color-surface-warning);
1144
+ .ga-tag__icon {
1145
+ color: var(--ga-color-icon-warning);
1146
+ }
1147
+ }
1148
+ &.ga-tag--disabled {
1149
+ border-color: var(--ga-color-border-disabled);
1150
+ background-color: var(--ga-color-surface-disabled);
1151
+ color: var(--ga-color-text-disable-selected);
1152
+ .ga-tag__icon {
1153
+ color: var(--ga-color-icon-on-disabled);
1154
+ }
1155
+ }
1156
+ &.ga-tag--interactive {
1157
+ cursor: pointer;
1158
+ --tw-border-style: dashed;
1159
+ border-style: dashed;
1160
+ &:hover {
1161
+ background-color: var(--ga-color-surface-action-hover-2);
1162
+ .ga-tag__icon {
1163
+ color: var(--ga-color-icon-action-hover);
1164
+ }
1165
+ }
1166
+ }
1167
+ &.ga-tag--interactive-disabled {
1168
+ cursor: not-allowed;
1169
+ --tw-border-style: dashed;
1170
+ border-style: dashed;
1171
+ border-color: var(--ga-color-border-disabled);
1172
+ color: var(--ga-color-text-disabled);
1173
+ .ga-tag__icon {
1174
+ color: var(--ga-color-icon-disabled);
1175
+ }
1176
+ }
1177
+ &.ga-tag--interactive-selected {
1178
+ --tw-border-style: solid;
1179
+ border-style: solid;
1180
+ color: var(--ga-color-text-action);
1181
+ &:hover {
1182
+ border-color: var(--ga-color-border-action-hover);
1183
+ .ga-tag__icon {
1184
+ color: var(--ga-color-icon-action-hover);
1185
+ }
1186
+ }
1187
+ }
1188
+ &.ga-tag--interactive-selected-disabled {
1189
+ cursor: not-allowed;
1190
+ --tw-border-style: solid;
1191
+ border-style: solid;
1192
+ border-color: var(--ga-color-surface-disable-selected);
1193
+ background-color: var(--ga-color-surface-disable-selected);
1194
+ color: var(--ga-color-text-on-action);
1195
+ .ga-tag__icon {
1196
+ color: var(--ga-color-icon-on-primary);
1197
+ }
1198
+ }
1199
+ &.ga-tag--utility-grey, &.ga-tag--utility-indigo, &.ga-tag--utility-teal, &.ga-tag--utility-lime, &.ga-tag--utility-purple, &.ga-tag--utility-pink, &.ga-tag--utility-rose, &.ga-tag--utility-yellow, &.ga-tag--utility-blue, &.ga-tag--utility-green, &.ga-tag--utility-orange, &.ga-tag--utility-disabled {
1200
+ border-radius: var(--ga-radius);
1201
+ padding-left: calc(0.25rem * 1.5);
1202
+ .ga-tag__icon {
1203
+ color: var(--ga-color-text-body);
1204
+ }
1205
+ }
1206
+ &.ga-tag--utility-grey {
1207
+ border-color: var(--ga-color-utility-grey);
1208
+ background-color: var(--ga-color-utility-grey-light);
1209
+ }
1210
+ &.ga-tag--utility-indigo {
1211
+ border-color: var(--ga-color-utility-indigo);
1212
+ background-color: var(--ga-color-utility-indigo-light);
1213
+ }
1214
+ &.ga-tag--utility-teal {
1215
+ border-color: var(--ga-color-utility-teal);
1216
+ background-color: var(--ga-color-utility-teal-light);
1217
+ }
1218
+ &.ga-tag--utility-lime {
1219
+ border-color: var(--ga-color-utility-lime);
1220
+ background-color: var(--ga-color-utility-lime-light);
1221
+ }
1222
+ &.ga-tag--utility-purple {
1223
+ border-color: var(--ga-color-utility-purple);
1224
+ background-color: var(--ga-color-utility-purple-light);
1225
+ }
1226
+ &.ga-tag--utility-pink {
1227
+ border-color: var(--ga-color-utility-pink);
1228
+ background-color: var(--ga-color-utility-pink-light);
1229
+ }
1230
+ &.ga-tag--utility-rose {
1231
+ border-color: var(--ga-color-utility-rose);
1232
+ background-color: var(--ga-color-utility-rose-light);
1233
+ }
1234
+ &.ga-tag--utility-yellow {
1235
+ border-color: var(--ga-color-utility-yellow);
1236
+ background-color: var(--ga-color-utility-yellow-light);
1237
+ }
1238
+ &.ga-tag--utility-blue {
1239
+ border-color: var(--ga-color-utility-blue);
1240
+ background-color: var(--ga-color-utility-blue-light);
1241
+ }
1242
+ &.ga-tag--utility-green {
1243
+ border-color: var(--ga-color-utility-green);
1244
+ background-color: var(--ga-color-utility-green-light);
1245
+ }
1246
+ &.ga-tag--utility-orange {
1247
+ border-color: var(--ga-color-utility-orange);
1248
+ background-color: var(--ga-color-utility-orange-light);
1249
+ }
1250
+ &.ga-tag--utility-disabled {
1251
+ border-color: var(--ga-color-border-disabled);
1252
+ background-color: var(--ga-color-surface-disabled);
1253
+ color: var(--ga-color-text-disable-selected);
1254
+ }
1255
+ .ga-tag__icon {
1256
+ flex-shrink: 0;
1257
+ color: var(--ga-color-icon-action);
1258
+ }
1259
+ .ga-tag__label {
1260
+ overflow: hidden;
1261
+ text-overflow: ellipsis;
1262
+ white-space: nowrap;
1263
+ padding-right: calc(0.25rem * 1);
1264
+ }
1265
+ .ga-tag__separator {
1266
+ height: calc(0.25rem * 5);
1267
+ width: 1px;
1268
+ background-color: var(--ga-color-border-primary);
1269
+ }
1270
+ }
1064
1271
  .ga-text-area {
1065
1272
  display: flex;
1066
1273
  width: calc(0.25rem * 50);