@richardmcquiston01/dashboard-widgets-toolkit 0.12.0 → 0.13.0

package/dist/core.cjs

@@ -3236,6 +3236,255 @@ function createLayoutPersistence(adapter, options = {}) {
   };
 }
 
+// src/core/theme.ts
+var THEME_TOKEN_VARIABLES = {
+  font: "--dwt-font",
+  surface: "--dwt-surface",
+  page: "--dwt-page",
+  text: "--dwt-text",
+  textSecondary: "--dwt-text-secondary",
+  textMuted: "--dwt-text-muted",
+  border: "--dwt-border",
+  grid: "--dwt-grid",
+  baseline: "--dwt-baseline",
+  crosshair: "--dwt-crosshair",
+  link: "--dwt-link",
+  focus: "--dwt-focus",
+  good: "--dwt-good",
+  bad: "--dwt-bad",
+  meterTrack: "--dwt-meter-track",
+  barTrack: "--dwt-bar-track",
+  buttonHover: "--dwt-button-hover",
+  radius: "--dwt-radius",
+  gap: "--dwt-gap",
+  padding: "--dwt-padding",
+  minColumn: "--dwt-min-column"
+};
+var LENGTH_KEYS = /* @__PURE__ */ new Set([
+  "radius",
+  "gap",
+  "padding",
+  "minColumn"
+]);
+function kindOf(key) {
+  if (key === "font") {
+    return "font";
+  }
+  return LENGTH_KEYS.has(key) ? "length" : "color";
+}
+var NAME_PATTERN = /^[a-z][a-z0-9-]*$/;
+var SCOPE_PATTERN = /^[A-Za-z0-9_\-[\]=.# '"]+$/;
+var HEX_COLOR = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var COLOR_FUNCTION = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\(.+\)$/i;
+var VAR_REFERENCE = /^var\(\s*--[A-Za-z0-9_-]+\s*(?:,.+)?\)$/;
+var COLOR_KEYWORD = /^[A-Za-z]+$/;
+var LENGTH_VALUE = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|ch|vw|vh|cqw|cqh))$/;
+var LENGTH_FUNCTION = /^(?:calc|min|max|clamp)\(.+\)$/i;
+var FONT_VALUE = /^[A-Za-z0-9 ,'"_-]+$/;
+function unsafeReason(value) {
+  if ([...value].some(
+    (character) => character.charCodeAt(0) < 32 || character.charCodeAt(0) === 127
+  )) {
+    return "contains a control character or line break";
+  }
+  if (/[;{}<>\\@]/.test(value)) {
+    return "contains one of ; { } < > \\ @";
+  }
+  const lower = value.toLowerCase();
+  if (lower.includes("/*") || lower.includes("*/")) {
+    return "contains a comment marker";
+  }
+  if (lower.includes("url(") || lower.includes("expression(")) {
+    return "contains url( or expression(";
+  }
+  let depth = 0;
+  for (const character of value) {
+    if (character === "(") {
+      depth += 1;
+    } else if (character === ")") {
+      depth -= 1;
+      if (depth < 0) {
+        return "has unbalanced parentheses";
+      }
+    }
+  }
+  return depth === 0 ? null : "has unbalanced parentheses";
+}
+function countOf(value, character) {
+  return value.split(character).length - 1;
+}
+function invalidReason(kind, value) {
+  if (value !== value.trim() || value === "") {
+    return "must not be empty or have leading or trailing spaces";
+  }
+  if (kind === "font") {
+    if (!FONT_VALUE.test(value)) {
+      return "allows only letters, digits, spaces, commas, hyphens, underscores and quotes";
+    }
+    if (countOf(value, "'") % 2 !== 0 || countOf(value, '"') % 2 !== 0) {
+      return "has an unclosed quote";
+    }
+    return null;
+  }
+  const unsafe = unsafeReason(value);
+  if (unsafe !== null) {
+    return unsafe;
+  }
+  if (value.includes("'") || value.includes('"')) {
+    return "must not contain quotes";
+  }
+  if (kind === "color") {
+    const valid2 = HEX_COLOR.test(value) || COLOR_FUNCTION.test(value) || VAR_REFERENCE.test(value) || COLOR_KEYWORD.test(value);
+    return valid2 ? null : "is not a color (use #hex, rgb(), hsl(), oklch() and similar, var(--name) or a keyword)";
+  }
+  const valid = LENGTH_VALUE.test(value) || LENGTH_FUNCTION.test(value) || VAR_REFERENCE.test(value);
+  return valid ? null : "is not a length (use a number with px, rem, em, %, ch, vw or vh, 0, calc(), min(), max(), clamp() or var(--name))";
+}
+function collectVariables(themeName, mode, tokens) {
+  const variables = {};
+  if (tokens === void 0) {
+    return ok(variables);
+  }
+  const label = (key) => `createTheme "${themeName}": ${mode}.${key}`;
+  const knownKeys = [
+    ...Object.keys(THEME_TOKEN_VARIABLES),
+    "series"
+  ];
+  for (const key of Object.keys(tokens)) {
+    if (!knownKeys.includes(key)) {
+      return err(
+        `${label(key)} is not a theme token. Known tokens: ${knownKeys.join(", ")}.`
+      );
+    }
+  }
+  for (const key of Object.keys(THEME_TOKEN_VARIABLES)) {
+    const value = tokens[key];
+    if (value === void 0) {
+      continue;
+    }
+    if (typeof value !== "string") {
+      return err(`${label(key)} must be a string, got ${typeof value}.`);
+    }
+    const reason = invalidReason(kindOf(key), value);
+    if (reason !== null) {
+      return err(`${label(key)} "${value}" ${reason}.`);
+    }
+    variables[THEME_TOKEN_VARIABLES[key]] = value;
+  }
+  const series = tokens.series;
+  if (series !== void 0) {
+    if (!Array.isArray(series) || series.length === 0) {
+      return err(`${label("series")} must be a non-empty array of colors.`);
+    }
+    if (series.length > MAX_GRAPH_SERIES) {
+      return err(
+        `${label("series")} has ${series.length} colors; charts draw at most ${MAX_GRAPH_SERIES} series.`
+      );
+    }
+    for (const [index, value] of series.entries()) {
+      const reason = typeof value === "string" ? invalidReason("color", value) : "must be a string";
+      if (reason !== null) {
+        return err(
+          `${label(`series[${index}]`)} "${String(value)}" ${reason}.`
+        );
+      }
+      variables[`--dwt-series-${index + 1}`] = value;
+    }
+  }
+  return ok(variables);
+}
+function declarations(variables) {
+  return Object.entries(variables).map(([variable, value]) => `  ${variable}: ${value};`).join("\n");
+}
+function targets(prefix, scope) {
+  const lead = prefix === "" ? "" : `${prefix} `;
+  return `${lead}${scope} .dwt-dashboard,
+${lead}${scope} .dwt-card`;
+}
+function rule(prefix, scope, variables) {
+  return `${targets(prefix, scope)} {
+${declarations(variables)}
+}`;
+}
+function createTheme(options) {
+  const name = options.name;
+  if (typeof name !== "string" || !NAME_PATTERN.test(name)) {
+    return err(
+      `createTheme: name "${String(name)}" must start with a lower-case letter and contain only lower-case letters, digits and hyphens.`
+    );
+  }
+  const scope = (options.scope ?? `[data-dwt-theme='${name}']`).trim();
+  if (scope === "" || !SCOPE_PATTERN.test(scope)) {
+    return err(
+      `createTheme "${name}": scope "${scope}" must be a selector of letters, digits and _ - [ ] = . # ' " or spaces (no commas, colons or combinators).`
+    );
+  }
+  const modes = ["base", "light", "dark"];
+  const variables = {
+    base: {},
+    light: {},
+    dark: {}
+  };
+  for (const mode of modes) {
+    const collected = collectVariables(
+      name,
+      mode,
+      options[mode]
+    );
+    if (!collected.ok) {
+      return collected;
+    }
+    variables[mode] = collected.value;
+  }
+  if (modes.every((mode) => Object.keys(variables[mode]).length === 0)) {
+    return err(
+      `createTheme "${name}": no tokens were set. Pass at least one value in base, light or dark.`
+    );
+  }
+  const blocks = [];
+  if (Object.keys(variables.base).length > 0) {
+    blocks.push(rule("", scope, variables.base));
+  }
+  if (Object.keys(variables.light).length > 0) {
+    blocks.push(
+      rule(":root:where([data-theme='light'])", scope, variables.light)
+    );
+    blocks.push(
+      `@media (prefers-color-scheme: light) {
+${indent(
+        rule(
+          ":root:where(:not([data-theme='dark'], .dark))",
+          scope,
+          variables.light
+        )
+      )}
+}`
+    );
+  }
+  if (Object.keys(variables.dark).length > 0) {
+    blocks.push(
+      rule(":root:where([data-theme='dark'], .dark)", scope, variables.dark)
+    );
+    blocks.push(
+      `@media (prefers-color-scheme: dark) {
+${indent(
+        rule(":root:where(:not([data-theme='light']))", scope, variables.dark)
+      )}
+}`
+    );
+  }
+  return ok({
+    name,
+    scope,
+    css: `${blocks.join("\n\n")}
+`,
+    variables
+  });
+}
+function indent(block) {
+  return block.split("\n").map((line) => `  ${line}`).join("\n");
+}
+
 exports.DATE_RANGE_PRESETS = DATE_RANGE_PRESETS;
 exports.DEFAULT_COMPARISON_LABEL = DEFAULT_COMPARISON_LABEL;
 exports.DEFAULT_CURRENCY = DEFAULT_CURRENCY;
@@ -3258,6 +3507,7 @@ exports.MAX_WIDGET_OPTIONS = MAX_WIDGET_OPTIONS;
 exports.MAX_WIDGET_WIDTH = MAX_WIDGET_WIDTH;
 exports.MIN_WIDGET_WIDTH = MIN_WIDGET_WIDTH;
 exports.OPTION_KEY_PATTERN = OPTION_KEY_PATTERN;
+exports.THEME_TOKEN_VARIABLES = THEME_TOKEN_VARIABLES;
 exports.VALUE_FORMATS = VALUE_FORMATS;
 exports.WIDGET_FILLS = WIDGET_FILLS;
 exports.WIDGET_KINDS = WIDGET_KINDS;
@@ -3271,6 +3521,7 @@ exports.baseColumnSpan = baseColumnSpan;
 exports.cacheKeyFor = cacheKeyFor;
 exports.coerceOptionValue = coerceOptionValue;
 exports.createLayoutPersistence = createLayoutPersistence;
+exports.createTheme = createTheme;
 exports.createWidgetLoader = createWidgetLoader;
 exports.defaultDetailQuery = defaultDetailQuery;
 exports.defaultOptionValue = defaultOptionValue;