@kaizen/design-tokens 6.0.3 → 6.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/src/ThemeManager.d.ts +2 -2
  3. package/dist/src/ThemeManager.d.ts.map +1 -1
  4. package/dist/src/ThemeManager.js +16 -14
  5. package/package.json +3 -3
  6. package/src/ThemeManager.d.ts +2 -2
  7. package/src/ThemeManager.js +16 -14
  8. package/src/ThemeManager.js.map +1 -1
  9. package/src/ThemeManager.ts +12 -11
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.1.2](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@6.1.1...@kaizen/design-tokens@6.1.2) (2022-02-09)
7
+
8
+ **Note:** Version bump only for package @kaizen/design-tokens
9
+
10
+
11
+
12
+
13
+
14
+ ## [6.1.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@6.1.0...@kaizen/design-tokens@6.1.1) (2022-02-02)
15
+
16
+ **Note:** Version bump only for package @kaizen/design-tokens
17
+
18
+
19
+
20
+
21
+
22
+ # [6.1.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@6.0.4...@kaizen/design-tokens@6.1.0) (2022-01-19)
23
+
24
+
25
+ ### Features
26
+
27
+ * Make kaizen prerendering friendly (nextjs related) ([#2406](https://github.com/cultureamp/kaizen-design-system/issues/2406)) ([b53bb11](https://github.com/cultureamp/kaizen-design-system/commit/b53bb118157c98874554bd565853797beb72e590))
28
+
29
+
30
+
31
+
32
+
33
+ ## [6.0.4](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@6.0.3...@kaizen/design-tokens@6.0.4) (2022-01-19)
34
+
35
+ **Note:** Version bump only for package @kaizen/design-tokens
36
+
37
+
38
+
39
+
40
+
6
41
  ## [6.0.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@6.0.2...@kaizen/design-tokens@6.0.3) (2022-01-10)
7
42
 
8
43
 
package/dist/src/ThemeManager.d.ts CHANGED
@@ -10,8 +10,8 @@ export declare class ThemeManager<Theme extends BaseTheme = BaseTheme> {
10
10
  private themeChangeListeners;
11
11
  private theme;
12
12
  private rootElement;
13
- constructor(theme: Theme, rootElement?: HTMLElement, apply?: boolean);
14
- getRootElement: () => HTMLElement;
13
+ constructor(theme: Theme, apply?: boolean);
14
+ getRootElement: () => HTMLElement | null;
15
15
  getCurrentTheme: () => Theme;
16
16
  setRootElement: (element: HTMLElement) => void;
17
17
  setAndApplyTheme: (theme: Theme, force?: boolean | undefined) => void;
package/dist/src/ThemeManager.d.ts.map CHANGED
@@ -1 +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;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"}
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,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,aAYvB;IAED,OAAO,CAAC,0BAA0B,CAEjC;CACF"}
package/dist/src/ThemeManager.js CHANGED
@@ -10,14 +10,13 @@ var makeCssVariableDefinitionsMap_1 = require("./lib/makeCssVariableDefinitionsM
10
10
  * 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)`.
11
11
  */
12
12
  var ThemeManager = /** @class */ (function () {
13
- function ThemeManager(theme, rootElement,
13
+ function ThemeManager(theme,
14
14
  /* This allows you to stop the class from applying the theme automatically during construction. Defaults to true */
15
15
  apply) {
16
16
  var _this = this;
17
- if (rootElement === void 0) { rootElement = document.documentElement; }
18
17
  if (apply === void 0) { apply = true; }
19
18
  this.themeChangeListeners = [];
20
- this.rootElement = document.documentElement;
19
+ this.rootElement = null;
21
20
  this.getRootElement = function () { return _this.rootElement; };
22
21
  this.getCurrentTheme = function () { return _this.theme; };
23
22
  this.setRootElement = function (element) {
@@ -39,16 +38,20 @@ var ThemeManager = /** @class */ (function () {
39
38
  _this.themeChangeListeners = _this.themeChangeListeners.filter(function (l) { return l !== listener; });
40
39
  };
41
40
  this.applyCurrentTheme = function () {
42
- var cssVariableDefinitions = (0, makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap)(_this.theme);
43
- Object.entries(cssVariableDefinitions).forEach(function (_a) {
44
- var key = _a[0], value = _a[1];
45
- if (_this.theme.themeKey === "zen") {
46
- _this.rootElement.style.removeProperty(key);
47
- }
48
- else {
49
- _this.rootElement.style.setProperty(key, value);
50
- }
51
- });
41
+ if (typeof window !== "undefined") {
42
+ _this.setRootElement(document.documentElement);
43
+ var cssVariableDefinitions = (0, makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap)(_this.theme);
44
+ Object.entries(cssVariableDefinitions).forEach(function (_a) {
45
+ var _b, _c;
46
+ var key = _a[0], value = _a[1];
47
+ if (_this.theme.themeKey === "zen") {
48
+ (_b = _this.rootElement) === null || _b === void 0 ? void 0 : _b.style.removeProperty(key);
49
+ }
50
+ else {
51
+ (_c = _this.rootElement) === null || _c === void 0 ? void 0 : _c.style.setProperty(key, value);
52
+ }
53
+ });
54
+ }
52
55
  };
53
56
  this.notifyThemeChangeListeners = function (theme) {
54
57
  _this.themeChangeListeners.forEach(function (listener) { return listener(theme); });
@@ -58,7 +61,6 @@ var ThemeManager = /** @class */ (function () {
58
61
  If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
59
62
  */
60
63
  this.theme = theme;
61
- this.rootElement = rootElement;
62
64
  if (apply)
63
65
  this.applyCurrentTheme();
64
66
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@kaizen/design-tokens",
3
3
  "description": "Tokens used in the Kaizen Design System",
4
- "version": "6.0.3",
4
+ "version": "6.1.2",
5
5
  "homepage": "https://github.com/cultureamp/kaizen-design-system/tree/master/packages/design-tokens",
6
6
  "repository": {
7
7
  "type": "git",
@@ -48,7 +48,7 @@
48
48
  "react-highlight": "^0.14.0",
49
49
  "react-intersection-observer": "^8.32.5",
50
50
  "react-map-interaction": "^2.1.0",
51
- "ts-node": "^9.1.1",
51
+ "ts-node": "^10.4.0",
52
52
  "yargs": "^16.2.0"
53
53
  },
54
54
  "dependencies": {
@@ -60,5 +60,5 @@
60
60
  "peerDependencies": {
61
61
  "react": ">=16"
62
62
  },
63
- "gitHead": "fd1737c7b8369fdc7022b3206f5269e40d037efd"
63
+ "gitHead": "b701a4dd8f562c580ddd5cd4fbee2b60df7c82e8"
64
64
  }
package/src/ThemeManager.d.ts CHANGED
@@ -10,8 +10,8 @@ export declare class ThemeManager<Theme extends BaseTheme = BaseTheme> {
10
10
  private themeChangeListeners;
11
11
  private theme;
12
12
  private rootElement;
13
- constructor(theme: Theme, rootElement?: HTMLElement, apply?: boolean);
14
- getRootElement: () => HTMLElement;
13
+ constructor(theme: Theme, apply?: boolean);
14
+ getRootElement: () => HTMLElement | null;
15
15
  getCurrentTheme: () => Theme;
16
16
  setRootElement: (element: HTMLElement) => void;
17
17
  setAndApplyTheme: (theme: Theme, force?: boolean | undefined) => void;
package/src/ThemeManager.js CHANGED
@@ -10,14 +10,13 @@ var makeCssVariableDefinitionsMap_1 = require("./lib/makeCssVariableDefinitionsM
10
10
  * 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)`.
11
11
  */
12
12
  var ThemeManager = /** @class */ (function () {
13
- function ThemeManager(theme, rootElement,
13
+ function ThemeManager(theme,
14
14
  /* This allows you to stop the class from applying the theme automatically during construction. Defaults to true */
15
15
  apply) {
16
16
  var _this = this;
17
- if (rootElement === void 0) { rootElement = document.documentElement; }
18
17
  if (apply === void 0) { apply = true; }
19
18
  this.themeChangeListeners = [];
20
- this.rootElement = document.documentElement;
19
+ this.rootElement = null;
21
20
  this.getRootElement = function () { return _this.rootElement; };
22
21
  this.getCurrentTheme = function () { return _this.theme; };
23
22
  this.setRootElement = function (element) {
@@ -39,16 +38,20 @@ var ThemeManager = /** @class */ (function () {
39
38
  _this.themeChangeListeners = _this.themeChangeListeners.filter(function (l) { return l !== listener; });
40
39
  };
41
40
  this.applyCurrentTheme = function () {
42
- var cssVariableDefinitions = (0, makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap)(_this.theme);
43
- Object.entries(cssVariableDefinitions).forEach(function (_a) {
44
- var key = _a[0], value = _a[1];
45
- if (_this.theme.themeKey === "zen") {
46
- _this.rootElement.style.removeProperty(key);
47
- }
48
- else {
49
- _this.rootElement.style.setProperty(key, value);
50
- }
51
- });
41
+ if (typeof window !== "undefined") {
42
+ _this.setRootElement(document.documentElement);
43
+ var cssVariableDefinitions = (0, makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap)(_this.theme);
44
+ Object.entries(cssVariableDefinitions).forEach(function (_a) {
45
+ var _b, _c;
46
+ var key = _a[0], value = _a[1];
47
+ if (_this.theme.themeKey === "zen") {
48
+ (_b = _this.rootElement) === null || _b === void 0 ? void 0 : _b.style.removeProperty(key);
49
+ }
50
+ else {
51
+ (_c = _this.rootElement) === null || _c === void 0 ? void 0 : _c.style.setProperty(key, value);
52
+ }
53
+ });
54
+ }
52
55
  };
53
56
  this.notifyThemeChangeListeners = function (theme) {
54
57
  _this.themeChangeListeners.forEach(function (listener) { return listener(theme); });
@@ -58,7 +61,6 @@ var ThemeManager = /** @class */ (function () {
58
61
  If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
59
62
  */
60
63
  this.theme = theme;
61
- this.rootElement = rootElement;
62
64
  if (apply)
63
65
  this.applyCurrentTheme();
64
66
  }
package/src/ThemeManager.js.map CHANGED
@@ -1 +1 @@
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,IAAA,6DAA6B,EAAC,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"}
1
+ {"version":3,"file":"ThemeManager.js","sourceRoot":"","sources":["ThemeManager.ts"],"names":[],"mappings":";;;AACA,qFAAmF;AACnF;;;;;;GAMG;AACH;IAIE,sBACE,KAAY;IACZ,oHAAoH;IACpH,KAAqB;QAHvB,iBAWC;QARC,sBAAA,EAAA,YAAqB;QANf,yBAAoB,GAAG,EAAmC,CAAA;QAE1D,gBAAW,GAAuB,IAAI,CAAA;QAcvC,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,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK,EAAE;wBACjC,MAAA,KAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;qBAC5C;yBAAM;wBACL,MAAA,KAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;qBAChD;gBACH,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,AAzDD,IAyDC;AAzDY,oCAAY;AA2DzB,gIAAgI;AAChI,kIAAkI;AAClI,uEAAuE"}
package/src/ThemeManager.ts CHANGED
@@ -10,10 +10,9 @@ import { makeCssVariableDefinitionsMap } from "./lib/makeCssVariableDefinitionsM
10
10
  export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
11
11
  private themeChangeListeners = [] as Array<(theme: Theme) => void>
12
12
  private theme: Theme
13
- private rootElement = document.documentElement
13
+ private rootElement: HTMLElement | null = null
14
14
  constructor(
15
15
  theme: Theme,
16
- rootElement = document.documentElement,
17
16
  /* This allows you to stop the class from applying the theme automatically during construction. Defaults to true */
18
17
  apply: boolean = true
19
18
  ) {
@@ -22,7 +21,6 @@ export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
22
21
  If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
23
22
  */
24
23
  this.theme = theme
25
- this.rootElement = rootElement
26
24
  if (apply) this.applyCurrentTheme()
27
25
  }
28
26
 
@@ -50,14 +48,17 @@ export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
50
48
  )
51
49
  }
52
50
  public applyCurrentTheme = () => {
53
- const cssVariableDefinitions = makeCssVariableDefinitionsMap(this.theme)
54
- Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
55
- if (this.theme.themeKey === "zen") {
56
- this.rootElement.style.removeProperty(key)
57
- } else {
58
- this.rootElement.style.setProperty(key, value)
59
- }
60
- })
51
+ if (typeof window !== "undefined") {
52
+ this.setRootElement(document.documentElement)
53
+ const cssVariableDefinitions = makeCssVariableDefinitionsMap(this.theme)
54
+ Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
55
+ if (this.theme.themeKey === "zen") {
56
+ this.rootElement?.style.removeProperty(key)
57
+ } else {
58
+ this.rootElement?.style.setProperty(key, value)
59
+ }
60
+ })
61
+ }
61
62
  }
62
63
 
63
64
  private notifyThemeChangeListeners = (theme: Theme) => {