@atlaskit/renderer 105.0.0 → 105.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 105.0.2
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
+## 105.0.1
+
+### Patch Changes
+
+- [`d61e8688afd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d61e8688afd) - DSP-8078: Fixes bug where windowed codeblock rendered incorrectly
+
 ## 105.0.0
 
 ### Major Changes

package/dist/cjs/react/marks/link.js

@@ -25,15 +25,13 @@ var _events = require("../../analytics/events");
 
 var _analytics = require("@atlaskit/editor-common/analytics");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 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 anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), (0, _tokens.token)('color.link', _colors.B400), (0, _tokens.token)('color.link', _colors.B300), (0, _tokens.token)('color.link.pressed', _colors.B500));
+var anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), "var(--ds-link, ".concat(_colors.B400, ")"), "var(--ds-link, ".concat(_colors.B300, ")"), "var(--ds-link-pressed, ".concat(_colors.B500, ")"));
 
 function Link(props) {
   var href = props.href,

package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -23,18 +23,16 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _codeBlockCopyButton = _interopRequireDefault(require("../../codeBlockCopyButton"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    background-color: ", ";\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n    }\n  "])), (0, _components.themed)({
-    light: (0, _tokens.token)('elevation.surface.raised', _colors.N20),
-    dark: (0, _tokens.token)('elevation.surface.raised', _colors.DN50)
+    light: "var(--ds-surface-raised, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-surface-raised, ".concat(_colors.DN50, ")")
   })(props), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral', _colors.N20),
-      dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+      light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+      dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
     })(props),
     leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
   }));

package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -68,6 +68,8 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     css: [(0, _styles.codeBlockSharedStyles)(theme), lightWeightCodeBlockStyles]
   }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
+  }, (0, _react2.jsx)("div", {
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
   }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
   }, textRows.map(function (_, index) {
@@ -76,7 +78,7 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     });
   })), (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
-  }, (0, _react2.jsx)("code", null, renderBidiWarnings(text)))));
+  }, (0, _react2.jsx)("code", null, renderBidiWarnings(text))))));
 });
 var _default = LightWeightCodeBlock;
 exports.default = _default;

package/dist/cjs/react/nodes/codeBlockCopyButton.js

@@ -31,15 +31,13 @@ var _clipboard = require("../utils/clipboard");
 
 var _messages = require("@atlaskit/editor-common/messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 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 copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.border', '#fff'), (0, _tokens.token)('elevation.surface.overlay', _colors.N20), (0, _tokens.token)('color.text', 'rgb(66, 82, 110)'), (0, _tokens.token)('color.border', 'transparent'), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N30), (0, _tokens.token)('color.border', 'transparent'), (0, _tokens.token)('elevation.surface.overlay.pressed', _colors.N30), (0, _tokens.token)('elevation.surface.overlay', _colors.N700), (0, _tokens.token)('color.text', '#fff'), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N700));
+var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-text, rgb(66, 82, 110))", "var(--ds-border, transparent)", "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-border, transparent)", "var(--ds-surface-overlay-pressed, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay, ".concat(_colors.N700, ")"), "var(--ds-text, #fff)", "var(--ds-surface-overlay-hovered, ".concat(_colors.N700, ")"));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

package/dist/cjs/react/nodes/heading-anchor.js

@@ -45,8 +45,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var _excluded = ["children"];
@@ -67,7 +65,7 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (
   }), children);
 });
 
-var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), (0, _tokens.token)('color.icon', _colors.N500));
+var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), "var(--ds-icon, ".concat(_colors.N500, ")"));
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
@@ -150,7 +148,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? (0, _tokens.token)('color.icon.selected', _colors.B400) : (0, _tokens.token)('color.icon.subtle', _colors.N200)
+        primaryColor: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(_colors.B400, ")") : "var(--ds-icon-subtle, ".concat(_colors.N200, ")")
       }));
     });
     return _this;

package/dist/cjs/react/nodes/table/sticky.js

@@ -25,8 +25,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _table = require("./table");
 
 var _injectProps = require("../../utils/inject-props");
@@ -42,7 +40,7 @@ var modeSpecficStyles = {
 }; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(_colors.N40A), ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 var FixedTableDiv = function FixedTableDiv(props) {

package/dist/cjs/ui/Renderer/index.js

@@ -102,7 +102,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "105.0.0";
+var packageVersion = "105.0.2";
 
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/cjs/ui/Renderer/style.js

@@ -21,8 +21,6 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -100,7 +98,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, (0, _tokens.token)('color.border.focused', colors.B300), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 };
 
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
@@ -131,41 +129,41 @@ var rendererStyles = function rendererStyles(wrapperProps) {
       theme: theme
     };
     return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
-      light: (0, _tokens.token)('color.text', colors.N800),
-      dark: (0, _tokens.token)('color.text', '#B8C7E0')
-    })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), (0, _tokens.token)('color.link', colors.B400), (0, _tokens.token)('color.link', colors.B300), (0, _tokens.token)('color.link.pressed', colors.B500), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral', colors.N30A),
-      dark: (0, _tokens.token)('color.background.neutral', colors.DN70)
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, #B8C7E0)"
+    })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+      light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), (0, _constants.borderRadius)(), (0, _components.themed)({
-      light: (0, _tokens.token)('color.text', colors.N800),
-      dark: (0, _tokens.token)('color.text', colors.DN600)
-    })(themeProps), (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.text.danger', colors.R500), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbar),
-      dark: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbarDark)
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, ".concat(colors.DN600, ")")
+    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+      light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
+      dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), _editorSharedStyles.akEditorTableNumberColumnWidth, (0, _components.themed)({
-      light: (0, _tokens.token)('color.text.subtlest', colors.N200),
-      dark: (0, _tokens.token)('color.text.subtlest', colors.DN400)
+      light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
+      dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
     })(themeProps), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbar),
-      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbarDark)
+      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
+      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbar),
-      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbarDark)
+      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
+      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };

package/dist/cjs/ui/Renderer/truncated-wrapper.js

@@ -23,8 +23,6 @@ var _react = require("@emotion/react");
 
 var _react2 = require("react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -32,7 +30,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, (0, _tokens.token)('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)'), backgroundColor);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", backgroundColor);
 };
 
 var FadeOut = function FadeOut(props) {
@@ -67,7 +65,7 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
           _this$props$fadeHeigh = _this$props.fadeHeight,
           fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
           _this$props$backgroun = _this$props.backgroundColor,
-          backgroundColor = _this$props$backgroun === void 0 ? (0, _tokens.token)('elevation.surface', 'white') : _this$props$backgroun,
+          backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, white)" : _this$props$backgroun,
           children = _this$props.children;
       return (0, _react.jsx)(FadeOut, {
         height: height,

package/dist/cjs/ui/SortingIcon.js

@@ -23,8 +23,6 @@ var _messages = require("../messages");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _consts = require("../consts");
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -39,12 +37,12 @@ exports.StatusClassNames = StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (exports.StatusClassNames = StatusClassNames = {}));
 
-var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), (0, _tokens.token)('color.border', '#fff'), (0, _constants.gridSize)() / 2, (0, _tokens.token)('elevation.surface.overlay', _colors.N20), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N30), (0, _tokens.token)('elevation.surface.overlay.pressed', 'rgba(179, 212, 255, 0.6)'), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", (0, _constants.gridSize)() / 2, "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON); // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
 // The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
 // For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
 
-var iconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), (0, _tokens.token)('color.icon', '#42526E'), (0, _tokens.token)('color.icon', '#42526E'));
+var iconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), "var(--ds-icon, #42526E)", "var(--ds-icon, #42526E)");
 
 var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
   var activated = sortOrdered !== _types.SortOrder.NO_ORDER;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "105.0.0",
+	"version": "105.0.2",
 	"sideEffects": false
 }

package/dist/es2019/react/marks/link.js

@@ -7,17 +7,16 @@ import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { token } from '@atlaskit/tokens';
 const anchorStyles = css`
-  color: ${token('color.link', B400)};
+  color: ${`var(--ds-link, ${B400})`};
 
   &:hover {
-    color: ${token('color.link', B300)};
+    color: ${`var(--ds-link, ${B300})`};
     text-decoration: underline;
   }
 
   &:active {
-    color: ${token('color.link.pressed', B500)};
+    color: ${`var(--ds-link-pressed, ${B500})`};
   }
 `;
 export default function Link(props) {

package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -6,13 +6,12 @@ import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CopyButton from '../../codeBlockCopyButton';
-import { token } from '@atlaskit/tokens';
 
 const codeBlockStyleOverrides = props => css`
     tab-size: 4;
     background-color: ${themed({
-  light: token('elevation.surface.raised', N20),
-  dark: token('elevation.surface.raised', DN50)
+  light: `var(--ds-surface-raised, ${N20})`,
+  dark: `var(--ds-surface-raised, ${DN50})`
 })(props)};
 
     ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
@@ -20,8 +19,8 @@ const codeBlockStyleOverrides = props => css`
       line-height: 1.5rem;
       background-image: ${overflowShadow({
   background: themed({
-    light: token('color.background.neutral', N20),
-    dark: token('color.background.neutral', DN50)
+    light: `var(--ds-background-neutral, ${N20})`,
+    dark: `var(--ds-background-neutral, ${DN50})`
   })(props),
   leftCoverWidth: `${gridSize() * 3}px`
 })};

package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -47,12 +47,14 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
     css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
+  }, jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
   }, textRows.map((_, index) => jsx("span", {
     key: index
   }))), jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
-  }, jsx("code", null, renderBidiWarnings(text)))));
+  }, jsx("code", null, renderBidiWarnings(text))))));
 });
 export default LightWeightCodeBlock;

package/dist/es2019/react/nodes/codeBlockCopyButton.js

@@ -8,7 +8,6 @@ import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
-import { token } from '@atlaskit/tokens';
 const copyButtonWrapperStyles = css`
   display: flex;
   position: sticky;
@@ -26,28 +25,28 @@ const copyButtonWrapperStyles = css`
     padding: 2px;
     opacity: 0;
     transition: opacity 0.2s ease 0s;
-    border: 2px solid ${token('color.border', '#fff')};
+    border: 2px solid ${"var(--ds-border, #fff)"};
     border-radius: 4px;
-    background-color: ${token('elevation.surface.overlay', N20)};
-    color: ${token('color.text', 'rgb(66, 82, 110)')} !important;
+    background-color: ${`var(--ds-surface-overlay, ${N20})`};
+    color: ${"var(--ds-text, rgb(66, 82, 110))"} !important;
   }
 
   button:hover {
-    border: 2px solid ${token('color.border', 'transparent')};
-    background-color: ${token('elevation.surface.overlay.hovered', N30)};
+    border: 2px solid ${"var(--ds-border, transparent)"};
+    background-color: ${`var(--ds-surface-overlay-hovered, ${N30})`};
   }
 
   button:active {
-    border: 2px solid ${token('color.border', 'transparent')};
-    background-color: ${token('elevation.surface.overlay.pressed', N30)};
+    border: 2px solid ${"var(--ds-border, transparent)"};
+    background-color: ${`var(--ds-surface-overlay-pressed, ${N30})`};
   }
 
   button.clicked {
-    background-color: ${token('elevation.surface.overlay', N700)};
-    color: ${token('color.text', '#fff')} !important;
+    background-color: ${`var(--ds-surface-overlay, ${N700})`};
+    color: ${"var(--ds-text, #fff)"} !important;
   }
   button.clicked:hover {
-    background-color: ${token('elevation.surface.overlay.hovered', N700)};
+    background-color: ${`var(--ds-surface-overlay-hovered, ${N700})`};
   }
 `;
 

package/dist/es2019/react/nodes/heading-anchor.js

@@ -9,7 +9,6 @@ import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
-import { token } from '@atlaskit/tokens';
 export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -26,7 +25,7 @@ const copyAnchorButtonStyles = css`
   outline: none;
   background-color: transparent;
   border: none;
-  color: ${token('color.icon', N500)};
+  color: ${`var(--ds-icon, ${N500})`};
   cursor: pointer;
   right: 0;
 `;
@@ -83,7 +82,7 @@ class HeadingAnchor extends React.PureComponent {
       }, jsx(LinkIcon, {
         label: this.getCopyAriaLabel(),
         size: this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: this.state.isClicked ? token('color.icon.selected', B400) : token('color.icon.subtle', N200)
+        primaryColor: this.state.isClicked ? `var(--ds-icon-selected, ${B400})` : `var(--ds-icon-subtle, ${N200})`
       }));
     });
   }

package/dist/es2019/react/nodes/table/sticky.js

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
@@ -36,9 +35,9 @@ const fixedTableDivStaticStyles = (top, width) => css`
   }
 
   border-top: ${tableStickyPadding}px solid
-    ${token('elevation.surface', 'white')};
-  background: ${token('elevation.surface.overlay', 'white')};
-  box-shadow: ${token('elevation.shadow.overflow', `0 6px 4px -4px ${N40A}`)};
+    ${"var(--ds-surface, white)"};
+  background: ${"var(--ds-surface-overlay, white)"};
+  box-shadow: ${`var(--ds-shadow-overflow, ${`0 6px 4px -4px ${N40A}`})`};
 
   div[data-expanded='false'] & {
     display: none;

package/dist/es2019/ui/Renderer/index.js

@@ -36,7 +36,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "105.0.0";
+const packageVersion = "105.0.2";
 export class Renderer extends PureComponent {
   /**
    * This is used in measuring the Renderer Mount time and is then

package/dist/es2019/ui/Renderer/style.js

@@ -3,7 +3,6 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -218,7 +217,7 @@ const tableSortableColumnStyle = ({
             outline: unset;
           }
           &:focus-visible {
-            border-color: ${token('color.border.focused', colors.B300)};
+            border-color: ${`var(--ds-border-focused, ${colors.B300})`};
           }
         }
 
@@ -297,8 +296,8 @@ export const rendererStyles = wrapperProps => theme => {
       font-size: ${editorFontSize(themeProps)}px;
       line-height: 1.5rem;
       color: ${themed({
-    light: token('color.text', colors.N800),
-    dark: token('color.text', '#B8C7E0')
+    light: `var(--ds-text, ${colors.N800})`,
+    dark: "var(--ds-text, #B8C7E0)"
   })(themeProps)};
 
       .${RendererCssClassName.DOCUMENT}::after {
@@ -340,16 +339,16 @@ export const rendererStyles = wrapperProps => theme => {
       }
 
       & span.akActionMark {
-        color: ${token('color.link', colors.B400)};
+        color: ${`var(--ds-link, ${colors.B400})`};
         text-decoration: none;
 
         &:hover {
-          color: ${token('color.link', colors.B300)};
+          color: ${`var(--ds-link, ${colors.B300})`};
           text-decoration: underline;
         }
 
         &:active {
-          color: ${token('color.link.pressed', colors.B500)};
+          color: ${`var(--ds-link-pressed, ${colors.B500})`};
         }
       }
 
@@ -386,13 +385,13 @@ export const rendererStyles = wrapperProps => theme => {
 
       & span.date-node {
         background: ${themed({
-    light: token('color.background.neutral', colors.N30A),
-    dark: token('color.background.neutral', colors.DN70)
+    light: `var(--ds-background-neutral, ${colors.N30A})`,
+    dark: `var(--ds-background-neutral, ${colors.DN70})`
   })(themeProps)};
         border-radius: ${borderRadius()}px;
         color: ${themed({
-    light: token('color.text', colors.N800),
-    dark: token('color.text', colors.DN600)
+    light: `var(--ds-text, ${colors.N800})`,
+    dark: `var(--ds-text, ${colors.DN600})`
   })(themeProps)};
         padding: 2px 4px;
         margin: 0 1px;
@@ -400,8 +399,8 @@ export const rendererStyles = wrapperProps => theme => {
       }
 
       & span.date-node-highlighted {
-        background: ${token('color.background.danger', colors.R50)};
-        color: ${token('color.text.danger', colors.R500)};
+        background: ${`var(--ds-background-danger, ${colors.R50})`};
+        color: ${`var(--ds-text-danger, ${colors.R500})`};
       }
 
       & .renderer-image {
@@ -531,19 +530,19 @@ export const rendererStyles = wrapperProps => theme => {
         table[data-number-column='true'] {
           .${RendererCssClassName.NUMBER_COLUMN} {
             background-color: ${themed({
-    light: token('color.background.neutral', akEditorTableToolbar),
-    dark: token('color.background.neutral', akEditorTableToolbarDark)
+    light: `var(--ds-background-neutral, ${akEditorTableToolbar})`,
+    dark: `var(--ds-background-neutral, ${akEditorTableToolbarDark})`
   })(themeProps)};
             border-right: 1px solid
               ${themed({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
+    light: `var(--ds-border, ${akEditorTableBorder})`,
+    dark: `var(--ds-border, ${akEditorTableBorderDark})`
   })(themeProps)};
             width: ${akEditorTableNumberColumnWidth}px;
             text-align: center;
             color: ${themed({
-    light: token('color.text.subtlest', colors.N200),
-    dark: token('color.text.subtlest', colors.DN400)
+    light: `var(--ds-text-subtlest, ${colors.N200})`,
+    dark: `var(--ds-text-subtlest, ${colors.DN400})`
   })(themeProps)};
             font-size: ${relativeFontSizeToBase16(fontSize())};
           }
@@ -562,13 +561,13 @@ export const rendererStyles = wrapperProps => theme => {
 
         border-right: 1px solid
           ${themed({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
+    light: `var(--ds-border, ${akEditorTableBorder})`,
+    dark: `var(--ds-border, ${akEditorTableBorderDark})`
   })(themeProps)};
         border-bottom: 1px solid
           ${themed({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
+    light: `var(--ds-border, ${akEditorTableBorder})`,
+    dark: `var(--ds-border, ${akEditorTableBorderDark})`
   })(themeProps)};
 
         /* this is to compensate for the table border */
@@ -594,20 +593,20 @@ export const rendererStyles = wrapperProps => theme => {
       .sticky td {
         box-shadow: 0px 1px
             ${themed({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
+    light: `var(--ds-border, ${akEditorTableBorder})`,
+    dark: `var(--ds-border, ${akEditorTableBorderDark})`
   })(themeProps)},
           0px -0.5px ${themed({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
+    light: `var(--ds-border, ${akEditorTableBorder})`,
+    dark: `var(--ds-border, ${akEditorTableBorderDark})`
   })(themeProps)},
           inset -1px 0px ${themed({
-    light: token('color.border', akEditorTableToolbar),
-    dark: token('color.border', akEditorTableToolbarDark)
+    light: `var(--ds-border, ${akEditorTableToolbar})`,
+    dark: `var(--ds-border, ${akEditorTableToolbarDark})`
   })(themeProps)},
           0px -1px ${themed({
-    light: token('color.border', akEditorTableToolbar),
-    dark: token('color.border', akEditorTableToolbarDark)
+    light: `var(--ds-border, ${akEditorTableToolbar})`,
+    dark: `var(--ds-border, ${akEditorTableToolbarDark})`
   })(themeProps)};
       }
 

package/dist/es2019/ui/Renderer/truncated-wrapper.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import { token } from '@atlaskit/tokens';
 
 const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
   position: relative;
@@ -15,7 +14,7 @@ const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
     left: 0;
     right: 0;
     background-image: linear-gradient(
-      ${token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)')},
+      ${"var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))"},
       ${backgroundColor}
     );
   }
@@ -45,7 +44,7 @@ export class TruncatedWrapper extends Component {
     const {
       height = 95,
       fadeHeight = 24,
-      backgroundColor = token('elevation.surface', 'white'),
+      backgroundColor = "var(--ds-surface, white)",
       children
     } = this.props;
     return jsx(FadeOut, {

package/dist/es2019/ui/SortingIcon.js

@@ -6,7 +6,6 @@ import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
-import { token } from '@atlaskit/tokens';
 import { RendererCssClassName } from '../consts';
 export let StatusClassNames;
 
@@ -25,19 +24,19 @@ const buttonStyles = css`
   margin: 6px;
   right: 0;
   top: 0;
-  border: 2px solid ${token('color.border', '#fff')};
+  border: 2px solid ${"var(--ds-border, #fff)"};
   border-radius: ${gridSize() / 2}px;
-  background-color: ${token('elevation.surface.overlay', N20)};
+  background-color: ${`var(--ds-surface-overlay, ${N20})`};
   justify-content: center;
   align-items: center;
   cursor: pointer;
 
   &:hover {
-    background-color: ${token('elevation.surface.overlay.hovered', N30)};
+    background-color: ${`var(--ds-surface-overlay-hovered, ${N30})`};
   }
 
   &:active {
-    background-color: ${token('elevation.surface.overlay.pressed', 'rgba(179, 212, 255, 0.6)')};
+    background-color: ${"var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))"};
   }
 
   &.${RendererCssClassName.SORTABLE_COLUMN_ICON}__not-allowed {
@@ -67,11 +66,11 @@ const iconStyles = css`
   height: 100%;
   width: 2px;
   border-radius: 50px;
-  background: ${token('color.icon', '#42526E')};
+  background: ${"var(--ds-icon, #42526E)"};
 
   &::before,
   &::after {
-    background: ${token('color.icon', '#42526E')};
+    background: ${"var(--ds-icon, #42526E)"};
     content: '';
     height: 2px;
     width: 6px;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "105.0.0",
+	"version": "105.0.2",
 	"sideEffects": false
 }

package/dist/esm/react/marks/link.js

@@ -10,8 +10,7 @@ import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { token } from '@atlaskit/tokens';
-var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), token('color.link', B400), token('color.link', B300), token('color.link.pressed', B500));
+var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), "var(--ds-link, ".concat(B400, ")"), "var(--ds-link, ".concat(B300, ")"), "var(--ds-link-pressed, ".concat(B500, ")"));
 export default function Link(props) {
   var href = props.href,
       target = props.target,

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -10,16 +10,15 @@ import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CopyButton from '../../codeBlockCopyButton';
-import { token } from '@atlaskit/tokens';
 
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    background-color: ", ";\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n    }\n  "])), themed({
-    light: token('elevation.surface.raised', N20),
-    dark: token('elevation.surface.raised', DN50)
+    light: "var(--ds-surface-raised, ".concat(N20, ")"),
+    dark: "var(--ds-surface-raised, ".concat(DN50, ")")
   })(props), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
     background: themed({
-      light: token('color.background.neutral', N20),
-      dark: token('color.background.neutral', DN50)
+      light: "var(--ds-background-neutral, ".concat(N20, ")"),
+      dark: "var(--ds-background-neutral, ".concat(DN50, ")")
     })(props),
     leftCoverWidth: "".concat(gridSize() * 3, "px")
   }));

package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -44,6 +44,8 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
+  }, jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
   }, textRows.map(function (_, index) {
@@ -52,6 +54,6 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
   })), jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
-  }, jsx("code", null, renderBidiWarnings(text)))));
+  }, jsx("code", null, renderBidiWarnings(text))))));
 });
 export default LightWeightCodeBlock;

package/dist/esm/react/nodes/codeBlockCopyButton.js

@@ -13,8 +13,7 @@ import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
-import { token } from '@atlaskit/tokens';
-var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), token('color.border', '#fff'), token('elevation.surface.overlay', N20), token('color.text', 'rgb(66, 82, 110)'), token('color.border', 'transparent'), token('elevation.surface.overlay.hovered', N30), token('color.border', 'transparent'), token('elevation.surface.overlay.pressed', N30), token('elevation.surface.overlay', N700), token('color.text', '#fff'), token('elevation.surface.overlay.hovered', N700));
+var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-text, rgb(66, 82, 110))", "var(--ds-border, transparent)", "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-border, transparent)", "var(--ds-surface-overlay-pressed, ".concat(N30, ")"), "var(--ds-surface-overlay, ".concat(N700, ")"), "var(--ds-text, #fff)", "var(--ds-surface-overlay-hovered, ".concat(N700, ")"));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

package/dist/esm/react/nodes/heading-anchor.js

@@ -27,7 +27,6 @@ import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
-import { token } from '@atlaskit/tokens';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -38,7 +37,7 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, re
     ref: ref
   }), children);
 });
-var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), token('color.icon', N500));
+var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), "var(--ds-icon, ".concat(N500, ")"));
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(HeadingAnchor, _React$PureComponent);
@@ -127,7 +126,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       }, jsx(LinkIcon, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? token('color.icon.selected', B400) : token('color.icon.subtle', N200)
+        primaryColor: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(B400, ")") : "var(--ds-icon-subtle, ".concat(N200, ")")
       }));
     });
 

package/dist/esm/react/nodes/table/sticky.js

@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
@@ -22,7 +21,7 @@ var modeSpecficStyles = {
 }; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, token('elevation.surface', 'white'), token('elevation.surface.overlay', 'white'), token('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(N40A), ")"), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 export var FixedTableDiv = function FixedTableDiv(props) {

package/dist/esm/ui/Renderer/index.js

@@ -50,7 +50,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "105.0.0";
+var packageVersion = "105.0.2";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
 

package/dist/esm/ui/Renderer/style.js

@@ -7,7 +7,6 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -71,7 +70,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, token('color.border.focused', colors.B300), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
 };
 
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
@@ -102,41 +101,41 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
       theme: theme
     };
     return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
-      light: token('color.text', colors.N800),
-      dark: token('color.text', '#B8C7E0')
-    })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), token('color.link', colors.B400), token('color.link', colors.B300), token('color.link.pressed', colors.B500), colors.placeholderText(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
-      light: token('color.background.neutral', colors.N30A),
-      dark: token('color.background.neutral', colors.DN70)
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, #B8C7E0)"
+    })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), colors.placeholderText(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
+      light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), borderRadius(), themed({
-      light: token('color.text', colors.N800),
-      dark: token('color.text', colors.DN600)
-    })(themeProps), token('color.background.danger', colors.R50), token('color.text.danger', colors.R500), gridSize() * 3, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
-      light: token('color.background.neutral', akEditorTableToolbar),
-      dark: token('color.background.neutral', akEditorTableToolbarDark)
+      light: "var(--ds-text, ".concat(colors.N800, ")"),
+      dark: "var(--ds-text, ".concat(colors.DN600, ")")
+    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), gridSize() * 3, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
+      light: "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"),
+      dark: "var(--ds-background-neutral, ".concat(akEditorTableToolbarDark, ")")
     })(themeProps), themed({
-      light: token('color.border', akEditorTableBorder),
-      dark: token('color.border', akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
     })(themeProps), akEditorTableNumberColumnWidth, themed({
-      light: token('color.text.subtlest', colors.N200),
-      dark: token('color.text.subtlest', colors.DN400)
+      light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
+      dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
     })(themeProps), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, themed({
-      light: token('color.border', akEditorTableBorder),
-      dark: token('color.border', akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
     })(themeProps), themed({
-      light: token('color.border', akEditorTableBorder),
-      dark: token('color.border', akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
     })(themeProps), akEditorStickyHeaderZIndex, themed({
-      light: token('color.border', akEditorTableBorder),
-      dark: token('color.border', akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
     })(themeProps), themed({
-      light: token('color.border', akEditorTableBorder),
-      dark: token('color.border', akEditorTableBorderDark)
+      light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+      dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
     })(themeProps), themed({
-      light: token('color.border', akEditorTableToolbar),
-      dark: token('color.border', akEditorTableToolbarDark)
+      light: "var(--ds-border, ".concat(akEditorTableToolbar, ")"),
+      dark: "var(--ds-border, ".concat(akEditorTableToolbarDark, ")")
     })(themeProps), themed({
-      light: token('color.border', akEditorTableToolbar),
-      dark: token('color.border', akEditorTableToolbarDark)
+      light: "var(--ds-border, ".concat(akEditorTableToolbar, ")"),
+      dark: "var(--ds-border, ".concat(akEditorTableToolbarDark, ")")
     })(themeProps), borderRadius(), blockNodesVerticalMargin, getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
   };
 };

package/dist/esm/ui/Renderer/truncated-wrapper.js

@@ -14,10 +14,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import { token } from '@atlaskit/tokens';
 
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)'), backgroundColor);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0))", backgroundColor);
 };
 
 var FadeOut = function FadeOut(props) {
@@ -53,7 +52,7 @@ export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
           _this$props$fadeHeigh = _this$props.fadeHeight,
           fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
           _this$props$backgroun = _this$props.backgroundColor,
-          backgroundColor = _this$props$backgroun === void 0 ? token('elevation.surface', 'white') : _this$props$backgroun,
+          backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, white)" : _this$props$backgroun,
           children = _this$props.children;
       return jsx(FadeOut, {
         height: height,

package/dist/esm/ui/SortingIcon.js

@@ -10,7 +10,6 @@ import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
-import { token } from '@atlaskit/tokens';
 import { RendererCssClassName } from '../consts';
 export var StatusClassNames;
 
@@ -21,12 +20,12 @@ export var StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (StatusClassNames = {}));
 
-var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), token('color.border', '#fff'), gridSize() / 2, token('elevation.surface.overlay', N20), token('elevation.surface.overlay.hovered', N30), token('elevation.surface.overlay.pressed', 'rgba(179, 212, 255, 0.6)'), RendererCssClassName.SORTABLE_COLUMN_ICON);
+var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", gridSize() / 2, "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
 var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, RendererCssClassName.SORTABLE_COLUMN_ICON); // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
 // The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
 // For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
 
-var iconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), token('color.icon', '#42526E'), token('color.icon', '#42526E'));
+var iconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 2px;\n  border-radius: 50px;\n  background: ", ";\n\n  &::before,\n  &::after {\n    background: ", ";\n    content: '';\n    height: 2px;\n    width: 6px;\n    position: absolute;\n    border-radius: 50px;\n  }\n\n  &::before {\n    transform: rotate(45deg) translate(3.4px, 8.5px);\n  }\n\n  &::after {\n    transform: rotate(-45deg) translate(-6.3px, 5.7px);\n  }\n"])), "var(--ds-icon, #42526E)", "var(--ds-icon, #42526E)");
 
 var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
   var activated = sortOrdered !== SortOrder.NO_ORDER;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "105.0.0",
+	"version": "105.0.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "105.0.0",
+  "version": "105.0.2",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/media-filmstrip": "^46.1.0",
     "@atlaskit/media-ui": "^22.2.0",
     "@atlaskit/media-viewer": "^47.3.0",
-    "@atlaskit/smart-card": "^23.10.0",
+    "@atlaskit/smart-card": "^23.11.0",
     "@atlaskit/status": "^1.2.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.2.0",
@@ -80,7 +80,7 @@
     "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^18.0.0",
+    "@atlaskit/profilecard": "^18.1.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/ssr": "*",