@atlaskit/tabs - npm Package Compare versions

Comparing version 13.2.3 to 13.2.4

CHANGELOG.md

 # @atlaskit/tabs
 
+## 13.2.4
+
+### Patch Changes
+
+- [`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.
+- Updated dependencies
+
 ## 13.2.3
@@ -4,0 +11,0 @@

dist/cjs/components/tabs.js

@@ -39,3 +39,3 @@ "use strict";
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.3"
+  packageVersion: "13.2.4"
 };
@@ -42,0 +42,0 @@

dist/cjs/internal/colors.js

@@ -10,18 +10,16 @@ "use strict";
 
-var _tokens = require("@atlaskit/tokens");
-
 var tabColorMap = {
   light: {
-    labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
-    activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B500),
-    hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400),
-    focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B100)
+    labelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
+    activeLabelColor: "var(--ds-text-highEmphasis, ".concat(_colors.B500, ")"),
+    hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
+    selectedColor: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
+    focusBorderColor: "var(--ds-border-focus, ".concat(_colors.B100, ")")
   },
   dark: {
-    labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.DN400),
-    activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B200),
-    hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B75),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75),
-    focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B75)
+    labelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.DN400, ")"),
+    activeLabelColor: "var(--ds-text-highEmphasis, ".concat(_colors.B200, ")"),
+    hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(_colors.B75, ")"),
+    selectedColor: "var(--ds-text-selected, ".concat(_colors.B75, ")"),
+    focusBorderColor: "var(--ds-border-focus, ".concat(_colors.B75, ")")
   }
@@ -37,12 +35,12 @@ };
   light: {
-    lineColor: (0, _tokens.token)('color.border.neutral', _colors.N30),
-    hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400)
+    lineColor: "var(--ds-border-neutral, ".concat(_colors.N30, ")"),
+    hoveredColor: "var(--ds-border-neutral, transparent)",
+    activeColor: "var(--ds-border-neutral, transparent)",
+    selectedColor: "var(--ds-text-selected, ".concat(_colors.B400, ")")
   },
   dark: {
-    lineColor: (0, _tokens.token)('color.border.neutral', _colors.DN0),
-    hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75)
+    lineColor: "var(--ds-border-neutral, ".concat(_colors.DN0, ")"),
+    hoveredColor: "var(--ds-border-neutral, transparent)",
+    activeColor: "var(--ds-border-neutral, transparent)",
+    selectedColor: "var(--ds-text-selected, ".concat(_colors.B75, ")")
   }
@@ -57,4 +55,4 @@ };
 var tabPanelFocusColorMap = {
-  light: (0, _tokens.token)('color.border.focus', _colors.B100),
-  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
+  light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
+  dark: "var(--ds-border-focus, ".concat(_colors.B75, ")")
 };
@@ -61,0 +59,0 @@

dist/cjs/version.json

 {
 	"name": "@atlaskit/tabs",
-	"version": "13.2.3",
+	"version": "13.2.4",
 	"sideEffects": false
 }

dist/es2019/components/tabs.js

@@ -14,3 +14,3 @@ import _extends from "@babel/runtime/helpers/extends";
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.3"
+  packageVersion: "13.2.4"
 };
@@ -17,0 +17,0 @@

dist/es2019/internal/colors.js

 import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const tabColorMap = {
   light: {
-    labelColor: token('color.text.mediumEmphasis', N500),
-    activeLabelColor: token('color.text.highEmphasis', B500),
-    hoverLabelColor: token('color.text.mediumEmphasis', B400),
-    selectedColor: token('color.text.selected', B400),
-    focusBorderColor: token('color.border.focus', B100)
+    labelColor: `var(--ds-text-mediumEmphasis, ${N500})`,
+    activeLabelColor: `var(--ds-text-highEmphasis, ${B500})`,
+    hoverLabelColor: `var(--ds-text-mediumEmphasis, ${B400})`,
+    selectedColor: `var(--ds-text-selected, ${B400})`,
+    focusBorderColor: `var(--ds-border-focus, ${B100})`
   },
   dark: {
-    labelColor: token('color.text.mediumEmphasis', DN400),
-    activeLabelColor: token('color.text.highEmphasis', B200),
-    hoverLabelColor: token('color.text.mediumEmphasis', B75),
-    selectedColor: token('color.text.selected', B75),
-    focusBorderColor: token('color.border.focus', B75)
+    labelColor: `var(--ds-text-mediumEmphasis, ${DN400})`,
+    activeLabelColor: `var(--ds-text-highEmphasis, ${B200})`,
+    hoverLabelColor: `var(--ds-text-mediumEmphasis, ${B75})`,
+    selectedColor: `var(--ds-text-selected, ${B75})`,
+    focusBorderColor: `var(--ds-border-focus, ${B75})`
   }
@@ -24,12 +23,12 @@ };
   light: {
-    lineColor: token('color.border.neutral', N30),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B400)
+    lineColor: `var(--ds-border-neutral, ${N30})`,
+    hoveredColor: "var(--ds-border-neutral, transparent)",
+    activeColor: "var(--ds-border-neutral, transparent)",
+    selectedColor: `var(--ds-text-selected, ${B400})`
   },
   dark: {
-    lineColor: token('color.border.neutral', DN0),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B75)
+    lineColor: `var(--ds-border-neutral, ${DN0})`,
+    hoveredColor: "var(--ds-border-neutral, transparent)",
+    activeColor: "var(--ds-border-neutral, transparent)",
+    selectedColor: `var(--ds-text-selected, ${B75})`
   }
@@ -39,5 +38,5 @@ };
 const tabPanelFocusColorMap = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: `var(--ds-border-focus, ${B100})`,
+  dark: `var(--ds-border-focus, ${B75})`
 };
 export const getTabPanelFocusColor = mode => tabPanelFocusColorMap[mode];

dist/es2019/version.json

 {
 	"name": "@atlaskit/tabs",
-	"version": "13.2.3",
+	"version": "13.2.4",
 	"sideEffects": false
 }

dist/esm/components/tabs.js

@@ -21,3 +21,3 @@ import _extends from "@babel/runtime/helpers/extends";
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.3"
+  packageVersion: "13.2.4"
 };
@@ -24,0 +24,0 @@

dist/esm/internal/colors.js

 import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var tabColorMap = {
   light: {
-    labelColor: token('color.text.mediumEmphasis', N500),
-    activeLabelColor: token('color.text.highEmphasis', B500),
-    hoverLabelColor: token('color.text.mediumEmphasis', B400),
-    selectedColor: token('color.text.selected', B400),
-    focusBorderColor: token('color.border.focus', B100)
+    labelColor: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
+    activeLabelColor: "var(--ds-text-highEmphasis, ".concat(B500, ")"),
+    hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
+    selectedColor: "var(--ds-text-selected, ".concat(B400, ")"),
+    focusBorderColor: "var(--ds-border-focus, ".concat(B100, ")")
   },
   dark: {
-    labelColor: token('color.text.mediumEmphasis', DN400),
-    activeLabelColor: token('color.text.highEmphasis', B200),
-    hoverLabelColor: token('color.text.mediumEmphasis', B75),
-    selectedColor: token('color.text.selected', B75),
-    focusBorderColor: token('color.border.focus', B75)
+    labelColor: "var(--ds-text-mediumEmphasis, ".concat(DN400, ")"),
+    activeLabelColor: "var(--ds-text-highEmphasis, ".concat(B200, ")"),
+    hoverLabelColor: "var(--ds-text-mediumEmphasis, ".concat(B75, ")"),
+    selectedColor: "var(--ds-text-selected, ".concat(B75, ")"),
+    focusBorderColor: "var(--ds-border-focus, ".concat(B75, ")")
   }
@@ -24,12 +23,12 @@ };
   light: {
-    lineColor: token('color.border.neutral', N30),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B400)
+    lineColor: "var(--ds-border-neutral, ".concat(N30, ")"),
+    hoveredColor: "var(--ds-border-neutral, transparent)",
+    activeColor: "var(--ds-border-neutral, transparent)",
+    selectedColor: "var(--ds-text-selected, ".concat(B400, ")")
   },
   dark: {
-    lineColor: token('color.border.neutral', DN0),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B75)
+    lineColor: "var(--ds-border-neutral, ".concat(DN0, ")"),
+    hoveredColor: "var(--ds-border-neutral, transparent)",
+    activeColor: "var(--ds-border-neutral, transparent)",
+    selectedColor: "var(--ds-text-selected, ".concat(B75, ")")
   }
@@ -41,4 +40,4 @@ };
 var tabPanelFocusColorMap = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: "var(--ds-border-focus, ".concat(B100, ")"),
+  dark: "var(--ds-border-focus, ".concat(B75, ")")
 };
@@ -45,0 +44,0 @@ export var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {

dist/esm/version.json

 {
 	"name": "@atlaskit/tabs",
-	"version": "13.2.3",
+	"version": "13.2.4",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/tabs",
-  "version": "13.2.3",
+  "version": "13.2.4",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
@@ -29,3 +29,3 @@ "publishConfig": {
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
@@ -65,3 +65,6 @@ "@emotion/core": "^10.0.9"
       "theming": "tokens",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "deprecation": "no-deprecated-imports"
@@ -68,0 +71,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

200325

increased by0.1%

Worsened metrics

Lines of code

4257

decreased by-0.07%

Dependency changes

• + Added@atlaskit/tokens@0.4.2(transitive)

• - Removed@atlaskit/tokens@0.3.0(transitive)

• Updated@atlaskit/tokens@^0.4.0