@atlaskit/heading 0.1.2 → 0.1.6

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
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 0.1.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 0.1.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
14
+ - Updated dependencies
15
+
16
+ ## 0.1.4
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
22
+ ## 0.1.3
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies
27
+
3
28
  ## 0.1.2
4
29
 
5
30
  ### Patch Changes
@@ -9,8 +9,6 @@ var _core = require("@emotion/core");
9
9
 
10
10
  var _colors = require("@atlaskit/theme/colors");
11
11
 
12
- var _tokens = require("@atlaskit/tokens");
13
-
14
12
  var _utils = require("./utils");
15
13
 
16
14
  /** @jsx jsx */
@@ -31,49 +29,49 @@ var headingResetStyles = (0, _core.css)({
31
29
  margin: 0
32
30
  });
33
31
  var h900Styles = (0, _core.css)({
34
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
32
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
35
33
  fontSize: "".concat(35 / 14, "rem"),
36
34
  fontWeight: 500,
37
35
  letterSpacing: '-0.01em',
38
36
  lineHeight: (0, _utils.lh)(35, 40)
39
37
  });
40
38
  var h800Styles = (0, _core.css)({
41
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
39
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
42
40
  fontSize: "".concat(29 / 14, "rem"),
43
41
  fontWeight: 600,
44
42
  letterSpacing: '-0.01em',
45
43
  lineHeight: (0, _utils.lh)(29, 32)
46
44
  });
47
45
  var h700Styles = (0, _core.css)({
48
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
46
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
49
47
  fontSize: "".concat(24 / 14, "rem"),
50
48
  fontWeight: 500,
51
49
  letterSpacing: '-0.01em',
52
50
  lineHeight: (0, _utils.lh)(24, 28)
53
51
  });
54
52
  var h600Styles = (0, _core.css)({
55
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
53
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
56
54
  fontSize: "".concat(20 / 14, "rem"),
57
55
  fontWeight: 500,
58
56
  letterSpacing: '-0.008em',
59
57
  lineHeight: (0, _utils.lh)(20, 24)
60
58
  });
61
59
  var h500Styles = (0, _core.css)({
62
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
60
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
63
61
  fontSize: "".concat(16 / 14, "rem"),
64
62
  fontWeight: 600,
65
63
  letterSpacing: '-0.006em',
66
64
  lineHeight: (0, _utils.lh)(16, 20)
67
65
  });
68
66
  var h400Styles = (0, _core.css)({
69
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
67
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
70
68
  fontSize: '1rem',
71
69
  fontWeight: 600,
72
70
  letterSpacing: '-0.003em',
73
71
  lineHeight: (0, _utils.lh)(14, 16)
74
72
  });
75
73
  var h300Styles = (0, _core.css)({
76
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
74
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
77
75
  fontSize: "".concat(12 / 14, "rem"),
78
76
  fontWeight: 600,
79
77
  letterSpacing: 0,
@@ -81,14 +79,14 @@ var h300Styles = (0, _core.css)({
81
79
  textTransform: 'uppercase'
82
80
  });
83
81
  var h200Styles = (0, _core.css)({
84
- color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
82
+ color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
85
83
  fontSize: "".concat(12 / 14, "rem"),
86
84
  fontWeight: 600,
87
85
  letterSpacing: 0,
88
86
  lineHeight: (0, _utils.lh)(12, 16)
89
87
  });
90
88
  var h100Styles = (0, _core.css)({
91
- color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
89
+ color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
92
90
  fontSize: "".concat(11 / 14, "rem"),
93
91
  fontWeight: 700,
94
92
  letterSpacing: 0,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.2",
3
+ "version": "0.1.6",
4
4
  "sideEffects": false
5
5
  }
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/core';
3
3
  import { N200, N800 } from '@atlaskit/theme/colors';
4
- import { token } from '@atlaskit/tokens';
5
4
  import { lh } from './utils'; // https://atlassian.design/foundations/typography
6
5
 
7
6
  const levelMap = {
@@ -20,49 +19,49 @@ const headingResetStyles = css({
20
19
  margin: 0
21
20
  });
22
21
  const h900Styles = css({
23
- color: token('color.text.highEmphasis', N800),
22
+ color: `var(--ds-text-highEmphasis, ${N800})`,
24
23
  fontSize: `${35 / 14}rem`,
25
24
  fontWeight: 500,
26
25
  letterSpacing: '-0.01em',
27
26
  lineHeight: lh(35, 40)
28
27
  });
29
28
  const h800Styles = css({
30
- color: token('color.text.highEmphasis', N800),
29
+ color: `var(--ds-text-highEmphasis, ${N800})`,
31
30
  fontSize: `${29 / 14}rem`,
32
31
  fontWeight: 600,
33
32
  letterSpacing: '-0.01em',
34
33
  lineHeight: lh(29, 32)
35
34
  });
36
35
  const h700Styles = css({
37
- color: token('color.text.highEmphasis', N800),
36
+ color: `var(--ds-text-highEmphasis, ${N800})`,
38
37
  fontSize: `${24 / 14}rem`,
39
38
  fontWeight: 500,
40
39
  letterSpacing: '-0.01em',
41
40
  lineHeight: lh(24, 28)
42
41
  });
43
42
  const h600Styles = css({
44
- color: token('color.text.highEmphasis', N800),
43
+ color: `var(--ds-text-highEmphasis, ${N800})`,
45
44
  fontSize: `${20 / 14}rem`,
46
45
  fontWeight: 500,
47
46
  letterSpacing: '-0.008em',
48
47
  lineHeight: lh(20, 24)
49
48
  });
50
49
  const h500Styles = css({
51
- color: token('color.text.highEmphasis', N800),
50
+ color: `var(--ds-text-highEmphasis, ${N800})`,
52
51
  fontSize: `${16 / 14}rem`,
53
52
  fontWeight: 600,
54
53
  letterSpacing: '-0.006em',
55
54
  lineHeight: lh(16, 20)
56
55
  });
57
56
  const h400Styles = css({
58
- color: token('color.text.highEmphasis', N800),
57
+ color: `var(--ds-text-highEmphasis, ${N800})`,
59
58
  fontSize: '1rem',
60
59
  fontWeight: 600,
61
60
  letterSpacing: '-0.003em',
62
61
  lineHeight: lh(14, 16)
63
62
  });
64
63
  const h300Styles = css({
65
- color: token('color.text.highEmphasis', N800),
64
+ color: `var(--ds-text-highEmphasis, ${N800})`,
66
65
  fontSize: `${12 / 14}rem`,
67
66
  fontWeight: 600,
68
67
  letterSpacing: 0,
@@ -70,14 +69,14 @@ const h300Styles = css({
70
69
  textTransform: 'uppercase'
71
70
  });
72
71
  const h200Styles = css({
73
- color: token('color.text.lowEmphasis', N200),
72
+ color: `var(--ds-text-lowEmphasis, ${N200})`,
74
73
  fontSize: `${12 / 14}rem`,
75
74
  fontWeight: 600,
76
75
  letterSpacing: 0,
77
76
  lineHeight: lh(12, 16)
78
77
  });
79
78
  const h100Styles = css({
80
- color: token('color.text.lowEmphasis', N200),
79
+ color: `var(--ds-text-lowEmphasis, ${N200})`,
81
80
  fontSize: `${11 / 14}rem`,
82
81
  fontWeight: 700,
83
82
  letterSpacing: 0,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.2",
3
+ "version": "0.1.6",
4
4
  "sideEffects": false
5
5
  }
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/core';
3
3
  import { N200, N800 } from '@atlaskit/theme/colors';
4
- import { token } from '@atlaskit/tokens';
5
4
  import { lh } from './utils'; // https://atlassian.design/foundations/typography
6
5
 
7
6
  var levelMap = {
@@ -20,49 +19,49 @@ var headingResetStyles = css({
20
19
  margin: 0
21
20
  });
22
21
  var h900Styles = css({
23
- color: token('color.text.highEmphasis', N800),
22
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
24
23
  fontSize: "".concat(35 / 14, "rem"),
25
24
  fontWeight: 500,
26
25
  letterSpacing: '-0.01em',
27
26
  lineHeight: lh(35, 40)
28
27
  });
29
28
  var h800Styles = css({
30
- color: token('color.text.highEmphasis', N800),
29
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
31
30
  fontSize: "".concat(29 / 14, "rem"),
32
31
  fontWeight: 600,
33
32
  letterSpacing: '-0.01em',
34
33
  lineHeight: lh(29, 32)
35
34
  });
36
35
  var h700Styles = css({
37
- color: token('color.text.highEmphasis', N800),
36
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
38
37
  fontSize: "".concat(24 / 14, "rem"),
39
38
  fontWeight: 500,
40
39
  letterSpacing: '-0.01em',
41
40
  lineHeight: lh(24, 28)
42
41
  });
43
42
  var h600Styles = css({
44
- color: token('color.text.highEmphasis', N800),
43
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
45
44
  fontSize: "".concat(20 / 14, "rem"),
46
45
  fontWeight: 500,
47
46
  letterSpacing: '-0.008em',
48
47
  lineHeight: lh(20, 24)
49
48
  });
50
49
  var h500Styles = css({
51
- color: token('color.text.highEmphasis', N800),
50
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
52
51
  fontSize: "".concat(16 / 14, "rem"),
53
52
  fontWeight: 600,
54
53
  letterSpacing: '-0.006em',
55
54
  lineHeight: lh(16, 20)
56
55
  });
57
56
  var h400Styles = css({
58
- color: token('color.text.highEmphasis', N800),
57
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
59
58
  fontSize: '1rem',
60
59
  fontWeight: 600,
61
60
  letterSpacing: '-0.003em',
62
61
  lineHeight: lh(14, 16)
63
62
  });
64
63
  var h300Styles = css({
65
- color: token('color.text.highEmphasis', N800),
64
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
66
65
  fontSize: "".concat(12 / 14, "rem"),
67
66
  fontWeight: 600,
68
67
  letterSpacing: 0,
@@ -70,14 +69,14 @@ var h300Styles = css({
70
69
  textTransform: 'uppercase'
71
70
  });
72
71
  var h200Styles = css({
73
- color: token('color.text.lowEmphasis', N200),
72
+ color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
74
73
  fontSize: "".concat(12 / 14, "rem"),
75
74
  fontWeight: 600,
76
75
  letterSpacing: 0,
77
76
  lineHeight: lh(12, 16)
78
77
  });
79
78
  var h100Styles = css({
80
- color: token('color.text.lowEmphasis', N200),
79
+ color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
81
80
  fontSize: "".concat(11 / 14, "rem"),
82
81
  fontWeight: 700,
83
82
  letterSpacing: 0,
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.2",
3
+ "version": "0.1.6",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "0.1.2",
3
+ "version": "0.1.6",
4
4
  "description": "A heading is a typography component used to display text in different sizes and formats.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -9,7 +9,6 @@
9
9
  },
10
10
  "atlassian": {
11
11
  "team": "Design System Team",
12
- "inPublicMirror": false,
13
12
  "releaseModel": "continuous",
14
13
  "website": {
15
14
  "name": "Heading"
@@ -21,13 +20,13 @@
21
20
  "module:es2019": "dist/es2019/index.js",
22
21
  "types": "dist/types/index.d.ts",
23
22
  "sideEffects": false,
24
- "atlaskit:src": "src/index.ts",
23
+ "atlaskit:src": "src/index.tsx",
25
24
  "af:exports": {
26
- ".": "./src/index.ts"
25
+ ".": "./src/index.tsx"
27
26
  },
28
27
  "dependencies": {
29
- "@atlaskit/theme": "^11.5.0",
30
- "@atlaskit/tokens": "^0.2.0",
28
+ "@atlaskit/theme": "^12.1.0",
29
+ "@atlaskit/tokens": "^0.5.0",
31
30
  "@babel/runtime": "^7.0.0",
32
31
  "@emotion/core": "^10.0.9"
33
32
  },
@@ -35,7 +34,6 @@
35
34
  "react": "^16.8.0"
36
35
  },
37
36
  "devDependencies": {
38
- "@atlaskit/build-utils": "*",
39
37
  "@atlaskit/button": "^16.0.0",
40
38
  "@atlaskit/docs": "*",
41
39
  "@atlaskit/ssr": "*",
@@ -54,7 +52,10 @@
54
52
  },
55
53
  "@repo/internal": {
56
54
  "design-system": "v1",
57
- "styling": "emotion",
55
+ "styling": [
56
+ "static",
57
+ "emotion"
58
+ ],
58
59
  "ui-components": "lite-mode",
59
60
  "analytics": "analytics-next",
60
61
  "theming": "tokens",