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

package/dist/admin.css

@@ -1,13 +1,9 @@
 /**
  * Orion Studios Admin Theme System
  *
- * Import all theme files and overrides.
- * Usage in payload.config.ts:
- * export default buildConfig({
- *   admin: {
- *     css: require.resolve('@orion-studios/payload-admin-components/dist/admin.css'),
- *   },
- * })
+ * All themes and overrides are inlined in this single file to ensure
+ * compatibility with Next.js/Turbopack CSS loading from node_modules.
+ * DO NOT use @import statements — they don't resolve from node_modules.
  */
 
 /* Default brand colors (overridden by configureAdmin) */
@@ -16,16 +12,293 @@
   --brand-secondary: #8b5cf6;
 }
 
-/* Theme files */
-@import './themes/light.css';
-@import './themes/dark.css';
-@import './themes/brand-light.css';
-@import './themes/brand-dark.css';
+/* ============================================================
+   Light Theme - Clean whites, subtle grays, blue accents
+   ============================================================ */
+[data-theme="light"] {
+  --admin-bg: #ffffff;
+  --admin-surface: #f9fafb;
+  --admin-surface-elevated: #ffffff;
+  --admin-border: #e5e7eb;
+  --admin-border-subtle: #f3f4f6;
+
+  --admin-text: #111827;
+  --admin-text-secondary: #4b5563;
+  --admin-text-muted: #9ca3af;
+  --admin-text-inverse: #ffffff;
+
+  --admin-accent: #3b82f6;
+  --admin-accent-hover: #2563eb;
+  --admin-accent-subtle: #eff6ff;
+  --admin-accent-secondary: #8b5cf6;
+  --admin-accent-secondary-hover: #7c3aed;
+  --admin-accent-secondary-subtle: #f5f3ff;
+
+  --admin-nav-bg: #f8fafc;
+  --admin-nav-text: #374151;
+  --admin-nav-text-active: #111827;
+  --admin-nav-item-hover: #f1f5f9;
+  --admin-nav-item-active: #e0e7ff;
+  --admin-nav-group-text: #6b7280;
+  --admin-nav-border: #e2e8f0;
+
+  --admin-input-bg: #ffffff;
+  --admin-input-border: #d1d5db;
+  --admin-input-border-focus: var(--admin-accent);
+  --admin-input-placeholder: #9ca3af;
+
+  --admin-card-bg: #ffffff;
+  --admin-card-border: #e5e7eb;
+  --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --admin-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+
+  --admin-success: #16a34a;
+  --admin-success-bg: #f0fdf4;
+  --admin-warning: #d97706;
+  --admin-warning-bg: #fffbeb;
+  --admin-error: #dc2626;
+  --admin-error-bg: #fef2f2;
+  --admin-info: #0284c7;
+  --admin-info-bg: #f0f9ff;
+
+  --admin-badge-draft-bg: #fef3c7;
+  --admin-badge-draft-text: #92400e;
+  --admin-badge-published-bg: #dcfce7;
+  --admin-badge-published-text: #166534;
+  --admin-badge-changed-bg: #dbeafe;
+  --admin-badge-changed-text: #1e40af;
+
+  --admin-tooltip-bg: #1f2937;
+  --admin-tooltip-text: #f9fafb;
+
+  --admin-overlay: rgba(0, 0, 0, 0.3);
+  --admin-scrollbar-track: #f1f5f9;
+  --admin-scrollbar-thumb: #cbd5e1;
+  --admin-scrollbar-thumb-hover: #94a3b8;
 
-/* Payload UI overrides */
-@import './overrides.css';
+  --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
+  --admin-radius-sm: 6px;
+  --admin-radius-md: 8px;
+  --admin-radius-lg: 12px;
+  --admin-radius-xl: 16px;
+}
+
+/* ============================================================
+   Dark Theme - Rich dark backgrounds, light text, blue accents
+   ============================================================ */
+[data-theme="dark"] {
+  --admin-bg: #0f1117;
+  --admin-surface: #1a1d27;
+  --admin-surface-elevated: #242836;
+  --admin-border: #2e3345;
+  --admin-border-subtle: #1e2231;
+
+  --admin-text: #f1f5f9;
+  --admin-text-secondary: #94a3b8;
+  --admin-text-muted: #64748b;
+  --admin-text-inverse: #0f1117;
+
+  --admin-accent: #60a5fa;
+  --admin-accent-hover: #93bbfd;
+  --admin-accent-subtle: rgba(96, 165, 250, 0.12);
+  --admin-accent-secondary: #a78bfa;
+  --admin-accent-secondary-hover: #c4b5fd;
+  --admin-accent-secondary-subtle: rgba(167, 139, 250, 0.12);
+
+  --admin-nav-bg: #141722;
+  --admin-nav-text: #94a3b8;
+  --admin-nav-text-active: #f1f5f9;
+  --admin-nav-item-hover: #1e2231;
+  --admin-nav-item-active: rgba(96, 165, 250, 0.15);
+  --admin-nav-group-text: #64748b;
+  --admin-nav-border: #2e3345;
+
+  --admin-input-bg: #1a1d27;
+  --admin-input-border: #2e3345;
+  --admin-input-border-focus: var(--admin-accent);
+  --admin-input-placeholder: #475569;
+
+  --admin-card-bg: #1a1d27;
+  --admin-card-border: #2e3345;
+  --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+  --admin-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
+
+  --admin-success: #4ade80;
+  --admin-success-bg: rgba(74, 222, 128, 0.1);
+  --admin-warning: #fbbf24;
+  --admin-warning-bg: rgba(251, 191, 36, 0.1);
+  --admin-error: #f87171;
+  --admin-error-bg: rgba(248, 113, 113, 0.1);
+  --admin-info: #38bdf8;
+  --admin-info-bg: rgba(56, 189, 248, 0.1);
+
+  --admin-badge-draft-bg: rgba(251, 191, 36, 0.15);
+  --admin-badge-draft-text: #fcd34d;
+  --admin-badge-published-bg: rgba(74, 222, 128, 0.15);
+  --admin-badge-published-text: #86efac;
+  --admin-badge-changed-bg: rgba(96, 165, 250, 0.15);
+  --admin-badge-changed-text: #93c5fd;
+
+  --admin-tooltip-bg: #f1f5f9;
+  --admin-tooltip-text: #1a1d27;
+
+  --admin-overlay: rgba(0, 0, 0, 0.6);
+  --admin-scrollbar-track: #1a1d27;
+  --admin-scrollbar-thumb: #2e3345;
+  --admin-scrollbar-thumb-hover: #3b4559;
+
+  --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
+  --admin-radius-sm: 6px;
+  --admin-radius-md: 8px;
+  --admin-radius-lg: 12px;
+  --admin-radius-xl: 16px;
+}
+
+/* ============================================================
+   Brand Light Theme - Brand colors on light backgrounds
+   ============================================================ */
+[data-theme="brand-light"] {
+  --admin-bg: #ffffff;
+  --admin-surface: color-mix(in srgb, var(--brand-primary) 3%, #f9fafb);
+  --admin-surface-elevated: #ffffff;
+  --admin-border: color-mix(in srgb, var(--brand-primary) 12%, #e5e7eb);
+  --admin-border-subtle: color-mix(in srgb, var(--brand-primary) 5%, #f3f4f6);
+
+  --admin-text: #111827;
+  --admin-text-secondary: #4b5563;
+  --admin-text-muted: #9ca3af;
+  --admin-text-inverse: #ffffff;
 
-/* Default to light theme when no data-theme attribute is set */
+  --admin-accent: var(--brand-primary);
+  --admin-accent-hover: color-mix(in srgb, var(--brand-primary) 85%, #000000);
+  --admin-accent-subtle: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
+  --admin-accent-secondary: var(--brand-secondary);
+  --admin-accent-secondary-hover: color-mix(in srgb, var(--brand-secondary) 85%, #000000);
+  --admin-accent-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 8%, #ffffff);
+
+  --admin-nav-bg: color-mix(in srgb, var(--brand-primary) 6%, #f8fafc);
+  --admin-nav-text: #374151;
+  --admin-nav-text-active: var(--brand-primary);
+  --admin-nav-item-hover: color-mix(in srgb, var(--brand-primary) 8%, #f1f5f9);
+  --admin-nav-item-active: color-mix(in srgb, var(--brand-primary) 12%, #ffffff);
+  --admin-nav-group-text: color-mix(in srgb, var(--brand-primary) 40%, #6b7280);
+  --admin-nav-border: color-mix(in srgb, var(--brand-primary) 10%, #e2e8f0);
+
+  --admin-input-bg: #ffffff;
+  --admin-input-border: color-mix(in srgb, var(--brand-primary) 15%, #d1d5db);
+  --admin-input-border-focus: var(--brand-primary);
+  --admin-input-placeholder: #9ca3af;
+
+  --admin-card-bg: #ffffff;
+  --admin-card-border: color-mix(in srgb, var(--brand-primary) 10%, #e5e7eb);
+  --admin-card-shadow: 0 1px 3px color-mix(in srgb, var(--brand-primary) 6%, transparent), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --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);
+
+  --admin-success: #16a34a;
+  --admin-success-bg: #f0fdf4;
+  --admin-warning: #d97706;
+  --admin-warning-bg: #fffbeb;
+  --admin-error: #dc2626;
+  --admin-error-bg: #fef2f2;
+  --admin-info: var(--brand-secondary);
+  --admin-info-bg: color-mix(in srgb, var(--brand-secondary) 8%, #ffffff);
+
+  --admin-badge-draft-bg: #fef3c7;
+  --admin-badge-draft-text: #92400e;
+  --admin-badge-published-bg: #dcfce7;
+  --admin-badge-published-text: #166534;
+  --admin-badge-changed-bg: color-mix(in srgb, var(--brand-secondary) 15%, #ffffff);
+  --admin-badge-changed-text: var(--brand-secondary);
+
+  --admin-tooltip-bg: color-mix(in srgb, var(--brand-primary) 90%, #1f2937);
+  --admin-tooltip-text: #f9fafb;
+
+  --admin-overlay: rgba(0, 0, 0, 0.3);
+  --admin-scrollbar-track: color-mix(in srgb, var(--brand-primary) 4%, #f1f5f9);
+  --admin-scrollbar-thumb: color-mix(in srgb, var(--brand-primary) 20%, #cbd5e1);
+  --admin-scrollbar-thumb-hover: color-mix(in srgb, var(--brand-primary) 30%, #94a3b8);
+
+  --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
+  --admin-radius-sm: 6px;
+  --admin-radius-md: 8px;
+  --admin-radius-lg: 12px;
+  --admin-radius-xl: 16px;
+}
+
+/* ============================================================
+   Brand Dark Theme - Dark backgrounds with brand color accents
+   ============================================================ */
+[data-theme="brand-dark"] {
+  --admin-bg: #0f1117;
+  --admin-surface: color-mix(in srgb, var(--brand-primary) 5%, #1a1d27);
+  --admin-surface-elevated: color-mix(in srgb, var(--brand-primary) 6%, #242836);
+  --admin-border: color-mix(in srgb, var(--brand-primary) 12%, #2e3345);
+  --admin-border-subtle: color-mix(in srgb, var(--brand-primary) 6%, #1e2231);
+
+  --admin-text: #f1f5f9;
+  --admin-text-secondary: #94a3b8;
+  --admin-text-muted: #64748b;
+  --admin-text-inverse: #0f1117;
+
+  --admin-accent: color-mix(in srgb, var(--brand-primary) 70%, #ffffff);
+  --admin-accent-hover: color-mix(in srgb, var(--brand-primary) 55%, #ffffff);
+  --admin-accent-subtle: color-mix(in srgb, var(--brand-primary) 15%, transparent);
+  --admin-accent-secondary: color-mix(in srgb, var(--brand-secondary) 70%, #ffffff);
+  --admin-accent-secondary-hover: color-mix(in srgb, var(--brand-secondary) 55%, #ffffff);
+  --admin-accent-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
+
+  --admin-nav-bg: color-mix(in srgb, var(--brand-primary) 8%, #141722);
+  --admin-nav-text: #94a3b8;
+  --admin-nav-text-active: color-mix(in srgb, var(--brand-primary) 60%, #ffffff);
+  --admin-nav-item-hover: color-mix(in srgb, var(--brand-primary) 10%, #1e2231);
+  --admin-nav-item-active: color-mix(in srgb, var(--brand-primary) 18%, #1a1d27);
+  --admin-nav-group-text: color-mix(in srgb, var(--brand-primary) 30%, #64748b);
+  --admin-nav-border: color-mix(in srgb, var(--brand-primary) 12%, #2e3345);
+
+  --admin-input-bg: color-mix(in srgb, var(--brand-primary) 3%, #1a1d27);
+  --admin-input-border: color-mix(in srgb, var(--brand-primary) 15%, #2e3345);
+  --admin-input-border-focus: var(--admin-accent);
+  --admin-input-placeholder: #475569;
+
+  --admin-card-bg: color-mix(in srgb, var(--brand-primary) 5%, #1a1d27);
+  --admin-card-border: color-mix(in srgb, var(--brand-primary) 12%, #2e3345);
+  --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+  --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);
+
+  --admin-success: #4ade80;
+  --admin-success-bg: rgba(74, 222, 128, 0.1);
+  --admin-warning: #fbbf24;
+  --admin-warning-bg: rgba(251, 191, 36, 0.1);
+  --admin-error: #f87171;
+  --admin-error-bg: rgba(248, 113, 113, 0.1);
+  --admin-info: color-mix(in srgb, var(--brand-secondary) 60%, #ffffff);
+  --admin-info-bg: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
+
+  --admin-badge-draft-bg: rgba(251, 191, 36, 0.15);
+  --admin-badge-draft-text: #fcd34d;
+  --admin-badge-published-bg: rgba(74, 222, 128, 0.15);
+  --admin-badge-published-text: #86efac;
+  --admin-badge-changed-bg: color-mix(in srgb, var(--brand-secondary) 15%, transparent);
+  --admin-badge-changed-text: color-mix(in srgb, var(--brand-secondary) 60%, #ffffff);
+
+  --admin-tooltip-bg: #f1f5f9;
+  --admin-tooltip-text: #1a1d27;
+
+  --admin-overlay: rgba(0, 0, 0, 0.6);
+  --admin-scrollbar-track: color-mix(in srgb, var(--brand-primary) 5%, #1a1d27);
+  --admin-scrollbar-thumb: color-mix(in srgb, var(--brand-primary) 20%, #2e3345);
+  --admin-scrollbar-thumb-hover: color-mix(in srgb, var(--brand-primary) 30%, #3b4559);
+
+  --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
+  --admin-radius-sm: 6px;
+  --admin-radius-md: 8px;
+  --admin-radius-lg: 12px;
+  --admin-radius-xl: 16px;
+}
+
+/* ============================================================
+   Default (no data-theme) - matches light theme
+   ============================================================ */
 :root:not([data-theme]) {
   --admin-bg: #ffffff;
   --admin-surface: #f9fafb;
@@ -83,3 +356,339 @@
   --admin-badge-changed-bg: #dbeafe;
   --admin-badge-changed-text: #1e40af;
 }
+
+/* ============================================================
+   Payload CMS UI Overrides
+   ============================================================ */
+
+/* Base / Body */
+body {
+  background-color: var(--admin-bg) !important;
+  color: var(--admin-text) !important;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--admin-text) !important;
+}
+
+/* Smooth Transitions */
+body,
+.nav,
+.nav__content,
+.nav a,
+.template-default,
+.collection-list,
+.dashboard,
+button,
+input,
+select,
+textarea,
+.field-type,
+.card,
+.popup,
+a {
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Sidebar / Navigation */
+.nav {
+  background-color: var(--admin-nav-bg) !important;
+  border-right-color: var(--admin-nav-border) !important;
+}
+
+.nav a,
+.nav__link {
+  color: var(--admin-nav-text) !important;
+  border-radius: var(--admin-radius-sm) !important;
+  padding: 8px 12px !important;
+}
+
+.nav a:hover,
+.nav__link:hover {
+  background-color: var(--admin-nav-item-hover) !important;
+  color: var(--admin-nav-text-active) !important;
+}
+
+.nav a.active,
+.nav__link.active {
+  background-color: var(--admin-nav-item-active) !important;
+  color: var(--admin-nav-text-active) !important;
+  font-weight: 600 !important;
+}
+
+/* Nav group labels */
+.nav-group__label,
+.nav__label {
+  color: var(--admin-nav-group-text) !important;
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.05em !important;
+  text-transform: uppercase !important;
+  padding: 16px 12px 6px !important;
+}
+
+/* Buttons */
+button[type="submit"],
+.btn--style-primary {
+  background-color: var(--admin-accent) !important;
+  border-radius: var(--admin-radius-md) !important;
+  border: none !important;
+  color: var(--admin-text-inverse) !important;
+  font-weight: 600 !important;
+  padding: 10px 20px !important;
+}
+
+button[type="submit"]:hover,
+.btn--style-primary:hover {
+  background-color: var(--admin-accent-hover) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+}
+
+button[type="submit"]:active,
+.btn--style-primary:active {
+  transform: translateY(0);
+}
+
+.btn--style-secondary {
+  background-color: transparent !important;
+  border: 1px solid var(--admin-border) !important;
+  border-radius: var(--admin-radius-md) !important;
+  color: var(--admin-text) !important;
+}
+
+.btn--style-secondary:hover {
+  background-color: var(--admin-surface) !important;
+  border-color: var(--admin-accent) !important;
+  color: var(--admin-accent) !important;
+}
+
+/* Form Inputs */
+input,
+textarea,
+select,
+.field-type input,
+.field-type textarea,
+.field-type select {
+  background-color: var(--admin-input-bg) !important;
+  border: 1px solid var(--admin-input-border) !important;
+  border-radius: var(--admin-radius-md) !important;
+  color: var(--admin-text) !important;
+  padding: 10px 14px !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+.field-type input:focus,
+.field-type textarea:focus,
+.field-type select:focus {
+  border-color: var(--admin-input-border-focus) !important;
+  box-shadow: var(--admin-focus-ring) !important;
+  outline: none !important;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--admin-input-placeholder) !important;
+}
+
+/* Field labels */
+.field-type .field-label,
+label {
+  color: var(--admin-text-secondary) !important;
+  font-weight: 500 !important;
+  font-size: 13px !important;
+  margin-bottom: 6px !important;
+}
+
+/* Field descriptions */
+.field-description {
+  color: var(--admin-text-muted) !important;
+  font-size: 12px !important;
+}
+
+/* Cards & Panels */
+.card,
+.collection-list__card {
+  background-color: var(--admin-card-bg) !important;
+  border: 1px solid var(--admin-card-border) !important;
+  border-radius: var(--admin-radius-lg) !important;
+  box-shadow: var(--admin-card-shadow) !important;
+}
+
+.card:hover,
+.collection-list__card:hover {
+  box-shadow: var(--admin-card-shadow-hover) !important;
+  border-color: var(--admin-accent) !important;
+}
+
+/* Collapsible Sections */
+.collapsible {
+  border: 1px solid var(--admin-border) !important;
+  border-radius: var(--admin-radius-lg) !important;
+  margin-bottom: 12px !important;
+  overflow: hidden;
+}
+
+.collapsible__toggle {
+  background-color: var(--admin-surface) !important;
+  padding: 14px 16px !important;
+  border-bottom: 1px solid var(--admin-border-subtle) !important;
+}
+
+.collapsible__toggle:hover {
+  background-color: var(--admin-nav-item-hover) !important;
+}
+
+.collapsible__content {
+  padding: 16px !important;
+}
+
+/* Tables / List Views */
+.table {
+  border-radius: var(--admin-radius-lg) !important;
+  overflow: hidden;
+  border: 1px solid var(--admin-border) !important;
+}
+
+.table th {
+  background-color: var(--admin-surface) !important;
+  color: var(--admin-text-secondary) !important;
+  font-weight: 600 !important;
+  font-size: 12px !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.04em !important;
+}
+
+.table td {
+  border-bottom-color: var(--admin-border-subtle) !important;
+}
+
+.table tr:hover td {
+  background-color: var(--admin-surface) !important;
+}
+
+/* Tabs */
+.tabs-field__tabs {
+  border-bottom: 2px solid var(--admin-border) !important;
+  gap: 4px !important;
+}
+
+.tabs-field__tab-button {
+  border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0 !important;
+  color: var(--admin-text-muted) !important;
+  font-weight: 500 !important;
+  padding: 10px 16px !important;
+}
+
+.tabs-field__tab-button:hover {
+  color: var(--admin-text) !important;
+  background-color: var(--admin-surface) !important;
+}
+
+.tabs-field__tab-button--active {
+  color: var(--admin-accent) !important;
+  border-bottom: 2px solid var(--admin-accent) !important;
+  font-weight: 600 !important;
+}
+
+/* Status Pills / Badges */
+.status-pill,
+.pill {
+  border-radius: 20px !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  padding: 3px 10px !important;
+}
+
+/* Popups / Modals */
+.popup {
+  background-color: var(--admin-card-bg) !important;
+  border: 1px solid var(--admin-border) !important;
+  border-radius: var(--admin-radius-lg) !important;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
+}
+
+/* Scrollbars (webkit) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--admin-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--admin-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--admin-scrollbar-thumb-hover);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--admin-scrollbar-thumb) var(--admin-scrollbar-track);
+}
+
+/* Main Content Area */
+.template-default,
+.template-default__content {
+  background-color: var(--admin-bg) !important;
+}
+
+.doc-header {
+  border-bottom-color: var(--admin-border) !important;
+}
+
+/* Breadcrumbs */
+.step-nav a {
+  color: var(--admin-text-muted) !important;
+}
+
+.step-nav a:hover {
+  color: var(--admin-accent) !important;
+}
+
+/* Upload / Dropzone */
+.dropzone {
+  border: 2px dashed var(--admin-border) !important;
+  border-radius: var(--admin-radius-lg) !important;
+  background-color: var(--admin-surface) !important;
+}
+
+.dropzone:hover,
+.dropzone--dragging {
+  border-color: var(--admin-accent) !important;
+  background-color: var(--admin-accent-subtle) !important;
+}
+
+/* Rich Text Editor */
+.rich-text {
+  border: 1px solid var(--admin-input-border) !important;
+  border-radius: var(--admin-radius-md) !important;
+}
+
+.rich-text:focus-within {
+  border-color: var(--admin-input-border-focus) !important;
+  box-shadow: var(--admin-focus-ring) !important;
+}
+
+/* Toast / Notifications */
+.toast-container .toast {
+  border-radius: var(--admin-radius-md) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
+}
+
+/* Empty Collection States */
+.collection-list--no-results {
+  background-color: var(--admin-surface) !important;
+  border-radius: var(--admin-radius-lg) !important;
+  padding: 48px 24px !important;
+  text-align: center;
+}

package/dist/client.d.mts

@@ -67,6 +67,7 @@ declare function useTheme(): {
     isDark: boolean;
     isBrand: boolean;
     isLoading: boolean;
+    hasMounted: boolean;
     toggleDarkMode: () => void;
     toggleBrandMode: () => void;
 };

package/dist/client.d.ts

@@ -67,6 +67,7 @@ declare function useTheme(): {
     isDark: boolean;
     isBrand: boolean;
     isLoading: boolean;
+    hasMounted: boolean;
     toggleDarkMode: () => void;
     toggleBrandMode: () => void;
 };