@crombolo/backoffice-host 0.14.4 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
   "license": "MIT",
   "author": "Crombolo",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@crombolo/core": "0.14.4",
+    "@crombolo/core": "0.15.0",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Assistant",
   "id": "Crombolo.Assistant",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/branding/theme-dark.css

@@ -0,0 +1,61 @@
+/*
+ * Crombolo's dark mode (story 049): the vendored `dark.css` for every token,
+ * warmed to the brand — cocoa surfaces, cream text, terracotta accents.
+ *
+ * The theme context appends this after `theme.css` when Dark is chosen, so it
+ * overrides the light palette. `/umbraco/backoffice/…` is served wherever the
+ * back office is mounted, which is why the import can name it outright.
+ * `tests/theme.test.ts` checks the contrast of every pair below.
+ */
+@import url("/umbraco/backoffice/css/dark.css");
+
+:root {
+  --crombolo-orange: #da987c;
+  --crombolo-orange-light: #e2ae98;
+  --crombolo-ink: #f6ede4;
+  --crombolo-ink-dimmed: #c9b5a5;
+  --crombolo-night: #1f1813;
+  --crombolo-night-surface: #2a211b;
+  --crombolo-night-alt: #342922;
+  --crombolo-night-header: #2b1d15;
+  --crombolo-cocoa-deep: #25160e;
+
+  --uui-color-background: var(--crombolo-night);
+  --uui-color-surface: var(--crombolo-night-surface);
+  --uui-color-surface-alt: var(--crombolo-night-alt);
+  --uui-color-surface-emphasis: #30261f;
+  --uui-color-text: var(--crombolo-ink);
+  --uui-color-text-alt: var(--crombolo-ink-dimmed);
+  --uui-color-interactive: var(--crombolo-ink);
+  --uui-color-interactive-emphasis: var(--crombolo-orange-light);
+
+  /* The accent is light, so what sits on it is dark, as in the light mode. */
+  --uui-color-default: var(--crombolo-orange);
+  --uui-color-default-emphasis: var(--crombolo-orange-light);
+  --uui-color-default-standalone: var(--crombolo-orange);
+  --uui-color-default-contrast: var(--crombolo-cocoa-deep);
+  --uui-color-selected: var(--crombolo-orange);
+  --uui-color-selected-emphasis: var(--crombolo-orange-light);
+  --uui-color-selected-standalone: var(--crombolo-orange);
+  --uui-color-selected-contrast: var(--crombolo-cocoa-deep);
+  --uui-color-current: var(--crombolo-orange);
+  --uui-color-current-emphasis: var(--crombolo-orange-light);
+  --uui-color-current-contrast: var(--crombolo-cocoa-deep);
+  --uui-color-focus: var(--crombolo-orange);
+
+  /* A dark header with cream text; the active section's marker is the accent. */
+  --uui-color-header-surface: var(--crombolo-night-header);
+  --uui-color-header-contrast: rgb(246 237 228 / 80%);
+  --uui-color-header-contrast-emphasis: var(--crombolo-ink);
+  --crombolo-header-current: var(--crombolo-orange);
+
+  /* The SEO view's search-result preview, in Google's dark-mode link blue. */
+  --crombolo-snippet-title: #8ab4f8;
+
+  --uui-color-border: #4a3b31;
+  --uui-color-border-standalone: #8b7564;
+  --uui-color-border-emphasis: #a38c7a;
+  --uui-color-divider: #3a2e26;
+  --uui-color-divider-standalone: #4a3b31;
+  --uui-color-divider-emphasis: #5a4638;
+}

package/plugin/branding/theme-system.css

@@ -0,0 +1,6 @@
+/*
+ * "Match my system" (story 049): the dark mode while the computer asks for
+ * dark, and the light one otherwise — including a change made while the back
+ * office is open, which the media query follows by itself.
+ */
+@import url("./theme-dark.css") (prefers-color-scheme: dark);

package/plugin/localizations/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/seo/document-view.js

@@ -122,7 +122,8 @@ export default class CromboloSeoDocumentViewElement extends UmbLitElement {
       overflow-wrap: anywhere;
     }
     .snippet .title {
-      color: #1a0dab;
+      /* A search result's link blue: Google's own, light and dark. */
+      color: var(--crombolo-snippet-title, #1a0dab);
       font-size: 20px;
       margin: 4px 0;
     }

package/plugin/seo/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Search & sharing",
   "id": "Crombolo.Seo",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/sign-in/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Sign-in Dialog",
   "id": "Crombolo.SignInDialog",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/theme-switch.js

@@ -0,0 +1,134 @@
+/**
+ * Light, dark or the computer's choice, from the header (story 049).
+ *
+ * The choice is Umbraco's theme context's — it links the stylesheet and keeps
+ * the alias in `localStorage` for the shell's early script to apply before the
+ * next paint. This adds the menu, and keeps the choice for the person in user
+ * data, so it follows them to another browser.
+ */
+import { css, html } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes'
+
+const USER_DATA = '/umbraco/management/api/v1/user-data'
+const GROUP = 'crombolo'
+const IDENTIFIER = 'theme'
+const EARLY = 'crombolo-early-theme'
+
+const CHOICES = [
+  { alias: 'umb-light-theme', label: 'Light', icon: 'icon-sunny' },
+  { alias: 'Crombolo.Theme.Dark', label: 'Dark', icon: 'icon-contrast' },
+  { alias: 'Crombolo.Theme.System', label: 'Match my system', icon: 'icon-lightbulb' },
+]
+
+export default class CromboloThemeSwitchElement extends UmbLitElement {
+  static properties = { _alias: { state: true } }
+
+  #context
+  #savedKey
+
+  constructor() {
+    super()
+    this._alias = 'umb-light-theme'
+    this.consumeContext(UMB_THEME_CONTEXT, (context) => {
+      this.#context = context
+      this.observe(context.theme, (alias) => {
+        this._alias = alias || 'umb-light-theme'
+        // The shell's early stylesheet stood in until the context took over;
+        // once the choice differs from it, it would only fight the new one.
+        const early = document.getElementById(EARLY)
+        if (early && early.dataset.theme !== this._alias) early.remove()
+      })
+      this.#restore()
+    })
+  }
+
+  /** The person's saved choice, when this browser's differs from it. */
+  async #restore() {
+    try {
+      const query = new URLSearchParams({ groups: GROUP, identifiers: IDENTIFIER, take: '1' })
+      const response = await fetch(`${USER_DATA}?${query}`, { credentials: 'include' })
+      if (!response.ok) return
+      const found = (await response.json()).items?.[0]
+      if (!found) return
+      this.#savedKey = found.key
+      if (found.value && found.value !== this._alias) this.#context?.setThemeByAlias(found.value)
+    } catch {
+      // This browser's choice stands.
+    }
+  }
+
+  async #save(alias) {
+    const body = { group: GROUP, identifier: IDENTIFIER, value: alias }
+    try {
+      if (this.#savedKey) {
+        await fetch(USER_DATA, {
+          method: 'PUT',
+          credentials: 'include',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ ...body, key: this.#savedKey }),
+        })
+        return
+      }
+      const response = await fetch(USER_DATA, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      this.#savedKey = response.headers.get('umb-generated-resource') ?? undefined
+    } catch {
+      // Kept in this browser regardless; another will start from its own.
+    }
+  }
+
+  #choose(alias) {
+    this.#context?.setThemeByAlias(alias)
+    this.#save(alias)
+    this.renderRoot.querySelector('#crombolo-theme-menu')?.hidePopover?.()
+  }
+
+  render() {
+    const current = CHOICES.find((choice) => choice.alias === this._alias) ?? CHOICES[0]
+    return html`
+      <uui-button
+        compact
+        look="primary"
+        label="Light or dark: ${current.label}"
+        popovertarget="crombolo-theme-menu">
+        <umb-icon name=${current.icon}></umb-icon>
+      </uui-button>
+      <uui-popover-container id="crombolo-theme-menu" placement="bottom-end">
+        <umb-popover-layout>
+          ${CHOICES.map(
+            (choice) => html`<uui-menu-item
+                label=${choice.label}
+                ?active=${choice.alias === this._alias}
+                @click-label=${() => this.#choose(choice.alias)}>
+                <umb-icon slot="icon" name=${choice.icon}></umb-icon>
+              </uui-menu-item>`,
+          )}
+        </umb-popover-layout>
+      </uui-popover-container>
+    `
+  }
+
+  static styles = css`
+    uui-button {
+      font-size: 18px;
+      --uui-button-background-color: var(--umb-header-app-button-background-color, transparent);
+      --uui-button-background-color-hover: var(
+        --umb-header-app-button-background-color-hover,
+        var(--uui-color-emphasis)
+      );
+    }
+    :host {
+      --uui-menu-item-flat-structure: 1;
+    }
+    umb-popover-layout {
+      min-width: 12rem;
+    }
+  `
+}
+
+customElements.define('crombolo-theme-switch', CromboloThemeSwitchElement)

package/plugin/two-factor-setup.js

@@ -124,6 +124,7 @@ export default class CromboloTwoFactorSetupElement extends UmbLitElement {
       width: 200px;
       height: 200px;
       margin: var(--uui-size-space-4) auto;
+      /* White in every mode: a scanner reads dark modules on a light ground. */
       background: #fff;
     }
     .secret code,

package/plugin/umbraco-package.json

@@ -2,9 +2,31 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "allowPublicAccess": false,
   "extensions": [
+    {
+      "type": "theme",
+      "alias": "Crombolo.Theme.Dark",
+      "name": "Dark",
+      "css": "/crombolo-plugin/branding/theme-dark.css",
+      "weight": 200,
+      "overwrites": "umb-dark-theme"
+    },
+    {
+      "type": "theme",
+      "alias": "Crombolo.Theme.System",
+      "name": "Match my system",
+      "css": "/crombolo-plugin/branding/theme-system.css",
+      "weight": 250
+    },
+    {
+      "type": "headerApp",
+      "alias": "Crombolo.HeaderApp.Theme",
+      "name": "Light or dark",
+      "element": "/crombolo-plugin/theme-switch.js",
+      "weight": 850
+    },
     {
       "type": "entityUserPermission",
       "alias": "Crombolo.UserPermission.Remote.Pull",
@@ -55,7 +77,10 @@
       "name": "Crombolo Signed-in Devices",
       "element": "/crombolo-plugin/signed-in-devices.js",
       "weight": 100,
-      "meta": { "label": "Signed-in devices", "pathname": "devices" }
+      "meta": {
+        "label": "Signed-in devices",
+        "pathname": "devices"
+      }
     },
     {
       "type": "mfaLoginProvider",
@@ -63,7 +88,9 @@
       "name": "Crombolo Authenticator App",
       "forProviderName": "UmbracoUserAppAuthenticator",
       "element": "/crombolo-plugin/two-factor-setup.js",
-      "meta": { "label": "Authenticator app" }
+      "meta": {
+        "label": "Authenticator app"
+      }
     },
     {
       "type": "sectionView",

package/plugin/welcome-dashboard.js

@@ -31,8 +31,8 @@ const STEPS = [
   {
     title: 'Keep the schema in the repository',
     body: html`Content types, data types and templates are also files:
-      <code>schema/*.toml</code>. <code>crombolo schema sync</code> writes changes made in
-      the backoffice back out, and <code>crombolo schema check</code> tells you whether a
+      <code>schema/*.toml</code>. <code>crombolo types sync</code> writes changes made in
+      the backoffice back out, and <code>crombolo types check</code> tells you whether a
       database matches. Schema travels through Git, not a database export.`,
   },
 ]

package/src/index.ts

@@ -6,3 +6,4 @@ export * from './manifests.ts'
 export * from './paths.ts'
 export * from './shell.ts'
 export * from './static.ts'
+export * from './theme-early.ts'

package/src/shell.ts

@@ -9,6 +9,7 @@
 import { MANAGEMENT_API_PATH } from '@crombolo/core'
 import type { PackageManifestImportmap } from './manifests.ts'
 import type { BackOfficePaths } from './paths.ts'
+import { earlyThemeScript } from './theme-early.ts'
 
 export interface ShellSettings {
   /** GlobalSettings.DefaultUILanguage — the initial UI language. */
@@ -81,6 +82,7 @@ export function renderBackOfficeShell(
   <link rel="stylesheet" href="${assets}/css/umb-css.css" />
   <link rel="stylesheet" href="${assets}/css/light.css" />
   <link rel="stylesheet" href="${paths.pluginPath}/branding/theme.css" />
+  <script>${earlyThemeScript(paths)}</script>
   <script type="importmap">
 ${JSON.stringify(importmap, null, 2)}
   </script>
@@ -117,7 +119,8 @@ export function renderLoginShell(
   <title>${escapeHtml(settings.title)}</title>
   <link rel="stylesheet" href="${assets}/css/light.css" />
   <link rel="stylesheet" href="${paths.pluginPath}/branding/theme.css" />
-  <style>body { margin: 0; padding: 0; background-color: #fff7ea; }</style>
+  <script>${earlyThemeScript(paths)}</script>
+  <style>body { margin: 0; padding: 0; background-color: var(--uui-color-background, #fff7ea); }</style>
   <script type="importmap">
 ${JSON.stringify(importmap, null, 2)}
   </script>
@@ -163,7 +166,8 @@ export function renderStandaloneShell(
   <title>${escapeHtml(settings.title)}</title>
   <link rel="stylesheet" href="${assets}/css/light.css" />
   <link rel="stylesheet" href="${paths.pluginPath}/branding/theme.css" />
-  <style>body { margin: 0; padding: 0; background-color: #fff7ea; }</style>
+  <script>${earlyThemeScript(paths)}</script>
+  <style>body { margin: 0; padding: 0; background-color: var(--uui-color-background, #fff7ea); }</style>
   <script type="importmap">
 ${JSON.stringify(importmap, null, 2)}
   </script>

package/src/theme-early.ts

@@ -0,0 +1,50 @@
+/**
+ * The back office's light or dark mode, applied before the first paint
+ * (story 049). Umbraco's theme context keeps the choice in `localStorage` and
+ * applies it once the client has booted, so a reload painted light first; and
+ * the login shell boots no theme context at all. This inline script reads the
+ * same key and links the same stylesheet at once.
+ */
+import type { BackOfficePaths } from './paths.ts'
+
+/** The key Umbraco's theme context keeps the choice under. */
+export const THEME_STORAGE_KEY = 'umb-theme-alias'
+
+export const THEME_DARK = 'Crombolo.Theme.Dark'
+export const THEME_SYSTEM = 'Crombolo.Theme.System'
+
+/** Umbraco's own dark, which crombolo's replaces: a browser that chose it gets the new one. */
+const RENAMED: Record<string, string> = { 'umb-dark-theme': THEME_DARK }
+
+export const EARLY_THEME_ID = 'crombolo-early-theme'
+
+/** Each choice's stylesheet; light, or nothing chosen, needs none beyond the shell's own. */
+export function themeStylesheets(paths: BackOfficePaths): Record<string, string> {
+  return {
+    [THEME_DARK]: `${paths.pluginPath}/branding/theme-dark.css`,
+    [THEME_SYSTEM]: `${paths.pluginPath}/branding/theme-system.css`,
+    'umb-high-contrast-theme': `${paths.assetsPath}/css/high-contrast.css`,
+  }
+}
+
+/** The inline script, as the shells embed it. It fails quietly: light is a fine fallback. */
+export function earlyThemeScript(paths: BackOfficePaths): string {
+  const sheets = JSON.stringify(themeStylesheets(paths))
+  const renamed = JSON.stringify(RENAMED)
+  return `(function () {
+  try {
+    var key = ${JSON.stringify(THEME_STORAGE_KEY)};
+    var alias = localStorage.getItem(key);
+    var renamed = ${renamed};
+    if (alias && renamed[alias]) { alias = renamed[alias]; localStorage.setItem(key, alias); }
+    var href = alias ? ${sheets}[alias] : undefined;
+    if (!href) return;
+    var link = document.createElement('link');
+    link.id = ${JSON.stringify(EARLY_THEME_ID)};
+    link.rel = 'stylesheet';
+    link.href = href;
+    link.setAttribute('data-theme', alias);
+    document.head.appendChild(link);
+  } catch (error) {}
+})();`
+}