@@ -18,21 +18,47 @@ governing permissions and limitations under the License.
18
18
--spectrum-badge-line-height : var (--spectrum-line-height-100 );
19
19
--spectrum-badge-line-height-cjk : var (--spectrum-cjk-line-height-100 );
20
20
21
+
21
22
/* text and icon color default white for all t-shirt sizes and all themes */
22
- --spectrum-badge-label-icon-color-white : var (--spectrum-white );
23
+ --spectrum-badge-label-icon-color : var (--spectrum-white );
24
+
25
+ /* text and icon color is black for these background colors */
26
+ & --orange , & --yellow , & --chartreuse , & --celery {
27
+ --spectrum-badge-label-icon-color : var (--spectrum-black );
28
+ }
23
29
24
- /* text and icon color black for all t-shirt sizes and all themes */
25
- --spectrum-badge-label-icon-color-black : var (--spectrum-black );
30
+ /* dark theme all non-semantic colors are black */
31
+ & --gray , & --red , & --green , & --seafoam , & --cyan , & --blue , & --indigo , & --purple , & --fuchsia , & --magenta {
32
+ --spectrum-badge-label-icon-color : var (--spectrum-badge-label-icon-color-primary );
33
+ }
26
34
27
35
/* background color default for all t-shirt sizes and all themes */
28
36
--spectrum-badge-background-color-default : var (--spectrum-neutral-subdued-background-color-default );
29
37
30
- /* background colors for all t-shirt sizes and all themes */
38
+ /* semantic background colors for all t-shirt sizes and all themes */
31
39
--spectrum-badge-background-color-default : var (--spectrum-neutral-subdued-background-color-default );
32
40
--spectrum-badge-background-color-accent : var (--spectrum-accent-background-color-default );
33
41
--spectrum-badge-background-color-informative : var (--spectrum-informative-background-color-default );
34
42
--spectrum-badge-background-color-negative : var (--spectrum-negative-background-color-default );
35
43
--spectrum-badge-background-color-positive : var (--spectrum-positive-background-color-default );
44
+ --spectrum-badge-background-color-notice : var (--spectrum-notice-background-color-default );
45
+
46
+ /* non-semantic background colors */
47
+ --spectrum-badge-background-color-gray : var (--spectrum-gray-background-color-default );
48
+ --spectrum-badge-background-color-red : var (--spectrum-red-background-color-default );
49
+ --spectrum-badge-background-color-orange : var (--spectrum-orange-background-color-default );
50
+ --spectrum-badge-background-color-yellow : var (--spectrum-yellow-background-color-default );
51
+ --spectrum-badge-background-color-chartreuse : var (--spectrum-chartreuse-background-color-default );
52
+ --spectrum-badge-background-color-celery : var (--spectrum-celery-background-color-default );
53
+ --spectrum-badge-background-color-green : var (--spectrum-green-background-color-default );
54
+ --spectrum-badge-background-color-seafoam : var (--spectrum-seafoam-background-color-default );
55
+ --spectrum-badge-background-color-cyan : var (--spectrum-cyan-background-color-default );
56
+ --spectrum-badge-background-color-blue : var (--spectrum-blue-background-color-default );
57
+ --spectrum-badge-background-color-indigo : var (--spectrum-indigo-background-color-default );
58
+ --spectrum-badge-background-color-purple : var (--spectrum-purple-background-color-default );
59
+ --spectrum-badge-background-color-fuchsia : var (--spectrum-fuchsia-background-color-default );
60
+ --spectrum-badge-background-color-magenta : var (--spectrum-magenta-background-color-default );
61
+
36
62
37
63
/*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/
38
64
/* badge height - fallback if no t-shirt size */
@@ -74,23 +100,6 @@ governing permissions and limitations under the License.
74
100
--spectrum-badge-icon-only-spacing-horizontal : var (--spectrum-component-edge-to-visual-only-75 );
75
101
}
76
102
77
- .spectrum-Badge--sizeM {
78
- --spectrum-badge-height : var (--spectrum-component-height-100 );
79
-
80
- /* label */
81
- --spectrum-badge-font-size : var (--spectrum-font-size-100 );
82
- --spectrum-badge-label-spacing-vertical-top : var (--spectrum-component-top-to-text-100 );
83
- --spectrum-badge-label-spacing-vertical-bottom : var (--spectrum-component-bottom-to-text-100 );
84
- --spectrum-badge-label-spacing-horizontal : var (--spectrum-component-edge-to-text-100 );
85
-
86
- /* icon */
87
- --spectrum-badge-workflow-icon-size : var (--spectrum-workflow-icon-size-100 );
88
- --spectrum-badge-icon-text-spacing : var (--spectrum-text-to-visual-100 );
89
- --spectrum-badge-icon-spacing-horizontal : var (--spectrum-component-edge-to-visual-100 );
90
- --spectrum-badge-icon-spacing-vertical-top : var (--spectrum-component-top-to-workflow-icon-100 );
91
- --spectrum-badge-icon-only-spacing-horizontal : var (--spectrum-component-edge-to-visual-only-100 );
92
- }
93
-
94
103
.spectrum-Badge--sizeL {
95
104
--spectrum-badge-height : var (--spectrum-component-height-100 );
96
105
@@ -153,14 +162,8 @@ governing permissions and limitations under the License.
153
162
154
163
background : var (--mod-badge-background-color-default ,
155
164
var (--spectrum-badge-background-color-default ));
156
- color : var (--mod-badge-label-icon-color-white ,
157
- var (--spectrum-badge-label-icon-color-white ));
158
-
159
- /* text and icon black */
160
- & --black-text {
161
- color : var (--mod-badge-label-icon-color-black ,
162
- var (--spectrum-badge-label-icon-color-black ));
163
- }
165
+ color : var (--mod-badge-label-icon-color ,
166
+ var (--spectrum-badge-label-icon-color ));
164
167
165
168
/* background color variants */
166
169
& --neutral {
@@ -188,6 +191,67 @@ governing permissions and limitations under the License.
188
191
var (--spectrum-badge-background-color-positive ));
189
192
}
190
193
194
+ & --notice {
195
+ background : var (--mod-badge-background-color-notice , var (--spectrum-badge-background-color-notice ));
196
+ }
197
+
198
+ /* non-semantic colors */
199
+ & --gray {
200
+ background : var (--mod-badge-background-color-gray , var (--spectrum-badge-background-color-gray ));
201
+ }
202
+
203
+ & --red {
204
+ background : var (--mod-badge-background-color-red , var (--spectrum-badge-background-color-red ));
205
+ }
206
+
207
+ & --orange {
208
+ background : var (--mod-badge-background-color-orange , var (--spectrum-badge-background-color-orange ));
209
+ }
210
+
211
+ & --yellow {
212
+ background : var (--mod-badge-background-color-yellow , var (--spectrum-badge-background-color-yellow ));
213
+ }
214
+
215
+ & --chartreuse {
216
+ background : var (--mod-badge-background-color-chartreuse , var (--spectrum-badge-background-color-chartreuse ));
217
+ }
218
+
219
+ & --celery {
220
+ background : var (--mod-badge-background-color-celery , var (--spectrum-badge-background-color-celery ));
221
+ }
222
+
223
+ & --green {
224
+ background : var (--mod-badge-background-color-green , var (--spectrum-badge-background-color-green ));
225
+ }
226
+
227
+ & --seafoam {
228
+ background : var (--mod-badge-background-color-seafoam , var (--spectrum-badge-background-color-seafoam ));
229
+ }
230
+
231
+ & --cyan {
232
+ background : var (--mod-badge-background-color-cyan , var (--spectrum-badge-background-color-cyan ));
233
+ }
234
+
235
+ & --blue {
236
+ background : var (--mod-badge-background-color-blue , var (--spectrum-badge-background-color-blue ));
237
+ }
238
+
239
+ & --indigo {
240
+ background : var (--mod-badge-background-color-indigo , var (--spectrum-badge-background-color-indigo ));
241
+ }
242
+
243
+ & --purple {
244
+ background : var (--mod-badge-background-color-purple , var (--spectrum-badge-background-color-purple ));
245
+ }
246
+
247
+ & --fuchsia {
248
+ background : var (--mod-badge-background-color-fuchsia , var (--spectrum-badge-background-color-fuchsia ));
249
+ }
250
+
251
+ & --magenta {
252
+ background : var (--mod-badge-background-color-magenta , var (--spectrum-badge-background-color-magenta ));
253
+ }
254
+
191
255
/* fixed position variants with border radius 0 on the fixed edge of the component */
192
256
& --fixed-inline-start {
193
257
border-start-start-radius : 0 ;
@@ -226,14 +290,8 @@ governing permissions and limitations under the License.
226
290
padding-block-end : var (--mod-badge-label-spacing-vertical-bottom ,
227
291
var (--spectrum-badge-label-spacing-vertical-bottom ));
228
292
229
- color : var (--mod-badge-label-icon-color-white ,
230
- var (--spectrum-badge-label-icon-color-white ));
231
-
232
- /* black text and icon variant */
233
- .spectrum-Badge--black-text & {
234
- color : var (--mod-badge-label-icon-color-black ,
235
- var (--spectrum-badge-label-icon-color-black ));
236
- }
293
+ color : var (--mod-badge-label-icon-color ,
294
+ var (--spectrum-badge-label-icon-color ));
237
295
238
296
/* cjk language support */
239
297
& : lang (ja ),
@@ -270,8 +328,8 @@ governing permissions and limitations under the License.
270
328
padding-block-end : var (--mod-badge-icon-spacing-vertical-top ,
271
329
var (--spectrum-badge-icon-spacing-vertical-top ));
272
330
273
- color : var (--mod-badge-label-icon-color-white ,
274
- var (--spectrum-badge-label-icon-color-white ));
331
+ color : var (--mod-badge-label-icon-color ,
332
+ var (--spectrum-badge-label-icon-color ));
275
333
276
334
& --no-label {
277
335
/* icon without label has identical padding left and right */
@@ -280,10 +338,4 @@ governing permissions and limitations under the License.
280
338
padding-inline-end : var (--mod-badge-icon-only-spacing-horizontal ,
281
339
var (--spectrum-badge-icon-only-spacing-horizontal ));
282
340
}
283
-
284
- /* black text and icon variant */
285
- .spectrum-Badge--black-text & {
286
- color : var (--mod-badge-label-icon-color-black ,
287
- var (--spectrum-badge-label-icon-color-black ));
288
- }
289
341
}
0 commit comments