@vsn-ux/gaia-styles 0.2.4 → 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 (10) hide show
  1. package/dist/all-no-reset-10pt.css +175 -2
  2. package/dist/all-no-reset.css +175 -2
  3. package/dist/all.css +175 -2
  4. package/dist/components/select.css +1 -2
  5. package/dist/components/tag.css +185 -0
  6. package/dist/components.css +175 -2
  7. package/package.json +1 -1
  8. package/src/styles/components/select.css +1 -1
  9. package/src/styles/components/tag.css +166 -0
  10. package/src/styles/components.css +1 -0
package/dist/all-no-reset-10pt.css CHANGED
@@ -1025,9 +1025,8 @@
1025
1025
  border-width: 1px;
1026
1026
  border-color: var(--ga-color-border-primary);
1027
1027
  background-color: var(--ga-color-surface-primary);
1028
+ padding-inline: calc(0.4rem * 3);
1028
1029
  padding-block: calc(0.4rem * 2);
1029
- padding-right: calc(0.4rem * 2);
1030
- padding-left: calc(0.4rem * 3);
1031
1030
  text-align: left;
1032
1031
  font-size: var(--ga-size-font-md);
1033
1032
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -1095,6 +1094,180 @@
1095
1094
  }
1096
1095
  }
1097
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
+ }
1098
1271
  .ga-text-area {
1099
1272
  display: flex;
1100
1273
  width: calc(0.4rem * 50);
package/dist/all-no-reset.css CHANGED
@@ -1025,9 +1025,8 @@
1025
1025
  border-width: 1px;
1026
1026
  border-color: var(--ga-color-border-primary);
1027
1027
  background-color: var(--ga-color-surface-primary);
1028
+ padding-inline: calc(0.25rem * 3);
1028
1029
  padding-block: calc(0.25rem * 2);
1029
- padding-right: calc(0.25rem * 2);
1030
- padding-left: calc(0.25rem * 3);
1031
1030
  text-align: left;
1032
1031
  font-size: var(--ga-size-font-md);
1033
1032
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -1095,6 +1094,180 @@
1095
1094
  }
1096
1095
  }
1097
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
+ }
1098
1271
  .ga-text-area {
1099
1272
  display: flex;
1100
1273
  width: calc(0.25rem * 50);
package/dist/all.css CHANGED
@@ -1168,9 +1168,8 @@
1168
1168
  border-width: 1px;
1169
1169
  border-color: var(--ga-color-border-primary);
1170
1170
  background-color: var(--ga-color-surface-primary);
1171
+ padding-inline: calc(0.25rem * 3);
1171
1172
  padding-block: calc(0.25rem * 2);
1172
- padding-right: calc(0.25rem * 2);
1173
- padding-left: calc(0.25rem * 3);
1174
1173
  text-align: left;
1175
1174
  font-size: var(--ga-size-font-md);
1176
1175
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -1238,6 +1237,180 @@
1238
1237
  }
1239
1238
  }
1240
1239
  }
1240
+ .ga-tag {
1241
+ box-sizing: content-box;
1242
+ display: inline-flex;
1243
+ height: calc(0.25rem * 6);
1244
+ flex-direction: row;
1245
+ align-items: center;
1246
+ gap: calc(0.25rem * 1);
1247
+ border-radius: calc(infinity * 1px);
1248
+ border-style: var(--tw-border-style);
1249
+ border-width: 1px;
1250
+ border-color: var(--ga-color-border-action);
1251
+ padding-right: calc(0.25rem * 1);
1252
+ padding-left: calc(0.25rem * 2);
1253
+ font-size: var(--ga-size-font-sm);
1254
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
1255
+ letter-spacing: var(--tw-tracking, 0);
1256
+ &:focus-visible {
1257
+ outline-style: var(--tw-outline-style);
1258
+ outline-width: 2px;
1259
+ outline-offset: 2px;
1260
+ outline-color: var(--ga-color-border-focus);
1261
+ }
1262
+ &.ga-tag--information {
1263
+ border-color: var(--ga-color-border-information);
1264
+ background-color: var(--ga-color-surface-information);
1265
+ color: var(--ga-color-text-information);
1266
+ .ga-tag__icon {
1267
+ color: var(--ga-color-icon-information);
1268
+ }
1269
+ }
1270
+ &.ga-tag--success {
1271
+ border-color: var(--ga-color-border-success);
1272
+ background-color: var(--ga-color-surface-success);
1273
+ .ga-tag__icon {
1274
+ color: var(--ga-color-icon-success);
1275
+ }
1276
+ }
1277
+ &.ga-tag--error {
1278
+ border-color: var(--ga-color-border-error);
1279
+ background-color: var(--ga-color-surface-error);
1280
+ .ga-tag__icon {
1281
+ color: var(--ga-color-icon-error);
1282
+ }
1283
+ }
1284
+ &.ga-tag--warning {
1285
+ border-color: var(--ga-color-border-warning);
1286
+ background-color: var(--ga-color-surface-warning);
1287
+ .ga-tag__icon {
1288
+ color: var(--ga-color-icon-warning);
1289
+ }
1290
+ }
1291
+ &.ga-tag--disabled {
1292
+ border-color: var(--ga-color-border-disabled);
1293
+ background-color: var(--ga-color-surface-disabled);
1294
+ color: var(--ga-color-text-disable-selected);
1295
+ .ga-tag__icon {
1296
+ color: var(--ga-color-icon-on-disabled);
1297
+ }
1298
+ }
1299
+ &.ga-tag--interactive {
1300
+ cursor: pointer;
1301
+ --tw-border-style: dashed;
1302
+ border-style: dashed;
1303
+ &:hover {
1304
+ background-color: var(--ga-color-surface-action-hover-2);
1305
+ .ga-tag__icon {
1306
+ color: var(--ga-color-icon-action-hover);
1307
+ }
1308
+ }
1309
+ }
1310
+ &.ga-tag--interactive-disabled {
1311
+ cursor: not-allowed;
1312
+ --tw-border-style: dashed;
1313
+ border-style: dashed;
1314
+ border-color: var(--ga-color-border-disabled);
1315
+ color: var(--ga-color-text-disabled);
1316
+ .ga-tag__icon {
1317
+ color: var(--ga-color-icon-disabled);
1318
+ }
1319
+ }
1320
+ &.ga-tag--interactive-selected {
1321
+ --tw-border-style: solid;
1322
+ border-style: solid;
1323
+ color: var(--ga-color-text-action);
1324
+ &:hover {
1325
+ border-color: var(--ga-color-border-action-hover);
1326
+ .ga-tag__icon {
1327
+ color: var(--ga-color-icon-action-hover);
1328
+ }
1329
+ }
1330
+ }
1331
+ &.ga-tag--interactive-selected-disabled {
1332
+ cursor: not-allowed;
1333
+ --tw-border-style: solid;
1334
+ border-style: solid;
1335
+ border-color: var(--ga-color-surface-disable-selected);
1336
+ background-color: var(--ga-color-surface-disable-selected);
1337
+ color: var(--ga-color-text-on-action);
1338
+ .ga-tag__icon {
1339
+ color: var(--ga-color-icon-on-primary);
1340
+ }
1341
+ }
1342
+ &.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 {
1343
+ border-radius: var(--ga-radius);
1344
+ padding-left: calc(0.25rem * 1.5);
1345
+ .ga-tag__icon {
1346
+ color: var(--ga-color-text-body);
1347
+ }
1348
+ }
1349
+ &.ga-tag--utility-grey {
1350
+ border-color: var(--ga-color-utility-grey);
1351
+ background-color: var(--ga-color-utility-grey-light);
1352
+ }
1353
+ &.ga-tag--utility-indigo {
1354
+ border-color: var(--ga-color-utility-indigo);
1355
+ background-color: var(--ga-color-utility-indigo-light);
1356
+ }
1357
+ &.ga-tag--utility-teal {
1358
+ border-color: var(--ga-color-utility-teal);
1359
+ background-color: var(--ga-color-utility-teal-light);
1360
+ }
1361
+ &.ga-tag--utility-lime {
1362
+ border-color: var(--ga-color-utility-lime);
1363
+ background-color: var(--ga-color-utility-lime-light);
1364
+ }
1365
+ &.ga-tag--utility-purple {
1366
+ border-color: var(--ga-color-utility-purple);
1367
+ background-color: var(--ga-color-utility-purple-light);
1368
+ }
1369
+ &.ga-tag--utility-pink {
1370
+ border-color: var(--ga-color-utility-pink);
1371
+ background-color: var(--ga-color-utility-pink-light);
1372
+ }
1373
+ &.ga-tag--utility-rose {
1374
+ border-color: var(--ga-color-utility-rose);
1375
+ background-color: var(--ga-color-utility-rose-light);
1376
+ }
1377
+ &.ga-tag--utility-yellow {
1378
+ border-color: var(--ga-color-utility-yellow);
1379
+ background-color: var(--ga-color-utility-yellow-light);
1380
+ }
1381
+ &.ga-tag--utility-blue {
1382
+ border-color: var(--ga-color-utility-blue);
1383
+ background-color: var(--ga-color-utility-blue-light);
1384
+ }
1385
+ &.ga-tag--utility-green {
1386
+ border-color: var(--ga-color-utility-green);
1387
+ background-color: var(--ga-color-utility-green-light);
1388
+ }
1389
+ &.ga-tag--utility-orange {
1390
+ border-color: var(--ga-color-utility-orange);
1391
+ background-color: var(--ga-color-utility-orange-light);
1392
+ }
1393
+ &.ga-tag--utility-disabled {
1394
+ border-color: var(--ga-color-border-disabled);
1395
+ background-color: var(--ga-color-surface-disabled);
1396
+ color: var(--ga-color-text-disable-selected);
1397
+ }
1398
+ .ga-tag__icon {
1399
+ flex-shrink: 0;
1400
+ color: var(--ga-color-icon-action);
1401
+ }
1402
+ .ga-tag__label {
1403
+ overflow: hidden;
1404
+ text-overflow: ellipsis;
1405
+ white-space: nowrap;
1406
+ padding-right: calc(0.25rem * 1);
1407
+ }
1408
+ .ga-tag__separator {
1409
+ height: calc(0.25rem * 5);
1410
+ width: 1px;
1411
+ background-color: var(--ga-color-border-primary);
1412
+ }
1413
+ }
1241
1414
  .ga-text-area {
1242
1415
  display: flex;
1243
1416
  width: calc(0.25rem * 50);
package/dist/components/select.css CHANGED
@@ -40,9 +40,8 @@
40
40
  border-width: 1px;
41
41
  border-color: var(--ga-color-border-primary);
42
42
  background-color: var(--ga-color-surface-primary);
43
+ padding-inline: calc(0.25rem * 3);
43
44
  padding-block: calc(0.25rem * 2);
44
- padding-right: calc(0.25rem * 2);
45
- padding-left: calc(0.25rem * 3);
46
45
  text-align: left;
47
46
  font-size: var(--ga-size-font-md);
48
47
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
package/dist/components/tag.css ADDED
@@ -0,0 +1,185 @@
1
+ /*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
2
+ .ga-tag {
3
+ box-sizing: content-box;
4
+ display: inline-flex;
5
+ height: calc(0.25rem * 6);
6
+ flex-direction: row;
7
+ align-items: center;
8
+ gap: calc(0.25rem * 1);
9
+ border-radius: calc(infinity * 1px);
10
+ border-style: var(--tw-border-style);
11
+ border-width: 1px;
12
+ border-color: var(--ga-color-border-action);
13
+ padding-right: calc(0.25rem * 1);
14
+ padding-left: calc(0.25rem * 2);
15
+ font-size: var(--ga-size-font-sm);
16
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
17
+ letter-spacing: var(--tw-tracking, 0);
18
+ &:focus-visible {
19
+ outline-style: var(--tw-outline-style);
20
+ outline-width: 2px;
21
+ outline-offset: 2px;
22
+ outline-color: var(--ga-color-border-focus);
23
+ }
24
+ &.ga-tag--information {
25
+ border-color: var(--ga-color-border-information);
26
+ background-color: var(--ga-color-surface-information);
27
+ color: var(--ga-color-text-information);
28
+ .ga-tag__icon {
29
+ color: var(--ga-color-icon-information);
30
+ }
31
+ }
32
+ &.ga-tag--success {
33
+ border-color: var(--ga-color-border-success);
34
+ background-color: var(--ga-color-surface-success);
35
+ .ga-tag__icon {
36
+ color: var(--ga-color-icon-success);
37
+ }
38
+ }
39
+ &.ga-tag--error {
40
+ border-color: var(--ga-color-border-error);
41
+ background-color: var(--ga-color-surface-error);
42
+ .ga-tag__icon {
43
+ color: var(--ga-color-icon-error);
44
+ }
45
+ }
46
+ &.ga-tag--warning {
47
+ border-color: var(--ga-color-border-warning);
48
+ background-color: var(--ga-color-surface-warning);
49
+ .ga-tag__icon {
50
+ color: var(--ga-color-icon-warning);
51
+ }
52
+ }
53
+ &.ga-tag--disabled {
54
+ border-color: var(--ga-color-border-disabled);
55
+ background-color: var(--ga-color-surface-disabled);
56
+ color: var(--ga-color-text-disable-selected);
57
+ .ga-tag__icon {
58
+ color: var(--ga-color-icon-on-disabled);
59
+ }
60
+ }
61
+ &.ga-tag--interactive {
62
+ cursor: pointer;
63
+ --tw-border-style: dashed;
64
+ border-style: dashed;
65
+ &:hover {
66
+ background-color: var(--ga-color-surface-action-hover-2);
67
+ .ga-tag__icon {
68
+ color: var(--ga-color-icon-action-hover);
69
+ }
70
+ }
71
+ }
72
+ &.ga-tag--interactive-disabled {
73
+ cursor: not-allowed;
74
+ --tw-border-style: dashed;
75
+ border-style: dashed;
76
+ border-color: var(--ga-color-border-disabled);
77
+ color: var(--ga-color-text-disabled);
78
+ .ga-tag__icon {
79
+ color: var(--ga-color-icon-disabled);
80
+ }
81
+ }
82
+ &.ga-tag--interactive-selected {
83
+ --tw-border-style: solid;
84
+ border-style: solid;
85
+ color: var(--ga-color-text-action);
86
+ &:hover {
87
+ border-color: var(--ga-color-border-action-hover);
88
+ .ga-tag__icon {
89
+ color: var(--ga-color-icon-action-hover);
90
+ }
91
+ }
92
+ }
93
+ &.ga-tag--interactive-selected-disabled {
94
+ cursor: not-allowed;
95
+ --tw-border-style: solid;
96
+ border-style: solid;
97
+ border-color: var(--ga-color-surface-disable-selected);
98
+ background-color: var(--ga-color-surface-disable-selected);
99
+ color: var(--ga-color-text-on-action);
100
+ .ga-tag__icon {
101
+ color: var(--ga-color-icon-on-primary);
102
+ }
103
+ }
104
+ &.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 {
105
+ border-radius: var(--ga-radius);
106
+ padding-left: calc(0.25rem * 1.5);
107
+ .ga-tag__icon {
108
+ color: var(--ga-color-text-body);
109
+ }
110
+ }
111
+ &.ga-tag--utility-grey {
112
+ border-color: var(--ga-color-utility-grey);
113
+ background-color: var(--ga-color-utility-grey-light);
114
+ }
115
+ &.ga-tag--utility-indigo {
116
+ border-color: var(--ga-color-utility-indigo);
117
+ background-color: var(--ga-color-utility-indigo-light);
118
+ }
119
+ &.ga-tag--utility-teal {
120
+ border-color: var(--ga-color-utility-teal);
121
+ background-color: var(--ga-color-utility-teal-light);
122
+ }
123
+ &.ga-tag--utility-lime {
124
+ border-color: var(--ga-color-utility-lime);
125
+ background-color: var(--ga-color-utility-lime-light);
126
+ }
127
+ &.ga-tag--utility-purple {
128
+ border-color: var(--ga-color-utility-purple);
129
+ background-color: var(--ga-color-utility-purple-light);
130
+ }
131
+ &.ga-tag--utility-pink {
132
+ border-color: var(--ga-color-utility-pink);
133
+ background-color: var(--ga-color-utility-pink-light);
134
+ }
135
+ &.ga-tag--utility-rose {
136
+ border-color: var(--ga-color-utility-rose);
137
+ background-color: var(--ga-color-utility-rose-light);
138
+ }
139
+ &.ga-tag--utility-yellow {
140
+ border-color: var(--ga-color-utility-yellow);
141
+ background-color: var(--ga-color-utility-yellow-light);
142
+ }
143
+ &.ga-tag--utility-blue {
144
+ border-color: var(--ga-color-utility-blue);
145
+ background-color: var(--ga-color-utility-blue-light);
146
+ }
147
+ &.ga-tag--utility-green {
148
+ border-color: var(--ga-color-utility-green);
149
+ background-color: var(--ga-color-utility-green-light);
150
+ }
151
+ &.ga-tag--utility-orange {
152
+ border-color: var(--ga-color-utility-orange);
153
+ background-color: var(--ga-color-utility-orange-light);
154
+ }
155
+ &.ga-tag--utility-disabled {
156
+ border-color: var(--ga-color-border-disabled);
157
+ background-color: var(--ga-color-surface-disabled);
158
+ color: var(--ga-color-text-disable-selected);
159
+ }
160
+ .ga-tag__icon {
161
+ flex-shrink: 0;
162
+ color: var(--ga-color-icon-action);
163
+ }
164
+ .ga-tag__label {
165
+ overflow: hidden;
166
+ text-overflow: ellipsis;
167
+ white-space: nowrap;
168
+ padding-right: calc(0.25rem * 1);
169
+ }
170
+ .ga-tag__separator {
171
+ height: calc(0.25rem * 5);
172
+ width: 1px;
173
+ background-color: var(--ga-color-border-primary);
174
+ }
175
+ }
176
+ @property --tw-border-style {
177
+ syntax: "*";
178
+ inherits: false;
179
+ initial-value: solid;
180
+ }
181
+ @property --tw-outline-style {
182
+ syntax: "*";
183
+ inherits: false;
184
+ initial-value: solid;
185
+ }
package/dist/components.css CHANGED
@@ -844,9 +844,8 @@
844
844
  border-width: 1px;
845
845
  border-color: var(--ga-color-border-primary);
846
846
  background-color: var(--ga-color-surface-primary);
847
+ padding-inline: calc(0.25rem * 3);
847
848
  padding-block: calc(0.25rem * 2);
848
- padding-right: calc(0.25rem * 2);
849
- padding-left: calc(0.25rem * 3);
850
849
  text-align: left;
851
850
  font-size: var(--ga-size-font-md);
852
851
  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -914,6 +913,180 @@
914
913
  }
915
914
  }
916
915
  }
916
+ .ga-tag {
917
+ box-sizing: content-box;
918
+ display: inline-flex;
919
+ height: calc(0.25rem * 6);
920
+ flex-direction: row;
921
+ align-items: center;
922
+ gap: calc(0.25rem * 1);
923
+ border-radius: calc(infinity * 1px);
924
+ border-style: var(--tw-border-style);
925
+ border-width: 1px;
926
+ border-color: var(--ga-color-border-action);
927
+ padding-right: calc(0.25rem * 1);
928
+ padding-left: calc(0.25rem * 2);
929
+ font-size: var(--ga-size-font-sm);
930
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
931
+ letter-spacing: var(--tw-tracking, 0);
932
+ &:focus-visible {
933
+ outline-style: var(--tw-outline-style);
934
+ outline-width: 2px;
935
+ outline-offset: 2px;
936
+ outline-color: var(--ga-color-border-focus);
937
+ }
938
+ &.ga-tag--information {
939
+ border-color: var(--ga-color-border-information);
940
+ background-color: var(--ga-color-surface-information);
941
+ color: var(--ga-color-text-information);
942
+ .ga-tag__icon {
943
+ color: var(--ga-color-icon-information);
944
+ }
945
+ }
946
+ &.ga-tag--success {
947
+ border-color: var(--ga-color-border-success);
948
+ background-color: var(--ga-color-surface-success);
949
+ .ga-tag__icon {
950
+ color: var(--ga-color-icon-success);
951
+ }
952
+ }
953
+ &.ga-tag--error {
954
+ border-color: var(--ga-color-border-error);
955
+ background-color: var(--ga-color-surface-error);
956
+ .ga-tag__icon {
957
+ color: var(--ga-color-icon-error);
958
+ }
959
+ }
960
+ &.ga-tag--warning {
961
+ border-color: var(--ga-color-border-warning);
962
+ background-color: var(--ga-color-surface-warning);
963
+ .ga-tag__icon {
964
+ color: var(--ga-color-icon-warning);
965
+ }
966
+ }
967
+ &.ga-tag--disabled {
968
+ border-color: var(--ga-color-border-disabled);
969
+ background-color: var(--ga-color-surface-disabled);
970
+ color: var(--ga-color-text-disable-selected);
971
+ .ga-tag__icon {
972
+ color: var(--ga-color-icon-on-disabled);
973
+ }
974
+ }
975
+ &.ga-tag--interactive {
976
+ cursor: pointer;
977
+ --tw-border-style: dashed;
978
+ border-style: dashed;
979
+ &:hover {
980
+ background-color: var(--ga-color-surface-action-hover-2);
981
+ .ga-tag__icon {
982
+ color: var(--ga-color-icon-action-hover);
983
+ }
984
+ }
985
+ }
986
+ &.ga-tag--interactive-disabled {
987
+ cursor: not-allowed;
988
+ --tw-border-style: dashed;
989
+ border-style: dashed;
990
+ border-color: var(--ga-color-border-disabled);
991
+ color: var(--ga-color-text-disabled);
992
+ .ga-tag__icon {
993
+ color: var(--ga-color-icon-disabled);
994
+ }
995
+ }
996
+ &.ga-tag--interactive-selected {
997
+ --tw-border-style: solid;
998
+ border-style: solid;
999
+ color: var(--ga-color-text-action);
1000
+ &:hover {
1001
+ border-color: var(--ga-color-border-action-hover);
1002
+ .ga-tag__icon {
1003
+ color: var(--ga-color-icon-action-hover);
1004
+ }
1005
+ }
1006
+ }
1007
+ &.ga-tag--interactive-selected-disabled {
1008
+ cursor: not-allowed;
1009
+ --tw-border-style: solid;
1010
+ border-style: solid;
1011
+ border-color: var(--ga-color-surface-disable-selected);
1012
+ background-color: var(--ga-color-surface-disable-selected);
1013
+ color: var(--ga-color-text-on-action);
1014
+ .ga-tag__icon {
1015
+ color: var(--ga-color-icon-on-primary);
1016
+ }
1017
+ }
1018
+ &.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 {
1019
+ border-radius: var(--ga-radius);
1020
+ padding-left: calc(0.25rem * 1.5);
1021
+ .ga-tag__icon {
1022
+ color: var(--ga-color-text-body);
1023
+ }
1024
+ }
1025
+ &.ga-tag--utility-grey {
1026
+ border-color: var(--ga-color-utility-grey);
1027
+ background-color: var(--ga-color-utility-grey-light);
1028
+ }
1029
+ &.ga-tag--utility-indigo {
1030
+ border-color: var(--ga-color-utility-indigo);
1031
+ background-color: var(--ga-color-utility-indigo-light);
1032
+ }
1033
+ &.ga-tag--utility-teal {
1034
+ border-color: var(--ga-color-utility-teal);
1035
+ background-color: var(--ga-color-utility-teal-light);
1036
+ }
1037
+ &.ga-tag--utility-lime {
1038
+ border-color: var(--ga-color-utility-lime);
1039
+ background-color: var(--ga-color-utility-lime-light);
1040
+ }
1041
+ &.ga-tag--utility-purple {
1042
+ border-color: var(--ga-color-utility-purple);
1043
+ background-color: var(--ga-color-utility-purple-light);
1044
+ }
1045
+ &.ga-tag--utility-pink {
1046
+ border-color: var(--ga-color-utility-pink);
1047
+ background-color: var(--ga-color-utility-pink-light);
1048
+ }
1049
+ &.ga-tag--utility-rose {
1050
+ border-color: var(--ga-color-utility-rose);
1051
+ background-color: var(--ga-color-utility-rose-light);
1052
+ }
1053
+ &.ga-tag--utility-yellow {
1054
+ border-color: var(--ga-color-utility-yellow);
1055
+ background-color: var(--ga-color-utility-yellow-light);
1056
+ }
1057
+ &.ga-tag--utility-blue {
1058
+ border-color: var(--ga-color-utility-blue);
1059
+ background-color: var(--ga-color-utility-blue-light);
1060
+ }
1061
+ &.ga-tag--utility-green {
1062
+ border-color: var(--ga-color-utility-green);
1063
+ background-color: var(--ga-color-utility-green-light);
1064
+ }
1065
+ &.ga-tag--utility-orange {
1066
+ border-color: var(--ga-color-utility-orange);
1067
+ background-color: var(--ga-color-utility-orange-light);
1068
+ }
1069
+ &.ga-tag--utility-disabled {
1070
+ border-color: var(--ga-color-border-disabled);
1071
+ background-color: var(--ga-color-surface-disabled);
1072
+ color: var(--ga-color-text-disable-selected);
1073
+ }
1074
+ .ga-tag__icon {
1075
+ flex-shrink: 0;
1076
+ color: var(--ga-color-icon-action);
1077
+ }
1078
+ .ga-tag__label {
1079
+ overflow: hidden;
1080
+ text-overflow: ellipsis;
1081
+ white-space: nowrap;
1082
+ padding-right: calc(0.25rem * 1);
1083
+ }
1084
+ .ga-tag__separator {
1085
+ height: calc(0.25rem * 5);
1086
+ width: 1px;
1087
+ background-color: var(--ga-color-border-primary);
1088
+ }
1089
+ }
917
1090
  .ga-text-area {
918
1091
  display: flex;
919
1092
  width: calc(0.25rem * 50);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "storybook dev -p 6006",
package/src/styles/components/select.css CHANGED
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  .ga-select {
14
- @apply text-md inline-flex h-10 w-50 cursor-pointer appearance-none items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) py-2 pr-2 pl-3 text-left leading-none;
14
+ @apply text-md inline-flex h-10 w-50 cursor-pointer appearance-none items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-3 py-2 text-left leading-none;
15
15
 
16
16
  &.ga-select--expanded {
17
17
  @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
package/src/styles/components/tag.css ADDED
@@ -0,0 +1,166 @@
1
+ .ga-tag {
2
+ @apply box-content inline-flex h-6 flex-row items-center gap-1 rounded-full border border-(--ga-color-border-action) pr-1 pl-2 text-sm;
3
+
4
+ &:focus-visible {
5
+ @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
6
+ }
7
+
8
+ &.ga-tag--information {
9
+ @apply border-(--ga-color-border-information) bg-(--ga-color-surface-information) text-(--ga-color-text-information);
10
+
11
+ .ga-tag__icon {
12
+ @apply text-(--ga-color-icon-information);
13
+ }
14
+ }
15
+
16
+ &.ga-tag--success {
17
+ @apply border-(--ga-color-border-success) bg-(--ga-color-surface-success);
18
+
19
+ .ga-tag__icon {
20
+ @apply text-(--ga-color-icon-success);
21
+ }
22
+ }
23
+
24
+ &.ga-tag--error {
25
+ @apply border-(--ga-color-border-error) bg-(--ga-color-surface-error);
26
+
27
+ .ga-tag__icon {
28
+ @apply text-(--ga-color-icon-error);
29
+ }
30
+ }
31
+
32
+ &.ga-tag--warning {
33
+ @apply border-(--ga-color-border-warning) bg-(--ga-color-surface-warning);
34
+
35
+ .ga-tag__icon {
36
+ @apply text-(--ga-color-icon-warning);
37
+ }
38
+ }
39
+
40
+ &.ga-tag--disabled {
41
+ @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
42
+
43
+ .ga-tag__icon {
44
+ @apply text-(--ga-color-icon-on-disabled);
45
+ }
46
+ }
47
+
48
+ &.ga-tag--interactive {
49
+ @apply cursor-pointer border-dashed;
50
+
51
+ &:hover {
52
+ @apply bg-(--ga-color-surface-action-hover-2);
53
+
54
+ .ga-tag__icon {
55
+ @apply text-(--ga-color-icon-action-hover);
56
+ }
57
+ }
58
+ }
59
+
60
+ &.ga-tag--interactive-disabled {
61
+ @apply cursor-not-allowed border-dashed border-(--ga-color-border-disabled) text-(--ga-color-text-disabled);
62
+
63
+ .ga-tag__icon {
64
+ @apply text-(--ga-color-icon-disabled);
65
+ }
66
+ }
67
+
68
+ &.ga-tag--interactive-selected {
69
+ @apply border-solid text-(--ga-color-text-action);
70
+
71
+ &:hover {
72
+ @apply border-(--ga-color-border-action-hover);
73
+
74
+ .ga-tag__icon {
75
+ @apply text-(--ga-color-icon-action-hover);
76
+ }
77
+ }
78
+ }
79
+
80
+ &.ga-tag--interactive-selected-disabled {
81
+ @apply cursor-not-allowed border-solid border-(--ga-color-surface-disable-selected) bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);
82
+
83
+ .ga-tag__icon {
84
+ @apply text-(--ga-color-icon-on-primary);
85
+ }
86
+ }
87
+
88
+ &.ga-tag--utility-grey,
89
+ &.ga-tag--utility-indigo,
90
+ &.ga-tag--utility-teal,
91
+ &.ga-tag--utility-lime,
92
+ &.ga-tag--utility-purple,
93
+ &.ga-tag--utility-pink,
94
+ &.ga-tag--utility-rose,
95
+ &.ga-tag--utility-yellow,
96
+ &.ga-tag--utility-blue,
97
+ &.ga-tag--utility-green,
98
+ &.ga-tag--utility-orange,
99
+ &.ga-tag--utility-disabled {
100
+ @apply rounded pl-1.5;
101
+
102
+ .ga-tag__icon {
103
+ @apply text-(--ga-color-text-body);
104
+ }
105
+ }
106
+
107
+ &.ga-tag--utility-grey {
108
+ @apply border-(--ga-color-utility-grey) bg-(--ga-color-utility-grey-light);
109
+ }
110
+
111
+ &.ga-tag--utility-indigo {
112
+ @apply border-(--ga-color-utility-indigo) bg-(--ga-color-utility-indigo-light);
113
+ }
114
+
115
+ &.ga-tag--utility-teal {
116
+ @apply border-(--ga-color-utility-teal) bg-(--ga-color-utility-teal-light);
117
+ }
118
+
119
+ &.ga-tag--utility-lime {
120
+ @apply border-(--ga-color-utility-lime) bg-(--ga-color-utility-lime-light);
121
+ }
122
+
123
+ &.ga-tag--utility-purple {
124
+ @apply border-(--ga-color-utility-purple) bg-(--ga-color-utility-purple-light);
125
+ }
126
+
127
+ &.ga-tag--utility-pink {
128
+ @apply border-(--ga-color-utility-pink) bg-(--ga-color-utility-pink-light);
129
+ }
130
+
131
+ &.ga-tag--utility-rose {
132
+ @apply border-(--ga-color-utility-rose) bg-(--ga-color-utility-rose-light);
133
+ }
134
+
135
+ &.ga-tag--utility-yellow {
136
+ @apply border-(--ga-color-utility-yellow) bg-(--ga-color-utility-yellow-light);
137
+ }
138
+
139
+ &.ga-tag--utility-blue {
140
+ @apply border-(--ga-color-utility-blue) bg-(--ga-color-utility-blue-light);
141
+ }
142
+
143
+ &.ga-tag--utility-green {
144
+ @apply border-(--ga-color-utility-green) bg-(--ga-color-utility-green-light);
145
+ }
146
+
147
+ &.ga-tag--utility-orange {
148
+ @apply border-(--ga-color-utility-orange) bg-(--ga-color-utility-orange-light);
149
+ }
150
+
151
+ &.ga-tag--utility-disabled {
152
+ @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
153
+ }
154
+
155
+ .ga-tag__icon {
156
+ @apply shrink-0 text-(--ga-color-icon-action);
157
+ }
158
+
159
+ .ga-tag__label {
160
+ @apply truncate pr-1;
161
+ }
162
+
163
+ .ga-tag__separator {
164
+ @apply h-5 w-px bg-(--ga-color-border-primary);
165
+ }
166
+ }
package/src/styles/components.css CHANGED
@@ -11,5 +11,6 @@
11
11
  @import './components/radio.css';
12
12
  @import './components/segmented-control.css';
13
13
  @import './components/select.css';
14
+ @import './components/tag.css';
14
15
  @import './components/text-area.css';
15
16
  @import './components/tooltip.css';