@kaizen/design-tokens 9.0.5 → 10.0.1

package/src/ThemeManager.js

@@ -1,68 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.ThemeManager = void 0;
-var makeCssVariableDefinitionsMap_1 = require("./lib/makeCssVariableDefinitionsMap");
-/**
- * Use this class to set and apply themes, and to access or subscribe to the currently active one.
- * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
- * and the ability to update them in JavaScript - a framework agnostic method.
- *
- * It works by converting a Theme interface to a flattened map of CSS variable keys and values, then calling `document.documentElement.style.setProperty(key, value)`.
- */
-var ThemeManager = /** @class */ (function () {
-    function ThemeManager(theme, 
-    /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
-    apply) {
-        var _this = this;
-        if (apply === void 0) { apply = true; }
-        this.themeChangeListeners = [];
-        this.rootElement = null;
-        this.getRootElement = function () { return _this.rootElement; };
-        this.getCurrentTheme = function () { return _this.theme; };
-        this.setRootElement = function (element) {
-            _this.rootElement = element;
-        };
-        this.setAndApplyTheme = function (theme, force) {
-            if (!force) {
-                if (_this.theme === theme)
-                    return;
-            }
-            _this.theme = theme;
-            _this.applyCurrentTheme();
-            _this.notifyThemeChangeListeners(theme);
-        };
-        this.addThemeChangeListener = function (listener) {
-            _this.themeChangeListeners.push(listener);
-        };
-        this.removeThemeChangeListener = function (listener) {
-            _this.themeChangeListeners = _this.themeChangeListeners.filter(function (l) { return l !== listener; });
-        };
-        this.applyCurrentTheme = function () {
-            if (typeof window !== "undefined") {
-                _this.setRootElement(document.documentElement);
-                var cssVariableDefinitions = (0, makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap)(_this.theme);
-                Object.entries(cssVariableDefinitions).forEach(function (_a) {
-                    var _b;
-                    var key = _a[0], value = _a[1];
-                    (_b = _this.rootElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(key, value);
-                });
-            }
-        };
-        this.notifyThemeChangeListeners = function (theme) {
-            _this.themeChangeListeners.forEach(function (listener) { return listener(theme); });
-        };
-        /*
-          For some reason, storybook likes this way of defining class properties better.
-          If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
-        */
-        this.theme = theme;
-        if (apply)
-            this.applyCurrentTheme();
-    }
-    return ThemeManager;
-}());
-exports.ThemeManager = ThemeManager;
-// I would like to expose this, but instantiating ThemeManager in some situations or runtimes (such as nodejs) cause exceptions.
-// For now it is not exposed, but we might come back to it, as it makes sense to have a singleton ThemeManager in almost all cases
-/* export const defaultThemeManager = new ThemeManager(defaultTheme) */
-//# sourceMappingURL=ThemeManager.js.map

package/src/ThemeManager.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeManager.js","sourceRoot":"","sources":["ThemeManager.ts"],"names":[],"mappings":";;;AACA,qFAAmF;AACnF;;;;;;GAMG;AACH;IAKE,sBACE,KAAY;IACZ,oHAAoH;IACpH,KAAqB;QAHvB,iBAWC;QARC,sBAAA,EAAA,YAAqB;QAPf,yBAAoB,GAAG,EAAmC,CAAA;QAE1D,gBAAW,GAAuB,IAAI,CAAA;QAevC,mBAAc,GAAG,cAAM,OAAA,KAAI,CAAC,WAAW,EAAhB,CAAgB,CAAA;QACvC,oBAAe,GAAG,cAAM,OAAA,KAAI,CAAC,KAAK,EAAV,CAAU,CAAA;QAElC,mBAAc,GAAG,UAAC,OAAoB;YAC3C,KAAI,CAAC,WAAW,GAAG,OAAO,CAAA;QAC5B,CAAC,CAAA;QACM,qBAAgB,GAAG,UAAC,KAAY,EAAE,KAAe;YACtD,IAAI,CAAC,KAAK,EAAE;gBACV,IAAI,KAAI,CAAC,KAAK,KAAK,KAAK;oBAAE,OAAM;aACjC;YACD,KAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YAClB,KAAI,CAAC,iBAAiB,EAAE,CAAA;YACxB,KAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAA;QACxC,CAAC,CAAA;QAEM,2BAAsB,GAAG,UAAC,QAAgC;YAC/D,KAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC1C,CAAC,CAAA;QACM,8BAAyB,GAAG,UAAC,QAAgC;YAClE,KAAI,CAAC,oBAAoB,GAAG,KAAI,CAAC,oBAAoB,CAAC,MAAM,CAC1D,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,QAAQ,EAAd,CAAc,CACpB,CAAA;QACH,CAAC,CAAA;QACM,sBAAiB,GAAG;YACzB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;gBACjC,KAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;gBAC7C,IAAM,sBAAsB,GAAG,IAAA,6DAA6B,EAAC,KAAI,CAAC,KAAK,CAAC,CAAA;gBACxE,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,UAAC,EAAY;;wBAAX,GAAG,QAAA,EAAE,KAAK,QAAA;oBACzD,MAAA,KAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;gBACjD,CAAC,CAAC,CAAA;aACH;QACH,CAAC,CAAA;QAEO,+BAA0B,GAAG,UAAC,KAAY;YAChD,KAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,CAAC,CAAA;QAChE,CAAC,CAAA;QA3CC;;;UAGE;QACF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,KAAK;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACrC,CAAC;IAsCH,mBAAC;AAAD,CAAC,AAtDD,IAsDC;AAtDY,oCAAY;AAwDzB,gIAAgI;AAChI,kIAAkI;AAClI,uEAAuE"}

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

@@ -1,38 +0,0 @@
-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

@@ -1,21 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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/addExtraThemeEntries.d.ts

@@ -1,24 +0,0 @@
-/**
- * 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

@@ -1,60 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-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"
- *  }
- */
-var 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 = __spreadArray(__spreadArray([], path, true), ["rgb"], false);
-        var rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "));
-        result["".concat(key, "-rgb")] = rgbTriple;
-        if (augmentWithId) {
-            result["".concat(key, "-rgb-id")] = (0, cssVariables_1.objectPathToCssVarIdentifier)(rgbPath);
-        }
-    }
-    if (augmentWithId) {
-        result["".concat(key, "-id")] = (0, cssVariables_1.objectPathToCssVarIdentifier)(path);
-    }
-    return result;
-};
-exports.addExtraThemeEntries = addExtraThemeEntries;
-//# sourceMappingURL=addExtraThemeEntries.js.map

package/src/lib/addExtraThemeEntries.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"addExtraThemeEntries.js","sourceRoot":"","sources":["addExtraThemeEntries.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,8DAAsC;AACtC,+CAA6D;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACI,IAAM,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,mCAAO,IAAI,UAAE,KAAK,SAAC,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,CAAC,UAAG,GAAG,SAAM,CAAC,GAAG,SAAS,CAAA;QAChC,IAAI,aAAa,EAAE;YACjB,MAAM,CAAC,UAAG,GAAG,YAAS,CAAC,GAAG,IAAA,2CAA4B,EAAC,OAAO,CAAC,CAAA;SAChE;KACF;IACD,IAAI,aAAa,EAAE;QACjB,MAAM,CAAC,UAAG,GAAG,QAAK,CAAC,GAAG,IAAA,2CAA4B,EAAC,IAAI,CAAC,CAAA;KACzD;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAlCY,QAAA,oBAAoB,wBAkChC"}

package/src/lib/cssVariables.d.ts

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,36 +0,0 @@
-"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)"
- *
- */
-var objectPathToCssVarFunction = function (path, value) {
-    return "var(".concat((0, exports.objectPathToCssVarIdentifier)(path), ", ").concat(value, ")");
-};
-exports.objectPathToCssVarFunction = objectPathToCssVarFunction;
-/**
- * Given an object path (an array of strings), return a CSS variable identifier.
- *
- * Example:
- *      Input: [color, wisteria, 100]
- *
- *      Output: "--color-wisteria-100"
- */
-var objectPathToCssVarIdentifier = function (path) {
-    return "--".concat(path.map(lodash_kebabcase_1["default"]).join("-"));
-};
-exports.objectPathToCssVarIdentifier = objectPathToCssVarIdentifier;
-//# sourceMappingURL=cssVariables.js.map

package/src/lib/cssVariables.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cssVariables.js","sourceRoot":"","sources":["cssVariables.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAoC;AAEpC;;;;;;;;;;;GAWG;AACI,IAAM,0BAA0B,GAAG,UAAC,IAAc,EAAE,KAAc;IACvE,OAAA,cAAO,IAAA,oCAA4B,EAAC,IAAI,CAAC,eAAK,KAAK,MAAG;AAAtD,CAAsD,CAAA;AAD3C,QAAA,0BAA0B,8BACiB;AAExD;;;;;;;GAOG;AACI,IAAM,4BAA4B,GAAG,UAAC,IAAc;IACzD,OAAA,YAAK,IAAI,CAAC,GAAG,CAAC,6BAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAE;AAAhC,CAAgC,CAAA;AADrB,QAAA,4BAA4B,gCACP"}

package/src/lib/makeCssVariableDefinitionsMap.d.ts

@@ -1,29 +0,0 @@
-/**
-
- * 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

@@ -1,58 +0,0 @@
-"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
-    (0, mapLeafsOfObject_1.mapLeafsOfObject)(theme, function (path, value) {
-        // Key will be `--color-blah`
-        var key = (0, cssVariables_1.objectPathToCssVarIdentifier)(path);
-        var nextCssVariables = (0, addExtraThemeEntries_1.addExtraThemeEntries)(path, key, value, function (_, v) { return "".concat(v); }, { augmentWithId: false });
-        accumulatedCssVariables = __assign(__assign({}, accumulatedCssVariables), nextCssVariables);
-    });
-    return accumulatedCssVariables;
-}
-exports.makeCssVariableDefinitionsMap = makeCssVariableDefinitionsMap;
-//# sourceMappingURL=makeCssVariableDefinitionsMap.js.map

package/src/lib/makeCssVariableDefinitionsMap.js.map

@@ -1 +0,0 @@
-{"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,IAAA,mCAAgB,EAAC,KAAK,EAAE,UAAC,IAAI,EAAE,KAAK;QAClC,6BAA6B;QAC7B,IAAM,GAAG,GAAG,IAAA,2CAA4B,EAAC,IAAI,CAAC,CAAA;QAC9C,IAAM,gBAAgB,GAAG,IAAA,2CAAoB,EAC3C,IAAI,EACJ,GAAG,EACH,KAAK,EACL,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,UAAG,CAAC,CAAE,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/makeCssVariableTheme.d.ts

@@ -1,34 +0,0 @@
-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

@@ -1,58 +0,0 @@
-"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);
-        if (!leafKey) {
-            throw new Error("leafKey is undefined");
-        }
-        var cssVariablesOfToken = (0, addExtraThemeEntries_1.addExtraThemeEntries)(leafPath, leafKey, value, printValue, { augmentWithId: true });
-        Object.assign(leafObject, cssVariablesOfToken);
-    };
-    (0, mapLeafsOfObject_1.mapLeafsOfObject)(theme, mapper);
-    return augmentedTheme;
-}
-exports.makeCSSVariableTheme = makeCSSVariableTheme;
-//# sourceMappingURL=makeCssVariableTheme.js.map

package/src/lib/makeCssVariableTheme.js.map

@@ -1 +0,0 @@
-{"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,IAAI,CAAC,OAAO,EAAE;YACZ,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAA;SACxC;QACD,IAAM,mBAAmB,GAAG,IAAA,2CAAoB,EAC9C,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,IAAA,mCAAgB,EAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAE/B,OAAO,cAAuD,CAAA;AAChE,CAAC;AA5BD,oDA4BC"}

package/src/lib/mapLeafsOfObject.d.ts

@@ -1,22 +0,0 @@
-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>;

package/src/lib/mapLeafsOfObject.js

@@ -1,62 +0,0 @@
-"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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-exports.__esModule = true;
-exports.mapLeafsOfObject = void 0;
-/**
- * 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
- *    }
- * }
- * ```
- */
-function mapLeafsOfObject(object, mapper) {
-    var recurser = function (currentPath, obj) {
-        var handleEntry = function (key, value) {
-            var pathToKey = __spreadArray(__spreadArray([], currentPath, true), [key], false);
-            if (typeof value === "object" && value !== null && value !== undefined) {
-                return recurser(pathToKey, value);
-            }
-            return mapper(pathToKey, value);
-        };
-        return Object.entries(obj).reduce(function (acc, _a) {
-            var _b;
-            var nextKey = _a[0], nextValue = _a[1];
-            return (__assign(__assign({}, acc), (_b = {}, _b[nextKey] = handleEntry(nextKey, nextValue), _b)));
-        }, {});
-    };
-    return recurser([], object);
-}
-exports.mapLeafsOfObject = mapLeafsOfObject;
-//# sourceMappingURL=mapLeafsOfObject.js.map

package/src/lib/mapLeafsOfObject.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mapLeafsOfObject.js","sourceRoot":"","sources":["mapLeafsOfObject.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAgB,gBAAgB,CAI9B,MAAW,EACX,MAAuD;IAEvD,IAAM,QAAQ,GAAG,UACf,WAAqB,EACrB,GAAM;QAEN,IAAM,WAAW,GAAG,UAAC,GAAW,EAAE,KAAc;YAC9C,IAAM,SAAS,mCAAO,WAAW,UAAE,GAAG,SAAC,CAAA;YACvC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;gBACtE,OAAO,QAAQ,CAAC,SAAS,EAAE,KAAyC,CAAC,CAAA;aACtE;YACD,OAAO,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;QACjC,CAAC,CAAA;QACD,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAC/B,UAAC,GAAG,EAAE,EAAoB;;gBAAnB,OAAO,QAAA,EAAE,SAAS,QAAA;YAAM,OAAA,uBAC1B,GAAG,gBACL,OAAO,IAAG,WAAW,CAAC,OAAO,EAAE,SAAS,CAAC,OAC1C;QAH6B,CAG7B,EACF,EAAkC,CACnC,CAAA;IACH,CAAC,CAAA;IACD,OAAO,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;AAC7B,CAAC;AA3BD,4CA2BC"}

package/src/lib/patterns.d.ts

@@ -1,2 +0,0 @@
-export declare const zenColorNamePattern: RegExp;
-export declare const heartColorNamePattern: RegExp;

package/src/lib/patterns.js

@@ -1,6 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.heartColorNamePattern = exports.zenColorNamePattern = void 0;
-exports.zenColorNamePattern = /ash|stone|slate|iron|wisteria|cluny|peach|yuzu|coral|seedling/;
-exports.heartColorNamePattern = /purple|blue|orange|yellow|red|green|gray/;
-//# sourceMappingURL=patterns.js.map

package/src/lib/patterns.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"patterns.js","sourceRoot":"","sources":["patterns.ts"],"names":[],"mappings":";;;AAAa,QAAA,mBAAmB,GAC9B,+DAA+D,CAAA;AACpD,QAAA,qBAAqB,GAAG,0CAA0C,CAAA"}

package/src/themes/heart.d.ts

@@ -1,2 +0,0 @@
-import { Theme } from "../types";
-export declare const heartTheme: Theme;