@gooddata/sdk-ui-kit 10.26.0-alpha.2 → 10.26.0-alpha.20

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 (41) hide show
  1. package/esm/@ui/UiButton/UiButton.d.ts +2 -2
  2. package/esm/@ui/UiButton/UiButton.d.ts.map +1 -1
  3. package/esm/@ui/UiButton/UiButton.js +6 -6
  4. package/esm/@ui/UiButton/UiButton.js.map +1 -1
  5. package/esm/@ui/UiChip/UiChip.d.ts +9 -1
  6. package/esm/@ui/UiChip/UiChip.d.ts.map +1 -1
  7. package/esm/@ui/UiChip/UiChip.js +23 -9
  8. package/esm/@ui/UiChip/UiChip.js.map +1 -1
  9. package/esm/@ui/UiIcon/UiIcon.d.ts +1 -1
  10. package/esm/@ui/UiIcon/UiIcon.d.ts.map +1 -1
  11. package/esm/@ui/UiIcon/UiIcon.js +3 -3
  12. package/esm/@ui/UiIcon/UiIcon.js.map +1 -1
  13. package/esm/@ui/UiIcon/icons.d.ts +4 -5
  14. package/esm/@ui/UiIcon/icons.d.ts.map +1 -1
  15. package/esm/@ui/UiIcon/icons.js +17 -53
  16. package/esm/@ui/UiIcon/icons.js.map +1 -1
  17. package/esm/Dialog/ConfirmDialogBase.d.ts.map +1 -1
  18. package/esm/Dialog/ConfirmDialogBase.js +7 -2
  19. package/esm/Dialog/ConfirmDialogBase.js.map +1 -1
  20. package/esm/Dialog/DialogBase.d.ts.map +1 -1
  21. package/esm/Dialog/DialogBase.js +1 -1
  22. package/esm/Dialog/DialogBase.js.map +1 -1
  23. package/esm/Dialog/typings.d.ts +1 -0
  24. package/esm/Dialog/typings.d.ts.map +1 -1
  25. package/esm/Icon/icons/QuestionMark.d.ts.map +1 -1
  26. package/esm/Icon/icons/QuestionMark.js +3 -3
  27. package/esm/Icon/icons/QuestionMark.js.map +1 -1
  28. package/esm/RichText/plugins/rehype-references.d.ts.map +1 -1
  29. package/esm/RichText/plugins/rehype-references.js +18 -15
  30. package/esm/RichText/plugins/rehype-references.js.map +1 -1
  31. package/esm/index.d.ts +2 -1
  32. package/esm/index.d.ts.map +1 -1
  33. package/esm/index.js +1 -0
  34. package/esm/index.js.map +1 -1
  35. package/esm/sdk-ui-kit.d.ts +14 -1
  36. package/package.json +8 -8
  37. package/src/@ui/UiButton/UiButton.scss +29 -118
  38. package/src/@ui/UiChip/UiChip.scss +59 -18
  39. package/src/@ui/UiIcon/UiIcon.scss +3 -3
  40. package/styles/css/main.css +70 -180
  41. package/styles/css/main.css.map +1 -1
package/src/@ui/UiChip/UiChip.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  // (C) 2025 GoodData Corporation
2
2
 
3
- @use "../UiButton//UiButton.scss";
4
-
5
3
  $border-radius: 20px;
6
4
  $background-color: var(--gd-palette-complementary-0);
7
5
  $border-color: var(--gd-palette-complementary-4);
@@ -90,17 +88,24 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
90
88
  }
91
89
 
92
90
  #{$root}__delete {
93
- svg {
94
- --gd-icon-fill-color: var(--gd-palette-error-base);
95
- }
91
+ color: var(--gd-palette-error-base);
96
92
  }
97
93
  }
98
94
 
95
+ #{$root}__trigger--isDeletable {
96
+ border-right: 1px solid transparent;
97
+ }
98
+
99
99
  &__trigger,
100
100
  &__delete {
101
- @extend %ui-button;
102
- @extend %ui-button--variant-tertiary;
103
-
101
+ color: var(--gd-palette-complementary-7);
102
+ background-color: transparent;
103
+ border-radius: var(--gd-button-borderRadius);
104
+ transition: var(--gd-transition-all);
105
+ display: inline-flex;
106
+ justify-content: center;
107
+ align-items: center;
108
+ cursor: pointer;
104
109
  height: 100%;
105
110
  min-width: 0;
106
111
  flex-shrink: 1;
@@ -108,6 +113,11 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
108
113
  text-decoration: none;
109
114
  padding: 0 10px;
110
115
  border: none;
116
+
117
+ &:disabled {
118
+ cursor: default;
119
+ color: var(--gd-palette-complementary-5);
120
+ }
111
121
  }
112
122
 
113
123
  &__trigger {
@@ -132,6 +142,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
132
142
  }
133
143
  }
134
144
 
145
+ &:not(&:disabled) {
146
+ &:hover,
147
+ &:focus,
148
+ &:active {
149
+ svg {
150
+ color: var(--gd-palette-primary-base);
151
+ }
152
+
153
+ color: var(--gd-palette-complementary-8);
154
+ }
155
+ }
156
+
135
157
  &:not(&--isDeletable) {
136
158
  border-radius: $border-radius;
137
159
  border: none;
@@ -142,31 +164,44 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
142
164
  flex-shrink: 0;
143
165
  border-radius: 0 $border-radius $border-radius 0;
144
166
  padding: 0 7px 0 5px;
167
+
168
+ &:not(&:disabled) {
169
+ &:hover,
170
+ &:focus,
171
+ &:active {
172
+ svg {
173
+ color: var(--gd-palette-error-base);
174
+ }
175
+
176
+ color: var(--gd-palette-complementary-8);
177
+ }
178
+ }
145
179
  }
146
180
 
147
181
  &__label {
148
- @extend %ui-button__text;
149
-
182
+ transition: var(--gd-transition-all);
150
183
  white-space: nowrap;
151
184
  overflow: hidden;
152
185
  text-overflow: ellipsis;
153
186
  }
154
187
 
155
188
  &__tag {
156
- @extend %ui-button__text;
157
-
189
+ transition: var(--gd-transition-all);
158
190
  margin-left: 2px;
159
191
  }
160
192
 
161
193
  &__icon-before {
162
- @extend %ui-button__icon;
163
-
194
+ display: flex;
195
+ align-items: center;
196
+ justify-content: center;
197
+ transition: var(--gd-transition-all);
164
198
  margin-right: 5px;
165
199
  }
166
200
 
167
201
  &__icon-chevron {
168
- @extend %ui-button__icon;
169
-
202
+ align-items: center;
203
+ justify-content: center;
204
+ transition: var(--gd-transition-all);
170
205
  display: none;
171
206
  margin-left: 5px;
172
207
 
@@ -181,12 +216,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
181
216
  }
182
217
 
183
218
  &__icon-lock {
184
- @extend %ui-button__icon;
219
+ display: flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+ transition: var(--gd-transition-all);
185
223
 
186
224
  margin-left: 5px;
187
225
  }
188
226
 
189
227
  &__icon-delete {
190
- @extend %ui-button__icon;
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: center;
231
+ transition: var(--gd-transition-all);
191
232
  }
192
233
  }
package/src/@ui/UiIcon/UiIcon.scss CHANGED
@@ -1,5 +1,6 @@
1
- // (C) 2024 GoodData Corporation
1
+ // (C) 2024-2025 GoodData Corporation
2
2
  .gd-ui-kit-icon {
3
+ fill: var(--gd-icon-fill-color);
3
4
  &--color {
4
5
  &-primary {
5
6
  --gd-icon-fill-color: var(--gd-palette-primary-base);
@@ -54,8 +55,7 @@
54
55
  }
55
56
  }
56
57
 
57
- &__fill {
58
+ path {
58
59
  transition: var(--gd-transition-all);
59
- fill: var(--gd-icon-fill-color);
60
60
  }
61
61
  }
package/styles/css/main.css CHANGED
@@ -196,9 +196,7 @@
196
196
  --gd-icon-fill-color: var(--gd-palette-complementary-9);
197
197
  }
198
198
 
199
- .gd-ui-kit-button,
200
- .gd-ui-kit-chip__trigger,
201
- .gd-ui-kit-chip__delete {
199
+ .gd-ui-kit-button {
202
200
  font-family: var(--gd-font-family);
203
201
  gap: var(--gd-spacing-5px);
204
202
  border-radius: var(--gd-button-borderRadius);
@@ -216,133 +214,40 @@
216
214
  * Variant
217
215
  */
218
216
  }
219
- .gd-ui-kit-button:disabled,
220
- .gd-ui-kit-chip__trigger:disabled,
221
- .gd-ui-kit-chip__delete:disabled {
217
+ .gd-ui-kit-button:disabled {
222
218
  cursor: default;
223
219
  }
224
- .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
225
- .gd-ui-kit-chip__trigger,
226
- .gd-ui-kit-chip__delete):active .gd-ui-kit-button, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
227
- .gd-ui-kit-chip__trigger,
228
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
229
- .gd-ui-kit-chip__trigger,
230
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag,
231
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
232
- .gd-ui-kit-chip__trigger,
233
- .gd-ui-kit-chip__delete):active .gd-ui-kit-button,
234
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
235
- .gd-ui-kit-chip__trigger,
236
- .gd-ui-kit-chip__delete):active .gd-ui-kit-button,
237
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
238
- .gd-ui-kit-chip__trigger,
239
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label,
240
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
241
- .gd-ui-kit-chip__trigger,
242
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label,
243
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
244
- .gd-ui-kit-chip__trigger,
245
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag,
246
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
247
- .gd-ui-kit-chip__trigger,
248
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag {
249
- padding-top: 1px;
250
- }
251
- .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
252
- .gd-ui-kit-chip__trigger,
253
- .gd-ui-kit-chip__delete):active .gd-ui-kit-button, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
254
- .gd-ui-kit-chip__trigger,
255
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
256
- .gd-ui-kit-chip__trigger,
257
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
258
- .gd-ui-kit-chip__trigger,
259
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
260
- .gd-ui-kit-chip__trigger,
261
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete,
262
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
263
- .gd-ui-kit-chip__trigger,
264
- .gd-ui-kit-chip__delete):active .gd-ui-kit-button,
265
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
266
- .gd-ui-kit-chip__trigger,
267
- .gd-ui-kit-chip__delete):active .gd-ui-kit-button,
268
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
269
- .gd-ui-kit-chip__trigger,
270
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before,
271
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
272
- .gd-ui-kit-chip__trigger,
273
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before,
274
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
275
- .gd-ui-kit-chip__trigger,
276
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron,
277
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
278
- .gd-ui-kit-chip__trigger,
279
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron,
280
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
281
- .gd-ui-kit-chip__trigger,
282
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock,
283
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
284
- .gd-ui-kit-chip__trigger,
285
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock,
286
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
287
- .gd-ui-kit-chip__trigger,
288
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete,
289
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
290
- .gd-ui-kit-chip__trigger,
291
- .gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete {
292
- padding-top: 1px;
293
- }
294
- .gd-ui-kit-button__text,
295
- .gd-ui-kit-chip__label,
296
- .gd-ui-kit-chip__tag {
297
- transition: var(--gd-transition-all);
298
- }
299
- .gd-ui-kit-button__icon,
300
- .gd-ui-kit-chip__icon-before,
301
- .gd-ui-kit-chip__icon-chevron,
302
- .gd-ui-kit-chip__icon-lock,
303
- .gd-ui-kit-chip__icon-delete {
304
- display: flex;
305
- align-items: center;
306
- justify-content: center;
307
- transition: var(--gd-transition-all);
308
- }
309
- .gd-ui-kit-button--isLoading .gd-ui-kit-button, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-before, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-chevron, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-lock, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-delete {
310
- animation: rotate 1s infinite steps(30);
311
- }
312
220
  .gd-ui-kit-button--size-small {
313
221
  height: var(--gd-button-S);
314
- padding: var(--gd-spacing-6px) var(--gd-spacing-10px);
222
+ padding: 0 var(--gd-spacing-10px);
315
223
  font-size: 12px;
316
- line-height: 14px;
317
224
  }
318
- .gd-ui-kit-button--size-small.gd-ui-kit-button-left {
225
+ .gd-ui-kit-button--size-small.gd-ui-kit-button--hasIconBefore {
319
226
  padding-left: var(--gd-spacing-7px);
320
227
  }
321
- .gd-ui-kit-button--size-small.gd-ui-kit-button-right {
228
+ .gd-ui-kit-button--size-small.gd-ui-kit-button--hasIconAfter {
322
229
  padding-right: var(--gd-spacing-7px);
323
230
  }
324
231
  .gd-ui-kit-button--size-medium {
325
232
  height: var(--gd-button-M);
326
- padding: var(--gd-spacing-6px) var(--gd-spacing-15px);
233
+ padding: 0 var(--gd-spacing-15px);
327
234
  font-size: 14px;
328
- line-height: 16px;
329
235
  }
330
- .gd-ui-kit-button--size-medium.gd-ui-kit-button-left {
236
+ .gd-ui-kit-button--size-medium.gd-ui-kit-button--hasIconBefore {
331
237
  padding-left: var(--gd-spacing-10px);
332
238
  }
333
- .gd-ui-kit-button--size-medium.gd-ui-kit-button-right {
239
+ .gd-ui-kit-button--size-medium.gd-ui-kit-button--hasIconAfter {
334
240
  padding-right: var(--gd-spacing-10px);
335
241
  }
336
242
  .gd-ui-kit-button--size-large {
337
243
  height: var(--gd-button-L);
338
- padding: var(--gd-spacing-6px) var(--gd-spacing-20px);
244
+ padding: 0 var(--gd-spacing-20px);
339
245
  font-size: 16px;
340
- line-height: 18px;
341
246
  }
342
- .gd-ui-kit-button--size-large.gd-ui-kit-button-left {
247
+ .gd-ui-kit-button--size-large.gd-ui-kit-button--hasIconBefore {
343
248
  padding-left: var(--gd-spacing-15px);
344
249
  }
345
- .gd-ui-kit-button--size-large.gd-ui-kit-button-right {
250
+ .gd-ui-kit-button--size-large.gd-ui-kit-button--hasIconAfter {
346
251
  padding-right: var(--gd-spacing-15px);
347
252
  }
348
253
  .gd-ui-kit-button--variant-primary {
@@ -401,95 +306,39 @@
401
306
  background: var(--gd-palette-complementary-0);
402
307
  box-shadow: none;
403
308
  }
404
- .gd-ui-kit-button--variant-tertiary,
405
- .gd-ui-kit-chip__trigger,
406
- .gd-ui-kit-chip__delete {
309
+ .gd-ui-kit-button--variant-tertiary {
407
310
  --gd-icon-fill-color: var(--gd-palette-complementary-5);
408
311
  color: var(--gd-palette-complementary-7);
312
+ padding: 0;
409
313
  text-decoration: underline;
410
314
  background-color: transparent;
411
315
  border-color: transparent;
412
316
  }
413
- .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
414
- .gd-ui-kit-chip__trigger:disabled,
415
- .gd-ui-kit-chip__delete:disabled):focus,
416
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
417
- .gd-ui-kit-chip__trigger:disabled,
418
- .gd-ui-kit-chip__delete:disabled):focus,
419
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
420
- .gd-ui-kit-chip__trigger:disabled,
421
- .gd-ui-kit-chip__delete:disabled):focus {
422
- --gd-icon-fill-color: var(--gd-palette-primary-base);
423
- color: var(--gd-palette-complementary-8);
424
- }
425
- .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
426
- .gd-ui-kit-chip__trigger:disabled,
427
- .gd-ui-kit-chip__delete:disabled):hover,
428
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
429
- .gd-ui-kit-chip__trigger:disabled,
430
- .gd-ui-kit-chip__delete:disabled):hover,
431
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
432
- .gd-ui-kit-chip__trigger:disabled,
433
- .gd-ui-kit-chip__delete:disabled):hover {
434
- --gd-icon-fill-color: var(--gd-palette-primary-base);
435
- color: var(--gd-palette-complementary-8);
436
- }
437
- .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
438
- .gd-ui-kit-chip__trigger:disabled,
439
- .gd-ui-kit-chip__delete:disabled):active,
440
- .gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
441
- .gd-ui-kit-chip__trigger:disabled,
442
- .gd-ui-kit-chip__delete:disabled):active,
443
- .gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
444
- .gd-ui-kit-chip__trigger:disabled,
445
- .gd-ui-kit-chip__delete:disabled):active {
317
+ .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):hover, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):focus, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):active {
446
318
  --gd-icon-fill-color: var(--gd-palette-primary-base);
447
319
  color: var(--gd-palette-complementary-8);
448
320
  }
449
- .gd-ui-kit-button--variant-tertiary:disabled,
450
- .gd-ui-kit-chip__trigger:disabled,
451
- .gd-ui-kit-chip__delete:disabled {
321
+ .gd-ui-kit-button--variant-tertiary:disabled {
452
322
  color: var(--gd-palette-complementary-5);
453
323
  text-decoration: none;
454
324
  }
455
- .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-small, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-medium, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-large,
456
- .gd-ui-kit-button-small.gd-ui-kit-chip__trigger,
457
- .gd-ui-kit-button-small.gd-ui-kit-chip__delete,
458
- .gd-ui-kit-button-medium.gd-ui-kit-chip__trigger,
459
- .gd-ui-kit-button-medium.gd-ui-kit-chip__delete,
460
- .gd-ui-kit-button-large.gd-ui-kit-chip__trigger,
461
- .gd-ui-kit-button-large.gd-ui-kit-chip__delete {
462
- padding: 0;
463
- height: auto;
464
- }
465
325
  .gd-ui-kit-button--variant-popout {
466
326
  --gd-icon-fill-color: var(--gd-palette-primary-base);
467
327
  color: var(--gd-palette-primary-base);
328
+ padding: 0;
468
329
  background-color: transparent;
469
330
  border-color: transparent;
470
331
  }
471
- .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):focus {
472
- text-decoration: underline;
473
- }
474
- .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):hover {
475
- color: var(--gd-palette-complementary-8);
476
- text-decoration: underline;
477
- }
478
- .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):active {
479
- color: var(--gd-palette-primary-base);
332
+ .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):hover, .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):focus, .gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):active {
480
333
  text-decoration: underline;
481
334
  }
482
335
  .gd-ui-kit-button--variant-popout:disabled {
483
336
  color: var(--gd-palette-complementary-5);
484
337
  }
485
- .gd-ui-kit-button--variant-popout.gd-ui-kit-button-small, .gd-ui-kit-button--variant-popout.gd-ui-kit-button-medium, .gd-ui-kit-button--variant-popout.gd-ui-kit-button-large {
486
- padding: 0;
487
- height: auto;
488
- }
489
338
  .gd-ui-kit-button--variant-danger {
490
339
  --gd-icon-fill-color: var(--gd-palette-complementary-0);
491
- background: var(--gd-palette-error-base);
492
340
  color: var(--gd-palette-complementary-0);
341
+ background: var(--gd-palette-error-base);
493
342
  border-color: var(--gd-palette-complementary-9-t90);
494
343
  font-weight: 700;
495
344
  }
@@ -513,13 +362,8 @@
513
362
  border-color: transparent;
514
363
  }
515
364
 
516
- @keyframes rotate {
517
- from {
518
- transform: rotate(0deg);
519
- }
520
- to {
521
- transform: rotate(360deg);
522
- }
365
+ .gd-ui-kit-icon {
366
+ fill: var(--gd-icon-fill-color);
523
367
  }
524
368
  .gd-ui-kit-icon--color-primary {
525
369
  --gd-icon-fill-color: var(--gd-palette-primary-base);
@@ -560,9 +404,8 @@
560
404
  .gd-ui-kit-icon--color-complementary-9 {
561
405
  --gd-icon-fill-color: var(--gd-palette-complementary-9);
562
406
  }
563
- .gd-ui-kit-icon__fill {
407
+ .gd-ui-kit-icon path {
564
408
  transition: var(--gd-transition-all);
565
- fill: var(--gd-icon-fill-color);
566
409
  }
567
410
 
568
411
  @keyframes react-loading-skeleton {
@@ -739,10 +582,21 @@
739
582
  .gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__trigger--isActive {
740
583
  background-color: var(--gd-palette-error-lightest);
741
584
  }
742
- .gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__delete svg {
743
- --gd-icon-fill-color: var(--gd-palette-error-base);
585
+ .gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__delete {
586
+ color: var(--gd-palette-error-base);
587
+ }
588
+ .gd-ui-kit-chip .gd-ui-kit-chip__trigger--isDeletable {
589
+ border-right: 1px solid transparent;
744
590
  }
745
591
  .gd-ui-kit-chip__trigger, .gd-ui-kit-chip__delete {
592
+ color: var(--gd-palette-complementary-7);
593
+ background-color: transparent;
594
+ border-radius: var(--gd-button-borderRadius);
595
+ transition: var(--gd-transition-all);
596
+ display: inline-flex;
597
+ justify-content: center;
598
+ align-items: center;
599
+ cursor: pointer;
746
600
  height: 100%;
747
601
  min-width: 0;
748
602
  flex-shrink: 1;
@@ -751,6 +605,10 @@
751
605
  padding: 0 10px;
752
606
  border: none;
753
607
  }
608
+ .gd-ui-kit-chip__trigger:disabled, .gd-ui-kit-chip__delete:disabled {
609
+ cursor: default;
610
+ color: var(--gd-palette-complementary-5);
611
+ }
754
612
  .gd-ui-kit-chip__trigger {
755
613
  border-radius: 20px 0 0 20px;
756
614
  border-right: 1px solid transparent;
@@ -770,6 +628,12 @@
770
628
  color: var(--gd-palette-complementary-7);
771
629
  border: none;
772
630
  }
631
+ .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):hover, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):focus, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):active {
632
+ color: var(--gd-palette-complementary-8);
633
+ }
634
+ .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):hover svg, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):focus svg, .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger:disabled):active svg {
635
+ color: var(--gd-palette-primary-base);
636
+ }
773
637
  .gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger--isDeletable) {
774
638
  border-radius: 20px;
775
639
  border: none;
@@ -779,18 +643,33 @@
779
643
  border-radius: 0 20px 20px 0;
780
644
  padding: 0 7px 0 5px;
781
645
  }
646
+ .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):hover, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):focus, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):active {
647
+ color: var(--gd-palette-complementary-8);
648
+ }
649
+ .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):hover svg, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):focus svg, .gd-ui-kit-chip__delete:not(.gd-ui-kit-chip__delete:disabled):active svg {
650
+ color: var(--gd-palette-error-base);
651
+ }
782
652
  .gd-ui-kit-chip__label {
653
+ transition: var(--gd-transition-all);
783
654
  white-space: nowrap;
784
655
  overflow: hidden;
785
656
  text-overflow: ellipsis;
786
657
  }
787
658
  .gd-ui-kit-chip__tag {
659
+ transition: var(--gd-transition-all);
788
660
  margin-left: 2px;
789
661
  }
790
662
  .gd-ui-kit-chip__icon-before {
663
+ display: flex;
664
+ align-items: center;
665
+ justify-content: center;
666
+ transition: var(--gd-transition-all);
791
667
  margin-right: 5px;
792
668
  }
793
669
  .gd-ui-kit-chip__icon-chevron {
670
+ align-items: center;
671
+ justify-content: center;
672
+ transition: var(--gd-transition-all);
794
673
  display: none;
795
674
  margin-left: 5px;
796
675
  }
@@ -801,8 +680,19 @@
801
680
  display: flex;
802
681
  }
803
682
  .gd-ui-kit-chip__icon-lock {
683
+ display: flex;
684
+ align-items: center;
685
+ justify-content: center;
686
+ transition: var(--gd-transition-all);
804
687
  margin-left: 5px;
805
688
  }
689
+ .gd-ui-kit-chip__icon-delete {
690
+ display: flex;
691
+ align-items: center;
692
+ justify-content: center;
693
+ transition: var(--gd-transition-all);
694
+ }
695
+
806
696
  .sr-only {
807
697
  position: absolute;
808
698
  width: 1px;