@kaizen/design-tokens 6.0.4 → 6.1.3
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.
- package/CHANGELOG.md +35 -0
- package/dist/src/ThemeManager.d.ts +2 -2
- package/dist/src/ThemeManager.d.ts.map +1 -1
- package/dist/src/ThemeManager.js +16 -14
- package/package.json +3 -3
- package/src/ThemeManager.d.ts +2 -2
- package/src/ThemeManager.js +16 -14
- package/src/ThemeManager.js.map +1 -1
- 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.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@6.1.2...@kaizen/design-tokens@6.1.3) (2022-02-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @kaizen/design-tokens
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [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)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @kaizen/design-tokens
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [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)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @kaizen/design-tokens
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [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)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Features
|
|
34
|
+
|
|
35
|
+
* 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))
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
6
41
|
## [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)
|
|
7
42
|
|
|
8
43
|
**Note:** Version bump only for package @kaizen/design-tokens
|
|
@@ -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,
|
|
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;
|
|
@@ -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,
|
|
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,
|
|
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 =
|
|
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
|
-
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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.
|
|
4
|
+
"version": "6.1.3",
|
|
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": "^
|
|
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": "
|
|
63
|
+
"gitHead": "c7b7f82742f6399b524cd632f665c280e826ee17"
|
|
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,
|
|
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,
|
|
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 =
|
|
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
|
-
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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
|
|
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 =
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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) => {
|