@atlaskit/help-layout 4.1.11 → 4.1.12

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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/Header/styled.js +2 -4
  3. package/dist/cjs/components/styled.js +4 -6
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/components/Header/styled.js +3 -4
  6. package/dist/es2019/components/styled.js +8 -9
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/components/Header/styled.js +2 -3
  9. package/dist/esm/components/styled.js +4 -5
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/help-layout
2
2
 
3
+ ## 4.1.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
8
+
3
9
  ## 4.1.11
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/Header/styled.js CHANGED
@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
17
17
 
18
18
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
19
19
 
20
- var _tokens = require("@atlaskit/tokens");
21
-
22
20
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
23
21
 
24
22
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,7 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
28
26
  var HEADER_TITLE_HEIGHT = (0, _constants.gridSize)() * 7;
29
27
  var HEADER_TITLE_BORDER_BOTTOM = 2;
30
28
 
31
- var HeaderContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-bottom: ", "px solid\n ", ";\n justify-content: space-between;\n position: relative;\n"])), (0, _tokens.token)('color.background.neutral', colors.N10), HEADER_TITLE_BORDER_BOTTOM, (0, _tokens.token)('color.border', colors.N30));
29
+ var HeaderContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-bottom: ", "px solid\n ", ";\n justify-content: space-between;\n position: relative;\n"])), "var(--ds-background-neutral, ".concat(colors.N10, ")"), HEADER_TITLE_BORDER_BOTTOM, "var(--ds-border, ".concat(colors.N30, ")"));
32
30
 
33
31
  exports.HeaderContainer = HeaderContainer;
34
32
 
@@ -40,7 +38,7 @@ var BackButtonContainer = _styled.default.div(_templateObject3 || (_templateObje
40
38
 
41
39
  exports.BackButtonContainer = BackButtonContainer;
42
40
 
43
- var HeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n text-align: center;\n font-size: 1rem;\n font-weight: 600;\n line-height: ", "px;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n overflow: hidden;\n vertical-align: middle;\n"])), (0, _tokens.token)('color.text.subtle', colors.N500), HEADER_TITLE_HEIGHT);
41
+ var HeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n text-align: center;\n font-size: 1rem;\n font-weight: 600;\n line-height: ", "px;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n overflow: hidden;\n vertical-align: middle;\n"])), "var(--ds-text-subtle, ".concat(colors.N500, ")"), HEADER_TITLE_HEIGHT);
44
42
 
45
43
  exports.HeaderTitle = HeaderTitle;
46
44
 
package/dist/cjs/components/styled.js CHANGED
@@ -19,15 +19,13 @@ var _constants = require("@atlaskit/theme/constants");
19
19
 
20
20
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
21
21
 
22
- var _tokens = require("@atlaskit/tokens");
23
-
24
22
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
25
23
 
26
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
25
 
28
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
27
 
30
- var Container = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: ", ";\n"])), (0, _tokens.token)('elevation.surface', '#FFFFFF'));
28
+ var Container = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: ", ";\n"])), "var(--ds-surface, #FFFFFF)");
31
29
 
32
30
  exports.Container = Container;
33
31
 
@@ -35,12 +33,12 @@ var Section = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _t
35
33
 
36
34
  exports.Section = Section;
37
35
 
38
- var DividerLine = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", "px;\n margin-top: ", "px;\n box-sizing: border-box;\n"])), (0, _tokens.token)('color.border', colors.N30A), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
36
+ var DividerLine = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", "px;\n margin-top: ", "px;\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2);
39
37
 
40
38
  exports.DividerLine = DividerLine;
41
39
  var FOOTER_BORDER_TOP = 2;
42
40
 
43
- var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), (0, _constants.gridSize)(), (0, _tokens.token)('color.background.neutral', colors.N10), FOOTER_BORDER_TOP, (0, _tokens.token)('color.border', colors.N30));
41
+ var HelpFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", "px 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), (0, _constants.gridSize)(), "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
44
42
  /**
45
43
  * Loading
46
44
  */
@@ -59,6 +57,6 @@ var LoadingRectangle = _styled.default.div(_templateObject7 || (_templateObject7
59
57
  return props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px';
60
58
  }, function (props) {
61
59
  return props.contentWidth ? props.contentWidth : '100%';
62
- }, shimmer, (0, _tokens.token)('color.background.neutral', colors.N30), (0, _tokens.token)('color.background.neutral.subtle', colors.N30), (0, _tokens.token)('color.background.neutral', colors.N40), (0, _tokens.token)('color.background.neutral.subtle', colors.N30));
60
+ }, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
63
61
 
64
62
  exports.LoadingRectangle = LoadingRectangle;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.11",
3
+ "version": "4.1.12",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/Header/styled.js CHANGED
@@ -2,13 +2,12 @@
2
2
  import styled from '@emotion/styled';
3
3
  import { gridSize } from '@atlaskit/theme/constants';
4
4
  import * as colors from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
5
  const HEADER_TITLE_HEIGHT = gridSize() * 7;
7
6
  const HEADER_TITLE_BORDER_BOTTOM = 2;
8
7
  export const HeaderContainer = styled.div`
9
- background-color: ${token('color.background.neutral', colors.N10)};
8
+ background-color: ${`var(--ds-background-neutral, ${colors.N10})`};
10
9
  border-bottom: ${HEADER_TITLE_BORDER_BOTTOM}px solid
11
- ${token('color.border', colors.N30)};
10
+ ${`var(--ds-border, ${colors.N30})`};
12
11
  justify-content: space-between;
13
12
  position: relative;
14
13
  `;
@@ -23,7 +22,7 @@ export const BackButtonContainer = styled.div`
23
22
  left: ${gridSize()}px;
24
23
  `;
25
24
  export const HeaderTitle = styled.div`
26
- color: ${token('color.text.subtle', colors.N500)};
25
+ color: ${`var(--ds-text-subtle, ${colors.N500})`};
27
26
  text-align: center;
28
27
  font-size: 1rem;
29
28
  font-weight: 600;
package/dist/es2019/components/styled.js CHANGED
@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
3
3
  import { keyframes } from '@emotion/core';
4
4
  import { gridSize } from '@atlaskit/theme/constants';
5
5
  import * as colors from '@atlaskit/theme/colors';
6
- import { token } from '@atlaskit/tokens';
7
6
  export const Container = styled.div`
8
7
  position: absolute;
9
8
  top: 0;
@@ -12,7 +11,7 @@ export const Container = styled.div`
12
11
  width: 100%;
13
12
  display: flex;
14
13
  flex-direction: column;
15
- background-color: ${token('elevation.surface', '#FFFFFF')};
14
+ background-color: ${"var(--ds-surface, #FFFFFF)"};
16
15
  `;
17
16
  export const Section = styled.div`
18
17
  flex-grow: 1;
@@ -21,7 +20,7 @@ export const Section = styled.div`
21
20
  min-height: 0;
22
21
  `;
23
22
  export const DividerLine = styled.div`
24
- background-color: ${token('color.border', colors.N30A)};
23
+ background-color: ${`var(--ds-border, ${colors.N30A})`};
25
24
  height: 2px;
26
25
  width: 100%;
27
26
  padding: 0 ${2 * gridSize()}px;
@@ -32,8 +31,8 @@ const FOOTER_BORDER_TOP = 2;
32
31
  export const HelpFooter = styled.div`
33
32
  padding: ${gridSize()}px 0;
34
33
  box-sizing: border-box;
35
- background-color: ${token('color.background.neutral', colors.N10)};
36
- border-top: ${FOOTER_BORDER_TOP}px solid ${token('color.border', colors.N30)};
34
+ background-color: ${`var(--ds-background-neutral, ${colors.N10})`};
35
+ border-top: ${FOOTER_BORDER_TOP}px solid ${`var(--ds-border, ${colors.N30})`};
37
36
  justify-content: space-between;
38
37
  `;
39
38
  /**
@@ -63,12 +62,12 @@ export const LoadingRectangle = styled.div`
63
62
  animation-iteration-count: infinite;
64
63
  animation-name: ${shimmer};
65
64
  animation-timing-function: linear;
66
- background-color: ${token('color.background.neutral', colors.N30)};
65
+ background-color: ${`var(--ds-background-neutral, ${colors.N30})`};
67
66
  background-image: linear-gradient(
68
67
  to right,
69
- ${token('color.background.neutral.subtle', colors.N30)} 10%,
70
- ${token('color.background.neutral', colors.N40)} 20%,
71
- ${token('color.background.neutral.subtle', colors.N30)} 30%
68
+ ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 10%,
69
+ ${`var(--ds-background-neutral, ${colors.N40})`} 20%,
70
+ ${`var(--ds-background-neutral-subtle, ${colors.N30})`} 30%
72
71
  );
73
72
  background-repeat: no-repeat;
74
73
  `;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.11",
3
+ "version": "4.1.12",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/Header/styled.js CHANGED
@@ -6,11 +6,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
6
6
  import styled from '@emotion/styled';
7
7
  import { gridSize } from '@atlaskit/theme/constants';
8
8
  import * as colors from '@atlaskit/theme/colors';
9
- import { token } from '@atlaskit/tokens';
10
9
  var HEADER_TITLE_HEIGHT = gridSize() * 7;
11
10
  var HEADER_TITLE_BORDER_BOTTOM = 2;
12
- export var HeaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border-bottom: ", "px solid\n ", ";\n justify-content: space-between;\n position: relative;\n"])), token('color.background.neutral', colors.N10), HEADER_TITLE_BORDER_BOTTOM, token('color.border', colors.N30));
11
+ export var HeaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border-bottom: ", "px solid\n ", ";\n justify-content: space-between;\n position: relative;\n"])), "var(--ds-background-neutral, ".concat(colors.N10, ")"), HEADER_TITLE_BORDER_BOTTOM, "var(--ds-border, ".concat(colors.N30, ")"));
13
12
  export var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n right: ", "px;\n top: ", "px;\n"])), gridSize(), gridSize() * 1.5);
14
13
  export var BackButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", "px;\n left: ", "px;\n"])), gridSize() * 1.5, gridSize());
15
- export var HeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n text-align: center;\n font-size: 1rem;\n font-weight: 600;\n line-height: ", "px;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n overflow: hidden;\n vertical-align: middle;\n"])), token('color.text.subtle', colors.N500), HEADER_TITLE_HEIGHT);
14
+ export var HeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n text-align: center;\n font-size: 1rem;\n font-weight: 600;\n line-height: ", "px;\n width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: inline-block;\n overflow: hidden;\n vertical-align: middle;\n"])), "var(--ds-text-subtle, ".concat(colors.N500, ")"), HEADER_TITLE_HEIGHT);
16
15
  export var HeaderContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 0 ", "px ", "px ", "px;\n"])), gridSize() * 2, gridSize() * 2, gridSize() * 2);
package/dist/esm/components/styled.js CHANGED
@@ -7,12 +7,11 @@ import styled from '@emotion/styled';
7
7
  import { keyframes } from '@emotion/core';
8
8
  import { gridSize } from '@atlaskit/theme/constants';
9
9
  import * as colors from '@atlaskit/theme/colors';
10
- import { token } from '@atlaskit/tokens';
11
- export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: ", ";\n"])), token('elevation.surface', '#FFFFFF'));
10
+ export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: ", ";\n"])), "var(--ds-surface, #FFFFFF)");
12
11
  export var Section = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n"])));
13
- export var DividerLine = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", "px;\n margin-top: ", "px;\n box-sizing: border-box;\n"])), token('color.border', colors.N30A), 2 * gridSize(), gridSize() * 2);
12
+ export var DividerLine = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n height: 2px;\n width: 100%;\n padding: 0 ", "px;\n margin-top: ", "px;\n box-sizing: border-box;\n"])), "var(--ds-border, ".concat(colors.N30A, ")"), 2 * gridSize(), gridSize() * 2);
14
13
  var FOOTER_BORDER_TOP = 2;
15
- export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", "px 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), gridSize(), token('color.background.neutral', colors.N10), FOOTER_BORDER_TOP, token('color.border', colors.N30));
14
+ export var HelpFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", "px 0;\n box-sizing: border-box;\n background-color: ", ";\n border-top: ", "px solid ", ";\n justify-content: space-between;\n"])), gridSize(), "var(--ds-background-neutral, ".concat(colors.N10, ")"), FOOTER_BORDER_TOP, "var(--ds-border, ".concat(colors.N30, ")"));
16
15
  /**
17
16
  * Loading
18
17
  */
@@ -25,4 +24,4 @@ export var LoadingRectangle = styled.div(_templateObject7 || (_templateObject7 =
25
24
  return props.marginTop ? props.marginTop : gridSize() + 'px';
26
25
  }, function (props) {
27
26
  return props.contentWidth ? props.contentWidth : '100%';
28
- }, shimmer, token('color.background.neutral', colors.N30), token('color.background.neutral.subtle', colors.N30), token('color.background.neutral', colors.N40), token('color.background.neutral.subtle', colors.N30));
27
+ }, shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.11",
3
+ "version": "4.1.12",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/help-layout",
3
- "version": "4.1.11",
3
+ "version": "4.1.12",
4
4
  "description": "Layout for the atlaskit/help component.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"