@kaizen/design-tokens 3.1.0

package/src/lib/__tests__/themeForTesting.d.ts

@@ -0,0 +1,38 @@
+export declare const themeForTesting: {
+    readonly border: {
+        readonly dashed: {
+            readonly borderWidth: "2px";
+            readonly red: "red";
+        };
+    };
+    readonly color: {
+        readonly gray: {
+            readonly 100: "#eee";
+            readonly 200: "#ccc";
+        };
+        readonly purple: {
+            readonly 100: "#eee";
+            readonly 200: "#ccc";
+        };
+        readonly blue: {
+            readonly 100: "#eee";
+            readonly 200: "#ccc";
+        };
+        readonly red: {
+            readonly 100: "#eee";
+            readonly 200: "#ccc";
+        };
+        readonly yellow: {
+            readonly 100: "#eee";
+            readonly 200: "#ccc";
+        };
+        readonly orange: {
+            readonly 100: "#eee";
+            readonly 200: "#ccc";
+        };
+        readonly green: {
+            readonly 100: "#eee";
+            readonly 200: "#ccc";
+        };
+    };
+};

package/src/lib/__tests__/themeForTesting.js

@@ -0,0 +1,21 @@
+"use strict";
+exports.__esModule = true;
+exports.themeForTesting = void 0;
+exports.themeForTesting = {
+    border: {
+        dashed: {
+            borderWidth: "2px",
+            red: "red"
+        }
+    },
+    color: {
+        gray: { 100: "#eee", 200: "#ccc" },
+        purple: { 100: "#eee", 200: "#ccc" },
+        blue: { 100: "#eee", 200: "#ccc" },
+        red: { 100: "#eee", 200: "#ccc" },
+        yellow: { 100: "#eee", 200: "#ccc" },
+        orange: { 100: "#eee", 200: "#ccc" },
+        green: { 100: "#eee", 200: "#ccc" }
+    }
+};
+//# sourceMappingURL=themeForTesting.js.map

package/src/lib/__tests__/themeForTesting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeForTesting.js","sourceRoot":"","sources":["themeForTesting.ts"],"names":[],"mappings":";;;AAAa,QAAA,eAAe,GAAG;IAC7B,MAAM,EAAE;QACN,MAAM,EAAE;YACN,WAAW,EAAE,KAAK;YAClB,GAAG,EAAE,KAAK;SACX;KACF;IACD,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;QAClC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;QACpC,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;QAClC,GAAG,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;QACjC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;QACpC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;QACpC,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;KACpC;CACO,CAAA"}

package/src/lib/__tests__/themeForTesting.ts

@@ -0,0 +1,17 @@
+export const themeForTesting = {
+  border: {
+    dashed: {
+      borderWidth: "2px",
+      red: "red",
+    },
+  },
+  color: {
+    gray: { 100: "#eee", 200: "#ccc" },
+    purple: { 100: "#eee", 200: "#ccc" },
+    blue: { 100: "#eee", 200: "#ccc" },
+    red: { 100: "#eee", 200: "#ccc" },
+    yellow: { 100: "#eee", 200: "#ccc" },
+    orange: { 100: "#eee", 200: "#ccc" },
+    green: { 100: "#eee", 200: "#ccc" },
+  },
+} as const

package/src/lib/addExtraThemeEntries.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Use this to generate an object containing `${key}: value`, `${key}-rgb: r, g, b`, and/or `${key}-id: --color-blah-XXX`.
+ * This is for adding extra neighbouring properties to a theme.
+ * For example:
+ *  Input:
+ *    path: [color, purple, 100]
+ *    key: 100
+ *    value: #f0f1f4
+ *    printValue: (path, v) => `var(--some-key, ${v})`
+ *    options: {augmentWithId: true}
+ *
+ *  Output: {
+ *    "100": "var(--some-key, #f0f1f4)",
+ *    "100-rgb": "var(--some-key, 240, 241, 244)",
+ *    "100-id": "--color-purple-100"
+ *    "100-rgb-id": "--color-purple-100-rgb"
+ *  }
+ */
+export declare const addExtraThemeEntries: (path: string[], key: string, value: unknown, printValue: <I>(path: string[], value: I) => string, { augmentWithId, }: {
+    /** Setting this to true will add `${key}-id` and ${key}-rgb-id` */
+    augmentWithId: boolean;
+}) => {
+    [x: string]: string;
+};

package/src/lib/addExtraThemeEntries.js

@@ -0,0 +1,57 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.addExtraThemeEntries = void 0;
+var color_string_1 = __importDefault(require("color-string"));
+var cssVariables_1 = require("./cssVariables");
+/**
+ * Use this to generate an object containing `${key}: value`, `${key}-rgb: r, g, b`, and/or `${key}-id: --color-blah-XXX`.
+ * This is for adding extra neighbouring properties to a theme.
+ * For example:
+ *  Input:
+ *    path: [color, purple, 100]
+ *    key: 100
+ *    value: #f0f1f4
+ *    printValue: (path, v) => `var(--some-key, ${v})`
+ *    options: {augmentWithId: true}
+ *
+ *  Output: {
+ *    "100": "var(--some-key, #f0f1f4)",
+ *    "100-rgb": "var(--some-key, 240, 241, 244)",
+ *    "100-id": "--color-purple-100"
+ *    "100-rgb-id": "--color-purple-100-rgb"
+ *  }
+ */
+exports.addExtraThemeEntries = function (path, key, value, printValue, _a) {
+    var _b;
+    var augmentWithId = _a.augmentWithId;
+    var colorRgb = typeof value === "string" ? color_string_1["default"].get.rgb(value) : null;
+    var result = (_b = {},
+        _b[key] = printValue(path, value),
+        _b);
+    // Add the -rgb key containing the RGB triple of the color (if it is a color)
+    if (colorRgb) {
+        // If the value is a color, always convert to lowercase
+        result[key] = printValue(path, value).toLowerCase();
+        var rgbPath = __spreadArrays(path, ["rgb"]);
+        var rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "));
+        result[key + "-rgb"] = rgbTriple;
+        if (augmentWithId) {
+            result[key + "-rgb-id"] = cssVariables_1.objectPathToCssVarIdentifier(rgbPath);
+        }
+    }
+    if (augmentWithId) {
+        result[key + "-id"] = cssVariables_1.objectPathToCssVarIdentifier(path);
+    }
+    return result;
+};
+//# sourceMappingURL=addExtraThemeEntries.js.map

package/src/lib/addExtraThemeEntries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addExtraThemeEntries.js","sourceRoot":"","sources":["addExtraThemeEntries.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,8DAAsC;AACtC,+CAA6D;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACU,QAAA,oBAAoB,GAAG,UAClC,IAAc,EACd,GAAW,EACX,KAAc,EACd,UAAmD,EACnD,EAKC;;QAJC,aAAa,mBAAA;IAMf,IAAM,QAAQ,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,yBAAW,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAC9E,IAAM,MAAM;QACV,GAAC,GAAG,IAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;WAC/B,CAAA;IAED,6EAA6E;IAC7E,IAAI,QAAQ,EAAE;QACZ,uDAAuD;QACvD,MAAM,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAA;QAEnD,IAAM,OAAO,kBAAO,IAAI,GAAE,KAAK,EAAC,CAAA;QAChC,IAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACtE,MAAM,CAAI,GAAG,SAAM,CAAC,GAAG,SAAS,CAAA;QAChC,IAAI,aAAa,EAAE;YACjB,MAAM,CAAI,GAAG,YAAS,CAAC,GAAG,2CAA4B,CAAC,OAAO,CAAC,CAAA;SAChE;KACF;IACD,IAAI,aAAa,EAAE;QACjB,MAAM,CAAI,GAAG,QAAK,CAAC,GAAG,2CAA4B,CAAC,IAAI,CAAC,CAAA;KACzD;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA"}

package/src/lib/addExtraThemeEntries.ts

@@ -0,0 +1,56 @@
+import colorString from "color-string"
+import { objectPathToCssVarIdentifier } from "./cssVariables"
+
+/**
+ * Use this to generate an object containing `${key}: value`, `${key}-rgb: r, g, b`, and/or `${key}-id: --color-blah-XXX`.
+ * This is for adding extra neighbouring properties to a theme.
+ * For example:
+ *  Input:
+ *    path: [color, purple, 100]
+ *    key: 100
+ *    value: #f0f1f4
+ *    printValue: (path, v) => `var(--some-key, ${v})`
+ *    options: {augmentWithId: true}
+ *
+ *  Output: {
+ *    "100": "var(--some-key, #f0f1f4)",
+ *    "100-rgb": "var(--some-key, 240, 241, 244)",
+ *    "100-id": "--color-purple-100"
+ *    "100-rgb-id": "--color-purple-100-rgb"
+ *  }
+ */
+export const addExtraThemeEntries = (
+  path: string[],
+  key: string,
+  value: unknown,
+  printValue: <I>(path: string[], value: I) => string,
+  {
+    augmentWithId,
+  }: {
+    /** Setting this to true will add `${key}-id` and ${key}-rgb-id` */
+    augmentWithId: boolean
+  }
+) => {
+  const colorRgb = typeof value === "string" ? colorString.get.rgb(value) : null
+  const result = {
+    [key]: printValue(path, value),
+  }
+
+  // Add the -rgb key containing the RGB triple of the color (if it is a color)
+  if (colorRgb) {
+    // If the value is a color, always convert to lowercase
+    result[key] = printValue(path, value).toLowerCase()
+
+    const rgbPath = [...path, "rgb"]
+    const rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "))
+    result[`${key}-rgb`] = rgbTriple
+    if (augmentWithId) {
+      result[`${key}-rgb-id`] = objectPathToCssVarIdentifier(rgbPath)
+    }
+  }
+  if (augmentWithId) {
+    result[`${key}-id`] = objectPathToCssVarIdentifier(path)
+  }
+
+  return result
+}

package/src/lib/cssVariables.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Given an object path (an array of strings) and a value, return a CSS var() function that represents it.
+ *
+ * Example:
+ *  Input:
+ *      path: [color, wisteria, 100]
+ *      value: #f0f1f4
+ *
+ *  Output:
+ *      "var(--color-wisteria-100, #f0f1f4)"
+ *
+ */
+export declare const objectPathToCssVarFunction: (path: string[], value: unknown) => string;
+/**
+ * Given an object path (an array of strings), return a CSS variable identifier.
+ *
+ * Example:
+ *      Input: [color, wisteria, 100]
+ *
+ *      Output: "--color-wisteria-100"
+ */
+export declare const objectPathToCssVarIdentifier: (path: string[]) => string;

package/src/lib/cssVariables.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.objectPathToCssVarIdentifier = exports.objectPathToCssVarFunction = void 0;
+var lodash_kebabcase_1 = __importDefault(require("lodash.kebabcase"));
+/**
+ * Given an object path (an array of strings) and a value, return a CSS var() function that represents it.
+ *
+ * Example:
+ *  Input:
+ *      path: [color, wisteria, 100]
+ *      value: #f0f1f4
+ *
+ *  Output:
+ *      "var(--color-wisteria-100, #f0f1f4)"
+ *
+ */
+exports.objectPathToCssVarFunction = function (path, value) {
+    return "var(" + exports.objectPathToCssVarIdentifier(path) + ", " + value + ")";
+};
+/**
+ * Given an object path (an array of strings), return a CSS variable identifier.
+ *
+ * Example:
+ *      Input: [color, wisteria, 100]
+ *
+ *      Output: "--color-wisteria-100"
+ */
+exports.objectPathToCssVarIdentifier = function (path) {
+    return "--" + path.map(lodash_kebabcase_1["default"]).join("-");
+};
+//# sourceMappingURL=cssVariables.js.map

package/src/lib/cssVariables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVariables.js","sourceRoot":"","sources":["cssVariables.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAoC;AAEpC;;;;;;;;;;;GAWG;AACU,QAAA,0BAA0B,GAAG,UAAC,IAAc,EAAE,KAAc;IACvE,OAAA,SAAO,oCAA4B,CAAC,IAAI,CAAC,UAAK,KAAK,MAAG;AAAtD,CAAsD,CAAA;AAExD;;;;;;;GAOG;AACU,QAAA,4BAA4B,GAAG,UAAC,IAAc;IACzD,OAAA,OAAK,IAAI,CAAC,GAAG,CAAC,6BAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAG;AAAhC,CAAgC,CAAA"}

package/src/lib/cssVariables.ts

@@ -0,0 +1,27 @@
+import kebab from "lodash.kebabcase"
+
+/**
+ * Given an object path (an array of strings) and a value, return a CSS var() function that represents it.
+ *
+ * Example:
+ *  Input:
+ *      path: [color, wisteria, 100]
+ *      value: #f0f1f4
+ *
+ *  Output:
+ *      "var(--color-wisteria-100, #f0f1f4)"
+ *
+ */
+export const objectPathToCssVarFunction = (path: string[], value: unknown) =>
+  `var(${objectPathToCssVarIdentifier(path)}, ${value})`
+
+/**
+ * Given an object path (an array of strings), return a CSS variable identifier.
+ *
+ * Example:
+ *      Input: [color, wisteria, 100]
+ *
+ *      Output: "--color-wisteria-100"
+ */
+export const objectPathToCssVarIdentifier = (path: string[]) =>
+  `--${path.map(kebab).join("-")}`

package/src/lib/makeCssVariableDefinitionsMap.d.ts

@@ -0,0 +1,29 @@
+/**
+
+ * Make a map of CSS variables -> values in a consistent way.
+ * Use this to, for example, create a CSS file that declares each theme variable on the `:root` pseudo element.
+ * Or for example when you're defining CSS variables using `rootElement.style.setProperty` within ThemeManager.
+ *
+ * It is paramount that this function defines every variable that {@link makeCssVariableTheme} expects to be defined.
+ * Otherwise, it's possible that a CSS variable token (something that looks like var(--color-purple-100-rgb)) won't have a matching defined
+ * CSS variable like `--color-purple-100-rgb: 123, 123, 123;`
+ *
+ *
+ * For example:
+ * Input:
+ * ```
+ * {
+ *      color: {
+ *        whatever: {
+ *          100: "#ff0022"
+ *        }
+ *      }
+ * }
+ * ```
+ * Output:
+ * ```
+ * {
+ *  "--color-whatever-100": "#ff0022"
+ * }
+ */
+export declare function makeCssVariableDefinitionsMap(theme: Record<string | number, unknown>): Record<string, string>;

package/src/lib/makeCssVariableDefinitionsMap.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+exports.makeCssVariableDefinitionsMap = void 0;
+var addExtraThemeEntries_1 = require("./addExtraThemeEntries");
+var cssVariables_1 = require("./cssVariables");
+var mapLeafsOfObject_1 = require("./mapLeafsOfObject");
+/**
+
+ * Make a map of CSS variables -> values in a consistent way.
+ * Use this to, for example, create a CSS file that declares each theme variable on the `:root` pseudo element.
+ * Or for example when you're defining CSS variables using `rootElement.style.setProperty` within ThemeManager.
+ *
+ * It is paramount that this function defines every variable that {@link makeCssVariableTheme} expects to be defined.
+ * Otherwise, it's possible that a CSS variable token (something that looks like var(--color-purple-100-rgb)) won't have a matching defined
+ * CSS variable like `--color-purple-100-rgb: 123, 123, 123;`
+ *
+ *
+ * For example:
+ * Input:
+ * ```
+ * {
+ *      color: {
+ *        whatever: {
+ *          100: "#ff0022"
+ *        }
+ *      }
+ * }
+ * ```
+ * Output:
+ * ```
+ * {
+ *  "--color-whatever-100": "#ff0022"
+ * }
+ */
+function makeCssVariableDefinitionsMap(theme) {
+    var accumulatedCssVariables = {};
+    // Shamelessly using a map function like a forEach
+    mapLeafsOfObject_1.mapLeafsOfObject(theme, function (path, value) {
+        // Key will be `--color-blah`
+        var key = cssVariables_1.objectPathToCssVarIdentifier(path);
+        var nextCssVariables = addExtraThemeEntries_1.addExtraThemeEntries(path, key, value, function (_, v) { return "" + v; }, { augmentWithId: false });
+        accumulatedCssVariables = __assign(__assign({}, accumulatedCssVariables), nextCssVariables);
+    });
+    return accumulatedCssVariables;
+}
+exports.makeCssVariableDefinitionsMap = makeCssVariableDefinitionsMap;
+//# sourceMappingURL=makeCssVariableDefinitionsMap.js.map

package/src/lib/makeCssVariableDefinitionsMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeCssVariableDefinitionsMap.js","sourceRoot":"","sources":["makeCssVariableDefinitionsMap.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+DAA6D;AAC7D,+CAA6D;AAC7D,uDAAqD;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAgB,6BAA6B,CAC3C,KAAuC;IAEvC,IAAI,uBAAuB,GAAG,EAA4B,CAAA;IAE1D,kDAAkD;IAClD,mCAAgB,CAAC,KAAK,EAAE,UAAC,IAAI,EAAE,KAAK;QAClC,6BAA6B;QAC7B,IAAM,GAAG,GAAG,2CAA4B,CAAC,IAAI,CAAC,CAAA;QAC9C,IAAM,gBAAgB,GAAG,2CAAoB,CAC3C,IAAI,EACJ,GAAG,EACH,KAAK,EACL,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,KAAG,CAAG,EAAN,CAAM,EAChB,EAAE,aAAa,EAAE,KAAK,EAAE,CACzB,CAAA;QACD,uBAAuB,yBAClB,uBAAuB,GACvB,gBAAgB,CACpB,CAAA;IACH,CAAC,CAAC,CAAA;IACF,OAAO,uBAAuB,CAAA;AAChC,CAAC;AAtBD,sEAsBC"}

package/src/lib/makeCssVariableDefinitionsMap.ts

@@ -0,0 +1,55 @@
+import { addExtraThemeEntries } from "./addExtraThemeEntries"
+import { objectPathToCssVarIdentifier } from "./cssVariables"
+import { mapLeafsOfObject } from "./mapLeafsOfObject"
+
+/**
+
+ * Make a map of CSS variables -> values in a consistent way.
+ * Use this to, for example, create a CSS file that declares each theme variable on the `:root` pseudo element.
+ * Or for example when you're defining CSS variables using `rootElement.style.setProperty` within ThemeManager.
+ *
+ * It is paramount that this function defines every variable that {@link makeCssVariableTheme} expects to be defined.
+ * Otherwise, it's possible that a CSS variable token (something that looks like var(--color-purple-100-rgb)) won't have a matching defined
+ * CSS variable like `--color-purple-100-rgb: 123, 123, 123;`
+ *
+ *
+ * For example:
+ * Input:
+ * ```
+ * {
+ *      color: {
+ *        whatever: {
+ *          100: "#ff0022"
+ *        }
+ *      }
+ * }
+ * ```
+ * Output:
+ * ```
+ * {
+ *  "--color-whatever-100": "#ff0022"
+ * }
+ */
+export function makeCssVariableDefinitionsMap(
+  theme: Record<string | number, unknown>
+) {
+  let accumulatedCssVariables = {} as Record<string, string>
+
+  // Shamelessly using a map function like a forEach
+  mapLeafsOfObject(theme, (path, value) => {
+    // Key will be `--color-blah`
+    const key = objectPathToCssVarIdentifier(path)
+    const nextCssVariables = addExtraThemeEntries(
+      path,
+      key,
+      value,
+      (_, v) => `${v}`,
+      { augmentWithId: false }
+    )
+    accumulatedCssVariables = {
+      ...accumulatedCssVariables,
+      ...nextCssVariables,
+    }
+  })
+  return accumulatedCssVariables
+}

package/src/lib/makeCssVariableTheme.d.ts

@@ -0,0 +1,34 @@
+import { DeepMapObjectLeafs } from "../types";
+/**
+ * This function could use a new name during a breaking change
+ *
+ * Given a Theme (which is the source of truth and doesn't contain any computed properties), add extra necessary properties to the tree such as `-rgb` suffixed keys with R, G, B triple values, and
+ * convert the leaf values of a theme to a value like `var(--parent1key-parent2key-leafkey)` - a CSS variable with an identifier that represents it's hierarchy.
+ *
+ * Example:
+ * ```
+ * {
+ *    color: {
+ *        purple: {
+ *          100: "#f0f1f4"
+ *        }
+ *    }
+ * }
+ * ```
+ * Transforms into:
+ * ```
+ * {
+ *    color: {
+ *        purple: {
+ *          100: "var(--color-purple-100, "#f0f1f4")",
+ *          "100-rgb": "var(--color-purple-100-rgb, 240, 241, 244)",
+ *          "100-id": "--color-purple-100",
+ *          "100-rgb-id": "--color-purple-100-rgb"
+ *        }
+ *    }
+ * }
+ * ```
+ *
+ * See {@link addExtraThemeEntries} for how these extra entries are added.
+ */
+export declare function makeCSSVariableTheme<ThemeType extends Record<string | number, unknown>>(theme: ThemeType, printValue?: (path: string[], value: unknown) => string): DeepMapObjectLeafs<ThemeType, string>;

package/src/lib/makeCssVariableTheme.js

@@ -0,0 +1,55 @@
+"use strict";
+exports.__esModule = true;
+exports.makeCSSVariableTheme = void 0;
+var addExtraThemeEntries_1 = require("./addExtraThemeEntries");
+var cssVariables_1 = require("./cssVariables");
+var mapLeafsOfObject_1 = require("./mapLeafsOfObject");
+/**
+ * This function could use a new name during a breaking change
+ *
+ * Given a Theme (which is the source of truth and doesn't contain any computed properties), add extra necessary properties to the tree such as `-rgb` suffixed keys with R, G, B triple values, and
+ * convert the leaf values of a theme to a value like `var(--parent1key-parent2key-leafkey)` - a CSS variable with an identifier that represents it's hierarchy.
+ *
+ * Example:
+ * ```
+ * {
+ *    color: {
+ *        purple: {
+ *          100: "#f0f1f4"
+ *        }
+ *    }
+ * }
+ * ```
+ * Transforms into:
+ * ```
+ * {
+ *    color: {
+ *        purple: {
+ *          100: "var(--color-purple-100, "#f0f1f4")",
+ *          "100-rgb": "var(--color-purple-100-rgb, 240, 241, 244)",
+ *          "100-id": "--color-purple-100",
+ *          "100-rgb-id": "--color-purple-100-rgb"
+ *        }
+ *    }
+ * }
+ * ```
+ *
+ * See {@link addExtraThemeEntries} for how these extra entries are added.
+ */
+function makeCSSVariableTheme(theme, printValue) {
+    if (printValue === void 0) { printValue = cssVariables_1.objectPathToCssVarFunction; }
+    var augmentedTheme = {};
+    var mapper = function (leafPath, value) {
+        var leafKey = leafPath[leafPath.length - 1];
+        var pathWithoutLast = leafPath.slice(0, leafPath.length - 1);
+        var leafObject = pathWithoutLast.reduce(function (child, segment) {
+            return (child[segment] || (child[segment] = {}));
+        }, augmentedTheme);
+        var cssVariablesOfToken = addExtraThemeEntries_1.addExtraThemeEntries(leafPath, leafKey, value, printValue, { augmentWithId: true });
+        Object.assign(leafObject, cssVariablesOfToken);
+    };
+    mapLeafsOfObject_1.mapLeafsOfObject(theme, mapper);
+    return augmentedTheme;
+}
+exports.makeCSSVariableTheme = makeCSSVariableTheme;
+//# sourceMappingURL=makeCssVariableTheme.js.map

package/src/lib/makeCssVariableTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeCssVariableTheme.js","sourceRoot":"","sources":["makeCssVariableTheme.ts"],"names":[],"mappings":";;;AACA,+DAA6D;AAC7D,+CAA2D;AAC3D,uDAAqD;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAgB,oBAAoB,CAElC,KAAgB,EAAE,UAAuC;IAAvC,2BAAA,EAAA,aAAa,yCAA0B;IACzD,IAAM,cAAc,GAA4B,EAAE,CAAA;IAClD,IAAM,MAAM,GAAG,UAAC,QAAkB,EAAE,KAAc;QAChD,IAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QAC7C,IAAM,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QAC9D,IAAM,UAAU,GAAG,eAAe,CAAC,MAAM,CACvC,UAAC,KAAK,EAAE,OAAO;YACb,OAAA,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAA4B;QAApE,CAAoE,EACtE,cAAyC,CAC1C,CAAA;QACD,IAAM,mBAAmB,GAAG,2CAAoB,CAC9C,QAAQ,EACR,OAAO,EACP,KAAK,EACL,UAAU,EACV,EAAE,aAAa,EAAE,IAAI,EAAE,CACxB,CAAA;QACD,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAA;IAChD,CAAC,CAAA;IAED,mCAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAE/B,OAAO,cAAuD,CAAA;AAChE,CAAC;AAzBD,oDAyBC"}

package/src/lib/makeCssVariableTheme.ts

@@ -0,0 +1,63 @@
+import { DeepMapObjectLeafs } from "../types"
+import { addExtraThemeEntries } from "./addExtraThemeEntries"
+import { objectPathToCssVarFunction } from "./cssVariables"
+import { mapLeafsOfObject } from "./mapLeafsOfObject"
+
+/**
+ * This function could use a new name during a breaking change
+ *
+ * Given a Theme (which is the source of truth and doesn't contain any computed properties), add extra necessary properties to the tree such as `-rgb` suffixed keys with R, G, B triple values, and
+ * convert the leaf values of a theme to a value like `var(--parent1key-parent2key-leafkey)` - a CSS variable with an identifier that represents it's hierarchy.
+ *
+ * Example:
+ * ```
+ * {
+ *    color: {
+ *        purple: {
+ *          100: "#f0f1f4"
+ *        }
+ *    }
+ * }
+ * ```
+ * Transforms into:
+ * ```
+ * {
+ *    color: {
+ *        purple: {
+ *          100: "var(--color-purple-100, "#f0f1f4")",
+ *          "100-rgb": "var(--color-purple-100-rgb, 240, 241, 244)",
+ *          "100-id": "--color-purple-100",
+ *          "100-rgb-id": "--color-purple-100-rgb"
+ *        }
+ *    }
+ * }
+ * ```
+ *
+ * See {@link addExtraThemeEntries} for how these extra entries are added.
+ */
+export function makeCSSVariableTheme<
+  ThemeType extends Record<string | number, unknown>
+>(theme: ThemeType, printValue = objectPathToCssVarFunction) {
+  const augmentedTheme: Record<string, unknown> = {}
+  const mapper = (leafPath: string[], value: unknown) => {
+    const leafKey = leafPath[leafPath.length - 1]
+    const pathWithoutLast = leafPath.slice(0, leafPath.length - 1)
+    const leafObject = pathWithoutLast.reduce(
+      (child, segment) =>
+        (child[segment] || (child[segment] = {})) as Record<string, unknown>,
+      augmentedTheme as Record<string, unknown>
+    )
+    const cssVariablesOfToken = addExtraThemeEntries(
+      leafPath,
+      leafKey,
+      value,
+      printValue,
+      { augmentWithId: true }
+    )
+    Object.assign(leafObject, cssVariablesOfToken)
+  }
+
+  mapLeafsOfObject(theme, mapper)
+
+  return augmentedTheme as DeepMapObjectLeafs<ThemeType, string>
+}

package/src/lib/mapLeafsOfObject.d.ts

@@ -0,0 +1,22 @@
+import { DeepMapObjectLeafs } from "../types";
+/**
+ * This allows you to map the leaf nodes of an object, and you're provided the path to that leaf as well as the value as parameters to your mapper function.
+ * This function was build to support mapping theme values to their respective CSS variable identifiers.
+ * For example:
+ * ```ts
+ * mapLeafsOfObject({
+ *  one: {
+ *    two: 4
+ *  }
+ * }, (path, value) => value + 7)
+ * ```
+ * Results in:
+ * ```
+ * {
+ *    one: {
+ *      two: 11
+ *    }
+ * }
+ * ```
+ */
+export declare function mapLeafsOfObject<Obj extends Record<string | number, unknown>, Value>(object: Obj, mapper: (pathToLeaf: string[], value: unknown) => Value): DeepMapObjectLeafs<Obj, Value>;