@orion-studios/payload-studio 0.5.0-beta.98 → 0.6.0-beta.1

package/dist/admin.css

@@ -12,21 +12,106 @@
  */
 
 /* ============================================================
-   Brand color defaults (overridden by configureAdmin inline style)
+   Consuming-App Theme Contract
+   The consuming app should define --orion-cms-* variables.
+   The package only supplies fallbacks so sites can opt in incrementally.
    ============================================================ */
 :root {
-  --brand-primary: #3b82f6;
-  --brand-secondary: #8b5cf6;
+  --orion-cms-brand-primary-fallback: #3b82f6;
+  --orion-cms-brand-secondary-fallback: #8b5cf6;
+  --orion-cms-page-bg-fallback: #fffaf4;
+  --orion-cms-surface-fallback: #ffffff;
+  --orion-cms-surface-subtle-fallback: #f6eee5;
+  --orion-cms-sidebar-bg-fallback: color-mix(in srgb, var(--brand-secondary) 14%, #f8efe4);
+  --orion-cms-border-fallback: rgba(36, 54, 84, 0.12);
+  --orion-cms-border-strong-fallback: rgba(36, 54, 84, 0.2);
+  --orion-cms-text-fallback: #243654;
+  --orion-cms-muted-fallback: #8f6f43;
+  --orion-cms-text-inverse-fallback: #fff8f1;
+  --orion-cms-font-body-fallback: 'Segoe UI', sans-serif;
+  --orion-cms-font-heading-fallback: Georgia, 'Times New Roman', serif;
+  --orion-cms-radius-xs-fallback: 8px;
+  --orion-cms-radius-sm-fallback: 12px;
+  --orion-cms-radius-md-fallback: 16px;
+  --orion-cms-radius-lg-fallback: 24px;
+  --orion-cms-radius-pill-fallback: 999px;
+  --orion-cms-logo-radius-fallback: var(--orion-cms-radius-md, var(--orion-cms-radius-md-fallback));
+  --orion-cms-accent-fallback: var(--brand-primary);
+  --orion-cms-accent-contrast-fallback: #fff8f1;
+  --orion-cms-shadow-card-fallback: 0 10px 26px rgba(62, 42, 24, 0.08);
+  --orion-cms-shadow-elevated-fallback: 0 24px 56px rgba(62, 42, 24, 0.14);
+
+  --brand-primary: var(--orion-cms-brand-primary, var(--orion-cms-brand-primary-fallback));
+  --brand-secondary: var(--orion-cms-brand-secondary, var(--orion-cms-brand-secondary-fallback));
+
+  --orion-cms-page-bg-resolved: var(--orion-cms-page-bg, var(--orion-cms-page-bg-fallback));
+  --orion-cms-surface-resolved: var(--orion-cms-surface, var(--orion-cms-surface-fallback));
+  --orion-cms-surface-subtle-resolved: var(--orion-cms-surface-subtle, var(--orion-cms-surface-subtle-fallback));
+  --orion-cms-sidebar-bg-resolved: var(--orion-cms-sidebar-bg, var(--orion-cms-sidebar-bg-fallback));
+  --orion-cms-border-resolved: var(--orion-cms-border, var(--orion-cms-border-fallback));
+  --orion-cms-border-strong-resolved: var(--orion-cms-border-strong, var(--orion-cms-border-strong-fallback));
+  --orion-cms-text-resolved: var(--orion-cms-text, var(--orion-cms-text-fallback));
+  --orion-cms-muted-resolved: var(--orion-cms-muted, var(--orion-cms-muted-fallback));
+  --orion-cms-text-inverse-resolved: var(--orion-cms-text-inverse, var(--orion-cms-text-inverse-fallback));
+  --orion-cms-font-body-resolved: var(--orion-cms-font-body, var(--orion-cms-font-body-fallback));
+  --orion-cms-font-heading-resolved: var(--orion-cms-font-heading, var(--orion-cms-font-heading-fallback));
+  --orion-cms-radius-xs-resolved: var(--orion-cms-radius-xs, var(--orion-cms-radius-xs-fallback));
+  --orion-cms-radius-sm-resolved: var(--orion-cms-radius-sm, var(--orion-cms-radius-sm-fallback));
+  --orion-cms-radius-md-resolved: var(--orion-cms-radius-md, var(--orion-cms-radius-md-fallback));
+  --orion-cms-radius-lg-resolved: var(--orion-cms-radius-lg, var(--orion-cms-radius-lg-fallback));
+  --orion-cms-radius-pill-resolved: var(--orion-cms-radius-pill, var(--orion-cms-radius-pill-fallback));
+  --orion-cms-logo-radius-resolved: var(--orion-cms-logo-radius, var(--orion-cms-logo-radius-fallback));
+  --orion-cms-accent-resolved: var(--orion-cms-accent, var(--orion-cms-accent-fallback));
+  --orion-cms-accent-contrast-resolved: var(
+    --orion-cms-accent-contrast,
+    var(--orion-cms-accent-contrast-fallback)
+  );
+  --orion-cms-accent-hover-resolved: var(
+    --orion-cms-accent-hover,
+    color-mix(in srgb, var(--orion-cms-accent-resolved) 86%, black)
+  );
+  --orion-cms-accent-soft-resolved: var(
+    --orion-cms-accent-soft,
+    color-mix(in srgb, var(--orion-cms-accent-resolved) 8%, var(--orion-cms-page-bg-resolved))
+  );
+  --orion-cms-accent-border-resolved: var(
+    --orion-cms-accent-border,
+    color-mix(in srgb, var(--orion-cms-accent-resolved) 20%, transparent)
+  );
+  --orion-cms-input-bg-resolved: var(--orion-cms-input-bg, var(--orion-cms-surface-resolved));
+  --orion-cms-input-border-resolved: var(--orion-cms-input-border, var(--orion-cms-border-strong-resolved));
+  --orion-cms-input-placeholder-resolved: var(
+    --orion-cms-input-placeholder,
+    color-mix(in srgb, var(--orion-cms-text-resolved) 36%, var(--orion-cms-page-bg-resolved))
+  );
+  --orion-cms-button-bg-resolved: var(--orion-cms-button-bg, var(--orion-cms-accent-resolved));
+  --orion-cms-button-hover-bg-resolved: var(
+    --orion-cms-button-hover-bg,
+    var(--orion-cms-accent-hover-resolved)
+  );
+  --orion-cms-button-text-resolved: var(
+    --orion-cms-button-text,
+    var(--orion-cms-accent-contrast-resolved)
+  );
+  --orion-cms-button-border-resolved: var(
+    --orion-cms-button-border,
+    color-mix(in srgb, var(--orion-cms-accent-resolved) 28%, transparent)
+  );
+  --orion-cms-shadow-card-resolved: var(--orion-cms-shadow-card, var(--orion-cms-shadow-card-fallback));
+  --orion-cms-shadow-elevated-resolved: var(
+    --orion-cms-shadow-elevated,
+    var(--orion-cms-shadow-elevated-fallback)
+  );
 }
 
 /* ============================================================
    Visual Enhancements (apply to ALL themes)
-   Larger border radii for a more modern look
+   Border radii come from the consuming app's CMS theme contract.
    ============================================================ */
 :root {
-  --style-radius-s: 6px;
-  --style-radius-m: 8px;
-  --style-radius-l: 12px;
+  --style-radius-s: var(--orion-cms-radius-xs-resolved);
+  --style-radius-m: var(--orion-cms-radius-sm-resolved);
+  --style-radius-l: var(--orion-cms-radius-md-resolved);
 }
 
 /* ============================================================
@@ -37,48 +122,48 @@
    ============================================================ */
 :root {
   /* Text colors */
-  --admin-text: var(--theme-elevation-900);
-  --admin-text-secondary: var(--theme-elevation-650);
-  --admin-text-muted: var(--theme-elevation-450);
-  --admin-text-inverse: var(--theme-elevation-0);
+  --admin-text: var(--orion-cms-text-resolved);
+  --admin-text-secondary: color-mix(in srgb, var(--orion-cms-text-resolved) 72%, white);
+  --admin-text-muted: var(--orion-cms-muted-resolved);
+  --admin-text-inverse: var(--orion-cms-text-inverse-resolved);
 
   /* Backgrounds & surfaces */
-  --admin-bg: var(--theme-elevation-0);
-  --admin-surface: var(--theme-elevation-50);
-  --admin-surface-elevated: var(--theme-elevation-0);
+  --admin-bg: var(--orion-cms-page-bg-resolved);
+  --admin-surface: var(--orion-cms-surface-subtle-resolved);
+  --admin-surface-elevated: var(--orion-cms-surface-resolved);
 
   /* Borders */
-  --admin-border: var(--theme-elevation-150);
-  --admin-border-subtle: var(--theme-elevation-100);
+  --admin-border: var(--orion-cms-border-resolved);
+  --admin-border-subtle: color-mix(in srgb, var(--orion-cms-border-resolved) 72%, transparent);
 
   /* Accent (uses success/blue which we override with brand colors) */
-  --admin-accent: var(--theme-success-500);
-  --admin-accent-hover: var(--theme-success-600);
-  --admin-accent-subtle: var(--theme-success-50);
+  --admin-accent: var(--orion-cms-accent-resolved);
+  --admin-accent-hover: var(--orion-cms-accent-hover-resolved);
+  --admin-accent-subtle: var(--orion-cms-accent-soft-resolved);
   --admin-accent-secondary: var(--brand-secondary);
   --admin-accent-secondary-hover: color-mix(in srgb, var(--brand-secondary) 85%, black);
   --admin-accent-secondary-subtle: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
 
   /* Cards */
-  --admin-card-bg: var(--theme-elevation-0);
-  --admin-card-border: var(--theme-elevation-150);
-  --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.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --admin-card-bg: var(--orion-cms-surface-resolved);
+  --admin-card-border: var(--orion-cms-border-resolved);
+  --admin-card-shadow: var(--orion-cms-shadow-card-resolved);
+  --admin-card-shadow-hover: var(--orion-cms-shadow-elevated-resolved);
 
   /* Inputs */
-  --admin-input-bg: var(--theme-elevation-0);
-  --admin-input-border: var(--theme-elevation-200);
-  --admin-input-border-focus: var(--theme-success-500);
-  --admin-input-placeholder: var(--theme-elevation-350);
+  --admin-input-bg: var(--orion-cms-input-bg-resolved);
+  --admin-input-border: var(--orion-cms-input-border-resolved);
+  --admin-input-border-focus: var(--orion-cms-accent-resolved);
+  --admin-input-placeholder: var(--orion-cms-input-placeholder-resolved);
 
   /* Navigation */
-  --admin-nav-bg: var(--theme-elevation-50);
-  --admin-nav-text: var(--theme-elevation-650);
-  --admin-nav-text-active: var(--theme-success-500);
-  --admin-nav-item-hover: var(--theme-elevation-100);
-  --admin-nav-item-active: var(--theme-success-50);
-  --admin-nav-group-text: var(--theme-elevation-450);
-  --admin-nav-border: var(--theme-elevation-150);
+  --admin-nav-bg: var(--orion-cms-sidebar-bg-resolved);
+  --admin-nav-text: var(--orion-cms-text-resolved);
+  --admin-nav-text-active: var(--orion-cms-accent-resolved);
+  --admin-nav-item-hover: color-mix(in srgb, var(--orion-cms-accent-resolved) 6%, var(--orion-cms-surface-resolved));
+  --admin-nav-item-active: color-mix(in srgb, var(--orion-cms-accent-resolved) 11%, var(--orion-cms-surface-resolved));
+  --admin-nav-group-text: var(--orion-cms-muted-resolved);
+  --admin-nav-border: var(--orion-cms-border-resolved);
 
   /* Tooltips */
   --admin-tooltip-bg: var(--theme-elevation-900);
@@ -104,13 +189,26 @@
   --admin-radius-sm: var(--style-radius-s);
   --admin-radius-md: var(--style-radius-m);
   --admin-radius-lg: var(--style-radius-l);
-  --admin-radius-xl: 16px;
+  --admin-radius-xl: var(--orion-cms-radius-lg-resolved);
 
   /* Misc */
   --admin-overlay: rgba(0, 0, 0, 0.3);
   --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
 }
 
+html,
+body,
+.payload__root {
+  font-family: var(--orion-cms-font-body-resolved);
+}
+
+.payload__root :is(h1, h2, h3, h4, h5, h6),
+.payload__root .gutter__wrap > h1,
+.payload__root .doc-controls__title,
+.payload__root .step-nav__last {
+  font-family: var(--orion-cms-font-heading-resolved);
+}
+
 /* ============================================================
    Brand Theme (Light) — Override Payload's accent colors
    Applied when data-orion-brand is present and NOT dark mode
@@ -222,6 +320,14 @@ html {
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
+html[data-orion-brand] ::selection {
+  background: color-mix(in srgb, var(--brand-primary) 18%, white);
+}
+
+html[data-orion-brand][data-theme='dark'] ::selection {
+  background: color-mix(in srgb, var(--brand-primary) 26%, black);
+}
+
 /* ============================================================
    Collapsible sections — card-like styling
    ============================================================ */
@@ -341,6 +447,19 @@ html {
   background: var(--orion-sidebar-bg) !important;
 }
 
+body.orion-studio-shell-active .template-default {
+  grid-template-columns: 0 minmax(0, 1fr) !important;
+}
+
+body.orion-studio-shell-active .template-default__nav,
+body.orion-studio-shell-active .nav {
+  display: none !important;
+}
+
+body.orion-studio-shell-active .app-header {
+  display: none !important;
+}
+
 /* Hide Payload default toggler while custom shell is active */
 body.orion-studio-shell-active .template-default__nav-toggler-wrapper {
   display: none !important;
@@ -391,6 +510,10 @@ body.orion-studio-shell-active .template-default__nav-toggler-wrapper {
   background: var(--theme-elevation-0);
 }
 
+.orion-studio-shell.is-collapsed {
+  grid-template-columns: 92px minmax(0, 1fr);
+}
+
 .orion-studio-sidebar {
   border-right: 1px solid var(--theme-elevation-150);
   height: 100vh;