Function useColorSwatch

packages/react-aria/src/color/useColorSwatch.ts:46–81

(props: AriaColorSwatchProps)

 * A color swatch displays a preview of a selected color.
 */
export function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {
  let {color: value, colorName} = props;
  let nonNullValue = value || '#fff0';
  let color = useMemo(
    () => (typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue),
    [nonNullValue]
  );
  let {locale} = useLocale();
  let DOMProps = filterDOMProps(props, {labelable: true});
  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
  let id = useId(props.id);

  if (!colorName) {
    colorName =
      color.getChannelValue('alpha') === 0
        ? stringFormatter.format('transparent')
        : color.getColorName(locale);
  }

  return {
    colorSwatchProps: {
      ...DOMProps,
      role: 'img',
      'aria-roledescription': stringFormatter.format('colorSwatch'),
      'aria-label': [colorName, props['aria-label'] || ''].filter(Boolean).join(', '),
      'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,
      id,
      style: {
        backgroundColor: color.toString('css'),
        // @ts-ignore
        forcedColorAdjust: 'none'
      }
    },
    color: color || null
  };
}