npm - @activecollab/components - Versions diffs - 2.0.379 → 2.0.380 - Mend

@activecollab/components 2.0.379 → 2.0.380

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/cjs/utils/themes.js +37 -7
package/dist/cjs/utils/themes.js.map +1 -1
package/dist/cjs/utils/themes.swatch.test.js +47 -0
package/dist/cjs/utils/themes.swatch.test.js.map +1 -0
package/dist/cjs/utils/themes.test.js +60 -0
package/dist/cjs/utils/themes.test.js.map +1 -0
package/dist/esm/utils/themes.d.ts +13 -0
package/dist/esm/utils/themes.d.ts.map +1 -1
package/dist/esm/utils/themes.js +30 -6
package/dist/esm/utils/themes.js.map +1 -1
package/dist/esm/utils/themes.swatch.test.d.ts +2 -0
package/dist/esm/utils/themes.swatch.test.d.ts.map +1 -0
package/dist/esm/utils/themes.swatch.test.js +39 -0
package/dist/esm/utils/themes.swatch.test.js.map +1 -0
package/dist/esm/utils/themes.test.d.ts +2 -0
package/dist/esm/utils/themes.test.d.ts.map +1 -0
package/dist/esm/utils/themes.test.js +58 -0
package/dist/esm/utils/themes.test.js.map +1 -0
package/dist/index.js +42 -6
package/dist/index.js.map +1 -1
package/dist/index.min.js +1 -1
package/dist/index.min.js.map +1 -1
package/package.json +1 -1

package/dist/cjs/utils/themes.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDarkTheme = exports.THEME_NAMES = exports.THEMES = exports.DARK_THEME_SELECTOR = exports.DARK_THEME_NAMES = exports.DARK_THEME_MATCH = void 0;
+exports.resolveTheme = exports.isDarkTheme = exports.THEME_NAMES = exports.THEME_MODE_SYSTEM = exports.THEME_MODE_SINGLE = exports.THEMES = exports.LIGHT_THEME_NAMES = exports.DEFAULT_THEME = exports.DEFAULT_DARK_THEME = exports.DARK_THEME_SELECTOR = exports.DARK_THEME_NAMES = exports.DARK_THEME_MATCH = void 0;
 // Single source of truth for theme identity. The theme name is the only class put on <html>;
 // styling that targets "any dark theme" uses DARK_THEME_SELECTOR, which is derived from this list
 // so a new theme never needs the selector updating by hand.
@@ -11,27 +11,33 @@ exports.isDarkTheme = exports.THEME_NAMES = exports.THEMES = exports.DARK_THEME_
 var THEMES = exports.THEMES = [{
   name: "indigo",
   title: "Indigo",
-  dark: false
+  dark: false,
+  swatch: ["#5d2bff", "#5d2bff", "#f4f5f7"]
 }, {
   name: "cupcake",
   title: "Cupcake",
-  dark: false
+  dark: false,
+  swatch: ["#29bcdd", "#fe6fa7", "#f4f5f7"]
 }, {
   name: "classic",
   title: "Classic",
-  dark: false
+  dark: false,
+  swatch: ["#4182f2", "#4182f2", "#f4f5f7"]
 }, {
   name: "neon",
   title: "Neon",
-  dark: true
+  dark: true,
+  swatch: ["#67ffc8", "#67ffc8", "#2c2e38"]
 }, {
   name: "dracula",
   title: "Dracula",
-  dark: true
+  dark: true,
+  swatch: ["#bd93f9", "#ff79c6", "#282a36"]
 }, {
   name: "one-dark",
   title: "One Dark",
-  dark: true
+  dark: true,
+  swatch: ["#61afef", "#c678dd", "#282c34"]
 }];
 var THEME_NAMES = exports.THEME_NAMES = THEMES.map(function (theme) {
   return theme.name;
@@ -41,9 +47,33 @@ var DARK_THEME_NAMES = exports.DARK_THEME_NAMES = THEMES.filter(function (theme)
 }).map(function (theme) {
   return theme.name;
 });
+var LIGHT_THEME_NAMES = exports.LIGHT_THEME_NAMES = THEMES.filter(function (theme) {
+  return !theme.dark;
+}).map(function (theme) {
+  return theme.name;
+});
+var DEFAULT_THEME = exports.DEFAULT_THEME = "indigo";
+var DEFAULT_DARK_THEME = exports.DEFAULT_DARK_THEME = "neon";
+var THEME_MODE_SINGLE = exports.THEME_MODE_SINGLE = "single";
+var THEME_MODE_SYSTEM = exports.THEME_MODE_SYSTEM = "system";
 var isDarkTheme = exports.isDarkTheme = function isDarkTheme(name) {
   return Boolean(name) && DARK_THEME_NAMES.includes(name);
 };
+var knownTheme = function knownTheme(name, fallback) {
+  return name && THEME_NAMES.includes(name) ? name : fallback;
+};
+// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.
+var resolveTheme = exports.resolveTheme = function resolveTheme(_ref, prefersDark) {
+  var mode = _ref.mode,
+    theme = _ref.theme,
+    themeLight = _ref.themeLight,
+    themeDark = _ref.themeDark;
+  if (mode !== THEME_MODE_SYSTEM) {
+    return knownTheme(theme, DEFAULT_THEME);
+  }
+  return prefersDark ? knownTheme(themeDark, DEFAULT_DARK_THEME) : knownTheme(themeLight, DEFAULT_THEME);
+};
 // :is() and not :where() — :where() is zero-specificity and would silently lose to the light
 // declarations it is meant to override.

package/dist/cjs/utils/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","names":["THEMES","exports","name","title","dark","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","isDarkTheme","Boolean","includes","DARK_THEME_MATCH","concat","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n { name: \"indigo\", title: \"Indigo\", dark: false },\n { name: \"cupcake\", title: \"Cupcake\", dark: false },\n { name: \"classic\", title: \"Classic\", dark: false },\n { name: \"neon\", title: \"Neon\", dark: true },\n { name: \"dracula\", title: \"Dracula\", dark: true },\n { name: \"one-dark\", title: \"One Dark\", dark: true },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n (theme) => theme.name\n);\n\nexport const isDarkTheme = (name?: string \| null): boolean =>\n Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `${DARK_THEME_MATCH}`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;;~~AAOO~~,IAAMA,MAAyB,GAAAC,OAAA,CAAAD,MAAA,GAAG,CACvC;~~EAAEE~~,IAAI,EAAE,QAAQ;~~EAAEC~~,KAAK,EAAE,QAAQ;~~EAAEC~~,IAAI,EAAE;~~AAAM~~,CAAC,~~EAChD~~;~~EAAEF~~,IAAI,EAAE,SAAS;~~EAAEC~~,KAAK,EAAE,SAAS;~~EAAEC~~,IAAI,EAAE;~~AAAM~~,CAAC,~~EAClD~~;~~EAAEF~~,IAAI,EAAE,SAAS;~~EAAEC~~,KAAK,EAAE,SAAS;~~EAAEC~~,IAAI,EAAE;~~AAAM~~,CAAC,~~EAClD~~;~~EAAEF~~,IAAI,EAAE,MAAM;~~EAAEC~~,KAAK,EAAE,MAAM;~~EAAEC~~,IAAI,EAAE;~~AAAK~~,CAAC,~~EAC3C~~;~~EAAEF~~,IAAI,EAAE,SAAS;~~EAAEC~~,KAAK,EAAE,SAAS;~~EAAEC~~,IAAI,EAAE;~~AAAK~~,CAAC,~~EACjD~~;~~EAAEF~~,IAAI,EAAE,UAAU;~~EAAEC~~,KAAK,EAAE,UAAU;~~EAAEC~~,IAAI,EAAE;~~AAAK~~,CAAC,~~CACpD~~;AAEM,IAAMC,WAAW,~~GAAAJ~~,OAAA,~~CAAAI~~,WAAA,~~GAAGL~~,MAAM,~~CAACM~~,GAAG,CAAC,UAACC,KAAK;EAAA,OAAKA,KAAK,~~CAACL~~,IAAI;AAAA,EAAC;AAErD,~~IAAMM~~,gBAAgB,~~GAAAP~~,OAAA,~~CAAAO~~,gBAAA,~~GAAGR~~,MAAM,~~CAACS~~,MAAM,CAAC,UAACF,KAAK;EAAA,OAAKA,KAAK,~~CAACH~~,IAAI;AAAA,EAAC,~~CAACE~~,GAAG,CACtE,UAACC,KAAK;EAAA,OAAKA,KAAK,~~CAACL~~,IAAI;AAAA,CACvB,CAAC;AAEM,~~IAAMQ~~,WAAW,~~GAAAT~~,OAAA,~~CAAAS~~,WAAA,GAAG,SAAdA,WAAWA,~~CAAIR~~,IAAoB;EAAA,~~OAC9CS~~,OAAO,~~CAACT~~,IAAI,CAAC,~~IAAIM~~,gBAAgB,~~CAACI~~,QAAQ,~~CAACV~~,IAAc,CAAC;AAAA;;AAE5D;AACA;;AAEA;AACO,~~IAAMW~~,gBAAgB,~~GAAAZ~~,OAAA,~~CAAAY~~,gBAAA,UAAAC,MAAA,~~CAAUN~~,gBAAgB,CAACF,GAAG,CACzD,~~UAACJ~~,IAAI;EAAA,~~WAAAY~~,MAAA,~~CAASZ~~,IAAI;AAAA,CACpB,CAAC,~~CAACa~~,IAAI,CAAC,IAAI,CAAC,MAAG;;AAEf;AACA;AACO,IAAMC,mBAAmB,~~GAAAf~~,OAAA,~~CAAAe~~,mBAAA,OAAAF,MAAA,CAAOD,gBAAgB,CAAE","ignoreList":[]}
1	+ {"version":3,"file":"themes.js","names":["THEMES","exports","name","title","dark","swatch","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","LIGHT_THEME_NAMES","DEFAULT_THEME","DEFAULT_DARK_THEME","THEME_MODE_SINGLE","THEME_MODE_SYSTEM","isDarkTheme","Boolean","includes","knownTheme","fallback","resolveTheme","_ref","prefersDark","mode","themeLight","themeDark","DARK_THEME_MATCH","concat","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n // [primary, secondary, page background] — accents lead so the swatch reads as the theme's colour.\n // Mirrors GlobalStyle; themes.swatch.test.ts fails if the two drift apart.\n swatch: [string, string, string];\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n {\n name: \"indigo\",\n title: \"Indigo\",\n dark: false,\n swatch: [\"#5d2bff\", \"#5d2bff\", \"#f4f5f7\"],\n },\n {\n name: \"cupcake\",\n title: \"Cupcake\",\n dark: false,\n swatch: [\"#29bcdd\", \"#fe6fa7\", \"#f4f5f7\"],\n },\n {\n name: \"classic\",\n title: \"Classic\",\n dark: false,\n swatch: [\"#4182f2\", \"#4182f2\", \"#f4f5f7\"],\n },\n {\n name: \"neon\",\n title: \"Neon\",\n dark: true,\n swatch: [\"#67ffc8\", \"#67ffc8\", \"#2c2e38\"],\n },\n {\n name: \"dracula\",\n title: \"Dracula\",\n dark: true,\n swatch: [\"#bd93f9\", \"#ff79c6\", \"#282a36\"],\n },\n {\n name: \"one-dark\",\n title: \"One Dark\",\n dark: true,\n swatch: [\"#61afef\", \"#c678dd\", \"#282c34\"],\n },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n (theme) => theme.name\n);\n\nexport const LIGHT_THEME_NAMES = THEMES.filter((theme) => !theme.dark).map(\n (theme) => theme.name\n);\n\nexport const DEFAULT_THEME = \"indigo\";\nexport const DEFAULT_DARK_THEME = \"neon\";\n\nexport const THEME_MODE_SINGLE = \"single\";\nexport const THEME_MODE_SYSTEM = \"system\";\n\nexport interface ThemeSelection {\n mode?: string \| null;\n theme?: string \| null;\n themeLight?: string \| null;\n themeDark?: string \| null;\n}\n\nexport const isDarkTheme = (name?: string \| null): boolean =>\n Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\nconst knownTheme = (\n name: string \| null \| undefined,\n fallback: string\n): string => (name && THEME_NAMES.includes(name) ? name : fallback);\n\n// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.\nexport const resolveTheme = (\n { mode, theme, themeLight, themeDark }: ThemeSelection,\n prefersDark: boolean\n): string => {\n if (mode !== THEME_MODE_SYSTEM) {\n return knownTheme(theme, DEFAULT_THEME);\n }\n\n return prefersDark\n ? knownTheme(themeDark, DEFAULT_DARK_THEME)\n : knownTheme(themeLight, DEFAULT_THEME);\n};\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `${DARK_THEME_MATCH}`;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/utils/themes.swatch.test.js ADDED Viewed

@@ -0,0 +1,47 @@
+"use strict";
+var _fs = require("fs");
+var _path = require("path");
+var _themes = require("./themes");
+var GLOBAL_STYLE = (0, _fs.readFileSync)((0, _path.join)(__dirname, "../components/GlobalStyle.ts"), "utf-8");
+var SWATCH_VARS = ["color-primary", "color-secondary", "body-bg-main"];
+var collectBlocks = function collectBlocks(selector) {
+  var re = new RegExp("".concat(selector, "\\s*\\{([^}]*)\\}"), "g");
+  var declarations = "";
+  var match;
+  while (match = re.exec(GLOBAL_STYLE)) declarations += "".concat(match[1], ";");
+  return declarations;
+};
+var readVar = function readVar(block, name) {
+  var _block$match;
+  return (_block$match = block.match(new RegExp("--".concat(name, "\\s*:\\s*([^;}]+)")))) === null || _block$match === void 0 ? void 0 : _block$match[1].trim();
+};
+var toHex = function toHex(value) {
+  var rgb = value.match(/rgb\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)\s*\)/);
+  if (!rgb) return value.toLowerCase();
+  return "#".concat(rgb.slice(1).map(function (channel) {
+    return Number(channel).toString(16).padStart(2, "0");
+  }).join(""));
+};
+// indigo has no class block of its own — it is the :root default every other theme overrides.
+var declarationsFor = function declarationsFor(name) {
+  return (name === "indigo" ? "" : collectBlocks("\\.".concat(name))) + collectBlocks(":root");
+};
+describe("theme swatches", function () {
+  it("should match the colours GlobalStyle defines for each theme", function () {
+    var fromStylesheet = _themes.THEMES.map(function (_ref) {
+      var name = _ref.name;
+      var block = declarationsFor(name);
+      return [name, SWATCH_VARS.map(function (cssVar) {
+        return toHex(readVar(block, cssVar));
+      })];
+    });
+    expect(fromStylesheet).toEqual(_themes.THEMES.map(function (_ref2) {
+      var name = _ref2.name,
+        swatch = _ref2.swatch;
+      return [name, swatch];
+    }));
+  });
+});
+//# sourceMappingURL=themes.swatch.test.js.map

package/dist/cjs/utils/themes.swatch.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"themes.swatch.test.js","names":["_fs","require","_path","_themes","GLOBAL_STYLE","readFileSync","join","__dirname","SWATCH_VARS","collectBlocks","selector","re","RegExp","concat","declarations","match","exec","readVar","block","name","_block$match","trim","toHex","value","rgb","toLowerCase","slice","map","channel","Number","toString","padStart","declarationsFor","describe","it","fromStylesheet","THEMES","_ref","cssVar","expect","toEqual","_ref2","swatch"],"sources":["../../../src/utils/themes.swatch.test.ts"],"sourcesContent":["import { readFileSync } from \"fs\";\nimport { join } from \"path\";\n\nimport { THEMES } from \"./themes\";\n\nconst GLOBAL_STYLE = readFileSync(\n join(__dirname, \"../components/GlobalStyle.ts\"),\n \"utf-8\"\n);\n\nconst SWATCH_VARS = [\"color-primary\", \"color-secondary\", \"body-bg-main\"];\n\nconst collectBlocks = (selector: string): string => {\n const re = new RegExp(`${selector}\\\\s*\\\\{([^}]*)\\\\}`, \"g\");\n let declarations = \"\";\n let match;\n while ((match = re.exec(GLOBAL_STYLE))) declarations += `${match[1]};`;\n return declarations;\n};\n\nconst readVar = (block: string, name: string): string | undefined =>\n block.match(new RegExp(`--${name}\\\\s*:\\\\s*([^;}]+)`))?.[1].trim();\n\nconst toHex = (value: string): string => {\n const rgb = value.match(/rgb\$\\s*(\\d+)[,\\s]+(\\d+)[,\\s]+(\\d+)\\s*\$/);\n if (!rgb) return value.toLowerCase();\n return `#${rgb\n .slice(1)\n .map((channel) => Number(channel).toString(16).padStart(2, \"0\"))\n .join(\"\")}`;\n};\n\n// indigo has no class block of its own — it is the :root default every other theme overrides.\nconst declarationsFor = (name: string): string =>\n (name === \"indigo\" ? \"\" : collectBlocks(`\\\\.${name}`)) +\n collectBlocks(\":root\");\n\ndescribe(\"theme swatches\", () => {\n it(\"should match the colours GlobalStyle defines for each theme\", () => {\n const fromStylesheet = THEMES.map(({ name }) => {\n const block = declarationsFor(name);\n return [\n name,\n SWATCH_VARS.map((cssVar) => toHex(readVar(block, cssVar) as string)),\n ];\n });\n\n expect(fromStylesheet).toEqual(\n THEMES.map(({ name, swatch }) => [name, swatch])\n );\n });\n});\n"],"mappings":";;AAAA,IAAAA,GAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAEA,IAAMG,YAAY,GAAG,IAAAC,gBAAY,EAC/B,IAAAC,UAAI,EAACC,SAAS,EAAE,8BAA8B,CAAC,EAC/C,OACF,CAAC;AAED,IAAMC,WAAW,GAAG,CAAC,eAAe,EAAE,iBAAiB,EAAE,cAAc,CAAC;AAExE,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,QAAgB,EAAa;EAClD,IAAMC,EAAE,GAAG,IAAIC,MAAM,IAAAC,MAAA,CAAIH,QAAQ,wBAAqB,GAAG,CAAC;EAC1D,IAAII,YAAY,GAAG,EAAE;EACrB,IAAIC,KAAK;EACT,OAAQA,KAAK,GAAGJ,EAAE,CAACK,IAAI,CAACZ,YAAY,CAAC,EAAGU,YAAY,OAAAD,MAAA,CAAOE,KAAK,CAAC,CAAC,CAAC,MAAG;EACtE,OAAOD,YAAY;AACrB,CAAC;AAED,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAIC,KAAa,EAAEC,IAAY;EAAA,IAAAC,YAAA;EAAA,QAAAA,YAAA,GAC1CF,KAAK,CAACH,KAAK,CAAC,IAAIH,MAAM,MAAAC,MAAA,CAAMM,IAAI,sBAAmB,CAAC,CAAC,cAAAC,YAAA,uBAArDA,YAAA,CAAwD,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;AAAA;AAEnE,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,KAAa,EAAa;EACvC,IAAMC,GAAG,GAAGD,KAAK,CAACR,KAAK,CAAC,0CAA0C,CAAC;EACnE,IAAI,CAACS,GAAG,EAAE,OAAOD,KAAK,CAACE,WAAW,CAAC,CAAC;EACpC,WAAAZ,MAAA,CAAWW,GAAG,CACXE,KAAK,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,UAACC,OAAO;IAAA,OAAKC,MAAM,CAACD,OAAO,CAAC,CAACE,QAAQ,CAAC,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAAA,EAAC,CAC/DzB,IAAI,CAAC,EAAE,CAAC;AACb,CAAC;;AAED;AACA,IAAM0B,eAAe,GAAG,SAAlBA,eAAeA,CAAIb,IAAY;EAAA,OACnC,CAACA,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAGV,aAAa,OAAAI,MAAA,CAAOM,IAAI,CAAE,CAAC,IACrDV,aAAa,CAAC,OAAO,CAAC;AAAA;AAExBwB,QAAQ,CAAC,gBAAgB,EAAE,YAAM;EAC/BC,EAAE,CAAC,6DAA6D,EAAE,YAAM;IACtE,IAAMC,cAAc,GAAGC,cAAM,CAACT,GAAG,CAAC,UAAAU,IAAA,EAAc;MAAA,IAAXlB,IAAI,GAAAkB,IAAA,CAAJlB,IAAI;MACvC,IAAMD,KAAK,GAAGc,eAAe,CAACb,IAAI,CAAC;MACnC,OAAO,CACLA,IAAI,EACJX,WAAW,CAACmB,GAAG,CAAC,UAACW,MAAM;QAAA,OAAKhB,KAAK,CAACL,OAAO,CAACC,KAAK,EAAEoB,MAAM,CAAW,CAAC;MAAA,EAAC,CACrE;IACH,CAAC,CAAC;IAEFC,MAAM,CAACJ,cAAc,CAAC,CAACK,OAAO,CAC5BJ,cAAM,CAACT,GAAG,CAAC,UAAAc,KAAA;MAAA,IAAGtB,IAAI,GAAAsB,KAAA,CAAJtB,IAAI;QAAEuB,MAAM,GAAAD,KAAA,CAANC,MAAM;MAAA,OAAO,CAACvB,IAAI,EAAEuB,MAAM,CAAC;IAAA,EACjD,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/utils/themes.test.js ADDED Viewed

@@ -0,0 +1,60 @@
+"use strict";
+var _themes = require("./themes");
+describe("resolveTheme", function () {
+  it("should split the theme list into light and dark without overlap", function () {
+    expect(_themes.LIGHT_THEME_NAMES).toEqual(["indigo", "cupcake", "classic"]);
+    expect(_themes.DARK_THEME_NAMES).toEqual(["neon", "dracula", "one-dark"]);
+  });
+  it("should ignore the system appearance in single mode", function () {
+    var selection = {
+      mode: _themes.THEME_MODE_SINGLE,
+      theme: "dracula",
+      themeLight: "cupcake",
+      themeDark: "one-dark"
+    };
+    expect((0, _themes.resolveTheme)(selection, false)).toBe("dracula");
+    expect((0, _themes.resolveTheme)(selection, true)).toBe("dracula");
+  });
+  it("should follow the system appearance in system mode", function () {
+    var selection = {
+      mode: _themes.THEME_MODE_SYSTEM,
+      theme: "dracula",
+      themeLight: "cupcake",
+      themeDark: "one-dark"
+    };
+    expect((0, _themes.resolveTheme)(selection, false)).toBe("cupcake");
+    expect((0, _themes.resolveTheme)(selection, true)).toBe("one-dark");
+  });
+  it("should fall back to the defaults when a slot is missing or unknown", function () {
+    expect((0, _themes.resolveTheme)({
+      mode: _themes.THEME_MODE_SYSTEM
+    }, false)).toBe(_themes.DEFAULT_THEME);
+    expect((0, _themes.resolveTheme)({
+      mode: _themes.THEME_MODE_SYSTEM
+    }, true)).toBe(_themes.DEFAULT_DARK_THEME);
+    expect((0, _themes.resolveTheme)({
+      mode: _themes.THEME_MODE_SYSTEM,
+      themeLight: "solarized",
+      themeDark: "solarized"
+    }, false)).toBe(_themes.DEFAULT_THEME);
+    expect((0, _themes.resolveTheme)({
+      mode: _themes.THEME_MODE_SYSTEM,
+      themeLight: "solarized",
+      themeDark: "solarized"
+    }, true)).toBe(_themes.DEFAULT_DARK_THEME);
+    expect((0, _themes.resolveTheme)({
+      theme: "solarized"
+    }, false)).toBe(_themes.DEFAULT_THEME);
+  });
+  it("should treat an absent or unrecognised mode as single", function () {
+    expect((0, _themes.resolveTheme)({
+      theme: "neon"
+    }, false)).toBe("neon");
+    expect((0, _themes.resolveTheme)({
+      mode: "auto",
+      theme: "neon"
+    }, true)).toBe("neon");
+  });
+});
+//# sourceMappingURL=themes.test.js.map

package/dist/cjs/utils/themes.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"themes.test.js","names":["_themes","require","describe","it","expect","LIGHT_THEME_NAMES","toEqual","DARK_THEME_NAMES","selection","mode","THEME_MODE_SINGLE","theme","themeLight","themeDark","resolveTheme","toBe","THEME_MODE_SYSTEM","DEFAULT_THEME","DEFAULT_DARK_THEME"],"sources":["../../../src/utils/themes.test.ts"],"sourcesContent":["import {\n DEFAULT_DARK_THEME,\n DEFAULT_THEME,\n DARK_THEME_NAMES,\n LIGHT_THEME_NAMES,\n THEME_MODE_SINGLE,\n THEME_MODE_SYSTEM,\n resolveTheme,\n} from \"./themes\";\n\ndescribe(\"resolveTheme\", () => {\n it(\"should split the theme list into light and dark without overlap\", () => {\n expect(LIGHT_THEME_NAMES).toEqual([\"indigo\", \"cupcake\", \"classic\"]);\n expect(DARK_THEME_NAMES).toEqual([\"neon\", \"dracula\", \"one-dark\"]);\n });\n\n it(\"should ignore the system appearance in single mode\", () => {\n const selection = {\n mode: THEME_MODE_SINGLE,\n theme: \"dracula\",\n themeLight: \"cupcake\",\n themeDark: \"one-dark\",\n };\n\n expect(resolveTheme(selection, false)).toBe(\"dracula\");\n expect(resolveTheme(selection, true)).toBe(\"dracula\");\n });\n\n it(\"should follow the system appearance in system mode\", () => {\n const selection = {\n mode: THEME_MODE_SYSTEM,\n theme: \"dracula\",\n themeLight: \"cupcake\",\n themeDark: \"one-dark\",\n };\n\n expect(resolveTheme(selection, false)).toBe(\"cupcake\");\n expect(resolveTheme(selection, true)).toBe(\"one-dark\");\n });\n\n it(\"should fall back to the defaults when a slot is missing or unknown\", () => {\n expect(resolveTheme({ mode: THEME_MODE_SYSTEM }, false)).toBe(\n DEFAULT_THEME\n );\n expect(resolveTheme({ mode: THEME_MODE_SYSTEM }, true)).toBe(\n DEFAULT_DARK_THEME\n );\n expect(\n resolveTheme(\n {\n mode: THEME_MODE_SYSTEM,\n themeLight: \"solarized\",\n themeDark: \"solarized\",\n },\n false\n )\n ).toBe(DEFAULT_THEME);\n expect(\n resolveTheme(\n {\n mode: THEME_MODE_SYSTEM,\n themeLight: \"solarized\",\n themeDark: \"solarized\",\n },\n true\n )\n ).toBe(DEFAULT_DARK_THEME);\n expect(resolveTheme({ theme: \"solarized\" }, false)).toBe(DEFAULT_THEME);\n });\n\n it(\"should treat an absent or unrecognised mode as single\", () => {\n expect(resolveTheme({ theme: \"neon\" }, false)).toBe(\"neon\");\n expect(resolveTheme({ mode: \"auto\", theme: \"neon\" }, true)).toBe(\"neon\");\n });\n});\n"],"mappings":";;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAUAC,QAAQ,CAAC,cAAc,EAAE,YAAM;EAC7BC,EAAE,CAAC,iEAAiE,EAAE,YAAM;IAC1EC,MAAM,CAACC,yBAAiB,CAAC,CAACC,OAAO,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IACnEF,MAAM,CAACG,wBAAgB,CAAC,CAACD,OAAO,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;EACnE,CAAC,CAAC;EAEFH,EAAE,CAAC,oDAAoD,EAAE,YAAM;IAC7D,IAAMK,SAAS,GAAG;MAChBC,IAAI,EAAEC,yBAAiB;MACvBC,KAAK,EAAE,SAAS;MAChBC,UAAU,EAAE,SAAS;MACrBC,SAAS,EAAE;IACb,CAAC;IAEDT,MAAM,CAAC,IAAAU,oBAAY,EAACN,SAAS,EAAE,KAAK,CAAC,CAAC,CAACO,IAAI,CAAC,SAAS,CAAC;IACtDX,MAAM,CAAC,IAAAU,oBAAY,EAACN,SAAS,EAAE,IAAI,CAAC,CAAC,CAACO,IAAI,CAAC,SAAS,CAAC;EACvD,CAAC,CAAC;EAEFZ,EAAE,CAAC,oDAAoD,EAAE,YAAM;IAC7D,IAAMK,SAAS,GAAG;MAChBC,IAAI,EAAEO,yBAAiB;MACvBL,KAAK,EAAE,SAAS;MAChBC,UAAU,EAAE,SAAS;MACrBC,SAAS,EAAE;IACb,CAAC;IAEDT,MAAM,CAAC,IAAAU,oBAAY,EAACN,SAAS,EAAE,KAAK,CAAC,CAAC,CAACO,IAAI,CAAC,SAAS,CAAC;IACtDX,MAAM,CAAC,IAAAU,oBAAY,EAACN,SAAS,EAAE,IAAI,CAAC,CAAC,CAACO,IAAI,CAAC,UAAU,CAAC;EACxD,CAAC,CAAC;EAEFZ,EAAE,CAAC,oEAAoE,EAAE,YAAM;IAC7EC,MAAM,CAAC,IAAAU,oBAAY,EAAC;MAAEL,IAAI,EAAEO;IAAkB,CAAC,EAAE,KAAK,CAAC,CAAC,CAACD,IAAI,CAC3DE,qBACF,CAAC;IACDb,MAAM,CAAC,IAAAU,oBAAY,EAAC;MAAEL,IAAI,EAAEO;IAAkB,CAAC,EAAE,IAAI,CAAC,CAAC,CAACD,IAAI,CAC1DG,0BACF,CAAC;IACDd,MAAM,CACJ,IAAAU,oBAAY,EACV;MACEL,IAAI,EAAEO,yBAAiB;MACvBJ,UAAU,EAAE,WAAW;MACvBC,SAAS,EAAE;IACb,CAAC,EACD,KACF,CACF,CAAC,CAACE,IAAI,CAACE,qBAAa,CAAC;IACrBb,MAAM,CACJ,IAAAU,oBAAY,EACV;MACEL,IAAI,EAAEO,yBAAiB;MACvBJ,UAAU,EAAE,WAAW;MACvBC,SAAS,EAAE;IACb,CAAC,EACD,IACF,CACF,CAAC,CAACE,IAAI,CAACG,0BAAkB,CAAC;IAC1Bd,MAAM,CAAC,IAAAU,oBAAY,EAAC;MAAEH,KAAK,EAAE;IAAY,CAAC,EAAE,KAAK,CAAC,CAAC,CAACI,IAAI,CAACE,qBAAa,CAAC;EACzE,CAAC,CAAC;EAEFd,EAAE,CAAC,uDAAuD,EAAE,YAAM;IAChEC,MAAM,CAAC,IAAAU,oBAAY,EAAC;MAAEH,KAAK,EAAE;IAAO,CAAC,EAAE,KAAK,CAAC,CAAC,CAACI,IAAI,CAAC,MAAM,CAAC;IAC3DX,MAAM,CAAC,IAAAU,oBAAY,EAAC;MAAEL,IAAI,EAAE,MAAM;MAAEE,KAAK,EAAE;IAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAACI,IAAI,CAAC,MAAM,CAAC;EAC1E,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/dist/esm/utils/themes.d.ts CHANGED Viewed

@@ -2,11 +2,24 @@ export interface ThemeDescriptor {
     name: string;
     title: string;
     dark: boolean;
+    swatch: [string, string, string];
 }
 export declare const THEMES: ThemeDescriptor[];
 export declare const THEME_NAMES: string[];
 export declare const DARK_THEME_NAMES: string[];
+export declare const LIGHT_THEME_NAMES: string[];
+export declare const DEFAULT_THEME = "indigo";
+export declare const DEFAULT_DARK_THEME = "neon";
+export declare const THEME_MODE_SINGLE = "single";
+export declare const THEME_MODE_SYSTEM = "system";
+export interface ThemeSelection {
+    mode?: string | null;
+    theme?: string | null;
+    themeLight?: string | null;
+    themeDark?: string | null;
+}
 export declare const isDarkTheme: (name?: string | null) => boolean;
+export declare const resolveTheme: ({ mode, theme, themeLight, themeDark }: ThemeSelection, prefersDark: boolean) => string;
 export declare const DARK_THEME_MATCH: string;
 export declare const DARK_THEME_SELECTOR: string;
 //# sourceMappingURL=themes.d.ts.map

package/dist/esm/utils/themes.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../src/utils/themes.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;~~CACf~~;AAED,eAAO,MAAM,MAAM,EAAE,eAAe,~~EAOnC~~,CAAC;AAEF,eAAO,MAAM,WAAW,UAAoC,CAAC;AAE7D,eAAO,MAAM,gBAAgB,UAE5B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,GAAG,IAAI,KAAG,OACS,CAAC;~~AAM7D~~,eAAO,MAAM,gBAAgB,QAEd,CAAC;AAIhB,eAAO,MAAM,mBAAmB,QAAyB,CAAC"}
1	+ {"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../src/utils/themes.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IAGd,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,MAAM,EAAE,eAAe,EAqCnC,CAAC;AAEF,eAAO,MAAM,WAAW,UAAoC,CAAC;AAE7D,eAAO,MAAM,gBAAgB,UAE5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,WAAW,CAAC;AACtC,eAAO,MAAM,kBAAkB,SAAS,CAAC;AAEzC,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAC1C,eAAO,MAAM,iBAAiB,WAAW,CAAC;AAE1C,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,GAAG,IAAI,KAAG,OACS,CAAC;AAQ7D,eAAO,MAAM,YAAY,GACvB,wCAAwC,cAAc,EACtD,aAAa,OAAO,KACnB,MAQF,CAAC;AAMF,eAAO,MAAM,gBAAgB,QAEd,CAAC;AAIhB,eAAO,MAAM,mBAAmB,QAAyB,CAAC"}

package/dist/esm/utils/themes.js CHANGED Viewed

@@ -5,31 +5,55 @@
 export const THEMES = [{
   name: "indigo",
   title: "Indigo",
-  dark: false
+  dark: false,
+  swatch: ["#5d2bff", "#5d2bff", "#f4f5f7"]
 }, {
   name: "cupcake",
   title: "Cupcake",
-  dark: false
+  dark: false,
+  swatch: ["#29bcdd", "#fe6fa7", "#f4f5f7"]
 }, {
   name: "classic",
   title: "Classic",
-  dark: false
+  dark: false,
+  swatch: ["#4182f2", "#4182f2", "#f4f5f7"]
 }, {
   name: "neon",
   title: "Neon",
-  dark: true
+  dark: true,
+  swatch: ["#67ffc8", "#67ffc8", "#2c2e38"]
 }, {
   name: "dracula",
   title: "Dracula",
-  dark: true
+  dark: true,
+  swatch: ["#bd93f9", "#ff79c6", "#282a36"]
 }, {
   name: "one-dark",
   title: "One Dark",
-  dark: true
+  dark: true,
+  swatch: ["#61afef", "#c678dd", "#282c34"]
 }];
 export const THEME_NAMES = THEMES.map(theme => theme.name);
 export const DARK_THEME_NAMES = THEMES.filter(theme => theme.dark).map(theme => theme.name);
+export const LIGHT_THEME_NAMES = THEMES.filter(theme => !theme.dark).map(theme => theme.name);
+export const DEFAULT_THEME = "indigo";
+export const DEFAULT_DARK_THEME = "neon";
+export const THEME_MODE_SINGLE = "single";
+export const THEME_MODE_SYSTEM = "system";
 export const isDarkTheme = name => Boolean(name) && DARK_THEME_NAMES.includes(name);
+const knownTheme = (name, fallback) => name && THEME_NAMES.includes(name) ? name : fallback;
+// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.
+export const resolveTheme = (_ref, prefersDark) => {
+  let mode = _ref.mode,
+    theme = _ref.theme,
+    themeLight = _ref.themeLight,
+    themeDark = _ref.themeDark;
+  if (mode !== THEME_MODE_SYSTEM) {
+    return knownTheme(theme, DEFAULT_THEME);
+  }
+  return prefersDark ? knownTheme(themeDark, DEFAULT_DARK_THEME) : knownTheme(themeLight, DEFAULT_THEME);
+};
 // :is() and not :where() — :where() is zero-specificity and would silently lose to the light
 // declarations it is meant to override.

package/dist/esm/utils/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","names":["THEMES","name","title","dark","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","isDarkTheme","Boolean","includes","DARK_THEME_MATCH","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n { name: \"indigo\", title: \"Indigo\", dark: false },\n { name: \"cupcake\", title: \"Cupcake\", dark: false },\n { name: \"classic\", title: \"Classic\", dark: false },\n { name: \"neon\", title: \"Neon\", dark: true },\n { name: \"dracula\", title: \"Dracula\", dark: true },\n { name: \"one-dark\", title: \"One Dark\", dark: true },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n (theme) => theme.name\n);\n\nexport const isDarkTheme = (name?: string \| null): boolean =>\n Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `${DARK_THEME_MATCH}`;\n"],"mappings":"AAAA;AACA;AACA;;~~AAOA~~,OAAO,MAAMA,MAAyB,GAAG,CACvC;~~EAAEC~~,IAAI,EAAE,QAAQ;~~EAAEC~~,KAAK,EAAE,QAAQ;~~EAAEC~~,IAAI,EAAE;~~AAAM~~,CAAC,~~EAChD~~;~~EAAEF~~,IAAI,EAAE,SAAS;~~EAAEC~~,KAAK,EAAE,SAAS;~~EAAEC~~,IAAI,EAAE;~~AAAM~~,CAAC,~~EAClD~~;~~EAAEF~~,IAAI,EAAE,SAAS;~~EAAEC~~,KAAK,EAAE,SAAS;~~EAAEC~~,IAAI,EAAE;~~AAAM~~,CAAC,~~EAClD~~;~~EAAEF~~,IAAI,EAAE,MAAM;~~EAAEC~~,KAAK,EAAE,MAAM;~~EAAEC~~,IAAI,EAAE;~~AAAK~~,CAAC,~~EAC3C~~;~~EAAEF~~,IAAI,EAAE,SAAS;~~EAAEC~~,KAAK,EAAE,SAAS;~~EAAEC~~,IAAI,EAAE;~~AAAK~~,CAAC,~~EACjD~~;~~EAAEF~~,IAAI,EAAE,UAAU;~~EAAEC~~,KAAK,EAAE,UAAU;~~EAAEC~~,IAAI,EAAE;~~AAAK~~,CAAC,~~CACpD~~;AAED,OAAO,MAAMC,WAAW,~~GAAGJ~~,MAAM,~~CAACK~~,GAAG,CAAEC,KAAK,IAAKA,KAAK,~~CAACL~~,IAAI,CAAC;AAE5D,OAAO,~~MAAMM~~,gBAAgB,~~GAAGP~~,MAAM,~~CAACQ~~,MAAM,CAAEF,KAAK,IAAKA,KAAK,~~CAACH~~,IAAI,CAAC,~~CAACE~~,GAAG,CACrEC,KAAK,IAAKA,KAAK,~~CAACL~~,IACnB,CAAC;AAED,OAAO,~~MAAMQ~~,WAAW,~~GAAIR~~,IAAoB,~~IAC9CS~~,OAAO,~~CAACT~~,IAAI,CAAC,~~IAAIM~~,gBAAgB,~~CAACI~~,QAAQ,~~CAACV~~,IAAc,CAAC;;~~AAE5D~~;AACA;;AAEA;AACA,OAAO,~~MAAMW~~,gBAAgB,~~YAAUL~~,gBAAgB,CAACF,GAAG,~~CACxDJ~~,IAAI,UAASA,IAChB,CAAC,~~CAACY~~,IAAI,CAAC,IAAI,CAAC,MAAG;;AAEf;AACA;AACA,OAAO,MAAMC,mBAAmB,SAAOF,gBAAkB","ignoreList":[]}
1	+ {"version":3,"file":"themes.js","names":["THEMES","name","title","dark","swatch","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","LIGHT_THEME_NAMES","DEFAULT_THEME","DEFAULT_DARK_THEME","THEME_MODE_SINGLE","THEME_MODE_SYSTEM","isDarkTheme","Boolean","includes","knownTheme","fallback","resolveTheme","_ref","prefersDark","mode","themeLight","themeDark","DARK_THEME_MATCH","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n // [primary, secondary, page background] — accents lead so the swatch reads as the theme's colour.\n // Mirrors GlobalStyle; themes.swatch.test.ts fails if the two drift apart.\n swatch: [string, string, string];\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n {\n name: \"indigo\",\n title: \"Indigo\",\n dark: false,\n swatch: [\"#5d2bff\", \"#5d2bff\", \"#f4f5f7\"],\n },\n {\n name: \"cupcake\",\n title: \"Cupcake\",\n dark: false,\n swatch: [\"#29bcdd\", \"#fe6fa7\", \"#f4f5f7\"],\n },\n {\n name: \"classic\",\n title: \"Classic\",\n dark: false,\n swatch: [\"#4182f2\", \"#4182f2\", \"#f4f5f7\"],\n },\n {\n name: \"neon\",\n title: \"Neon\",\n dark: true,\n swatch: [\"#67ffc8\", \"#67ffc8\", \"#2c2e38\"],\n },\n {\n name: \"dracula\",\n title: \"Dracula\",\n dark: true,\n swatch: [\"#bd93f9\", \"#ff79c6\", \"#282a36\"],\n },\n {\n name: \"one-dark\",\n title: \"One Dark\",\n dark: true,\n swatch: [\"#61afef\", \"#c678dd\", \"#282c34\"],\n },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n (theme) => theme.name\n);\n\nexport const LIGHT_THEME_NAMES = THEMES.filter((theme) => !theme.dark).map(\n (theme) => theme.name\n);\n\nexport const DEFAULT_THEME = \"indigo\";\nexport const DEFAULT_DARK_THEME = \"neon\";\n\nexport const THEME_MODE_SINGLE = \"single\";\nexport const THEME_MODE_SYSTEM = \"system\";\n\nexport interface ThemeSelection {\n mode?: string \| null;\n theme?: string \| null;\n themeLight?: string \| null;\n themeDark?: string \| null;\n}\n\nexport const isDarkTheme = (name?: string \| null): boolean =>\n Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\nconst knownTheme = (\n name: string \| null \| undefined,\n fallback: string\n): string => (name && THEME_NAMES.includes(name) ? name : fallback);\n\n// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.\nexport const resolveTheme = (\n { mode, theme, themeLight, themeDark }: ThemeSelection,\n prefersDark: boolean\n): string => {\n if (mode !== THEME_MODE_SYSTEM) {\n return knownTheme(theme, DEFAULT_THEME);\n }\n\n return prefersDark\n ? knownTheme(themeDark, DEFAULT_DARK_THEME)\n : knownTheme(themeLight, DEFAULT_THEME);\n};\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `${DARK_THEME_MATCH}`;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/utils/themes.swatch.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=themes.swatch.test.d.ts.map

package/dist/esm/utils/themes.swatch.test.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"themes.swatch.test.d.ts","sourceRoot":"","sources":["../../../src/utils/themes.swatch.test.ts"],"names":[],"mappings":""}

package/dist/esm/utils/themes.swatch.test.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { readFileSync } from "fs";
+import { join } from "path";
+import { THEMES } from "./themes";
+const GLOBAL_STYLE = readFileSync(join(__dirname, "../components/GlobalStyle.ts"), "utf-8");
+const SWATCH_VARS = ["color-primary", "color-secondary", "body-bg-main"];
+const collectBlocks = selector => {
+  const re = new RegExp(selector + "\\s*\\{([^}]*)\\}", "g");
+  let declarations = "";
+  let match;
+  while (match = re.exec(GLOBAL_STYLE)) declarations += match[1] + ";";
+  return declarations;
+};
+const readVar = (block, name) => {
+  var _block$match;
+  return (_block$match = block.match(new RegExp("--" + name + "\\s*:\\s*([^;}]+)"))) == null ? void 0 : _block$match[1].trim();
+};
+const toHex = value => {
+  const rgb = value.match(/rgb\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)\s*\)/);
+  if (!rgb) return value.toLowerCase();
+  return "#" + rgb.slice(1).map(channel => Number(channel).toString(16).padStart(2, "0")).join("");
+};
+// indigo has no class block of its own — it is the :root default every other theme overrides.
+const declarationsFor = name => (name === "indigo" ? "" : collectBlocks("\\." + name)) + collectBlocks(":root");
+describe("theme swatches", () => {
+  it("should match the colours GlobalStyle defines for each theme", () => {
+    const fromStylesheet = THEMES.map(_ref => {
+      let name = _ref.name;
+      const block = declarationsFor(name);
+      return [name, SWATCH_VARS.map(cssVar => toHex(readVar(block, cssVar)))];
+    });
+    expect(fromStylesheet).toEqual(THEMES.map(_ref2 => {
+      let name = _ref2.name,
+        swatch = _ref2.swatch;
+      return [name, swatch];
+    }));
+  });
+});
+//# sourceMappingURL=themes.swatch.test.js.map

package/dist/esm/utils/themes.swatch.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"themes.swatch.test.js","names":["readFileSync","join","THEMES","GLOBAL_STYLE","__dirname","SWATCH_VARS","collectBlocks","selector","re","RegExp","declarations","match","exec","readVar","block","name","_block$match","trim","toHex","value","rgb","toLowerCase","slice","map","channel","Number","toString","padStart","declarationsFor","describe","it","fromStylesheet","_ref","cssVar","expect","toEqual","_ref2","swatch"],"sources":["../../../src/utils/themes.swatch.test.ts"],"sourcesContent":["import { readFileSync } from \"fs\";\nimport { join } from \"path\";\n\nimport { THEMES } from \"./themes\";\n\nconst GLOBAL_STYLE = readFileSync(\n join(__dirname, \"../components/GlobalStyle.ts\"),\n \"utf-8\"\n);\n\nconst SWATCH_VARS = [\"color-primary\", \"color-secondary\", \"body-bg-main\"];\n\nconst collectBlocks = (selector: string): string => {\n const re = new RegExp(`${selector}\\\\s*\\\\{([^}]*)\\\\}`, \"g\");\n let declarations = \"\";\n let match;\n while ((match = re.exec(GLOBAL_STYLE))) declarations += `${match[1]};`;\n return declarations;\n};\n\nconst readVar = (block: string, name: string): string | undefined =>\n block.match(new RegExp(`--${name}\\\\s*:\\\\s*([^;}]+)`))?.[1].trim();\n\nconst toHex = (value: string): string => {\n const rgb = value.match(/rgb\$\\s*(\\d+)[,\\s]+(\\d+)[,\\s]+(\\d+)\\s*\$/);\n if (!rgb) return value.toLowerCase();\n return `#${rgb\n .slice(1)\n .map((channel) => Number(channel).toString(16).padStart(2, \"0\"))\n .join(\"\")}`;\n};\n\n// indigo has no class block of its own — it is the :root default every other theme overrides.\nconst declarationsFor = (name: string): string =>\n (name === \"indigo\" ? \"\" : collectBlocks(`\\\\.${name}`)) +\n collectBlocks(\":root\");\n\ndescribe(\"theme swatches\", () => {\n it(\"should match the colours GlobalStyle defines for each theme\", () => {\n const fromStylesheet = THEMES.map(({ name }) => {\n const block = declarationsFor(name);\n return [\n name,\n SWATCH_VARS.map((cssVar) => toHex(readVar(block, cssVar) as string)),\n ];\n });\n\n expect(fromStylesheet).toEqual(\n THEMES.map(({ name, swatch }) => [name, swatch])\n );\n });\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,IAAI;AACjC,SAASC,IAAI,QAAQ,MAAM;AAE3B,SAASC,MAAM,QAAQ,UAAU;AAEjC,MAAMC,YAAY,GAAGH,YAAY,CAC/BC,IAAI,CAACG,SAAS,EAAE,8BAA8B,CAAC,EAC/C,OACF,CAAC;AAED,MAAMC,WAAW,GAAG,CAAC,eAAe,EAAE,iBAAiB,EAAE,cAAc,CAAC;AAExE,MAAMC,aAAa,GAAIC,QAAgB,IAAa;EAClD,MAAMC,EAAE,GAAG,IAAIC,MAAM,CAAIF,QAAQ,wBAAqB,GAAG,CAAC;EAC1D,IAAIG,YAAY,GAAG,EAAE;EACrB,IAAIC,KAAK;EACT,OAAQA,KAAK,GAAGH,EAAE,CAACI,IAAI,CAACT,YAAY,CAAC,EAAGO,YAAY,IAAOC,KAAK,CAAC,CAAC,CAAC,MAAG;EACtE,OAAOD,YAAY;AACrB,CAAC;AAED,MAAMG,OAAO,GAAGA,CAACC,KAAa,EAAEC,IAAY;EAAA,IAAAC,YAAA;EAAA,QAAAA,YAAA,GAC1CF,KAAK,CAACH,KAAK,CAAC,IAAIF,MAAM,QAAMM,IAAI,sBAAmB,CAAC,CAAC,qBAArDC,YAAA,CAAwD,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;AAAA;AAEnE,MAAMC,KAAK,GAAIC,KAAa,IAAa;EACvC,MAAMC,GAAG,GAAGD,KAAK,CAACR,KAAK,CAAC,0CAA0C,CAAC;EACnE,IAAI,CAACS,GAAG,EAAE,OAAOD,KAAK,CAACE,WAAW,CAAC,CAAC;EACpC,aAAWD,GAAG,CACXE,KAAK,CAAC,CAAC,CAAC,CACRC,GAAG,CAAEC,OAAO,IAAKC,MAAM,CAACD,OAAO,CAAC,CAACE,QAAQ,CAAC,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAC/D1B,IAAI,CAAC,EAAE,CAAC;AACb,CAAC;;AAED;AACA,MAAM2B,eAAe,GAAIb,IAAY,IACnC,CAACA,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAGT,aAAa,SAAOS,IAAM,CAAC,IACrDT,aAAa,CAAC,OAAO,CAAC;AAExBuB,QAAQ,CAAC,gBAAgB,EAAE,MAAM;EAC/BC,EAAE,CAAC,6DAA6D,EAAE,MAAM;IACtE,MAAMC,cAAc,GAAG7B,MAAM,CAACqB,GAAG,CAACS,IAAA,IAAc;MAAA,IAAXjB,IAAI,GAAAiB,IAAA,CAAJjB,IAAI;MACvC,MAAMD,KAAK,GAAGc,eAAe,CAACb,IAAI,CAAC;MACnC,OAAO,CACLA,IAAI,EACJV,WAAW,CAACkB,GAAG,CAAEU,MAAM,IAAKf,KAAK,CAACL,OAAO,CAACC,KAAK,EAAEmB,MAAM,CAAW,CAAC,CAAC,CACrE;IACH,CAAC,CAAC;IAEFC,MAAM,CAACH,cAAc,CAAC,CAACI,OAAO,CAC5BjC,MAAM,CAACqB,GAAG,CAACa,KAAA;MAAA,IAAGrB,IAAI,GAAAqB,KAAA,CAAJrB,IAAI;QAAEsB,MAAM,GAAAD,KAAA,CAANC,MAAM;MAAA,OAAO,CAACtB,IAAI,EAAEsB,MAAM,CAAC;IAAA,EACjD,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/dist/esm/utils/themes.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=themes.test.d.ts.map

package/dist/esm/utils/themes.test.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"themes.test.d.ts","sourceRoot":"","sources":["../../../src/utils/themes.test.ts"],"names":[],"mappings":""}

package/dist/esm/utils/themes.test.js ADDED Viewed

@@ -0,0 +1,58 @@
+import { DEFAULT_DARK_THEME, DEFAULT_THEME, DARK_THEME_NAMES, LIGHT_THEME_NAMES, THEME_MODE_SINGLE, THEME_MODE_SYSTEM, resolveTheme } from "./themes";
+describe("resolveTheme", () => {
+  it("should split the theme list into light and dark without overlap", () => {
+    expect(LIGHT_THEME_NAMES).toEqual(["indigo", "cupcake", "classic"]);
+    expect(DARK_THEME_NAMES).toEqual(["neon", "dracula", "one-dark"]);
+  });
+  it("should ignore the system appearance in single mode", () => {
+    const selection = {
+      mode: THEME_MODE_SINGLE,
+      theme: "dracula",
+      themeLight: "cupcake",
+      themeDark: "one-dark"
+    };
+    expect(resolveTheme(selection, false)).toBe("dracula");
+    expect(resolveTheme(selection, true)).toBe("dracula");
+  });
+  it("should follow the system appearance in system mode", () => {
+    const selection = {
+      mode: THEME_MODE_SYSTEM,
+      theme: "dracula",
+      themeLight: "cupcake",
+      themeDark: "one-dark"
+    };
+    expect(resolveTheme(selection, false)).toBe("cupcake");
+    expect(resolveTheme(selection, true)).toBe("one-dark");
+  });
+  it("should fall back to the defaults when a slot is missing or unknown", () => {
+    expect(resolveTheme({
+      mode: THEME_MODE_SYSTEM
+    }, false)).toBe(DEFAULT_THEME);
+    expect(resolveTheme({
+      mode: THEME_MODE_SYSTEM
+    }, true)).toBe(DEFAULT_DARK_THEME);
+    expect(resolveTheme({
+      mode: THEME_MODE_SYSTEM,
+      themeLight: "solarized",
+      themeDark: "solarized"
+    }, false)).toBe(DEFAULT_THEME);
+    expect(resolveTheme({
+      mode: THEME_MODE_SYSTEM,
+      themeLight: "solarized",
+      themeDark: "solarized"
+    }, true)).toBe(DEFAULT_DARK_THEME);
+    expect(resolveTheme({
+      theme: "solarized"
+    }, false)).toBe(DEFAULT_THEME);
+  });
+  it("should treat an absent or unrecognised mode as single", () => {
+    expect(resolveTheme({
+      theme: "neon"
+    }, false)).toBe("neon");
+    expect(resolveTheme({
+      mode: "auto",
+      theme: "neon"
+    }, true)).toBe("neon");
+  });
+});
+//# sourceMappingURL=themes.test.js.map

package/dist/esm/utils/themes.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"themes.test.js","names":["DEFAULT_DARK_THEME","DEFAULT_THEME","DARK_THEME_NAMES","LIGHT_THEME_NAMES","THEME_MODE_SINGLE","THEME_MODE_SYSTEM","resolveTheme","describe","it","expect","toEqual","selection","mode","theme","themeLight","themeDark","toBe"],"sources":["../../../src/utils/themes.test.ts"],"sourcesContent":["import {\n DEFAULT_DARK_THEME,\n DEFAULT_THEME,\n DARK_THEME_NAMES,\n LIGHT_THEME_NAMES,\n THEME_MODE_SINGLE,\n THEME_MODE_SYSTEM,\n resolveTheme,\n} from \"./themes\";\n\ndescribe(\"resolveTheme\", () => {\n it(\"should split the theme list into light and dark without overlap\", () => {\n expect(LIGHT_THEME_NAMES).toEqual([\"indigo\", \"cupcake\", \"classic\"]);\n expect(DARK_THEME_NAMES).toEqual([\"neon\", \"dracula\", \"one-dark\"]);\n });\n\n it(\"should ignore the system appearance in single mode\", () => {\n const selection = {\n mode: THEME_MODE_SINGLE,\n theme: \"dracula\",\n themeLight: \"cupcake\",\n themeDark: \"one-dark\",\n };\n\n expect(resolveTheme(selection, false)).toBe(\"dracula\");\n expect(resolveTheme(selection, true)).toBe(\"dracula\");\n });\n\n it(\"should follow the system appearance in system mode\", () => {\n const selection = {\n mode: THEME_MODE_SYSTEM,\n theme: \"dracula\",\n themeLight: \"cupcake\",\n themeDark: \"one-dark\",\n };\n\n expect(resolveTheme(selection, false)).toBe(\"cupcake\");\n expect(resolveTheme(selection, true)).toBe(\"one-dark\");\n });\n\n it(\"should fall back to the defaults when a slot is missing or unknown\", () => {\n expect(resolveTheme({ mode: THEME_MODE_SYSTEM }, false)).toBe(\n DEFAULT_THEME\n );\n expect(resolveTheme({ mode: THEME_MODE_SYSTEM }, true)).toBe(\n DEFAULT_DARK_THEME\n );\n expect(\n resolveTheme(\n {\n mode: THEME_MODE_SYSTEM,\n themeLight: \"solarized\",\n themeDark: \"solarized\",\n },\n false\n )\n ).toBe(DEFAULT_THEME);\n expect(\n resolveTheme(\n {\n mode: THEME_MODE_SYSTEM,\n themeLight: \"solarized\",\n themeDark: \"solarized\",\n },\n true\n )\n ).toBe(DEFAULT_DARK_THEME);\n expect(resolveTheme({ theme: \"solarized\" }, false)).toBe(DEFAULT_THEME);\n });\n\n it(\"should treat an absent or unrecognised mode as single\", () => {\n expect(resolveTheme({ theme: \"neon\" }, false)).toBe(\"neon\");\n expect(resolveTheme({ mode: \"auto\", theme: \"neon\" }, true)).toBe(\"neon\");\n });\n});\n"],"mappings":"AAAA,SACEA,kBAAkB,EAClBC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAY,QACP,UAAU;AAEjBC,QAAQ,CAAC,cAAc,EAAE,MAAM;EAC7BC,EAAE,CAAC,iEAAiE,EAAE,MAAM;IAC1EC,MAAM,CAACN,iBAAiB,CAAC,CAACO,OAAO,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IACnED,MAAM,CAACP,gBAAgB,CAAC,CAACQ,OAAO,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;EACnE,CAAC,CAAC;EAEFF,EAAE,CAAC,oDAAoD,EAAE,MAAM;IAC7D,MAAMG,SAAS,GAAG;MAChBC,IAAI,EAAER,iBAAiB;MACvBS,KAAK,EAAE,SAAS;MAChBC,UAAU,EAAE,SAAS;MACrBC,SAAS,EAAE;IACb,CAAC;IAEDN,MAAM,CAACH,YAAY,CAACK,SAAS,EAAE,KAAK,CAAC,CAAC,CAACK,IAAI,CAAC,SAAS,CAAC;IACtDP,MAAM,CAACH,YAAY,CAACK,SAAS,EAAE,IAAI,CAAC,CAAC,CAACK,IAAI,CAAC,SAAS,CAAC;EACvD,CAAC,CAAC;EAEFR,EAAE,CAAC,oDAAoD,EAAE,MAAM;IAC7D,MAAMG,SAAS,GAAG;MAChBC,IAAI,EAAEP,iBAAiB;MACvBQ,KAAK,EAAE,SAAS;MAChBC,UAAU,EAAE,SAAS;MACrBC,SAAS,EAAE;IACb,CAAC;IAEDN,MAAM,CAACH,YAAY,CAACK,SAAS,EAAE,KAAK,CAAC,CAAC,CAACK,IAAI,CAAC,SAAS,CAAC;IACtDP,MAAM,CAACH,YAAY,CAACK,SAAS,EAAE,IAAI,CAAC,CAAC,CAACK,IAAI,CAAC,UAAU,CAAC;EACxD,CAAC,CAAC;EAEFR,EAAE,CAAC,oEAAoE,EAAE,MAAM;IAC7EC,MAAM,CAACH,YAAY,CAAC;MAAEM,IAAI,EAAEP;IAAkB,CAAC,EAAE,KAAK,CAAC,CAAC,CAACW,IAAI,CAC3Df,aACF,CAAC;IACDQ,MAAM,CAACH,YAAY,CAAC;MAAEM,IAAI,EAAEP;IAAkB,CAAC,EAAE,IAAI,CAAC,CAAC,CAACW,IAAI,CAC1DhB,kBACF,CAAC;IACDS,MAAM,CACJH,YAAY,CACV;MACEM,IAAI,EAAEP,iBAAiB;MACvBS,UAAU,EAAE,WAAW;MACvBC,SAAS,EAAE;IACb,CAAC,EACD,KACF,CACF,CAAC,CAACC,IAAI,CAACf,aAAa,CAAC;IACrBQ,MAAM,CACJH,YAAY,CACV;MACEM,IAAI,EAAEP,iBAAiB;MACvBS,UAAU,EAAE,WAAW;MACvBC,SAAS,EAAE;IACb,CAAC,EACD,IACF,CACF,CAAC,CAACC,IAAI,CAAChB,kBAAkB,CAAC;IAC1BS,MAAM,CAACH,YAAY,CAAC;MAAEO,KAAK,EAAE;IAAY,CAAC,EAAE,KAAK,CAAC,CAAC,CAACG,IAAI,CAACf,aAAa,CAAC;EACzE,CAAC,CAAC;EAEFO,EAAE,CAAC,uDAAuD,EAAE,MAAM;IAChEC,MAAM,CAACH,YAAY,CAAC;MAAEO,KAAK,EAAE;IAAO,CAAC,EAAE,KAAK,CAAC,CAAC,CAACG,IAAI,CAAC,MAAM,CAAC;IAC3DP,MAAM,CAACH,YAAY,CAAC;MAAEM,IAAI,EAAE,MAAM;MAAEC,KAAK,EAAE;IAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAACG,IAAI,CAAC,MAAM,CAAC;EAC1E,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/dist/index.js CHANGED Viewed

@@ -626,27 +626,33 @@
   var THEMES = [{
     name: "indigo",
     title: "Indigo",
-    dark: false
+    dark: false,
+    swatch: ["#5d2bff", "#5d2bff", "#f4f5f7"]
   }, {
     name: "cupcake",
     title: "Cupcake",
-    dark: false
+    dark: false,
+    swatch: ["#29bcdd", "#fe6fa7", "#f4f5f7"]
   }, {
     name: "classic",
     title: "Classic",
-    dark: false
+    dark: false,
+    swatch: ["#4182f2", "#4182f2", "#f4f5f7"]
   }, {
     name: "neon",
     title: "Neon",
-    dark: true
+    dark: true,
+    swatch: ["#67ffc8", "#67ffc8", "#2c2e38"]
   }, {
     name: "dracula",
     title: "Dracula",
-    dark: true
+    dark: true,
+    swatch: ["#bd93f9", "#ff79c6", "#282a36"]
   }, {
     name: "one-dark",
     title: "One Dark",
-    dark: true
+    dark: true,
+    swatch: ["#61afef", "#c678dd", "#282c34"]
   }];
   var THEME_NAMES = THEMES.map(function (theme) {
     return theme.name;
@@ -656,9 +662,33 @@
   }).map(function (theme) {
     return theme.name;
   });
+  var LIGHT_THEME_NAMES = THEMES.filter(function (theme) {
+    return !theme.dark;
+  }).map(function (theme) {
+    return theme.name;
+  });
+  var DEFAULT_THEME = "indigo";
+  var DEFAULT_DARK_THEME = "neon";
+  var THEME_MODE_SINGLE = "single";
+  var THEME_MODE_SYSTEM = "system";
   var isDarkTheme = function isDarkTheme(name) {
     return Boolean(name) && DARK_THEME_NAMES.includes(name);
   };
+  var knownTheme = function knownTheme(name, fallback) {
+    return name && THEME_NAMES.includes(name) ? name : fallback;
+  };
+  // Resolution is derived per render, never persisted — writing it back would destroy the user's pick.
+  var resolveTheme = function resolveTheme(_ref, prefersDark) {
+    var mode = _ref.mode,
+      theme = _ref.theme,
+      themeLight = _ref.themeLight,
+      themeDark = _ref.themeDark;
+    if (mode !== THEME_MODE_SYSTEM) {
+      return knownTheme(theme, DEFAULT_THEME);
+    }
+    return prefersDark ? knownTheme(themeDark, DEFAULT_DARK_THEME) : knownTheme(themeLight, DEFAULT_THEME);
+  };
   // :is() and not :where() — :where() is zero-specificity and would silently lose to the light
   // declarations it is meant to override.
@@ -28821,7 +28851,9 @@
   exports.DARK_THEME_MATCH = DARK_THEME_MATCH;
   exports.DARK_THEME_NAMES = DARK_THEME_NAMES;
   exports.DARK_THEME_SELECTOR = DARK_THEME_SELECTOR;
+  exports.DEFAULT_DARK_THEME = DEFAULT_DARK_THEME;
   exports.DEFAULT_KEYBOARD_STEP = DEFAULT_KEYBOARD_STEP;
+  exports.DEFAULT_THEME = DEFAULT_THEME;
   exports.DataTable = DataTable;
   exports.DatePicker = DatePicker;
   exports.DateStepper = DateStepper;
@@ -28926,6 +28958,7 @@
   exports.Item = Item;
   exports.ItemContext = ItemContext;
   exports.KeyIcon = KeyIcon$1;
+  exports.LIGHT_THEME_NAMES = LIGHT_THEME_NAMES;
   exports.Label = Label;
   exports.LabelsIcon = LabelsIcon$1;
   exports.LayerBackIcon = LayerBackIcon$1;
@@ -29099,6 +29132,8 @@
   exports.SunIcon = SunIcon$1;
   exports.SystemSettingsIcon = SystemSettingsIcon$1;
   exports.THEMES = THEMES;
+  exports.THEME_MODE_SINGLE = THEME_MODE_SINGLE;
+  exports.THEME_MODE_SYSTEM = THEME_MODE_SYSTEM;
   exports.THEME_NAMES = THEME_NAMES;
   exports.Table = Table;
   exports.Tag = Tag;
@@ -29166,6 +29201,7 @@
   exports.makeStart = makeStart;
   exports.measurePercent = measurePercent;
   exports.numberWithSeparator = numberWithSeparator;
+  exports.resolveTheme = resolveTheme;
   exports.signifierTypes = signifierTypes;
   exports.snap = snap;
   exports.toMoment = toMoment;