@souldi/try-on 0.4.5 → 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## 0.5.0
+
+**Breaking.** `init({ appearance })` replaces the `theme` option.
+
+- **New: `appearance`.** `init({ appearance: { ink, fill, corners, font } })` styles the try-on button, the result dialog and the sign-in and upload screens. It is the same closed set of values a Shopify merchant sets on the Souldi block. Missing or unknown values fall back to the defaults, one by one, and never throw. See [Appearance](README.md#appearance).
+- **Removed: `theme`.** Its properties (`mode`, `accentColor`, `accentTextColor`, `borderRadius`, `fontFamily`, `headingFontFamily`, `buttonOutlineColor`) are gone, not deprecated. A `theme` that is still passed is ignored and logs one console warning.
+- **Removed: dark mode.** The widget is light-only, like its result dialog. An embedder who passed `theme: { mode: 'dark' }` now gets the light sign-in and upload screens.
+- **Contrast is reported, never corrected.** The `ink` is used as given. If it is below 4.5:1 against white, the widget logs one console warning.
+
+**CDN embedders get this on the day it is published.** The README's script tag, `https://unpkg.com/@souldi/try-on/dist/widget.umd.js`, names no version, so it serves the newest release. To stay on 0.4 while you move from `theme` to `appearance`, pin the version in the URL (`https://unpkg.com/@souldi/try-on@0.4/dist/widget.umd.js`) or in your `package.json`.

package/README.md

@@ -97,7 +97,7 @@ Call once per page load to configure the widget.
 | Option | Type | Required | Description |
 |--------|------|----------|-------------|
 | `tenantApiKey` | `string` | Yes | Your publishable API key (from your Souldi dashboard) |
-| `theme` | `object` | No | Customize the widget appearance ([see Theming](#theming)) |
+| `appearance` | `object` | No | How the widget looks: ink, fill, corners and font ([see Appearance](#appearance)) |
 | `fontsUrl` | `string` | No | Where you serve the package's `dist/fonts` directory, to load the fonts from your own origin instead of unpkg ([see Fonts](#fonts)) |
 | `declareFonts` | `boolean` | No | Default `true`: the widget declares its fonts in your page ([see Fonts](#fonts)). Pass `false` only if your page already declares them |
 | `onGenerationStart` | `function(info)` | No | Called when AI generation begins |
@@ -222,51 +222,40 @@ It returns a handle for that button. Among its methods:
 
 ---
 
-## Theming
+## Appearance
 
-The widget ships with **dark** and **light** themes and supports deep customization to match your store's brand.
-
-### Theme Modes
+One **appearance** styles the whole widget: the try-on button, the result dialog, and the sign-in and upload screens. It is the same closed set of choices a Shopify merchant makes on the Souldi block, so every embed has one appearance contract.
 
 ```javascript
 VirtualTryOn.init({
   tenantApiKey: 'your_key',
-  theme: {
-    mode: 'light',  // 'dark' (default) or 'light'
+  appearance: {
+    ink: '#7A1F5C',      // your brand colour, as six hex digits
+    fill: 'filled',      // 'outlined' (default) or 'filled'
+    corners: 'rounded',  // 'square' (default), 'rounded' or 'pill'
+    font: 'theme',       // 'souldi' (default) or 'theme'
   },
 });
 ```
 
-### Custom Brand Colors
+| Property | Values | Default | What it does |
+|----------|--------|---------|--------------|
+| `ink` | `#rrggbb` | `#1F201F` | Colours the accents only: the primary action, selected states, the size stamp and focus rings. Never body text. |
+| `fill` | `'outlined'` \| `'filled'` | `'outlined'` | The primary action is the ink on white (outlined) or white on the ink (filled). Secondary actions stay outlined. |
+| `corners` | `'square'` \| `'rounded'` \| `'pill'` | `'square'` | Buttons take the shape as chosen. Cards and sheets cap it (0, 12px and 20px), so a dialog never turns into an oval. |
+| `font` | `'souldi'` \| `'theme'` | `'souldi'` | The widget's own faces ([see Fonts](#fonts)), or your page's font, inherited everywhere, headings included. |
 
-Override individual properties to match your brand:
+Each value is checked on its own. A missing or unknown value falls back to its default and never throws, so a typo can't break your page. An `ink` that isn't six hex digits (`#FFF`, `red`) falls back to the default ink.
 
-```javascript
-VirtualTryOn.init({
-  tenantApiKey: 'your_key',
-  theme: {
-    mode: 'dark',
-    accentColor: '#7C3AED',          // Primary button & accent color
-    accentTextColor: '#FFFFFF',       // Text color on accent buttons
-    borderRadius: '8px',             // Border radius for cards & modals
-    fontFamily: '"Inter", sans-serif',
-    headingFontFamily: '"Playfair Display", serif',
-    buttonOutlineColor: '#7C3AED',   // Outline on the split button
-  },
-});
-```
+**Pick an ink that reads on white.** The ink is used exactly as you give it. If it is below 4.5:1 contrast against white (the WCAG AA minimum for text), the widget logs one console warning and still uses it. It doesn't darken the colour for you.
 
-### Available Theme Options
+There is no `size` option. One that is passed is ignored.
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `mode` | `'dark' \| 'light'` | `'dark'` | Base color palette |
-| `accentColor` | CSS color | `#5e8b5c` (dark) / `#1F201F` (light) | Primary action color on the sign-in and upload screens |
-| `accentTextColor` | CSS color | `#193620` (dark) / `#FFFFFF` (light) | Text on accent buttons |
-| `borderRadius` | CSS value | `0` (square) | Corner rounding for buttons; cards take about 1.7× it |
-| `fontFamily` | CSS font stack | `'Souldi Manrope', system-ui, sans-serif` | Body text font |
-| `headingFontFamily` | CSS font stack | `'Souldi Newsreader', serif` | Heading font |
-| `buttonOutlineColor` | CSS color | `transparent` | Border color on the try-on button |
+> **Removed in 0.5.0:** `theme` (`mode`, `accentColor`, `accentTextColor`,
+> `borderRadius`, `fontFamily`, `headingFontFamily`, `buttonOutlineColor`) and
+> the dark mode it selected. The widget is light-only. A `theme` that is still
+> passed is ignored and logs one console warning. Move to `appearance`. See the
+> [changelog](CHANGELOG.md).
 
 All UI is rendered inside a **Shadow DOM**, so your site's CSS will never leak into the widget and the widget will never break your styles.
 
@@ -309,7 +298,7 @@ The widget then contacts no one but you for its fonts, and a `font-src 'self'` p
   <script>
     VirtualTryOn.init({
       tenantApiKey: 'pk_live_abc123',
-      theme: { mode: 'light', accentColor: '#2563EB' },
+      appearance: { ink: '#2563EB', corners: 'rounded' },
       onGenerationSuccess: (url) => {
         console.log('Try-on result:', url);
       },