origam 2.27.0 → 2.29.2

package/dist/src/utils/Commons/apply-theme.util.cjs

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.applyTheme = applyTheme;
 exports.applyThemes = applyThemes;
 exports.installedThemesFromList = installedThemesFromList;
+exports.isModePinned = isModePinned;
 exports.resolveThemeVars = resolveThemeVars;
 exports.semanticTreeToVars = semanticTreeToVars;
 exports.themeSelector = themeSelector;
 exports.themeToCss = themeToCss;
+exports.themeToUnpinnedCss = themeToUnpinnedCss;
 exports.themeVarsToVars = themeVarsToVars;
 var _tokenName = require("./token-name.util.cjs");
 const STYLE_ELEMENT_PREFIX = "origam-theme";
@@ -91,6 +93,24 @@ ${decls}
 }
 `;
 }
+function isModePinned(cookieValue, defaultMode) {
+  const concrete = v => v === "light" || v === "dark";
+  return concrete(cookieValue) || concrete(defaultMode);
+}
+function themeToUnpinnedCss(theme) {
+  if (theme.mode !== "light" && theme.mode !== "dark") return "";
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map(name => `    ${name}: ${vars[name]};`).join("\n");
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const selector = hasName ? `:root:root[data-theme="${theme.name}"]:not([data-mode])` : "html:not([data-theme]):not([data-mode])";
+  const query = theme.mode === "dark" ? "(prefers-color-scheme: dark)" : "not (prefers-color-scheme: dark)";
+  return `@media ${query} {
+  ${selector} {
+${decls}
+  }
+}
+`;
+}
 function applyTheme(theme) {
   if (typeof document === "undefined") return null;
   const vars = resolveThemeVars(theme);

package/dist/src/utils/Commons/apply-theme.util.d.ts

@@ -42,6 +42,40 @@ export declare function themeSelector(theme: IOrigamTheme): string;
  * the Theme Builder's CSS export so a single code path produces both.
  */
 export declare function themeToCss(theme: IOrigamTheme): string;
+/*********************************************************
+ * isModePinned
+ *
+ * @description
+ * Is the colour mode PINNED by the visitor or the configuration? Pinned means a
+ * `light` / `dark` mode cookie, or a configured `defaultMode` of `light` /
+ * `dark`. Anything else (`auto`, absent, junk) leaves the mode to the system.
+ * @description
+ * Shared by both Nuxt plugins so server and client never disagree on it (#1103).
+ ********************************************************/
+export declare function isModePinned(cookieValue: string | null | undefined, defaultMode: string | undefined): boolean;
+/*********************************************************
+ * themeToUnpinnedCss
+ *
+ * @description
+ * Serialise a MODE-SCOPED theme (`mode` = `light` | `dark`) for a page whose
+ * mode is NOT pinned (#1103): no `data-mode` on `<html>`, the system decides.
+ * Returns `''` for a mode-agnostic theme — its selector never mentions
+ * `data-mode`, so the plain `themeToCss` block already serves both modes.
+ * @description
+ * light → wrapped in `@media not (prefers-color-scheme: dark)`; dark → wrapped
+ * in `@media (prefers-color-scheme: dark)`.
+ * @description
+ * Selectors are ROOT-ONLY and carry `:not([data-mode])`, so the moment a mode is
+ * pinned (the client writes `data-mode`) they stop matching and the regular
+ * `[data-mode]` blocks take over. No sub-tree form is emitted on purpose: an
+ * `<OrigamThemeProvider>` nested in a pinned page must never match them.
+ * @description
+ * Specificity is kept equal to the pinned form: named brand
+ * `:root:root[…]:not([data-mode])` = (0,4,0); unnamed
+ * `html:not([data-theme]):not([data-mode])` = (0,2,1), which beats the built-in
+ * #794 rule (0,2,0) and stays under every named brand.
+ ********************************************************/
+export declare function themeToUnpinnedCss(theme: IOrigamTheme): string;
 /**
  * Inject (or replace) a theme's CSS variables into `<head>` at runtime.
  * SSR-safe: a no-op when `document` is unavailable. Returns the `<style>`

package/dist/src/utils/Commons/apply-theme.util.js

@@ -72,6 +72,24 @@ ${decls}
 }
 `;
 }
+export function isModePinned(cookieValue, defaultMode) {
+  const concrete = (v) => v === "light" || v === "dark";
+  return concrete(cookieValue) || concrete(defaultMode);
+}
+export function themeToUnpinnedCss(theme) {
+  if (theme.mode !== "light" && theme.mode !== "dark") return "";
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map((name) => `    ${name}: ${vars[name]};`).join("\n");
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const selector = hasName ? `:root:root[data-theme="${theme.name}"]:not([data-mode])` : "html:not([data-theme]):not([data-mode])";
+  const query = theme.mode === "dark" ? "(prefers-color-scheme: dark)" : "not (prefers-color-scheme: dark)";
+  return `@media ${query} {
+  ${selector} {
+${decls}
+  }
+}
+`;
+}
 export function applyTheme(theme) {
   if (typeof document === "undefined") return null;
   const vars = resolveThemeVars(theme);

package/dist/src/utils/Commons/ssr-styles.util.cjs

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSsrStyleCollector = createSsrStyleCollector;
+exports.getSsrStyles = getSsrStyles;
+exports.registerSsrStyleCollector = registerSsrStyleCollector;
+exports.renderSsrStyles = renderSsrStyles;
+const collectors = /* @__PURE__ */new WeakMap();
+function escapeStyleText(css) {
+  return css.replace(/<\/(style)/gi, "<\\/$1");
+}
+function createSsrStyleCollector() {
+  const getters = /* @__PURE__ */new Map();
+  return {
+    add(id, css) {
+      getters.set(id, css);
+    },
+    entries() {
+      return [...getters].map(([id, css]) => ({
+        id,
+        css: escapeStyleText(css())
+      }));
+    }
+  };
+}
+function registerSsrStyleCollector(app) {
+  const collector = createSsrStyleCollector();
+  collectors.set(app, collector);
+  return collector;
+}
+function getSsrStyles(app) {
+  return collectors.get(app)?.entries() ?? [];
+}
+function renderSsrStyles(app) {
+  return getSsrStyles(app).map(({
+    id,
+    css
+  }) => `<style id="${id}">${css}</style>`).join("");
+}

package/dist/src/utils/Commons/ssr-styles.util.d.ts

@@ -0,0 +1,6 @@
+import type { App } from 'vue';
+import type { ISsrStyleCollector, ISsrStyleEntry } from '../../interfaces/Commons/style.interface';
+export declare function createSsrStyleCollector(): ISsrStyleCollector;
+export declare function registerSsrStyleCollector(app: App): ISsrStyleCollector;
+export declare function getSsrStyles(app: App): ISsrStyleEntry[];
+export declare function renderSsrStyles(app: App): string;

package/dist/src/utils/Commons/ssr-styles.util.js

@@ -0,0 +1,26 @@
+const collectors = /* @__PURE__ */ new WeakMap();
+function escapeStyleText(css) {
+  return css.replace(/<\/(style)/gi, "<\\/$1");
+}
+export function createSsrStyleCollector() {
+  const getters = /* @__PURE__ */ new Map();
+  return {
+    add(id, css) {
+      getters.set(id, css);
+    },
+    entries() {
+      return [...getters].map(([id, css]) => ({ id, css: escapeStyleText(css()) }));
+    }
+  };
+}
+export function registerSsrStyleCollector(app) {
+  const collector = createSsrStyleCollector();
+  collectors.set(app, collector);
+  return collector;
+}
+export function getSsrStyles(app) {
+  return collectors.get(app)?.entries() ?? [];
+}
+export function renderSsrStyles(app) {
+  return getSsrStyles(app).map(({ id, css }) => `<style id="${id}">${css}</style>`).join("");
+}

package/dist/src/utils/index.cjs

@@ -157,6 +157,17 @@ Object.keys(_getCurrentInstance).forEach(function (key) {
     }
   });
 });
+var _ssrStyles = require("./Commons/ssr-styles.util.cjs");
+Object.keys(_ssrStyles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ssrStyles[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ssrStyles[key];
+    }
+  });
+});
 var _layout = require("./Commons/layout.util.cjs");
 Object.keys(_layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/utils/index.d.ts

@@ -12,6 +12,7 @@ export * from './Commons/css-support.util';
 export * from './Commons/date.util';
 export * from './Commons/elevation.util';
 export * from './Commons/getCurrentInstance.util';
+export * from './Commons/ssr-styles.util';
 export * from './Commons/layout.util';
 export * from './Commons/locale.util';
 export * from './Commons/nested.util';

package/dist/src/utils/index.js

@@ -12,6 +12,7 @@ export * from "./Commons/css-support.util.js";
 export * from "./Commons/date.util.js";
 export * from "./Commons/elevation.util.js";
 export * from "./Commons/getCurrentInstance.util.js";
+export * from "./Commons/ssr-styles.util.js";
 export * from "./Commons/layout.util.js";
 export * from "./Commons/locale.util.js";
 export * from "./Commons/nested.util.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.27.0",
+  "version": "2.29.2",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [