feat: color picker for design

src/admin/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { TextFieldClientComponent } from 'payload'
+import { TextField, useField } from '@payloadcms/ui'
+
+const ColorInput = ({ path }: { path: string }) => {
+  const { value, setValue } = useField<string>({ path })
+
+  return (
+    <input
+      type="color"
+      value={value || '#000000'}
+      onChange={(e) => setValue(e.target.value)}
+      style={{
+        width: 40,
+        height: 40,
+        padding: 2,
+        border: '1px solid var(--theme-elevation-150)',
+        borderRadius: 4,
+        cursor: 'pointer',
+        background: 'none',
+        flexShrink: 0,
+      }}
+    />
+  )
+}
+
+export const ColorPicker: TextFieldClientComponent = (props) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginBottom: "20px" }}>
+      <div style={{ flex: 1 }}>
+        <TextField {...props} />
+      </div>
+      <ColorInput path={props.path} />
+    </div>
+  )
+}
+
+export default ColorPicker

src/app/(payload)/admin/importMap.js

@@ -11,6 +11,7 @@ import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1e
 import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { default as default_5697d501e5648edd0cfd5c3685214437 } from '@/admin/components/ColorPicker/ColorPicker'
 import { default as default_9bcae99938dc292be0063ce32055e14c } from '../../../components/Logo/Logo'
 import { GcsClientUploadHandler as GcsClientUploadHandler_06e62ca02c7c441053a9b643e5545934 } from '@payloadcms/storage-gcs/client'
 import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
@@ -29,6 +30,7 @@ export const importMap = {
   "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@/admin/components/ColorPicker/ColorPicker#default": default_5697d501e5648edd0cfd5c3685214437,
   "/components/Logo/Logo#default": default_9bcae99938dc292be0063ce32055e14c,
   "@payloadcms/storage-gcs/client#GcsClientUploadHandler": GcsClientUploadHandler_06e62ca02c7c441053a9b643e5545934,
   "@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1

src/globals/Design.ts

@@ -9,6 +9,12 @@ const hexColorValidation = (value: string | null | undefined) => {
   return 'Bitte geben Sie einen gültigen Hex-Farbwert ein (z.B. #016699)'
 }
 
+const colorFieldAdmin = {
+  components: {
+    Field: '@/admin/components/ColorPicker/ColorPicker',
+  },
+}
+
 export const DesignGlobal: GlobalConfig = {
   slug: 'design',
   label: {
@@ -30,6 +36,7 @@ export const DesignGlobal: GlobalConfig = {
           label: { de: 'Grundfarbe' },
           defaultValue: '#016699',
           validate: hexColorValidation,
+          admin: colorFieldAdmin,
         },
         {
           name: 'shade1',
@@ -37,6 +44,7 @@ export const DesignGlobal: GlobalConfig = {
           label: { de: 'Farbton 1' },
           defaultValue: '#67A3C2',
           validate: hexColorValidation,
+          admin: colorFieldAdmin,
         },
         {
           name: 'shade2',
@@ -44,6 +52,7 @@ export const DesignGlobal: GlobalConfig = {
           label: { de: 'Farbton 2' },
           defaultValue: '#DDECF7',
           validate: hexColorValidation,
+          admin: colorFieldAdmin,
         },
         {
           name: 'shade3',
@@ -51,6 +60,7 @@ export const DesignGlobal: GlobalConfig = {
           label: { de: 'Farbton 3' },
           defaultValue: '#eff6ff',
           validate: hexColorValidation,
+          admin: colorFieldAdmin,
         },
         {
           name: 'contrastColor',
@@ -58,6 +68,7 @@ export const DesignGlobal: GlobalConfig = {
           label: { de: 'Kontrastfarbe' },
           defaultValue: '#CE490F',
           validate: hexColorValidation,
+          admin: colorFieldAdmin,
         },
         {
           name: 'contrastShade1',
@@ -65,6 +76,7 @@ export const DesignGlobal: GlobalConfig = {
           label: { de: 'Kontrastfarbton 1' },
           defaultValue: '#DA764B',
           validate: hexColorValidation,
+          admin: colorFieldAdmin,
         },
       ],
     },