Added Improved Color Picker Using React-Aria Color Component

website/theme/components/ColorPickerSwatch/ColorArea.js

@@ -0,0 +1,70 @@
+import { useColorArea } from "@react-aria/color";
+import { useFocusRing } from "@react-aria/focus";
+import { useColorAreaState } from "@react-stately/color";
+import { useRef } from "react";
+
+import { THUMB_SIZE, FOCUSED_THUMB_SIZE, SIZE, BORDER_RADIUS } from "./Shared";
+
+export function ColorArea(props) {
+  const inputXRef = useRef(null);
+  const inputYRef = useRef(null);
+  const containerRef = useRef(null);
+
+  const state = useColorAreaState(props);
+
+  const { isDisabled } = props;
+
+  const {
+    colorAreaProps,
+    gradientProps,
+    xInputProps,
+    yInputProps,
+    thumbProps,
+  } = useColorArea({ ...props, inputXRef, inputYRef, containerRef }, state);
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+
+  return (
+    <div
+      ref={containerRef}
+      {...colorAreaProps}
+      style={{
+        ...colorAreaProps.style,
+        width: SIZE,
+        height: SIZE,
+        borderRadius: BORDER_RADIUS,
+        opacity: isDisabled ? 0.3 : undefined,
+      }}
+    >
+      <div
+        {...gradientProps}
+        style={{
+          backgroundColor: isDisabled ? "rgb(142, 142, 142)" : undefined,
+          ...gradientProps.style,
+          borderRadius: BORDER_RADIUS,
+          height: SIZE,
+          width: SIZE,
+        }}
+      />
+      <div
+        {...thumbProps}
+        style={{
+          ...thumbProps.style,
+          background: isDisabled
+            ? "rgb(142, 142, 142)"
+            : state.getDisplayColor().toString("css"),
+          border: `2px solid ${isDisabled ? "rgb(142, 142, 142)" : "white"}`,
+          borderRadius: "50%",
+          boxShadow: "0 0 0 1px black, inset 0 0 0 1px black",
+          boxSizing: "border-box",
+          height: isFocusVisible ? FOCUSED_THUMB_SIZE + 4 : THUMB_SIZE,
+          transform: "translate(-50%, -50%)",
+          width: isFocusVisible ? FOCUSED_THUMB_SIZE + 4 : THUMB_SIZE,
+        }}
+      >
+        <input ref={inputXRef} {...xInputProps} {...focusProps} />
+        <input ref={inputYRef} {...yInputProps} {...focusProps} />
+      </div>
+    </div>
+  );
+}

website/theme/components/ColorPickerSwatch/ColorSlider.js

@@ -0,0 +1,82 @@
+import { useColorSlider } from "@react-aria/color";
+import { useFocusRing } from "@react-aria/focus";
+import { useLocale } from "@react-aria/i18n";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { useColorSliderState } from "@react-stately/color";
+import { useRef } from "react";
+
+// import { FOCUSED_THUMB_SIZE, SIZE } from "./Shared";
+
+export function ColorSlider(props) {
+  let { locale } = useLocale();
+  let state = useColorSliderState({ ...props, locale });
+  let trackRef = useRef(null);
+  let inputRef = useRef(null);
+
+  // Default label to the channel name in the current locale
+  let label = props.label || state.value.getChannelName(props.channel, locale);
+  // labelProps, outputProps USED THEM FOR LABELS
+  let { trackProps, thumbProps, inputProps } = useColorSlider(
+    {
+      ...props,
+      label,
+      trackRef,
+      inputRef,
+    },
+    state
+  );
+
+  let { focusProps, isFocusVisible } = useFocusRing();
+  const thumbCls = "w-3 h-5"; // 20px
+  const heightCls = "h-4"; // 28px
+  return (
+    <div
+      className="flex flex-col items-center w-full"
+      // style={{
+      //   width: SIZE,
+      // }}
+    >
+      {/* Create a flex container for the label and output element. */}
+      {/* <div style={{ display: "flex", alignSelf: "stretch" }}>
+        <label {...labelProps}>{label}</label>
+        <output {...outputProps} style={{ flex: "1 0 auto", textAlign: "end" }}>
+          {state.value.formatChannelValue(props.channel, locale)}
+        </output>
+      </div> */}
+      {/* The track element holds the visible track line and the thumb. */}
+      <div
+        className={`relative w-full rounded-2xl [forced-color-adjust:none] ${heightCls}`}
+        {...trackProps}
+        ref={trackRef}
+      >
+        <div className="color-slider-track-background"></div>
+        <div
+          className="color-slider-track-color"
+          style={{
+            ...trackProps.style,
+          }}
+        ></div>
+        <div
+          className={`color-slider-thumb rounded-md absolute top-2 border border-white box-border ${thumbCls} ${
+            isFocusVisible ? " is-focused" : ""
+          }`}
+          {...thumbProps}
+          style={{
+            ...thumbProps.style,
+          }}
+        >
+          <div className="color-slider-thumb-background"></div>
+          <div
+            className="color-slider-thumb-color"
+            style={{
+              background: state.getDisplayColor().toString("css"),
+            }}
+          ></div>
+          <VisuallyHidden>
+            <input ref={inputRef} {...inputProps} {...focusProps} />
+          </VisuallyHidden>
+        </div>
+      </div>
+    </div>
+  );
+}

website/theme/components/ColorPickerSwatch/ColorSwatch.js

@@ -0,0 +1,19 @@
+export function ColorSwatch(props) {
+  let { value, ...otherProps } = props;
+  return (
+    <div
+      aria-label={value.toString("css")}
+      className="inline-block rounded-md [forced-color-adjust:none] relative w-10 h-10 m-0.5 overflow-hidden"
+      role="img"
+      {...otherProps}
+    >
+      <div className="color-preview-swatch-background" />
+      <div
+        className="color-preview-swatch-color"
+        style={{
+          backgroundColor: value.toString("css"),
+        }}
+      />
+    </div>
+  );
+}

website/theme/components/ColorPickerSwatch/Shared.ts

@@ -0,0 +1,4 @@
+export const SIZE = 216;
+export const FOCUSED_THUMB_SIZE = 28;
+export const THUMB_SIZE = 20;
+export const BORDER_RADIUS = 4;

website/theme/components/ColorPickerSwatch/index.css

@@ -0,0 +1,195 @@
+.color-slider-track-background,
+.color-slider-track-color {
+  width: 100%;
+  border-radius: 4px;
+  forced-color-adjust: none;
+  position: relative;
+}
+
+.color-slider-track-background,
+.color-slider-track-color {
+  position: absolute;
+  height: 100%;
+}
+
+.color-slider-thumb {
+  box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
+}
+
+.color-slider-thumb .is-focused {
+  width: 32px;
+  height: 32px;
+}
+
+.color-slider-track-background,
+.color-slider-thumb-background {
+  background-size: 16px 16px;
+  background-position: -2px -2px, -2px 6px, 6px -10px, -10px -2px;
+  background-color: white;
+  background-image: linear-gradient(
+      -45deg,
+      transparent 75.5%,
+      rgb(188, 188, 188) 75.5%
+    ),
+    linear-gradient(45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%),
+    linear-gradient(-45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%),
+    linear-gradient(45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%);
+}
+
+.color-slider-thumb-background,
+.color-slider-thumb-color {
+  position: absolute;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+
+.color-preview-swatch-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-size: 16px 16px;
+  background-position: -2px -2px, -2px 6px, 6px -10px, -10px -2px;
+  background-color: white;
+  background-image: linear-gradient(
+      -45deg,
+      transparent 75.5%,
+      rgb(188, 188, 188) 75.5%
+    ),
+    linear-gradient(45deg, transparent 75.5%, rgb(188, 188, 188) 75.5%),
+    linear-gradient(-45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%),
+    linear-gradient(45deg, rgb(188, 188, 188) 25.5%, transparent 25.5%);
+}
+
+.color-preview-swatch-color {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.visible {
+  visibility: visible;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.m-0\.5 {
+  margin: 0.125rem;
+}
+
+.box-border {
+  box-sizing: border-box;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.\[forced-color-adjust\:none\] {
+  forced-color-adjust: none;
+}