@kaizen/design-tokens 10.5.2 → 10.6.0

package/dist/esm/legacy/ThemeManager.mjs

@@ -0,0 +1,90 @@
+import { makeCssVariableDefinitionsMap } from '../lib/makeCssVariableDefinitionsMap.mjs';
+
+/**
+ * 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)`.
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ *
+ * {@link https://cultureamp.design/?path=/docs/guides-app-starter--docs Check App Starter guidance}
+ */
+var ThemeManager = /** @class */function () {
+  function ThemeManager(theme, rootElementId, /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
+  apply) {
+    if (rootElementId === void 0) {
+      rootElementId = "";
+    }
+    if (apply === void 0) {
+      apply = true;
+    }
+    var _this = this;
+    this.themeChangeListeners = [];
+    this.rootElement = null;
+    this.getRootElement = function () {
+      return _this.rootElement;
+    };
+    this.getRootElementId = function () {
+      return _this.rootElementId;
+    };
+    this.getCurrentTheme = function () {
+      return _this.theme;
+    };
+    this.setRootElement = function (element) {
+      _this.rootElement = element;
+    };
+    this.setRootElementId = function (rootElementId) {
+      return _this.rootElementId = rootElementId;
+    };
+    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 _a;
+      if (typeof window !== "undefined") {
+        _this.setRootElement((_a = document.getElementById(_this.rootElementId)) !== null && _a !== void 0 ? _a : document.documentElement);
+        var cssVariableDefinitions = 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;
+    this.rootElementId = rootElementId;
+    if (apply) this.applyCurrentTheme();
+  }
+  return 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) */
+
+export { ThemeManager };

package/dist/esm/legacy/ThemeProvider.mjs

@@ -0,0 +1,72 @@
+import { __rest } from 'tslib';
+import React, { useState } from 'react';
+import { ThemeManager } from './ThemeManager.mjs';
+import { defaultTheme } from './themes/index.mjs';
+var ThemeContext = /*#__PURE__*/React.createContext(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.
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ *
+ * {@link https://cultureamp.design/?path=/docs/guides-app-starter--docs Check App Starter guidance}
+ */
+var ThemeProvider = function (_a) {
+  var themeManager = _a.themeManager,
+    props = __rest(_a, ["themeManager"]);
+  var themeManagerInstance = useState(function () {
+    return themeManager || new ThemeManager(defaultTheme);
+  })[0];
+  var _b = React.useState(themeManagerInstance.getCurrentTheme()),
+    theme = _b[0],
+    setTheme = _b[1];
+  React.useEffect(function () {
+    var cancelled = false;
+    var listener = function (newTheme) {
+      if (!cancelled) setTheme(newTheme);
+    };
+    themeManagerInstance.addThemeChangeListener(listener);
+    return function () {
+      cancelled = true;
+      themeManagerInstance.removeThemeChangeListener(listener);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: theme
+  }, props.children), /*#__PURE__*/React.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), /*#__PURE__*/React.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), /*#__PURE__*/React.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), /*#__PURE__*/React.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }), /*#__PURE__*/React.createElement("link", {
+    rel: "preload",
+    href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2",
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous"
+  }));
+};
+var useTheme = function () {
+  return React.useContext(ThemeContext);
+};
+export { ThemeContext, ThemeProvider, useTheme };

package/dist/esm/legacy/makeCssVariableDefinitionsMap.mjs

@@ -0,0 +1,52 @@
+import { __assign } from 'tslib';
+import { addExtraThemeEntries } from '../lib/addExtraThemeEntries.mjs';
+import { objectPathToCssVarIdentifier } from '../lib/cssVariables.mjs';
+import { mapLeafsOfObject } from './mapLeafsOfObject.mjs';
+
+/**
+
+ * 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"
+ * }
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ */
+function makeCssVariableDefinitionsMap(theme) {
+  var accumulatedCssVariables = {};
+  // Shamelessly using a map function like a forEach
+  mapLeafsOfObject(theme, function (path, value) {
+    // Key will be `--color-blah`
+    var key = objectPathToCssVarIdentifier(path);
+    var nextCssVariables = addExtraThemeEntries(path, key, value, function (_, v) {
+      return "".concat(v);
+    }, {
+      augmentWithId: false
+    });
+    accumulatedCssVariables = __assign(__assign({}, accumulatedCssVariables), nextCssVariables);
+  });
+  return accumulatedCssVariables;
+}
+export { makeCssVariableDefinitionsMap };

package/dist/esm/legacy/makeCssVariableTheme.mjs

@@ -0,0 +1,62 @@
+import { addExtraThemeEntries } from '../lib/addExtraThemeEntries.mjs';
+import { objectPathToCssVarFunction } from '../lib/cssVariables.mjs';
+import { mapLeafsOfObject } from '../lib/mapLeafsOfObject.mjs';
+
+/**
+ * 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.
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ */
+function makeCSSVariableTheme(theme, printValue) {
+  if (printValue === void 0) {
+    printValue = 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 = addExtraThemeEntries(leafPath, leafKey, value, printValue, {
+      augmentWithId: true
+    });
+    Object.assign(leafObject, cssVariablesOfToken);
+  };
+  mapLeafsOfObject(theme, mapper);
+  return augmentedTheme;
+}
+export { makeCSSVariableTheme };

package/dist/esm/legacy/mapLeafsOfObject.mjs

@@ -0,0 +1,44 @@
+import { __assign, __spreadArray } from 'tslib';
+
+/**
+ * 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
+ *    }
+ * }
+ * ```
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ */
+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);
+}
+export { mapLeafsOfObject };

package/dist/esm/legacy/themes/heart.mjs

@@ -0,0 +1,12 @@
+import { __assign } from 'tslib';
+import { tokens } from '../../js/tokens.mjs';
+
+/**
+ * @deprecated
+ * - Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ * - If you require direct usage of these tokens in js you can `import { tokens } from "@kaizen/design-tokens/js"`
+ */
+var heartTheme = __assign({
+  themeKey: "heart"
+}, tokens);
+export { heartTheme };

package/dist/esm/legacy/themes/index.mjs

@@ -0,0 +1,9 @@
+import { heartTheme } from './heart.mjs';
+
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ *
+ * {@link https://cultureamp.design/?path=/docs/guides-app-starter--docs Check App Starter guidance}
+ */
+var defaultTheme = heartTheme;
+export { defaultTheme, heartTheme };

package/dist/esm/lib/addExtraThemeEntries.mjs

@@ -0,0 +1,44 @@
+import { __spreadArray } from 'tslib';
+import colorString from 'color-string';
+import { objectPathToCssVarIdentifier } from './cssVariables.mjs';
+
+/**
+ * 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" ? colorString.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")] = objectPathToCssVarIdentifier(rgbPath);
+    }
+  }
+  if (augmentWithId) {
+    result["".concat(key, "-id")] = objectPathToCssVarIdentifier(path);
+  }
+  return result;
+};
+export { addExtraThemeEntries };

package/dist/esm/lib/cssVariables.mjs

@@ -0,0 +1,29 @@
+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)"
+ *
+ */
+var objectPathToCssVarFunction = function (path, value) {
+  return "var(".concat(objectPathToCssVarIdentifier(path), ", ").concat(value, ")");
+};
+/**
+ * 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(kebab).join("-"));
+};
+export { objectPathToCssVarFunction, objectPathToCssVarIdentifier };

package/dist/esm/lib/makeCssVariableDefinitionsMap.mjs

@@ -0,0 +1,49 @@
+import { __assign } from 'tslib';
+import { addExtraThemeEntries } from './addExtraThemeEntries.mjs';
+import { objectPathToCssVarIdentifier } from './cssVariables.mjs';
+import { mapLeafsOfObject } from './mapLeafsOfObject.mjs';
+
+/**
+
+ * 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(theme, function (path, value) {
+    // Key will be `--color-blah`
+    var key = objectPathToCssVarIdentifier(path);
+    var nextCssVariables = addExtraThemeEntries(path, key, value, function (_, v) {
+      return "".concat(v);
+    }, {
+      augmentWithId: false
+    });
+    accumulatedCssVariables = __assign(__assign({}, accumulatedCssVariables), nextCssVariables);
+  });
+  return accumulatedCssVariables;
+}
+export { makeCssVariableDefinitionsMap };

package/dist/esm/lib/mapLeafsOfObject.mjs

@@ -0,0 +1,41 @@
+import { __assign, __spreadArray } from 'tslib';
+
+/**
+ * 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);
+}
+export { mapLeafsOfObject };

package/dist/{index.d.ts → types/index.d.ts}

@@ -5,4 +5,3 @@ export * from "./legacy/ThemeProvider";
 export { makeCssVariableDefinitionsMap } from "./legacy/makeCssVariableDefinitionsMap";
 export { makeCSSVariableTheme } from "./legacy/makeCssVariableTheme";
 export { mapLeafsOfObject } from "./legacy/mapLeafsOfObject";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/js/index.d.ts

@@ -0,0 +1 @@
+export * from "./tokens";

package/dist/{js → types/js}/tokens.d.ts

@@ -1,3 +1,2 @@
 import { TokenStructure } from "../types";
 export declare const tokens: TokenStructure;
-//# sourceMappingURL=tokens.d.ts.map

package/dist/{legacy → types/legacy}/ThemeManager.d.ts

@@ -28,4 +28,3 @@ export declare class ThemeManager<Theme extends BaseTheme = BaseTheme> {
     applyCurrentTheme: () => void;
     private notifyThemeChangeListeners;
 }
-//# sourceMappingURL=ThemeManager.d.ts.map

package/dist/{legacy → types/legacy}/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { ThemeManager, Theme } from "..";
+import { ThemeManager } from "./ThemeManager";
+import { Theme } from "./types";
 export declare const ThemeContext: React.Context<Theme>;
 /**
  * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
@@ -15,4 +16,3 @@ export declare const ThemeProvider: ({ themeManager, ...props }: {
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const useTheme: () => Theme;
-//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/{legacy → types/legacy}/makeCssVariableDefinitionsMap.d.ts

@@ -30,4 +30,3 @@
  * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
  */
 export declare function makeCssVariableDefinitionsMap(theme: Record<string | number, unknown>): Record<string, string>;
-//# sourceMappingURL=makeCssVariableDefinitionsMap.d.ts.map

package/dist/{legacy → types/legacy}/makeCssVariableTheme.d.ts

@@ -35,4 +35,3 @@ import { DeepMapObjectLeafs } from "../types";
  * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
  */
 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/{legacy → types/legacy}/mapLeafsOfObject.d.ts

@@ -23,4 +23,3 @@ import { DeepMapObjectLeafs } from "../types";
  * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
  */
 export declare function mapLeafsOfObject<Obj extends Record<string | number, unknown>, Value>(object: Obj, mapper: (pathToLeaf: string[], value: unknown) => Value): DeepMapObjectLeafs<Obj, Value>;
-//# sourceMappingURL=mapLeafsOfObject.d.ts.map

package/dist/{legacy → types/legacy}/themes/heart.d.ts

@@ -5,4 +5,3 @@ import { Theme } from "../types";
  * - If you require direct usage of these tokens in js you can `import { tokens } from "@kaizen/design-tokens/js"`
  */
 export declare const heartTheme: Theme;
-//# sourceMappingURL=heart.d.ts.map

package/dist/{legacy → types/legacy}/themes/index.d.ts

@@ -5,4 +5,3 @@ export { heartTheme } from "./heart";
  * {@link https://cultureamp.design/?path=/docs/guides-app-starter--docs Check App Starter guidance}
  */
 export declare const defaultTheme: import("../types").Theme;
-//# sourceMappingURL=index.d.ts.map

package/dist/{legacy → types/legacy}/types.d.ts

@@ -239,4 +239,3 @@ export type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint
  */
 export type CSSVariableTheme = DeepMapObjectLeafs<Theme, string>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/{lib → types/lib}/__tests__/themeForTesting.d.ts

@@ -36,4 +36,3 @@ export declare const themeForTesting: {
         };
     };
 };
-//# sourceMappingURL=themeForTesting.d.ts.map

package/dist/{lib → types/lib}/addExtraThemeEntries.d.ts

@@ -20,4 +20,3 @@ export declare const addExtraThemeEntries: (path: string[], key: string, value:
     /** Setting this to true will add `${key}-id` and ${key}-rgb-id` */
     augmentWithId: boolean;
 }) => Record<string, string>;
-//# sourceMappingURL=addExtraThemeEntries.d.ts.map

package/dist/{lib → types/lib}/cssVariables.d.ts

@@ -20,4 +20,3 @@ export declare const objectPathToCssVarFunction: (path: string[], value: unknown
  *      Output: "--color-wisteria-100"
  */
 export declare const objectPathToCssVarIdentifier: (path: string[]) => string;
-//# sourceMappingURL=cssVariables.d.ts.map

package/dist/{lib → types/lib}/makeCssVariableDefinitionsMap.d.ts

@@ -27,4 +27,3 @@
  * }
  */
 export declare function makeCssVariableDefinitionsMap(theme: Record<string | number, unknown>): Record<string, string>;
-//# sourceMappingURL=makeCssVariableDefinitionsMap.d.ts.map

package/dist/{lib → types/lib}/makeCssVariableTheme.d.ts

@@ -32,4 +32,3 @@ import { DeepMapObjectLeafs } from "../legacy/types";
  * 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/{lib → types/lib}/mapLeafsOfObject.d.ts

@@ -20,4 +20,3 @@ import { DeepMapObjectLeafs } from "../legacy/types";
  * ```
  */
 export declare function mapLeafsOfObject<Obj extends Record<string | number, unknown>, Value>(object: Obj, mapper: (pathToLeaf: string[], value: unknown) => Value): DeepMapObjectLeafs<Obj, Value>;
-//# sourceMappingURL=mapLeafsOfObject.d.ts.map

package/dist/{lib → types/lib}/patterns.d.ts

@@ -1,3 +1,2 @@
 export declare const zenColorNamePattern: RegExp;
 export declare const heartColorNamePattern: RegExp;
-//# sourceMappingURL=patterns.d.ts.map

package/dist/{types.d.ts → types/types.d.ts}

@@ -135,6 +135,7 @@ export type TokenStructure = {
             "600": Hex;
         };
         white: Hex;
+        black: Hex;
     };
     dataViz: {
         favorable: Hex;
@@ -177,6 +178,7 @@ export type TokenStructure = {
         8: string;
         12: string;
         16: string;
+        20: string;
         24: string;
         32: string;
         40: string;
@@ -229,4 +231,3 @@ export type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint
  */
 export type CSSVariableTheme = DeepMapObjectLeafs<TokenStructure, string>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/js/package.json

@@ -1,4 +1,5 @@
 {
-  "main": "../dist/js/index.js",
-  "types": "../dist/js/index.d.ts"
+  "main": "../dist/cjs/js/tokens.cjs",
+  "module": "../dist/esm/js/tokens.mjs",
+  "types": "../dist/types/js/index.d.ts"
 }