Skip to content

Commit 97b10b5

Browse files
author
Melissa Thompson
authored
fix(stepper): express theme button border (#2272)
1 parent a987407 commit 97b10b5

File tree

4 files changed

+68
-12
lines changed

4 files changed

+68
-12
lines changed

‎components/stepper/index.css‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ governing permissions and limitations under the License.
3535
--spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100);
3636

3737
/*** MODS for sub components ***/
38-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
38+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color)));
3939
--mod-infield-button-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
4040
--mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
4141

@@ -71,7 +71,22 @@ governing permissions and limitations under the License.
7171
--mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus));
7272
--mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover));
7373
--mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus));
74-
--mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default));
74+
--mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid));
75+
76+
&.is-focused,
77+
&:focus {
78+
--mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid));
79+
80+
&:hover {
81+
--mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid));
82+
}
83+
}
84+
85+
&.is-keyboardFocused,
86+
&:focus-visible {
87+
--mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid));
88+
}
89+
7590
}
7691
}
7792

@@ -128,7 +143,7 @@ governing permissions and limitations under the License.
128143

129144
/*** Hover ***/
130145
&:hover:not(.is-disabled) {
131-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
146+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover)));
132147

133148
.spectrum-Stepper-input,
134149
.spectrum-Stepper-buttons {
@@ -140,7 +155,7 @@ governing permissions and limitations under the License.
140155
&.is-focused,
141156
&:focus {
142157
--mod-infield-button-background-color: var(--highcontrast-stepper-button-background-color-focus, var(--mod-stepper-button-background-color-focus, var(--spectrum-stepper-button-background-color-focus)));
143-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
158+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
144159

145160
.spectrum-Stepper-input {
146161
outline: none;
@@ -151,20 +166,20 @@ governing permissions and limitations under the License.
151166
}
152167

153168
&:hover {
154-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
155-
169+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover)));
170+
156171
.spectrum-Stepper-input,
157172
.spectrum-Stepper-buttons {
158173
border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
159174
}
160-
}
175+
}
161176
}
162177

163178
/*** Keyboard Focused ***/
164179
&.is-keyboardFocused,
165180
&:focus-visible {
166181
--mod-infield-button-background-color: var(--highcontrast-stepper-button-background-color-keyboard-focus, var(--mod-stepper-button-background-color-keyboard-focus, var(--spectrum-stepper-button-background-color-keyboard-focus)));
167-
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
182+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
168183

169184
/* keyboard focus indicator is visible */
170185
outline: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)) solid;
@@ -174,7 +189,7 @@ governing permissions and limitations under the License.
174189
.spectrum-Stepper-input {
175190
outline: none;
176191
}
177-
192+
178193
.spectrum-Stepper-input,
179194
.spectrum-Stepper-buttons {
180195
border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
@@ -185,6 +200,7 @@ governing permissions and limitations under the License.
185200

186201
/*** Quiet ***/
187202
.spectrum-Stepper.spectrum-Stepper--quiet {
203+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
188204
/* quiet corners are not rounded */
189205
border-start-start-radius: 0;
190206
border-start-end-radius: 0;
@@ -229,21 +245,38 @@ governing permissions and limitations under the License.
229245
}
230246

231247
/* quiet hover */
232-
&:hover {
233-
.spectrum-Stepper-buttons{
248+
&:hover:not(.is-disabled) {
249+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
250+
251+
.spectrum-Stepper-buttons {
234252
background-color: transparent;
235253
}
236254
}
237255

256+
/* quiet focus */
257+
&.is-focused,
258+
&:focus {
259+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus)));
260+
261+
&:hover {
262+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
263+
}
264+
}
265+
238266
/* quiet keyboard focused */
239267
&.is-keyboardFocused {
268+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
240269

241270
outline: none;
242271

243272
/* quiet focus indicator only on bottom border */
244273
&::after {
245274
background-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color)));
246275
}
276+
277+
&:hover {
278+
--mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
279+
}
247280
}
248281
}
249282

‎components/stepper/metadata/mods.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
| `--mod-stepper-button-width` |
2020
| `--mod-stepper-button-width-quiet` |
2121
| `--mod-stepper-buttons-background-color` |
22+
| `--mod-stepper-buttons-border-color` |
23+
| `--mod-stepper-buttons-border-color-focus` |
24+
| `--mod-stepper-buttons-border-color-focus-hover` |
25+
| `--mod-stepper-buttons-border-color-hover` |
26+
| `--mod-stepper-buttons-border-color-keyboard-focus` |
2227
| `--mod-stepper-buttons-border-style` |
2328
| `--mod-stepper-buttons-border-width` |
2429
| `--mod-stepper-focus-indicator-color` |

‎components/stepper/themes/express.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ governing permissions and limitations under the License.
1616

1717
--spectrum-stepper-buttons-border-style: solid;
1818
--spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200);
19+
--spectrum-stepper-buttons-border-color: transparent;
1920
--spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
21+
--spectrum-stepper-buttons-border-color-hover: transparent;
22+
--spectrum-stepper-buttons-border-color-focus: transparent;
23+
--spectrum-stepper-buttons-border-color-keyboard-focus: transparent;
2024

2125
--spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
2226

@@ -26,6 +30,11 @@ governing permissions and limitations under the License.
2630
--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900);
2731
--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
2832

33+
--spectrum-stepper-border-color-invalid: transparent;
34+
--spectrum-stepper-border-color-focus-invalid: transparent;
35+
--spectrum-stepper-border-color-focus-hover-invalid: transparent;
36+
--spectrum-stepper-border-color-keyboard-focus-invalid: transparent;
37+
2938
--spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400);
3039
--spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300);
3140

‎components/stepper/themes/spectrum.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,22 @@ governing permissions and limitations under the License.
1616

1717
--spectrum-stepper-buttons-border-style: none;
1818
--spectrum-stepper-buttons-border-width: 0;
19+
--spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
1920
--spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
21+
--spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
22+
--spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
23+
--spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);
2024

2125
--spectrum-stepper-border-color: var(--spectrum-gray-500);
2226
--spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
2327
--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
2428
--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
25-
--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
29+
--spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
30+
31+
--spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
32+
--spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus);
33+
--spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover);
34+
--spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus);
2635

2736
--spectrum-stepper-button-border-radius-reset: 0px;
2837

0 commit comments

Comments
 (0)