@vio-live/web-sdk 0.3.0 → 0.4.1

package/README.md

@@ -24,10 +24,37 @@ import '@vio-live/web-sdk/ui'   // registers <vio-product-carousel>, <vio-cart>,
 
 Vio.init({
   apiKey: import.meta.env.VITE_VIO_API_KEY,
-  // apiBase, graphqlBase, stripePublishableKey — optional overrides
+  environment: 'production', // 'development' | 'testing' | 'production'
 })
 ```
 
+`environment` is the recommended way to configure — it resolves the right
+`apiBase`/`graphQLBase` for you (each environment has known-good defaults
+baked in). Note the middle value is **`'testing'`, not `'staging'`**
+(naming kept in parity with the iOS SDK).
+
+Only pass `apiBase`/`graphQLBase`/`stripePublishableKey` directly if you need
+to override those specific values — e.g. a self-hosted proxy, or a Stripe key
+that differs from the environment default:
+
+```ts
+Vio.init({
+  apiKey: '…',
+  environment: 'production',
+  apiBase: 'https://my-proxy.example.com',       // optional, overrides the environment default
+  graphQLBase: 'https://my-graphql.example.com', // optional — note the casing: graphQLBase
+  stripePublishableKey: 'pk_live_…',             // optional — needed for the Apple Pay button
+})
+```
+
+**Apple Pay note**: the button only renders when `canMakePayment()` says the
+device+browser can pay AND your domain is verified for Apple Pay in Stripe's
+dashboard (Settings → Payment method domains) — Stripe serves a verification
+file at `/.well-known/apple-developer-merchantid-domain-association` on that
+domain. Not all hosts let you serve that file (some page builders can't) —
+if the button never appears, check domain verification before assuming it's
+a code bug.
+
 ```html
 <vio-product-carousel
   label="Ukens funn"
@@ -51,7 +78,7 @@ Typed wrappers (built on `@lit/react`). Importing this entry **registers the ele
 import { Vio } from '@vio-live/web-sdk'
 import { VioProductCarousel, VioCart } from '@vio-live/web-sdk/react'
 
-Vio.init({ apiKey: '…' })
+Vio.init({ apiKey: '…', environment: 'production' })
 
 function Shop() {
   return (
@@ -70,6 +97,43 @@ function Shop() {
 
 Wrappers: `VioProduct`, `VioProductCarousel`, `VioProductDetail`, `VioCart`, `VioCheckout`.
 
+## Theming
+
+Every component reads its colors and fonts from `--vio-*` CSS custom properties
+(shadow DOM inherits these from the light DOM, so this reaches every component,
+including the Apple Pay/Klarna/Vipps panels). `applyVioTheme` is the one
+supported way to override them — don't set `--vio-*` properties by hand, and
+don't rely on the internal variable names staying stable across versions:
+
+```ts
+import { applyVioTheme } from '@vio-live/web-sdk/ui' // or '/react'
+
+applyVioTheme({
+  colorAccent: '#0044ff',
+  colorText: '#111111',
+  fontSerif: '"Playfair Display", Georgia, serif',
+  fontSans: '"Inter", sans-serif',
+})
+```
+
+A curated set on purpose — colors + fonts, not the full internal token list
+(spacing/radius/sizes stay implementation detail). Call it again any time
+(e.g. after a user picks a different brand color in a settings UI) — pass
+`null`/`undefined` for a key to revert it to the SDK default instead of
+leaving a stale override behind:
+
+```ts
+applyVioTheme({ colorAccent: null }) // back to the default #c14a3b
+```
+
+By default it sets the override on `document.documentElement` (`:root`, the
+whole page). Pass a second argument to scope it to one element instead —
+useful if you show multiple differently-branded sponsors on the same page:
+
+```ts
+applyVioTheme({ colorAccent: '#ff6600' }, document.getElementById('sponsor-2'))
+```
+
 ## Headless / SSR
 
 The root and `/core` entries export the framework-agnostic core with **no DOM side-effects** — SSR-safe and **tree-shakeable** (importing one helper pulls only that helper, ~0.5 kB):

package/dist/{chunk-NWORYWIL.js → chunk-V5ZQG2H5.js}

@@ -2,6 +2,158 @@ import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency,
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.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();
+var THEME_KEY_TO_CSS_VAR = {
+  colorText: "--vio-color-text",
+  colorTextSecondary: "--vio-color-text-secondary",
+  colorTextTertiary: "--vio-color-text-tertiary",
+  colorTextOnPrimary: "--vio-color-text-on-primary",
+  colorAccent: "--vio-color-accent",
+  colorSurface: "--vio-color-surface",
+  colorSurfaceMuted: "--vio-color-surface-muted",
+  colorSurfaceHover: "--vio-color-surface-hover",
+  colorBorder: "--vio-color-border",
+  colorBorderDefault: "--vio-color-border-default",
+  fontSerif: "--vio-font-serif",
+  fontSans: "--vio-font-sans"
+};
+function applyVioTheme(overrides, target = typeof document !== "undefined" ? document.documentElement : null) {
+  if (!target) return;
+  for (const key of Object.keys(THEME_KEY_TO_CSS_VAR)) {
+    const cssVar = THEME_KEY_TO_CSS_VAR[key];
+    const value = overrides[key];
+    if (value) {
+      target.style.setProperty(cssVar, value);
+    } else if (key in overrides) {
+      target.style.removeProperty(cssVar);
+    }
+  }
+}
 var VioProduct = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -4217,6 +4369,6 @@ function registerVioElements() {
   }
 }
 
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, registerVioElements };
-//# sourceMappingURL=chunk-NWORYWIL.js.map
-//# sourceMappingURL=chunk-NWORYWIL.js.map
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
+//# sourceMappingURL=chunk-V5ZQG2H5.js.map
+//# sourceMappingURL=chunk-V5ZQG2H5.js.map