@abcnews/components-storylab 0.0.1

package/README.md

@@ -0,0 +1,23 @@
+# 📖 🧪 components-storylab
+
+A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.
+
+## Components
+
+### initDarkModeIframe
+
+Initializes dark mode inside an iframe, synchronizing with the parent site or system preferences.
+
+```ts
+import { initDarkModeIframe } from "@abcnews/components-storylab";
+
+// Initialise this as early as possible to prevent flashes
+// of the wrong background colour.
+initDarkModeIframe();
+```
+
+## Developing
+
+See [DEVELOPMENT.md](DEVELOPMENT.md)
+
+Note: I haven't been able to `npm link` svelte components into an Aunty project. If you work this out please let me know.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as initDarkModeIframe } from "./utils/initDarkModeIframe/initDarkModeIframe.ts";

package/dist/index.js

@@ -0,0 +1,2 @@
+// Reexport your entry components here
+export { default as initDarkModeIframe } from "./utils/initDarkModeIframe/initDarkModeIframe.js";

package/dist/utils/initDarkModeIframe/darkMode.css

@@ -0,0 +1,18 @@
+/* transparent iframes */
+html {
+  color-scheme: light;
+  --dark-background: #0e0e0e;
+  &[data-scheme='dark'] {
+    color-scheme: dark;
+  }
+}
+
+/* hard-coded iframe colours for x-domain interactives */
+html[data-background='force'] {
+  background: white;
+  color: black;
+  &[data-scheme='dark'] {
+    background: var(--background, var(--dark-background, black));
+    color: white;
+  }
+}

package/dist/utils/initDarkModeIframe/initDarkModeIframe.d.ts

@@ -0,0 +1,13 @@
+import "./darkMode.css";
+/**
+ * Initializes dark mode inside an iframe, synchronizing with the parent site or system preferences.
+ *
+ * The function follows this priority:
+ * 1. **URL Parameter**: Uses `?scheme=light|dark` if provided (required for Odysseys).
+ * 2. **Same-Domain**: Observes the parent's `data-scheme` attribute for instant synchronization.
+ * 3. **Cross-Domain/Fallback**: Defaults to the OS `prefers-color-scheme`.
+ *    - Forces background styling (`data-background="force"`) to bypass app transparency limits.
+ *    - Hard-codes black background for `newsapp.` referrers.
+ *    - Listens for system-level prefers-color-scheme changes.
+ */
+export default function initDarkModeIframe(): void;

package/dist/utils/initDarkModeIframe/initDarkModeIframe.js

@@ -0,0 +1,56 @@
+import "./darkMode.css";
+/** closest [data-scheme] element to our iframe */
+function getParentBody() {
+    try {
+        const parentBod = parent.document.body;
+        return parentBod !== document.body ? parentBod : null;
+    }
+    catch (e) {
+        return null;
+    }
+}
+/**
+ * Initializes dark mode inside an iframe, synchronizing with the parent site or system preferences.
+ *
+ * The function follows this priority:
+ * 1. **URL Parameter**: Uses `?scheme=light|dark` if provided (required for Odysseys).
+ * 2. **Same-Domain**: Observes the parent's `data-scheme` attribute for instant synchronization.
+ * 3. **Cross-Domain/Fallback**: Defaults to the OS `prefers-color-scheme`.
+ *    - Forces background styling (`data-background="force"`) to bypass app transparency limits.
+ *    - Hard-codes black background for `newsapp.` referrers.
+ *    - Listens for system-level prefers-color-scheme changes.
+ */
+export default function initDarkModeIframe() {
+    const doc = document.documentElement;
+    const setScheme = (isDark) => (doc.dataset["scheme"] = isDark ? "dark" : "light");
+    const parentBody = getParentBody();
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("scheme")) {
+        // if the iframe has a hard-coded "scheme" in the url, just use that
+        // these must be used in Odysseys, otherwise we'll get the site-wide theme.
+        setScheme(params.get("scheme") === "dark");
+    }
+    else if (parentBody) {
+        // if same-domain, observe colour scheme preference in the parent
+        const sync = () => setScheme(parentBody.getAttribute("data-scheme") === "dark");
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(parentBody, {
+            attributes: true,
+            attributeFilter: ["data-scheme"],
+        });
+    }
+    else {
+        // when x-domain, use prefers-colour-scheme & hard-code the background
+        // colour. Works in the app. May be wrong if preference was set in preview.
+        doc.dataset["background"] = "force";
+        // newsapp background is black
+        if (document.referrer.includes("newsapp.")) {
+            doc.style.setProperty("--background", "black");
+        }
+        setScheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", (e) => setScheme(e.matches));
+    }
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@abcnews/components-storylab",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "publint": "^0.3.15",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/abcnews/components-storylab",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abcnews/components-storylab.git"
+  },
+  "private": false
+}