@atlaskit/focused-task-close-account 2.0.4 → 2.0.5

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,11 @@
1
1
  # @atlaskit/focused-task-close-account
2
2
 
3
+ ## 2.0.5
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
  ## 2.0.4
4
10
 
5
11
  ### Patch Changes
@@ -17,14 +17,12 @@ var _colors = require("@atlaskit/theme/colors");
17
17
 
18
18
  var _typography = require("@atlaskit/theme/typography");
19
19
 
20
- var _tokens = require("@atlaskit/tokens");
21
-
22
20
  var _gridSizeTimes = _interopRequireDefault(require("../../util/gridSizeTimes"));
23
21
 
24
22
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
25
23
 
26
24
  var getSelectedCardColor = function getSelectedCardColor(props) {
27
- return props.isSelected && "".concat((0, _tokens.token)('color.background.selected', _colors.B50));
25
+ return props.isSelected && "".concat("var(--ds-background-selected, ".concat(_colors.B50, ")"));
28
26
  };
29
27
 
30
28
  var Screen = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n max-width: 640px;\n margin-bottom: ", "px;\n"])), (0, _gridSizeTimes.default)(4));
@@ -37,7 +35,7 @@ exports.Title = Title;
37
35
 
38
36
  var SectionCard = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n padding: ", "px;\n width: 100%;\n background-color: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n margin-top: ", "px;\n"])), (0, _gridSizeTimes.default)(2.5), function (props) {
39
37
  return getSelectedCardColor(props);
40
- }, (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)), (0, _gridSizeTimes.default)(2));
38
+ }, (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), (0, _gridSizeTimes.default)(2));
41
39
 
42
40
  exports.SectionCard = SectionCard;
43
41
 
@@ -45,6 +43,6 @@ var Avatar = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _ta
45
43
 
46
44
  exports.Avatar = Avatar;
47
45
 
48
- var UserDetails = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n margin-top: ", "px;\n font-weight: 600;\n color: ", ";\n"])), (0, _gridSizeTimes.default)(1.5), (0, _tokens.token)('color.text.accent.blue', _colors.B400));
46
+ var UserDetails = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n margin-top: ", "px;\n font-weight: 600;\n color: ", ";\n"])), (0, _gridSizeTimes.default)(1.5), "var(--ds-text-accent-blue, ".concat(_colors.B400, ")"));
49
47
 
50
48
  exports.UserDetails = UserDetails;
@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
15
15
 
16
16
  var _typography = require("@atlaskit/theme/typography");
17
17
 
18
- var _tokens = require("@atlaskit/tokens");
19
-
20
18
  var _gridSizeTimes = _interopRequireDefault(require("../../util/gridSizeTimes"));
21
19
 
22
20
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -41,7 +39,7 @@ var MainInformationList = _styled.default.ul(_templateObject5 || (_templateObjec
41
39
 
42
40
  exports.MainInformationList = MainInformationList;
43
41
 
44
- var IconHoverWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n padding-left: ", "px;\n &:hover {\n color: ", ";\n }\n"])), (0, _tokens.token)('color.background.information.bold', _colors.B500), (0, _gridSizeTimes.default)(0.5), (0, _tokens.token)('color.background.information.bold.hovered', _colors.B200));
42
+ var IconHoverWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n padding-left: ", "px;\n &:hover {\n color: ", ";\n }\n"])), "var(--ds-background-information-bold, ".concat(_colors.B500, ")"), (0, _gridSizeTimes.default)(0.5), "var(--ds-background-information-bold-hovered, ".concat(_colors.B200, ")"));
45
43
 
46
44
  exports.IconHoverWrapper = IconHoverWrapper;
47
45
 
@@ -17,8 +17,6 @@ var _typography = require("@atlaskit/theme/typography");
17
17
 
18
18
  var _colors = require("@atlaskit/theme/colors");
19
19
 
20
- var _tokens = require("@atlaskit/tokens");
21
-
22
20
  var _gridSizeTimes = _interopRequireDefault(require("../../util/gridSizeTimes"));
23
21
 
24
22
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -43,6 +41,6 @@ var UserName = _styled.default.span(_templateObject4 || (_templateObject4 = (0,
43
41
 
44
42
  exports.UserName = UserName;
45
43
 
46
- var UserEmail = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", " color: ", ";\n font-weight: 300;\n margin-top: ", "px;\n"])), baseHeading(11, 16), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _gridSizeTimes.default)(0.5));
44
+ var UserEmail = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", " color: ", ";\n font-weight: 300;\n margin-top: ", "px;\n"])), baseHeading(11, 16), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _gridSizeTimes.default)(0.5));
47
45
 
48
46
  exports.UserEmail = UserEmail;
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/focused-task-close-account",
3
- "version": "2.0.4"
3
+ "version": "2.0.5"
4
4
  }
@@ -2,11 +2,10 @@ import styled from '@emotion/styled';
2
2
  import { borderRadius } from '@atlaskit/theme/constants';
3
3
  import { B50, B400, N50A, N60A } from '@atlaskit/theme/colors';
4
4
  import { h700 } from '@atlaskit/theme/typography';
5
- import { token } from '@atlaskit/tokens';
6
5
  import gridSizeTimes from '../../util/gridSizeTimes';
7
6
 
8
7
  const getSelectedCardColor = props => {
9
- return props.isSelected && `${token('color.background.selected', B50)}`;
8
+ return props.isSelected && `${`var(--ds-background-selected, ${B50})`}`;
10
9
  };
11
10
 
12
11
  export const Screen = styled.div`
@@ -26,7 +25,7 @@ export const SectionCard = styled.div`
26
25
  width: 100%;
27
26
  background-color: ${props => getSelectedCardColor(props)};
28
27
  border-radius: ${borderRadius()}px;
29
- box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`)};
28
+ box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`};
30
29
  margin-top: ${gridSizeTimes(2)}px;
31
30
  `;
32
31
  export const Avatar = styled.div`
@@ -40,5 +39,5 @@ export const UserDetails = styled.div`
40
39
  flex-direction: column;
41
40
  margin-top: ${gridSizeTimes(1.5)}px;
42
41
  font-weight: 600;
43
- color: ${token('color.text.accent.blue', B400)};
42
+ color: ${`var(--ds-text-accent-blue, ${B400})`};
44
43
  `;
@@ -1,7 +1,6 @@
1
1
  import styled from '@emotion/styled';
2
2
  import { B500, B200 } from '@atlaskit/theme/colors';
3
3
  import { h700 } from '@atlaskit/theme/typography';
4
- import { token } from '@atlaskit/tokens';
5
4
  import gridSizeTimes from '../../util/gridSizeTimes';
6
5
  export const Screen = styled.div`
7
6
  width: 100%;
@@ -35,10 +34,10 @@ export const MainInformationList = styled.ul`
35
34
  }
36
35
  `;
37
36
  export const IconHoverWrapper = styled.span`
38
- color: ${token('color.background.information.bold', B500)};
37
+ color: ${`var(--ds-background-information-bold, ${B500})`};
39
38
  padding-left: ${gridSizeTimes(0.5)}px;
40
39
  &:hover {
41
- color: ${token('color.background.information.bold.hovered', B200)};
40
+ color: ${`var(--ds-background-information-bold-hovered, ${B200})`};
42
41
  }
43
42
  `;
44
43
  export const InlineDialogContent = styled.div`
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
2
2
  import { fontSize } from '@atlaskit/theme/constants';
3
3
  import { h500 } from '@atlaskit/theme/typography';
4
4
  import { N200 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
5
  import gridSizeTimes from '../../util/gridSizeTimes';
7
6
 
8
7
  const baseHeading = (size, lineHeight) => `
@@ -33,7 +32,7 @@ export const UserName = styled.span`
33
32
  margin-top: 0;
34
33
  `;
35
34
  export const UserEmail = styled.span`
36
- ${baseHeading(11, 16)} color: ${token('color.text.subtlest', N200)};
35
+ ${baseHeading(11, 16)} color: ${`var(--ds-text-subtlest, ${N200})`};
37
36
  font-weight: 300;
38
37
  margin-top: ${gridSizeTimes(0.5)}px;
39
38
  `;
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/focused-task-close-account",
3
- "version": "2.0.4"
3
+ "version": "2.0.5"
4
4
  }
@@ -6,17 +6,16 @@ import styled from '@emotion/styled';
6
6
  import { borderRadius } from '@atlaskit/theme/constants';
7
7
  import { B50, B400, N50A, N60A } from '@atlaskit/theme/colors';
8
8
  import { h700 } from '@atlaskit/theme/typography';
9
- import { token } from '@atlaskit/tokens';
10
9
  import gridSizeTimes from '../../util/gridSizeTimes';
11
10
 
12
11
  var getSelectedCardColor = function getSelectedCardColor(props) {
13
- return props.isSelected && "".concat(token('color.background.selected', B50));
12
+ return props.isSelected && "".concat("var(--ds-background-selected, ".concat(B50, ")"));
14
13
  };
15
14
 
16
15
  export var Screen = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n max-width: 640px;\n margin-bottom: ", "px;\n"])), gridSizeTimes(4));
17
16
  export var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n margin-bottom: ", "px;\n margin-top: 0;\n"])), h700, gridSizeTimes(4));
18
17
  export var SectionCard = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n padding: ", "px;\n width: 100%;\n background-color: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n margin-top: ", "px;\n"])), gridSizeTimes(2.5), function (props) {
19
18
  return getSelectedCardColor(props);
20
- }, borderRadius(), token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)), gridSizeTimes(2));
19
+ }, borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), gridSizeTimes(2));
21
20
  export var Avatar = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n margin-right: ", "px;\n"])), gridSizeTimes(2.5), gridSizeTimes(1));
22
- export var UserDetails = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: ", "px;\n font-weight: 600;\n color: ", ";\n"])), gridSizeTimes(1.5), token('color.text.accent.blue', B400));
21
+ export var UserDetails = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: ", "px;\n font-weight: 600;\n color: ", ";\n"])), gridSizeTimes(1.5), "var(--ds-text-accent-blue, ".concat(B400, ")"));
@@ -5,12 +5,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
5
5
  import styled from '@emotion/styled';
6
6
  import { B500, B200 } from '@atlaskit/theme/colors';
7
7
  import { h700 } from '@atlaskit/theme/typography';
8
- import { token } from '@atlaskit/tokens';
9
8
  import gridSizeTimes from '../../util/gridSizeTimes';
10
9
  export var Screen = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n max-width: 640px;\n margin-bottom: ", "px;\n > p {\n margin-top: ", "px;\n margin-bottom: ", "px;\n }\n"])), gridSizeTimes(2), gridSizeTimes(3), gridSizeTimes(2));
11
10
  export var LoadingWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 500px;\n"])));
12
11
  export var Title = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n margin-bottom: ", "px;\n margin-top: 0;\n"])), h700, gridSizeTimes(3));
13
12
  export var SectionMessageOuter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin: ", "px 0;\n"])), gridSizeTimes(3));
14
13
  export var MainInformationList = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n > li b {\n font-weight: 600;\n }\n p + ul {\n margin-top: ", "px;\n }\n"])), gridSizeTimes(1.5));
15
- export var IconHoverWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n padding-left: ", "px;\n &:hover {\n color: ", ";\n }\n"])), token('color.background.information.bold', B500), gridSizeTimes(0.5), token('color.background.information.bold.hovered', B200));
14
+ export var IconHoverWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n padding-left: ", "px;\n &:hover {\n color: ", ";\n }\n"])), "var(--ds-background-information-bold, ".concat(B500, ")"), gridSizeTimes(0.5), "var(--ds-background-information-bold-hovered, ".concat(B200, ")"));
16
15
  export var InlineDialogContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n li {\n margin-left: ", "px;\n margin-top: ", "px;\n padding-left: ", "px;\n }\n"])), gridSizeTimes(3), gridSizeTimes(1), gridSizeTimes(1));
@@ -6,7 +6,6 @@ import styled from '@emotion/styled';
6
6
  import { fontSize } from '@atlaskit/theme/constants';
7
7
  import { h500 } from '@atlaskit/theme/typography';
8
8
  import { N200 } from '@atlaskit/theme/colors';
9
- import { token } from '@atlaskit/tokens';
10
9
  import gridSizeTimes from '../../util/gridSizeTimes';
11
10
 
12
11
  var baseHeading = function baseHeading(size, lineHeight) {
@@ -17,4 +16,4 @@ export var UserInfoOuter = styled.div(_templateObject || (_templateObject = _tag
17
16
  export var Avatar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n margin-right: ", "px;\n"])), gridSizeTimes(2.5), gridSizeTimes(1));
18
17
  export var UserDetails = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n"])), gridSizeTimes(0.5));
19
18
  export var UserName = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n margin-top: 0;\n"])), h500);
20
- export var UserEmail = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", " color: ", ";\n font-weight: 300;\n margin-top: ", "px;\n"])), baseHeading(11, 16), token('color.text.subtlest', N200), gridSizeTimes(0.5));
19
+ export var UserEmail = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", " color: ", ";\n font-weight: 300;\n margin-top: ", "px;\n"])), baseHeading(11, 16), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSizeTimes(0.5));
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/focused-task-close-account",
3
- "version": "2.0.4"
3
+ "version": "2.0.5"
4
4
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/focused-task-close-account",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "description": "This package contains all of the UI components needed to assemble the focused tasks for deactivating and deleting users' accounts in accordance with the GDPR \"Right to be forgotten\".",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/focused-task-close-account"
4
4