Skip to content

Commit c94099c

Browse files
pfultonpfulton
authored
chore: s2 grays component-level migration (#2583)
* chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200
1 parent 9dea2aa commit c94099c

File tree

49 files changed

+198
-160
lines changed

Some content is hidden

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

49 files changed

+198
-160
lines changed

‎components/accordion/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ governing permissions and limitations under the License.
120120
);
121121

122122
/* Divider */
123-
--spectrum-accordion-divider-color: var(--spectrum-gray-300);
123+
--spectrum-accordion-divider-color: var(--spectrum-gray-200);
124124
--spectrum-accordion-min-block-size: max(
125125
var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)),
126126
calc(

‎components/actionbar/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ governing permissions and limitations under the License.
2626
}
2727

2828
/* colors - applied to popover */
29-
--spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
29+
--spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
3030
--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
3131

3232
/* emphasized variation colors */

‎components/actionbutton/index.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@ governing permissions and limitations under the License.
3838
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
3939
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
4040

41-
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50));
42-
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50));
43-
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50));
44-
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50));
41+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25));
42+
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25));
43+
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25));
44+
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25));
4545

4646
&.spectrum-ActionButton--emphasized {
4747
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));

‎components/actionbutton/themes/express.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ governing permissions and limitations under the License.
1212

1313
@container (--system: express) {
1414
.spectrum-ActionButton {
15-
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-200);
16-
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
15+
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-100);
16+
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
1717
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
18-
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
18+
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
1919

2020
--spectrum-actionbutton-border-color-default: transparent;
2121
--spectrum-actionbutton-border-color-hover: transparent;
@@ -27,9 +27,9 @@ governing permissions and limitations under the License.
2727

2828
&.spectrum-ActionButton--quiet {
2929
--spectrum-actionbutton-background-color-default: transparent;
30-
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
30+
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
3131
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
32-
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
32+
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
3333
}
3434

3535
&.spectrum-ActionButton--staticBlack,

‎components/actionbutton/themes/spectrum.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ governing permissions and limitations under the License.
1212

1313
@container (--system: spectrum) {
1414
.spectrum-ActionButton {
15-
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-75);
16-
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
17-
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
18-
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
15+
--spectrum-actionbutton-background-color-default: var(--spectrum-gray-50);
16+
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
17+
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
18+
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
1919

2020
--spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
2121
--spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
@@ -28,9 +28,9 @@ governing permissions and limitations under the License.
2828

2929
&.spectrum-ActionButton--quiet {
3030
--spectrum-actionbutton-background-color-default: transparent;
31-
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
32-
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
33-
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
31+
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
32+
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
33+
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
3434

3535
--spectrum-actionbutton-border-color-default: transparent;
3636
--spectrum-actionbutton-border-color-hover: transparent;

‎components/asset/index.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ governing permissions and limitations under the License.
4242
--highcontrast-asset-folder-background-color,
4343
var(
4444
--mod-asset-folder-background-color,
45-
var(--spectrum-gray-300)
45+
var(--spectrum-gray-200)
4646
)
4747
);
4848
}
@@ -52,7 +52,7 @@ governing permissions and limitations under the License.
5252
--highcontrast-asset-file-background-color,
5353
var(
5454
--mod-asset-file-background-color,
55-
var(--spectrum-gray-50)
55+
var(--spectrum-gray-25)
5656
)
5757
);
5858
}

‎components/assetcard/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ governing permissions and limitations under the License.
1414
.spectrum-AssetCard {
1515
/* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
1616
--spectrum-assetcard-asset-size: 224px;
17-
--spectrum-assetcard-background-color: var(--spectrum-gray-200);
17+
--spectrum-assetcard-background-color: var(--spectrum-gray-100);
1818
--spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
1919
--spectrum-assetcard-asset-container-border-size: 1px;
2020
--spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);

‎components/assetlist/index.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ governing permissions and limitations under the License.
2323
--spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
2424
--spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
2525
--spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
26-
--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
27-
--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
26+
--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200);
27+
--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100);
2828

2929
/* thumbnail */
3030
--spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);

‎components/button/themes/express.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ governing permissions and limitations under the License.
1212

1313
@container (--system: express) {
1414
.spectrum-Button {
15-
--spectrum-button-background-color-default: var(--spectrum-gray-200);
16-
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
15+
--spectrum-button-background-color-default: var(--spectrum-gray-100);
16+
--spectrum-button-background-color-hover: var(--spectrum-gray-200);
1717
--spectrum-button-background-color-down: var(--spectrum-gray-400);
18-
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
18+
--spectrum-button-background-color-focus: var(--spectrum-gray-200);
1919

2020
--spectrum-button-border-color-default: transparent;
2121
--spectrum-button-border-color-hover: transparent;

‎components/button/themes/spectrum.css

+15-15
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ governing permissions and limitations under the License.
1212

1313
@container (--system: spectrum) {
1414
.spectrum-Button {
15-
--spectrum-button-background-color-default: var(--spectrum-gray-75);
16-
--spectrum-button-background-color-hover: var(--spectrum-gray-200);
17-
--spectrum-button-background-color-down: var(--spectrum-gray-300);
18-
--spectrum-button-background-color-focus: var(--spectrum-gray-200);
15+
--spectrum-button-background-color-default: var(--spectrum-gray-50);
16+
--spectrum-button-background-color-hover: var(--spectrum-gray-100);
17+
--spectrum-button-background-color-down: var(--spectrum-gray-200);
18+
--spectrum-button-background-color-focus: var(--spectrum-gray-100);
1919

2020
--spectrum-button-border-color-default: var(--spectrum-gray-400);
2121
--spectrum-button-border-color-hover: var(--spectrum-gray-500);
@@ -139,9 +139,9 @@ governing permissions and limitations under the License.
139139

140140
&.spectrum-Button--outline {
141141
--spectrum-button-background-color-default: transparent;
142-
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
142+
--spectrum-button-background-color-hover: var(--spectrum-gray-200);
143143
--spectrum-button-background-color-down: var(--spectrum-gray-400);
144-
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
144+
--spectrum-button-background-color-focus: var(--spectrum-gray-200);
145145

146146
--spectrum-button-border-color-default: var(--spectrum-gray-800);
147147
--spectrum-button-border-color-hover: var(--spectrum-gray-900);
@@ -160,10 +160,10 @@ governing permissions and limitations under the License.
160160
}
161161

162162
&.spectrum-Button--secondary {
163-
--spectrum-button-background-color-default: var(--spectrum-gray-200);
164-
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
163+
--spectrum-button-background-color-default: var(--spectrum-gray-100);
164+
--spectrum-button-background-color-hover: var(--spectrum-gray-200);
165165
--spectrum-button-background-color-down: var(--spectrum-gray-400);
166-
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
166+
--spectrum-button-background-color-focus: var(--spectrum-gray-200);
167167

168168
--spectrum-button-border-color-default: transparent;
169169
--spectrum-button-border-color-hover: transparent;
@@ -181,11 +181,11 @@ governing permissions and limitations under the License.
181181

182182
&.spectrum-Button--outline {
183183
--spectrum-button-background-color-default: transparent;
184-
--spectrum-button-background-color-hover: var(--spectrum-gray-300);
184+
--spectrum-button-background-color-hover: var(--spectrum-gray-200);
185185
--spectrum-button-background-color-down: var(--spectrum-gray-400);
186-
--spectrum-button-background-color-focus: var(--spectrum-gray-300);
186+
--spectrum-button-background-color-focus: var(--spectrum-gray-200);
187187

188-
--spectrum-button-border-color-default: var(--spectrum-gray-300);
188+
--spectrum-button-border-color-default: var(--spectrum-gray-200);
189189
--spectrum-button-border-color-hover: var(--spectrum-gray-400);
190190
--spectrum-button-border-color-down: var(--spectrum-gray-500);
191191
--spectrum-button-border-color-focus: var(--spectrum-gray-400);
@@ -203,9 +203,9 @@ governing permissions and limitations under the License.
203203

204204
&.spectrum-Button--quiet {
205205
--spectrum-button-background-color-default: transparent;
206-
--spectrum-button-background-color-hover: var(--spectrum-gray-200);
207-
--spectrum-button-background-color-down: var(--spectrum-gray-300);
208-
--spectrum-button-background-color-focus: var(--spectrum-gray-200);
206+
--spectrum-button-background-color-hover: var(--spectrum-gray-100);
207+
--spectrum-button-background-color-down: var(--spectrum-gray-200);
208+
--spectrum-button-background-color-focus: var(--spectrum-gray-100);
209209

210210
--spectrum-button-border-color-default: transparent;
211211
--spectrum-button-border-color-hover: transparent;

‎components/card/index.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ governing permissions and limitations under the License.
2323

2424
--spectrum-card-border-width: var(--spectrum-border-width-100);
2525
--spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
26-
--spectrum-card-border-color: var(--spectrum-gray-200);
27-
--spectrum-card-border-color-hover: var(--spectrum-gray-300);
26+
--spectrum-card-border-color: var(--spectrum-gray-100);
27+
--spectrum-card-border-color-hover: var(--spectrum-gray-200);
2828
--spectrum-card-border-color-selected: var(--spectrum-blue-700);
2929

30-
--spectrum-card-divider-color: var(--spectrum-gray-300);
30+
--spectrum-card-divider-color: var(--spectrum-gray-200);
3131

3232
/* Typography */
3333
--spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack);
@@ -106,7 +106,7 @@ governing permissions and limitations under the License.
106106
);
107107
--spectrum-card-background-color-hover: var(
108108
--spectrum-card-background-color-hover-quiet,
109-
var(--spectrum-gray-300)
109+
var(--spectrum-gray-200)
110110
);
111111
}
112112

‎components/checkbox/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ governing permissions and limitations under the License.
2828

2929
--spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color);
3030
--spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color);
31-
--spectrum-checkbox-checkmark-color: var(--spectrum-gray-75);
31+
--spectrum-checkbox-checkmark-color: var(--spectrum-gray-50);
3232

3333
--spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900);
3434
--spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000);

‎components/clearbutton/themes/express.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ governing permissions and limitations under the License.
1111

1212
@container (--system: express) {
1313
.spectrum-ClearButton {
14-
--spectrum-clear-button-background-color: var(--spectrum-gray-200);
15-
--spectrum-clear-button-background-color-hover: var(--spectrum-gray-300);
14+
--spectrum-clear-button-background-color: var(--spectrum-gray-100);
15+
--spectrum-clear-button-background-color-hover: var(--spectrum-gray-200);
1616
--spectrum-clear-button-background-color-down: var(--spectrum-gray-400);
17-
--spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300);
17+
--spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-200);
1818
}
1919
}

‎components/closebutton/themes/express.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
Unless required by applicable law or agreed to in writing, software distributed under
7+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
8+
OF ANY KIND, either express or implied. See the License for the specific language
9+
governing permissions and limitations under the License.
10+
*/
11+
12+
@container (--system: express) {
13+
.spectrum-CloseButton {
14+
--spectrum-closebutton-background-color-default: transparent;
15+
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-200);
16+
--spectrum-closebutton-background-color-down: var(--spectrum-gray-400);
17+
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-200);
18+
}
19+
}

‎components/closebutton/themes/spectrum.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
Unless required by applicable law or agreed to in writing, software distributed under
7+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
8+
OF ANY KIND, either express or implied. See the License for the specific language
9+
governing permissions and limitations under the License.
10+
*/
11+
12+
@container (--system: spectrum) {
13+
.spectrum-CloseButton {
14+
--spectrum-closebutton-background-color-default: transparent;
15+
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
16+
--spectrum-closebutton-background-color-down: var(--spectrum-gray-200);
17+
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
18+
}
19+
}

‎components/dial/index.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Dial {
14-
--spectrum-dial-background-color-default: var(--spectrum-gray-100);
14+
--spectrum-dial-background-color-default: var(--spectrum-gray-75);
1515

16-
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
17-
--spectrum-dial-border-color-disabled: var(--spectrum-gray-300);
16+
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200);
17+
--spectrum-dial-border-color-disabled: var(--spectrum-gray-200);
1818

1919
--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
2020
--spectrum-dial-border-color: var(--spectrum-gray-700);
@@ -24,8 +24,8 @@ governing permissions and limitations under the License.
2424
--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
2525
--spectrum-dial-border-color-hover: var(--spectrum-gray-800);
2626

27-
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
28-
--spectrum-dial-border-color-key-focus: var(--spectrum-gray-50);
27+
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25);
28+
--spectrum-dial-border-color-key-focus: var(--spectrum-gray-25);
2929

3030
--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
3131
--spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700);

‎components/divider/index.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ governing permissions and limitations under the License.
1818
--spectrum-divider-background-color: var(--spectrum-divider-background-color-medium);
1919

2020
/* background colors */
21-
--spectrum-divider-background-color-small: var(--spectrum-gray-300);
22-
--spectrum-divider-background-color-medium: var(--spectrum-gray-300);
21+
--spectrum-divider-background-color-small: var(--spectrum-gray-200);
22+
--spectrum-divider-background-color-medium: var(--spectrum-gray-200);
2323
--spectrum-divider-background-color-large: var(--spectrum-gray-800);
2424

2525
/* static white background colors */

‎components/dropzone/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ governing permissions and limitations under the License.
1717

1818
--spectrum-drop-zone-border-width: var(--spectrum-border-width-200);
1919
--spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100);
20-
--spectrum-drop-zone-border-color: var(--spectrum-gray-300);
20+
--spectrum-drop-zone-border-color: var(--spectrum-gray-200);
2121

2222
--spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack);
2323
--spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);

‎components/infieldbutton/themes/express.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ governing permissions and limitations under the License.
2121
--spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75);
2222
--spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75);
2323

24-
--spectrum-infield-button-background-color: var(--spectrum-gray-200);
25-
--spectrum-infield-button-background-color-hover: var(--spectrum-gray-300);
24+
--spectrum-infield-button-background-color: var(--spectrum-gray-100);
25+
--spectrum-infield-button-background-color-hover: var(--spectrum-gray-200);
2626
--spectrum-infield-button-background-color-down: var(--spectrum-gray-400);
27-
--spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300);
27+
--spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200);
2828
}
2929
}

0 commit comments

Comments
 (0)