@atlaskit/editor-core 166.0.3 → 167.0.1

package/dist/es2019/plugins/base/pm-plugins/inline-cursor-target.js

@@ -1,7 +1,7 @@
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_SPACE, browser } from '@atlaskit/editor-common/utils';
 import { isTextSelection } from '../../../utils';
 export const inlineCursorTargetStateKey = new PluginKey('inlineCursorTargetPlugin');
 export const isInlineNodeView = node => {
@@ -23,13 +23,35 @@ export default (() => {
         const {
           $from,
           $to
-        } = selection;
-
-        if (selection && isTextSelection(selection)) {
+        } = selection; // In Safari, if the cursor target is to the right of the cursor it will block selections
+        // made with shift + arrowRight and vice versa for shift + arrowLeft. This is due to a
+        // contenteditable bug in safari, where editable elements block the selection but we need
+        // the cursor target to be editable for the following:
+        // - Ability to navigate with down/up arrows when between inline nodes
+        // - Ability to navigate with down/up arrows when between the start of a paragraph & an inline node
+        // - Ability to click and drag to select an inline node if it is the first node
+        // To prevent blocking the selection, we check handleDOMEvents and add meta to
+        // the transaction to prevent the plugin from making cursor target decorations.
+
+        const safariShiftSelection = tr.getMeta(inlineCursorTargetStateKey);
+
+        if (selection && isTextSelection(selection) && !safariShiftSelection) {
           const hasInlineNodeViewAfter = isInlineNodeView($from.nodeAfter);
           const hasInlineNodeViewBefore = isInlineNodeView($from.nodeBefore);
-          const isAtStart = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
-          const isAtEnd = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore); // Create editable decoration widgets either side of the cursor to allow
+          const isAtStartAndInlineNodeViewAfter = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
+          const isAtEndAndInlineNodeViewBefore = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore);
+
+          const createWidget = side => {
+            const node = document.createElement('span');
+            node.contentEditable = 'true';
+            node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+            node.className = 'cursor-target';
+            return Decoration.widget(selection.from, node, {
+              raw: true,
+              side: side === 'left' ? -1 : 1,
+              key: 'inlineCursor'
+            });
+          }; // Create editable decoration widgets either side of the cursor to allow
           // text input.
           // We check beforeInput events below to prevent content
           // being added to the decorations.
@@ -40,18 +62,8 @@ export default (() => {
           // - positioned between the beginning of another node and an inline node (firefox)
           // - positioned between an inline node and the end of a node (chrome)
 
-          if ((hasInlineNodeViewAfter || isAtEnd) && (hasInlineNodeViewBefore || isAtStart)) {
-            const createWidget = side => {
-              const node = document.createElement('span');
-              node.contentEditable = 'true';
-              node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
-              return Decoration.widget(selection.from, node, {
-                raw: true,
-                side: side === 'left' ? -1 : 1,
-                key: 'inlineCursor'
-              });
-            };
 
+          if (!browser.safari && (hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
             return {
               cursorTarget: {
                 decorations: [createWidget('left'), createWidget('right')],
@@ -61,6 +73,34 @@ export default (() => {
                 }
               }
             };
+          } // Only create one widget on the left or right of the cursor in Safari.
+          // This is to prevent the left key from being blocked when at the start of a paragraph,
+          // and the right key from being blocked when at the end of a paragraph. This also
+          // improves click and drag selections, making it easier to select the first node.
+
+
+          if (browser.safari) {
+            if (isAtEndAndInlineNodeViewBefore || hasInlineNodeViewBefore && hasInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('left')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            } else if (isAtStartAndInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('right')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            }
           }
         }
 
@@ -87,6 +127,21 @@ export default (() => {
       },
 
       handleDOMEvents: {
+        // Workaround to prevent the decorations created by the plugin from
+        // blocking shift + arrow left/right selections in safari. When
+        // a shift + arrow left/right event is detected, send meta data to the
+        // plugin to prevent it from creating decorations.
+        // TODO We may be able to remove this when playing the following ticket:
+        // https://product-fabric.atlassian.net/browse/ED-14938
+        keydown: (view, event) => {
+          if (browser.safari && event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            view.dispatch(view.state.tr.setMeta(inlineCursorTargetStateKey, {
+              cursorTarget: undefined
+            }));
+          }
+
+          return false;
+        },
         // Check the DOM to see if there are inline cursor targets
         // after a composition event ends. If so, manually insert the
         // event data in order to prevent contents ending up inside

package/dist/es2019/plugins/block-type/commands/block-type.js

@@ -7,6 +7,7 @@ import { shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { withAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { filterChildrenBetween } from '../../../utils';
 import { PanelType } from '@atlaskit/adf-schema';
+import { CellSelection } from '@atlaskit/editor-tables';
 export function setBlockType(name) {
   return (state, dispatch) => {
     const {
@@ -48,16 +49,20 @@ export function setBlockTypeWithAnalytics(name, inputMethod) {
 export function setNormalText() {
   return function (state, dispatch) {
     const {
-      tr,
-      selection: {
-        $from,
-        $to
-      },
-      schema
+      selection,
+      schema,
+      tr
     } = state;
+    const ranges = selection instanceof CellSelection ? selection.ranges : [selection];
+    ranges.forEach(({
+      $from,
+      $to
+    }) => {
+      tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+    });
 
     if (dispatch) {
-      dispatch(tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph));
+      dispatch(tr);
     }
 
     return true;
@@ -109,18 +114,22 @@ export function setNormalTextWithAnalytics(inputMethod) {
 export function setHeading(level) {
   return function (state, dispatch) {
     const {
-      tr,
-      selection: {
-        $from,
-        $to
-      },
-      schema
+      selection,
+      schema,
+      tr
     } = state;
+    const ranges = selection instanceof CellSelection ? selection.ranges : [selection];
+    ranges.forEach(({
+      $from,
+      $to
+    }) => {
+      tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
+        level
+      });
+    });
 
     if (dispatch) {
-      dispatch(tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
-        level
-      }));
+      dispatch(tr);
     }
 
     return true;

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -3,9 +3,10 @@ import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '../../../../ui/styles';
+import { token } from '@atlaskit/tokens';
 export const blockTypeMenuItemStyle = (tagName, selected) => {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  const selectedStyle = selected ? `${tagName} { color: white !important; }` : '';
+  const selectedStyle = selected ? `${tagName} { color: ${token('color.text.inverse', 'white')} !important; }` : '';
   return themeProps => css`
     ${headingsSharedStyles(themeProps)};
     > {
@@ -26,5 +27,5 @@ export const keyboardShortcut = css`
   margin-left: 16px;
 `;
 export const keyboardShortcutSelect = css`
-  color: ${N400};
+  color: ${token('color.icon', N400)};
 `;

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import * as colors from '@atlaskit/theme/colors';
+import { B300, N300, N20A } from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -19,18 +19,14 @@ import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-const {
-  B300,
-  N300,
-  N20A
-} = colors;
+import { token } from '@atlaskit/tokens';
 const toolbarButtonWrapper = css`
   && button {
-    background: ${N20A};
-    color: ${N300};
+    background: ${token('color.background.neutral', N20A)};
+    color: ${token('color.icon', N300)};
     :hover {
-      background: ${B300};
-      color: white !important;
+      background: ${token('color.background.neutral.hovered', B300)};
+      color: ${token('color.icon', 'white')} !important;
     }
   }
 `;

package/dist/es2019/plugins/card/styles.js

@@ -46,7 +46,7 @@ export const smartCardStyles = css`
     .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
       cursor: pointer;
       &:hover {
-        background-color: ${N20};
+        background-color: ${token('color.background.neutral.subtle.hovered', N20)};
       }
     }
 

package/dist/es2019/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -15,7 +15,7 @@ const iconBoxStyles = css({
   width: ICON_HEIGHT,
   height: ICON_WIDTH,
   overflow: 'hidden',
-  border: '1px solid rgba(223, 225, 229, 0.5)'
+  border: `1px solid ${token('color.border', 'rgba(223, 225, 229, 0.5)')}`
   /* N60 at 50% */
   ,
   borderRadius: borderRadius(),
@@ -23,7 +23,7 @@ const iconBoxStyles = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  backgroundColor: token('color.background.default', 'white')
+  backgroundColor: token('elevation.surface', 'white')
 });
 const primitiveStyles = css({
   padding: '0.75rem',

package/dist/es2019/plugins/code-block/actions.js

@@ -101,5 +101,37 @@ export const resetCopiedState = (state, dispatch) => {
     }
   }
 
+  return true;
+};
+export const ignoreFollowingMutations = (state, dispatch) => {
+  const {
+    tr
+  } = state;
+  const ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(pluginKey, {
+    type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: true
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
+  return true;
+};
+export const resetShouldIgnoreFollowingMutations = (state, dispatch) => {
+  const {
+    tr
+  } = state;
+  const ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(pluginKey, {
+    type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: false
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
   return true;
 };

package/dist/es2019/plugins/code-block/nodeviews/code-block.js

@@ -1,7 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
+import { browser } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from 'prosemirror-model';
 import { codeBlockClassNames } from '../ui/class-names';
+import { resetShouldIgnoreFollowingMutations } from '../actions';
+import { getPluginState } from '../pm-plugins/main-state';
 const MATCH_NEWLINES = new RegExp('\n', 'g');
 
 const toDOM = node => ['div', {
@@ -51,6 +54,52 @@ export class CodeBlockView {
     this.ensureLineNumbers();
   }
 
+  updateDOMAndSelection(savedInnerHTML, newCursorPosition) {
+    var _this$dom;
+
+    if ((_this$dom = this.dom) !== null && _this$dom !== void 0 && _this$dom.childNodes && this.dom.childNodes.length > 1) {
+      var _contentView$childNod;
+
+      const contentView = this.dom.childNodes[1];
+
+      if ((contentView === null || contentView === void 0 ? void 0 : (_contentView$childNod = contentView.childNodes) === null || _contentView$childNod === void 0 ? void 0 : _contentView$childNod.length) > 0) {
+        const codeElement = contentView.firstChild;
+        codeElement.innerHTML = savedInnerHTML; // We need to set cursor for the DOM update
+
+        const textElement = [...codeElement.childNodes].find(child => child.nodeName === '#text');
+        const sel = window.getSelection();
+        const range = document.createRange();
+        range.setStart(textElement, newCursorPosition);
+        range.collapse(true);
+        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+        sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+      }
+    }
+  }
+
+  coalesceDOMElements() {
+    var _this$dom2;
+
+    if ((_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 && _this$dom2.childNodes && this.dom.childNodes.length > 1) {
+      const contentView = this.dom.childNodes[1];
+
+      if (contentView !== null && contentView !== void 0 && contentView.childNodes && contentView.childNodes.length > 1) {
+        let savedInnerHTML = '';
+
+        while (contentView.childNodes.length > 1) {
+          const lastChild = contentView.lastChild;
+          savedInnerHTML = lastChild.innerHTML + savedInnerHTML;
+          contentView.removeChild(lastChild);
+        }
+
+        const firstChild = contentView.firstChild;
+        savedInnerHTML = firstChild.innerHTML + '\n' + savedInnerHTML;
+        const newCursorPosition = firstChild.innerHTML.length + 1;
+        setTimeout(this.updateDOMAndSelection.bind(this, savedInnerHTML, newCursorPosition), 20);
+      }
+    }
+  }
+
   update(node) {
     if (node.type !== this.node.type) {
       return false;
@@ -63,13 +112,24 @@ export class CodeBlockView {
 
       this.node = node;
       this.ensureLineNumbers();
+
+      if (browser.android) {
+        this.coalesceDOMElements();
+        resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
+      }
     }
 
     return true;
   }
 
   ignoreMutation(record) {
-    // Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
+    const pluginState = getPluginState(this.view.state);
+
+    if (pluginState !== null && pluginState !== void 0 && pluginState.shouldIgnoreFollowingMutations) {
+      return true;
+    } // Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
+
+
     return record.target === this.lineNumberGutter || record.target.parentNode === this.lineNumberGutter;
   }
 

package/dist/es2019/plugins/code-block/pm-plugins/actions.js

@@ -1,3 +1,4 @@
 export const ACTIONS = {
-  SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD'
+  SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
+  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS'
 };

package/dist/es2019/plugins/code-block/pm-plugins/main.js

@@ -1,4 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from 'prosemirror-state';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBlockNodeView } from '../nodeviews/code-block';
@@ -6,6 +7,7 @@ import { highlightingCodeBlockNodeView } from '../nodeviews/highlighting-code-bl
 import { createSelectionClickHandler } from '../../selection/utils';
 import { pluginKey } from '../plugin-key';
 import { ACTIONS } from './actions';
+import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { findCodeBlock } from '../utils';
 import { codeBlockClassNames } from '../ui/class-names';
 import { getFeatureFlags } from '../../feature-flags-context';
@@ -22,12 +24,39 @@ export const createPlugin = ({
 
   if (allowCompositionInputOverride) {
     handleDOMEvents.beforeinput = (view, event) => {
-      if (event.composed && // insertParagraph will be the input type when the enter key is pressed.
-      event.inputType === 'insertParagraph' && findCodeBlock(view.state, view.state.selection)) {
+      const keyEvent = event;
+      const eventInputType = keyEvent.inputType;
+      const eventText = keyEvent.data;
+
+      if (browser.ios && event.composed && // insertParagraph will be the input type when the enter key is pressed.
+      eventInputType === 'insertParagraph' && findCodeBlock(view.state, view.state.selection)) {
         event.preventDefault();
+        return true;
+      } else if (browser.android && event.composed && eventInputType === 'insertCompositionText' && eventText[(eventText === null || eventText === void 0 ? void 0 : eventText.length) - 1] === '\n' && findCodeBlock(view.state, view.state.selection)) {
+        const resultingText = event.target.outerText + '\n';
+
+        if (resultingText.endsWith(eventText)) {
+          // End of paragraph
+          setTimeout(() => {
+            view.someProp('handleKeyDown', f => f(view, new KeyboardEvent('keydown', {
+              bubbles: true,
+              cancelable: true,
+              key: 'Enter',
+              code: 'Enter'
+            })));
+          }, 0);
+        } else {
+          // Middle of paragraph, end of line
+          ignoreFollowingMutations(view.state, view.dispatch);
+        }
+
         return true;
       }
 
+      if (browser.android) {
+        resetShouldIgnoreFollowingMutations(view.state, view.dispatch);
+      }
+
       return false;
     };
   }
@@ -39,7 +68,8 @@ export const createPlugin = ({
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
-          isNodeSelected: false
+          isNodeSelected: false,
+          shouldIgnoreFollowingMutations: false
         };
       },
 
@@ -59,6 +89,10 @@ export const createPlugin = ({
           return { ...pluginState,
             contentCopied: meta.data
           };
+        } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS) {
+          return { ...pluginState,
+            shouldIgnoreFollowingMutations: meta.data
+          };
         }
 
         return pluginState;

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

@@ -2,13 +2,15 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { blockNodesVerticalMargin, akEditorTableCellMinWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorCodeFontFamily, akEditorSelectedNodeClassName, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 export const highlightingCodeBlockStyles = props => css`
   .ProseMirror .code-block {
     position: relative;
     background-image: ${overflowShadow({
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   background: themed({
     light: colors.N20,
     dark: colors.DN50
@@ -17,8 +19,8 @@ export const highlightingCodeBlockStyles = props => css`
 })};
     background-repeat: no-repeat;
     background-color: ${themed({
-  light: colors.N20,
-  dark: colors.DN50
+  light: token('color.background.neutral', colors.N20),
+  dark: token('color.background.neutral', colors.DN50)
 })(props)};
 
     --ds--code--bg-color: transparent;
@@ -40,13 +42,13 @@ export const highlightingCodeBlockStyles = props => css`
       flex-shrink: 0;
       text-align: right;
       background-color: ${themed({
-  light: colors.N30,
-  dark: colors.DN20
+  light: token('color.background.neutral', colors.N30),
+  dark: token('color.background.neutral', colors.DN20)
 })(props)};
       padding: ${gridSize()}px;
       color: ${themed({
-  light: colors.N90,
-  dark: colors.DN90
+  light: token('color.text.subtlest', colors.N90),
+  dark: token('color.text.subtlest', colors.DN90)
 })(props)};
 
       span {
@@ -61,8 +63,8 @@ export const highlightingCodeBlockStyles = props => css`
           font-size: ${relativeFontSizeToBase16(fontSize())};
           line-height: 1.5rem;
           color: ${themed({
-  light: colors.N400,
-  dark: colors.DN400
+  light: token('color.text.subtle', colors.N400),
+  dark: token('color.text.subtle', colors.DN400)
 })(props)};
         }
       }
@@ -115,8 +117,8 @@ export const highlightingCodeBlockStyles = props => css`
         > code:not([data-language='plaintext']):not([data-language='none']):not([data-language='']) {
           color: transparent;
           caret-color: ${themed({
-  light: colors.N800,
-  dark: colors.DN500
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.DN500)
 })(props)};
         }
       }
@@ -137,7 +139,7 @@ export const highlightingCodeBlockStyles = props => css`
       ${token('color.border.danger', akEditorDeleteBorder)};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${colors.R75};
+      background-color: ${token('color.blanket.danger', colors.R75)};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
@@ -149,12 +151,12 @@ export const highlightingCodeBlockStyles = props => css`
   /* Danger when nested node */
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
-      background-color: rgba(255, 143, 115, 0.5);
+      background-color: ${token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)')};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: rgba(255, 189, 173, 0.5);
+      background-color: ${token('color.background.danger', 'rgba(255, 189, 173, 0.5)')};
     }
   }
 `;
@@ -162,6 +164,8 @@ export const codeBlockStyles = props => css`
   .ProseMirror .code-block {
     position: relative;
     background-image: ${overflowShadow({
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   background: themed({
     light: colors.N20,
     dark: colors.DN50
@@ -173,8 +177,8 @@ export const codeBlockStyles = props => css`
 
     background-repeat: no-repeat;
     background-color: ${themed({
-  light: colors.N20,
-  dark: colors.DN50
+  light: token('color.background.neutral', colors.N20),
+  dark: token('color.background.neutral', colors.DN50)
 })(props)};
     background-attachment: local, scroll, scroll;
     background-size: 8px 100%, 8px 100%, 8px 100%;
@@ -193,8 +197,8 @@ export const codeBlockStyles = props => css`
       flex-shrink: 0;
       text-align: right;
       background-color: ${themed({
-  light: colors.N30,
-  dark: colors.DN20
+  light: token('color.background.neutral', colors.N30),
+  dark: token('color.background.neutral', colors.DN20)
 })(props)};
       padding: ${gridSize()}px;
 
@@ -210,8 +214,8 @@ export const codeBlockStyles = props => css`
           font-size: ${relativeFontSizeToBase16(fontSize())};
           line-height: 1.5rem;
           color: ${themed({
-  light: colors.N400,
-  dark: colors.DN400
+  light: token('color.text', colors.N400),
+  dark: token('color.text', colors.DN400)
 })(props)};
         }
       }
@@ -229,8 +233,8 @@ export const codeBlockStyles = props => css`
         font-size: ${relativeFontSizeToBase16(fontSize())};
         line-height: 1.5rem;
         color: ${themed({
-  light: colors.N800,
-  dark: colors.DN800
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.DN800)
 })(props)};
         border-radius: ${borderRadius()}px;
         margin: ${gridSize()}px;
@@ -249,11 +253,10 @@ export const codeBlockStyles = props => css`
 
   /* Danger when top level node */
   .ProseMirror .danger.code-block {
-    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-      ${token('color.border.danger', akEditorDeleteBorder)};
+    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${colors.R75};
+      background-color: ${token('color.blanket.danger', colors.R75)};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
@@ -265,12 +268,12 @@ export const codeBlockStyles = props => css`
   /* Danger when nested node */
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
-      background-color: rgba(255, 143, 115, 0.5);
+      background-color: ${token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)')};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: rgba(255, 189, 173, 0.5);
+      background-color: ${token('color.background.danger', 'rgba(255, 189, 173, 0.5)')};
     }
   }
 `;