@bi-digital/css 0.6.0 → 0.6.1

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/components/alert.css +11 -4
  2. package/dist/components/avatar.css +28 -0
  3. package/dist/components/button.css +11 -4
  4. package/dist/components/details.css +6 -2
  5. package/dist/components/field.css +9 -5
  6. package/dist/components/filter-group.css +6 -2
  7. package/dist/components/input.css +10 -6
  8. package/dist/components/link.css +6 -2
  9. package/dist/components/skip-link.css +1 -1
  10. package/dist/components/tabs.css +6 -2
  11. package/dist/components.css +94 -28
  12. package/dist/salesforce.css +94 -28
  13. package/package.json +3 -3
package/dist/components/alert.css CHANGED
@@ -6,7 +6,6 @@
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);
9
- --_bic-alert-close-column: 0;
10
9
  }
11
10
 
12
11
  .bi-alert[data-dark="true"] {
@@ -22,7 +21,7 @@
22
21
  padding: var(--bic-alert-padding);
23
22
  border-radius: var(--bi-radius-medium);
24
23
  gap: var(--bic-alert-gap);
25
- grid-template-columns: auto 1fr var(--_bic-alert-close-column);
24
+ grid-template-columns: 1fr;
26
25
  width: -webkit-fit-content;
27
26
  width: fit-content;
28
27
  display: grid;
@@ -33,8 +32,16 @@
33
32
  font-size: var(--bic-alert-icon-size);
34
33
  }
35
34
 
36
- .bi-alert:has( > .bi-button) {
37
- --_bic-alert-close-column: auto;
35
+ .bi-alert:has( > svg:first-child) {
36
+ grid-template-columns: auto 1fr;
37
+ }
38
+
39
+ .bi-alert:has( > .bi-button:last-child) {
40
+ grid-template-columns: 1fr auto;
41
+ }
42
+
43
+ .bi-alert:has( > .bi-button:last-child):has( > svg:first-child) {
44
+ grid-template-columns: auto 1fr auto;
38
45
  }
39
46
 
40
47
  .bi-alert > .bi-button {
package/dist/components/avatar.css CHANGED
@@ -3,6 +3,14 @@
3
3
  --bic-avatar-color: var(--bi-primary-90);
4
4
  --bic-avatar-size: var(--bi-scale-24x);
5
5
  --bic-avatar-font-size: 1.75rem;
6
+ }
7
+
8
+ .bi-avatar[data-dark="true"] {
9
+ --bic-avatar-background-color: var(--bi-primary-85);
10
+ --bic-avatar-color: var(--bi-primary-10);
11
+ }
12
+
13
+ .bi-avatar {
6
14
  border-radius: var(--bi-radius-full);
7
15
  background-color: var(--bic-avatar-background-color);
8
16
  color: var(--bic-avatar-color);
@@ -29,21 +37,41 @@
29
37
  --bic-avatar-color: var(--bi-info-90);
30
38
  }
31
39
 
40
+ .bi-avatar[data-color="info"][data-dark="true"] {
41
+ --bic-avatar-background-color: var(--bi-info-85);
42
+ --bic-avatar-color: var(--bi-info-10);
43
+ }
44
+
32
45
  .bi-avatar[data-color="warning"] {
33
46
  --bic-avatar-background-color: var(--bi-warning-10);
34
47
  --bic-avatar-color: var(--bi-warning-90);
35
48
  }
36
49
 
50
+ .bi-avatar[data-color="warning"][data-dark="true"] {
51
+ --bic-avatar-background-color: var(--bi-warning-85);
52
+ --bic-avatar-color: var(--bi-warning-10);
53
+ }
54
+
37
55
  .bi-avatar[data-color="success"] {
38
56
  --bic-avatar-background-color: var(--bi-success-10);
39
57
  --bic-avatar-color: var(--bi-success-90);
40
58
  }
41
59
 
60
+ .bi-avatar[data-color="success"][data-dark="true"] {
61
+ --bic-avatar-background-color: var(--bi-success-85);
62
+ --bic-avatar-color: var(--bi-success-10);
63
+ }
64
+
42
65
  .bi-avatar[data-color="alert"] {
43
66
  --bic-avatar-background-color: var(--bi-alert-10);
44
67
  --bic-avatar-color: var(--bi-alert-90);
45
68
  }
46
69
 
70
+ .bi-avatar[data-color="alert"][data-dark="true"] {
71
+ --bic-avatar-background-color: var(--bi-alert-85);
72
+ --bic-avatar-color: var(--bi-alert-10);
73
+ }
74
+
47
75
  .bi-avatar[data-size="small"] {
48
76
  --bic-avatar-size: var(--bi-scale-16x);
49
77
  --bic-avatar-font-size: 1.25rem;
package/dist/components/button.css CHANGED
@@ -9,6 +9,8 @@
9
9
  --bic-button-background: transparent;
10
10
  --bic-button-background-hover: transparent;
11
11
  --bic-button-background-press: transparent;
12
+ --bic-button-focus-shadow-color: var(--bi-basic-white);
13
+ --bic-button-focus-outline-color: var(--bi-primary-50);
12
14
  font-family: museo-sans, Arial, sans-serif;
13
15
  font-size: var(--bic-button-font-size);
14
16
  line-height: var(--bic-button-line-height);
@@ -47,9 +49,14 @@
47
49
  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
48
50
  }
49
51
 
52
+ .bi-button[data-dark="true"] {
53
+ --bic-button-focus-shadow-color: var(--bi-neutral-95);
54
+ --bic-button-focus-outline-color: var(--bi-secondary-50);
55
+ }
56
+
50
57
  .bi-button:focus-visible {
51
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
52
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
58
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-button-focus-shadow-color), var(--bic-button-box-shadow));
59
+ outline: var(--_bi--focus, 3px solid var(--bic-button-focus-outline-color));
53
60
  outline-offset: var(--_bi--focus, 2px);
54
61
  }
55
62
 
@@ -96,14 +103,14 @@
96
103
 
97
104
  .bi-button[data-variant="outlined"] {
98
105
  --bic-button-color: var(--bi-primary-50);
99
- --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-primary-50) inset;
106
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
100
107
  --bic-button-background-hover: var(--bi-states-hover-dark);
101
108
  --bic-button-background-press: var(--bi-states-press-dark);
102
109
  }
103
110
 
104
111
  .bi-button[data-variant="outlined"][data-dark="true"] {
105
112
  --bic-button-color: var(--bi-basic-white);
106
- --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-basic-white) inset;
113
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-basic-white) inset;
107
114
  --bic-button-background-hover: var(--bi-states-hover-light);
108
115
  --bic-button-background-press: var(--bi-states-press-light);
109
116
  }
package/dist/components/details.css CHANGED
@@ -5,6 +5,8 @@ details.bi-details {
5
5
  --bic-details-color: var(--bi-neutral-90);
6
6
  --bic-details-border-color: var(--bi-neutral-15);
7
7
  --bic-details-padding: var(--bi-scale-4x);
8
+ --bic-details-focus-shadow-color: var(--bi-basic-white);
9
+ --bic-details-focus-outline-color: var(--bi-primary-50);
8
10
  }
9
11
 
10
12
  details.bi-details[data-dark="true"] {
@@ -13,6 +15,8 @@ details.bi-details[data-dark="true"] {
13
15
  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
14
16
  --bic-details-border-color: var(--bi-neutral-70);
15
17
  --bic-details-color: var(--bi-basic-white);
18
+ --bic-details-focus-shadow-color: var(--bi-neutral-95);
19
+ --bic-details-focus-outline-color: var(--bi-secondary-50);
16
20
  }
17
21
 
18
22
  details.bi-details {
@@ -59,8 +63,8 @@ details.bi-details summary:active {
59
63
  }
60
64
 
61
65
  details.bi-details summary:focus-visible {
62
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
63
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
66
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
67
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
64
68
  outline-offset: var(--_bi--focus, -2px);
65
69
  border-radius: var(--bi-radius-medium);
66
70
  }
package/dist/components/field.css CHANGED
@@ -15,6 +15,8 @@
15
15
  --bic-field-description-color: var(--bi-neutral-60);
16
16
  --bic-field-label-color: var(--bi-neutral-95);
17
17
  --bic-field-label-required-color: var(--bi-primary-50);
18
+ --bic-field-focus-outline-color: var(--bi-primary-50);
19
+ --bic-field-focus-shadow-color: var(--bi-basic-white);
18
20
  }
19
21
 
20
22
  .bi-field[data-dark="true"] {
@@ -27,6 +29,8 @@
27
29
  --bic-field-description-color: var(--bi-neutral-15);
28
30
  --bic-field-label-color: var(--bi-basic-white);
29
31
  --bic-field-label-required-color: var(--bi-secondary-50);
32
+ --bic-field-focus-outline-color: var(--bi-secondary-50);
33
+ --bic-field-focus-shadow-color: var(--bi-neutral-95);
30
34
  }
31
35
 
32
36
  .bi-field > * {
@@ -126,8 +130,8 @@
126
130
  }
127
131
 
128
132
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
129
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
130
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
133
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
134
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
131
135
  outline-offset: var(--_bi--focus, 2px);
132
136
  }
133
137
 
@@ -201,8 +205,8 @@
201
205
  }
202
206
 
203
207
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
204
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
205
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
208
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
209
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
206
210
  outline-offset: var(--_bi--focus, 2px);
207
211
  }
208
212
 
@@ -249,7 +253,7 @@
249
253
  }
250
254
 
251
255
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
252
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
256
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
253
257
  outline-offset: 0;
254
258
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
255
259
  }
package/dist/components/filter-group.css CHANGED
@@ -5,6 +5,8 @@
5
5
  --bic-filter-group-background-expanded: var(--bi-neutral-15);
6
6
  --bic-filter-group-border-color: var(--bi-neutral-15);
7
7
  --bic-filter-group-text-color: var(--bi-neutral-90);
8
+ --bic-filter-focus-shadow-color: var(--bi-basic-white);
9
+ --bic-filter-focus-outline-color: var(--bi-primary-50);
8
10
  }
9
11
 
10
12
  .bi-filter-group[data-dark="true"] {
@@ -14,6 +16,8 @@
14
16
  --bic-filter-group-background-expanded: var(--bi-neutral-80);
15
17
  --bic-filter-group-border-color: var(--bi-neutral-70);
16
18
  --bic-filter-group-text-color: var(--bi-basic-white);
19
+ --bic-filter-focus-shadow-color: var(--bi-neutral-95);
20
+ --bic-filter-focus-outline-color: var(--bi-secondary-50);
17
21
  }
18
22
 
19
23
  .bi-filter-group {
@@ -50,8 +54,8 @@
50
54
  }
51
55
 
52
56
  .bi-filter-group > button:focus-visible {
53
- box-shadow: 0 0 0 4.5px var(--bi-basic-white);
54
- outline: 1.5px solid var(--bi-primary-50);
57
+ box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
58
+ outline: var(--bi-stroke-thick) solid var(--bic-filter-focus-outline-color);
55
59
  outline-offset: 2px;
56
60
  border-radius: var(--bi-radius-small);
57
61
  }
package/dist/components/input.css CHANGED
@@ -22,6 +22,8 @@
22
22
  --bic-input-color: var(--bi-neutral-95);
23
23
  --bic-input-disabled-color: var(--bi-neutral-50);
24
24
  --bic-input-placeholder-color: var(--bi-neutral-60);
25
+ --bic-input-focus-outline-color: var(--bi-primary-50);
26
+ --bic-input-focus-shadow-color: var(--bi-basic-white);
25
27
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
26
28
  }
27
29
 
@@ -33,6 +35,8 @@
33
35
  --bic-input-color: var(--bi-basic-white);
34
36
  --bic-input-disabled-color: var(--bi-neutral-40);
35
37
  --bic-input-placeholder-color: var(--bi-neutral-30);
38
+ --bic-input-focus-outline-color: var(--bi-secondary-50);
39
+ --bic-input-focus-shadow-color: var(--bi-neutral-95);
36
40
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
37
41
  }
38
42
 
@@ -67,11 +71,11 @@
67
71
  }
68
72
 
69
73
  .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
70
- --bic-input-border-color: var(--bi-primary-50);
74
+ --bic-input-border-color: var(--bic-input-focus-outline-color);
71
75
  }
72
76
 
73
77
  .bi-input:focus-visible {
74
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
78
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
75
79
  outline-offset: 0;
76
80
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
77
81
  }
@@ -174,8 +178,8 @@
174
178
  }
175
179
 
176
180
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
177
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
178
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
181
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
182
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
179
183
  outline-offset: var(--_bi--focus, 2px);
180
184
  }
181
185
 
@@ -267,8 +271,8 @@
267
271
  }
268
272
 
269
273
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
270
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
271
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
274
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
275
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
272
276
  outline-offset: var(--_bi--focus, 2px);
273
277
  }
274
278
 
package/dist/components/link.css CHANGED
@@ -5,6 +5,8 @@
5
5
  --bic-link-color: var(--bi-primary-50);
6
6
  --bic-link-text-decoration-thickness--hover: .125em;
7
7
  --bic-link-text-decoration-thickness: .0625em;
8
+ --bic-link-focus-shadow-color: var(--bi-basic-white);
9
+ --bic-link-focus-outline-color: var(--bi-primary-50);
8
10
  color: var(--bic-link-color);
9
11
  -webkit-text-decoration-line: underline;
10
12
  text-decoration-line: underline;
@@ -28,6 +30,8 @@
28
30
  --bic-link-color-active: var(--bi-primary-30);
29
31
  --bic-link-color-hover: var(--bi-primary-30);
30
32
  --bic-link-color: var(--bi-primary-40);
33
+ --bic-link-focus-shadow-color: var(--bi-neutral-95);
34
+ --bic-link-focus-outline-color: var(--bi-secondary-50);
31
35
  }
32
36
 
33
37
  .bi-link[data-color="neutral"] {
@@ -60,8 +64,8 @@
60
64
  }
61
65
 
62
66
  .bi-link:focus-visible {
63
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
64
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
67
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
68
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-link-focus-outline-color));
65
69
  outline-offset: var(--_bi--focus, 2px);
66
70
  border-radius: var(--bi-radius-small);
67
71
  }
package/dist/components/skip-link.css CHANGED
@@ -27,6 +27,6 @@
27
27
  transform: translate(-50%, var(--bi-scale-2x));
28
28
  border-radius: var(--bi-radius-medium);
29
29
  outline-offset: 2px;
30
- outline: 1.5px solid var(--bi-primary-50);
30
+ outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
31
31
  box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
32
32
  }
package/dist/components/tabs.css CHANGED
@@ -1,10 +1,14 @@
1
1
  .bi-tabs {
2
2
  --bic-tabs-tab-color-selected: var(--bi-primary-50);
3
3
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
4
+ --bic-tabs-focus-shadow-color: var(--bi-basic-white);
5
+ --bic-tabs-focus-outline-color: var(--bi-primary-50);
4
6
  }
5
7
 
6
8
  .bi-tabs[data-dark="true"] {
7
9
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
10
+ --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
11
+ --bic-tabs-focus-outline-color: var(--bi-secondary-50);
8
12
  }
9
13
 
10
14
  .bi-tabs {
@@ -41,8 +45,8 @@
41
45
  }
42
46
 
43
47
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
44
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
45
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
48
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
49
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-tabs-focus-outline-color));
46
50
  outline-offset: var(--_bi--focus, -2px);
47
51
  }
48
52
 
package/dist/components.css CHANGED
@@ -6,7 +6,6 @@
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);
9
- --_bic-alert-close-column: 0;
10
9
  }
11
10
 
12
11
  .bi-alert[data-dark="true"] {
@@ -22,7 +21,7 @@
22
21
  padding: var(--bic-alert-padding);
23
22
  border-radius: var(--bi-radius-medium);
24
23
  gap: var(--bic-alert-gap);
25
- grid-template-columns: auto 1fr var(--_bic-alert-close-column);
24
+ grid-template-columns: 1fr;
26
25
  width: -webkit-fit-content;
27
26
  width: fit-content;
28
27
  display: grid;
@@ -33,8 +32,16 @@
33
32
  font-size: var(--bic-alert-icon-size);
34
33
  }
35
34
 
36
- .bi-alert:has( > .bi-button) {
37
- --_bic-alert-close-column: auto;
35
+ .bi-alert:has( > svg:first-child) {
36
+ grid-template-columns: auto 1fr;
37
+ }
38
+
39
+ .bi-alert:has( > .bi-button:last-child) {
40
+ grid-template-columns: 1fr auto;
41
+ }
42
+
43
+ .bi-alert:has( > .bi-button:last-child):has( > svg:first-child) {
44
+ grid-template-columns: auto 1fr auto;
38
45
  }
39
46
 
40
47
  .bi-alert > .bi-button {
@@ -131,6 +138,14 @@
131
138
  --bic-avatar-color: var(--bi-primary-90);
132
139
  --bic-avatar-size: var(--bi-scale-24x);
133
140
  --bic-avatar-font-size: 1.75rem;
141
+ }
142
+
143
+ .bi-avatar[data-dark="true"] {
144
+ --bic-avatar-background-color: var(--bi-primary-85);
145
+ --bic-avatar-color: var(--bi-primary-10);
146
+ }
147
+
148
+ .bi-avatar {
134
149
  border-radius: var(--bi-radius-full);
135
150
  background-color: var(--bic-avatar-background-color);
136
151
  color: var(--bic-avatar-color);
@@ -157,21 +172,41 @@
157
172
  --bic-avatar-color: var(--bi-info-90);
158
173
  }
159
174
 
175
+ .bi-avatar[data-color="info"][data-dark="true"] {
176
+ --bic-avatar-background-color: var(--bi-info-85);
177
+ --bic-avatar-color: var(--bi-info-10);
178
+ }
179
+
160
180
  .bi-avatar[data-color="warning"] {
161
181
  --bic-avatar-background-color: var(--bi-warning-10);
162
182
  --bic-avatar-color: var(--bi-warning-90);
163
183
  }
164
184
 
185
+ .bi-avatar[data-color="warning"][data-dark="true"] {
186
+ --bic-avatar-background-color: var(--bi-warning-85);
187
+ --bic-avatar-color: var(--bi-warning-10);
188
+ }
189
+
165
190
  .bi-avatar[data-color="success"] {
166
191
  --bic-avatar-background-color: var(--bi-success-10);
167
192
  --bic-avatar-color: var(--bi-success-90);
168
193
  }
169
194
 
195
+ .bi-avatar[data-color="success"][data-dark="true"] {
196
+ --bic-avatar-background-color: var(--bi-success-85);
197
+ --bic-avatar-color: var(--bi-success-10);
198
+ }
199
+
170
200
  .bi-avatar[data-color="alert"] {
171
201
  --bic-avatar-background-color: var(--bi-alert-10);
172
202
  --bic-avatar-color: var(--bi-alert-90);
173
203
  }
174
204
 
205
+ .bi-avatar[data-color="alert"][data-dark="true"] {
206
+ --bic-avatar-background-color: var(--bi-alert-85);
207
+ --bic-avatar-color: var(--bi-alert-10);
208
+ }
209
+
175
210
  .bi-avatar[data-size="small"] {
176
211
  --bic-avatar-size: var(--bi-scale-16x);
177
212
  --bic-avatar-font-size: 1.25rem;
@@ -315,6 +350,8 @@
315
350
  --bic-button-background: transparent;
316
351
  --bic-button-background-hover: transparent;
317
352
  --bic-button-background-press: transparent;
353
+ --bic-button-focus-shadow-color: var(--bi-basic-white);
354
+ --bic-button-focus-outline-color: var(--bi-primary-50);
318
355
  font-family: museo-sans, Arial, sans-serif;
319
356
  font-size: var(--bic-button-font-size);
320
357
  line-height: var(--bic-button-line-height);
@@ -353,9 +390,14 @@
353
390
  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
354
391
  }
355
392
 
393
+ .bi-button[data-dark="true"] {
394
+ --bic-button-focus-shadow-color: var(--bi-neutral-95);
395
+ --bic-button-focus-outline-color: var(--bi-secondary-50);
396
+ }
397
+
356
398
  .bi-button:focus-visible {
357
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
358
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
399
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-button-focus-shadow-color), var(--bic-button-box-shadow));
400
+ outline: var(--_bi--focus, 3px solid var(--bic-button-focus-outline-color));
359
401
  outline-offset: var(--_bi--focus, 2px);
360
402
  }
361
403
 
@@ -402,14 +444,14 @@
402
444
 
403
445
  .bi-button[data-variant="outlined"] {
404
446
  --bic-button-color: var(--bi-primary-50);
405
- --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-primary-50) inset;
447
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
406
448
  --bic-button-background-hover: var(--bi-states-hover-dark);
407
449
  --bic-button-background-press: var(--bi-states-press-dark);
408
450
  }
409
451
 
410
452
  .bi-button[data-variant="outlined"][data-dark="true"] {
411
453
  --bic-button-color: var(--bi-basic-white);
412
- --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-basic-white) inset;
454
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-basic-white) inset;
413
455
  --bic-button-background-hover: var(--bi-states-hover-light);
414
456
  --bic-button-background-press: var(--bi-states-press-light);
415
457
  }
@@ -1252,6 +1294,8 @@ details.bi-details {
1252
1294
  --bic-details-color: var(--bi-neutral-90);
1253
1295
  --bic-details-border-color: var(--bi-neutral-15);
1254
1296
  --bic-details-padding: var(--bi-scale-4x);
1297
+ --bic-details-focus-shadow-color: var(--bi-basic-white);
1298
+ --bic-details-focus-outline-color: var(--bi-primary-50);
1255
1299
  }
1256
1300
 
1257
1301
  details.bi-details[data-dark="true"] {
@@ -1260,6 +1304,8 @@ details.bi-details[data-dark="true"] {
1260
1304
  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
1261
1305
  --bic-details-border-color: var(--bi-neutral-70);
1262
1306
  --bic-details-color: var(--bi-basic-white);
1307
+ --bic-details-focus-shadow-color: var(--bi-neutral-95);
1308
+ --bic-details-focus-outline-color: var(--bi-secondary-50);
1263
1309
  }
1264
1310
 
1265
1311
  details.bi-details {
@@ -1306,8 +1352,8 @@ details.bi-details summary:active {
1306
1352
  }
1307
1353
 
1308
1354
  details.bi-details summary:focus-visible {
1309
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
1310
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1355
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
1356
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
1311
1357
  outline-offset: var(--_bi--focus, -2px);
1312
1358
  border-radius: var(--bi-radius-medium);
1313
1359
  }
@@ -1692,6 +1738,8 @@ body:has(.bi-dialog:modal) {
1692
1738
  --bic-field-description-color: var(--bi-neutral-60);
1693
1739
  --bic-field-label-color: var(--bi-neutral-95);
1694
1740
  --bic-field-label-required-color: var(--bi-primary-50);
1741
+ --bic-field-focus-outline-color: var(--bi-primary-50);
1742
+ --bic-field-focus-shadow-color: var(--bi-basic-white);
1695
1743
  }
1696
1744
 
1697
1745
  .bi-field[data-dark="true"] {
@@ -1704,6 +1752,8 @@ body:has(.bi-dialog:modal) {
1704
1752
  --bic-field-description-color: var(--bi-neutral-15);
1705
1753
  --bic-field-label-color: var(--bi-basic-white);
1706
1754
  --bic-field-label-required-color: var(--bi-secondary-50);
1755
+ --bic-field-focus-outline-color: var(--bi-secondary-50);
1756
+ --bic-field-focus-shadow-color: var(--bi-neutral-95);
1707
1757
  }
1708
1758
 
1709
1759
  .bi-field > * {
@@ -1803,8 +1853,8 @@ body:has(.bi-dialog:modal) {
1803
1853
  }
1804
1854
 
1805
1855
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
1806
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1807
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1856
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1857
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
1808
1858
  outline-offset: var(--_bi--focus, 2px);
1809
1859
  }
1810
1860
 
@@ -1878,8 +1928,8 @@ body:has(.bi-dialog:modal) {
1878
1928
  }
1879
1929
 
1880
1930
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
1881
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1882
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1931
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1932
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
1883
1933
  outline-offset: var(--_bi--focus, 2px);
1884
1934
  }
1885
1935
 
@@ -1926,7 +1976,7 @@ body:has(.bi-dialog:modal) {
1926
1976
  }
1927
1977
 
1928
1978
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
1929
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
1979
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
1930
1980
  outline-offset: 0;
1931
1981
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
1932
1982
  }
@@ -2039,6 +2089,8 @@ body:has(.bi-dialog:modal) {
2039
2089
  --bic-filter-group-background-expanded: var(--bi-neutral-15);
2040
2090
  --bic-filter-group-border-color: var(--bi-neutral-15);
2041
2091
  --bic-filter-group-text-color: var(--bi-neutral-90);
2092
+ --bic-filter-focus-shadow-color: var(--bi-basic-white);
2093
+ --bic-filter-focus-outline-color: var(--bi-primary-50);
2042
2094
  }
2043
2095
 
2044
2096
  .bi-filter-group[data-dark="true"] {
@@ -2048,6 +2100,8 @@ body:has(.bi-dialog:modal) {
2048
2100
  --bic-filter-group-background-expanded: var(--bi-neutral-80);
2049
2101
  --bic-filter-group-border-color: var(--bi-neutral-70);
2050
2102
  --bic-filter-group-text-color: var(--bi-basic-white);
2103
+ --bic-filter-focus-shadow-color: var(--bi-neutral-95);
2104
+ --bic-filter-focus-outline-color: var(--bi-secondary-50);
2051
2105
  }
2052
2106
 
2053
2107
  .bi-filter-group {
@@ -2084,8 +2138,8 @@ body:has(.bi-dialog:modal) {
2084
2138
  }
2085
2139
 
2086
2140
  .bi-filter-group > button:focus-visible {
2087
- box-shadow: 0 0 0 4.5px var(--bi-basic-white);
2088
- outline: 1.5px solid var(--bi-primary-50);
2141
+ box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
2142
+ outline: var(--bi-stroke-thick) solid var(--bic-filter-focus-outline-color);
2089
2143
  outline-offset: 2px;
2090
2144
  border-radius: var(--bi-radius-small);
2091
2145
  }
@@ -2383,6 +2437,8 @@ svg[data-color="white"] {
2383
2437
  --bic-input-color: var(--bi-neutral-95);
2384
2438
  --bic-input-disabled-color: var(--bi-neutral-50);
2385
2439
  --bic-input-placeholder-color: var(--bi-neutral-60);
2440
+ --bic-input-focus-outline-color: var(--bi-primary-50);
2441
+ --bic-input-focus-shadow-color: var(--bi-basic-white);
2386
2442
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2387
2443
  }
2388
2444
 
@@ -2394,6 +2450,8 @@ svg[data-color="white"] {
2394
2450
  --bic-input-color: var(--bi-basic-white);
2395
2451
  --bic-input-disabled-color: var(--bi-neutral-40);
2396
2452
  --bic-input-placeholder-color: var(--bi-neutral-30);
2453
+ --bic-input-focus-outline-color: var(--bi-secondary-50);
2454
+ --bic-input-focus-shadow-color: var(--bi-neutral-95);
2397
2455
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2398
2456
  }
2399
2457
 
@@ -2428,11 +2486,11 @@ svg[data-color="white"] {
2428
2486
  }
2429
2487
 
2430
2488
  .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
2431
- --bic-input-border-color: var(--bi-primary-50);
2489
+ --bic-input-border-color: var(--bic-input-focus-outline-color);
2432
2490
  }
2433
2491
 
2434
2492
  .bi-input:focus-visible {
2435
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2493
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2436
2494
  outline-offset: 0;
2437
2495
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2438
2496
  }
@@ -2535,8 +2593,8 @@ svg[data-color="white"] {
2535
2593
  }
2536
2594
 
2537
2595
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2538
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2539
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2596
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2597
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2540
2598
  outline-offset: var(--_bi--focus, 2px);
2541
2599
  }
2542
2600
 
@@ -2628,8 +2686,8 @@ svg[data-color="white"] {
2628
2686
  }
2629
2687
 
2630
2688
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2631
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2632
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2689
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2690
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2633
2691
  outline-offset: var(--_bi--focus, 2px);
2634
2692
  }
2635
2693
 
@@ -2757,6 +2815,8 @@ svg[data-color="white"] {
2757
2815
  --bic-link-color: var(--bi-primary-50);
2758
2816
  --bic-link-text-decoration-thickness--hover: .125em;
2759
2817
  --bic-link-text-decoration-thickness: .0625em;
2818
+ --bic-link-focus-shadow-color: var(--bi-basic-white);
2819
+ --bic-link-focus-outline-color: var(--bi-primary-50);
2760
2820
  color: var(--bic-link-color);
2761
2821
  -webkit-text-decoration-line: underline;
2762
2822
  text-decoration-line: underline;
@@ -2780,6 +2840,8 @@ svg[data-color="white"] {
2780
2840
  --bic-link-color-active: var(--bi-primary-30);
2781
2841
  --bic-link-color-hover: var(--bi-primary-30);
2782
2842
  --bic-link-color: var(--bi-primary-40);
2843
+ --bic-link-focus-shadow-color: var(--bi-neutral-95);
2844
+ --bic-link-focus-outline-color: var(--bi-secondary-50);
2783
2845
  }
2784
2846
 
2785
2847
  .bi-link[data-color="neutral"] {
@@ -2812,8 +2874,8 @@ svg[data-color="white"] {
2812
2874
  }
2813
2875
 
2814
2876
  .bi-link:focus-visible {
2815
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
2816
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2877
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
2878
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-link-focus-outline-color));
2817
2879
  outline-offset: var(--_bi--focus, 2px);
2818
2880
  border-radius: var(--bi-radius-small);
2819
2881
  }
@@ -3148,7 +3210,7 @@ svg[data-color="white"] {
3148
3210
  transform: translate(-50%, var(--bi-scale-2x));
3149
3211
  border-radius: var(--bi-radius-medium);
3150
3212
  outline-offset: 2px;
3151
- outline: 1.5px solid var(--bi-primary-50);
3213
+ outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
3152
3214
  box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
3153
3215
  }
3154
3216
 
@@ -3219,10 +3281,14 @@ svg[data-color="white"] {
3219
3281
  .bi-tabs {
3220
3282
  --bic-tabs-tab-color-selected: var(--bi-primary-50);
3221
3283
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
3284
+ --bic-tabs-focus-shadow-color: var(--bi-basic-white);
3285
+ --bic-tabs-focus-outline-color: var(--bi-primary-50);
3222
3286
  }
3223
3287
 
3224
3288
  .bi-tabs[data-dark="true"] {
3225
3289
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
3290
+ --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
3291
+ --bic-tabs-focus-outline-color: var(--bi-secondary-50);
3226
3292
  }
3227
3293
 
3228
3294
  .bi-tabs {
@@ -3259,8 +3325,8 @@ svg[data-color="white"] {
3259
3325
  }
3260
3326
 
3261
3327
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
3262
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
3263
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
3328
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3329
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-tabs-focus-outline-color));
3264
3330
  outline-offset: var(--_bi--focus, -2px);
3265
3331
  }
3266
3332
 
package/dist/salesforce.css CHANGED
@@ -232,7 +232,6 @@
232
232
  --bic-alert-icon-size: var(--bi-icon-medium);
233
233
  --bic-alert-gap: var(--bi-scale-1x);
234
234
  --bic-alert-padding: var(--bi-scale-2x);
235
- --_bic-alert-close-column: 0;
236
235
  }
237
236
 
238
237
  .bi-alert[data-dark="true"] {
@@ -248,7 +247,7 @@
248
247
  padding: var(--bic-alert-padding);
249
248
  border-radius: var(--bi-radius-medium);
250
249
  gap: var(--bic-alert-gap);
251
- grid-template-columns: auto 1fr var(--_bic-alert-close-column);
250
+ grid-template-columns: 1fr;
252
251
  width: -webkit-fit-content;
253
252
  width: fit-content;
254
253
  display: grid;
@@ -259,8 +258,16 @@
259
258
  font-size: var(--bic-alert-icon-size);
260
259
  }
261
260
 
262
- .bi-alert:has( > .bi-button) {
263
- --_bic-alert-close-column: auto;
261
+ .bi-alert:has( > svg:first-child) {
262
+ grid-template-columns: auto 1fr;
263
+ }
264
+
265
+ .bi-alert:has( > .bi-button:last-child) {
266
+ grid-template-columns: 1fr auto;
267
+ }
268
+
269
+ .bi-alert:has( > .bi-button:last-child):has( > svg:first-child) {
270
+ grid-template-columns: auto 1fr auto;
264
271
  }
265
272
 
266
273
  .bi-alert > .bi-button {
@@ -357,6 +364,14 @@
357
364
  --bic-avatar-color: var(--bi-primary-90);
358
365
  --bic-avatar-size: var(--bi-scale-24x);
359
366
  --bic-avatar-font-size: 1.75rem;
367
+ }
368
+
369
+ .bi-avatar[data-dark="true"] {
370
+ --bic-avatar-background-color: var(--bi-primary-85);
371
+ --bic-avatar-color: var(--bi-primary-10);
372
+ }
373
+
374
+ .bi-avatar {
360
375
  border-radius: var(--bi-radius-full);
361
376
  background-color: var(--bic-avatar-background-color);
362
377
  color: var(--bic-avatar-color);
@@ -383,21 +398,41 @@
383
398
  --bic-avatar-color: var(--bi-info-90);
384
399
  }
385
400
 
401
+ .bi-avatar[data-color="info"][data-dark="true"] {
402
+ --bic-avatar-background-color: var(--bi-info-85);
403
+ --bic-avatar-color: var(--bi-info-10);
404
+ }
405
+
386
406
  .bi-avatar[data-color="warning"] {
387
407
  --bic-avatar-background-color: var(--bi-warning-10);
388
408
  --bic-avatar-color: var(--bi-warning-90);
389
409
  }
390
410
 
411
+ .bi-avatar[data-color="warning"][data-dark="true"] {
412
+ --bic-avatar-background-color: var(--bi-warning-85);
413
+ --bic-avatar-color: var(--bi-warning-10);
414
+ }
415
+
391
416
  .bi-avatar[data-color="success"] {
392
417
  --bic-avatar-background-color: var(--bi-success-10);
393
418
  --bic-avatar-color: var(--bi-success-90);
394
419
  }
395
420
 
421
+ .bi-avatar[data-color="success"][data-dark="true"] {
422
+ --bic-avatar-background-color: var(--bi-success-85);
423
+ --bic-avatar-color: var(--bi-success-10);
424
+ }
425
+
396
426
  .bi-avatar[data-color="alert"] {
397
427
  --bic-avatar-background-color: var(--bi-alert-10);
398
428
  --bic-avatar-color: var(--bi-alert-90);
399
429
  }
400
430
 
431
+ .bi-avatar[data-color="alert"][data-dark="true"] {
432
+ --bic-avatar-background-color: var(--bi-alert-85);
433
+ --bic-avatar-color: var(--bi-alert-10);
434
+ }
435
+
401
436
  .bi-avatar[data-size="small"] {
402
437
  --bic-avatar-size: var(--bi-scale-16x);
403
438
  --bic-avatar-font-size: 1.25rem;
@@ -541,6 +576,8 @@
541
576
  --bic-button-background: transparent;
542
577
  --bic-button-background-hover: transparent;
543
578
  --bic-button-background-press: transparent;
579
+ --bic-button-focus-shadow-color: var(--bi-basic-white);
580
+ --bic-button-focus-outline-color: var(--bi-primary-50);
544
581
  font-family: museo-sans, Arial, sans-serif;
545
582
  font-size: var(--bic-button-font-size);
546
583
  line-height: var(--bic-button-line-height);
@@ -579,9 +616,14 @@
579
616
  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
580
617
  }
581
618
 
619
+ .bi-button[data-dark="true"] {
620
+ --bic-button-focus-shadow-color: var(--bi-neutral-95);
621
+ --bic-button-focus-outline-color: var(--bi-secondary-50);
622
+ }
623
+
582
624
  .bi-button:focus-visible {
583
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
584
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
625
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-button-focus-shadow-color), var(--bic-button-box-shadow));
626
+ outline: var(--_bi--focus, 3px solid var(--bic-button-focus-outline-color));
585
627
  outline-offset: var(--_bi--focus, 2px);
586
628
  }
587
629
 
@@ -628,14 +670,14 @@
628
670
 
629
671
  .bi-button[data-variant="outlined"] {
630
672
  --bic-button-color: var(--bi-primary-50);
631
- --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-primary-50) inset;
673
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
632
674
  --bic-button-background-hover: var(--bi-states-hover-dark);
633
675
  --bic-button-background-press: var(--bi-states-press-dark);
634
676
  }
635
677
 
636
678
  .bi-button[data-variant="outlined"][data-dark="true"] {
637
679
  --bic-button-color: var(--bi-basic-white);
638
- --bic-button-box-shadow: 0px 0px 0px 2px var(--bi-basic-white) inset;
680
+ --bic-button-box-shadow: 0px 0px 0px 1.5px var(--bi-basic-white) inset;
639
681
  --bic-button-background-hover: var(--bi-states-hover-light);
640
682
  --bic-button-background-press: var(--bi-states-press-light);
641
683
  }
@@ -1478,6 +1520,8 @@ details.bi-details {
1478
1520
  --bic-details-color: var(--bi-neutral-90);
1479
1521
  --bic-details-border-color: var(--bi-neutral-15);
1480
1522
  --bic-details-padding: var(--bi-scale-4x);
1523
+ --bic-details-focus-shadow-color: var(--bi-basic-white);
1524
+ --bic-details-focus-outline-color: var(--bi-primary-50);
1481
1525
  }
1482
1526
 
1483
1527
  details.bi-details[data-dark="true"] {
@@ -1486,6 +1530,8 @@ details.bi-details[data-dark="true"] {
1486
1530
  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-details-background);
1487
1531
  --bic-details-border-color: var(--bi-neutral-70);
1488
1532
  --bic-details-color: var(--bi-basic-white);
1533
+ --bic-details-focus-shadow-color: var(--bi-neutral-95);
1534
+ --bic-details-focus-outline-color: var(--bi-secondary-50);
1489
1535
  }
1490
1536
 
1491
1537
  details.bi-details {
@@ -1532,8 +1578,8 @@ details.bi-details summary:active {
1532
1578
  }
1533
1579
 
1534
1580
  details.bi-details summary:focus-visible {
1535
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
1536
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1581
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
1582
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
1537
1583
  outline-offset: var(--_bi--focus, -2px);
1538
1584
  border-radius: var(--bi-radius-medium);
1539
1585
  }
@@ -1918,6 +1964,8 @@ body:has(.bi-dialog:modal) {
1918
1964
  --bic-field-description-color: var(--bi-neutral-60);
1919
1965
  --bic-field-label-color: var(--bi-neutral-95);
1920
1966
  --bic-field-label-required-color: var(--bi-primary-50);
1967
+ --bic-field-focus-outline-color: var(--bi-primary-50);
1968
+ --bic-field-focus-shadow-color: var(--bi-basic-white);
1921
1969
  }
1922
1970
 
1923
1971
  .bi-field[data-dark="true"] {
@@ -1930,6 +1978,8 @@ body:has(.bi-dialog:modal) {
1930
1978
  --bic-field-description-color: var(--bi-neutral-15);
1931
1979
  --bic-field-label-color: var(--bi-basic-white);
1932
1980
  --bic-field-label-required-color: var(--bi-secondary-50);
1981
+ --bic-field-focus-outline-color: var(--bi-secondary-50);
1982
+ --bic-field-focus-shadow-color: var(--bi-neutral-95);
1933
1983
  }
1934
1984
 
1935
1985
  .bi-field > * {
@@ -2029,8 +2079,8 @@ body:has(.bi-dialog:modal) {
2029
2079
  }
2030
2080
 
2031
2081
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2032
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2033
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2082
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2083
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
2034
2084
  outline-offset: var(--_bi--focus, 2px);
2035
2085
  }
2036
2086
 
@@ -2104,8 +2154,8 @@ body:has(.bi-dialog:modal) {
2104
2154
  }
2105
2155
 
2106
2156
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2107
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2108
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2157
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2158
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
2109
2159
  outline-offset: var(--_bi--focus, 2px);
2110
2160
  }
2111
2161
 
@@ -2152,7 +2202,7 @@ body:has(.bi-dialog:modal) {
2152
2202
  }
2153
2203
 
2154
2204
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
2155
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2205
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
2156
2206
  outline-offset: 0;
2157
2207
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2158
2208
  }
@@ -2265,6 +2315,8 @@ body:has(.bi-dialog:modal) {
2265
2315
  --bic-filter-group-background-expanded: var(--bi-neutral-15);
2266
2316
  --bic-filter-group-border-color: var(--bi-neutral-15);
2267
2317
  --bic-filter-group-text-color: var(--bi-neutral-90);
2318
+ --bic-filter-focus-shadow-color: var(--bi-basic-white);
2319
+ --bic-filter-focus-outline-color: var(--bi-primary-50);
2268
2320
  }
2269
2321
 
2270
2322
  .bi-filter-group[data-dark="true"] {
@@ -2274,6 +2326,8 @@ body:has(.bi-dialog:modal) {
2274
2326
  --bic-filter-group-background-expanded: var(--bi-neutral-80);
2275
2327
  --bic-filter-group-border-color: var(--bi-neutral-70);
2276
2328
  --bic-filter-group-text-color: var(--bi-basic-white);
2329
+ --bic-filter-focus-shadow-color: var(--bi-neutral-95);
2330
+ --bic-filter-focus-outline-color: var(--bi-secondary-50);
2277
2331
  }
2278
2332
 
2279
2333
  .bi-filter-group {
@@ -2310,8 +2364,8 @@ body:has(.bi-dialog:modal) {
2310
2364
  }
2311
2365
 
2312
2366
  .bi-filter-group > button:focus-visible {
2313
- box-shadow: 0 0 0 4.5px var(--bi-basic-white);
2314
- outline: 1.5px solid var(--bi-primary-50);
2367
+ box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
2368
+ outline: var(--bi-stroke-thick) solid var(--bic-filter-focus-outline-color);
2315
2369
  outline-offset: 2px;
2316
2370
  border-radius: var(--bi-radius-small);
2317
2371
  }
@@ -2609,6 +2663,8 @@ svg[data-color="white"] {
2609
2663
  --bic-input-color: var(--bi-neutral-95);
2610
2664
  --bic-input-disabled-color: var(--bi-neutral-50);
2611
2665
  --bic-input-placeholder-color: var(--bi-neutral-60);
2666
+ --bic-input-focus-outline-color: var(--bi-primary-50);
2667
+ --bic-input-focus-shadow-color: var(--bi-basic-white);
2612
2668
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2613
2669
  }
2614
2670
 
@@ -2620,6 +2676,8 @@ svg[data-color="white"] {
2620
2676
  --bic-input-color: var(--bi-basic-white);
2621
2677
  --bic-input-disabled-color: var(--bi-neutral-40);
2622
2678
  --bic-input-placeholder-color: var(--bi-neutral-30);
2679
+ --bic-input-focus-outline-color: var(--bi-secondary-50);
2680
+ --bic-input-focus-shadow-color: var(--bi-neutral-95);
2623
2681
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2624
2682
  }
2625
2683
 
@@ -2654,11 +2712,11 @@ svg[data-color="white"] {
2654
2712
  }
2655
2713
 
2656
2714
  .bi-input:where(:not([type="checkbox"], [type="radio"])):focus-visible {
2657
- --bic-input-border-color: var(--bi-primary-50);
2715
+ --bic-input-border-color: var(--bic-input-focus-outline-color);
2658
2716
  }
2659
2717
 
2660
2718
  .bi-input:focus-visible {
2661
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2719
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2662
2720
  outline-offset: 0;
2663
2721
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2664
2722
  }
@@ -2761,8 +2819,8 @@ svg[data-color="white"] {
2761
2819
  }
2762
2820
 
2763
2821
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2764
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2765
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2822
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2823
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2766
2824
  outline-offset: var(--_bi--focus, 2px);
2767
2825
  }
2768
2826
 
@@ -2854,8 +2912,8 @@ svg[data-color="white"] {
2854
2912
  }
2855
2913
 
2856
2914
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2857
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2858
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2915
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2916
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2859
2917
  outline-offset: var(--_bi--focus, 2px);
2860
2918
  }
2861
2919
 
@@ -2983,6 +3041,8 @@ svg[data-color="white"] {
2983
3041
  --bic-link-color: var(--bi-primary-50);
2984
3042
  --bic-link-text-decoration-thickness--hover: .125em;
2985
3043
  --bic-link-text-decoration-thickness: .0625em;
3044
+ --bic-link-focus-shadow-color: var(--bi-basic-white);
3045
+ --bic-link-focus-outline-color: var(--bi-primary-50);
2986
3046
  color: var(--bic-link-color);
2987
3047
  -webkit-text-decoration-line: underline;
2988
3048
  text-decoration-line: underline;
@@ -3006,6 +3066,8 @@ svg[data-color="white"] {
3006
3066
  --bic-link-color-active: var(--bi-primary-30);
3007
3067
  --bic-link-color-hover: var(--bi-primary-30);
3008
3068
  --bic-link-color: var(--bi-primary-40);
3069
+ --bic-link-focus-shadow-color: var(--bi-neutral-95);
3070
+ --bic-link-focus-outline-color: var(--bi-secondary-50);
3009
3071
  }
3010
3072
 
3011
3073
  .bi-link[data-color="neutral"] {
@@ -3038,8 +3100,8 @@ svg[data-color="white"] {
3038
3100
  }
3039
3101
 
3040
3102
  .bi-link:focus-visible {
3041
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
3042
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
3103
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
3104
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-link-focus-outline-color));
3043
3105
  outline-offset: var(--_bi--focus, 2px);
3044
3106
  border-radius: var(--bi-radius-small);
3045
3107
  }
@@ -3374,7 +3436,7 @@ svg[data-color="white"] {
3374
3436
  transform: translate(-50%, var(--bi-scale-2x));
3375
3437
  border-radius: var(--bi-radius-medium);
3376
3438
  outline-offset: 2px;
3377
- outline: 1.5px solid var(--bi-primary-50);
3439
+ outline: var(--bi-stroke-thick) solid var(--bi-primary-50);
3378
3440
  box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
3379
3441
  }
3380
3442
 
@@ -3445,10 +3507,14 @@ svg[data-color="white"] {
3445
3507
  .bi-tabs {
3446
3508
  --bic-tabs-tab-color-selected: var(--bi-primary-50);
3447
3509
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
3510
+ --bic-tabs-focus-shadow-color: var(--bi-basic-white);
3511
+ --bic-tabs-focus-outline-color: var(--bi-primary-50);
3448
3512
  }
3449
3513
 
3450
3514
  .bi-tabs[data-dark="true"] {
3451
3515
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
3516
+ --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
3517
+ --bic-tabs-focus-outline-color: var(--bi-secondary-50);
3452
3518
  }
3453
3519
 
3454
3520
  .bi-tabs {
@@ -3485,8 +3551,8 @@ svg[data-color="white"] {
3485
3551
  }
3486
3552
 
3487
3553
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
3488
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bi-basic-white));
3489
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
3554
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3555
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-tabs-focus-outline-color));
3490
3556
  outline-offset: var(--_bi--focus, -2px);
3491
3557
  }
3492
3558
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.6.0",
4
+ "version": "0.6.1",
5
5
  "engines": {
6
6
  "node": "^20.19.0 || >=22.12.0"
7
7
  },
@@ -34,8 +34,8 @@
34
34
  "glob": "^11.0.3",
35
35
  "lightningcss": "^1.30.2",
36
36
  "modern-normalize": "^3.0.1",
37
- "rimraf": "^6.0.1",
38
- "@bi-digital/tokens": "0.6.0"
37
+ "rimraf": "^6.1.0",
38
+ "@bi-digital/tokens": "0.6.1"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf dist && node config.js",