@atlaskit/storybook-addon-design-system 0.3.9 → 0.4.0
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 +10 -0
- package/dist/cjs/tokens/decorator.js +38 -40
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/tokens/decorator.js +38 -40
- package/dist/esm/version.json +1 -1
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @atlaskit/storybook-addon-design-system
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
3
13
|
## 0.3.9
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
|
@@ -47,46 +47,44 @@ var withDesignTokens = (0, _addons.makeDecorator)({
|
|
|
47
47
|
(0, _addons.useEffect)(function () {
|
|
48
48
|
(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
|
|
49
49
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
50
|
-
while (1) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
return _context.stop();
|
|
89
|
-
}
|
|
50
|
+
while (1) switch (_context.prev = _context.next) {
|
|
51
|
+
case 0:
|
|
52
|
+
_context.t0 = theme;
|
|
53
|
+
_context.next = _context.t0 === 'light' ? 3 : _context.t0 === 'dark' ? 3 : _context.t0 === 'auto' ? 3 : _context.t0 === 'split' ? 6 : _context.t0 === 'stack' ? 6 : _context.t0 === 'none' ? 10 : 14;
|
|
54
|
+
break;
|
|
55
|
+
case 3:
|
|
56
|
+
_context.next = 5;
|
|
57
|
+
return (0, _tokens.setGlobalTheme)({
|
|
58
|
+
colorMode: theme
|
|
59
|
+
});
|
|
60
|
+
case 5:
|
|
61
|
+
return _context.abrupt("break", 15);
|
|
62
|
+
case 6:
|
|
63
|
+
_context.next = 8;
|
|
64
|
+
return (0, _tokens.setGlobalTheme)({
|
|
65
|
+
colorMode: 'light'
|
|
66
|
+
});
|
|
67
|
+
case 8:
|
|
68
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
69
|
+
var clone = el.cloneNode(true);
|
|
70
|
+
clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
|
|
71
|
+
// HACK: re-target theme selectors to split div containers
|
|
72
|
+
clone.textContent = clone.textContent.replace(/html\[/g, '[');
|
|
73
|
+
document.head.append(clone);
|
|
74
|
+
});
|
|
75
|
+
return _context.abrupt("break", 15);
|
|
76
|
+
case 10:
|
|
77
|
+
delete document.documentElement.dataset.theme;
|
|
78
|
+
delete document.documentElement.dataset.colorMode;
|
|
79
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
80
|
+
return el.remove();
|
|
81
|
+
});
|
|
82
|
+
return _context.abrupt("break", 15);
|
|
83
|
+
case 14:
|
|
84
|
+
return _context.abrupt("break", 15);
|
|
85
|
+
case 15:
|
|
86
|
+
case "end":
|
|
87
|
+
return _context.stop();
|
|
90
88
|
}
|
|
91
89
|
}, _callee);
|
|
92
90
|
}))();
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/version.json
CHANGED
|
@@ -37,46 +37,44 @@ var withDesignTokens = makeDecorator({
|
|
|
37
37
|
useEffect(function () {
|
|
38
38
|
_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
39
39
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
40
|
-
while (1) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
return _context.stop();
|
|
79
|
-
}
|
|
40
|
+
while (1) switch (_context.prev = _context.next) {
|
|
41
|
+
case 0:
|
|
42
|
+
_context.t0 = theme;
|
|
43
|
+
_context.next = _context.t0 === 'light' ? 3 : _context.t0 === 'dark' ? 3 : _context.t0 === 'auto' ? 3 : _context.t0 === 'split' ? 6 : _context.t0 === 'stack' ? 6 : _context.t0 === 'none' ? 10 : 14;
|
|
44
|
+
break;
|
|
45
|
+
case 3:
|
|
46
|
+
_context.next = 5;
|
|
47
|
+
return setGlobalTheme({
|
|
48
|
+
colorMode: theme
|
|
49
|
+
});
|
|
50
|
+
case 5:
|
|
51
|
+
return _context.abrupt("break", 15);
|
|
52
|
+
case 6:
|
|
53
|
+
_context.next = 8;
|
|
54
|
+
return setGlobalTheme({
|
|
55
|
+
colorMode: 'light'
|
|
56
|
+
});
|
|
57
|
+
case 8:
|
|
58
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
59
|
+
var clone = el.cloneNode(true);
|
|
60
|
+
clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
|
|
61
|
+
// HACK: re-target theme selectors to split div containers
|
|
62
|
+
clone.textContent = clone.textContent.replace(/html\[/g, '[');
|
|
63
|
+
document.head.append(clone);
|
|
64
|
+
});
|
|
65
|
+
return _context.abrupt("break", 15);
|
|
66
|
+
case 10:
|
|
67
|
+
delete document.documentElement.dataset.theme;
|
|
68
|
+
delete document.documentElement.dataset.colorMode;
|
|
69
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
70
|
+
return el.remove();
|
|
71
|
+
});
|
|
72
|
+
return _context.abrupt("break", 15);
|
|
73
|
+
case 14:
|
|
74
|
+
return _context.abrupt("break", 15);
|
|
75
|
+
case 15:
|
|
76
|
+
case "end":
|
|
77
|
+
return _context.stop();
|
|
80
78
|
}
|
|
81
79
|
}, _callee);
|
|
82
80
|
}))();
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/storybook-addon-design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Design token storybook addon",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
8
8
|
},
|
|
9
9
|
"atlassian": {
|
|
10
|
-
"disableProductCI": true,
|
|
11
10
|
"team": "Design System Team",
|
|
12
11
|
"releaseModel": "scheduled",
|
|
13
12
|
"website": {
|
|
@@ -37,7 +36,7 @@
|
|
|
37
36
|
".": "./src/index.tsx"
|
|
38
37
|
},
|
|
39
38
|
"dependencies": {
|
|
40
|
-
"@atlaskit/tokens": "^1.
|
|
39
|
+
"@atlaskit/tokens": "^1.3.0",
|
|
41
40
|
"@babel/runtime": "^7.0.0",
|
|
42
41
|
"@storybook/addons": "^6.4.0",
|
|
43
42
|
"@storybook/api": "^6.4.0",
|
|
@@ -56,7 +55,9 @@
|
|
|
56
55
|
"@repo/internal": {
|
|
57
56
|
"dom-events": "use-bind-event-listener",
|
|
58
57
|
"design-system": "v1",
|
|
59
|
-
"
|
|
58
|
+
"design-tokens": [
|
|
59
|
+
"color"
|
|
60
|
+
],
|
|
60
61
|
"deprecation": "no-deprecated-imports",
|
|
61
62
|
"styling": "emotion"
|
|
62
63
|
}
|