@kilivi/payloadcms-theme-management 0.3.4 → 0.5.2

package/dist/fields/ThemeColorPickerField.css

@@ -1,138 +1,259 @@
+/* Theme Color Picker Field Styles */
+
 .theme-color-picker-field {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
+/* Field Header */
 .theme-color-picker-field .field-header {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .theme-color-picker-field .field-label {
   display: block;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 0.875rem;
-  color: var(--theme-text);
+  color: var(--theme-text, #1e293b);
   margin-bottom: 0.25rem;
 }
 
 .theme-color-picker-field .field-description {
   font-size: 0.75rem;
-  color: var(--theme-elevation-400);
+  color: var(--theme-elevation-400, #94a3b8);
   margin-top: 0.25rem;
+  line-height: 1.4;
 }
 
+/* Color Picker Container */
 .theme-color-picker-field .color-picker-container {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
+  position: relative;
 }
 
-.theme-color-picker-field .color-input-wrapper {
+.theme-color-picker-field .color-input-row {
   display: flex;
-  gap: 0.5rem;
-  flex: 1;
+  gap: 0.625rem;
+  align-items: center;
 }
 
-.theme-color-picker-field .color-input {
-  width: 60px;
-  height: 38px;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
+/* Color Swatch Button */
+.theme-color-picker-field .color-swatch-btn {
+  width: 48px;
+  height: 48px;
+  border: 2px solid var(--theme-elevation-200, #e2e8f0);
+  border-radius: 8px;
   cursor: pointer;
-  padding: 2px;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
 }
 
-.theme-color-picker-field .color-input:hover {
-  border-color: var(--theme-elevation-400);
+.theme-color-picker-field .color-swatch-btn:hover {
+  border-color: var(--theme-elevation-400, #94a3b8);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transform: scale(1.05);
 }
 
-.theme-color-picker-field .color-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
+.theme-color-picker-field .color-swatch-btn:focus {
+  outline: 2px solid var(--theme-elevation-500, #3b82f6);
+  outline-offset: 2px;
 }
 
-.theme-color-picker-field .text-input {
+/* Text Input */
+.theme-color-picker-field .color-text-input {
   flex: 1;
-  height: 38px;
-  padding: 0 0.75rem;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  font-family: monospace;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--theme-elevation-200, #e2e8f0);
+  border-radius: 6px;
   font-size: 0.875rem;
-  background: var(--theme-elevation-0);
-  color: var(--theme-text);
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  color: var(--theme-text, #1e293b);
+  background: var(--theme-elevation-0, #ffffff);
+  transition: all 0.2s ease;
 }
 
-.theme-color-picker-field .text-input:hover {
-  border-color: var(--theme-elevation-400);
+.theme-color-picker-field .color-text-input:hover {
+  border-color: var(--theme-elevation-300, #cbd5e1);
 }
 
-.theme-color-picker-field .text-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-  border-color: var(--theme-elevation-500);
+.theme-color-picker-field .color-text-input:focus {
+  outline: none;
+  border-color: var(--theme-elevation-500, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
-.theme-color-picker-field .text-input::placeholder {
-  color: var(--theme-elevation-400);
+.theme-color-picker-field .color-text-input::placeholder {
+  color: var(--theme-elevation-400, #94a3b8);
+  opacity: 0.7;
 }
 
-.theme-color-picker-field .text-input:invalid {
-  border-color: #ef4444;
+/* Color Picker Popover */
+.theme-color-picker-field .color-picker-popover {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  padding: 1rem;
+  background: var(--theme-elevation-0, #ffffff);
+  border: 1px solid var(--theme-elevation-200, #e2e8f0);
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  width: 280px;
+  animation: slideDown 0.2s ease;
 }
 
-.theme-color-picker-field .color-preview {
-  width: 120px;
-  height: 38px;
-  border-radius: 4px;
-  border: 1px solid var(--theme-elevation-200);
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Picker Header */
+.theme-color-picker-field .picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.875rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--theme-elevation-150, #f1f5f9);
+}
+
+.theme-color-picker-field .picker-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--theme-text, #1e293b);
+}
+
+.theme-color-picker-field .picker-close-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--theme-elevation-400, #94a3b8);
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 1.125rem;
+  line-height: 1;
+  transition: all 0.15s ease;
+}
+
+.theme-color-picker-field .picker-close-btn:hover {
+  background: var(--theme-elevation-100, #f8fafc);
+  color: var(--theme-text, #1e293b);
+}
+
+/* Hex Picker */
+.theme-color-picker-field .hex-picker {
+  width: 100%;
+  height: 160px;
+  border-radius: 8px;
   overflow: hidden;
 }
 
-.theme-color-picker-field .color-preview .preview-label {
-  font-size: 0.75rem;
-  font-family: monospace;
-  padding: 0.25rem 0.5rem;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 2px;
-  backdrop-filter: blur(4px);
-  color: #000;
-  font-weight: 500;
+/* Hex Input Row */
+.theme-color-picker-field .hex-input-row {
+  margin-top: 0.875rem;
 }
 
-.theme-color-picker-field .mini-preview {
-  margin-top: 1rem;
-  padding: 1rem;
+.theme-color-picker-field .hex-input {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--theme-elevation-150, #f1f5f9);
   border-radius: 6px;
-  border: 1px solid;
+  font-size: 0.8125rem;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  text-align: center;
+  color: var(--theme-text, #1e293b);
+  background: var(--theme-elevation-50, #f8fafc);
+  transition: all 0.15s ease;
 }
 
-.theme-color-picker-field .mini-preview .preview-card {
-  padding: 1rem;
-  border-radius: 4px;
-  border: 1px solid;
-  display: flex;
+.theme-color-picker-field .hex-input:hover {
+  border-color: var(--theme-elevation-200, #e2e8f0);
+  background: var(--theme-elevation-0, #ffffff);
+}
+
+.theme-color-picker-field .hex-input:focus {
+  outline: none;
+  border-color: var(--theme-elevation-500, #3b82f6);
+  background: var(--theme-elevation-0, #ffffff);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Color Swatches */
+.theme-color-picker-field .color-swatches {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--theme-elevation-150, #f1f5f9);
+}
+
+.theme-color-picker-field .swatches-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--theme-elevation-500, #64748b);
+  margin-bottom: 0.625rem;
+}
+
+.theme-color-picker-field .swatches-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
   gap: 0.5rem;
-  flex-wrap: wrap;
 }
 
-.theme-color-picker-field .mini-preview .preview-button {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  border: none;
-  font-size: 0.875rem;
-  font-weight: 500;
+.theme-color-picker-field .swatch-btn {
+  width: 100%;
+  aspect-ratio: 1;
+  border: 1.5px solid var(--theme-elevation-150, #f1f5f9);
+  border-radius: 6px;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: all 0.15s ease;
+  position: relative;
+}
+
+.theme-color-picker-field .swatch-btn:hover {
+  border-color: var(--theme-elevation-300, #cbd5e1);
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.theme-color-picker-field .swatch-btn.selected {
+  border: 2px solid var(--theme-elevation-800, #1e293b);
+  box-shadow: 0 0 0 2px var(--theme-elevation-0, #ffffff),
+              0 0 0 4px var(--theme-elevation-800, #1e293b);
+  transform: scale(1.05);
+}
+
+.theme-color-picker-field .swatch-btn:focus {
+  outline: 2px solid var(--theme-elevation-500, #3b82f6);
+  outline-offset: 2px;
+}
+
+/* React Colorful Overrides */
+.theme-color-picker-field .react-colorful {
+  border-radius: 8px;
+}
+
+.theme-color-picker-field .react-colorful__saturation {
+  border-radius: 8px 8px 0 0;
 }
 
-.theme-color-picker-field .mini-preview .preview-button:hover {
-  opacity: 0.9;
+.theme-color-picker-field .react-colorful__hue {
+  border-radius: 0 0 8px 8px;
+  height: 12px;
 }
 
-.theme-color-picker-field .mini-preview .preview-button.secondary {
-  border: 1px solid currentColor;
+.theme-color-picker-field .react-colorful__pointer {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }

package/dist/fields/ThemeColorPickerField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAqGvD,QAAA,MAAM,qBAAqB,EAAE,wBAwQ5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAiGvD,QAAA,MAAM,qBAAqB,EAAE,wBAsI5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/fields/ThemeColorPickerField.js

@@ -1,16 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField, useFormFields } from '@payloadcms/ui';
+import { useField } from '@payloadcms/ui';
 import { HexColorInput, HexColorPicker } from 'react-colorful';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-// Import CSS only in browser environment
-// This prevents Node.js from trying to import CSS directly
-// which causes ERR_UNKNOWN_FILE_EXTENSION error
+import { useCallback, useEffect, useRef, useState } from 'react';
+// Import CSS for styling
 if (typeof window !== 'undefined') {
-    // @ts-expect-error - Dynamic import of CSS is not recognized by TypeScript
-    import('./ThemeColorPickerField.css').catch((err)=>{
-        console.warn('Failed to load CSS file:', err);
-    });
+    // @ts-expect-error - Dynamic CSS import
+    import('./ThemeColorPickerField.css').catch(()=>{});
 }
 function resolveLocalizedValue(value, fallback) {
     if (typeof value === 'string') {
@@ -92,9 +88,6 @@ const ThemeColorPickerField = ({ field, path })=>{
     const [showPicker, setShowPicker] = useState(false);
     const [hexValue, setHexValue] = useState(toHex(value || ''));
     const pickerRef = useRef(null);
-    const allFields = useFormFields(([fields])=>fields);
-    const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode';
-    const modePrefix = `themeConfiguration.${mode}`;
     useEffect(()=>{
         setLocalValue(value || '');
         setHexValue(toHex(value || ''));
@@ -115,41 +108,6 @@ const ThemeColorPickerField = ({ field, path })=>{
     }, [
         showPicker
     ]);
-    const colorValues = useMemo(()=>{
-        if (!allFields) {
-            return {};
-        }
-        const names = [
-            'background',
-            'foreground',
-            'card',
-            'cardForeground',
-            'popover',
-            'popoverForeground',
-            'primary',
-            'primaryForeground',
-            'secondary',
-            'secondaryForeground',
-            'muted',
-            'mutedForeground',
-            'accent',
-            'accentForeground',
-            'destructive',
-            'destructiveForeground',
-            'border',
-            'input',
-            'ring'
-        ];
-        return names.reduce((accumulator, name)=>{
-            const fieldState = allFields[`${modePrefix}.${name}`];
-            const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined;
-            accumulator[name] = parsedValue ?? '';
-            return accumulator;
-        }, {});
-    }, [
-        allFields,
-        modePrefix
-    ]);
     const handleHexChange = useCallback((hex)=>{
         setHexValue(hex);
         setLocalValue(hex);
@@ -185,114 +143,73 @@ const ThemeColorPickerField = ({ field, path })=>{
             }),
             /*#__PURE__*/ _jsxs("div", {
                 className: "color-picker-container",
-                style: {
-                    position: 'relative'
-                },
                 children: [
                     /*#__PURE__*/ _jsxs("div", {
-                        className: "color-input-wrapper",
+                        className: "color-input-row",
                         children: [
                             /*#__PURE__*/ _jsx("button", {
                                 type: "button",
-                                className: "color-swatch",
+                                className: "color-swatch-btn",
                                 style: {
                                     backgroundColor: hexValue
                                 },
                                 onClick: ()=>setShowPicker(!showPicker),
-                                "aria-label": "Open color picker"
+                                "aria-label": "Open color picker",
+                                title: hexValue
                             }),
                             /*#__PURE__*/ _jsx("input", {
                                 type: "text",
                                 value: localValue || '',
                                 onChange: (event)=>handleTextChange(event.target.value),
                                 placeholder: "oklch(...) or #hex",
-                                className: "text-input"
+                                className: "color-text-input"
                             })
                         ]
                     }),
                     showPicker && /*#__PURE__*/ _jsxs("div", {
                         ref: pickerRef,
-                        style: {
-                            position: 'absolute',
-                            top: '100%',
-                            left: 0,
-                            marginTop: '8px',
-                            padding: '16px',
-                            backgroundColor: 'var(--theme-elevation-0)',
-                            border: '1px solid var(--theme-elevation-200)',
-                            borderRadius: '8px',
-                            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
-                            zIndex: 1000,
-                            width: '280px'
-                        },
+                        className: "color-picker-popover",
                         children: [
-                            /*#__PURE__*/ _jsx(HexColorPicker, {
-                                color: hexValue,
-                                onChange: handleHexChange,
-                                style: {
-                                    width: '100%',
-                                    height: '160px'
-                                }
-                            }),
                             /*#__PURE__*/ _jsxs("div", {
-                                style: {
-                                    marginTop: '12px',
-                                    display: 'flex',
-                                    gap: '8px',
-                                    alignItems: 'center'
-                                },
+                                className: "picker-header",
                                 children: [
-                                    /*#__PURE__*/ _jsx(HexColorInput, {
-                                        color: hexValue,
-                                        onChange: handleHexChange,
-                                        prefixed: true,
-                                        placeholder: "#000000",
-                                        style: {
-                                            flex: 1,
-                                            padding: '8px',
-                                            borderRadius: '4px',
-                                            border: '1px solid var(--theme-elevation-150)',
-                                            fontSize: '13px',
-                                            fontFamily: 'monospace'
-                                        }
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "picker-title",
+                                        children: "Color Picker"
                                     }),
                                     /*#__PURE__*/ _jsx("button", {
                                         type: "button",
                                         onClick: ()=>setShowPicker(false),
-                                        style: {
-                                            padding: '8px 14px',
-                                            borderRadius: '4px',
-                                            border: 'none',
-                                            backgroundColor: 'var(--theme-elevation-500)',
-                                            color: 'var(--theme-elevation-0)',
-                                            cursor: 'pointer',
-                                            fontSize: '12px',
-                                            fontWeight: 600
-                                        },
-                                        children: "OK"
+                                        className: "picker-close-btn",
+                                        "aria-label": "Close",
+                                        children: "✕"
                                     })
                                 ]
                             }),
+                            /*#__PURE__*/ _jsx(HexColorPicker, {
+                                color: hexValue,
+                                onChange: handleHexChange,
+                                className: "hex-picker"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "hex-input-row",
+                                children: /*#__PURE__*/ _jsx(HexColorInput, {
+                                    color: hexValue,
+                                    onChange: handleHexChange,
+                                    prefixed: true,
+                                    placeholder: "#000000",
+                                    className: "hex-input"
+                                })
+                            }),
                             /*#__PURE__*/ _jsxs("div", {
-                                style: {
-                                    marginTop: '12px'
-                                },
+                                className: "color-swatches",
                                 children: [
                                     /*#__PURE__*/ _jsx("div", {
-                                        style: {
-                                            fontSize: '11px',
-                                            fontWeight: 600,
-                                            marginBottom: '6px',
-                                            color: 'var(--theme-elevation-500)'
-                                        },
-                                        children: "Rychlé barvy"
+                                        className: "swatches-label",
+                                        children: "Quick Colors"
                                     }),
                                     /*#__PURE__*/ _jsx("div", {
-                                        style: {
-                                            display: 'grid',
-                                            gridTemplateColumns: 'repeat(6, 1fr)',
-                                            gap: '6px'
-                                        },
+                                        className: "swatches-grid",
                                         children: [
                                             '#ef4444',
                                             '#f97316',
@@ -309,66 +226,19 @@ const ThemeColorPickerField = ({ field, path })=>{
                                         ].map((color)=>/*#__PURE__*/ _jsx("button", {
                                                 type: "button",
                                                 onClick: ()=>handleHexChange(color),
+                                                className: `swatch-btn ${hexValue.toLowerCase() === color.toLowerCase() ? 'selected' : ''}`,
                                                 style: {
-                                                    width: '100%',
-                                                    height: '28px',
-                                                    borderRadius: '4px',
-                                                    border: hexValue.toLowerCase() === color.toLowerCase() ? '2px solid var(--theme-elevation-800)' : '1px solid var(--theme-elevation-150)',
-                                                    backgroundColor: color,
-                                                    cursor: 'pointer'
+                                                    backgroundColor: color
                                                 },
-                                                "aria-label": `Select ${color}`
+                                                "aria-label": `Select ${color}`,
+                                                title: color
                                             }, color))
                                     })
                                 ]
                             })
                         ]
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "color-preview",
-                        style: {
-                            backgroundColor: hexValue
-                        },
-                        children: /*#__PURE__*/ _jsx("span", {
-                            className: "preview-label",
-                            children: localValue || 'Not set'
-                        })
                     })
                 ]
-            }),
-            (fieldName === 'primary' || fieldName === 'background') && /*#__PURE__*/ _jsx("div", {
-                className: "mini-preview",
-                style: {
-                    backgroundColor: colorValues.background || '#ffffff',
-                    color: colorValues.foreground || '#000000',
-                    borderColor: colorValues.border || '#e2e8f0'
-                },
-                children: /*#__PURE__*/ _jsxs("div", {
-                    className: "preview-card",
-                    style: {
-                        backgroundColor: colorValues.card || '#ffffff',
-                        color: colorValues.cardForeground || '#000000',
-                        borderColor: colorValues.border || '#e2e8f0'
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx("button", {
-                            className: "preview-button",
-                            style: {
-                                backgroundColor: colorValues.primary || '#0070f3',
-                                color: colorValues.primaryForeground || '#ffffff'
-                            },
-                            children: "Primary Button"
-                        }),
-                        /*#__PURE__*/ _jsx("button", {
-                            className: "preview-button secondary",
-                            style: {
-                                backgroundColor: colorValues.secondary || '#f1f5f9',
-                                color: colorValues.secondaryForeground || '#0f172a'
-                            },
-                            children: "Secondary"
-                        })
-                    ]
-                })
             })
         ]
     });