@react-spectrum/color 3.0.0-beta.3 → 3.0.0-beta.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/import.mjs +572 -0
  2. package/dist/main.css +490 -1
  3. package/dist/main.css.map +1 -1
  4. package/dist/main.js +554 -396
  5. package/dist/main.js.map +1 -1
  6. package/dist/module.js +552 -338
  7. package/dist/module.js.map +1 -1
  8. package/dist/types.d.ts +10 -2
  9. package/dist/types.d.ts.map +1 -1
  10. package/package.json +23 -22
  11. package/src/ColorArea.tsx +89 -0
  12. package/src/ColorField.tsx +11 -9
  13. package/src/ColorSlider.tsx +21 -19
  14. package/src/ColorWheel.tsx +2 -2
  15. package/src/colorfield.css +5 -3
  16. package/src/index.ts +5 -4
package/dist/main.css CHANGED
@@ -1,2 +1,491 @@
1
- ._spectrum-ColorHandle_cc6c6._focus-ring_cc6c6,._spectrum-ColorHandle_cc6c6._is-focused_cc6c6{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorHandle_cc6c6{display:block;position:absolute;z-index:1;box-sizing:border-box;width:var(--spectrum-global-dimension-size-200);height:var(--spectrum-global-dimension-size-200);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200) / 2);margin-top:calc(-1 * var(--spectrum-global-dimension-size-200) / 2);border-width:var(--spectrum-global-dimension-static-size-25,2px);border-style:solid;background-size:16px 16px;background-position:-2px -2px,-2px 6px,6px -10px,-10px -2px;transition:width .13s ease-in-out,height .13s ease-in-out,border-width .13s ease-in-out,margin-left .13s ease-in-out,margin-top .13s ease-in-out}._spectrum-ColorHandle_cc6c6,._spectrum-ColorHandle_cc6c6:after{border-radius:100%}._spectrum-ColorHandle_cc6c6:after{content:"";left:calc(50% - var(--spectrum-global-dimension-size-300) / 2);top:calc(50% - var(--spectrum-global-dimension-size-300) / 2);position:absolute;display:block;width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300)}._spectrum-ColorHandle_cc6c6._is-disabled_cc6c6{pointer-events:none}._spectrum-ColorHandle-color_cc6c6{border-radius:100%;width:100%;height:100%}._spectrum-ColorHandle_cc6c6{border-color:var(--spectrum-global-color-static-white,#fff);box-shadow:0 0 0 var(--spectrum-global-dimension-static-size-10,1px) rgba(0,0,0,.42);background-color:#fff;background-image:linear-gradient(-45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(-45deg,#bcbcbc 25.5%,transparent 0),linear-gradient(45deg,#bcbcbc 25.5%,transparent 0)}._spectrum-ColorHandle_cc6c6._is-disabled_cc6c6{border-color:var(--spectrum-global-color-gray-400);background:var(--spectrum-global-color-gray-300);box-shadow:none}._spectrum-ColorHandle_cc6c6._is-disabled_cc6c6 ._spectrum-ColorHandle-color_cc6c6{display:none}._spectrum-ColorHandle-color_cc6c6{box-shadow:inset 0 0 0 var(--spectrum-global-dimension-static-size-10,1px) rgba(0,0,0,.42)}._spectrum-ColorLoupe_583f5{width:calc(var(--spectrum-global-dimension-static-size-600, 48px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2);height:calc(var(--spectrum-global-dimension-static-size-800, 64px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2);position:absolute;transform:translateY(8px);opacity:0;transform-origin:bottom center;bottom:calc(50% + 16px);left:calc(50% - (var(--spectrum-global-dimension-static-size-600, 48px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2) / 2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}._spectrum-ColorLoupe_583f5._is-open_583f5{transform:translate(0);opacity:1}._spectrum-ColorLoupe-outer_583f5{stroke-width:var(--spectrum-global-dimension-static-size-10,1px);fill:var(--spectrum-global-color-static-white,#fff);stroke:rgba(50,50,50,.1)}._spectrum-ColorLoupe-inner-background_583f5{fill:#fff}._spectrum-ColorLoupe-inner-checker_583f5{fill:#bcbcbc}._spectrum-ColorWheel_5efa1._is-focused_5efa1 ._spectrum-ColorWheel-handle_5efa1{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorWheel-slider_5efa1{opacity:.0001;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0;pointer-events:none}._spectrum-ColorWheel_5efa1{position:relative;display:block;width:calc(var(--spectrum-global-dimension-size-125) * 16);height:calc(var(--spectrum-global-dimension-size-125) * 16);--spectrum-colorwheel-track-thickness:var(--spectrum-global-dimension-size-300);border-radius:100%;-webkit-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default}._spectrum-ColorWheel_5efa1 ._spectrum-ColorWheel-handle_5efa1{margin:0}._spectrum-ColorWheel_5efa1._is-focused_5efa1{z-index:2}._spectrum-ColorWheel_5efa1._is-disabled_5efa1{pointer-events:none}._spectrum-ColorWheel_5efa1._is-dragged_5efa1{z-index:2}._spectrum-ColorWheel-gradient_5efa1{position:relative;z-index:0;width:calc(var(--spectrum-global-dimension-size-125) * 16);height:calc(var(--spectrum-global-dimension-size-125) * 16)}._spectrum-ColorWheel-gradient_5efa1:after,._spectrum-ColorWheel-gradient_5efa1:before{content:"";position:absolute;border-radius:100%;border-width:var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10));border-style:solid}._spectrum-ColorWheel-gradient_5efa1:before{top:0;left:0;bottom:0;right:0}._spectrum-ColorWheel-gradient_5efa1:after{top:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));left:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));bottom:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));right:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)))}._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-gradient_5efa1{background:var(--spectrum-global-color-gray-300)!important}._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-gradient_5efa1:after,._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-gradient_5efa1:before{border-color:var(--spectrum-global-color-gray-300)}._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-segment_5efa1{display:none}._spectrum-ColorWheel-gradient_5efa1:after,._spectrum-ColorWheel-gradient_5efa1:before{border-color:var(--spectrum-colorarea-border-color)}._spectrum-ColorSlider_5a55e._is-focused_5a55e ._spectrum-ColorSlider-handle_5a55e{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorSlider-slider_5a55e{opacity:.0001;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0;pointer-events:none}._spectrum-ColorSlider-container--horizontal_5a55e{width:var(--spectrum-global-dimension-size-2400)}._spectrum-ColorSlider-container--vertical_5a55e{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:var(--spectrum-global-dimension-size-2400)}._spectrum-ColorSlider_5a55e{position:relative;display:block;width:100%;height:var(--spectrum-global-dimension-size-300);-webkit-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default}._spectrum-ColorSlider_5a55e,._spectrum-ColorSlider_5a55e:before{border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}._spectrum-ColorSlider_5a55e:before{content:"";z-index:-1;position:absolute;top:0;left:0;bottom:0;right:0;background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}._spectrum-ColorSlider_5a55e._is-focused_5a55e{z-index:2}._spectrum-ColorSlider_5a55e._is-disabled_5a55e{pointer-events:none}._spectrum-ColorSlider--vertical_5a55e{display:inline-block;width:var(--spectrum-global-dimension-size-300);-ms-flex:1;flex:1}._spectrum-ColorSlider--vertical_5a55e ._spectrum-ColorSlider-handle_5a55e{left:50%;top:0}._spectrum-ColorSlider-handle_5a55e{left:0;top:50%}._spectrum-ColorSlider-handle_5a55e:after{border-radius:0;width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300)}._spectrum-ColorSlider_5a55e{background-color:#fff;box-shadow:inset 0 0 0 var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorarea-border-color)}._spectrum-ColorSlider_5a55e:before{background-image:linear-gradient(-45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(-45deg,#bcbcbc 25.5%,transparent 0),linear-gradient(45deg,#bcbcbc 25.5%,transparent 0)}._spectrum-ColorSlider_5a55e._is-disabled_5a55e{background:var(--spectrum-global-color-gray-300)!important;box-shadow:inset 0 0 0 var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)) var(--spectrum-global-color-gray-300)}._spectrum-ColorSlider_5a55e ._spectrum-ColorSlider-handle_5a55e{margin:0}[dir=ltr] ._react-spectrum-ColorField-input_4e4c4{text-align:left}[dir=rtl] ._react-spectrum-ColorField-input_4e4c4{text-align:right}._react-spectrum-ColorField-input_4e4c4{direction:ltr}
1
+ .hoc2UW_spectrum-ColorHandle {
2
+ z-index: 1;
3
+ box-sizing: border-box;
4
+ width: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));
5
+ height: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200));
6
+ margin-left: calc(-1 * calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2));
7
+ margin-top: calc(-1 * calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2));
8
+ border-width: var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25));
9
+ background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px);
10
+ background-position: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)), calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)) calc(var(--spectrum-global-dimension-static-size-100, 8px) + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))), calc(var(--spectrum-global-dimension-static-size-100, 8px) + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px) + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))), calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px) + calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px))) calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px));
11
+ transition: width var(--spectrum-global-animation-duration-100, .13s) ease-in-out, height var(--spectrum-global-animation-duration-100, .13s) ease-in-out, border-width var(--spectrum-global-animation-duration-100, .13s) ease-in-out, margin-left var(--spectrum-global-animation-duration-100, .13s) ease-in-out, margin-top var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
12
+ border-style: solid;
13
+ display: block;
14
+ position: absolute;
15
+ }
16
+
17
+ .hoc2UW_spectrum-ColorHandle {
18
+ border-radius: 100%;
19
+ }
20
+
21
+ .hoc2UW_spectrum-ColorHandle:after {
22
+ border-radius: 100%;
23
+ }
24
+
25
+ .hoc2UW_spectrum-ColorHandle:after {
26
+ content: "";
27
+ left: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
28
+ top: calc(50% - calc(var(--spectrum-global-dimension-size-300) / 2));
29
+ width: var(--spectrum-global-dimension-size-300);
30
+ height: var(--spectrum-global-dimension-size-300);
31
+ display: block;
32
+ position: absolute;
33
+ }
34
+
35
+ .hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled {
36
+ pointer-events: none;
37
+ }
38
+
39
+ .hoc2UW_spectrum-ColorControl-handle--focused {
40
+ width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
41
+ height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
42
+ margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
43
+ margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
44
+ }
45
+
46
+ .hoc2UW_is-focused, .hoc2UW_focus-ring {
47
+ }
48
+
49
+ .hoc2UW_spectrum-ColorHandle-color {
50
+ border-radius: 100%;
51
+ width: 100%;
52
+ height: 100%;
53
+ }
54
+
55
+ .hoc2UW_spectrum-ColorHandle {
56
+ border-color: var(--spectrum-colorhandle-inner-border-color, var(--spectrum-global-color-static-white));
57
+ box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) #0000006b;
58
+ background-color: var(--spectrum-global-color-static-white, #fff);
59
+ background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%);
60
+ }
61
+
62
+ .hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled {
63
+ border-color: var(--spectrum-colorhandle-inner-border-color-disabled, var(--spectrum-global-color-gray-400));
64
+ background: var(--spectrum-colorhandle-fill-color-disabled, var(--spectrum-global-color-gray-300));
65
+ box-shadow: none;
66
+ }
67
+
68
+ .hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled .hoc2UW_spectrum-ColorHandle-color {
69
+ display: none;
70
+ }
71
+
72
+ .hoc2UW_spectrum-ColorHandle-color {
73
+ box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) #0000006b;
74
+ }
75
+
76
+ @media (forced-colors: active) {
77
+ .hoc2UW_spectrum-ColorHandle {
78
+ forced-color-adjust: none;
79
+ --spectrum-colorhandle-inner-border-color-disabled: GrayText;
80
+ --spectrum-colorhandle-fill-color-disabled: GrayText;
81
+ --spectrum-colorhandle-inner-border-color: ButtonText;
82
+ --spectrum-colorhandle-outer-border-color: ButtonFace;
83
+ }
84
+ }
85
+
86
+ .HpWpfq_spectrum-ColorLoupe {
87
+ width: calc(var(--spectrum-colorloupe-width, var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);
88
+ height: calc(var(--spectrum-colorloupe-height, var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);
89
+ transform: translate(0, var(--spectrum-global-dimension-static-size-100, 8px));
90
+ opacity: 0;
91
+ transform-origin: bottom;
92
+ bottom: calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));
93
+ left: calc(50% - calc(calc(var(--spectrum-colorloupe-width, var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2) / 2));
94
+ pointer-events: none;
95
+ transition: transform .1s ease-in-out, opacity .125s ease-in-out;
96
+ position: absolute;
97
+ }
98
+
99
+ .HpWpfq_spectrum-ColorLoupe.HpWpfq_is-open {
100
+ opacity: 1;
101
+ z-index: 2;
102
+ transform: translate(0);
103
+ }
104
+
105
+ .HpWpfq_spectrum-ColorLoupe-outer {
106
+ stroke-width: var(--spectrum-colorloupe-outer-border-size, var(--spectrum-global-dimension-static-size-10));
107
+ fill: var(--spectrum-colorloupe-inner-border-color, var(--spectrum-global-color-static-white));
108
+ stroke: var(--spectrum-colorloupe-outer-border-color, #3232321a);
109
+ }
110
+
111
+ .HpWpfq_spectrum-ColorLoupe-inner-background {
112
+ fill: var(--spectrum-global-color-static-white, #fff);
113
+ }
114
+
115
+ .HpWpfq_spectrum-ColorLoupe-inner-checker {
116
+ fill: var(--spectrum-global-color-static-gray-500, #bcbcbc);
117
+ }
118
+
119
+ @media (forced-colors: active) {
120
+ .HpWpfq_spectrum-ColorLoupe {
121
+ forced-color-adjust: none;
122
+ --spectrum-colorloupe-inner-border-color: ButtonText;
123
+ --spectrum-colorloupe-outer-border-color: ButtonFace;
124
+ }
125
+ }
126
+
127
+ .lm1DSq_spectrum-ColorArea {
128
+ inline-size: var(--spectrum-colorarea-default-width, var(--spectrum-global-dimension-size-2400));
129
+ block-size: var(--spectrum-colorarea-default-height, var(--spectrum-global-dimension-size-2400));
130
+ min-inline-size: var(--spectrum-colorarea-min-width, var(--spectrum-global-dimension-size-800));
131
+ min-block-size: var(--spectrum-colorarea-min-height, var(--spectrum-global-dimension-size-800));
132
+ border-radius: var(--spectrum-colorarea-border-radius, var(--spectrum-alias-border-radius-regular));
133
+ cursor: default;
134
+ -webkit-user-select: none;
135
+ user-select: none;
136
+ display: inline-block;
137
+ position: relative;
138
+ }
139
+
140
+ .lm1DSq_spectrum-ColorArea.lm1DSq_is-focused {
141
+ z-index: 2;
142
+ }
143
+
144
+ .lm1DSq_spectrum-ColorArea.lm1DSq_is-focused .lm1DSq_spectrum-ColorArea-handle {
145
+ width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
146
+ height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
147
+ margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
148
+ margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
149
+ }
150
+
151
+ .lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring {
152
+ z-index: 2;
153
+ }
154
+
155
+ .lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring .lm1DSq_spectrum-ColorArea-handle {
156
+ width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
157
+ height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
158
+ margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
159
+ margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
160
+ }
161
+
162
+ .lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled {
163
+ pointer-events: none;
164
+ }
165
+
166
+ .lm1DSq_spectrum-ColorArea:before {
167
+ content: "";
168
+ z-index: 1;
169
+ border-radius: var(--spectrum-colorarea-border-radius, var(--spectrum-alias-border-radius-regular));
170
+ position: absolute;
171
+ top: 0;
172
+ bottom: 0;
173
+ left: 0;
174
+ right: 0;
175
+ }
176
+
177
+ .lm1DSq_spectrum-ColorArea-handle {
178
+ top: 0;
179
+ left: 0;
180
+ }
181
+
182
+ .lm1DSq_spectrum-ColorArea-handle:focus-within {
183
+ z-index: 2;
184
+ }
185
+
186
+ .lm1DSq_spectrum-ColorArea-gradient {
187
+ border-radius: var(--spectrum-colorarea-border-radius, var(--spectrum-alias-border-radius-regular));
188
+ width: 100%;
189
+ height: 100%;
190
+ }
191
+
192
+ .lm1DSq_spectrum-ColorArea-slider {
193
+ opacity: .0001;
194
+ z-index: 0;
195
+ pointer-events: none;
196
+ width: 100%;
197
+ height: 100%;
198
+ margin: 0;
199
+ position: absolute;
200
+ top: 0;
201
+ left: 0;
202
+ }
203
+
204
+ .lm1DSq_spectrum-ColorArea:before {
205
+ box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorarea-border-color);
206
+ }
207
+
208
+ .lm1DSq_spectrum-ColorArea-gradient, .lm1DSq_spectrum-ColorHandle-color {
209
+ forced-color-adjust: none;
210
+ }
211
+
212
+ .lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled {
213
+ background: var(--spectrum-colorarea-fill-color-disabled, var(--spectrum-global-color-gray-300));
214
+ }
215
+
216
+ .lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled:before {
217
+ box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorarea-border-color-disabled, var(--spectrum-global-color-gray-300));
218
+ }
219
+
220
+ .lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled .lm1DSq_spectrum-ColorArea-gradient {
221
+ display: none;
222
+ }
223
+
224
+ @media (forced-colors: active) {
225
+ .lm1DSq_spectrum-ColorArea {
226
+ --spectrum-colorarea-fill-color-disabled: GrayText;
227
+ }
228
+
229
+ .lm1DSq_spectrum-ColorArea {
230
+ forced-color-adjust: none;
231
+ }
232
+
233
+ .lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled {
234
+ forced-color-adjust: none;
235
+ }
236
+ }
237
+
238
+ .qPIMxa_spectrum-ColorControl-hiddenField {
239
+ opacity: .0001;
240
+ z-index: 0;
241
+ pointer-events: none;
242
+ width: 100%;
243
+ height: 100%;
244
+ margin: 0;
245
+ position: absolute;
246
+ top: 0;
247
+ left: 0;
248
+ }
249
+
250
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel {
251
+ width: calc(var(--spectrum-global-dimension-size-125) * 16);
252
+ height: calc(var(--spectrum-global-dimension-size-125) * 16);
253
+ --spectrum-colorwheel-track-thickness: var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300));
254
+ -webkit-user-select: none;
255
+ user-select: none;
256
+ touch-action: none;
257
+ cursor: default;
258
+ border-radius: 100%;
259
+ display: block;
260
+ position: relative;
261
+ }
262
+
263
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel .qPIMxa_spectrum-ColorWheel-handle {
264
+ margin: 0;
265
+ }
266
+
267
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-focused {
268
+ z-index: 2;
269
+ }
270
+
271
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled {
272
+ pointer-events: none;
273
+ }
274
+
275
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-dragged {
276
+ z-index: 2;
277
+ }
278
+
279
+ .qPIMxa_spectrum-ColorWheel-gradient {
280
+ z-index: 0;
281
+ width: calc(var(--spectrum-global-dimension-size-125) * 16);
282
+ height: calc(var(--spectrum-global-dimension-size-125) * 16);
283
+ position: relative;
284
+ }
285
+
286
+ .qPIMxa_spectrum-ColorWheel-gradient:before {
287
+ content: "";
288
+ border-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
289
+ border-style: solid;
290
+ border-radius: 100%;
291
+ position: absolute;
292
+ }
293
+
294
+ .qPIMxa_spectrum-ColorWheel-gradient:after {
295
+ content: "";
296
+ border-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
297
+ border-style: solid;
298
+ border-radius: 100%;
299
+ position: absolute;
300
+ }
301
+
302
+ .qPIMxa_spectrum-ColorWheel-gradient:before {
303
+ top: 0;
304
+ bottom: 0;
305
+ left: 0;
306
+ right: 0;
307
+ }
308
+
309
+ .qPIMxa_spectrum-ColorWheel-gradient:after {
310
+ top: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
311
+ left: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
312
+ bottom: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
313
+ right: calc(var(--spectrum-colorwheel-track-width, var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin)));
314
+ }
315
+
316
+ .qPIMxa_spectrum-ColorWheel-slider {
317
+ }
318
+
319
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient {
320
+ background: var(--spectrum-colorwheel-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
321
+ }
322
+
323
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:before {
324
+ border-color: var(--spectrum-colorwheel-border-color-disabled, var(--spectrum-global-color-gray-300));
325
+ }
326
+
327
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:after {
328
+ border-color: var(--spectrum-colorwheel-border-color-disabled, var(--spectrum-global-color-gray-300));
329
+ }
330
+
331
+ .qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-segment {
332
+ display: none;
333
+ }
334
+
335
+ .qPIMxa_spectrum-ColorWheel-gradient:before {
336
+ border-color: var(--spectrum-colorarea-border-color);
337
+ }
338
+
339
+ .qPIMxa_spectrum-ColorWheel-gradient:after {
340
+ border-color: var(--spectrum-colorarea-border-color);
341
+ }
342
+
343
+ @media (forced-colors: active) {
344
+ .qPIMxa_spectrum-ColorWheel {
345
+ forced-color-adjust: none;
346
+ --spectrum-colorwheel-fill-color-disabled: GrayText;
347
+ --spectrum-colorwheel-border-color-disabled: GrayText;
348
+ --spectrum-colorwheel-border-color: ButtonText;
349
+ --spectrum-colorarea-border-color: ButtonText;
350
+ }
351
+ }
352
+
353
+ .WJOmgG_spectrum-ColorControl-hiddenField {
354
+ opacity: .0001;
355
+ z-index: 0;
356
+ pointer-events: none;
357
+ width: 100%;
358
+ height: 100%;
359
+ margin: 0;
360
+ position: absolute;
361
+ top: 0;
362
+ left: 0;
363
+ }
364
+
365
+ .WJOmgG_spectrum-ColorSlider-container--horizontal {
366
+ width: var(--spectrum-colorslider-default-length, var(--spectrum-global-dimension-size-2400));
367
+ }
368
+
369
+ .WJOmgG_spectrum-ColorSlider-container--vertical {
370
+ height: var(--spectrum-colorslider-default-length, var(--spectrum-global-dimension-size-2400));
371
+ flex-direction: column;
372
+ display: flex;
373
+ }
374
+
375
+ .WJOmgG_spectrum-ColorSlider {
376
+ height: var(--spectrum-colorslider-height, var(--spectrum-global-dimension-size-300));
377
+ border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
378
+ -webkit-user-select: none;
379
+ user-select: none;
380
+ touch-action: none;
381
+ cursor: default;
382
+ width: 100%;
383
+ display: block;
384
+ position: relative;
385
+ }
386
+
387
+ .WJOmgG_spectrum-ColorSlider .WJOmgG_spectrum-ColorSlider-handle.WJOmgG_spectrum-ColorSlider-handle {
388
+ margin: 0;
389
+ }
390
+
391
+ .WJOmgG_spectrum-ColorSlider:before {
392
+ content: "";
393
+ z-index: -1;
394
+ border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
395
+ background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px);
396
+ background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100, 8px), var(--spectrum-global-dimension-static-size-100, 8px) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)), calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0;
397
+ position: absolute;
398
+ top: 0;
399
+ bottom: 0;
400
+ left: 0;
401
+ right: 0;
402
+ }
403
+
404
+ .WJOmgG_spectrum-ColorSlider.WJOmgG_is-focused {
405
+ z-index: 2;
406
+ }
407
+
408
+ .WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled {
409
+ pointer-events: none;
410
+ }
411
+
412
+ .WJOmgG_spectrum-ColorSlider--vertical {
413
+ width: var(--spectrum-colorslider-vertical-width, var(--spectrum-global-dimension-size-300));
414
+ flex: 1;
415
+ display: inline-block;
416
+ }
417
+
418
+ .WJOmgG_spectrum-ColorSlider--vertical .WJOmgG_spectrum-ColorSlider-handle {
419
+ top: 0;
420
+ left: 50%;
421
+ }
422
+
423
+ .WJOmgG_spectrum-ColorSlider-handle {
424
+ top: 50%;
425
+ left: 0;
426
+ }
427
+
428
+ .WJOmgG_spectrum-ColorSlider-handle:after {
429
+ width: var(--spectrum-global-dimension-size-300);
430
+ height: var(--spectrum-global-dimension-size-300);
431
+ border-radius: 0%;
432
+ }
433
+
434
+ .WJOmgG_spectrum-ColorSlider-slider {
435
+ }
436
+
437
+ .WJOmgG_spectrum-ColorSlider-labelContainer {
438
+ grid-template-columns: auto 1fr auto;
439
+ grid-template-areas: "WJOmgG_label WJOmgG_contextualHelp WJOmgG_value";
440
+ justify-items: start;
441
+ display: grid;
442
+ }
443
+
444
+ .WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp {
445
+ margin-inline-start: var(--spectrum-global-dimension-size-50);
446
+ margin-top: var(--spectrum-global-dimension-size-25);
447
+ grid-area: WJOmgG_contextualHelp;
448
+ }
449
+
450
+ .WJOmgG_spectrum-ColorSlider-valueLabel {
451
+ grid-area: WJOmgG_value;
452
+ margin-inline-start: var(--spectrum-global-dimension-size-50);
453
+ }
454
+
455
+ .WJOmgG_spectrum-ColorSlider {
456
+ background-color: var(--spectrum-global-color-static-white, #fff);
457
+ box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorarea-border-color);
458
+ }
459
+
460
+ .WJOmgG_spectrum-ColorSlider:before {
461
+ background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%), linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%);
462
+ }
463
+
464
+ .WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled {
465
+ box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorslider-border-color-disabled, var(--spectrum-global-color-gray-300));
466
+ background: var(--spectrum-colorslider-fill-color-disabled, var(--spectrum-global-color-gray-300)) !important;
467
+ }
468
+
469
+ @media (forced-colors: active) {
470
+ .WJOmgG_spectrum-ColorSlider {
471
+ forced-color-adjust: none;
472
+ --spectrum-colorslider-fill-color-disabled: GrayText;
473
+ --spectrum-colorslider-border-color-disabled: GrayText;
474
+ --spectrum-colorslider-border-color: ButtonText;
475
+ --spectrum-colorarea-border-color: ButtonText;
476
+ }
477
+ }
478
+
479
+ .UccskW_react-spectrum-ColorField-input:not(:placeholder-shown) {
480
+ unicode-bidi: plaintext;
481
+ }
482
+
483
+ .UccskW_react-spectrum-ColorField-input:not(:placeholder-shown):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
484
+ text-align: end;
485
+ }
486
+
487
+ .UccskW_react-spectrum-ColorField-input:not(:placeholder-shown):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
488
+ text-align: end;
489
+ }
490
+
2
491
  /*# sourceMappingURL=main.css.map */
package/dist/main.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./node_modules/@adobe/spectrum-css-temp/components/colorhandle/index.css","./node_modules/@adobe/spectrum-css-temp/components/colorhandle/skin.css","./node_modules/@adobe/spectrum-css-temp/components/colorloupe/index.css","./node_modules/@adobe/spectrum-css-temp/components/colorloupe/skin.css","./node_modules/@adobe/spectrum-css-temp/components/colorwheel/index.css","./node_modules/@adobe/spectrum-css-temp/components/colorwheel/skin.css","./node_modules/@adobe/spectrum-css-temp/components/colorslider/index.css","./node_modules/@adobe/spectrum-css-temp/components/colorslider/skin.css","./packages/@react-spectrum/color/src/colorfield.css"],"sourcesContent":[":root {\n /* redefine this var so it can be used in skin.css */\n --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25));\n --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100);\n\n --spectrum-colorhandle-animation-duration: var(--spectrum-global-animation-duration-100);\n --spectrum-colorhandle-animation-easing: ease-in-out;\n\n --spectrum-colorhandle-hitarea-size: var(--spectrum-global-dimension-size-300);\n --spectrum-colorhandle-hitarea-radius: 100%;\n}\n\n%spectrum-ColorControl-handle--focused {\n /* Bigger handle when focused */\n width: calc(var(--spectrum-colorhandle-size) * 2);\n height: calc(var(--spectrum-colorhandle-size) * 2);\n\n margin-left: calc(-1 * var(--spectrum-colorhandle-size));\n margin-top: calc(-1 * var(--spectrum-colorhandle-size));\n}\n\n.spectrum-ColorHandle {\n display: block;\n position: absolute;\n z-index: 1; /* Be above */\n box-sizing: border-box;\n width: var(--spectrum-colorhandle-size);\n height: var(--spectrum-colorhandle-size);\n\n margin-left: calc(-1 * calc(var(--spectrum-colorhandle-size) / 2));\n margin-top: calc(-1 * calc(var(--spectrum-colorhandle-size) / 2));\n\n border-width: var(--spectrum-colorhandle-inner-border-size);\n border-style: solid;\n\n background-size:\n var(--spectrum-global-dimension-static-size-200)\n var(--spectrum-global-dimension-static-size-200);\n background-position:\n var(--spectrum-colorhandle-background-offset) var(--spectrum-colorhandle-background-offset),\n var(--spectrum-colorhandle-background-offset) calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)),\n calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)),\n calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) var(--spectrum-colorhandle-background-offset);\n\n transition:\n width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),\n height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),\n border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),\n margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),\n margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);\n\n &,\n &:after {\n border-radius: 100%;\n }\n\n &:after {\n content: '';\n left: calc(50% - calc(var(--spectrum-colorhandle-hitarea-size) / 2));\n top: calc(50% - calc(var(--spectrum-colorhandle-hitarea-size) / 2));\n position: absolute;\n display: block;\n width: var(--spectrum-colorhandle-hitarea-size);\n height: var(--spectrum-colorhandle-hitarea-size);\n }\n\n &.is-focused,\n &.focus-ring {\n @extend %spectrum-ColorControl-handle--focused;\n }\n\n &.is-disabled {\n pointer-events: none;\n }\n}\n\n.spectrum-ColorHandle-color {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n}\n",":root {\n /* redefine this var so it can be used in skin.css */\n --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25));\n --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100);\n\n /* todo: update DNA so this is no longer required */\n --spectrum-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42);\n}\n\n.spectrum-ColorHandle {\n border-color: var(--spectrum-colorhandle-inner-border-color);\n box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color);\n\n background-color: var(--spectrum-global-color-static-white);\n\n /* Add a half-percent to fix diagonal line issue in Chrome on non-retina displays */\n background-image:\n linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),\n linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),\n linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%),\n linear-gradient(45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%);\n\n &.is-disabled {\n border-color: var(--spectrum-colorhandle-inner-border-color-disabled);\n background: var(--spectrum-colorhandle-fill-color-disabled);\n box-shadow: none;\n\n .spectrum-ColorHandle-color {\n display: none;\n }\n }\n}\n\n.spectrum-ColorHandle-color {\n box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color);\n}\n",":root {\n /* size is the same on desktop and mobile */\n --spectrum-colorloupe-width-adjusted: calc(\n var(--spectrum-colorloupe-width) +\n var(--spectrum-colorhandle-inner-border-size) * 2\n );\n --spectrum-colorloupe-height-adjusted: calc(\n var(--spectrum-colorloupe-height) +\n var(--spectrum-colorhandle-inner-border-size) * 2\n );\n\n /* Distance between the loupe and the handle */\n --spectrum-colorloupe-offset: var(\n --spectrum-global-dimension-static-size-200\n );\n\n /* How much to animate up to the offset distance */\n --spectrum-colorloupe-animation-distance: var(\n --spectrum-global-dimension-static-size-100\n );\n}\n\n.spectrum-ColorLoupe {\n width: var(--spectrum-colorloupe-width-adjusted);\n height: var(--spectrum-colorloupe-height-adjusted);\n\n position: absolute;\n transform: translate(0, var(--spectrum-colorloupe-animation-distance));\n opacity: 0;\n transform-origin: bottom center;\n bottom: calc(50% + var(--spectrum-colorloupe-offset));\n left: calc(50% - calc(var(--spectrum-colorloupe-width-adjusted) / 2));\n transition: transform 100ms ease-in-out, opacity 125ms ease-in-out;\n\n pointer-events: none;\n\n &.is-open {\n transform: translate(0, 0);\n opacity: 1;\n }\n}\n\n.spectrum-ColorLoupe-outer {\n stroke-width: var(--spectrum-colorloupe-outer-border-size);\n}\n",".spectrum-ColorLoupe-outer {\n fill: var(--spectrum-colorloupe-inner-border-color);\n stroke: var(--spectrum-colorloupe-outer-border-color);\n}\n\n.spectrum-ColorLoupe-inner-background {\n fill: var(--spectrum-global-color-static-white);\n}\n.spectrum-ColorLoupe-inner-checker {\n fill: var(--spectrum-global-color-static-gray-500);\n}\n",":root {\n /* todo: fix this in DNA */\n --spectrum-colorwheel-focus-ring-size: var(--spectrum-global-dimension-static-size-25);\n --spectrum-colorwheel-border-radius: 100%;\n --spectrum-colorwheel-width: calc(var(--spectrum-global-dimension-size-125) * 16);\n --spectrum-colorwheel-height: var(--spectrum-colorwheel-width);\n}\n\n%spectrum-ColorControl-handle--focused {\n /* Bigger handle when focused */\n width: calc(var(--spectrum-colorhandle-size) * 2);\n height: calc(var(--spectrum-colorhandle-size) * 2);\n\n margin-left: calc(-1 * var(--spectrum-colorhandle-size));\n margin-top: calc(-1 * var(--spectrum-colorhandle-size));\n}\n\n/** index.css (scale dependent) */\n\n%spectrum-ColorControl-hiddenField {\n opacity: 0.0001;\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n z-index: 0;\n margin: 0;\n pointer-events: none;\n}\n\n.spectrum-ColorWheel {\n position: relative;\n display: block;\n width: var(--spectrum-colorwheel-width);\n height: var(--spectrum-colorwheel-height);\n /* expose to JS */\n --spectrum-colorwheel-track-thickness: var(--spectrum-colorwheel-track-width);\n\n border-radius: var(--spectrum-colorwheel-border-radius);\n\n user-select: none;\n touch-action: none;\n cursor: default;\n\n .spectrum-ColorWheel-handle {\n margin: 0;\n }\n\n &.is-focused {\n z-index: 2;\n\n .spectrum-ColorWheel-handle {\n @extend %spectrum-ColorControl-handle--focused;\n }\n }\n\n &.is-disabled {\n pointer-events: none;\n }\n\n &.is-dragged {\n /* Be on top when dragging so loupe can overlap */\n z-index: 2;\n }\n}\n\n.spectrum-ColorWheel-gradient {\n position: relative;\n z-index: 0;\n width: var(--spectrum-colorwheel-width);\n height: var(--spectrum-colorwheel-height);\n\n &:before,\n &:after {\n content: \"\";\n position: absolute;\n border-radius: 100%;\n border-width: var(--spectrum-colorwheel-border-size);\n border-style: solid;\n }\n\n &:before {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n\n &:after {\n top: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));\n left: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));\n bottom: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));\n right: calc(var(--spectrum-colorwheel-track-width) - var(--spectrum-colorwheel-border-size));\n }\n}\n\n.spectrum-ColorWheel-slider {\n @extend %spectrum-ColorControl-hiddenField;\n}\n",":root {\n /* todo: fix this in DNA */\n --spectrum-colorwheel-border-color: var(--spectrum-colorarea-border-color);\n}\n\n.spectrum-ColorWheel {\n &.is-disabled {\n .spectrum-ColorWheel-gradient {\n background: var(--spectrum-colorwheel-fill-color-disabled) !important;\n\n &:before,\n &:after {\n border-color: var(--spectrum-colorwheel-border-color-disabled);\n }\n }\n\n /* hide all the little colored bits */\n .spectrum-ColorWheel-segment {\n display: none;\n }\n }\n}\n\n.spectrum-ColorWheel-gradient {\n &:before,\n &:after {\n border-color: var(--spectrum-colorwheel-border-color);\n }\n}\n",":root {\n --spectrum-colorslider-handle-hitarea-border-radius: 0%;\n --spectrum-colorslider-handle-hitarea-width: var(\n --spectrum-global-dimension-size-300\n );\n --spectrum-colorslider-handle-hitarea-height: var(\n --spectrum-global-dimension-size-300\n );\n}\n\n%spectrum-ColorControl-handle--focused {\n /* Bigger handle when focused */\n width: calc(var(--spectrum-colorhandle-size) * 2);\n height: calc(var(--spectrum-colorhandle-size) * 2);\n\n margin-left: calc(-1 * var(--spectrum-colorhandle-size));\n margin-top: calc(-1 * var(--spectrum-colorhandle-size));\n}\n\n%spectrum-ColorControl-hiddenField {\n opacity: 0.0001;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n margin: 0;\n pointer-events: none;\n}\n\n.spectrum-ColorSlider-container--horizontal {\n width: var(--spectrum-colorslider-default-length);\n}\n\n.spectrum-ColorSlider-container--vertical {\n display: flex;\n flex-direction: column;\n height: var(--spectrum-colorslider-default-length);\n}\n\n.spectrum-ColorSlider {\n position: relative;\n display: block;\n width: 100%;\n height: var(--spectrum-colorslider-height);\n border-radius: var(--spectrum-colorslider-border-radius);\n\n /* Otherwise we randomly drag a file icon */\n user-select: none;\n touch-action: none;\n\n cursor: default;\n\n /* The checkerboard is a separate element so that the gradient is overlaid on top. */\n &:before {\n content: \"\";\n z-index: -1;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n border-radius: var(--spectrum-colorslider-border-radius);\n background-size: var(--spectrum-global-dimension-static-size-200)\n var(--spectrum-global-dimension-static-size-200);\n background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100),\n var(--spectrum-global-dimension-static-size-100)\n calc(-1 * var(--spectrum-global-dimension-static-size-100)),\n calc(-1 * var(--spectrum-global-dimension-static-size-100)) 0;\n }\n\n &.is-focused {\n z-index: 2;\n\n .spectrum-ColorSlider-handle {\n @extend %spectrum-ColorControl-handle--focused;\n }\n }\n\n &.is-disabled {\n pointer-events: none;\n }\n}\n\n.spectrum-ColorSlider--vertical {\n display: inline-block;\n\n width: var(--spectrum-colorslider-vertical-width);\n flex: 1;\n\n .spectrum-ColorSlider-handle {\n left: 50%;\n top: 0;\n }\n}\n\n.spectrum-ColorSlider-handle {\n left: 0;\n top: 50%;\n\n &:after {\n border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius);\n width: var(--spectrum-colorslider-handle-hitarea-width);\n height: var(--spectrum-colorslider-handle-hitarea-height);\n }\n}\n\n.spectrum-ColorSlider-slider {\n @extend %spectrum-ColorControl-hiddenField;\n}\n",":root {\n /* todo: fix this in DNA */\n --spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color);\n}\n\n.spectrum-ColorSlider {\n background-color: var(--spectrum-global-color-static-white);\n box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color);\n\n &:before {\n /* Add a half-percent to fix diagonal line issue in Chrome on non-retina displays */\n background-image:\n linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),\n linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),\n linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%),\n linear-gradient(45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%);\n }\n\n &.is-disabled {\n background: var(--spectrum-colorslider-fill-color-disabled) !important;\n box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color-disabled);\n }\n\n .spectrum-ColorSlider-handle {\n margin: 0;\n }\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
1
+ {"mappings":"AAYA;;;;;;;;;;;;;;;;AA8BE;;;;AAAA;;;;AAKA;;;;;;;;;;AAUA;;;;AAKF;;;;;;;AASA;;;AAKA;;;;;;AAMA;;;;;;;AAaE;;;;;;AAKE;;;;AAMJ;;;;AAIA;EACE;;;;;;;;;ACnGF;;;;;;;;;;;;;AAuBE;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE;;;;;;;AChDF;;;;;;;;;;;;;AAcE;;;;AAIE;;;;;;;AAJF;;;;AAIE;;;;;;;AAUF;;;;AAKA;;;;;;;;;;;AAYF;;;;;AAIE;;;;AAKF;;;;;;AAMA;;;;;;;;;;;;AAaI;;;;AAKJ;;;;AASI;;;;AAGE;;;;AAIA;;;;AAMN;EACI;;;;EAGA;;;;EAEE;;;;;ACxGN;;;;;;;;;;;;AAYA;;;;;;;;;;;;;AAcE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAMF;;;;;;;AAME;;;;;;;;AAAA;;;;;;;;AASA;;;;;;;AAOA;;;;;;;AAQF;;;AAMI;;;;AAGE;;;;AAAA;;;;AAOF;;;;AAOF;;;;AAAA;;;;AAMF;EACE;;;;;;;;;AC1GF;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAWF;;;AAIA;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AASA;;;;;AAMF;EACE;;;;;;;;;ACvIF;;;;AAEE;;;;AAAA","sources":["packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/colorfield.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-ColorField-input:not(:placeholder-shown) {\n unicode-bidi: plaintext;\n &:dir(rtl) {\n text-align: end;\n }\n}\n"],"names":[],"version":3,"file":"main.css.map"}