@bi-digital/css 0.12.2 → 0.12.3

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 (7) hide show
  1. package/dist/components/spinner.css +0 -8
  2. package/dist/components/tooltip.css +2 -1
  3. package/dist/components.css +2 -9
  4. package/dist/index.css +12 -12
  5. package/dist/salesforce.css +14 -21
  6. package/dist/tokens.css +12 -12
  7. package/package.json +2 -2
package/dist/components/spinner.css CHANGED
@@ -14,14 +14,6 @@
14
14
  animation-duration: 6s;
15
15
  }
16
16
 
17
- &[data-color="inherit"] {
18
- --bic-spinner-color: currentColor;
19
- }
20
-
21
- &[data-color="black"] {
22
- --bic-spinner-color: var(--bi-basic-key);
23
- }
24
-
25
17
  &[data-size="2xl"] {
26
18
  font-size: var(--bi-scale-12x);
27
19
  }
package/dist/components/tooltip.css CHANGED
@@ -1,10 +1,11 @@
1
1
  .bi-tooltip {
2
2
  --_ds-floating: var(--bic-tooltip-placement);
3
+ --bic-tooltip-shift-size: var(--bi-scale-2x);
4
+ --_ds-floating-arrow-size: var(--bic-tooltip-shift-size);
3
5
  --bic-tooltip-background: var(--bi-color-surface);
4
6
  --bic-tooltip-color: var(--bi-color-text);
5
7
  --bic-tooltip-border-radius: var(--bi-radius-medium);
6
8
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
7
- --bic-tooltip-shift-size: var(--bi-scale-2x);
8
9
  --bic-tooltip-placement: top;
9
10
  background: var(--bic-tooltip-background);
10
11
  border-radius: var(--bic-tooltip-border-radius);
package/dist/components.css CHANGED
@@ -2210,14 +2210,6 @@ svg {
2210
2210
  animation-duration: 6s;
2211
2211
  }
2212
2212
 
2213
- &[data-color="inherit"] {
2214
- --bic-spinner-color: currentColor;
2215
- }
2216
-
2217
- &[data-color="black"] {
2218
- --bic-spinner-color: var(--bi-basic-key);
2219
- }
2220
-
2221
2213
  &[data-size="2xl"] {
2222
2214
  font-size: var(--bi-scale-12x);
2223
2215
  }
@@ -2373,11 +2365,12 @@ svg {
2373
2365
 
2374
2366
  .bi-tooltip {
2375
2367
  --_ds-floating: var(--bic-tooltip-placement);
2368
+ --bic-tooltip-shift-size: var(--bi-scale-2x);
2369
+ --_ds-floating-arrow-size: var(--bic-tooltip-shift-size);
2376
2370
  --bic-tooltip-background: var(--bi-color-surface);
2377
2371
  --bic-tooltip-color: var(--bi-color-text);
2378
2372
  --bic-tooltip-border-radius: var(--bi-radius-medium);
2379
2373
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
2380
- --bic-tooltip-shift-size: var(--bi-scale-2x);
2381
2374
  --bic-tooltip-placement: top;
2382
2375
  background: var(--bic-tooltip-background);
2383
2376
  border-radius: var(--bic-tooltip-border-radius);
package/dist/index.css CHANGED
@@ -238,8 +238,8 @@
238
238
  --bi-color-info-on-fill: var(--bi-basic-white);
239
239
  --bi-color-warning-background: var(--bi-warning-0);
240
240
  --bi-color-warning-surface-subtle: var(--bi-basic-white);
241
- --bi-color-warning-surface: var(--bi-warning-10);
242
- --bi-color-warning-surface-strong: var(--bi-warning-15);
241
+ --bi-color-warning-surface: var(--bi-warning-5);
242
+ --bi-color-warning-surface-strong: var(--bi-warning-10);
243
243
  --bi-color-warning-surface-active: var(--bi-warning-20);
244
244
  --bi-color-warning-stroke-subtle: var(--bi-warning-10);
245
245
  --bi-color-warning-stroke: var(--bi-warning-15);
@@ -272,8 +272,8 @@
272
272
  --bi-color-success-on-fill: var(--bi-basic-white);
273
273
  --bi-color-alert-background: var(--bi-alert-0);
274
274
  --bi-color-alert-surface-subtle: var(--bi-basic-white);
275
- --bi-color-alert-surface: var(--bi-alert-10);
276
- --bi-color-alert-surface-strong: var(--bi-alert-15);
275
+ --bi-color-alert-surface: var(--bi-alert-5);
276
+ --bi-color-alert-surface-strong: var(--bi-alert-10);
277
277
  --bi-color-alert-surface-active: var(--bi-alert-20);
278
278
  --bi-color-alert-stroke-subtle: var(--bi-alert-10);
279
279
  --bi-color-alert-stroke: var(--bi-alert-15);
@@ -357,6 +357,10 @@
357
357
  }
358
358
 
359
359
  :root, [data-color-scheme="light"] {
360
+ --bi-color-stroke-basic-subtle: #0000001a;
361
+ --bi-color-stroke-basic: #0003;
362
+ --bi-color-stroke-basic-strong: #0000004d;
363
+ --bi-color-stroke-basic-contrast: #00000080;
360
364
  --bi-color-neutral-background: var(--bi-neutral-5);
361
365
  --bi-color-neutral-surface-subtle: var(--bi-basic-white);
362
366
  --bi-color-neutral-surface: var(--bi-neutral-5);
@@ -413,8 +417,8 @@
413
417
  --bi-color-info-on-fill: var(--bi-basic-white);
414
418
  --bi-color-warning-background: var(--bi-warning-0);
415
419
  --bi-color-warning-surface-subtle: var(--bi-basic-white);
416
- --bi-color-warning-surface: var(--bi-warning-10);
417
- --bi-color-warning-surface-strong: var(--bi-warning-15);
420
+ --bi-color-warning-surface: var(--bi-warning-5);
421
+ --bi-color-warning-surface-strong: var(--bi-warning-10);
418
422
  --bi-color-warning-surface-active: var(--bi-warning-20);
419
423
  --bi-color-warning-stroke-subtle: var(--bi-warning-10);
420
424
  --bi-color-warning-stroke: var(--bi-warning-15);
@@ -449,8 +453,8 @@
449
453
  --bi-color-success-on-fill: var(--bi-basic-white);
450
454
  --bi-color-alert-background: var(--bi-alert-0);
451
455
  --bi-color-alert-surface-subtle: var(--bi-basic-white);
452
- --bi-color-alert-surface: var(--bi-alert-10);
453
- --bi-color-alert-surface-strong: var(--bi-alert-15);
456
+ --bi-color-alert-surface: var(--bi-alert-5);
457
+ --bi-color-alert-surface-strong: var(--bi-alert-10);
454
458
  --bi-color-alert-surface-active: var(--bi-alert-20);
455
459
  --bi-color-alert-stroke-subtle: var(--bi-alert-10);
456
460
  --bi-color-alert-stroke: var(--bi-alert-15);
@@ -465,10 +469,6 @@
465
469
  --bi-color-alert-contrast-hover: var(--bi-alert-95);
466
470
  --bi-color-alert-fill: var(--bi-alert-60);
467
471
  --bi-color-alert-on-fill: var(--bi-basic-white);
468
- --bi-color-stroke-basic-subtle: #0000001a;
469
- --bi-color-stroke-basic: #0003;
470
- --bi-color-stroke-basic-strong: #0000004d;
471
- --bi-color-stroke-basic-contrast: #00000080;
472
472
  --bi-states-hover: #26333f1a;
473
473
  --bi-states-press: #26333f26;
474
474
  --bi-states-focus: var(--bi-primary-50);
package/dist/salesforce.css CHANGED
@@ -237,8 +237,8 @@
237
237
  --bi-color-info-on-fill: var(--bi-basic-white);
238
238
  --bi-color-warning-background: var(--bi-warning-0);
239
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);
240
+ --bi-color-warning-surface: var(--bi-warning-5);
241
+ --bi-color-warning-surface-strong: var(--bi-warning-10);
242
242
  --bi-color-warning-surface-active: var(--bi-warning-20);
243
243
  --bi-color-warning-stroke-subtle: var(--bi-warning-10);
244
244
  --bi-color-warning-stroke: var(--bi-warning-15);
@@ -271,8 +271,8 @@
271
271
  --bi-color-success-on-fill: var(--bi-basic-white);
272
272
  --bi-color-alert-background: var(--bi-alert-0);
273
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);
274
+ --bi-color-alert-surface: var(--bi-alert-5);
275
+ --bi-color-alert-surface-strong: var(--bi-alert-10);
276
276
  --bi-color-alert-surface-active: var(--bi-alert-20);
277
277
  --bi-color-alert-stroke-subtle: var(--bi-alert-10);
278
278
  --bi-color-alert-stroke: var(--bi-alert-15);
@@ -356,6 +356,10 @@
356
356
  }
357
357
 
358
358
  :root, [data-color-scheme="light"] {
359
+ --bi-color-stroke-basic-subtle: #0000001a;
360
+ --bi-color-stroke-basic: #0003;
361
+ --bi-color-stroke-basic-strong: #0000004d;
362
+ --bi-color-stroke-basic-contrast: #00000080;
359
363
  --bi-color-neutral-background: var(--bi-neutral-5);
360
364
  --bi-color-neutral-surface-subtle: var(--bi-basic-white);
361
365
  --bi-color-neutral-surface: var(--bi-neutral-5);
@@ -412,8 +416,8 @@
412
416
  --bi-color-info-on-fill: var(--bi-basic-white);
413
417
  --bi-color-warning-background: var(--bi-warning-0);
414
418
  --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);
419
+ --bi-color-warning-surface: var(--bi-warning-5);
420
+ --bi-color-warning-surface-strong: var(--bi-warning-10);
417
421
  --bi-color-warning-surface-active: var(--bi-warning-20);
418
422
  --bi-color-warning-stroke-subtle: var(--bi-warning-10);
419
423
  --bi-color-warning-stroke: var(--bi-warning-15);
@@ -448,8 +452,8 @@
448
452
  --bi-color-success-on-fill: var(--bi-basic-white);
449
453
  --bi-color-alert-background: var(--bi-alert-0);
450
454
  --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);
455
+ --bi-color-alert-surface: var(--bi-alert-5);
456
+ --bi-color-alert-surface-strong: var(--bi-alert-10);
453
457
  --bi-color-alert-surface-active: var(--bi-alert-20);
454
458
  --bi-color-alert-stroke-subtle: var(--bi-alert-10);
455
459
  --bi-color-alert-stroke: var(--bi-alert-15);
@@ -464,10 +468,6 @@
464
468
  --bi-color-alert-contrast-hover: var(--bi-alert-95);
465
469
  --bi-color-alert-fill: var(--bi-alert-60);
466
470
  --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
471
  --bi-states-hover: #26333f1a;
472
472
  --bi-states-press: #26333f26;
473
473
  --bi-states-focus: var(--bi-primary-50);
@@ -2933,14 +2933,6 @@ svg {
2933
2933
  animation-duration: 6s;
2934
2934
  }
2935
2935
 
2936
- &[data-color="inherit"] {
2937
- --bic-spinner-color: currentColor;
2938
- }
2939
-
2940
- &[data-color="black"] {
2941
- --bic-spinner-color: var(--bi-basic-key);
2942
- }
2943
-
2944
2936
  &[data-size="2xl"] {
2945
2937
  font-size: var(--bi-scale-12x);
2946
2938
  }
@@ -3096,11 +3088,12 @@ svg {
3096
3088
 
3097
3089
  .bi-tooltip {
3098
3090
  --_ds-floating: var(--bic-tooltip-placement);
3091
+ --bic-tooltip-shift-size: var(--bi-scale-2x);
3092
+ --_ds-floating-arrow-size: var(--bic-tooltip-shift-size);
3099
3093
  --bic-tooltip-background: var(--bi-color-surface);
3100
3094
  --bic-tooltip-color: var(--bi-color-text);
3101
3095
  --bic-tooltip-border-radius: var(--bi-radius-medium);
3102
3096
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
3103
- --bic-tooltip-shift-size: var(--bi-scale-2x);
3104
3097
  --bic-tooltip-placement: top;
3105
3098
  background: var(--bic-tooltip-background);
3106
3099
  border-radius: var(--bic-tooltip-border-radius);
package/dist/tokens.css CHANGED
@@ -237,8 +237,8 @@
237
237
  --bi-color-info-on-fill: var(--bi-basic-white);
238
238
  --bi-color-warning-background: var(--bi-warning-0);
239
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);
240
+ --bi-color-warning-surface: var(--bi-warning-5);
241
+ --bi-color-warning-surface-strong: var(--bi-warning-10);
242
242
  --bi-color-warning-surface-active: var(--bi-warning-20);
243
243
  --bi-color-warning-stroke-subtle: var(--bi-warning-10);
244
244
  --bi-color-warning-stroke: var(--bi-warning-15);
@@ -271,8 +271,8 @@
271
271
  --bi-color-success-on-fill: var(--bi-basic-white);
272
272
  --bi-color-alert-background: var(--bi-alert-0);
273
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);
274
+ --bi-color-alert-surface: var(--bi-alert-5);
275
+ --bi-color-alert-surface-strong: var(--bi-alert-10);
276
276
  --bi-color-alert-surface-active: var(--bi-alert-20);
277
277
  --bi-color-alert-stroke-subtle: var(--bi-alert-10);
278
278
  --bi-color-alert-stroke: var(--bi-alert-15);
@@ -356,6 +356,10 @@
356
356
  }
357
357
 
358
358
  :root, [data-color-scheme="light"] {
359
+ --bi-color-stroke-basic-subtle: #0000001a;
360
+ --bi-color-stroke-basic: #0003;
361
+ --bi-color-stroke-basic-strong: #0000004d;
362
+ --bi-color-stroke-basic-contrast: #00000080;
359
363
  --bi-color-neutral-background: var(--bi-neutral-5);
360
364
  --bi-color-neutral-surface-subtle: var(--bi-basic-white);
361
365
  --bi-color-neutral-surface: var(--bi-neutral-5);
@@ -412,8 +416,8 @@
412
416
  --bi-color-info-on-fill: var(--bi-basic-white);
413
417
  --bi-color-warning-background: var(--bi-warning-0);
414
418
  --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);
419
+ --bi-color-warning-surface: var(--bi-warning-5);
420
+ --bi-color-warning-surface-strong: var(--bi-warning-10);
417
421
  --bi-color-warning-surface-active: var(--bi-warning-20);
418
422
  --bi-color-warning-stroke-subtle: var(--bi-warning-10);
419
423
  --bi-color-warning-stroke: var(--bi-warning-15);
@@ -448,8 +452,8 @@
448
452
  --bi-color-success-on-fill: var(--bi-basic-white);
449
453
  --bi-color-alert-background: var(--bi-alert-0);
450
454
  --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);
455
+ --bi-color-alert-surface: var(--bi-alert-5);
456
+ --bi-color-alert-surface-strong: var(--bi-alert-10);
453
457
  --bi-color-alert-surface-active: var(--bi-alert-20);
454
458
  --bi-color-alert-stroke-subtle: var(--bi-alert-10);
455
459
  --bi-color-alert-stroke: var(--bi-alert-15);
@@ -464,10 +468,6 @@
464
468
  --bi-color-alert-contrast-hover: var(--bi-alert-95);
465
469
  --bi-color-alert-fill: var(--bi-alert-60);
466
470
  --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
471
  --bi-states-hover: #26333f1a;
472
472
  --bi-states-press: #26333f26;
473
473
  --bi-states-focus: var(--bi-primary-50);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.12.2",
4
+ "version": "0.12.3",
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.12.2"
33
+ "@bi-digital/tokens": "0.12.3"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",