Skip to content

Commit 9200791

Browse files
rise-erpeldingrise-erpelding
committed
feat(colorloupe): migrate to s2 drop-shadow tokens
1 parent 8f782a4 commit 9200791

File tree

2 files changed

+57
-55
lines changed

2 files changed

+57
-55
lines changed

‎.changeset/strange-glasses-allow.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/colorloupe": major
3+
---
4+
5+
Migrates color loupe to Spectrum 2 tokens. Color loupe now uses the new drop shadow tokens `--spectrum-drop-shadow-elevated-x`, `--spectrum-drop-shadow-elevated-y`, `--spectrum-drop-shadow-elevated-blur`, and `--spectrum-drop-shadow-elevated-color` rather than specific color loupe tokens.

‎components/colorloupe/index.css

Lines changed: 52 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,87 +9,84 @@ OF ANY KIND, either express or implied. See the License for the specific languag
99
governing permissions and limitations under the License.
1010
*/
1111
.spectrum-ColorLoupe {
12-
--spectrum-colorloupe-width: var(--spectrum-color-loupe-width);
13-
--spectrum-colorloupe-height: var(--spectrum-color-loupe-height);
12+
--spectrum-colorloupe-width: var(--spectrum-color-loupe-width);
13+
--spectrum-colorloupe-height: var(--spectrum-color-loupe-height);
1414

15-
--spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle);
16-
--spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */
15+
--spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle);
16+
--spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */
1717

18-
--spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x);
19-
--spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y);
20-
--spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur);
21-
--spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color);
18+
--spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x);
19+
--spectrum-colorloupe-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y);
20+
--spectrum-colorloupe-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
21+
--spectrum-colorloupe-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color);
2222

23-
--spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width);
24-
--spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width);
25-
--spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border);
26-
--spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border);
23+
--spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width);
24+
--spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width);
25+
--spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border);
26+
--spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border);
2727

28-
--spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
29-
--spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
28+
--spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
29+
--spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
3030
}
3131

3232
.spectrum-ColorLoupe {
33-
inline-size: var(--spectrum-colorloupe-width);
34-
block-size: var(--spectrum-colorloupe-height);
35-
36-
position: absolute;
37-
transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance)));
38-
opacity: 0;
39-
transform-origin: bottom center;
40-
inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)));
41-
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2));
42-
43-
transition: transform 100ms ease-in-out, opacity 125ms ease-in-out;
44-
pointer-events: none;
45-
46-
filter:drop-shadow(
47-
var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x))
48-
var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y))
49-
var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur))
50-
var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color))
51-
);
52-
53-
&:dir(rtl) {
54-
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px);;
55-
}
56-
57-
&.is-open {
58-
transform: translate(0, 0);
59-
opacity: 1;
60-
}
33+
inline-size: var(--spectrum-colorloupe-width);
34+
block-size: var(--spectrum-colorloupe-height);
35+
36+
position: absolute;
37+
transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance)));
38+
opacity: 0;
39+
transform-origin: bottom center;
40+
inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)));
41+
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2));
42+
43+
transition:
44+
transform 100ms ease-in-out,
45+
opacity 125ms ease-in-out;
46+
pointer-events: none;
47+
48+
filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color)));
49+
50+
&:dir(rtl) {
51+
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px);
52+
}
53+
54+
&.is-open {
55+
transform: translate(0, 0);
56+
opacity: 1;
57+
}
6158
}
6259

6360
.spectrum-ColorLoupe-inner-border {
64-
/* Undefined variable allows custom stylesheet or JS to pass the value to this element */
65-
fill: var(--spectrum-picked-color);
66-
stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color));
67-
stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width));
61+
/* Undefined variable allows custom stylesheet or JS to pass the value to this element */
62+
fill: var(--spectrum-picked-color);
63+
stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color));
64+
stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width));
6865
}
6966

7067
.spectrum-ColorLoupe-outer-border {
71-
fill: none;
72-
stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color)));
73-
stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px);
68+
fill: none;
69+
stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color)));
70+
stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px);
7471
}
7572

7673
/* The checkerboard classes use opacity checkerboard tokens for dark and light color.
7774
The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe.yml is using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */
7875

7976
.spectrum-ColorLoupe-checkerboard-pattern {
80-
fill: var(--spectrum-colorloupe-checkerboard-dark-color);
77+
fill: var(--spectrum-colorloupe-checkerboard-dark-color);
8178
}
8279

8380
.spectrum-ColorLoupe-checkerboard-background {
84-
fill: var(--spectrum-colorloupe-checkerboard-light-color);
81+
fill: var(--spectrum-colorloupe-checkerboard-light-color);
8582
}
8683

8784
.spectrum-ColorLoupe-checkerboard-fill {
88-
fill: var(--spectrum-colorloupe-checkerboard-fill);
85+
fill: var(--spectrum-colorloupe-checkerboard-fill);
8986
}
9087

9188
@media (forced-colors: active) {
92-
.spectrum-ColorLoupe {
93-
--highcontrast-colorloupe-outer-border-color: CanvasText;
94-
}
89+
.spectrum-ColorLoupe {
90+
--highcontrast-colorloupe-outer-border-color: CanvasText;
91+
}
9592
}

0 commit comments

Comments
 (0)