@bi-digital/css 0.5.0 → 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 (4) hide show
  1. package/dist/components/chip.css +182 -95
  2. package/dist/components.css +182 -95
  3. package/dist/salesforce.css +182 -95
  4. package/package.json +2 -2
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.css CHANGED
@@ -970,15 +970,17 @@
970
970
 
971
971
  .bi-chip {
972
972
  --bic-chip-background: var(--bi-primary-5);
973
- --bic-chip-background-hover: var(--bi-primary-10);
974
- --bic-chip-background-press: var(--bi-primary-15);
973
+ --bic-chip-focus-inner: var(--bi-basic-white);
974
+ --bic-chip-focus-outer: var(--bi-primary-50);
975
+ --bic-chip-background-hover: var(--bi-states-hover-dark);
976
+ --bic-chip-background-press: var(--bi-states-press-dark);
975
977
  --bic-chip-text-color: var(--bi-neutral-90);
976
978
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
977
979
  --bic-chip-icon-size: var(--bi-scale-6x);
978
980
  --bic-chip-font-size: .875rem;
979
981
  --bic-chip-line-height: 1.5;
980
982
  gap: var(--bi-scale-1x);
981
- border-radius: var(--bi-scale-max);
983
+ border-radius: var(--bi-radius-full);
982
984
  width: -webkit-fit-content;
983
985
  width: fit-content;
984
986
  color: var(--bic-chip-text-color);
@@ -993,6 +995,163 @@
993
995
  overflow: hidden;
994
996
  }
995
997
 
998
+ .bi-chip[data-size="small"] {
999
+ --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
1000
+ --bic-chip-font-size: .8125rem;
1001
+ --bic-chip-icon-size: var(--bi-scale-5x);
1002
+ }
1003
+
1004
+ .bi-chip[data-size="large"] {
1005
+ --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
1006
+ --bic-chip-font-size: 1rem;
1007
+ --bic-chip-size: var(--bi-scale-14x);
1008
+ }
1009
+
1010
+ .bi-chip[data-dark="true"] {
1011
+ --bic-chip-focus-inner: var(--bi-neutral-95);
1012
+ --bic-chip-focus-outer: var(--bi-secondary-50);
1013
+ --bic-chip-background-hover: var(--bi-states-hover-light);
1014
+ --bic-chip-background-press: var(--bi-states-press-light);
1015
+ }
1016
+
1017
+ .bi-chip[data-selected="true"] {
1018
+ --bic-chip-background-hover: var(--bi-states-hover-light);
1019
+ --bic-chip-background-press: var(--bi-states-press-light);
1020
+ }
1021
+
1022
+ .bi-chip[data-color="white"] {
1023
+ --bic-chip-background: var(--bi-basic-white);
1024
+ }
1025
+
1026
+ .bi-chip[data-color="white"][data-selected="true"] {
1027
+ --bic-chip-background: var(--bi-neutral-60);
1028
+ --bic-chip-text-color: var(--bi-basic-white);
1029
+ }
1030
+
1031
+ .bi-chip[data-color="white"][data-dark="true"] {
1032
+ --bic-chip-background: var(--bi-neutral-100);
1033
+ --bic-chip-text-color: var(--bi-basic-white);
1034
+ }
1035
+
1036
+ .bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
1037
+ --bic-chip-background: var(--bi-neutral-50);
1038
+ --bic-chip-text-color: var(--bi-basic-white);
1039
+ }
1040
+
1041
+ .bi-chip[data-color="neutral"] {
1042
+ --bic-chip-background: var(--bi-neutral-5);
1043
+ }
1044
+
1045
+ .bi-chip[data-color="neutral"][data-selected="true"] {
1046
+ --bic-chip-background: var(--bi-neutral-60);
1047
+ --bic-chip-text-color: var(--bi-basic-white);
1048
+ }
1049
+
1050
+ .bi-chip[data-color="neutral"][data-dark="true"] {
1051
+ --bic-chip-background: var(--bi-neutral-95);
1052
+ --bic-chip-text-color: var(--bi-basic-white);
1053
+ }
1054
+
1055
+ .bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
1056
+ --bic-chip-background: var(--bi-neutral-50);
1057
+ --bic-chip-text-color: var(--bi-basic-white);
1058
+ }
1059
+
1060
+ .bi-chip[data-color="primary"] {
1061
+ --bic-chip-background: var(--bi-primary-5);
1062
+ }
1063
+
1064
+ .bi-chip[data-color="primary"][data-selected="true"] {
1065
+ --bic-chip-background: var(--bi-primary-50);
1066
+ --bic-chip-text-color: var(--bi-basic-white);
1067
+ }
1068
+
1069
+ .bi-chip[data-color="primary"][data-dark="true"] {
1070
+ --bic-chip-background: var(--bi-primary-85);
1071
+ --bic-chip-text-color: var(--bi-primary-10);
1072
+ }
1073
+
1074
+ .bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
1075
+ --bic-chip-background: var(--bi-primary-50);
1076
+ --bic-chip-text-color: var(--bi-basic-white);
1077
+ }
1078
+
1079
+ .bi-chip[data-color="info"] {
1080
+ --bic-chip-background: var(--bi-info-5);
1081
+ }
1082
+
1083
+ .bi-chip[data-color="info"][data-selected="true"] {
1084
+ --bic-chip-background: var(--bi-info-50);
1085
+ --bic-chip-text-color: var(--bi-basic-white);
1086
+ }
1087
+
1088
+ .bi-chip[data-color="info"][data-dark="true"] {
1089
+ --bic-chip-background: var(--bi-info-95);
1090
+ --bic-chip-text-color: var(--bi-info-15);
1091
+ }
1092
+
1093
+ .bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
1094
+ --bic-chip-background: var(--bi-info-50);
1095
+ --bic-chip-text-color: var(--bi-basic-white);
1096
+ }
1097
+
1098
+ .bi-chip[data-color="alert"] {
1099
+ --bic-chip-background: var(--bi-alert-10);
1100
+ }
1101
+
1102
+ .bi-chip[data-color="alert"][data-selected="true"] {
1103
+ --bic-chip-background: var(--bi-alert-60);
1104
+ --bic-chip-text-color: var(--bi-basic-white);
1105
+ }
1106
+
1107
+ .bi-chip[data-color="alert"][data-dark="true"] {
1108
+ --bic-chip-background: var(--bi-alert-95);
1109
+ --bic-chip-text-color: var(--bi-alert-15);
1110
+ }
1111
+
1112
+ .bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
1113
+ --bic-chip-background: var(--bi-alert-60);
1114
+ --bic-chip-text-color: var(--bi-basic-white);
1115
+ }
1116
+
1117
+ .bi-chip[data-color="warning"] {
1118
+ --bic-chip-background: var(--bi-warning-10);
1119
+ }
1120
+
1121
+ .bi-chip[data-color="warning"][data-selected="true"] {
1122
+ --bic-chip-background: var(--bi-warning-75);
1123
+ --bic-chip-text-color: var(--bi-basic-white);
1124
+ }
1125
+
1126
+ .bi-chip[data-color="warning"][data-dark="true"] {
1127
+ --bic-chip-background: var(--bi-warning-90);
1128
+ --bic-chip-text-color: var(--bi-warning-15);
1129
+ }
1130
+
1131
+ .bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
1132
+ --bic-chip-background: var(--bi-warning-70);
1133
+ --bic-chip-text-color: var(--bi-basic-white);
1134
+ }
1135
+
1136
+ .bi-chip[data-color="success"] {
1137
+ --bic-chip-background: var(--bi-success-5);
1138
+ }
1139
+
1140
+ .bi-chip[data-color="success"][data-selected="true"] {
1141
+ --bic-chip-background: var(--bi-success-70);
1142
+ --bic-chip-text-color: var(--bi-basic-white);
1143
+ }
1144
+
1145
+ .bi-chip[data-color="success"][data-dark="true"] {
1146
+ --bic-chip-background: var(--bi-success-90);
1147
+ --bic-chip-text-color: var(--bi-success-10);
1148
+ }
1149
+
1150
+ .bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
1151
+ --bic-chip-background: var(--bi-success-70);
1152
+ --bic-chip-text-color: var(--bi-basic-white);
1153
+ }
1154
+
996
1155
  .bi-chip:-webkit-any(button) {
997
1156
  cursor: pointer;
998
1157
  border: none;
@@ -1000,20 +1159,19 @@
1000
1159
  }
1001
1160
 
1002
1161
  .bi-chip:-webkit-any(button):focus-visible {
1003
- outline-offset: 2px;
1004
- outline: 1.5px solid var(--bi-primary-50);
1005
- border-radius: var(--bi-scale-max);
1006
- box-shadow: 0 0 0 2px #fff;
1162
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1163
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1164
+ outline-offset: var(--_bi--focus, 2px);
1007
1165
  }
1008
1166
 
1009
1167
  @media (hover: hover) and (pointer: fine) {
1010
1168
  .bi-chip:-webkit-any(button):hover {
1011
- --bg-color: var(--bic-chip-bg-hover);
1169
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1012
1170
  }
1013
1171
  }
1014
1172
 
1015
1173
  .bi-chip:-webkit-any(button):active {
1016
- --bg-color: var(--bic-chip-bg-press);
1174
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1017
1175
  }
1018
1176
 
1019
1177
  .bi-chip:is(button) {
@@ -1023,20 +1181,19 @@
1023
1181
  }
1024
1182
 
1025
1183
  .bi-chip:is(button):focus-visible {
1026
- outline-offset: 2px;
1027
- outline: 1.5px solid var(--bi-primary-50);
1028
- border-radius: var(--bi-scale-max);
1029
- box-shadow: 0 0 0 2px #fff;
1184
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1185
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1186
+ outline-offset: var(--_bi--focus, 2px);
1030
1187
  }
1031
1188
 
1032
1189
  @media (hover: hover) and (pointer: fine) {
1033
1190
  .bi-chip:is(button):hover {
1034
- --bg-color: var(--bic-chip-bg-hover);
1191
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1035
1192
  }
1036
1193
  }
1037
1194
 
1038
1195
  .bi-chip:is(button):active {
1039
- --bg-color: var(--bic-chip-bg-press);
1196
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1040
1197
  }
1041
1198
 
1042
1199
  .bi-chip:-webkit-any(a) {
@@ -1046,20 +1203,19 @@
1046
1203
  }
1047
1204
 
1048
1205
  .bi-chip:-webkit-any(a):focus-visible {
1049
- outline-offset: 2px;
1050
- outline: 1.5px solid var(--bi-primary-50);
1051
- border-radius: var(--bi-scale-max);
1052
- box-shadow: 0 0 0 2px #fff;
1206
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1207
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1208
+ outline-offset: var(--_bi--focus, 2px);
1053
1209
  }
1054
1210
 
1055
1211
  @media (hover: hover) and (pointer: fine) {
1056
1212
  .bi-chip:-webkit-any(a):hover {
1057
- --bg-color: var(--bic-chip-bg-hover);
1213
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1058
1214
  }
1059
1215
  }
1060
1216
 
1061
1217
  .bi-chip:-webkit-any(a):active {
1062
- --bg-color: var(--bic-chip-bg-press);
1218
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1063
1219
  }
1064
1220
 
1065
1221
  .bi-chip:is(a) {
@@ -1069,88 +1225,19 @@
1069
1225
  }
1070
1226
 
1071
1227
  .bi-chip:is(a):focus-visible {
1072
- outline-offset: 2px;
1073
- outline: 1.5px solid var(--bi-primary-50);
1074
- border-radius: var(--bi-scale-max);
1075
- box-shadow: 0 0 0 2px #fff;
1228
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1229
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1230
+ outline-offset: var(--_bi--focus, 2px);
1076
1231
  }
1077
1232
 
1078
1233
  @media (hover: hover) and (pointer: fine) {
1079
1234
  .bi-chip:is(a):hover {
1080
- --bg-color: var(--bic-chip-bg-hover);
1235
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1081
1236
  }
1082
1237
  }
1083
1238
 
1084
1239
  .bi-chip:is(a):active {
1085
- --bg-color: var(--bic-chip-bg-press);
1086
- }
1087
-
1088
- .bi-chip[data-size="small"] {
1089
- --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
1090
- --bic-chip-font-size: .8125rem;
1091
- --bic-chip-icon-size: var(--bi-scale-5x);
1092
- }
1093
-
1094
- .bi-chip[data-size="large"] {
1095
- --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
1096
- --bic-chip-font-size: 1rem;
1097
- --bic-chip-size: var(--bi-scale-14x);
1098
- }
1099
-
1100
- .bi-chip[data-color="neutral"] {
1101
- --bic-chip-background: var(--bi-neutral-5);
1102
- --bic-chip-background-hover: var(--bi-neutral-20);
1103
- --bic-chip-background-press: var(--bi-neutral-30);
1104
- --bic-chip-text-color: var(--bi-neutral-90);
1105
- }
1106
-
1107
- .bi-chip[data-color="primary-light"] {
1108
- --bic-chip-background: var(--bi-primary-5);
1109
- --bic-chip-background-hover: var(--bi-primary-20);
1110
- --bic-chip-background-press: var(--bi-primary-30);
1111
- --bic-chip-text-color: var(--bi-neutral-90);
1112
- }
1113
-
1114
- .bi-chip[data-color="info"] {
1115
- --bic-chip-background: var(--bi-info-5);
1116
- --bic-chip-background-hover: var(--bi-info-20);
1117
- --bic-chip-background-press: var(--bi-info-30);
1118
- --bic-chip-text-color: var(--bi-info-90);
1119
- }
1120
-
1121
- .bi-chip[data-color="white"] {
1122
- --bic-chip-background: var(--bi-basic-white);
1123
- --bic-chip-background-hover: var(--bi-neutral-20);
1124
- --bic-chip-background-press: var(--bi-neutral-30);
1125
- --bic-chip-text-color: var(--bi-neutral-90);
1126
- }
1127
-
1128
- .bi-chip[data-color="primary"] {
1129
- --bic-chip-background: var(--bi-primary-50);
1130
- --bic-chip-background-hover: var(--bi-primary-60);
1131
- --bic-chip-background-press: var(--bi-primary-70);
1132
- --bic-chip-text-color: var(--bi-basic-white);
1133
- }
1134
-
1135
- .bi-chip[data-color="alert"] {
1136
- --bic-chip-background: var(--bi-alert-5);
1137
- --bic-chip-background-hover: var(--bi-alert-20);
1138
- --bic-chip-background-press: var(--bi-alert-30);
1139
- --bic-chip-text-color: var(--bi-alert-90);
1140
- }
1141
-
1142
- .bi-chip[data-color="warning"] {
1143
- --bic-chip-background: var(--bi-warning-5);
1144
- --bic-chip-background-hover: var(--bi-warning-20);
1145
- --bic-chip-background-press: var(--bi-warning-30);
1146
- --bic-chip-text-color: var(--bi-warning-90);
1147
- }
1148
-
1149
- .bi-chip[data-color="success"] {
1150
- --bic-chip-background: var(--bi-success-5);
1151
- --bic-chip-background-hover: var(--bi-success-20);
1152
- --bic-chip-background-press: var(--bi-success-30);
1153
- --bic-chip-text-color: var(--bi-success-90);
1240
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1154
1241
  }
1155
1242
 
1156
1243
  .bi-chip > svg {
package/dist/salesforce.css CHANGED
@@ -1196,15 +1196,17 @@
1196
1196
 
1197
1197
  .bi-chip {
1198
1198
  --bic-chip-background: var(--bi-primary-5);
1199
- --bic-chip-background-hover: var(--bi-primary-10);
1200
- --bic-chip-background-press: var(--bi-primary-15);
1199
+ --bic-chip-focus-inner: var(--bi-basic-white);
1200
+ --bic-chip-focus-outer: var(--bi-primary-50);
1201
+ --bic-chip-background-hover: var(--bi-states-hover-dark);
1202
+ --bic-chip-background-press: var(--bi-states-press-dark);
1201
1203
  --bic-chip-text-color: var(--bi-neutral-90);
1202
1204
  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
1203
1205
  --bic-chip-icon-size: var(--bi-scale-6x);
1204
1206
  --bic-chip-font-size: .875rem;
1205
1207
  --bic-chip-line-height: 1.5;
1206
1208
  gap: var(--bi-scale-1x);
1207
- border-radius: var(--bi-scale-max);
1209
+ border-radius: var(--bi-radius-full);
1208
1210
  width: -webkit-fit-content;
1209
1211
  width: fit-content;
1210
1212
  color: var(--bic-chip-text-color);
@@ -1219,6 +1221,163 @@
1219
1221
  overflow: hidden;
1220
1222
  }
1221
1223
 
1224
+ .bi-chip[data-size="small"] {
1225
+ --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
1226
+ --bic-chip-font-size: .8125rem;
1227
+ --bic-chip-icon-size: var(--bi-scale-5x);
1228
+ }
1229
+
1230
+ .bi-chip[data-size="large"] {
1231
+ --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
1232
+ --bic-chip-font-size: 1rem;
1233
+ --bic-chip-size: var(--bi-scale-14x);
1234
+ }
1235
+
1236
+ .bi-chip[data-dark="true"] {
1237
+ --bic-chip-focus-inner: var(--bi-neutral-95);
1238
+ --bic-chip-focus-outer: var(--bi-secondary-50);
1239
+ --bic-chip-background-hover: var(--bi-states-hover-light);
1240
+ --bic-chip-background-press: var(--bi-states-press-light);
1241
+ }
1242
+
1243
+ .bi-chip[data-selected="true"] {
1244
+ --bic-chip-background-hover: var(--bi-states-hover-light);
1245
+ --bic-chip-background-press: var(--bi-states-press-light);
1246
+ }
1247
+
1248
+ .bi-chip[data-color="white"] {
1249
+ --bic-chip-background: var(--bi-basic-white);
1250
+ }
1251
+
1252
+ .bi-chip[data-color="white"][data-selected="true"] {
1253
+ --bic-chip-background: var(--bi-neutral-60);
1254
+ --bic-chip-text-color: var(--bi-basic-white);
1255
+ }
1256
+
1257
+ .bi-chip[data-color="white"][data-dark="true"] {
1258
+ --bic-chip-background: var(--bi-neutral-100);
1259
+ --bic-chip-text-color: var(--bi-basic-white);
1260
+ }
1261
+
1262
+ .bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
1263
+ --bic-chip-background: var(--bi-neutral-50);
1264
+ --bic-chip-text-color: var(--bi-basic-white);
1265
+ }
1266
+
1267
+ .bi-chip[data-color="neutral"] {
1268
+ --bic-chip-background: var(--bi-neutral-5);
1269
+ }
1270
+
1271
+ .bi-chip[data-color="neutral"][data-selected="true"] {
1272
+ --bic-chip-background: var(--bi-neutral-60);
1273
+ --bic-chip-text-color: var(--bi-basic-white);
1274
+ }
1275
+
1276
+ .bi-chip[data-color="neutral"][data-dark="true"] {
1277
+ --bic-chip-background: var(--bi-neutral-95);
1278
+ --bic-chip-text-color: var(--bi-basic-white);
1279
+ }
1280
+
1281
+ .bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
1282
+ --bic-chip-background: var(--bi-neutral-50);
1283
+ --bic-chip-text-color: var(--bi-basic-white);
1284
+ }
1285
+
1286
+ .bi-chip[data-color="primary"] {
1287
+ --bic-chip-background: var(--bi-primary-5);
1288
+ }
1289
+
1290
+ .bi-chip[data-color="primary"][data-selected="true"] {
1291
+ --bic-chip-background: var(--bi-primary-50);
1292
+ --bic-chip-text-color: var(--bi-basic-white);
1293
+ }
1294
+
1295
+ .bi-chip[data-color="primary"][data-dark="true"] {
1296
+ --bic-chip-background: var(--bi-primary-85);
1297
+ --bic-chip-text-color: var(--bi-primary-10);
1298
+ }
1299
+
1300
+ .bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
1301
+ --bic-chip-background: var(--bi-primary-50);
1302
+ --bic-chip-text-color: var(--bi-basic-white);
1303
+ }
1304
+
1305
+ .bi-chip[data-color="info"] {
1306
+ --bic-chip-background: var(--bi-info-5);
1307
+ }
1308
+
1309
+ .bi-chip[data-color="info"][data-selected="true"] {
1310
+ --bic-chip-background: var(--bi-info-50);
1311
+ --bic-chip-text-color: var(--bi-basic-white);
1312
+ }
1313
+
1314
+ .bi-chip[data-color="info"][data-dark="true"] {
1315
+ --bic-chip-background: var(--bi-info-95);
1316
+ --bic-chip-text-color: var(--bi-info-15);
1317
+ }
1318
+
1319
+ .bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
1320
+ --bic-chip-background: var(--bi-info-50);
1321
+ --bic-chip-text-color: var(--bi-basic-white);
1322
+ }
1323
+
1324
+ .bi-chip[data-color="alert"] {
1325
+ --bic-chip-background: var(--bi-alert-10);
1326
+ }
1327
+
1328
+ .bi-chip[data-color="alert"][data-selected="true"] {
1329
+ --bic-chip-background: var(--bi-alert-60);
1330
+ --bic-chip-text-color: var(--bi-basic-white);
1331
+ }
1332
+
1333
+ .bi-chip[data-color="alert"][data-dark="true"] {
1334
+ --bic-chip-background: var(--bi-alert-95);
1335
+ --bic-chip-text-color: var(--bi-alert-15);
1336
+ }
1337
+
1338
+ .bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
1339
+ --bic-chip-background: var(--bi-alert-60);
1340
+ --bic-chip-text-color: var(--bi-basic-white);
1341
+ }
1342
+
1343
+ .bi-chip[data-color="warning"] {
1344
+ --bic-chip-background: var(--bi-warning-10);
1345
+ }
1346
+
1347
+ .bi-chip[data-color="warning"][data-selected="true"] {
1348
+ --bic-chip-background: var(--bi-warning-75);
1349
+ --bic-chip-text-color: var(--bi-basic-white);
1350
+ }
1351
+
1352
+ .bi-chip[data-color="warning"][data-dark="true"] {
1353
+ --bic-chip-background: var(--bi-warning-90);
1354
+ --bic-chip-text-color: var(--bi-warning-15);
1355
+ }
1356
+
1357
+ .bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
1358
+ --bic-chip-background: var(--bi-warning-70);
1359
+ --bic-chip-text-color: var(--bi-basic-white);
1360
+ }
1361
+
1362
+ .bi-chip[data-color="success"] {
1363
+ --bic-chip-background: var(--bi-success-5);
1364
+ }
1365
+
1366
+ .bi-chip[data-color="success"][data-selected="true"] {
1367
+ --bic-chip-background: var(--bi-success-70);
1368
+ --bic-chip-text-color: var(--bi-basic-white);
1369
+ }
1370
+
1371
+ .bi-chip[data-color="success"][data-dark="true"] {
1372
+ --bic-chip-background: var(--bi-success-90);
1373
+ --bic-chip-text-color: var(--bi-success-10);
1374
+ }
1375
+
1376
+ .bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
1377
+ --bic-chip-background: var(--bi-success-70);
1378
+ --bic-chip-text-color: var(--bi-basic-white);
1379
+ }
1380
+
1222
1381
  .bi-chip:-webkit-any(button) {
1223
1382
  cursor: pointer;
1224
1383
  border: none;
@@ -1226,20 +1385,19 @@
1226
1385
  }
1227
1386
 
1228
1387
  .bi-chip:-webkit-any(button):focus-visible {
1229
- outline-offset: 2px;
1230
- outline: 1.5px solid var(--bi-primary-50);
1231
- border-radius: var(--bi-scale-max);
1232
- box-shadow: 0 0 0 2px #fff;
1388
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1389
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1390
+ outline-offset: var(--_bi--focus, 2px);
1233
1391
  }
1234
1392
 
1235
1393
  @media (hover: hover) and (pointer: fine) {
1236
1394
  .bi-chip:-webkit-any(button):hover {
1237
- --bg-color: var(--bic-chip-bg-hover);
1395
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1238
1396
  }
1239
1397
  }
1240
1398
 
1241
1399
  .bi-chip:-webkit-any(button):active {
1242
- --bg-color: var(--bic-chip-bg-press);
1400
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1243
1401
  }
1244
1402
 
1245
1403
  .bi-chip:is(button) {
@@ -1249,20 +1407,19 @@
1249
1407
  }
1250
1408
 
1251
1409
  .bi-chip:is(button):focus-visible {
1252
- outline-offset: 2px;
1253
- outline: 1.5px solid var(--bi-primary-50);
1254
- border-radius: var(--bi-scale-max);
1255
- box-shadow: 0 0 0 2px #fff;
1410
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1411
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1412
+ outline-offset: var(--_bi--focus, 2px);
1256
1413
  }
1257
1414
 
1258
1415
  @media (hover: hover) and (pointer: fine) {
1259
1416
  .bi-chip:is(button):hover {
1260
- --bg-color: var(--bic-chip-bg-hover);
1417
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1261
1418
  }
1262
1419
  }
1263
1420
 
1264
1421
  .bi-chip:is(button):active {
1265
- --bg-color: var(--bic-chip-bg-press);
1422
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1266
1423
  }
1267
1424
 
1268
1425
  .bi-chip:-webkit-any(a) {
@@ -1272,20 +1429,19 @@
1272
1429
  }
1273
1430
 
1274
1431
  .bi-chip:-webkit-any(a):focus-visible {
1275
- outline-offset: 2px;
1276
- outline: 1.5px solid var(--bi-primary-50);
1277
- border-radius: var(--bi-scale-max);
1278
- box-shadow: 0 0 0 2px #fff;
1432
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1433
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1434
+ outline-offset: var(--_bi--focus, 2px);
1279
1435
  }
1280
1436
 
1281
1437
  @media (hover: hover) and (pointer: fine) {
1282
1438
  .bi-chip:-webkit-any(a):hover {
1283
- --bg-color: var(--bic-chip-bg-hover);
1439
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1284
1440
  }
1285
1441
  }
1286
1442
 
1287
1443
  .bi-chip:-webkit-any(a):active {
1288
- --bg-color: var(--bic-chip-bg-press);
1444
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1289
1445
  }
1290
1446
 
1291
1447
  .bi-chip:is(a) {
@@ -1295,88 +1451,19 @@
1295
1451
  }
1296
1452
 
1297
1453
  .bi-chip:is(a):focus-visible {
1298
- outline-offset: 2px;
1299
- outline: 1.5px solid var(--bi-primary-50);
1300
- border-radius: var(--bi-scale-max);
1301
- box-shadow: 0 0 0 2px #fff;
1454
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1455
+ outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1456
+ outline-offset: var(--_bi--focus, 2px);
1302
1457
  }
1303
1458
 
1304
1459
  @media (hover: hover) and (pointer: fine) {
1305
1460
  .bi-chip:is(a):hover {
1306
- --bg-color: var(--bic-chip-bg-hover);
1461
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%), var(--bic-chip-background);
1307
1462
  }
1308
1463
  }
1309
1464
 
1310
1465
  .bi-chip:is(a):active {
1311
- --bg-color: var(--bic-chip-bg-press);
1312
- }
1313
-
1314
- .bi-chip[data-size="small"] {
1315
- --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
1316
- --bic-chip-font-size: .8125rem;
1317
- --bic-chip-icon-size: var(--bi-scale-5x);
1318
- }
1319
-
1320
- .bi-chip[data-size="large"] {
1321
- --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
1322
- --bic-chip-font-size: 1rem;
1323
- --bic-chip-size: var(--bi-scale-14x);
1324
- }
1325
-
1326
- .bi-chip[data-color="neutral"] {
1327
- --bic-chip-background: var(--bi-neutral-5);
1328
- --bic-chip-background-hover: var(--bi-neutral-20);
1329
- --bic-chip-background-press: var(--bi-neutral-30);
1330
- --bic-chip-text-color: var(--bi-neutral-90);
1331
- }
1332
-
1333
- .bi-chip[data-color="primary-light"] {
1334
- --bic-chip-background: var(--bi-primary-5);
1335
- --bic-chip-background-hover: var(--bi-primary-20);
1336
- --bic-chip-background-press: var(--bi-primary-30);
1337
- --bic-chip-text-color: var(--bi-neutral-90);
1338
- }
1339
-
1340
- .bi-chip[data-color="info"] {
1341
- --bic-chip-background: var(--bi-info-5);
1342
- --bic-chip-background-hover: var(--bi-info-20);
1343
- --bic-chip-background-press: var(--bi-info-30);
1344
- --bic-chip-text-color: var(--bi-info-90);
1345
- }
1346
-
1347
- .bi-chip[data-color="white"] {
1348
- --bic-chip-background: var(--bi-basic-white);
1349
- --bic-chip-background-hover: var(--bi-neutral-20);
1350
- --bic-chip-background-press: var(--bi-neutral-30);
1351
- --bic-chip-text-color: var(--bi-neutral-90);
1352
- }
1353
-
1354
- .bi-chip[data-color="primary"] {
1355
- --bic-chip-background: var(--bi-primary-50);
1356
- --bic-chip-background-hover: var(--bi-primary-60);
1357
- --bic-chip-background-press: var(--bi-primary-70);
1358
- --bic-chip-text-color: var(--bi-basic-white);
1359
- }
1360
-
1361
- .bi-chip[data-color="alert"] {
1362
- --bic-chip-background: var(--bi-alert-5);
1363
- --bic-chip-background-hover: var(--bi-alert-20);
1364
- --bic-chip-background-press: var(--bi-alert-30);
1365
- --bic-chip-text-color: var(--bi-alert-90);
1366
- }
1367
-
1368
- .bi-chip[data-color="warning"] {
1369
- --bic-chip-background: var(--bi-warning-5);
1370
- --bic-chip-background-hover: var(--bi-warning-20);
1371
- --bic-chip-background-press: var(--bi-warning-30);
1372
- --bic-chip-text-color: var(--bi-warning-90);
1373
- }
1374
-
1375
- .bi-chip[data-color="success"] {
1376
- --bic-chip-background: var(--bi-success-5);
1377
- --bic-chip-background-hover: var(--bi-success-20);
1378
- --bic-chip-background-press: var(--bi-success-30);
1379
- --bic-chip-text-color: var(--bi-success-90);
1466
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%), var(--bic-chip-background);
1380
1467
  }
1381
1468
 
1382
1469
  .bi-chip > svg {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.5.0",
4
+ "version": "0.6.0",
5
5
  "engines": {
6
6
  "node": "^20.19.0 || >=22.12.0"
7
7
  },
@@ -35,7 +35,7 @@
35
35
  "lightningcss": "^1.30.2",
36
36
  "modern-normalize": "^3.0.1",
37
37
  "rimraf": "^6.0.1",
38
- "@bi-digital/tokens": "0.5.0"
38
+ "@bi-digital/tokens": "0.6.0"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf dist && node config.js",