@bi-digital/css 0.12.3 → 0.12.5

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/card.css +41 -6
  2. package/dist/components/link.css +10 -18
  3. package/dist/components.css +51 -24
  4. package/dist/index.css +11 -35
  5. package/dist/salesforce.css +62 -59
  6. package/dist/tokens.css +11 -35
  7. 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/link.css CHANGED
@@ -1,20 +1,18 @@
1
1
  .bi-link {
2
- --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
3
2
  --bic-link-color: var(--bi-color-primary-contrast);
4
- --bic-link-text-decoration-thickness--hover: .125em;
5
- --bic-link-text-decoration-thickness: .0625em;
6
3
 
7
4
  &[data-color] {
8
- --bic-link-color-hover: var(--bi-color-contrast-hover);
9
5
  --bic-link-color: var(--bi-color-contrast);
10
6
  }
11
7
 
12
- color: var(--bic-link-color);
8
+ color: var(--bi-color-text);
9
+ -webkit-text-decoration-color: var(--bic-link-color);
10
+ text-decoration-color: var(--bic-link-color);
11
+ text-underline-offset: .125em;
12
+ outline: none;
13
13
  text-decoration-line: underline;
14
14
  text-decoration-style: solid;
15
- text-decoration-thickness: var(--bic-link-text-decoration-thickness);
16
- text-underline-offset: .25em;
17
- outline: none;
15
+ text-decoration-thickness: .125em;
18
16
 
19
17
  & :is(img, svg) {
20
18
  vertical-align: middle;
@@ -24,23 +22,17 @@
24
22
  text-decoration: none;
25
23
  }
26
24
 
27
- &:visited {
28
- color: var(--bic-link-color);
29
- }
30
-
31
25
  @media (hover: hover) and (pointer: fine) {
32
26
  &:hover {
33
- color: var(--bic-link-color-hover);
34
- --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
27
+ background-color: color-mix(in srgb, var(--bic-link-color) 10%, transparent);
28
+ border-radius: var(--bi-radius-small);
35
29
  }
36
30
  }
37
31
 
38
32
  &:focus-visible {
39
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
40
33
  outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
41
- outline-offset: var(--_bi--focus, 2px);
34
+ outline-offset: var(--_bi--focus, var(--bi-scale-1x));
42
35
  border-radius: var(--bi-radius-small);
43
- text-decoration: none;
44
36
 
45
37
  & * {
46
38
  --_bi--focus: ;
@@ -48,7 +40,7 @@
48
40
  }
49
41
 
50
42
  &:active {
51
- background-color: var(--bi-states-press);
43
+ background-color: color-mix(in srgb, var(--bic-link-color) 15%, transparent);
52
44
  border-radius: var(--bi-radius-small);
53
45
  }
54
46
  }
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
  }
@@ -1874,22 +1909,20 @@ svg {
1874
1909
  }
1875
1910
 
1876
1911
  .bi-link {
1877
- --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
1878
1912
  --bic-link-color: var(--bi-color-primary-contrast);
1879
- --bic-link-text-decoration-thickness--hover: .125em;
1880
- --bic-link-text-decoration-thickness: .0625em;
1881
1913
 
1882
1914
  &[data-color] {
1883
- --bic-link-color-hover: var(--bi-color-contrast-hover);
1884
1915
  --bic-link-color: var(--bi-color-contrast);
1885
1916
  }
1886
1917
 
1887
- color: var(--bic-link-color);
1918
+ color: var(--bi-color-text);
1919
+ -webkit-text-decoration-color: var(--bic-link-color);
1920
+ text-decoration-color: var(--bic-link-color);
1921
+ text-underline-offset: .125em;
1922
+ outline: none;
1888
1923
  text-decoration-line: underline;
1889
1924
  text-decoration-style: solid;
1890
- text-decoration-thickness: var(--bic-link-text-decoration-thickness);
1891
- text-underline-offset: .25em;
1892
- outline: none;
1925
+ text-decoration-thickness: .125em;
1893
1926
 
1894
1927
  & :is(img, svg) {
1895
1928
  vertical-align: middle;
@@ -1899,23 +1932,17 @@ svg {
1899
1932
  text-decoration: none;
1900
1933
  }
1901
1934
 
1902
- &:visited {
1903
- color: var(--bic-link-color);
1904
- }
1905
-
1906
1935
  @media (hover: hover) and (pointer: fine) {
1907
1936
  &:hover {
1908
- color: var(--bic-link-color-hover);
1909
- --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
1937
+ background-color: color-mix(in srgb, var(--bic-link-color) 10%, transparent);
1938
+ border-radius: var(--bi-radius-small);
1910
1939
  }
1911
1940
  }
1912
1941
 
1913
1942
  &:focus-visible {
1914
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
1915
1943
  outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
1916
- outline-offset: var(--_bi--focus, 2px);
1944
+ outline-offset: var(--_bi--focus, var(--bi-scale-1x));
1917
1945
  border-radius: var(--bi-radius-small);
1918
- text-decoration: none;
1919
1946
 
1920
1947
  & * {
1921
1948
  --_bi--focus: ;
@@ -1923,7 +1950,7 @@ svg {
1923
1950
  }
1924
1951
 
1925
1952
  &:active {
1926
- background-color: var(--bi-states-press);
1953
+ background-color: color-mix(in srgb, var(--bic-link-color) 15%, transparent);
1927
1954
  border-radius: var(--bi-radius-small);
1928
1955
  }
1929
1956
  }
package/dist/index.css CHANGED
@@ -198,8 +198,7 @@
198
198
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
199
199
  --bi-color-neutral-text-subtle: var(--bi-neutral-90);
200
200
  --bi-color-neutral-text-accent: var(--bi-primary-60);
201
- --bi-color-neutral-contrast: var(--bi-neutral-90);
202
- --bi-color-neutral-contrast-hover: var(--bi-neutral-95);
201
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
203
202
  --bi-color-neutral-fill: var(--bi-neutral-50);
204
203
  --bi-color-neutral-on-fill: var(--bi-basic-white);
205
204
  --bi-color-primary-background: var(--bi-primary-0);
@@ -216,7 +215,6 @@
216
215
  --bi-color-primary-text-subtle: var(--bi-primary-90);
217
216
  --bi-color-primary-text-accent: var(--bi-primary-75);
218
217
  --bi-color-primary-contrast: var(--bi-primary-50);
219
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
220
218
  --bi-color-primary-fill: var(--bi-primary-50);
221
219
  --bi-color-primary-on-fill: var(--bi-basic-white);
222
220
  --bi-color-info-background: var(--bi-info-0);
@@ -232,8 +230,7 @@
232
230
  --bi-color-info-text: var(--bi-info-95);
233
231
  --bi-color-info-text-subtle: var(--bi-info-90);
234
232
  --bi-color-info-text-accent: var(--bi-info-75);
235
- --bi-color-info-contrast: var(--bi-info-90);
236
- --bi-color-info-contrast-hover: var(--bi-info-95);
233
+ --bi-color-info-contrast: var(--bi-info-95);
237
234
  --bi-color-info-fill: var(--bi-info-50);
238
235
  --bi-color-info-on-fill: var(--bi-basic-white);
239
236
  --bi-color-warning-background: var(--bi-warning-0);
@@ -249,8 +246,7 @@
249
246
  --bi-color-warning-text: var(--bi-warning-95);
250
247
  --bi-color-warning-text-subtle: var(--bi-warning-90);
251
248
  --bi-color-warning-text-accent: var(--bi-warning-80);
252
- --bi-color-warning-contrast: var(--bi-warning-90);
253
- --bi-color-warning-contrast-hover: var(--bi-warning-95);
249
+ --bi-color-warning-contrast: var(--bi-warning-95);
254
250
  --bi-color-warning-fill: var(--bi-warning-75);
255
251
  --bi-color-warning-on-fill: var(--bi-basic-white);
256
252
  --bi-color-success-background: var(--bi-success-0);
@@ -266,8 +262,7 @@
266
262
  --bi-color-success-text: var(--bi-success-95);
267
263
  --bi-color-success-text-subtle: var(--bi-success-90);
268
264
  --bi-color-success-text-accent: var(--bi-success-75);
269
- --bi-color-success-contrast: var(--bi-success-90);
270
- --bi-color-success-contrast-hover: var(--bi-success-95);
265
+ --bi-color-success-contrast: var(--bi-success-95);
271
266
  --bi-color-success-fill: var(--bi-success-70);
272
267
  --bi-color-success-on-fill: var(--bi-basic-white);
273
268
  --bi-color-alert-background: var(--bi-alert-0);
@@ -283,8 +278,7 @@
283
278
  --bi-color-alert-text: var(--bi-alert-95);
284
279
  --bi-color-alert-text-subtle: var(--bi-alert-90);
285
280
  --bi-color-alert-text-accent: var(--bi-alert-75);
286
- --bi-color-alert-contrast: var(--bi-alert-90);
287
- --bi-color-alert-contrast-hover: var(--bi-alert-95);
281
+ --bi-color-alert-contrast: var(--bi-alert-95);
288
282
  --bi-color-alert-fill: var(--bi-alert-60);
289
283
  --bi-color-alert-on-fill: var(--bi-basic-white);
290
284
  --bi-states-focus: var(--bi-primary-50);
@@ -375,8 +369,7 @@
375
369
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
376
370
  --bi-color-neutral-text-subtle: var(--bi-neutral-90);
377
371
  --bi-color-neutral-text-accent: var(--bi-primary-60);
378
- --bi-color-neutral-contrast: var(--bi-neutral-90);
379
- --bi-color-neutral-contrast-hover: var(--bi-neutral-95);
372
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
380
373
  --bi-color-neutral-fill: var(--bi-neutral-50);
381
374
  --bi-color-neutral-on-fill: var(--bi-basic-white);
382
375
  --bi-color-primary-background: var(--bi-primary-0);
@@ -394,7 +387,6 @@
394
387
  --bi-color-primary-text-subtle: var(--bi-primary-90);
395
388
  --bi-color-primary-text-accent: var(--bi-primary-75);
396
389
  --bi-color-primary-contrast: var(--bi-primary-50);
397
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
398
390
  --bi-color-primary-fill: var(--bi-primary-50);
399
391
  --bi-color-primary-on-fill: var(--bi-basic-white);
400
392
  --bi-color-info-background: var(--bi-info-0);
@@ -411,8 +403,7 @@
411
403
  --bi-color-info-text-secondary: #2e0b61b2;
412
404
  --bi-color-info-text-subtle: var(--bi-info-90);
413
405
  --bi-color-info-text-accent: var(--bi-info-75);
414
- --bi-color-info-contrast: var(--bi-info-90);
415
- --bi-color-info-contrast-hover: var(--bi-info-95);
406
+ --bi-color-info-contrast: var(--bi-info-95);
416
407
  --bi-color-info-fill: var(--bi-info-50);
417
408
  --bi-color-info-on-fill: var(--bi-basic-white);
418
409
  --bi-color-warning-background: var(--bi-warning-0);
@@ -429,8 +420,7 @@
429
420
  --bi-color-warning-text-secondary: #4a3c01b2;
430
421
  --bi-color-warning-text-subtle: var(--bi-warning-90);
431
422
  --bi-color-warning-text-accent: var(--bi-warning-80);
432
- --bi-color-warning-contrast: var(--bi-warning-90);
433
- --bi-color-warning-contrast-hover: var(--bi-warning-95);
423
+ --bi-color-warning-contrast: var(--bi-warning-95);
434
424
  --bi-color-warning-fill: var(--bi-warning-75);
435
425
  --bi-color-warning-on-fill: var(--bi-basic-white);
436
426
  --bi-color-success-background: var(--bi-success-0);
@@ -447,8 +437,7 @@
447
437
  --bi-color-success-text-secondary: #143a16b2;
448
438
  --bi-color-success-text-subtle: var(--bi-success-90);
449
439
  --bi-color-success-text-accent: var(--bi-success-75);
450
- --bi-color-success-contrast: var(--bi-success-90);
451
- --bi-color-success-contrast-hover: var(--bi-success-95);
440
+ --bi-color-success-contrast: var(--bi-success-95);
452
441
  --bi-color-success-fill: var(--bi-success-70);
453
442
  --bi-color-success-on-fill: var(--bi-basic-white);
454
443
  --bi-color-alert-background: var(--bi-alert-0);
@@ -465,8 +454,7 @@
465
454
  --bi-color-alert-text-secondary: #6a1b16b2;
466
455
  --bi-color-alert-text-subtle: var(--bi-alert-90);
467
456
  --bi-color-alert-text-accent: var(--bi-alert-75);
468
- --bi-color-alert-contrast: var(--bi-alert-90);
469
- --bi-color-alert-contrast-hover: var(--bi-alert-95);
457
+ --bi-color-alert-contrast: var(--bi-alert-95);
470
458
  --bi-color-alert-fill: var(--bi-alert-60);
471
459
  --bi-color-alert-on-fill: var(--bi-basic-white);
472
460
  --bi-states-hover: #26333f1a;
@@ -495,8 +483,7 @@
495
483
  --bi-color-neutral-text-secondary: #ffffffb2;
496
484
  --bi-color-neutral-text-subtle: var(--bi-neutral-15);
497
485
  --bi-color-neutral-text-accent: var(--bi-primary-30);
498
- --bi-color-neutral-contrast: var(--bi-neutral-5);
499
- --bi-color-neutral-contrast-hover: var(--bi-neutral-15);
486
+ --bi-color-neutral-contrast: var(--bi-basic-white);
500
487
  --bi-color-neutral-fill: var(--bi-neutral-50);
501
488
  --bi-color-neutral-on-fill: var(--bi-basic-white);
502
489
  --bi-color-primary-background: var(--bi-primary-100);
@@ -514,7 +501,6 @@
514
501
  --bi-color-primary-text-subtle: var(--bi-primary-10);
515
502
  --bi-color-primary-text-accent: var(--bi-primary-30);
516
503
  --bi-color-primary-contrast: var(--bi-primary-30);
517
- --bi-color-primary-contrast-hover: var(--bi-primary-20);
518
504
  --bi-color-primary-fill: var(--bi-primary-50);
519
505
  --bi-color-primary-on-fill: var(--bi-basic-white);
520
506
  --bi-color-info-background: var(--bi-info-100);
@@ -532,7 +518,6 @@
532
518
  --bi-color-info-text-subtle: var(--bi-info-15);
533
519
  --bi-color-info-text-accent: var(--bi-info-25);
534
520
  --bi-color-info-contrast: var(--bi-info-5);
535
- --bi-color-info-contrast-hover: var(--bi-info-15);
536
521
  --bi-color-info-fill: var(--bi-info-50);
537
522
  --bi-color-info-on-fill: var(--bi-basic-white);
538
523
  --bi-color-warning-background: var(--bi-warning-100);
@@ -550,7 +535,6 @@
550
535
  --bi-color-warning-text-subtle: var(--bi-warning-15);
551
536
  --bi-color-warning-text-accent: var(--bi-warning-50);
552
537
  --bi-color-warning-contrast: var(--bi-warning-5);
553
- --bi-color-warning-contrast-hover: var(--bi-warning-15);
554
538
  --bi-color-warning-fill: var(--bi-warning-75);
555
539
  --bi-color-warning-on-fill: var(--bi-basic-white);
556
540
  --bi-color-success-background: var(--bi-success-100);
@@ -568,7 +552,6 @@
568
552
  --bi-color-success-text-subtle: var(--bi-success-10);
569
553
  --bi-color-success-text-accent: var(--bi-success-25);
570
554
  --bi-color-success-contrast: var(--bi-success-5);
571
- --bi-color-success-contrast-hover: var(--bi-success-15);
572
555
  --bi-color-success-fill: var(--bi-success-70);
573
556
  --bi-color-success-on-fill: var(--bi-basic-white);
574
557
  --bi-color-alert-background: var(--bi-alert-100);
@@ -586,7 +569,6 @@
586
569
  --bi-color-alert-text-subtle: var(--bi-alert-15);
587
570
  --bi-color-alert-text-accent: var(--bi-alert-25);
588
571
  --bi-color-alert-contrast: var(--bi-alert-5);
589
- --bi-color-alert-contrast-hover: var(--bi-alert-15);
590
572
  --bi-color-alert-fill: var(--bi-alert-60);
591
573
  --bi-color-alert-on-fill: var(--bi-basic-white);
592
574
  --bi-states-hover: #ffffff1a;
@@ -612,7 +594,6 @@
612
594
  --bi-color-text-subtle: var(--bi-color-neutral-text-subtle);
613
595
  --bi-color-text-accent: var(--bi-color-neutral-text-accent);
614
596
  --bi-color-contrast: var(--bi-color-neutral-contrast);
615
- --bi-color-contrast-hover: var(--bi-color-neutral-contrast-hover);
616
597
  --bi-color-fill: var(--bi-color-neutral-fill);
617
598
  --bi-color-on-fill: var(--bi-color-neutral-on-fill);
618
599
  }
@@ -633,7 +614,6 @@
633
614
  --bi-color-text-subtle: var(--bi-color-alert-text-subtle);
634
615
  --bi-color-text-accent: var(--bi-color-alert-text-accent);
635
616
  --bi-color-contrast: var(--bi-color-alert-contrast);
636
- --bi-color-contrast-hover: var(--bi-color-alert-contrast-hover);
637
617
  --bi-color-fill: var(--bi-color-alert-fill);
638
618
  --bi-color-on-fill: var(--bi-color-alert-on-fill);
639
619
  }
@@ -654,7 +634,6 @@
654
634
  --bi-color-text-subtle: var(--bi-color-info-text-subtle);
655
635
  --bi-color-text-accent: var(--bi-color-info-text-accent);
656
636
  --bi-color-contrast: var(--bi-color-info-contrast);
657
- --bi-color-contrast-hover: var(--bi-color-info-contrast-hover);
658
637
  --bi-color-fill: var(--bi-color-info-fill);
659
638
  --bi-color-on-fill: var(--bi-color-info-on-fill);
660
639
  }
@@ -675,7 +654,6 @@
675
654
  --bi-color-text-subtle: var(--bi-color-primary-text-subtle);
676
655
  --bi-color-text-accent: var(--bi-color-primary-text-accent);
677
656
  --bi-color-contrast: var(--bi-color-primary-contrast);
678
- --bi-color-contrast-hover: var(--bi-color-primary-contrast-hover);
679
657
  --bi-color-fill: var(--bi-color-primary-fill);
680
658
  --bi-color-on-fill: var(--bi-color-primary-on-fill);
681
659
  }
@@ -696,7 +674,6 @@
696
674
  --bi-color-text-subtle: var(--bi-color-success-text-subtle);
697
675
  --bi-color-text-accent: var(--bi-color-success-text-accent);
698
676
  --bi-color-contrast: var(--bi-color-success-contrast);
699
- --bi-color-contrast-hover: var(--bi-color-success-contrast-hover);
700
677
  --bi-color-fill: var(--bi-color-success-fill);
701
678
  --bi-color-on-fill: var(--bi-color-success-on-fill);
702
679
  }
@@ -717,7 +694,6 @@
717
694
  --bi-color-text-subtle: var(--bi-color-warning-text-subtle);
718
695
  --bi-color-text-accent: var(--bi-color-warning-text-accent);
719
696
  --bi-color-contrast: var(--bi-color-warning-contrast);
720
- --bi-color-contrast-hover: var(--bi-color-warning-contrast-hover);
721
697
  --bi-color-fill: var(--bi-color-warning-fill);
722
698
  --bi-color-on-fill: var(--bi-color-warning-on-fill);
723
699
  }
package/dist/salesforce.css CHANGED
@@ -197,8 +197,7 @@
197
197
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
198
198
  --bi-color-neutral-text-subtle: var(--bi-neutral-90);
199
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);
200
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
202
201
  --bi-color-neutral-fill: var(--bi-neutral-50);
203
202
  --bi-color-neutral-on-fill: var(--bi-basic-white);
204
203
  --bi-color-primary-background: var(--bi-primary-0);
@@ -215,7 +214,6 @@
215
214
  --bi-color-primary-text-subtle: var(--bi-primary-90);
216
215
  --bi-color-primary-text-accent: var(--bi-primary-75);
217
216
  --bi-color-primary-contrast: var(--bi-primary-50);
218
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
219
217
  --bi-color-primary-fill: var(--bi-primary-50);
220
218
  --bi-color-primary-on-fill: var(--bi-basic-white);
221
219
  --bi-color-info-background: var(--bi-info-0);
@@ -231,8 +229,7 @@
231
229
  --bi-color-info-text: var(--bi-info-95);
232
230
  --bi-color-info-text-subtle: var(--bi-info-90);
233
231
  --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);
232
+ --bi-color-info-contrast: var(--bi-info-95);
236
233
  --bi-color-info-fill: var(--bi-info-50);
237
234
  --bi-color-info-on-fill: var(--bi-basic-white);
238
235
  --bi-color-warning-background: var(--bi-warning-0);
@@ -248,8 +245,7 @@
248
245
  --bi-color-warning-text: var(--bi-warning-95);
249
246
  --bi-color-warning-text-subtle: var(--bi-warning-90);
250
247
  --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);
248
+ --bi-color-warning-contrast: var(--bi-warning-95);
253
249
  --bi-color-warning-fill: var(--bi-warning-75);
254
250
  --bi-color-warning-on-fill: var(--bi-basic-white);
255
251
  --bi-color-success-background: var(--bi-success-0);
@@ -265,8 +261,7 @@
265
261
  --bi-color-success-text: var(--bi-success-95);
266
262
  --bi-color-success-text-subtle: var(--bi-success-90);
267
263
  --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);
264
+ --bi-color-success-contrast: var(--bi-success-95);
270
265
  --bi-color-success-fill: var(--bi-success-70);
271
266
  --bi-color-success-on-fill: var(--bi-basic-white);
272
267
  --bi-color-alert-background: var(--bi-alert-0);
@@ -282,8 +277,7 @@
282
277
  --bi-color-alert-text: var(--bi-alert-95);
283
278
  --bi-color-alert-text-subtle: var(--bi-alert-90);
284
279
  --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);
280
+ --bi-color-alert-contrast: var(--bi-alert-95);
287
281
  --bi-color-alert-fill: var(--bi-alert-60);
288
282
  --bi-color-alert-on-fill: var(--bi-basic-white);
289
283
  --bi-states-focus: var(--bi-primary-50);
@@ -374,8 +368,7 @@
374
368
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
375
369
  --bi-color-neutral-text-subtle: var(--bi-neutral-90);
376
370
  --bi-color-neutral-text-accent: var(--bi-primary-60);
377
- --bi-color-neutral-contrast: var(--bi-neutral-90);
378
- --bi-color-neutral-contrast-hover: var(--bi-neutral-95);
371
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
379
372
  --bi-color-neutral-fill: var(--bi-neutral-50);
380
373
  --bi-color-neutral-on-fill: var(--bi-basic-white);
381
374
  --bi-color-primary-background: var(--bi-primary-0);
@@ -393,7 +386,6 @@
393
386
  --bi-color-primary-text-subtle: var(--bi-primary-90);
394
387
  --bi-color-primary-text-accent: var(--bi-primary-75);
395
388
  --bi-color-primary-contrast: var(--bi-primary-50);
396
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
397
389
  --bi-color-primary-fill: var(--bi-primary-50);
398
390
  --bi-color-primary-on-fill: var(--bi-basic-white);
399
391
  --bi-color-info-background: var(--bi-info-0);
@@ -410,8 +402,7 @@
410
402
  --bi-color-info-text-secondary: #2e0b61b2;
411
403
  --bi-color-info-text-subtle: var(--bi-info-90);
412
404
  --bi-color-info-text-accent: var(--bi-info-75);
413
- --bi-color-info-contrast: var(--bi-info-90);
414
- --bi-color-info-contrast-hover: var(--bi-info-95);
405
+ --bi-color-info-contrast: var(--bi-info-95);
415
406
  --bi-color-info-fill: var(--bi-info-50);
416
407
  --bi-color-info-on-fill: var(--bi-basic-white);
417
408
  --bi-color-warning-background: var(--bi-warning-0);
@@ -428,8 +419,7 @@
428
419
  --bi-color-warning-text-secondary: #4a3c01b2;
429
420
  --bi-color-warning-text-subtle: var(--bi-warning-90);
430
421
  --bi-color-warning-text-accent: var(--bi-warning-80);
431
- --bi-color-warning-contrast: var(--bi-warning-90);
432
- --bi-color-warning-contrast-hover: var(--bi-warning-95);
422
+ --bi-color-warning-contrast: var(--bi-warning-95);
433
423
  --bi-color-warning-fill: var(--bi-warning-75);
434
424
  --bi-color-warning-on-fill: var(--bi-basic-white);
435
425
  --bi-color-success-background: var(--bi-success-0);
@@ -446,8 +436,7 @@
446
436
  --bi-color-success-text-secondary: #143a16b2;
447
437
  --bi-color-success-text-subtle: var(--bi-success-90);
448
438
  --bi-color-success-text-accent: var(--bi-success-75);
449
- --bi-color-success-contrast: var(--bi-success-90);
450
- --bi-color-success-contrast-hover: var(--bi-success-95);
439
+ --bi-color-success-contrast: var(--bi-success-95);
451
440
  --bi-color-success-fill: var(--bi-success-70);
452
441
  --bi-color-success-on-fill: var(--bi-basic-white);
453
442
  --bi-color-alert-background: var(--bi-alert-0);
@@ -464,8 +453,7 @@
464
453
  --bi-color-alert-text-secondary: #6a1b16b2;
465
454
  --bi-color-alert-text-subtle: var(--bi-alert-90);
466
455
  --bi-color-alert-text-accent: var(--bi-alert-75);
467
- --bi-color-alert-contrast: var(--bi-alert-90);
468
- --bi-color-alert-contrast-hover: var(--bi-alert-95);
456
+ --bi-color-alert-contrast: var(--bi-alert-95);
469
457
  --bi-color-alert-fill: var(--bi-alert-60);
470
458
  --bi-color-alert-on-fill: var(--bi-basic-white);
471
459
  --bi-states-hover: #26333f1a;
@@ -494,8 +482,7 @@
494
482
  --bi-color-neutral-text-secondary: #ffffffb2;
495
483
  --bi-color-neutral-text-subtle: var(--bi-neutral-15);
496
484
  --bi-color-neutral-text-accent: var(--bi-primary-30);
497
- --bi-color-neutral-contrast: var(--bi-neutral-5);
498
- --bi-color-neutral-contrast-hover: var(--bi-neutral-15);
485
+ --bi-color-neutral-contrast: var(--bi-basic-white);
499
486
  --bi-color-neutral-fill: var(--bi-neutral-50);
500
487
  --bi-color-neutral-on-fill: var(--bi-basic-white);
501
488
  --bi-color-primary-background: var(--bi-primary-100);
@@ -513,7 +500,6 @@
513
500
  --bi-color-primary-text-subtle: var(--bi-primary-10);
514
501
  --bi-color-primary-text-accent: var(--bi-primary-30);
515
502
  --bi-color-primary-contrast: var(--bi-primary-30);
516
- --bi-color-primary-contrast-hover: var(--bi-primary-20);
517
503
  --bi-color-primary-fill: var(--bi-primary-50);
518
504
  --bi-color-primary-on-fill: var(--bi-basic-white);
519
505
  --bi-color-info-background: var(--bi-info-100);
@@ -531,7 +517,6 @@
531
517
  --bi-color-info-text-subtle: var(--bi-info-15);
532
518
  --bi-color-info-text-accent: var(--bi-info-25);
533
519
  --bi-color-info-contrast: var(--bi-info-5);
534
- --bi-color-info-contrast-hover: var(--bi-info-15);
535
520
  --bi-color-info-fill: var(--bi-info-50);
536
521
  --bi-color-info-on-fill: var(--bi-basic-white);
537
522
  --bi-color-warning-background: var(--bi-warning-100);
@@ -549,7 +534,6 @@
549
534
  --bi-color-warning-text-subtle: var(--bi-warning-15);
550
535
  --bi-color-warning-text-accent: var(--bi-warning-50);
551
536
  --bi-color-warning-contrast: var(--bi-warning-5);
552
- --bi-color-warning-contrast-hover: var(--bi-warning-15);
553
537
  --bi-color-warning-fill: var(--bi-warning-75);
554
538
  --bi-color-warning-on-fill: var(--bi-basic-white);
555
539
  --bi-color-success-background: var(--bi-success-100);
@@ -567,7 +551,6 @@
567
551
  --bi-color-success-text-subtle: var(--bi-success-10);
568
552
  --bi-color-success-text-accent: var(--bi-success-25);
569
553
  --bi-color-success-contrast: var(--bi-success-5);
570
- --bi-color-success-contrast-hover: var(--bi-success-15);
571
554
  --bi-color-success-fill: var(--bi-success-70);
572
555
  --bi-color-success-on-fill: var(--bi-basic-white);
573
556
  --bi-color-alert-background: var(--bi-alert-100);
@@ -585,7 +568,6 @@
585
568
  --bi-color-alert-text-subtle: var(--bi-alert-15);
586
569
  --bi-color-alert-text-accent: var(--bi-alert-25);
587
570
  --bi-color-alert-contrast: var(--bi-alert-5);
588
- --bi-color-alert-contrast-hover: var(--bi-alert-15);
589
571
  --bi-color-alert-fill: var(--bi-alert-60);
590
572
  --bi-color-alert-on-fill: var(--bi-basic-white);
591
573
  --bi-states-hover: #ffffff1a;
@@ -611,7 +593,6 @@
611
593
  --bi-color-text-subtle: var(--bi-color-neutral-text-subtle);
612
594
  --bi-color-text-accent: var(--bi-color-neutral-text-accent);
613
595
  --bi-color-contrast: var(--bi-color-neutral-contrast);
614
- --bi-color-contrast-hover: var(--bi-color-neutral-contrast-hover);
615
596
  --bi-color-fill: var(--bi-color-neutral-fill);
616
597
  --bi-color-on-fill: var(--bi-color-neutral-on-fill);
617
598
  }
@@ -632,7 +613,6 @@
632
613
  --bi-color-text-subtle: var(--bi-color-alert-text-subtle);
633
614
  --bi-color-text-accent: var(--bi-color-alert-text-accent);
634
615
  --bi-color-contrast: var(--bi-color-alert-contrast);
635
- --bi-color-contrast-hover: var(--bi-color-alert-contrast-hover);
636
616
  --bi-color-fill: var(--bi-color-alert-fill);
637
617
  --bi-color-on-fill: var(--bi-color-alert-on-fill);
638
618
  }
@@ -653,7 +633,6 @@
653
633
  --bi-color-text-subtle: var(--bi-color-info-text-subtle);
654
634
  --bi-color-text-accent: var(--bi-color-info-text-accent);
655
635
  --bi-color-contrast: var(--bi-color-info-contrast);
656
- --bi-color-contrast-hover: var(--bi-color-info-contrast-hover);
657
636
  --bi-color-fill: var(--bi-color-info-fill);
658
637
  --bi-color-on-fill: var(--bi-color-info-on-fill);
659
638
  }
@@ -674,7 +653,6 @@
674
653
  --bi-color-text-subtle: var(--bi-color-primary-text-subtle);
675
654
  --bi-color-text-accent: var(--bi-color-primary-text-accent);
676
655
  --bi-color-contrast: var(--bi-color-primary-contrast);
677
- --bi-color-contrast-hover: var(--bi-color-primary-contrast-hover);
678
656
  --bi-color-fill: var(--bi-color-primary-fill);
679
657
  --bi-color-on-fill: var(--bi-color-primary-on-fill);
680
658
  }
@@ -695,7 +673,6 @@
695
673
  --bi-color-text-subtle: var(--bi-color-success-text-subtle);
696
674
  --bi-color-text-accent: var(--bi-color-success-text-accent);
697
675
  --bi-color-contrast: var(--bi-color-success-contrast);
698
- --bi-color-contrast-hover: var(--bi-color-success-contrast-hover);
699
676
  --bi-color-fill: var(--bi-color-success-fill);
700
677
  --bi-color-on-fill: var(--bi-color-success-on-fill);
701
678
  }
@@ -716,7 +693,6 @@
716
693
  --bi-color-text-subtle: var(--bi-color-warning-text-subtle);
717
694
  --bi-color-text-accent: var(--bi-color-warning-text-accent);
718
695
  --bi-color-contrast: var(--bi-color-warning-contrast);
719
- --bi-color-contrast-hover: var(--bi-color-warning-contrast-hover);
720
696
  --bi-color-fill: var(--bi-color-warning-fill);
721
697
  --bi-color-on-fill: var(--bi-color-warning-on-fill);
722
698
  }
@@ -1066,7 +1042,13 @@
1066
1042
  --bic-card-actions-icon-color: var(--bi-color-contrast);
1067
1043
  --bic-card-border-hover-color: var(--bi-color-stroke-contrast);
1068
1044
  --bic-card-box-shadow-hover-color: #0000000d;
1045
+ --bic-card-box-shadow-hover: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color),
1046
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color),
1047
+ 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
1069
1048
  --bic-card-box-shadow-active-color: #0000000d;
1049
+ --bic-card-box-shadow-active: 0px 0px 0px var(--bi-stroke-medium) var(--bi-states-focus),
1050
+ 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color),
1051
+ 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
1070
1052
  width: 100%;
1071
1053
  box-shadow: var(--bic-card-box-shadow);
1072
1054
  border-radius: var(--bic-card-border-radius);
@@ -1176,16 +1158,12 @@
1176
1158
 
1177
1159
  @media (hover: hover) and (pointer: fine) {
1178
1160
  &: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);
1161
+ box-shadow: var(--bic-card-box-shadow-hover);
1182
1162
  }
1183
1163
  }
1184
1164
 
1185
1165
  &: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);
1166
+ box-shadow: var(--bic-card-box-shadow-active);
1189
1167
  }
1190
1168
  }
1191
1169
 
@@ -1195,6 +1173,33 @@
1195
1173
  }
1196
1174
  }
1197
1175
 
1176
+ &[data-clickdelegatefor]:not([data-clickdelegatefor=""]), & .bi-card--content[data-clickdelegatefor]:not([data-clickdelegatefor=""]) {
1177
+ cursor: pointer;
1178
+ transition: box-shadow .25s ease-in-out;
1179
+ position: relative;
1180
+
1181
+ @media (hover: hover) and (pointer: fine) {
1182
+ &:has(.\:click-delegate-hover) {
1183
+ box-shadow: var(--bic-card-box-shadow-hover);
1184
+ }
1185
+ }
1186
+
1187
+ &:has(.\:click-delegate-hover):active {
1188
+ box-shadow: var(--bic-card-box-shadow-active);
1189
+ }
1190
+
1191
+ &:has(.bi-card--header-title :is(a, button):focus-visible) {
1192
+ box-shadow: var(--bic-card-box-shadow),
1193
+ 0 0 0 4.5px var(--bi-states-focus-background);
1194
+ outline: 3px solid var(--bi-states-focus);
1195
+ outline-offset: 2px;
1196
+
1197
+ & * {
1198
+ --_bi--focus: ;
1199
+ }
1200
+ }
1201
+ }
1202
+
1198
1203
  & .bi-card--actions {
1199
1204
  flex-direction: var(--bic-card-actions-flex-direction, column);
1200
1205
  justify-content: center;
@@ -1267,6 +1272,12 @@
1267
1272
  display: -webkit-box;
1268
1273
  overflow: hidden;
1269
1274
 
1275
+ & a {
1276
+ color: inherit;
1277
+ outline: none;
1278
+ text-decoration: none;
1279
+ }
1280
+
1270
1281
  @media (width < 768px) {
1271
1282
  font: var(--bi-font-title-bold-xs);
1272
1283
  }
@@ -2597,22 +2608,20 @@ svg {
2597
2608
  }
2598
2609
 
2599
2610
  .bi-link {
2600
- --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
2601
2611
  --bic-link-color: var(--bi-color-primary-contrast);
2602
- --bic-link-text-decoration-thickness--hover: .125em;
2603
- --bic-link-text-decoration-thickness: .0625em;
2604
2612
 
2605
2613
  &[data-color] {
2606
- --bic-link-color-hover: var(--bi-color-contrast-hover);
2607
2614
  --bic-link-color: var(--bi-color-contrast);
2608
2615
  }
2609
2616
 
2610
- color: var(--bic-link-color);
2617
+ color: var(--bi-color-text);
2618
+ -webkit-text-decoration-color: var(--bic-link-color);
2619
+ text-decoration-color: var(--bic-link-color);
2620
+ text-underline-offset: .125em;
2621
+ outline: none;
2611
2622
  text-decoration-line: underline;
2612
2623
  text-decoration-style: solid;
2613
- text-decoration-thickness: var(--bic-link-text-decoration-thickness);
2614
- text-underline-offset: .25em;
2615
- outline: none;
2624
+ text-decoration-thickness: .125em;
2616
2625
 
2617
2626
  & :is(img, svg) {
2618
2627
  vertical-align: middle;
@@ -2622,23 +2631,17 @@ svg {
2622
2631
  text-decoration: none;
2623
2632
  }
2624
2633
 
2625
- &:visited {
2626
- color: var(--bic-link-color);
2627
- }
2628
-
2629
2634
  @media (hover: hover) and (pointer: fine) {
2630
2635
  &:hover {
2631
- color: var(--bic-link-color-hover);
2632
- --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
2636
+ background-color: color-mix(in srgb, var(--bic-link-color) 10%, transparent);
2637
+ border-radius: var(--bi-radius-small);
2633
2638
  }
2634
2639
  }
2635
2640
 
2636
2641
  &:focus-visible {
2637
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
2638
2642
  outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
2639
- outline-offset: var(--_bi--focus, 2px);
2643
+ outline-offset: var(--_bi--focus, var(--bi-scale-1x));
2640
2644
  border-radius: var(--bi-radius-small);
2641
- text-decoration: none;
2642
2645
 
2643
2646
  & * {
2644
2647
  --_bi--focus: ;
@@ -2646,7 +2649,7 @@ svg {
2646
2649
  }
2647
2650
 
2648
2651
  &:active {
2649
- background-color: var(--bi-states-press);
2652
+ background-color: color-mix(in srgb, var(--bic-link-color) 15%, transparent);
2650
2653
  border-radius: var(--bi-radius-small);
2651
2654
  }
2652
2655
  }
package/dist/tokens.css CHANGED
@@ -197,8 +197,7 @@
197
197
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
198
198
  --bi-color-neutral-text-subtle: var(--bi-neutral-90);
199
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);
200
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
202
201
  --bi-color-neutral-fill: var(--bi-neutral-50);
203
202
  --bi-color-neutral-on-fill: var(--bi-basic-white);
204
203
  --bi-color-primary-background: var(--bi-primary-0);
@@ -215,7 +214,6 @@
215
214
  --bi-color-primary-text-subtle: var(--bi-primary-90);
216
215
  --bi-color-primary-text-accent: var(--bi-primary-75);
217
216
  --bi-color-primary-contrast: var(--bi-primary-50);
218
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
219
217
  --bi-color-primary-fill: var(--bi-primary-50);
220
218
  --bi-color-primary-on-fill: var(--bi-basic-white);
221
219
  --bi-color-info-background: var(--bi-info-0);
@@ -231,8 +229,7 @@
231
229
  --bi-color-info-text: var(--bi-info-95);
232
230
  --bi-color-info-text-subtle: var(--bi-info-90);
233
231
  --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);
232
+ --bi-color-info-contrast: var(--bi-info-95);
236
233
  --bi-color-info-fill: var(--bi-info-50);
237
234
  --bi-color-info-on-fill: var(--bi-basic-white);
238
235
  --bi-color-warning-background: var(--bi-warning-0);
@@ -248,8 +245,7 @@
248
245
  --bi-color-warning-text: var(--bi-warning-95);
249
246
  --bi-color-warning-text-subtle: var(--bi-warning-90);
250
247
  --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);
248
+ --bi-color-warning-contrast: var(--bi-warning-95);
253
249
  --bi-color-warning-fill: var(--bi-warning-75);
254
250
  --bi-color-warning-on-fill: var(--bi-basic-white);
255
251
  --bi-color-success-background: var(--bi-success-0);
@@ -265,8 +261,7 @@
265
261
  --bi-color-success-text: var(--bi-success-95);
266
262
  --bi-color-success-text-subtle: var(--bi-success-90);
267
263
  --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);
264
+ --bi-color-success-contrast: var(--bi-success-95);
270
265
  --bi-color-success-fill: var(--bi-success-70);
271
266
  --bi-color-success-on-fill: var(--bi-basic-white);
272
267
  --bi-color-alert-background: var(--bi-alert-0);
@@ -282,8 +277,7 @@
282
277
  --bi-color-alert-text: var(--bi-alert-95);
283
278
  --bi-color-alert-text-subtle: var(--bi-alert-90);
284
279
  --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);
280
+ --bi-color-alert-contrast: var(--bi-alert-95);
287
281
  --bi-color-alert-fill: var(--bi-alert-60);
288
282
  --bi-color-alert-on-fill: var(--bi-basic-white);
289
283
  --bi-states-focus: var(--bi-primary-50);
@@ -374,8 +368,7 @@
374
368
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
375
369
  --bi-color-neutral-text-subtle: var(--bi-neutral-90);
376
370
  --bi-color-neutral-text-accent: var(--bi-primary-60);
377
- --bi-color-neutral-contrast: var(--bi-neutral-90);
378
- --bi-color-neutral-contrast-hover: var(--bi-neutral-95);
371
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
379
372
  --bi-color-neutral-fill: var(--bi-neutral-50);
380
373
  --bi-color-neutral-on-fill: var(--bi-basic-white);
381
374
  --bi-color-primary-background: var(--bi-primary-0);
@@ -393,7 +386,6 @@
393
386
  --bi-color-primary-text-subtle: var(--bi-primary-90);
394
387
  --bi-color-primary-text-accent: var(--bi-primary-75);
395
388
  --bi-color-primary-contrast: var(--bi-primary-50);
396
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
397
389
  --bi-color-primary-fill: var(--bi-primary-50);
398
390
  --bi-color-primary-on-fill: var(--bi-basic-white);
399
391
  --bi-color-info-background: var(--bi-info-0);
@@ -410,8 +402,7 @@
410
402
  --bi-color-info-text-secondary: #2e0b61b2;
411
403
  --bi-color-info-text-subtle: var(--bi-info-90);
412
404
  --bi-color-info-text-accent: var(--bi-info-75);
413
- --bi-color-info-contrast: var(--bi-info-90);
414
- --bi-color-info-contrast-hover: var(--bi-info-95);
405
+ --bi-color-info-contrast: var(--bi-info-95);
415
406
  --bi-color-info-fill: var(--bi-info-50);
416
407
  --bi-color-info-on-fill: var(--bi-basic-white);
417
408
  --bi-color-warning-background: var(--bi-warning-0);
@@ -428,8 +419,7 @@
428
419
  --bi-color-warning-text-secondary: #4a3c01b2;
429
420
  --bi-color-warning-text-subtle: var(--bi-warning-90);
430
421
  --bi-color-warning-text-accent: var(--bi-warning-80);
431
- --bi-color-warning-contrast: var(--bi-warning-90);
432
- --bi-color-warning-contrast-hover: var(--bi-warning-95);
422
+ --bi-color-warning-contrast: var(--bi-warning-95);
433
423
  --bi-color-warning-fill: var(--bi-warning-75);
434
424
  --bi-color-warning-on-fill: var(--bi-basic-white);
435
425
  --bi-color-success-background: var(--bi-success-0);
@@ -446,8 +436,7 @@
446
436
  --bi-color-success-text-secondary: #143a16b2;
447
437
  --bi-color-success-text-subtle: var(--bi-success-90);
448
438
  --bi-color-success-text-accent: var(--bi-success-75);
449
- --bi-color-success-contrast: var(--bi-success-90);
450
- --bi-color-success-contrast-hover: var(--bi-success-95);
439
+ --bi-color-success-contrast: var(--bi-success-95);
451
440
  --bi-color-success-fill: var(--bi-success-70);
452
441
  --bi-color-success-on-fill: var(--bi-basic-white);
453
442
  --bi-color-alert-background: var(--bi-alert-0);
@@ -464,8 +453,7 @@
464
453
  --bi-color-alert-text-secondary: #6a1b16b2;
465
454
  --bi-color-alert-text-subtle: var(--bi-alert-90);
466
455
  --bi-color-alert-text-accent: var(--bi-alert-75);
467
- --bi-color-alert-contrast: var(--bi-alert-90);
468
- --bi-color-alert-contrast-hover: var(--bi-alert-95);
456
+ --bi-color-alert-contrast: var(--bi-alert-95);
469
457
  --bi-color-alert-fill: var(--bi-alert-60);
470
458
  --bi-color-alert-on-fill: var(--bi-basic-white);
471
459
  --bi-states-hover: #26333f1a;
@@ -494,8 +482,7 @@
494
482
  --bi-color-neutral-text-secondary: #ffffffb2;
495
483
  --bi-color-neutral-text-subtle: var(--bi-neutral-15);
496
484
  --bi-color-neutral-text-accent: var(--bi-primary-30);
497
- --bi-color-neutral-contrast: var(--bi-neutral-5);
498
- --bi-color-neutral-contrast-hover: var(--bi-neutral-15);
485
+ --bi-color-neutral-contrast: var(--bi-basic-white);
499
486
  --bi-color-neutral-fill: var(--bi-neutral-50);
500
487
  --bi-color-neutral-on-fill: var(--bi-basic-white);
501
488
  --bi-color-primary-background: var(--bi-primary-100);
@@ -513,7 +500,6 @@
513
500
  --bi-color-primary-text-subtle: var(--bi-primary-10);
514
501
  --bi-color-primary-text-accent: var(--bi-primary-30);
515
502
  --bi-color-primary-contrast: var(--bi-primary-30);
516
- --bi-color-primary-contrast-hover: var(--bi-primary-20);
517
503
  --bi-color-primary-fill: var(--bi-primary-50);
518
504
  --bi-color-primary-on-fill: var(--bi-basic-white);
519
505
  --bi-color-info-background: var(--bi-info-100);
@@ -531,7 +517,6 @@
531
517
  --bi-color-info-text-subtle: var(--bi-info-15);
532
518
  --bi-color-info-text-accent: var(--bi-info-25);
533
519
  --bi-color-info-contrast: var(--bi-info-5);
534
- --bi-color-info-contrast-hover: var(--bi-info-15);
535
520
  --bi-color-info-fill: var(--bi-info-50);
536
521
  --bi-color-info-on-fill: var(--bi-basic-white);
537
522
  --bi-color-warning-background: var(--bi-warning-100);
@@ -549,7 +534,6 @@
549
534
  --bi-color-warning-text-subtle: var(--bi-warning-15);
550
535
  --bi-color-warning-text-accent: var(--bi-warning-50);
551
536
  --bi-color-warning-contrast: var(--bi-warning-5);
552
- --bi-color-warning-contrast-hover: var(--bi-warning-15);
553
537
  --bi-color-warning-fill: var(--bi-warning-75);
554
538
  --bi-color-warning-on-fill: var(--bi-basic-white);
555
539
  --bi-color-success-background: var(--bi-success-100);
@@ -567,7 +551,6 @@
567
551
  --bi-color-success-text-subtle: var(--bi-success-10);
568
552
  --bi-color-success-text-accent: var(--bi-success-25);
569
553
  --bi-color-success-contrast: var(--bi-success-5);
570
- --bi-color-success-contrast-hover: var(--bi-success-15);
571
554
  --bi-color-success-fill: var(--bi-success-70);
572
555
  --bi-color-success-on-fill: var(--bi-basic-white);
573
556
  --bi-color-alert-background: var(--bi-alert-100);
@@ -585,7 +568,6 @@
585
568
  --bi-color-alert-text-subtle: var(--bi-alert-15);
586
569
  --bi-color-alert-text-accent: var(--bi-alert-25);
587
570
  --bi-color-alert-contrast: var(--bi-alert-5);
588
- --bi-color-alert-contrast-hover: var(--bi-alert-15);
589
571
  --bi-color-alert-fill: var(--bi-alert-60);
590
572
  --bi-color-alert-on-fill: var(--bi-basic-white);
591
573
  --bi-states-hover: #ffffff1a;
@@ -611,7 +593,6 @@
611
593
  --bi-color-text-subtle: var(--bi-color-neutral-text-subtle);
612
594
  --bi-color-text-accent: var(--bi-color-neutral-text-accent);
613
595
  --bi-color-contrast: var(--bi-color-neutral-contrast);
614
- --bi-color-contrast-hover: var(--bi-color-neutral-contrast-hover);
615
596
  --bi-color-fill: var(--bi-color-neutral-fill);
616
597
  --bi-color-on-fill: var(--bi-color-neutral-on-fill);
617
598
  }
@@ -632,7 +613,6 @@
632
613
  --bi-color-text-subtle: var(--bi-color-alert-text-subtle);
633
614
  --bi-color-text-accent: var(--bi-color-alert-text-accent);
634
615
  --bi-color-contrast: var(--bi-color-alert-contrast);
635
- --bi-color-contrast-hover: var(--bi-color-alert-contrast-hover);
636
616
  --bi-color-fill: var(--bi-color-alert-fill);
637
617
  --bi-color-on-fill: var(--bi-color-alert-on-fill);
638
618
  }
@@ -653,7 +633,6 @@
653
633
  --bi-color-text-subtle: var(--bi-color-info-text-subtle);
654
634
  --bi-color-text-accent: var(--bi-color-info-text-accent);
655
635
  --bi-color-contrast: var(--bi-color-info-contrast);
656
- --bi-color-contrast-hover: var(--bi-color-info-contrast-hover);
657
636
  --bi-color-fill: var(--bi-color-info-fill);
658
637
  --bi-color-on-fill: var(--bi-color-info-on-fill);
659
638
  }
@@ -674,7 +653,6 @@
674
653
  --bi-color-text-subtle: var(--bi-color-primary-text-subtle);
675
654
  --bi-color-text-accent: var(--bi-color-primary-text-accent);
676
655
  --bi-color-contrast: var(--bi-color-primary-contrast);
677
- --bi-color-contrast-hover: var(--bi-color-primary-contrast-hover);
678
656
  --bi-color-fill: var(--bi-color-primary-fill);
679
657
  --bi-color-on-fill: var(--bi-color-primary-on-fill);
680
658
  }
@@ -695,7 +673,6 @@
695
673
  --bi-color-text-subtle: var(--bi-color-success-text-subtle);
696
674
  --bi-color-text-accent: var(--bi-color-success-text-accent);
697
675
  --bi-color-contrast: var(--bi-color-success-contrast);
698
- --bi-color-contrast-hover: var(--bi-color-success-contrast-hover);
699
676
  --bi-color-fill: var(--bi-color-success-fill);
700
677
  --bi-color-on-fill: var(--bi-color-success-on-fill);
701
678
  }
@@ -716,7 +693,6 @@
716
693
  --bi-color-text-subtle: var(--bi-color-warning-text-subtle);
717
694
  --bi-color-text-accent: var(--bi-color-warning-text-accent);
718
695
  --bi-color-contrast: var(--bi-color-warning-contrast);
719
- --bi-color-contrast-hover: var(--bi-color-warning-contrast-hover);
720
696
  --bi-color-fill: var(--bi-color-warning-fill);
721
697
  --bi-color-on-fill: var(--bi-color-warning-on-fill);
722
698
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.12.3",
4
+ "version": "0.12.5",
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.3"
30
+ "browserslist": "4.28.4",
31
+ "lightningcss": "1.33.0",
32
+ "modern-normalize": "3.0.1",
33
+ "@bi-digital/tokens": "0.12.5"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",