@kaizen/design-tokens 3.1.0

package/sass/typography.scss

@@ -0,0 +1,526 @@
+/** THIS IS AN AUTOGENERATED FILE **/
+
+$typography-data-large-font-family: var(
+  --typography-data-large-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-data-large-font-family-id: --typography-data-large-font-family;
+$typography-data-large-font-weight: var(
+  --typography-data-large-font-weight,
+  700
+);
+$typography-data-large-font-weight-id: --typography-data-large-font-weight;
+$typography-data-large-font-size: var(
+  --typography-data-large-font-size,
+  5.25rem
+);
+$typography-data-large-font-size-id: --typography-data-large-font-size;
+$typography-data-large-line-height: var(
+  --typography-data-large-line-height,
+  5.25rem
+);
+$typography-data-large-line-height-id: --typography-data-large-line-height;
+$typography-data-large-letter-spacing: var(
+  --typography-data-large-letter-spacing,
+  normal
+);
+$typography-data-large-letter-spacing-id: --typography-data-large-letter-spacing;
+$typography-data-large-units-font-family: var(
+  --typography-data-large-units-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-data-large-units-font-family-id: --typography-data-large-units-font-family;
+$typography-data-large-units-font-weight: var(
+  --typography-data-large-units-font-weight,
+  700
+);
+$typography-data-large-units-font-weight-id: --typography-data-large-units-font-weight;
+$typography-data-large-units-font-size: var(
+  --typography-data-large-units-font-size,
+  2.625rem
+);
+$typography-data-large-units-font-size-id: --typography-data-large-units-font-size;
+$typography-data-large-units-line-height: var(
+  --typography-data-large-units-line-height,
+  5.25rem
+);
+$typography-data-large-units-line-height-id: --typography-data-large-units-line-height;
+$typography-data-large-units-letter-spacing: var(
+  --typography-data-large-units-letter-spacing,
+  normal
+);
+$typography-data-large-units-letter-spacing-id: --typography-data-large-units-letter-spacing;
+$typography-data-medium-font-family: var(
+  --typography-data-medium-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-data-medium-font-family-id: --typography-data-medium-font-family;
+$typography-data-medium-font-weight: var(
+  --typography-data-medium-font-weight,
+  700
+);
+$typography-data-medium-font-weight-id: --typography-data-medium-font-weight;
+$typography-data-medium-font-size: var(
+  --typography-data-medium-font-size,
+  3rem
+);
+$typography-data-medium-font-size-id: --typography-data-medium-font-size;
+$typography-data-medium-line-height: var(
+  --typography-data-medium-line-height,
+  5rem
+);
+$typography-data-medium-line-height-id: --typography-data-medium-line-height;
+$typography-data-medium-letter-spacing: var(
+  --typography-data-medium-letter-spacing,
+  normal
+);
+$typography-data-medium-letter-spacing-id: --typography-data-medium-letter-spacing;
+$typography-data-medium-units-font-family: var(
+  --typography-data-medium-units-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-data-medium-units-font-family-id: --typography-data-medium-units-font-family;
+$typography-data-medium-units-font-weight: var(
+  --typography-data-medium-units-font-weight,
+  700
+);
+$typography-data-medium-units-font-weight-id: --typography-data-medium-units-font-weight;
+$typography-data-medium-units-font-size: var(
+  --typography-data-medium-units-font-size,
+  1.5rem
+);
+$typography-data-medium-units-font-size-id: --typography-data-medium-units-font-size;
+$typography-data-medium-units-line-height: var(
+  --typography-data-medium-units-line-height,
+  5rem
+);
+$typography-data-medium-units-line-height-id: --typography-data-medium-units-line-height;
+$typography-data-medium-units-letter-spacing: var(
+  --typography-data-medium-units-letter-spacing,
+  normal
+);
+$typography-data-medium-units-letter-spacing-id: --typography-data-medium-units-letter-spacing;
+$typography-data-small-font-family: var(
+  --typography-data-small-font-family,
+  "Greycliff CF",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-data-small-font-family-id: --typography-data-small-font-family;
+$typography-data-small-font-weight: var(
+  --typography-data-small-font-weight,
+  700
+);
+$typography-data-small-font-weight-id: --typography-data-small-font-weight;
+$typography-data-small-font-size: var(
+  --typography-data-small-font-size,
+  1.5rem
+);
+$typography-data-small-font-size-id: --typography-data-small-font-size;
+$typography-data-small-line-height: var(
+  --typography-data-small-line-height,
+  1.5rem
+);
+$typography-data-small-line-height-id: --typography-data-small-line-height;
+$typography-data-small-letter-spacing: var(
+  --typography-data-small-letter-spacing,
+  normal
+);
+$typography-data-small-letter-spacing-id: --typography-data-small-letter-spacing;
+$typography-data-small-units-font-family: var(
+  --typography-data-small-units-font-family,
+  "Greycliff CF",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-data-small-units-font-family-id: --typography-data-small-units-font-family;
+$typography-data-small-units-font-weight: var(
+  --typography-data-small-units-font-weight,
+  700
+);
+$typography-data-small-units-font-weight-id: --typography-data-small-units-font-weight;
+$typography-data-small-units-font-size: var(
+  --typography-data-small-units-font-size,
+  1.125rem
+);
+$typography-data-small-units-font-size-id: --typography-data-small-units-font-size;
+$typography-data-small-units-line-height: var(
+  --typography-data-small-units-line-height,
+  1.5rem
+);
+$typography-data-small-units-line-height-id: --typography-data-small-units-line-height;
+$typography-data-small-units-letter-spacing: var(
+  --typography-data-small-units-letter-spacing,
+  normal
+);
+$typography-data-small-units-letter-spacing-id: --typography-data-small-units-letter-spacing;
+$typography-display-0-font-family: var(
+  --typography-display-0-font-family,
+  "Tiempos Headline",
+  Georgia,
+  serif
+);
+$typography-display-0-font-family-id: --typography-display-0-font-family;
+$typography-display-0-font-weight: var(--typography-display-0-font-weight, 800);
+$typography-display-0-font-weight-id: --typography-display-0-font-weight;
+$typography-display-0-font-size: var(--typography-display-0-font-size, 4.5rem);
+$typography-display-0-font-size-id: --typography-display-0-font-size;
+$typography-display-0-line-height: var(
+  --typography-display-0-line-height,
+  5.25rem
+);
+$typography-display-0-line-height-id: --typography-display-0-line-height;
+$typography-display-0-letter-spacing: var(
+  --typography-display-0-letter-spacing,
+  0em
+);
+$typography-display-0-letter-spacing-id: --typography-display-0-letter-spacing;
+$typography-heading-1-font-family: var(
+  --typography-heading-1-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-heading-1-font-family-id: --typography-heading-1-font-family;
+$typography-heading-1-font-weight: var(--typography-heading-1-font-weight, 700);
+$typography-heading-1-font-weight-id: --typography-heading-1-font-weight;
+$typography-heading-1-font-size: var(
+  --typography-heading-1-font-size,
+  2.125rem
+);
+$typography-heading-1-font-size-id: --typography-heading-1-font-size;
+$typography-heading-1-line-height: var(
+  --typography-heading-1-line-height,
+  2.625rem
+);
+$typography-heading-1-line-height-id: --typography-heading-1-line-height;
+$typography-heading-1-letter-spacing: var(
+  --typography-heading-1-letter-spacing,
+  normal
+);
+$typography-heading-1-letter-spacing-id: --typography-heading-1-letter-spacing;
+$typography-heading-2-font-family: var(
+  --typography-heading-2-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-heading-2-font-family-id: --typography-heading-2-font-family;
+$typography-heading-2-font-weight: var(--typography-heading-2-font-weight, 700);
+$typography-heading-2-font-weight-id: --typography-heading-2-font-weight;
+$typography-heading-2-font-size: var(--typography-heading-2-font-size, 1.75rem);
+$typography-heading-2-font-size-id: --typography-heading-2-font-size;
+$typography-heading-2-line-height: var(
+  --typography-heading-2-line-height,
+  2.25rem
+);
+$typography-heading-2-line-height-id: --typography-heading-2-line-height;
+$typography-heading-2-letter-spacing: var(
+  --typography-heading-2-letter-spacing,
+  normal
+);
+$typography-heading-2-letter-spacing-id: --typography-heading-2-letter-spacing;
+$typography-heading-3-font-family: var(
+  --typography-heading-3-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-heading-3-font-family-id: --typography-heading-3-font-family;
+$typography-heading-3-font-weight: var(--typography-heading-3-font-weight, 700);
+$typography-heading-3-font-weight-id: --typography-heading-3-font-weight;
+$typography-heading-3-font-size: var(
+  --typography-heading-3-font-size,
+  1.375rem
+);
+$typography-heading-3-font-size-id: --typography-heading-3-font-size;
+$typography-heading-3-line-height: var(
+  --typography-heading-3-line-height,
+  1.5rem
+);
+$typography-heading-3-line-height-id: --typography-heading-3-line-height;
+$typography-heading-3-letter-spacing: var(
+  --typography-heading-3-letter-spacing,
+  normal
+);
+$typography-heading-3-letter-spacing-id: --typography-heading-3-letter-spacing;
+$typography-heading-4-font-family: var(
+  --typography-heading-4-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-heading-4-font-family-id: --typography-heading-4-font-family;
+$typography-heading-4-font-weight: var(--typography-heading-4-font-weight, 600);
+$typography-heading-4-font-weight-id: --typography-heading-4-font-weight;
+$typography-heading-4-font-size: var(
+  --typography-heading-4-font-size,
+  1.125rem
+);
+$typography-heading-4-font-size-id: --typography-heading-4-font-size;
+$typography-heading-4-line-height: var(
+  --typography-heading-4-line-height,
+  1.5rem
+);
+$typography-heading-4-line-height-id: --typography-heading-4-line-height;
+$typography-heading-4-letter-spacing: var(
+  --typography-heading-4-letter-spacing,
+  normal
+);
+$typography-heading-4-letter-spacing-id: --typography-heading-4-letter-spacing;
+$typography-heading-5-font-family: var(
+  --typography-heading-5-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-heading-5-font-family-id: --typography-heading-5-font-family;
+$typography-heading-5-font-weight: var(--typography-heading-5-font-weight, 600);
+$typography-heading-5-font-weight-id: --typography-heading-5-font-weight;
+$typography-heading-5-font-size: var(--typography-heading-5-font-size, 1rem);
+$typography-heading-5-font-size-id: --typography-heading-5-font-size;
+$typography-heading-5-line-height: var(
+  --typography-heading-5-line-height,
+  1.5rem
+);
+$typography-heading-5-line-height-id: --typography-heading-5-line-height;
+$typography-heading-5-letter-spacing: var(
+  --typography-heading-5-letter-spacing,
+  normal
+);
+$typography-heading-5-letter-spacing-id: --typography-heading-5-letter-spacing;
+$typography-heading-6-font-family: var(
+  --typography-heading-6-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-heading-6-font-family-id: --typography-heading-6-font-family;
+$typography-heading-6-font-weight: var(--typography-heading-6-font-weight, 700);
+$typography-heading-6-font-weight-id: --typography-heading-6-font-weight;
+$typography-heading-6-font-size: var(
+  --typography-heading-6-font-size,
+  0.875rem
+);
+$typography-heading-6-font-size-id: --typography-heading-6-font-size;
+$typography-heading-6-line-height: var(
+  --typography-heading-6-line-height,
+  1.5rem
+);
+$typography-heading-6-line-height-id: --typography-heading-6-line-height;
+$typography-heading-6-letter-spacing: var(
+  --typography-heading-6-letter-spacing,
+  normal
+);
+$typography-heading-6-letter-spacing-id: --typography-heading-6-letter-spacing;
+$typography-paragraph-intro-lede-font-family: var(
+  --typography-paragraph-intro-lede-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-paragraph-intro-lede-font-family-id: --typography-paragraph-intro-lede-font-family;
+$typography-paragraph-intro-lede-font-weight: var(
+  --typography-paragraph-intro-lede-font-weight,
+  400
+);
+$typography-paragraph-intro-lede-font-weight-id: --typography-paragraph-intro-lede-font-weight;
+$typography-paragraph-intro-lede-font-size: var(
+  --typography-paragraph-intro-lede-font-size,
+  1.25rem
+);
+$typography-paragraph-intro-lede-font-size-id: --typography-paragraph-intro-lede-font-size;
+$typography-paragraph-intro-lede-line-height: var(
+  --typography-paragraph-intro-lede-line-height,
+  1.875rem
+);
+$typography-paragraph-intro-lede-line-height-id: --typography-paragraph-intro-lede-line-height;
+$typography-paragraph-intro-lede-letter-spacing: var(
+  --typography-paragraph-intro-lede-letter-spacing,
+  -0.5px
+);
+$typography-paragraph-intro-lede-letter-spacing-id: --typography-paragraph-intro-lede-letter-spacing;
+$typography-paragraph-body-font-family: var(
+  --typography-paragraph-body-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-paragraph-body-font-family-id: --typography-paragraph-body-font-family;
+$typography-paragraph-body-font-weight: var(
+  --typography-paragraph-body-font-weight,
+  400
+);
+$typography-paragraph-body-font-weight-id: --typography-paragraph-body-font-weight;
+$typography-paragraph-body-font-size: var(
+  --typography-paragraph-body-font-size,
+  1rem
+);
+$typography-paragraph-body-font-size-id: --typography-paragraph-body-font-size;
+$typography-paragraph-body-line-height: var(
+  --typography-paragraph-body-line-height,
+  1.5rem
+);
+$typography-paragraph-body-line-height-id: --typography-paragraph-body-line-height;
+$typography-paragraph-body-letter-spacing: var(
+  --typography-paragraph-body-letter-spacing,
+  normal
+);
+$typography-paragraph-body-letter-spacing-id: --typography-paragraph-body-letter-spacing;
+$typography-paragraph-small-font-family: var(
+  --typography-paragraph-small-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-paragraph-small-font-family-id: --typography-paragraph-small-font-family;
+$typography-paragraph-small-font-weight: var(
+  --typography-paragraph-small-font-weight,
+  400
+);
+$typography-paragraph-small-font-weight-id: --typography-paragraph-small-font-weight;
+$typography-paragraph-small-font-size: var(
+  --typography-paragraph-small-font-size,
+  0.875rem
+);
+$typography-paragraph-small-font-size-id: --typography-paragraph-small-font-size;
+$typography-paragraph-small-line-height: var(
+  --typography-paragraph-small-line-height,
+  1.125rem
+);
+$typography-paragraph-small-line-height-id: --typography-paragraph-small-line-height;
+$typography-paragraph-small-letter-spacing: var(
+  --typography-paragraph-small-letter-spacing,
+  normal
+);
+$typography-paragraph-small-letter-spacing-id: --typography-paragraph-small-letter-spacing;
+$typography-paragraph-extra-small-font-family: var(
+  --typography-paragraph-extra-small-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-paragraph-extra-small-font-family-id: --typography-paragraph-extra-small-font-family;
+$typography-paragraph-extra-small-font-weight: var(
+  --typography-paragraph-extra-small-font-weight,
+  400
+);
+$typography-paragraph-extra-small-font-weight-id: --typography-paragraph-extra-small-font-weight;
+$typography-paragraph-extra-small-font-size: var(
+  --typography-paragraph-extra-small-font-size,
+  0.75rem
+);
+$typography-paragraph-extra-small-font-size-id: --typography-paragraph-extra-small-font-size;
+$typography-paragraph-extra-small-line-height: var(
+  --typography-paragraph-extra-small-line-height,
+  1.125rem
+);
+$typography-paragraph-extra-small-line-height-id: --typography-paragraph-extra-small-line-height;
+$typography-paragraph-extra-small-letter-spacing: var(
+  --typography-paragraph-extra-small-letter-spacing,
+  normal
+);
+$typography-paragraph-extra-small-letter-spacing-id: --typography-paragraph-extra-small-letter-spacing;
+$typography-paragraph-bold-font-weight: var(
+  --typography-paragraph-bold-font-weight,
+  600
+);
+$typography-paragraph-bold-font-weight-id: --typography-paragraph-bold-font-weight;
+$typography-button-primary-font-family: var(
+  --typography-button-primary-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-button-primary-font-family-id: --typography-button-primary-font-family;
+$typography-button-primary-font-weight: var(
+  --typography-button-primary-font-weight,
+  700
+);
+$typography-button-primary-font-weight-id: --typography-button-primary-font-weight;
+$typography-button-primary-font-size: var(
+  --typography-button-primary-font-size,
+  1.125rem
+);
+$typography-button-primary-font-size-id: --typography-button-primary-font-size;
+$typography-button-primary-line-height: var(
+  --typography-button-primary-line-height,
+  1.5rem
+);
+$typography-button-primary-line-height-id: --typography-button-primary-line-height;
+$typography-button-primary-letter-spacing: var(
+  --typography-button-primary-letter-spacing,
+  normal
+);
+$typography-button-primary-letter-spacing-id: --typography-button-primary-letter-spacing;
+$typography-button-secondary-font-family: var(
+  --typography-button-secondary-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+$typography-button-secondary-font-family-id: --typography-button-secondary-font-family;
+$typography-button-secondary-font-weight: var(
+  --typography-button-secondary-font-weight,
+  500
+);
+$typography-button-secondary-font-weight-id: --typography-button-secondary-font-weight;
+$typography-button-secondary-font-size: var(
+  --typography-button-secondary-font-size,
+  1rem
+);
+$typography-button-secondary-font-size-id: --typography-button-secondary-font-size;
+$typography-button-secondary-line-height: var(
+  --typography-button-secondary-line-height,
+  1.5rem
+);
+$typography-button-secondary-line-height-id: --typography-button-secondary-line-height;
+$typography-button-secondary-letter-spacing: var(
+  --typography-button-secondary-letter-spacing,
+  normal
+);
+$typography-button-secondary-letter-spacing-id: --typography-button-secondary-letter-spacing;

package/src/ThemeManager.d.ts

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

package/src/ThemeManager.js

@@ -0,0 +1,71 @@
+"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, 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) */
+//# sourceMappingURL=ThemeManager.js.map

package/src/ThemeManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeManager.js","sourceRoot":"","sources":["ThemeManager.ts"],"names":[],"mappings":";;;AACA,qFAAmF;AACnF;;;;;;GAMG;AACH;IAIE,sBACE,KAAY,EACZ,WAAsC;IACtC,oHAAoH;IACpH,KAAqB;QAJvB,iBAaC;QAXC,4BAAA,EAAA,cAAc,QAAQ,CAAC,eAAe;QAEtC,sBAAA,EAAA,YAAqB;QAPf,yBAAoB,GAAG,EAAmC,CAAA;QAE1D,gBAAW,GAAG,QAAQ,CAAC,eAAe,CAAA;QAgBvC,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,IAAM,sBAAsB,GAAG,6DAA6B,CAAC,KAAI,CAAC,KAAK,CAAC,CAAA;YACxE,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,UAAC,EAAY;oBAAX,GAAG,QAAA,EAAE,KAAK,QAAA;gBACzD,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK,EAAE;oBACjC,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;iBAC3C;qBAAM;oBACL,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;iBAC/C;YACH,CAAC,CAAC,CAAA;QACJ,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;QA7CC;;;UAGE;QACF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;QAC9B,IAAI,KAAK;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACrC,CAAC;IAuCH,mBAAC;AAAD,CAAC,AAxDD,IAwDC;AAxDY,oCAAY;AA0DzB,gIAAgI;AAChI,kIAAkI;AAClI,uEAAuE"}

package/src/ThemeManager.ts

@@ -0,0 +1,70 @@
+import { Theme as BaseTheme } from "./types"
+import { makeCssVariableDefinitionsMap } from "./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)`.
+ */
+export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
+  private themeChangeListeners = [] as Array<(theme: Theme) => void>
+  private theme: Theme
+  private rootElement = document.documentElement
+  constructor(
+    theme: Theme,
+    rootElement = document.documentElement,
+    /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
+    apply: boolean = true
+  ) {
+    /*
+      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()
+  }
+
+  public getRootElement = () => this.rootElement
+  public getCurrentTheme = () => this.theme
+
+  public setRootElement = (element: HTMLElement) => {
+    this.rootElement = element
+  }
+  public setAndApplyTheme = (theme: Theme, force?: boolean) => {
+    if (!force) {
+      if (this.theme === theme) return
+    }
+    this.theme = theme
+    this.applyCurrentTheme()
+    this.notifyThemeChangeListeners(theme)
+  }
+
+  public addThemeChangeListener = (listener: (theme: Theme) => void) => {
+    this.themeChangeListeners.push(listener)
+  }
+  public removeThemeChangeListener = (listener: (theme: Theme) => void) => {
+    this.themeChangeListeners = this.themeChangeListeners.filter(
+      l => l !== listener
+    )
+  }
+  public applyCurrentTheme = () => {
+    const cssVariableDefinitions = makeCssVariableDefinitionsMap(this.theme)
+    Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
+      if (this.theme.themeKey === "zen") {
+        this.rootElement.style.removeProperty(key)
+      } else {
+        this.rootElement.style.setProperty(key, value)
+      }
+    })
+  }
+
+  private notifyThemeChangeListeners = (theme: Theme) => {
+    this.themeChangeListeners.forEach(listener => listener(theme))
+  }
+}
+
+// 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) */