@rak200/ui 0.7.0 → 0.7.1

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { UiMenu } from './menu.js';
 export { UiRadio, UiRadioGroup, type RadioOrientation } from './radio.js';
 export { UiOptgroup, UiOption, UiSelect } from './select.js';
 export { UiTable } from './table.js';
+export { matrix, themeStyleSheet, type Theme } from './theme.js';
 export { UiToast, UiToaster, type ToastVariant } from './toast.js';
 export { UiTooltip } from './tooltip.js';
 export { tokens, derivedTokens, defaults, formulas, darkScheme, moreContrast, tokenStyleSheet, type Token, type DerivedToken, } from './tokens.js';

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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -8,6 +8,7 @@ export { UiMenu } from './menu.js';
 export { UiRadio, UiRadioGroup } from './radio.js';
 export { UiOptgroup, UiOption, UiSelect } from './select.js';
 export { UiTable } from './table.js';
+export { matrix, themeStyleSheet } from './theme.js';
 export { UiToast, UiToaster } from './toast.js';
 export { UiTooltip } from './tooltip.js';
 export { tokens, derivedTokens, defaults, formulas, darkScheme, moreContrast, tokenStyleSheet, } from './tokens.js';

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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,eAAe,GAGlB,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,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAc,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,eAAe,GAGlB,MAAM,aAAa,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,67 @@
+import { type DerivedToken, type Token } from './tokens.js';
+/** A name a theme may set: a ground, or a derived role it overrides. */
+type Named = Token | DerivedToken;
+/**
+ * A named set of decisions, as data, for {@link themeStyleSheet} to render.
+ *
+ * **The object `defaults`, `darkScheme` and `moreContrast` already are**, for a palette other
+ * than the default one — RFC 0003. Data first and CSS second, because a target that is not CSS
+ * reads the source rather than parsing a stylesheet back into values, which is what #24 records
+ * as the thing to avoid.
+ *
+ * A theme carries no `scheme`: no shipped theme declines one, and a theme that wanted one would
+ * gain an optional field, additively.
+ */
+export interface Theme {
+    /** What `data-ui-theme` says to select it. */
+    readonly name: string;
+    /**
+     * What it sets, at its value in the light scheme or in both — as `defaults` is. A derived
+     * role belongs here only where the theme needs a different mix than the formula gives,
+     * and then the floors measure what it wrote.
+     */
+    readonly values: Readonly<Partial<Record<Named, string>>>;
+    /** The values that differ in the dark scheme, as `darkScheme` is. Colours only. */
+    readonly dark?: Readonly<Partial<Record<Named, string>>>;
+    /**
+     * Its answer to `prefers-contrast: more`, a light and a dark value per name, as
+     * `moreContrast` is.
+     */
+    readonly more?: Readonly<Partial<Record<Named, readonly [light: string, dark: string]>>>;
+}
+/**
+ * A theme as CSS: its block under `[data-ui-theme='…']`, and its answer to
+ * `prefers-contrast: more` after it.
+ *
+ * **Never emitted by `tokenStyleSheet()`**, so a host inserts the block for a theme it uses
+ * and pays for no theme it never selects. Selecting one stays the attribute.
+ *
+ * **The answer resets the states the default palette's answer writes and the theme's leaves
+ * out.** `tokenStyleSheet()` writes them under `more` at `:root`, and a value declared at
+ * `:root` reaches every subtree — so under a theme it would paint the default palette's greys
+ * over the theme's grounds. `initial` takes each back to its formula, which resolves against
+ * the theme's own grounds where it is used. A ground needs no reset: one the theme declares
+ * wins on its own element, and one it does not is the reader's setting, rightly inherited.
+ */
+export declare function themeStyleSheet(theme: Theme): string;
+/**
+ * Matrix: a terminal's green on near-black in the dark scheme, and the same idea on white in
+ * the light one — RFC 0003 built it in both and kept both.
+ *
+ * The dark scheme is the reference's wherever the floors allow it: its green on `#050505`,
+ * a monospace face, an 8px corner. On white that green is 1.37:1, so the text goes to a dark
+ * green and the accent to a middle one, which keeps the derived black label legible on it.
+ * Success is the theme's own green, where the default palette's would sit beside it as a
+ * second one, and info a terminal's brighter cyan; both clear the 4.5:1 every outcome does.
+ *
+ * **The glow is the elevation step, so no name is added for it**: the card, the menu, the
+ * toast and the tip already read `--ui-elevation-100`, and a glow is a shadow at no offset. A
+ * shadow is not a colour, so `light-dark()` cannot carry two of them — but the part of a glow
+ * that follows the scheme is its colour, and a colour inside a shadow can be `light-dark()`.
+ * The strength the prototype settled on, 1.8, is folded into the alphas.
+ *
+ * Under `prefers-contrast: more` the green stays on the accent and the text goes to its pole.
+ */
+export declare const matrix: Theme;
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,YAAY,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzF,wEAAwE;AACxE,KAAK,KAAK,GAAG,KAAK,GAAG,YAAY,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,WAAW,KAAK;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1D,mFAAmF;IACnF,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IACzD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5F;AAOD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAmBpD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,MAAM,EAAE,KAiCpB,CAAC"}

package/dist/theme.js

@@ -0,0 +1,85 @@
+import { derivedTokens, moreContrast } from './tokens.js';
+/** One declaration, a value with its dark one where it has one. */
+function declare(name, light, dark) {
+    return `  ${name}: ${dark === undefined ? light : `light-dark(${light}, ${dark})`};`;
+}
+/**
+ * A theme as CSS: its block under `[data-ui-theme='…']`, and its answer to
+ * `prefers-contrast: more` after it.
+ *
+ * **Never emitted by `tokenStyleSheet()`**, so a host inserts the block for a theme it uses
+ * and pays for no theme it never selects. Selecting one stays the attribute.
+ *
+ * **The answer resets the states the default palette's answer writes and the theme's leaves
+ * out.** `tokenStyleSheet()` writes them under `more` at `:root`, and a value declared at
+ * `:root` reaches every subtree — so under a theme it would paint the default palette's greys
+ * over the theme's grounds. `initial` takes each back to its formula, which resolves against
+ * the theme's own grounds where it is used. A ground needs no reset: one the theme declares
+ * wins on its own element, and one it does not is the reader's setting, rightly inherited.
+ */
+export function themeStyleSheet(theme) {
+    const selector = `[data-ui-theme='${theme.name}']`;
+    const values = Object.entries(theme.values).map(([name, light]) => declare(name, light, theme.dark?.[name]));
+    const answered = theme.more ?? {};
+    const resets = derivedTokens.filter((name) => name in moreContrast && !(name in answered) && !(name in theme.values));
+    const answer = [
+        ...Object.entries(answered).map(([name, [light, dark]]) => declare(name, light, dark)),
+        ...resets.map((name) => `  ${name}: initial;`),
+    ].map((line) => `  ${line}`);
+    return [
+        `${selector} {\n${values.join('\n')}\n}`,
+        `@media (prefers-contrast: more) {\n  ${selector} {\n${answer.join('\n')}\n  }\n}`,
+    ].join('\n\n');
+}
+/**
+ * Matrix: a terminal's green on near-black in the dark scheme, and the same idea on white in
+ * the light one — RFC 0003 built it in both and kept both.
+ *
+ * The dark scheme is the reference's wherever the floors allow it: its green on `#050505`,
+ * a monospace face, an 8px corner. On white that green is 1.37:1, so the text goes to a dark
+ * green and the accent to a middle one, which keeps the derived black label legible on it.
+ * Success is the theme's own green, where the default palette's would sit beside it as a
+ * second one, and info a terminal's brighter cyan; both clear the 4.5:1 every outcome does.
+ *
+ * **The glow is the elevation step, so no name is added for it**: the card, the menu, the
+ * toast and the tip already read `--ui-elevation-100`, and a glow is a shadow at no offset. A
+ * shadow is not a colour, so `light-dark()` cannot carry two of them — but the part of a glow
+ * that follows the scheme is its colour, and a colour inside a shadow can be `light-dark()`.
+ * The strength the prototype settled on, 1.8, is folded into the alphas.
+ *
+ * Under `prefers-contrast: more` the green stays on the accent and the text goes to its pole.
+ */
+export const matrix = {
+    name: 'matrix',
+    values: {
+        '--ui-color-surface': '#ffffff',
+        '--ui-color-text': '#003b00',
+        '--ui-color-accent': '#008f11',
+        '--ui-color-focus': '#008f11',
+        '--ui-color-success': '#00850f',
+        '--ui-color-info': '#00778a',
+        '--ui-font': "'Courier New', Courier, ui-monospace, monospace",
+        '--ui-radius': '0.5rem',
+        // 18% and 30% of the text rather than the formula's 16% and 26%: a green text is
+        // far from neutral, and the formula's mix left the dark hover at 1.24:1 and the light
+        // pressed 1.24 past the hover, under the 1.25 both owe. Written as values, so they
+        // are data a target that is not CSS can read.
+        '--ui-color-hover': '#cfd9ce',
+        '--ui-color-pressed': '#b0c1ae',
+        '--ui-elevation-100': '0 0 0 1px light-dark(rgb(0 143 17 / 0.54), rgb(0 255 0 / 0.45)), 0 0 18px light-dark(rgb(0 143 17 / 0.45), rgb(0 255 0 / 0.54))',
+    },
+    dark: {
+        '--ui-color-surface': '#050505',
+        '--ui-color-text': '#00ff00',
+        '--ui-color-accent': '#00ff00',
+        '--ui-color-focus': '#ccffcc',
+        '--ui-color-success': '#00ff00',
+        '--ui-color-info': '#00e5ff',
+        '--ui-color-hover': '#11280f',
+        '--ui-color-pressed': '#174315',
+    },
+    more: {
+        '--ui-color-text': ['#000000', '#ffffff'],
+    },
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAiC,MAAM,aAAa,CAAC;AAkCzF,mEAAmE;AACnE,SAAS,OAAO,CAAC,IAAY,EAAE,KAAa,EAAE,IAAwB;IAClE,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,KAAK,KAAK,IAAI,GAAG,GAAG,CAAC;AACzF,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,eAAe,CAAC,KAAY;IACxC,MAAM,QAAQ,GAAG,mBAAmB,KAAK,CAAC,IAAI,IAAI,CAAC;IACnD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAC9D,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,IAAa,CAAC,CAAC,CACpD,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;IAClC,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAC/B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,YAAY,IAAI,CAAC,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,CACnF,CAAC;IACF,MAAM,MAAM,GAAG;QACX,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QACtF,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,IAAI,YAAY,CAAC;KACjD,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAE7B,OAAO;QACH,GAAG,QAAQ,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK;QACxC,wCAAwC,QAAQ,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;KACrF,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAU;IACzB,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE;QACJ,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,mBAAmB,EAAE,SAAS;QAC9B,kBAAkB,EAAE,SAAS;QAC7B,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,WAAW,EAAE,iDAAiD;QAC9D,aAAa,EAAE,QAAQ;QACvB,iFAAiF;QACjF,sFAAsF;QACtF,mFAAmF;QACnF,8CAA8C;QAC9C,kBAAkB,EAAE,SAAS;QAC7B,oBAAoB,EAAE,SAAS;QAC/B,oBAAoB,EAChB,iIAAiI;KACxI;IACD,IAAI,EAAE;QACF,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,mBAAmB,EAAE,SAAS;QAC9B,kBAAkB,EAAE,SAAS;QAC7B,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,oBAAoB,EAAE,SAAS;KAClC;IACD,IAAI,EAAE;QACF,iBAAiB,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;KAC5C;CACJ,CAAC"}

package/package.json

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