@atlaskit/tabs 13.2.3 → 13.2.4

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 +7 -0
  2. package/dist/cjs/components/tabs.js +1 -1
  3. package/dist/cjs/internal/colors.js +20 -22
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/components/tabs.js +1 -1
  6. package/dist/es2019/internal/colors.js +20 -21
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/components/tabs.js +1 -1
  9. package/dist/esm/internal/colors.js +20 -21
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/tabs
2
2
 
3
+ ## 13.2.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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.
8
+ - Updated dependencies
9
+
3
10
  ## 13.2.3
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/components/tabs.js CHANGED
@@ -36,7 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
36
36
  var analyticsAttributes = {
37
37
  componentName: 'tabs',
38
38
  packageName: "@atlaskit/tabs",
39
- packageVersion: "13.2.3"
39
+ packageVersion: "13.2.4"
40
40
  };
41
41
 
42
42
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
package/dist/cjs/internal/colors.js CHANGED
@@ -7,22 +7,20 @@ exports.getTabPanelFocusColor = exports.getTabLineColor = exports.getTabColors =
7
7
 
8
8
  var _colors = require("@atlaskit/theme/colors");
9
9
 
10
- var _tokens = require("@atlaskit/tokens");
11
-
12
10
  var tabColorMap = {
13
11
  light: {
14
- labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
15
- activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B500),
16
- hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
17
- selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400),
18
- focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B100)
12
+ labelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
13
+ activeLabelColor: "var(--ds-text-highEmphasis, ".concat(_colors.B500, ")"),
14
+ hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
15
+ selectedColor: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
16
+ focusBorderColor: "var(--ds-border-focus, ".concat(_colors.B100, ")")
19
17
  },
20
18
  dark: {
21
- labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.DN400),
22
- activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B200),
23
- hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B75),
24
- selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75),
25
- focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B75)
19
+ labelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN400, ")"),
20
+ activeLabelColor: "var(--ds-text-highEmphasis, ".concat(_colors.B200, ")"),
21
+ hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.B75, ")"),
22
+ selectedColor: "var(--ds-text-selected, ".concat(_colors.B75, ")"),
23
+ focusBorderColor: "var(--ds-border-focus, ".concat(_colors.B75, ")")
26
24
  }
27
25
  };
28
26
 
@@ -33,16 +31,16 @@ var getTabColors = function getTabColors(mode) {
33
31
  exports.getTabColors = getTabColors;
34
32
  var tabLineColorMap = {
35
33
  light: {
36
- lineColor: (0, _tokens.token)('color.border.neutral', _colors.N30),
37
- hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
38
- activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
39
- selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400)
34
+ lineColor: "var(--ds-border-neutral, ".concat(_colors.N30, ")"),
35
+ hoveredColor: "var(--ds-border-neutral, transparent)",
36
+ activeColor: "var(--ds-border-neutral, transparent)",
37
+ selectedColor: "var(--ds-text-selected, ".concat(_colors.B400, ")")
40
38
  },
41
39
  dark: {
42
- lineColor: (0, _tokens.token)('color.border.neutral', _colors.DN0),
43
- hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
44
- activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
45
- selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75)
40
+ lineColor: "var(--ds-border-neutral, ".concat(_colors.DN0, ")"),
41
+ hoveredColor: "var(--ds-border-neutral, transparent)",
42
+ activeColor: "var(--ds-border-neutral, transparent)",
43
+ selectedColor: "var(--ds-text-selected, ".concat(_colors.B75, ")")
46
44
  }
47
45
  };
48
46
 
@@ -52,8 +50,8 @@ var getTabLineColor = function getTabLineColor(mode) {
52
50
 
53
51
  exports.getTabLineColor = getTabLineColor;
54
52
  var tabPanelFocusColorMap = {
55
- light: (0, _tokens.token)('color.border.focus', _colors.B100),
56
- dark: (0, _tokens.token)('color.border.focus', _colors.B75)
53
+ light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
54
+ dark: "var(--ds-border-focus, ".concat(_colors.B75, ")")
57
55
  };
58
56
 
59
57
  var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.2.3",
3
+ "version": "13.2.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/tabs.js CHANGED
@@ -11,7 +11,7 @@ import { onMouseDownBlur } from '../internal/utils';
11
11
  const analyticsAttributes = {
12
12
  componentName: 'tabs',
13
13
  packageName: "@atlaskit/tabs",
14
- packageVersion: "13.2.3"
14
+ packageVersion: "13.2.4"
15
15
  };
16
16
 
17
17
  const getTabPanelWithContext = ({
package/dist/es2019/internal/colors.js CHANGED
@@ -1,19 +1,18 @@
1
1
  import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
2
- import { token } from '@atlaskit/tokens';
3
2
  const tabColorMap = {
4
3
  light: {
5
- labelColor: token('color.text.mediumEmphasis', N500),
6
- activeLabelColor: token('color.text.highEmphasis', B500),
7
- hoverLabelColor: token('color.text.mediumEmphasis', B400),
8
- selectedColor: token('color.text.selected', B400),
9
- focusBorderColor: token('color.border.focus', B100)
4
+ labelColor: `var(--ds-text-mediumEmphasis, ${N500})`,
5
+ activeLabelColor: `var(--ds-text-highEmphasis, ${B500})`,
6
+ hoverLabelColor: `var(--ds-text-mediumEmphasis, ${B400})`,
7
+ selectedColor: `var(--ds-text-selected, ${B400})`,
8
+ focusBorderColor: `var(--ds-border-focus, ${B100})`
10
9
  },
11
10
  dark: {
12
- labelColor: token('color.text.mediumEmphasis', DN400),
13
- activeLabelColor: token('color.text.highEmphasis', B200),
14
- hoverLabelColor: token('color.text.mediumEmphasis', B75),
15
- selectedColor: token('color.text.selected', B75),
16
- focusBorderColor: token('color.border.focus', B75)
11
+ labelColor: `var(--ds-text-mediumEmphasis, ${DN400})`,
12
+ activeLabelColor: `var(--ds-text-highEmphasis, ${B200})`,
13
+ hoverLabelColor: `var(--ds-text-mediumEmphasis, ${B75})`,
14
+ selectedColor: `var(--ds-text-selected, ${B75})`,
15
+ focusBorderColor: `var(--ds-border-focus, ${B75})`
17
16
  }
18
17
  };
19
18
  export const getTabColors = mode => {
@@ -21,21 +20,21 @@ export const getTabColors = mode => {
21
20
  };
22
21
  const tabLineColorMap = {
23
22
  light: {
24
- lineColor: token('color.border.neutral', N30),
25
- hoveredColor: token('color.border.neutral', 'transparent'),
26
- activeColor: token('color.border.neutral', 'transparent'),
27
- selectedColor: token('color.text.selected', B400)
23
+ lineColor: `var(--ds-border-neutral, ${N30})`,
24
+ hoveredColor: "var(--ds-border-neutral, transparent)",
25
+ activeColor: "var(--ds-border-neutral, transparent)",
26
+ selectedColor: `var(--ds-text-selected, ${B400})`
28
27
  },
29
28
  dark: {
30
- lineColor: token('color.border.neutral', DN0),
31
- hoveredColor: token('color.border.neutral', 'transparent'),
32
- activeColor: token('color.border.neutral', 'transparent'),
33
- selectedColor: token('color.text.selected', B75)
29
+ lineColor: `var(--ds-border-neutral, ${DN0})`,
30
+ hoveredColor: "var(--ds-border-neutral, transparent)",
31
+ activeColor: "var(--ds-border-neutral, transparent)",
32
+ selectedColor: `var(--ds-text-selected, ${B75})`
34
33
  }
35
34
  };
36
35
  export const getTabLineColor = mode => tabLineColorMap[mode];
37
36
  const tabPanelFocusColorMap = {
38
- light: token('color.border.focus', B100),
39
- dark: token('color.border.focus', B75)
37
+ light: `var(--ds-border-focus, ${B100})`,
38
+ dark: `var(--ds-border-focus, ${B75})`
40
39
  };
41
40
  export const getTabPanelFocusColor = mode => tabPanelFocusColorMap[mode];
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.2.3",
3
+ "version": "13.2.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/tabs.js CHANGED
@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
18
18
  var analyticsAttributes = {
19
19
  componentName: 'tabs',
20
20
  packageName: "@atlaskit/tabs",
21
- packageVersion: "13.2.3"
21
+ packageVersion: "13.2.4"
22
22
  };
23
23
 
24
24
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
package/dist/esm/internal/colors.js CHANGED
@@ -1,19 +1,18 @@
1
1
  import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
2
- import { token } from '@atlaskit/tokens';
3
2
  var tabColorMap = {
4
3
  light: {
5
- labelColor: token('color.text.mediumEmphasis', N500),
6
- activeLabelColor: token('color.text.highEmphasis', B500),
7
- hoverLabelColor: token('color.text.mediumEmphasis', B400),
8
- selectedColor: token('color.text.selected', B400),
9
- focusBorderColor: token('color.border.focus', B100)
4
+ labelColor: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
5
+ activeLabelColor: "var(--ds-text-highEmphasis, ".concat(B500, ")"),
6
+ hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
7
+ selectedColor: "var(--ds-text-selected, ".concat(B400, ")"),
8
+ focusBorderColor: "var(--ds-border-focus, ".concat(B100, ")")
10
9
  },
11
10
  dark: {
12
- labelColor: token('color.text.mediumEmphasis', DN400),
13
- activeLabelColor: token('color.text.highEmphasis', B200),
14
- hoverLabelColor: token('color.text.mediumEmphasis', B75),
15
- selectedColor: token('color.text.selected', B75),
16
- focusBorderColor: token('color.border.focus', B75)
11
+ labelColor: "var(--ds-text-mediumEmphasis, ".concat(DN400, ")"),
12
+ activeLabelColor: "var(--ds-text-highEmphasis, ".concat(B200, ")"),
13
+ hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(B75, ")"),
14
+ selectedColor: "var(--ds-text-selected, ".concat(B75, ")"),
15
+ focusBorderColor: "var(--ds-border-focus, ".concat(B75, ")")
17
16
  }
18
17
  };
19
18
  export var getTabColors = function getTabColors(mode) {
@@ -21,24 +20,24 @@ export var getTabColors = function getTabColors(mode) {
21
20
  };
22
21
  var tabLineColorMap = {
23
22
  light: {
24
- lineColor: token('color.border.neutral', N30),
25
- hoveredColor: token('color.border.neutral', 'transparent'),
26
- activeColor: token('color.border.neutral', 'transparent'),
27
- selectedColor: token('color.text.selected', B400)
23
+ lineColor: "var(--ds-border-neutral, ".concat(N30, ")"),
24
+ hoveredColor: "var(--ds-border-neutral, transparent)",
25
+ activeColor: "var(--ds-border-neutral, transparent)",
26
+ selectedColor: "var(--ds-text-selected, ".concat(B400, ")")
28
27
  },
29
28
  dark: {
30
- lineColor: token('color.border.neutral', DN0),
31
- hoveredColor: token('color.border.neutral', 'transparent'),
32
- activeColor: token('color.border.neutral', 'transparent'),
33
- selectedColor: token('color.text.selected', B75)
29
+ lineColor: "var(--ds-border-neutral, ".concat(DN0, ")"),
30
+ hoveredColor: "var(--ds-border-neutral, transparent)",
31
+ activeColor: "var(--ds-border-neutral, transparent)",
32
+ selectedColor: "var(--ds-text-selected, ".concat(B75, ")")
34
33
  }
35
34
  };
36
35
  export var getTabLineColor = function getTabLineColor(mode) {
37
36
  return tabLineColorMap[mode];
38
37
  };
39
38
  var tabPanelFocusColorMap = {
40
- light: token('color.border.focus', B100),
41
- dark: token('color.border.focus', B75)
39
+ light: "var(--ds-border-focus, ".concat(B100, ")"),
40
+ dark: "var(--ds-border-focus, ".concat(B75, ")")
42
41
  };
43
42
  export var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
44
43
  return tabPanelFocusColorMap[mode];
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.2.3",
3
+ "version": "13.2.4",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "13.2.3",
3
+ "version": "13.2.4",
4
4
  "description": "Tabs are used to organize content by grouping similar information on the same page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
26
26
  "@atlaskit/analytics-next": "^8.2.0",
27
27
  "@atlaskit/codemod-utils": "^3.4.0",
28
28
  "@atlaskit/theme": "^12.0.0",
29
- "@atlaskit/tokens": "^0.3.0",
29
+ "@atlaskit/tokens": "^0.4.0",
30
30
  "@babel/runtime": "^7.0.0",
31
31
  "@emotion/core": "^10.0.9"
32
32
  },
@@ -61,7 +61,10 @@
61
61
  "ui-components": "lite-mode",
62
62
  "analytics": "analytics-next",
63
63
  "theming": "tokens",
64
- "styling": "emotion",
64
+ "styling": [
65
+ "static",
66
+ "emotion"
67
+ ],
65
68
  "deprecation": "no-deprecated-imports"
66
69
  }
67
70
  },