panda-core 0.11.0 → 0.12.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecbb8f9e4f925e37db74cbb9bec9b45277feceafc990fbab333433adf86e8e36
-  data.tar.gz: ab419ee62bb77a3c382b462997439853ec07e438a37ea0d02935eb52d69d7169
+  metadata.gz: e6410ecd6025f6f46628cab53dbb0d19fb7d5fc01fddbdfb983fd6fe4907ef74
+  data.tar.gz: ed99ca839355558507da68f89723cd80c93451265bf9d93e5a24be44b22253fd
 SHA512:
-  metadata.gz: 79f71a37792d0c3b85edb9d211459e2b1433c3fab96bc8adfa707bb8ce443f11c80cdb12c05a75a03154912908c1bb759fdc2031b3ae1840a045f1629d3f0d14
-  data.tar.gz: 1d4f21c85d14ee7a474d8a83f1d99bccac31761a2803372a9d10d49156618cc40331d598ea805273040f8b56b5f4562bd873765bde423c76e358a76aab8ca56a
+  metadata.gz: 22640c748ea5cdaeba3e69cceffbccfbd81f127057036ccaa69f129566866f1b465ec92f24f54faff56a6ab1ec32734de8b4503546407f6d5166cdb1e9dd404a
+  data.tar.gz: c39cb2a7f4659e26b04612ad78a8844e296850a4477f5725dad2699b9c5b62f0859ab9ffdabbbbf240961fb0fa9d5ddf065cd3d8b60ae65c319f658b8f540cc4

data/README.md

@@ -271,6 +271,21 @@ bundle exec rspec spec/generators
 bundle exec rspec spec/system
 ```
 
+### CI/Docker parity
+
+The GitHub Actions workflow now builds a reusable CI image (Chrome + PostgreSQL + Ruby). You can reuse it locally:
+
+```
+bin/ci build   # build the CI image locally
+bin/ci test    # run the suite inside the container
+```
+
+To dry-run the workflow with `act` (uses the locally built image tagged `:local`):
+
+```
+act -j test-stable
+```
+
 ## Contributing
 
 1. Fork it

data/app/assets/tailwind/application.css

@@ -1,30 +1,59 @@
 @import 'tailwindcss';
 
 @theme {
-  /* Legacy colors */
-  --color-white: var(--color-white);
-  --color-black: var(--color-black);
-  --color-light: var(--color-light);
-  --color-mid: var(--color-mid);
-  --color-dark: var(--color-dark);
-  --color-highlight: var(--color-highlight);
-  --color-active: var(--color-active);
-  --color-inactive: var(--color-inactive);
-  --color-warning: var(--color-warning);
-  --color-error: var(--color-error);
-
-  /* Tailwind UI compatible primary scale */
-  --color-primary-50: var(--color-primary-50);
-  --color-primary-100: var(--color-primary-100);
-  --color-primary-200: var(--color-primary-200);
-  --color-primary-300: var(--color-primary-300);
-  --color-primary-400: var(--color-primary-400);
-  --color-primary-500: var(--color-primary-500);
-  --color-primary-600: var(--color-primary-600);
-  --color-primary-700: var(--color-primary-700);
-  --color-primary-800: var(--color-primary-800);
-  --color-primary-900: var(--color-primary-900);
-  --color-primary-950: var(--color-primary-950);
+  /* Legacy colors - DEPRECATED: Use primary-* scale instead */
+  /* Fallback values ensure UI is visible even without data-theme attribute */
+  --color-white: #f9f9f9;
+  --color-black: #1a161d;
+  --color-light: #f1f9fa;
+  --color-mid: #3c879e;
+  --color-dark: #182934;
+  --color-highlight: #d04014;
+  --color-active: #16a34a;
+  --color-inactive: #dbeafe;
+  --color-warning: #f59e0b;
+  --color-error: #dc2626;
+
+  /* Primary color scale (Glacier/Teal) - with fallback values */
+  --color-primary-50: #f1f9fa;
+  --color-primary-100: #dbeef2;
+  --color-primary-200: #bcdde5;
+  --color-primary-300: #83bfcf;
+  --color-primary-400: #57a3b9;
+  --color-primary-500: #3c879e;
+  --color-primary-600: #346e86;
+  --color-primary-700: #305b6e;
+  --color-primary-800: #2e4d5c;
+  --color-primary-900: #2a424f;
+  --color-primary-950: #182934;
+
+  /* Semantic colors - Success (Green) */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+
+  /* Semantic colors - Error (Red) */
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+
+  /* Semantic colors - Warning (Amber) */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+
+  /* Semantic colors - Info (Blue) */
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
 
   /* Map indigo to primary for Tailwind UI compatibility */
   --color-indigo-50: var(--color-primary-50);
@@ -39,18 +68,18 @@
   --color-indigo-900: var(--color-primary-900);
   --color-indigo-950: var(--color-primary-950);
 
-  /* Gray scale */
-  --color-gray-50: var(--color-gray-50);
-  --color-gray-100: var(--color-gray-100);
-  --color-gray-200: var(--color-gray-200);
-  --color-gray-300: var(--color-gray-300);
-  --color-gray-400: var(--color-gray-400);
-  --color-gray-500: var(--color-gray-500);
-  --color-gray-600: var(--color-gray-600);
-  --color-gray-700: var(--color-gray-700);
-  --color-gray-800: var(--color-gray-800);
-  --color-gray-900: var(--color-gray-900);
-  --color-gray-950: var(--color-gray-950);
+  /* Gray scale - with fallback values */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
 }
 
 @layer base {
@@ -58,30 +87,58 @@
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
-    /* Legacy color variables (kept for backwards compatibility) */
-    --color-light: rgb(238, 206, 230); /* #EECEE6 */
-    --color-mid: rgb(141, 94, 183); /* #8D5EB7 */
-    --color-dark: rgb(33, 29, 73); /* #211D49 */
+    /* Legacy color variables - DEPRECATED: Map to primary scale */
+    --color-light: rgb(241, 249, 250); /* Maps to primary-50 */
+    --color-mid: rgb(60, 135, 158); /* Maps to primary-500 */
+    --color-dark: rgb(24, 41, 52); /* Maps to primary-950 */
 
     --color-highlight: rgb(208, 64, 20); /* #D04014 */
 
-    --color-active: rgb(0, 135, 85); /* #008755 */
-    --color-warning: rgb(250, 207, 142); /* #FACF8E */
-    --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
-    --color-error: rgb(245, 129, 129); /* #F58181 */
-
-    /* Full Tailwind UI compatible color scale - Primary (Purple palette) */
-    --color-primary-50: rgb(250, 245, 255); /* Very light purple */
-    --color-primary-100: rgb(243, 232, 255); /* Lighter purple */
-    --color-primary-200: rgb(233, 213, 255); /* Light purple */
-    --color-primary-300: rgb(216, 180, 254); /* Medium light purple */
-    --color-primary-400: rgb(192, 132, 252); /* Medium purple */
-    --color-primary-500: rgb(141, 94, 183); /* Main brand color (mid) */
-    --color-primary-600: rgb(120, 80, 160); /* Darker purple */
-    --color-primary-700: rgb(100, 65, 140); /* Dark purple */
-    --color-primary-800: rgb(60, 45, 100); /* Very dark purple */
-    --color-primary-900: rgb(33, 29, 73); /* Darkest (dark) */
-    --color-primary-950: rgb(24, 20, 50); /* Ultra dark */
+    --color-active: rgb(22, 163, 74); /* green-600 - success */
+    --color-warning: rgb(245, 158, 11); /* amber-500 */
+    --color-inactive: rgb(219, 234, 254); /* blue-100 */
+    --color-error: rgb(220, 38, 38); /* red-600 */
+
+    /* Primary color scale - Glacier (Teal) */
+    --color-primary-50: rgb(241, 249, 250); /* #f1f9fa */
+    --color-primary-100: rgb(219, 238, 242); /* #dbeef2 */
+    --color-primary-200: rgb(188, 221, 229); /* #bcdde5 */
+    --color-primary-300: rgb(131, 191, 207); /* #83bfcf */
+    --color-primary-400: rgb(87, 163, 185); /* #57a3b9 */
+    --color-primary-500: rgb(60, 135, 158); /* #3c879e */
+    --color-primary-600: rgb(52, 110, 134); /* #346e86 */
+    --color-primary-700: rgb(48, 91, 110); /* #305b6e */
+    --color-primary-800: rgb(46, 77, 92); /* #2e4d5c */
+    --color-primary-900: rgb(42, 66, 79); /* #2a424f */
+    --color-primary-950: rgb(24, 41, 52); /* #182934 */
+
+    /* Semantic colors - Success (Green) */
+    --color-success-50: rgb(240, 253, 244); /* green-50 */
+    --color-success-100: rgb(220, 252, 231); /* green-100 */
+    --color-success-500: rgb(34, 197, 94); /* green-500 */
+    --color-success-600: rgb(22, 163, 74); /* green-600 */
+    --color-success-700: rgb(21, 128, 61); /* green-700 */
+
+    /* Semantic colors - Error (Red) */
+    --color-error-50: rgb(254, 242, 242); /* red-50 */
+    --color-error-100: rgb(254, 226, 226); /* red-100 */
+    --color-error-500: rgb(239, 68, 68); /* red-500 */
+    --color-error-600: rgb(220, 38, 38); /* red-600 */
+    --color-error-700: rgb(185, 28, 28); /* red-700 */
+
+    /* Semantic colors - Warning (Amber) */
+    --color-warning-50: rgb(255, 251, 235); /* amber-50 */
+    --color-warning-100: rgb(254, 243, 199); /* amber-100 */
+    --color-warning-500: rgb(245, 158, 11); /* amber-500 */
+    --color-warning-600: rgb(217, 119, 6); /* amber-600 */
+    --color-warning-700: rgb(180, 83, 9); /* amber-700 */
+
+    /* Semantic colors - Info (Blue) */
+    --color-info-50: rgb(239, 246, 255); /* blue-50 */
+    --color-info-100: rgb(219, 234, 254); /* blue-100 */
+    --color-info-500: rgb(59, 130, 246); /* blue-500 */
+    --color-info-600: rgb(37, 99, 235); /* blue-600 */
+    --color-info-700: rgb(29, 78, 216); /* blue-700 */
 
     /* Gray scale for UI elements */
     --color-gray-50: rgb(249, 250, 251);
@@ -97,33 +154,62 @@
     --color-gray-950: rgb(3, 7, 18);
   }
 
-  html[data-theme='sky'] {
+  html[data-theme='ocean'] {
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
-    /* Legacy color variables (kept for backwards compatibility) */
-    --color-light: rgb(204, 238, 242); /* #CCEEF2 */
-    --color-mid: rgb(42, 102, 159); /* #2A669F */
-    --color-dark: rgb(20, 32, 74); /* #14204A */
+    /* Legacy color variables - DEPRECATED: Map to primary scale */
+    --color-light: rgb(239, 246, 255); /* Maps to primary-50 (blue-50) */
+    --color-mid: rgb(59, 130, 246); /* Maps to primary-500 (blue-500) */
+    --color-dark: rgb(30, 58, 138); /* Maps to primary-950 (blue-950) */
+
     --color-highlight: rgb(208, 64, 20); /* #D04014 */
 
-    --color-active: rgb(69, 154, 89); /* #459A59 - darker green with better contrast */
-    --color-warning: rgb(244, 190, 102); /* #F4BE66 */
-    --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
-    --color-error: rgb(208, 64, 20); /* #D04014 */
-
-    /* Full Tailwind UI compatible color scale - Primary (Blue palette) */
-    --color-primary-50: rgb(240, 249, 255); /* Very light blue */
-    --color-primary-100: rgb(224, 242, 254); /* Lighter blue */
-    --color-primary-200: rgb(186, 230, 253); /* Light blue */
-    --color-primary-300: rgb(125, 211, 252); /* Medium light blue */
-    --color-primary-400: rgb(56, 189, 248); /* Medium blue */
-    --color-primary-500: rgb(42, 102, 159); /* Main brand color (mid) */
-    --color-primary-600: rgb(35, 85, 132); /* Darker blue */
-    --color-primary-700: rgb(28, 68, 106); /* Dark blue */
-    --color-primary-800: rgb(22, 52, 82); /* Very dark blue */
-    --color-primary-900: rgb(20, 32, 74); /* Darkest (dark) */
-    --color-primary-950: rgb(15, 24, 55); /* Ultra dark */
+    --color-active: rgb(22, 163, 74); /* green-600 - success */
+    --color-warning: rgb(245, 158, 11); /* amber-500 */
+    --color-inactive: rgb(219, 234, 254); /* blue-100 */
+    --color-error: rgb(220, 38, 38); /* red-600 */
+
+    /* Primary color scale - Ocean (Blue) */
+    --color-primary-50: rgb(239, 246, 255); /* blue-50 */
+    --color-primary-100: rgb(219, 234, 254); /* blue-100 */
+    --color-primary-200: rgb(191, 219, 254); /* blue-200 */
+    --color-primary-300: rgb(147, 197, 253); /* blue-300 */
+    --color-primary-400: rgb(96, 165, 250); /* blue-400 */
+    --color-primary-500: rgb(59, 130, 246); /* blue-500 */
+    --color-primary-600: rgb(37, 99, 235); /* blue-600 */
+    --color-primary-700: rgb(29, 78, 216); /* blue-700 */
+    --color-primary-800: rgb(30, 64, 175); /* blue-800 */
+    --color-primary-900: rgb(30, 58, 138); /* blue-900 */
+    --color-primary-950: rgb(23, 37, 84); /* blue-950 */
+
+    /* Semantic colors - Success (Green) */
+    --color-success-50: rgb(240, 253, 244);
+    --color-success-100: rgb(220, 252, 231);
+    --color-success-500: rgb(34, 197, 94);
+    --color-success-600: rgb(22, 163, 74);
+    --color-success-700: rgb(21, 128, 61);
+
+    /* Semantic colors - Error (Red) */
+    --color-error-50: rgb(254, 242, 242);
+    --color-error-100: rgb(254, 226, 226);
+    --color-error-500: rgb(239, 68, 68);
+    --color-error-600: rgb(220, 38, 38);
+    --color-error-700: rgb(185, 28, 28);
+
+    /* Semantic colors - Warning (Amber) */
+    --color-warning-50: rgb(255, 251, 235);
+    --color-warning-100: rgb(254, 243, 199);
+    --color-warning-500: rgb(245, 158, 11);
+    --color-warning-600: rgb(217, 119, 6);
+    --color-warning-700: rgb(180, 83, 9);
+
+    /* Semantic colors - Info (Teal - different from primary for ocean theme) */
+    --color-info-50: rgb(241, 249, 250);
+    --color-info-100: rgb(219, 238, 242);
+    --color-info-500: rgb(60, 135, 158);
+    --color-info-600: rgb(52, 110, 134);
+    --color-info-700: rgb(48, 91, 110);
 
     /* Gray scale for UI elements (same across themes) */
     --color-gray-50: rgb(249, 250, 251);
@@ -145,19 +231,16 @@
     inset: 0;
   }
 
-  /* Admin gradient backgrounds */
-  html[data-theme='default'] .bg-gradient-admin {
-    background: linear-gradient(to bottom right, rgb(33, 29, 73), rgb(141, 94, 183));
-  }
-
-  html[data-theme='sky'] .bg-gradient-admin {
-    background: linear-gradient(to bottom right, rgb(20, 32, 74), rgb(42, 102, 159));
+  /* Admin gradient backgrounds - neutral gray for chrome */
+  .bg-gradient-admin {
+    background: linear-gradient(to bottom right, rgb(17, 24, 39), rgb(55, 65, 81));
+    border-bottom-left-radius: 0;
   }
 }
 
 /* Form input styles */
 @layer components {
-  /* Base form field styles - matches panda-cms admin pattern */
+  /* Base form field styles */
   input[type='text'],
   input[type='email'],
   input[type='password'],
@@ -172,17 +255,17 @@
   input[type='search'],
   textarea {
     @apply block w-full rounded-md border-0 p-2 text-gray-900 bg-white;
-    @apply ring-1 ring-inset ring-mid placeholder:text-gray-300;
-    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
+    @apply ring-1 ring-inset ring-primary-400 placeholder:text-gray-400;
+    @apply focus:ring-2 focus:ring-inset focus:ring-primary-600;
     @apply hover:cursor-pointer sm:leading-6;
     @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
   }
 
-  /* Select specific styling - matches panda-cms admin pattern */
+  /* Select specific styling */
   select {
     @apply block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 bg-white;
-    @apply ring-1 ring-inset ring-mid;
-    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
+    @apply ring-1 ring-inset ring-primary-400;
+    @apply focus:ring-2 focus:ring-inset focus:ring-primary-600;
     @apply hover:cursor-pointer sm:leading-6;
     @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
     @apply appearance-none bg-right bg-no-repeat;
@@ -194,8 +277,8 @@
   /* Checkbox and radio styling */
   input[type='checkbox'],
   input[type='radio'] {
-    @apply w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded transition-colors duration-200;
-    @apply focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
+    @apply w-4 h-4 text-primary-600 bg-white border-gray-300 rounded transition-colors duration-200;
+    @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
     @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
   }
 
@@ -217,30 +300,34 @@
   input.error,
   textarea.error,
   select.error {
-    @apply ring-red-500 focus:ring-red-500;
+    @apply ring-error-500 focus:ring-error-500;
   }
 
   .field-error {
-    @apply text-sm text-red-600 mt-1;
+    @apply text-sm text-error-600 mt-1;
   }
 
   /* Button styling */
   .btn {
     @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold rounded-md transition-colors duration-200;
-    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
+    @apply focus-visible:outline-2 focus-visible:outline-offset-2;
     @apply disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   .btn-primary {
-    @apply bg-mid text-white hover:opacity-90 focus:ring-mid;
+    @apply bg-primary-500 text-white hover:bg-primary-600 focus-visible:outline-primary-600;
   }
 
   .btn-secondary {
-    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
+    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:outline-gray-500;
   }
 
   .btn-danger {
-    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+    @apply bg-error-600 text-white hover:bg-error-700 focus-visible:outline-error-600;
+  }
+
+  .btn-success {
+    @apply bg-success-600 text-white hover:bg-success-700 focus-visible:outline-success-600;
   }
 
   a.block-link:after {
@@ -253,7 +340,7 @@
 /* EditorJS content styles */
 @layer components {
   .codex-editor__redactor .ce-block .ce-block__content {
-    @apply text-base font-normal font-sans text-dark leading-[1.6] space-y-[1.6rem];
+    @apply text-base font-normal font-sans text-gray-900 leading-[1.6] space-y-[1.6rem];
 
     h1.ce-header {
       @apply text-3xl md:text-4xl font-semibold font-sans leading-[1.2];
@@ -272,7 +359,7 @@
       @apply leading-[1.6] tracking-wide max-w-[85ch];
 
       a {
-        @apply text-[#1A9597] underline underline-offset-2 hover:text-[#158486] focus:outline-2 focus:outline-offset-2 focus:outline-[#1A9597];
+        @apply text-primary-600 underline underline-offset-2 hover:text-primary-700 focus:outline-2 focus:outline-offset-2 focus:outline-primary-600;
       }
 
       strong,
@@ -286,10 +373,10 @@
     }
 
     .cdx-quote {
-      @apply bg-[#eef0f3] border-l-inactive border-l-8 p-6 mb-4;
+      @apply bg-gray-100 border-l-primary-300 border-l-8 p-6 mb-4;
 
       .cdx-quote__caption {
-        @apply block ml-6 mt-2 text-sm text-dark;
+        @apply block ml-6 mt-2 text-sm text-gray-600;
       }
 
       .cdx-quote__text {
@@ -297,7 +384,7 @@
         @apply pl-6;
 
         &:before {
-          @apply -ml-8 mr-2 text-dark text-6xl leading-4 align-text-bottom font-serif;
+          @apply -ml-8 mr-2 text-primary-600 text-6xl leading-4 align-text-bottom font-serif;
           content: open-quote;
         }
 
@@ -348,18 +435,18 @@
     }
 
     .cdx-table {
-      @apply w-full border-collapse border-2 border-dark my-6;
+      @apply w-full border-collapse border-2 border-gray-300 my-6;
 
       &__head {
-        @apply font-semibold border-dark border-r-2 p-3 bg-light;
+        @apply font-semibold border-gray-300 border-r-2 p-3 bg-gray-100;
       }
 
       &__row {
-        @apply border-dark border-b-2;
+        @apply border-gray-300 border-b-2;
       }
 
       &__cell {
-        @apply border-dark border-r-2 p-3;
+        @apply border-gray-300 border-r-2 p-3;
       }
     }
 

data/app/builders/panda/core/form_builder.rb

@@ -149,7 +149,7 @@ module Panda
                 @template.image_tag("", alt: "Crop preview", data: {image_cropper_target: "preview"}, class: "max-w-full") +
                   # Cropper controls
                   content_tag(:div, class: "mt-4 flex gap-2 flex-wrap") do
-                    @template.button_tag("Crop & Save", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500", data: {action: "click->image-cropper#crop"}) +
+                    @template.button_tag("Crop & Save", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-primary-600", data: {action: "click->image-cropper#crop"}) +
                       @template.button_tag("Cancel", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#cancel"}) +
                       @template.button_tag(type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#reset"}) do
                         @template.content_tag(:i, "", class: "fa-solid fa-rotate-left") +
@@ -200,7 +200,7 @@ module Panda
                   end +
                     # Upload area
                     content_tag(:div, class: "mt-4 flex items-baseline justify-center text-sm leading-6 text-gray-600 dark:text-gray-400") do
-                      content_tag(:label, for: field_id, class: "relative cursor-pointer rounded-md bg-transparent font-semibold text-indigo-600 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:focus-within:outline-indigo-500 dark:hover:text-indigo-300") do
+                      content_tag(:label, for: field_id, class: "relative cursor-pointer rounded-md bg-transparent font-semibold text-primary-600 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary-600 hover:text-primary-500 dark:text-primary-400 dark:focus-within:outline-primary-500 dark:hover:text-primary-300") do
                         content_tag(:span, "Upload a file") +
                           super(method, options.reverse_merge(
                             id: field_id,
@@ -261,11 +261,11 @@ module Panda
       def submit(value = nil, options = {})
         value ||= submit_default_value
 
-        # Use the primary mid color for save/create actions
+        # Use the primary color for save/create actions
         action = object.persisted? ? :save : :create
         button_classes = case action
         when :save, :create
-          "text-white bg-mid hover:bg-mid/80"
+          "text-white bg-primary-500 hover:bg-primary-600"
         when :save_inactive
           "text-white bg-gray-400"
         when :secondary
@@ -275,7 +275,7 @@ module Panda
         end
 
         # Combine with common button classes
-        classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 #{button_classes}"
+        classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 px-3 py-2 #{button_classes}"
 
         options[:class] = options[:class] ? "#{options[:class]} #{classes}" : classes
 
@@ -317,7 +317,7 @@ module Panda
                 is_checked = (current_value.to_s == choice_value.to_s)
 
                 content_tag(:label, class: "flex items-center gap-x-3 rounded-lg border border-gray-300 px-3 py-3 text-sm/6 font-medium cursor-pointer hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5") do
-                  radio_button(method, choice_value, {id: choice_id, checked: is_checked, class: "size-4 border-gray-300 text-indigo-600 focus:ring-indigo-600 dark:border-white/10 dark:bg-white/5"}) +
+                  radio_button(method, choice_value, {id: choice_id, checked: is_checked, class: "size-4 border-gray-300 text-primary-600 focus:ring-primary-600 dark:border-white/10 dark:bg-white/5"}) +
                     content_tag(:span, choice_label, class: "text-gray-900 dark:text-white")
                 end
               end.join.html_safe
@@ -344,7 +344,7 @@ module Panda
       end
 
       def base_input_styles
-        "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+        "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500"
       end
 
       def input_styles
@@ -360,7 +360,7 @@ module Panda
       end
 
       def select_styles
-        "block w-full rounded-md bg-white px-3 py-1.5 pr-8 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 appearance-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus:outline-indigo-500"
+        "block w-full rounded-md bg-white px-3 py-1.5 pr-8 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 appearance-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus:outline-primary-500"
       end
 
       def select_svg
@@ -401,7 +401,7 @@ module Panda
       def error_message(attribute)
         return unless object.respond_to?(:errors) && object.errors[attribute]&.any?
 
-        content_tag(:p, class: "mt-2 text-sm text-red-600") do
+        content_tag(:p, class: "mt-2 text-sm text-error-600") do
           object.errors[attribute].join(", ")
         end
       end

data/app/components/panda/core/UI/button.rb

@@ -89,15 +89,15 @@ module Panda
         def variant_classes
           case @variant
           when :primary
-            # Blue primary button with dark mode support
-            "bg-blue-600 text-white shadow-xs hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:bg-blue-500 dark:shadow-none dark:hover:bg-blue-400 dark:focus-visible:outline-blue-500"
+            # Primary button with dark mode support
+            "bg-primary-500 text-white shadow-xs hover:bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:bg-primary-400 dark:shadow-none dark:hover:bg-primary-500 dark:focus-visible:outline-primary-500"
           when :secondary
             # White/gray secondary button with ring and dark mode support
             "bg-white text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20"
           when :success
-            "bg-green-600 text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 dark:bg-green-500 dark:shadow-none dark:hover:bg-green-400 dark:focus-visible:outline-green-500"
+            "bg-success-600 text-white shadow-xs hover:bg-success-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success-600 dark:bg-success-500 dark:shadow-none dark:hover:bg-success-600 dark:focus-visible:outline-success-500"
           when :danger
-            "bg-red-600 text-white shadow-xs hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400 dark:focus-visible:outline-red-500"
+            "bg-error-600 text-white shadow-xs hover:bg-error-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error-600 dark:bg-error-500 dark:shadow-none dark:hover:bg-error-600 dark:focus-visible:outline-error-500"
           when :ghost
             "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
           else # :default

data/app/components/panda/core/admin/button_component.rb

@@ -71,13 +71,13 @@ module Panda
         def action_classes
           case @action
           when :save, :create
-            "text-white bg-mid hover:bg-mid/80"
+            "text-white bg-primary-500 hover:bg-primary-600 focus-visible:outline-primary-600"
           when :save_inactive
             "text-white bg-gray-400"
           when :secondary
             "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
           when :delete, :destroy, :danger
-            "text-red-600 border border-red-600 bg-red-100 hover:bg-red-200 hover:text-red-700 focus-visible:outline-red-300"
+            "text-error-600 border border-error-600 bg-error-100 hover:bg-error-200 hover:text-error-700 focus-visible:outline-error-300"
           else
             "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
           end

data/app/components/panda/core/admin/form_input_component.rb

@@ -36,12 +36,12 @@ module Panda
         private
 
         def input_classes
-          classes = "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset placeholder:text-gray-300 focus:ring-1 focus:ring-inset sm:leading-6"
+          classes = "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:leading-6"
 
           if @disabled
             classes + " ring-gray-300 focus:ring-gray-300 bg-gray-50 cursor-not-allowed"
           else
-            classes + " ring-mid focus:ring-dark hover:cursor-pointer"
+            classes + " ring-primary-400 focus:ring-primary-600 hover:cursor-pointer"
           end
         end
       end

data/app/components/panda/core/admin/form_select_component.rb

@@ -36,12 +36,12 @@ module Panda
         private
 
         def select_classes
-          classes = "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset focus:ring-1 focus:ring-inset sm:leading-6"
+          classes = "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:leading-6"
 
           if @disabled
             classes + " ring-gray-300 focus:ring-gray-300 bg-gray-50 cursor-not-allowed"
           else
-            classes + " ring-mid focus:ring-dark hover:cursor-pointer"
+            classes + " ring-primary-400 focus:ring-primary-600 hover:cursor-pointer"
           end
         end
 

data/app/components/panda/core/admin/panel_component.rb

@@ -16,7 +16,7 @@ module Panda
             end
           end
 
-          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-dark shadow-inherit/20") do
+          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-gray-800 shadow-inherit/20") do
             @heading_content&.call
 
             div(class: "p-4 text-black bg-white rounded-b-lg") do