@bi-digital/css 0.4.2 → 0.6.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 (22) hide show
  1. package/dist/baseline.css +2 -7
  2. package/dist/components/alert.css +24 -0
  3. package/dist/components/button.css +5 -13
  4. package/dist/components/card.css +62 -27
  5. package/dist/components/checkbox-subsection.css +1 -1
  6. package/dist/components/chip.css +182 -95
  7. package/dist/components/details.css +1 -1
  8. package/dist/components/dialog.css +3 -3
  9. package/dist/components/dropdown.css +3 -3
  10. package/dist/components/field.css +7 -37
  11. package/dist/components/filter-group.css +3 -3
  12. package/dist/components/input.css +11 -39
  13. package/dist/components/label.css +1 -5
  14. package/dist/components/popover.css +3 -3
  15. package/dist/components/spinner.css +3 -3
  16. package/dist/components/validation-message.css +1 -5
  17. package/dist/components.css +310 -238
  18. package/dist/index.css +61 -224
  19. package/dist/reset.css +2 -14
  20. package/dist/salesforce.css +367 -441
  21. package/dist/tokens.css +57 -203
  22. package/package.json +3 -3
package/dist/baseline.css CHANGED
@@ -1,10 +1,5 @@
1
- body {
2
- font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
3
- line-height: 1.5;
4
- }
5
-
6
- :host {
7
- font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
1
+ body, :host {
2
+ font-family: museo-sans, Arial, sans-serif, system-ui;
8
3
  line-height: 1.5;
9
4
  }
10
5
 
package/dist/components/alert.css CHANGED
@@ -90,6 +90,30 @@
90
90
  --bic-alert-color: var(--bi-warning-5);
91
91
  }
92
92
 
93
+ .bi-alert[data-variant="info"] {
94
+ --bic-alert-background: var(--bi-info-5);
95
+ --bic-alert-border-color: var(--bi-info-10);
96
+ --bic-alert-color: var(--bi-info-90);
97
+ }
98
+
99
+ .bi-alert[data-variant="info"][data-dark="true"] {
100
+ --bic-alert-background: var(--bi-info-90);
101
+ --bic-alert-border-color: var(--bi-info-80);
102
+ --bic-alert-color: var(--bi-info-10);
103
+ }
104
+
105
+ .bi-alert[data-variant="neutral"] {
106
+ --bic-alert-background: var(--bi-neutral-10);
107
+ --bic-alert-border-color: var(--bi-neutral-15);
108
+ --bic-alert-color: var(--bi-neutral-95);
109
+ }
110
+
111
+ .bi-alert[data-variant="neutral"][data-dark="true"] {
112
+ --bic-alert-background: var(--bi-neutral-90);
113
+ --bic-alert-border-color: var(--bi-neutral-90);
114
+ --bic-alert-color: var(--bi-neutral-30);
115
+ }
116
+
93
117
  .bi-alert:has( > .bi-alert--footer) {
94
118
  width: 100%;
95
119
  }
package/dist/components/button.css CHANGED
@@ -83,7 +83,7 @@
83
83
  --bic-button-background: var(--bi-primary-50);
84
84
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
85
85
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
86
- --bic-button-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, .12) inset, 0px 0px 0px 1px rgba(10, 13, 18, .18) inset, 0px -2px 0px 0px rgba(10, 13, 18, .05) inset, 0px 1px 2px 0px rgba(10, 13, 18, .05);
86
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
87
87
  }
88
88
 
89
89
  .bi-button[data-variant="filled"] {
@@ -91,7 +91,7 @@
91
91
  --bic-button-background: var(--bi-primary-50);
92
92
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-button-background);
93
93
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-button-background);
94
- --bic-button-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, .12) inset, 0px 0px 0px 1px rgba(10, 13, 18, .18) inset, 0px -2px 0px 0px rgba(10, 13, 18, .05) inset, 0px 1px 2px 0px rgba(10, 13, 18, .05);
94
+ --bic-button-box-shadow: 0px 0px 0px 2px #ffffff1f inset, 0px 0px 0px 1px #0a0d122e inset, 0px -2px 0px 0px #0a0d120d inset, 0px 1px 2px 0px #0a0d120d;
95
95
  }
96
96
 
97
97
  .bi-button[data-variant="outlined"] {
@@ -129,17 +129,13 @@
129
129
 
130
130
  .bi-button[data-variant="flat"][data-dark="true"] {
131
131
  --bic-button-color: var(--bi-basic-white);
132
- --bic-button-background: rgba(255, 255, 255, .1);
132
+ --bic-button-background: #ffffff1a;
133
133
  --bic-button-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-button-background);
134
134
  --bic-button-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-button-background);
135
135
  }
136
136
 
137
137
  @media (hover: hover) and (pointer: fine) {
138
- .bi-button:where(:not(:-webkit-any(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
139
- background: var(--bic-button-background-hover);
140
- }
141
-
142
- .bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):hover {
138
+ .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):hover {
143
139
  background: var(--bic-button-background-hover);
144
140
  }
145
141
  }
@@ -164,11 +160,7 @@
164
160
  cursor: progress;
165
161
  }
166
162
 
167
- .bi-button:where(:not(:-webkit-any(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
168
- background: var(--bic-button-background-press);
169
- }
170
-
171
- .bi-button:where(:not(:is(:disabled, [aria-disabled="true"], [aria-busy="true"]))):active {
163
+ .bi-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"])):active {
172
164
  background: var(--bic-button-background-press);
173
165
  }
174
166
 
package/dist/components/card.css CHANGED
@@ -1,34 +1,52 @@
1
1
  .bi-card {
2
- --bic-card-border-color: var(--bi-neutral-15);
3
- --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
4
- --bic-card-border-radius: var(--bi-radius-medium);
5
2
  --bic-card-background-color: var(--bi-basic-white);
3
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color);
4
+ --bic-card-border-color: var(--bi-neutral-15);
6
5
  --bic-card-color: var(--bi-neutral-95);
7
6
  --bic-card-header-title-color: var(--bi-neutral-95);
8
7
  --bic-card-header-bold-color: var(--bi-primary-60);
9
8
  --bic-card-header-label-color: var(--bi-neutral-50);
10
- --bic-card-actions-background-color: var(--bi-neutral-10);
11
- --bic-card-actions-icon-color: var(--bi-primary-50);
12
- --bic-card-actions-flex-direction: column;
13
- --bic-card-content-padding: var(--bi-scale-4x);
14
9
  --bic-card-content-color: var(--bi-neutral-50);
10
+ --bic-card-content-padding: var(--bi-scale-4x);
11
+ --bic-card-border-radius: var(--bi-radius-medium);
15
12
  --bic-card-content-lines: 2;
16
13
  --bic-card-media-width: 100%;
17
14
  --bic-card-media-date-width: 3.1875rem;
18
15
  --bic-card-media-date-height: 2.875rem;
16
+ --bic-card-actions-flex-direction: column;
17
+ --bic-card-actions-background-color: var(--bi-neutral-10);
18
+ --bic-card-actions-icon-color: var(--bi-primary-50);
19
+ --bic-card-border-hover-color: var(--bi-neutral-50);
20
+ --bic-card-box-shadow-hover-color: #0000000d;
21
+ --bic-card-box-shadow-focus-color: var(--bi-primary-50);
22
+ --bic-card-box-shadow-focus-background-color: var(--bi-basic-white);
23
+ --bic-card-box-shadow-focus-outer-border: 6px;
24
+ --bic-card-box-shadow-focus-inner-border: 4px;
25
+ --bic-card-border-active-color: var(--bi-primary-50);
26
+ --bic-card-box-shadow-active-color: #0000000d;
27
+ --bic-card-box-shadow-active-outer-border: 20px;
28
+ --bic-card-box-shadow-active-inner-border: 10px;
19
29
  }
20
30
 
21
31
  .bi-card[data-dark="true"] {
32
+ --bic-card-background-color: var(--bi-neutral-90);
22
33
  --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
23
34
  --bic-card-border-color: var(--bi-neutral-70);
24
- --bic-card-background-color: var(--bi-neutral-95);
25
35
  --bic-card-color: var(--bi-neutral-5);
26
36
  --bic-card-header-title-color: var(--bi-neutral-5);
27
37
  --bic-card-header-bold-color: var(--bi-primary-20);
28
38
  --bic-card-header-label-color: var(--bi-neutral-30);
29
- --bic-card-actions-background-color: var(--bi-neutral-75);
30
- --bic-card-actions-icon-color: var(--bi-primary-20);
31
39
  --bic-card-content-color: var(--bi-neutral-30);
40
+ --bic-card-actions-background-color: var(--bi-neutral-75);
41
+ --bic-card-actions-icon-color: var(--bi-neutral-10);
42
+ --bic-card-border-hover-color: var(--bi-neutral-25);
43
+ --bic-card-box-shadow-hover-color: #b2cdf40d;
44
+ --bic-card-box-shadow-focus-color: var(--bi-secondary-50);
45
+ --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
46
+ --bic-card-box-shadow-focus-outer-border: 4.5px;
47
+ --bic-card-box-shadow-focus-inner-border: 4px;
48
+ --bic-card-border-active-color: var(--bi-primary-50);
49
+ --bic-card-box-shadow-active-color: #b2cdf40d;
32
50
  }
33
51
 
34
52
  .bi-card {
@@ -107,6 +125,23 @@
107
125
  --bic-card-header-label-color: var(--bi-warning-90);
108
126
  }
109
127
 
128
+ .bi-card[data-color="primary"][data-dark="true"] {
129
+ --bic-card-background-color: var(--bi-primary-90);
130
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-primary-75);
131
+ --bic-card-border-color: var(--bi-primary-75);
132
+ --bic-card-color: var(--bi-neutral-5);
133
+ --bic-card-header-title-color: var(--bi-neutral-5);
134
+ --bic-card-header-bold-color: var(--bi-primary-20);
135
+ --bic-card-header-label-color: var(--bi-neutral-30);
136
+ --bic-card-content-color: var(--bi-neutral-30);
137
+ --bic-card-actions-background-color: var(--bi-primary-85);
138
+ --bic-card-actions-icon-color: var(--bi-primary-10);
139
+ --bic-card-border-hover-color: var(--bi-primary-40);
140
+ --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
141
+ --bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
142
+ --bic-card-border-active-color: var(--bi-primary-10);
143
+ }
144
+
110
145
  .bi-card[data-error="true"] {
111
146
  box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
112
147
  --bic-card-border-color: transparent;
@@ -154,8 +189,8 @@
154
189
  }
155
190
 
156
191
  .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
157
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
158
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
192
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
193
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
159
194
  outline-offset: var(--_bi--focus, 2px);
160
195
  }
161
196
 
@@ -165,12 +200,12 @@
165
200
 
166
201
  @media (hover: hover) and (pointer: fine) {
167
202
  .bi-card:-webkit-any(a, button):not(.disabled):hover {
168
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
203
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
169
204
  }
170
205
  }
171
206
 
172
207
  .bi-card:-webkit-any(a, button):not(.disabled):active {
173
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
208
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
174
209
  }
175
210
 
176
211
  .bi-card:-webkit-any(a, button):disabled {
@@ -185,8 +220,8 @@
185
220
  }
186
221
 
187
222
  .bi-card:is(a, button):not(.disabled):focus-visible {
188
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
189
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
223
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
224
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
190
225
  outline-offset: var(--_bi--focus, 2px);
191
226
  }
192
227
 
@@ -196,12 +231,12 @@
196
231
 
197
232
  @media (hover: hover) and (pointer: fine) {
198
233
  .bi-card:is(a, button):not(.disabled):hover {
199
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
234
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
200
235
  }
201
236
  }
202
237
 
203
238
  .bi-card:is(a, button):not(.disabled):active {
204
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
239
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
205
240
  }
206
241
 
207
242
  .bi-card:is(a, button):disabled {
@@ -216,8 +251,8 @@
216
251
  }
217
252
 
218
253
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
219
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
220
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
254
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
255
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
221
256
  outline-offset: var(--_bi--focus, 2px);
222
257
  }
223
258
 
@@ -227,12 +262,12 @@
227
262
 
228
263
  @media (hover: hover) and (pointer: fine) {
229
264
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
230
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
265
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
231
266
  }
232
267
  }
233
268
 
234
269
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
235
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
270
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
236
271
  }
237
272
 
238
273
  .bi-card .bi-card--content:-webkit-any(a, button):disabled {
@@ -247,8 +282,8 @@
247
282
  }
248
283
 
249
284
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
250
- box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
251
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
285
+ box-shadow: 0 0 0 var(--bic-card-box-shadow-focus-inner-border) var(--bic-card-box-shadow-focus-background-color), 0 0 0 var(--bic-card-box-shadow-focus-outer-border) var(--bic-card-box-shadow-focus-color);
286
+ outline: var(--_bi--focus, 1.5px solid var(--bic-card-box-shadow-focus-color));
252
287
  outline-offset: var(--_bi--focus, 2px);
253
288
  }
254
289
 
@@ -258,12 +293,12 @@
258
293
 
259
294
  @media (hover: hover) and (pointer: fine) {
260
295
  .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
261
- box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
296
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bic-card-border-hover-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-hover-color), 0px 0px 10px 0px var(--bic-card-box-shadow-hover-color);
262
297
  }
263
298
  }
264
299
 
265
300
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
266
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .05);
301
+ box-shadow: 0px 0px 0px var(--bi-stroke-medium) var(--bic-card-border-active-color), 0px 0px 20px var(--bi-scale-1-5x) var(--bic-card-box-shadow-active-color), 0px 0px 10px 0px var(--bic-card-box-shadow-active-color);
267
302
  }
268
303
 
269
304
  .bi-card .bi-card--content:is(a, button):disabled {
@@ -408,7 +443,7 @@
408
443
  padding: var(--bi-scale-1x) var(--bi-scale-1x) var(--bi-scale-2x);
409
444
  border-radius: var(--bi-radius-small) var(--bi-radius-small) var(--bi-radius-large) var(--bi-radius-large);
410
445
  background: var(--bic-card-background-color);
411
- box-shadow: 0px 8px 16px var(--bi-scale-1-5x) rgba(38, 51, 63, .05), 0px 4px 6px 0px rgba(38, 51, 63, .05);
446
+ box-shadow: 0px 8px 16px var(--bi-scale-1-5x) #26333f0d, 0px 4px 6px 0px #26333f0d;
412
447
  color: var(--bic-card-header-title-color);
413
448
  text-align: center;
414
449
  flex-direction: column;
package/dist/components/checkbox-subsection.css CHANGED
@@ -10,7 +10,7 @@
10
10
  .bi-checkbox-subsection > div:first-child {
11
11
  margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
12
12
  background-color: var(--bic-checkbox-subsection-line-bg);
13
- width: var(--bi-stroke-default);
13
+ width: var(--bi-stroke-medium);
14
14
  }
15
15
 
16
16
  .bi-checkbox-subsection > div:last-child {
package/dist/components/chip.css CHANGED
@@ -1,14 +1,16 @@
1
1
  .bi-chip {
2
2
  --bic-chip-background: var(--bi-primary-5);
3
- --bic-chip-background-hover: var(--bi-primary-10);
4
- --bic-chip-background-press: var(--bi-primary-15);
3
+ --bic-chip-focus-inner: var(--bi-basic-white);
4
+ --bic-chip-focus-outer: var(--bi-primary-50);
5
+ --bic-chip-background-hover: var(--bi-states-hover-dark);
6
+ --bic-chip-background-press: var(--bi-states-press-dark);
5
7
  --bic-chip-text-color: var(--bi-neutral-90);
6
8
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
7
9
  --bic-chip-icon-size: var(--bi-scale-6x);
8
10
  --bic-chip-font-size: .875rem;
9
11
  --bic-chip-line-height: 1.5;
10
12
  gap: var(--bi-scale-1x);
11
- border-radius: var(--bi-scale-max);
13
+ border-radius: var(--bi-radius-full);
12
14
  width: -webkit-fit-content;
13
15
  width: fit-content;
14
16
  color: var(--bic-chip-text-color);
@@ -23,6 +25,163 @@
23
25
  overflow: hidden;
24
26
  }
25
27
 
28
+ .bi-chip[data-size="small"] {
29
+ --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
30
+ --bic-chip-font-size: .8125rem;
31
+ --bic-chip-icon-size: var(--bi-scale-5x);
32
+ }
33
+
34
+ .bi-chip[data-size="large"] {
35
+ --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
36
+ --bic-chip-font-size: 1rem;
37
+ --bic-chip-size: var(--bi-scale-14x);
38
+ }
39
+
40
+ .bi-chip[data-dark="true"] {
41
+ --bic-chip-focus-inner: var(--bi-neutral-95);
42
+ --bic-chip-focus-outer: var(--bi-secondary-50);
43
+ --bic-chip-background-hover: var(--bi-states-hover-light);
44
+ --bic-chip-background-press: var(--bi-states-press-light);
45
+ }
46
+
47
+ .bi-chip[data-selected="true"] {
48
+ --bic-chip-background-hover: var(--bi-states-hover-light);
49
+ --bic-chip-background-press: var(--bi-states-press-light);
50
+ }
51
+
52
+ .bi-chip[data-color="white"] {
53
+ --bic-chip-background: var(--bi-basic-white);
54
+ }
55
+
56
+ .bi-chip[data-color="white"][data-selected="true"] {
57
+ --bic-chip-background: var(--bi-neutral-60);
58
+ --bic-chip-text-color: var(--bi-basic-white);
59
+ }
60
+
61
+ .bi-chip[data-color="white"][data-dark="true"] {
62
+ --bic-chip-background: var(--bi-neutral-100);
63
+ --bic-chip-text-color: var(--bi-basic-white);
64
+ }
65
+
66
+ .bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
67
+ --bic-chip-background: var(--bi-neutral-50);
68
+ --bic-chip-text-color: var(--bi-basic-white);
69
+ }
70
+
71
+ .bi-chip[data-color="neutral"] {
72
+ --bic-chip-background: var(--bi-neutral-5);
73
+ }
74
+
75
+ .bi-chip[data-color="neutral"][data-selected="true"] {
76
+ --bic-chip-background: var(--bi-neutral-60);
77
+ --bic-chip-text-color: var(--bi-basic-white);
78
+ }
79
+
80
+ .bi-chip[data-color="neutral"][data-dark="true"] {
81
+ --bic-chip-background: var(--bi-neutral-95);
82
+ --bic-chip-text-color: var(--bi-basic-white);
83
+ }
84
+
85
+ .bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
86
+ --bic-chip-background: var(--bi-neutral-50);
87
+ --bic-chip-text-color: var(--bi-basic-white);
88
+ }
89
+
90
+ .bi-chip[data-color="primary"] {
91
+ --bic-chip-background: var(--bi-primary-5);
92
+ }
93
+
94
+ .bi-chip[data-color="primary"][data-selected="true"] {
95
+ --bic-chip-background: var(--bi-primary-50);
96
+ --bic-chip-text-color: var(--bi-basic-white);
97
+ }
98
+
99
+ .bi-chip[data-color="primary"][data-dark="true"] {
100
+ --bic-chip-background: var(--bi-primary-85);
101
+ --bic-chip-text-color: var(--bi-primary-10);
102
+ }
103
+
104
+ .bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
105
+ --bic-chip-background: var(--bi-primary-50);
106
+ --bic-chip-text-color: var(--bi-basic-white);
107
+ }
108
+
109
+ .bi-chip[data-color="info"] {
110
+ --bic-chip-background: var(--bi-info-5);
111
+ }
112
+
113
+ .bi-chip[data-color="info"][data-selected="true"] {
114
+ --bic-chip-background: var(--bi-info-50);
115
+ --bic-chip-text-color: var(--bi-basic-white);
116
+ }
117
+
118
+ .bi-chip[data-color="info"][data-dark="true"] {
119
+ --bic-chip-background: var(--bi-info-95);
120
+ --bic-chip-text-color: var(--bi-info-15);
121
+ }
122
+
123
+ .bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
124
+ --bic-chip-background: var(--bi-info-50);
125
+ --bic-chip-text-color: var(--bi-basic-white);
126
+ }
127
+
128
+ .bi-chip[data-color="alert"] {
129
+ --bic-chip-background: var(--bi-alert-10);
130
+ }
131
+
132
+ .bi-chip[data-color="alert"][data-selected="true"] {
133
+ --bic-chip-background: var(--bi-alert-60);
134
+ --bic-chip-text-color: var(--bi-basic-white);
135
+ }
136
+
137
+ .bi-chip[data-color="alert"][data-dark="true"] {
138
+ --bic-chip-background: var(--bi-alert-95);
139
+ --bic-chip-text-color: var(--bi-alert-15);
140
+ }
141
+
142
+ .bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
143
+ --bic-chip-background: var(--bi-alert-60);
144
+ --bic-chip-text-color: var(--bi-basic-white);
145
+ }
146
+
147
+ .bi-chip[data-color="warning"] {
148
+ --bic-chip-background: var(--bi-warning-10);
149
+ }
150
+
151
+ .bi-chip[data-color="warning"][data-selected="true"] {
152
+ --bic-chip-background: var(--bi-warning-75);
153
+ --bic-chip-text-color: var(--bi-basic-white);
154
+ }
155
+
156
+ .bi-chip[data-color="warning"][data-dark="true"] {
157
+ --bic-chip-background: var(--bi-warning-90);
158
+ --bic-chip-text-color: var(--bi-warning-15);
159
+ }
160
+
161
+ .bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
162
+ --bic-chip-background: var(--bi-warning-70);
163
+ --bic-chip-text-color: var(--bi-basic-white);
164
+ }
165
+
166
+ .bi-chip[data-color="success"] {
167
+ --bic-chip-background: var(--bi-success-5);
168
+ }
169
+
170
+ .bi-chip[data-color="success"][data-selected="true"] {
171
+ --bic-chip-background: var(--bi-success-70);
172
+ --bic-chip-text-color: var(--bi-basic-white);
173
+ }
174
+
175
+ .bi-chip[data-color="success"][data-dark="true"] {
176
+ --bic-chip-background: var(--bi-success-90);
177
+ --bic-chip-text-color: var(--bi-success-10);
178
+ }
179
+
180
+ .bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
181
+ --bic-chip-background: var(--bi-success-70);
182
+ --bic-chip-text-color: var(--bi-basic-white);
183
+ }
184
+
26
185
  .bi-chip:-webkit-any(button) {
27
186
  cursor: pointer;
28
187
  border: none;
@@ -30,20 +189,19 @@
30
189
  }
31
190
 
32
191
  .bi-chip:-webkit-any(button):focus-visible {
33
- outline-offset: 2px;
34
- outline: 1.5px solid var(--bi-primary-50);
35
- border-radius: var(--bi-scale-max);
36
- box-shadow: 0 0 0 2px #fff;
192
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
193
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
194
+ outline-offset: var(--_bi--focus, 2px);
37
195
  }
38
196
 
39
197
  @media (hover: hover) and (pointer: fine) {
40
198
  .bi-chip:-webkit-any(button):hover {
41
- --bg-color: var(--bic-chip-bg-hover);
199
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
42
200
  }
43
201
  }
44
202
 
45
203
  .bi-chip:-webkit-any(button):active {
46
- --bg-color: var(--bic-chip-bg-press);
204
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
47
205
  }
48
206
 
49
207
  .bi-chip:is(button) {
@@ -53,20 +211,19 @@
53
211
  }
54
212
 
55
213
  .bi-chip:is(button):focus-visible {
56
- outline-offset: 2px;
57
- outline: 1.5px solid var(--bi-primary-50);
58
- border-radius: var(--bi-scale-max);
59
- box-shadow: 0 0 0 2px #fff;
214
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
215
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
216
+ outline-offset: var(--_bi--focus, 2px);
60
217
  }
61
218
 
62
219
  @media (hover: hover) and (pointer: fine) {
63
220
  .bi-chip:is(button):hover {
64
- --bg-color: var(--bic-chip-bg-hover);
221
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
65
222
  }
66
223
  }
67
224
 
68
225
  .bi-chip:is(button):active {
69
- --bg-color: var(--bic-chip-bg-press);
226
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
70
227
  }
71
228
 
72
229
  .bi-chip:-webkit-any(a) {
@@ -76,20 +233,19 @@
76
233
  }
77
234
 
78
235
  .bi-chip:-webkit-any(a):focus-visible {
79
- outline-offset: 2px;
80
- outline: 1.5px solid var(--bi-primary-50);
81
- border-radius: var(--bi-scale-max);
82
- box-shadow: 0 0 0 2px #fff;
236
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
237
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
238
+ outline-offset: var(--_bi--focus, 2px);
83
239
  }
84
240
 
85
241
  @media (hover: hover) and (pointer: fine) {
86
242
  .bi-chip:-webkit-any(a):hover {
87
- --bg-color: var(--bic-chip-bg-hover);
243
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
88
244
  }
89
245
  }
90
246
 
91
247
  .bi-chip:-webkit-any(a):active {
92
- --bg-color: var(--bic-chip-bg-press);
248
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
93
249
  }
94
250
 
95
251
  .bi-chip:is(a) {
@@ -99,88 +255,19 @@
99
255
  }
100
256
 
101
257
  .bi-chip:is(a):focus-visible {
102
- outline-offset: 2px;
103
- outline: 1.5px solid var(--bi-primary-50);
104
- border-radius: var(--bi-scale-max);
105
- box-shadow: 0 0 0 2px #fff;
258
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
259
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
260
+ outline-offset: var(--_bi--focus, 2px);
106
261
  }
107
262
 
108
263
  @media (hover: hover) and (pointer: fine) {
109
264
  .bi-chip:is(a):hover {
110
- --bg-color: var(--bic-chip-bg-hover);
265
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
111
266
  }
112
267
  }
113
268
 
114
269
  .bi-chip:is(a):active {
115
- --bg-color: var(--bic-chip-bg-press);
116
- }
117
-
118
- .bi-chip[data-size="small"] {
119
- --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
120
- --bic-chip-font-size: .8125rem;
121
- --bic-chip-icon-size: var(--bi-scale-5x);
122
- }
123
-
124
- .bi-chip[data-size="large"] {
125
- --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
126
- --bic-chip-font-size: 1rem;
127
- --bic-chip-size: var(--bi-scale-14x);
128
- }
129
-
130
- .bi-chip[data-color="neutral"] {
131
- --bic-chip-background: var(--bi-neutral-5);
132
- --bic-chip-background-hover: var(--bi-neutral-20);
133
- --bic-chip-background-press: var(--bi-neutral-30);
134
- --bic-chip-text-color: var(--bi-neutral-90);
135
- }
136
-
137
- .bi-chip[data-color="primary-light"] {
138
- --bic-chip-background: var(--bi-primary-5);
139
- --bic-chip-background-hover: var(--bi-primary-20);
140
- --bic-chip-background-press: var(--bi-primary-30);
141
- --bic-chip-text-color: var(--bi-neutral-90);
142
- }
143
-
144
- .bi-chip[data-color="info"] {
145
- --bic-chip-background: var(--bi-info-5);
146
- --bic-chip-background-hover: var(--bi-info-20);
147
- --bic-chip-background-press: var(--bi-info-30);
148
- --bic-chip-text-color: var(--bi-info-90);
149
- }
150
-
151
- .bi-chip[data-color="white"] {
152
- --bic-chip-background: var(--bi-basic-white);
153
- --bic-chip-background-hover: var(--bi-neutral-20);
154
- --bic-chip-background-press: var(--bi-neutral-30);
155
- --bic-chip-text-color: var(--bi-neutral-90);
156
- }
157
-
158
- .bi-chip[data-color="primary"] {
159
- --bic-chip-background: var(--bi-primary-50);
160
- --bic-chip-background-hover: var(--bi-primary-60);
161
- --bic-chip-background-press: var(--bi-primary-70);
162
- --bic-chip-text-color: var(--bi-basic-white);
163
- }
164
-
165
- .bi-chip[data-color="alert"] {
166
- --bic-chip-background: var(--bi-alert-5);
167
- --bic-chip-background-hover: var(--bi-alert-20);
168
- --bic-chip-background-press: var(--bi-alert-30);
169
- --bic-chip-text-color: var(--bi-alert-90);
170
- }
171
-
172
- .bi-chip[data-color="warning"] {
173
- --bic-chip-background: var(--bi-warning-5);
174
- --bic-chip-background-hover: var(--bi-warning-20);
175
- --bic-chip-background-press: var(--bi-warning-30);
176
- --bic-chip-text-color: var(--bi-warning-90);
177
- }
178
-
179
- .bi-chip[data-color="success"] {
180
- --bic-chip-background: var(--bi-success-5);
181
- --bic-chip-background-hover: var(--bi-success-20);
182
- --bic-chip-background-press: var(--bi-success-30);
183
- --bic-chip-text-color: var(--bi-success-90);
270
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
184
271
  }
185
272
 
186
273
  .bi-chip > svg {
package/dist/components/details.css CHANGED
@@ -3,7 +3,7 @@ details.bi-details {
3
3
  --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-details-background);
4
4
  --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-details-background);
5
5
  --bic-details-color: var(--bi-neutral-90);
6
- --bic-details-border-color: var(--bi-stroke-color-1);
6
+ --bic-details-border-color: var(--bi-neutral-15);
7
7
  --bic-details-padding: var(--bi-scale-4x);
8
8
  }
9
9