@cloudcrane/app-runtime 0.6.0 → 0.8.0

package/dist/runtime/theme.d.ts

@@ -1,10 +1,19 @@
 import type { TokenNode } from "@cloudcrane/app-spec/schema";
-/** Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. */
+/**
+ * Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. The top-level `dark` group
+ * is the dark colours (darkVariables), not tokens of its own.
+ */
 export declare function tokenVariables(tokens: TokenNode): [string, string][];
+/** The dark colours (tokens.dark, laid out as the light ones: dark.color.background…), as the variables they replace. */
+export declare function darkVariables(tokens: TokenNode): [string, string][];
+/** A colour's relative lightness, 0 to 1, from #rgb, #rrggbb or rgb(r g b); null for anything else. */
+declare function lightness(css: string): number | null;
 /**
  * The tokens as a :root rule, with the page's colour scheme taken from its own
  * background: A2UI's defaults for what a spec leaves out (a plain button's
  * text) are light-dark() pairs, which would otherwise follow the phone's
- * setting and put light text on a light page. Light unless the background is dark.
+ * setting and put light text on a light page. Light unless the background is dark; with dark colours (tokens.dark),
+ * the light ones by default and the dark ones when the phone is set to dark.
  */
 export declare function tokensCss(tokens: TokenNode): string;
+export { lightness };

package/dist/runtime/theme.js

@@ -19,8 +19,20 @@ function cssValue(type, v) {
     }
     return null;
 }
-/** Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. */
+/**
+ * Every token as [--a2ui-name, value], in name order. A group's $type applies to its tokens. The top-level `dark` group
+ * is the dark colours (darkVariables), not tokens of its own.
+ */
 export function tokenVariables(tokens) {
+    const { dark: _dark, ...light } = tokens;
+    return variablesOf(light);
+}
+/** The dark colours (tokens.dark, laid out as the light ones: dark.color.background…), as the variables they replace. */
+export function darkVariables(tokens) {
+    const dark = tokens["dark"];
+    return dark && typeof dark === "object" ? variablesOf(dark) : [];
+}
+function variablesOf(tokens) {
     const out = [];
     const walk = (node, path, type) => {
         const t = node.$type ?? type;
@@ -60,12 +72,20 @@ function lightness(css) {
  * The tokens as a :root rule, with the page's colour scheme taken from its own
  * background: A2UI's defaults for what a spec leaves out (a plain button's
  * text) are light-dark() pairs, which would otherwise follow the phone's
- * setting and put light text on a light page. Light unless the background is dark.
+ * setting and put light text on a light page. Light unless the background is dark; with dark colours (tokens.dark),
+ * the light ones by default and the dark ones when the phone is set to dark.
  */
 export function tokensCss(tokens) {
     const vars = tokenVariables(tokens);
+    const dark = darkVariables(tokens);
+    // With dark colours, the page follows the phone's setting; without, it keeps the one scheme its background is.
+    if (dark.length) {
+        const rule = (vs) => vs.map(([k, v]) => `${k}:${v};`).join("");
+        return `:root{color-scheme:light dark;${rule(vars)}}@media (prefers-color-scheme:dark){:root{${rule(dark)}}}`;
+    }
     const background = vars.find(([k]) => k === "--a2ui-color-background")?.[1];
     const l = background === undefined ? null : lightness(background);
     const scheme = l !== null && l < 0.18 ? "dark" : "light";
     return `:root{color-scheme:${scheme};${vars.map(([k, v]) => `${k}:${v};`).join("")}}`;
 }
+export { lightness };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudcrane/app-runtime",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "runtimeVersion": "0.4.0",
   "description": "Builds a CloudCrane app spec into one HTML page, the same bytes every time, and the runtime that draws it with A2UI's renderer.",
   "keywords": [
@@ -44,7 +44,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@cloudcrane/app-spec": "^0.5.0"
+    "@cloudcrane/app-spec": "^0.7.0"
   },
   "peerDependencies": {
     "zod": "^3.25.76"