@kaizen/design-tokens 10.0.0 → 10.0.1
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
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
## [10.0.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@10.0.0...@kaizen/design-tokens@10.0.1) (2022-09-12)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* be able to specify root element applying theme ([#2951](https://github.com/cultureamp/kaizen-design-system/issues/2951)) ([6498509](https://github.com/cultureamp/kaizen-design-system/commit/6498509d7e198421657e640dbe9f953a918500f3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [10.0.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@9.1.0...@kaizen/design-tokens@10.0.0) (2022-09-07)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -10,10 +10,13 @@ export declare class ThemeManager<Theme extends BaseTheme = BaseTheme> {
|
|
|
10
10
|
private themeChangeListeners;
|
|
11
11
|
private theme;
|
|
12
12
|
private rootElement;
|
|
13
|
-
|
|
13
|
+
private rootElementId;
|
|
14
|
+
constructor(theme: Theme, rootElementId?: string, apply?: boolean);
|
|
14
15
|
getRootElement: () => HTMLElement | null;
|
|
16
|
+
getRootElementId: () => string;
|
|
15
17
|
getCurrentTheme: () => Theme;
|
|
16
18
|
setRootElement: (element: HTMLElement) => void;
|
|
19
|
+
setRootElementId: (rootElementId: string) => string;
|
|
17
20
|
setAndApplyTheme: (theme: Theme, force?: boolean | undefined) => void;
|
|
18
21
|
addThemeChangeListener: (listener: (theme: Theme) => void) => void;
|
|
19
22
|
removeThemeChangeListener: (listener: (theme: Theme) => void) => 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;
|
|
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;IAC9C,OAAO,CAAC,aAAa,CAAQ;gBAG3B,KAAK,EAAE,KAAK,EACZ,aAAa,GAAE,MAAW,EAE1B,KAAK,GAAE,OAAc;IAWhB,cAAc,2BAAyB;IACvC,gBAAgB,eAA2B;IAC3C,eAAe,cAAmB;IAElC,cAAc,YAAa,WAAW,UAE5C;IACM,gBAAgB,kBAAmB,MAAM,YACV;IAC/B,gBAAgB,UAAW,KAAK,uCAOtC;IAEM,sBAAsB,qBAAsB,KAAK,KAAK,IAAI,UAEhE;IACM,yBAAyB,qBAAsB,KAAK,KAAK,IAAI,UAInE;IACM,iBAAiB,aAUvB;IAED,OAAO,CAAC,0BAA0B,CAEjC;CACF"}
|
package/dist/src/ThemeManager.js
CHANGED
|
@@ -10,18 +10,23 @@ 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, rootElementId,
|
|
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 (rootElementId === void 0) { rootElementId = ""; }
|
|
17
18
|
if (apply === void 0) { apply = true; }
|
|
18
19
|
this.themeChangeListeners = [];
|
|
19
20
|
this.rootElement = null;
|
|
20
21
|
this.getRootElement = function () { return _this.rootElement; };
|
|
22
|
+
this.getRootElementId = function () { return _this.rootElementId; };
|
|
21
23
|
this.getCurrentTheme = function () { return _this.theme; };
|
|
22
24
|
this.setRootElement = function (element) {
|
|
23
25
|
_this.rootElement = element;
|
|
24
26
|
};
|
|
27
|
+
this.setRootElementId = function (rootElementId) {
|
|
28
|
+
return (_this.rootElementId = rootElementId);
|
|
29
|
+
};
|
|
25
30
|
this.setAndApplyTheme = function (theme, force) {
|
|
26
31
|
if (!force) {
|
|
27
32
|
if (_this.theme === theme)
|
|
@@ -38,8 +43,9 @@ var ThemeManager = /** @class */ (function () {
|
|
|
38
43
|
_this.themeChangeListeners = _this.themeChangeListeners.filter(function (l) { return l !== listener; });
|
|
39
44
|
};
|
|
40
45
|
this.applyCurrentTheme = function () {
|
|
46
|
+
var _a;
|
|
41
47
|
if (typeof window !== "undefined") {
|
|
42
|
-
_this.setRootElement(document.documentElement);
|
|
48
|
+
_this.setRootElement((_a = document.getElementById(_this.rootElementId)) !== null && _a !== void 0 ? _a : document.documentElement);
|
|
43
49
|
var cssVariableDefinitions = (0, makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap)(_this.theme);
|
|
44
50
|
Object.entries(cssVariableDefinitions).forEach(function (_a) {
|
|
45
51
|
var _b;
|
|
@@ -56,6 +62,7 @@ var ThemeManager = /** @class */ (function () {
|
|
|
56
62
|
If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
|
|
57
63
|
*/
|
|
58
64
|
this.theme = theme;
|
|
65
|
+
this.rootElementId = rootElementId;
|
|
59
66
|
if (apply)
|
|
60
67
|
this.applyCurrentTheme();
|
|
61
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeManager.js","sourceRoot":"","sources":["../../src/ThemeManager.ts"],"names":[],"mappings":";;;AACA,qFAAmF;AACnF;;;;;;GAMG;AACH;
|
|
1
|
+
{"version":3,"file":"ThemeManager.js","sourceRoot":"","sources":["../../src/ThemeManager.ts"],"names":[],"mappings":";;;AACA,qFAAmF;AACnF;;;;;;GAMG;AACH;IAME,sBACE,KAAY,EACZ,aAA0B;IAC1B,oHAAoH;IACpH,KAAqB;QAJvB,iBAaC;QAXC,8BAAA,EAAA,kBAA0B;QAE1B,sBAAA,EAAA,YAAqB;QATf,yBAAoB,GAAG,EAAmC,CAAA;QAE1D,gBAAW,GAAuB,IAAI,CAAA;QAkBvC,mBAAc,GAAG,cAAM,OAAA,KAAI,CAAC,WAAW,EAAhB,CAAgB,CAAA;QACvC,qBAAgB,GAAG,cAAM,OAAA,KAAI,CAAC,aAAa,EAAlB,CAAkB,CAAA;QAC3C,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,aAAqB;YAC9C,OAAA,CAAC,KAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QAApC,CAAoC,CAAA;QAC/B,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,CACjB,MAAA,QAAQ,CAAC,cAAc,CAAC,KAAI,CAAC,aAAa,CAAC,mCAAI,QAAQ,CAAC,eAAe,CACxE,CAAA;gBACD,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;QAjDC;;;UAGE;QACF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAA;QAClC,IAAI,KAAK;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACrC,CAAC;IA2CH,mBAAC;AAAD,CAAC,AA9DD,IA8DC;AA9DY,oCAAY;AAgEzB,gIAAgI;AAChI,kIAAkI;AAClI,uEAAuE"}
|
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": "10.0.
|
|
4
|
+
"version": "10.0.1",
|
|
5
5
|
"homepage": "https://github.com/cultureamp/kaizen-design-system/tree/master/packages/design-tokens",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"react": ">=16 || ^17.0.0 || ^18.0.0"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "0e7e4af0401f2c2aeed42717851d6f08357cf14d"
|
|
62
62
|
}
|
package/src/ThemeManager.ts
CHANGED
|
@@ -11,9 +11,11 @@ export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
|
|
|
11
11
|
private themeChangeListeners = [] as Array<(theme: Theme) => void>
|
|
12
12
|
private theme: Theme
|
|
13
13
|
private rootElement: HTMLElement | null = null
|
|
14
|
+
private rootElementId: string
|
|
14
15
|
|
|
15
16
|
constructor(
|
|
16
17
|
theme: Theme,
|
|
18
|
+
rootElementId: string = "",
|
|
17
19
|
/* This allows you to stop the class from applying the theme automatically during construction. Defaults to true */
|
|
18
20
|
apply: boolean = true
|
|
19
21
|
) {
|
|
@@ -22,15 +24,19 @@ export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
|
|
|
22
24
|
If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
|
|
23
25
|
*/
|
|
24
26
|
this.theme = theme
|
|
27
|
+
this.rootElementId = rootElementId
|
|
25
28
|
if (apply) this.applyCurrentTheme()
|
|
26
29
|
}
|
|
27
30
|
|
|
28
31
|
public getRootElement = () => this.rootElement
|
|
32
|
+
public getRootElementId = () => this.rootElementId
|
|
29
33
|
public getCurrentTheme = () => this.theme
|
|
30
34
|
|
|
31
35
|
public setRootElement = (element: HTMLElement) => {
|
|
32
36
|
this.rootElement = element
|
|
33
37
|
}
|
|
38
|
+
public setRootElementId = (rootElementId: string) =>
|
|
39
|
+
(this.rootElementId = rootElementId)
|
|
34
40
|
public setAndApplyTheme = (theme: Theme, force?: boolean) => {
|
|
35
41
|
if (!force) {
|
|
36
42
|
if (this.theme === theme) return
|
|
@@ -50,7 +56,9 @@ export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
|
|
|
50
56
|
}
|
|
51
57
|
public applyCurrentTheme = () => {
|
|
52
58
|
if (typeof window !== "undefined") {
|
|
53
|
-
this.setRootElement(
|
|
59
|
+
this.setRootElement(
|
|
60
|
+
document.getElementById(this.rootElementId) ?? document.documentElement
|
|
61
|
+
)
|
|
54
62
|
const cssVariableDefinitions = makeCssVariableDefinitionsMap(this.theme)
|
|
55
63
|
Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
|
|
56
64
|
this.rootElement?.style.setProperty(key, value)
|