@colixsystems/widget-sdk 0.15.0 → 0.16.0

package/README.md

@@ -6,7 +6,15 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.15.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.16.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.16.0
+
+REQ-THEME — the tenant's **Theme Settings** now flow all the way into `useTheme()`.
+
+- **`themeTokens.colors` gains `secondary` + `onSecondary`.** `useTheme().colors.secondary` reflects the tenant's *Secondary Color* picker (with `onSecondary` as its readable contrast color), alongside the existing `primary` / `onPrimary`. Built-in widgets like Button use it for their secondary variant; third-party widgets can use it for a branded second accent. The full `colors` shape is now `{ primary, onPrimary, secondary, onSecondary, surface, onSurface, surfaceMuted, onSurfaceMuted, border, danger, success, warning, info }`.
+- **`colors.primary` / `colors.secondary` / `typography.fontFamily` are tenant-resolved.** The host maps the Studio Theme Settings blob (Primary Color, Secondary Color, Global Font) onto the default tokens before handing them to `useTheme()`, on both the live Player and the exported app — so a widget that reads tokens re-themes automatically. (Custom Google fonts render in the Player today; the exported app falls back to the system face for non-system fonts until font bundling lands.)
+- **`CONTRACT.version` → `1.6.0`** (additive: two new `themeTokens.colors` keys). No existing export changed signature.
 
 ### What's new in 0.15.0
 

package/dist/contract.cjs

@@ -12,6 +12,8 @@ const DEFAULT_THEME_TOKENS = Object.freeze({
   colors: Object.freeze({
     primary: "#ff6b5b",
     onPrimary: "#ffffff",
+    secondary: "#475569",
+    onSecondary: "#ffffff",
     surface: "#ffffff",
     onSurface: "#111827",
     surfaceMuted: "#f8fafc",
@@ -37,7 +39,7 @@ const HOOKS = [
     signature: "useTheme()",
     returnShape: {
       colors:
-        "{ primary, onPrimary, surface, onSurface, surfaceMuted, onSurfaceMuted, border, danger, success, warning, info }",
+        "{ primary, onPrimary, secondary, onSecondary, surface, onSurface, surfaceMuted, onSurfaceMuted, border, danger, success, warning, info }",
       spacing: "{ xs, sm, md, lg, xl }",
       radii: "{ sm, md, lg, pill }",
       typography: "{ fontFamily, sizes: { xs, sm, md, lg, xl, xxl } }",
@@ -830,7 +832,12 @@ const CONTRACT = deepFreeze({
   // Permissive-direction change: minor bump on the contract's own
   // versioning (per CLAUDE.md §4, pre-1.0 minor is the breaking channel —
   // the package.json version bumps accordingly).
-  version: "1.5.0",
+  //
+  // 1.6.0: additive — `themeTokens.colors` gains `secondary` + `onSecondary`
+  // so the tenant's Theme Settings "Secondary Color" flows through
+  // `useTheme().colors.secondary` (Button secondary variant + any widget
+  // that wants the brand's second accent).
+  version: "1.6.0",
   hooks: HOOKS,
   primitives: PRIMITIVES,
   manifestSchema: MANIFEST_SCHEMA,

package/dist/contract.js

@@ -12,6 +12,8 @@ const DEFAULT_THEME_TOKENS = Object.freeze({
   colors: Object.freeze({
     primary: "#ff6b5b",
     onPrimary: "#ffffff",
+    secondary: "#475569",
+    onSecondary: "#ffffff",
     surface: "#ffffff",
     onSurface: "#111827",
     surfaceMuted: "#f8fafc",
@@ -37,7 +39,7 @@ const HOOKS = [
     signature: "useTheme()",
     returnShape: {
       colors:
-        "{ primary, onPrimary, surface, onSurface, surfaceMuted, onSurfaceMuted, border, danger, success, warning, info }",
+        "{ primary, onPrimary, secondary, onSecondary, surface, onSurface, surfaceMuted, onSurfaceMuted, border, danger, success, warning, info }",
       spacing: "{ xs, sm, md, lg, xl }",
       radii: "{ sm, md, lg, pill }",
       typography: "{ fontFamily, sizes: { xs, sm, md, lg, xl, xxl } }",
@@ -786,7 +788,7 @@ function deepFreeze(value) {
 }
 
 const CONTRACT = deepFreeze({
-  version: "1.5.0",
+  version: "1.6.0",
   hooks: HOOKS,
   primitives: PRIMITIVES,
   manifestSchema: MANIFEST_SCHEMA,

package/dist/index.d.ts

@@ -152,6 +152,9 @@ export interface WidgetManifest {
 export interface ThemeTokens {
   colors: {
     primary: string;
+    onPrimary: string;
+    secondary: string;
+    onSecondary: string;
     surface: string;
     onSurface: string;
     danger: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "type": "module",
   "main": "./dist/index.js",