Feat: theme builder label options

config/webpack/demo/webpack.config.dev.js

@@ -54,13 +54,9 @@ module.exports = {
           options: require("../../../.babelrc.js"),
         },
       },
-      {
-        test: /\.scss$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
-      },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"],
+        use: ["style-loader", "css-loader", "postcss-loader"],
       },
     ],
   },

demo/ts/app.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import "../styles.scss";
 
 import AccessibilityDemo from "./components/accessibility-demo";
 import AnimationDemo from "./components/animation-demo";

demo/ts/components/theme-builder/button.tsx

@@ -16,12 +16,15 @@ const Button = ({
   disabled = false,
   ...props
 }: ButtonProps) => {
+  const baseClasses =
+    "py-2 px-5 border-0 rounded-md cursor-pointer text-sm bg-primary text-white hover:bg-secondary disabled:bg-gray-200 disabled:cursor-not-allowed";
+
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       aria-label={ariaLabel || undefined}
-      className={`button ${className}`}
+      className={`${baseClasses} ${className}`}
       {...props}
     >
       {children}

demo/ts/components/theme-builder/color-picker.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { TiPencil } from "react-icons/ti";
+import clsx from "clsx";
+
+type ColorPickerProps = {
+  label?: string;
+  color: string;
+  id: string;
+  onColorChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  showColorName?: boolean;
+};
+
+const ColorPicker = ({
+  label,
+  color,
+  id,
+  onColorChange,
+  showColorName = false,
+}: ColorPickerProps) => {
+  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onColorChange) {
+      onColorChange(event);
+    }
+  };
+
+  return (
+    <fieldset>
+      {label && (
+        <label className="block mb-1 text-sm text-gray-900 dark:text-white font-bold">
+          {label}
+        </label>
+      )}
+      <div
+        className={clsx("relative inline-flex rounded-full group", {
+          "border-2 border-gray-200 p-0.5 cursor-pointer justify-between bg-gray-100":
+            showColorName,
+        })}
+      >
+        <div className="flex items-center">
+          <div className="relative">
+            <div
+              className={clsx(
+                "block w-[35px] h-[35px] rounded-full cursor-pointer transition-all justify-center items-center after:content-[''] after:block after:w-full after:h-full after:rounded-[inherit] after:bg-currentColor",
+                {
+                  "outline-2 border-2 border-white outline outline-gray-200":
+                    !showColorName,
+                },
+                { "w-[30px] h-[30px] p-0.5": showColorName },
+              )}
+              style={{
+                color,
+              }}
+            />
+            {!showColorName && (
+              <div
+                className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover:opacity-100 ${
+                  isPickerOpen ? "opacity-100" : ""
+                }`}
+              >
+                <TiPencil />
+              </div>
+            )}
+          </div>
+          {showColorName && (
+            <span
+              className={
+                "text-sm font-medium text-gray-900 uppercase ml-2 cursor-pointer"
+              }
+            >
+              {color}
+            </span>
+          )}
+        </div>
+        {showColorName && (
+          <div
+            className={`text-gray-300 flex justify-center items-center text-xl rounded-full place-items-end ml-6 mr-1`}
+          >
+            <TiPencil />
+          </div>
+        )}
+        <input
+          id={id}
+          className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover:border-currentColor ${
+            isPickerOpen ? "border-currentColor" : ""
+          }`}
+          type="color"
+          value={color}
+          onChange={handleChange}
+          onFocus={() => setIsPickerOpen(true)}
+          onBlur={() => setIsPickerOpen(false)}
+        />
+      </div>
+    </fieldset>
+  );
+};
+
+export default ColorPicker;

demo/ts/components/theme-builder/color-scale-options.tsx

@@ -1,17 +1,16 @@
 import React from "react";
-import { ThemeOption } from ".";
-import { ColorScalePropType } from "victory-core";
+import { ColorScalePropType, VictoryThemeDefinition } from "victory-core";
 import Select from "./select";
-import { TiPencil } from "react-icons/ti";
+import ColorPicker from "./color-picker";
 
-type ColorChangeArgs = {
+export type ColorChangeArgs = {
   event: React.ChangeEvent<HTMLInputElement>;
   index: number;
   colorScale: string;
 };
 
 type ColorScaleOptionsProps = {
-  activeTheme?: ThemeOption;
+  palette?: VictoryThemeDefinition["palette"];
   activeColorScale?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
   onColorScaleChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
@@ -44,49 +43,9 @@ const colorScales = [
   },
 ];
 
-type ColorPickerProps = {
-  color: string;
-  index: number;
-  onColorChange: (args: ColorChangeArgs) => void;
-  colorScale: string;
-};
-
-const ColorPicker = ({
-  color,
-  index,
-  onColorChange,
-  colorScale,
-}: ColorPickerProps) => {
-  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
-
-  return (
-    <div className={`color-picker ${isPickerOpen ? "open" : ""}`}>
-      <label
-        htmlFor={`color-${index}`}
-        className="color-picker__label"
-        style={{
-          color,
-        }}
-      />
-      <input
-        id={`color-${index}`}
-        className="color-picker__input"
-        type="color"
-        value={color}
-        onChange={(event) => onColorChange({ event, index, colorScale })}
-        onFocus={() => setIsPickerOpen(true)}
-        onBlur={() => setIsPickerOpen(false)}
-      />
-      <div className="color-picker__icon">
-        <TiPencil />
-      </div>
-    </div>
-  );
-};
-
 const ColorScaleOptions = ({
   activeColorScale,
-  activeTheme,
+  palette,
   onColorChange,
   onColorScaleChange,
 }: ColorScaleOptionsProps) => {
@@ -99,18 +58,21 @@ const ColorScaleOptions = ({
         options={colorScales}
         label="Color Scale"
       />
-      <div className="color-scale__colors">
-        {activeTheme?.config?.palette?.[activeColorScale as string]?.map(
-          (color, i) => (
-            <ColorPicker
-              key={i}
-              color={color}
-              index={i}
-              onColorChange={onColorChange}
-              colorScale={activeColorScale as string}
-            />
-          ),
-        )}
+      <div className="flex flex-wrap gap-3 mb-5">
+        {palette?.[activeColorScale as string]?.map((color, i) => (
+          <ColorPicker
+            key={i}
+            color={color}
+            id={`color-${i}`}
+            onColorChange={(event) =>
+              onColorChange({
+                event,
+                index: i,
+                colorScale: activeColorScale as string,
+              })
+            }
+          />
+        ))}
       </div>
     </section>
   );

demo/ts/components/theme-builder/config-preview.tsx

@@ -30,17 +30,23 @@ const ConfigPreview = ({ config, onClose }: ConfigPreviewProps) => {
   };
 
   return (
-    <div className="config-preview">
-      <button onClick={handleClose} className="config-preview__close-button">
+    <div className="fixed top-0 right-0 bottom-0 w-full p-10 z-20 bg-white flex flex-col">
+      <button
+        onClick={handleClose}
+        className="absolute top-3 right-3 bg-transparent border-0 text-xl"
+      >
         &times;
       </button>
       <h2>Theme Config Preview</h2>
-      <SyntaxHighlighter language="json" className="config-preview__code">
+      <SyntaxHighlighter
+        language="json"
+        className="flex-1 overflow-auto border border-gray-200 p-3 bg-gray-100"
+      >
         {JSON.stringify(config, null, 2)}
       </SyntaxHighlighter>
-      <div className="config-preview__copy-container">
+      <div className="flex items-center justify-end gap-3 mt-5">
         {copyStatus && (
-          <span className="config-preview__copy-status">{copyStatus}</span>
+          <span className="text-gray-300 text-xs italic">{copyStatus}</span>
         )}
         <Button onClick={handleCopyThemeConfig} ariaLabel="Copy to Clipboard">
           Copy to Clipboard