@bi-digital/css 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/baseline.css +2 -7
  2. package/dist/components/alert.css +24 -0
  3. package/dist/components/button.css +5 -13
  4. package/dist/components/card.css +62 -27
  5. package/dist/components/checkbox-subsection.css +1 -1
  6. package/dist/components/details.css +1 -1
  7. package/dist/components/dialog.css +3 -3
  8. package/dist/components/dropdown.css +3 -3
  9. package/dist/components/field.css +7 -37
  10. package/dist/components/filter-group.css +3 -3
  11. package/dist/components/input.css +11 -39
  12. package/dist/components/label.css +1 -5
  13. package/dist/components/popover.css +3 -3
  14. package/dist/components/spinner.css +3 -3
  15. package/dist/components/validation-message.css +1 -5
  16. package/dist/components.css +128 -143
  17. package/dist/index.css +61 -224
  18. package/dist/reset.css +2 -14
  19. package/dist/salesforce.css +185 -346
  20. package/dist/tokens.css +57 -203
  21. package/package.json +3 -3
package/dist/salesforce.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ :root, :host {
2
2
  --bi-basic-key: #000;
3
3
  --bi-basic-white: #fff;
4
4
  --bi-neutral-0: #fafbfc;
@@ -36,7 +36,7 @@
36
36
  --bi-primary-95: #002341;
37
37
  --bi-primary-100: #001932;
38
38
  --bi-secondary-0: #fffbeb;
39
- --bi-secondary-5: #fcf6df;
39
+ --bi-secondary-5: #fff7d5;
40
40
  --bi-secondary-10: #fff2bf;
41
41
  --bi-secondary-15: #ffea95;
42
42
  --bi-secondary-20: #ffe680;
@@ -138,6 +138,7 @@
138
138
  --bi-scale-12x: 3rem;
139
139
  --bi-scale-14x: 3.5rem;
140
140
  --bi-scale-16x: 4rem;
141
+ --bi-scale-18x: 4.5rem;
141
142
  --bi-scale-20x: 5rem;
142
143
  --bi-scale-24x: 6rem;
143
144
  --bi-scale-32x: 8rem;
@@ -148,23 +149,26 @@
148
149
  --bi-scale-64x: 16rem;
149
150
  --bi-scale-80x: 20rem;
150
151
  --bi-scale-max: 624.938rem;
151
- --bi-opacity-dark-80: rgba(38, 51, 63, .2);
152
- --bi-opacity-dark-50: rgba(38, 51, 63, .5);
153
- --bi-opacity-light-100: rgba(255, 255, 255, 0);
154
- --bi-opacity-light-80: rgba(255, 255, 255, .2);
155
- --bi-opacity-light-50: rgba(255, 255, 255, .5);
156
- --bi-stroke-default: .09375rem;
157
- --bi-elevation-25: rgba(38, 51, 63, .15);
158
- --bi-states-hover-dark: rgba(38, 51, 63, .1);
159
- --bi-states-hover-light: rgba(255, 255, 255, .1);
160
- --bi-states-press-dark: rgba(38, 51, 63, .15);
161
- --bi-states-press-light: rgba(255, 255, 255, .15);
152
+ --bi-opacity-dark-80: #26333f33;
153
+ --bi-opacity-dark-50: #26333f80;
154
+ --bi-opacity-light-100: #fff0;
155
+ --bi-opacity-light-80: #fff3;
156
+ --bi-opacity-light-50: #ffffff80;
157
+ --bi-stroke-medium: .09375rem;
158
+ --bi-elevation-25: #26333f26;
159
+ --bi-font-family-plain: "museo-sans", Arial, sans-serif;
160
+ --bi-font-family-brand: "museo-slab", serif;
161
+ --bi-font-weight-bold: 700;
162
+ --bi-font-weight-regular: 500;
163
+ --bi-font-color-secondary-dark-background-2: #ffffffb3;
164
+ --bi-font-color-disabled-dark-background: #ffffffb3;
165
+ --bi-states-hover-dark: #26333f1a;
166
+ --bi-states-hover-light: #ffffff1a;
167
+ --bi-states-press-dark: #26333f26;
168
+ --bi-states-press-light: #ffffff26;
162
169
  --bi-stroke-none: var(--bi-scale-0);
163
170
  --bi-stroke-thin: var(--bi-scale-0-25x);
164
171
  --bi-stroke-thick: var(--bi-scale-0-50x);
165
- --bi-stroke-color-1: var(--bi-neutral-15);
166
- --bi-stroke-color-2: var(--bi-neutral-25);
167
- --bi-stroke-color-3: var(--bi-neutral-50);
168
172
  --bi-radius-none: var(--bi-scale-0);
169
173
  --bi-radius-small: var(--bi-scale-0-50x);
170
174
  --bi-radius-medium: var(--bi-scale-1x);
@@ -177,197 +181,47 @@
177
181
  --bi-icon-large: var(--bi-scale-8x);
178
182
  --bi-icon-xl: var(--bi-scale-10x);
179
183
  --bi-icon-2xl: var(--bi-scale-11x);
180
- --bi-icon-primary: var(--bi-neutral-90);
181
- --bi-icon-secondary: var(--bi-neutral-60);
182
- --bi-icon-disabled: var(--bi-neutral-50);
183
- --bi-icon-link: var(--bi-primary-50);
184
- --bi-layout-navbar-height: var(--bi-scale-16x);
185
- }
186
-
187
- :host {
188
- --bi-basic-key: #000;
189
- --bi-basic-white: #fff;
190
- --bi-neutral-0: #fafbfc;
191
- --bi-neutral-5: #f5f7fa;
192
- --bi-neutral-10: #e4e8ed;
193
- --bi-neutral-15: #d5dde4;
194
- --bi-neutral-20: #c8d1db;
195
- --bi-neutral-25: #bac6d2;
196
- --bi-neutral-30: #acbbca;
197
- --bi-neutral-40: #90a3b7;
198
- --bi-neutral-50: #597694;
199
- --bi-neutral-60: #475e75;
200
- --bi-neutral-70: #3e5266;
201
- --bi-neutral-75: #344557;
202
- --bi-neutral-80: #303f4f;
203
- --bi-neutral-85: #2b3947;
204
- --bi-neutral-90: #26333f;
205
- --bi-neutral-95: #222d38;
206
- --bi-neutral-100: #171f26;
207
- --bi-primary-0: #ebf3ff;
208
- --bi-primary-5: #d9e6f9;
209
- --bi-primary-10: #c5d9f7;
210
- --bi-primary-15: #b2cdf4;
211
- --bi-primary-20: #9ec0f1;
212
- --bi-primary-25: #8bb3ee;
213
- --bi-primary-30: #75a5f1;
214
- --bi-primary-40: #6196f4;
215
- --bi-primary-50: #0a64ff;
216
- --bi-primary-60: #0b4db4;
217
- --bi-primary-70: #0b49a1;
218
- --bi-primary-75: #0c468f;
219
- --bi-primary-80: #093f82;
220
- --bi-primary-85: #083a76;
221
- --bi-primary-90: #042f5b;
222
- --bi-primary-95: #002341;
223
- --bi-primary-100: #001932;
224
- --bi-secondary-0: #fffbeb;
225
- --bi-secondary-5: #fcf6df;
226
- --bi-secondary-10: #fff2bf;
227
- --bi-secondary-15: #ffea95;
228
- --bi-secondary-20: #ffe680;
229
- --bi-secondary-25: #ffe26a;
230
- --bi-secondary-30: #ffde55;
231
- --bi-secondary-40: #ffd52b;
232
- --bi-secondary-50: #ffcd00;
233
- --bi-secondary-60: #deb300;
234
- --bi-secondary-70: #bd9800;
235
- --bi-secondary-75: #9d7e00;
236
- --bi-secondary-80: #7c6400;
237
- --bi-secondary-85: #5b4900;
238
- --bi-secondary-90: #4a3c01;
239
- --bi-secondary-95: #3a2f00;
240
- --bi-secondary-100: #262000;
241
- --bi-info-0: #f3ebff;
242
- --bi-info-5: #e6d5ff;
243
- --bi-info-10: #d9bfff;
244
- --bi-info-15: #cdaaff;
245
- --bi-info-20: #c094ff;
246
- --bi-info-25: #b480ff;
247
- --bi-info-30: #a76aff;
248
- --bi-info-40: #822bff;
249
- --bi-info-50: #6900ff;
250
- --bi-info-60: #5c03dc;
251
- --bi-info-70: #4f05b9;
252
- --bi-info-75: #420896;
253
- --bi-info-80: #3b0984;
254
- --bi-info-85: #350a73;
255
- --bi-info-90: #2e0b61;
256
- --bi-info-95: #280d50;
257
- --bi-info-100: #1a0833;
258
- --bi-warning-0: #fffbeb;
259
- --bi-warning-5: #fff7d5;
260
- --bi-warning-10: #fff2bf;
261
- --bi-warning-15: #ffea95;
262
- --bi-warning-20: #ffe680;
263
- --bi-warning-25: #ffe26a;
264
- --bi-warning-30: #ffde55;
265
- --bi-warning-40: #ffd52b;
266
- --bi-warning-50: #ffcd00;
267
- --bi-warning-60: #deb300;
268
- --bi-warning-70: #bd9800;
269
- --bi-warning-75: #9d7e00;
270
- --bi-warning-80: #7c6400;
271
- --bi-warning-85: #5b4900;
272
- --bi-warning-90: #4a3c01;
273
- --bi-warning-95: #3a2f00;
274
- --bi-warning-100: #262000;
275
- --bi-success-0: #ebffeb;
276
- --bi-success-5: #d5f4d6;
277
- --bi-success-10: #bfeec2;
278
- --bi-success-15: #aae8ae;
279
- --bi-success-20: #95e299;
280
- --bi-success-25: #80dd85;
281
- --bi-success-30: #55d15c;
282
- --bi-success-40: #2bc634;
283
- --bi-success-50: #00ab0b;
284
- --bi-success-60: #04a30d;
285
- --bi-success-70: #078b0f;
286
- --bi-success-75: #0b7411;
287
- --bi-success-80: #0f5d13;
288
- --bi-success-85: #124515;
289
- --bi-success-90: #143a16;
290
- --bi-success-95: #162e17;
291
- --bi-success-100: #0f1f0f;
292
- --bi-alert-0: #fff1f0;
293
- --bi-alert-5: #ffe1df;
294
- --bi-alert-10: #ffd7d5;
295
- --bi-alert-15: #ffc3bf;
296
- --bi-alert-20: #ffafaa;
297
- --bi-alert-25: #ff8780;
298
- --bi-alert-30: #ff5f55;
299
- --bi-alert-40: #ff372b;
300
- --bi-alert-50: #ff0f00;
301
- --bi-alert-60: #e41100;
302
- --bi-alert-70: #c91300;
303
- --bi-alert-75: #ae1601;
304
- --bi-alert-80: #931801;
305
- --bi-alert-85: #731a15;
306
- --bi-alert-90: #6a1b16;
307
- --bi-alert-95: #5d1c18;
308
- --bi-alert-100: #280c0a;
309
- --bi-scale-0: 0;
310
- --bi-scale-0-25x: .0625rem;
311
- --bi-scale-0-50x: .125rem;
312
- --bi-scale-0-75x: .1875rem;
313
- --bi-scale-1x: .25rem;
314
- --bi-scale-1-5x: .375rem;
315
- --bi-scale-2x: .5rem;
316
- --bi-scale-3x: .75rem;
317
- --bi-scale-4x: 1rem;
318
- --bi-scale-5x: 1.25rem;
319
- --bi-scale-6x: 1.5rem;
320
- --bi-scale-8x: 2rem;
321
- --bi-scale-9x: 2.25rem;
322
- --bi-scale-10x: 2.5rem;
323
- --bi-scale-11x: 2.75rem;
324
- --bi-scale-12x: 3rem;
325
- --bi-scale-14x: 3.5rem;
326
- --bi-scale-16x: 4rem;
327
- --bi-scale-20x: 5rem;
328
- --bi-scale-24x: 6rem;
329
- --bi-scale-32x: 8rem;
330
- --bi-scale-36x: 9rem;
331
- --bi-scale-40x: 10rem;
332
- --bi-scale-48x: 12rem;
333
- --bi-scale-56x: 14rem;
334
- --bi-scale-64x: 16rem;
335
- --bi-scale-80x: 20rem;
336
- --bi-scale-max: 624.938rem;
337
- --bi-opacity-dark-80: rgba(38, 51, 63, .2);
338
- --bi-opacity-dark-50: rgba(38, 51, 63, .5);
339
- --bi-opacity-light-100: rgba(255, 255, 255, 0);
340
- --bi-opacity-light-80: rgba(255, 255, 255, .2);
341
- --bi-opacity-light-50: rgba(255, 255, 255, .5);
342
- --bi-stroke-default: .09375rem;
343
- --bi-elevation-25: rgba(38, 51, 63, .15);
344
- --bi-states-hover-dark: rgba(38, 51, 63, .1);
345
- --bi-states-hover-light: rgba(255, 255, 255, .1);
346
- --bi-states-press-dark: rgba(38, 51, 63, .15);
347
- --bi-states-press-light: rgba(255, 255, 255, .15);
348
- --bi-stroke-none: var(--bi-scale-0);
349
- --bi-stroke-thin: var(--bi-scale-0-25x);
350
- --bi-stroke-thick: var(--bi-scale-0-50x);
351
- --bi-stroke-color-1: var(--bi-neutral-15);
352
- --bi-stroke-color-2: var(--bi-neutral-25);
353
- --bi-stroke-color-3: var(--bi-neutral-50);
354
- --bi-radius-none: var(--bi-scale-0);
355
- --bi-radius-small: var(--bi-scale-0-50x);
356
- --bi-radius-medium: var(--bi-scale-1x);
357
- --bi-radius-large: var(--bi-scale-2x);
358
- --bi-radius-xl: var(--bi-scale-3x);
359
- --bi-radius-brand: var(--bi-scale-12x);
360
- --bi-radius-full: var(--bi-scale-max);
361
- --bi-icon-small: var(--bi-scale-5x);
362
- --bi-icon-medium: var(--bi-scale-6x);
363
- --bi-icon-large: var(--bi-scale-8x);
364
- --bi-icon-xl: var(--bi-scale-10x);
365
- --bi-icon-2xl: var(--bi-scale-11x);
366
- --bi-icon-primary: var(--bi-neutral-90);
184
+ --bi-icon-primary: var(--bi-neutral-95);
367
185
  --bi-icon-secondary: var(--bi-neutral-60);
368
186
  --bi-icon-disabled: var(--bi-neutral-50);
369
187
  --bi-icon-link: var(--bi-primary-50);
188
+ --bi-font-color-primary: var(--bi-neutral-95);
189
+ --bi-font-color-secondary: var(--bi-neutral-60);
190
+ --bi-font-color-disabled: var(--bi-neutral-50);
191
+ --bi-font-color-accent: var(--bi-primary-60);
192
+ --bi-font-color-link: var(--bi-primary-50);
193
+ --bi-font-color-primary-dark-background: var(--bi-basic-white);
194
+ --bi-font-color-accent-dark-background: var(--bi-primary-20);
370
195
  --bi-layout-navbar-height: var(--bi-scale-16x);
196
+ --bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
197
+ --bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
198
+ --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
199
+ --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-plain);
200
+ --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
201
+ --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
202
+ --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
203
+ --bi-font-title-bold-large: var(--bi-font-weight-bold) 1.5rem / 1.6875rem var(--bi-font-family-plain);
204
+ --bi-font-title-bold-medium: var(--bi-font-weight-bold) 1.25rem / 1.4375rem var(--bi-font-family-plain);
205
+ --bi-font-title-bold-small: var(--bi-font-weight-bold) 1.125rem / 1.25rem var(--bi-font-family-plain);
206
+ --bi-font-title-bold-xs: var(--bi-font-weight-bold) 1rem / 1.125rem var(--bi-font-family-plain);
207
+ --bi-font-title-bold-xxs: var(--bi-font-weight-bold) .875rem / 1rem var(--bi-font-family-plain);
208
+ --bi-font-title-regular-xxl: var(--bi-font-weight-regular) 2rem / 2.25rem var(--bi-font-family-plain);
209
+ --bi-font-title-regular-xl: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-plain);
210
+ --bi-font-title-regular-large: var(--bi-font-weight-regular) 1.5rem / 1.6875rem var(--bi-font-family-plain);
211
+ --bi-font-title-regular-medium: var(--bi-font-weight-regular) 1.25rem / 1.4375rem var(--bi-font-family-plain);
212
+ --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
213
+ --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
214
+ --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
215
+ --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
216
+ --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
217
+ --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
218
+ --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
219
+ --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
220
+ --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
221
+ --bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
222
+ --bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
223
+ --bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
224
+ --bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
371
225
  }
372
226
 
373
227
  .bi-alert {
@@ -462,6 +316,30 @@
462
316
  --bic-alert-color: var(--bi-warning-5);
463
317
  }
464
318
 
319
+ .bi-alert[data-variant="info"] {
320
+ --bic-alert-background: var(--bi-info-5);
321
+ --bic-alert-border-color: var(--bi-info-10);
322
+ --bic-alert-color: var(--bi-info-90);
323
+ }
324
+
325
+ .bi-alert[data-variant="info"][data-dark="true"] {
326
+ --bic-alert-background: var(--bi-info-90);
327
+ --bic-alert-border-color: var(--bi-info-80);
328
+ --bic-alert-color: var(--bi-info-10);
329
+ }
330
+
331
+ .bi-alert[data-variant="neutral"] {
332
+ --bic-alert-background: var(--bi-neutral-10);
333
+ --bic-alert-border-color: var(--bi-neutral-15);
334
+ --bic-alert-color: var(--bi-neutral-95);
335
+ }
336
+
337
+ .bi-alert[data-variant="neutral"][data-dark="true"] {
338
+ --bic-alert-background: var(--bi-neutral-90);
339
+ --bic-alert-border-color: var(--bi-neutral-90);
340
+ --bic-alert-color: var(--bi-neutral-30);
341
+ }
342
+
465
343
  .bi-alert:has( > .bi-alert--footer) {
466
344
  width: 100%;
467
345
  }
@@ -737,7 +615,7 @@
737
615
  --bic-button-background: var(--bi-primary-50);
738
616
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
739
617
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
740
- --bic-button-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, .12) inset, 0px 0px 0px 1px rgba(10, 13, 18, .18) inset, 0px -2px 0px 0px rgba(10, 13, 18, .05) inset, 0px 1px 2px 0px rgba(10, 13, 18, .05);
618
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
741
619
  }
742
620
 
743
621
  .bi-button[data-variant="filled"] {
@@ -745,7 +623,7 @@
745
623
  --bic-button-background: var(--bi-primary-50);
746
624
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
747
625
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
748
- --bic-button-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, .12) inset, 0px 0px 0px 1px rgba(10, 13, 18, .18) inset, 0px -2px 0px 0px rgba(10, 13, 18, .05) inset, 0px 1px 2px 0px rgba(10, 13, 18, .05);
626
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
749
627
  }
750
628
 
751
629
  .bi-button[data-variant="outlined"] {
@@ -783,17 +661,13 @@
783
661
 
784
662
  .bi-button[data-variant="flat"][data-dark="true"] {
785
663
  --bic-button-color: var(--bi-basic-white);
786
- --bic-button-background: rgba(255, 255, 255, .1);
664
+ --bic-button-background: #ffffff1a;
787
665
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
788
666
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
789
667
  }
790
668
 
791
669
  @media (hover: hover) and (pointer: fine) {
792
- .bi-button:where(:not(:-webkit-any(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
793
- background: var(--bic-button-background-hover);
794
- }
795
-
796
- .bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
670
+ .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
797
671
  background: var(--bic-button-background-hover);
798
672
  }
799
673
  }
@@ -818,11 +692,7 @@
818
692
  cursor: progress;
819
693
  }
820
694
 
821
- .bi-button:where(:not(:-webkit-any(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
822
- background: var(--bic-button-background-press);
823
- }
824
-
825
- .bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
695
+ .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
826
696
  background: var(--bic-button-background-press);
827
697
  }
828
698
 
@@ -837,36 +707,54 @@
837
707
  }
838
708
 
839
709
  .bi-card {
840
- --bic-card-border-color: var(--bi-neutral-15);
841
- --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
842
- --bic-card-border-radius: var(--bi-radius-medium);
843
710
  --bic-card-background-color: var(--bi-basic-white);
711
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
712
+ --bic-card-border-color: var(--bi-neutral-15);
844
713
  --bic-card-color: var(--bi-neutral-95);
845
714
  --bic-card-header-title-color: var(--bi-neutral-95);
846
715
  --bic-card-header-bold-color: var(--bi-primary-60);
847
716
  --bic-card-header-label-color: var(--bi-neutral-50);
848
- --bic-card-actions-background-color: var(--bi-neutral-10);
849
- --bic-card-actions-icon-color: var(--bi-primary-50);
850
- --bic-card-actions-flex-direction: column;
851
- --bic-card-content-padding: var(--bi-scale-4x);
852
717
  --bic-card-content-color: var(--bi-neutral-50);
718
+ --bic-card-content-padding: var(--bi-scale-4x);
719
+ --bic-card-border-radius: var(--bi-radius-medium);
853
720
  --bic-card-content-lines: 2;
854
721
  --bic-card-media-width: 100%;
855
722
  --bic-card-media-date-width: 3.1875rem;
856
723
  --bic-card-media-date-height: 2.875rem;
724
+ --bic-card-actions-flex-direction: column;
725
+ --bic-card-actions-background-color: var(--bi-neutral-10);
726
+ --bic-card-actions-icon-color: var(--bi-primary-50);
727
+ --bic-card-border-hover-color: var(--bi-neutral-50);
728
+ --bic-card-box-shadow-hover-color: #0000000d;
729
+ --bic-card-box-shadow-focus-color: var(--bi-primary-50);
730
+ --bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
731
+ --bic-card-box-shadow-focus-outer-border: 6px;
732
+ --bic-card-box-shadow-focus-inner-border: 4px;
733
+ --bic-card-border-active-color: var(--bi-primary-50);
734
+ --bic-card-box-shadow-active-color: #0000000d;
735
+ --bic-card-box-shadow-active-outer-border: 20px;
736
+ --bic-card-box-shadow-active-inner-border: 10px;
857
737
  }
858
738
 
859
739
  .bi-card[data-dark="true"] {
740
+ --bic-card-background-color: var(--bi-neutral-90);
860
741
  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
861
742
  --bic-card-border-color: var(--bi-neutral-70);
862
- --bic-card-background-color: var(--bi-neutral-95);
863
743
  --bic-card-color: var(--bi-neutral-5);
864
744
  --bic-card-header-title-color: var(--bi-neutral-5);
865
745
  --bic-card-header-bold-color: var(--bi-primary-20);
866
746
  --bic-card-header-label-color: var(--bi-neutral-30);
867
- --bic-card-actions-background-color: var(--bi-neutral-75);
868
- --bic-card-actions-icon-color: var(--bi-primary-20);
869
747
  --bic-card-content-color: var(--bi-neutral-30);
748
+ --bic-card-actions-background-color: var(--bi-neutral-75);
749
+ --bic-card-actions-icon-color: var(--bi-neutral-10);
750
+ --bic-card-border-hover-color: var(--bi-neutral-25);
751
+ --bic-card-box-shadow-hover-color: #b2cdf40d;
752
+ --bic-card-box-shadow-focus-color: var(--bi-secondary-50);
753
+ --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
754
+ --bic-card-box-shadow-focus-outer-border: 4.5px;
755
+ --bic-card-box-shadow-focus-inner-border: 4px;
756
+ --bic-card-border-active-color: var(--bi-primary-50);
757
+ --bic-card-box-shadow-active-color: #b2cdf40d;
870
758
  }
871
759
 
872
760
  .bi-card {
@@ -945,6 +833,23 @@
945
833
  --bic-card-header-label-color: var(--bi-warning-90);
946
834
  }
947
835
 
836
+ .bi-card[data-color="primary"][data-dark="true"] {
837
+ --bic-card-background-color: var(--bi-primary-90);
838
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
839
+ --bic-card-border-color: var(--bi-primary-75);
840
+ --bic-card-color: var(--bi-neutral-5);
841
+ --bic-card-header-title-color: var(--bi-neutral-5);
842
+ --bic-card-header-bold-color: var(--bi-primary-20);
843
+ --bic-card-header-label-color: var(--bi-neutral-30);
844
+ --bic-card-content-color: var(--bi-neutral-30);
845
+ --bic-card-actions-background-color: var(--bi-primary-85);
846
+ --bic-card-actions-icon-color: var(--bi-primary-10);
847
+ --bic-card-border-hover-color: var(--bi-primary-40);
848
+ --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
849
+ --bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
850
+ --bic-card-border-active-color: var(--bi-primary-10);
851
+ }
852
+
948
853
  .bi-card[data-error="true"] {
949
854
  box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
950
855
  --bic-card-border-color: transparent;
@@ -992,8 +897,8 @@
992
897
  }
993
898
 
994
899
  .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
995
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
996
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
900
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
901
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
997
902
  outline-offset: var(--_bi--focus, 2px);
998
903
  }
999
904
 
@@ -1003,12 +908,12 @@
1003
908
 
1004
909
  @media (hover: hover) and (pointer: fine) {
1005
910
  .bi-card:-webkit-any(a, button):not(.disabled):hover {
1006
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
911
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1007
912
  }
1008
913
  }
1009
914
 
1010
915
  .bi-card:-webkit-any(a, button):not(.disabled):active {
1011
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
916
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1012
917
  }
1013
918
 
1014
919
  .bi-card:-webkit-any(a, button):disabled {
@@ -1023,8 +928,8 @@
1023
928
  }
1024
929
 
1025
930
  .bi-card:is(a, button):not(.disabled):focus-visible {
1026
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1027
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
931
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
932
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
1028
933
  outline-offset: var(--_bi--focus, 2px);
1029
934
  }
1030
935
 
@@ -1034,12 +939,12 @@
1034
939
 
1035
940
  @media (hover: hover) and (pointer: fine) {
1036
941
  .bi-card:is(a, button):not(.disabled):hover {
1037
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
942
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1038
943
  }
1039
944
  }
1040
945
 
1041
946
  .bi-card:is(a, button):not(.disabled):active {
1042
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
947
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1043
948
  }
1044
949
 
1045
950
  .bi-card:is(a, button):disabled {
@@ -1054,8 +959,8 @@
1054
959
  }
1055
960
 
1056
961
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
1057
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1058
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
962
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
963
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
1059
964
  outline-offset: var(--_bi--focus, 2px);
1060
965
  }
1061
966
 
@@ -1065,12 +970,12 @@
1065
970
 
1066
971
  @media (hover: hover) and (pointer: fine) {
1067
972
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
1068
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
973
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1069
974
  }
1070
975
  }
1071
976
 
1072
977
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
1073
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
978
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1074
979
  }
1075
980
 
1076
981
  .bi-card .bi-card--content:-webkit-any(a, button):disabled {
@@ -1085,8 +990,8 @@
1085
990
  }
1086
991
 
1087
992
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
1088
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1089
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
993
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
994
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
1090
995
  outline-offset: var(--_bi--focus, 2px);
1091
996
  }
1092
997
 
@@ -1096,12 +1001,12 @@
1096
1001
 
1097
1002
  @media (hover: hover) and (pointer: fine) {
1098
1003
  .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
1099
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
1004
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1100
1005
  }
1101
1006
  }
1102
1007
 
1103
1008
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
1104
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
1009
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1105
1010
  }
1106
1011
 
1107
1012
  .bi-card .bi-card--content:is(a, button):disabled {
@@ -1246,7 +1151,7 @@
1246
1151
  padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
1247
1152
  border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
1248
1153
  background: var(--bic-card-background-color);
1249
- box-shadow: 0px 8px 16px var(--bi-scale-1-5x) rgba(38, 51, 63, .05), 0px 4px 6px 0px rgba(38, 51, 63, .05);
1154
+ box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
1250
1155
  color: var(--bic-card-header-title-color);
1251
1156
  text-align: center;
1252
1157
  flex-direction: column;
@@ -1278,7 +1183,7 @@
1278
1183
  .bi-checkbox-subsection > div:first-child {
1279
1184
  margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
1280
1185
  background-color: var(--bic-checkbox-subsection-line-bg);
1281
- width: var(--bi-stroke-default);
1186
+ width: var(--bi-stroke-medium);
1282
1187
  }
1283
1188
 
1284
1189
  .bi-checkbox-subsection > div:last-child {
@@ -1484,7 +1389,7 @@ details.bi-details {
1484
1389
  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
1485
1390
  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
1486
1391
  --bic-details-color: var(--bi-neutral-90);
1487
- --bic-details-border-color: var(--bi-stroke-color-1);
1392
+ --bic-details-border-color: var(--bi-neutral-15);
1488
1393
  --bic-details-padding: var(--bi-scale-4x);
1489
1394
  }
1490
1395
 
@@ -1618,7 +1523,7 @@ details.bi-details > *:not(summary) + * {
1618
1523
 
1619
1524
  .bi-dialog {
1620
1525
  --bic-dialog-animation-duration: .2s;
1621
- --bic-dialog-backdrop-background: rgba(0, 0, 0, .5);
1526
+ --bic-dialog-backdrop-background: #00000080;
1622
1527
  --bic-dialog-background: var(--bi-basic-white);
1623
1528
  --bic-dialog-border-color: var(--bi-neutral-15);
1624
1529
  --bic-dialog-icon-spacing: .625rem;
@@ -1638,7 +1543,7 @@ details.bi-details > *:not(summary) + * {
1638
1543
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
1639
1544
  background: var(--bic-dialog-background);
1640
1545
  border-radius: var(--bi-radius-large);
1641
- box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 rgba(0, 0, 0, .25);
1546
+ box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
1642
1547
  color: var(--bic-dialog-color);
1643
1548
  max-height: var(--bic-dialog-max-height);
1644
1549
  max-width: var(--bic-dialog-max-width);
@@ -1657,7 +1562,7 @@ details.bi-details > *:not(summary) + * {
1657
1562
 
1658
1563
  .bi-dialog::backdrop {
1659
1564
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
1660
- background: var(--bic-dialog-backdrop-background, rgba(0, 0, 0, .5));
1565
+ background: var(--bic-dialog-backdrop-background, #00000080);
1661
1566
  }
1662
1567
 
1663
1568
  .bi-dialog[open] {
@@ -1850,15 +1755,15 @@ body:has(.bi-dialog:modal) {
1850
1755
  --bic-dropdown-background: var(--bi-basic-white);
1851
1756
  --bic-dropdown-border-width: var(--bi-stroke-thin);
1852
1757
  --bic-dropdown-border-style: solid;
1853
- --bic-dropdown-border-color: var(--bi-stroke-color-1);
1854
- --bic-dropdown-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
1758
+ --bic-dropdown-border-color: var(--bi-neutral-15);
1759
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
1855
1760
  }
1856
1761
 
1857
1762
  .bi-dropdown[data-dark="true"] {
1858
1763
  --bic-dropdown-background: var(--bi-neutral-100);
1859
1764
  --bic-dropdown-border-color: var(--bi-neutral-90);
1860
1765
  --bic-dropdown-color: var(--bi-neutral-5);
1861
- --bic-dropdown-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
1766
+ --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
1862
1767
  }
1863
1768
 
1864
1769
  .bi-dropdown {
@@ -2028,19 +1933,11 @@ body:has(.bi-dialog:modal) {
2028
1933
  gap: 0;
2029
1934
  }
2030
1935
 
2031
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
1936
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
2032
1937
  background: var(--_bi--hover, var(--bic-field-background-hover));
2033
1938
  }
2034
1939
 
2035
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
2036
- --_bi--hover: ;
2037
- }
2038
-
2039
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
2040
- background: var(--_bi--hover, var(--bic-field-background-hover));
2041
- }
2042
-
2043
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
1940
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
2044
1941
  --_bi--hover: ;
2045
1942
  }
2046
1943
 
@@ -2111,19 +2008,11 @@ body:has(.bi-dialog:modal) {
2111
2008
  gap: 0;
2112
2009
  }
2113
2010
 
2114
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
2115
- background: var(--_bi--hover, var(--bic-field-background-hover));
2116
- }
2117
-
2118
- .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])):hover:not(:-webkit-any(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
2119
- --_bi--hover: ;
2120
- }
2121
-
2122
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) {
2011
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) {
2123
2012
  background: var(--_bi--hover, var(--bic-field-background-hover));
2124
2013
  }
2125
2014
 
2126
- .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:is(:has(a:hover), :has([aria-disabled="true"], :disabled))) * {
2015
+ .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):hover:not(:has(a:hover), :has([aria-disabled="true"], :disabled)) * {
2127
2016
  --_bi--hover: ;
2128
2017
  }
2129
2018
 
@@ -2178,7 +2067,7 @@ body:has(.bi-dialog:modal) {
2178
2067
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
2179
2068
  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2180
2069
  outline-offset: 0;
2181
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05));
2070
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2182
2071
  }
2183
2072
 
2184
2073
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
@@ -2196,14 +2085,7 @@ body:has(.bi-dialog:modal) {
2196
2085
  display: flex;
2197
2086
  }
2198
2087
 
2199
- .bi-field .bi-field--affixes .bi-field--affix:first-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
2200
- border-top-left-radius: inherit;
2201
- border-bottom-left-radius: inherit;
2202
- border-right: 0;
2203
- padding-right: 0;
2204
- }
2205
-
2206
- .bi-field .bi-field--affixes .bi-field--affix:first-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
2088
+ .bi-field .bi-field--affixes .bi-field--affix:first-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2207
2089
  border-top-left-radius: inherit;
2208
2090
  border-bottom-left-radius: inherit;
2209
2091
  border-right: 0;
@@ -2224,14 +2106,7 @@ body:has(.bi-dialog:modal) {
2224
2106
  padding-left: 0;
2225
2107
  }
2226
2108
 
2227
- .bi-field .bi-field--affixes .bi-field--affix:last-child:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
2228
- border-top-right-radius: inherit;
2229
- border-bottom-right-radius: inherit;
2230
- border-left: 0;
2231
- padding-left: 0;
2232
- }
2233
-
2234
- .bi-field .bi-field--affixes .bi-field--affix:last-child:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
2109
+ .bi-field .bi-field--affixes .bi-field--affix:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2235
2110
  border-top-right-radius: inherit;
2236
2111
  border-bottom-right-radius: inherit;
2237
2112
  border-left: 0;
@@ -2300,7 +2175,7 @@ body:has(.bi-dialog:modal) {
2300
2175
  --bic-filter-group-background: var(--bi-basic-white);
2301
2176
  --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
2302
2177
  --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
2303
- --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
2178
+ --bic-filter-group-background-expanded: var(--bi-neutral-15);
2304
2179
  --bic-filter-group-border-color: var(--bi-neutral-15);
2305
2180
  --bic-filter-group-text-color: var(--bi-neutral-90);
2306
2181
  }
@@ -2383,7 +2258,7 @@ body:has(.bi-dialog:modal) {
2383
2258
 
2384
2259
  .bi-filter-group:last-of-type > button {
2385
2260
  border-radius: var(--bi-radius-small);
2386
- border-bottom-color: rgba(0, 0, 0, 0);
2261
+ border-bottom-color: #0000;
2387
2262
  }
2388
2263
 
2389
2264
  .bi-filter-group:last-of-type > div {
@@ -2396,7 +2271,7 @@ body:has(.bi-dialog:modal) {
2396
2271
 
2397
2272
  .bi-filter-group[data-expanded="true"] > button {
2398
2273
  border-radius: var(--bi-radius-small);
2399
- border-bottom-color: rgba(0, 0, 0, 0);
2274
+ border-bottom-color: #0000;
2400
2275
  }
2401
2276
 
2402
2277
  .bi-filter-group[data-expanded="true"] > div {
@@ -2687,26 +2562,18 @@ svg[data-color="white"] {
2687
2562
  --bic-input-font-size: 1.25rem;
2688
2563
  }
2689
2564
 
2690
- .bi-input:where(:not(:-webkit-any([type="checkbox"], [type="radio"]))):hover {
2691
- box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
2692
- }
2693
-
2694
- .bi-input:where(:not(:-webkit-any([type="checkbox"], [type="radio"]))):focus-visible {
2695
- --bic-input-border-color: var(--bi-primary-50);
2696
- }
2697
-
2698
- .bi-input:where(:not(:is([type="checkbox"], [type="radio"]))):hover {
2565
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):hover {
2699
2566
  box-shadow: var(--_bi--hover, var(--bic-input-box-shadow-hover));
2700
2567
  }
2701
2568
 
2702
- .bi-input:where(:not(:is([type="checkbox"], [type="radio"]))):focus-visible {
2569
+ .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
2703
2570
  --bic-input-border-color: var(--bi-primary-50);
2704
2571
  }
2705
2572
 
2706
2573
  .bi-input:focus-visible {
2707
2574
  outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2708
2575
  outline-offset: 0;
2709
- box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05));
2576
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2710
2577
  }
2711
2578
 
2712
2579
  .bi-input:focus-visible * {
@@ -2717,11 +2584,7 @@ svg[data-color="white"] {
2717
2584
  color: var(--bic-input-placeholder-color);
2718
2585
  }
2719
2586
 
2720
- .bi-input:not(:-webkit-any([size], [cols])) {
2721
- width: 100%;
2722
- }
2723
-
2724
- .bi-input:not(:is([size], [cols])) {
2587
+ .bi-input:not([size], [cols]) {
2725
2588
  width: 100%;
2726
2589
  }
2727
2590
 
@@ -2775,26 +2638,18 @@ svg[data-color="white"] {
2775
2638
  field-sizing: content;
2776
2639
  }
2777
2640
 
2778
- .bi-input:-webkit-any(select):not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
2779
- cursor: pointer;
2780
- }
2781
-
2782
- .bi-input:is(select):not(:is([readonly], [aria-disabled="true"], :disabled)) {
2641
+ .bi-input:-webkit-any(select):not([readonly], [aria-disabled="true"], :disabled) {
2783
2642
  cursor: pointer;
2784
2643
  }
2785
2644
 
2786
- .bi-input:is(select) {
2645
+ .bi-input:-webkit-any(select) {
2787
2646
  background-image: var(--bic-input-select-chevron);
2788
2647
  background-position: calc(100% - .5em);
2789
2648
  background-repeat: no-repeat;
2790
2649
  background-size: 1.5em;
2791
2650
  }
2792
2651
 
2793
- .bi-input:-webkit-any(select):not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
2794
- cursor: pointer;
2795
- }
2796
-
2797
- .bi-input:is(select):not(:is([readonly], [aria-disabled="true"], :disabled)) {
2652
+ .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
2798
2653
  cursor: pointer;
2799
2654
  }
2800
2655
 
@@ -2811,7 +2666,7 @@ svg[data-color="white"] {
2811
2666
  height: var(--bic-input-toggle-size);
2812
2667
  width: var(--bic-input-toggle-size);
2813
2668
  box-shadow: none;
2814
- border-width: var(--bi-stroke-default);
2669
+ border-width: var(--bi-stroke-medium);
2815
2670
  border-style: solid;
2816
2671
  border-color: var(--bic-input-border-color);
2817
2672
  background: none;
@@ -2828,11 +2683,7 @@ svg[data-color="white"] {
2828
2683
  --_bi--focus: ;
2829
2684
  }
2830
2685
 
2831
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):read-only:not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
2832
- cursor: pointer;
2833
- }
2834
-
2835
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
2686
+ .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2836
2687
  cursor: pointer;
2837
2688
  }
2838
2689
 
@@ -2908,7 +2759,7 @@ svg[data-color="white"] {
2908
2759
  height: var(--bic-input-toggle-size);
2909
2760
  width: var(--bic-input-toggle-size);
2910
2761
  box-shadow: none;
2911
- border-width: var(--bi-stroke-default);
2762
+ border-width: var(--bi-stroke-medium);
2912
2763
  border-style: solid;
2913
2764
  border-color: var(--bic-input-border-color);
2914
2765
  background: none;
@@ -2925,11 +2776,7 @@ svg[data-color="white"] {
2925
2776
  --_bi--focus: ;
2926
2777
  }
2927
2778
 
2928
- .bi-input:-webkit-any([type="checkbox"], [type="radio"]):read-only:not(:-webkit-any([readonly], [aria-disabled="true"], :disabled)) {
2929
- cursor: pointer;
2930
- }
2931
-
2932
- .bi-input:is([type="checkbox"], [type="radio"]):read-only:not(:is([readonly], [aria-disabled="true"], :disabled)) {
2779
+ .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2933
2780
  cursor: pointer;
2934
2781
  }
2935
2782
 
@@ -3030,11 +2877,7 @@ svg[data-color="white"] {
3030
2877
  color: var(--bic-label-required-color);
3031
2878
  }
3032
2879
 
3033
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
3034
- padding-right: var(--bi-scale-0-25x);
3035
- }
3036
-
3037
- .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
2880
+ .bi-label:has( ~ .bi-input:required, ~ .bi-field--affixes > .bi-input:required):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
3038
2881
  padding-right: var(--bi-scale-0-25x);
3039
2882
  }
3040
2883
 
@@ -3346,19 +3189,19 @@ svg[data-color="white"] {
3346
3189
  --bic-popover-background: var(--bi-basic-white);
3347
3190
  --bic-popover-border-width: var(--bi-stroke-thin);
3348
3191
  --bic-popover-border-style: solid;
3349
- --bic-popover-border-color: var(--bi-stroke-color-1);
3192
+ --bic-popover-border-color: var(--bi-neutral-15);
3350
3193
  --bic-popover-color: var(--bi-neutral-90);
3351
3194
  --bic-popover-border-radius: var(--bi-radius-medium);
3352
3195
  --bic-popover-max-width: 300px;
3353
3196
  --bic-popover-padding: var(--bi-scale-1x);
3354
- --bic-popover-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
3197
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
3355
3198
  }
3356
3199
 
3357
3200
  .bi-popover[data-dark="true"] {
3358
3201
  --bic-popover-background: var(--bi-neutral-95);
3359
3202
  --bic-popover-border-color: var(--bi-neutral-70);
3360
3203
  --bic-popover-color: var(--bi-neutral-5);
3361
- --bic-popover-box-shadow: 0px 8px 16px -4px rgba(38, 51, 63, .08), 4px 4px 6px -2px rgba(38, 51, 63, .03), 0px 2px 2px -1px rgba(38, 51, 63, .04);
3204
+ --bic-popover-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
3362
3205
  }
3363
3206
 
3364
3207
  .bi-popover {
@@ -3451,13 +3294,13 @@ svg[data-color="white"] {
3451
3294
  .bi-spinner {
3452
3295
  --bic-spinner-color: currentColor;
3453
3296
  aspect-ratio: 1;
3454
- background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, rgba(0, 0, 0, 0)) top / 4px 4px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 30%, var(--bic-spinner-color));
3297
+ background: radial-gradient(farthest-side, var(--bic-spinner-color) 94%, #0000) top / 4px 4px no-repeat, conic-gradient(#0000 30%, var(--bic-spinner-color));
3455
3298
  border-radius: 50%;
3456
3299
  width: 1em;
3457
3300
  height: 1em;
3458
3301
  animation: 1s linear infinite bi-spinner;
3459
- -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
3460
- mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
3302
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
3303
+ mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
3461
3304
  }
3462
3305
 
3463
3306
  @media (prefers-reduced-motion: reduce) {
@@ -3619,11 +3462,7 @@ svg[data-color="white"] {
3619
3462
  position: relative;
3620
3463
  }
3621
3464
 
3622
- .bi-validation-message:has( > svg):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
3623
- padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3624
- }
3625
-
3626
- .bi-validation-message:has( > svg):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
3465
+ .bi-validation-message:has( > svg):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3627
3466
  padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
3628
3467
  }
3629
3468