@atlaskit/smart-card 26.43.2 → 26.43.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.43.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.43.3
+
+### Patch Changes
+
+- [#58228](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58228) [`49eac6976147`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49eac6976147) - Remove legacy theming logic from the Smart Card component.
+
 ## 26.43.2
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.43.2"
+  packageVersion: "26.43.4"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -12,13 +12,11 @@ var _constants = require("@atlaskit/theme/constants");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
 var _utils = require("../../common/utils");
-var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 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); }
 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; }
 var className = exports.className = 'media-card-frame';
-var borderRadius = exports.borderRadius = "\n  border-radius: ".concat((0, _constants.borderRadius)(), "px;\n");
-var BACKGROUND_COLOR_DARK = '#262B31';
+var borderRadius = exports.borderRadius = "\n  border-radius: ".concat("var(--ds-border-radius, 3px)", ";\n");
 var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n");
 var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-100, 4px)", ";\n");
 var ellipsis = exports.ellipsis = function ellipsis() {
@@ -64,10 +62,7 @@ var height = function height(_ref5) {
 var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(wrapperBorderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: ", "var(--ds-space-negative-100, -8px)", ";\n    ").concat(wrapperBorderRadius, "\n  }\n");
 };
-var visibleStyles = "\n  &:after {\n    border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), ";\n    background-color: ", (0, _components.themed)({
-  light: "var(--ds-surface-raised, white)",
-  dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
-})(), ";\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+var visibleStyles = "\n  &:after {\n    border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), ";\n    background-color: ", "var(--ds-surface-raised, white)", ";\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 function visible(_ref6) {
   var frameStyle = _ref6.frameStyle;
   return frameStyle === 'show' ? visibleStyles : '';

package/dist/cjs/view/HoverCard/styled.js

@@ -10,7 +10,6 @@ var _react = require("@emotion/react");
 var _index = require("../../index");
 var _constants = require("../../constants");
 var _constants2 = require("@atlaskit/theme/constants");
-var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 var HOVER_CARD_Z_INDEX = exports.HOVER_CARD_Z_INDEX = _constants2.layers.modal();
@@ -32,13 +31,7 @@ var titleBlockCss = exports.titleBlockCss = (0, _react.css)(_templateObject3 ||
 var getTransitionStyles = exports.getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
 };
-var popupContainerStyles = exports.popupContainerStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-200, 8px)", (0, _components.themed)({
-  light: "var(--ds-surface-raised, white)",
-  dark: "var(--ds-surface-raised, #262B31)"
-})(), (0, _components.themed)({
-  light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
-  dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
-})());
+var popupContainerStyles = exports.popupContainerStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-surface-raised, white)", "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))");
 var getPreviewBlockStyles = exports.getPreviewBlockStyles = function getPreviewBlockStyles(previewHeight) {
   return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  margin-bottom: ", ";\n"])), previewHeight ? "height: ".concat(previewHeight, "px;") : '', "var(--ds-border-radius-200, 8px)", "var(--ds-border-radius-200, 8px)", blockGap);
 };

package/dist/cjs/view/InlineCard/Frame/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Frame = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _components = require("@atlaskit/theme/components");
 var _styled = require("./styled");
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 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); }
@@ -42,11 +41,7 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
   var Wrapper = link || onClick ? _styled.WrapperAnchor : _styled.WrapperSpan;
-
-  // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
-  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
   return /*#__PURE__*/_react.default.createElement(Wrapper, {
-    theme: (0, _components.useGlobalTheme)(),
     href: link,
     withoutBackground: withoutBackground,
     isSelected: isSelected,

package/dist/cjs/view/InlineCard/Frame/styled.js

@@ -8,20 +8,12 @@ exports.WrapperSpan = exports.WrapperAnchor = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2;
-var BACKGROUND_COLOR_DARK = '#262B31';
 var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(_colors.B100, ")"), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n  &:hover {\n    border: 1px solid ", "var(--ds-border, ".concat(_colors.N40, ")"), ";\n  }\n");
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
   if (isInteractive) {
-    return "\n      :hover {\n        background-color: ".concat((0, _components.themed)({
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(BACKGROUND_COLOR_DARK, ")")
-    }), ";\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
-      light: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
-      dark: "var(--ds-background-selected, ".concat(BACKGROUND_COLOR_DARK, ")")
-    }), ";\n      }\n      :focus {\n        ").concat(selected, "\n      }\n    ");
+    return "\n      :active {\n        background-color: ".concat("var(--ds-background-selected, ".concat(_colors.B50, ")"), ";\n      }\n      :focus {\n        ", selected, "\n      }\n    ");
   } else {
     return '';
   }
@@ -34,17 +26,12 @@ var isSelected = function isSelected(_ref2) {
     return 'user-select: text';
   }
 };
-var hoveredStyles = function hoveredStyles(props) {
-  return "\n  ".concat((0, _components.themed)({
-    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";"),
-    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";")
-  })(props), ";\n");
-};
+var hoveredStyles = "border-color: ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";");
 var activeHoveredFocusedStyles = function activeHoveredFocusedStyles(props) {
   return "\n  ".concat(props.withoutBackground ? '' : 'text-decoration: none;', ";\n");
 };
 var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
-  return "\n    ".concat(hoveredStyles(props), ";\n    ").concat(activeHoveredFocusedStyles(props), ";\n");
+  return "\n    ".concat(hoveredStyles, "\n    ").concat(activeHoveredFocusedStyles(props), ";\n");
 };
 
 /*
@@ -60,16 +47,7 @@ var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 var baseWrapperStyle = function baseWrapperStyle(props) {
-  return "\n  line-height: 22px;\n  padding: 2px 0px;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "var(--ds-border-radius-100, 4px)", ";\n  color: ").concat((0, _components.themed)({
-    light: "var(--ds-link, ".concat(_colors.B400, ")"),
-    dark: "var(--ds-link, #4794FF)"
-  })(props), ";\n\n  background-color: ").concat(props.withoutBackground ? '' : (0, _components.themed)({
-    light: "var(--ds-surface-raised, white)",
-    dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
-  })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : (0, _components.themed)({
-    light: "border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), ";"),
-    dark: "border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N500, ")"), ";")
-  })(props), "\n  &:hover {\n    ").concat(hoveredStyles(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(activeHoveredFocusedStyles(props), "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  ").concat(props.isHovered && hoveredWihBorderStyles(props), ";\n");
+  return "\n  line-height: 22px;\n  padding: 2px 0px;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "var(--ds-border-radius-100, 4px)", ";\n  color: ", "var(--ds-link, ".concat(_colors.B400, ")"), ";\n\n  background-color: ").concat(props.withoutBackground ? '' : "var(--ds-surface-raised, white)", ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : "border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), ";"), "\n  &:hover {\n    ").concat(hoveredStyles, "\n  }\n  &, :hover, :focus, :active {\n    ").concat(activeHoveredFocusedStyles(props), "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  ").concat(props.isHovered && hoveredWihBorderStyles(props), ";\n");
 };
 var WrapperAnchor = exports.WrapperAnchor = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
 WrapperAnchor.displayName = 'WrapperAnchor';

package/dist/cjs/view/InlineCard/styled.js

@@ -8,19 +8,10 @@ exports.NoLinkAppearance = exports.LowercaseAppearance = exports.LinkAppearance
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var LINK_COLOR_DARK = '#4794FF';
-
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 var IconStyledButton = exports.IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
-var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-left: ", ";\n"])), (0, _components.themed)({
-  light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  dark: "var(--ds-text-subtlest, ".concat(LINK_COLOR_DARK, ")")
-}), "var(--ds-space-050, 4px)");
+var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-left: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
 var LowercaseAppearance = exports.LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: lowercase;\n"])));
-var LinkAppearance = exports.LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), (0, _components.themed)({
-  light: "var(--ds-link, ".concat(_colors.B400, ")"),
-  dark: "var(--ds-link, ".concat(LINK_COLOR_DARK, ")")
-}));
+var LinkAppearance = exports.LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), "var(--ds-link, ".concat(_colors.B400, ")"));

package/dist/cjs/view/InlineCard/utils/withFrameStyleControl.js

@@ -7,9 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 /**
  * This HOC serves as a temporary workaround for controlling the style of a parent component.
  * We do not want the Frame to have a hover state when hovering over the action button.
@@ -19,13 +17,9 @@ var _colors = require("@atlaskit/theme/colors");
 var _default = exports.default = function _default(Button, frameRef) {
   return function (props) {
     var setBorderStyle = function setBorderStyle() {
-      var borderColor = (0, _components.themed)({
-        light: "".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-        dark: "".concat("var(--ds-border, ".concat(_colors.N500, ")"))
-      })();
       var frameNode = frameRef.current;
       if (frameNode) {
-        frameNode.style.borderColor = borderColor;
+        frameNode.style.borderColor = "".concat("var(--ds-border, ".concat(_colors.N40, ")"));
       }
     };
     var removeBorderStyle = function removeBorderStyle() {

package/dist/cjs/view/LinkUrl/index.js

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.43.2",
+  packageVersion: "26.43.4",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/utils.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mq = exports.gs = exports.br = void 0;
-var _constants = require("@atlaskit/theme/constants");
 var _facepaint = _interopRequireDefault(require("facepaint"));
 var gs = exports.gs = function gs(times) {
-  return "".concat((0, _constants.gridSize)() * times, "px");
+  return "".concat(8 * times, "px");
 };
 var br = exports.br = function br() {
   var times = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-  return "".concat((0, _constants.borderRadius)() * times, "px");
+  return "".concat(3 * times, "px");
 };
 var mq = exports.mq = (0, _facepaint.default)(['@media(min-width: 576px)']);

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.43.2"
+  packageVersion: "26.43.4"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -1,14 +1,12 @@
 import styled from '@emotion/styled';
-import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
+import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { gs as gridSize } from '../../common/utils';
 import { N40 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 export const className = 'media-card-frame';
 export const borderRadius = `
-  border-radius: ${akBorderRadius()}px;
+  border-radius: ${"var(--ds-border-radius, 3px)"};
 `;
-const BACKGROUND_COLOR_DARK = '#262B31';
 const wrapperBorderRadius = `
   border-radius: ${"var(--ds-border-radius-200, 8px)"};
 `;
@@ -116,10 +114,7 @@ const wrapperStyles = props => `
 const visibleStyles = `
   &:after {
     border: 1px solid ${`var(--ds-border, ${N40})`};
-    background-color: ${themed({
-  light: "var(--ds-surface-raised, white)",
-  dark: `var(--ds-surface-raised, ${BACKGROUND_COLOR_DARK})`
-})()};
+    background-color: ${"var(--ds-surface-raised, white)"};
   }
   .embed-header {
     opacity: 1;

package/dist/es2019/view/HoverCard/styled.js

@@ -2,8 +2,6 @@ import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize } from '../../constants';
 import { layers } from '@atlaskit/theme/constants';
-import { themed } from '@atlaskit/theme/components';
-
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 export const HOVER_CARD_Z_INDEX = layers.modal();
 export const flexibleUiOptions = {
@@ -61,14 +59,8 @@ export const getTransitionStyles = snippetHeight => css`
 `;
 export const popupContainerStyles = css`
   border-radius: ${"var(--ds-border-radius-200, 8px)"};
-  background-color: ${themed({
-  light: "var(--ds-surface-raised, white)",
-  dark: "var(--ds-surface-raised, #262B31)"
-})()};
-  box-shadow: ${themed({
-  light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
-  dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
-})()};
+  background-color: ${"var(--ds-surface-raised, white)"};
+  box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))"};
 `;
 export const getPreviewBlockStyles = previewHeight => css`
   ${previewHeight ? `height: ${previewHeight}px;` : ''}

package/dist/es2019/view/InlineCard/Frame/index.js

@@ -1,5 +1,4 @@
 import React, { useCallback, forwardRef } from 'react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { WrapperAnchor, WrapperSpan } from './styled';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
@@ -35,11 +34,7 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
   const Wrapper = link || onClick ? WrapperAnchor : WrapperSpan;
-
-  // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
-  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
   return /*#__PURE__*/React.createElement(Wrapper, {
-    theme: useGlobalTheme(),
     href: link,
     withoutBackground: withoutBackground,
     isSelected: isSelected,

package/dist/es2019/view/InlineCard/Frame/styled.js

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { B50, B100, B200, B400, N20, N40, N500 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-const BACKGROUND_COLOR_DARK = '#262B31';
+import { B50, B100, B200, B400, N40 } from '@atlaskit/theme/colors';
 const selected = `
   cursor: pointer;
   box-shadow: 0 0 0 2px ${`var(--ds-border-selected, ${B100})`};
@@ -19,17 +17,8 @@ const isInteractive = ({
 }) => {
   if (isInteractive) {
     return `
-      :hover {
-        background-color: ${themed({
-      light: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
-      dark: `var(--ds-background-neutral-subtle-hovered, ${BACKGROUND_COLOR_DARK})`
-    })};
-      }
       :active {
-        background-color: ${themed({
-      light: `var(--ds-background-selected, ${B50})`,
-      dark: `var(--ds-background-selected, ${BACKGROUND_COLOR_DARK})`
-    })};
+        background-color: ${`var(--ds-background-selected, ${B50})`};
       }
       :focus {
         ${selected}
@@ -48,17 +37,12 @@ const isSelected = ({
     return 'user-select: text';
   }
 };
-const hoveredStyles = props => `
-  ${themed({
-  light: `border-color: ${`var(--ds-border-accent-blue, ${B200})`};`,
-  dark: `border-color:  ${`var(--ds-border-accent-blue, ${B200})`};`
-})(props)};
-`;
+const hoveredStyles = `border-color: ${`var(--ds-border-accent-blue, ${B200})`};`;
 const activeHoveredFocusedStyles = props => `
   ${props.withoutBackground ? '' : 'text-decoration: none;'};
 `;
 const hoveredWihBorderStyles = props => `
-    ${hoveredStyles(props)};
+    ${hoveredStyles}
     ${activeHoveredFocusedStyles(props)};
 `;
 
@@ -81,24 +65,15 @@ const baseWrapperStyle = props => `
   display: inline;
   box-decoration-break: clone;
   border-radius: ${"var(--ds-border-radius-100, 4px)"};
-  color: ${themed({
-  light: `var(--ds-link, ${B400})`,
-  dark: "var(--ds-link, #4794FF)"
-})(props)};
+  color: ${`var(--ds-link, ${B400})`};
 
-  background-color: ${props.withoutBackground ? '' : themed({
-  light: "var(--ds-surface-raised, white)",
-  dark: `var(--ds-surface-raised, ${BACKGROUND_COLOR_DARK})`
-})(props)};
+  background-color: ${props.withoutBackground ? '' : "var(--ds-surface-raised, white)"};
 
   ${isSelected(props)};
 
-  ${props.withoutBackground ? '' : themed({
-  light: `border: 1px solid ${`var(--ds-border, ${N40})`};`,
-  dark: `border: 1px solid ${`var(--ds-border, ${N500})`};`
-})(props)}
+  ${props.withoutBackground ? '' : `border: 1px solid ${`var(--ds-border, ${N40})`};`}
   &:hover {
-    ${hoveredStyles(props)}
+    ${hoveredStyles}
   }
   &, :hover, :focus, :active {
     ${activeHoveredFocusedStyles(props)}

package/dist/es2019/view/InlineCard/styled.js

@@ -1,8 +1,5 @@
 import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-const LINK_COLOR_DARK = '#4794FF';
-
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 export const IconStyledButton = styled.span`
@@ -30,20 +27,14 @@ export const IconStyledButton = styled.span`
   }
 `;
 export const NoLinkAppearance = styled.span`
-  color: ${themed({
-  light: `var(--ds-text-subtlest, ${N200})`,
-  dark: `var(--ds-text-subtlest, ${LINK_COLOR_DARK})`
-})};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   margin-left: ${"var(--ds-space-050, 4px)"};
 `;
 export const LowercaseAppearance = styled.span`
   text-transform: lowercase;
 `;
 export const LinkAppearance = styled.a`
-  color: ${themed({
-  light: `var(--ds-link, ${B400})`,
-  dark: `var(--ds-link, ${LINK_COLOR_DARK})`
-})};
+  color: ${`var(--ds-link, ${B400})`};
 
   &:hover {
     text-decoration: none;

package/dist/es2019/view/InlineCard/utils/withFrameStyleControl.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
-import { N500, N40 } from '@atlaskit/theme/colors';
+import { N40 } from '@atlaskit/theme/colors';
 
 /**
  * This HOC serves as a temporary workaround for controlling the style of a parent component.
@@ -12,13 +10,9 @@ import { N500, N40 } from '@atlaskit/theme/colors';
  */
 export default ((Button, frameRef) => props => {
   const setBorderStyle = () => {
-    const borderColor = themed({
-      light: `${`var(--ds-border, ${N40})`}`,
-      dark: `${`var(--ds-border, ${N500})`}`
-    })();
     const frameNode = frameRef.current;
     if (frameNode) {
-      frameNode.style.borderColor = borderColor;
+      frameNode.style.borderColor = `${`var(--ds-border, ${N40})`}`;
     }
   };
   const removeBorderStyle = () => {

package/dist/es2019/view/LinkUrl/index.js

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.43.2",
+  packageVersion: "26.43.4",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/common/utils.js

@@ -1,6 +1,5 @@
-import { gridSize, borderRadius } from '@atlaskit/theme/constants';
 import facepaint from 'facepaint';
-const gs = times => `${gridSize() * times}px`;
-const br = (times = 1) => `${borderRadius() * times}px`;
+const gs = times => `${8 * times}px`;
+const br = (times = 1) => `${3 * times}px`;
 const mq = facepaint(['@media(min-width: 576px)']);
 export { gs, br, mq };

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.43.2"
+  packageVersion: "26.43.4"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/EmbedCard/components/styled.js

@@ -1,14 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 import styled from '@emotion/styled';
-import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
+import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { gs as gridSize } from '../../common/utils';
 import { N40 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 export var className = 'media-card-frame';
-export var borderRadius = "\n  border-radius: ".concat(akBorderRadius(), "px;\n");
-var BACKGROUND_COLOR_DARK = '#262B31';
+export var borderRadius = "\n  border-radius: ".concat("var(--ds-border-radius, 3px)", ";\n");
 var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n");
 var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-100, 4px)", ";\n");
 export var ellipsis = function ellipsis() {
@@ -54,10 +52,7 @@ var height = function height(_ref5) {
 var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(wrapperBorderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: ", "var(--ds-space-negative-100, -8px)", ";\n    ").concat(wrapperBorderRadius, "\n  }\n");
 };
-var visibleStyles = "\n  &:after {\n    border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";\n    background-color: ", themed({
-  light: "var(--ds-surface-raised, white)",
-  dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
-})(), ";\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+var visibleStyles = "\n  &:after {\n    border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";\n    background-color: ", "var(--ds-surface-raised, white)", ";\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 function visible(_ref6) {
   var frameStyle = _ref6.frameStyle;
   return frameStyle === 'show' ? visibleStyles : '';

package/dist/esm/view/HoverCard/styled.js

@@ -4,8 +4,6 @@ import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize } from '../../constants';
 import { layers } from '@atlaskit/theme/constants';
-import { themed } from '@atlaskit/theme/components';
-
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 export var HOVER_CARD_Z_INDEX = layers.modal();
 export var flexibleUiOptions = {
@@ -26,13 +24,7 @@ export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTe
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
 };
-export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-200, 8px)", themed({
-  light: "var(--ds-surface-raised, white)",
-  dark: "var(--ds-surface-raised, #262B31)"
-})(), themed({
-  light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
-  dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
-})());
+export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-surface-raised, white)", "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))");
 export var getPreviewBlockStyles = function getPreviewBlockStyles(previewHeight) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  margin-bottom: ", ";\n"])), previewHeight ? "height: ".concat(previewHeight, "px;") : '', "var(--ds-border-radius-200, 8px)", "var(--ds-border-radius-200, 8px)", blockGap);
 };

package/dist/esm/view/InlineCard/Frame/index.js

@@ -1,5 +1,4 @@
 import React, { useCallback, forwardRef } from 'react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { WrapperAnchor, WrapperSpan } from './styled';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -33,11 +32,7 @@ export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
   var Wrapper = link || onClick ? WrapperAnchor : WrapperSpan;
-
-  // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
-  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
   return /*#__PURE__*/React.createElement(Wrapper, {
-    theme: useGlobalTheme(),
     href: link,
     withoutBackground: withoutBackground,
     isSelected: isSelected,

package/dist/esm/view/InlineCard/Frame/styled.js

@@ -1,20 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
-import { B50, B100, B200, B400, N20, N40, N500 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-var BACKGROUND_COLOR_DARK = '#262B31';
+import { B50, B100, B200, B400, N40 } from '@atlaskit/theme/colors';
 var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B100, ")"), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n  &:hover {\n    border: 1px solid ", "var(--ds-border, ".concat(N40, ")"), ";\n  }\n");
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
   if (isInteractive) {
-    return "\n      :hover {\n        background-color: ".concat(themed({
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(BACKGROUND_COLOR_DARK, ")")
-    }), ";\n      }\n      :active {\n        background-color: ").concat(themed({
-      light: "var(--ds-background-selected, ".concat(B50, ")"),
-      dark: "var(--ds-background-selected, ".concat(BACKGROUND_COLOR_DARK, ")")
-    }), ";\n      }\n      :focus {\n        ").concat(selected, "\n      }\n    ");
+    return "\n      :active {\n        background-color: ".concat("var(--ds-background-selected, ".concat(B50, ")"), ";\n      }\n      :focus {\n        ", selected, "\n      }\n    ");
   } else {
     return '';
   }
@@ -27,17 +19,12 @@ var isSelected = function isSelected(_ref2) {
     return 'user-select: text';
   }
 };
-var hoveredStyles = function hoveredStyles(props) {
-  return "\n  ".concat(themed({
-    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";"),
-    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";")
-  })(props), ";\n");
-};
+var hoveredStyles = "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";");
 var activeHoveredFocusedStyles = function activeHoveredFocusedStyles(props) {
   return "\n  ".concat(props.withoutBackground ? '' : 'text-decoration: none;', ";\n");
 };
 var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
-  return "\n    ".concat(hoveredStyles(props), ";\n    ").concat(activeHoveredFocusedStyles(props), ";\n");
+  return "\n    ".concat(hoveredStyles, "\n    ").concat(activeHoveredFocusedStyles(props), ";\n");
 };
 
 /*
@@ -53,16 +40,7 @@ var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 var baseWrapperStyle = function baseWrapperStyle(props) {
-  return "\n  line-height: 22px;\n  padding: 2px 0px;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "var(--ds-border-radius-100, 4px)", ";\n  color: ").concat(themed({
-    light: "var(--ds-link, ".concat(B400, ")"),
-    dark: "var(--ds-link, #4794FF)"
-  })(props), ";\n\n  background-color: ").concat(props.withoutBackground ? '' : themed({
-    light: "var(--ds-surface-raised, white)",
-    dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
-  })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : themed({
-    light: "border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";"),
-    dark: "border: 1px solid ".concat("var(--ds-border, ".concat(N500, ")"), ";")
-  })(props), "\n  &:hover {\n    ").concat(hoveredStyles(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(activeHoveredFocusedStyles(props), "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  ").concat(props.isHovered && hoveredWihBorderStyles(props), ";\n");
+  return "\n  line-height: 22px;\n  padding: 2px 0px;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "var(--ds-border-radius-100, 4px)", ";\n  color: ", "var(--ds-link, ".concat(B400, ")"), ";\n\n  background-color: ").concat(props.withoutBackground ? '' : "var(--ds-surface-raised, white)", ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : "border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";"), "\n  &:hover {\n    ").concat(hoveredStyles, "\n  }\n  &, :hover, :focus, :active {\n    ").concat(activeHoveredFocusedStyles(props), "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  ").concat(props.isHovered && hoveredWihBorderStyles(props), ";\n");
 };
 export var WrapperAnchor = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
 WrapperAnchor.displayName = 'WrapperAnchor';

package/dist/esm/view/InlineCard/styled.js

@@ -2,18 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-var LINK_COLOR_DARK = '#4794FF';
-
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
-export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: ", ";\n"])), themed({
-  light: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  dark: "var(--ds-text-subtlest, ".concat(LINK_COLOR_DARK, ")")
-}), "var(--ds-space-050, 4px)");
+export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
 export var LowercaseAppearance = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-transform: lowercase;\n"])));
-export var LinkAppearance = styled.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), themed({
-  light: "var(--ds-link, ".concat(B400, ")"),
-  dark: "var(--ds-link, ".concat(LINK_COLOR_DARK, ")")
-}));
+export var LinkAppearance = styled.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), "var(--ds-link, ".concat(B400, ")"));

package/dist/esm/view/InlineCard/utils/withFrameStyleControl.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
-import { N500, N40 } from '@atlaskit/theme/colors';
+import { N40 } from '@atlaskit/theme/colors';
 
 /**
  * This HOC serves as a temporary workaround for controlling the style of a parent component.
@@ -13,13 +11,9 @@ import { N500, N40 } from '@atlaskit/theme/colors';
 export default (function (Button, frameRef) {
   return function (props) {
     var setBorderStyle = function setBorderStyle() {
-      var borderColor = themed({
-        light: "".concat("var(--ds-border, ".concat(N40, ")")),
-        dark: "".concat("var(--ds-border, ".concat(N500, ")"))
-      })();
       var frameNode = frameRef.current;
       if (frameNode) {
-        frameNode.style.borderColor = borderColor;
+        frameNode.style.borderColor = "".concat("var(--ds-border, ".concat(N40, ")"));
       }
     };
     var removeBorderStyle = function removeBorderStyle() {

package/dist/esm/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.43.2",
+  packageVersion: "26.43.4",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/common/utils.js

@@ -1,11 +1,10 @@
-import { gridSize, borderRadius } from '@atlaskit/theme/constants';
 import facepaint from 'facepaint';
 var gs = function gs(times) {
-  return "".concat(gridSize() * times, "px");
+  return "".concat(8 * times, "px");
 };
 var br = function br() {
   var times = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-  return "".concat(borderRadius() * times, "px");
+  return "".concat(3 * times, "px");
 };
 var mq = facepaint(['@media(min-width: 576px)']);
 export { gs, br, mq };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.43.2",
+  "version": "26.43.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/avatar-group": "^9.4.0",
     "@atlaskit/badge": "^15.2.0",
-    "@atlaskit/button": "^16.18.0",
+    "@atlaskit/button": "^17.0.0",
     "@atlaskit/dropdown-menu": "^12.1.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^22.0.0",
@@ -46,10 +46,10 @@
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/popup": "^1.11.0",
-    "@atlaskit/primitives": "^1.13.0",
+    "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@atlaskit/tooltip": "^18.0.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",