@atlaskit/storybook-addon-design-system 0.3.9 → 0.5.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 +20 -0
- package/dist/cjs/tokens/decorator.js +40 -40
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/tokens/decorator.js +4 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/tokens/decorator.js +40 -40
- package/dist/esm/version.json +1 -1
- package/dist/types/tokens/types.d.ts +1 -1
- package/package.json +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlaskit/storybook-addon-design-system
|
|
2
2
|
|
|
3
|
+
## 0.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`389ab86b2a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/389ab86b2a3) - Adding spacing tokens to storybook addon so that users spacing tokens appear in storybook
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
|
|
12
|
+
|
|
13
|
+
## 0.4.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
3
23
|
## 0.3.9
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -47,46 +47,46 @@ 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
|
-
|
|
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
|
+
spacing: 'spacing'
|
|
60
|
+
});
|
|
61
|
+
case 5:
|
|
62
|
+
return _context.abrupt("break", 15);
|
|
63
|
+
case 6:
|
|
64
|
+
_context.next = 8;
|
|
65
|
+
return (0, _tokens.setGlobalTheme)({
|
|
66
|
+
colorMode: 'light',
|
|
67
|
+
spacing: 'spacing'
|
|
68
|
+
});
|
|
69
|
+
case 8:
|
|
70
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
71
|
+
var clone = el.cloneNode(true);
|
|
72
|
+
clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
|
|
73
|
+
// HACK: re-target theme selectors to split div containers
|
|
74
|
+
clone.textContent = clone.textContent.replace(/html\[/g, '[');
|
|
75
|
+
document.head.append(clone);
|
|
76
|
+
});
|
|
77
|
+
return _context.abrupt("break", 15);
|
|
78
|
+
case 10:
|
|
79
|
+
delete document.documentElement.dataset.theme;
|
|
80
|
+
delete document.documentElement.dataset.colorMode;
|
|
81
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
82
|
+
return el.remove();
|
|
83
|
+
});
|
|
84
|
+
return _context.abrupt("break", 15);
|
|
85
|
+
case 14:
|
|
86
|
+
return _context.abrupt("break", 15);
|
|
87
|
+
case 15:
|
|
88
|
+
case "end":
|
|
89
|
+
return _context.stop();
|
|
90
90
|
}
|
|
91
91
|
}, _callee);
|
|
92
92
|
}))();
|
package/dist/cjs/version.json
CHANGED
|
@@ -36,13 +36,15 @@ const withDesignTokens = makeDecorator({
|
|
|
36
36
|
case 'dark':
|
|
37
37
|
case 'auto':
|
|
38
38
|
await setGlobalTheme({
|
|
39
|
-
colorMode: theme
|
|
39
|
+
colorMode: theme,
|
|
40
|
+
spacing: 'spacing'
|
|
40
41
|
});
|
|
41
42
|
break;
|
|
42
43
|
case 'split':
|
|
43
44
|
case 'stack':
|
|
44
45
|
await setGlobalTheme({
|
|
45
|
-
colorMode: 'light'
|
|
46
|
+
colorMode: 'light',
|
|
47
|
+
spacing: 'spacing'
|
|
46
48
|
});
|
|
47
49
|
document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
|
|
48
50
|
const clone = el.cloneNode(true);
|
package/dist/es2019/version.json
CHANGED
|
@@ -37,46 +37,46 @@ 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
|
-
|
|
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
|
+
spacing: 'spacing'
|
|
50
|
+
});
|
|
51
|
+
case 5:
|
|
52
|
+
return _context.abrupt("break", 15);
|
|
53
|
+
case 6:
|
|
54
|
+
_context.next = 8;
|
|
55
|
+
return setGlobalTheme({
|
|
56
|
+
colorMode: 'light',
|
|
57
|
+
spacing: 'spacing'
|
|
58
|
+
});
|
|
59
|
+
case 8:
|
|
60
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
61
|
+
var clone = el.cloneNode(true);
|
|
62
|
+
clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
|
|
63
|
+
// HACK: re-target theme selectors to split div containers
|
|
64
|
+
clone.textContent = clone.textContent.replace(/html\[/g, '[');
|
|
65
|
+
document.head.append(clone);
|
|
66
|
+
});
|
|
67
|
+
return _context.abrupt("break", 15);
|
|
68
|
+
case 10:
|
|
69
|
+
delete document.documentElement.dataset.theme;
|
|
70
|
+
delete document.documentElement.dataset.colorMode;
|
|
71
|
+
document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
|
|
72
|
+
return el.remove();
|
|
73
|
+
});
|
|
74
|
+
return _context.abrupt("break", 15);
|
|
75
|
+
case 14:
|
|
76
|
+
return _context.abrupt("break", 15);
|
|
77
|
+
case 15:
|
|
78
|
+
case "end":
|
|
79
|
+
return _context.stop();
|
|
80
80
|
}
|
|
81
81
|
}, _callee);
|
|
82
82
|
}))();
|
package/dist/esm/version.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type Themes = 'light' | 'dark' | 'auto' | 'none' | 'split' | 'stack';
|
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/storybook-addon-design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.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": {
|
|
@@ -24,10 +23,10 @@
|
|
|
24
23
|
"module:es2019": "dist/es2019/index.js",
|
|
25
24
|
"types": "dist/types/index.d.ts",
|
|
26
25
|
"typesVersions": {
|
|
27
|
-
">=4.
|
|
26
|
+
">=4.5 <4.9": {
|
|
28
27
|
"*": [
|
|
29
|
-
"dist/types-ts4.
|
|
30
|
-
"dist/types-ts4.
|
|
28
|
+
"dist/types-ts4.5/*",
|
|
29
|
+
"dist/types-ts4.5/index.d.ts"
|
|
31
30
|
]
|
|
32
31
|
}
|
|
33
32
|
},
|
|
@@ -37,7 +36,7 @@
|
|
|
37
36
|
".": "./src/index.tsx"
|
|
38
37
|
},
|
|
39
38
|
"dependencies": {
|
|
40
|
-
"@atlaskit/tokens": "^1.
|
|
39
|
+
"@atlaskit/tokens": "^1.4.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
|
}
|