Skip to content

Commit f685fd6

Browse files
pfultonpfulton
committed
feat(dial): replace vars with new values
1 parent 1046cce commit f685fd6

File tree

4 files changed

+321
-23
lines changed

4 files changed

+321
-23
lines changed

‎components/dial/index.css

Lines changed: 288 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,44 +12,310 @@ governing permissions and limitations under the License.
1212

1313
.spectrum--medium {
1414
--spectrum-dial-handle-position: 8px;
15-
--spectrum-dial-controls-margin: 16px;
15+
--spectrum-dial-controls-margin: calc(16px / 2);
16+
17+
--spectrum-dial-border-radius: 16px;
18+
--spectrum-dial-label-gap-y: 5px;
1619
}
1720

1821
.spectrum--large {
1922
--spectrum-dial-handle-position: 10px;
20-
--spectrum-dial-controls-margin: 20px;
23+
--spectrum-dial-controls-margin: calc(20px / 2);
24+
25+
--spectrum-dial-border-radius: 20px;
26+
--spectrum-dial-label-gap-y: 6px;
27+
}
28+
29+
.spectrum-Dial--small {
30+
--spectrum-dial-width: 24px;
31+
--spectrum-dial-height: 24px;
2132
}
2233

2334
.spectrum-Dial {
24-
--spectrum-dial-label-content-color-default: var(--spectrum-gray-700);
25-
--spectrum-dial-label-content-color-disabled: var(--spectrum-gray-700);
35+
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
36+
--spectrum-dial-border-color-disabled: var(--spectrum-gray-300);
2637

27-
--spectrum-dial-handle-border-color-default: var(--spectrum-gray-700);
28-
--spectrum-dial-handle-border-color-hover: ;
29-
--spectrum-dial-handle-border-color-focus: ;
30-
--spectrum-dial-handle-border-color-down: ;
31-
--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
38+
--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
39+
--spectrum-dial-border-color: var(--spectrum-gray-700);
3240

33-
--spectrum-dial-handle-marker-color-default: var(--spectrum-gray-700);
34-
--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
35-
--spectrum-dial-handle-marker-color-focus: var(--spectrum-gray-50);
3641
--spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800);
37-
--spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300);
42+
--spectrum-dial-border-color-down: var(--spectrum-gray-800);
43+
--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
44+
--spectrum-dial-border-color-hover: var(--spectrum-gray-800);
3845

39-
--spectrum-dial-label-gap-y: 5px; /* previous: --spectrum-global-dimension-size-65 (5px) */
40-
--spectrum-dial-label-font-size: var(--spectrum-font-size-75); /* previous: --spectrum-body-xs-text-size */
41-
--spectrum-dial-label-line-height: var(--spectrum-line-height-200); /* previous: --spectrum-global-font-line-height-medium (1.5); */
46+
--spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50);
47+
--spectrum-dial-border-color-key-focus: var(--spectrum-gray-50);
4248

43-
--spectrum-dial-handle-size: 100%;
44-
--spectrum-dial-handle-border-size: 2px; /* previous: --spectrum-global-dimension-static-size-25 */
45-
--spectrum-dial-handle-min-height: 0;
49+
--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);
50+
--spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700);
4651

52+
--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);
53+
54+
--spectrum-dial-label-text-color: var(--spectrum-gray-700);
55+
--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
56+
--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);
57+
58+
--spectrum-dial-container-width: 48px;
59+
60+
--spectrum-dial-handle-marker-width: 12px;
61+
--spectrum-dial-handle-marker-height: 2px;
62+
63+
--spectrum-dial-handle-marker-border-radius: 1px;
64+
65+
/* --spectrum-dial-controls-margin: calc(var(--spectrum-global-dimension-size-200) / 2); */ /* medium: 16px / large: 20px */
66+
67+
--spectrum-dial-handle-size: 100%;
68+
--spectrum-dial-min-height: 0;
4769
--spectrum-dial-controls-min-height: 0;
70+
71+
--spectrum-dial-min-max-tick-angles: 45deg;
72+
--spectrum-dial-min-max-tick-angle: 45deg;
73+
74+
--spectrum-dial-width: 32px;
75+
--spectrum-dial-height: 32px;
76+
77+
/* --spectrum-dial-label-gap-y: var(--spectrum-global-dimension-size-65); */ /* medium: 5px / large: 6px */
78+
/* --spectrum-dial-handle-position: var(--spectrum-global-dimension-size-100); */ /* medium: 8px / large: 10px */
79+
80+
/* --spectrum-dial-border-radius: var(--spectrum-alias-border-radius-large); */ /* medium: 16px / large: 20px */
81+
/* --spectrum-dial-border-size: var(--spectrum-alias-border-size-thick); NOT USED */
82+
/* --spectrum-dial-margin-right: var(--spectrum-global-dimension-static-size-300); NOT USED */
83+
84+
--spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
85+
--spectrum-dial-label-text-size: var(--spectrum-font-size-75); /* medium: 12 / large: 15 ||| TODO use typography styles? */
86+
--spectrum-dial-label-line-height: var(--spectrum-line-height-200); /* 1.5 */
87+
}
88+
89+
.spectrum-Dial {
90+
position: relative;
91+
92+
/* Don't let z-index'd child elements float above other things on the page */
93+
z-index: 1;
94+
user-select: none;
95+
display: inline-flex;
96+
flex-direction: column;
97+
block-size: auto;
98+
min-inline-size: var(--spectrum-dial-min-height);
99+
min-block-size: var(--spectrum-dial-min-height);
100+
inline-size: var(--spectrum-dial-container-width);
101+
}
102+
103+
.spectrum-Dial-label {
104+
padding-inline-start: 0;
105+
flex-grow: 1;
106+
107+
&:only-child {
108+
/* Only center if we don't have a value */
109+
text-align: center;
110+
}
111+
}
112+
113+
.spectrum-Dial-value {
114+
flex-grow: 0;
115+
padding-inline-end: 0;
116+
cursor: default;
117+
}
118+
119+
.spectrum-Dial-labelContainer {
120+
color: var(--spectrum-dial-label-text-color);
121+
display: flex;
122+
position: relative;
123+
inline-size: auto;
124+
padding-block-start: var(--spectrum-fieldlabel-m-padding-top);
125+
font-size: var(--spectrum-dial-label-text-size);
126+
line-height: var(--spectrum-dial-label-line-height);
127+
margin-block-end: var(--spectrum-dial-label-gap-y);
128+
}
48129

130+
.spectrum-Dial-controls {
131+
display: inline-block;
132+
box-sizing: border-box;
133+
134+
position: relative;
135+
z-index: auto;
136+
137+
vertical-align: top;
138+
139+
inline-size: var(--spectrum-dial-width);
140+
block-size: var(--spectrum-dial-height);
141+
min-block-size: var(--spectrum-dial-controls-min-height);
142+
margin-inline-start: var(--spectrum-dial-controls-margin);
143+
144+
border-radius: var(--spectrum-dial-border-radius);
145+
position: relative;
146+
display: inline-block;
147+
margin: 0;
148+
149+
box-sizing: border-box;
150+
outline: none;
151+
152+
&::before,
153+
&::after {
154+
background-color: var(--spectrum-dial-min-max-tick-color);
155+
content: "";
156+
inline-size: calc(var(--spectrum-dial-handle-marker-height) * 2);
157+
block-size: var(--spectrum-dial-handle-marker-height);
158+
border-radius: var(--spectrum-dial-handle-marker-border-radius);
159+
position: absolute;
160+
inset-block-end: 0;
161+
}
162+
&::before {
163+
inset-inline-start: auto;
164+
inset-inline-end: calc(var(--spectrum-dial-handle-marker-height) * -1);
165+
transform: rotate(var(--spectrum-dial-min-max-tick-angles));
166+
}
167+
&::after {
168+
inset-inline-start: calc(var(--spectrum-dial-handle-marker-height) * -1);
169+
transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles)));
170+
}
49171
}
50172

51-
.spectrum-Dial-labelContainer {}
173+
.spectrum-Dial-handle {
174+
box-shadow: none;
175+
border-color: var(--spectrum-dial-small-handle-marker-color);
176+
position: absolute;
177+
inset-inline-start: 0;
178+
z-index: 2;
179+
display: inline-block;
180+
box-sizing: border-box;
181+
182+
margin-block: calc(var(--spectrum-global-dimension-size-200) / -2) 0;
183+
margin-inline: calc(var(--spectrum-global-dimension-size-200) / -2) 0;
184+
185+
outline: none;
186+
cursor: pointer;
187+
cursor: grab;
188+
189+
inline-size: var(--spectrum-dial-handle-size);
190+
block-size: var(--spectrum-dial-handle-size);
191+
border-width: var(--spectrum-dial-handle-border-size);
192+
border-style: solid;
193+
inset-block-start: var(--spectrum-dial-handle-position);
194+
inset-inline-start: var(--spectrum-dial-handle-position);
195+
inset-inline-end: var(--spectrum-dial-handle-position);
196+
inset-block-end: var(--spectrum-dial-handle-position);
197+
border-radius: var(--spectrum-dial-border-radius);
198+
transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles)));
199+
cursor: pointer;
200+
cursor: grab;
201+
202+
&::before {
203+
display: none;
204+
}
205+
206+
&::after {
207+
content: "";
208+
position: absolute;
209+
inset-block-start: 50%;
210+
inset-inline-start: calc(var(--spectrum-dial-handle-marker-height) * -1);
211+
inline-size: var(--spectrum-dial-handle-marker-width);
212+
block-size: var(--spectrum-dial-handle-marker-height);
213+
border-radius: var(--spectrum-dial-handle-marker-border-radius);
214+
transform: translateY(-50%);
215+
background-color: var(--spectrum-dial-handle-marker-color);
216+
}
217+
218+
&:active,
219+
&.is-focused,
220+
&.is-dragged {
221+
border-width: var(--spectrum-dial-handle-border-size);
222+
cursor: ns-resize;
223+
cursor: grabbing;
224+
}
225+
226+
&:hover {
227+
border-color: var(--spectrum-dial-border-color-hover);
228+
&::after {
229+
background-color: var(--spectrum-dial-handle-marker-color-hover);
230+
}
231+
}
232+
233+
&.is-focused {
234+
background-color: var(--spectrum-dial-handle-marker-color-key-focus);
235+
236+
border-color: var(--spectrum-dial-handle-marker-color-key-focus);
52237

53-
.spectrum-Dial-handle {}
238+
&::after {
239+
background-color: var(--spectrum-dial-handle-marker-color-key-focus);
240+
}
241+
}
54242

55-
.spectrum-Dial-controls {}
243+
&:active,
244+
&.is-dragged {
245+
background-color: var(--spectrum-dial-border-color-hover);
246+
border-color: var(--spectrum-dial-border-color-hover);
247+
248+
&::after {
249+
background-color: var(--spectrum-dial-handle-marker-color-key-focus);
250+
}
251+
}
252+
}
253+
254+
.spectrum-Dial-input {
255+
/* Remove the margin for input in Firefox and Safari. */
256+
margin: 0;
257+
padding: 0;
258+
position: absolute;
259+
overflow: hidden;
260+
opacity: 0.000001;
261+
cursor: default;
262+
-webkit-appearance: none;
263+
border: 0;
264+
pointer-events: none;
265+
inline-size: var(--spectrum-dial-handle-size);
266+
block-size: var(--spectrum-dial-handle-size);
267+
inset-inline-start: 0;
268+
inset-block-start: 0;
269+
&:focus {
270+
outline: none;
271+
}
272+
}
273+
274+
.spectrum-Dial {
275+
&.is-disabled {
276+
cursor: default;
277+
278+
.spectrum-Dial-labelContainer {
279+
color: var(--spectrum-dial-label-text-color-disabled);
280+
}
281+
.spectrum-Dial-controls {
282+
&::after,
283+
&::before {
284+
background-color: var(--spectrum-dial-handle-border-color-disabled);
285+
}
286+
}
287+
.spectrum-Dial-handle {
288+
border-color: var(--spectrum-dial-handle-border-color-disabled);
289+
background: var(--spectrum-alias-background-color-default);
290+
291+
&:hover,
292+
&:active {
293+
border-color: var(--spectrum-dial-handle-border-color-disabled);
294+
background: var(--spectrum-dial-handle-border-color-disabled);
295+
}
296+
297+
&::after,
298+
&::before {
299+
background-color: var(--spectrum-dial-handle-border-color-disabled);
300+
}
301+
}
302+
}
303+
}
304+
305+
.u-isGrabbing {
306+
cursor: ns-resize;
307+
cursor: -webkit-grabbing;
308+
cursor: grabbing;
309+
310+
-webkit-user-select: none;
311+
-moz-user-select: none;
312+
-ms-user-select: none;
313+
user-select: none;
314+
315+
.spectrum-Dial {
316+
.spectrum-Dial-label,
317+
.spectrum-Dial-value {
318+
cursor: inherit;
319+
}
320+
}
321+
}

‎components/dial/stories/template.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
44
import { when } from "lit/directives/when.js";
55

66
import "../index.css";
7-
import "../skin.css";
7+
// import "../skin.css";
88

99
export const Template = ({
1010
rootClass = "spectrum-Dial",

‎components/dial/themes/express.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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-Dial {
14+
15+
}
16+
}

‎components/dial/themes/spectrum.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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-Dial {
14+
15+
}
16+
}

0 commit comments

Comments
 (0)