@kaizen/design-tokens 3.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Culture Amp Pty Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# Kaizen Tokens
+
+Design tokens for all platforms.
+
+## About
+
+Design tokens are named and stored visual design traits, including colors, typography, and animation timings. Design Tokens are the heart of every Design System.
+
+The tokens represented here are platform-agnostic (JSON), as this will help us contribute to & facilitate the maintenance of living style guides. This package defines all the option tokens in Kaizen.
+
+- **Option tokens** offer options. For example, `$color-purple-500: #898ba9;` is one color option available.
+- **Decision tokens** communicate decisions about when to apply an option token to a context. For example, the color used for text is a decision.
+
+In its current state this package supports Sass and Less variables, generated from a JSON tokens file.
+
+**Please note** that the helpers in this package are specifically for accessing and using these design tokens. Component-specific helpers are best suited for kaizen-component-library.
+
+As of V3, design tokens are also **themable**; they are intended to be used as if they can be **switched at runtime**. Because of this, we employ [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+to support this feature, so when consuming tokens in SASS/LESS you should assume they will contain values such as `var(--color-...)`, rather than concrete values such as `1.5rem` or `#fff`.
+These values are supplied by the ThemeManager.
+
+
+
+## Installation
+
+```sh
+yarn add @kaizen/design-tokens
+```
+
+## Usage
+
+### Sass
+
+```scss
+## Note helper functions are provided
+@import "~@kaizen/design-tokens/sass/[color/depth/layout/spacing/typography/helpers]";
+```
+
+### Less
+
+```
+## Note helper functions are provided
+@import "~@kaizen/design-tokens/less/[color/depth/layout/spacing/typography/helpers]";
+```
+
+### JavaScript
+
+```
+import * as tokens from @kaizen/design-tokens/tokens/[color/depth/layout/spacing/typography]
+```
+
+## Where possible, we keep things unitless.
+
+When adding support for another target the transformation should add the appropriate unit to the artefact. For example, converting typography sizes to Sass/Less should add REM.
+
+### Web
+
+All values in tokens are represented as rem, em or px.
+
+* Use REMs for sizes and spacing (grid).
+* Use EMs for media queries.
+* Use px for borders.
+
+## Contributing
+
+See [CONTRIBUTING.md](https://github.com/cultureamp/kaizen-design-system/blob/master/packages/design-tokens/CONTRIBUTING.md)

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./src/themes";
+export * from "./src/types";
+export * from "./src/ThemeManager";
+export * from "./react";
+export { makeCssVariableDefinitionsMap } from "./src/lib/makeCssVariableDefinitionsMap";
+export { makeCSSVariableTheme } from "./src/lib/makeCssVariableTheme";
+export { mapLeafsOfObject } from "./src/lib/mapLeafsOfObject";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAA;AACvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA"}

package/dist/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// These are exposed at the top level because it seems like they are the most useful and relevent to usage of design tokens.
+__exportStar(require("./src/themes"), exports);
+__exportStar(require("./src/types"), exports);
+__exportStar(require("./src/ThemeManager"), exports);
+__exportStar(require("./react"), exports);
+var makeCssVariableDefinitionsMap_1 = require("./src/lib/makeCssVariableDefinitionsMap");
+Object.defineProperty(exports, "makeCssVariableDefinitionsMap", { enumerable: true, get: function () { return makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap; } });
+var makeCssVariableTheme_1 = require("./src/lib/makeCssVariableTheme");
+Object.defineProperty(exports, "makeCSSVariableTheme", { enumerable: true, get: function () { return makeCssVariableTheme_1.makeCSSVariableTheme; } });
+var mapLeafsOfObject_1 = require("./src/lib/mapLeafsOfObject");
+Object.defineProperty(exports, "mapLeafsOfObject", { enumerable: true, get: function () { return mapLeafsOfObject_1.mapLeafsOfObject; } });

package/dist/react/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ThemeManager, Theme } from "../";
+export declare const ThemeContext: React.Context<Theme>;
+/**
+ * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
+ * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
+ */
+export declare const ThemeProvider: ({ themeManager, ...props }: {
+    themeManager: ThemeManager;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useTheme: () => Theme;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/react/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../react/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAgB,KAAK,EAAE,MAAM,KAAK,CAAA;AAEvD,eAAO,MAAM,YAAY,sBAA2C,CAAA;AAEpE;;;GAGG;AACH,eAAO,MAAM,aAAa;kBAIV,YAAY;cAChB,KAAK,CAAC,SAAS;iBAsB1B,CAAA;AAED,eAAO,MAAM,QAAQ,aAAuC,CAAA"}

package/dist/react/ThemeProvider.js

@@ -0,0 +1,42 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.ThemeProvider = exports.ThemeContext = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("../");
+exports.ThemeContext = react_1.default.createContext(__1.defaultTheme);
+/**
+ * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
+ * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
+ */
+exports.ThemeProvider = function (_a) {
+    var themeManager = _a.themeManager, props = __rest(_a, ["themeManager"]);
+    var _b = react_1.default.useState(themeManager.getCurrentTheme()), theme = _b[0], setTheme = _b[1];
+    react_1.default.useEffect(function () {
+        var cancelled = false;
+        var listener = function (newTheme) {
+            if (!cancelled)
+                setTheme(newTheme);
+        };
+        themeManager.addThemeChangeListener(listener);
+        return function () {
+            cancelled = true;
+            themeManager.removeThemeChangeListener(listener);
+        };
+    }, []);
+    return (react_1.default.createElement(exports.ThemeContext.Provider, { value: theme }, props.children));
+};
+exports.useTheme = function () { return react_1.default.useContext(exports.ThemeContext); };

package/dist/react/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ThemeProvider";
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/react/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ThemeProvider"), exports);

package/dist/src/ThemeManager.d.ts

@@ -0,0 +1,23 @@
+import { Theme as BaseTheme } from "./types";
+/**
+ * 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)`.
+ */
+export declare class ThemeManager<Theme extends BaseTheme = BaseTheme> {
+    private themeChangeListeners;
+    private theme;
+    private rootElement;
+    constructor(theme: Theme, rootElement?: HTMLElement, apply?: boolean);
+    getRootElement: () => HTMLElement;
+    getCurrentTheme: () => Theme;
+    setRootElement: (element: HTMLElement) => void;
+    setAndApplyTheme: (theme: Theme, force?: boolean | undefined) => void;
+    addThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    removeThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    applyCurrentTheme: () => void;
+    private notifyThemeChangeListeners;
+}
+//# sourceMappingURL=ThemeManager.d.ts.map

package/dist/src/ThemeManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeManager.d.ts","sourceRoot":"","sources":["../../src/ThemeManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;;GAMG;AACH,qBAAa,YAAY,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IAC3D,OAAO,CAAC,oBAAoB,CAAsC;IAClE,OAAO,CAAC,KAAK,CAAO;IACpB,OAAO,CAAC,WAAW,CAA2B;gBAE5C,KAAK,EAAE,KAAK,EACZ,WAAW,cAA2B,EAEtC,KAAK,GAAE,OAAc;IAWhB,cAAc,oBAAyB;IACvC,eAAe,cAAmB;IAElC,cAAc,YAAa,WAAW,UAE5C;IACM,gBAAgB,UAAW,KAAK,uCAOtC;IAEM,sBAAsB,qBAAsB,KAAK,KAAK,IAAI,UAEhE;IACM,yBAAyB,qBAAsB,KAAK,KAAK,IAAI,UAInE;IACM,iBAAiB,aASvB;IAED,OAAO,CAAC,0BAA0B,CAEjC;CACF"}

package/dist/src/ThemeManager.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: 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, rootElement, 
+    /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
+    apply) {
+        var _this = this;
+        if (rootElement === void 0) { rootElement = document.documentElement; }
+        if (apply === void 0) { apply = true; }
+        this.themeChangeListeners = [];
+        this.rootElement = document.documentElement;
+        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 () {
+            var cssVariableDefinitions = makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap(_this.theme);
+            Object.entries(cssVariableDefinitions).forEach(function (_a) {
+                var key = _a[0], value = _a[1];
+                if (_this.theme.themeKey === "zen") {
+                    _this.rootElement.style.removeProperty(key);
+                }
+                else {
+                    _this.rootElement.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;
+        this.rootElement = rootElement;
+        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) */

package/dist/src/lib/addExtraThemeEntries.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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;
+};
+//# sourceMappingURL=addExtraThemeEntries.d.ts.map

package/dist/src/lib/addExtraThemeEntries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addExtraThemeEntries.d.ts","sourceRoot":"","sources":["../../../src/lib/addExtraThemeEntries.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,oBAAoB,SACzB,MAAM,EAAE,OACT,MAAM,SACJ,OAAO,wBACQ,MAAM,EAAE,eAAe,MAAM;IAIjD,mEAAmE;mBACpD,OAAO;;;CAyBzB,CAAA"}

package/dist/src/lib/addExtraThemeEntries.js

@@ -0,0 +1,56 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: 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;
+};

package/dist/src/lib/cssVariables.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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;
+//# sourceMappingURL=cssVariables.d.ts.map

package/dist/src/lib/cssVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssVariables.d.ts","sourceRoot":"","sources":["../../../src/lib/cssVariables.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,SAAU,MAAM,EAAE,SAAS,OAAO,WACjB,CAAA;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,SAAU,MAAM,EAAE,WACzB,CAAA"}

package/dist/src/lib/cssVariables.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: 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("-");
+};

package/dist/src/lib/makeCssVariableDefinitionsMap.d.ts

@@ -0,0 +1,30 @@
+/**
+
+ * 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>;
+//# sourceMappingURL=makeCssVariableDefinitionsMap.d.ts.map

package/dist/src/lib/makeCssVariableDefinitionsMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeCssVariableDefinitionsMap.d.ts","sourceRoot":"","sources":["../../../src/lib/makeCssVariableDefinitionsMap.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,0BAqBxC"}

package/dist/src/lib/makeCssVariableDefinitionsMap.js

@@ -0,0 +1,57 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: 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;

package/dist/src/lib/makeCssVariableTheme.d.ts

@@ -0,0 +1,35 @@
+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>;
+//# sourceMappingURL=makeCssVariableTheme.d.ts.map

package/dist/src/lib/makeCssVariableTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeCssVariableTheme.d.ts","sourceRoot":"","sources":["../../../src/lib/makeCssVariableTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,SAAS,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAClD,KAAK,EAAE,SAAS,EAAE,UAAU,6CAA6B,yCAuB1D"}

package/dist/src/lib/makeCssVariableTheme.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: 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;