@react-spectrum/color 3.0.0-nightly.4564 → 3.0.0-nightly.4578

package/dist/{vars.ef2c01b8.css → vars.cc682729.css}

@@ -4,8 +4,8 @@
   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));
+  margin-top: calc(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) * -1 - var(--spectrum-global-dimension-static-size-200, 16px));
+  margin-left: calc(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;
@@ -28,7 +28,7 @@
 }
 
 .HpWpfq_spectrum-ColorLoupe-inner-checker {
-  fill: var(--spectrum-global-color-static-gray-500, #bcbcbc);
+  fill: #e6e6e6;
 }
 
 @media (forced-colors: active) {
@@ -38,4 +38,4 @@
     --spectrum-colorloupe-outer-border-color: ButtonFace;
   }
 }
-/*# sourceMappingURL=vars.ef2c01b8.css.map */
+/*# sourceMappingURL=vars.cc682729.css.map */

package/dist/{vars.ef2c01b8.css.map → vars.cc682729.css.map}

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;AAuBE;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorloupe/vars.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"],"names":[],"version":3,"file":"vars.ef2c01b8.css.map"}
+{"mappings":"AAYA;;;;;;;;;;;;;AA0BE;;;;;;AAOF;;;;;;AASA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorloupe/vars.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"],"names":[],"version":3,"file":"vars.cc682729.css.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/color",
-  "version": "3.0.0-nightly.4564+315950cef",
+  "version": "3.0.0-nightly.4578+b09a14eb1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,23 +36,29 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/color": "3.0.0-nightly.4564+315950cef",
-    "@react-aria/focus": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/i18n": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/interactions": "3.0.0-nightly.2852+315950cef",
-    "@react-aria/utils": "3.0.0-nightly.2852+315950cef",
-    "@react-spectrum/form": "3.0.0-nightly.2852+315950cef",
-    "@react-spectrum/label": "3.16.5-nightly.4564+315950cef",
-    "@react-spectrum/textfield": "3.0.0-nightly.2852+315950cef",
-    "@react-spectrum/utils": "3.0.0-nightly.2852+315950cef",
-    "@react-stately/color": "3.5.4-nightly.4564+315950cef",
-    "@react-types/color": "3.0.0-nightly.4564+315950cef",
-    "@react-types/shared": "3.0.0-nightly.2852+315950cef",
-    "@react-types/textfield": "3.0.0-nightly.2852+315950cef",
-    "@swc/helpers": "^0.5.0"
+    "@react-aria/color": "3.0.0-nightly.4578+b09a14eb1",
+    "@react-aria/focus": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/i18n": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/interactions": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-aria/utils": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/dialog": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/form": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/label": "3.16.5-nightly.4578+b09a14eb1",
+    "@react-spectrum/overlays": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/picker": "3.14.4-nightly.4578+b09a14eb1",
+    "@react-spectrum/textfield": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/utils": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/view": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-stately/color": "3.5.4-nightly.4578+b09a14eb1",
+    "@react-types/color": "3.0.0-nightly.4578+b09a14eb1",
+    "@react-types/shared": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-types/textfield": "3.0.0-nightly.2866+b09a14eb1",
+    "@swc/helpers": "^0.5.0",
+    "react-aria-components": "1.1.2-nightly.4578+b09a14eb1"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2852+315950cef"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2866+b09a14eb1",
+    "@react-spectrum/style-macro-s1": "1.0.0-nightly.4578+b09a14eb1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -62,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "315950cef7952de30220661f62ab79ba6dcb59cc"
+  "gitHead": "b09a14eb1854d9d52e08739e30aa8fae51f1595a"
 }

package/src/ColorArea.tsx

@@ -11,6 +11,7 @@
  */
 
 import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
+import {ColorAreaContext, useContextProps} from 'react-aria-components';
 import {ColorThumb} from './ColorThumb';
 import {FocusableRef} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
@@ -24,20 +25,20 @@ import {useProviderProps} from '@react-spectrum/provider';
 
 function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
+  let inputXRef = useRef(null);
+  let inputYRef = useRef(null);
+  let containerRef = useFocusableRef(ref, inputXRef);
+  [props, containerRef] = useContextProps(props, containerRef, ColorAreaContext);
 
   let {isDisabled} = props;
   let size = props.size && dimensionValue(props.size);
   let {styleProps} = useStyleProps(props);
 
-  let inputXRef = useRef(null);
-  let inputYRef = useRef(null);
-  let containerRef = useFocusableRef(ref, inputXRef);
 
   let state = useColorAreaState(props);
 
   let {
     colorAreaProps,
-    gradientProps,
     xInputProps,
     yInputProps,
     thumbProps
@@ -59,18 +60,18 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
       }
       ref={containerRef}
       style={{
-        ...colorAreaProps.style,
+        ...(isDisabled ? {} : colorAreaProps.style),
         ...styleProps.style,
         // Workaround around https://github.com/adobe/spectrum-css/issues/1032
         width: size,
         height: size
       }}>
-      <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />
       <ColorThumb
         value={state.getDisplayColor()}
         isFocused={isFocusVisible}
         isDisabled={isDisabled}
         isDragging={state.isDragging}
+        containerRef={containerRef}
         className={classNames(styles, 'spectrum-ColorArea-handle')}
         {...thumbProps}>
         <div role="presentation">

package/src/ColorEditor.tsx

@@ -0,0 +1,63 @@
+import {ColorArea} from './ColorArea';
+import {ColorField} from './ColorField';
+import {ColorSlider} from './ColorSlider';
+import {ColorSpace} from '@react-types/color';
+import {DOMRef} from '@react-types/shared';
+import {getColorChannels} from '@react-stately/color';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {Item, Picker} from '@react-spectrum/picker';
+import React, {CSSProperties, useState} from 'react';
+import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
+import {useDOMRef} from '@react-spectrum/utils';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+
+export interface SpectrumColorEditorProps {
+  /** Whether to hide the alpha channel color slider and color field. */
+  hideAlphaChannel?: boolean
+}
+
+function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
+  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
+  let domRef = useDOMRef(ref);
+  let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
+
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})()} ref={domRef}>
+      <div className={style({display: 'flex', gap: 4})()}>
+        <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
+        <ColorSlider colorSpace="hsb" channel="hue" orientation="vertical" />
+        {!props.hideAlphaChannel &&
+          <ColorSlider channel="alpha" orientation="vertical" />
+        }
+      </div>
+      <div className={style({display: 'flex', gap: 4})()}>
+        <Picker 
+          aria-label={formatter.format('colorFormat')}
+          isQuiet
+          width="size-700"
+          menuWidth="size-1000"
+          selectedKey={format}
+          onSelectionChange={f => setFormat(f as typeof format)}>
+          <Item key="hex">{formatter.format('hex')}</Item>
+          <Item key="rgb">{formatter.format('rgb')}</Item>
+          <Item key="hsl">{formatter.format('hsl')}</Item>
+          <Item key="hsb">{formatter.format('hsb')}</Item>
+        </Picker>
+        {format === 'hex'
+          ? <ColorField isQuiet width="size-1000" aria-label={formatter.format('hex')} />
+          : getColorChannels(format).map(channel => (
+            <ColorField key={channel} colorSpace={format === 'hex' ? 'rgb' : format} channel={channel} isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />
+          ))}
+        {!props.hideAlphaChannel &&
+          <ColorField channel="alpha" isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ColorEditor provides a default UI for editing colors within a ColorPicker.
+ */
+let _ColorEditor = React.forwardRef(ColorEditor);
+export {_ColorEditor as ColorEditor};

package/src/ColorField.tsx

@@ -11,46 +11,99 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
+import {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';
+import {ColorFieldContext, useContextProps} from 'react-aria-components';
 import React, {Ref, useRef} from 'react';
-import {SpectrumColorFieldProps} from '@react-types/color';
 import styles from './colorfield.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
 import {TextFieldRef} from '@react-types/textfield';
-import {useColorField} from '@react-aria/color';
-import {useColorFieldState} from '@react-stately/color';
+import {useColorChannelField, useColorField} from '@react-aria/color';
+import {useColorChannelFieldState, useColorFieldState} from '@react-stately/color';
 import {useFormProps} from '@react-spectrum/form';
+import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
 function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
   props = useFormProps(props);
+  [props] = useContextProps(props, null, ColorFieldContext);
+  if (props.placeholder) {
+    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
+  }
+
+  if (props.channel) {
+    return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
+  } else {
+    return <HexColorField {...props} forwardedRef={ref} />;
+  }
+}
+
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+const _ColorField = React.forwardRef(ColorField);
+export {_ColorField as ColorField};
+
+interface ColorChannelFieldProps extends Omit<SpectrumColorFieldProps, 'channel'> {
+  channel: ColorChannel,
+  forwardedRef: Ref<TextFieldRef>
+}
+
+function ColorChannelField(props: ColorChannelFieldProps) {
   let {
     // These disabled props are handled by the state hook
     value,          // eslint-disable-line @typescript-eslint/no-unused-vars
     defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars
     onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars
+    validate,       // eslint-disable-line @typescript-eslint/no-unused-vars
+    forwardedRef,
+    ...otherProps
+  } = props;
+  let {locale} = useLocale();
+  let state = useColorChannelFieldState({
+    ...props,
+    locale
+  });
+
+  let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+  let result = useColorChannelField(otherProps, state, inputRef);
+
+  return (
+    <>
+      <TextFieldBase
+        {...otherProps}
+        ref={forwardedRef}
+        inputRef={inputRef}
+        {...result}
+        inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />
+      {props.name && <input type="hidden" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
+    </>
+  );
+}
+
+interface HexColorFieldProps extends SpectrumColorFieldProps {
+  forwardedRef: Ref<TextFieldRef>
+}
+
+function HexColorField(props: HexColorFieldProps) {
+  let {
+    // These disabled props are handled by the state hook
+    value,          // eslint-disable-line @typescript-eslint/no-unused-vars
+    defaultValue,   // eslint-disable-line @typescript-eslint/no-unused-vars
+    onChange,       // eslint-disable-line @typescript-eslint/no-unused-vars
+    forwardedRef,
     ...otherProps
   } = props;
   let state = useColorFieldState(props);
   let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
   let result = useColorField(otherProps, state, inputRef);
 
-  if (props.placeholder) {
-    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
-  }
-
   return (
     <TextFieldBase
       {...otherProps}
-      ref={ref}
+      ref={forwardedRef}
       inputRef={inputRef}
       {...result}
       inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />
   );
 }
-
-/**
- * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
- */
-const _ColorField = React.forwardRef(ColorField);
-export {_ColorField as ColorField};

package/src/ColorPicker.tsx

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';
+import {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';
+import {ColorSwatch} from './ColorSwatch';
+import {Content} from '@react-spectrum/view';
+import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
+import React, {ReactNode, useRef} from 'react';
+import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
+import {unwrapDOMRef, useFocusableRef} from '@react-spectrum/utils';
+import {useId} from '@react-aria/utils';
+
+export interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {
+  /** A visual label for the color picker. */
+  label?: ReactNode,
+  /** The contents of the color picker popover, e.g. `<ColorEditor />`. */
+  children?: ReactNode,
+  /**
+   * The size of the color swatch.
+   * @default "M"
+   */
+  size?: 'XS' | 'S' | 'M' | 'L',
+  /**
+   * The corner rounding of the color swatch.
+   * @default "default"
+   */
+  rounding?: 'default' | 'none' | 'full'
+}
+
+function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
+  let swatchRef = useRef(null);
+  let domRef = useFocusableRef(ref);
+  let labelId = useId();
+  return (
+    <AriaColorPicker {...props}>
+      <DialogTrigger type="popover" mobileType="tray" targetRef={unwrapDOMRef(swatchRef)}>
+        <Button 
+          ref={domRef}
+          className={style({
+            backgroundColor: 'transparent',
+            borderStyle: 'none',
+            padding: 0,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'text-to-control',
+            outlineStyle: 'none',
+            fontFamily: 'sans',
+            color: 'body',
+            fontSize: {
+              size: {
+                XS: 'xs',
+                S: 'sm',
+                M: 'base',
+                L: 'lg'
+              }
+            }
+          })({size: props.size || 'M'})}>
+          {({isFocusVisible}) => (
+            <>
+              <div
+                className={style({
+                  outlineStyle: {
+                    default: 'none',
+                    isFocusVisible: 'solid'
+                  },
+                  outlineColor: 'focus-ring',
+                  outlineWidth: 2,
+                  outlineOffset: 2,
+                  borderRadius: 'default'
+                })({isFocusVisible})}>
+                <ColorSwatch
+                  ref={swatchRef}
+                  size={props.size}
+                  rounding={props.rounding}
+                  aria-label={props['aria-label']}
+                  aria-labelledby={props['aria-labelledby']}
+                  aria-describedby={props['aria-describedby']}
+                  aria-details={props['aria-details']} />
+              </div>
+              {props.label && 
+                <span id={labelId}>{props.label}</span>
+              }
+            </>
+          )}
+        </Button>
+        <Dialog 
+          aria-labelledby={props.label ? labelId : props['aria-labelledby']}
+          aria-label={props['aria-label']}
+          UNSAFE_style={{
+            width: 'fit-content',
+            minWidth: 0,
+            margin: '0 auto' // Center within tray.
+          }}>
+          <Content 
+            UNSAFE_style={{
+              position: 'relative',
+              margin: 'calc(var(--spectrum-dialog-padding) * -1)',
+              padding: 'var(--spectrum-global-dimension-size-200)'
+            }}>
+            {props.children}
+          </Content>
+        </Dialog>
+      </DialogTrigger>
+    </AriaColorPicker>
+  );
+}
+
+/**
+ * A ColorPicker combines a swatch with a customizable popover for editing a color.
+ */
+let _ColorPicker = React.forwardRef(ColorPicker);
+export {_ColorPicker as ColorPicker};

package/src/ColorSlider.tsx

@@ -11,6 +11,7 @@
  */
 
 import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
+import {ColorSliderContext, useContextProps} from 'react-aria-components';
 import {ColorThumb} from './ColorThumb';
 import {FocusableRef} from '@react-types/shared';
 import {Label} from '@react-spectrum/label';
@@ -25,6 +26,10 @@ import {useProviderProps} from '@react-spectrum/provider';
 
 function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
+  let inputRef = useRef(null);
+  let trackRef = useRef(null);
+  let domRef = useFocusableRef(ref, inputRef);
+  [props, domRef] = useContextProps(props, domRef, ColorSliderContext);
 
   let {
     isDisabled,
@@ -39,10 +44,6 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
   let {styleProps} = useStyleProps(props);
   let {locale} = useLocale();
 
-  let inputRef = useRef(null);
-  let trackRef = useRef(null);
-  let domRef = useFocusableRef(ref, inputRef);
-
   let state = useColorSliderState({...props, locale});
 
   // If vertical and a label is provided, use it as an aria-label instead.
@@ -126,6 +127,7 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
           isFocused={isFocused && isFocusVisible}
           isDisabled={isDisabled}
           isDragging={state.isThumbDragging(0)}
+          containerRef={trackRef}
           className={classNames(styles, 'spectrum-ColorSlider-handle')}
           {...thumbProps}>
           <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />

package/src/ColorSwatch.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';
+import {Color} from '@react-types/color';
+import {ColorSwatchContext, useContextProps} from 'react-aria-components';
+import {DOMRef, StyleProps} from '@react-types/shared';
+import React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';
+import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
+import {useDOMRef, useStyleProps} from '@react-spectrum/utils';
+
+export interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {
+  /**
+   * The size of the ColorSwatch.
+   * @default "M"
+   */
+  size?: 'XS' | 'S' | 'M' | 'L',
+  /**
+   * The corner rounding of the ColorSwatch.
+   * @default "default"
+   */
+  rounding?: 'default' | 'none' | 'full'
+}
+
+interface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {
+  useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element
+}
+
+export const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
+
+function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+  let domRef = useDOMRef(ref);
+  [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);
+  let {colorSwatchProps, color} = useColorSwatch(props);
+  let {styleProps} = useStyleProps(props);
+  let ctx = useContext(SpectrumColorSwatchContext);
+  let {
+    size = ctx?.size || 'M',
+    rounding = ctx?.rounding || 'default'
+  } = props;
+
+  let swatch = (
+    <div
+      {...colorSwatchProps}
+      {...styleProps}
+      ref={domRef}
+      style={{
+        ...styleProps.style,
+        // TODO: should there be a distinction between transparent and no value (e.g. null)?
+        background: color.getChannelValue('alpha') > 0
+          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`
+          // Red slash to indicate there is no selected color.
+          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
+      }}
+      className={style({
+        size: {
+          size: {
+            XS: 4,
+            S: 6,
+            M: 8,
+            L: 10
+          }
+        },
+        borderRadius: {
+          rounding: {
+            default: 'default',
+            none: 'none',
+            full: 'full'
+          }
+        },
+        // Trick to create a partially transparent color from a variable.
+        // Ideally we'd use relative color syntax for this but it's not in Firefox yet.
+        borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        boxSizing: 'border-box',
+        forcedColorAdjust: 'none'
+      })({size, rounding})} />
+  );
+
+  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
+  if (ctx) {
+    return ctx.useWrapper(swatch, color, rounding);
+  }
+
+  return swatch;
+}
+
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+let _ColorSwatch = forwardRef(ColorSwatch);
+export {_ColorSwatch as ColorSwatch};