@opendata-ai/openchart-vanilla 8.4.1 → 8.5.1

package/dist/chunk-NG7CVCI2.js

@@ -0,0 +1,58 @@
+// src/theme-tokens.ts
+import { adaptForLightLineStroke, cssTokenDefault } from "@opendata-ai/openchart-core";
+function resolvedSurface(theme) {
+  return theme.colors.neutral.surface;
+}
+function stampThemeProperties(el, theme) {
+  const accent = theme.colors.categorical[0] ?? cssTokenDefault("--oc-accent", "light");
+  const bg = resolvedSurface(theme);
+  const n = theme.colors.neutral;
+  const props = [
+    ["--oc-font-family", theme.fonts.family],
+    ["--oc-font-mono", theme.fonts.mono],
+    ["--oc-title-size", `${theme.chrome.title.fontSize}px`],
+    ["--oc-title-weight", `${theme.chrome.title.fontWeight}`],
+    ["--oc-subtitle-size", `${theme.chrome.subtitle.fontSize}px`],
+    ["--oc-subtitle-weight", `${theme.chrome.subtitle.fontWeight}`],
+    ["--oc-source-size", `${theme.chrome.source.fontSize}px`],
+    ["--oc-source-weight", `${theme.chrome.source.fontWeight}`],
+    ["--oc-body-size", `${theme.fonts.sizes.body}px`],
+    ["--oc-eyebrow-size", `${theme.chrome.eyebrow.fontSize}px`],
+    ["--oc-eyebrow-weight", `${theme.chrome.eyebrow.fontWeight}`],
+    ["--oc-bg", bg],
+    ["--oc-text", theme.colors.text],
+    ["--oc-text-muted", theme.colors.axis],
+    // Secondary grays are derived from the theme's own text/background pair
+    // (ResolvedTheme.colors.neutral), so a warm or cool theme gets warm or
+    // cool grays instead of zinc. One direction only: theme -> CSS.
+    ["--oc-text-secondary", n.secondary],
+    ["--oc-text-faint", n.faint],
+    ["--oc-border", n.border],
+    ["--oc-gray-100", n[100]],
+    ["--oc-gray-200", n[200]],
+    ["--oc-gray-300", n[300]],
+    ["--oc-gray-400", n[400]],
+    ["--oc-gray-600", n[600]],
+    ["--oc-gray-800", n[800]],
+    ["--oc-gridline", theme.colors.gridline],
+    // --oc-axis is the hairline the axis line is drawn with, not the ink its
+    // tick labels take (that is --oc-text-muted, above).
+    ["--oc-axis", theme.colors.hairline],
+    ["--oc-border-radius", `${theme.borderRadius}px`],
+    ["--oc-accent", accent],
+    ["--oc-accent-strong", adaptForLightLineStroke(accent)],
+    ["--oc-positive", theme.colors.positive],
+    ["--oc-negative", theme.colors.negative],
+    ["--oc-space-2", `${theme.spacing.chromeGap * 2}px`],
+    ["--oc-space-4", `${theme.spacing.padding}px`]
+  ];
+  for (const [name, value] of props) {
+    el.style.setProperty(name, value);
+  }
+}
+
+export {
+  resolvedSurface,
+  stampThemeProperties
+};
+//# sourceMappingURL=chunk-NG7CVCI2.js.map

package/dist/chunk-NG7CVCI2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme-tokens.ts"],"sourcesContent":["/**\n * Generate CSS custom properties from a resolved JS theme.\n *\n * Stamped on the .oc-root container at mount time so CSS consumers\n * read from the same source of truth as the JS engine. The static\n * values in tokens.css / dark.css serve as fallback defaults for\n * contexts where JS hasn't mounted (SSR, static HTML).\n */\n\nimport type { ResolvedTheme } from '@opendata-ai/openchart-core';\nimport { adaptForLightLineStroke, cssTokenDefault } from '@opendata-ai/openchart-core';\n\n/**\n * The opaque surface a theme paints on. A transparent theme background has no\n * color of its own, so it resolves to the static `--oc-bg` token for the mode --\n * the same value the engine's knockout strokes are cut in. Resolved once in\n * core, on `colors.neutral.surface`; this is a named read of it.\n */\nexport function resolvedSurface(theme: ResolvedTheme): string {\n  return theme.colors.neutral.surface;\n}\n\nexport function stampThemeProperties(el: HTMLElement, theme: ResolvedTheme): void {\n  const accent = theme.colors.categorical[0] ?? cssTokenDefault('--oc-accent', 'light');\n  const bg = resolvedSurface(theme);\n\n  const n = theme.colors.neutral;\n\n  const props: [string, string][] = [\n    ['--oc-font-family', theme.fonts.family],\n    ['--oc-font-mono', theme.fonts.mono],\n    ['--oc-title-size', `${theme.chrome.title.fontSize}px`],\n    ['--oc-title-weight', `${theme.chrome.title.fontWeight}`],\n    ['--oc-subtitle-size', `${theme.chrome.subtitle.fontSize}px`],\n    ['--oc-subtitle-weight', `${theme.chrome.subtitle.fontWeight}`],\n    ['--oc-source-size', `${theme.chrome.source.fontSize}px`],\n    ['--oc-source-weight', `${theme.chrome.source.fontWeight}`],\n    ['--oc-body-size', `${theme.fonts.sizes.body}px`],\n    ['--oc-eyebrow-size', `${theme.chrome.eyebrow.fontSize}px`],\n    ['--oc-eyebrow-weight', `${theme.chrome.eyebrow.fontWeight}`],\n    ['--oc-bg', bg],\n    ['--oc-text', theme.colors.text],\n    ['--oc-text-muted', theme.colors.axis],\n    // Secondary grays are derived from the theme's own text/background pair\n    // (ResolvedTheme.colors.neutral), so a warm or cool theme gets warm or\n    // cool grays instead of zinc. One direction only: theme -> CSS.\n    ['--oc-text-secondary', n.secondary],\n    ['--oc-text-faint', n.faint],\n    ['--oc-border', n.border],\n    ['--oc-gray-100', n[100]],\n    ['--oc-gray-200', n[200]],\n    ['--oc-gray-300', n[300]],\n    ['--oc-gray-400', n[400]],\n    ['--oc-gray-600', n[600]],\n    ['--oc-gray-800', n[800]],\n    ['--oc-gridline', theme.colors.gridline],\n    // --oc-axis is the hairline the axis line is drawn with, not the ink its\n    // tick labels take (that is --oc-text-muted, above).\n    ['--oc-axis', theme.colors.hairline],\n    ['--oc-border-radius', `${theme.borderRadius}px`],\n    ['--oc-accent', accent],\n    ['--oc-accent-strong', adaptForLightLineStroke(accent)],\n    ['--oc-positive', theme.colors.positive],\n    ['--oc-negative', theme.colors.negative],\n    ['--oc-space-2', `${theme.spacing.chromeGap * 2}px`],\n    ['--oc-space-4', `${theme.spacing.padding}px`],\n  ];\n\n  for (const [name, value] of props) {\n    el.style.setProperty(name, value);\n  }\n}\n"],"mappings":";AAUA,SAAS,yBAAyB,uBAAuB;AAQlD,SAAS,gBAAgB,OAA8B;AAC5D,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEO,SAAS,qBAAqB,IAAiB,OAA4B;AAChF,QAAM,SAAS,MAAM,OAAO,YAAY,CAAC,KAAK,gBAAgB,eAAe,OAAO;AACpF,QAAM,KAAK,gBAAgB,KAAK;AAEhC,QAAM,IAAI,MAAM,OAAO;AAEvB,QAAM,QAA4B;AAAA,IAChC,CAAC,oBAAoB,MAAM,MAAM,MAAM;AAAA,IACvC,CAAC,kBAAkB,MAAM,MAAM,IAAI;AAAA,IACnC,CAAC,mBAAmB,GAAG,MAAM,OAAO,MAAM,QAAQ,IAAI;AAAA,IACtD,CAAC,qBAAqB,GAAG,MAAM,OAAO,MAAM,UAAU,EAAE;AAAA,IACxD,CAAC,sBAAsB,GAAG,MAAM,OAAO,SAAS,QAAQ,IAAI;AAAA,IAC5D,CAAC,wBAAwB,GAAG,MAAM,OAAO,SAAS,UAAU,EAAE;AAAA,IAC9D,CAAC,oBAAoB,GAAG,MAAM,OAAO,OAAO,QAAQ,IAAI;AAAA,IACxD,CAAC,sBAAsB,GAAG,MAAM,OAAO,OAAO,UAAU,EAAE;AAAA,IAC1D,CAAC,kBAAkB,GAAG,MAAM,MAAM,MAAM,IAAI,IAAI;AAAA,IAChD,CAAC,qBAAqB,GAAG,MAAM,OAAO,QAAQ,QAAQ,IAAI;AAAA,IAC1D,CAAC,uBAAuB,GAAG,MAAM,OAAO,QAAQ,UAAU,EAAE;AAAA,IAC5D,CAAC,WAAW,EAAE;AAAA,IACd,CAAC,aAAa,MAAM,OAAO,IAAI;AAAA,IAC/B,CAAC,mBAAmB,MAAM,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,IAIrC,CAAC,uBAAuB,EAAE,SAAS;AAAA,IACnC,CAAC,mBAAmB,EAAE,KAAK;AAAA,IAC3B,CAAC,eAAe,EAAE,MAAM;AAAA,IACxB,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAAA,IACxB,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAAA,IACxB,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAAA,IACxB,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAAA,IACxB,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAAA,IACxB,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAAA,IACxB,CAAC,iBAAiB,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAGvC,CAAC,aAAa,MAAM,OAAO,QAAQ;AAAA,IACnC,CAAC,sBAAsB,GAAG,MAAM,YAAY,IAAI;AAAA,IAChD,CAAC,eAAe,MAAM;AAAA,IACtB,CAAC,sBAAsB,wBAAwB,MAAM,CAAC;AAAA,IACtD,CAAC,iBAAiB,MAAM,OAAO,QAAQ;AAAA,IACvC,CAAC,iBAAiB,MAAM,OAAO,QAAQ;AAAA,IACvC,CAAC,gBAAgB,GAAG,MAAM,QAAQ,YAAY,CAAC,IAAI;AAAA,IACnD,CAAC,gBAAgB,GAAG,MAAM,QAAQ,OAAO,IAAI;AAAA,EAC/C;AAEA,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO;AACjC,OAAG,MAAM,YAAY,MAAM,KAAK;AAAA,EAClC;AACF;","names":[]}

package/dist/{chunk-3UIUANPI.js → chunk-UAK6HWOC.js}

@@ -3,7 +3,7 @@ import {
   renderChromeElement,
   renderLegend,
   stampAnimationVars
-} from "./chunk-KANNWAEA.js";
+} from "./chunk-XGII4ZRT.js";
 
 // src/tilemap-renderer.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -327,4 +327,4 @@ function renderTileMapSVG(layout, opts) {
 export {
   renderTileMapSVG
 };
-//# sourceMappingURL=chunk-3UIUANPI.js.map
+//# sourceMappingURL=chunk-UAK6HWOC.js.map