@orion-studios/payload-studio 0.6.0-beta.10 → 0.6.0-beta.11

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.
@@ -1231,17 +1231,22 @@ var resolveUploadUrl = (value) => {
1231
1231
  var resolveLogoUrl = (settings) => {
1232
1232
  return resolveUploadUrl(settings.logo) || resolveUploadUrl(settings.adminLogo) || resolveUploadUrl(settings.brandLogo) || null;
1233
1233
  };
1234
+ var resolveLogoOnDarkUrl = (settings) => {
1235
+ return resolveUploadUrl(settings.logoOnDark) || resolveUploadUrl(settings.logoDark) || resolveUploadUrl(settings.adminLogoDark) || resolveUploadUrl(settings.adminLogoOnDark) || resolveUploadUrl(settings.brandLogoDark) || null;
1236
+ };
1234
1237
  var cachedBranding = null;
1235
- function useSiteBranding(defaultName, defaultLogoUrl) {
1238
+ function useSiteBranding(defaultName, defaultLogoUrl, defaultLogoOnDarkUrl) {
1236
1239
  const [branding, setBranding] = (0, import_react.useState)(() => {
1237
1240
  if (cachedBranding) {
1238
1241
  return {
1239
1242
  logoUrl: cachedBranding.logoUrl || defaultLogoUrl || null,
1243
+ logoOnDarkUrl: cachedBranding.logoOnDarkUrl || defaultLogoOnDarkUrl || null,
1240
1244
  siteName: cachedBranding.siteName || defaultName || null
1241
1245
  };
1242
1246
  }
1243
1247
  return {
1244
1248
  logoUrl: defaultLogoUrl || null,
1249
+ logoOnDarkUrl: defaultLogoOnDarkUrl || null,
1245
1250
  siteName: defaultName || null
1246
1251
  };
1247
1252
  });
@@ -1258,9 +1263,11 @@ function useSiteBranding(defaultName, defaultLogoUrl) {
1258
1263
  if (!record) return;
1259
1264
  const siteName = pickString(record.siteName);
1260
1265
  const logoUrl = resolveLogoUrl(record);
1261
- cachedBranding = { logoUrl, siteName };
1266
+ const logoOnDarkUrl = resolveLogoOnDarkUrl(record);
1267
+ cachedBranding = { logoOnDarkUrl, logoUrl, siteName };
1262
1268
  if (!cancelled) {
1263
1269
  setBranding({
1270
+ logoOnDarkUrl: logoOnDarkUrl || defaultLogoOnDarkUrl || null,
1264
1271
  logoUrl: logoUrl || defaultLogoUrl || null,
1265
1272
  siteName: siteName || defaultName || null
1266
1273
  });
@@ -1272,16 +1279,20 @@ function useSiteBranding(defaultName, defaultLogoUrl) {
1272
1279
  return () => {
1273
1280
  cancelled = true;
1274
1281
  };
1275
- }, [defaultLogoUrl, defaultName]);
1282
+ }, [defaultLogoOnDarkUrl, defaultLogoUrl, defaultName]);
1276
1283
  return branding;
1277
1284
  }
1278
1285
 
1279
1286
  // src/admin/components/Logo.tsx
1280
1287
  var import_jsx_runtime = require("react/jsx-runtime");
1281
- function Logo({ brandName = "Orion Studio", logoUrl } = {}) {
1282
- const branding = useSiteBranding(brandName, logoUrl);
1288
+ function Logo({ brandName = "Orion Studio", logoOnDarkUrl, logoUrl } = {}) {
1289
+ const branding = useSiteBranding(brandName, logoUrl, logoOnDarkUrl);
1283
1290
  const resolvedName = branding.siteName || brandName;
1284
1291
  const resolvedLogo = branding.logoUrl || logoUrl || null;
1292
+ const resolvedLogoOnDark = branding.logoOnDarkUrl || logoOnDarkUrl || resolvedLogo;
1293
+ const hasDarkLogoVariant = Boolean(
1294
+ resolvedLogo && resolvedLogoOnDark && resolvedLogoOnDark.trim().length > 0 && resolvedLogoOnDark !== resolvedLogo
1295
+ );
1285
1296
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1286
1297
  "div",
1287
1298
  {
@@ -1300,8 +1311,6 @@ function Logo({ brandName = "Orion Studio", logoUrl } = {}) {
1300
1311
  className: "orion-admin-logo-mark",
1301
1312
  style: {
1302
1313
  alignItems: "center",
1303
- background: "var(--orion-cms-logo-bg, var(--admin-accent, #3b82f6))",
1304
- borderRadius: "var(--orion-cms-logo-radius, var(--admin-radius-md, 8px))",
1305
1314
  display: "flex",
1306
1315
  flexShrink: 0,
1307
1316
  height: 32,
@@ -1309,14 +1318,25 @@ function Logo({ brandName = "Orion Studio", logoUrl } = {}) {
1309
1318
  overflow: "hidden",
1310
1319
  width: 32
1311
1320
  },
1312
- children: resolvedLogo ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1313
- "img",
1314
- {
1315
- alt: `${resolvedName} logo`,
1316
- src: resolvedLogo,
1317
- style: { height: "100%", objectFit: "cover", width: "100%" }
1318
- }
1319
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1321
+ children: resolvedLogo ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1322
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1323
+ "img",
1324
+ {
1325
+ alt: `${resolvedName} logo`,
1326
+ className: `orion-admin-logo-image orion-admin-logo-image--default${hasDarkLogoVariant ? "" : " is-only-logo"}`,
1327
+ src: resolvedLogo
1328
+ }
1329
+ ),
1330
+ hasDarkLogoVariant ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1331
+ "img",
1332
+ {
1333
+ alt: "",
1334
+ "aria-hidden": "true",
1335
+ className: "orion-admin-logo-image orion-admin-logo-image--dark",
1336
+ src: resolvedLogoOnDark
1337
+ }
1338
+ ) : null
1339
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1320
1340
  "svg",
1321
1341
  {
1322
1342
  fill: "none",
@@ -41,17 +41,22 @@ var resolveUploadUrl = (value) => {
41
41
  var resolveLogoUrl = (settings) => {
42
42
  return resolveUploadUrl(settings.logo) || resolveUploadUrl(settings.adminLogo) || resolveUploadUrl(settings.brandLogo) || null;
43
43
  };
44
+ var resolveLogoOnDarkUrl = (settings) => {
45
+ return resolveUploadUrl(settings.logoOnDark) || resolveUploadUrl(settings.logoDark) || resolveUploadUrl(settings.adminLogoDark) || resolveUploadUrl(settings.adminLogoOnDark) || resolveUploadUrl(settings.brandLogoDark) || null;
46
+ };
44
47
  var cachedBranding = null;
45
- function useSiteBranding(defaultName, defaultLogoUrl) {
48
+ function useSiteBranding(defaultName, defaultLogoUrl, defaultLogoOnDarkUrl) {
46
49
  const [branding, setBranding] = useState(() => {
47
50
  if (cachedBranding) {
48
51
  return {
49
52
  logoUrl: cachedBranding.logoUrl || defaultLogoUrl || null,
53
+ logoOnDarkUrl: cachedBranding.logoOnDarkUrl || defaultLogoOnDarkUrl || null,
50
54
  siteName: cachedBranding.siteName || defaultName || null
51
55
  };
52
56
  }
53
57
  return {
54
58
  logoUrl: defaultLogoUrl || null,
59
+ logoOnDarkUrl: defaultLogoOnDarkUrl || null,
55
60
  siteName: defaultName || null
56
61
  };
57
62
  });
@@ -68,9 +73,11 @@ function useSiteBranding(defaultName, defaultLogoUrl) {
68
73
  if (!record) return;
69
74
  const siteName = pickString(record.siteName);
70
75
  const logoUrl = resolveLogoUrl(record);
71
- cachedBranding = { logoUrl, siteName };
76
+ const logoOnDarkUrl = resolveLogoOnDarkUrl(record);
77
+ cachedBranding = { logoOnDarkUrl, logoUrl, siteName };
72
78
  if (!cancelled) {
73
79
  setBranding({
80
+ logoOnDarkUrl: logoOnDarkUrl || defaultLogoOnDarkUrl || null,
74
81
  logoUrl: logoUrl || defaultLogoUrl || null,
75
82
  siteName: siteName || defaultName || null
76
83
  });
@@ -82,16 +89,20 @@ function useSiteBranding(defaultName, defaultLogoUrl) {
82
89
  return () => {
83
90
  cancelled = true;
84
91
  };
85
- }, [defaultLogoUrl, defaultName]);
92
+ }, [defaultLogoOnDarkUrl, defaultLogoUrl, defaultName]);
86
93
  return branding;
87
94
  }
88
95
 
89
96
  // src/admin/components/Logo.tsx
90
- import { jsx, jsxs } from "react/jsx-runtime";
91
- function Logo({ brandName = "Orion Studio", logoUrl } = {}) {
92
- const branding = useSiteBranding(brandName, logoUrl);
97
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
98
+ function Logo({ brandName = "Orion Studio", logoOnDarkUrl, logoUrl } = {}) {
99
+ const branding = useSiteBranding(brandName, logoUrl, logoOnDarkUrl);
93
100
  const resolvedName = branding.siteName || brandName;
94
101
  const resolvedLogo = branding.logoUrl || logoUrl || null;
102
+ const resolvedLogoOnDark = branding.logoOnDarkUrl || logoOnDarkUrl || resolvedLogo;
103
+ const hasDarkLogoVariant = Boolean(
104
+ resolvedLogo && resolvedLogoOnDark && resolvedLogoOnDark.trim().length > 0 && resolvedLogoOnDark !== resolvedLogo
105
+ );
95
106
  return /* @__PURE__ */ jsxs(
96
107
  "div",
97
108
  {
@@ -110,8 +121,6 @@ function Logo({ brandName = "Orion Studio", logoUrl } = {}) {
110
121
  className: "orion-admin-logo-mark",
111
122
  style: {
112
123
  alignItems: "center",
113
- background: "var(--orion-cms-logo-bg, var(--admin-accent, #3b82f6))",
114
- borderRadius: "var(--orion-cms-logo-radius, var(--admin-radius-md, 8px))",
115
124
  display: "flex",
116
125
  flexShrink: 0,
117
126
  height: 32,
@@ -119,14 +128,25 @@ function Logo({ brandName = "Orion Studio", logoUrl } = {}) {
119
128
  overflow: "hidden",
120
129
  width: 32
121
130
  },
122
- children: resolvedLogo ? /* @__PURE__ */ jsx(
123
- "img",
124
- {
125
- alt: `${resolvedName} logo`,
126
- src: resolvedLogo,
127
- style: { height: "100%", objectFit: "cover", width: "100%" }
128
- }
129
- ) : /* @__PURE__ */ jsxs(
131
+ children: resolvedLogo ? /* @__PURE__ */ jsxs(Fragment, { children: [
132
+ /* @__PURE__ */ jsx(
133
+ "img",
134
+ {
135
+ alt: `${resolvedName} logo`,
136
+ className: `orion-admin-logo-image orion-admin-logo-image--default${hasDarkLogoVariant ? "" : " is-only-logo"}`,
137
+ src: resolvedLogo
138
+ }
139
+ ),
140
+ hasDarkLogoVariant ? /* @__PURE__ */ jsx(
141
+ "img",
142
+ {
143
+ alt: "",
144
+ "aria-hidden": "true",
145
+ className: "orion-admin-logo-image orion-admin-logo-image--dark",
146
+ src: resolvedLogoOnDark
147
+ }
148
+ ) : null
149
+ ] }) : /* @__PURE__ */ jsxs(
130
150
  "svg",
131
151
  {
132
152
  fill: "none",
@@ -463,7 +483,7 @@ function useTheme(defaultTheme = "brand-light") {
463
483
  }
464
484
 
465
485
  // src/admin/components/ThemeSwitcher.tsx
466
- import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
486
+ import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
467
487
  var iconSize = 16;
468
488
  function SunIcon() {
469
489
  return /* @__PURE__ */ jsxs5("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -603,7 +623,7 @@ function ThemeProvider({
603
623
  } catch {
604
624
  }
605
625
  }, [allowThemePreference, defaultTheme]);
606
- return /* @__PURE__ */ jsx5(Fragment, { children });
626
+ return /* @__PURE__ */ jsx5(Fragment2, { children });
607
627
  }
608
628
 
609
629
  // src/admin/components/HelpTooltip.tsx
@@ -1568,7 +1588,7 @@ var isStudioShellRoute = (pathname, props, adminBasePath) => {
1568
1588
  };
1569
1589
 
1570
1590
  // src/admin/components/studio/AdminStudioNav.tsx
1571
- import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
1591
+ import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
1572
1592
  var iconSize2 = 18;
1573
1593
  function NavIcon({ sectionID }) {
1574
1594
  const props = {
@@ -1726,7 +1746,7 @@ function AdminStudioNav(props) {
1726
1746
  textAlign: compact ? "center" : "left"
1727
1747
  },
1728
1748
  children: [
1729
- !compact ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
1749
+ !compact ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
1730
1750
  /* @__PURE__ */ jsx12("div", { style: { color: "var(--theme-elevation-700)", fontSize: "0.85rem" }, children: "Signed in as" }),
1731
1751
  /* @__PURE__ */ jsx12("div", { style: { fontWeight: 800, marginBottom: "0.55rem" }, children: typeof user?.email === "string" ? user.email : "User" })
1732
1752
  ] }) : null,
@@ -2751,7 +2771,7 @@ function AdminStudioPagesListView(props) {
2751
2771
  // src/admin/components/studio/AdminStudioPageEditView.tsx
2752
2772
  import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef3, useState as useState9 } from "react";
2753
2773
  import { SetStepNav, toast, useAuth as useAuth4 } from "@payloadcms/ui";
2754
- import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
2774
+ import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
2755
2775
  var isAdmin2 = (user) => {
2756
2776
  if (!user || typeof user !== "object") return false;
2757
2777
  const role = user.role;
@@ -2904,7 +2924,7 @@ function AdminStudioPageEditView(props) {
2904
2924
  return () => window.removeEventListener("message", onMessage);
2905
2925
  }, []);
2906
2926
  if (!pageID && !didResolvePathFallback) {
2907
- return /* @__PURE__ */ jsx19(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs16(Fragment3, { children: [
2927
+ return /* @__PURE__ */ jsx19(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
2908
2928
  /* @__PURE__ */ jsx19(
2909
2929
  SetStepNav,
2910
2930
  {
@@ -2919,7 +2939,7 @@ function AdminStudioPageEditView(props) {
2919
2939
  ] }) });
2920
2940
  }
2921
2941
  if (!pageID) {
2922
- return /* @__PURE__ */ jsx19(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs16(Fragment3, { children: [
2942
+ return /* @__PURE__ */ jsx19(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
2923
2943
  /* @__PURE__ */ jsx19(
2924
2944
  SetStepNav,
2925
2945
  {
@@ -2933,7 +2953,7 @@ function AdminStudioPageEditView(props) {
2933
2953
  /* @__PURE__ */ jsx19("p", { style: { color: "var(--theme-elevation-600)" }, children: "Missing page ID." })
2934
2954
  ] }) });
2935
2955
  }
2936
- return /* @__PURE__ */ jsx19(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs16(Fragment3, { children: [
2956
+ return /* @__PURE__ */ jsx19(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
2937
2957
  /* @__PURE__ */ jsx19(
2938
2958
  SetStepNav,
2939
2959
  {
@@ -1,4 +1,4 @@
1
- export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-Bm2SaC3r.mjs';
1
+ export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-Xt3Ep8WV.mjs';
2
2
  export { b as SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM, c as SOCIAL_MEDIA_ICON_OPTIONS, d as SOCIAL_MEDIA_PLATFORMS, e as SOCIAL_MEDIA_PLATFORM_LABELS, S as SocialMediaGlobalData, f as SocialMediaIconLibrary, g as SocialMediaIconOption, a as SocialMediaPlatform, h as SocialMediaProfileData, i as SocialMediaProfilesData } from '../socialMedia-C05Iy-SV.mjs';
3
3
  import 'payload';
4
4
  import '../sitePreviewTypes-BkHCWxNW.mjs';
@@ -1,4 +1,4 @@
1
- export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-CkT_eyhK.js';
1
+ export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioDashboardPanel, f as ResolvedStudioSection, S as StudioDashboardPanel, g as StudioDashboardPanelSpan, h as StudioGlobalLink, j as StudioSection, k as StudioSectionCard, l as StudioSectionComponent, m as StudioSectionRole, n as StudioSectionView, o as configureAdmin, p as createHeaderNavItemsField, q as createSocialMediaConnectionsField, r as createSocialMediaGlobal, s as createThemePreferenceField, t as socialMediaConnectionsField, u as themePreferenceField, w as withTooltips } from '../index-yhpAgqDS.js';
2
2
  export { b as SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM, c as SOCIAL_MEDIA_ICON_OPTIONS, d as SOCIAL_MEDIA_PLATFORMS, e as SOCIAL_MEDIA_PLATFORM_LABELS, S as SocialMediaGlobalData, f as SocialMediaIconLibrary, g as SocialMediaIconOption, a as SocialMediaPlatform, h as SocialMediaProfileData, i as SocialMediaProfilesData } from '../socialMedia-C05Iy-SV.js';
3
3
  import 'payload';
4
4
  import '../sitePreviewTypes-BkHCWxNW.js';
@@ -215,6 +215,7 @@ function configureAdmin(config) {
215
215
  brandPrimary = "#3b82f6",
216
216
  brandSecondary = "#8b5cf6",
217
217
  defaultTheme = "brand-light",
218
+ logoOnDarkUrl,
218
219
  logoUrl,
219
220
  allowThemePreference = false,
220
221
  userSessionDurationSeconds = 60 * 60 * 24
@@ -339,6 +340,7 @@ function configureAdmin(config) {
339
340
  path: clientPath,
340
341
  clientProps: {
341
342
  brandName,
343
+ logoOnDarkUrl,
342
344
  logoUrl
343
345
  }
344
346
  },
@@ -347,6 +349,7 @@ function configureAdmin(config) {
347
349
  path: clientPath,
348
350
  clientProps: {
349
351
  brandName,
352
+ logoOnDarkUrl,
350
353
  logoUrl
351
354
  }
352
355
  }
@@ -499,6 +502,7 @@ function configureAdmin(config) {
499
502
  path: clientPath,
500
503
  clientProps: {
501
504
  brandName,
505
+ logoOnDarkUrl,
502
506
  logoUrl
503
507
  }
504
508
  }
@@ -7,7 +7,7 @@ import {
7
7
  socialMediaConnectionsField,
8
8
  themePreferenceField,
9
9
  withTooltips
10
- } from "../chunk-WLOPFFN2.mjs";
10
+ } from "../chunk-T4OH6KI6.mjs";
11
11
  import "../chunk-W2UOCJDX.mjs";
12
12
  import {
13
13
  SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
@@ -35,6 +35,11 @@
35
35
  --orion-cms-logo-radius,
36
36
  var(--orion-cms-logo-radius-resolved, var(--orion-admin-radius-md))
37
37
  );
38
+ --orion-admin-logo-bg: var(--orion-cms-logo-bg, transparent);
39
+ --orion-admin-logo-border: var(--orion-cms-logo-border, transparent);
40
+ --orion-admin-logo-shadow: var(--orion-cms-logo-shadow, none);
41
+ --orion-admin-logo-padding: var(--orion-cms-logo-padding, 0px);
42
+ --orion-admin-logo-fit: var(--orion-cms-logo-fit, contain);
38
43
  --orion-admin-control-bg: var(--orion-cms-surface, var(--orion-cms-surface-resolved, #ffffff));
39
44
  --orion-admin-control-hover-bg: color-mix(in srgb, var(--orion-admin-control-bg) 78%, white);
40
45
  --orion-admin-input-bg: var(
@@ -164,19 +169,47 @@
164
169
  }
165
170
 
166
171
  .orion-admin-brand-logo {
172
+ align-items: center;
173
+ background: var(--orion-admin-logo-bg);
174
+ border: 1px solid var(--orion-admin-logo-border);
167
175
  border-radius: var(--orion-admin-logo-radius);
176
+ box-shadow: var(--orion-admin-logo-shadow);
177
+ box-sizing: border-box;
178
+ display: flex;
168
179
  flex: 0 0 auto;
169
180
  height: 48px;
181
+ justify-content: center;
170
182
  overflow: hidden;
183
+ padding: var(--orion-admin-logo-padding);
171
184
  width: 48px;
172
185
  }
173
186
 
174
187
  .orion-admin-brand-logo img {
175
188
  height: 100%;
176
- object-fit: cover;
189
+ object-fit: var(--orion-admin-logo-fit);
177
190
  width: 100%;
178
191
  }
179
192
 
193
+ .orion-admin-logo-mark {
194
+ background: var(--orion-admin-logo-bg);
195
+ border: 1px solid var(--orion-admin-logo-border);
196
+ border-radius: var(--orion-admin-logo-radius);
197
+ box-shadow: var(--orion-admin-logo-shadow);
198
+ box-sizing: border-box;
199
+ padding: var(--orion-admin-logo-padding);
200
+ }
201
+
202
+ .orion-admin-logo-image {
203
+ display: block;
204
+ height: 100%;
205
+ object-fit: var(--orion-admin-logo-fit);
206
+ width: 100%;
207
+ }
208
+
209
+ .orion-admin-logo-image--dark {
210
+ display: none;
211
+ }
212
+
180
213
  .orion-admin-brand-text {
181
214
  min-width: 0;
182
215
  }
@@ -945,12 +978,34 @@
945
978
  }
946
979
 
947
980
  .template-minimal.login .login__brand .orion-admin-logo-mark {
981
+ --orion-admin-logo-bg: var(
982
+ --orion-cms-logo-dark-bg,
983
+ color-mix(in srgb, var(--orion-admin-login-panel-bg) 88%, white)
984
+ );
985
+ --orion-admin-logo-border: var(
986
+ --orion-cms-logo-dark-border,
987
+ color-mix(in srgb, var(--brand-secondary) 26%, rgba(255, 255, 255, 0.28))
988
+ );
989
+ --orion-admin-logo-fit: var(--orion-cms-logo-dark-fit, contain);
990
+ --orion-admin-logo-padding: var(--orion-cms-logo-dark-padding, clamp(0.32rem, 0.8vw, 0.48rem));
991
+ --orion-admin-logo-shadow: var(
992
+ --orion-cms-logo-dark-shadow,
993
+ 0 18px 36px rgba(7, 13, 24, 0.18),
994
+ inset 0 1px 0 rgba(255, 255, 255, 0.72)
995
+ );
948
996
  border-radius: var(--orion-admin-logo-radius) !important;
949
- box-shadow: var(--orion-admin-shadow-card);
950
997
  height: 58px !important;
951
998
  width: 58px !important;
952
999
  }
953
1000
 
1001
+ .template-minimal.login .login__brand .orion-admin-logo-mark .orion-admin-logo-image--dark {
1002
+ display: block;
1003
+ }
1004
+
1005
+ .template-minimal.login .login__brand .orion-admin-logo-mark .orion-admin-logo-image--default:not(.is-only-logo) {
1006
+ display: none;
1007
+ }
1008
+
954
1009
  .template-minimal.login .login__brand .orion-admin-logo-wordmark {
955
1010
  color: var(--orion-admin-login-hero-text) !important;
956
1011
  font-family: var(--orion-cms-font-heading, var(--orion-cms-font-heading-resolved, Georgia, 'Times New Roman', serif));
@@ -186,6 +186,7 @@ function configureAdmin(config) {
186
186
  brandPrimary = "#3b82f6",
187
187
  brandSecondary = "#8b5cf6",
188
188
  defaultTheme = "brand-light",
189
+ logoOnDarkUrl,
189
190
  logoUrl,
190
191
  allowThemePreference = false,
191
192
  userSessionDurationSeconds = 60 * 60 * 24
@@ -310,6 +311,7 @@ function configureAdmin(config) {
310
311
  path: clientPath,
311
312
  clientProps: {
312
313
  brandName,
314
+ logoOnDarkUrl,
313
315
  logoUrl
314
316
  }
315
317
  },
@@ -318,6 +320,7 @@ function configureAdmin(config) {
318
320
  path: clientPath,
319
321
  clientProps: {
320
322
  brandName,
323
+ logoOnDarkUrl,
321
324
  logoUrl
322
325
  }
323
326
  }
@@ -470,6 +473,7 @@ function configureAdmin(config) {
470
473
  path: clientPath,
471
474
  clientProps: {
472
475
  brandName,
476
+ logoOnDarkUrl,
473
477
  logoUrl
474
478
  }
475
479
  }
@@ -104,6 +104,7 @@ interface AdminConfig {
104
104
  brandPrimary?: string;
105
105
  brandSecondary?: string;
106
106
  defaultTheme?: ThemeOption;
107
+ logoOnDarkUrl?: string;
107
108
  logoUrl?: string;
108
109
  basePath?: string;
109
110
  studio?: AdminStudioConfig;
@@ -104,6 +104,7 @@ interface AdminConfig {
104
104
  brandPrimary?: string;
105
105
  brandSecondary?: string;
106
106
  defaultTheme?: ThemeOption;
107
+ logoOnDarkUrl?: string;
107
108
  logoUrl?: string;
108
109
  basePath?: string;
109
110
  studio?: AdminStudioConfig;
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- export { i as admin } from './index-Bm2SaC3r.mjs';
1
+ export { i as admin } from './index-Xt3Ep8WV.mjs';
2
2
  export { i as adminApp } from './index-DEQC3Dwj.mjs';
3
3
  export { i as blocks } from './index-CluwY0ZQ.mjs';
4
4
  export { i as nextjs } from './index-D8BNfUJb.mjs';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { i as admin } from './index-CkT_eyhK.js';
1
+ export { i as admin } from './index-yhpAgqDS.js';
2
2
  export { i as adminApp } from './index-52HdVLQq.js';
3
3
  export { i as blocks } from './index-CluwY0ZQ.js';
4
4
  export { i as nextjs } from './index-DD_E2UfJ.js';
package/dist/index.js CHANGED
@@ -241,6 +241,7 @@ function configureAdmin(config) {
241
241
  brandPrimary = "#3b82f6",
242
242
  brandSecondary = "#8b5cf6",
243
243
  defaultTheme = "brand-light",
244
+ logoOnDarkUrl,
244
245
  logoUrl,
245
246
  allowThemePreference = false,
246
247
  userSessionDurationSeconds = 60 * 60 * 24
@@ -365,6 +366,7 @@ function configureAdmin(config) {
365
366
  path: clientPath,
366
367
  clientProps: {
367
368
  brandName,
369
+ logoOnDarkUrl,
368
370
  logoUrl
369
371
  }
370
372
  },
@@ -373,6 +375,7 @@ function configureAdmin(config) {
373
375
  path: clientPath,
374
376
  clientProps: {
375
377
  brandName,
378
+ logoOnDarkUrl,
376
379
  logoUrl
377
380
  }
378
381
  }
@@ -525,6 +528,7 @@ function configureAdmin(config) {
525
528
  path: clientPath,
526
529
  clientProps: {
527
530
  brandName,
531
+ logoOnDarkUrl,
528
532
  logoUrl
529
533
  }
530
534
  }
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  admin_exports
3
- } from "./chunk-WLOPFFN2.mjs";
3
+ } from "./chunk-T4OH6KI6.mjs";
4
4
  import {
5
5
  admin_app_exports
6
6
  } from "./chunk-RKTIFEUY.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.6.0-beta.10",
3
+ "version": "0.6.0-beta.11",
4
4
  "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "./dist/index.js",