Skip to content

Commit c72f147

Browse files
jenndiazpfulton
jenndiaz
and
pfulton
authored
feat(colorloupe, colorhandle)!: migrate to core tokens (#1753)
BREAKING CHANGE: migrates both the ColorLoupe and ColorHandle components to `@adobe/spectrum-tokens` --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent 296d464 commit c72f147

File tree

26 files changed

+485
-931
lines changed

26 files changed

+485
-931
lines changed

‎components/colorarea/index.css

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,17 +50,6 @@ governing permissions and limitations under the License.
5050
border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
5151
border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
5252

53-
&.is-focused {
54-
z-index: 2;
55-
.spectrum-ColorArea-handle {
56-
inline-size: calc(var(--spectrum-color-handle-size) * 2);
57-
block-size: calc(var(--spectrum-color-handle-size) * 2);
58-
59-
margin-inline-start: calc(-1 * var(--spectrum-color-handle-size));
60-
margin-block-start: calc(-1 * var(--spectrum-color-handle-size));
61-
}
62-
}
63-
6453
&.is-disabled {
6554
pointer-events: none;
6655
background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color)));

‎components/colorarea/metadata/colorarea.yml

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,15 @@ examples:
2222
<div class="spectrum-ColorArea">
2323
<div class="spectrum-ColorArea-gradient" style="background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, white 0%, rgba(0, 0, 0, 0) 100%), rgb(255, 0, 0);"></div>
2424
25-
<div class="spectrum-ColorHandle spectrum-ColorArea-handle">
26-
<div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
27-
<svg class="spectrum-ColorLoupe">
28-
<g transform="translate(1 1)">
29-
<path class="spectrum-ColorLoupe-inner" d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z" fill="rgb(255, 0, 0)" />
30-
<path class="spectrum-ColorLoupe-outer" d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"/>
31-
</g>
32-
</svg>
25+
<div class="spectrum-ColorHandle spectrum-ColorArea-handle" style="--spectrum-picked-color: rgba(255, 0, 0);">
26+
<div class="spectrum-ColorHandle-inner"></div>
27+
<svg class="spectrum-ColorLoupe">
28+
<!-- use ColorLoupe markup here -->
29+
</svg>
3330
</div>
3431
35-
<input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation and value" min="0" max="1" step="0.01">
36-
<input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="saturation and value" min="0" max="1" step="0.01">
32+
<input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation" min="0" max="1" step="0.01">
33+
<input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="luminosity" min="0" max="1" step="0.01">
3734
</div>
3835
3936
- id: color-area
@@ -44,16 +41,10 @@ examples:
4441
4542
<div class="spectrum-ColorHandle spectrum-ColorArea-handle is-disabled">
4643
<div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
47-
<svg class="spectrum-ColorLoupe">
48-
<g transform="translate(1 1)">
49-
<path class="spectrum-ColorLoupe-inner" d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z" fill="rgb(255, 0, 0)" />
50-
<path class="spectrum-ColorLoupe-outer" d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"/>
51-
</g>
52-
</svg>
5344
</div>
5445
55-
<input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation and value" min="0" max="1" step="0.01">
56-
<input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="saturation and value" min="0" max="1" step="0.01">
46+
<input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation" min="0" max="1" step="0.01">
47+
<input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="luminosity" min="0" max="1" step="0.01">
5748
</div>
5849
5950
- id: color-area
@@ -62,16 +53,13 @@ examples:
6253
<div class="spectrum-ColorArea" style="--mod-colorarea-width: 80px; --mod-colorarea-height: 80px">
6354
<div class="spectrum-ColorArea-gradient" style="background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, white 0%, rgba(0, 0, 0, 0) 100%), rgb(255, 0, 0);"></div>
6455
65-
<div class="spectrum-ColorHandle spectrum-ColorArea-handle" style="transform: translate(80px, 0px)">
66-
<div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
67-
<svg class="spectrum-ColorLoupe">
68-
<g transform="translate(1 1)">
69-
<path class="spectrum-ColorLoupe-inner" d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z" fill="rgb(255, 0, 0)" />
70-
<path class="spectrum-ColorLoupe-outer" d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"/>
71-
</g>
72-
</svg>
56+
<div class="spectrum-ColorHandle spectrum-ColorArea-handle">
57+
<div class="spectrum-ColorHandle-inner" style="background-color: rgb(255, 0, 0)"></div>
58+
<svg class="spectrum-ColorLoupe">
59+
<!-- use ColorLoupe markup here -->
60+
</svg>
7361
</div>
7462
75-
<input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation and value" min="0" max="1" step="0.01">
76-
<input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="saturation and value" min="0" max="1" step="0.01">
63+
<input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation" min="0" max="1" step="0.01">
64+
<input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="luminosity" min="0" max="1" step="0.01">
7765
</div>

‎components/colorhandle/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('@spectrum-css/component-builder');
1+
module.exports = require('@spectrum-css/component-builder-simple');

‎components/colorhandle/index.css

Lines changed: 88 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,73 @@
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+
*/
111
.spectrum-ColorHandle {
2-
--spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100);
12+
--spectrum-colorhandle-size: var(--spectrum-color-handle-size-interim); /* TODO: this uses custom token, replace with updated --spectrum-color-handle-size token */
13+
--spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus-interim); /* TODO: this uses custom token, replace with updated --spectrum-color-handle-size-key-focus token */
14+
--spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width);
315

4-
--spectrum-colorhandle-animation-duration: var(--spectrum-global-animation-duration-100);
16+
--spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100);
517
--spectrum-colorhandle-animation-easing: ease-in-out;
618

7-
--spectrum-colorhandle-hitarea-size: var(--spectrum-global-dimension-size-300);
8-
--spectrum-colorhandle-hitarea-radius: 100%;
9-
}
19+
/* outer border as box shadow on the colorhandle */
20+
--spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), 0.42); /*TODO replace --spectrum-black-rgb with color-handle-outer-border-color and color-handle-inner-border-opacity once express value is removed */
21+
--spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);
22+
23+
/* inner border as inset boxshadow on the colorhandle-inner */
24+
--spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), 0.42); /*TODO replace --spectrum-black-rgb with color-handle-inner-border-color and color-handle-inner-border-opacity once express value is removed */
25+
--spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width);
26+
27+
/* primary border on color handle */
28+
--spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width);
29+
--spectrum-colorhandle-border-color: var(--spectrum-white);
1030

11-
%spectrum-ColorControl-handle--focused {
12-
/* Bigger handle when focused */
13-
width: calc(var(--spectrum-colorhandle-size) * 2);
14-
height: calc(var(--spectrum-colorhandle-size) * 2);
31+
/* for opacity checkerboard background */
32+
--spectrum-colorhandle-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark);
33+
--spectrum-colorhandle-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light);
34+
--spectrum-colorhandle-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size);
1535

16-
margin-left: calc(-1 * var(--spectrum-colorhandle-size));
17-
margin-top: calc(-1 * var(--spectrum-colorhandle-size));
36+
--spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color);
37+
--spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color);
1838
}
1939

2040
.spectrum-ColorHandle {
2141
display: block;
2242
position: absolute;
2343
z-index: 1; /* Be above */
2444
box-sizing: border-box;
25-
width: var(--spectrum-colorhandle-size);
26-
height: var(--spectrum-colorhandle-size);
45+
inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
46+
block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
2747

28-
margin-left: calc(-1 * calc(var(--spectrum-colorhandle-size) / 2));
29-
margin-top: calc(-1 * calc(var(--spectrum-colorhandle-size) / 2));
48+
margin-inline: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2));
49+
margin-block: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2));
3050

31-
border-width: var(--spectrum-colorhandle-inner-border-size);
51+
border-width: var(--mod-colorhandle-border-width, var(--spectrum-colorhandle-border-width));
52+
border-color: var(--highcontrast-colorhandle-border-color, var(--mod-colorhandle-border-color, var(--spectrum-colorhandle-border-color)));
3253
border-style: solid;
3354

34-
background-size:
35-
var(--spectrum-global-dimension-static-size-200)
36-
var(--spectrum-global-dimension-static-size-200);
37-
background-position:
38-
var(--spectrum-colorhandle-background-offset) var(--spectrum-colorhandle-background-offset),
39-
var(--spectrum-colorhandle-background-offset) calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)),
40-
calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)),
41-
calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) var(--spectrum-colorhandle-background-offset);
55+
box-shadow:
56+
0 0 0
57+
var(--mod-colorhandle-outer-border-width, var(--spectrum-colorhandle-outer-border-width))
58+
var(--mod-colorhandle-outer-border-color, var(--spectrum-colorhandle-outer-border-color));
4259

60+
background:
61+
repeating-conic-gradient(var(--mod-colorhandle-checkerboard-light-color, var(--spectrum-colorhandle-checkerboard-light-color)) 0% 25%, var(--mod-colorhandle-checkerboard-dark-color, var(--spectrum-colorhandle-checkerboard-dark-color)) 0% 50%)
62+
50% / calc(var(--mod-colorhandle-checkerboard-size, var(--spectrum-colorhandle-checkerboard-size)) * 2) calc(var(--mod-colorhandle-checkerboard-size, var(--spectrum-colorhandle-checkerboard-size)) * 2);
63+
64+
/* Add a half-percent to fix diagonal line issue in Chrome on non-retina displays */
4365
transition:
44-
width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
45-
height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
46-
border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
47-
margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),
48-
margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);
66+
inline-size var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
67+
block-size var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
68+
border-width var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
69+
margin-inline var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)),
70+
margin-block var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
4971

5072
&,
5173
&:after {
@@ -54,26 +76,55 @@
5476

5577
&:after {
5678
content: '';
57-
left: calc(50% - calc(var(--spectrum-colorhandle-hitarea-size) / 2));
58-
top: calc(50% - calc(var(--spectrum-colorhandle-hitarea-size) / 2));
79+
inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
80+
inset-block: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
5981
position: absolute;
6082
display: block;
61-
width: var(--spectrum-colorhandle-hitarea-size);
62-
height: var(--spectrum-colorhandle-hitarea-size);
83+
inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size));
84+
block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size));
6385
}
6486

6587
&.is-focused,
6688
&.focus-ring {
67-
@extend %spectrum-ColorControl-handle--focused;
89+
/* Bigger handle when focused */
90+
inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size));
91+
block-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size));
92+
93+
margin-inline: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)));
94+
margin-block: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)));
95+
outline: none;
6896
}
6997

7098
&.is-disabled {
7199
pointer-events: none;
100+
border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-colorhandle-border-color-disabled)));
101+
background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-colorhandle-fill-color-disabled)));
102+
box-shadow: none;
103+
.spectrum-ColorHandle-inner {
104+
display: none;
105+
}
72106
}
73107
}
74108

75-
.spectrum-ColorHandle-color {
109+
.spectrum-ColorHandle-inner {
76110
border-radius: 100%;
77-
width: 100%;
78-
height: 100%;
111+
inline-size: 100%;
112+
block-size: 100%;
113+
box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-colorhandle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
114+
background-color: var(--spectrum-picked-color);
79115
}
116+
117+
/* hack: make sure we don't complain about this color being undefined */
118+
.🤫 {
119+
--spectrum-picked-color: 0;
120+
}
121+
122+
@media (forced-colors: active) {
123+
.spectrum-ColorHandle {
124+
forced-color-adjust: none;
125+
&.is-disabled {
126+
--highcontrast-colorhandle-border-color-disabled : GrayText;
127+
--highcontrast-colorhandle-fill-color-disabled: Canvas;
128+
}
129+
}
130+
}

0 commit comments

Comments
 (0)