@kilivi/payloadcms-theme-management 0.2.2 → 0.2.3

package/README.md

@@ -2,10 +2,13 @@
 
 A comprehensive theme management plugin for Payload CMS v3 that provides powerful theming capabilities with SSR support, preventing FOUC (Flash of Unstyled Content).
 
-## 🎉 Version 0.2.0 - New Features!
+## 🎉 Version 0.2.1 - New Features!
 
-- **✅ Tabs Structure** - Plugin now creates a "Nastavení vzhledu" (Appearance Settings) tab
-- **✅ Extended Theme Support** - OKLCH color format with 19+ semantic tokens
+- **✅ Live Theme Preview** - Real-time theme preview in admin panel at `/admin/theme-preview`
+- **✅ Professional Color Picker** - Enhanced color picker with react-colorful library
+- **✅ Streamlined Tokens** - Optimized to 24 essential color tokens
+- **✅ Tabs Structure** - Plugin creates a "Nastavení vzhledu" (Appearance Settings) tab
+- **✅ Extended Theme Support** - OKLCH color format with semantic tokens
 - **✅ shadcn/ui Compatible** - Works with https://ui.shadcn.com/themes
 - **✅ TweakCN Compatible** - Works with https://tweakcn.com/editor/theme
 - **✅ Chart Colors** - 5 customizable colors for data visualization
@@ -13,8 +16,9 @@ A comprehensive theme management plugin for Payload CMS v3 that provides powerfu
 ## Features
 
 - 🎨 **Multiple Theme Presets** - Cool, Brutal, Neon, Solar, and more
+- 🖼️ **Live Theme Preview** - Real-time preview in admin panel (no configuration needed!)
 - 🎨 **Extended Themes** - OKLCH-based themes with full shadcn/ui token support
-- 🎨 **Custom Color Palette** - Full HSL color customization (19+ semantic tokens)
+- 🎨 **Custom Color Palette** - Full HSL color customization (24 semantic tokens)
 - 🔤 **Typography Control** - Google Fonts integration for headings, body, and code
 - 📐 **Border Radius Presets** - Sharp, Rounded, or Pill styles
 - 🌓 **Dark Mode Support** - Built-in light/dark/system mode toggle
@@ -148,6 +152,24 @@ Or with Tailwind CSS:
 - **Dealership** - Automotive-inspired
 - **Real Estate** - Professional property theme (+ Gold, Neutral variants)
 
+## Live Theme Preview
+
+The plugin automatically adds a **Live Preview** page to your admin panel at `/admin/theme-preview`.
+
+### Features:
+- ✅ **Zero Configuration** - Works automatically when plugin is installed
+- ✅ **Real-time Updates** - See changes instantly as you edit theme settings
+- ✅ **Light/Dark Toggle** - Preview both modes side-by-side
+- ✅ **Component Showcase** - View cards, buttons, inputs, badges, and more
+- ✅ **Professional UI** - Clean, modern preview interface
+
+### How to Access:
+1. Install the plugin (see Quick Start above)
+2. Navigate to `/admin/theme-preview` in your Payload admin panel
+3. Open theme settings in another tab and see changes update live!
+
+The preview automatically watches your `themeConfiguration` field and displays real-time updates without any additional setup.
+
 ## API Reference
 
 ### Main Entry Point

package/dist/extended-presets.d.ts

@@ -34,9 +34,18 @@ export interface ShadcnColorTokens {
     'chart-3': string;
     'chart-4': string;
     'chart-5': string;
-    radius?: string;
+    'shadow-color'?: string;
+    'shadow-opacity'?: string;
+    'shadow-blur'?: string;
+    'shadow-spread'?: string;
+    'shadow-offset-x'?: string;
+    'shadow-offset-y'?: string;
     'font-sans'?: string;
+    'font-serif'?: string;
     'font-mono'?: string;
+    'letter-spacing'?: string;
+    spacing?: string;
+    radius?: string;
 }
 export interface ExtendedThemePreset {
     label: string;
@@ -51,6 +60,12 @@ export interface ExtendedThemePreset {
  * These work alongside the existing default presets
  */
 export declare const extendedThemePresets: Record<string, ExtendedThemePreset>;
+/**
+ * All available extended theme presets (original + TweakCN)
+ */
+export declare const allExtendedThemePresets: {
+    [x: string]: ExtendedThemePreset;
+};
 /**
  * Convert extended theme to CSS variables
  */

package/dist/extended-presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extended-presets.d.ts","sourceRoot":"","sources":["../src/extended-presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,iBAAiB;IAEhC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAGlB,IAAI,EAAE,MAAM,CAAA;IACZ,iBAAiB,EAAE,MAAM,CAAA;IAGzB,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,SAAS,EAAE,MAAM,CAAA;IACjB,sBAAsB,EAAE,MAAM,CAAA;IAG9B,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,EAAE,MAAM,CAAA;IAG1B,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,EAAE,MAAM,CAAA;IAG3B,WAAW,EAAE,MAAM,CAAA;IACnB,wBAAwB,EAAE,MAAM,CAAA;IAGhC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IAGZ,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IAGjB,MAAM,CAAC,EAAE,MAAM,CAAA;IAGf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE;QACN,KAAK,EAAE,iBAAiB,CAAA;QACxB,IAAI,EAAE,iBAAiB,CAAA;KACxB,CAAA;CACF;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAuLpE,CAAA;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,EAC1B,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,MAAM,CASR;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAe3E"}
+{"version":3,"file":"extended-presets.d.ts","sourceRoot":"","sources":["../src/extended-presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,MAAM,WAAW,iBAAiB;IAEhC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAGlB,IAAI,EAAE,MAAM,CAAA;IACZ,iBAAiB,EAAE,MAAM,CAAA;IAGzB,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,SAAS,EAAE,MAAM,CAAA;IACjB,sBAAsB,EAAE,MAAM,CAAA;IAG9B,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,EAAE,MAAM,CAAA;IAG1B,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,EAAE,MAAM,CAAA;IAG3B,WAAW,EAAE,MAAM,CAAA;IACnB,wBAAwB,EAAE,MAAM,CAAA;IAGhC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IAGZ,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IAGjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAG1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAGhB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE;QACN,KAAK,EAAE,iBAAiB,CAAA;QACxB,IAAI,EAAE,iBAAiB,CAAA;KACxB,CAAA;CACF;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAuLpE,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB;;CAGnC,CAAA;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,EAC1B,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,MAAM,CASR;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAe3E"}

package/dist/extended-presets.js

@@ -8,7 +8,8 @@
  * - Chart colors (chart-1 through chart-5)
  * - Semantic color tokens (destructive, muted, accent, etc.)
  * - CSS variable generation for Tailwind integration
- */ /**
+ */ import { tweakcnThemePresets } from './tweakcn-presets.js';
+/**
  * Extended theme presets with full shadcn/ui token support
  * These work alongside the existing default presets
  */ export const extendedThemePresets = {
@@ -193,6 +194,12 @@
         }
     }
 };
+/**
+ * All available extended theme presets (original + TweakCN)
+ */ export const allExtendedThemePresets = {
+    ...extendedThemePresets,
+    ...tweakcnThemePresets
+};
 /**
  * Convert extended theme to CSS variables
  */ export function extendedThemeToCSSVariables(theme, mode = 'light') {

package/dist/extended-presets.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/extended-presets.ts"],"sourcesContent":["/**\n * Extended Shadcn-style theme presets with full color token support\n * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme\n * \n * This extends the existing theme system with:\n * - Full shadcn/ui color tokens\n * - OKLCH color format support\n * - Chart colors (chart-1 through chart-5)\n * - Semantic color tokens (destructive, muted, accent, etc.)\n * - CSS variable generation for Tailwind integration\n */\n\nexport interface ShadcnColorTokens {\n  // Base colors\n  background: string\n  foreground: string\n  \n  // Card colors\n  card: string\n  'card-foreground': string\n  \n  // Popover colors\n  popover: string\n  'popover-foreground': string\n  \n  // Primary colors\n  primary: string\n  'primary-foreground': string\n  \n  // Secondary colors\n  secondary: string\n  'secondary-foreground': string\n  \n  // Muted colors\n  muted: string\n  'muted-foreground': string\n  \n  // Accent colors\n  accent: string\n  'accent-foreground': string\n  \n  // Destructive colors\n  destructive: string\n  'destructive-foreground': string\n  \n  // Border & Input\n  border: string\n  input: string\n  ring: string\n  \n  // Chart colors (for data visualization)\n  'chart-1': string\n  'chart-2': string\n  'chart-3': string\n  'chart-4': string\n  'chart-5': string\n  \n  // Border radius (optional)\n  radius?: string\n  \n  // Font families (optional)\n  'font-sans'?: string\n  'font-mono'?: string\n}\n\nexport interface ExtendedThemePreset {\n  label: string\n  value: string\n  styles: {\n    light: ShadcnColorTokens\n    dark: ShadcnColorTokens\n  }\n}\n\n/**\n * Extended theme presets with full shadcn/ui token support\n * These work alongside the existing default presets\n */\nexport const extendedThemePresets: Record<string, ExtendedThemePreset> = {\n  'cool-extended': {\n    label: 'Cool & Professional (Extended)',\n    value: 'cool-extended',\n    styles: {\n      light: {\n        background: 'oklch(1 0 0)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.549 0.184 250.847)',\n        'primary-foreground': 'oklch(0.985 0.005 250.847)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.97 0 0)',\n        'accent-foreground': 'oklch(0.205 0 0)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.549 0.184 250.847)',\n        'chart-1': 'oklch(0.549 0.184 250.847)',\n        'chart-2': 'oklch(0.645 0.168 250.847)',\n        'chart-3': 'oklch(0.445 0.204 250.847)',\n        'chart-4': 'oklch(0.349 0.184 250.847)',\n        'chart-5': 'oklch(0.749 0.124 250.847)',\n        radius: '0.5rem',\n      },\n      dark: {\n        background: 'oklch(0.145 0 0)',\n        foreground: 'oklch(0.985 0 0)',\n        card: 'oklch(0.205 0 0)',\n        'card-foreground': 'oklch(0.985 0 0)',\n        popover: 'oklch(0.269 0 0)',\n        'popover-foreground': 'oklch(0.985 0 0)',\n        primary: 'oklch(0.645 0.168 250.847)',\n        'primary-foreground': 'oklch(0.145 0.005 250.847)',\n        secondary: 'oklch(0.269 0 0)',\n        'secondary-foreground': 'oklch(0.985 0 0)',\n        muted: 'oklch(0.269 0 0)',\n        'muted-foreground': 'oklch(0.708 0 0)',\n        accent: 'oklch(0.371 0 0)',\n        'accent-foreground': 'oklch(0.985 0 0)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 10%)',\n        input: 'oklch(1 0 0 / 15%)',\n        ring: 'oklch(0.645 0.168 250.847)',\n        'chart-1': 'oklch(0.645 0.168 250.847)',\n        'chart-2': 'oklch(0.549 0.184 250.847)',\n        'chart-3': 'oklch(0.445 0.204 250.847)',\n        'chart-4': 'oklch(0.749 0.124 250.847)',\n        'chart-5': 'oklch(0.849 0.084 250.847)',\n        radius: '0.5rem',\n      },\n    },\n  },\n  \n  'neon-extended': {\n    label: 'Neon Cyberpunk (Extended)',\n    value: 'neon-extended',\n    styles: {\n      light: {\n        background: 'oklch(1 0 0)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.628 0.258 328.363)',\n        'primary-foreground': 'oklch(0.985 0.015 328.363)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.749 0.168 305.365)',\n        'accent-foreground': 'oklch(0.985 0.015 305.365)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.628 0.258 328.363)',\n        'chart-1': 'oklch(0.628 0.258 328.363)',\n        'chart-2': 'oklch(0.749 0.168 305.365)',\n        'chart-3': 'oklch(0.645 0.234 286.897)',\n        'chart-4': 'oklch(0.545 0.298 328.363)',\n        'chart-5': 'oklch(0.845 0.118 305.365)',\n        radius: '0.75rem',\n      },\n      dark: {\n        background: 'oklch(0.125 0.028 305.365)',\n        foreground: 'oklch(0.985 0.015 305.365)',\n        card: 'oklch(0.185 0.028 305.365)',\n        'card-foreground': 'oklch(0.985 0.015 305.365)',\n        popover: 'oklch(0.245 0.028 305.365)',\n        'popover-foreground': 'oklch(0.985 0.015 305.365)',\n        primary: 'oklch(0.749 0.168 305.365)',\n        'primary-foreground': 'oklch(0.125 0.028 305.365)',\n        secondary: 'oklch(0.245 0.028 305.365)',\n        'secondary-foreground': 'oklch(0.985 0.015 305.365)',\n        muted: 'oklch(0.245 0.028 305.365)',\n        'muted-foreground': 'oklch(0.708 0.015 305.365)',\n        accent: 'oklch(0.628 0.258 328.363)',\n        'accent-foreground': 'oklch(0.125 0.028 328.363)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 15%)',\n        input: 'oklch(1 0 0 / 20%)',\n        ring: 'oklch(0.749 0.168 305.365)',\n        'chart-1': 'oklch(0.749 0.168 305.365)',\n        'chart-2': 'oklch(0.628 0.258 328.363)',\n        'chart-3': 'oklch(0.645 0.234 286.897)',\n        'chart-4': 'oklch(0.845 0.118 305.365)',\n        'chart-5': 'oklch(0.945 0.068 305.365)',\n        radius: '0.75rem',\n      },\n    },\n  },\n  \n  'solar-extended': {\n    label: 'Solar Warmth (Extended)',\n    value: 'solar-extended',\n    styles: {\n      light: {\n        background: 'oklch(0.985 0.01 83.124)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.656 0.214 53.877)',\n        'primary-foreground': 'oklch(0.985 0.015 53.877)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.745 0.188 83.124)',\n        'accent-foreground': 'oklch(0.145 0 0)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.656 0.214 53.877)',\n        'chart-1': 'oklch(0.656 0.214 53.877)',\n        'chart-2': 'oklch(0.745 0.188 83.124)',\n        'chart-3': 'oklch(0.556 0.234 53.877)',\n        'chart-4': 'oklch(0.845 0.148 83.124)',\n        'chart-5': 'oklch(0.456 0.254 53.877)',\n        radius: '0.625rem',\n      },\n      dark: {\n        background: 'oklch(0.125 0.015 53.877)',\n        foreground: 'oklch(0.985 0.015 83.124)',\n        card: 'oklch(0.185 0.015 53.877)',\n        'card-foreground': 'oklch(0.985 0.015 83.124)',\n        popover: 'oklch(0.245 0.015 53.877)',\n        'popover-foreground': 'oklch(0.985 0.015 83.124)',\n        primary: 'oklch(0.745 0.188 83.124)',\n        'primary-foreground': 'oklch(0.125 0.015 83.124)',\n        secondary: 'oklch(0.245 0.015 53.877)',\n        'secondary-foreground': 'oklch(0.985 0.015 83.124)',\n        muted: 'oklch(0.245 0.015 53.877)',\n        'muted-foreground': 'oklch(0.708 0.015 83.124)',\n        accent: 'oklch(0.656 0.214 53.877)',\n        'accent-foreground': 'oklch(0.985 0.015 53.877)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 12%)',\n        input: 'oklch(1 0 0 / 18%)',\n        ring: 'oklch(0.745 0.188 83.124)',\n        'chart-1': 'oklch(0.745 0.188 83.124)',\n        'chart-2': 'oklch(0.656 0.214 53.877)',\n        'chart-3': 'oklch(0.845 0.148 83.124)',\n        'chart-4': 'oklch(0.556 0.234 53.877)',\n        'chart-5': 'oklch(0.945 0.088 83.124)',\n        radius: '0.625rem',\n      },\n    },\n  },\n}\n\n/**\n * Convert extended theme to CSS variables\n */\nexport function extendedThemeToCSSVariables(\n  theme: ExtendedThemePreset,\n  mode: 'light' | 'dark' = 'light'\n): string {\n  const tokens = theme.styles[mode]\n  const cssVars: string[] = []\n  \n  Object.entries(tokens).forEach(([key, value]) => {\n    cssVars.push(`  --${key}: ${value};`)\n  })\n  \n  return cssVars.join('\\n')\n}\n\n/**\n * Generate complete CSS for an extended theme\n */\nexport function generateExtendedThemeCSS(theme: ExtendedThemePreset): string {\n  const lightCSS = extendedThemeToCSSVariables(theme, 'light')\n  const darkCSS = extendedThemeToCSSVariables(theme, 'dark')\n  \n  return `:root {\n${lightCSS}\n}\n\n.dark {\n${darkCSS}\n}\n\n[data-theme-mode=\"dark\"] {\n${darkCSS}\n}`\n}\n"],"names":["extendedThemePresets","label","value","styles","light","background","foreground","card","popover","primary","secondary","muted","accent","destructive","border","input","ring","radius","dark","extendedThemeToCSSVariables","theme","mode","tokens","cssVars","Object","entries","forEach","key","push","join","generateExtendedThemeCSS","lightCSS","darkCSS"],"mappings":"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"}
+{"version":3,"sources":["../src/extended-presets.ts"],"sourcesContent":["/**\n * Extended Shadcn-style theme presets with full color token support\n * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme\n * \n * This extends the existing theme system with:\n * - Full shadcn/ui color tokens\n * - OKLCH color format support\n * - Chart colors (chart-1 through chart-5)\n * - Semantic color tokens (destructive, muted, accent, etc.)\n * - CSS variable generation for Tailwind integration\n */\n\nimport { tweakcnThemePresets } from './tweakcn-presets.js'\n\nexport interface ShadcnColorTokens {\n  // Base colors\n  background: string\n  foreground: string\n  \n  // Card colors\n  card: string\n  'card-foreground': string\n  \n  // Popover colors\n  popover: string\n  'popover-foreground': string\n  \n  // Primary colors\n  primary: string\n  'primary-foreground': string\n  \n  // Secondary colors\n  secondary: string\n  'secondary-foreground': string\n  \n  // Muted colors\n  muted: string\n  'muted-foreground': string\n  \n  // Accent colors\n  accent: string\n  'accent-foreground': string\n  \n  // Destructive colors\n  destructive: string\n  'destructive-foreground': string\n  \n  // Border & Input\n  border: string\n  input: string\n  ring: string\n  \n  // Chart colors (for data visualization)\n  'chart-1': string\n  'chart-2': string\n  'chart-3': string\n  'chart-4': string\n  'chart-5': string\n  \n  // Shadow controls (TweakCN)\n  'shadow-color'?: string\n  'shadow-opacity'?: string\n  'shadow-blur'?: string\n  'shadow-spread'?: string\n  'shadow-offset-x'?: string\n  'shadow-offset-y'?: string\n  \n  // Font families (TweakCN)\n  'font-sans'?: string\n  'font-serif'?: string\n  'font-mono'?: string\n  \n  // Advanced typography (TweakCN)\n  'letter-spacing'?: string\n  spacing?: string\n  \n  // Border radius\n  radius?: string\n}\n\nexport interface ExtendedThemePreset {\n  label: string\n  value: string\n  styles: {\n    light: ShadcnColorTokens\n    dark: ShadcnColorTokens\n  }\n}\n\n/**\n * Extended theme presets with full shadcn/ui token support\n * These work alongside the existing default presets\n */\nexport const extendedThemePresets: Record<string, ExtendedThemePreset> = {\n  'cool-extended': {\n    label: 'Cool & Professional (Extended)',\n    value: 'cool-extended',\n    styles: {\n      light: {\n        background: 'oklch(1 0 0)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.549 0.184 250.847)',\n        'primary-foreground': 'oklch(0.985 0.005 250.847)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.97 0 0)',\n        'accent-foreground': 'oklch(0.205 0 0)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.549 0.184 250.847)',\n        'chart-1': 'oklch(0.549 0.184 250.847)',\n        'chart-2': 'oklch(0.645 0.168 250.847)',\n        'chart-3': 'oklch(0.445 0.204 250.847)',\n        'chart-4': 'oklch(0.349 0.184 250.847)',\n        'chart-5': 'oklch(0.749 0.124 250.847)',\n        radius: '0.5rem',\n      },\n      dark: {\n        background: 'oklch(0.145 0 0)',\n        foreground: 'oklch(0.985 0 0)',\n        card: 'oklch(0.205 0 0)',\n        'card-foreground': 'oklch(0.985 0 0)',\n        popover: 'oklch(0.269 0 0)',\n        'popover-foreground': 'oklch(0.985 0 0)',\n        primary: 'oklch(0.645 0.168 250.847)',\n        'primary-foreground': 'oklch(0.145 0.005 250.847)',\n        secondary: 'oklch(0.269 0 0)',\n        'secondary-foreground': 'oklch(0.985 0 0)',\n        muted: 'oklch(0.269 0 0)',\n        'muted-foreground': 'oklch(0.708 0 0)',\n        accent: 'oklch(0.371 0 0)',\n        'accent-foreground': 'oklch(0.985 0 0)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 10%)',\n        input: 'oklch(1 0 0 / 15%)',\n        ring: 'oklch(0.645 0.168 250.847)',\n        'chart-1': 'oklch(0.645 0.168 250.847)',\n        'chart-2': 'oklch(0.549 0.184 250.847)',\n        'chart-3': 'oklch(0.445 0.204 250.847)',\n        'chart-4': 'oklch(0.749 0.124 250.847)',\n        'chart-5': 'oklch(0.849 0.084 250.847)',\n        radius: '0.5rem',\n      },\n    },\n  },\n  \n  'neon-extended': {\n    label: 'Neon Cyberpunk (Extended)',\n    value: 'neon-extended',\n    styles: {\n      light: {\n        background: 'oklch(1 0 0)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.628 0.258 328.363)',\n        'primary-foreground': 'oklch(0.985 0.015 328.363)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.749 0.168 305.365)',\n        'accent-foreground': 'oklch(0.985 0.015 305.365)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.628 0.258 328.363)',\n        'chart-1': 'oklch(0.628 0.258 328.363)',\n        'chart-2': 'oklch(0.749 0.168 305.365)',\n        'chart-3': 'oklch(0.645 0.234 286.897)',\n        'chart-4': 'oklch(0.545 0.298 328.363)',\n        'chart-5': 'oklch(0.845 0.118 305.365)',\n        radius: '0.75rem',\n      },\n      dark: {\n        background: 'oklch(0.125 0.028 305.365)',\n        foreground: 'oklch(0.985 0.015 305.365)',\n        card: 'oklch(0.185 0.028 305.365)',\n        'card-foreground': 'oklch(0.985 0.015 305.365)',\n        popover: 'oklch(0.245 0.028 305.365)',\n        'popover-foreground': 'oklch(0.985 0.015 305.365)',\n        primary: 'oklch(0.749 0.168 305.365)',\n        'primary-foreground': 'oklch(0.125 0.028 305.365)',\n        secondary: 'oklch(0.245 0.028 305.365)',\n        'secondary-foreground': 'oklch(0.985 0.015 305.365)',\n        muted: 'oklch(0.245 0.028 305.365)',\n        'muted-foreground': 'oklch(0.708 0.015 305.365)',\n        accent: 'oklch(0.628 0.258 328.363)',\n        'accent-foreground': 'oklch(0.125 0.028 328.363)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 15%)',\n        input: 'oklch(1 0 0 / 20%)',\n        ring: 'oklch(0.749 0.168 305.365)',\n        'chart-1': 'oklch(0.749 0.168 305.365)',\n        'chart-2': 'oklch(0.628 0.258 328.363)',\n        'chart-3': 'oklch(0.645 0.234 286.897)',\n        'chart-4': 'oklch(0.845 0.118 305.365)',\n        'chart-5': 'oklch(0.945 0.068 305.365)',\n        radius: '0.75rem',\n      },\n    },\n  },\n  \n  'solar-extended': {\n    label: 'Solar Warmth (Extended)',\n    value: 'solar-extended',\n    styles: {\n      light: {\n        background: 'oklch(0.985 0.01 83.124)',\n        foreground: 'oklch(0.145 0 0)',\n        card: 'oklch(1 0 0)',\n        'card-foreground': 'oklch(0.145 0 0)',\n        popover: 'oklch(1 0 0)',\n        'popover-foreground': 'oklch(0.145 0 0)',\n        primary: 'oklch(0.656 0.214 53.877)',\n        'primary-foreground': 'oklch(0.985 0.015 53.877)',\n        secondary: 'oklch(0.97 0 0)',\n        'secondary-foreground': 'oklch(0.205 0 0)',\n        muted: 'oklch(0.97 0 0)',\n        'muted-foreground': 'oklch(0.556 0 0)',\n        accent: 'oklch(0.745 0.188 83.124)',\n        'accent-foreground': 'oklch(0.145 0 0)',\n        destructive: 'oklch(0.577 0.245 27.325)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(0.922 0 0)',\n        input: 'oklch(0.922 0 0)',\n        ring: 'oklch(0.656 0.214 53.877)',\n        'chart-1': 'oklch(0.656 0.214 53.877)',\n        'chart-2': 'oklch(0.745 0.188 83.124)',\n        'chart-3': 'oklch(0.556 0.234 53.877)',\n        'chart-4': 'oklch(0.845 0.148 83.124)',\n        'chart-5': 'oklch(0.456 0.254 53.877)',\n        radius: '0.625rem',\n      },\n      dark: {\n        background: 'oklch(0.125 0.015 53.877)',\n        foreground: 'oklch(0.985 0.015 83.124)',\n        card: 'oklch(0.185 0.015 53.877)',\n        'card-foreground': 'oklch(0.985 0.015 83.124)',\n        popover: 'oklch(0.245 0.015 53.877)',\n        'popover-foreground': 'oklch(0.985 0.015 83.124)',\n        primary: 'oklch(0.745 0.188 83.124)',\n        'primary-foreground': 'oklch(0.125 0.015 83.124)',\n        secondary: 'oklch(0.245 0.015 53.877)',\n        'secondary-foreground': 'oklch(0.985 0.015 83.124)',\n        muted: 'oklch(0.245 0.015 53.877)',\n        'muted-foreground': 'oklch(0.708 0.015 83.124)',\n        accent: 'oklch(0.656 0.214 53.877)',\n        'accent-foreground': 'oklch(0.985 0.015 53.877)',\n        destructive: 'oklch(0.704 0.191 22.216)',\n        'destructive-foreground': 'oklch(0.98 0 0)',\n        border: 'oklch(1 0 0 / 12%)',\n        input: 'oklch(1 0 0 / 18%)',\n        ring: 'oklch(0.745 0.188 83.124)',\n        'chart-1': 'oklch(0.745 0.188 83.124)',\n        'chart-2': 'oklch(0.656 0.214 53.877)',\n        'chart-3': 'oklch(0.845 0.148 83.124)',\n        'chart-4': 'oklch(0.556 0.234 53.877)',\n        'chart-5': 'oklch(0.945 0.088 83.124)',\n        radius: '0.625rem',\n      },\n    },\n  },\n}\n\n/**\n * All available extended theme presets (original + TweakCN)\n */\nexport const allExtendedThemePresets = {\n  ...extendedThemePresets,\n  ...tweakcnThemePresets,\n}\n\n/**\n * Convert extended theme to CSS variables\n */\nexport function extendedThemeToCSSVariables(\n  theme: ExtendedThemePreset,\n  mode: 'light' | 'dark' = 'light'\n): string {\n  const tokens = theme.styles[mode]\n  const cssVars: string[] = []\n  \n  Object.entries(tokens).forEach(([key, value]) => {\n    cssVars.push(`  --${key}: ${value};`)\n  })\n  \n  return cssVars.join('\\n')\n}\n\n/**\n * Generate complete CSS for an extended theme\n */\nexport function generateExtendedThemeCSS(theme: ExtendedThemePreset): string {\n  const lightCSS = extendedThemeToCSSVariables(theme, 'light')\n  const darkCSS = extendedThemeToCSSVariables(theme, 'dark')\n  \n  return `:root {\n${lightCSS}\n}\n\n.dark {\n${darkCSS}\n}\n\n[data-theme-mode=\"dark\"] {\n${darkCSS}\n}`\n}\n"],"names":["tweakcnThemePresets","extendedThemePresets","label","value","styles","light","background","foreground","card","popover","primary","secondary","muted","accent","destructive","border","input","ring","radius","dark","allExtendedThemePresets","extendedThemeToCSSVariables","theme","mode","tokens","cssVars","Object","entries","forEach","key","push","join","generateExtendedThemeCSS","lightCSS","darkCSS"],"mappings":"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"}

package/dist/fields/ThemeColorPickerField.css

@@ -1,65 +1,313 @@
-.theme-color-picker-field {
-  margin-bottom: 1rem;
+/* Professional Color Picker Field Styles */.theme-color-picker-field {
+
+.theme-color-picker-field {  margin-bottom: 1rem;
+
+  margin-bottom: 1.5rem;}
+
 }
 
 .theme-color-picker-field .field-header {
-  margin-bottom: 0.5rem;
+
+.theme-color-picker-field .field-header {  margin-bottom: 0.5rem;
+
+  margin-bottom: 0.5rem;}
+
 }
 
 .theme-color-picker-field .field-label {
-  display: block;
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--theme-text);
-  margin-bottom: 0.25rem;
+
+.theme-color-picker-field .field-label {  display: block;
+
+  display: block;  font-weight: 500;
+
+  font-weight: 600;  font-size: 0.875rem;
+
+  font-size: 0.875rem;  color: var(--theme-text);
+
+  color: var(--theme-text);  margin-bottom: 0.25rem;
+
+  margin-bottom: 0.25rem;}
+
 }
 
 .theme-color-picker-field .field-description {
-  font-size: 0.75rem;
-  color: var(--theme-elevation-400);
-  margin-top: 0.25rem;
-}
 
-.theme-color-picker-field .color-picker-container {
+.theme-color-picker-field .field-description {  font-size: 0.75rem;
+
+  font-size: 0.75rem;  color: var(--theme-elevation-400);
+
+  color: var(--theme-elevation-400);  margin-top: 0.25rem;
+
+  margin-top: 0.25rem;}
+
+  line-height: 1.4;
+
+}.theme-color-picker-field .color-picker-container {
+
   display: flex;
-  gap: 0.75rem;
+
+.theme-color-picker-field .color-picker-container {  gap: 0.75rem;
+
+  display: flex;  align-items: center;
+
+  gap: 0.75rem;}
+
   align-items: center;
-}
 
-.theme-color-picker-field .color-input-wrapper {
-  display: flex;
+  position: relative;.theme-color-picker-field .color-input-wrapper {
+
+}  display: flex;
+
   gap: 0.5rem;
-  flex: 1;
-}
 
-.theme-color-picker-field .color-input {
-  width: 60px;
-  height: 38px;
-  border: 1px solid var(--theme-elevation-200);
+.theme-color-picker-field .color-input-wrapper {  flex: 1;
+
+  display: flex;}
+
+  gap: 0.5rem;
+
+  flex: 1;.theme-color-picker-field .color-input {
+
+  align-items: center;  width: 60px;
+
+  position: relative;  height: 38px;
+
+}  border: 1px solid var(--theme-elevation-200);
+
   border-radius: 4px;
-  cursor: pointer;
-  padding: 2px;
+
+/* Color Swatch Button */  cursor: pointer;
+
+.theme-color-picker-field .color-swatch {  padding: 2px;
+
+  width: 48px;}
+
+  height: 48px;
+
+  border: 2px solid var(--theme-elevation-200);.theme-color-picker-field .color-input:hover {
+
+  border-radius: 8px;  border-color: var(--theme-elevation-400);
+
+  cursor: pointer;}
+
+  padding: 0;
+
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);.theme-color-picker-field .color-input:focus {
+
+  transition: all 0.2s;  outline: 2px solid var(--theme-elevation-500);
+
+  position: relative;  outline-offset: 1px;
+
+}}
+
+
+
+.theme-color-picker-field .color-swatch::before {.theme-color-picker-field .text-input {
+
+  content: '';  flex: 1;
+
+  position: absolute;  height: 38px;
+
+  inset: 0;  padding: 0 0.75rem;
+
+  background:   border: 1px solid var(--theme-elevation-200);
+
+    linear-gradient(45deg, #ccc 25%, transparent 25%),  border-radius: 4px;
+
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),  font-family: monospace;
+
+    linear-gradient(45deg, transparent 75%, #ccc 75%),  font-size: 0.875rem;
+
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);  background: var(--theme-elevation-0);
+
+  background-size: 8px 8px;  color: var(--theme-text);
+
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;}
+
+  border-radius: 6px;
+
+  z-index: -1;.theme-color-picker-field .text-input:hover {
+
+}  border-color: var(--theme-elevation-400);
+
 }
 
-.theme-color-picker-field .color-input:hover {
-  border-color: var(--theme-elevation-400);
+.theme-color-picker-field .color-swatch:hover {
+
+  border-color: var(--theme-elevation-500);.theme-color-picker-field .text-input:focus {
+
+  transform: scale(1.05);  outline: 2px solid var(--theme-elevation-500);
+
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  outline-offset: 1px;
+
+}  border-color: var(--theme-elevation-500);
+
+}
+
+.theme-color-picker-field .color-swatch:focus {
+
+  outline: 2px solid var(--theme-elevation-700);.theme-color-picker-field .text-input::placeholder {
+
+  outline-offset: 2px;  color: var(--theme-elevation-400);
+
+}}
+
+
+
+/* Professional Color Picker Popover */.theme-color-picker-field .text-input:invalid {
+
+.theme-color-picker-field .color-picker-popover {  border-color: #ef4444;
+
+  position: absolute;}
+
+  top: 100%;
+
+  left: 0;.theme-color-picker-field .color-preview {
+
+  margin-top: 8px;  width: 120px;
+
+  z-index: 1000;  height: 38px;
+
+  background: var(--theme-elevation-0);  border-radius: 4px;
+
+  border: 1px solid var(--theme-elevation-200);  border: 1px solid var(--theme-elevation-200);
+
+  border-radius: 12px;  display: flex;
+
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);  align-items: center;
+
+  padding: 16px;  justify-content: center;
+
+  min-width: 280px;  position: relative;
+
+}  overflow: hidden;
+
 }
 
-.theme-color-picker-field .color-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
+/* react-colorful styles override */
+
+.theme-color-picker-field .react-colorful {.theme-color-picker-field .color-preview .preview-label {
+
+  width: 100%;  font-size: 0.75rem;
+
+  height: 200px;  font-family: monospace;
+
+  border-radius: 8px;  padding: 0.25rem 0.5rem;
+
+}  background: rgba(255, 255, 255, 0.9);
+
+  border-radius: 2px;
+
+.theme-color-picker-field .react-colorful__saturation {  backdrop-filter: blur(4px);
+
+  border-radius: 8px 8px 0 0;  color: #000;
+
+}  font-weight: 500;
+
 }
 
+.theme-color-picker-field .react-colorful__hue {
+
+  height: 16px;.theme-color-picker-field .mini-preview {
+
+  border-radius: 0 0 8px 8px;  margin-top: 1rem;
+
+}  padding: 1rem;
+
+  border-radius: 6px;
+
+.theme-color-picker-field .react-colorful__pointer {  border: 1px solid;
+
+  width: 20px;}
+
+  height: 20px;
+
+  border: 3px solid #fff;.theme-color-picker-field .mini-preview .preview-card {
+
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  padding: 1rem;
+
+}  border-radius: 4px;
+
+  border: 1px solid;
+
+.theme-color-picker-field .picker-footer {  display: flex;
+
+  display: flex;  gap: 0.5rem;
+
+  gap: 8px;  flex-wrap: wrap;
+
+  margin-top: 12px;}
+
+  align-items: center;
+
+}.theme-color-picker-field .mini-preview .preview-button {
+
+  padding: 0.5rem 1rem;
+
+.theme-color-picker-field .hex-input {  border-radius: 4px;
+
+  flex: 1;  border: none;
+
+  height: 36px;  font-size: 0.875rem;
+
+  padding: 0 12px;  font-weight: 500;
+
+  border: 1px solid var(--theme-elevation-200);  cursor: pointer;
+
+  border-radius: 6px;  transition: opacity 0.2s;
+
+  font-family: monospace;}
+
+  font-size: 0.875rem;
+
+  background: var(--theme-elevation-50);.theme-color-picker-field .mini-preview .preview-button:hover {
+
+  color: var(--theme-text);  opacity: 0.9;
+
+  transition: all 0.2s;}
+
+}
+
+.theme-color-picker-field .mini-preview .preview-button.secondary {
+
+.theme-color-picker-field .hex-input:focus {  border: 1px solid currentColor;
+
+  outline: none;}
+
+  border-color: var(--theme-elevation-600);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.theme-color-picker-field .close-button {
+  height: 36px;
+  padding: 0 16px;
+  background: var(--theme-elevation-700);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.theme-color-picker-field .close-button:hover {
+  background: var(--theme-elevation-800);
+  transform: translateY(-1px);
+}
+
+/* Text Input */
 .theme-color-picker-field .text-input {
   flex: 1;
-  height: 38px;
-  padding: 0 0.75rem;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 0.875rem;
+  height: 48px;
+  padding: 0 1rem;
+  border: 2px solid var(--theme-elevation-200);
+  border-radius: 8px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+  font-size: 0.9rem;
   background: var(--theme-elevation-0);
   color: var(--theme-text);
+  transition: all 0.2s;
 }
 
 .theme-color-picker-field .text-input:hover {
@@ -67,72 +315,109 @@
 }
 
 .theme-color-picker-field .text-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-  border-color: var(--theme-elevation-500);
+  outline: none;
+  border-color: var(--theme-elevation-600);
+  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 .text-input:invalid {
-  border-color: #ef4444;
-}
-
+/* Color Preview */
 .theme-color-picker-field .color-preview {
-  width: 120px;
-  height: 38px;
-  border-radius: 4px;
-  border: 1px solid var(--theme-elevation-200);
+  width: 140px;
+  height: 48px;
+  border-radius: 8px;
+  border: 2px solid var(--theme-elevation-200);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.theme-color-picker-field .color-preview::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: 
+    linear-gradient(45deg, #eee 25%, transparent 25%),
+    linear-gradient(-45deg, #eee 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #eee 75%),
+    linear-gradient(-45deg, transparent 75%, #eee 75%);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+  z-index: 0;
 }
 
 .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;
+  font-weight: 600;
+  padding: 0.375rem 0.75rem;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 4px;
+  z-index: 1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+/* Mini Preview */
 .theme-color-picker-field .mini-preview {
+  width: 100%;
   margin-top: 1rem;
   padding: 1rem;
-  border-radius: 6px;
   border: 1px solid;
+  border-radius: 8px;
+  background-clip: padding-box;
 }
 
-.theme-color-picker-field .mini-preview .preview-card {
+.theme-color-picker-field .preview-card {
   padding: 1rem;
-  border-radius: 4px;
   border: 1px solid;
+  border-radius: 6px;
   display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
 }
 
-.theme-color-picker-field .mini-preview .preview-button {
+.theme-color-picker-field .preview-button {
   padding: 0.5rem 1rem;
-  border-radius: 4px;
   border: none;
+  border-radius: 6px;
+  font-weight: 600;
   font-size: 0.875rem;
-  font-weight: 500;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: all 0.2s;
 }
 
-.theme-color-picker-field .mini-preview .preview-button:hover {
+.theme-color-picker-field .preview-button:hover {
   opacity: 0.9;
+  transform: translateY(-1px);
 }
 
-.theme-color-picker-field .mini-preview .preview-button.secondary {
-  border: 1px solid currentColor;
+.theme-color-picker-field .preview-button.secondary {
+  opacity: 0.95;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .theme-color-picker-field .color-preview::before,
+  .theme-color-picker-field .color-swatch::before {
+    background: 
+      linear-gradient(45deg, #333 25%, transparent 25%),
+      linear-gradient(-45deg, #333 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #333 75%),
+      linear-gradient(-45deg, transparent 75%, #333 75%);
+  }
+  
+  .theme-color-picker-field .color-preview .preview-label {
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
 }