Skip to content

Commit c5a508b

Browse files
castastrophecastastrophe
committed
feat(tokens): integrate light-dark
1 parent 2dcdc6e commit c5a508b

File tree

44 files changed

+2980
-432
lines changed

Some content is hidden

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

44 files changed

+2980
-432
lines changed

‎.github/workflows/development.yml

+2
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,8 @@ jobs:
135135
styles_modified_files: ${{ needs.changed_files.outputs.styles_modified_files }}
136136
eslint_added_files: ${{ needs.changed_files.outputs.eslint_added_files }}
137137
eslint_modified_files: ${{ needs.changed_files.outputs.eslint_modified_files }}
138+
mdlint_added_files: ${{ needs.changed_files.outputs.mdlint_added_files }}
139+
mdlint_modified_files: ${{ needs.changed_files.outputs.mdlint_modified_files }}
138140
secrets: inherit
139141

140142
# -------------------------------------------------------------

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

‎components/assetlist/tokens.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"assetlist-border-color-key-focus": {
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+
"assetlist-item-background-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/color.json",
20+
"value": "rgba(var(--spectrum-blue-800-rgb), 0.15)"
21+
},
22+
"light": {
23+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json",
24+
"value": "rgba(var(--spectrum-blue-900-rgb), 0.1)"
25+
}
26+
}
27+
},
28+
"assetlist-item-background-color-selected-hover": {
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/color.json",
33+
"value": "rgba(var(--spectrum-blue-800-rgb), 0.25)"
34+
},
35+
"light": {
36+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json",
37+
"value": "rgba(var(--spectrum-blue-900-rgb), 0.2)"
38+
}
39+
}
40+
}
41+
}

‎components/badge/tokens.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"badge-label-icon-color-primary": {
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": "{black}"
8+
},
9+
"light": {
10+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json",
11+
"value": "{white}"
12+
}
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)