@atlaskit/editor-common 71.0.3 → 72.0.1

package/dist/es2019/i18n/languages.js

@@ -0,0 +1,34 @@
+/**
+ * NOTE:
+ *
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
+ */
+export default {
+  zh: 'Chinese (Simplified)',
+  zh_TW: 'Chinese (Traditional)',
+  cs: 'Czech',
+  da: 'Danish',
+  nl: 'Dutch',
+  en: 'English',
+  en_GB: 'English (United Kingdom)',
+  fi: 'Finnish',
+  fr: 'French',
+  de: 'German',
+  hu: 'Hungarian',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  nb: 'Norwegian Bokmål',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (Brazil)',
+  pt_PT: 'Portuguese (Portugal)',
+  ru: 'Russian',
+  sk: 'Slovak',
+  es: 'Spanish',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
+};

package/dist/es2019/keymaps/index.js

@@ -2,7 +2,6 @@
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { browser } from '../utils';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 export const toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
@@ -75,7 +74,7 @@ const arrowKeysMap = {
 };
 const tooltipShortcutStyle = css`
   border-radius: 2px;
-  background-color: ${token('color.background.inverse.subtle', N400)};
+  background-color: ${`var(--ds-background-inverse-subtle, ${N400})`};
   padding: 0 2px;
 
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
@@ -144,6 +143,53 @@ export function findShortcutByKeymap(keymap) {
 
   return keymap.windows;
 }
+export function getAriaKeyshortcuts(keymap) {
+  let keyShortcuts;
+
+  if (typeof keymap === 'string') {
+    keyShortcuts = keymap;
+  } else if (typeof keymap === 'object') {
+    keyShortcuts = keymap[browser.mac ? 'mac' : 'windows'];
+  }
+
+  if (keyShortcuts) {
+    return keyShortcuts.toLowerCase().split('-').map(modifier => {
+      switch (modifier) {
+        case 'cmd':
+          return 'Meta';
+
+        case 'ctrl':
+          return 'Control';
+
+        case 'alt':
+          return 'Alt';
+
+        case 'shift':
+          return 'Shift';
+
+        case 'enter':
+          return 'Enter';
+
+        case 'esc':
+          return 'Esc';
+
+        case 'tab':
+          return 'Tab';
+
+        case 'space':
+          return 'Space';
+
+        case 'backspace':
+          return 'Backspace';
+
+        default:
+          return modifier.split('').join(' ');
+      }
+    }).join('+');
+  } else {
+    return undefined;
+  }
+}
 const ALL = [toggleOrderedList, toggleBulletList, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleBlockQuote, insertNewLine, insertRule, splitCodeBlock, splitListItem, redo, undo, find, escape, enter, shiftEnter];
 export function makeKeymap(description, windows, mac, common) {
   return {

package/dist/es2019/styles/index.js

@@ -9,7 +9,7 @@ export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';
 export { linkSharedStyle } from './shared/link';
-export { listsSharedStyles, listPaddingLeftMarkerSpace } from './shared/lists';
+export { listsSharedStyles, listItemCounterPadding, getOrderedListInlineStyles } from './shared/lists';
 export { indentationSharedStyles } from './shared/indentation';
 export { blockMarksSharedStyles } from './shared/block-marks';
 export { codeMarkSharedStyles } from './shared/code-mark';

package/dist/es2019/styles/shared/annotation.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export const annotationPrefix = 'ak-editor-annotation';
 export const AnnotationSharedClassNames = {
   focus: `${annotationPrefix}-focus`,
@@ -15,38 +14,35 @@ const Y200a = 'rgba(255, 196, 0, 0.82)';
 const DY75a = 'rgba(111, 92, 37, 0.5)';
 const DY200 = '#82641c';
 export const AnnotationSharedCSSByState = props => ({
-  /* eslint-disable */
   focus: css`
     // Background is not coming through in confluence, suspecting to be caused by some specific combination of
     // emotion and token look up
 
     background: ${themed({
-    light: Y75,
-    dark: DY75
+    light: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+    dark: `var(--ds-background-accent-yellow-subtler, ${DY75})`
   })(props)};
     border-bottom: 2px solid
       ${themed({
-    light: token('color.border.accent.yellow', Y300),
-    dark: token('color.border.accent.yellow', DY300)
+    light: `var(--ds-border-accent-yellow, ${Y300})`,
+    dark: `var(--ds-border-accent-yellow, ${DY300})`
   })(props)};
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
-    box-shadow: ${token('elevation.shadow.overlay', `1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`)};
+    box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
     cursor: pointer;
   `,
   blur: css`
     background: ${themed({
-    light: Y75a,
-    dark: DY75a
+    light: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
+    dark: `var(--ds-background-accent-yellow-subtlest, ${DY75a})`
   })(props)};
     border-bottom: 2px solid
       ${themed({
-    light: token('color.border.accent.yellow', Y200a),
-    dark: token('color.border.accent.yellow', DY200)
+    light: `var(--ds-border-accent-yellow, ${Y200a})`,
+    dark: `var(--ds-border-accent-yellow, ${DY200})`
   })(props)};
     cursor: pointer;
   `
-  /* eslint-enable */
-
 });
 export const annotationSharedStyles = props => css`
   .ProseMirror {

package/dist/es2019/styles/shared/block-marks.js

@@ -6,7 +6,14 @@ export const blockMarksSharedStyles = css`
    */
   *:not(.fabric-editor-block-mark) >,
   /* For nested block marks apart from those with indentation mark */
-  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type:not(.fabric-editor-indentation-mark),
+  *:not(.fabric-editor-block-mark) >
+    div.fabric-editor-block-mark:first-of-type
+    /* Do not remove the margin top for nodes inside indentation marks */
+      :not(.fabric-editor-indentation-mark)
+    /* Do not remove the margin top for nodes inside alignment marks */
+      :not(.fabric-editor-alignment),
+  // If first element inside a block node has alignment mark, then remove the margin-top
+  .fabric-editor-alignment:first-of-type:first-child,
   // If first document element has indentation mark remove margin-top
   .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {
     p,

package/dist/es2019/styles/shared/blockquote.js

@@ -1,13 +1,12 @@
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const blockquoteSharedStyles = css`
   & blockquote {
     box-sizing: border-box;
     padding-left: ${gridSize() * 2}px;
     border-left: 2px solid
-      ${token('color.border', akEditorBlockquoteBorderColor)};
+      ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`};
     margin: ${blockNodesVerticalMargin} 0 0 0;
     margin-right: 0;
 

package/dist/es2019/styles/shared/code-block.js

@@ -3,7 +3,6 @@ import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth,
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -16,7 +15,7 @@ export const CodeBlockSharedCssClassName = {
 export const codeBlockSharedStyles = props => css`
   .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
     position: relative;
-    background-color: ${token('elevation.surface.raised', 'transparent')};
+    background-color: ${"var(--ds-surface-raised, transparent)"};
     border-radius: ${borderRadius()}px;
     margin: ${blockNodesVerticalMargin} 0 0 0;
     font-family: ${akEditorCodeFontFamily};
@@ -46,8 +45,8 @@ export const codeBlockSharedStyles = props => css`
 
     .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
       background-color: ${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)};
       display: flex;
       border-radius: ${borderRadius()}px;
@@ -56,19 +55,20 @@ export const codeBlockSharedStyles = props => css`
       overflow-x: auto;
 
       background-image: ${overflowShadow({
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
   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),
-  width: '8px'
+  leftCoverWidth: `${gridSize() * 3}px`
 })};
 
       background-repeat: no-repeat;
-      background-attachment: local, local, local, local, scroll, scroll;
-      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,
-        8px 100%;
-      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;
+      background-attachment: local, local, local, local, scroll, scroll, scroll,
+        scroll;
+      background-size: ${gridSize() * 3}px 100%, ${gridSize() * 3}px 100%,
+        ${gridSize()}px 100%, ${gridSize()}px 100%, ${gridSize()}px 100%,
+        1px 100%, ${gridSize()}px 100%, 1px 100%;
+      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;
 
       /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
       overflow-y: hidden;
@@ -78,8 +78,8 @@ export const codeBlockSharedStyles = props => css`
       flex-shrink: 0;
       text-align: right;
       background-color: ${themed({
-  light: token('color.background.neutral', N30),
-  dark: token('color.background.neutral', DN20)
+  light: `var(--ds-background-neutral, ${N30})`,
+  dark: `var(--ds-background-neutral, ${DN20})`
 })(props)};
       padding: ${gridSize()}px;
       position: relative;
@@ -94,8 +94,8 @@ export const codeBlockSharedStyles = props => css`
           content: counter(line);
           counter-increment: line;
           color: ${themed({
-  light: token('color.text.subtlest', N400),
-  dark: token('color.text.subtlest', DN400)
+  light: `var(--ds-text-subtlest, ${N400})`,
+  dark: `var(--ds-text-subtlest, ${DN400})`
 })(props)};
           font-size: ${relativeFontSizeToBase16(fontSize())};
           line-height: 1.5rem;
@@ -112,8 +112,8 @@ export const codeBlockSharedStyles = props => css`
         tab-size: 4;
         cursor: text;
         color: ${themed({
-  light: token('color.text', N800),
-  dark: token('color.text', DN800)
+  light: `var(--ds-text, ${N800})`,
+  dark: `var(--ds-text, ${DN800})`
 })(props)};
         border-radius: ${borderRadius()}px;
         margin: ${gridSize()}px;

package/dist/es2019/styles/shared/code-mark.js

@@ -2,14 +2,13 @@ import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
 import { DN70, N30A } from '@atlaskit/theme/colors';
 import { getTheme, themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export const codeMarkSharedStyles = props => {
   const theme = getTheme(props);
   return css`
     .code {
       --ds--code--bg-color: ${themed({
-    light: token('color.background.neutral', N30A),
-    dark: token('color.background.neutral', DN70)
+    light: `var(--ds-background-neutral, ${N30A})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
   })(props)};
       ${getCodeStyles(theme)}
     }

package/dist/es2019/styles/shared/lists.js

@@ -1,14 +1,56 @@
 import { css } from '@emotion/react';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
 import browser from '../../utils/browser';
-export const listPaddingLeftMarkerSpace = 24;
+export const listItemCounterPadding = 24;
+var CSS_VAR_NAMES;
+
+(function (CSS_VAR_NAMES) {
+  CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
+})(CSS_VAR_NAMES || (CSS_VAR_NAMES = {}));
+
+const getItemCounterLeftPadding = itemCounterDigitsSize => {
+  // Previous padding-left was approximately 24px. We approximate that
+  // same value using "ch" units (which represent the width of a "0" digit
+  // character). We use "ch" so that this computed padding can now grow if
+  //  the font-size ever enlarges.
+  let paddingLeft = `2.385ch`;
+
+  if (itemCounterDigitsSize >= 3) {
+    // When there are 3 or more digits, we use a combination of "ch" units and
+    // pixel values so that while the computed padding grows if font-size ever
+    // enlarges, it doesn't over-scale with each digit (because of the fixed pixel
+    // portion of the computed value). This way, very large item counters will not
+    // become overly left-padded.
+    const fixedBasePx = 2;
+    paddingLeft = `calc(${itemCounterDigitsSize + 1}ch - ${fixedBasePx}px)`;
+  }
+
+  return paddingLeft;
+};
+
+const stringifyStyle = style => Object.entries(style).reduce((str, [key, value]) => `${str}${key}:${value};`, ``);
+
+export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
+  const style = {
+    [CSS_VAR_NAMES.ITEM_COUNTER_PADDING]: getItemCounterLeftPadding(itemCounterDigitsSize)
+  };
+
+  if (styleFormat === 'string') {
+    return stringifyStyle(style);
+  }
+
+  return style;
+}
 export const listsSharedStyles = css`
   /* =============== INDENTATION SPACING ========= */
 
   ul,
   ol {
     box-sizing: border-box;
-    padding-left: ${listPaddingLeftMarkerSpace}px;
+    padding-left: var(
+      ${CSS_VAR_NAMES.ITEM_COUNTER_PADDING},
+      ${listItemCounterPadding}px
+    );
 
     /*
     Firefox does not handle empty block element inside li tag.

package/dist/es2019/styles/shared/panel.js

@@ -1,24 +1,14 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-const tokenPanelColor = {
-  info: 'color.background.information',
-  note: 'color.background.discovery',
-  tip: 'color.background.success',
-  success: 'color.background.success',
-  warning: 'color.background.warning',
-  error: 'color.background.danger'
-};
-const lightPanelColor = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-
-  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+const lightPanelColors = {
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -88,36 +78,42 @@ export const darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
 const lightIconColor = {
-  info: token('color.icon.information', colors.B400),
-  note: token('color.icon.discovery', colors.P400),
-  tip: token('color.icon.success', colors.G400),
-  success: token('color.icon.success', colors.G400),
-  warning: token('color.icon.warning', colors.Y400),
-  error: token('color.icon.danger', colors.R400)
+  info: `var(--ds-icon-information, ${colors.B400})`,
+  note: `var(--ds-icon-discovery, ${colors.P400})`,
+  tip: `var(--ds-icon-success, ${colors.G400})`,
+  success: `var(--ds-icon-success, ${colors.G400})`,
+  warning: `var(--ds-icon-warning, ${colors.Y400})`,
+  error: `var(--ds-icon-danger, ${colors.R400})`
 };
 const darkIconColor = {
-  info: token('color.icon.information', colors.B100),
-  note: token('color.icon.discovery', colors.P100),
-  tip: token('color.icon.success', colors.G200),
-  success: token('color.icon.success', colors.G200),
-  warning: token('color.icon.warning', colors.Y100),
-  error: token('color.icon.danger', colors.R200)
+  info: `var(--ds-icon-information, ${colors.B100})`,
+  note: `var(--ds-icon-discovery, ${colors.P100})`,
+  tip: `var(--ds-icon-success, ${colors.G200})`,
+  success: `var(--ds-icon-success, ${colors.G200})`,
+  warning: `var(--ds-icon-warning, ${colors.Y100})`,
+  error: `var(--ds-icon-danger, ${colors.R200})`
+};
+const tokenDarkPanelColors = {
+  info: `var(--ds-background-information, ${darkPanelColors['info']})`,
+  note: `var(--ds-background-discovery, ${darkPanelColors['note']})`,
+  tip: `var(--ds-background-success, ${darkPanelColors['tip']})`,
+  success: `var(--ds-background-success, ${darkPanelColors['success']})`,
+  warning: `var(--ds-background-warning, ${darkPanelColors['warning']})`,
+  error: `var(--ds-background-danger, ${darkPanelColors['error']})`
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
 const panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
 const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+const panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]]; // used for custom panels
 
-const panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
 export const getPanelDarkColor = panelColor => {
   const colorObject = panelDarkModeColors.find(color => color[0] === panelColor || color[1] === panelColor);
   return colorObject ? colorObject[1] : darkPanelColors.B1200S;
-};
+}; // used for custom panels
+
 export const getPanelBackgroundDarkModeColors = panelDarkModeColors.map(([colorName, colorValue]) => getPanelDarkModeCSS(colorName, colorValue)).join('\n');
 export function getPanelDarkModeCSS(colorName, colorValue) {
   return `
@@ -171,7 +167,7 @@ const iconDynamicStyles = panelType => props => {
 
 
 export const getPanelTypeBackgroundNoTokens = (panelType, props = {}) => {
-  const light = lightPanelColor[panelType];
+  const light = lightPanelColors[panelType];
   const dark = darkPanelColors[panelType];
   const background = themed({
     light,
@@ -180,13 +176,9 @@ export const getPanelTypeBackgroundNoTokens = (panelType, props = {}) => {
   return background || 'none';
 };
 export const getPanelTypeBackground = (panelType, props = {}) => {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-  const light = token(tokenPanelColor[panelType], lightPanelColor[panelType]);
-  const dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+  const light = hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]); // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
 
+  const dark = tokenDarkPanelColors[panelType];
   const background = themed({
     light,
     dark

package/dist/es2019/styles/shared/rule.js

@@ -2,10 +2,9 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { DN50, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 const divider = themed({
-  light: token('color.border', N30A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N30A})`,
+  dark: `var(--ds-border, ${DN50})`
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 export const ruleSharedStyles = props => css`

package/dist/es2019/styles/shared/shadow.js

@@ -1,5 +1,4 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4116
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
@@ -41,7 +40,16 @@ const shadowSharedStyle = css`
   }
 
   & .${shadowClassNames.LEFT_SHADOW}::before {
-    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
+    background: linear-gradient(
+        to left,
+        transparent 0,
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 100%
+      ),
+      linear-gradient(
+        to right,
+        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
+        transparent 1px
+      );
     top: 0px;
     left: 0;
     display: block;
@@ -49,14 +57,20 @@ const shadowSharedStyle = css`
 
   & .${shadowClassNames.RIGHT_SHADOW}::after {
     background: linear-gradient(
-      to right,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
+        to right,
+        transparent 0,
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 100%
+      ),
+      linear-gradient(
+        to left,
+        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
+        transparent 1px
+      );
     left: calc(100% - ${shadowWidth}px);
     top: 0px;
     display: block;
   }
+
   & .${shadowObserverClassNames.SENTINEL_LEFT} {
     height: 100%;
     width: 0px;