@bi-digital/css 0.12.2 → 0.12.4

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/card.css +41 -6
  2. package/dist/components/spinner.css +0 -8
  3. package/dist/components/tooltip.css +2 -1
  4. package/dist/components.css +43 -15
  5. package/dist/index.css +12 -12
  6. package/dist/salesforce.css +55 -27
  7. package/dist/tokens.css +12 -12
  8. package/package.json +5 -5
package/dist/components/card.css CHANGED
@@ -17,7 +17,13 @@
17
17
  --bic-card-actions-icon-color: var(--bi-color-contrast);
18
18
  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
19
19
  --bic-card-box-shadow-hover-color: #0000000d;
20
+ --bic-card-box-shadow-hover: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
21
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
22
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
20
23
  --bic-card-box-shadow-active-color: #0000000d;
24
+ --bic-card-box-shadow-active: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
25
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
26
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
21
27
  width: 100%;
22
28
  box-shadow: var(--bic-card-box-shadow);
23
29
  border-radius: var(--bic-card-border-radius);
@@ -127,16 +133,12 @@
127
133
 
128
134
  @media (hover: hover) and (pointer: fine) {
129
135
  &:hover {
130
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
131
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
132
- 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
136
+ box-shadow: var(--bic-card-box-shadow-hover);
133
137
  }
134
138
  }
135
139
 
136
140
  &:active {
137
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
138
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
139
- 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
141
+ box-shadow: var(--bic-card-box-shadow-active);
140
142
  }
141
143
  }
142
144
 
@@ -146,6 +148,33 @@
146
148
  }
147
149
  }
148
150
 
151
+ &[data-clickdelegatefor]:not([data-clickdelegatefor=""]), & .bi-card--content[data-clickdelegatefor]:not([data-clickdelegatefor=""]) {
152
+ cursor: pointer;
153
+ transition: box-shadow .25s ease-in-out;
154
+ position: relative;
155
+
156
+ @media (hover: hover) and (pointer: fine) {
157
+ &:has(.\:click-delegate-hover) {
158
+ box-shadow: var(--bic-card-box-shadow-hover);
159
+ }
160
+ }
161
+
162
+ &:has(.\:click-delegate-hover):active {
163
+ box-shadow: var(--bic-card-box-shadow-active);
164
+ }
165
+
166
+ &:has(.bi-card--header-title :is(a, button):focus-visible) {
167
+ box-shadow: var(--bic-card-box-shadow),
168
+ 0 0 0 4.5px var(--bi-states-focus-background);
169
+ outline: 3px solid var(--bi-states-focus);
170
+ outline-offset: 2px;
171
+
172
+ & * {
173
+ --_bi--focus: ;
174
+ }
175
+ }
176
+ }
177
+
149
178
  & .bi-card--actions {
150
179
  flex-direction: var(--bic-card-actions-flex-direction, column);
151
180
  justify-content: center;
@@ -218,6 +247,12 @@
218
247
  display: -webkit-box;
219
248
  overflow: hidden;
220
249
 
250
+ & a {
251
+ color: inherit;
252
+ outline: none;
253
+ text-decoration: none;
254
+ }
255
+
221
256
  @media (width < 768px) {
222
257
  font: var(--bi-font-title-bold-xs);
223
258
  }
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
@@ -343,7 +343,13 @@
343
343
  --bic-card-actions-icon-color: var(--bi-color-contrast);
344
344
  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
345
345
  --bic-card-box-shadow-hover-color: #0000000d;
346
+ --bic-card-box-shadow-hover: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
347
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
348
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
346
349
  --bic-card-box-shadow-active-color: #0000000d;
350
+ --bic-card-box-shadow-active: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
351
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
352
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
347
353
  width: 100%;
348
354
  box-shadow: var(--bic-card-box-shadow);
349
355
  border-radius: var(--bic-card-border-radius);
@@ -453,16 +459,12 @@
453
459
 
454
460
  @media (hover: hover) and (pointer: fine) {
455
461
  &:hover {
456
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
457
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
458
- 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
462
+ box-shadow: var(--bic-card-box-shadow-hover);
459
463
  }
460
464
  }
461
465
 
462
466
  &:active {
463
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
464
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
465
- 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
467
+ box-shadow: var(--bic-card-box-shadow-active);
466
468
  }
467
469
  }
468
470
 
@@ -472,6 +474,33 @@
472
474
  }
473
475
  }
474
476
 
477
+ &[data-clickdelegatefor]:not([data-clickdelegatefor=""]), & .bi-card--content[data-clickdelegatefor]:not([data-clickdelegatefor=""]) {
478
+ cursor: pointer;
479
+ transition: box-shadow .25s ease-in-out;
480
+ position: relative;
481
+
482
+ @media (hover: hover) and (pointer: fine) {
483
+ &:has(.\:click-delegate-hover) {
484
+ box-shadow: var(--bic-card-box-shadow-hover);
485
+ }
486
+ }
487
+
488
+ &:has(.\:click-delegate-hover):active {
489
+ box-shadow: var(--bic-card-box-shadow-active);
490
+ }
491
+
492
+ &:has(.bi-card--header-title :is(a, button):focus-visible) {
493
+ box-shadow: var(--bic-card-box-shadow),
494
+ 0 0 0 4.5px var(--bi-states-focus-background);
495
+ outline: 3px solid var(--bi-states-focus);
496
+ outline-offset: 2px;
497
+
498
+ & * {
499
+ --_bi--focus: ;
500
+ }
501
+ }
502
+ }
503
+
475
504
  & .bi-card--actions {
476
505
  flex-direction: var(--bic-card-actions-flex-direction, column);
477
506
  justify-content: center;
@@ -544,6 +573,12 @@
544
573
  display: -webkit-box;
545
574
  overflow: hidden;
546
575
 
576
+ & a {
577
+ color: inherit;
578
+ outline: none;
579
+ text-decoration: none;
580
+ }
581
+
547
582
  @media (width < 768px) {
548
583
  font: var(--bi-font-title-bold-xs);
549
584
  }
@@ -2210,14 +2245,6 @@ svg {
2210
2245
  animation-duration: 6s;
2211
2246
  }
2212
2247
 
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
2248
  &[data-size="2xl"] {
2222
2249
  font-size: var(--bi-scale-12x);
2223
2250
  }
@@ -2373,11 +2400,12 @@ svg {
2373
2400
 
2374
2401
  .bi-tooltip {
2375
2402
  --_ds-floating: var(--bic-tooltip-placement);
2403
+ --bic-tooltip-shift-size: var(--bi-scale-2x);
2404
+ --_ds-floating-arrow-size: var(--bic-tooltip-shift-size);
2376
2405
  --bic-tooltip-background: var(--bi-color-surface);
2377
2406
  --bic-tooltip-color: var(--bi-color-text);
2378
2407
  --bic-tooltip-border-radius: var(--bi-radius-medium);
2379
2408
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
2380
- --bic-tooltip-shift-size: var(--bi-scale-2x);
2381
2409
  --bic-tooltip-placement: top;
2382
2410
  background: var(--bic-tooltip-background);
2383
2411
  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);
@@ -1066,7 +1066,13 @@
1066
1066
  --bic-card-actions-icon-color: var(--bi-color-contrast);
1067
1067
  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
1068
1068
  --bic-card-box-shadow-hover-color: #0000000d;
1069
+ --bic-card-box-shadow-hover: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
1070
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
1071
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1069
1072
  --bic-card-box-shadow-active-color: #0000000d;
1073
+ --bic-card-box-shadow-active: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
1074
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
1075
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1070
1076
  width: 100%;
1071
1077
  box-shadow: var(--bic-card-box-shadow);
1072
1078
  border-radius: var(--bic-card-border-radius);
@@ -1176,16 +1182,12 @@
1176
1182
 
1177
1183
  @media (hover: hover) and (pointer: fine) {
1178
1184
  &:hover {
1179
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
1180
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
1181
- 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1185
+ box-shadow: var(--bic-card-box-shadow-hover);
1182
1186
  }
1183
1187
  }
1184
1188
 
1185
1189
  &:active {
1186
- box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
1187
- 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
1188
- 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1190
+ box-shadow: var(--bic-card-box-shadow-active);
1189
1191
  }
1190
1192
  }
1191
1193
 
@@ -1195,6 +1197,33 @@
1195
1197
  }
1196
1198
  }
1197
1199
 
1200
+ &[data-clickdelegatefor]:not([data-clickdelegatefor=""]), & .bi-card--content[data-clickdelegatefor]:not([data-clickdelegatefor=""]) {
1201
+ cursor: pointer;
1202
+ transition: box-shadow .25s ease-in-out;
1203
+ position: relative;
1204
+
1205
+ @media (hover: hover) and (pointer: fine) {
1206
+ &:has(.\:click-delegate-hover) {
1207
+ box-shadow: var(--bic-card-box-shadow-hover);
1208
+ }
1209
+ }
1210
+
1211
+ &:has(.\:click-delegate-hover):active {
1212
+ box-shadow: var(--bic-card-box-shadow-active);
1213
+ }
1214
+
1215
+ &:has(.bi-card--header-title :is(a, button):focus-visible) {
1216
+ box-shadow: var(--bic-card-box-shadow),
1217
+ 0 0 0 4.5px var(--bi-states-focus-background);
1218
+ outline: 3px solid var(--bi-states-focus);
1219
+ outline-offset: 2px;
1220
+
1221
+ & * {
1222
+ --_bi--focus: ;
1223
+ }
1224
+ }
1225
+ }
1226
+
1198
1227
  & .bi-card--actions {
1199
1228
  flex-direction: var(--bic-card-actions-flex-direction, column);
1200
1229
  justify-content: center;
@@ -1267,6 +1296,12 @@
1267
1296
  display: -webkit-box;
1268
1297
  overflow: hidden;
1269
1298
 
1299
+ & a {
1300
+ color: inherit;
1301
+ outline: none;
1302
+ text-decoration: none;
1303
+ }
1304
+
1270
1305
  @media (width < 768px) {
1271
1306
  font: var(--bi-font-title-bold-xs);
1272
1307
  }
@@ -2933,14 +2968,6 @@ svg {
2933
2968
  animation-duration: 6s;
2934
2969
  }
2935
2970
 
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
2971
  &[data-size="2xl"] {
2945
2972
  font-size: var(--bi-scale-12x);
2946
2973
  }
@@ -3096,11 +3123,12 @@ svg {
3096
3123
 
3097
3124
  .bi-tooltip {
3098
3125
  --_ds-floating: var(--bic-tooltip-placement);
3126
+ --bic-tooltip-shift-size: var(--bi-scale-2x);
3127
+ --_ds-floating-arrow-size: var(--bic-tooltip-shift-size);
3099
3128
  --bic-tooltip-background: var(--bi-color-surface);
3100
3129
  --bic-tooltip-color: var(--bi-color-text);
3101
3130
  --bic-tooltip-border-radius: var(--bi-radius-medium);
3102
3131
  --bic-tooltip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
3103
- --bic-tooltip-shift-size: var(--bi-scale-2x);
3104
3132
  --bic-tooltip-placement: top;
3105
3133
  background: var(--bic-tooltip-background);
3106
3134
  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.4",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -27,10 +27,10 @@
27
27
  "/dist"
28
28
  ],
29
29
  "devDependencies": {
30
- "browserslist": "^4.28.1",
31
- "lightningcss": "^1.32.0",
32
- "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.12.2"
30
+ "browserslist": "4.28.4",
31
+ "lightningcss": "1.33.0",
32
+ "modern-normalize": "3.0.1",
33
+ "@bi-digital/tokens": "0.12.4"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",