@-reddacted-/react-ui 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { NavBar, type NavLink } from "./components/NavBar.js";
 export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { ThemeSelect } from "./theme/ThemeSelect.js";
-export { defaultPalette, themeVariableGroups, themeVariableKeys, type ThemeVariableGroup } from "./theme/palette.js";
+export { defaultPalette } from "./theme/palette.js";
 export { createLocalThemeStore, createHttpThemeStore, type ThemeStore } from "./theme/store.js";
 export { serializeColors, parseColors, isHexColor, randomHex } from "./theme/clipboard.js";
 export type { ThemeColors, ThemeDefinition, ThemeCatalog, ThemeDraft } from "./theme/types.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,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEtF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AACpH,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,aAAa,GACnB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACpH,YAAY,EAAE,WAAW,EAAE,WAAW,IAAI,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEtF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,aAAa,GACnB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACpH,YAAY,EAAE,WAAW,EAAE,WAAW,IAAI,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/index.js

@@ -7,7 +7,7 @@ export { NavBar } from "./components/NavBar.js";
 export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { ThemeSelect } from "./theme/ThemeSelect.js";
-export { defaultPalette, themeVariableGroups, themeVariableKeys } from "./theme/palette.js";
+export { defaultPalette } from "./theme/palette.js";
 export { createLocalThemeStore, createHttpThemeStore } from "./theme/store.js";
 export { serializeColors, parseColors, isHexColor, randomHex } from "./theme/clipboard.js";
 export { PopupProvider } from "./popup/PopupProvider.js";

package/dist/theme/clipboard.d.ts

@@ -1,5 +1,6 @@
 import type { ThemeColors } from "./types.js";
 export declare function serializeColors(colors: ThemeColors): string;
+/** Reads every `--name: #rrggbb` declaration. Filtering is left to the caller. */
 export declare function parseColors(text: string): ThemeColors;
 export declare function isHexColor(value: string): boolean;
 export declare function randomHex(): string;

package/dist/theme/clipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/theme/clipboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAI7C,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAK3D;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAOrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,wBAAgB,SAAS,IAAI,MAAM,CAOlC"}
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/theme/clipboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAG3D;AAED,kFAAkF;AAClF,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAMrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,wBAAgB,SAAS,IAAI,MAAM,CAOlC"}

package/dist/theme/clipboard.js

@@ -1,17 +1,14 @@
-import { themeVariableKeys } from "./palette.js";
 const HEX = /^#[0-9a-fA-F]{6}$/;
+const DECLARATION = /(--[a-zA-Z0-9-]+)\s*:\s*(#[0-9a-fA-F]{6})/g;
 export function serializeColors(colors) {
-    const lines = themeVariableKeys
-        .filter(key => colors[key])
-        .map(key => `  ${key}: ${colors[key]};`);
+    const lines = Object.entries(colors).map(([key, value]) => `  ${key}: ${value};`);
     return `:root {\n${lines.join("\n")}\n}`;
 }
+/** Reads every `--name: #rrggbb` declaration. Filtering is left to the caller. */
 export function parseColors(text) {
     const parsed = {};
-    for (const key of themeVariableKeys) {
-        const match = new RegExp(`${key}\s*:\s*(#[0-9a-fA-F]{6})`).exec(text);
-        if (match)
-            parsed[key] = match[1];
+    for (const [, key, value] of text.matchAll(DECLARATION)) {
+        parsed[key] = value;
     }
     return parsed;
 }

package/dist/theme/palette.d.ts

@@ -1,12 +1,3 @@
 import type { ThemeColors } from "./types.js";
 export declare const defaultPalette: ThemeColors;
-export type ThemeVariableGroup = {
-    label: string;
-    variables: Array<{
-        key: string;
-        label: string;
-    }>;
-};
-export declare const themeVariableGroups: ThemeVariableGroup[];
-export declare const themeVariableKeys: string[];
 //# sourceMappingURL=palette.d.ts.map

package/dist/theme/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,eAAO,MAAM,cAAc,EAAE,WAsB5B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACjD,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,kBAAkB,EA+CnD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,EAErC,CAAA"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,eAAO,MAAM,cAAc,EAAE,WAW5B,CAAA"}

package/dist/theme/palette.js

@@ -1,72 +1,15 @@
+// Base vocabulary: every variable the components in this package read, plus the
+// hover shade a consumer is expected to theme. A project with its own vocabulary
+// extends this and passes the result to ThemeProvider as basePalette.
 export const defaultPalette = {
     "--color-bg": "#ffffff",
     "--color-surface": "#f8fafc",
+    "--color-border": "#e2e8f0",
     "--color-text": "#1a1a1a",
     "--color-text-muted": "#64748b",
     "--color-primary": "#6366f1",
     "--color-primary-hover": "#4f46e5",
     "--color-on-primary": "#ffffff",
-    "--color-primary-soft": "#e0e7ff",
-    "--color-border": "#e2e8f0",
     "--color-danger": "#dc2626",
     "--color-danger-soft": "#fee2e2",
-    "--color-mindmap-red": "#dc2626",
-    "--color-mindmap-red-soft": "#fee2e2",
-    "--color-mindmap-orange": "#ea580c",
-    "--color-mindmap-orange-soft": "#ffedd5",
-    "--color-mindmap-green": "#16a34a",
-    "--color-mindmap-green-soft": "#dcfce7",
-    "--color-mindmap-blue": "#2563eb",
-    "--color-mindmap-blue-soft": "#dbeafe",
-    "--color-mindmap-purple": "#9333ea",
-    "--color-mindmap-purple-soft": "#f3e8ff",
 };
-export const themeVariableGroups = [
-    {
-        label: "Surfaces",
-        variables: [
-            { key: "--color-bg", label: "Background" },
-            { key: "--color-surface", label: "Surface" },
-            { key: "--color-border", label: "Border" },
-        ],
-    },
-    {
-        label: "Text",
-        variables: [
-            { key: "--color-text", label: "Text" },
-            { key: "--color-text-muted", label: "Muted text" },
-        ],
-    },
-    {
-        label: "Primary",
-        variables: [
-            { key: "--color-primary", label: "Primary" },
-            { key: "--color-primary-hover", label: "Primary (hover)" },
-            { key: "--color-on-primary", label: "On primary" },
-            { key: "--color-primary-soft", label: "Primary (soft)" },
-        ],
-    },
-    {
-        label: "Danger",
-        variables: [
-            { key: "--color-danger", label: "Danger" },
-            { key: "--color-danger-soft", label: "Danger (soft)" },
-        ],
-    },
-    {
-        label: "Mindmap",
-        variables: [
-            { key: "--color-mindmap-red", label: "Red" },
-            { key: "--color-mindmap-red-soft", label: "Red (soft)" },
-            { key: "--color-mindmap-orange", label: "Orange" },
-            { key: "--color-mindmap-orange-soft", label: "Orange (soft)" },
-            { key: "--color-mindmap-green", label: "Green" },
-            { key: "--color-mindmap-green-soft", label: "Green (soft)" },
-            { key: "--color-mindmap-blue", label: "Blue" },
-            { key: "--color-mindmap-blue-soft", label: "Blue (soft)" },
-            { key: "--color-mindmap-purple", label: "Purple" },
-            { key: "--color-mindmap-purple-soft", label: "Purple (soft)" },
-        ],
-    },
-];
-export const themeVariableKeys = themeVariableGroups.flatMap(group => group.variables.map(variable => variable.key));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@-reddacted-/react-ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Theming system, Modal, Button, ColorPicker, NavBar and fetch error popups for React",
   "type": "module",
   "main": "dist/index.js",