@atlaskit/storybook-addon-design-system 3.1.5 → 3.2.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/decorator.js +4 -4
  3. package/dist/es2019/decorator.js +4 -4
  4. package/dist/esm/decorator.js +4 -4
  5. package/package.json +2 -2
  6. package/src/decorator.tsx +6 -3
  7. package/src/tool.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/storybook-addon-design-system
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`cff151b7a3c6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cff151b7a3c6e) -
8
+ Enable refreshed typography theme in `withDesignTokens` decorator.
9
+
10
+ ## 3.1.6
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 3.1.5
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/decorator.js CHANGED
@@ -23,7 +23,7 @@ var splitColumnStyles = {
23
23
  overflow: 'auto',
24
24
  padding: '10px',
25
25
  background: "var(--ds-surface, #FFFFFF)",
26
- color: "var(--ds-text, #172B4D)"
26
+ color: "var(--ds-text, #292A2E)"
27
27
  };
28
28
  var stackColumnStyles = {
29
29
  position: 'absolute',
@@ -33,7 +33,7 @@ var stackColumnStyles = {
33
33
  overflow: 'auto',
34
34
  padding: '10px',
35
35
  background: "var(--ds-surface, #FFFFFF)",
36
- color: "var(--ds-text, #172B4D)"
36
+ color: "var(--ds-text, #292A2E)"
37
37
  };
38
38
  var withDesignTokens = function withDesignTokens(StoryFn, context) {
39
39
  var theme = context.globals.adsTheme || 'auto';
@@ -53,7 +53,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
53
53
  colorMode: theme,
54
54
  spacing: 'spacing',
55
55
  shape: 'shape',
56
- typography: 'typography-modernized'
56
+ typography: 'typography'
57
57
  });
58
58
  case 5:
59
59
  return _context.abrupt("break", 15);
@@ -63,7 +63,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
63
63
  colorMode: 'light',
64
64
  spacing: 'spacing',
65
65
  shape: 'shape',
66
- typography: 'typography-modernized'
66
+ typography: 'typography'
67
67
  });
68
68
  case 8:
69
69
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
package/dist/es2019/decorator.js CHANGED
@@ -9,7 +9,7 @@ const splitColumnStyles = {
9
9
  overflow: 'auto',
10
10
  padding: '10px',
11
11
  background: "var(--ds-surface, #FFFFFF)",
12
- color: "var(--ds-text, #172B4D)"
12
+ color: "var(--ds-text, #292A2E)"
13
13
  };
14
14
  const stackColumnStyles = {
15
15
  position: 'absolute',
@@ -19,7 +19,7 @@ const stackColumnStyles = {
19
19
  overflow: 'auto',
20
20
  padding: '10px',
21
21
  background: "var(--ds-surface, #FFFFFF)",
22
- color: "var(--ds-text, #172B4D)"
22
+ color: "var(--ds-text, #292A2E)"
23
23
  };
24
24
  const withDesignTokens = (StoryFn, context) => {
25
25
  const theme = context.globals.adsTheme || 'auto';
@@ -35,7 +35,7 @@ const withDesignTokens = (StoryFn, context) => {
35
35
  colorMode: theme,
36
36
  spacing: 'spacing',
37
37
  shape: 'shape',
38
- typography: 'typography-modernized'
38
+ typography: 'typography'
39
39
  });
40
40
  break;
41
41
  case 'split':
@@ -44,7 +44,7 @@ const withDesignTokens = (StoryFn, context) => {
44
44
  colorMode: 'light',
45
45
  spacing: 'spacing',
46
46
  shape: 'shape',
47
- typography: 'typography-modernized'
47
+ typography: 'typography'
48
48
  });
49
49
  document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
50
50
  const clone = el.cloneNode(true);
package/dist/esm/decorator.js CHANGED
@@ -14,7 +14,7 @@ var splitColumnStyles = {
14
14
  overflow: 'auto',
15
15
  padding: '10px',
16
16
  background: "var(--ds-surface, #FFFFFF)",
17
- color: "var(--ds-text, #172B4D)"
17
+ color: "var(--ds-text, #292A2E)"
18
18
  };
19
19
  var stackColumnStyles = {
20
20
  position: 'absolute',
@@ -24,7 +24,7 @@ var stackColumnStyles = {
24
24
  overflow: 'auto',
25
25
  padding: '10px',
26
26
  background: "var(--ds-surface, #FFFFFF)",
27
- color: "var(--ds-text, #172B4D)"
27
+ color: "var(--ds-text, #292A2E)"
28
28
  };
29
29
  var withDesignTokens = function withDesignTokens(StoryFn, context) {
30
30
  var theme = context.globals.adsTheme || 'auto';
@@ -44,7 +44,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
44
44
  colorMode: theme,
45
45
  spacing: 'spacing',
46
46
  shape: 'shape',
47
- typography: 'typography-modernized'
47
+ typography: 'typography'
48
48
  });
49
49
  case 5:
50
50
  return _context.abrupt("break", 15);
@@ -54,7 +54,7 @@ var withDesignTokens = function withDesignTokens(StoryFn, context) {
54
54
  colorMode: 'light',
55
55
  spacing: 'spacing',
56
56
  shape: 'shape',
57
- typography: 'typography-modernized'
57
+ typography: 'typography'
58
58
  });
59
59
  case 8:
60
60
  document.documentElement.querySelectorAll('style[data-theme]').forEach(function (el) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/storybook-addon-design-system",
3
- "version": "3.1.5",
3
+ "version": "3.2.0",
4
4
  "description": "Design token storybook addon",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
@@ -29,7 +29,7 @@
29
29
  ],
30
30
  "atlaskit:src": "src/index.tsx",
31
31
  "dependencies": {
32
- "@atlaskit/tokens": "^8.0.0",
32
+ "@atlaskit/tokens": "^9.1.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@storybook/components": "^8.4.7",
35
35
  "@storybook/icons": "^1.2.9",
package/src/decorator.tsx CHANGED
@@ -29,7 +29,10 @@ const stackColumnStyles: CSSProperties = {
29
29
  color: token('color.text'),
30
30
  };
31
31
 
32
- const withDesignTokens = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
32
+ const withDesignTokens = (
33
+ StoryFn: StoryFunction<Renderer>,
34
+ context: StoryContext<Renderer>,
35
+ ): React.JSX.Element => {
33
36
  const theme = (context.globals.adsTheme as Themes) || 'auto';
34
37
 
35
38
  // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -43,7 +46,7 @@ const withDesignTokens = (StoryFn: StoryFunction<Renderer>, context: StoryContex
43
46
  colorMode: theme,
44
47
  spacing: 'spacing',
45
48
  shape: 'shape',
46
- typography: 'typography-modernized',
49
+ typography: 'typography',
47
50
  });
48
51
  break;
49
52
  case 'split':
@@ -52,7 +55,7 @@ const withDesignTokens = (StoryFn: StoryFunction<Renderer>, context: StoryContex
52
55
  colorMode: 'light',
53
56
  spacing: 'spacing',
54
57
  shape: 'shape',
55
- typography: 'typography-modernized',
58
+ typography: 'typography',
56
59
  });
57
60
 
58
61
  document.documentElement.querySelectorAll('style[data-theme]').forEach((el) => {
package/src/tool.tsx CHANGED
@@ -34,7 +34,7 @@ const themeOptions: ThemeOption[] = [
34
34
  *
35
35
  * ADS Toolbar UI, visible in the topbar of the storybook UI.
36
36
  */
37
- const Tool = () => {
37
+ const Tool = (): React.JSX.Element => {
38
38
  const [isVisible, setIsVisible] = useState(false);
39
39
  const [{ adsTheme: originalAdsTheme }, updateGlobals] = useGlobals();
40
40
  const adsTheme = useParameter('adsTheme', originalAdsTheme || 'auto');