@orion-studios/payload-admin-components 0.2.0-beta.4 → 0.2.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/admin.css +157 -620
  2. package/dist/client.js +35 -11
  3. package/dist/client.mjs +35 -11
  4. package/dist/index.js +35 -11
  5. package/dist/index.mjs +35 -11
  6. package/package.json +1 -1
  7. package/src/components/ThemeSwitcher.tsx +23 -10
  8. package/src/hooks/useTheme.ts +26 -1
  9. package/src/styles/admin.css +157 -620
package/dist/admin.css CHANGED
@@ -1,694 +1,231 @@
1
1
  /**
2
2
  * Orion Studios Admin Theme System
3
3
  *
4
- * All themes and overrides are inlined in this single file to ensure
5
- * compatibility with Next.js/Turbopack CSS loading from node_modules.
6
- * DO NOT use @import statements — they don't resolve from node_modules.
4
+ * Overrides Payload CMS's own CSS variables for theming.
5
+ * Payload uses --theme-elevation-*, --color-success-*, --style-radius-*, etc.
6
+ * Our CSS lives OUTSIDE @layer to override Payload's @layer payload-default.
7
+ *
8
+ * Theme system:
9
+ * - Light/Dark: Payload's built-in data-theme="dark" (we toggle it)
10
+ * - Brand mode: data-orion-brand attribute overrides accent colors with brand colors
11
+ * - Combinations: light, dark, brand-light (brand + no dark), brand-dark (brand + dark)
7
12
  */
8
13
 
9
- /* Default brand colors (overridden by configureAdmin) */
14
+ /* ============================================================
15
+ Brand color defaults (overridden by configureAdmin inline style)
16
+ ============================================================ */
10
17
  :root {
11
18
  --brand-primary: #3b82f6;
12
19
  --brand-secondary: #8b5cf6;
13
20
  }
14
21
 
15
22
  /* ============================================================
16
- Light Theme - Clean whites, subtle grays, blue accents
23
+ Visual Enhancements (apply to ALL themes)
24
+ Larger border radii for a more modern look
17
25
  ============================================================ */
18
- [data-theme="light"] {
19
- --admin-bg: #ffffff;
20
- --admin-surface: #f9fafb;
21
- --admin-surface-elevated: #ffffff;
22
- --admin-border: #e5e7eb;
23
- --admin-border-subtle: #f3f4f6;
24
-
25
- --admin-text: #111827;
26
- --admin-text-secondary: #4b5563;
27
- --admin-text-muted: #9ca3af;
28
- --admin-text-inverse: #ffffff;
29
-
30
- --admin-accent: #3b82f6;
31
- --admin-accent-hover: #2563eb;
32
- --admin-accent-subtle: #eff6ff;
33
- --admin-accent-secondary: #8b5cf6;
34
- --admin-accent-secondary-hover: #7c3aed;
35
- --admin-accent-secondary-subtle: #f5f3ff;
36
-
37
- --admin-nav-bg: #f8fafc;
38
- --admin-nav-text: #374151;
39
- --admin-nav-text-active: #111827;
40
- --admin-nav-item-hover: #f1f5f9;
41
- --admin-nav-item-active: #e0e7ff;
42
- --admin-nav-group-text: #6b7280;
43
- --admin-nav-border: #e2e8f0;
44
-
45
- --admin-input-bg: #ffffff;
46
- --admin-input-border: #d1d5db;
47
- --admin-input-border-focus: var(--admin-accent);
48
- --admin-input-placeholder: #9ca3af;
49
-
50
- --admin-card-bg: #ffffff;
51
- --admin-card-border: #e5e7eb;
52
- --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
53
- --admin-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
54
-
55
- --admin-success: #16a34a;
56
- --admin-success-bg: #f0fdf4;
57
- --admin-warning: #d97706;
58
- --admin-warning-bg: #fffbeb;
59
- --admin-error: #dc2626;
60
- --admin-error-bg: #fef2f2;
61
- --admin-info: #0284c7;
62
- --admin-info-bg: #f0f9ff;
63
-
64
- --admin-badge-draft-bg: #fef3c7;
65
- --admin-badge-draft-text: #92400e;
66
- --admin-badge-published-bg: #dcfce7;
67
- --admin-badge-published-text: #166534;
68
- --admin-badge-changed-bg: #dbeafe;
69
- --admin-badge-changed-text: #1e40af;
70
-
71
- --admin-tooltip-bg: #1f2937;
72
- --admin-tooltip-text: #f9fafb;
73
-
74
- --admin-overlay: rgba(0, 0, 0, 0.3);
75
- --admin-scrollbar-track: #f1f5f9;
76
- --admin-scrollbar-thumb: #cbd5e1;
77
- --admin-scrollbar-thumb-hover: #94a3b8;
78
-
79
- --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
80
- --admin-radius-sm: 6px;
81
- --admin-radius-md: 8px;
82
- --admin-radius-lg: 12px;
83
- --admin-radius-xl: 16px;
26
+ :root {
27
+ --style-radius-s: 6px;
28
+ --style-radius-m: 8px;
29
+ --style-radius-l: 12px;
84
30
  }
85
31
 
86
32
  /* ============================================================
87
- Dark Theme - Rich dark backgrounds, light text, blue accents
33
+ Brand Theme (Light) — Override Payload's accent colors
34
+ Applied when data-orion-brand is present and NOT dark mode
88
35
  ============================================================ */
89
- [data-theme="dark"] {
90
- --admin-bg: #0f1117;
91
- --admin-surface: #1a1d27;
92
- --admin-surface-elevated: #242836;
93
- --admin-border: #2e3345;
94
- --admin-border-subtle: #1e2231;
95
-
96
- --admin-text: #f1f5f9;
97
- --admin-text-secondary: #94a3b8;
98
- --admin-text-muted: #64748b;
99
- --admin-text-inverse: #0f1117;
100
-
101
- --admin-accent: #60a5fa;
102
- --admin-accent-hover: #93bbfd;
103
- --admin-accent-subtle: rgba(96, 165, 250, 0.12);
104
- --admin-accent-secondary: #a78bfa;
105
- --admin-accent-secondary-hover: #c4b5fd;
106
- --admin-accent-secondary-subtle: rgba(167, 139, 250, 0.12);
107
-
108
- --admin-nav-bg: #141722;
109
- --admin-nav-text: #94a3b8;
110
- --admin-nav-text-active: #f1f5f9;
111
- --admin-nav-item-hover: #1e2231;
112
- --admin-nav-item-active: rgba(96, 165, 250, 0.15);
113
- --admin-nav-group-text: #64748b;
114
- --admin-nav-border: #2e3345;
115
-
116
- --admin-input-bg: #1a1d27;
117
- --admin-input-border: #2e3345;
118
- --admin-input-border-focus: var(--admin-accent);
119
- --admin-input-placeholder: #475569;
120
-
121
- --admin-card-bg: #1a1d27;
122
- --admin-card-border: #2e3345;
123
- --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
124
- --admin-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
125
-
126
- --admin-success: #4ade80;
127
- --admin-success-bg: rgba(74, 222, 128, 0.1);
128
- --admin-warning: #fbbf24;
129
- --admin-warning-bg: rgba(251, 191, 36, 0.1);
130
- --admin-error: #f87171;
131
- --admin-error-bg: rgba(248, 113, 113, 0.1);
132
- --admin-info: #38bdf8;
133
- --admin-info-bg: rgba(56, 189, 248, 0.1);
134
-
135
- --admin-badge-draft-bg: rgba(251, 191, 36, 0.15);
136
- --admin-badge-draft-text: #fcd34d;
137
- --admin-badge-published-bg: rgba(74, 222, 128, 0.15);
138
- --admin-badge-published-text: #86efac;
139
- --admin-badge-changed-bg: rgba(96, 165, 250, 0.15);
140
- --admin-badge-changed-text: #93c5fd;
141
-
142
- --admin-tooltip-bg: #f1f5f9;
143
- --admin-tooltip-text: #1a1d27;
144
-
145
- --admin-overlay: rgba(0, 0, 0, 0.6);
146
- --admin-scrollbar-track: #1a1d27;
147
- --admin-scrollbar-thumb: #2e3345;
148
- --admin-scrollbar-thumb-hover: #3b4559;
149
-
150
- --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
151
- --admin-radius-sm: 6px;
152
- --admin-radius-md: 8px;
153
- --admin-radius-lg: 12px;
154
- --admin-radius-xl: 16px;
36
+ html[data-orion-brand]:not([data-theme='dark']) {
37
+ /* Override the "success" (accent) color scale with brand primary shades */
38
+ --color-success-50: color-mix(in srgb, var(--brand-primary) 5%, white);
39
+ --color-success-100: color-mix(in srgb, var(--brand-primary) 10%, white);
40
+ --color-success-150: color-mix(in srgb, var(--brand-primary) 15%, white);
41
+ --color-success-200: color-mix(in srgb, var(--brand-primary) 22%, white);
42
+ --color-success-250: color-mix(in srgb, var(--brand-primary) 30%, white);
43
+ --color-success-300: color-mix(in srgb, var(--brand-primary) 38%, white);
44
+ --color-success-350: color-mix(in srgb, var(--brand-primary) 48%, white);
45
+ --color-success-400: color-mix(in srgb, var(--brand-primary) 60%, white);
46
+ --color-success-450: color-mix(in srgb, var(--brand-primary) 75%, white);
47
+ --color-success-500: var(--brand-primary);
48
+ --color-success-550: color-mix(in srgb, var(--brand-primary) 90%, black);
49
+ --color-success-600: color-mix(in srgb, var(--brand-primary) 80%, black);
50
+ --color-success-650: color-mix(in srgb, var(--brand-primary) 70%, black);
51
+ --color-success-700: color-mix(in srgb, var(--brand-primary) 60%, black);
52
+ --color-success-750: color-mix(in srgb, var(--brand-primary) 50%, black);
53
+ --color-success-800: color-mix(in srgb, var(--brand-primary) 42%, black);
54
+ --color-success-850: color-mix(in srgb, var(--brand-primary) 35%, black);
55
+ --color-success-900: color-mix(in srgb, var(--brand-primary) 25%, black);
56
+ --color-success-950: color-mix(in srgb, var(--brand-primary) 15%, black);
57
+
58
+ /* Also override blue to match (used in some UI elements) */
59
+ --color-blue-50: color-mix(in srgb, var(--brand-primary) 5%, white);
60
+ --color-blue-100: color-mix(in srgb, var(--brand-primary) 10%, white);
61
+ --color-blue-150: color-mix(in srgb, var(--brand-primary) 15%, white);
62
+ --color-blue-200: color-mix(in srgb, var(--brand-primary) 22%, white);
63
+ --color-blue-250: color-mix(in srgb, var(--brand-primary) 30%, white);
64
+ --color-blue-300: color-mix(in srgb, var(--brand-primary) 38%, white);
65
+ --color-blue-350: color-mix(in srgb, var(--brand-primary) 48%, white);
66
+ --color-blue-400: color-mix(in srgb, var(--brand-primary) 60%, white);
67
+ --color-blue-450: color-mix(in srgb, var(--brand-primary) 75%, white);
68
+ --color-blue-500: var(--brand-primary);
69
+ --color-blue-550: color-mix(in srgb, var(--brand-primary) 90%, black);
70
+ --color-blue-600: color-mix(in srgb, var(--brand-primary) 80%, black);
71
+ --color-blue-650: color-mix(in srgb, var(--brand-primary) 70%, black);
72
+ --color-blue-700: color-mix(in srgb, var(--brand-primary) 60%, black);
73
+ --color-blue-750: color-mix(in srgb, var(--brand-primary) 50%, black);
74
+ --color-blue-800: color-mix(in srgb, var(--brand-primary) 42%, black);
75
+ --color-blue-850: color-mix(in srgb, var(--brand-primary) 35%, black);
76
+ --color-blue-900: color-mix(in srgb, var(--brand-primary) 25%, black);
77
+ --color-blue-950: color-mix(in srgb, var(--brand-primary) 15%, black);
78
+
79
+ /* Subtle brand tint on light backgrounds */
80
+ --color-base-50: color-mix(in srgb, var(--brand-primary) 2%, rgb(245, 245, 245));
81
+ --color-base-100: color-mix(in srgb, var(--brand-primary) 3%, rgb(235, 235, 235));
82
+ --color-base-150: color-mix(in srgb, var(--brand-primary) 4%, rgb(221, 221, 221));
155
83
  }
156
84
 
157
85
  /* ============================================================
158
- Brand Light Theme - Brand colors on light backgrounds
86
+ Brand Theme (Dark) — Override Payload's accent colors in dark mode
159
87
  ============================================================ */
160
- [data-theme="brand-light"] {
161
- --admin-bg: #ffffff;
162
- --admin-surface: color-mix(in srgb, var(--brand-primary) 3%, #f9fafb);
163
- --admin-surface-elevated: #ffffff;
164
- --admin-border: color-mix(in srgb, var(--brand-primary) 12%, #e5e7eb);
165
- --admin-border-subtle: color-mix(in srgb, var(--brand-primary) 5%, #f3f4f6);
166
-
167
- --admin-text: #111827;
168
- --admin-text-secondary: #4b5563;
169
- --admin-text-muted: #9ca3af;
170
- --admin-text-inverse: #ffffff;
171
-
172
- --admin-accent: var(--brand-primary);
173
- --admin-accent-hover: color-mix(in srgb, var(--brand-primary) 85%, #000000);
174
- --admin-accent-subtle: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
175
- --admin-accent-secondary: var(--brand-secondary);
176
- --admin-accent-secondary-hover: color-mix(in srgb, var(--brand-secondary) 85%, #000000);
177
- --admin-accent-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 8%, #ffffff);
178
-
179
- --admin-nav-bg: color-mix(in srgb, var(--brand-primary) 6%, #f8fafc);
180
- --admin-nav-text: #374151;
181
- --admin-nav-text-active: var(--brand-primary);
182
- --admin-nav-item-hover: color-mix(in srgb, var(--brand-primary) 8%, #f1f5f9);
183
- --admin-nav-item-active: color-mix(in srgb, var(--brand-primary) 12%, #ffffff);
184
- --admin-nav-group-text: color-mix(in srgb, var(--brand-primary) 40%, #6b7280);
185
- --admin-nav-border: color-mix(in srgb, var(--brand-primary) 10%, #e2e8f0);
186
-
187
- --admin-input-bg: #ffffff;
188
- --admin-input-border: color-mix(in srgb, var(--brand-primary) 15%, #d1d5db);
189
- --admin-input-border-focus: var(--brand-primary);
190
- --admin-input-placeholder: #9ca3af;
191
-
192
- --admin-card-bg: #ffffff;
193
- --admin-card-border: color-mix(in srgb, var(--brand-primary) 10%, #e5e7eb);
194
- --admin-card-shadow: 0 1px 3px color-mix(in srgb, var(--brand-primary) 6%, transparent), 0 1px 2px rgba(0, 0, 0, 0.04);
195
- --admin-card-shadow-hover: 0 4px 12px color-mix(in srgb, var(--brand-primary) 10%, transparent), 0 2px 4px rgba(0, 0, 0, 0.04);
196
-
197
- --admin-success: #16a34a;
198
- --admin-success-bg: #f0fdf4;
199
- --admin-warning: #d97706;
200
- --admin-warning-bg: #fffbeb;
201
- --admin-error: #dc2626;
202
- --admin-error-bg: #fef2f2;
203
- --admin-info: var(--brand-secondary);
204
- --admin-info-bg: color-mix(in srgb, var(--brand-secondary) 8%, #ffffff);
205
-
206
- --admin-badge-draft-bg: #fef3c7;
207
- --admin-badge-draft-text: #92400e;
208
- --admin-badge-published-bg: #dcfce7;
209
- --admin-badge-published-text: #166534;
210
- --admin-badge-changed-bg: color-mix(in srgb, var(--brand-secondary) 15%, #ffffff);
211
- --admin-badge-changed-text: var(--brand-secondary);
212
-
213
- --admin-tooltip-bg: color-mix(in srgb, var(--brand-primary) 90%, #1f2937);
214
- --admin-tooltip-text: #f9fafb;
215
-
216
- --admin-overlay: rgba(0, 0, 0, 0.3);
217
- --admin-scrollbar-track: color-mix(in srgb, var(--brand-primary) 4%, #f1f5f9);
218
- --admin-scrollbar-thumb: color-mix(in srgb, var(--brand-primary) 20%, #cbd5e1);
219
- --admin-scrollbar-thumb-hover: color-mix(in srgb, var(--brand-primary) 30%, #94a3b8);
220
-
221
- --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
222
- --admin-radius-sm: 6px;
223
- --admin-radius-md: 8px;
224
- --admin-radius-lg: 12px;
225
- --admin-radius-xl: 16px;
88
+ html[data-orion-brand][data-theme='dark'] {
89
+ /* Lighter versions of brand primary for dark mode visibility */
90
+ --color-success-50: color-mix(in srgb, var(--brand-primary) 15%, black);
91
+ --color-success-100: color-mix(in srgb, var(--brand-primary) 25%, black);
92
+ --color-success-150: color-mix(in srgb, var(--brand-primary) 35%, black);
93
+ --color-success-200: color-mix(in srgb, var(--brand-primary) 42%, black);
94
+ --color-success-250: color-mix(in srgb, var(--brand-primary) 50%, black);
95
+ --color-success-300: color-mix(in srgb, var(--brand-primary) 60%, black);
96
+ --color-success-350: color-mix(in srgb, var(--brand-primary) 70%, black);
97
+ --color-success-400: color-mix(in srgb, var(--brand-primary) 80%, black);
98
+ --color-success-450: color-mix(in srgb, var(--brand-primary) 90%, black);
99
+ --color-success-500: var(--brand-primary);
100
+ --color-success-550: color-mix(in srgb, var(--brand-primary) 75%, white);
101
+ --color-success-600: color-mix(in srgb, var(--brand-primary) 60%, white);
102
+ --color-success-650: color-mix(in srgb, var(--brand-primary) 48%, white);
103
+ --color-success-700: color-mix(in srgb, var(--brand-primary) 38%, white);
104
+ --color-success-750: color-mix(in srgb, var(--brand-primary) 30%, white);
105
+ --color-success-800: color-mix(in srgb, var(--brand-primary) 22%, white);
106
+ --color-success-850: color-mix(in srgb, var(--brand-primary) 15%, white);
107
+ --color-success-900: color-mix(in srgb, var(--brand-primary) 10%, white);
108
+ --color-success-950: color-mix(in srgb, var(--brand-primary) 5%, white);
109
+
110
+ --color-blue-50: color-mix(in srgb, var(--brand-primary) 15%, black);
111
+ --color-blue-100: color-mix(in srgb, var(--brand-primary) 25%, black);
112
+ --color-blue-150: color-mix(in srgb, var(--brand-primary) 35%, black);
113
+ --color-blue-200: color-mix(in srgb, var(--brand-primary) 42%, black);
114
+ --color-blue-250: color-mix(in srgb, var(--brand-primary) 50%, black);
115
+ --color-blue-300: color-mix(in srgb, var(--brand-primary) 60%, black);
116
+ --color-blue-350: color-mix(in srgb, var(--brand-primary) 70%, black);
117
+ --color-blue-400: color-mix(in srgb, var(--brand-primary) 80%, black);
118
+ --color-blue-450: color-mix(in srgb, var(--brand-primary) 90%, black);
119
+ --color-blue-500: var(--brand-primary);
120
+ --color-blue-550: color-mix(in srgb, var(--brand-primary) 75%, white);
121
+ --color-blue-600: color-mix(in srgb, var(--brand-primary) 60%, white);
122
+ --color-blue-650: color-mix(in srgb, var(--brand-primary) 48%, white);
123
+ --color-blue-700: color-mix(in srgb, var(--brand-primary) 38%, white);
124
+ --color-blue-750: color-mix(in srgb, var(--brand-primary) 30%, white);
125
+ --color-blue-800: color-mix(in srgb, var(--brand-primary) 22%, white);
126
+ --color-blue-850: color-mix(in srgb, var(--brand-primary) 15%, white);
127
+ --color-blue-900: color-mix(in srgb, var(--brand-primary) 10%, white);
128
+ --color-blue-950: color-mix(in srgb, var(--brand-primary) 5%, white);
129
+
130
+ /* Subtle brand tint on dark backgrounds */
131
+ --color-base-900: color-mix(in srgb, var(--brand-primary) 4%, rgb(20, 20, 20));
132
+ --color-base-850: color-mix(in srgb, var(--brand-primary) 3%, rgb(34, 34, 34));
133
+ --color-base-800: color-mix(in srgb, var(--brand-primary) 2%, rgb(47, 47, 47));
226
134
  }
227
135
 
228
136
  /* ============================================================
229
- Brand Dark Theme - Dark backgrounds with brand color accents
137
+ Smooth theme transitions
230
138
  ============================================================ */
231
- [data-theme="brand-dark"] {
232
- --admin-bg: #0f1117;
233
- --admin-surface: color-mix(in srgb, var(--brand-primary) 5%, #1a1d27);
234
- --admin-surface-elevated: color-mix(in srgb, var(--brand-primary) 6%, #242836);
235
- --admin-border: color-mix(in srgb, var(--brand-primary) 12%, #2e3345);
236
- --admin-border-subtle: color-mix(in srgb, var(--brand-primary) 6%, #1e2231);
237
-
238
- --admin-text: #f1f5f9;
239
- --admin-text-secondary: #94a3b8;
240
- --admin-text-muted: #64748b;
241
- --admin-text-inverse: #0f1117;
242
-
243
- --admin-accent: color-mix(in srgb, var(--brand-primary) 70%, #ffffff);
244
- --admin-accent-hover: color-mix(in srgb, var(--brand-primary) 55%, #ffffff);
245
- --admin-accent-subtle: color-mix(in srgb, var(--brand-primary) 15%, transparent);
246
- --admin-accent-secondary: color-mix(in srgb, var(--brand-secondary) 70%, #ffffff);
247
- --admin-accent-secondary-hover: color-mix(in srgb, var(--brand-secondary) 55%, #ffffff);
248
- --admin-accent-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
249
-
250
- --admin-nav-bg: color-mix(in srgb, var(--brand-primary) 8%, #141722);
251
- --admin-nav-text: #94a3b8;
252
- --admin-nav-text-active: color-mix(in srgb, var(--brand-primary) 60%, #ffffff);
253
- --admin-nav-item-hover: color-mix(in srgb, var(--brand-primary) 10%, #1e2231);
254
- --admin-nav-item-active: color-mix(in srgb, var(--brand-primary) 18%, #1a1d27);
255
- --admin-nav-group-text: color-mix(in srgb, var(--brand-primary) 30%, #64748b);
256
- --admin-nav-border: color-mix(in srgb, var(--brand-primary) 12%, #2e3345);
257
-
258
- --admin-input-bg: color-mix(in srgb, var(--brand-primary) 3%, #1a1d27);
259
- --admin-input-border: color-mix(in srgb, var(--brand-primary) 15%, #2e3345);
260
- --admin-input-border-focus: var(--admin-accent);
261
- --admin-input-placeholder: #475569;
262
-
263
- --admin-card-bg: color-mix(in srgb, var(--brand-primary) 5%, #1a1d27);
264
- --admin-card-border: color-mix(in srgb, var(--brand-primary) 12%, #2e3345);
265
- --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
266
- --admin-card-shadow-hover: 0 4px 12px color-mix(in srgb, var(--brand-primary) 15%, rgba(0, 0, 0, 0.4)), 0 2px 4px rgba(0, 0, 0, 0.3);
267
-
268
- --admin-success: #4ade80;
269
- --admin-success-bg: rgba(74, 222, 128, 0.1);
270
- --admin-warning: #fbbf24;
271
- --admin-warning-bg: rgba(251, 191, 36, 0.1);
272
- --admin-error: #f87171;
273
- --admin-error-bg: rgba(248, 113, 113, 0.1);
274
- --admin-info: color-mix(in srgb, var(--brand-secondary) 60%, #ffffff);
275
- --admin-info-bg: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
276
-
277
- --admin-badge-draft-bg: rgba(251, 191, 36, 0.15);
278
- --admin-badge-draft-text: #fcd34d;
279
- --admin-badge-published-bg: rgba(74, 222, 128, 0.15);
280
- --admin-badge-published-text: #86efac;
281
- --admin-badge-changed-bg: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
282
- --admin-badge-changed-text: color-mix(in srgb, var(--brand-secondary) 60%, #ffffff);
283
-
284
- --admin-tooltip-bg: #f1f5f9;
285
- --admin-tooltip-text: #1a1d27;
286
-
287
- --admin-overlay: rgba(0, 0, 0, 0.6);
288
- --admin-scrollbar-track: color-mix(in srgb, var(--brand-primary) 5%, #1a1d27);
289
- --admin-scrollbar-thumb: color-mix(in srgb, var(--brand-primary) 20%, #2e3345);
290
- --admin-scrollbar-thumb-hover: color-mix(in srgb, var(--brand-primary) 30%, #3b4559);
291
-
292
- --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
293
- --admin-radius-sm: 6px;
294
- --admin-radius-md: 8px;
295
- --admin-radius-lg: 12px;
296
- --admin-radius-xl: 16px;
297
- }
298
-
299
- /* ============================================================
300
- Default (no data-theme) - matches light theme
301
- ============================================================ */
302
- :root:not([data-theme]) {
303
- --admin-bg: #ffffff;
304
- --admin-surface: #f9fafb;
305
- --admin-surface-elevated: #ffffff;
306
- --admin-border: #e5e7eb;
307
- --admin-border-subtle: #f3f4f6;
308
- --admin-text: #111827;
309
- --admin-text-secondary: #4b5563;
310
- --admin-text-muted: #9ca3af;
311
- --admin-text-inverse: #ffffff;
312
- --admin-accent: #3b82f6;
313
- --admin-accent-hover: #2563eb;
314
- --admin-accent-subtle: #eff6ff;
315
- --admin-accent-secondary: #8b5cf6;
316
- --admin-accent-secondary-hover: #7c3aed;
317
- --admin-accent-secondary-subtle: #f5f3ff;
318
- --admin-nav-bg: #f8fafc;
319
- --admin-nav-text: #374151;
320
- --admin-nav-text-active: #111827;
321
- --admin-nav-item-hover: #f1f5f9;
322
- --admin-nav-item-active: #e0e7ff;
323
- --admin-nav-group-text: #6b7280;
324
- --admin-nav-border: #e2e8f0;
325
- --admin-input-bg: #ffffff;
326
- --admin-input-border: #d1d5db;
327
- --admin-input-border-focus: var(--admin-accent);
328
- --admin-input-placeholder: #9ca3af;
329
- --admin-card-bg: #ffffff;
330
- --admin-card-border: #e5e7eb;
331
- --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
332
- --admin-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
333
- --admin-success: #16a34a;
334
- --admin-success-bg: #f0fdf4;
335
- --admin-warning: #d97706;
336
- --admin-warning-bg: #fffbeb;
337
- --admin-error: #dc2626;
338
- --admin-error-bg: #fef2f2;
339
- --admin-info: #0284c7;
340
- --admin-info-bg: #f0f9ff;
341
- --admin-tooltip-bg: #1f2937;
342
- --admin-tooltip-text: #f9fafb;
343
- --admin-overlay: rgba(0, 0, 0, 0.3);
344
- --admin-scrollbar-track: #f1f5f9;
345
- --admin-scrollbar-thumb: #cbd5e1;
346
- --admin-scrollbar-thumb-hover: #94a3b8;
347
- --admin-focus-ring: 0 0 0 2px #eff6ff, 0 0 0 4px #3b82f6;
348
- --admin-radius-sm: 6px;
349
- --admin-radius-md: 8px;
350
- --admin-radius-lg: 12px;
351
- --admin-radius-xl: 16px;
352
- --admin-badge-draft-bg: #fef3c7;
353
- --admin-badge-draft-text: #92400e;
354
- --admin-badge-published-bg: #dcfce7;
355
- --admin-badge-published-text: #166534;
356
- --admin-badge-changed-bg: #dbeafe;
357
- --admin-badge-changed-text: #1e40af;
139
+ html {
140
+ transition: background-color 0.2s ease, color 0.2s ease;
358
141
  }
359
142
 
360
143
  /* ============================================================
361
- Payload CMS UI Overrides
144
+ Collapsible sections — card-like styling
362
145
  ============================================================ */
363
-
364
- /* Base / Body */
365
- body {
366
- background-color: var(--admin-bg) !important;
367
- color: var(--admin-text) !important;
368
- }
369
-
370
- /* Typography */
371
- h1, h2, h3, h4, h5, h6 {
372
- color: var(--admin-text) !important;
373
- }
374
-
375
- /* Smooth Transitions */
376
- body,
377
- .nav,
378
- .nav__content,
379
- .nav a,
380
- .template-default,
381
- .collection-list,
382
- .dashboard,
383
- button,
384
- input,
385
- select,
386
- textarea,
387
- .field-type,
388
- .card,
389
- .popup,
390
- a {
391
- transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
392
- }
393
-
394
- /* Sidebar / Navigation */
395
- .nav {
396
- background-color: var(--admin-nav-bg) !important;
397
- border-right-color: var(--admin-nav-border) !important;
398
- }
399
-
400
- .nav a,
401
- .nav__link {
402
- color: var(--admin-nav-text) !important;
403
- border-radius: var(--admin-radius-sm) !important;
404
- padding: 8px 12px !important;
405
- }
406
-
407
- .nav a:hover,
408
- .nav__link:hover {
409
- background-color: var(--admin-nav-item-hover) !important;
410
- color: var(--admin-nav-text-active) !important;
146
+ .collapsible {
147
+ border-radius: var(--style-radius-l) !important;
148
+ margin-bottom: 12px !important;
149
+ overflow: hidden;
411
150
  }
412
151
 
413
- .nav a.active,
414
- .nav__link.active {
415
- background-color: var(--admin-nav-item-active) !important;
416
- color: var(--admin-nav-text-active) !important;
417
- font-weight: 600 !important;
152
+ .collapsible__toggle-wrap {
153
+ border-radius: var(--style-radius-l) var(--style-radius-l) 0 0 !important;
418
154
  }
419
155
 
420
- /* Nav group labels */
421
- .nav-group__label,
422
- .nav__label {
423
- color: var(--admin-nav-group-text) !important;
156
+ /* ============================================================
157
+ Nav group labels (uppercased, refined)
158
+ ============================================================ */
159
+ .nav-group__toggle {
424
160
  font-size: 11px !important;
425
161
  font-weight: 700 !important;
426
162
  letter-spacing: 0.05em !important;
427
163
  text-transform: uppercase !important;
428
- padding: 16px 12px 6px !important;
429
164
  }
430
165
 
431
- /* Buttons */
432
- button[type="submit"],
433
- .btn--style-primary {
434
- background-color: var(--admin-accent) !important;
435
- border-radius: var(--admin-radius-md) !important;
436
- border: none !important;
437
- color: var(--admin-text-inverse) !important;
438
- font-weight: 600 !important;
439
- padding: 10px 20px !important;
440
- }
441
-
442
- button[type="submit"]:hover,
166
+ /* ============================================================
167
+ Primary buttons — more visual pop
168
+ ============================================================ */
443
169
  .btn--style-primary:hover {
444
- background-color: var(--admin-accent-hover) !important;
445
170
  transform: translateY(-1px);
446
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
171
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
447
172
  }
448
173
 
449
- button[type="submit"]:active,
450
174
  .btn--style-primary:active {
451
175
  transform: translateY(0);
452
176
  }
453
177
 
454
- .btn--style-secondary {
455
- background-color: transparent !important;
456
- border: 1px solid var(--admin-border) !important;
457
- border-radius: var(--admin-radius-md) !important;
458
- color: var(--admin-text) !important;
459
- }
460
-
461
- .btn--style-secondary:hover {
462
- background-color: var(--admin-surface) !important;
463
- border-color: var(--admin-accent) !important;
464
- color: var(--admin-accent) !important;
465
- }
466
-
467
- /* Form Inputs */
468
- input,
469
- textarea,
470
- select,
471
- .field-type input,
472
- .field-type textarea,
473
- .field-type select {
474
- background-color: var(--admin-input-bg) !important;
475
- border: 1px solid var(--admin-input-border) !important;
476
- border-radius: var(--admin-radius-md) !important;
477
- color: var(--admin-text) !important;
478
- padding: 10px 14px !important;
479
- }
480
-
481
- input:focus,
482
- textarea:focus,
483
- select:focus,
484
- .field-type input:focus,
485
- .field-type textarea:focus,
486
- .field-type select:focus {
487
- border-color: var(--admin-input-border-focus) !important;
488
- box-shadow: var(--admin-focus-ring) !important;
489
- outline: none !important;
490
- }
491
-
492
- input::placeholder,
493
- textarea::placeholder {
494
- color: var(--admin-input-placeholder) !important;
495
- }
496
-
497
- /* Field labels */
498
- .field-type .field-label,
499
- label {
500
- color: var(--admin-text-secondary) !important;
501
- font-weight: 500 !important;
502
- font-size: 13px !important;
503
- margin-bottom: 6px !important;
504
- }
505
-
506
- /* Field descriptions */
507
- .field-description {
508
- color: var(--admin-text-muted) !important;
509
- font-size: 12px !important;
510
- }
511
-
512
- /* Cards & Panels */
513
- .card,
514
- .collection-list__card {
515
- background-color: var(--admin-card-bg) !important;
516
- border: 1px solid var(--admin-card-border) !important;
517
- border-radius: var(--admin-radius-lg) !important;
518
- box-shadow: var(--admin-card-shadow) !important;
519
- }
520
-
521
- .card:hover,
522
- .collection-list__card:hover {
523
- box-shadow: var(--admin-card-shadow-hover) !important;
524
- border-color: var(--admin-accent) !important;
525
- }
526
-
527
- /* Collapsible Sections */
528
- .collapsible {
529
- border: 1px solid var(--admin-border) !important;
530
- border-radius: var(--admin-radius-lg) !important;
531
- margin-bottom: 12px !important;
532
- overflow: hidden;
533
- }
534
-
535
- .collapsible__toggle {
536
- background-color: var(--admin-surface) !important;
537
- padding: 14px 16px !important;
538
- border-bottom: 1px solid var(--admin-border-subtle) !important;
539
- }
540
-
541
- .collapsible__toggle:hover {
542
- background-color: var(--admin-nav-item-hover) !important;
543
- }
544
-
545
- .collapsible__content {
546
- padding: 16px !important;
547
- }
548
-
549
- /* Tables / List Views */
550
- .table {
551
- border-radius: var(--admin-radius-lg) !important;
552
- overflow: hidden;
553
- border: 1px solid var(--admin-border) !important;
554
- }
555
-
556
- .table th {
557
- background-color: var(--admin-surface) !important;
558
- color: var(--admin-text-secondary) !important;
559
- font-weight: 600 !important;
560
- font-size: 12px !important;
561
- text-transform: uppercase !important;
562
- letter-spacing: 0.04em !important;
563
- }
564
-
565
- .table td {
566
- border-bottom-color: var(--admin-border-subtle) !important;
567
- }
568
-
178
+ /* ============================================================
179
+ Table row hover
180
+ ============================================================ */
569
181
  .table tr:hover td {
570
- background-color: var(--admin-surface) !important;
571
- }
572
-
573
- /* Tabs */
574
- .tabs-field__tabs {
575
- border-bottom: 2px solid var(--admin-border) !important;
576
- gap: 4px !important;
182
+ background-color: var(--theme-elevation-50);
577
183
  }
578
184
 
579
- .tabs-field__tab-button {
580
- border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0 !important;
581
- color: var(--admin-text-muted) !important;
582
- font-weight: 500 !important;
583
- padding: 10px 16px !important;
584
- }
585
-
586
- .tabs-field__tab-button:hover {
587
- color: var(--admin-text) !important;
588
- background-color: var(--admin-surface) !important;
589
- }
590
-
591
- .tabs-field__tab-button--active {
592
- color: var(--admin-accent) !important;
593
- border-bottom: 2px solid var(--admin-accent) !important;
594
- font-weight: 600 !important;
595
- }
596
-
597
- /* Status Pills / Badges */
598
- .status-pill,
185
+ /* ============================================================
186
+ Status pills — rounder
187
+ ============================================================ */
599
188
  .pill {
600
189
  border-radius: 20px !important;
601
- font-size: 12px !important;
602
- font-weight: 600 !important;
603
- padding: 3px 10px !important;
604
190
  }
605
191
 
606
- /* Popups / Modals */
607
- .popup {
608
- background-color: var(--admin-card-bg) !important;
609
- border: 1px solid var(--admin-border) !important;
610
- border-radius: var(--admin-radius-lg) !important;
611
- box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
192
+ /* ============================================================
193
+ Dropzone — better styling
194
+ ============================================================ */
195
+ .file-field__upload.dropzone {
196
+ border-radius: var(--style-radius-l);
197
+ }
198
+
199
+ /* ============================================================
200
+ Toast notifications — rounder corners
201
+ ============================================================ */
202
+ .payload-toast-item {
203
+ border-radius: var(--style-radius-m) !important;
612
204
  }
613
205
 
614
- /* Scrollbars (webkit) */
206
+ /* ============================================================
207
+ Custom scrollbars (webkit)
208
+ ============================================================ */
615
209
  ::-webkit-scrollbar {
616
210
  width: 8px;
617
211
  height: 8px;
618
212
  }
619
213
 
620
214
  ::-webkit-scrollbar-track {
621
- background: var(--admin-scrollbar-track);
215
+ background: var(--theme-elevation-50);
622
216
  }
623
217
 
624
218
  ::-webkit-scrollbar-thumb {
625
- background: var(--admin-scrollbar-thumb);
219
+ background: var(--theme-elevation-250);
626
220
  border-radius: 4px;
627
221
  }
628
222
 
629
223
  ::-webkit-scrollbar-thumb:hover {
630
- background: var(--admin-scrollbar-thumb-hover);
224
+ background: var(--theme-elevation-350);
631
225
  }
632
226
 
633
227
  /* Firefox scrollbar */
634
228
  * {
635
229
  scrollbar-width: thin;
636
- scrollbar-color: var(--admin-scrollbar-thumb) var(--admin-scrollbar-track);
637
- }
638
-
639
- /* Main Content Area */
640
- .template-default,
641
- .template-default__content {
642
- background-color: var(--admin-bg) !important;
643
- }
644
-
645
- .doc-header {
646
- border-bottom-color: var(--admin-border) !important;
647
- }
648
-
649
- /* Breadcrumbs */
650
- .step-nav a {
651
- color: var(--admin-text-muted) !important;
652
- }
653
-
654
- .step-nav a:hover {
655
- color: var(--admin-accent) !important;
656
- }
657
-
658
- /* Upload / Dropzone */
659
- .dropzone {
660
- border: 2px dashed var(--admin-border) !important;
661
- border-radius: var(--admin-radius-lg) !important;
662
- background-color: var(--admin-surface) !important;
663
- }
664
-
665
- .dropzone:hover,
666
- .dropzone--dragging {
667
- border-color: var(--admin-accent) !important;
668
- background-color: var(--admin-accent-subtle) !important;
669
- }
670
-
671
- /* Rich Text Editor */
672
- .rich-text {
673
- border: 1px solid var(--admin-input-border) !important;
674
- border-radius: var(--admin-radius-md) !important;
675
- }
676
-
677
- .rich-text:focus-within {
678
- border-color: var(--admin-input-border-focus) !important;
679
- box-shadow: var(--admin-focus-ring) !important;
680
- }
681
-
682
- /* Toast / Notifications */
683
- .toast-container .toast {
684
- border-radius: var(--admin-radius-md) !important;
685
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
686
- }
687
-
688
- /* Empty Collection States */
689
- .collection-list--no-results {
690
- background-color: var(--admin-surface) !important;
691
- border-radius: var(--admin-radius-lg) !important;
692
- padding: 48px 24px !important;
693
- text-align: center;
230
+ scrollbar-color: var(--theme-elevation-250) var(--theme-elevation-50);
694
231
  }