@xeplr/ui-utils 1.0.0 → 1.0.1

package/src/theme/default.theme.json

@@ -0,0 +1,178 @@
+{
+  "name": "xeplr-default",
+  "description": "Brand-neutral DEFAULT design theme for the @xeplr UI packages (upstream — NO consumer branding). The `chart` section IS a ChartOptions styling object (see @xeplr/ui-charts type.js): camelCase keys, CSS-value strings, Style.background/Style.border, Positioning — so theme→ChartOptions is a plain deep-merge, no remapping. It carries styling/chrome only (no data, no axis.labels, no title.text, no chartType — those are per-chart) plus two theme extras ChartOptions consumes: `palette` (→ option.color) and `marks` (per-type series defaults). The `table` section holds @xeplr/ui-table tokens. Consumers pass overrides to resolveTheme(); overrides win, rest falls through. Sizes are CSS values; rem scales with the container.",
+  "default": "light",
+  "font": {
+    "family": "system-ui, -apple-system, \"Segoe UI\", sans-serif"
+  },
+  "themes": {
+    "light": {
+      "chart": {
+        "title": {
+          "positioning": { "position": "top", "align": "start" },
+          "font": { "size": "1rem", "weight": 600, "color": "#0b0b0b", "align": "left" }
+        },
+        "axes": {
+          "x": {
+            "line": { "show": true, "color": "#c3c2b7", "width": "1px" },
+            "grid": { "show": false, "color": "#e1e0d9", "width": "1px" },
+            "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
+            "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#52514e" } }
+          },
+          "y": {
+            "line": { "show": true, "color": "#c3c2b7", "width": "1px" },
+            "grid": { "show": true, "color": "#e1e0d9", "width": "1px" },
+            "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
+            "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#52514e" } }
+          }
+        },
+        "legend": {
+          "show": true,
+          "positioning": { "position": "bottom", "align": "center" },
+          "font": { "size": "0.85rem", "color": "#52514e" }
+        },
+        "tooltip": {
+          "show": true,
+          "font": { "size": "0.8rem", "color": "#0b0b0b" },
+          "style": {
+            "background": { "color": "#fcfcfb" },
+            "border": { "color": "#e1e0d9", "width": "1px" }
+          }
+        },
+        "dataLabel": {
+          "show": false,
+          "positioning": { "position": "top" },
+          "font": { "size": "0.75rem", "color": "#52514e" }
+        },
+        "chartArea": {
+          "margin": { "top": "8px", "right": "12px", "bottom": "8px", "left": "8px" },
+          "style": { "background": { "color": "transparent" } }
+        },
+        "palette": ["#2a78d6", "#1baf7a", "#eda100", "#008300", "#4a3aa7", "#e34948", "#e87ba4", "#eb6834"],
+        "marks": {
+          "line": { "width": "2px", "symbol": "circle", "symbolSize": 8, "smooth": false },
+          "bar": { "border": { "radius": "4px" }, "gap": { "color": "#fcfcfb", "width": "2px" } },
+          "scatter": { "symbolSize": 10 },
+          "pie": { "border": { "color": "#fcfcfb", "width": "2px" }, "label": { "font": { "color": "#52514e" } } }
+        }
+      },
+      "table": {
+        "container": {
+          "colors": { "background": "#ffffff", "color": "#0b0b0b" },
+          "border": { "color": "#e1e0d9", "width": "1px", "radius": "8px" }
+        },
+        "toolbar": { "colors": { "background": "#f4f4f2", "border_bottom": "#e1e0d9" } },
+        "header": {
+          "colors": { "background": "#f4f4f2", "color": "#52514e", "sort_active": "#2a78d6" },
+          "font": { "size": "0.875rem", "weight": "600", "text_align": "left", "text_transform": "none" },
+          "border": { "bottom": { "color": "#c3c2b7", "width": "2px" } },
+          "padding": { "top": "10px", "right": "12px", "bottom": "10px", "left": "12px" }
+        },
+        "body": {
+          "row": {
+            "colors": { "background": "#ffffff", "hover_background": "#f5f5ff", "selected_background": "#eaf1fb", "stripe_background": "#fbfbfa" },
+            "status": { "new": "#1baf7a", "edited": "#eda100" }
+          },
+          "cell": {
+            "font": { "size": "0.875rem", "color": "#0b0b0b", "weight": "normal" },
+            "border": { "bottom": { "color": "#eeeeea", "width": "1px" } },
+            "padding": { "top": "8px", "right": "12px", "bottom": "8px", "left": "12px" }
+          }
+        },
+        "accent": { "default": "#2a78d6", "hover": "#1f5fb0", "soft": "#eaf1fb" },
+        "pagination": {
+          "colors": { "background": "#f4f4f2", "border_top": "#e1e0d9", "color": "#52514e" },
+          "font": { "size": "0.8rem" }
+        },
+        "overlay": {
+          "colors": { "background": "rgba(0,0,0,0.3)" },
+          "panel": { "background": "#ffffff", "border": "#c3c2b7", "radius": "10px", "shadow": "0 12px 40px rgba(0,0,0,0.15)" }
+        }
+      }
+    },
+    "dark": {
+      "chart": {
+        "title": {
+          "positioning": { "position": "top", "align": "start" },
+          "font": { "size": "1rem", "weight": 600, "color": "#ffffff", "align": "left" }
+        },
+        "axes": {
+          "x": {
+            "line": { "show": true, "color": "#383835", "width": "1px" },
+            "grid": { "show": false, "color": "#2c2c2a", "width": "1px" },
+            "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
+            "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#c3c2b7" } }
+          },
+          "y": {
+            "line": { "show": true, "color": "#383835", "width": "1px" },
+            "grid": { "show": true, "color": "#2c2c2a", "width": "1px" },
+            "ticks": { "show": true, "length": "0", "color": "#898781", "font": { "size": "0.8rem", "color": "#898781" } },
+            "title": { "font": { "size": "0.9rem", "weight": 600, "color": "#c3c2b7" } }
+          }
+        },
+        "legend": {
+          "show": true,
+          "positioning": { "position": "bottom", "align": "center" },
+          "font": { "size": "0.85rem", "color": "#c3c2b7" }
+        },
+        "tooltip": {
+          "show": true,
+          "font": { "size": "0.8rem", "color": "#ffffff" },
+          "style": {
+            "background": { "color": "#1a1a19" },
+            "border": { "color": "#2c2c2a", "width": "1px" }
+          }
+        },
+        "dataLabel": {
+          "show": false,
+          "positioning": { "position": "top" },
+          "font": { "size": "0.75rem", "color": "#c3c2b7" }
+        },
+        "chartArea": {
+          "margin": { "top": "8px", "right": "12px", "bottom": "8px", "left": "8px" },
+          "style": { "background": { "color": "transparent" } }
+        },
+        "palette": ["#3987e5", "#199e70", "#c98500", "#008300", "#9085e9", "#e66767", "#d55181", "#d95926"],
+        "marks": {
+          "line": { "width": "2px", "symbol": "circle", "symbolSize": 8, "smooth": false },
+          "bar": { "border": { "radius": "4px" }, "gap": { "color": "#1a1a19", "width": "2px" } },
+          "scatter": { "symbolSize": 10 },
+          "pie": { "border": { "color": "#1a1a19", "width": "2px" }, "label": { "font": { "color": "#c3c2b7" } } }
+        }
+      },
+      "table": {
+        "container": {
+          "colors": { "background": "#1a1a19", "color": "#c3c2b7" },
+          "border": { "color": "#2c2c2a", "width": "1px", "radius": "8px" }
+        },
+        "toolbar": { "colors": { "background": "#141413", "border_bottom": "#2c2c2a" } },
+        "header": {
+          "colors": { "background": "#141413", "color": "#898781", "sort_active": "#3987e5" },
+          "font": { "size": "0.875rem", "weight": "600", "text_align": "left", "text_transform": "none" },
+          "border": { "bottom": { "color": "#383835", "width": "2px" } },
+          "padding": { "top": "10px", "right": "12px", "bottom": "10px", "left": "12px" }
+        },
+        "body": {
+          "row": {
+            "colors": { "background": "#1a1a19", "hover_background": "#242422", "selected_background": "#1f2b3a", "stripe_background": "#1d1d1b" },
+            "status": { "new": "#199e70", "edited": "#c98500" }
+          },
+          "cell": {
+            "font": { "size": "0.875rem", "color": "#c3c2b7", "weight": "normal" },
+            "border": { "bottom": { "color": "#2c2c2a", "width": "1px" } },
+            "padding": { "top": "8px", "right": "12px", "bottom": "8px", "left": "12px" }
+          }
+        },
+        "accent": { "default": "#3987e5", "hover": "#5ba0ee", "soft": "#1f2b3a" },
+        "pagination": {
+          "colors": { "background": "#141413", "border_top": "#2c2c2a", "color": "#c3c2b7" },
+          "font": { "size": "0.8rem" }
+        },
+        "overlay": {
+          "colors": { "background": "rgba(0,0,0,0.6)" },
+          "panel": { "background": "#242422", "border": "#383835", "radius": "10px", "shadow": "0 12px 40px rgba(0,0,0,0.5)" }
+        }
+      }
+    }
+  }
+}

package/src/theme/index.js

@@ -0,0 +1,75 @@
+// Theme resolution for the @xeplr UI packages.
+//
+// The model is two layers:
+//   1. default.theme.json — the brand-neutral BASE. Holds the design for every
+//      themed component (chart, table, …). Upstream; nobody edits it.
+//   2. an override object the CONSUMER supplies. deepMerge lays it over the base;
+//      overrides WIN, and anything not overridden falls through to the default.
+//
+//   resolved = resolveTheme(appOverrides)          // whole theme, both variants
+//   variant  = getThemeVariant('dark', overrides)  // one variant's { colorset, chart, table }
+//
+// Then @xeplr/ui-charts reads variant.chart, @xeplr/ui-table reads variant.table,
+// both over the shared variant.colorset foundation.
+
+import defaultTheme from './default.theme.json' with { type: 'json' };
+
+function isPlainObject(v) {
+  return v !== null && typeof v === 'object' && !Array.isArray(v);
+}
+
+/**
+ * Deep-merge `override` onto `base` (immutably). Objects merge key-by-key;
+ * everything else (including ARRAYS — e.g. a palette) is REPLACED, not merged,
+ * so an override palette wholly supersedes the default instead of blending
+ * index-by-index. `undefined` in the override never clobbers a base value.
+ */
+export function deepMerge(base, override) {
+  if (override === undefined) return base;
+  if (!isPlainObject(override) || !isPlainObject(base)) return override;
+  const out = { ...base };
+  for (const key of Object.keys(override)) {
+    const o = override[key];
+    if (o === undefined) continue;
+    out[key] = isPlainObject(o) && isPlainObject(base[key]) ? deepMerge(base[key], o) : o;
+  }
+  return out;
+}
+
+/** Resolve the full theme: default base with consumer overrides merged on top. */
+export function resolveTheme(overrides) {
+  return deepMerge(defaultTheme, overrides || {});
+}
+
+/**
+ * Resolve one variant ('light' | 'dark'), overrides applied. Falls back to the
+ * theme's declared `default` variant when the name is unknown.
+ * @returns {{ colorset: object, chart: object, table: object }}
+ */
+export function getThemeVariant(name, overrides) {
+  const theme = resolveTheme(overrides);
+  return theme.themes[name] || theme.themes[theme.default];
+}
+
+/**
+ * Theme → ChartOptions. Returns the variant's `chart` section (already a
+ * ChartOptions styling object) with the top-level font `family` attached as
+ * `fontFamily`, ready to deep-merge a per-chart spec (data, chartType,
+ * axes.x/y.labels, title.text) onto and hand to <XeplrChart> / chartOptionsToOption.
+ *
+ *   const base = getChartOptions('light', appOverrides);
+ *   const chartOptions = deepMerge(base, { data, chartType: 'bar',
+ *     axes: { x: { labels: ['month'] }, y: { labels: ['revenue'] } } });
+ *
+ * @returns {object} a ChartOptions object (styling only + palette + marks + fontFamily)
+ */
+export function getChartOptions(variantName, overrides) {
+  const theme = resolveTheme(overrides);
+  const variant = theme.themes[variantName] || theme.themes[theme.default];
+  const chart = (variant && variant.chart) || {};
+  const family = theme.font && theme.font.family;
+  return family ? { ...chart, fontFamily: family } : { ...chart };
+}
+
+export { defaultTheme };
+export default defaultTheme;