@bi-digital/css 0.12.1 → 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 (8) hide show
  1. package/dist/components/dialog.css +6 -0
  2. package/dist/components/spinner.css +0 -8
  3. package/dist/components/tooltip.css +2 -1
  4. package/dist/components.css +12 -9
  5. package/dist/index.css +12 -12
  6. package/dist/salesforce.css +24 -21
  7. package/dist/tokens.css +12 -12
  8. package/package.json +2 -2
package/dist/components/dialog.css CHANGED
@@ -102,6 +102,12 @@
102
102
  }
103
103
  }
104
104
 
105
+ & .bi-dialog--close {
106
+ &.bi-button[data-variant="text"] {
107
+ --bic-button-color: var(--bi-color-text-secondary);
108
+ }
109
+ }
110
+
105
111
  & > button.bi-dialog--close {
106
112
  top: var(--bic-dialog-icon-spacing);
107
113
  right: var(--bic-dialog-icon-spacing);
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
@@ -915,6 +915,12 @@ details.bi-details {
915
915
  }
916
916
  }
917
917
 
918
+ & .bi-dialog--close {
919
+ &.bi-button[data-variant="text"] {
920
+ --bic-button-color: var(--bi-color-text-secondary);
921
+ }
922
+ }
923
+
918
924
  & > button.bi-dialog--close {
919
925
  top: var(--bic-dialog-icon-spacing);
920
926
  right: var(--bic-dialog-icon-spacing);
@@ -2204,14 +2210,6 @@ svg {
2204
2210
  animation-duration: 6s;
2205
2211
  }
2206
2212
 
2207
- &[data-color="inherit"] {
2208
- --bic-spinner-color: currentColor;
2209
- }
2210
-
2211
- &[data-color="black"] {
2212
- --bic-spinner-color: var(--bi-basic-key);
2213
- }
2214
-
2215
2213
  &[data-size="2xl"] {
2216
2214
  font-size: var(--bi-scale-12x);
2217
2215
  }
@@ -2367,11 +2365,12 @@ svg {
2367
2365
 
2368
2366
  .bi-tooltip {
2369
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);
2370
2370
  --bic-tooltip-background: var(--bi-color-surface);
2371
2371
  --bic-tooltip-color: var(--bi-color-text);
2372
2372
  --bic-tooltip-border-radius: var(--bi-radius-medium);
2373
2373
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
2374
- --bic-tooltip-shift-size: var(--bi-scale-2x);
2375
2374
  --bic-tooltip-placement: top;
2376
2375
  background: var(--bic-tooltip-background);
2377
2376
  border-radius: var(--bic-tooltip-border-radius);
@@ -2480,6 +2479,10 @@ html {
2480
2479
  }
2481
2480
 
2482
2481
  &:has(.bi-navbar[data-fixed="true"]) {
2482
+ & .bi-sub-navbar[data-fixed="true"]:not([data-scroll-dir]) {
2483
+ top: var(--bi-layout-navbar-height);
2484
+ }
2485
+
2483
2486
  &:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) {
2484
2487
  & .bi-navbar > header {
2485
2488
  transform: translateY(0);
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);
@@ -1638,6 +1638,12 @@ details.bi-details {
1638
1638
  }
1639
1639
  }
1640
1640
 
1641
+ & .bi-dialog--close {
1642
+ &.bi-button[data-variant="text"] {
1643
+ --bic-button-color: var(--bi-color-text-secondary);
1644
+ }
1645
+ }
1646
+
1641
1647
  & > button.bi-dialog--close {
1642
1648
  top: var(--bic-dialog-icon-spacing);
1643
1649
  right: var(--bic-dialog-icon-spacing);
@@ -2927,14 +2933,6 @@ svg {
2927
2933
  animation-duration: 6s;
2928
2934
  }
2929
2935
 
2930
- &[data-color="inherit"] {
2931
- --bic-spinner-color: currentColor;
2932
- }
2933
-
2934
- &[data-color="black"] {
2935
- --bic-spinner-color: var(--bi-basic-key);
2936
- }
2937
-
2938
2936
  &[data-size="2xl"] {
2939
2937
  font-size: var(--bi-scale-12x);
2940
2938
  }
@@ -3090,11 +3088,12 @@ svg {
3090
3088
 
3091
3089
  .bi-tooltip {
3092
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);
3093
3093
  --bic-tooltip-background: var(--bi-color-surface);
3094
3094
  --bic-tooltip-color: var(--bi-color-text);
3095
3095
  --bic-tooltip-border-radius: var(--bi-radius-medium);
3096
3096
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
3097
- --bic-tooltip-shift-size: var(--bi-scale-2x);
3098
3097
  --bic-tooltip-placement: top;
3099
3098
  background: var(--bic-tooltip-background);
3100
3099
  border-radius: var(--bic-tooltip-border-radius);
@@ -3203,6 +3202,10 @@ html {
3203
3202
  }
3204
3203
 
3205
3204
  &:has(.bi-navbar[data-fixed="true"]) {
3205
+ & .bi-sub-navbar[data-fixed="true"]:not([data-scroll-dir]) {
3206
+ top: var(--bi-layout-navbar-height);
3207
+ }
3208
+
3206
3209
  &:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) {
3207
3210
  & .bi-navbar > header {
3208
3211
  transform: translateY(0);
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.1",
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.1"
33
+ "@bi-digital/tokens": "0.12.3"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",