@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/fields/ThemeColorPickerField.css

@@ -19,7 +19,7 @@
 
 .theme-color-picker-field .field-description {
   font-size: 0.75rem;
-  color: var(--theme-elevation-400, #94a3b8);
+  color: var(--theme-elevation-600, #475569);
   margin-top: 0.25rem;
   line-height: 1.4;
 }
@@ -42,7 +42,7 @@
   border: 2px solid var(--theme-elevation-200, #e2e8f0);
   border-radius: 8px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
 }
@@ -53,9 +53,9 @@
   transform: scale(1.05);
 }
 
-.theme-color-picker-field .color-swatch-btn:focus {
-  outline: 2px solid var(--theme-elevation-500, #3b82f6);
-  outline-offset: 2px;
+.theme-color-picker-field .color-swatch-btn:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: var(--accessibility-outline-offset, 2px);
 }
 
 /* Text Input */
@@ -67,23 +67,85 @@
   font-size: 0.875rem;
   font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
   color: var(--theme-text, #1e293b);
-  background: var(--theme-elevation-0, #ffffff);
-  transition: all 0.2s ease;
+  background: var(--theme-input-bg, var(--theme-elevation-0));
+  transition: border-color 0.15s ease-out;
 }
 
 .theme-color-picker-field .color-text-input:hover {
   border-color: var(--theme-elevation-300, #cbd5e1);
 }
 
-.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 .color-text-input:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 1px;
+  border-color: var(--theme-elevation-500);
 }
 
 .theme-color-picker-field .color-text-input::placeholder {
-  color: var(--theme-elevation-400, #94a3b8);
-  opacity: 0.7;
+  color: var(--theme-elevation-500);
+}
+
+/* WCAG Contrast Badges */
+.theme-color-picker-field .color-contrast-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.theme-color-picker-field .contrast-chip {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--theme-elevation-150, #f1f5f9);
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+.theme-color-picker-field .contrast-sample {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  font-weight: 700;
+  border-inline-end: 1px solid var(--theme-elevation-150);
+}
+
+.theme-color-picker-field .contrast-ratio {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* Semantic status colours come from Payload, so they flip with the admin theme. */
+.theme-color-picker-field .contrast-ratio--aa {
+  background: var(--theme-success-100);
+  color: var(--theme-success-800);
+}
+
+.theme-color-picker-field .contrast-ratio--aaLarge {
+  background: var(--theme-warning-100);
+  color: var(--theme-warning-800);
+}
+
+.theme-color-picker-field .contrast-ratio--low {
+  background: var(--theme-error-100);
+  color: var(--theme-error-800);
+}
+
+.theme-color-picker-field .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 /* Color Picker Popover */
@@ -97,8 +159,8 @@
   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;
+  width: min(280px, calc(100vw - 2rem));
+  animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes slideDown {
@@ -132,16 +194,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   border: none;
   background: transparent;
-  color: var(--theme-elevation-400, #94a3b8);
+  color: var(--theme-elevation-600);
   cursor: pointer;
-  border-radius: 4px;
-  font-size: 1.125rem;
-  line-height: 1;
-  transition: all 0.15s ease;
+  border-radius: 6px;
+  transition: background-color 0.15s ease-out, color 0.15s ease-out;
+}
+
+.theme-color-picker-field .picker-close-btn:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 0;
 }
 
 .theme-color-picker-field .picker-close-btn:hover {
@@ -172,7 +237,7 @@
   text-align: center;
   color: var(--theme-text, #1e293b);
   background: var(--theme-elevation-50, #f8fafc);
-  transition: all 0.15s ease;
+  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
 }
 
 .theme-color-picker-field .hex-input:hover {
@@ -180,11 +245,11 @@
   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);
+.theme-color-picker-field .hex-input:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
+  outline-offset: 1px;
+  border-color: var(--theme-elevation-500);
+  background: var(--theme-elevation-0);
 }
 
 /* Color Swatches */
@@ -195,11 +260,9 @@
 }
 
 .theme-color-picker-field .swatches-label {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--theme-elevation-500, #64748b);
+  color: var(--theme-elevation-600);
   margin-bottom: 0.625rem;
 }
 
@@ -215,7 +278,7 @@
   border: 1.5px solid var(--theme-elevation-150, #f1f5f9);
   border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out;
   position: relative;
 }
 
@@ -232,11 +295,16 @@
   transform: scale(1.05);
 }
 
-.theme-color-picker-field .swatch-btn:focus {
-  outline: 2px solid var(--theme-elevation-500, #3b82f6);
+.theme-color-picker-field .swatch-btn:focus-visible {
+  outline: var(--accessibility-outline, 2px solid var(--theme-text));
   outline-offset: 2px;
 }
 
+/* The saturation/hue surfaces are keyboard-operable in react-colorful. */
+.theme-color-picker-field .react-colorful__interactive:focus-visible .react-colorful__pointer {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
 /* React Colorful Overrides */
 .theme-color-picker-field .react-colorful {
   border-radius: 8px;
@@ -257,3 +325,15 @@
   border: 2px solid #ffffff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .theme-color-picker-field .color-picker-popover {
+    animation: none;
+  }
+
+  .theme-color-picker-field .color-swatch-btn:hover,
+  .theme-color-picker-field .swatch-btn:hover,
+  .theme-color-picker-field .swatch-btn.selected {
+    transform: none;
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAmCvD,QAAA,MAAM,qBAAqB,EAAE,wBAuJ5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAgEvD,QAAA,MAAM,qBAAqB,EAAE,wBAwP5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/fields/ThemeColorPickerField.js

@@ -1,61 +1,128 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField } from '@payloadcms/ui';
-import Color from 'color';
+import { useField, useFormFields } from '@payloadcms/ui';
+import { X } from 'lucide-react';
 import { HexColorInput, HexColorPicker } from 'react-colorful';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js';
+import { cssColorToHex as toHex, getContrastRatio } from '../utils/contrast.js';
+import { resolveLocalizedText } from '../utils/localizedText.js';
 // Import CSS for styling
 if (typeof window !== 'undefined') {
-    // @ts-expect-error - Dynamic CSS import
     import('./ThemeColorPickerField.css').catch(()=>{});
 }
-function resolveLocalizedValue(value, fallback) {
-    if (typeof value === 'string') {
-        return value;
-    }
-    if (typeof value === 'object' && value !== null) {
-        const localized = value;
-        const resolved = localized.en ?? localized.cs ?? localized[''];
-        if (typeof resolved === 'string') {
-            return resolved;
-        }
-    }
-    return fallback;
-}
 /**
- * Convert various color formats to HEX for the color picker
- */ function toHex(color) {
-    if (!color) return '#000000';
-    return Color(color).hex().toString();
+ * Convert any CSS color string to hex for the picker, with a neutral fallback so
+ * the swatch always renders. Delegates to the shared {@link toHex} util
+ * (color package + canvas fallback for oklch/lch).
+ */ function cssColorToHex(cssColor) {
+    if (!cssColor) return '#000000';
+    return toHex(cssColor) ?? '#888888';
+}
+/** WCAG contrast ratio between two CSS colours (1–21), or null if unparseable. */ const contrastRatio = getContrastRatio;
+function contrastLevel(ratio) {
+    if (ratio >= 4.5) return 'aa';
+    if (ratio >= 3) return 'aaLarge';
+    return 'low';
 }
+const format = (template, values)=>template.replace(/\{(\w+)\}/g, (match, key)=>values[key] ?? match);
+const SURFACE_TOKENS = [
+    'card',
+    'popover',
+    'primary',
+    'secondary',
+    'muted',
+    'accent',
+    'destructive'
+];
+const isForegroundToken = (name)=>name === 'foreground' || name.endsWith('Foreground');
+/** The token a colour is read against: surfaces ↔ their `…Foreground`, background ↔ foreground. */ function contrastPartner(name) {
+    if (name === 'background') return 'foreground';
+    if (name === 'foreground') return 'background';
+    if (SURFACE_TOKENS.includes(name)) return `${name}Foreground`;
+    const base = name.endsWith('Foreground') ? name.slice(0, -'Foreground'.length) : '';
+    return SURFACE_TOKENS.includes(base) ? base : null;
+}
+const QUICK_COLORS = [
+    '#ef4444',
+    '#f97316',
+    '#f59e0b',
+    '#84cc16',
+    '#10b981',
+    '#06b6d4',
+    '#3b82f6',
+    '#8b5cf6',
+    '#ec4899',
+    '#64748b',
+    '#000000',
+    '#ffffff'
+];
 const ThemeColorPickerField = ({ field, path })=>{
     const { value, setValue } = useField({
         path
     });
+    const t = useThemeTranslations();
+    const language = useThemeLanguage();
+    const inputId = useId();
+    const descriptionId = useId();
+    const popoverId = useId();
     const [localValue, setLocalValue] = useState(value || '');
     const [showPicker, setShowPicker] = useState(false);
-    const [hexValue, setHexValue] = useState(toHex(value || ''));
+    const [hexValue, setHexValue] = useState(cssColorToHex(value || ''));
     const [isDragging, setIsDragging] = useState(false);
     const pickerRef = useRef(null);
+    const swatchRef = useRef(null);
     useEffect(()=>{
         setLocalValue(value || '');
-        setHexValue(toHex(value || ''));
+        setHexValue(cssColorToHex(value || ''));
     }, [
         value
     ]);
-    // Close picker when clicking outside
+    const closePicker = useCallback((restoreFocus)=>{
+        setShowPicker(false);
+        setIsDragging(false);
+        if (restoreFocus) swatchRef.current?.focus();
+    }, []);
+    // Close on outside pointer, Escape; move focus into the popover when it opens.
     useEffect(()=>{
-        function handleClickOutside(event) {
-            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
-                setShowPicker(false);
-            }
+        if (!showPicker) return;
+        function handlePointerOutside(event) {
+            const target = event.target;
+            if (pickerRef.current?.contains(target) || swatchRef.current?.contains(target)) return;
+            closePicker(false);
         }
-        if (showPicker) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return ()=>document.removeEventListener('mousedown', handleClickOutside);
+        function handleKeyDown(event) {
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                closePicker(true);
+            }
         }
+        document.addEventListener('pointerdown', handlePointerOutside);
+        document.addEventListener('keydown', handleKeyDown);
+        pickerRef.current?.querySelector('.react-colorful__interactive')?.focus();
+        return ()=>{
+            document.removeEventListener('pointerdown', handlePointerOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        showPicker,
+        closePicker
+    ]);
+    // A drag ends wherever the pointer is released, when the browser cancels the
+    // gesture (e.g. to scroll on touch), or when the window loses focus.
+    useEffect(()=>{
+        if (!isDragging) return;
+        const endDrag = ()=>setIsDragging(false);
+        window.addEventListener('pointerup', endDrag);
+        window.addEventListener('pointercancel', endDrag);
+        window.addEventListener('blur', endDrag);
+        return ()=>{
+            window.removeEventListener('pointerup', endDrag);
+            window.removeEventListener('pointercancel', endDrag);
+            window.removeEventListener('blur', endDrag);
+        };
     }, [
-        showPicker
+        isDragging
     ]);
     // Only update parent setValue when drag completes
     useEffect(()=>{
@@ -73,17 +140,36 @@ const ThemeColorPickerField = ({ field, path })=>{
     }, []);
     const handleTextChange = useCallback((nextValue)=>{
         setLocalValue(nextValue);
-        setHexValue(toHex(nextValue));
-    }, []);
-    const handlePickerMouseDown = useCallback(()=>{
-        setIsDragging(true);
-    }, []);
-    const handlePickerMouseUp = useCallback(()=>{
-        setIsDragging(false);
+        setHexValue(cssColorToHex(nextValue));
     }, []);
     const fieldName = path.split('.').pop() || '';
-    const label = resolveLocalizedValue(field.label, fieldName);
-    const description = resolveLocalizedValue(field.admin?.description, '');
+    const label = resolveLocalizedText(field.label, language, fieldName);
+    const description = resolveLocalizedText(field.admin?.description, language);
+    // Contrast is only meaningful against the token this colour is paired with
+    // (e.g. primary ↔ primaryForeground), so measure that pair instead of white/black.
+    const pairKey = contrastPartner(fieldName);
+    const pairPath = pairKey ? [
+        ...path.split('.').slice(0, -1),
+        pairKey
+    ].join('.') : null;
+    const pairValue = useFormFields(([fields])=>pairPath ? fields?.[pairPath]?.value : undefined);
+    const ownValue = localValue || hexValue;
+    const pairSample = pairKey && typeof pairValue === 'string' && pairValue.trim() ? isForegroundToken(fieldName) ? {
+        foreground: ownValue,
+        background: pairValue,
+        foregroundLabel: label,
+        backgroundLabel: pairKey
+    } : {
+        foreground: pairValue,
+        background: ownValue,
+        foregroundLabel: pairKey,
+        backgroundLabel: label
+    } : null;
+    const levelLabel = {
+        aa: t.colorPicker.levelAA,
+        aaLarge: t.colorPicker.levelAALarge,
+        low: t.colorPicker.levelLow
+    };
     return /*#__PURE__*/ _jsxs("div", {
         className: "theme-color-picker-field",
         children: [
@@ -92,10 +178,12 @@ const ThemeColorPickerField = ({ field, path })=>{
                 children: [
                     /*#__PURE__*/ _jsx("label", {
                         className: "field-label",
+                        htmlFor: inputId,
                         children: label
                     }),
                     description && /*#__PURE__*/ _jsx("div", {
                         className: "field-description",
+                        id: descriptionId,
                         children: description
                     })
                 ]
@@ -107,44 +195,98 @@ const ThemeColorPickerField = ({ field, path })=>{
                         className: "color-input-row",
                         children: [
                             /*#__PURE__*/ _jsx("button", {
+                                ref: swatchRef,
                                 type: "button",
                                 className: "color-swatch-btn",
                                 style: {
-                                    backgroundColor: hexValue
+                                    backgroundColor: localValue || hexValue
                                 },
-                                onClick: ()=>setShowPicker(!showPicker),
-                                "aria-label": "Open color picker",
+                                onClick: ()=>setShowPicker((open)=>!open),
+                                "aria-label": `${t.colorPicker.openPicker}: ${label}`,
+                                "aria-expanded": showPicker,
+                                "aria-controls": showPicker ? popoverId : undefined,
                                 title: hexValue
                             }),
                             /*#__PURE__*/ _jsx("input", {
+                                id: inputId,
                                 type: "text",
                                 value: localValue || '',
                                 onChange: (event)=>handleTextChange(event.target.value),
-                                placeholder: "oklch(...) or #hex",
+                                placeholder: t.colorPicker.placeholder,
+                                "aria-describedby": description ? descriptionId : undefined,
+                                spellCheck: false,
                                 className: "color-text-input"
                             })
                         ]
                     }),
+                    pairSample ? /*#__PURE__*/ _jsx("div", {
+                        className: "color-contrast-row",
+                        children: (()=>{
+                            const ratio = contrastRatio(pairSample.foreground, pairSample.background);
+                            if (ratio == null) return null;
+                            const level = contrastLevel(ratio);
+                            const title = format(t.colorPicker.pairContrastTitle, {
+                                foreground: pairSample.foregroundLabel,
+                                background: pairSample.backgroundLabel
+                            });
+                            return /*#__PURE__*/ _jsxs("span", {
+                                className: "contrast-chip",
+                                title: `${title}: ${ratio.toFixed(2)}:1`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "contrast-sample",
+                                        style: {
+                                            background: pairSample.background,
+                                            color: pairSample.foreground
+                                        },
+                                        "aria-hidden": "true",
+                                        children: "Aa"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: `contrast-ratio contrast-ratio--${level}`,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                className: "sr-only",
+                                                children: [
+                                                    title,
+                                                    ": "
+                                                ]
+                                            }),
+                                            t.colorPicker.pairContrast,
+                                            " ",
+                                            ratio.toFixed(1),
+                                            " · ",
+                                            levelLabel[level]
+                                        ]
+                                    })
+                                ]
+                            });
+                        })()
+                    }) : null,
                     showPicker && /*#__PURE__*/ _jsxs("div", {
                         ref: pickerRef,
+                        id: popoverId,
+                        role: "dialog",
+                        "aria-label": `${t.colorPicker.title}: ${label}`,
                         className: "color-picker-popover",
-                        onMouseDown: handlePickerMouseDown,
-                        onMouseUp: handlePickerMouseUp,
-                        onMouseLeave: handlePickerMouseUp,
+                        onPointerDown: ()=>setIsDragging(true),
                         children: [
                             /*#__PURE__*/ _jsxs("div", {
                                 className: "picker-header",
                                 children: [
                                     /*#__PURE__*/ _jsx("span", {
                                         className: "picker-title",
-                                        children: "Color Picker"
+                                        children: t.colorPicker.title
                                     }),
                                     /*#__PURE__*/ _jsx("button", {
                                         type: "button",
-                                        onClick: ()=>setShowPicker(false),
+                                        onClick: ()=>closePicker(true),
                                         className: "picker-close-btn",
-                                        "aria-label": "Close",
-                                        children: "✕"
+                                        "aria-label": t.colorPicker.close,
+                                        children: /*#__PURE__*/ _jsx(X, {
+                                            size: 16,
+                                            "aria-hidden": "true"
+                                        })
                                     })
                                 ]
                             }),
@@ -160,6 +302,7 @@ const ThemeColorPickerField = ({ field, path })=>{
                                     onChange: handleHexChange,
                                     prefixed: true,
                                     placeholder: "#000000",
+                                    "aria-label": "HEX",
                                     className: "hex-input"
                                 })
                             }),
@@ -168,36 +311,27 @@ const ThemeColorPickerField = ({ field, path })=>{
                                 children: [
                                     /*#__PURE__*/ _jsx("div", {
                                         className: "swatches-label",
-                                        children: "Quick Colors"
+                                        children: t.colorPicker.quickColors
                                     }),
                                     /*#__PURE__*/ _jsx("div", {
                                         className: "swatches-grid",
-                                        children: [
-                                            '#ef4444',
-                                            '#f97316',
-                                            '#f59e0b',
-                                            '#84cc16',
-                                            '#10b981',
-                                            '#06b6d4',
-                                            '#3b82f6',
-                                            '#8b5cf6',
-                                            '#ec4899',
-                                            '#64748b',
-                                            '#000000',
-                                            '#ffffff'
-                                        ].map((color)=>/*#__PURE__*/ _jsx("button", {
+                                        children: QUICK_COLORS.map((color)=>{
+                                            const selected = hexValue.toLowerCase() === color.toLowerCase();
+                                            return /*#__PURE__*/ _jsx("button", {
                                                 type: "button",
                                                 onClick: ()=>{
                                                     handleHexChange(color);
                                                     setValue(color);
                                                 },
-                                                className: `swatch-btn ${hexValue.toLowerCase() === color.toLowerCase() ? 'selected' : ''}`,
+                                                className: `swatch-btn ${selected ? 'selected' : ''}`,
                                                 style: {
                                                     backgroundColor: color
                                                 },
-                                                "aria-label": `Select ${color}`,
+                                                "aria-label": `${t.colorPicker.selectColor} ${color}`,
+                                                "aria-pressed": selected,
                                                 title: color
-                                            }, color))
+                                            }, color);
+                                        })
                                     })
                                 ]
                             })