Skip to content

Commit e2f1929

Browse files
rise-erpeldingcastastrophe
rise-erpelding
authored and
castastrophe
committed
feat(colorloupe): migrate to s2 drop-shadow tokens (#3301)
1 parent 0505fff commit e2f1929

File tree

3 files changed

+60
-24
lines changed

3 files changed

+60
-24
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: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,44 @@
1212
*/
1313

1414
.spectrum-ColorLoupe {
15-
inline-size: var(--spectrum-color-loupe-width);
16-
block-size: var(--spectrum-color-loupe-height);
15+
--spectrum-colorloupe-width: var(--spectrum-color-loupe-width);
16+
--spectrum-colorloupe-height: var(--spectrum-color-loupe-height);
17+
18+
--spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle);
19+
--spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */
20+
21+
--spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x);
22+
--spectrum-colorloupe-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y);
23+
--spectrum-colorloupe-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
24+
--spectrum-colorloupe-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color);
25+
26+
--spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width);
27+
--spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width);
28+
--spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border);
29+
--spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border);
30+
31+
--spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
32+
--spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
33+
34+
inline-size: var(--spectrum-colorloupe-width);
35+
block-size: var(--spectrum-colorloupe-height);
1736

1837
position: absolute;
19-
transform: translate(0, var(--mod-colorloupe-animation-distance, 8px));
38+
transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance)));
2039
opacity: 0;
2140
transform-origin: bottom center;
22-
inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-color-loupe-bottom-to-color-handle)));
23-
inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2);
41+
inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)));
42+
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2));
2443

25-
transition: transform 100ms ease-in-out, opacity 125ms ease-in-out;
44+
transition:
45+
transform 100ms ease-in-out,
46+
opacity 125ms ease-in-out;
2647
pointer-events: none;
2748

28-
filter: drop-shadow(
29-
var(--mod-colorloupe-drop-shadow-x, var(--spectrum-drop-shadow-x))
30-
var(--mod-colorloupe-drop-shadow-y, var(--spectrum-color-loupe-drop-shadow-y))
31-
var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-color-loupe-drop-shadow-blur))
32-
var(--mod-colorloupe-drop-shadow-color, var(--spectrum-color-loupe-drop-shadow-color))
33-
);
49+
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)));
3450

3551
&:dir(rtl) {
36-
inset-inline-end: calc(50% - (var(--spectrum-color-loupe-width) / 2) - 1px);
52+
inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px);
3753
}
3854

3955
&.is-open {
@@ -43,26 +59,27 @@
4359
}
4460

4561
.spectrum-ColorLoupe-inner-border {
62+
/* Undefined variable allows custom stylesheet or JS to pass the value to this element */
4663
fill: var(--spectrum-picked-color);
47-
stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-color-loupe-inner-border));
48-
stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-color-loupe-inner-border-width));
64+
stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color));
65+
stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width));
4966
}
5067

5168
.spectrum-ColorLoupe-outer-border {
5269
fill: none;
53-
stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border)));
54-
stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-color-loupe-outer-border-width)) + 2px);
70+
stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color)));
71+
stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px);
5572
}
5673

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

6077
.spectrum-ColorLoupe-checkerboard-pattern {
61-
fill: var(--spectrum-opacity-checkerboard-square-dark);
78+
fill: var(--spectrum-colorloupe-checkerboard-dark-color);
6279
}
6380

6481
.spectrum-ColorLoupe-checkerboard-background {
65-
fill: var(--spectrum-opacity-checkerboard-square-light);
82+
fill: var(--spectrum-colorloupe-checkerboard-light-color);
6683
}
6784

6885
.spectrum-ColorLoupe-checkerboard-fill {

‎components/colorloupe/metadata/metadata.json

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,35 @@
2525
],
2626
"component": [
2727
"--spectrum-color-loupe-bottom-to-color-handle",
28-
"--spectrum-color-loupe-drop-shadow-blur",
29-
"--spectrum-color-loupe-drop-shadow-color",
30-
"--spectrum-color-loupe-drop-shadow-y",
3128
"--spectrum-color-loupe-height",
3229
"--spectrum-color-loupe-inner-border",
3330
"--spectrum-color-loupe-inner-border-width",
3431
"--spectrum-color-loupe-outer-border",
3532
"--spectrum-color-loupe-outer-border-width",
3633
"--spectrum-color-loupe-width",
37-
"--spectrum-colorloupe-checkerboard-fill"
34+
"--spectrum-colorloupe-animation-distance",
35+
"--spectrum-colorloupe-checkerboard-dark-color",
36+
"--spectrum-colorloupe-checkerboard-fill",
37+
"--spectrum-colorloupe-checkerboard-light-color",
38+
"--spectrum-colorloupe-drop-shadow-blur",
39+
"--spectrum-colorloupe-drop-shadow-color",
40+
"--spectrum-colorloupe-drop-shadow-x",
41+
"--spectrum-colorloupe-drop-shadow-y",
42+
"--spectrum-colorloupe-height",
43+
"--spectrum-colorloupe-inner-border-color",
44+
"--spectrum-colorloupe-inner-border-width",
45+
"--spectrum-colorloupe-offset",
46+
"--spectrum-colorloupe-outer-border-color",
47+
"--spectrum-colorloupe-outer-border-width",
48+
"--spectrum-colorloupe-width"
3849
],
3950
"global": [
4051
"--spectrum-color-handle-outer-border-width",
4152
"--spectrum-color-handle-size",
42-
"--spectrum-drop-shadow-x",
53+
"--spectrum-drop-shadow-elevated-blur",
54+
"--spectrum-drop-shadow-elevated-color",
55+
"--spectrum-drop-shadow-elevated-x",
56+
"--spectrum-drop-shadow-elevated-y",
4357
"--spectrum-opacity-checkerboard-square-dark",
4458
"--spectrum-opacity-checkerboard-square-light",
4559
"--spectrum-picked-color"

0 commit comments

Comments
 (0)