wg-design 0.0.7 → 0.0.8

package/dist/runtime.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=e=>{let t=e.replace(`#`,``);return[parseInt(t.substring(0,2),16),parseInt(t.substring(2,4),16),parseInt(t.substring(4,6),16)]},t=(e,t,n)=>`#`+[e,t,n].map(e=>{let t=Math.max(0,Math.min(255,Math.round(e))).toString(16);return t.length===1?`0`+t:t}).join(``),n=(n,r)=>{let[i,a,o]=e(n),s=r<0?0:255,c=Math.abs(r);return t(i+c*(s-i),a+c*(s-a),o+c*(s-o))},r=e=>({main:e,50:n(e,.85),100:n(e,.7),150:n(e,.6),200:n(e,.5),300:n(e,.35),400:n(e,.2),500:n(e,0),600:n(e,-.15),700:n(e,-.3),750:n(e,-.4),800:n(e,-.5),850:n(e,-.6),900:n(e,-.7)});function i(e,t){let n=r(t.primary),i=r(t.secondary);for(let[t,r]of Object.entries(n))t!==`main`&&e.style.setProperty(`--color-primary-${t}`,r);for(let[t,n]of Object.entries(i))t!==`main`&&e.style.setProperty(`--color-secondary-${t}`,n)}exports.applyTheme=i;

package/dist/runtime.d.ts

@@ -0,0 +1,2 @@
+export * from './src/runtime/index'
+export {}

package/dist/runtime.mjs

@@ -0,0 +1,41 @@
+//#region src/runtime/index.ts
+var e = (e) => {
+	let t = e.replace("#", "");
+	return [
+		parseInt(t.substring(0, 2), 16),
+		parseInt(t.substring(2, 4), 16),
+		parseInt(t.substring(4, 6), 16)
+	];
+}, t = (e, t, n) => "#" + [
+	e,
+	t,
+	n
+].map((e) => {
+	let t = Math.max(0, Math.min(255, Math.round(e))).toString(16);
+	return t.length === 1 ? "0" + t : t;
+}).join(""), n = (n, r) => {
+	let [i, a, o] = e(n), s = r < 0 ? 0 : 255, c = Math.abs(r);
+	return t(i + c * (s - i), a + c * (s - a), o + c * (s - o));
+}, r = (e) => ({
+	main: e,
+	50: n(e, .85),
+	100: n(e, .7),
+	150: n(e, .6),
+	200: n(e, .5),
+	300: n(e, .35),
+	400: n(e, .2),
+	500: n(e, 0),
+	600: n(e, -.15),
+	700: n(e, -.3),
+	750: n(e, -.4),
+	800: n(e, -.5),
+	850: n(e, -.6),
+	900: n(e, -.7)
+});
+function i(e, t) {
+	let n = r(t.primary), i = r(t.secondary);
+	for (let [t, r] of Object.entries(n)) t !== "main" && e.style.setProperty(`--color-primary-${t}`, r);
+	for (let [t, n] of Object.entries(i)) t !== "main" && e.style.setProperty(`--color-secondary-${t}`, n);
+}
+//#endregion
+export { i as applyTheme };

package/dist/src/runtime/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Runtime helpers for applying brand themes to wg-design components.
+ * Brand themes in broker are defined by 2 variabled, primary, secondary.
+ *
+ * End users import this file and get will get their colors set up correctly.
+ *
+ * The scale generation is copied from existing broker platform code
+ */
+type ApplyThemeInput = {
+    primary: string;
+    secondary: string;
+};
+/**
+ * Write a brand's primary + secondary scales to `target` as CSS custom
+ * properties. Each colour is expanded into the 13 stops wg-design uses
+ * internally (50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 850,
+ * 900). Existing wg-design components read these variables via Tailwind
+ * utilities — no React re-render is required.
+ *
+ * Accepts hex strings with or without a leading `#`.
+ *
+ * @example
+ *   applyTheme(document.documentElement, {
+ *     primary: '#CC3333',
+ *     secondary: '#F5F5F5',
+ *   });
+ */
+export declare function applyTheme(target: HTMLElement, theme: ApplyThemeInput): void;
+export type { ApplyThemeInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wg-design",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -11,7 +11,12 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
-    "./style.css": "./dist/wg-design.css"
+    "./style.css": "./dist/wg-design.css",
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.mjs",
+      "require": "./dist/runtime.cjs"
+    }
   },
   "bin": {
     "wg-design-check-tokens": "./bin/check-design-tokens.mjs"