Skip to content

Commit e981892

Browse files
pfultonpfulton
committed
chore(dial): high-contrast fixes
1 parent 2b53997 commit e981892

File tree

2 files changed

+103
-55
lines changed

2 files changed

+103
-55
lines changed

‎components/dial/index.css

Lines changed: 71 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Dial {
14+
--spectrum-dial-background-color-default: var(--spectrum-gray-100);
15+
1416
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
1517
--spectrum-dial-border-color-disabled: var(--spectrum-gray-300);
1618

@@ -70,9 +72,9 @@ governing permissions and limitations under the License.
7072
display: inline-flex;
7173
flex-direction: column;
7274
block-size: auto;
73-
min-inline-size: var(--spectrum-dial-min-height);
74-
min-block-size: var(--spectrum-dial-min-height);
75-
inline-size: var(--spectrum-dial-container-width);
75+
min-inline-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
76+
min-block-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
77+
inline-size: var(--mod-dial-container-width, var(--spectrum-dial-container-width));
7678
}
7779

7880
.spectrum-Dial-label {
@@ -92,14 +94,14 @@ governing permissions and limitations under the License.
9294
}
9395

9496
.spectrum-Dial-labelContainer {
95-
color: var(--spectrum-dial-label-text-color);
97+
color: var(--highcontrast-dial-label-text-color, var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color)));
9698
display: flex;
9799
position: relative;
98100
inline-size: auto;
99-
padding-block-start: var(--spectrum-fieldlabel-m-padding-top);
100-
font-size: var(--spectrum-dial-label-text-size);
101-
line-height: var(--spectrum-dial-label-line-height);
102-
margin-block-end: var(--spectrum-dial-label-gap-y);
101+
padding-block-start: var(--mod-fieldlabel-m-padding-top, var(--spectrum-fieldlabel-m-padding-top));
102+
font-size: var(--mod-dial-label-text-size, var(--spectrum-dial-label-text-size));
103+
line-height: var(--mod-dial-label-line-height, var(--spectrum-dial-label-line-height));
104+
margin-block-end: var(--mod-dial-label-gap-y, var(--spectrum-dial-label-gap-y));
103105
}
104106

105107
.spectrum-Dial-controls {
@@ -111,60 +113,62 @@ governing permissions and limitations under the License.
111113

112114
vertical-align: top;
113115

114-
inline-size: var(--spectrum-dial-width);
115-
block-size: var(--spectrum-dial-height);
116-
min-block-size: var(--spectrum-dial-controls-min-height);
117-
margin-inline-start: var(--spectrum-dial-controls-margin);
116+
inline-size: var(--mod-dial-width, var(--spectrum-dial-width));
117+
block-size: var(--mod-dial-height, var(--spectrum-dial-height));
118+
min-block-size: var(--mod-dial-controls-min-height, var(--spectrum-dial-controls-min-height));
119+
margin-inline-start: var(--mod-dial-controls-margin, var(--spectrum-dial-controls-margin));
118120

119-
border-radius: var(--spectrum-dial-border-radius);
121+
border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
120122
margin: 0;
121123

122124
outline: none;
123125

124126
&::before,
125127
&::after {
126-
background-color: var(--spectrum-dial-min-max-tick-color);
128+
background-color: var(--highcontrast-dial-min-max-tick-color, var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color)));
127129
content: "";
128-
inline-size: calc(var(--spectrum-dial-handle-marker-height) * 2);
129-
block-size: var(--spectrum-dial-handle-marker-height);
130-
border-radius: var(--spectrum-dial-handle-marker-border-radius);
130+
inline-size: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * 2);
131+
block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
132+
border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
131133
position: absolute;
132134
inset-block-end: 0;
133135
}
134136
&::before {
135137
inset-inline-start: auto;
136-
inset-inline-end: calc(var(--spectrum-dial-handle-marker-height) * -1);
137-
transform: rotate(var(--spectrum-dial-min-max-tick-angles));
138+
inset-inline-end: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
139+
transform: rotate(var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)));
138140
}
139141
&::after {
140-
inset-inline-start: calc(var(--spectrum-dial-handle-marker-height) * -1);
141-
transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles)));
142+
inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
143+
transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
142144
}
143145
}
144146

145147
.spectrum-Dial-handle {
146148
box-shadow: none;
147-
border-color: var(--spectrum-dial-border-color);
149+
border-color: var(--highcontrast-dial-border-color, var(--mod-dial-border-color, var(--spectrum-dial-border-color)));
148150
position: absolute;
149151
z-index: 2;
150152
display: inline-block;
151153
box-sizing: border-box;
152154

153-
margin-block: calc(var(--spectrum-global-dimension-size-200) / -2) 0;
154-
margin-inline: calc(var(--spectrum-global-dimension-size-200) / -2) 0;
155+
/* large 20px, med 16px */
156+
157+
margin-block: calc(var(--mod-dial-handle-block-margin, var(--spectrum-dial-handle-block-margin)) / -2) 0;
158+
margin-inline: calc(var(--mod-dial-handle-inline-margin, var(--spectrum-dial-handle-inline-margin)) / -2) 0;
155159

156160
outline: none;
157161

158-
inline-size: var(--spectrum-dial-handle-size);
159-
block-size: var(--spectrum-dial-handle-size);
160-
border-width: var(--spectrum-dial-handle-border-size);
162+
inline-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
163+
block-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
164+
border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
161165
border-style: solid;
162-
inset-block-start: var(--spectrum-dial-handle-position);
163-
inset-inline-start: var(--spectrum-dial-handle-position);
164-
inset-inline-end: var(--spectrum-dial-handle-position);
165-
inset-block-end: var(--spectrum-dial-handle-position);
166-
border-radius: var(--spectrum-dial-border-radius);
167-
transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles)));
166+
inset-block-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
167+
inset-inline-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
168+
inset-inline-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
169+
inset-block-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
170+
border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
171+
transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
168172
cursor: grab;
169173

170174
&::before {
@@ -175,46 +179,45 @@ governing permissions and limitations under the License.
175179
content: "";
176180
position: absolute;
177181
inset-block-start: 50%;
178-
inset-inline-start: calc(var(--spectrum-dial-handle-marker-height) * -1);
179-
inline-size: var(--spectrum-dial-handle-marker-width);
180-
block-size: var(--spectrum-dial-handle-marker-height);
181-
border-radius: var(--spectrum-dial-handle-marker-border-radius);
182+
inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
183+
inline-size: var(--mod-dial-handle-marker-width, var(--spectrum-dial-handle-marker-width));
184+
block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
185+
border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
182186
transform: translateY(-50%);
183-
background-color: var(--spectrum-dial-handle-marker-color);
187+
background-color: var(--highcontrast-dial-handle-marker-color, var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color)));
184188
}
185189

186190
&:active,
187191
&.is-focused,
188192
&.is-dragged {
189-
border-width: var(--spectrum-dial-handle-border-size);
193+
border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
190194
cursor: ns-resize;
191195
cursor: grabbing;
192196
}
193197

194198
&:hover {
195-
border-color: var(--spectrum-dial-border-color-hover);
199+
border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
196200
&::after {
197-
background-color: var(--spectrum-dial-handle-marker-color-hover);
201+
background-color: var(--highcontrast-dial-handle-marker-color-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover)));
198202
}
199203
}
200204

201205
&.is-focused {
202-
background-color: var(--spectrum-dial-handle-marker-color-key-focus);
203-
204-
border-color: var(--spectrum-dial-handle-marker-color-key-focus);
206+
background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
207+
border-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
205208

206209
&::after {
207-
background-color: var(--spectrum-dial-handle-marker-color-key-focus);
210+
background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
208211
}
209212
}
210213

211214
&:active,
212215
&.is-dragged {
213-
background-color: var(--spectrum-dial-border-color-hover);
214-
border-color: var(--spectrum-dial-border-color-hover);
216+
background-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
217+
border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
215218

216219
&::after {
217-
background-color: var(--spectrum-dial-handle-marker-color-key-focus);
220+
background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
218221
}
219222
}
220223
}
@@ -244,27 +247,27 @@ governing permissions and limitations under the License.
244247
cursor: default;
245248

246249
.spectrum-Dial-labelContainer {
247-
color: var(--spectrum-dial-label-text-color-disabled);
250+
color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
248251
}
249252
.spectrum-Dial-controls {
250253
&::after,
251254
&::before {
252-
background-color: var(--spectrum-dial-handle-border-color-disabled);
255+
background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
253256
}
254257
}
255258
.spectrum-Dial-handle {
256-
border-color: var(--spectrum-dial-handle-border-color-disabled);
257-
background: var(--spectrum-alias-background-color-default);
259+
border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
260+
background: var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default)));
258261

259262
&:hover,
260263
&:active {
261-
border-color: var(--spectrum-dial-handle-border-color-disabled);
262-
background: var(--spectrum-dial-handle-border-color-disabled);
264+
border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
265+
background: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
263266
}
264267

265268
&::after,
266269
&::before {
267-
background-color: var(--spectrum-dial-handle-border-color-disabled);
270+
background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
268271
}
269272
}
270273
}
@@ -287,3 +290,16 @@ governing permissions and limitations under the License.
287290
}
288291
}
289292
}
293+
294+
@media (forced-colors: active) {
295+
.spectrum-Dial {
296+
--highcontrast-dial-min-max-tick-color: Highlight;
297+
--highcontrast-dial-border-color: Highlight;
298+
--highcontrast-dial-handle-marker-color: Highlight;
299+
--highcontrast-dial-border-color-hover: Highlight;
300+
--highcontrast-dial-handle-marker-color-hover: Highlight;
301+
--highcontrast-dial-handle-marker-color-key-focus: HighlightText;
302+
--highcontrast-dial-label-text-color-disabled: GrayText;
303+
--highcontrast-dial-handle-border-color-disabled: GrayText;
304+
}
305+
}

‎components/dial/metadata/mods.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
| Modifiable Custom Properties |
2+
| ------------------------------------------ |
3+
| `--mod-dial-background-color-default` |
4+
| `--mod-dial-border-color` |
5+
| `--mod-dial-border-color-hover` |
6+
| `--mod-dial-border-radius` |
7+
| `--mod-dial-container-width` |
8+
| `--mod-dial-controls-margin` |
9+
| `--mod-dial-controls-min-height` |
10+
| `--mod-dial-handle-block-margin` |
11+
| `--mod-dial-handle-border-color-disabled` |
12+
| `--mod-dial-handle-border-size` |
13+
| `--mod-dial-handle-inline-margin` |
14+
| `--mod-dial-handle-marker-border-radius` |
15+
| `--mod-dial-handle-marker-color` |
16+
| `--mod-dial-handle-marker-color-hover` |
17+
| `--mod-dial-handle-marker-color-key-focus` |
18+
| `--mod-dial-handle-marker-height` |
19+
| `--mod-dial-handle-marker-width` |
20+
| `--mod-dial-handle-position` |
21+
| `--mod-dial-handle-size` |
22+
| `--mod-dial-height` |
23+
| `--mod-dial-label-gap-y` |
24+
| `--mod-dial-label-line-height` |
25+
| `--mod-dial-label-text-color` |
26+
| `--mod-dial-label-text-color-disabled` |
27+
| `--mod-dial-label-text-size` |
28+
| `--mod-dial-min-height` |
29+
| `--mod-dial-min-max-tick-angles` |
30+
| `--mod-dial-min-max-tick-color` |
31+
| `--mod-dial-width` |
32+
| `--mod-fieldlabel-m-padding-top` |

0 commit comments

Comments
 (0)