@kaizen/design-tokens 9.0.3 → 9.1.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.1.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@9.0.5...@kaizen/design-tokens@9.1.0) (2022-08-16)
+
+
+### Features
+
+* Preload fonts in ThemeProvider & handle default theme ([#2917](https://github.com/cultureamp/kaizen-design-system/issues/2917)) ([67e8efb](https://github.com/cultureamp/kaizen-design-system/commit/67e8efb09f0582ef9e14b408291f1916c7f21eea))
+
+
+
+
+
+## [9.0.5](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@9.0.4...@kaizen/design-tokens@9.0.5) (2022-07-21)
+
+**Note:** Version bump only for package @kaizen/design-tokens
+
+
+
+
+
+## [9.0.4](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@9.0.3...@kaizen/design-tokens@9.0.4) (2022-07-20)
+
+**Note:** Version bump only for package @kaizen/design-tokens
+
+
+
+
+
 ## [9.0.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@9.0.2...@kaizen/design-tokens@9.0.3) (2022-06-23)
 
 **Note:** Version bump only for package @kaizen/design-tokens

package/dist/react/ThemeProvider.d.ts

@@ -6,7 +6,7 @@ export declare const ThemeContext: React.Context<Theme>;
  * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
  */
 export declare const ThemeProvider: ({ themeManager, ...props }: {
-    themeManager: ThemeManager;
+    themeManager?: ThemeManager<Theme> | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const useTheme: () => Theme;

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

@@ -1 +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,MAAM,SAAS;iBAsB1B,CAAA;AAED,eAAO,MAAM,QAAQ,aAAuC,CAAA"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../react/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,YAAY,EAAgB,KAAK,EAAE,MAAM,KAAK,CAAA;AAEvD,eAAO,MAAM,YAAY,sBAA2C,CAAA;AAEpE;;;GAGG;AACH,eAAO,MAAM,aAAa;;cAKd,MAAM,SAAS;iBA+D1B,CAAA;AAED,eAAO,MAAM,QAAQ,aAAuC,CAAA"}

package/dist/react/ThemeProvider.js

@@ -1,4 +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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -10,12 +29,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 react_1 = __importStar(require("react"));
 var __1 = require("../");
 exports.ThemeContext = react_1.default.createContext(__1.defaultTheme);
 /**
@@ -24,20 +40,27 @@ exports.ThemeContext = react_1.default.createContext(__1.defaultTheme);
  */
 var 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];
+    var themeManagerInstance = (0, react_1.useState)(function () { return themeManager || new __1.ThemeManager(__1.defaultTheme); })[0];
+    var _b = react_1.default.useState(themeManagerInstance.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);
+        themeManagerInstance.addThemeChangeListener(listener);
         return function () {
             cancelled = true;
-            themeManager.removeThemeChangeListener(listener);
+            themeManagerInstance.removeThemeChangeListener(listener);
         };
     }, []);
-    return (react_1.default.createElement(exports.ThemeContext.Provider, { value: theme }, props.children));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(exports.ThemeContext.Provider, { value: theme }, props.children),
+        react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1.default.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" })));
 };
 exports.ThemeProvider = ThemeProvider;
 var useTheme = function () { return react_1.default.useContext(exports.ThemeContext); };

package/dist/src/ThemeManager.d.ts

@@ -7,10 +7,10 @@ import { Theme as BaseTheme } from "./types";
  * 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> {
-    constructor(theme: Theme, apply?: boolean);
     private themeChangeListeners;
     private theme;
     private rootElement;
+    constructor(theme: Theme, apply?: boolean);
     getRootElement: () => HTMLElement | null;
     getCurrentTheme: () => Theme;
     setRootElement: (element: HTMLElement) => void;

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

@@ -1 +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;gBAEzD,KAAK,EAAE,KAAK,EAEZ,KAAK,GAAE,OAAc;IAUvB,OAAO,CAAC,oBAAoB,CAAsC;IAClE,OAAO,CAAC,KAAK,CAAO;IACpB,OAAO,CAAC,WAAW,CAA2B;IAEvC,cAAc,2BAAyB;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,aAQvB;IAED,OAAO,CAAC,0BAA0B,CAEjC;CACF"}
+{"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;gBAG5C,KAAK,EAAE,KAAK,EAEZ,KAAK,GAAE,OAAc;IAUhB,cAAc,2BAAyB;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,aAQvB;IAED,OAAO,CAAC,0BAA0B,CAEjC;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kaizen/design-tokens",
   "description": "Tokens used in the Kaizen Design System",
-  "version": "9.0.3",
+  "version": "9.1.0",
   "homepage": "https://github.com/cultureamp/kaizen-design-system/tree/master/packages/design-tokens",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "@types/yargs": "^16.0.4",
     "json-to-flat-sass": "^1.0.0",
     "lodash.flatmap": "^4.5.0",
-    "postcss": "^8.4.13",
+    "postcss": "^8.4.14",
     "prettier": "*",
     "react-highlight": "^0.14.0",
     "react-map-interaction": "^2.1.0",
@@ -58,5 +58,5 @@
   "peerDependencies": {
     "react": ">=16 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "158ff7e133f47fc25c958260668de85c0f7b21ef"
+  "gitHead": "e53b047c305c131112c677c227c6a3b5db617823"
 }

package/react/ThemeProvider.d.ts

@@ -6,7 +6,7 @@ export declare const ThemeContext: React.Context<Theme>;
  * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
  */
 export declare const ThemeProvider: ({ themeManager, ...props }: {
-    themeManager: ThemeManager;
+    themeManager?: ThemeManager<Theme> | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const useTheme: () => Theme;

package/react/ThemeProvider.js

@@ -1,4 +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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -10,12 +29,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
 exports.useTheme = exports.ThemeProvider = exports.ThemeContext = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var __1 = require("../");
 exports.ThemeContext = react_1["default"].createContext(__1.defaultTheme);
 /**
@@ -24,20 +40,27 @@ exports.ThemeContext = react_1["default"].createContext(__1.defaultTheme);
  */
 var 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];
+    var themeManagerInstance = (0, react_1.useState)(function () { return themeManager || new __1.ThemeManager(__1.defaultTheme); })[0];
+    var _b = react_1["default"].useState(themeManagerInstance.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);
+        themeManagerInstance.addThemeChangeListener(listener);
         return function () {
             cancelled = true;
-            themeManager.removeThemeChangeListener(listener);
+            themeManagerInstance.removeThemeChangeListener(listener);
         };
     }, []);
-    return (react_1["default"].createElement(exports.ThemeContext.Provider, { value: theme }, props.children));
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(exports.ThemeContext.Provider, { value: theme }, props.children),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "crossorigin" })));
 };
 exports.ThemeProvider = ThemeProvider;
 var useTheme = function () { return react_1["default"].useContext(exports.ThemeContext); };

package/react/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,yBAAuD;AAE1C,QAAA,YAAY,GAAG,kBAAK,CAAC,aAAa,CAAQ,gBAAY,CAAC,CAAA;AAEpE;;;GAGG;AACI,IAAM,aAAa,GAAG,UAAC,EAM7B;IALC,IAAA,YAAY,kBAAA,EACT,KAAK,cAFoB,gBAG7B,CADS;IAKF,IAAA,KAAoB,kBAAK,CAAC,QAAQ,CACtC,YAAY,CAAC,eAAe,EAAE,CAC/B,EAFM,KAAK,QAAA,EAAE,QAAQ,QAErB,CAAA;IACD,kBAAK,CAAC,SAAS,CAAC;QACd,IAAI,SAAS,GAAG,KAAK,CAAA;QACrB,IAAM,QAAQ,GAAG,UAAC,QAAe;YAC/B,IAAI,CAAC,SAAS;gBAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAA;QACD,YAAY,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAA;QAC7C,OAAO;YACL,SAAS,GAAG,IAAI,CAAA;YAChB,YAAY,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAA;QAClD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,iCAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAChC,KAAK,CAAC,QAAQ,CACO,CACzB,CAAA;AACH,CAAC,CAAA;AA3BY,QAAA,aAAa,iBA2BzB;AAEM,IAAM,QAAQ,GAAG,cAAM,OAAA,kBAAK,CAAC,UAAU,CAAC,oBAAY,CAAC,EAA9B,CAA8B,CAAA;AAA/C,QAAA,QAAQ,YAAuC"}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AACvC,yBAAuD;AAE1C,QAAA,YAAY,GAAG,kBAAK,CAAC,aAAa,CAAQ,gBAAY,CAAC,CAAA;AAEpE;;;GAGG;AACI,IAAM,aAAa,GAAG,UAAC,EAM7B;IALC,IAAA,YAAY,kBAAA,EACT,KAAK,cAFoB,gBAG7B,CADS;IAKD,IAAA,oBAAoB,GAAI,IAAA,gBAAQ,EACrC,cAAM,OAAA,YAAY,IAAI,IAAI,gBAAY,CAAC,gBAAY,CAAC,EAA9C,CAA8C,CACrD,GAF0B,CAE1B;IAEK,IAAA,KAAoB,kBAAK,CAAC,QAAQ,CACtC,oBAAoB,CAAC,eAAe,EAAE,CACvC,EAFM,KAAK,QAAA,EAAE,QAAQ,QAErB,CAAA;IACD,kBAAK,CAAC,SAAS,CAAC;QACd,IAAI,SAAS,GAAG,KAAK,CAAA;QACrB,IAAM,QAAQ,GAAG,UAAC,QAAe;YAC/B,IAAI,CAAC,SAAS;gBAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAA;QACD,oBAAoB,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAA;QACrD,OAAO;YACL,SAAS,GAAG,IAAI,CAAA;YAChB,oBAAoB,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL;QACE,iCAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAChC,KAAK,CAAC,QAAQ,CACO;QACxB,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,oEAAoE,EACzE,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,aAAa,GACzB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,yEAAyE,EAC9E,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,aAAa,GACzB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,sEAAsE,EAC3E,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,aAAa,GACzB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,uEAAuE,EAC5E,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,aAAa,GACzB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,iFAAiF,EACtF,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,aAAa,GACzB,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AApEY,QAAA,aAAa,iBAoEzB;AAEM,IAAM,QAAQ,GAAG,cAAM,OAAA,kBAAK,CAAC,UAAU,CAAC,oBAAY,CAAC,EAA9B,CAA8B,CAAA;AAA/C,QAAA,QAAQ,YAAuC"}

package/react/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { ThemeManager, defaultTheme, Theme } from "../"
 
 export const ThemeContext = React.createContext<Theme>(defaultTheme)
@@ -11,28 +11,69 @@ export const ThemeProvider = ({
   themeManager,
   ...props
 }: {
-  themeManager: ThemeManager
+  themeManager?: ThemeManager
   children: React.ReactNode
 }) => {
+  const [themeManagerInstance] = useState(
+    () => themeManager || new ThemeManager(defaultTheme)
+  )
+
   const [theme, setTheme] = React.useState<Theme>(
-    themeManager.getCurrentTheme()
+    themeManagerInstance.getCurrentTheme()
   )
   React.useEffect(() => {
     let cancelled = false
     const listener = (newTheme: Theme) => {
       if (!cancelled) setTheme(newTheme)
     }
-    themeManager.addThemeChangeListener(listener)
+    themeManagerInstance.addThemeChangeListener(listener)
     return () => {
       cancelled = true
-      themeManager.removeThemeChangeListener(listener)
+      themeManagerInstance.removeThemeChangeListener(listener)
     }
   }, [])
 
   return (
-    <ThemeContext.Provider value={theme}>
-      {props.children}
-    </ThemeContext.Provider>
+    <>
+      <ThemeContext.Provider value={theme}>
+        {props.children}
+      </ThemeContext.Provider>
+      <link
+        rel="preload"
+        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="crossorigin"
+      />
+      <link
+        rel="preload"
+        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="crossorigin"
+      />
+      <link
+        rel="preload"
+        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="crossorigin"
+      />
+      <link
+        rel="preload"
+        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="crossorigin"
+      />
+      <link
+        rel="preload"
+        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="crossorigin"
+      />
+    </>
   )
 }
 

package/src/ThemeManager.d.ts

@@ -7,10 +7,10 @@ import { Theme as BaseTheme } from "./types";
  * 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> {
-    constructor(theme: Theme, apply?: boolean);
     private themeChangeListeners;
     private theme;
     private rootElement;
+    constructor(theme: Theme, apply?: boolean);
     getRootElement: () => HTMLElement | null;
     getCurrentTheme: () => Theme;
     setRootElement: (element: HTMLElement) => void;

package/src/ThemeManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeManager.js","sourceRoot":"","sources":["ThemeManager.ts"],"names":[],"mappings":";;;AACA,qFAAmF;AACnF;;;;;;GAMG;AACH;IACE,sBACE,KAAY;IACZ,oHAAoH;IACpH,KAAqB;QAHvB,iBAWC;QARC,sBAAA,EAAA,YAAqB;QAUf,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;QA/CC;;;UAGE;QACF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,KAAK;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACrC,CAAC;IA0CH,mBAAC;AAAD,CAAC,AAtDD,IAsDC;AAtDY,oCAAY;AAwDzB,gIAAgI;AAChI,kIAAkI;AAClI,uEAAuE"}
+{"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/ThemeManager.ts

@@ -8,6 +8,10 @@ import { makeCssVariableDefinitionsMap } from "./lib/makeCssVariableDefinitionsM
  * 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: HTMLElement | null = null
+
   constructor(
     theme: Theme,
     /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
@@ -21,10 +25,6 @@ export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
     if (apply) this.applyCurrentTheme()
   }
 
-  private themeChangeListeners = [] as Array<(theme: Theme) => void>
-  private theme: Theme
-  private rootElement: HTMLElement | null = null
-
   public getRootElement = () => this.rootElement
   public getCurrentTheme = () => this.theme