@vio-live/web-sdk 0.2.0 → 0.4.0

package/dist/ui/index.d.ts

@@ -1,4 +1,4 @@
-export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail } from '../vio-checkout-CrC5tvmh.js';
+export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail, e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-CvqQYURw.js';
 import 'lit-html';
 import 'lit';
 
@@ -24,86 +24,6 @@ import 'lit';
  */
 declare function registerVioElements(): void;
 
-/**
- * Vio Design Tokens — editorial commerce aesthetic.
- *
- * Extracted from the Allermedia "Mote & Livsstil" reference (the target
- * pilot site). Mood: Vogue-like fashion magazine — serif headlines,
- * sans-serif body, near-monochrome palette, terracotta accent for
- * editorial labels ("REDAKSJONENS FAVORITTER").
- *
- * Tokens are exposed both as a typed TS object (`VioTokens`) and as
- * CSS custom properties on `:root` (auto-injected when this module is
- * imported in a browser). Consumers can override individual variables
- * to re-skin without touching SDK source.
- */
-declare const VioTokens: {
-    readonly color: {
-        readonly text: {
-            readonly primary: "#0a0a0a";
-            readonly secondary: "#666666";
-            readonly tertiary: "#999999";
-            readonly onPrimary: "#ffffff";
-        };
-        readonly accent: {
-            readonly editorial: "#c14a3b";
-        };
-        readonly surface: {
-            readonly base: "#ffffff";
-            readonly muted: "#f2f2f2";
-            readonly hover: "#fafafa";
-        };
-        readonly border: {
-            readonly subtle: "#e5e5e5";
-            readonly default: "#cccccc";
-        };
-    };
-    readonly font: {
-        readonly serif: "\"Tinos\", \"Playfair Display\", Georgia, serif";
-        readonly sans: "\"Inter\", -apple-system, \"Helvetica Neue\", Arial, sans-serif";
-    };
-    readonly size: {
-        readonly xs: "12px";
-        readonly sm: "14px";
-        readonly md: "16px";
-        readonly lg: "20px";
-        readonly xl: "24px";
-        readonly '2xl': "32px";
-        readonly '3xl': "40px";
-    };
-    readonly weight: {
-        readonly regular: 400;
-        readonly medium: 500;
-        readonly semibold: 600;
-        readonly bold: 700;
-    };
-    readonly tracking: {
-        readonly label: "0.1em";
-        readonly title: "0";
-    };
-    readonly lineHeight: {
-        readonly tight: 1.1;
-        readonly snug: 1.3;
-        readonly normal: 1.5;
-    };
-    readonly space: {
-        readonly xs: "4px";
-        readonly sm: "8px";
-        readonly md: "16px";
-        readonly lg: "24px";
-        readonly xl: "32px";
-        readonly '2xl': "48px";
-        readonly '3xl': "64px";
-    };
-    readonly radius: {
-        readonly none: "0";
-        readonly sm: "2px";
-        readonly md: "4px";
-        readonly lg: "8px";
-        readonly full: "9999px";
-    };
-};
-
 /**
  * Vio UI — Web Components + design tokens.
  *
@@ -118,6 +38,6 @@ declare const VioTokens: {
  * SSR-safe: every side-effect guards on `typeof document !== 'undefined'`.
  */
 
-declare const VIO_UI_VERSION = "0.2.0";
+declare const VIO_UI_VERSION = "0.3.0";
 
-export { VIO_UI_VERSION, VioTokens, registerVioElements };
+export { VIO_UI_VERSION, registerVioElements };

package/dist/ui/index.js

@@ -1,138 +1,11 @@
-import { registerVioElements } from '../chunk-7JSSYPRN.js';
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, registerVioElements } from '../chunk-7JSSYPRN.js';
-import '../chunk-SOO2G6CF.js';
-
-// src/ui/tokens.ts
-var VioTokens = {
-  color: {
-    text: {
-      primary: "#0a0a0a",
-      secondary: "#666666",
-      tertiary: "#999999",
-      onPrimary: "#ffffff"
-    },
-    accent: {
-      editorial: "#c14a3b"
-      // "REDAKSJONENS FAVORITTER" red
-    },
-    surface: {
-      base: "#ffffff",
-      muted: "#f2f2f2",
-      // product image background
-      hover: "#fafafa"
-    },
-    border: {
-      subtle: "#e5e5e5",
-      default: "#cccccc"
-    }
-  },
-  font: {
-    serif: '"Tinos", "Playfair Display", Georgia, serif',
-    sans: '"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif'
-  },
-  size: {
-    xs: "12px",
-    sm: "14px",
-    md: "16px",
-    lg: "20px",
-    xl: "24px",
-    "2xl": "32px",
-    "3xl": "40px"
-  },
-  weight: {
-    regular: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700
-  },
-  tracking: {
-    label: "0.1em",
-    // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)
-    title: "0"
-  },
-  lineHeight: {
-    tight: 1.1,
-    snug: 1.3,
-    normal: 1.5
-  },
-  space: {
-    xs: "4px",
-    sm: "8px",
-    md: "16px",
-    lg: "24px",
-    xl: "32px",
-    "2xl": "48px",
-    "3xl": "64px"
-  },
-  radius: {
-    none: "0",
-    sm: "2px",
-    md: "4px",
-    lg: "8px",
-    full: "9999px"
-  }
-};
-var VIO_TOKENS_CSS = `
-  :root {
-    /* color \u2014 text */
-    --vio-color-text:           ${VioTokens.color.text.primary};
-    --vio-color-text-secondary: ${VioTokens.color.text.secondary};
-    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};
-    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};
-
-    /* color \u2014 accent */
-    --vio-color-accent: ${VioTokens.color.accent.editorial};
-
-    /* color \u2014 surface */
-    --vio-color-surface:       ${VioTokens.color.surface.base};
-    --vio-color-surface-muted: ${VioTokens.color.surface.muted};
-    --vio-color-surface-hover: ${VioTokens.color.surface.hover};
-
-    /* color \u2014 border */
-    --vio-color-border:         ${VioTokens.color.border.subtle};
-    --vio-color-border-default: ${VioTokens.color.border.default};
-
-    /* font */
-    --vio-font-serif: ${VioTokens.font.serif};
-    --vio-font-sans:  ${VioTokens.font.sans};
-
-    /* size */
-    --vio-size-xs: ${VioTokens.size.xs};
-    --vio-size-sm: ${VioTokens.size.sm};
-    --vio-size-md: ${VioTokens.size.md};
-    --vio-size-lg: ${VioTokens.size.lg};
-    --vio-size-xl: ${VioTokens.size.xl};
-
-    /* tracking (uppercase letterspacing) */
-    --vio-tracking-label: ${VioTokens.tracking.label};
-
-    /* space */
-    --vio-space-xs: ${VioTokens.space.xs};
-    --vio-space-sm: ${VioTokens.space.sm};
-    --vio-space-md: ${VioTokens.space.md};
-    --vio-space-lg: ${VioTokens.space.lg};
-    --vio-space-xl: ${VioTokens.space.xl};
-
-    /* radius */
-    --vio-radius-sm: ${VioTokens.radius.sm};
-    --vio-radius-md: ${VioTokens.radius.md};
-    --vio-radius-lg: ${VioTokens.radius.lg};
-  }
-`;
-function injectTokens() {
-  if (typeof document === "undefined") return;
-  if (document.querySelector('style[data-vio="tokens"]') !== null) return;
-  const style = document.createElement("style");
-  style.setAttribute("data-vio", "tokens");
-  style.textContent = VIO_TOKENS_CSS;
-  document.head.appendChild(style);
-}
-injectTokens();
+import { registerVioElements } from '../chunk-V5ZQG2H5.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-V5ZQG2H5.js';
+import '../chunk-NP2KCM7X.js';
 
 // src/ui/index.ts
 registerVioElements();
-var VIO_UI_VERSION = "0.2.0";
+var VIO_UI_VERSION = "0.3.0";
 
-export { VIO_UI_VERSION, VioTokens };
+export { VIO_UI_VERSION };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/tokens.ts","../../src/ui/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Vio Design Tokens — editorial commerce aesthetic.\n *\n * Extracted from the Allermedia \"Mote & Livsstil\" reference (the target\n * pilot site). Mood: Vogue-like fashion magazine — serif headlines,\n * sans-serif body, near-monochrome palette, terracotta accent for\n * editorial labels (\"REDAKSJONENS FAVORITTER\").\n *\n * Tokens are exposed both as a typed TS object (`VioTokens`) and as\n * CSS custom properties on `:root` (auto-injected when this module is\n * imported in a browser). Consumers can override individual variables\n * to re-skin without touching SDK source.\n */\n\nexport const VioTokens = {\n  color: {\n    text: {\n      primary: '#0a0a0a',\n      secondary: '#666666',\n      tertiary: '#999999',\n      onPrimary: '#ffffff',\n    },\n    accent: {\n      editorial: '#c14a3b', // \"REDAKSJONENS FAVORITTER\" red\n    },\n    surface: {\n      base: '#ffffff',\n      muted: '#f2f2f2', // product image background\n      hover: '#fafafa',\n    },\n    border: {\n      subtle: '#e5e5e5',\n      default: '#cccccc',\n    },\n  },\n  font: {\n    serif: '\"Tinos\", \"Playfair Display\", Georgia, serif',\n    sans: '\"Inter\", -apple-system, \"Helvetica Neue\", Arial, sans-serif',\n  },\n  size: {\n    xs: '12px',\n    sm: '14px',\n    md: '16px',\n    lg: '20px',\n    xl: '24px',\n    '2xl': '32px',\n    '3xl': '40px',\n  },\n  weight: {\n    regular: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n  },\n  tracking: {\n    label: '0.1em', // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)\n    title: '0',\n  },\n  lineHeight: {\n    tight: 1.1,\n    snug: 1.3,\n    normal: 1.5,\n  },\n  space: {\n    xs: '4px',\n    sm: '8px',\n    md: '16px',\n    lg: '24px',\n    xl: '32px',\n    '2xl': '48px',\n    '3xl': '64px',\n  },\n  radius: {\n    none: '0',\n    sm: '2px',\n    md: '4px',\n    lg: '8px',\n    full: '9999px',\n  },\n} as const\n\n/**\n * CSS Custom Properties — generated from VioTokens. Injected once into\n * the document head on first import. Consumers can override any\n * `--vio-*` var on their root or component selector to customise.\n */\nconst VIO_TOKENS_CSS = `\n  :root {\n    /* color — text */\n    --vio-color-text:           ${VioTokens.color.text.primary};\n    --vio-color-text-secondary: ${VioTokens.color.text.secondary};\n    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};\n    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};\n\n    /* color — accent */\n    --vio-color-accent: ${VioTokens.color.accent.editorial};\n\n    /* color — surface */\n    --vio-color-surface:       ${VioTokens.color.surface.base};\n    --vio-color-surface-muted: ${VioTokens.color.surface.muted};\n    --vio-color-surface-hover: ${VioTokens.color.surface.hover};\n\n    /* color — border */\n    --vio-color-border:         ${VioTokens.color.border.subtle};\n    --vio-color-border-default: ${VioTokens.color.border.default};\n\n    /* font */\n    --vio-font-serif: ${VioTokens.font.serif};\n    --vio-font-sans:  ${VioTokens.font.sans};\n\n    /* size */\n    --vio-size-xs: ${VioTokens.size.xs};\n    --vio-size-sm: ${VioTokens.size.sm};\n    --vio-size-md: ${VioTokens.size.md};\n    --vio-size-lg: ${VioTokens.size.lg};\n    --vio-size-xl: ${VioTokens.size.xl};\n\n    /* tracking (uppercase letterspacing) */\n    --vio-tracking-label: ${VioTokens.tracking.label};\n\n    /* space */\n    --vio-space-xs: ${VioTokens.space.xs};\n    --vio-space-sm: ${VioTokens.space.sm};\n    --vio-space-md: ${VioTokens.space.md};\n    --vio-space-lg: ${VioTokens.space.lg};\n    --vio-space-xl: ${VioTokens.space.xl};\n\n    /* radius */\n    --vio-radius-sm: ${VioTokens.radius.sm};\n    --vio-radius-md: ${VioTokens.radius.md};\n    --vio-radius-lg: ${VioTokens.radius.lg};\n  }\n`\n\nfunction injectTokens(): void {\n  if (typeof document === 'undefined') return\n  if (document.querySelector('style[data-vio=\"tokens\"]') !== null) return\n  const style = document.createElement('style')\n  style.setAttribute('data-vio', 'tokens')\n  style.textContent = VIO_TOKENS_CSS\n  document.head.appendChild(style)\n}\n\ninjectTokens()\n","/**\n * Vio UI — Web Components + design tokens.\n *\n * Importing this file (directly or via the main `vio` entry) has two\n * side-effects:\n *   1. Injects design tokens as CSS custom properties on `:root`\n *   2. Registers all `<vio-*>` custom elements (via `registerVioElements()`)\n *\n * Registration goes through an explicit function call (see ./elements) so it\n * survives tree-shaking while keeping `./core` tree-shakeable.\n *\n * SSR-safe: every side-effect guards on `typeof document !== 'undefined'`.\n */\n\nimport './tokens.js'\nimport { registerVioElements } from './elements.js'\n\n// Auto-register on import, so the conventional `import '@vio-live/web-sdk/ui'`\n// keeps working. This call is what pins the registration into this entry.\nregisterVioElements()\n\nexport { VioTokens } from './tokens.js'\nexport {\n  registerVioElements,\n  VioProduct,\n  VioProductCarousel,\n  VioProductDetail,\n  VioCart,\n  VioCheckout,\n} from './elements.js'\n\nexport const VIO_UI_VERSION = '0.2.0'\n"]}
+{"version":3,"sources":["../../src/ui/index.ts"],"names":[],"mappings":";;;;;AAmBA,mBAAA,EAAoB;AAYb,IAAM,cAAA,GAAiB","file":"index.js","sourcesContent":["/**\n * Vio UI — Web Components + design tokens.\n *\n * Importing this file (directly or via the main `vio` entry) has two\n * side-effects:\n *   1. Injects design tokens as CSS custom properties on `:root`\n *   2. Registers all `<vio-*>` custom elements (via `registerVioElements()`)\n *\n * Registration goes through an explicit function call (see ./elements) so it\n * survives tree-shaking while keeping `./core` tree-shakeable.\n *\n * SSR-safe: every side-effect guards on `typeof document !== 'undefined'`.\n */\n\nimport './tokens.js'\nimport { registerVioElements } from './elements.js'\n\n// Auto-register on import, so the conventional `import '@vio-live/web-sdk/ui'`\n// keeps working. This call is what pins the registration into this entry.\nregisterVioElements()\n\nexport { VioTokens, applyVioTheme, type VioThemeOverrides } from './tokens.js'\nexport {\n  registerVioElements,\n  VioProduct,\n  VioProductCarousel,\n  VioProductDetail,\n  VioCart,\n  VioCheckout,\n} from './elements.js'\n\nexport const VIO_UI_VERSION = '0.3.0'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vio-live/web-sdk",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Vio Web SDK — in-site shoppable + native checkout, designed for editorial commerce sites",
   "type": "module",
   "main": "./dist/index.js",