Skip to content

Commit c6d42f5

Browse files
pfultonpfulton
committed
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 a7aac41 commit c6d42f5

File tree

48 files changed

+191
-153
lines changed

Some content is hidden

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

48 files changed

+191
-153
lines changed

‎components/accordion/index.css‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 4 additions & 4 deletions
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‎

Lines changed: 5 additions & 5 deletions
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‎

Lines changed: 7 additions & 7 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 3 additions & 3 deletions
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‎

Lines changed: 15 additions & 15 deletions
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;

0 commit comments

Comments
 (0)