Skip to content

Commit 1bac588

Browse files
mlogsdon18pfulton
andauthored
feat(badge,tokens): add non-semantic colors (#2077)
* feat(badge): add notice variant * feat(badge): adding non-semantic color variants * chore(badge): adding non-semantic variants to storybook controls * chore(badge): adding withicon and icononly stories * chore(badge): remove black-text option * chore(badge): remove repetitive medium styles * chore(badge): renaming props to match design spec * fix(badge): fix logic for icon only story * refactor(badge,tokens): add color abstraction for theme switching --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent 7621aac commit 1bac588

File tree

8 files changed

+205
-116
lines changed

8 files changed

+205
-116
lines changed

components/badge/index.css

Lines changed: 97 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,47 @@ governing permissions and limitations under the License.
1818
--spectrum-badge-line-height: var(--spectrum-line-height-100);
1919
--spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
2020

21+
2122
/* 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+
}
2329

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+
}
2634

2735
/* background color default for all t-shirt sizes and all themes */
2836
--spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
2937

30-
/* background colors for all t-shirt sizes and all themes */
38+
/* semantic background colors for all t-shirt sizes and all themes */
3139
--spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
3240
--spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
3341
--spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
3442
--spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
3543
--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+
3662

3763
/*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/
3864
/* badge height - fallback if no t-shirt size */
@@ -74,23 +100,6 @@ governing permissions and limitations under the License.
74100
--spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
75101
}
76102

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-
94103
.spectrum-Badge--sizeL {
95104
--spectrum-badge-height: var(--spectrum-component-height-100);
96105

@@ -153,14 +162,8 @@ governing permissions and limitations under the License.
153162

154163
background: var(--mod-badge-background-color-default,
155164
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));
164167

165168
/* background color variants */
166169
&--neutral {
@@ -188,6 +191,67 @@ governing permissions and limitations under the License.
188191
var(--spectrum-badge-background-color-positive));
189192
}
190193

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+
191255
/* fixed position variants with border radius 0 on the fixed edge of the component */
192256
&--fixed-inline-start {
193257
border-start-start-radius: 0;
@@ -226,14 +290,8 @@ governing permissions and limitations under the License.
226290
padding-block-end: var(--mod-badge-label-spacing-vertical-bottom,
227291
var(--spectrum-badge-label-spacing-vertical-bottom));
228292

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));
237295

238296
/* cjk language support */
239297
&:lang(ja),
@@ -270,8 +328,8 @@ governing permissions and limitations under the License.
270328
padding-block-end: var(--mod-badge-icon-spacing-vertical-top,
271329
var(--spectrum-badge-icon-spacing-vertical-top));
272330

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));
275333

276334
&--no-label {
277335
/* icon without label has identical padding left and right */
@@ -280,10 +338,4 @@ governing permissions and limitations under the License.
280338
padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal,
281339
var(--spectrum-badge-icon-only-spacing-horizontal));
282340
}
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-
}
289341
}

components/badge/metadata/badge.yml

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@ sections:
1515
- Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior.
1616
- Layout of Badge is applied with a display of inline-flex, allowing badge to display as inline while the child elements for the label and icon utilize flexbox for layout.
1717
18-
### Badge now includes white text/icon color and black text/icon color
19-
- The color is applied to the parent container so that the icon and text child elements will inherit a unified color.
20-
- White text/icon color is the default and requires no additional class.
21-
- Black text/icon color is applied to the parent container with modifier class `.spectrum-Badge--black-text`
22-
2318
### Badge now includes fixed positioning
2419
- This document represents the border radius style which applies to each position.
2520
- border radius is 0 along the fixed edge of the component.
@@ -49,7 +44,70 @@ examples:
4944
<div class="spectrum-Badge-label">Negative</div>
5045
</div>
5146
52-
- id: badge
47+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--notice">
48+
<div class="spectrum-Badge-label">Notice</div>
49+
</div>
50+
51+
- id: badge-non-semantic
52+
name: Non-Semantic
53+
markup: |
54+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--gray">
55+
<div class="spectrum-Badge-label">Gray</div>
56+
</div>
57+
58+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--red">
59+
<div class="spectrum-Badge-label">Red</div>
60+
</div>
61+
62+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--orange">
63+
<div class="spectrum-Badge-label">Orange</div>
64+
</div>
65+
66+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--yellow">
67+
<div class="spectrum-Badge-label">Yellow</div>
68+
</div>
69+
70+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--chartreuse">
71+
<div class="spectrum-Badge-label">Chartreuse</div>
72+
</div>
73+
74+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--celery">
75+
<div class="spectrum-Badge-label">Celery</div>
76+
</div>
77+
78+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--green">
79+
<div class="spectrum-Badge-label">Green</div>
80+
</div>
81+
82+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--seafoam">
83+
<div class="spectrum-Badge-label">Seafoam</div>
84+
</div>
85+
86+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--cyan">
87+
<div class="spectrum-Badge-label">Cyan</div>
88+
</div>
89+
90+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--blue">
91+
<div class="spectrum-Badge-label">Blue</div>
92+
</div>
93+
94+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--indigo">
95+
<div class="spectrum-Badge-label">Indigo</div>
96+
</div>
97+
98+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--purple">
99+
<div class="spectrum-Badge-label">Purple</div>
100+
</div>
101+
102+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--fuchsia">
103+
<div class="spectrum-Badge-label">Fuchsia</div>
104+
</div>
105+
106+
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--magenta">
107+
<div class="spectrum-Badge-label">Magenta</div>
108+
</div>
109+
110+
- id: badge-sizing
53111
name: Sizing
54112
markup: |
55113
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Label Only</h4>
@@ -196,32 +254,3 @@ examples:
196254
</div>
197255
198256
</div>
199-
200-
- id: badge
201-
name: Text and Icon Color
202-
markup: |
203-
<div class="spectrum-Examples">
204-
<div class="spectrum-Examples-item">
205-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">White (default)</h4>
206-
207-
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral">
208-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
209-
<use xlink:href="#spectrum-icon-18-Info" />
210-
</svg>
211-
<div class="spectrum-Badge-label">Label Text</div>
212-
</div>
213-
214-
</div>
215-
216-
<div class="spectrum-Examples-item">
217-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Black</h4>
218-
219-
<div class="spectrum-Badge spectrum-Badge--sizeM spectrum-Badge--neutral spectrum-Badge--black-text">
220-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Badge-icon spectrum-Badge-icon" focusable="false" aria-hidden="true">
221-
<use xlink:href="#spectrum-icon-18-Info" />
222-
</svg>
223-
<div class="spectrum-Badge-label">Label Text</div>
224-
</div>
225-
226-
</div>
227-
</div>

components/badge/metadata/mods.md

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
| Modifiable Custom Properties |
22
| ------------------------------------------- |
33
| `--mod-badge-background-color-accent` |
4+
| `--mod-badge-background-color-blue` |
5+
| `--mod-badge-background-color-celery` |
6+
| `--mod-badge-background-color-chartreuse` |
7+
| `--mod-badge-background-color-cyan` |
48
| `--mod-badge-background-color-default` |
9+
| `--mod-badge-background-color-fuchsia` |
10+
| `--mod-badge-background-color-gray` |
11+
| `--mod-badge-background-color-green` |
12+
| `--mod-badge-background-color-indigo` |
513
| `--mod-badge-background-color-informative` |
14+
| `--mod-badge-background-color-magenta` |
615
| `--mod-badge-background-color-negative` |
16+
| `--mod-badge-background-color-notice` |
17+
| `--mod-badge-background-color-orange` |
718
| `--mod-badge-background-color-positive` |
19+
| `--mod-badge-background-color-purple` |
20+
| `--mod-badge-background-color-red` |
21+
| `--mod-badge-background-color-seafoam` |
22+
| `--mod-badge-background-color-yellow` |
823
| `--mod-badge-corner-radius` |
924
| `--mod-badge-font-size` |
1025
| `--mod-badge-height` |
1126
| `--mod-badge-icon-only-spacing-horizontal` |
1227
| `--mod-badge-icon-spacing-horizontal` |
1328
| `--mod-badge-icon-spacing-vertical-top` |
1429
| `--mod-badge-icon-text-spacing` |
15-
| `--mod-badge-label-icon-color-black` |
16-
| `--mod-badge-label-icon-color-white` |
30+
| `--mod-badge-label-icon-color` |
1731
| `--mod-badge-label-spacing-horizontal` |
1832
| `--mod-badge-label-spacing-vertical-bottom` |
1933
| `--mod-badge-label-spacing-vertical-top` |

0 commit comments

Comments
 (0)