@bi-digital/css 0.11.11 → 0.12.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 (31) hide show
  1. package/dist/components/alert.css +7 -67
  2. package/dist/components/avatar.css +2 -48
  3. package/dist/components/badge.css +8 -75
  4. package/dist/components/button.css +31 -54
  5. package/dist/components/card.css +18 -81
  6. package/dist/components/checkbox-subsection.css +1 -5
  7. package/dist/components/chip.css +10 -154
  8. package/dist/components/details.css +9 -24
  9. package/dist/components/dialog.css +3 -10
  10. package/dist/components/dropdown.css +2 -11
  11. package/dist/components/field.css +14 -32
  12. package/dist/components/fieldset.css +2 -8
  13. package/dist/components/filter-group.css +8 -26
  14. package/dist/components/footer.css +16 -22
  15. package/dist/components/input.css +26 -42
  16. package/dist/components/label.css +2 -8
  17. package/dist/components/link.css +13 -33
  18. package/dist/components/logo.css +17 -11
  19. package/dist/components/navbar.css +8 -7
  20. package/dist/components/pagination.css +2 -7
  21. package/dist/components/popover.css +3 -12
  22. package/dist/components/search.css +1 -1
  23. package/dist/components/sub-navbar.css +11 -9
  24. package/dist/components/tabs.css +7 -19
  25. package/dist/components/tooltip.css +2 -2
  26. package/dist/components/validation-message.css +2 -2
  27. package/dist/components.css +223 -768
  28. package/dist/index.css +505 -8
  29. package/dist/salesforce.css +728 -776
  30. package/dist/tokens.css +505 -8
  31. package/package.json +2 -2
package/dist/tokens.css CHANGED
@@ -140,15 +140,34 @@
140
140
  --bi-scale-16x: 4rem;
141
141
  --bi-scale-18x: 4.5rem;
142
142
  --bi-scale-20x: 5rem;
143
+ --bi-scale-21x: 5.25rem;
143
144
  --bi-scale-24x: 6rem;
144
145
  --bi-scale-32x: 8rem;
145
146
  --bi-scale-36x: 9rem;
147
+ --bi-scale-38x: 9.5rem;
146
148
  --bi-scale-40x: 10rem;
147
149
  --bi-scale-48x: 12rem;
148
150
  --bi-scale-56x: 14rem;
149
151
  --bi-scale-64x: 16rem;
150
152
  --bi-scale-80x: 20rem;
153
+ --bi-scale-84x: 21rem;
154
+ --bi-scale-128x: 32rem;
151
155
  --bi-scale-max: 624.938rem;
156
+ --bi-color-primary-text-secondary: #042f5bb3;
157
+ --bi-color-info-text-secondary: #2e0b61b3;
158
+ --bi-color-warning-text-secondary: #4a3c01b3;
159
+ --bi-color-success-text-secondary: #143a16b3;
160
+ --bi-color-alert-text-secondary: #6a1b16b3;
161
+ --bi-color-stroke-basic-subtle: #0000001a;
162
+ --bi-color-stroke-basic: #0003;
163
+ --bi-color-stroke-basic-strong: #0000004d;
164
+ --bi-color-stroke-basic-contrast: #00000080;
165
+ --bi-states-hover: #26333f1a;
166
+ --bi-states-press: #26333f26;
167
+ --bi-states-hover-dark: #26333f1a;
168
+ --bi-states-hover-light: #ffffff1a;
169
+ --bi-states-press-dark: #26333f26;
170
+ --bi-states-press-light: #ffffff26;
152
171
  --bi-opacity-dark-80: #26333f33;
153
172
  --bi-opacity-dark-50: #26333f80;
154
173
  --bi-opacity-light-100: #fff0;
@@ -156,19 +175,127 @@
156
175
  --bi-opacity-light-50: #ffffff80;
157
176
  --bi-stroke-medium: .09375rem;
158
177
  --bi-elevation-25: #26333f26;
159
- --bi-font-family-plain: "museo-sans", Arial, sans-serif;
160
178
  --bi-font-family-brand: "museo-slab", serif;
179
+ --bi-font-family-plain: "museo-sans", Arial, sans-serif;
161
180
  --bi-font-weight-bold: 700;
162
181
  --bi-font-weight-regular: 500;
163
- --bi-font-color-secondary-dark-background-2: #ffffffb3;
182
+ --bi-font-color-secondary-dark-background: #ffffffb3;
164
183
  --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;
184
+ --bi-font-color-secondary-light-blue-background: #042f5bb3;
185
+ --bi-font-color-disabled-light-blue-background: #042f5bb3;
186
+ --bi-color-neutral-background: var(--bi-neutral-5);
187
+ --bi-color-neutral-surface-subtle: var(--bi-basic-white);
188
+ --bi-color-neutral-surface: var(--bi-neutral-5);
189
+ --bi-color-neutral-surface-strong: var(--bi-neutral-10);
190
+ --bi-color-neutral-surface-active: var(--bi-neutral-20);
191
+ --bi-color-neutral-stroke-subtle: var(--bi-neutral-10);
192
+ --bi-color-neutral-stroke: var(--bi-neutral-15);
193
+ --bi-color-neutral-stroke-strong: var(--bi-neutral-25);
194
+ --bi-color-neutral-stroke-contrast: var(--bi-neutral-50);
195
+ --bi-color-neutral-stroke-accent: var(--bi-primary-50);
196
+ --bi-color-neutral-text: var(--bi-neutral-95);
197
+ --bi-color-neutral-text-secondary: var(--bi-neutral-60);
198
+ --bi-color-neutral-text-subtle: var(--bi-neutral-90);
199
+ --bi-color-neutral-text-accent: var(--bi-primary-60);
200
+ --bi-color-neutral-contrast: var(--bi-neutral-90);
201
+ --bi-color-neutral-contrast-hover: var(--bi-neutral-95);
202
+ --bi-color-neutral-fill: var(--bi-neutral-50);
203
+ --bi-color-neutral-on-fill: var(--bi-basic-white);
204
+ --bi-color-primary-background: var(--bi-primary-0);
205
+ --bi-color-primary-surface-subtle: var(--bi-basic-white);
206
+ --bi-color-primary-surface: var(--bi-primary-5);
207
+ --bi-color-primary-surface-strong: var(--bi-primary-10);
208
+ --bi-color-primary-surface-active: var(--bi-primary-20);
209
+ --bi-color-primary-stroke-subtle: var(--bi-primary-10);
210
+ --bi-color-primary-stroke: var(--bi-primary-15);
211
+ --bi-color-primary-stroke-strong: var(--bi-primary-25);
212
+ --bi-color-primary-stroke-contrast: var(--bi-primary-60);
213
+ --bi-color-primary-stroke-accent: var(--bi-primary-50);
214
+ --bi-color-primary-text: var(--bi-primary-95);
215
+ --bi-color-primary-text-subtle: var(--bi-primary-90);
216
+ --bi-color-primary-text-accent: var(--bi-primary-75);
217
+ --bi-color-primary-contrast: var(--bi-primary-50);
218
+ --bi-color-primary-contrast-hover: var(--bi-primary-60);
219
+ --bi-color-primary-fill: var(--bi-primary-50);
220
+ --bi-color-primary-on-fill: var(--bi-basic-white);
221
+ --bi-color-info-background: var(--bi-info-0);
222
+ --bi-color-info-surface-subtle: var(--bi-basic-white);
223
+ --bi-color-info-surface: var(--bi-info-5);
224
+ --bi-color-info-surface-strong: var(--bi-info-10);
225
+ --bi-color-info-surface-active: var(--bi-info-20);
226
+ --bi-color-info-stroke-subtle: var(--bi-info-10);
227
+ --bi-color-info-stroke: var(--bi-info-15);
228
+ --bi-color-info-stroke-strong: var(--bi-info-25);
229
+ --bi-color-info-stroke-contrast: var(--bi-info-60);
230
+ --bi-color-info-stroke-accent: var(--bi-info-50);
231
+ --bi-color-info-text: var(--bi-info-95);
232
+ --bi-color-info-text-subtle: var(--bi-info-90);
233
+ --bi-color-info-text-accent: var(--bi-info-75);
234
+ --bi-color-info-contrast: var(--bi-info-90);
235
+ --bi-color-info-contrast-hover: var(--bi-info-95);
236
+ --bi-color-info-fill: var(--bi-info-50);
237
+ --bi-color-info-on-fill: var(--bi-basic-white);
238
+ --bi-color-warning-background: var(--bi-warning-0);
239
+ --bi-color-warning-surface-subtle: var(--bi-basic-white);
240
+ --bi-color-warning-surface: var(--bi-warning-10);
241
+ --bi-color-warning-surface-strong: var(--bi-warning-15);
242
+ --bi-color-warning-surface-active: var(--bi-warning-20);
243
+ --bi-color-warning-stroke-subtle: var(--bi-warning-10);
244
+ --bi-color-warning-stroke: var(--bi-warning-15);
245
+ --bi-color-warning-stroke-strong: var(--bi-warning-60);
246
+ --bi-color-warning-stroke-contrast: var(--bi-warning-75);
247
+ --bi-color-warning-stroke-accent: var(--bi-secondary-50);
248
+ --bi-color-warning-text: var(--bi-warning-95);
249
+ --bi-color-warning-text-subtle: var(--bi-warning-90);
250
+ --bi-color-warning-text-accent: var(--bi-warning-80);
251
+ --bi-color-warning-contrast: var(--bi-warning-90);
252
+ --bi-color-warning-contrast-hover: var(--bi-warning-95);
253
+ --bi-color-warning-fill: var(--bi-warning-75);
254
+ --bi-color-warning-on-fill: var(--bi-basic-white);
255
+ --bi-color-success-background: var(--bi-success-0);
256
+ --bi-color-success-surface-subtle: var(--bi-basic-white);
257
+ --bi-color-success-surface: var(--bi-success-5);
258
+ --bi-color-success-surface-strong: var(--bi-success-10);
259
+ --bi-color-success-surface-active: var(--bi-success-20);
260
+ --bi-color-success-stroke-subtle: var(--bi-success-10);
261
+ --bi-color-success-stroke: var(--bi-success-15);
262
+ --bi-color-success-stroke-strong: var(--bi-success-25);
263
+ --bi-color-success-stroke-contrast: var(--bi-success-60);
264
+ --bi-color-success-stroke-accent: var(--bi-success-50);
265
+ --bi-color-success-text: var(--bi-success-95);
266
+ --bi-color-success-text-subtle: var(--bi-success-90);
267
+ --bi-color-success-text-accent: var(--bi-success-75);
268
+ --bi-color-success-contrast: var(--bi-success-90);
269
+ --bi-color-success-contrast-hover: var(--bi-success-95);
270
+ --bi-color-success-fill: var(--bi-success-70);
271
+ --bi-color-success-on-fill: var(--bi-basic-white);
272
+ --bi-color-alert-background: var(--bi-alert-0);
273
+ --bi-color-alert-surface-subtle: var(--bi-basic-white);
274
+ --bi-color-alert-surface: var(--bi-alert-10);
275
+ --bi-color-alert-surface-strong: var(--bi-alert-15);
276
+ --bi-color-alert-surface-active: var(--bi-alert-20);
277
+ --bi-color-alert-stroke-subtle: var(--bi-alert-10);
278
+ --bi-color-alert-stroke: var(--bi-alert-15);
279
+ --bi-color-alert-stroke-strong: var(--bi-alert-25);
280
+ --bi-color-alert-stroke-contrast: var(--bi-alert-60);
281
+ --bi-color-alert-stroke-accent: var(--bi-alert-50);
282
+ --bi-color-alert-text: var(--bi-alert-95);
283
+ --bi-color-alert-text-subtle: var(--bi-alert-90);
284
+ --bi-color-alert-text-accent: var(--bi-alert-75);
285
+ --bi-color-alert-contrast: var(--bi-alert-90);
286
+ --bi-color-alert-contrast-hover: var(--bi-alert-95);
287
+ --bi-color-alert-fill: var(--bi-alert-60);
288
+ --bi-color-alert-on-fill: var(--bi-basic-white);
289
+ --bi-states-focus: var(--bi-primary-50);
290
+ --bi-states-focus-background: var(--bi-basic-white);
291
+ --bi-states-required: var(--bi-primary-50);
169
292
  --bi-stroke-none: var(--bi-scale-0);
170
293
  --bi-stroke-thin: var(--bi-scale-0-25x);
171
- --bi-stroke-thick: var(--bi-scale-0-50x);
294
+ --bi-stroke-thick: var(--bi-scale-0-75x);
295
+ --bi-stroke-focus: var(--bi-scale-0-75x);
296
+ --bi-stroke-subtle: var(--bi-neutral-10);
297
+ --bi-stroke-default: var(--bi-neutral-15);
298
+ --bi-stroke-strong: var(--bi-neutral-25);
172
299
  --bi-radius-none: var(--bi-scale-0);
173
300
  --bi-radius-small: var(--bi-scale-0-50x);
174
301
  --bi-radius-medium: var(--bi-scale-1x);
@@ -189,9 +316,13 @@
189
316
  --bi-font-color-secondary: var(--bi-neutral-60);
190
317
  --bi-font-color-disabled: var(--bi-neutral-50);
191
318
  --bi-font-color-accent: var(--bi-primary-60);
192
- --bi-font-color-link: var(--bi-primary-50);
319
+ --bi-font-color-strong-accent: var(--bi-primary-50);
193
320
  --bi-font-color-primary-dark-background: var(--bi-basic-white);
194
321
  --bi-font-color-accent-dark-background: var(--bi-primary-20);
322
+ --bi-font-color-strong-accent-dark-background: var(--bi-primary-30);
323
+ --bi-font-color-primary-light-blue-background: var(--bi-primary-90);
324
+ --bi-font-color-accent-light-blue-background: var(--bi-primary-75);
325
+ --bi-font-color-strong-accent-light-blue-background: var(--bi-primary-50);
195
326
  --bi-layout-navbar-height: var(--bi-scale-16x);
196
327
  --bi-font-display-large: var(--bi-font-weight-regular) 4rem/4.5rem var(--bi-font-family-brand);
197
328
  --bi-font-display-medium: var(--bi-font-weight-regular) 3rem/3.5rem var(--bi-font-family-brand);
@@ -223,3 +354,369 @@
223
354
  --bi-font-body-small: var(--bi-font-weight-regular) .8125rem/1.25rem var(--bi-font-family-plain);
224
355
  --bi-font-body-xs: var(--bi-font-weight-regular) .75rem/1.125rem var(--bi-font-family-plain);
225
356
  }
357
+
358
+ :root, [data-color-scheme="light"] {
359
+ --bi-color-neutral-background: var(--bi-neutral-5);
360
+ --bi-color-neutral-surface-subtle: var(--bi-basic-white);
361
+ --bi-color-neutral-surface: var(--bi-neutral-5);
362
+ --bi-color-neutral-surface-strong: var(--bi-neutral-10);
363
+ --bi-color-neutral-surface-active: var(--bi-neutral-20);
364
+ --bi-color-neutral-stroke-subtle: var(--bi-neutral-10);
365
+ --bi-color-neutral-stroke: var(--bi-neutral-15);
366
+ --bi-color-neutral-stroke-strong: var(--bi-neutral-25);
367
+ --bi-color-neutral-stroke-contrast: var(--bi-neutral-50);
368
+ --bi-color-neutral-stroke-accent: var(--bi-primary-50);
369
+ --bi-color-neutral-text: var(--bi-neutral-95);
370
+ --bi-color-neutral-text-secondary: var(--bi-neutral-60);
371
+ --bi-color-neutral-text-subtle: var(--bi-neutral-90);
372
+ --bi-color-neutral-text-accent: var(--bi-primary-60);
373
+ --bi-color-neutral-contrast: var(--bi-neutral-90);
374
+ --bi-color-neutral-contrast-hover: var(--bi-neutral-95);
375
+ --bi-color-neutral-fill: var(--bi-neutral-50);
376
+ --bi-color-neutral-on-fill: var(--bi-basic-white);
377
+ --bi-color-primary-background: var(--bi-primary-0);
378
+ --bi-color-primary-surface-subtle: var(--bi-basic-white);
379
+ --bi-color-primary-surface: var(--bi-primary-5);
380
+ --bi-color-primary-surface-strong: var(--bi-primary-10);
381
+ --bi-color-primary-surface-active: var(--bi-primary-20);
382
+ --bi-color-primary-stroke-subtle: var(--bi-primary-10);
383
+ --bi-color-primary-stroke: var(--bi-primary-15);
384
+ --bi-color-primary-stroke-strong: var(--bi-primary-25);
385
+ --bi-color-primary-stroke-contrast: var(--bi-primary-60);
386
+ --bi-color-primary-stroke-accent: var(--bi-primary-50);
387
+ --bi-color-primary-text: var(--bi-primary-95);
388
+ --bi-color-primary-text-secondary: #042f5bb2;
389
+ --bi-color-primary-text-subtle: var(--bi-primary-90);
390
+ --bi-color-primary-text-accent: var(--bi-primary-75);
391
+ --bi-color-primary-contrast: var(--bi-primary-50);
392
+ --bi-color-primary-contrast-hover: var(--bi-primary-60);
393
+ --bi-color-primary-fill: var(--bi-primary-50);
394
+ --bi-color-primary-on-fill: var(--bi-basic-white);
395
+ --bi-color-info-background: var(--bi-info-0);
396
+ --bi-color-info-surface-subtle: var(--bi-basic-white);
397
+ --bi-color-info-surface: var(--bi-info-5);
398
+ --bi-color-info-surface-strong: var(--bi-info-10);
399
+ --bi-color-info-surface-active: var(--bi-info-20);
400
+ --bi-color-info-stroke-subtle: var(--bi-info-10);
401
+ --bi-color-info-stroke: var(--bi-info-15);
402
+ --bi-color-info-stroke-strong: var(--bi-info-25);
403
+ --bi-color-info-stroke-contrast: var(--bi-info-60);
404
+ --bi-color-info-stroke-accent: var(--bi-info-50);
405
+ --bi-color-info-text: var(--bi-info-95);
406
+ --bi-color-info-text-secondary: #2e0b61b2;
407
+ --bi-color-info-text-subtle: var(--bi-info-90);
408
+ --bi-color-info-text-accent: var(--bi-info-75);
409
+ --bi-color-info-contrast: var(--bi-info-90);
410
+ --bi-color-info-contrast-hover: var(--bi-info-95);
411
+ --bi-color-info-fill: var(--bi-info-50);
412
+ --bi-color-info-on-fill: var(--bi-basic-white);
413
+ --bi-color-warning-background: var(--bi-warning-0);
414
+ --bi-color-warning-surface-subtle: var(--bi-basic-white);
415
+ --bi-color-warning-surface: var(--bi-warning-10);
416
+ --bi-color-warning-surface-strong: var(--bi-warning-15);
417
+ --bi-color-warning-surface-active: var(--bi-warning-20);
418
+ --bi-color-warning-stroke-subtle: var(--bi-warning-10);
419
+ --bi-color-warning-stroke: var(--bi-warning-15);
420
+ --bi-color-warning-stroke-strong: var(--bi-warning-60);
421
+ --bi-color-warning-stroke-contrast: var(--bi-warning-75);
422
+ --bi-color-warning-stroke-accent: var(--bi-secondary-50);
423
+ --bi-color-warning-text: var(--bi-warning-95);
424
+ --bi-color-warning-text-secondary: #4a3c01b2;
425
+ --bi-color-warning-text-subtle: var(--bi-warning-90);
426
+ --bi-color-warning-text-accent: var(--bi-warning-80);
427
+ --bi-color-warning-contrast: var(--bi-warning-90);
428
+ --bi-color-warning-contrast-hover: var(--bi-warning-95);
429
+ --bi-color-warning-fill: var(--bi-warning-75);
430
+ --bi-color-warning-on-fill: var(--bi-basic-white);
431
+ --bi-color-success-background: var(--bi-success-0);
432
+ --bi-color-success-surface-subtle: var(--bi-basic-white);
433
+ --bi-color-success-surface: var(--bi-success-5);
434
+ --bi-color-success-surface-strong: var(--bi-success-10);
435
+ --bi-color-success-surface-active: var(--bi-success-20);
436
+ --bi-color-success-stroke-subtle: var(--bi-success-10);
437
+ --bi-color-success-stroke: var(--bi-success-15);
438
+ --bi-color-success-stroke-strong: var(--bi-success-25);
439
+ --bi-color-success-stroke-contrast: var(--bi-success-60);
440
+ --bi-color-success-stroke-accent: var(--bi-success-50);
441
+ --bi-color-success-text: var(--bi-success-95);
442
+ --bi-color-success-text-secondary: #143a16b2;
443
+ --bi-color-success-text-subtle: var(--bi-success-90);
444
+ --bi-color-success-text-accent: var(--bi-success-75);
445
+ --bi-color-success-contrast: var(--bi-success-90);
446
+ --bi-color-success-contrast-hover: var(--bi-success-95);
447
+ --bi-color-success-fill: var(--bi-success-70);
448
+ --bi-color-success-on-fill: var(--bi-basic-white);
449
+ --bi-color-alert-background: var(--bi-alert-0);
450
+ --bi-color-alert-surface-subtle: var(--bi-basic-white);
451
+ --bi-color-alert-surface: var(--bi-alert-10);
452
+ --bi-color-alert-surface-strong: var(--bi-alert-15);
453
+ --bi-color-alert-surface-active: var(--bi-alert-20);
454
+ --bi-color-alert-stroke-subtle: var(--bi-alert-10);
455
+ --bi-color-alert-stroke: var(--bi-alert-15);
456
+ --bi-color-alert-stroke-strong: var(--bi-alert-25);
457
+ --bi-color-alert-stroke-contrast: var(--bi-alert-60);
458
+ --bi-color-alert-stroke-accent: var(--bi-alert-50);
459
+ --bi-color-alert-text: var(--bi-alert-95);
460
+ --bi-color-alert-text-secondary: #6a1b16b2;
461
+ --bi-color-alert-text-subtle: var(--bi-alert-90);
462
+ --bi-color-alert-text-accent: var(--bi-alert-75);
463
+ --bi-color-alert-contrast: var(--bi-alert-90);
464
+ --bi-color-alert-contrast-hover: var(--bi-alert-95);
465
+ --bi-color-alert-fill: var(--bi-alert-60);
466
+ --bi-color-alert-on-fill: var(--bi-basic-white);
467
+ --bi-color-stroke-basic-subtle: #0000001a;
468
+ --bi-color-stroke-basic: #0003;
469
+ --bi-color-stroke-basic-strong: #0000004d;
470
+ --bi-color-stroke-basic-contrast: #00000080;
471
+ --bi-states-hover: #26333f1a;
472
+ --bi-states-press: #26333f26;
473
+ --bi-states-focus: var(--bi-primary-50);
474
+ --bi-states-focus-background: var(--bi-basic-white);
475
+ --bi-states-required: var(--bi-primary-50);
476
+ }
477
+
478
+ [data-color-scheme="dark"] {
479
+ --bi-color-neutral-background: var(--bi-neutral-100);
480
+ --bi-color-neutral-surface-subtle: var(--bi-neutral-95);
481
+ --bi-color-neutral-surface: var(--bi-neutral-90);
482
+ --bi-color-neutral-surface-strong: var(--bi-neutral-85);
483
+ --bi-color-neutral-surface-active: var(--bi-neutral-70);
484
+ --bi-color-neutral-stroke-subtle: var(--bi-neutral-90);
485
+ --bi-color-neutral-stroke: var(--bi-neutral-85);
486
+ --bi-color-neutral-stroke-strong: var(--bi-neutral-70);
487
+ --bi-color-neutral-stroke-contrast: var(--bi-neutral-50);
488
+ --bi-color-neutral-stroke-accent: var(--bi-primary-50);
489
+ --bi-color-neutral-text: var(--bi-basic-white);
490
+ --bi-color-neutral-text-secondary: #ffffffb2;
491
+ --bi-color-neutral-text-subtle: var(--bi-neutral-15);
492
+ --bi-color-neutral-text-accent: var(--bi-primary-30);
493
+ --bi-color-neutral-contrast: var(--bi-neutral-5);
494
+ --bi-color-neutral-contrast-hover: var(--bi-neutral-15);
495
+ --bi-color-neutral-fill: var(--bi-neutral-50);
496
+ --bi-color-neutral-on-fill: var(--bi-basic-white);
497
+ --bi-color-primary-background: var(--bi-primary-100);
498
+ --bi-color-primary-surface-subtle: var(--bi-primary-95);
499
+ --bi-color-primary-surface: var(--bi-primary-90);
500
+ --bi-color-primary-surface-strong: var(--bi-primary-85);
501
+ --bi-color-primary-surface-active: var(--bi-primary-70);
502
+ --bi-color-primary-stroke-subtle: var(--bi-primary-90);
503
+ --bi-color-primary-stroke: var(--bi-primary-85);
504
+ --bi-color-primary-stroke-strong: var(--bi-primary-75);
505
+ --bi-color-primary-stroke-contrast: var(--bi-primary-30);
506
+ --bi-color-primary-stroke-accent: var(--bi-primary-50);
507
+ --bi-color-primary-text: var(--bi-basic-white);
508
+ --bi-color-primary-text-secondary: #ffffffb2;
509
+ --bi-color-primary-text-subtle: var(--bi-primary-10);
510
+ --bi-color-primary-text-accent: var(--bi-primary-30);
511
+ --bi-color-primary-contrast: var(--bi-primary-20);
512
+ --bi-color-primary-contrast-hover: var(--bi-primary-30);
513
+ --bi-color-primary-fill: var(--bi-primary-50);
514
+ --bi-color-primary-on-fill: var(--bi-basic-white);
515
+ --bi-color-info-background: var(--bi-info-100);
516
+ --bi-color-info-surface-subtle: var(--bi-info-90);
517
+ --bi-color-info-surface: var(--bi-info-90);
518
+ --bi-color-info-surface-strong: var(--bi-info-85);
519
+ --bi-color-info-surface-active: var(--bi-info-70);
520
+ --bi-color-info-stroke-subtle: var(--bi-info-90);
521
+ --bi-color-info-stroke: var(--bi-info-85);
522
+ --bi-color-info-stroke-strong: var(--bi-info-75);
523
+ --bi-color-info-stroke-contrast: var(--bi-info-40);
524
+ --bi-color-info-stroke-accent: var(--bi-info-50);
525
+ --bi-color-info-text: var(--bi-basic-white);
526
+ --bi-color-info-text-secondary: #ffffffb2;
527
+ --bi-color-info-text-subtle: var(--bi-info-15);
528
+ --bi-color-info-text-accent: var(--bi-info-25);
529
+ --bi-color-info-contrast: var(--bi-info-5);
530
+ --bi-color-info-contrast-hover: var(--bi-info-15);
531
+ --bi-color-info-fill: var(--bi-info-50);
532
+ --bi-color-info-on-fill: var(--bi-basic-white);
533
+ --bi-color-warning-background: var(--bi-warning-100);
534
+ --bi-color-warning-surface-subtle: var(--bi-warning-90);
535
+ --bi-color-warning-surface: var(--bi-warning-90);
536
+ --bi-color-warning-surface-strong: var(--bi-warning-85);
537
+ --bi-color-warning-surface-active: var(--bi-warning-70);
538
+ --bi-color-warning-stroke-subtle: var(--bi-warning-90);
539
+ --bi-color-warning-stroke: var(--bi-warning-85);
540
+ --bi-color-warning-stroke-strong: var(--bi-warning-75);
541
+ --bi-color-warning-stroke-contrast: var(--bi-warning-40);
542
+ --bi-color-warning-stroke-accent: var(--bi-secondary-50);
543
+ --bi-color-warning-text: var(--bi-basic-white);
544
+ --bi-color-warning-text-secondary: #ffffffb2;
545
+ --bi-color-warning-text-subtle: var(--bi-warning-15);
546
+ --bi-color-warning-text-accent: var(--bi-warning-50);
547
+ --bi-color-warning-contrast: var(--bi-warning-5);
548
+ --bi-color-warning-contrast-hover: var(--bi-warning-15);
549
+ --bi-color-warning-fill: var(--bi-warning-75);
550
+ --bi-color-warning-on-fill: var(--bi-basic-white);
551
+ --bi-color-success-background: var(--bi-success-100);
552
+ --bi-color-success-surface-subtle: var(--bi-success-90);
553
+ --bi-color-success-surface: var(--bi-success-90);
554
+ --bi-color-success-surface-strong: var(--bi-success-85);
555
+ --bi-color-success-surface-active: var(--bi-success-70);
556
+ --bi-color-success-stroke-subtle: var(--bi-success-90);
557
+ --bi-color-success-stroke: var(--bi-success-85);
558
+ --bi-color-success-stroke-strong: var(--bi-success-75);
559
+ --bi-color-success-stroke-contrast: var(--bi-success-40);
560
+ --bi-color-success-stroke-accent: var(--bi-success-50);
561
+ --bi-color-success-text: var(--bi-basic-white);
562
+ --bi-color-success-text-secondary: #ffffffb2;
563
+ --bi-color-success-text-subtle: var(--bi-success-10);
564
+ --bi-color-success-text-accent: var(--bi-success-25);
565
+ --bi-color-success-contrast: var(--bi-success-5);
566
+ --bi-color-success-contrast-hover: var(--bi-success-15);
567
+ --bi-color-success-fill: var(--bi-success-70);
568
+ --bi-color-success-on-fill: var(--bi-basic-white);
569
+ --bi-color-alert-background: var(--bi-alert-100);
570
+ --bi-color-alert-surface-subtle: var(--bi-alert-90);
571
+ --bi-color-alert-surface: var(--bi-alert-90);
572
+ --bi-color-alert-surface-strong: var(--bi-alert-85);
573
+ --bi-color-alert-surface-active: var(--bi-alert-70);
574
+ --bi-color-alert-stroke-subtle: var(--bi-alert-90);
575
+ --bi-color-alert-stroke: var(--bi-alert-85);
576
+ --bi-color-alert-stroke-strong: var(--bi-alert-75);
577
+ --bi-color-alert-stroke-contrast: var(--bi-alert-40);
578
+ --bi-color-alert-stroke-accent: var(--bi-alert-50);
579
+ --bi-color-alert-text: var(--bi-basic-white);
580
+ --bi-color-alert-text-secondary: #ffffffb2;
581
+ --bi-color-alert-text-subtle: var(--bi-alert-15);
582
+ --bi-color-alert-text-accent: var(--bi-alert-25);
583
+ --bi-color-alert-contrast: var(--bi-alert-5);
584
+ --bi-color-alert-contrast-hover: var(--bi-alert-15);
585
+ --bi-color-alert-fill: var(--bi-alert-60);
586
+ --bi-color-alert-on-fill: var(--bi-basic-white);
587
+ --bi-color-stroke-basic-subtle: #ffffff1a;
588
+ --bi-color-stroke-basic: #fff3;
589
+ --bi-color-stroke-basic-strong: #ffffff4d;
590
+ --bi-color-stroke-basic-contrast: #fff6;
591
+ --bi-states-hover: #ffffff1a;
592
+ --bi-states-press: #ffffff26;
593
+ --bi-states-focus: var(--bi-primary-30);
594
+ --bi-states-focus-background: var(--bi-neutral-95);
595
+ --bi-states-required: var(--bi-secondary-50);
596
+ }
597
+
598
+ :root, [data-color-scheme], [data-color="neutral"] {
599
+ --bi-color-background: var(--bi-color-neutral-background);
600
+ --bi-color-surface-subtle: var(--bi-color-neutral-surface-subtle);
601
+ --bi-color-surface: var(--bi-color-neutral-surface);
602
+ --bi-color-surface-strong: var(--bi-color-neutral-surface-strong);
603
+ --bi-color-surface-active: var(--bi-color-neutral-surface-active);
604
+ --bi-color-stroke-subtle: var(--bi-color-neutral-stroke-subtle);
605
+ --bi-color-stroke: var(--bi-color-neutral-stroke);
606
+ --bi-color-stroke-strong: var(--bi-color-neutral-stroke-strong);
607
+ --bi-color-stroke-contrast: var(--bi-color-neutral-stroke-contrast);
608
+ --bi-color-stroke-accent: var(--bi-color-neutral-stroke-accent);
609
+ --bi-color-text: var(--bi-color-neutral-text);
610
+ --bi-color-text-secondary: var(--bi-color-neutral-text-secondary);
611
+ --bi-color-text-subtle: var(--bi-color-neutral-text-subtle);
612
+ --bi-color-text-accent: var(--bi-color-neutral-text-accent);
613
+ --bi-color-contrast: var(--bi-color-neutral-contrast);
614
+ --bi-color-contrast-hover: var(--bi-color-neutral-contrast-hover);
615
+ --bi-color-fill: var(--bi-color-neutral-fill);
616
+ --bi-color-on-fill: var(--bi-color-neutral-on-fill);
617
+ }
618
+
619
+ [data-color="alert"], [data-color-scheme][data-color="alert"] {
620
+ --bi-color-background: var(--bi-color-alert-background);
621
+ --bi-color-surface-subtle: var(--bi-color-alert-surface-subtle);
622
+ --bi-color-surface: var(--bi-color-alert-surface);
623
+ --bi-color-surface-strong: var(--bi-color-alert-surface-strong);
624
+ --bi-color-surface-active: var(--bi-color-alert-surface-active);
625
+ --bi-color-stroke-subtle: var(--bi-color-alert-stroke-subtle);
626
+ --bi-color-stroke: var(--bi-color-alert-stroke);
627
+ --bi-color-stroke-strong: var(--bi-color-alert-stroke-strong);
628
+ --bi-color-stroke-contrast: var(--bi-color-alert-stroke-contrast);
629
+ --bi-color-stroke-accent: var(--bi-color-alert-stroke-accent);
630
+ --bi-color-text: var(--bi-color-alert-text);
631
+ --bi-color-text-secondary: var(--bi-color-alert-text-secondary);
632
+ --bi-color-text-subtle: var(--bi-color-alert-text-subtle);
633
+ --bi-color-text-accent: var(--bi-color-alert-text-accent);
634
+ --bi-color-contrast: var(--bi-color-alert-contrast);
635
+ --bi-color-contrast-hover: var(--bi-color-alert-contrast-hover);
636
+ --bi-color-fill: var(--bi-color-alert-fill);
637
+ --bi-color-on-fill: var(--bi-color-alert-on-fill);
638
+ }
639
+
640
+ [data-color="info"], [data-color-scheme][data-color="info"] {
641
+ --bi-color-background: var(--bi-color-info-background);
642
+ --bi-color-surface-subtle: var(--bi-color-info-surface-subtle);
643
+ --bi-color-surface: var(--bi-color-info-surface);
644
+ --bi-color-surface-strong: var(--bi-color-info-surface-strong);
645
+ --bi-color-surface-active: var(--bi-color-info-surface-active);
646
+ --bi-color-stroke-subtle: var(--bi-color-info-stroke-subtle);
647
+ --bi-color-stroke: var(--bi-color-info-stroke);
648
+ --bi-color-stroke-strong: var(--bi-color-info-stroke-strong);
649
+ --bi-color-stroke-contrast: var(--bi-color-info-stroke-contrast);
650
+ --bi-color-stroke-accent: var(--bi-color-info-stroke-accent);
651
+ --bi-color-text: var(--bi-color-info-text);
652
+ --bi-color-text-secondary: var(--bi-color-info-text-secondary);
653
+ --bi-color-text-subtle: var(--bi-color-info-text-subtle);
654
+ --bi-color-text-accent: var(--bi-color-info-text-accent);
655
+ --bi-color-contrast: var(--bi-color-info-contrast);
656
+ --bi-color-contrast-hover: var(--bi-color-info-contrast-hover);
657
+ --bi-color-fill: var(--bi-color-info-fill);
658
+ --bi-color-on-fill: var(--bi-color-info-on-fill);
659
+ }
660
+
661
+ [data-color="primary"], [data-color-scheme][data-color="primary"] {
662
+ --bi-color-background: var(--bi-color-primary-background);
663
+ --bi-color-surface-subtle: var(--bi-color-primary-surface-subtle);
664
+ --bi-color-surface: var(--bi-color-primary-surface);
665
+ --bi-color-surface-strong: var(--bi-color-primary-surface-strong);
666
+ --bi-color-surface-active: var(--bi-color-primary-surface-active);
667
+ --bi-color-stroke-subtle: var(--bi-color-primary-stroke-subtle);
668
+ --bi-color-stroke: var(--bi-color-primary-stroke);
669
+ --bi-color-stroke-strong: var(--bi-color-primary-stroke-strong);
670
+ --bi-color-stroke-contrast: var(--bi-color-primary-stroke-contrast);
671
+ --bi-color-stroke-accent: var(--bi-color-primary-stroke-accent);
672
+ --bi-color-text: var(--bi-color-primary-text);
673
+ --bi-color-text-secondary: var(--bi-color-primary-text-secondary);
674
+ --bi-color-text-subtle: var(--bi-color-primary-text-subtle);
675
+ --bi-color-text-accent: var(--bi-color-primary-text-accent);
676
+ --bi-color-contrast: var(--bi-color-primary-contrast);
677
+ --bi-color-contrast-hover: var(--bi-color-primary-contrast-hover);
678
+ --bi-color-fill: var(--bi-color-primary-fill);
679
+ --bi-color-on-fill: var(--bi-color-primary-on-fill);
680
+ }
681
+
682
+ [data-color="success"], [data-color-scheme][data-color="success"] {
683
+ --bi-color-background: var(--bi-color-success-background);
684
+ --bi-color-surface-subtle: var(--bi-color-success-surface-subtle);
685
+ --bi-color-surface: var(--bi-color-success-surface);
686
+ --bi-color-surface-strong: var(--bi-color-success-surface-strong);
687
+ --bi-color-surface-active: var(--bi-color-success-surface-active);
688
+ --bi-color-stroke-subtle: var(--bi-color-success-stroke-subtle);
689
+ --bi-color-stroke: var(--bi-color-success-stroke);
690
+ --bi-color-stroke-strong: var(--bi-color-success-stroke-strong);
691
+ --bi-color-stroke-contrast: var(--bi-color-success-stroke-contrast);
692
+ --bi-color-stroke-accent: var(--bi-color-success-stroke-accent);
693
+ --bi-color-text: var(--bi-color-success-text);
694
+ --bi-color-text-secondary: var(--bi-color-success-text-secondary);
695
+ --bi-color-text-subtle: var(--bi-color-success-text-subtle);
696
+ --bi-color-text-accent: var(--bi-color-success-text-accent);
697
+ --bi-color-contrast: var(--bi-color-success-contrast);
698
+ --bi-color-contrast-hover: var(--bi-color-success-contrast-hover);
699
+ --bi-color-fill: var(--bi-color-success-fill);
700
+ --bi-color-on-fill: var(--bi-color-success-on-fill);
701
+ }
702
+
703
+ [data-color="warning"], [data-color-scheme][data-color="warning"] {
704
+ --bi-color-background: var(--bi-color-warning-background);
705
+ --bi-color-surface-subtle: var(--bi-color-warning-surface-subtle);
706
+ --bi-color-surface: var(--bi-color-warning-surface);
707
+ --bi-color-surface-strong: var(--bi-color-warning-surface-strong);
708
+ --bi-color-surface-active: var(--bi-color-warning-surface-active);
709
+ --bi-color-stroke-subtle: var(--bi-color-warning-stroke-subtle);
710
+ --bi-color-stroke: var(--bi-color-warning-stroke);
711
+ --bi-color-stroke-strong: var(--bi-color-warning-stroke-strong);
712
+ --bi-color-stroke-contrast: var(--bi-color-warning-stroke-contrast);
713
+ --bi-color-stroke-accent: var(--bi-color-warning-stroke-accent);
714
+ --bi-color-text: var(--bi-color-warning-text);
715
+ --bi-color-text-secondary: var(--bi-color-warning-text-secondary);
716
+ --bi-color-text-subtle: var(--bi-color-warning-text-subtle);
717
+ --bi-color-text-accent: var(--bi-color-warning-text-accent);
718
+ --bi-color-contrast: var(--bi-color-warning-contrast);
719
+ --bi-color-contrast-hover: var(--bi-color-warning-contrast-hover);
720
+ --bi-color-fill: var(--bi-color-warning-fill);
721
+ --bi-color-on-fill: var(--bi-color-warning-on-fill);
722
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.11.11",
4
+ "version": "0.12.0",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -30,7 +30,7 @@
30
30
  "browserslist": "^4.28.1",
31
31
  "lightningcss": "^1.32.0",
32
32
  "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.11.11"
33
+ "@bi-digital/tokens": "0.12.0"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",