Skip to content

Commit 3369fdb

Browse files
castastrophecastastrophe
committed
feat(tokens): integrate light-dark
1 parent 5638c37 commit 3369fdb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+4394
-1221
lines changed

‎.storybook/assets/base.css

+7
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,13 @@ body {
2929
}
3030

3131
.spectrum {
32+
/* Gradient that changes with the color theme. */
33+
--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
34+
35+
/* Gradients that do not change with the color theme, for use in static color backgrounds. */
36+
--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255));
37+
--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67));
38+
3239
color: var(--spectrum-neutral-content-color-default);
3340
background-color: var(--spectrum-background-base-color);
3441
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);

‎.storybook/decorators/context.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const withContextWrapper = makeDecorator({
4848
toggleStyles(document.body, "tokens", tokens, true);
4949

5050
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
51-
document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
51+
document.body.classList.add("spectrum");
5252

5353
for (const container of fetchContainers(id, isDocs, isTesting)) {
5454
// Check if the container is a testing wrapper to prevent applying colors around the testing grid

‎components/alertbanner/index.css

+36-67
Original file line numberDiff line numberDiff line change
@@ -12,70 +12,38 @@
1212
*/
1313

1414
.spectrum-AlertBanner {
15-
--spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default);
16-
17-
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
18-
--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
19-
--spectrum-alert-banner-inline-size: auto;
20-
21-
--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
22-
--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
23-
--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
24-
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
25-
26-
/* spacing */
27-
--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
28-
--spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
29-
--spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300);
30-
--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
31-
--spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
32-
--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
33-
--spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
34-
35-
/* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
36-
padding-block of its parent AlertBanner-body element. */
37-
--spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
38-
--spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
39-
40-
/* colors */
41-
--spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
42-
--spectrum-alert-banner-font-color: var(--spectrum-white);
43-
4415
/* @passthrough -- settings for nested Close button */
45-
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end));
46-
--mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
16+
--mod-closebutton-margin-inline: var(--spectrum-spacing-300) var(--spectrum-alert-banner-close-button-spacing);
17+
--mod-closebutton-margin-top: var(--spectrum-spacing-200);
4718
--mod-closebutton-align-self: flex-start;
4819

20+
display: none;
21+
justify-content: space-between;
22+
inline-size: auto;
23+
max-inline-size: var(--spectrum-alert-banner-width);
24+
min-block-size: var(--spectrum-alert-banner-minimum-height);
25+
font-size: var(--spectrum-font-size-100);
26+
font-family: var(--spectrum-sans-font-family-stack);
27+
line-height: var(--spectrum-line-height-100);
28+
color: var(--spectrum-white);
29+
background: var(--spectrum-neutral-subdued-background-color-default);
30+
31+
&.is-open {
32+
display: flex;
33+
}
34+
4935
&:lang(ja),
5036
&:lang(zh),
5137
&:lang(ko) {
52-
--spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100);
38+
line-height: var(--spectrum-cjk-line-height-100);
5339
}
54-
}
5540

56-
.spectrum-AlertBanner--info {
57-
--spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
58-
}
59-
60-
.spectrum-AlertBanner--negative {
61-
--spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
62-
}
63-
64-
.spectrum-AlertBanner {
65-
display: none;
66-
justify-content: space-between;
67-
inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
68-
max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
69-
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
70-
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
71-
font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family));
72-
line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
73-
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
74-
background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
75-
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
41+
&.spectrum-AlertBanner--info {
42+
background: var(--spectrum-informative-background-color-default);
43+
}
7644

77-
&.is-open {
78-
display: flex;
45+
&.spectrum-AlertBanner--negative {
46+
background: var(--spectrum-negative-background-color-default);
7947
}
8048
}
8149

@@ -87,15 +55,15 @@
8755
justify-content: flex-end;
8856

8957
/* Inline spacing between text and button, only when the button has not wrapped to the next line. */
90-
column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
58+
column-gap: var(--spectrum-spacing-300);
9159

9260
/* Block spacing between text and button, when the button has wrapped to the next line. Takes into
9361
account the existing margins on the text. */
94-
row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end));
62+
row-gap: max(0px, calc(var(--spectrum-alert-banner-text-to-button-vertical) - max(0px, calc(var(--spectrum-alert-banner-bottom-to-text) - var(--spectrum-spacing-200)))));
9563

96-
padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button));
97-
margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content));
98-
margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content));
64+
padding-block: var(--spectrum-spacing-200);
65+
margin-inline-start: var(--spectrum-spacing-300);
66+
margin-inline-end: var(--spectrum-spacing-300);
9967

10068
/* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */
10169
.spectrum-AlertBanner:has(.spectrum-CloseButton) & {
@@ -110,21 +78,22 @@
11078

11179
.spectrum-AlertBanner-icon {
11280
/* @passthrough -- icon-size */
113-
--mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
81+
--mod-icon-size: var(--spectrum-workflow-icon-size-100);
11482

115-
margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
116-
margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
83+
margin-block-start: calc(var(--spectrum-alert-banner-top-to-workflow-icon) - var(--spectrum-spacing-200));
84+
margin-inline-end: var(--spectrum-text-to-visual-300);
11785
flex-shrink: 0;
11886
}
11987

12088
.spectrum-AlertBanner-text {
121-
margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
122-
margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
89+
margin-block-start: max(0px, calc(var(--spectrum-alert-banner-top-to-text) - var(--spectrum-spacing-200)));
90+
margin-block-end: max(0px, calc(var(--spectrum-alert-banner-bottom-to-text) - var(--spectrum-spacing-200)));
12391
}
12492

12593
@media (forced-colors: active) {
12694
.spectrum-AlertBanner {
127-
--highcontrast-alert-banner-border-color: CanvasText;
128-
--highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
95+
border-color: CanvasText;
96+
border-style: solid;
97+
border-width: var(--spectrum-border-width-100);
12998
}
13099
}

‎components/alertbanner/stories/template.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,7 @@ export const Template = ({
7070
)}
7171
</div>
7272
${when(showCloseButton, () => html`
73-
<div class=${classMap({
74-
[`${rootClass}-end`]: true
75-
})}>
73+
<div>
7674
${CloseButton({
7775
size: "m",
7876
staticColor: "white",

‎components/alertbanner/tokens.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"alert-banner-close-button-spacing": {
3+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
4+
"sets": {
5+
"desktop": {
6+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
7+
"value": "{spacing-100}"
8+
},
9+
"mobile": {
10+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
11+
"value": "{spacing-200}"
12+
}
13+
}
14+
},
15+
"alert-banner-edge-to-button": {
16+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
17+
"sets": {
18+
"desktop": {
19+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
20+
"value": "{spacing-100}"
21+
},
22+
"mobile": {
23+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
24+
"value": "{spacing-200}"
25+
}
26+
}
27+
},
28+
"alert-banner-edge-to-divider": {
29+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
30+
"sets": {
31+
"desktop": {
32+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
33+
"value": "{spacing-100}"
34+
},
35+
"mobile": {
36+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
37+
"value": "{spacing-200}"
38+
}
39+
}
40+
},
41+
"alert-banner-text-to-button-vertical": {
42+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
43+
"sets": {
44+
"desktop": {
45+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
46+
"value": "{spacing-100}"
47+
},
48+
"mobile": {
49+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
50+
"value": "{spacing-200}"
51+
}
52+
}
53+
}
54+
}

‎components/alertdialog/tokens.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"alert-dialog-description-to-buttons": {
3+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
4+
"sets": {
5+
"desktop": {
6+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
7+
"value": "{spacing-700}"
8+
},
9+
"mobile": {
10+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
11+
"value": "{spacing-600}"
12+
}
13+
}
14+
},
15+
"alert-dialog-padding": {
16+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
17+
"sets": {
18+
"desktop": {
19+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
20+
"value": "{spacing-500}"
21+
},
22+
"mobile": {
23+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
24+
"value": "{spacing-400}"
25+
}
26+
}
27+
}
28+
}

‎components/assetcard/tokens.json

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
{
2+
"assestcard-focus-indicator-color": {
3+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
4+
"sets": {
5+
"dark": {
6+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
7+
"value": "{blue-700}"
8+
},
9+
"light": {
10+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
11+
"value": "{blue-800}"
12+
}
13+
}
14+
},
15+
"assetcard-border-color-selected": {
16+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
17+
"sets": {
18+
"dark": {
19+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
20+
"value": "{blue-800}"
21+
},
22+
"light": {
23+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
24+
"value": "{blue-900}"
25+
}
26+
}
27+
},
28+
"assetcard-border-color-selected-down": {
29+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
30+
"sets": {
31+
"dark": {
32+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
33+
"value": "{blue-900}"
34+
},
35+
"light": {
36+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
37+
"value": "{blue-1000}"
38+
}
39+
}
40+
},
41+
"assetcard-border-color-selected-hover": {
42+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
43+
"sets": {
44+
"dark": {
45+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
46+
"value": "{blue-800}"
47+
},
48+
"light": {
49+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
50+
"value": "{blue-900}"
51+
}
52+
}
53+
},
54+
"assetcard-content-font-size": {
55+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
56+
"sets": {
57+
"desktop": {
58+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
59+
"value": "{body-size-s}"
60+
},
61+
"mobile": {
62+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
63+
"value": "{body-size-xs}"
64+
}
65+
}
66+
},
67+
"assetcard-focus-ring-border-radius": {
68+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
69+
"sets": {
70+
"desktop": {
71+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
72+
"value": "8px"
73+
},
74+
"mobile": {
75+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
76+
"value": "9px"
77+
}
78+
}
79+
},
80+
"assetcard-header-content-font-size": {
81+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
82+
"sets": {
83+
"desktop": {
84+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
85+
"value": "{heading-size-xs}"
86+
},
87+
"mobile": {
88+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
89+
"value": "{heading-size-xxs}"
90+
}
91+
}
92+
},
93+
"assetcard-selectionindicator-background-color-ordered": {
94+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
95+
"sets": {
96+
"dark": {
97+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
98+
"value": "{blue-800}"
99+
},
100+
"light": {
101+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
102+
"value": "{blue-900}"
103+
}
104+
}
105+
},
106+
"assetcard-selectionindicator-margin": {
107+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
108+
"sets": {
109+
"desktop": {
110+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
111+
"value": "12px"
112+
},
113+
"mobile": {
114+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
115+
"value": "15px"
116+
}
117+
}
118+
},
119+
"assetcard-title-font-size": {
120+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json",
121+
"sets": {
122+
"desktop": {
123+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
124+
"value": "{heading-size-xs}"
125+
},
126+
"mobile": {
127+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
128+
"value": "{heading-size-xxs}"
129+
}
130+
}
131+
}
132+
}

0 commit comments

Comments
 (0)