@kilivi/payloadcms-theme-management 0.2.5 → 0.2.6

package/dist/fields/ThemeColorPickerField.css

@@ -1,313 +1,65 @@
-/* Professional Color Picker Field Styles */.theme-color-picker-field {
-
-.theme-color-picker-field {  margin-bottom: 1rem;
-
-  margin-bottom: 1.5rem;}
-
+.theme-color-picker-field {
+  margin-bottom: 1rem;
 }
 
 .theme-color-picker-field .field-header {
-
-.theme-color-picker-field .field-header {  margin-bottom: 0.5rem;
-
-  margin-bottom: 0.5rem;}
-
+  margin-bottom: 0.5rem;
 }
 
 .theme-color-picker-field .field-label {
-
-.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;}
-
+  display: block;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--theme-text);
+  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 .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 {
-
+.theme-color-picker-field .color-picker-container {
   display: flex;
-
-.theme-color-picker-field .color-picker-container {  gap: 0.75rem;
-
-  display: flex;  align-items: center;
-
-  gap: 0.75rem;}
-
+  gap: 0.75rem;
   align-items: center;
-
-  position: relative;.theme-color-picker-field .color-input-wrapper {
-
-}  display: flex;
-
-  gap: 0.5rem;
-
-.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;
-
-/* 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-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;
-
-}
-
-/* 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 .color-input-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  flex: 1;
 }
 
-.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 .color-input {
+  width: 60px;
+  height: 38px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 2px;
 }
 
-.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 .color-input:hover {
+  border-color: var(--theme-elevation-400);
 }
 
-.theme-color-picker-field .close-button:hover {
-  background: var(--theme-elevation-800);
-  transform: translateY(-1px);
+.theme-color-picker-field .color-input:focus {
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
 }
 
-/* Text Input */
 .theme-color-picker-field .text-input {
   flex: 1;
-  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;
+  height: 38px;
+  padding: 0 0.75rem;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.875rem;
   background: var(--theme-elevation-0);
   color: var(--theme-text);
-  transition: all 0.2s;
 }
 
 .theme-color-picker-field .text-input:hover {
@@ -315,109 +67,72 @@
 }
 
 .theme-color-picker-field .text-input:focus {
-  outline: none;
-  border-color: var(--theme-elevation-600);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
+  border-color: var(--theme-elevation-500);
 }
 
 .theme-color-picker-field .text-input::placeholder {
   color: var(--theme-elevation-400);
 }
 
-/* Color Preview */
+.theme-color-picker-field .text-input:invalid {
+  border-color: #ef4444;
+}
+
 .theme-color-picker-field .color-preview {
-  width: 140px;
-  height: 48px;
-  border-radius: 8px;
-  border: 2px solid var(--theme-elevation-200);
+  width: 120px;
+  height: 38px;
+  border-radius: 4px;
+  border: 1px 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;
-  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;
+  padding: 0.25rem 0.5rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 2px;
+  backdrop-filter: blur(4px);
+  color: #000;
+  font-weight: 500;
 }
 
-/* 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 .preview-card {
+.theme-color-picker-field .mini-preview .preview-card {
   padding: 1rem;
+  border-radius: 4px;
   border: 1px solid;
-  border-radius: 6px;
   display: flex;
-  gap: 0.75rem;
-  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
-.theme-color-picker-field .preview-button {
+.theme-color-picker-field .mini-preview .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: all 0.2s;
+  transition: opacity 0.2s;
 }
 
-.theme-color-picker-field .preview-button:hover {
+.theme-color-picker-field .mini-preview .preview-button:hover {
   opacity: 0.9;
-  transform: translateY(-1px);
 }
 
-.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;
-  }
+.theme-color-picker-field .mini-preview .preview-button.secondary {
+  border: 1px solid currentColor;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kilivi/payloadcms-theme-management",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Theme configuration plugin for Payload CMS v3",
   "type": "module",
   "main": "./dist/index.js",
@@ -60,20 +60,33 @@
   "devDependencies": {
     "@payloadcms/db-mongodb": "^3.0.0",
     "@payloadcms/richtext-lexical": "^3.0.0",
+    "@payloadcms/richtext-slate": "^3.59.1",
+    "@playwright/test": "^1.56.0",
     "@swc/cli": "^0.1.65",
     "@swc/core": "^1.6.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.12",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "copyfiles": "^2.4.1",
     "jest": "^30.2.0",
+    "mongodb-memory-server": "^10.2.3",
     "payload": "^3.58.0",
+    "playwright": "^1.56.0",
+    "postcss": "^8.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.4.4",
-    "typescript": "^5.5.3"
+    "tsx": "^4.20.6",
+    "typescript": "^5.5.3",
+    "vite-plugin-commonjs": "^0.10.4",
+    "vite-plugin-static-copy": "^3.1.3",
+    "vitest": "^3.2.4"
   },
   "publishConfig": {
     "access": "public"
@@ -89,9 +102,11 @@
     "clean": "rimraf dist tsconfig.tsbuildinfo",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
     "validate": "node validate-fields.js",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
+    "test": "tsx node_modules/vitest/vitest.mjs run --config dev/vitest.simple.config.ts",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
     "lint": "eslint src",
     "lint:fix": "eslint --fix --ext .ts,.tsx src"
   }