@rak200/ui 0.2.3 → 0.2.4

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { UiButton, type ButtonVariant } from './button.js';
 export { UiField } from './field.js';
-export { tokens, defaults, tokenStyleSheet, type Token } from './tokens.js';
+export { tokens, defaults, darkScheme, tokenStyleSheet, type Token } from './tokens.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,4 +1,4 @@
 export { UiButton } from './button.js';
 export { UiField } from './field.js';
-export { tokens, defaults, tokenStyleSheet } from './tokens.js';
+export { tokens, defaults, darkScheme, tokenStyleSheet } from './tokens.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAc,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAc,MAAM,aAAa,CAAC"}

package/dist/tokens.d.ts

@@ -20,9 +20,36 @@ export type Token = (typeof tokens)[number];
  * system's defaults are what a host sees before it has decided anything.
  */
 export declare const defaults: Readonly<Record<Token, string>>;
+/**
+ * The grounds whose value differs when the page is rendered dark.
+ *
+ * **A scheme is not a theme, and conflating them is the mistake this shape exists to
+ * avoid.** A theme is a named set of decisions, selected with `data-ui-theme`; a scheme is
+ * the light or dark rendering of whichever theme is in force, selected with
+ * `color-scheme`. The two axes are independent, and a token carries both of its schemes in
+ * one value through `light-dark()`, so a theme is a handful of grounds rather than a
+ * parallel block per scheme plus a media query nobody writes correctly the first time.
+ *
+ * `Partial` is the type doing the work: it answers *which grounds vary by scheme* in the
+ * type system. `--ui-radius` does not vary and `--ui-color-surface` does, and folding both
+ * schemes into {@link defaults} as a single expression would make those two
+ * indistinguishable — and would hand a native emitter a CSS function to parse instead of a
+ * value to read.
+ *
+ * Only colours appear here, and that is a rule rather than a coincidence: `light-dark()`
+ * takes colours, so a dark value for `--ui-radius` would emit CSS the browser discards.
+ */
+export declare const darkScheme: Readonly<Partial<Record<Token, string>>>;
 /**
  * The token defaults as a CSS rule, for a host that wants them without importing a
  * component. Returns the text of a `:root` block; a host inserts it however it prefers.
+ *
+ * **It declares `color-scheme` as well as the tokens, and that is deliberate.**
+ * `color-scheme` is a real property rather than a custom one, so it can never be a token —
+ * and leaving it to the host is a silent failure at the highest possible frequency: every
+ * host would have to remember, and forgetting means dark mode simply never happens, with
+ * no error anywhere to read. A host who wants something else — `only light`, say — governs
+ * the order this sheet is inserted in, which is a knob they already hold.
  */
 export declare function tokenStyleSheet(): string;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,eAAO,MAAM,MAAM,0LAUT,CAAC;AAEX,kDAAkD;AAClD,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAkBpD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAIxC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,eAAO,MAAM,MAAM,0LAUT,CAAC;AAEX,kDAAkD;AAClD,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAkBpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAW/D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAUxC"}

package/dist/tokens.js

@@ -46,12 +46,55 @@ export const defaults = {
     '--ui-space': '0.5rem',
     '--ui-font': 'system-ui, sans-serif',
 };
+/**
+ * The grounds whose value differs when the page is rendered dark.
+ *
+ * **A scheme is not a theme, and conflating them is the mistake this shape exists to
+ * avoid.** A theme is a named set of decisions, selected with `data-ui-theme`; a scheme is
+ * the light or dark rendering of whichever theme is in force, selected with
+ * `color-scheme`. The two axes are independent, and a token carries both of its schemes in
+ * one value through `light-dark()`, so a theme is a handful of grounds rather than a
+ * parallel block per scheme plus a media query nobody writes correctly the first time.
+ *
+ * `Partial` is the type doing the work: it answers *which grounds vary by scheme* in the
+ * type system. `--ui-radius` does not vary and `--ui-color-surface` does, and folding both
+ * schemes into {@link defaults} as a single expression would make those two
+ * indistinguishable — and would hand a native emitter a CSS function to parse instead of a
+ * value to read.
+ *
+ * Only colours appear here, and that is a rule rather than a coincidence: `light-dark()`
+ * takes colours, so a dark value for `--ui-radius` would emit CSS the browser discards.
+ */
+export const darkScheme = {
+    // Blue-400 over the dark surface rather than blue-600, which is legible on white and
+    // muddy on charcoal. Its contrast pair is inverted with it: dark text on a light
+    // accent is what reads at this end.
+    '--ui-color-accent': '#60a5fa',
+    '--ui-color-accent-contrast': '#111827',
+    '--ui-color-surface': '#111827',
+    '--ui-color-text': '#e5e7eb',
+    // Red-700 is 2.74:1 on the dark surface — under the 4.5:1 floor for text, and error
+    // text is the one thing in this set that must never be hard to read. Red-400 is 6.41.
+    '--ui-color-danger': '#f87171',
+};
 /**
  * The token defaults as a CSS rule, for a host that wants them without importing a
  * component. Returns the text of a `:root` block; a host inserts it however it prefers.
+ *
+ * **It declares `color-scheme` as well as the tokens, and that is deliberate.**
+ * `color-scheme` is a real property rather than a custom one, so it can never be a token —
+ * and leaving it to the host is a silent failure at the highest possible frequency: every
+ * host would have to remember, and forgetting means dark mode simply never happens, with
+ * no error anywhere to read. A host who wants something else — `only light`, say — governs
+ * the order this sheet is inserted in, which is a knob they already hold.
  */
 export function tokenStyleSheet() {
-    const body = tokens.map((token) => `  ${token}: ${defaults[token]};`).join('\n');
-    return `:root {\n${body}\n}`;
+    const body = tokens
+        .map((token) => {
+        const dark = darkScheme[token];
+        return `  ${token}: ${dark === undefined ? defaults[token] : `light-dark(${defaults[token]}, ${dark})`};`;
+    })
+        .join('\n');
+    return `:root {\n  color-scheme: light dark;\n${body}\n}`;
 }
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,WAAW;CACL,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,mFAAmF;IACnF,qFAAqF;IACrF,gFAAgF;IAChF,mFAAmF;IACnF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,4BAA4B;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,aAAa,EAAE,UAAU;IACzB,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,uBAAuB;CACvC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjF,OAAO,YAAY,IAAI,KAAK,CAAC;AACjC,CAAC"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,WAAW;CACL,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,mFAAmF;IACnF,qFAAqF;IACrF,gFAAgF;IAChF,mFAAmF;IACnF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,4BAA4B;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,aAAa,EAAE,UAAU;IACzB,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,uBAAuB;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6C;IAChE,qFAAqF;IACrF,iFAAiF;IACjF,oCAAoC;IACpC,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,oFAAoF;IACpF,sFAAsF;IACtF,mBAAmB,EAAE,SAAS;CACjC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,IAAI,GAAG,MAAM;SACd,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACX,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAE/B,OAAO,KAAK,KAAK,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG,GAAG,CAAC;IAC9G,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhB,OAAO,yCAAyC,IAAI,KAAK,CAAC;AAC9D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",