@atlaskit/tabs 13.4.8 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tabs
 
+## 14.0.0
+
+### Major Changes
+
+- [#41866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41866) [`ed8b6957789`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed8b6957789) - Removes any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.
+
+## 13.4.9
+
+### Patch Changes
+
+- [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
+
 ## 13.4.8
 
 ### Patch Changes

package/dist/cjs/components/tab-list.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
 var _hooks = require("../hooks");
 var _context = require("../internal/context");
 var _styles = require("../internal/styles");
@@ -19,6 +18,9 @@ var baseStyles = (0, _react2.css)({
   position: 'relative'
 });
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var tabListStyles = (0, _styles.getTabListStyles)();
+
 /**
  * __TabList__
  *
@@ -30,8 +32,6 @@ var baseStyles = (0, _react2.css)({
  */
 var TabList = function TabList(_ref) {
   var children = _ref.children;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   var _useTabList = (0, _hooks.useTabList)(),
     tabsId = _useTabList.tabsId,
     selected = _useTabList.selected,
@@ -41,9 +41,6 @@ var TabList = function TabList(_ref) {
   // Don't include any conditional children
   var childrenArray = _react.Children.toArray(children).filter(Boolean);
   var length = childrenArray.length;
-  var tabListStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.getTabListStyles)(mode);
-  }, [mode]);
   var selectTabByIndex = (0, _react.useCallback)(function (index) {
     var _ref$current;
     var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(index, "']"));

package/dist/cjs/components/tabs.js

@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
-var _components = require("@atlaskit/theme/components");
 var _context = require("../internal/context");
 var _styles = require("../internal/styles");
 var _utils = require("../internal/utils");
@@ -25,10 +24,13 @@ var baseStyles = (0, _react2.css)({
   flexDirection: 'column',
   flexGrow: 1
 });
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var tabsStyles = (0, _styles.getTabsStyles)();
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.8"
+  packageVersion: "14.0.0"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -70,8 +72,6 @@ var Tabs = function Tabs(props) {
     analyticsContext = props.analyticsContext,
     children = props.children,
     testId = props.testId;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   var _useState = (0, _react.useState)(SelectedType || defaultSelected || 0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedState = _useState2[0],
@@ -118,9 +118,6 @@ var Tabs = function Tabs(props) {
       tabsId: id
     });
   });
-  var tabsStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.getTabsStyles)(mode);
-  }, [mode]);
   return (
     // Only styles that affect the Tabs container itself have been applied via primitives.
     // The other styles applied through the CSS prop are there for styling children

package/dist/cjs/internal/colors.js

@@ -3,48 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTabPanelFocusColor = exports.getTabLineColor = exports.getTabColors = void 0;
+exports.tabPanelFocusColor = exports.tabLineColors = exports.tabColors = void 0;
 var _colors = require("@atlaskit/theme/colors");
-var tabColorMap = {
-  light: {
-    labelColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
-    activeLabelColor: "var(--ds-text, ".concat(_colors.B500, ")"),
-    hoverLabelColor: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
-    selectedColor: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
-    focusBorderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
-  },
-  dark: {
-    labelColor: "var(--ds-text-subtle, ".concat(_colors.DN400, ")"),
-    activeLabelColor: "var(--ds-text, ".concat(_colors.B200, ")"),
-    hoverLabelColor: "var(--ds-text-subtle, ".concat(_colors.B75, ")"),
-    selectedColor: "var(--ds-text-selected, ".concat(_colors.B75, ")"),
-    focusBorderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
-  }
+var tabColors = exports.tabColors = {
+  labelColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+  activeLabelColor: "var(--ds-text, ".concat(_colors.B500, ")"),
+  hoverLabelColor: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
+  selectedColor: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
+  focusBorderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
 };
-var getTabColors = exports.getTabColors = function getTabColors(mode) {
-  return tabColorMap[mode];
+var tabLineColors = exports.tabLineColors = {
+  lineColor: "var(--ds-border, ".concat(_colors.N30, ")"),
+  hoveredColor: "var(--ds-border, transparent)",
+  activeColor: "var(--ds-border, transparent)",
+  selectedColor: "var(--ds-border-selected, ".concat(_colors.B400, ")")
 };
-var tabLineColorMap = {
-  light: {
-    lineColor: "var(--ds-border, ".concat(_colors.N30, ")"),
-    hoveredColor: "var(--ds-border, transparent)",
-    activeColor: "var(--ds-border, transparent)",
-    selectedColor: "var(--ds-border-selected, ".concat(_colors.B400, ")")
-  },
-  dark: {
-    lineColor: "var(--ds-border, ".concat(_colors.DN0, ")"),
-    hoveredColor: "var(--ds-border, transparent)",
-    activeColor: "var(--ds-border, transparent)",
-    selectedColor: "var(--ds-border-selected, ".concat(_colors.B75, ")")
-  }
-};
-var getTabLineColor = exports.getTabLineColor = function getTabLineColor(mode) {
-  return tabLineColorMap[mode];
-};
-var tabPanelFocusColorMap = {
-  light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
-  dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
-};
-var getTabPanelFocusColor = exports.getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
-  return tabPanelFocusColorMap[mode];
-};
+var tabPanelFocusColor = exports.tabPanelFocusColor = "var(--ds-border-focused, ".concat(_colors.B100, ")");

package/dist/cjs/internal/styles.js

@@ -27,14 +27,14 @@ var highContrastFocusRing = {
     }
   }
 };
-var tabFocusStyles = function tabFocusStyles(mode) {
+var tabFocusStyles = function tabFocusStyles() {
   return {
-    boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
+    boxShadow: "0 0 0 2px ".concat(_colors.tabPanelFocusColor, " inset"),
     borderRadius: "var(--ds-border-radius, 3px)",
     outline: 'none'
   };
 };
-var getTabPanelStyles = function getTabPanelStyles(mode) {
+var getTabPanelStyles = function getTabPanelStyles() {
   return _objectSpread({
     flexGrow: 1,
     /*
@@ -44,17 +44,17 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
     minHeight: '0%',
     display: 'flex',
     padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus-visible': tabFocusStyles(mode),
+    '&:focus-visible': tabFocusStyles(),
     '@supports not selector(*:focus-visible)': {
-      '&:focus': tabFocusStyles(mode)
+      '&:focus': tabFocusStyles()
     }
   }, highContrastFocusRing);
 };
-var getTabsStyles = exports.getTabsStyles = function getTabsStyles(mode) {
+var getTabsStyles = exports.getTabsStyles = function getTabsStyles() {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
     (0, _react.css)({
-      '& [role="tabpanel"]': getTabPanelStyles(mode),
+      '& [role="tabpanel"]': getTabPanelStyles(),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
       // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -74,22 +74,22 @@ var tabLineStyles = {
   left: tabLeftRightPadding,
   right: tabLeftRightPadding
 };
-var getTabListStyles = exports.getTabListStyles = function getTabListStyles(mode) {
+var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
     (0, _react.css)({
-      '& [role="tab"]': getTabStyles(mode),
+      '& [role="tab"]': getTabStyles(),
       fontWeight: "var(--ds-font-weight-medium, 500)",
       '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
         height: underlineHeight,
         // This line is not a border so the selected line is visible in high contrast mode
-        backgroundColor: (0, _colors.getTabLineColor)(mode).lineColor
+        backgroundColor: _colors.tabLineColors.lineColor
       })
     })
   );
 };
-var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
-  var colors = (0, _colors.getTabColors)(mode);
+var tabPanelFocusStyles = function tabPanelFocusStyles() {
+  var colors = _colors.tabColors;
   return {
     boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
     borderRadius: "var(--ds-border-radius, 3px)",
@@ -100,8 +100,8 @@ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
     }
   };
 };
-var getTabStyles = exports.getTabStyles = function getTabStyles(mode) {
-  var colors = (0, _colors.getTabColors)(mode);
+var getTabStyles = exports.getTabStyles = function getTabStyles() {
+  var colors = _colors.tabColors;
   return _objectSpread(_objectSpread({
     color: colors.labelColor,
     cursor: 'pointer',
@@ -110,19 +110,13 @@ var getTabStyles = exports.getTabStyles = function getTabStyles(mode) {
     padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
     position: 'relative',
     whiteSpace: 'nowrap',
+    overflow: 'hidden',
     textOverflow: 'ellipsis',
-    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-    '@supports not (overflow-x: clip)': {
-      overflow: 'hidden'
-    },
-    '@supports (overflow-x: clip)': {
-      overflowX: 'clip'
-    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
-        borderBottom: "".concat(underlineHeight, " solid ").concat((0, _colors.getTabLineColor)(mode).hoveredColor),
+        borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.hoveredColor),
         height: 0
       })
     },
@@ -130,20 +124,20 @@ var getTabStyles = exports.getTabStyles = function getTabStyles(mode) {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.activeLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
-        borderBottom: "".concat(underlineHeight, " solid ").concat((0, _colors.getTabLineColor)(mode).activeColor),
+        borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.activeColor),
         height: 0
       })
     },
-    '&:focus-visible': tabPanelFocusStyles(mode),
+    '&:focus-visible': tabPanelFocusStyles(),
     '@supports not selector(*:focus-visible)': {
-      '&:focus': tabPanelFocusStyles(mode)
+      '&:focus': tabPanelFocusStyles()
     }
   }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
         // This line is a border so it is visible in high contrast mode
-        borderBottom: "".concat(underlineHeight, " solid ").concat((0, _colors.getTabLineColor)(mode).selectedColor),
+        borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.selectedColor),
         height: 0
       })
     }

package/dist/es2019/components/tab-list.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { Children, createRef, useCallback, useMemo } from 'react';
+import { Children, createRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
@@ -12,6 +11,9 @@ const baseStyles = css({
   position: 'relative'
 });
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const tabListStyles = getTabListStyles();
+
 /**
  * __TabList__
  *
@@ -24,9 +26,6 @@ const baseStyles = css({
 const TabList = ({
   children
 }) => {
-  const {
-    mode
-  } = useGlobalTheme();
   const {
     tabsId,
     selected,
@@ -37,7 +36,6 @@ const TabList = ({
   // Don't include any conditional children
   const childrenArray = Children.toArray(children).filter(Boolean);
   const length = childrenArray.length;
-  const tabListStyles = useMemo(() => getTabListStyles(mode), [mode]);
   const selectTabByIndex = useCallback(index => {
     var _ref$current;
     const newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(`[id='${tabsId}-${index}']`);

package/dist/es2019/components/tabs.js

@@ -1,8 +1,7 @@
 /** @jsx jsx */
-import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import { Children, Fragment, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
 import { getTabsStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
@@ -14,10 +13,13 @@ const baseStyles = css({
   flexDirection: 'column',
   flexGrow: 1
 });
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const tabsStyles = getTabsStyles();
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.8"
+  packageVersion: "14.0.0"
 };
 const getTabPanelWithContext = ({
   tabPanel,
@@ -58,9 +60,6 @@ const Tabs = props => {
     children,
     testId
   } = props;
-  const {
-    mode
-  } = useGlobalTheme();
   const [selectedState, setSelected] = useState(SelectedType || defaultSelected || 0);
   const selected = SelectedType === undefined ? selectedState : SelectedType;
   const childrenArray = Children.toArray(children)
@@ -99,7 +98,6 @@ const Tabs = props => {
     isSelected: tabIndex === selected,
     tabsId: id
   }));
-  const tabsStyles = useMemo(() => getTabsStyles(mode), [mode]);
   return (
     // Only styles that affect the Tabs container itself have been applied via primitives.
     // The other styles applied through the CSS prop are there for styling children

package/dist/es2019/internal/colors.js

@@ -1,40 +1,15 @@
-import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
-const tabColorMap = {
-  light: {
-    labelColor: `var(--ds-text-subtle, ${N500})`,
-    activeLabelColor: `var(--ds-text, ${B500})`,
-    hoverLabelColor: `var(--ds-text-subtle, ${B400})`,
-    selectedColor: `var(--ds-text-selected, ${B400})`,
-    focusBorderColor: `var(--ds-border-focused, ${B100})`
-  },
-  dark: {
-    labelColor: `var(--ds-text-subtle, ${DN400})`,
-    activeLabelColor: `var(--ds-text, ${B200})`,
-    hoverLabelColor: `var(--ds-text-subtle, ${B75})`,
-    selectedColor: `var(--ds-text-selected, ${B75})`,
-    focusBorderColor: `var(--ds-border-focused, ${B75})`
-  }
-};
-export const getTabColors = mode => {
-  return tabColorMap[mode];
-};
-const tabLineColorMap = {
-  light: {
-    lineColor: `var(--ds-border, ${N30})`,
-    hoveredColor: "var(--ds-border, transparent)",
-    activeColor: "var(--ds-border, transparent)",
-    selectedColor: `var(--ds-border-selected, ${B400})`
-  },
-  dark: {
-    lineColor: `var(--ds-border, ${DN0})`,
-    hoveredColor: "var(--ds-border, transparent)",
-    activeColor: "var(--ds-border, transparent)",
-    selectedColor: `var(--ds-border-selected, ${B75})`
-  }
-};
-export const getTabLineColor = mode => tabLineColorMap[mode];
-const tabPanelFocusColorMap = {
-  light: `var(--ds-border-focused, ${B100})`,
-  dark: `var(--ds-border-focused, ${B75})`
-};
-export const getTabPanelFocusColor = mode => tabPanelFocusColorMap[mode];
+import { B100, B400, B500, N30, N500 } from '@atlaskit/theme/colors';
+export const tabColors = {
+  labelColor: `var(--ds-text-subtle, ${N500})`,
+  activeLabelColor: `var(--ds-text, ${B500})`,
+  hoverLabelColor: `var(--ds-text-subtle, ${B400})`,
+  selectedColor: `var(--ds-text-selected, ${B400})`,
+  focusBorderColor: `var(--ds-border-focused, ${B100})`
+};
+export const tabLineColors = {
+  lineColor: `var(--ds-border, ${N30})`,
+  hoveredColor: "var(--ds-border, transparent)",
+  activeColor: "var(--ds-border, transparent)",
+  selectedColor: `var(--ds-border-selected, ${B400})`
+};
+export const tabPanelFocusColor = `var(--ds-border-focused, ${B100})`;

package/dist/es2019/internal/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
+import { tabColors, tabLineColors, tabPanelFocusColor } from './colors';
 const tabLeftRightPadding = "var(--ds-space-100, 8px)";
 const tabTopBottomPadding = "var(--ds-space-050, 4px)";
 // TODO this should probably be `border.width.indicator`
@@ -17,12 +17,12 @@ const highContrastFocusRing = {
     }
   }
 };
-const tabFocusStyles = mode => ({
-  boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
+const tabFocusStyles = () => ({
+  boxShadow: `0 0 0 2px ${tabPanelFocusColor} inset`,
   borderRadius: "var(--ds-border-radius, 3px)",
   outline: 'none'
 });
-const getTabPanelStyles = mode => ({
+const getTabPanelStyles = () => ({
   flexGrow: 1,
   /*
     NOTE min-height set to 0% because of Firefox bug
@@ -31,16 +31,16 @@ const getTabPanelStyles = mode => ({
   minHeight: '0%',
   display: 'flex',
   padding: `0 ${tabLeftRightPadding}`,
-  '&:focus-visible': tabFocusStyles(mode),
+  '&:focus-visible': tabFocusStyles(),
   '@supports not selector(*:focus-visible)': {
-    '&:focus': tabFocusStyles(mode)
+    '&:focus': tabFocusStyles()
   },
   ...highContrastFocusRing
 });
-export const getTabsStyles = mode =>
+export const getTabsStyles = () =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
 css({
-  '& [role="tabpanel"]': getTabPanelStyles(mode),
+  '& [role="tabpanel"]': getTabPanelStyles(),
   // The hidden attribute doesn't work on flex elements
   // Change display to be none
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -58,20 +58,20 @@ const tabLineStyles = {
   left: tabLeftRightPadding,
   right: tabLeftRightPadding
 };
-export const getTabListStyles = mode =>
+export const getTabListStyles = () =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
 css({
-  '& [role="tab"]': getTabStyles(mode),
+  '& [role="tab"]': getTabStyles(),
   fontWeight: "var(--ds-font-weight-medium, 500)",
   '&::before': {
     ...tabLineStyles,
     height: underlineHeight,
     // This line is not a border so the selected line is visible in high contrast mode
-    backgroundColor: getTabLineColor(mode).lineColor
+    backgroundColor: tabLineColors.lineColor
   }
 });
-const tabPanelFocusStyles = mode => {
-  const colors = getTabColors(mode);
+const tabPanelFocusStyles = () => {
+  const colors = tabColors;
   return {
     boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
     borderRadius: "var(--ds-border-radius, 3px)",
@@ -82,8 +82,8 @@ const tabPanelFocusStyles = mode => {
     }
   };
 };
-export const getTabStyles = mode => {
-  const colors = getTabColors(mode);
+export const getTabStyles = () => {
+  const colors = tabColors;
   return {
     color: colors.labelColor,
     cursor: 'pointer',
@@ -92,20 +92,14 @@ export const getTabStyles = mode => {
     padding: `${tabTopBottomPadding} ${tabLeftRightPadding}`,
     position: 'relative',
     whiteSpace: 'nowrap',
+    overflow: 'hidden',
     textOverflow: 'ellipsis',
-    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-    '@supports not (overflow-x: clip)': {
-      overflow: 'hidden'
-    },
-    '@supports (overflow-x: clip)': {
-      overflowX: 'clip'
-    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,
       '&::after': {
         ...tabLineStyles,
-        borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).hoveredColor}`,
+        borderBottom: `${underlineHeight} solid ${tabLineColors.hoveredColor}`,
         height: 0
       }
     },
@@ -114,13 +108,13 @@ export const getTabStyles = mode => {
       color: colors.activeLabelColor,
       '&::after': {
         ...tabLineStyles,
-        borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).activeColor}`,
+        borderBottom: `${underlineHeight} solid ${tabLineColors.activeColor}`,
         height: 0
       }
     },
-    '&:focus-visible': tabPanelFocusStyles(mode),
+    '&:focus-visible': tabPanelFocusStyles(),
     '@supports not selector(*:focus-visible)': {
-      '&:focus': tabPanelFocusStyles(mode)
+      '&:focus': tabPanelFocusStyles()
     },
     ...highContrastFocusRing,
     '&[aria-selected="true"]': {
@@ -128,7 +122,7 @@ export const getTabStyles = mode => {
       '&::after': {
         ...tabLineStyles,
         // This line is a border so it is visible in high contrast mode
-        borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).selectedColor}`,
+        borderBottom: `${underlineHeight} solid ${tabLineColors.selectedColor}`,
         height: 0
       }
     }

package/dist/esm/components/tab-list.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { Children, createRef, useCallback, useMemo } from 'react';
+import { Children, createRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
@@ -12,6 +11,9 @@ var baseStyles = css({
   position: 'relative'
 });
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var tabListStyles = getTabListStyles();
+
 /**
  * __TabList__
  *
@@ -23,8 +25,6 @@ var baseStyles = css({
  */
 var TabList = function TabList(_ref) {
   var children = _ref.children;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var _useTabList = useTabList(),
     tabsId = _useTabList.tabsId,
     selected = _useTabList.selected,
@@ -34,9 +34,6 @@ var TabList = function TabList(_ref) {
   // Don't include any conditional children
   var childrenArray = Children.toArray(children).filter(Boolean);
   var length = childrenArray.length;
-  var tabListStyles = useMemo(function () {
-    return getTabListStyles(mode);
-  }, [mode]);
   var selectTabByIndex = useCallback(function (index) {
     var _ref$current;
     var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(index, "']"));

package/dist/esm/components/tabs.js

@@ -4,10 +4,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
-import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import { Children, Fragment, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
 import { getTabsStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
@@ -19,10 +18,13 @@ var baseStyles = css({
   flexDirection: 'column',
   flexGrow: 1
 });
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var tabsStyles = getTabsStyles();
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.8"
+  packageVersion: "14.0.0"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -64,8 +66,6 @@ var Tabs = function Tabs(props) {
     analyticsContext = props.analyticsContext,
     children = props.children,
     testId = props.testId;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var _useState = useState(SelectedType || defaultSelected || 0),
     _useState2 = _slicedToArray(_useState, 2),
     selectedState = _useState2[0],
@@ -112,9 +112,6 @@ var Tabs = function Tabs(props) {
       tabsId: id
     });
   });
-  var tabsStyles = useMemo(function () {
-    return getTabsStyles(mode);
-  }, [mode]);
   return (
     // Only styles that affect the Tabs container itself have been applied via primitives.
     // The other styles applied through the CSS prop are there for styling children

package/dist/esm/internal/colors.js

@@ -1,44 +1,15 @@
-import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
-var tabColorMap = {
-  light: {
-    labelColor: "var(--ds-text-subtle, ".concat(N500, ")"),
-    activeLabelColor: "var(--ds-text, ".concat(B500, ")"),
-    hoverLabelColor: "var(--ds-text-subtle, ".concat(B400, ")"),
-    selectedColor: "var(--ds-text-selected, ".concat(B400, ")"),
-    focusBorderColor: "var(--ds-border-focused, ".concat(B100, ")")
-  },
-  dark: {
-    labelColor: "var(--ds-text-subtle, ".concat(DN400, ")"),
-    activeLabelColor: "var(--ds-text, ".concat(B200, ")"),
-    hoverLabelColor: "var(--ds-text-subtle, ".concat(B75, ")"),
-    selectedColor: "var(--ds-text-selected, ".concat(B75, ")"),
-    focusBorderColor: "var(--ds-border-focused, ".concat(B75, ")")
-  }
-};
-export var getTabColors = function getTabColors(mode) {
-  return tabColorMap[mode];
-};
-var tabLineColorMap = {
-  light: {
-    lineColor: "var(--ds-border, ".concat(N30, ")"),
-    hoveredColor: "var(--ds-border, transparent)",
-    activeColor: "var(--ds-border, transparent)",
-    selectedColor: "var(--ds-border-selected, ".concat(B400, ")")
-  },
-  dark: {
-    lineColor: "var(--ds-border, ".concat(DN0, ")"),
-    hoveredColor: "var(--ds-border, transparent)",
-    activeColor: "var(--ds-border, transparent)",
-    selectedColor: "var(--ds-border-selected, ".concat(B75, ")")
-  }
-};
-export var getTabLineColor = function getTabLineColor(mode) {
-  return tabLineColorMap[mode];
-};
-var tabPanelFocusColorMap = {
-  light: "var(--ds-border-focused, ".concat(B100, ")"),
-  dark: "var(--ds-border-focused, ".concat(B75, ")")
-};
-export var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
-  return tabPanelFocusColorMap[mode];
-};
+import { B100, B400, B500, N30, N500 } from '@atlaskit/theme/colors';
+export var tabColors = {
+  labelColor: "var(--ds-text-subtle, ".concat(N500, ")"),
+  activeLabelColor: "var(--ds-text, ".concat(B500, ")"),
+  hoverLabelColor: "var(--ds-text-subtle, ".concat(B400, ")"),
+  selectedColor: "var(--ds-text-selected, ".concat(B400, ")"),
+  focusBorderColor: "var(--ds-border-focused, ".concat(B100, ")")
+};
+export var tabLineColors = {
+  lineColor: "var(--ds-border, ".concat(N30, ")"),
+  hoveredColor: "var(--ds-border, transparent)",
+  activeColor: "var(--ds-border, transparent)",
+  selectedColor: "var(--ds-border-selected, ".concat(B400, ")")
+};
+export var tabPanelFocusColor = "var(--ds-border-focused, ".concat(B100, ")");

package/dist/esm/internal/styles.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { css } from '@emotion/react';
-import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
+import { tabColors, tabLineColors, tabPanelFocusColor } from './colors';
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";
 var tabTopBottomPadding = "var(--ds-space-050, 4px)";
 // TODO this should probably be `border.width.indicator`
@@ -20,14 +20,14 @@ var highContrastFocusRing = {
     }
   }
 };
-var tabFocusStyles = function tabFocusStyles(mode) {
+var tabFocusStyles = function tabFocusStyles() {
   return {
-    boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
+    boxShadow: "0 0 0 2px ".concat(tabPanelFocusColor, " inset"),
     borderRadius: "var(--ds-border-radius, 3px)",
     outline: 'none'
   };
 };
-var getTabPanelStyles = function getTabPanelStyles(mode) {
+var getTabPanelStyles = function getTabPanelStyles() {
   return _objectSpread({
     flexGrow: 1,
     /*
@@ -37,17 +37,17 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
     minHeight: '0%',
     display: 'flex',
     padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus-visible': tabFocusStyles(mode),
+    '&:focus-visible': tabFocusStyles(),
     '@supports not selector(*:focus-visible)': {
-      '&:focus': tabFocusStyles(mode)
+      '&:focus': tabFocusStyles()
     }
   }, highContrastFocusRing);
 };
-export var getTabsStyles = function getTabsStyles(mode) {
+export var getTabsStyles = function getTabsStyles() {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
     css({
-      '& [role="tabpanel"]': getTabPanelStyles(mode),
+      '& [role="tabpanel"]': getTabPanelStyles(),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
       // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -67,22 +67,22 @@ var tabLineStyles = {
   left: tabLeftRightPadding,
   right: tabLeftRightPadding
 };
-export var getTabListStyles = function getTabListStyles(mode) {
+export var getTabListStyles = function getTabListStyles() {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
     css({
-      '& [role="tab"]': getTabStyles(mode),
+      '& [role="tab"]': getTabStyles(),
       fontWeight: "var(--ds-font-weight-medium, 500)",
       '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
         height: underlineHeight,
         // This line is not a border so the selected line is visible in high contrast mode
-        backgroundColor: getTabLineColor(mode).lineColor
+        backgroundColor: tabLineColors.lineColor
       })
     })
   );
 };
-var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
-  var colors = getTabColors(mode);
+var tabPanelFocusStyles = function tabPanelFocusStyles() {
+  var colors = tabColors;
   return {
     boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
     borderRadius: "var(--ds-border-radius, 3px)",
@@ -93,8 +93,8 @@ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
     }
   };
 };
-export var getTabStyles = function getTabStyles(mode) {
-  var colors = getTabColors(mode);
+export var getTabStyles = function getTabStyles() {
+  var colors = tabColors;
   return _objectSpread(_objectSpread({
     color: colors.labelColor,
     cursor: 'pointer',
@@ -103,19 +103,13 @@ export var getTabStyles = function getTabStyles(mode) {
     padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
     position: 'relative',
     whiteSpace: 'nowrap',
+    overflow: 'hidden',
     textOverflow: 'ellipsis',
-    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-    '@supports not (overflow-x: clip)': {
-      overflow: 'hidden'
-    },
-    '@supports (overflow-x: clip)': {
-      overflowX: 'clip'
-    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
-        borderBottom: "".concat(underlineHeight, " solid ").concat(getTabLineColor(mode).hoveredColor),
+        borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.hoveredColor),
         height: 0
       })
     },
@@ -123,20 +117,20 @@ export var getTabStyles = function getTabStyles(mode) {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.activeLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
-        borderBottom: "".concat(underlineHeight, " solid ").concat(getTabLineColor(mode).activeColor),
+        borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.activeColor),
         height: 0
       })
     },
-    '&:focus-visible': tabPanelFocusStyles(mode),
+    '&:focus-visible': tabPanelFocusStyles(),
     '@supports not selector(*:focus-visible)': {
-      '&:focus': tabPanelFocusStyles(mode)
+      '&:focus': tabPanelFocusStyles()
     }
   }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
         // This line is a border so it is visible in high contrast mode
-        borderBottom: "".concat(underlineHeight, " solid ").concat(getTabLineColor(mode).selectedColor),
+        borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.selectedColor),
         height: 0
       })
     }

package/dist/types/internal/colors.d.ts

@@ -1,17 +1,14 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-export type TabColors = {
-    labelColor: string;
-    activeLabelColor: string;
-    hoverLabelColor: string;
-    selectedColor: string;
-    focusBorderColor: string;
+export declare const tabColors: {
+    labelColor: "var(--ds-text-subtle)";
+    activeLabelColor: "var(--ds-text)";
+    hoverLabelColor: "var(--ds-text-subtle)";
+    selectedColor: "var(--ds-text-selected)";
+    focusBorderColor: "var(--ds-border-focused)";
 };
-export declare const getTabColors: (mode: ThemeModes) => TabColors;
-export type TabLineColors = {
-    lineColor: string;
-    hoveredColor: string;
-    activeColor: string;
-    selectedColor: string;
+export declare const tabLineColors: {
+    lineColor: "var(--ds-border)";
+    hoveredColor: "var(--ds-border)";
+    activeColor: "var(--ds-border)";
+    selectedColor: "var(--ds-border-selected)";
 };
-export declare const getTabLineColor: (mode: ThemeModes) => TabLineColors;
-export declare const getTabPanelFocusColor: (mode: ThemeModes) => string;
+export declare const tabPanelFocusColor: "var(--ds-border-focused)";

package/dist/types/internal/styles.d.ts

@@ -1,5 +1,4 @@
 import { CSSObject, SerializedStyles } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare const getTabsStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabListStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabStyles: (mode: ThemeModes) => CSSObject;
+export declare const getTabsStyles: () => SerializedStyles;
+export declare const getTabListStyles: () => SerializedStyles;
+export declare const getTabStyles: () => CSSObject;

package/dist/types-ts4.5/internal/colors.d.ts

@@ -1,17 +1,14 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-export type TabColors = {
-    labelColor: string;
-    activeLabelColor: string;
-    hoverLabelColor: string;
-    selectedColor: string;
-    focusBorderColor: string;
+export declare const tabColors: {
+    labelColor: "var(--ds-text-subtle)";
+    activeLabelColor: "var(--ds-text)";
+    hoverLabelColor: "var(--ds-text-subtle)";
+    selectedColor: "var(--ds-text-selected)";
+    focusBorderColor: "var(--ds-border-focused)";
 };
-export declare const getTabColors: (mode: ThemeModes) => TabColors;
-export type TabLineColors = {
-    lineColor: string;
-    hoveredColor: string;
-    activeColor: string;
-    selectedColor: string;
+export declare const tabLineColors: {
+    lineColor: "var(--ds-border)";
+    hoveredColor: "var(--ds-border)";
+    activeColor: "var(--ds-border)";
+    selectedColor: "var(--ds-border-selected)";
 };
-export declare const getTabLineColor: (mode: ThemeModes) => TabLineColors;
-export declare const getTabPanelFocusColor: (mode: ThemeModes) => string;
+export declare const tabPanelFocusColor: "var(--ds-border-focused)";

package/dist/types-ts4.5/internal/styles.d.ts

@@ -1,5 +1,4 @@
 import { CSSObject, SerializedStyles } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare const getTabsStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabListStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabStyles: (mode: ThemeModes) => CSSObject;
+export declare const getTabsStyles: () => SerializedStyles;
+export declare const getTabListStyles: () => SerializedStyles;
+export declare const getTabStyles: () => CSSObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.4.8",
+  "version": "14.0.0",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-explorations": "^3.0.0",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.10.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },