@atlaskit/editor-common 92.1.1 → 93.0.0

package/dist/cjs/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -6,77 +6,75 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.panelDarkModeBackgroundPalette = exports.panelBackgroundPalette = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _theme = require("@atlaskit/theme");
 var _panel = require("../../../panel");
 var _common = require("./common");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var panelBackgroundPalette = exports.panelBackgroundPalette = [{
   label: 'White',
-  value: _theme.colors.N0
+  value: '#FFFFFF'
 }, {
   label: 'Light blue',
-  value: _theme.colors.B50
+  value: '#DEEBFF'
 }, {
   label: 'Light teal',
-  value: _theme.colors.T50
+  value: '#E6FCFF'
 }, {
   label: 'Light green',
-  value: _theme.colors.G50
+  value: '#E3FCEF'
 }, {
   label: 'Light yellow',
-  value: _theme.colors.Y50
+  value: '#FFFAE6'
 }, {
   label: 'Light red',
-  value: _theme.colors.R50
+  value: '#FFEBE6'
 }, {
   label: 'Light purple',
-  value: _theme.colors.P50
+  value: '#EAE6FF'
 }, {
   label: 'Light gray',
-  value: _theme.colors.N20
+  value: '#F4F5F7'
 }, {
   label: 'Blue',
-  value: _theme.colors.B75
+  value: '#B3D4FF'
 }, {
   label: 'Teal',
-  value: _theme.colors.T75
+  value: '#B3F5FF'
 }, {
   label: 'Green',
-  value: _theme.colors.G75
+  value: '#ABF5D1'
 }, {
   label: 'Yellow',
-  value: _theme.colors.Y75
+  value: '#FFF0B3'
 }, {
   label: 'Red',
-  value: _theme.colors.R75
+  value: '#FFBDAD'
 }, {
   label: 'Purple',
-  value: _theme.colors.P75
+  value: '#C0B6F2'
 }, {
   label: 'Gray',
-  value: _theme.colors.N60
+  value: '#B3BAC5'
 }, {
   label: 'Dark blue',
-  value: _theme.colors.B100
+  value: '#4C9AFF'
 }, {
   label: 'Dark teal',
-  value: _theme.colors.T100
+  value: '#79E2F2'
 }, {
   label: 'Dark green',
-  value: _theme.colors.G200
+  value: '#57D9A3'
 }, {
   label: 'Dark yellow',
-  value: _theme.colors.Y200
+  value: '#FFC400'
 }, {
   label: 'Dark red',
-  value: _theme.colors.R100
+  value: '#FF8F73'
 }, {
   label: 'Dark purple',
-  value: _theme.colors.P100
+  value: '#998DD9'
 }].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
     border: "var(--ds-border, ".concat(_common.DEFAULT_BORDER_COLOR, ")")

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _chromatism = _interopRequireDefault(require("chromatism"));
 var _reactIntlNext = require("react-intl-next");
-var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _Color = _interopRequireDefault(require("./Color"));
 var _getColorMessage = _interopRequireDefault(require("./Palettes/getColorMessage"));
@@ -35,7 +34,7 @@ function getCheckMarkColor(color, useIconToken) {
   var colorValue = !!tokenVal ? tokenVal : color;
 
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  var contrastColor = [_colors.N0, _colors.N500].sort(function (a, b) {
+  var contrastColor = ['#FFFFFF', '#42526E'].sort(function (a, b) {
     return _chromatism.default.difference(b, colorValue) - _chromatism.default.difference(a, colorValue);
   })[0];
   if (!useIconToken) {
@@ -46,7 +45,7 @@ function getCheckMarkColor(color, useIconToken) {
   // they are only intended for use with text colors (and there are different tokens
   // planned to be used when this extended to be used with other palettes).
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  return contrastColor === _colors.N0 ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, ".concat(_colors.N500, ")");
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
 }
 var ColorPalette = function ColorPalette(props) {
   var _props$cols = props.cols,

package/dist/cjs/ui-color/index.js

@@ -70,12 +70,6 @@ Object.defineProperty(exports, "colorPaletteMessages", {
     return _paletteMessages.default;
   }
 });
-Object.defineProperty(exports, "darkModeStatusColorPalette", {
-  enumerable: true,
-  get: function get() {
-    return _statusColorPalette.darkModeStatusColorPalette;
-  }
-});
 Object.defineProperty(exports, "getColorsPerRowFromPalette", {
   enumerable: true,
   get: function get() {
@@ -100,12 +94,6 @@ Object.defineProperty(exports, "highlightColorPalette", {
     return _highlightColorPalette.highlightColorPalette;
   }
 });
-Object.defineProperty(exports, "lightModeStatusColorPalette", {
-  enumerable: true,
-  get: function get() {
-    return _statusColorPalette.lightModeStatusColorPalette;
-  }
-});
 Object.defineProperty(exports, "panelBackgroundPalette", {
   enumerable: true,
   get: function get() {
@@ -136,7 +124,6 @@ var _utils = require("./ColorPalette/utils");
 var _cellBackgroundColorPalette = _interopRequireDefault(require("./ColorPalette/Palettes/cellBackgroundColorPalette"));
 var _paletteMessages = _interopRequireDefault(require("./ColorPalette/Palettes/paletteMessages"));
 var _panelBackgroundPalette = require("./ColorPalette/Palettes/panelBackgroundPalette");
-var _statusColorPalette = require("./ColorPalette/Palettes/statusColorPalette");
 var _textColorPalette = require("./ColorPalette/Palettes/textColorPalette");
 var _highlightColorPalette = require("./ColorPalette/Palettes/highlightColorPalette");
 var _Palettes = require("./ColorPalette/Palettes");

package/dist/cjs/ui-menu/ColorPickerButton/index.js

@@ -12,7 +12,6 @@ var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
 var _uiColor = require("../../ui-color");
@@ -42,8 +41,8 @@ var colorPickerExpandContainer = (0, _react2.css)({
 var colorPickerWrapper = function colorPickerWrapper() {
   return (0, _react2.css)({
     borderRadius: "var(--ds-border-radius, 3px)",
-    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
     padding: "var(--ds-space-100, 8px)".concat(" 0px")
   });
 };
@@ -204,7 +203,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
         margin: "0px ".concat("var(--ds-space-025, 2px)")
       },
       '&:hover': {
-        background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
+        background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
       }
     });
   };

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -24,7 +24,6 @@ var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles = require("../../styles");
 var _ToolbarArrowKeyNavigationProvider = require("../../ui-menu/ToolbarArrowKeyNavigationProvider");
@@ -54,7 +53,7 @@ var wrapper = (0, _react2.css)({
   }
 });
 var focusedMenuItemStyle = (0, _react2.css)({
-  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, #388BFF)"),
   outline: 'none'
 });
 var buttonStyles = function buttonStyles(isActive, submenuActive) {
@@ -66,7 +65,7 @@ var buttonStyles = function buttonStyles(isActive, submenuActive) {
     return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span,\n\t\t\t> span:hover,\n\t\t\t> span:active {\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
   } else {
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, ".concat(_colors.N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, #172B4D)", "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, #091E424F)", focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_DropList.default);

package/dist/es2019/element-browser/components/CategoryList.js

@@ -9,7 +9,6 @@ import React, { Fragment, memo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import Button from '@atlaskit/button/custom-theme-button';
-import { B400, B50, N800 } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
 import useFocus from '../hooks/use-focus';
@@ -111,9 +110,9 @@ function CategoryListItem({
         marginLeft: "var(--ds-space-025, 2px)",
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? `var(--ds-text, ${N800})` : `var(--ds-text-selected, ${B400})`,
+        color: category.name !== selectedCategory ? "var(--ds-text, #172B4D)" : "var(--ds-text-selected, #0C66E4)",
         ...(category.name === selectedCategory && {
-          background: `var(--ds-background-selected, ${B50})`
+          background: "var(--ds-background-selected, #E9F2FF)"
         })
       },
       ...rest

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -14,8 +14,6 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
-import { B100, N200 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../analytics';
 import { IconFallback } from '../../../quick-insert';
@@ -35,7 +33,7 @@ export const itemIcon = css({
   overflow: 'hidden',
   border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-border-radius, 3px)",
   boxSizing: 'border-box',
   display: 'flex',
   justifyContent: 'center',
@@ -319,7 +317,7 @@ const elementItemsWrapper = css({
     outline: 'none',
     '&:focus': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${`var(--ds-border-focused, ${B100})`}`
+      boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${"var(--ds-border-focused, #388BFF)"}`
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -366,7 +364,7 @@ const itemDescription = css(multilineStyle, {
   overflow: 'hidden',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: relativeFontSizeToBase16(11.67),
-  color: `var(--ds-text-subtle, ${N200})`,
+  color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-025, 2px)"
 });
 const itemText = css({

package/dist/es2019/element-browser/components/ElementSearch.js

@@ -12,7 +12,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import Textfield from '@atlaskit/textfield';
-import { N200 } from '@atlaskit/theme/colors';
 import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
 import useFocus from '../hooks/use-focus';
 import commonMessages from '../messages';
@@ -159,7 +158,7 @@ const wrapperInline = css({
 });
 const elementBeforeInput = css({
   margin: `1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"}`,
-  color: `var(--ds-icon, ${N200})`,
+  color: "var(--ds-icon, #44546F)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span, svg': {
     height: '20px',

package/dist/es2019/element-browser/constants.js

@@ -1,8 +1,4 @@
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-// TODO: Migrate away from deprecated gridSize
-// Recommendation: Replace gridSize with 8
-export const GRID_SIZE = gridSize();
+export const GRID_SIZE = 8;
 export const DEVICE_BREAKPOINT_NUMBERS = {
   small: GRID_SIZE * 40,
   medium: GRID_SIZE * 75,

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N30, N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../styles';
 export const widerLayoutClassName = 'wider-layout';
 
@@ -18,11 +17,11 @@ export const wrapperStyle = css(wrapperDefault, {
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-bodied-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
@@ -49,7 +48,7 @@ export const header = css({
 export const content = css({
   padding: "var(--ds-space-100, 8px)",
   background: "var(--ds-surface, white)",
-  border: `1px solid ${`var(--ds-border, ${N30})`}`,
+  border: `1px solid ${"var(--ds-border, #091E4224)"}`,
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
   width: '100%',

package/dist/es2019/extensibility/Extension/InlineExtension/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../styles';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -24,7 +23,7 @@ export const wrapperStyle = css(wrapperDefault, {
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
   }
 });
 

package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -9,7 +9,6 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N0, N30, N40, N500, N800 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 const containerStyles = css({
   textAlign: 'left',
@@ -47,11 +46,11 @@ const sharedLabelStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-background': {
-    background: `var(--ds-surface, ${N0})`
+    background: "var(--ds-surface, #FFFFFF)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
   }
 });
 const buttonLabelStyles = css({
@@ -60,8 +59,8 @@ const buttonLabelStyles = css({
   borderRadius: "var(--ds-border-radius, 3px)",
   paddingLeft: "var(--ds-space-100, 8px)",
   paddingRight: "var(--ds-space-100, 8px)",
-  color: `var(--ds-text-subtle, ${N800})`,
-  backgroundColor: `var(--ds-background-accent-gray-subtlest, ${N30})`,
+  color: "var(--ds-text-subtle, #44546F)",
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.remove-left-margin': {
     marginLeft: "var(--ds-space-negative-150, -12px)"
@@ -83,11 +82,11 @@ const textStyles = css({
   padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
 });
 const originalLabelStyles = css({
-  background: `var(--ds-background-accent-gray-subtle-pressed, ${N40})`,
+  background: "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)",
   borderRadius: `${"var(--ds-border-radius, 3px)"} ${"var(--ds-border-radius, 3px)"} 0 0`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.show-label': {
-    color: `var(--ds-text-subtle, ${N500})`
+    color: "var(--ds-text-subtle, #44546F)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.inline': {

package/dist/es2019/extensibility/Extension/styles.js

@@ -1,12 +1,11 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N20, N20A, N70 } from '@atlaskit/theme/colors';
 import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const wrapperDefault = css({
-  background: `var(--ds-background-neutral, ${N20})`,
+  background: "var(--ds-background-neutral, #091E420F)",
   borderRadius: "var(--ds-border-radius, 3px)",
   position: 'relative',
   verticalAlign: 'middle',
@@ -14,7 +13,7 @@ export const wrapperDefault = css({
   '&.with-overlay': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.extension-overlay': {
-      background: `var(--ds-background-neutral-hovered, ${N20A})`,
+      background: "var(--ds-background-neutral-hovered, #091E4224)",
       color: 'transparent'
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -53,7 +52,7 @@ export const placeholderFallbackParams = css({
   display: 'inline-block',
   maxWidth: '200px',
   marginLeft: "var(--ds-space-050, 4px)",
-  color: `var(--ds-text-subtlest, ${N70})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden'

package/dist/es2019/extensibility/MultiBodiedExtension/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N30, N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
@@ -30,11 +29,11 @@ export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-padding-background-styles': {

package/dist/es2019/icons/shared/SteppedRainbowIconDecoration.js

@@ -4,7 +4,6 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { N40, N60, N80, P300, R400, T300, Y400 } from '@atlaskit/theme/colors';
 const createSteppedRainbow = colors => {
   return `
     linear-gradient(
@@ -25,8 +24,8 @@ const createSteppedRainbow = colors => {
   }).join('\n')}
     )`;
 };
-const rainbow = createSteppedRainbow([P300, T300, Y400, R400]);
-const disabledRainbow = createSteppedRainbow([N80, N60, N40, N60]);
+const rainbow = createSteppedRainbow(["var(--ds-background-accent-purple-bolder, #6E5DC6)", "var(--ds-background-accent-teal-subtle, #6CC3E0)", "var(--ds-background-accent-orange-subtle, #FEA362)", "var(--ds-background-accent-red-bolder, #C9372C)"]);
+const disabledRainbow = createSteppedRainbow(["var(--ds-background-accent-gray-subtle, #8590A2)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)", "var(--ds-background-accent-gray-subtle-pressed, #DCDFE4)", "var(--ds-background-accent-gray-subtle-hovered, #B3B9C4)"]);
 const barStyles = css({
   position: 'absolute',
   left: 0,

package/dist/es2019/keymaps/index.js

@@ -7,7 +7,6 @@ import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { base, keyName } from 'w3c-keyname';
-import { N400 } from '@atlaskit/theme/colors';
 import { editorCommandToPMCommand } from '../preset/editor-commands';
 import { browser } from '../utils';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
@@ -112,7 +111,7 @@ const arrowKeysMap = {
 };
 const tooltipShortcutStyle = css({
   borderRadius: '2px',
-  backgroundColor: `var(--ds-background-inverse-subtle, ${N400})`,
+  backgroundColor: "var(--ds-background-inverse-subtle, #00000029)",
   padding: `0 ${"var(--ds-space-025, 2px)"}`,
   // NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
   label: 'tooltip-shortcut'

package/dist/es2019/link/ConfigureLinkOverlay/StyledButton.js

@@ -6,16 +6,15 @@ import _extends from "@babel/runtime/helpers/extends";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
-import { N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
 const buttonStyles = css({
   display: 'flex',
-  background: `var(--ds-background-neutral, ${N30A})`,
-  color: `var(--ds-icon, ${N700})`,
+  background: "var(--ds-background-neutral, #091E420F)",
+  color: "var(--ds-icon, #44546F)",
   '&:hover': {
-    background: `var(--ds-background-neutral-hovered, ${N40A})`
+    background: "var(--ds-background-neutral-hovered, #091E4224)"
   },
   '&:active': {
-    background: `var(--ds-background-neutral-pressed, ${N60A})`
+    background: "var(--ds-background-neutral-pressed, #091E424F)"
   },
   width: '1.375rem',
   height: '1.25rem'

package/dist/es2019/link/ConfigureLinkOverlay/index.js

@@ -10,8 +10,6 @@ import { useIntl } from 'react-intl-next';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N0 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { cardMessages } from '../../messages';
 import Dropdown from './Dropdown';
@@ -19,11 +17,11 @@ import { StyledButton } from './StyledButton';
 import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
 const buttonWrapperStyles = css({
   position: 'absolute',
-  zIndex: layers.card(),
+  zIndex: 100,
   display: 'inline-flex',
   top: '50%',
   transform: 'translateY(-50%)',
-  background: `var(--ds-surface-raised, ${N0})`,
+  background: "var(--ds-surface-raised, #FFFFFF)",
   borderRadius: "var(--ds-border-radius, 3px)"
 });
 const showDropdownThresholdPx = 50;

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -16,7 +16,6 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import { Pressable, xcss } from '@atlaskit/primitives';
-import { N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
 import { Announcer, PanelTextInput } from '../../../ui';
@@ -59,7 +58,7 @@ const textLabelMargin = css({
   marginTop: "var(--ds-space-150, 12px)"
 });
 const inputLabel = css({
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   paddingBottom: "var(--ds-space-050, 4px)",
   font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   fontWeight: "var(--ds-font-weight-medium, 500)"

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -7,12 +7,11 @@ import { PureComponent } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
 const listContainer = css({
   paddingTop: 0,
   marginTop: "var(--ds-space-150, 12px)",
-  borderTop: `1px solid ${`var(--ds-border, ${N30})`}`
+  borderTop: `1px solid ${"var(--ds-border, #091E4224)"}`
 });
 const spinnerContainer = css({
   textAlign: 'center',

package/dist/es2019/link/LinkSearch/LinkSearchListItem.js

@@ -12,8 +12,6 @@ import { css, jsx } from '@emotion/react';
 
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N20, N300, N800 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import { getCorrectAltByIconUrl } from './listItemAlts';
 import { transformTimeStamp } from './transformTimeStamp';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -27,7 +25,7 @@ export const container = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerSelected = css({
-  backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`
+  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
 });
 const nameWrapper = css({
   overflow: 'hidden'
@@ -35,7 +33,7 @@ const nameWrapper = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const nameStyle = css({
-  color: `var(--ds-text, ${N800})`,
+  color: "var(--ds-text, #172B4D)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -44,10 +42,10 @@ export const nameStyle = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const containerName = css({
-  color: `var(--ds-text-subtlest, ${N300})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   lineHeight: '14px',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: relativeFontSizeToBase16(fontSizeSmall())
+  fontSize: relativeFontSizeToBase16(11)
 });
 const iconStyle = css({
   minWidth: '16px',