Skip to content

Commit ec45132

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

Some content is hidden

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

71 files changed

+4400
-1274
lines changed

‎.github/workflows/development.yml

+2
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ jobs:
129129
styles_modified_files: ${{ needs.changed_files.outputs.styles_modified_files }}
130130
eslint_added_files: ${{ needs.changed_files.outputs.eslint_added_files }}
131131
eslint_modified_files: ${{ needs.changed_files.outputs.eslint_modified_files }}
132+
mdlint_added_files: ${{ needs.changed_files.outputs.mdlint_added_files }}
133+
mdlint_modified_files: ${{ needs.changed_files.outputs.mdlint_modified_files }}
132134
secrets: inherit
133135

134136
# -------------------------------------------------------------

‎.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/dist/metadata.json

+4-53
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,23 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-AlertBanner",
5-
".spectrum-AlertBanner--info",
6-
".spectrum-AlertBanner--negative",
75
".spectrum-AlertBanner-body",
86
".spectrum-AlertBanner-content",
97
".spectrum-AlertBanner-icon",
108
".spectrum-AlertBanner-text",
119
".spectrum-AlertBanner.is-open",
10+
".spectrum-AlertBanner.spectrum-AlertBanner--info",
11+
".spectrum-AlertBanner.spectrum-AlertBanner--negative",
1212
".spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body",
1313
".spectrum-AlertBanner:lang(ja)",
1414
".spectrum-AlertBanner:lang(ko)",
1515
".spectrum-AlertBanner:lang(zh)"
1616
],
17-
"modifiers": [
18-
"--mod-alert-banner-background",
19-
"--mod-alert-banner-block-edge-to-button",
20-
"--mod-alert-banner-bottom-to-text",
21-
"--mod-alert-banner-close-button-to-content",
22-
"--mod-alert-banner-close-button-to-inline-end",
23-
"--mod-alert-banner-font-color",
24-
"--mod-alert-banner-font-family",
25-
"--mod-alert-banner-font-size",
26-
"--mod-alert-banner-icon-size",
27-
"--mod-alert-banner-icon-to-text",
28-
"--mod-alert-banner-informative-background",
29-
"--mod-alert-banner-inline-end-to-content",
30-
"--mod-alert-banner-inline-size",
31-
"--mod-alert-banner-inline-start-to-content",
32-
"--mod-alert-banner-line-height",
33-
"--mod-alert-banner-max-inline-size",
34-
"--mod-alert-banner-min-height",
35-
"--mod-alert-banner-negative-background",
36-
"--mod-alert-banner-neutral-background",
37-
"--mod-alert-banner-text-margin-block-end",
38-
"--mod-alert-banner-text-margin-block-start",
39-
"--mod-alert-banner-text-to-button-horizontal",
40-
"--mod-alert-banner-text-to-button-vertical",
41-
"--mod-alert-banner-top-to-close-button",
42-
"--mod-alert-banner-top-to-icon",
43-
"--mod-alert-banner-top-to-text"
44-
],
17+
"modifiers": [],
4518
"component": [
46-
"--spectrum-alert-banner-background",
47-
"--spectrum-alert-banner-block-edge-to-button",
4819
"--spectrum-alert-banner-bottom-to-text",
4920
"--spectrum-alert-banner-close-button-spacing",
50-
"--spectrum-alert-banner-close-button-to-content",
51-
"--spectrum-alert-banner-close-button-to-inline-end",
52-
"--spectrum-alert-banner-font-color",
53-
"--spectrum-alert-banner-font-family",
54-
"--spectrum-alert-banner-font-size",
55-
"--spectrum-alert-banner-icon-size",
56-
"--spectrum-alert-banner-icon-to-text",
57-
"--spectrum-alert-banner-inline-end-to-content",
58-
"--spectrum-alert-banner-inline-size",
59-
"--spectrum-alert-banner-inline-start-to-content",
60-
"--spectrum-alert-banner-line-height",
61-
"--spectrum-alert-banner-max-inline-size",
62-
"--spectrum-alert-banner-min-height",
6321
"--spectrum-alert-banner-minimum-height",
64-
"--spectrum-alert-banner-neutral-background",
65-
"--spectrum-alert-banner-text-margin-block-end",
66-
"--spectrum-alert-banner-text-margin-block-start",
67-
"--spectrum-alert-banner-text-to-button-horizontal",
6822
"--spectrum-alert-banner-text-to-button-vertical",
6923
"--spectrum-alert-banner-top-to-text",
7024
"--spectrum-alert-banner-top-to-workflow-icon",
@@ -91,8 +45,5 @@
9145
"--mod-closebutton-margin-top",
9246
"--mod-icon-size"
9347
],
94-
"high-contrast": [
95-
"--highcontrast-alert-banner-border-color",
96-
"--highcontrast-alert-banner-border-width"
97-
]
48+
"high-contrast": []
9849
}

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

0 commit comments

Comments
 (0)