colibri-ui 0.8.74 → 0.8.76

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 (23) hide show
  1. package/Chip/Chip.module.css +155 -12
  2. package/Chip/index.js +4 -2
  3. package/Chip/index.props.d.ts +4 -3
  4. package/Theme/index.d.ts +170 -0
  5. package/Theme/themes/buenos_aires.d.ts +85 -0
  6. package/Theme/themes/buenos_aires.js +85 -0
  7. package/Theme/themes/jaipur.d.ts +85 -0
  8. package/Theme/themes/jaipur.js +85 -0
  9. package/esm/Chip/Chip.module.css +155 -12
  10. package/esm/Chip/index.js +4 -2
  11. package/esm/Chip/index.props.d.ts +4 -3
  12. package/esm/Theme/index.d.ts +170 -0
  13. package/esm/Theme/themes/buenos_aires.d.ts +85 -0
  14. package/esm/Theme/themes/buenos_aires.js +85 -0
  15. package/esm/Theme/themes/jaipur.d.ts +85 -0
  16. package/esm/Theme/themes/jaipur.js +85 -0
  17. package/esm/index.d.ts +1 -1
  18. package/esm/theme_ba_variables.css +85 -0
  19. package/esm/theme_jaipur_variables.css +85 -0
  20. package/index.d.ts +1 -1
  21. package/package.json +1 -1
  22. package/theme_ba_variables.css +85 -0
  23. package/theme_jaipur_variables.css +85 -0
package/Chip/Chip.module.css CHANGED
@@ -4,44 +4,158 @@
4
4
  }
5
5
 
6
6
  .inner {
7
+ --chip-bg: var(--component-chip-primary-bg);
8
+ --chip-bg-active: var(--component-chip-primary-bg-active);
9
+ --chip-bg-hover: var(--component-chip-primary-bg-hover);
10
+ --chip-bg-pressed: var(--component-chip-primary-bg-pressed);
11
+ --chip-icon: var(--component-chip-primary-icon);
12
+ --chip-icon-active: var(--component-chip-primary-icon-active);
13
+ --chip-icon-active-hover: var(--component-chip-primary-icon-active-hover);
14
+ --chip-icon-hover: var(--component-chip-primary-icon-hover);
15
+ --chip-text: var(--component-chip-primary-text);
16
+ --chip-text-active: var(--component-chip-primary-text-active);
17
+ --chip-text-hover: var(--component-chip-primary-text-hover);
18
+ --chip-text-pressed: var(--component-chip-primary-text-pressed);
7
19
  box-sizing: border-box;
8
- color: var(--component-chip-text);
20
+ color: var(--chip-text);
9
21
  display: flex;
10
22
  font: inherit;
11
23
  min-width: 0;
12
24
  place-items: stretch flex-start;
13
25
  transition-duration: 0.3s;
14
- transition-property: background, box-shadow, transform;
26
+ transition-property: background, box-shadow, color, transform;
15
27
  transition-timing-function: ease;
16
28
  }
17
29
  .inner_active {
18
- background: var(--component-chip-bg-active);
19
- color: var(--component-chip-text-active, var(--component-chip-text));
30
+ background: var(--chip-bg-active);
31
+ color: var(--chip-text-active);
20
32
  }
21
33
  .inner_inactive {
22
- background: var(--component-chip-bg);
34
+ background: var(--chip-bg);
23
35
  box-shadow: var(--shadow-raised);
24
36
  }
25
37
  .inner_inactive:hover {
26
- background: var(--component-chip-bg-hover);
38
+ background: var(--chip-bg-hover);
27
39
  box-shadow: var(--shadow-raised);
40
+ color: var(--chip-text-hover);
28
41
  transform: translateY(calc(var(--focus-ring-width) * -1));
29
42
  }
30
43
  .inner_inactive:active {
31
- background: var(--component-chip-bg-pressed);
44
+ background: var(--chip-bg-pressed);
32
45
  box-shadow: var(--shadow-pressed);
46
+ color: var(--chip-text-pressed);
33
47
  outline: 0;
34
48
  transition-duration: 0.15s;
35
49
  }
36
50
  @media (hover: none) {
37
51
  .inner_inactive:hover {
38
52
  box-shadow: var(--shadow-raised);
53
+ color: var(--chip-text);
39
54
  transform: translateY(0);
40
55
  }
41
56
  .inner_inactive:active {
42
57
  box-shadow: var(--shadow-pressed);
58
+ color: var(--chip-text-pressed);
43
59
  }
44
60
  }
61
+ .inner_variant_primary {
62
+ --chip-bg: var(--component-chip-primary-bg);
63
+ --chip-bg-active: var(--component-chip-primary-bg-active);
64
+ --chip-bg-hover: var(--component-chip-primary-bg-hover);
65
+ --chip-bg-pressed: var(--component-chip-primary-bg-pressed);
66
+ --chip-icon: var(--component-chip-primary-icon);
67
+ --chip-icon-active: var(--component-chip-primary-icon-active);
68
+ --chip-icon-active-hover: var(--component-chip-primary-icon-active-hover);
69
+ --chip-icon-hover: var(--component-chip-primary-icon-hover);
70
+ --chip-text: var(--component-chip-primary-text);
71
+ --chip-text-active: var(--component-chip-primary-text-active);
72
+ --chip-text-hover: var(--component-chip-primary-text-hover);
73
+ --chip-text-pressed: var(--component-chip-primary-text-pressed);
74
+ }
75
+ .inner_variant_secondary {
76
+ --chip-bg: var(--component-chip-secondary-bg);
77
+ --chip-bg-active: var(--component-chip-secondary-bg-active);
78
+ --chip-bg-hover: var(--component-chip-secondary-bg-hover);
79
+ --chip-bg-pressed: var(--component-chip-secondary-bg-pressed);
80
+ --chip-icon: var(--component-chip-secondary-icon);
81
+ --chip-icon-active: var(--component-chip-secondary-icon-active);
82
+ --chip-icon-active-hover: var(--component-chip-secondary-icon-active-hover);
83
+ --chip-icon-hover: var(--component-chip-secondary-icon-hover);
84
+ --chip-text: var(--component-chip-secondary-text);
85
+ --chip-text-active: var(--component-chip-secondary-text-active);
86
+ --chip-text-hover: var(--component-chip-secondary-text-hover);
87
+ --chip-text-pressed: var(--component-chip-secondary-text-pressed);
88
+ }
89
+ .inner_variant_outline {
90
+ --chip-bg: var(--component-chip-outline-bg);
91
+ --chip-bg-active: var(--component-chip-outline-bg-active);
92
+ --chip-bg-hover: var(--component-chip-outline-bg-hover);
93
+ --chip-bg-pressed: var(--component-chip-outline-bg-pressed);
94
+ --chip-icon: var(--component-chip-outline-icon);
95
+ --chip-icon-active: var(--component-chip-outline-icon-active);
96
+ --chip-icon-active-hover: var(--component-chip-outline-icon-active-hover);
97
+ --chip-icon-hover: var(--component-chip-outline-icon-hover);
98
+ --chip-text: var(--component-chip-outline-text);
99
+ --chip-text-active: var(--component-chip-outline-text-active);
100
+ --chip-text-hover: var(--component-chip-outline-text-hover);
101
+ --chip-text-pressed: var(--component-chip-outline-text-pressed);
102
+ }
103
+ .inner_variant_pseudo {
104
+ --chip-bg: var(--component-chip-pseudo-bg);
105
+ --chip-bg-active: var(--component-chip-pseudo-bg-active);
106
+ --chip-bg-hover: var(--component-chip-pseudo-bg-hover);
107
+ --chip-bg-pressed: var(--component-chip-pseudo-bg-pressed);
108
+ --chip-icon: var(--component-chip-pseudo-icon);
109
+ --chip-icon-active: var(--component-chip-pseudo-icon-active);
110
+ --chip-icon-active-hover: var(--component-chip-pseudo-icon-active-hover);
111
+ --chip-icon-hover: var(--component-chip-pseudo-icon-hover);
112
+ --chip-text: var(--component-chip-pseudo-text);
113
+ --chip-text-active: var(--component-chip-pseudo-text-active);
114
+ --chip-text-hover: var(--component-chip-pseudo-text-hover);
115
+ --chip-text-pressed: var(--component-chip-pseudo-text-pressed);
116
+ }
117
+ .inner_variant_alert {
118
+ --chip-bg: var(--component-chip-alert-bg);
119
+ --chip-bg-active: var(--component-chip-alert-bg-active);
120
+ --chip-bg-hover: var(--component-chip-alert-bg-hover);
121
+ --chip-bg-pressed: var(--component-chip-alert-bg-pressed);
122
+ --chip-icon: var(--component-chip-alert-icon);
123
+ --chip-icon-active: var(--component-chip-alert-icon-active);
124
+ --chip-icon-active-hover: var(--component-chip-alert-icon-active-hover);
125
+ --chip-icon-hover: var(--component-chip-alert-icon-hover);
126
+ --chip-text: var(--component-chip-alert-text);
127
+ --chip-text-active: var(--component-chip-alert-text-active);
128
+ --chip-text-hover: var(--component-chip-alert-text-hover);
129
+ --chip-text-pressed: var(--component-chip-alert-text-pressed);
130
+ }
131
+ .inner_variant_success {
132
+ --chip-bg: var(--component-chip-success-bg);
133
+ --chip-bg-active: var(--component-chip-success-bg-active);
134
+ --chip-bg-hover: var(--component-chip-success-bg-hover);
135
+ --chip-bg-pressed: var(--component-chip-success-bg-pressed);
136
+ --chip-icon: var(--component-chip-success-icon);
137
+ --chip-icon-active: var(--component-chip-success-icon-active);
138
+ --chip-icon-active-hover: var(--component-chip-success-icon-active-hover);
139
+ --chip-icon-hover: var(--component-chip-success-icon-hover);
140
+ --chip-text: var(--component-chip-success-text);
141
+ --chip-text-active: var(--component-chip-success-text-active);
142
+ --chip-text-hover: var(--component-chip-success-text-hover);
143
+ --chip-text-pressed: var(--component-chip-success-text-pressed);
144
+ }
145
+ .inner_variant_clear {
146
+ --chip-bg: var(--component-chip-clear-bg);
147
+ --chip-bg-active: var(--component-chip-clear-bg-active);
148
+ --chip-bg-hover: var(--component-chip-clear-bg-hover);
149
+ --chip-bg-pressed: var(--component-chip-clear-bg-pressed);
150
+ --chip-icon: var(--component-chip-clear-icon);
151
+ --chip-icon-active: var(--component-chip-clear-icon-active);
152
+ --chip-icon-active-hover: var(--component-chip-clear-icon-active-hover);
153
+ --chip-icon-hover: var(--component-chip-clear-icon-hover);
154
+ --chip-text: var(--component-chip-clear-text);
155
+ --chip-text-active: var(--component-chip-clear-text-active);
156
+ --chip-text-hover: var(--component-chip-clear-text-hover);
157
+ --chip-text-pressed: var(--component-chip-clear-text-pressed);
158
+ }
45
159
  .inner[data-size=s] {
46
160
  border-radius: var(--component-chip-radius);
47
161
  font-size: var(--component-chip-font-size-s);
@@ -62,7 +176,8 @@
62
176
  align-items: center;
63
177
  display: flex;
64
178
  justify-content: flex-start;
65
- max-width: var(--component-tooltip-max-width);
179
+ max-width: var(--component-chip-content-max-width);
180
+ min-width: 0;
66
181
  padding: 0 var(--space-4);
67
182
  user-select: none;
68
183
  }
@@ -71,23 +186,51 @@
71
186
  display: block;
72
187
  overflow: hidden;
73
188
  text-overflow: ellipsis;
189
+ white-space: nowrap;
74
190
  }
75
191
 
76
192
  .icon-right {
77
193
  align-items: center;
78
- color: var(--component-chip-icon);
194
+ border-radius: var(--radius-full);
195
+ color: var(--chip-icon);
196
+ cursor: pointer;
79
197
  display: flex;
80
198
  justify-content: center;
81
199
  margin-left: calc(var(--space-3) * -1);
200
+ opacity: 1;
82
201
  padding-right: var(--space-3);
202
+ transform: scale(1);
203
+ transform-origin: center;
204
+ transition: color 0.15s linear, opacity 0.15s linear, transform 0.15s linear;
83
205
  }
84
206
  .icon-right:hover {
85
- color: var(--component-chip-icon-hover);
207
+ color: var(--chip-icon-hover);
208
+ opacity: 0.72;
209
+ }
210
+ .icon-right:active {
211
+ color: var(--chip-icon-active-hover);
212
+ opacity: 0.56;
213
+ transform: scale(0.9);
214
+ }
215
+ @media (hover: none) {
216
+ .icon-right:hover {
217
+ color: var(--chip-icon);
218
+ opacity: 1;
219
+ transform: scale(1);
220
+ }
221
+ .icon-right:active {
222
+ color: var(--chip-icon-active-hover);
223
+ opacity: 0.56;
224
+ transform: scale(0.9);
225
+ }
86
226
  }
87
227
 
88
228
  .inner_active .icon-right {
89
- color: var(--component-chip-icon-active, currentcolor);
229
+ color: var(--chip-icon-active);
90
230
  }
91
231
  .inner_active .icon-right:hover {
92
- color: var(--component-chip-icon-active-hover, currentcolor);
232
+ color: var(--chip-icon-active-hover);
233
+ }
234
+ .inner_active .icon-right:active {
235
+ color: var(--chip-icon-active-hover);
93
236
  }
package/Chip/index.js CHANGED
@@ -23,12 +23,14 @@ var Chip = function Chip(_a) {
23
23
  size = _a$size === void 0 ? "m" : _a$size,
24
24
  _a$testID = _a.testID,
25
25
  testID = _a$testID === void 0 ? "chip" : _a$testID,
26
- props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID"]);
26
+ _a$variant = _a.variant,
27
+ variant = _a$variant === void 0 ? "primary" : _a$variant,
28
+ props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID", "variant"]);
27
29
  return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
28
30
  className: styles__default.default.chip,
29
31
  "data-testid": testID
30
32
  }, props), /*#__PURE__*/React__default.default.createElement("span", {
31
- className: clsx__default.default(styles__default.default.inner, _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["inner_active"], iconEnd || isActive), styles__default.default["inner_inactive"], !iconEnd && !isActive)),
33
+ className: clsx__default.default(styles__default.default.inner, styles__default.default["inner_variant_".concat(variant)], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["inner_active"], iconEnd || isActive), styles__default.default["inner_inactive"], !iconEnd && !isActive)),
32
34
  "data-size": size
33
35
  }, /*#__PURE__*/React__default.default.createElement("span", {
34
36
  className: styles__default.default.content,
package/Chip/index.props.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- type Size = "s" | "m" | "l";
1
+ export type ChipSize = "s" | "m" | "l";
2
+ export type ChipVariant = "primary" | "secondary" | "outline" | "pseudo" | "alert" | "success" | "clear";
2
3
  export type ChipProps = {
3
- size?: Size;
4
+ size?: ChipSize;
5
+ variant?: ChipVariant;
4
6
  testID?: string;
5
7
  isActive?: boolean;
6
8
  iconEnd?: React.ReactNode;
7
9
  onClick?: () => void;
8
10
  onClickIcon?: () => void;
9
11
  };
10
- export {};
package/Theme/index.d.ts CHANGED
@@ -384,6 +384,91 @@ export declare const THEMES: {
384
384
  "component-chip-icon-hover": string;
385
385
  "component-chip-icon-active": string;
386
386
  "component-chip-icon-active-hover": string;
387
+ "component-chip-content-max-width": string;
388
+ "component-chip-primary-bg": string;
389
+ "component-chip-primary-bg-hover": string;
390
+ "component-chip-primary-bg-pressed": string;
391
+ "component-chip-primary-bg-active": string;
392
+ "component-chip-primary-text": string;
393
+ "component-chip-primary-text-hover": string;
394
+ "component-chip-primary-text-pressed": string;
395
+ "component-chip-primary-text-active": string;
396
+ "component-chip-primary-icon": string;
397
+ "component-chip-primary-icon-hover": string;
398
+ "component-chip-primary-icon-active": string;
399
+ "component-chip-primary-icon-active-hover": string;
400
+ "component-chip-secondary-bg": string;
401
+ "component-chip-secondary-bg-hover": string;
402
+ "component-chip-secondary-bg-pressed": string;
403
+ "component-chip-secondary-bg-active": string;
404
+ "component-chip-secondary-text": string;
405
+ "component-chip-secondary-text-hover": string;
406
+ "component-chip-secondary-text-pressed": string;
407
+ "component-chip-secondary-text-active": string;
408
+ "component-chip-secondary-icon": string;
409
+ "component-chip-secondary-icon-hover": string;
410
+ "component-chip-secondary-icon-active": string;
411
+ "component-chip-secondary-icon-active-hover": string;
412
+ "component-chip-outline-bg": string;
413
+ "component-chip-outline-bg-hover": string;
414
+ "component-chip-outline-bg-pressed": string;
415
+ "component-chip-outline-bg-active": string;
416
+ "component-chip-outline-text": string;
417
+ "component-chip-outline-text-hover": string;
418
+ "component-chip-outline-text-pressed": string;
419
+ "component-chip-outline-text-active": string;
420
+ "component-chip-outline-icon": string;
421
+ "component-chip-outline-icon-hover": string;
422
+ "component-chip-outline-icon-active": string;
423
+ "component-chip-outline-icon-active-hover": string;
424
+ "component-chip-pseudo-bg": string;
425
+ "component-chip-pseudo-bg-hover": string;
426
+ "component-chip-pseudo-bg-pressed": string;
427
+ "component-chip-pseudo-bg-active": string;
428
+ "component-chip-pseudo-text": string;
429
+ "component-chip-pseudo-text-hover": string;
430
+ "component-chip-pseudo-text-pressed": string;
431
+ "component-chip-pseudo-text-active": string;
432
+ "component-chip-pseudo-icon": string;
433
+ "component-chip-pseudo-icon-hover": string;
434
+ "component-chip-pseudo-icon-active": string;
435
+ "component-chip-pseudo-icon-active-hover": string;
436
+ "component-chip-clear-bg": string;
437
+ "component-chip-clear-bg-hover": string;
438
+ "component-chip-clear-bg-pressed": string;
439
+ "component-chip-clear-bg-active": string;
440
+ "component-chip-clear-text": string;
441
+ "component-chip-clear-text-hover": string;
442
+ "component-chip-clear-text-pressed": string;
443
+ "component-chip-clear-text-active": string;
444
+ "component-chip-clear-icon": string;
445
+ "component-chip-clear-icon-hover": string;
446
+ "component-chip-clear-icon-active": string;
447
+ "component-chip-clear-icon-active-hover": string;
448
+ "component-chip-alert-bg": string;
449
+ "component-chip-alert-bg-hover": string;
450
+ "component-chip-alert-bg-pressed": string;
451
+ "component-chip-alert-bg-active": string;
452
+ "component-chip-alert-text": string;
453
+ "component-chip-alert-text-hover": string;
454
+ "component-chip-alert-text-pressed": string;
455
+ "component-chip-alert-text-active": string;
456
+ "component-chip-alert-icon": string;
457
+ "component-chip-alert-icon-hover": string;
458
+ "component-chip-alert-icon-active": string;
459
+ "component-chip-alert-icon-active-hover": string;
460
+ "component-chip-success-bg": string;
461
+ "component-chip-success-bg-hover": string;
462
+ "component-chip-success-bg-pressed": string;
463
+ "component-chip-success-bg-active": string;
464
+ "component-chip-success-text": string;
465
+ "component-chip-success-text-hover": string;
466
+ "component-chip-success-text-pressed": string;
467
+ "component-chip-success-text-active": string;
468
+ "component-chip-success-icon": string;
469
+ "component-chip-success-icon-hover": string;
470
+ "component-chip-success-icon-active": string;
471
+ "component-chip-success-icon-active-hover": string;
387
472
  "component-chip-radius": string;
388
473
  "component-chip-font-size-s": string;
389
474
  "component-chip-font-size-m": string;
@@ -1013,6 +1098,91 @@ export declare const THEMES: {
1013
1098
  "component-chip-icon-hover": string;
1014
1099
  "component-chip-icon-active": string;
1015
1100
  "component-chip-icon-active-hover": string;
1101
+ "component-chip-content-max-width": string;
1102
+ "component-chip-primary-bg": string;
1103
+ "component-chip-primary-bg-hover": string;
1104
+ "component-chip-primary-bg-pressed": string;
1105
+ "component-chip-primary-bg-active": string;
1106
+ "component-chip-primary-text": string;
1107
+ "component-chip-primary-text-hover": string;
1108
+ "component-chip-primary-text-pressed": string;
1109
+ "component-chip-primary-text-active": string;
1110
+ "component-chip-primary-icon": string;
1111
+ "component-chip-primary-icon-hover": string;
1112
+ "component-chip-primary-icon-active": string;
1113
+ "component-chip-primary-icon-active-hover": string;
1114
+ "component-chip-secondary-bg": string;
1115
+ "component-chip-secondary-bg-hover": string;
1116
+ "component-chip-secondary-bg-pressed": string;
1117
+ "component-chip-secondary-bg-active": string;
1118
+ "component-chip-secondary-text": string;
1119
+ "component-chip-secondary-text-hover": string;
1120
+ "component-chip-secondary-text-pressed": string;
1121
+ "component-chip-secondary-text-active": string;
1122
+ "component-chip-secondary-icon": string;
1123
+ "component-chip-secondary-icon-hover": string;
1124
+ "component-chip-secondary-icon-active": string;
1125
+ "component-chip-secondary-icon-active-hover": string;
1126
+ "component-chip-outline-bg": string;
1127
+ "component-chip-outline-bg-hover": string;
1128
+ "component-chip-outline-bg-pressed": string;
1129
+ "component-chip-outline-bg-active": string;
1130
+ "component-chip-outline-text": string;
1131
+ "component-chip-outline-text-hover": string;
1132
+ "component-chip-outline-text-pressed": string;
1133
+ "component-chip-outline-text-active": string;
1134
+ "component-chip-outline-icon": string;
1135
+ "component-chip-outline-icon-hover": string;
1136
+ "component-chip-outline-icon-active": string;
1137
+ "component-chip-outline-icon-active-hover": string;
1138
+ "component-chip-pseudo-bg": string;
1139
+ "component-chip-pseudo-bg-hover": string;
1140
+ "component-chip-pseudo-bg-pressed": string;
1141
+ "component-chip-pseudo-bg-active": string;
1142
+ "component-chip-pseudo-text": string;
1143
+ "component-chip-pseudo-text-hover": string;
1144
+ "component-chip-pseudo-text-pressed": string;
1145
+ "component-chip-pseudo-text-active": string;
1146
+ "component-chip-pseudo-icon": string;
1147
+ "component-chip-pseudo-icon-hover": string;
1148
+ "component-chip-pseudo-icon-active": string;
1149
+ "component-chip-pseudo-icon-active-hover": string;
1150
+ "component-chip-clear-bg": string;
1151
+ "component-chip-clear-bg-hover": string;
1152
+ "component-chip-clear-bg-pressed": string;
1153
+ "component-chip-clear-bg-active": string;
1154
+ "component-chip-clear-text": string;
1155
+ "component-chip-clear-text-hover": string;
1156
+ "component-chip-clear-text-pressed": string;
1157
+ "component-chip-clear-text-active": string;
1158
+ "component-chip-clear-icon": string;
1159
+ "component-chip-clear-icon-hover": string;
1160
+ "component-chip-clear-icon-active": string;
1161
+ "component-chip-clear-icon-active-hover": string;
1162
+ "component-chip-alert-bg": string;
1163
+ "component-chip-alert-bg-hover": string;
1164
+ "component-chip-alert-bg-pressed": string;
1165
+ "component-chip-alert-bg-active": string;
1166
+ "component-chip-alert-text": string;
1167
+ "component-chip-alert-text-hover": string;
1168
+ "component-chip-alert-text-pressed": string;
1169
+ "component-chip-alert-text-active": string;
1170
+ "component-chip-alert-icon": string;
1171
+ "component-chip-alert-icon-hover": string;
1172
+ "component-chip-alert-icon-active": string;
1173
+ "component-chip-alert-icon-active-hover": string;
1174
+ "component-chip-success-bg": string;
1175
+ "component-chip-success-bg-hover": string;
1176
+ "component-chip-success-bg-pressed": string;
1177
+ "component-chip-success-bg-active": string;
1178
+ "component-chip-success-text": string;
1179
+ "component-chip-success-text-hover": string;
1180
+ "component-chip-success-text-pressed": string;
1181
+ "component-chip-success-text-active": string;
1182
+ "component-chip-success-icon": string;
1183
+ "component-chip-success-icon-hover": string;
1184
+ "component-chip-success-icon-active": string;
1185
+ "component-chip-success-icon-active-hover": string;
1016
1186
  "component-chip-radius": string;
1017
1187
  "component-chip-font-size-s": string;
1018
1188
  "component-chip-font-size-m": string;
package/Theme/themes/buenos_aires.d.ts CHANGED
@@ -383,6 +383,91 @@ declare const _default: {
383
383
  "component-chip-icon-hover": string;
384
384
  "component-chip-icon-active": string;
385
385
  "component-chip-icon-active-hover": string;
386
+ "component-chip-content-max-width": string;
387
+ "component-chip-primary-bg": string;
388
+ "component-chip-primary-bg-hover": string;
389
+ "component-chip-primary-bg-pressed": string;
390
+ "component-chip-primary-bg-active": string;
391
+ "component-chip-primary-text": string;
392
+ "component-chip-primary-text-hover": string;
393
+ "component-chip-primary-text-pressed": string;
394
+ "component-chip-primary-text-active": string;
395
+ "component-chip-primary-icon": string;
396
+ "component-chip-primary-icon-hover": string;
397
+ "component-chip-primary-icon-active": string;
398
+ "component-chip-primary-icon-active-hover": string;
399
+ "component-chip-secondary-bg": string;
400
+ "component-chip-secondary-bg-hover": string;
401
+ "component-chip-secondary-bg-pressed": string;
402
+ "component-chip-secondary-bg-active": string;
403
+ "component-chip-secondary-text": string;
404
+ "component-chip-secondary-text-hover": string;
405
+ "component-chip-secondary-text-pressed": string;
406
+ "component-chip-secondary-text-active": string;
407
+ "component-chip-secondary-icon": string;
408
+ "component-chip-secondary-icon-hover": string;
409
+ "component-chip-secondary-icon-active": string;
410
+ "component-chip-secondary-icon-active-hover": string;
411
+ "component-chip-outline-bg": string;
412
+ "component-chip-outline-bg-hover": string;
413
+ "component-chip-outline-bg-pressed": string;
414
+ "component-chip-outline-bg-active": string;
415
+ "component-chip-outline-text": string;
416
+ "component-chip-outline-text-hover": string;
417
+ "component-chip-outline-text-pressed": string;
418
+ "component-chip-outline-text-active": string;
419
+ "component-chip-outline-icon": string;
420
+ "component-chip-outline-icon-hover": string;
421
+ "component-chip-outline-icon-active": string;
422
+ "component-chip-outline-icon-active-hover": string;
423
+ "component-chip-pseudo-bg": string;
424
+ "component-chip-pseudo-bg-hover": string;
425
+ "component-chip-pseudo-bg-pressed": string;
426
+ "component-chip-pseudo-bg-active": string;
427
+ "component-chip-pseudo-text": string;
428
+ "component-chip-pseudo-text-hover": string;
429
+ "component-chip-pseudo-text-pressed": string;
430
+ "component-chip-pseudo-text-active": string;
431
+ "component-chip-pseudo-icon": string;
432
+ "component-chip-pseudo-icon-hover": string;
433
+ "component-chip-pseudo-icon-active": string;
434
+ "component-chip-pseudo-icon-active-hover": string;
435
+ "component-chip-clear-bg": string;
436
+ "component-chip-clear-bg-hover": string;
437
+ "component-chip-clear-bg-pressed": string;
438
+ "component-chip-clear-bg-active": string;
439
+ "component-chip-clear-text": string;
440
+ "component-chip-clear-text-hover": string;
441
+ "component-chip-clear-text-pressed": string;
442
+ "component-chip-clear-text-active": string;
443
+ "component-chip-clear-icon": string;
444
+ "component-chip-clear-icon-hover": string;
445
+ "component-chip-clear-icon-active": string;
446
+ "component-chip-clear-icon-active-hover": string;
447
+ "component-chip-alert-bg": string;
448
+ "component-chip-alert-bg-hover": string;
449
+ "component-chip-alert-bg-pressed": string;
450
+ "component-chip-alert-bg-active": string;
451
+ "component-chip-alert-text": string;
452
+ "component-chip-alert-text-hover": string;
453
+ "component-chip-alert-text-pressed": string;
454
+ "component-chip-alert-text-active": string;
455
+ "component-chip-alert-icon": string;
456
+ "component-chip-alert-icon-hover": string;
457
+ "component-chip-alert-icon-active": string;
458
+ "component-chip-alert-icon-active-hover": string;
459
+ "component-chip-success-bg": string;
460
+ "component-chip-success-bg-hover": string;
461
+ "component-chip-success-bg-pressed": string;
462
+ "component-chip-success-bg-active": string;
463
+ "component-chip-success-text": string;
464
+ "component-chip-success-text-hover": string;
465
+ "component-chip-success-text-pressed": string;
466
+ "component-chip-success-text-active": string;
467
+ "component-chip-success-icon": string;
468
+ "component-chip-success-icon-hover": string;
469
+ "component-chip-success-icon-active": string;
470
+ "component-chip-success-icon-active-hover": string;
386
471
  "component-chip-radius": string;
387
472
  "component-chip-font-size-s": string;
388
473
  "component-chip-font-size-m": string;
package/Theme/themes/buenos_aires.js CHANGED
@@ -389,6 +389,91 @@ var THEME_BA = {
389
389
  "component-chip-icon-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
390
390
  "component-chip-icon-active": theme_buenos_aires.default.NEUTRAL_BA_500,
391
391
  "component-chip-icon-active-hover": theme_buenos_aires.default.BRAND_BA_LIME,
392
+ "component-chip-content-max-width": "12.5rem",
393
+ "component-chip-primary-bg": theme_buenos_aires.default.NEUTRAL_BA_0,
394
+ "component-chip-primary-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
395
+ "component-chip-primary-bg-pressed": theme_buenos_aires.default.NEUTRAL_BA_200,
396
+ "component-chip-primary-bg-active": theme_buenos_aires.default.BRAND_BA_FOREST,
397
+ "component-chip-primary-text": theme_buenos_aires.default.BRAND_BA_FOREST,
398
+ "component-chip-primary-text-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
399
+ "component-chip-primary-text-pressed": theme_buenos_aires.default.BRAND_BA_FOREST,
400
+ "component-chip-primary-text-active": theme_buenos_aires.default.BRAND_BA_LIME,
401
+ "component-chip-primary-icon": theme_buenos_aires.default.NEUTRAL_BA_500,
402
+ "component-chip-primary-icon-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
403
+ "component-chip-primary-icon-active": theme_buenos_aires.default.NEUTRAL_BA_500,
404
+ "component-chip-primary-icon-active-hover": theme_buenos_aires.default.BRAND_BA_LIME,
405
+ "component-chip-secondary-bg": theme_buenos_aires.default.NEUTRAL_BA_200,
406
+ "component-chip-secondary-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_300,
407
+ "component-chip-secondary-bg-pressed": theme_buenos_aires.default.BRAND_BA_FOREST,
408
+ "component-chip-secondary-bg-active": theme_buenos_aires.default.NEUTRAL_BA_200,
409
+ "component-chip-secondary-text": theme_buenos_aires.default.BRAND_BA_FOREST,
410
+ "component-chip-secondary-text-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
411
+ "component-chip-secondary-text-pressed": theme_buenos_aires.default.BRAND_BA_LIME,
412
+ "component-chip-secondary-text-active": theme_buenos_aires.default.BRAND_BA_FOREST,
413
+ "component-chip-secondary-icon": theme_buenos_aires.default.BRAND_BA_FOREST,
414
+ "component-chip-secondary-icon-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
415
+ "component-chip-secondary-icon-active": theme_buenos_aires.default.BRAND_BA_FOREST,
416
+ "component-chip-secondary-icon-active-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
417
+ "component-chip-outline-bg": theme_buenos_aires.default.NEUTRAL_BA_0,
418
+ "component-chip-outline-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
419
+ "component-chip-outline-bg-pressed": theme_buenos_aires.default.NEUTRAL_BA_200,
420
+ "component-chip-outline-bg-active": theme_buenos_aires.default.NEUTRAL_BA_0,
421
+ "component-chip-outline-text": theme_buenos_aires.default.BRAND_BA_FOREST,
422
+ "component-chip-outline-text-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
423
+ "component-chip-outline-text-pressed": theme_buenos_aires.default.BRAND_BA_INK,
424
+ "component-chip-outline-text-active": theme_buenos_aires.default.BRAND_BA_FOREST,
425
+ "component-chip-outline-icon": theme_buenos_aires.default.BRAND_BA_FOREST,
426
+ "component-chip-outline-icon-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
427
+ "component-chip-outline-icon-active": theme_buenos_aires.default.BRAND_BA_FOREST,
428
+ "component-chip-outline-icon-active-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
429
+ "component-chip-pseudo-bg": theme_buenos_aires.default.NEUTRAL_BA_50,
430
+ "component-chip-pseudo-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
431
+ "component-chip-pseudo-bg-pressed": theme_buenos_aires.default.NEUTRAL_BA_200,
432
+ "component-chip-pseudo-bg-active": theme_buenos_aires.default.NEUTRAL_BA_50,
433
+ "component-chip-pseudo-text": theme_buenos_aires.default.BRAND_BA_FOREST,
434
+ "component-chip-pseudo-text-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
435
+ "component-chip-pseudo-text-pressed": theme_buenos_aires.default.BRAND_BA_FOREST,
436
+ "component-chip-pseudo-text-active": theme_buenos_aires.default.BRAND_BA_FOREST,
437
+ "component-chip-pseudo-icon": theme_buenos_aires.default.BRAND_BA_FOREST,
438
+ "component-chip-pseudo-icon-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
439
+ "component-chip-pseudo-icon-active": theme_buenos_aires.default.BRAND_BA_FOREST,
440
+ "component-chip-pseudo-icon-active-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
441
+ "component-chip-clear-bg": "transparent",
442
+ "component-chip-clear-bg-hover": "transparent",
443
+ "component-chip-clear-bg-pressed": "transparent",
444
+ "component-chip-clear-bg-active": "transparent",
445
+ "component-chip-clear-text": theme_buenos_aires.default.BRAND_BA_FOREST,
446
+ "component-chip-clear-text-hover": theme_buenos_aires.default.LIME_BA_800,
447
+ "component-chip-clear-text-pressed": theme_buenos_aires.default.BRAND_BA_INK,
448
+ "component-chip-clear-text-active": theme_buenos_aires.default.BRAND_BA_FOREST,
449
+ "component-chip-clear-icon": theme_buenos_aires.default.BRAND_BA_FOREST,
450
+ "component-chip-clear-icon-hover": theme_buenos_aires.default.LIME_BA_800,
451
+ "component-chip-clear-icon-active": theme_buenos_aires.default.BRAND_BA_FOREST,
452
+ "component-chip-clear-icon-active-hover": theme_buenos_aires.default.LIME_BA_800,
453
+ "component-chip-alert-bg": theme_buenos_aires.default.STATUS_BA_ERROR,
454
+ "component-chip-alert-bg-hover": "#5F1519",
455
+ "component-chip-alert-bg-pressed": theme_buenos_aires.default.STATUS_BA_ERROR_ACCENT,
456
+ "component-chip-alert-bg-active": theme_buenos_aires.default.STATUS_BA_ERROR,
457
+ "component-chip-alert-text": theme_buenos_aires.default.BRAND_BA_WHITE,
458
+ "component-chip-alert-text-hover": theme_buenos_aires.default.BRAND_BA_WHITE,
459
+ "component-chip-alert-text-pressed": theme_buenos_aires.default.BRAND_BA_WHITE,
460
+ "component-chip-alert-text-active": theme_buenos_aires.default.BRAND_BA_WHITE,
461
+ "component-chip-alert-icon": theme_buenos_aires.default.BRAND_BA_WHITE,
462
+ "component-chip-alert-icon-hover": theme_buenos_aires.default.BRAND_BA_WHITE,
463
+ "component-chip-alert-icon-active": theme_buenos_aires.default.BRAND_BA_WHITE,
464
+ "component-chip-alert-icon-active-hover": theme_buenos_aires.default.BRAND_BA_WHITE,
465
+ "component-chip-success-bg": theme_buenos_aires.default.STATUS_BA_SUCCESS_BG,
466
+ "component-chip-success-bg-hover": theme_buenos_aires.default.LIME_BA_200,
467
+ "component-chip-success-bg-pressed": theme_buenos_aires.default.STATUS_BA_SUCCESS,
468
+ "component-chip-success-bg-active": theme_buenos_aires.default.STATUS_BA_SUCCESS_BG,
469
+ "component-chip-success-text": theme_buenos_aires.default.BRAND_BA_FOREST,
470
+ "component-chip-success-text-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
471
+ "component-chip-success-text-pressed": theme_buenos_aires.default.BRAND_BA_WHITE,
472
+ "component-chip-success-text-active": theme_buenos_aires.default.BRAND_BA_FOREST,
473
+ "component-chip-success-icon": theme_buenos_aires.default.BRAND_BA_FOREST,
474
+ "component-chip-success-icon-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
475
+ "component-chip-success-icon-active": theme_buenos_aires.default.BRAND_BA_FOREST,
476
+ "component-chip-success-icon-active-hover": theme_buenos_aires.default.BRAND_BA_FOREST,
392
477
  "component-chip-radius": "var(--radius-full)",
393
478
  "component-chip-font-size-s": "0.875rem",
394
479
  "component-chip-font-size-m": "1rem",