@bi-digital/css 0.12.4 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/baseline.css +0 -6
  2. package/dist/components/alert.css +2 -2
  3. package/dist/components/avatar.css +1 -1
  4. package/dist/components/chip.css +1 -1
  5. package/dist/components/field.css +1 -1
  6. package/dist/components/fieldset.css +1 -1
  7. package/dist/components/input.css +2 -2
  8. package/dist/components/link.css +10 -18
  9. package/dist/components.css +18 -26
  10. package/dist/index.css +13 -67
  11. package/dist/salesforce.css +31 -87
  12. package/dist/tokens.css +13 -61
  13. package/package.json +3 -3
package/dist/baseline.css CHANGED
@@ -2,9 +2,3 @@ body, :host {
2
2
  font-family: var(--bi-font-family-plain), system-ui;
3
3
  line-height: 1.5;
4
4
  }
5
-
6
- html {
7
- &:has(bi-navbar), &:has(bi-in-page-links) {
8
- scroll-padding-top: var(--bi-layout-navbar-height);
9
- }
10
- }
package/dist/components/alert.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --bic-alert-background: var(--bi-color-primary-surface-strong);
3
3
  --bic-alert-border-color: var(--bi-color-primary-stroke);
4
4
  --bic-alert-border-width: var(--bi-stroke-thin);
5
- --bic-alert-color: var(--bi-color-primary-text-subtle);
5
+ --bic-alert-color: var(--bi-color-primary-text);
6
6
  --bic-alert-icon-size: var(--bi-icon-medium);
7
7
  --bic-alert-gap: var(--bi-scale-1x);
8
8
  --bic-alert-padding: var(--bi-scale-2x);
@@ -10,7 +10,7 @@
10
10
  &[data-color] {
11
11
  --bic-alert-background: var(--bi-color-surface-strong);
12
12
  --bic-alert-border-color: var(--bi-color-stroke);
13
- --bic-alert-color: var(--bi-color-text-subtle);
13
+ --bic-alert-color: var(--bi-color-text);
14
14
  }
15
15
 
16
16
  background: var(--bic-alert-background);
package/dist/components/avatar.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bi-avatar {
2
2
  --bic-avatar-background-color: var(--bi-color-surface-strong);
3
- --bic-avatar-color: var(--bi-color-text-subtle);
3
+ --bic-avatar-color: var(--bi-color-text);
4
4
  --bic-avatar-size: var(--bi-scale-24x);
5
5
  --bic-avatar-font-size: 1.75rem;
6
6
  border-radius: var(--bi-radius-full);
package/dist/components/chip.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .bi-chip {
2
2
  --bic-chip-background: var(--bi-color-surface);
3
3
  --bic-chip-background-selected: var(--bi-color-fill);
4
- --bic-chip-text-color: var(--bi-color-text-subtle);
4
+ --bic-chip-text-color: var(--bi-color-text);
5
5
  --bic-chip-text-color-selected: var(--bi-color-on-fill);
6
6
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
7
7
  --bic-chip-icon-size: var(--bi-scale-6x);
package/dist/components/field.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --bic-field-background-press: var(--bi-states-press);
9
9
  --bic-field-border-color: var(--bi-color-stroke-contrast);
10
10
  --bic-field-border-color-invalid: var(--bi-color-alert-stroke-contrast);
11
- --bic-field-disabled-color: var(--bi-color-text-subtle);
11
+ --bic-field-disabled-color: var(--bi-color-text-secondary);
12
12
  --bic-field-description-color: var(--bi-color-text-secondary);
13
13
  --bic-field-label-color: var(--bi-color-text);
14
14
  --bic-field-label-required-color: var(--bi-states-required);
package/dist/components/fieldset.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bi-fieldset {
2
2
  --bic-fieldset-color: var(--bi-color-text);
3
- --bic-fieldset-description-color: var(--bi-color-text-subtle);
3
+ --bic-fieldset-description-color: var(--bi-color-text-secondary);
4
4
  border: 0;
5
5
  min-width: 0;
6
6
  margin: 0;
package/dist/components/input.css CHANGED
@@ -23,9 +23,9 @@
23
23
  --bic-input-background-readonly: var(--bi-color-surface);
24
24
  --bic-input-border-color: var(--bi-color-stroke-contrast);
25
25
  --bic-input-border-color-invalid: var(--bi-color-alert-stroke-contrast);
26
- --bic-input-color-readonly: var(--bi-color-text-subtle);
26
+ --bic-input-color-readonly: var(--bi-color-text-secondary);
27
27
  --bic-input-color: var(--bi-color-text);
28
- --bic-input-disabled-color: var(--bi-color-text-subtle);
28
+ --bic-input-disabled-color: var(--bi-color-text-secondary);
29
29
  --bic-input-placeholder-color: var(--bi-color-text-secondary);
30
30
  --bic-input-focus-outline-color: var(--bi-states-focus);
31
31
  --bic-input-focus-shadow-color: var(--bi-states-focus-background);
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
@@ -2,7 +2,7 @@
2
2
  --bic-alert-background: var(--bi-color-primary-surface-strong);
3
3
  --bic-alert-border-color: var(--bi-color-primary-stroke);
4
4
  --bic-alert-border-width: var(--bi-stroke-thin);
5
- --bic-alert-color: var(--bi-color-primary-text-subtle);
5
+ --bic-alert-color: var(--bi-color-primary-text);
6
6
  --bic-alert-icon-size: var(--bi-icon-medium);
7
7
  --bic-alert-gap: var(--bi-scale-1x);
8
8
  --bic-alert-padding: var(--bi-scale-2x);
@@ -10,7 +10,7 @@
10
10
  &[data-color] {
11
11
  --bic-alert-background: var(--bi-color-surface-strong);
12
12
  --bic-alert-border-color: var(--bi-color-stroke);
13
- --bic-alert-color: var(--bi-color-text-subtle);
13
+ --bic-alert-color: var(--bi-color-text);
14
14
  }
15
15
 
16
16
  background: var(--bic-alert-background);
@@ -72,7 +72,7 @@
72
72
 
73
73
  .bi-avatar {
74
74
  --bic-avatar-background-color: var(--bi-color-surface-strong);
75
- --bic-avatar-color: var(--bi-color-text-subtle);
75
+ --bic-avatar-color: var(--bi-color-text);
76
76
  --bic-avatar-size: var(--bi-scale-24x);
77
77
  --bic-avatar-font-size: 1.75rem;
78
78
  border-radius: var(--bi-radius-full);
@@ -661,7 +661,7 @@
661
661
  .bi-chip {
662
662
  --bic-chip-background: var(--bi-color-surface);
663
663
  --bic-chip-background-selected: var(--bi-color-fill);
664
- --bic-chip-text-color: var(--bi-color-text-subtle);
664
+ --bic-chip-text-color: var(--bi-color-text);
665
665
  --bic-chip-text-color-selected: var(--bi-color-on-fill);
666
666
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
667
667
  --bic-chip-icon-size: var(--bi-scale-6x);
@@ -1178,9 +1178,9 @@ body:has(.bi-dialog:modal) {
1178
1178
  --bic-input-background-readonly: var(--bi-color-surface);
1179
1179
  --bic-input-border-color: var(--bi-color-stroke-contrast);
1180
1180
  --bic-input-border-color-invalid: var(--bi-color-alert-stroke-contrast);
1181
- --bic-input-color-readonly: var(--bi-color-text-subtle);
1181
+ --bic-input-color-readonly: var(--bi-color-text-secondary);
1182
1182
  --bic-input-color: var(--bi-color-text);
1183
- --bic-input-disabled-color: var(--bi-color-text-subtle);
1183
+ --bic-input-disabled-color: var(--bi-color-text-secondary);
1184
1184
  --bic-input-placeholder-color: var(--bi-color-text-secondary);
1185
1185
  --bic-input-focus-outline-color: var(--bi-states-focus);
1186
1186
  --bic-input-focus-shadow-color: var(--bi-states-focus-background);
@@ -1382,7 +1382,7 @@ body:has(.bi-dialog:modal) {
1382
1382
  --bic-field-background-press: var(--bi-states-press);
1383
1383
  --bic-field-border-color: var(--bi-color-stroke-contrast);
1384
1384
  --bic-field-border-color-invalid: var(--bi-color-alert-stroke-contrast);
1385
- --bic-field-disabled-color: var(--bi-color-text-subtle);
1385
+ --bic-field-disabled-color: var(--bi-color-text-secondary);
1386
1386
  --bic-field-description-color: var(--bi-color-text-secondary);
1387
1387
  --bic-field-label-color: var(--bi-color-text);
1388
1388
  --bic-field-label-required-color: var(--bi-states-required);
@@ -1585,7 +1585,7 @@ body:has(.bi-dialog:modal) {
1585
1585
 
1586
1586
  .bi-fieldset {
1587
1587
  --bic-fieldset-color: var(--bi-color-text);
1588
- --bic-fieldset-description-color: var(--bi-color-text-subtle);
1588
+ --bic-fieldset-description-color: var(--bi-color-text-secondary);
1589
1589
  border: 0;
1590
1590
  min-width: 0;
1591
1591
  margin: 0;
@@ -1909,22 +1909,20 @@ svg {
1909
1909
  }
1910
1910
 
1911
1911
  .bi-link {
1912
- --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
1913
1912
  --bic-link-color: var(--bi-color-primary-contrast);
1914
- --bic-link-text-decoration-thickness--hover: .125em;
1915
- --bic-link-text-decoration-thickness: .0625em;
1916
1913
 
1917
1914
  &[data-color] {
1918
- --bic-link-color-hover: var(--bi-color-contrast-hover);
1919
1915
  --bic-link-color: var(--bi-color-contrast);
1920
1916
  }
1921
1917
 
1922
- 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;
1923
1923
  text-decoration-line: underline;
1924
1924
  text-decoration-style: solid;
1925
- text-decoration-thickness: var(--bic-link-text-decoration-thickness);
1926
- text-underline-offset: .25em;
1927
- outline: none;
1925
+ text-decoration-thickness: .125em;
1928
1926
 
1929
1927
  & :is(img, svg) {
1930
1928
  vertical-align: middle;
@@ -1934,23 +1932,17 @@ svg {
1934
1932
  text-decoration: none;
1935
1933
  }
1936
1934
 
1937
- &:visited {
1938
- color: var(--bic-link-color);
1939
- }
1940
-
1941
1935
  @media (hover: hover) and (pointer: fine) {
1942
1936
  &:hover {
1943
- color: var(--bic-link-color-hover);
1944
- --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);
1945
1939
  }
1946
1940
  }
1947
1941
 
1948
1942
  &:focus-visible {
1949
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
1950
1943
  outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
1951
- outline-offset: var(--_bi--focus, 2px);
1944
+ outline-offset: var(--_bi--focus, var(--bi-scale-1x));
1952
1945
  border-radius: var(--bi-radius-small);
1953
- text-decoration: none;
1954
1946
 
1955
1947
  & * {
1956
1948
  --_bi--focus: ;
@@ -1958,7 +1950,7 @@ svg {
1958
1950
  }
1959
1951
 
1960
1952
  &:active {
1961
- background-color: var(--bi-states-press);
1953
+ background-color: color-mix(in srgb, var(--bic-link-color) 15%, transparent);
1962
1954
  border-radius: var(--bi-radius-small);
1963
1955
  }
1964
1956
  }
package/dist/index.css CHANGED
@@ -196,10 +196,8 @@
196
196
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
197
197
  --bi-color-neutral-text: var(--bi-neutral-95);
198
198
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
199
- --bi-color-neutral-text-subtle: var(--bi-neutral-90);
200
199
  --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);
200
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
203
201
  --bi-color-neutral-fill: var(--bi-neutral-50);
204
202
  --bi-color-neutral-on-fill: var(--bi-basic-white);
205
203
  --bi-color-primary-background: var(--bi-primary-0);
@@ -212,11 +210,9 @@
212
210
  --bi-color-primary-stroke-strong: var(--bi-primary-25);
213
211
  --bi-color-primary-stroke-contrast: var(--bi-primary-60);
214
212
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
215
- --bi-color-primary-text: var(--bi-primary-95);
216
- --bi-color-primary-text-subtle: var(--bi-primary-90);
213
+ --bi-color-primary-text: var(--bi-primary-90);
217
214
  --bi-color-primary-text-accent: var(--bi-primary-75);
218
215
  --bi-color-primary-contrast: var(--bi-primary-50);
219
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
220
216
  --bi-color-primary-fill: var(--bi-primary-50);
221
217
  --bi-color-primary-on-fill: var(--bi-basic-white);
222
218
  --bi-color-info-background: var(--bi-info-0);
@@ -230,10 +226,8 @@
230
226
  --bi-color-info-stroke-contrast: var(--bi-info-60);
231
227
  --bi-color-info-stroke-accent: var(--bi-info-50);
232
228
  --bi-color-info-text: var(--bi-info-95);
233
- --bi-color-info-text-subtle: var(--bi-info-90);
234
229
  --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);
230
+ --bi-color-info-contrast: var(--bi-info-95);
237
231
  --bi-color-info-fill: var(--bi-info-50);
238
232
  --bi-color-info-on-fill: var(--bi-basic-white);
239
233
  --bi-color-warning-background: var(--bi-warning-0);
@@ -247,10 +241,8 @@
247
241
  --bi-color-warning-stroke-contrast: var(--bi-warning-75);
248
242
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
249
243
  --bi-color-warning-text: var(--bi-warning-95);
250
- --bi-color-warning-text-subtle: var(--bi-warning-90);
251
244
  --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);
245
+ --bi-color-warning-contrast: var(--bi-warning-95);
254
246
  --bi-color-warning-fill: var(--bi-warning-75);
255
247
  --bi-color-warning-on-fill: var(--bi-basic-white);
256
248
  --bi-color-success-background: var(--bi-success-0);
@@ -264,10 +256,8 @@
264
256
  --bi-color-success-stroke-contrast: var(--bi-success-60);
265
257
  --bi-color-success-stroke-accent: var(--bi-success-50);
266
258
  --bi-color-success-text: var(--bi-success-95);
267
- --bi-color-success-text-subtle: var(--bi-success-90);
268
259
  --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);
260
+ --bi-color-success-contrast: var(--bi-success-95);
271
261
  --bi-color-success-fill: var(--bi-success-70);
272
262
  --bi-color-success-on-fill: var(--bi-basic-white);
273
263
  --bi-color-alert-background: var(--bi-alert-0);
@@ -281,10 +271,8 @@
281
271
  --bi-color-alert-stroke-contrast: var(--bi-alert-60);
282
272
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
283
273
  --bi-color-alert-text: var(--bi-alert-95);
284
- --bi-color-alert-text-subtle: var(--bi-alert-90);
285
274
  --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);
275
+ --bi-color-alert-contrast: var(--bi-alert-95);
288
276
  --bi-color-alert-fill: var(--bi-alert-60);
289
277
  --bi-color-alert-on-fill: var(--bi-basic-white);
290
278
  --bi-states-focus: var(--bi-primary-50);
@@ -373,10 +361,8 @@
373
361
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
374
362
  --bi-color-neutral-text: var(--bi-neutral-95);
375
363
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
376
- --bi-color-neutral-text-subtle: var(--bi-neutral-90);
377
364
  --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);
365
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
380
366
  --bi-color-neutral-fill: var(--bi-neutral-50);
381
367
  --bi-color-neutral-on-fill: var(--bi-basic-white);
382
368
  --bi-color-primary-background: var(--bi-primary-0);
@@ -389,12 +375,10 @@
389
375
  --bi-color-primary-stroke-strong: var(--bi-primary-25);
390
376
  --bi-color-primary-stroke-contrast: var(--bi-primary-60);
391
377
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
392
- --bi-color-primary-text: var(--bi-primary-95);
378
+ --bi-color-primary-text: var(--bi-primary-90);
393
379
  --bi-color-primary-text-secondary: #042f5bb2;
394
- --bi-color-primary-text-subtle: var(--bi-primary-90);
395
380
  --bi-color-primary-text-accent: var(--bi-primary-75);
396
381
  --bi-color-primary-contrast: var(--bi-primary-50);
397
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
398
382
  --bi-color-primary-fill: var(--bi-primary-50);
399
383
  --bi-color-primary-on-fill: var(--bi-basic-white);
400
384
  --bi-color-info-background: var(--bi-info-0);
@@ -409,10 +393,8 @@
409
393
  --bi-color-info-stroke-accent: var(--bi-info-50);
410
394
  --bi-color-info-text: var(--bi-info-95);
411
395
  --bi-color-info-text-secondary: #2e0b61b2;
412
- --bi-color-info-text-subtle: var(--bi-info-90);
413
396
  --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);
397
+ --bi-color-info-contrast: var(--bi-info-95);
416
398
  --bi-color-info-fill: var(--bi-info-50);
417
399
  --bi-color-info-on-fill: var(--bi-basic-white);
418
400
  --bi-color-warning-background: var(--bi-warning-0);
@@ -427,10 +409,8 @@
427
409
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
428
410
  --bi-color-warning-text: var(--bi-warning-95);
429
411
  --bi-color-warning-text-secondary: #4a3c01b2;
430
- --bi-color-warning-text-subtle: var(--bi-warning-90);
431
412
  --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);
413
+ --bi-color-warning-contrast: var(--bi-warning-95);
434
414
  --bi-color-warning-fill: var(--bi-warning-75);
435
415
  --bi-color-warning-on-fill: var(--bi-basic-white);
436
416
  --bi-color-success-background: var(--bi-success-0);
@@ -445,10 +425,8 @@
445
425
  --bi-color-success-stroke-accent: var(--bi-success-50);
446
426
  --bi-color-success-text: var(--bi-success-95);
447
427
  --bi-color-success-text-secondary: #143a16b2;
448
- --bi-color-success-text-subtle: var(--bi-success-90);
449
428
  --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);
429
+ --bi-color-success-contrast: var(--bi-success-95);
452
430
  --bi-color-success-fill: var(--bi-success-70);
453
431
  --bi-color-success-on-fill: var(--bi-basic-white);
454
432
  --bi-color-alert-background: var(--bi-alert-0);
@@ -463,10 +441,8 @@
463
441
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
464
442
  --bi-color-alert-text: var(--bi-alert-95);
465
443
  --bi-color-alert-text-secondary: #6a1b16b2;
466
- --bi-color-alert-text-subtle: var(--bi-alert-90);
467
444
  --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);
445
+ --bi-color-alert-contrast: var(--bi-alert-95);
470
446
  --bi-color-alert-fill: var(--bi-alert-60);
471
447
  --bi-color-alert-on-fill: var(--bi-basic-white);
472
448
  --bi-states-hover: #26333f1a;
@@ -493,10 +469,8 @@
493
469
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
494
470
  --bi-color-neutral-text: var(--bi-basic-white);
495
471
  --bi-color-neutral-text-secondary: #ffffffb2;
496
- --bi-color-neutral-text-subtle: var(--bi-neutral-15);
497
472
  --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);
473
+ --bi-color-neutral-contrast: var(--bi-basic-white);
500
474
  --bi-color-neutral-fill: var(--bi-neutral-50);
501
475
  --bi-color-neutral-on-fill: var(--bi-basic-white);
502
476
  --bi-color-primary-background: var(--bi-primary-100);
@@ -511,10 +485,8 @@
511
485
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
512
486
  --bi-color-primary-text: var(--bi-basic-white);
513
487
  --bi-color-primary-text-secondary: #ffffffb2;
514
- --bi-color-primary-text-subtle: var(--bi-primary-10);
515
488
  --bi-color-primary-text-accent: var(--bi-primary-30);
516
489
  --bi-color-primary-contrast: var(--bi-primary-30);
517
- --bi-color-primary-contrast-hover: var(--bi-primary-20);
518
490
  --bi-color-primary-fill: var(--bi-primary-50);
519
491
  --bi-color-primary-on-fill: var(--bi-basic-white);
520
492
  --bi-color-info-background: var(--bi-info-100);
@@ -529,10 +501,8 @@
529
501
  --bi-color-info-stroke-accent: var(--bi-info-50);
530
502
  --bi-color-info-text: var(--bi-basic-white);
531
503
  --bi-color-info-text-secondary: #ffffffb2;
532
- --bi-color-info-text-subtle: var(--bi-info-15);
533
504
  --bi-color-info-text-accent: var(--bi-info-25);
534
505
  --bi-color-info-contrast: var(--bi-info-5);
535
- --bi-color-info-contrast-hover: var(--bi-info-15);
536
506
  --bi-color-info-fill: var(--bi-info-50);
537
507
  --bi-color-info-on-fill: var(--bi-basic-white);
538
508
  --bi-color-warning-background: var(--bi-warning-100);
@@ -547,10 +517,8 @@
547
517
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
548
518
  --bi-color-warning-text: var(--bi-basic-white);
549
519
  --bi-color-warning-text-secondary: #ffffffb2;
550
- --bi-color-warning-text-subtle: var(--bi-warning-15);
551
520
  --bi-color-warning-text-accent: var(--bi-warning-50);
552
521
  --bi-color-warning-contrast: var(--bi-warning-5);
553
- --bi-color-warning-contrast-hover: var(--bi-warning-15);
554
522
  --bi-color-warning-fill: var(--bi-warning-75);
555
523
  --bi-color-warning-on-fill: var(--bi-basic-white);
556
524
  --bi-color-success-background: var(--bi-success-100);
@@ -565,10 +533,8 @@
565
533
  --bi-color-success-stroke-accent: var(--bi-success-50);
566
534
  --bi-color-success-text: var(--bi-basic-white);
567
535
  --bi-color-success-text-secondary: #ffffffb2;
568
- --bi-color-success-text-subtle: var(--bi-success-10);
569
536
  --bi-color-success-text-accent: var(--bi-success-25);
570
537
  --bi-color-success-contrast: var(--bi-success-5);
571
- --bi-color-success-contrast-hover: var(--bi-success-15);
572
538
  --bi-color-success-fill: var(--bi-success-70);
573
539
  --bi-color-success-on-fill: var(--bi-basic-white);
574
540
  --bi-color-alert-background: var(--bi-alert-100);
@@ -583,10 +549,8 @@
583
549
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
584
550
  --bi-color-alert-text: var(--bi-basic-white);
585
551
  --bi-color-alert-text-secondary: #ffffffb2;
586
- --bi-color-alert-text-subtle: var(--bi-alert-15);
587
552
  --bi-color-alert-text-accent: var(--bi-alert-25);
588
553
  --bi-color-alert-contrast: var(--bi-alert-5);
589
- --bi-color-alert-contrast-hover: var(--bi-alert-15);
590
554
  --bi-color-alert-fill: var(--bi-alert-60);
591
555
  --bi-color-alert-on-fill: var(--bi-basic-white);
592
556
  --bi-states-hover: #ffffff1a;
@@ -609,10 +573,8 @@
609
573
  --bi-color-stroke-accent: var(--bi-color-neutral-stroke-accent);
610
574
  --bi-color-text: var(--bi-color-neutral-text);
611
575
  --bi-color-text-secondary: var(--bi-color-neutral-text-secondary);
612
- --bi-color-text-subtle: var(--bi-color-neutral-text-subtle);
613
576
  --bi-color-text-accent: var(--bi-color-neutral-text-accent);
614
577
  --bi-color-contrast: var(--bi-color-neutral-contrast);
615
- --bi-color-contrast-hover: var(--bi-color-neutral-contrast-hover);
616
578
  --bi-color-fill: var(--bi-color-neutral-fill);
617
579
  --bi-color-on-fill: var(--bi-color-neutral-on-fill);
618
580
  }
@@ -630,10 +592,8 @@
630
592
  --bi-color-stroke-accent: var(--bi-color-alert-stroke-accent);
631
593
  --bi-color-text: var(--bi-color-alert-text);
632
594
  --bi-color-text-secondary: var(--bi-color-alert-text-secondary);
633
- --bi-color-text-subtle: var(--bi-color-alert-text-subtle);
634
595
  --bi-color-text-accent: var(--bi-color-alert-text-accent);
635
596
  --bi-color-contrast: var(--bi-color-alert-contrast);
636
- --bi-color-contrast-hover: var(--bi-color-alert-contrast-hover);
637
597
  --bi-color-fill: var(--bi-color-alert-fill);
638
598
  --bi-color-on-fill: var(--bi-color-alert-on-fill);
639
599
  }
@@ -651,10 +611,8 @@
651
611
  --bi-color-stroke-accent: var(--bi-color-info-stroke-accent);
652
612
  --bi-color-text: var(--bi-color-info-text);
653
613
  --bi-color-text-secondary: var(--bi-color-info-text-secondary);
654
- --bi-color-text-subtle: var(--bi-color-info-text-subtle);
655
614
  --bi-color-text-accent: var(--bi-color-info-text-accent);
656
615
  --bi-color-contrast: var(--bi-color-info-contrast);
657
- --bi-color-contrast-hover: var(--bi-color-info-contrast-hover);
658
616
  --bi-color-fill: var(--bi-color-info-fill);
659
617
  --bi-color-on-fill: var(--bi-color-info-on-fill);
660
618
  }
@@ -672,10 +630,8 @@
672
630
  --bi-color-stroke-accent: var(--bi-color-primary-stroke-accent);
673
631
  --bi-color-text: var(--bi-color-primary-text);
674
632
  --bi-color-text-secondary: var(--bi-color-primary-text-secondary);
675
- --bi-color-text-subtle: var(--bi-color-primary-text-subtle);
676
633
  --bi-color-text-accent: var(--bi-color-primary-text-accent);
677
634
  --bi-color-contrast: var(--bi-color-primary-contrast);
678
- --bi-color-contrast-hover: var(--bi-color-primary-contrast-hover);
679
635
  --bi-color-fill: var(--bi-color-primary-fill);
680
636
  --bi-color-on-fill: var(--bi-color-primary-on-fill);
681
637
  }
@@ -693,10 +649,8 @@
693
649
  --bi-color-stroke-accent: var(--bi-color-success-stroke-accent);
694
650
  --bi-color-text: var(--bi-color-success-text);
695
651
  --bi-color-text-secondary: var(--bi-color-success-text-secondary);
696
- --bi-color-text-subtle: var(--bi-color-success-text-subtle);
697
652
  --bi-color-text-accent: var(--bi-color-success-text-accent);
698
653
  --bi-color-contrast: var(--bi-color-success-contrast);
699
- --bi-color-contrast-hover: var(--bi-color-success-contrast-hover);
700
654
  --bi-color-fill: var(--bi-color-success-fill);
701
655
  --bi-color-on-fill: var(--bi-color-success-on-fill);
702
656
  }
@@ -714,10 +668,8 @@
714
668
  --bi-color-stroke-accent: var(--bi-color-warning-stroke-accent);
715
669
  --bi-color-text: var(--bi-color-warning-text);
716
670
  --bi-color-text-secondary: var(--bi-color-warning-text-secondary);
717
- --bi-color-text-subtle: var(--bi-color-warning-text-subtle);
718
671
  --bi-color-text-accent: var(--bi-color-warning-text-accent);
719
672
  --bi-color-contrast: var(--bi-color-warning-contrast);
720
- --bi-color-contrast-hover: var(--bi-color-warning-contrast-hover);
721
673
  --bi-color-fill: var(--bi-color-warning-fill);
722
674
  --bi-color-on-fill: var(--bi-color-warning-on-fill);
723
675
  }
@@ -925,9 +877,3 @@ body, :host {
925
877
  font-family: var(--bi-font-family-plain), system-ui;
926
878
  line-height: 1.5;
927
879
  }
928
-
929
- html {
930
- &:has(bi-navbar), &:has(bi-in-page-links) {
931
- scroll-padding-top: var(--bi-layout-navbar-height);
932
- }
933
- }
package/dist/salesforce.css CHANGED
@@ -195,10 +195,8 @@
195
195
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
196
196
  --bi-color-neutral-text: var(--bi-neutral-95);
197
197
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
198
- --bi-color-neutral-text-subtle: var(--bi-neutral-90);
199
198
  --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);
199
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
202
200
  --bi-color-neutral-fill: var(--bi-neutral-50);
203
201
  --bi-color-neutral-on-fill: var(--bi-basic-white);
204
202
  --bi-color-primary-background: var(--bi-primary-0);
@@ -211,11 +209,9 @@
211
209
  --bi-color-primary-stroke-strong: var(--bi-primary-25);
212
210
  --bi-color-primary-stroke-contrast: var(--bi-primary-60);
213
211
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
214
- --bi-color-primary-text: var(--bi-primary-95);
215
- --bi-color-primary-text-subtle: var(--bi-primary-90);
212
+ --bi-color-primary-text: var(--bi-primary-90);
216
213
  --bi-color-primary-text-accent: var(--bi-primary-75);
217
214
  --bi-color-primary-contrast: var(--bi-primary-50);
218
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
219
215
  --bi-color-primary-fill: var(--bi-primary-50);
220
216
  --bi-color-primary-on-fill: var(--bi-basic-white);
221
217
  --bi-color-info-background: var(--bi-info-0);
@@ -229,10 +225,8 @@
229
225
  --bi-color-info-stroke-contrast: var(--bi-info-60);
230
226
  --bi-color-info-stroke-accent: var(--bi-info-50);
231
227
  --bi-color-info-text: var(--bi-info-95);
232
- --bi-color-info-text-subtle: var(--bi-info-90);
233
228
  --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);
229
+ --bi-color-info-contrast: var(--bi-info-95);
236
230
  --bi-color-info-fill: var(--bi-info-50);
237
231
  --bi-color-info-on-fill: var(--bi-basic-white);
238
232
  --bi-color-warning-background: var(--bi-warning-0);
@@ -246,10 +240,8 @@
246
240
  --bi-color-warning-stroke-contrast: var(--bi-warning-75);
247
241
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
248
242
  --bi-color-warning-text: var(--bi-warning-95);
249
- --bi-color-warning-text-subtle: var(--bi-warning-90);
250
243
  --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);
244
+ --bi-color-warning-contrast: var(--bi-warning-95);
253
245
  --bi-color-warning-fill: var(--bi-warning-75);
254
246
  --bi-color-warning-on-fill: var(--bi-basic-white);
255
247
  --bi-color-success-background: var(--bi-success-0);
@@ -263,10 +255,8 @@
263
255
  --bi-color-success-stroke-contrast: var(--bi-success-60);
264
256
  --bi-color-success-stroke-accent: var(--bi-success-50);
265
257
  --bi-color-success-text: var(--bi-success-95);
266
- --bi-color-success-text-subtle: var(--bi-success-90);
267
258
  --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);
259
+ --bi-color-success-contrast: var(--bi-success-95);
270
260
  --bi-color-success-fill: var(--bi-success-70);
271
261
  --bi-color-success-on-fill: var(--bi-basic-white);
272
262
  --bi-color-alert-background: var(--bi-alert-0);
@@ -280,10 +270,8 @@
280
270
  --bi-color-alert-stroke-contrast: var(--bi-alert-60);
281
271
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
282
272
  --bi-color-alert-text: var(--bi-alert-95);
283
- --bi-color-alert-text-subtle: var(--bi-alert-90);
284
273
  --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);
274
+ --bi-color-alert-contrast: var(--bi-alert-95);
287
275
  --bi-color-alert-fill: var(--bi-alert-60);
288
276
  --bi-color-alert-on-fill: var(--bi-basic-white);
289
277
  --bi-states-focus: var(--bi-primary-50);
@@ -372,10 +360,8 @@
372
360
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
373
361
  --bi-color-neutral-text: var(--bi-neutral-95);
374
362
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
375
- --bi-color-neutral-text-subtle: var(--bi-neutral-90);
376
363
  --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);
364
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
379
365
  --bi-color-neutral-fill: var(--bi-neutral-50);
380
366
  --bi-color-neutral-on-fill: var(--bi-basic-white);
381
367
  --bi-color-primary-background: var(--bi-primary-0);
@@ -388,12 +374,10 @@
388
374
  --bi-color-primary-stroke-strong: var(--bi-primary-25);
389
375
  --bi-color-primary-stroke-contrast: var(--bi-primary-60);
390
376
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
391
- --bi-color-primary-text: var(--bi-primary-95);
377
+ --bi-color-primary-text: var(--bi-primary-90);
392
378
  --bi-color-primary-text-secondary: #042f5bb2;
393
- --bi-color-primary-text-subtle: var(--bi-primary-90);
394
379
  --bi-color-primary-text-accent: var(--bi-primary-75);
395
380
  --bi-color-primary-contrast: var(--bi-primary-50);
396
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
397
381
  --bi-color-primary-fill: var(--bi-primary-50);
398
382
  --bi-color-primary-on-fill: var(--bi-basic-white);
399
383
  --bi-color-info-background: var(--bi-info-0);
@@ -408,10 +392,8 @@
408
392
  --bi-color-info-stroke-accent: var(--bi-info-50);
409
393
  --bi-color-info-text: var(--bi-info-95);
410
394
  --bi-color-info-text-secondary: #2e0b61b2;
411
- --bi-color-info-text-subtle: var(--bi-info-90);
412
395
  --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);
396
+ --bi-color-info-contrast: var(--bi-info-95);
415
397
  --bi-color-info-fill: var(--bi-info-50);
416
398
  --bi-color-info-on-fill: var(--bi-basic-white);
417
399
  --bi-color-warning-background: var(--bi-warning-0);
@@ -426,10 +408,8 @@
426
408
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
427
409
  --bi-color-warning-text: var(--bi-warning-95);
428
410
  --bi-color-warning-text-secondary: #4a3c01b2;
429
- --bi-color-warning-text-subtle: var(--bi-warning-90);
430
411
  --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);
412
+ --bi-color-warning-contrast: var(--bi-warning-95);
433
413
  --bi-color-warning-fill: var(--bi-warning-75);
434
414
  --bi-color-warning-on-fill: var(--bi-basic-white);
435
415
  --bi-color-success-background: var(--bi-success-0);
@@ -444,10 +424,8 @@
444
424
  --bi-color-success-stroke-accent: var(--bi-success-50);
445
425
  --bi-color-success-text: var(--bi-success-95);
446
426
  --bi-color-success-text-secondary: #143a16b2;
447
- --bi-color-success-text-subtle: var(--bi-success-90);
448
427
  --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);
428
+ --bi-color-success-contrast: var(--bi-success-95);
451
429
  --bi-color-success-fill: var(--bi-success-70);
452
430
  --bi-color-success-on-fill: var(--bi-basic-white);
453
431
  --bi-color-alert-background: var(--bi-alert-0);
@@ -462,10 +440,8 @@
462
440
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
463
441
  --bi-color-alert-text: var(--bi-alert-95);
464
442
  --bi-color-alert-text-secondary: #6a1b16b2;
465
- --bi-color-alert-text-subtle: var(--bi-alert-90);
466
443
  --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);
444
+ --bi-color-alert-contrast: var(--bi-alert-95);
469
445
  --bi-color-alert-fill: var(--bi-alert-60);
470
446
  --bi-color-alert-on-fill: var(--bi-basic-white);
471
447
  --bi-states-hover: #26333f1a;
@@ -492,10 +468,8 @@
492
468
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
493
469
  --bi-color-neutral-text: var(--bi-basic-white);
494
470
  --bi-color-neutral-text-secondary: #ffffffb2;
495
- --bi-color-neutral-text-subtle: var(--bi-neutral-15);
496
471
  --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);
472
+ --bi-color-neutral-contrast: var(--bi-basic-white);
499
473
  --bi-color-neutral-fill: var(--bi-neutral-50);
500
474
  --bi-color-neutral-on-fill: var(--bi-basic-white);
501
475
  --bi-color-primary-background: var(--bi-primary-100);
@@ -510,10 +484,8 @@
510
484
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
511
485
  --bi-color-primary-text: var(--bi-basic-white);
512
486
  --bi-color-primary-text-secondary: #ffffffb2;
513
- --bi-color-primary-text-subtle: var(--bi-primary-10);
514
487
  --bi-color-primary-text-accent: var(--bi-primary-30);
515
488
  --bi-color-primary-contrast: var(--bi-primary-30);
516
- --bi-color-primary-contrast-hover: var(--bi-primary-20);
517
489
  --bi-color-primary-fill: var(--bi-primary-50);
518
490
  --bi-color-primary-on-fill: var(--bi-basic-white);
519
491
  --bi-color-info-background: var(--bi-info-100);
@@ -528,10 +500,8 @@
528
500
  --bi-color-info-stroke-accent: var(--bi-info-50);
529
501
  --bi-color-info-text: var(--bi-basic-white);
530
502
  --bi-color-info-text-secondary: #ffffffb2;
531
- --bi-color-info-text-subtle: var(--bi-info-15);
532
503
  --bi-color-info-text-accent: var(--bi-info-25);
533
504
  --bi-color-info-contrast: var(--bi-info-5);
534
- --bi-color-info-contrast-hover: var(--bi-info-15);
535
505
  --bi-color-info-fill: var(--bi-info-50);
536
506
  --bi-color-info-on-fill: var(--bi-basic-white);
537
507
  --bi-color-warning-background: var(--bi-warning-100);
@@ -546,10 +516,8 @@
546
516
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
547
517
  --bi-color-warning-text: var(--bi-basic-white);
548
518
  --bi-color-warning-text-secondary: #ffffffb2;
549
- --bi-color-warning-text-subtle: var(--bi-warning-15);
550
519
  --bi-color-warning-text-accent: var(--bi-warning-50);
551
520
  --bi-color-warning-contrast: var(--bi-warning-5);
552
- --bi-color-warning-contrast-hover: var(--bi-warning-15);
553
521
  --bi-color-warning-fill: var(--bi-warning-75);
554
522
  --bi-color-warning-on-fill: var(--bi-basic-white);
555
523
  --bi-color-success-background: var(--bi-success-100);
@@ -564,10 +532,8 @@
564
532
  --bi-color-success-stroke-accent: var(--bi-success-50);
565
533
  --bi-color-success-text: var(--bi-basic-white);
566
534
  --bi-color-success-text-secondary: #ffffffb2;
567
- --bi-color-success-text-subtle: var(--bi-success-10);
568
535
  --bi-color-success-text-accent: var(--bi-success-25);
569
536
  --bi-color-success-contrast: var(--bi-success-5);
570
- --bi-color-success-contrast-hover: var(--bi-success-15);
571
537
  --bi-color-success-fill: var(--bi-success-70);
572
538
  --bi-color-success-on-fill: var(--bi-basic-white);
573
539
  --bi-color-alert-background: var(--bi-alert-100);
@@ -582,10 +548,8 @@
582
548
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
583
549
  --bi-color-alert-text: var(--bi-basic-white);
584
550
  --bi-color-alert-text-secondary: #ffffffb2;
585
- --bi-color-alert-text-subtle: var(--bi-alert-15);
586
551
  --bi-color-alert-text-accent: var(--bi-alert-25);
587
552
  --bi-color-alert-contrast: var(--bi-alert-5);
588
- --bi-color-alert-contrast-hover: var(--bi-alert-15);
589
553
  --bi-color-alert-fill: var(--bi-alert-60);
590
554
  --bi-color-alert-on-fill: var(--bi-basic-white);
591
555
  --bi-states-hover: #ffffff1a;
@@ -608,10 +572,8 @@
608
572
  --bi-color-stroke-accent: var(--bi-color-neutral-stroke-accent);
609
573
  --bi-color-text: var(--bi-color-neutral-text);
610
574
  --bi-color-text-secondary: var(--bi-color-neutral-text-secondary);
611
- --bi-color-text-subtle: var(--bi-color-neutral-text-subtle);
612
575
  --bi-color-text-accent: var(--bi-color-neutral-text-accent);
613
576
  --bi-color-contrast: var(--bi-color-neutral-contrast);
614
- --bi-color-contrast-hover: var(--bi-color-neutral-contrast-hover);
615
577
  --bi-color-fill: var(--bi-color-neutral-fill);
616
578
  --bi-color-on-fill: var(--bi-color-neutral-on-fill);
617
579
  }
@@ -629,10 +591,8 @@
629
591
  --bi-color-stroke-accent: var(--bi-color-alert-stroke-accent);
630
592
  --bi-color-text: var(--bi-color-alert-text);
631
593
  --bi-color-text-secondary: var(--bi-color-alert-text-secondary);
632
- --bi-color-text-subtle: var(--bi-color-alert-text-subtle);
633
594
  --bi-color-text-accent: var(--bi-color-alert-text-accent);
634
595
  --bi-color-contrast: var(--bi-color-alert-contrast);
635
- --bi-color-contrast-hover: var(--bi-color-alert-contrast-hover);
636
596
  --bi-color-fill: var(--bi-color-alert-fill);
637
597
  --bi-color-on-fill: var(--bi-color-alert-on-fill);
638
598
  }
@@ -650,10 +610,8 @@
650
610
  --bi-color-stroke-accent: var(--bi-color-info-stroke-accent);
651
611
  --bi-color-text: var(--bi-color-info-text);
652
612
  --bi-color-text-secondary: var(--bi-color-info-text-secondary);
653
- --bi-color-text-subtle: var(--bi-color-info-text-subtle);
654
613
  --bi-color-text-accent: var(--bi-color-info-text-accent);
655
614
  --bi-color-contrast: var(--bi-color-info-contrast);
656
- --bi-color-contrast-hover: var(--bi-color-info-contrast-hover);
657
615
  --bi-color-fill: var(--bi-color-info-fill);
658
616
  --bi-color-on-fill: var(--bi-color-info-on-fill);
659
617
  }
@@ -671,10 +629,8 @@
671
629
  --bi-color-stroke-accent: var(--bi-color-primary-stroke-accent);
672
630
  --bi-color-text: var(--bi-color-primary-text);
673
631
  --bi-color-text-secondary: var(--bi-color-primary-text-secondary);
674
- --bi-color-text-subtle: var(--bi-color-primary-text-subtle);
675
632
  --bi-color-text-accent: var(--bi-color-primary-text-accent);
676
633
  --bi-color-contrast: var(--bi-color-primary-contrast);
677
- --bi-color-contrast-hover: var(--bi-color-primary-contrast-hover);
678
634
  --bi-color-fill: var(--bi-color-primary-fill);
679
635
  --bi-color-on-fill: var(--bi-color-primary-on-fill);
680
636
  }
@@ -692,10 +648,8 @@
692
648
  --bi-color-stroke-accent: var(--bi-color-success-stroke-accent);
693
649
  --bi-color-text: var(--bi-color-success-text);
694
650
  --bi-color-text-secondary: var(--bi-color-success-text-secondary);
695
- --bi-color-text-subtle: var(--bi-color-success-text-subtle);
696
651
  --bi-color-text-accent: var(--bi-color-success-text-accent);
697
652
  --bi-color-contrast: var(--bi-color-success-contrast);
698
- --bi-color-contrast-hover: var(--bi-color-success-contrast-hover);
699
653
  --bi-color-fill: var(--bi-color-success-fill);
700
654
  --bi-color-on-fill: var(--bi-color-success-on-fill);
701
655
  }
@@ -713,10 +667,8 @@
713
667
  --bi-color-stroke-accent: var(--bi-color-warning-stroke-accent);
714
668
  --bi-color-text: var(--bi-color-warning-text);
715
669
  --bi-color-text-secondary: var(--bi-color-warning-text-secondary);
716
- --bi-color-text-subtle: var(--bi-color-warning-text-subtle);
717
670
  --bi-color-text-accent: var(--bi-color-warning-text-accent);
718
671
  --bi-color-contrast: var(--bi-color-warning-contrast);
719
- --bi-color-contrast-hover: var(--bi-color-warning-contrast-hover);
720
672
  --bi-color-fill: var(--bi-color-warning-fill);
721
673
  --bi-color-on-fill: var(--bi-color-warning-on-fill);
722
674
  }
@@ -725,7 +677,7 @@
725
677
  --bic-alert-background: var(--bi-color-primary-surface-strong);
726
678
  --bic-alert-border-color: var(--bi-color-primary-stroke);
727
679
  --bic-alert-border-width: var(--bi-stroke-thin);
728
- --bic-alert-color: var(--bi-color-primary-text-subtle);
680
+ --bic-alert-color: var(--bi-color-primary-text);
729
681
  --bic-alert-icon-size: var(--bi-icon-medium);
730
682
  --bic-alert-gap: var(--bi-scale-1x);
731
683
  --bic-alert-padding: var(--bi-scale-2x);
@@ -733,7 +685,7 @@
733
685
  &[data-color] {
734
686
  --bic-alert-background: var(--bi-color-surface-strong);
735
687
  --bic-alert-border-color: var(--bi-color-stroke);
736
- --bic-alert-color: var(--bi-color-text-subtle);
688
+ --bic-alert-color: var(--bi-color-text);
737
689
  }
738
690
 
739
691
  background: var(--bic-alert-background);
@@ -795,7 +747,7 @@
795
747
 
796
748
  .bi-avatar {
797
749
  --bic-avatar-background-color: var(--bi-color-surface-strong);
798
- --bic-avatar-color: var(--bi-color-text-subtle);
750
+ --bic-avatar-color: var(--bi-color-text);
799
751
  --bic-avatar-size: var(--bi-scale-24x);
800
752
  --bic-avatar-font-size: 1.75rem;
801
753
  border-radius: var(--bi-radius-full);
@@ -1384,7 +1336,7 @@
1384
1336
  .bi-chip {
1385
1337
  --bic-chip-background: var(--bi-color-surface);
1386
1338
  --bic-chip-background-selected: var(--bi-color-fill);
1387
- --bic-chip-text-color: var(--bi-color-text-subtle);
1339
+ --bic-chip-text-color: var(--bi-color-text);
1388
1340
  --bic-chip-text-color-selected: var(--bi-color-on-fill);
1389
1341
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
1390
1342
  --bic-chip-icon-size: var(--bi-scale-6x);
@@ -1901,9 +1853,9 @@ body:has(.bi-dialog:modal) {
1901
1853
  --bic-input-background-readonly: var(--bi-color-surface);
1902
1854
  --bic-input-border-color: var(--bi-color-stroke-contrast);
1903
1855
  --bic-input-border-color-invalid: var(--bi-color-alert-stroke-contrast);
1904
- --bic-input-color-readonly: var(--bi-color-text-subtle);
1856
+ --bic-input-color-readonly: var(--bi-color-text-secondary);
1905
1857
  --bic-input-color: var(--bi-color-text);
1906
- --bic-input-disabled-color: var(--bi-color-text-subtle);
1858
+ --bic-input-disabled-color: var(--bi-color-text-secondary);
1907
1859
  --bic-input-placeholder-color: var(--bi-color-text-secondary);
1908
1860
  --bic-input-focus-outline-color: var(--bi-states-focus);
1909
1861
  --bic-input-focus-shadow-color: var(--bi-states-focus-background);
@@ -2105,7 +2057,7 @@ body:has(.bi-dialog:modal) {
2105
2057
  --bic-field-background-press: var(--bi-states-press);
2106
2058
  --bic-field-border-color: var(--bi-color-stroke-contrast);
2107
2059
  --bic-field-border-color-invalid: var(--bi-color-alert-stroke-contrast);
2108
- --bic-field-disabled-color: var(--bi-color-text-subtle);
2060
+ --bic-field-disabled-color: var(--bi-color-text-secondary);
2109
2061
  --bic-field-description-color: var(--bi-color-text-secondary);
2110
2062
  --bic-field-label-color: var(--bi-color-text);
2111
2063
  --bic-field-label-required-color: var(--bi-states-required);
@@ -2308,7 +2260,7 @@ body:has(.bi-dialog:modal) {
2308
2260
 
2309
2261
  .bi-fieldset {
2310
2262
  --bic-fieldset-color: var(--bi-color-text);
2311
- --bic-fieldset-description-color: var(--bi-color-text-subtle);
2263
+ --bic-fieldset-description-color: var(--bi-color-text-secondary);
2312
2264
  border: 0;
2313
2265
  min-width: 0;
2314
2266
  margin: 0;
@@ -2632,22 +2584,20 @@ svg {
2632
2584
  }
2633
2585
 
2634
2586
  .bi-link {
2635
- --bic-link-color-hover: var(--bi-color-primary-contrast-hover);
2636
2587
  --bic-link-color: var(--bi-color-primary-contrast);
2637
- --bic-link-text-decoration-thickness--hover: .125em;
2638
- --bic-link-text-decoration-thickness: .0625em;
2639
2588
 
2640
2589
  &[data-color] {
2641
- --bic-link-color-hover: var(--bi-color-contrast-hover);
2642
2590
  --bic-link-color: var(--bi-color-contrast);
2643
2591
  }
2644
2592
 
2645
- color: var(--bic-link-color);
2593
+ color: var(--bi-color-text);
2594
+ -webkit-text-decoration-color: var(--bic-link-color);
2595
+ text-decoration-color: var(--bic-link-color);
2596
+ text-underline-offset: .125em;
2597
+ outline: none;
2646
2598
  text-decoration-line: underline;
2647
2599
  text-decoration-style: solid;
2648
- text-decoration-thickness: var(--bic-link-text-decoration-thickness);
2649
- text-underline-offset: .25em;
2650
- outline: none;
2600
+ text-decoration-thickness: .125em;
2651
2601
 
2652
2602
  & :is(img, svg) {
2653
2603
  vertical-align: middle;
@@ -2657,23 +2607,17 @@ svg {
2657
2607
  text-decoration: none;
2658
2608
  }
2659
2609
 
2660
- &:visited {
2661
- color: var(--bic-link-color);
2662
- }
2663
-
2664
2610
  @media (hover: hover) and (pointer: fine) {
2665
2611
  &:hover {
2666
- color: var(--bic-link-color-hover);
2667
- --bic-link-text-decoration-thickness: var(--bic-link-text-decoration-thickness--hover);
2612
+ background-color: color-mix(in srgb, var(--bic-link-color) 10%, transparent);
2613
+ border-radius: var(--bi-radius-small);
2668
2614
  }
2669
2615
  }
2670
2616
 
2671
2617
  &:focus-visible {
2672
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
2673
2618
  outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
2674
- outline-offset: var(--_bi--focus, 2px);
2619
+ outline-offset: var(--_bi--focus, var(--bi-scale-1x));
2675
2620
  border-radius: var(--bi-radius-small);
2676
- text-decoration: none;
2677
2621
 
2678
2622
  & * {
2679
2623
  --_bi--focus: ;
@@ -2681,7 +2625,7 @@ svg {
2681
2625
  }
2682
2626
 
2683
2627
  &:active {
2684
- background-color: var(--bi-states-press);
2628
+ background-color: color-mix(in srgb, var(--bic-link-color) 15%, transparent);
2685
2629
  border-radius: var(--bi-radius-small);
2686
2630
  }
2687
2631
  }
package/dist/tokens.css CHANGED
@@ -195,10 +195,8 @@
195
195
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
196
196
  --bi-color-neutral-text: var(--bi-neutral-95);
197
197
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
198
- --bi-color-neutral-text-subtle: var(--bi-neutral-90);
199
198
  --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);
199
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
202
200
  --bi-color-neutral-fill: var(--bi-neutral-50);
203
201
  --bi-color-neutral-on-fill: var(--bi-basic-white);
204
202
  --bi-color-primary-background: var(--bi-primary-0);
@@ -211,11 +209,9 @@
211
209
  --bi-color-primary-stroke-strong: var(--bi-primary-25);
212
210
  --bi-color-primary-stroke-contrast: var(--bi-primary-60);
213
211
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
214
- --bi-color-primary-text: var(--bi-primary-95);
215
- --bi-color-primary-text-subtle: var(--bi-primary-90);
212
+ --bi-color-primary-text: var(--bi-primary-90);
216
213
  --bi-color-primary-text-accent: var(--bi-primary-75);
217
214
  --bi-color-primary-contrast: var(--bi-primary-50);
218
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
219
215
  --bi-color-primary-fill: var(--bi-primary-50);
220
216
  --bi-color-primary-on-fill: var(--bi-basic-white);
221
217
  --bi-color-info-background: var(--bi-info-0);
@@ -229,10 +225,8 @@
229
225
  --bi-color-info-stroke-contrast: var(--bi-info-60);
230
226
  --bi-color-info-stroke-accent: var(--bi-info-50);
231
227
  --bi-color-info-text: var(--bi-info-95);
232
- --bi-color-info-text-subtle: var(--bi-info-90);
233
228
  --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);
229
+ --bi-color-info-contrast: var(--bi-info-95);
236
230
  --bi-color-info-fill: var(--bi-info-50);
237
231
  --bi-color-info-on-fill: var(--bi-basic-white);
238
232
  --bi-color-warning-background: var(--bi-warning-0);
@@ -246,10 +240,8 @@
246
240
  --bi-color-warning-stroke-contrast: var(--bi-warning-75);
247
241
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
248
242
  --bi-color-warning-text: var(--bi-warning-95);
249
- --bi-color-warning-text-subtle: var(--bi-warning-90);
250
243
  --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);
244
+ --bi-color-warning-contrast: var(--bi-warning-95);
253
245
  --bi-color-warning-fill: var(--bi-warning-75);
254
246
  --bi-color-warning-on-fill: var(--bi-basic-white);
255
247
  --bi-color-success-background: var(--bi-success-0);
@@ -263,10 +255,8 @@
263
255
  --bi-color-success-stroke-contrast: var(--bi-success-60);
264
256
  --bi-color-success-stroke-accent: var(--bi-success-50);
265
257
  --bi-color-success-text: var(--bi-success-95);
266
- --bi-color-success-text-subtle: var(--bi-success-90);
267
258
  --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);
259
+ --bi-color-success-contrast: var(--bi-success-95);
270
260
  --bi-color-success-fill: var(--bi-success-70);
271
261
  --bi-color-success-on-fill: var(--bi-basic-white);
272
262
  --bi-color-alert-background: var(--bi-alert-0);
@@ -280,10 +270,8 @@
280
270
  --bi-color-alert-stroke-contrast: var(--bi-alert-60);
281
271
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
282
272
  --bi-color-alert-text: var(--bi-alert-95);
283
- --bi-color-alert-text-subtle: var(--bi-alert-90);
284
273
  --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);
274
+ --bi-color-alert-contrast: var(--bi-alert-95);
287
275
  --bi-color-alert-fill: var(--bi-alert-60);
288
276
  --bi-color-alert-on-fill: var(--bi-basic-white);
289
277
  --bi-states-focus: var(--bi-primary-50);
@@ -372,10 +360,8 @@
372
360
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
373
361
  --bi-color-neutral-text: var(--bi-neutral-95);
374
362
  --bi-color-neutral-text-secondary: var(--bi-neutral-60);
375
- --bi-color-neutral-text-subtle: var(--bi-neutral-90);
376
363
  --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);
364
+ --bi-color-neutral-contrast: var(--bi-neutral-95);
379
365
  --bi-color-neutral-fill: var(--bi-neutral-50);
380
366
  --bi-color-neutral-on-fill: var(--bi-basic-white);
381
367
  --bi-color-primary-background: var(--bi-primary-0);
@@ -388,12 +374,10 @@
388
374
  --bi-color-primary-stroke-strong: var(--bi-primary-25);
389
375
  --bi-color-primary-stroke-contrast: var(--bi-primary-60);
390
376
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
391
- --bi-color-primary-text: var(--bi-primary-95);
377
+ --bi-color-primary-text: var(--bi-primary-90);
392
378
  --bi-color-primary-text-secondary: #042f5bb2;
393
- --bi-color-primary-text-subtle: var(--bi-primary-90);
394
379
  --bi-color-primary-text-accent: var(--bi-primary-75);
395
380
  --bi-color-primary-contrast: var(--bi-primary-50);
396
- --bi-color-primary-contrast-hover: var(--bi-primary-60);
397
381
  --bi-color-primary-fill: var(--bi-primary-50);
398
382
  --bi-color-primary-on-fill: var(--bi-basic-white);
399
383
  --bi-color-info-background: var(--bi-info-0);
@@ -408,10 +392,8 @@
408
392
  --bi-color-info-stroke-accent: var(--bi-info-50);
409
393
  --bi-color-info-text: var(--bi-info-95);
410
394
  --bi-color-info-text-secondary: #2e0b61b2;
411
- --bi-color-info-text-subtle: var(--bi-info-90);
412
395
  --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);
396
+ --bi-color-info-contrast: var(--bi-info-95);
415
397
  --bi-color-info-fill: var(--bi-info-50);
416
398
  --bi-color-info-on-fill: var(--bi-basic-white);
417
399
  --bi-color-warning-background: var(--bi-warning-0);
@@ -426,10 +408,8 @@
426
408
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
427
409
  --bi-color-warning-text: var(--bi-warning-95);
428
410
  --bi-color-warning-text-secondary: #4a3c01b2;
429
- --bi-color-warning-text-subtle: var(--bi-warning-90);
430
411
  --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);
412
+ --bi-color-warning-contrast: var(--bi-warning-95);
433
413
  --bi-color-warning-fill: var(--bi-warning-75);
434
414
  --bi-color-warning-on-fill: var(--bi-basic-white);
435
415
  --bi-color-success-background: var(--bi-success-0);
@@ -444,10 +424,8 @@
444
424
  --bi-color-success-stroke-accent: var(--bi-success-50);
445
425
  --bi-color-success-text: var(--bi-success-95);
446
426
  --bi-color-success-text-secondary: #143a16b2;
447
- --bi-color-success-text-subtle: var(--bi-success-90);
448
427
  --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);
428
+ --bi-color-success-contrast: var(--bi-success-95);
451
429
  --bi-color-success-fill: var(--bi-success-70);
452
430
  --bi-color-success-on-fill: var(--bi-basic-white);
453
431
  --bi-color-alert-background: var(--bi-alert-0);
@@ -462,10 +440,8 @@
462
440
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
463
441
  --bi-color-alert-text: var(--bi-alert-95);
464
442
  --bi-color-alert-text-secondary: #6a1b16b2;
465
- --bi-color-alert-text-subtle: var(--bi-alert-90);
466
443
  --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);
444
+ --bi-color-alert-contrast: var(--bi-alert-95);
469
445
  --bi-color-alert-fill: var(--bi-alert-60);
470
446
  --bi-color-alert-on-fill: var(--bi-basic-white);
471
447
  --bi-states-hover: #26333f1a;
@@ -492,10 +468,8 @@
492
468
  --bi-color-neutral-stroke-accent: var(--bi-primary-50);
493
469
  --bi-color-neutral-text: var(--bi-basic-white);
494
470
  --bi-color-neutral-text-secondary: #ffffffb2;
495
- --bi-color-neutral-text-subtle: var(--bi-neutral-15);
496
471
  --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);
472
+ --bi-color-neutral-contrast: var(--bi-basic-white);
499
473
  --bi-color-neutral-fill: var(--bi-neutral-50);
500
474
  --bi-color-neutral-on-fill: var(--bi-basic-white);
501
475
  --bi-color-primary-background: var(--bi-primary-100);
@@ -510,10 +484,8 @@
510
484
  --bi-color-primary-stroke-accent: var(--bi-primary-50);
511
485
  --bi-color-primary-text: var(--bi-basic-white);
512
486
  --bi-color-primary-text-secondary: #ffffffb2;
513
- --bi-color-primary-text-subtle: var(--bi-primary-10);
514
487
  --bi-color-primary-text-accent: var(--bi-primary-30);
515
488
  --bi-color-primary-contrast: var(--bi-primary-30);
516
- --bi-color-primary-contrast-hover: var(--bi-primary-20);
517
489
  --bi-color-primary-fill: var(--bi-primary-50);
518
490
  --bi-color-primary-on-fill: var(--bi-basic-white);
519
491
  --bi-color-info-background: var(--bi-info-100);
@@ -528,10 +500,8 @@
528
500
  --bi-color-info-stroke-accent: var(--bi-info-50);
529
501
  --bi-color-info-text: var(--bi-basic-white);
530
502
  --bi-color-info-text-secondary: #ffffffb2;
531
- --bi-color-info-text-subtle: var(--bi-info-15);
532
503
  --bi-color-info-text-accent: var(--bi-info-25);
533
504
  --bi-color-info-contrast: var(--bi-info-5);
534
- --bi-color-info-contrast-hover: var(--bi-info-15);
535
505
  --bi-color-info-fill: var(--bi-info-50);
536
506
  --bi-color-info-on-fill: var(--bi-basic-white);
537
507
  --bi-color-warning-background: var(--bi-warning-100);
@@ -546,10 +516,8 @@
546
516
  --bi-color-warning-stroke-accent: var(--bi-secondary-50);
547
517
  --bi-color-warning-text: var(--bi-basic-white);
548
518
  --bi-color-warning-text-secondary: #ffffffb2;
549
- --bi-color-warning-text-subtle: var(--bi-warning-15);
550
519
  --bi-color-warning-text-accent: var(--bi-warning-50);
551
520
  --bi-color-warning-contrast: var(--bi-warning-5);
552
- --bi-color-warning-contrast-hover: var(--bi-warning-15);
553
521
  --bi-color-warning-fill: var(--bi-warning-75);
554
522
  --bi-color-warning-on-fill: var(--bi-basic-white);
555
523
  --bi-color-success-background: var(--bi-success-100);
@@ -564,10 +532,8 @@
564
532
  --bi-color-success-stroke-accent: var(--bi-success-50);
565
533
  --bi-color-success-text: var(--bi-basic-white);
566
534
  --bi-color-success-text-secondary: #ffffffb2;
567
- --bi-color-success-text-subtle: var(--bi-success-10);
568
535
  --bi-color-success-text-accent: var(--bi-success-25);
569
536
  --bi-color-success-contrast: var(--bi-success-5);
570
- --bi-color-success-contrast-hover: var(--bi-success-15);
571
537
  --bi-color-success-fill: var(--bi-success-70);
572
538
  --bi-color-success-on-fill: var(--bi-basic-white);
573
539
  --bi-color-alert-background: var(--bi-alert-100);
@@ -582,10 +548,8 @@
582
548
  --bi-color-alert-stroke-accent: var(--bi-alert-50);
583
549
  --bi-color-alert-text: var(--bi-basic-white);
584
550
  --bi-color-alert-text-secondary: #ffffffb2;
585
- --bi-color-alert-text-subtle: var(--bi-alert-15);
586
551
  --bi-color-alert-text-accent: var(--bi-alert-25);
587
552
  --bi-color-alert-contrast: var(--bi-alert-5);
588
- --bi-color-alert-contrast-hover: var(--bi-alert-15);
589
553
  --bi-color-alert-fill: var(--bi-alert-60);
590
554
  --bi-color-alert-on-fill: var(--bi-basic-white);
591
555
  --bi-states-hover: #ffffff1a;
@@ -608,10 +572,8 @@
608
572
  --bi-color-stroke-accent: var(--bi-color-neutral-stroke-accent);
609
573
  --bi-color-text: var(--bi-color-neutral-text);
610
574
  --bi-color-text-secondary: var(--bi-color-neutral-text-secondary);
611
- --bi-color-text-subtle: var(--bi-color-neutral-text-subtle);
612
575
  --bi-color-text-accent: var(--bi-color-neutral-text-accent);
613
576
  --bi-color-contrast: var(--bi-color-neutral-contrast);
614
- --bi-color-contrast-hover: var(--bi-color-neutral-contrast-hover);
615
577
  --bi-color-fill: var(--bi-color-neutral-fill);
616
578
  --bi-color-on-fill: var(--bi-color-neutral-on-fill);
617
579
  }
@@ -629,10 +591,8 @@
629
591
  --bi-color-stroke-accent: var(--bi-color-alert-stroke-accent);
630
592
  --bi-color-text: var(--bi-color-alert-text);
631
593
  --bi-color-text-secondary: var(--bi-color-alert-text-secondary);
632
- --bi-color-text-subtle: var(--bi-color-alert-text-subtle);
633
594
  --bi-color-text-accent: var(--bi-color-alert-text-accent);
634
595
  --bi-color-contrast: var(--bi-color-alert-contrast);
635
- --bi-color-contrast-hover: var(--bi-color-alert-contrast-hover);
636
596
  --bi-color-fill: var(--bi-color-alert-fill);
637
597
  --bi-color-on-fill: var(--bi-color-alert-on-fill);
638
598
  }
@@ -650,10 +610,8 @@
650
610
  --bi-color-stroke-accent: var(--bi-color-info-stroke-accent);
651
611
  --bi-color-text: var(--bi-color-info-text);
652
612
  --bi-color-text-secondary: var(--bi-color-info-text-secondary);
653
- --bi-color-text-subtle: var(--bi-color-info-text-subtle);
654
613
  --bi-color-text-accent: var(--bi-color-info-text-accent);
655
614
  --bi-color-contrast: var(--bi-color-info-contrast);
656
- --bi-color-contrast-hover: var(--bi-color-info-contrast-hover);
657
615
  --bi-color-fill: var(--bi-color-info-fill);
658
616
  --bi-color-on-fill: var(--bi-color-info-on-fill);
659
617
  }
@@ -671,10 +629,8 @@
671
629
  --bi-color-stroke-accent: var(--bi-color-primary-stroke-accent);
672
630
  --bi-color-text: var(--bi-color-primary-text);
673
631
  --bi-color-text-secondary: var(--bi-color-primary-text-secondary);
674
- --bi-color-text-subtle: var(--bi-color-primary-text-subtle);
675
632
  --bi-color-text-accent: var(--bi-color-primary-text-accent);
676
633
  --bi-color-contrast: var(--bi-color-primary-contrast);
677
- --bi-color-contrast-hover: var(--bi-color-primary-contrast-hover);
678
634
  --bi-color-fill: var(--bi-color-primary-fill);
679
635
  --bi-color-on-fill: var(--bi-color-primary-on-fill);
680
636
  }
@@ -692,10 +648,8 @@
692
648
  --bi-color-stroke-accent: var(--bi-color-success-stroke-accent);
693
649
  --bi-color-text: var(--bi-color-success-text);
694
650
  --bi-color-text-secondary: var(--bi-color-success-text-secondary);
695
- --bi-color-text-subtle: var(--bi-color-success-text-subtle);
696
651
  --bi-color-text-accent: var(--bi-color-success-text-accent);
697
652
  --bi-color-contrast: var(--bi-color-success-contrast);
698
- --bi-color-contrast-hover: var(--bi-color-success-contrast-hover);
699
653
  --bi-color-fill: var(--bi-color-success-fill);
700
654
  --bi-color-on-fill: var(--bi-color-success-on-fill);
701
655
  }
@@ -713,10 +667,8 @@
713
667
  --bi-color-stroke-accent: var(--bi-color-warning-stroke-accent);
714
668
  --bi-color-text: var(--bi-color-warning-text);
715
669
  --bi-color-text-secondary: var(--bi-color-warning-text-secondary);
716
- --bi-color-text-subtle: var(--bi-color-warning-text-subtle);
717
670
  --bi-color-text-accent: var(--bi-color-warning-text-accent);
718
671
  --bi-color-contrast: var(--bi-color-warning-contrast);
719
- --bi-color-contrast-hover: var(--bi-color-warning-contrast-hover);
720
672
  --bi-color-fill: var(--bi-color-warning-fill);
721
673
  --bi-color-on-fill: var(--bi-color-warning-on-fill);
722
674
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.12.4",
4
+ "version": "0.13.0",
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.4",
30
+ "browserslist": "4.28.7",
31
31
  "lightningcss": "1.33.0",
32
32
  "modern-normalize": "3.0.1",
33
- "@bi-digital/tokens": "0.12.4"
33
+ "@bi-digital/tokens": "0.13.0"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",