@jobber/design 0.101.1-chorecomp-aaf4bc5.3 → 0.101.1

package/dist/index.cjs

@@ -2729,8 +2729,14 @@ const tokenStyleToCss = (token) => {
     const tokenAsString = typeof token === "string" ? token : token === null || token === void 0 ? void 0 : token.toString();
     return ((tokenAsString === null || tokenAsString === void 0 ? void 0 : tokenAsString.replace(/\{/g, "var(--").replace(/\./g, "-").replace(/\}/g, ")")) || "");
 };
-const tokenStyleToJs = (token) => {
-    const tokenKey = (token === null || token === void 0 ? void 0 : token.replace(/}/g, "").replace(/{/g, "").replace(/\./g, "-")) || "";
+// Convert a token reference like `"{color.icon}"` into the flat token key
+// `"color-icon"` used by `tokens` / `allColors`.
+const tokenReferenceToKey = (token) => (token === null || token === void 0 ? void 0 : token.replace(/[{}]/g, "").replace(/\./g, "-")) || "";
+const tokenStyleToJs = (token, tokens) => {
+    const tokenKey = tokenReferenceToKey(token);
+    const liveValue = tokens === null || tokens === void 0 ? void 0 : tokens[tokenKey];
+    if (typeof liveValue === "string" && liveValue)
+        return liveValue;
     return allColors[tokenKey] || "";
 };
 function buildSVGStyle(size, specialIconStyle, platform) {
@@ -2754,7 +2760,7 @@ function buildPathStyle(color, specialIconStyle) {
     };
 }
 // eslint-disable-next-line max-statements
-function getIcon({ name, color, platform, size = "base", format = "css", }) {
+function getIcon({ name, color, platform, size = "base", format = "css", tokens, }) {
     const platformIconStyles = getIconStyles(platform);
     const { paths, viewBox } = getPaths(name);
     let specialIconStyle = {};
@@ -2764,8 +2770,8 @@ function getIcon({ name, color, platform, size = "base", format = "css", }) {
     const svgStyle = buildSVGStyle(size, specialIconStyle, platform);
     const pathStyle = buildPathStyle(color, specialIconStyle);
     if (format === "js") {
-        pathStyle.fill = tokenStyleToJs(pathStyle.fill);
-        svgStyle.fill = tokenStyleToJs(svgStyle.fill);
+        pathStyle.fill = tokenStyleToJs(pathStyle.fill, tokens);
+        svgStyle.fill = tokenStyleToJs(svgStyle.fill, tokens);
     }
     else {
         pathStyle.fill = tokenStyleToCss(pathStyle.fill);

package/dist/index.d.ts

@@ -31,8 +31,15 @@ interface IconProps {
 interface GetIconProps extends IconProps {
     platform: "web" | "mobile";
     format?: "css" | "js";
+    /**
+     * Live theme tokens used to resolve token references at render time.
+     * When supplied (mobile/`format: "js"` consumers), color references resolve
+     * against these instead of the light-only `allColors` map. Ignored for
+     * `format: "css"` — web uses CSS variables that resolve at runtime.
+     */
+    tokens?: Record<string, unknown>;
 }
-export declare function getIcon({ name, color, platform, size, format, }: GetIconProps): {
+export declare function getIcon({ name, color, platform, size, format, tokens, }: GetIconProps): {
     readonly svgStyle: {
         fill?: string;
         width: number;

package/dist/index.mjs

@@ -2727,8 +2727,14 @@ const tokenStyleToCss = (token) => {
     const tokenAsString = typeof token === "string" ? token : token === null || token === void 0 ? void 0 : token.toString();
     return ((tokenAsString === null || tokenAsString === void 0 ? void 0 : tokenAsString.replace(/\{/g, "var(--").replace(/\./g, "-").replace(/\}/g, ")")) || "");
 };
-const tokenStyleToJs = (token) => {
-    const tokenKey = (token === null || token === void 0 ? void 0 : token.replace(/}/g, "").replace(/{/g, "").replace(/\./g, "-")) || "";
+// Convert a token reference like `"{color.icon}"` into the flat token key
+// `"color-icon"` used by `tokens` / `allColors`.
+const tokenReferenceToKey = (token) => (token === null || token === void 0 ? void 0 : token.replace(/[{}]/g, "").replace(/\./g, "-")) || "";
+const tokenStyleToJs = (token, tokens) => {
+    const tokenKey = tokenReferenceToKey(token);
+    const liveValue = tokens === null || tokens === void 0 ? void 0 : tokens[tokenKey];
+    if (typeof liveValue === "string" && liveValue)
+        return liveValue;
     return allColors[tokenKey] || "";
 };
 function buildSVGStyle(size, specialIconStyle, platform) {
@@ -2752,7 +2758,7 @@ function buildPathStyle(color, specialIconStyle) {
     };
 }
 // eslint-disable-next-line max-statements
-function getIcon({ name, color, platform, size = "base", format = "css", }) {
+function getIcon({ name, color, platform, size = "base", format = "css", tokens, }) {
     const platformIconStyles = getIconStyles(platform);
     const { paths, viewBox } = getPaths(name);
     let specialIconStyle = {};
@@ -2762,8 +2768,8 @@ function getIcon({ name, color, platform, size = "base", format = "css", }) {
     const svgStyle = buildSVGStyle(size, specialIconStyle, platform);
     const pathStyle = buildPathStyle(color, specialIconStyle);
     if (format === "js") {
-        pathStyle.fill = tokenStyleToJs(pathStyle.fill);
-        svgStyle.fill = tokenStyleToJs(svgStyle.fill);
+        pathStyle.fill = tokenStyleToJs(pathStyle.fill, tokens);
+        svgStyle.fill = tokenStyleToJs(svgStyle.fill, tokens);
     }
     else {
         pathStyle.fill = tokenStyleToCss(pathStyle.fill);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/design",
-  "version": "0.101.1-chorecomp-aaf4bc5.3+aaf4bc51",
+  "version": "0.101.1",
   "description": "Design foundation for the Jobber Atlantis Design System",
   "license": "MIT",
   "type": "module",
@@ -71,5 +71,5 @@
     "rrweb-cssom": "^0.7.1",
     "tsx": "^4.16.2"
   },
-  "gitHead": "aaf4bc51d72500e54945f3734a7078fe2d901c59"
+  "gitHead": "7b859533f0b0482ad30654fb0fde5d41c2d918ba"
 }