@react-spectrum/color 3.0.0-beta.31 → 3.0.0-beta.33

package/src/ColorThumb.tsx

@@ -13,10 +13,12 @@
 import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
 import {DOMProps} from '@react-types/shared';
-import React, {ReactElement} from 'react';
+import {Overlay} from '@react-spectrum/overlays';
+import React, {CSSProperties, ReactElement, RefObject, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
-import {useId} from '@react-aria/utils';
+import {useId, useLayoutEffect} from '@react-aria/utils';
+import {useProvider} from '@react-spectrum/provider';
 
 interface ColorThumbProps extends DOMProps {
   value: Color,
@@ -24,40 +26,85 @@ interface ColorThumbProps extends DOMProps {
   isDragging?: boolean, // shows the color loupe
   isFocused?: boolean, // makes the circle larger
   className?: string,
-  children?: ReactElement
+  children?: ReactElement,
+  style?: CSSProperties,
+  containerRef?: RefObject<HTMLElement>
 }
 
 function ColorThumb(props: ColorThumbProps) {
-  let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;
-
-  let patternId = useId();
+  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;
 
   let valueCSS = value.toString('css');
+  let loupeRef = useRef<HTMLElement | null>(null);
+  let provider = useProvider();
 
   return (
-    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>
+    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>
       <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />
-      <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isDragging})} aria-hidden="true">
-        <pattern id={patternId} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x="0" y="0" width="16" height="16" />
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="0" y="0" width="8" height="8" />
-          <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="8" y="8" width="8" height="8" />
-        </pattern>
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
-          d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-          fill={`url(#${patternId})`} />
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
-          d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-          fill={valueCSS} />
-        <path
-          className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}
-          d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" />
-      </svg>
+      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>
+        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />
+      </Overlay>
       {children}
     </div>
   );
 }
 
+// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
+function ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {
+  let patternId = useId();
+
+  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
+  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});
+  useLayoutEffect(() => {
+    let rect = containerRef.current?.getBoundingClientRect();
+    setContainerRect({
+      top: rect?.top || 0,
+      left: rect?.left || 0,
+      width: rect?.width || 0,
+      height: rect?.height || 0
+    });
+  }, [containerRef]);
+
+  // Compute the pixel position of the thumb.
+  let thumbTop = style.top || '50%';
+  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {
+    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
+  }
+
+  let thumbLeft = style.left || '50%';
+  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {
+    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
+  }
+
+  return (
+    <svg
+      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}
+      style={{
+        // Position relative to the viewport.
+        position: 'fixed',
+        top: containerRect.top + thumbTop,
+        left: containerRect.left + thumbLeft
+      }}
+      ref={loupeRef}
+      aria-hidden="true">
+      <pattern id={patternId} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x="0" y="0" width="16" height="16" />
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="0" y="0" width="8" height="8" />
+        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x="8" y="8" width="8" height="8" />
+      </pattern>
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
+        d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+        fill={`url(#${patternId})`} />
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}
+        d="M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+        fill={valueCSS} />
+      <path
+        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}
+        d="M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z" />
+    </svg>
+  );
+}
+
 export {ColorThumb};

package/src/ColorWheel.tsx

@@ -12,6 +12,7 @@
 
 import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorThumb} from './ColorThumb';
+import {ColorWheelContext, useContextProps} from 'react-aria-components';
 import {FocusableRef} from '@react-types/shared';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {SpectrumColorWheelProps} from '@react-types/color';
@@ -26,13 +27,14 @@ const WHEEL_THICKNESS = 24;
 
 function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
+  let inputRef = useRef(null);
+  let containerRef = useFocusableRef(ref, inputRef);
+  [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);
 
   let {isDisabled} = props;
   let size = props.size && dimensionValue(props.size);
   let {styleProps} = useStyleProps(props);
 
-  let inputRef = useRef(null);
-  let containerRef = useFocusableRef(ref, inputRef);
 
   let [wheelRadius, setWheelRadius] = useState<number>(0);
   let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
@@ -96,6 +98,7 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
         isFocused={isFocusVisible}
         isDisabled={isDisabled}
         isDragging={state.isDragging}
+        containerRef={containerRef}
         className={classNames(styles, 'spectrum-ColorWheel-handle')}
         {...thumbProps}>
         <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />

package/src/index.ts

@@ -15,4 +15,14 @@ export {ColorArea} from './ColorArea';
 export {ColorWheel} from './ColorWheel';
 export {ColorSlider} from './ColorSlider';
 export {ColorField} from './ColorField';
+export {ColorSwatch} from './ColorSwatch';
+export {ColorPicker} from './ColorPicker';
+export {ColorEditor} from './ColorEditor';
+export {ColorSwatchPicker} from './ColorSwatchPicker';
+export {parseColor, getColorChannels} from '@react-stately/color';
 export type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';
+export type {SpectrumColorSwatchProps} from './ColorSwatch';
+export type {SpectrumColorPickerProps} from './ColorPicker';
+export type {SpectrumColorEditorProps} from './ColorEditor';
+export type {SpectrumColorSwatchPickerProps} from './ColorSwatchPicker';
+export type {Color, ColorSpace, ColorFormat} from '@react-types/color';

package/dist/main.css

@@ -1 +0,0 @@
-.hoc2UW_spectrum-ColorHandle{z-index:1;box-sizing:border-box;width:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));height:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));margin-left:calc(-1*calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2));margin-top:calc(-1*calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2));border-width:var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);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));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;border-style:solid;border-radius:100%;display:block;position:absolute}.hoc2UW_spectrum-ColorHandle:after{content:"";left:calc(50% - calc(var(--spectrum-global-dimension-size-300)/2));top:calc(50% - calc(var(--spectrum-global-dimension-size-300)/2));width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:100%;display:block;position:absolute}.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled{pointer-events:none}.hoc2UW_spectrum-ColorControl-handle--focused{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.hoc2UW_spectrum-ColorHandle-color{border-radius:100%;width:100%;height:100%}.hoc2UW_spectrum-ColorHandle{border-color:var(--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white));box-shadow:0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b;background-color:var(--spectrum-global-color-static-white,#fff);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%)}.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled{border-color:var(--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-colorhandle-fill-color-disabled,var(--spectrum-global-color-gray-300));box-shadow:none}.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled .hoc2UW_spectrum-ColorHandle-color{display:none}.hoc2UW_spectrum-ColorHandle-color{box-shadow:inset 0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b}@media (forced-colors:active){.hoc2UW_spectrum-ColorHandle{forced-color-adjust:none;--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:GrayText;--spectrum-colorhandle-inner-border-color:ButtonText;--spectrum-colorhandle-outer-border-color:ButtonFace}}.HpWpfq_spectrum-ColorLoupe{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);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);transform:translate(0,var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200,16px));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));pointer-events:none;transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute}.HpWpfq_spectrum-ColorLoupe.HpWpfq_is-open{opacity:1;z-index:2;transform:translate(0)}.HpWpfq_spectrum-ColorLoupe-outer{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,#3232321a)}.HpWpfq_spectrum-ColorLoupe-inner-background{fill:var(--spectrum-global-color-static-white,#fff)}.HpWpfq_spectrum-ColorLoupe-inner-checker{fill:var(--spectrum-global-color-static-gray-500,#bcbcbc)}@media (forced-colors:active){.HpWpfq_spectrum-ColorLoupe{forced-color-adjust:none;--spectrum-colorloupe-inner-border-color:ButtonText;--spectrum-colorloupe-outer-border-color:ButtonFace}}.lm1DSq_spectrum-ColorArea{inline-size:var(--spectrum-colorarea-default-width,var(--spectrum-global-dimension-size-2400));block-size:var(--spectrum-colorarea-default-height,var(--spectrum-global-dimension-size-2400));min-inline-size:var(--spectrum-colorarea-min-width,var(--spectrum-global-dimension-size-800));min-block-size:var(--spectrum-colorarea-min-height,var(--spectrum-global-dimension-size-800));border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.lm1DSq_spectrum-ColorArea.lm1DSq_is-focused{z-index:2}.lm1DSq_spectrum-ColorArea.lm1DSq_is-focused .lm1DSq_spectrum-ColorArea-handle{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring{z-index:2}.lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring .lm1DSq_spectrum-ColorArea-handle{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled{pointer-events:none}.lm1DSq_spectrum-ColorArea:before{content:"";z-index:1;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));position:absolute;top:0;bottom:0;left:0;right:0}.lm1DSq_spectrum-ColorArea-handle{top:0;left:0}.lm1DSq_spectrum-ColorArea-handle:focus-within{z-index:2}.lm1DSq_spectrum-ColorArea-gradient{border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));width:100%;height:100%}.lm1DSq_spectrum-ColorArea-slider{opacity:.0001;z-index:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}.lm1DSq_spectrum-ColorArea:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.lm1DSq_spectrum-ColorArea-gradient,.lm1DSq_spectrum-ColorHandle-color{forced-color-adjust:none}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled{background:var(--spectrum-colorarea-fill-color-disabled,var(--spectrum-global-color-gray-300))}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled:before{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))}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled .lm1DSq_spectrum-ColorArea-gradient{display:none}@media (forced-colors:active){.lm1DSq_spectrum-ColorArea{--spectrum-colorarea-fill-color-disabled:GrayText;forced-color-adjust:none}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled{forced-color-adjust:none}}.qPIMxa_spectrum-ColorControl-hiddenField{opacity:.0001;z-index:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel{width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-track-thickness:var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300));-webkit-user-select:none;user-select:none;touch-action:none;cursor:default;border-radius:100%;display:block;position:relative}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel .qPIMxa_spectrum-ColorWheel-handle{margin:0}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-focused{z-index:2}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled{pointer-events:none}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-dragged{z-index:2}.qPIMxa_spectrum-ColorWheel-gradient{z-index:0;width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);position:relative}.qPIMxa_spectrum-ColorWheel-gradient:before,.qPIMxa_spectrum-ColorWheel-gradient:after{content:"";border-width:var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin));border-style:solid;border-radius:100%;position:absolute}.qPIMxa_spectrum-ColorWheel-gradient:before{top:0;bottom:0;left:0;right:0}.qPIMxa_spectrum-ColorWheel-gradient:after{top:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));left:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));bottom:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));right:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)))}.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient{background:var(--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:before,.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:after{border-color:var(--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300))}.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-segment{display:none}.qPIMxa_spectrum-ColorWheel-gradient:before,.qPIMxa_spectrum-ColorWheel-gradient:after{border-color:var(--spectrum-colorarea-border-color)}@media (forced-colors:active){.qPIMxa_spectrum-ColorWheel{forced-color-adjust:none;--spectrum-colorwheel-fill-color-disabled:GrayText;--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}.WJOmgG_spectrum-ColorControl-hiddenField{opacity:.0001;z-index:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}.WJOmgG_spectrum-ColorSlider-container--horizontal{width:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400))}.WJOmgG_spectrum-ColorSlider-container--vertical{height:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400));flex-direction:column;display:flex}.WJOmgG_spectrum-ColorSlider{height:var(--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300));border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));-webkit-user-select:none;user-select:none;touch-action:none;cursor:default;width:100%;display:block;position:relative}.WJOmgG_spectrum-ColorSlider .WJOmgG_spectrum-ColorSlider-handle.WJOmgG_spectrum-ColorSlider-handle{margin:0}.WJOmgG_spectrum-ColorSlider:before{content:"";z-index:-1;border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);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;position:absolute;top:0;bottom:0;left:0;right:0}.WJOmgG_spectrum-ColorSlider.WJOmgG_is-focused{z-index:2}.WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled{pointer-events:none}.WJOmgG_spectrum-ColorSlider--vertical{width:var(--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300));flex:1;display:inline-block}.WJOmgG_spectrum-ColorSlider--vertical .WJOmgG_spectrum-ColorSlider-handle{top:0;left:50%}.WJOmgG_spectrum-ColorSlider-handle{top:50%;left:0}.WJOmgG_spectrum-ColorSlider-handle:after{width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:0%}.WJOmgG_spectrum-ColorSlider-labelContainer{grid-template-columns:auto 1fr auto;grid-template-areas:"WJOmgG_label WJOmgG_contextualHelp WJOmgG_value";justify-items:start;display:grid}.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp{margin-inline-start:var(--spectrum-global-dimension-size-50);margin-top:var(--spectrum-global-dimension-size-25);grid-area:WJOmgG_contextualHelp}.WJOmgG_spectrum-ColorSlider-valueLabel{grid-area:WJOmgG_value;margin-inline-start:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider{background-color:var(--spectrum-global-color-static-white,#fff);box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.WJOmgG_spectrum-ColorSlider:before{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%)}.WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled{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));background:var(--spectrum-colorslider-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}@media (forced-colors:active){.WJOmgG_spectrum-ColorSlider{forced-color-adjust:none;--spectrum-colorslider-fill-color-disabled:GrayText;--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}.UccskW_react-spectrum-ColorField-input:not(:placeholder-shown){unicode-bidi:plaintext}.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)){text-align:end}.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)){text-align:end}