@atlaskit/editor-common 92.1.2 → 93.0.0

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

@@ -10,7 +10,6 @@ import React, { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
-import { N30A, N90 } from '@atlaskit/theme/colors';
 export const messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -44,12 +43,12 @@ export const ExpandIconWrapper = ({
 const expandIconWrapperStyle = () => css({
   cursor: 'pointer',
   display: 'flex',
-  color: `var(--ds-icon, ${N90})`,
+  color: "var(--ds-icon, #44546F)",
   borderRadius: "var(--ds-border-radius-100, 4px)",
   width: '24px',
   height: '24px',
   '&:hover': {
-    background: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   svg: {

package/dist/es2019/ui/Expand/sharedStyles.js

@@ -1,15 +1,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { B300, N200, N200A, N300A, N40A, N50A } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { fontSize } from '@atlaskit/theme/constants';
 const BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 const EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 const EXPAND_SELECTED_BACKGROUND = "var(--ds-surface, rgba(255, 255, 255, 0.6))";
-const EXPAND_FOCUSED_BORDER_COLOR = `var(--ds-border-focused, ${B300})`;
+const EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, #388BFF)";
 const EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
-const EXPAND_EXPANDED_BORDER_COLOR = `var(--ds-border, ${N40A})`;
+const EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, #091E4224)";
 const containerStyles = styleProps => {
   const {
     expanded,
@@ -35,13 +32,6 @@ const containerStyles = styleProps => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     transition: `background 0.3s ${akEditorSwoopCubicBezier}, border-color 0.3s ${akEditorSwoopCubicBezier}`,
     padding: "var(--ds-space-100, 8px)",
-    '&:hover': {
-      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
-      // This is because the default state already uses the same token and, as such, the hover style won't change anything.
-      // https://product-fabric.atlassian.net/browse/DSP-4152
-      border: `1px solid ${`var(--ds-border, ${N50A})`}`,
-      background: EXPAND_SELECTED_BACKGROUND
-    },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     'td > :not(style):first-child, td > style:first-child + *': {
       marginTop: 0
@@ -82,11 +72,11 @@ const titleInputStyles = () => css({
   outline: 'none',
   border: 'none',
   // 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(fontSize()),
+  fontSize: relativeFontSizeToBase16(14),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   lineHeight: akEditorLineHeight,
   fontWeight: 'normal',
-  color: `var(--ds-text-subtlest, ${N200A})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   background: 'transparent',
   display: 'flex',
   flex: 1,
@@ -94,7 +84,7 @@ const titleInputStyles = () => css({
   width: '100%',
   '&::placeholder': {
     opacity: 1,
-    color: `var(--ds-text-subtlest, ${N200})`
+    color: "var(--ds-text-subtlest, #626F86)"
   }
 });
 const titleContainerStyles = () => css({
@@ -104,9 +94,9 @@ const titleContainerStyles = () => css({
   background: 'none',
   border: 'none',
   // 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(fontSize()),
+  fontSize: relativeFontSizeToBase16(14),
   width: '100%',
-  color: `var(--ds-text-subtle, ${N300A})`,
+  color: "var(--ds-text-subtle, #44546F)",
   overflow: 'hidden',
   cursor: 'pointer',
   '&:focus': {

package/dist/es2019/ui/FloatingToolbar/Separator.js

@@ -4,9 +4,8 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { N30 } from '@atlaskit/theme/colors';
 const separator = css({
-  background: `var(--ds-border, ${N30})`,
+  background: "var(--ds-border, #091E4224)",
   width: '1px',
   height: '20px',
   margin: `0 ${"var(--ds-space-050, 4px)"}`,

package/dist/es2019/ui/FloatingToolbar/styles.js

@@ -1,5 +1,3 @@
-import { hexToRgba } from '@atlaskit/adf-schema';
-import { B75, DN400, N30A, N400, R400 } from '@atlaskit/theme/colors';
 export const iconOnlySpacing = {
   '&&': {
     padding: '0px',
@@ -33,28 +31,28 @@ const background = {
       dark: 'inherit'
     },
     hover: {
-      light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
-      dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+      light: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+      dark: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
     },
     active: {
-      light: `var(--ds-background-neutral-pressed, ${`${hexToRgba(B75, 0.6)}`})`,
-      dark: `var(--ds-background-neutral-pressed, ${`${hexToRgba(B75, 0.6)}`})`
+      light: "var(--ds-background-neutral-pressed, #091E424F)",
+      dark: "var(--ds-background-neutral-pressed, #091E424F)"
     }
   }
 };
 const color = {
   danger: {
     default: {
-      light: `var(--ds-icon, ${N400})`,
-      dark: `var(--ds-icon, ${DN400})`
+      light: "var(--ds-icon, #44546F)",
+      dark: "var(--ds-icon, #44546F)"
     },
     hover: {
-      light: `var(--ds-icon-danger, ${R400})`,
-      dark: `var(--ds-icon-danger, ${R400})`
+      light: "var(--ds-icon-danger, #C9372C)",
+      dark: "var(--ds-icon-danger, #C9372C)"
     },
     active: {
-      light: `var(--ds-icon-danger, ${R400})`,
-      dark: `var(--ds-icon-danger, ${R400})`
+      light: "var(--ds-icon-danger, #C9372C)",
+      dark: "var(--ds-icon-danger, #C9372C)"
     }
   }
 };

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

@@ -7,21 +7,23 @@
 import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import { G400, N200, R400 } from '@atlaskit/theme/colors';
-import { h200 } from '@atlaskit/theme/typography';
 const errorColor = css({
-  color: `var(--ds-text-danger, ${R400})`
+  color: "var(--ds-text-danger, #AE2E24)"
 });
 const validColor = css({
-  color: `var(--ds-text-success, ${G400})`
+  color: "var(--ds-text-success, #216E4E)"
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const messageStyle = () =>
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-css(h200(), {
+css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: `${12 / 14}em`,
+  fontStyle: 'inherit',
+  lineHeight: 16 / 12,
   fontWeight: 'normal',
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   marginTop: "var(--ds-space-050, 4px)",
   display: 'flex',
   justifyContent: 'baseline'

package/dist/es2019/ui/PanelTextInput/styles.js

@@ -1,17 +1,16 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const panelTextInput = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'input&': {
     background: 'transparent',
-    border: `2px solid ${`var(--ds-border, ${N30})`}`,
+    border: `2px solid ${"var(--ds-border, #091E4224)"}`,
     borderRadius: 0,
     boxSizing: 'content-box',
-    color: `var(--ds-text-subtle, ${N400})`,
+    color: "var(--ds-text-subtle, #44546F)",
     flexGrow: 1,
     // 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(13),
@@ -25,10 +24,10 @@ export const panelTextInput = css({
     },
     '&:focus': {
       outline: 'none',
-      borderColor: `var(--ds-border-focused, ${B100})`
+      borderColor: "var(--ds-border-focused, #388BFF)"
     },
     '&::placeholder': {
-      color: `var(--ds-text-subtlest, ${N100})`
+      color: "var(--ds-text-subtlest, #626F86)"
     }
   }
 });

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

@@ -9,23 +9,21 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
-import { N30, N50 } from '@atlaskit/theme/colors';
-import { borderRadius, fontSize } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const blockNodeStyle = css({
-  background: `var(--ds-background-disabled, ${N30})`,
-  border: `1px dashed ${`var(--ds-border-disabled, ${N50})`}`,
+  background: "var(--ds-background-disabled, #091E4208)",
+  border: `1px dashed ${"var(--ds-border-disabled, #091E420F)"}`,
   // 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',
   cursor: 'default',
   display: 'flex',
   // 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(fontSize()),
+  fontSize: relativeFontSizeToBase16(14),
   margin: `${"var(--ds-space-100, 8px)"} 0`,
   minHeight: '24px',
   padding: "var(--ds-space-150, 12px)",

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

@@ -9,8 +9,6 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
-import { N30, N50 } from '@atlaskit/theme/colors';
-import { borderRadius, fontSize } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
@@ -18,15 +16,15 @@ import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-un
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const inlineNodeStyle = css({
   alignItems: 'center',
-  background: `var(--ds-background-disabled, ${N30})`,
-  border: `1px dashed ${`var(--ds-border-disabled, ${N50})`}`,
+  background: "var(--ds-background-disabled, #091E4208)",
+  border: `1px dashed ${"var(--ds-border-disabled, #091E420F)"}`,
   // 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',
   cursor: 'default',
   display: 'inline-flex',
   // 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(fontSize()),
+  fontSize: relativeFontSizeToBase16(14),
   margin: `0 ${"var(--ds-space-025, 2px)"}`,
   minHeight: '24px',
   padding: `0 ${"var(--ds-space-100, 8px)"}`,

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

@@ -8,10 +8,8 @@ import React, { Fragment, useContext, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { isSSR } from '../../core-utils/is-ssr';
-import { isSsrButNoBreakoutScriptObserved } from './isSsrButNoBreakoutScriptObserved';
 const styles = css({
   position: 'relative',
   width: '100%'
@@ -59,10 +57,7 @@ export const WidthProvider = ({
   shouldCheckExistingValue,
   children
 }) => {
-  const shouldFixTableResizing = Boolean(fg('platform-fix-table-ssr-resizing'));
-  const containerRef = useRef(null);
   const existingContextValue = useContext(WidthContext);
-  const [isInitialWidthUpdated, setIsInitialWidthUpdated] = useState(false);
   const [width, setWidth] = useState(getBodyWidth);
   const widthRef = useRef(width);
   const isMountedRef = useRef(true);
@@ -85,41 +80,15 @@ export const WidthProvider = ({
   const skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
   React.useLayoutEffect(() => {
     isMountedRef.current = true;
-    if (shouldFixTableResizing && !isInitialWidthUpdated) {
-      // useLayoutEffect is not run in SSR mode
-      // The visibility change for SSR is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
-      setIsInitialWidthUpdated(true);
-      if (containerRef.current) {
-        setWidth(containerRef.current.offsetWidth);
-      }
-    }
     return () => {
       isMountedRef.current = false;
     };
-  }, [isInitialWidthUpdated, shouldFixTableResizing, width]);
+  }, []);
   return jsx("div", {
     css: styles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: className,
-    ref: containerRef
-    // Using style not css prop because we need to also reset these style in SSR
-    // It is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Intended
-    ,
-    style:
-    // The hidden visibility is relying on the observer in breakout-ssr.tsx to clear.
-    // Do not hide if the observer is not observed. This happens in editor SSR.
-    shouldFixTableResizing && !isSsrButNoBreakoutScriptObserved() && !isInitialWidthUpdated ? {
-      // Width is initialized with body width but in Confluence this is too wide as side nav takes some space.
-      // Putting the div into hidden until we can get the correct width.
-      // Only setting the visibility so children still takes space which will make scrollbar to correct appear.
-      // Scrollbar has width too it needs to be taken into account otherwise table is going to shrink after appeared.
-      visibility: 'hidden',
-      // Because the body width is too wide, the horizontal scrollbar gonna shown
-      // Temporary hide it until we get the correct width
-      overflowX: 'hidden'
-    } : {}
+    className: className
   }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
     setWidth: updateWidth,
     offscreen: true

package/dist/es2019/ui-color/ColorPalette/Color/index.js

@@ -7,7 +7,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
-import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle } from './styles';
 const Color = props => {
@@ -18,9 +17,7 @@ const Color = props => {
     label,
     isSelected,
     borderColor,
-    /** this is not new usage - old code extracted from editor-core */
-    /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-    checkMarkColor = N0,
+    checkMarkColor = '#FFFFFF',
     /**
      * When hexToPaletteColor prop is set,
      * it will be used to get background color style based on

package/dist/es2019/ui-color/ColorPalette/Color/styles.js

@@ -1,16 +1,15 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N0, N50, N900 } from '@atlaskit/theme/colors';
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const buttonStyle = css({
   height: '26px',
   width: '26px',
-  background: `var(--ds-background-neutral, ${N900})`,
+  background: "var(--ds-background-neutral, #091E420F)",
   padding: 0,
   borderRadius: '4px',
-  border: `1px solid ${`var(--ds-border-inverse, ${N0})`}`,
+  border: `1px solid ${"var(--ds-border-inverse, #FFFFFF)"}`,
   cursor: 'pointer',
   display: 'block'
 });
@@ -28,7 +27,7 @@ export const buttonWrapperStyle = css({
   borderRadius: '6px',
   '&:focus-within, &:focus, &:hover': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    borderColor: `${`var(--ds-border, ${N50})`} !important`
+    borderColor: `${"var(--ds-border, #091E4224)"} !important`
   }
 });
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/ui-color/ColorPalette/Palettes/common.js

@@ -1,5 +1,4 @@
 import chromatism from 'chromatism';
-import { N800 } from '@atlaskit/theme/colors';
 
 /**
  * For a given color set the alpha channel to alpha
@@ -19,5 +18,5 @@ function setAlpha(color, alpha) {
 
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const DEFAULT_BORDER_COLOR = setAlpha(N800, 0.12);
+export const DEFAULT_BORDER_COLOR = setAlpha('#172B4D', 0.12);
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

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

@@ -1,73 +1,70 @@
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors } from '@atlaskit/theme';
 import { darkPanelColors } from '../../../panel';
 import { DEFAULT_BORDER_COLOR } from './common';
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const panelBackgroundPalette = [{
   label: 'White',
-  value: colors.N0
+  value: '#FFFFFF'
 }, {
   label: 'Light blue',
-  value: colors.B50
+  value: '#DEEBFF'
 }, {
   label: 'Light teal',
-  value: colors.T50
+  value: '#E6FCFF'
 }, {
   label: 'Light green',
-  value: colors.G50
+  value: '#E3FCEF'
 }, {
   label: 'Light yellow',
-  value: colors.Y50
+  value: '#FFFAE6'
 }, {
   label: 'Light red',
-  value: colors.R50
+  value: '#FFEBE6'
 }, {
   label: 'Light purple',
-  value: colors.P50
+  value: '#EAE6FF'
 }, {
   label: 'Light gray',
-  value: colors.N20
+  value: '#F4F5F7'
 }, {
   label: 'Blue',
-  value: colors.B75
+  value: '#B3D4FF'
 }, {
   label: 'Teal',
-  value: colors.T75
+  value: '#B3F5FF'
 }, {
   label: 'Green',
-  value: colors.G75
+  value: '#ABF5D1'
 }, {
   label: 'Yellow',
-  value: colors.Y75
+  value: '#FFF0B3'
 }, {
   label: 'Red',
-  value: colors.R75
+  value: '#FFBDAD'
 }, {
   label: 'Purple',
-  value: colors.P75
+  value: '#C0B6F2'
 }, {
   label: 'Gray',
-  value: colors.N60
+  value: '#B3BAC5'
 }, {
   label: 'Dark blue',
-  value: colors.B100
+  value: '#4C9AFF'
 }, {
   label: 'Dark teal',
-  value: colors.T100
+  value: '#79E2F2'
 }, {
   label: 'Dark green',
-  value: colors.G200
+  value: '#57D9A3'
 }, {
   label: 'Dark yellow',
-  value: colors.Y200
+  value: '#FFC400'
 }, {
   label: 'Dark red',
-  value: colors.R100
+  value: '#FF8F73'
 }, {
   label: 'Dark purple',
-  value: colors.P100
+  value: '#998DD9'
 }].map(color => ({
   ...color,
   border: `var(--ds-border, ${DEFAULT_BORDER_COLOR})`

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

@@ -8,7 +8,6 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
-import { N0, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
@@ -27,7 +26,7 @@ function getCheckMarkColor(color, useIconToken) {
   const colorValue = !!tokenVal ? tokenVal : color;
 
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  const contrastColor = [N0, N500].sort((a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue))[0];
+  const contrastColor = ['#FFFFFF', '#42526E'].sort((a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue))[0];
   if (!useIconToken) {
     return contrastColor;
   }
@@ -36,7 +35,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 === N0 ? `var(--ds-icon-inverse, ${N0})` : `var(--ds-icon, ${N500})`;
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
 }
 const ColorPalette = props => {
   const {

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

@@ -4,7 +4,6 @@ export { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getSelectedRo
 export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
-export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
 export { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from './ColorPalette/Palettes/highlightColorPalette';
 export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';

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

@@ -10,7 +10,6 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/standard-button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -33,8 +32,8 @@ const colorPickerExpandContainer = css({
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const colorPickerWrapper = () => css({
   borderRadius: "var(--ds-border-radius, 3px)",
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${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)"} 0px`
 });
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
@@ -184,7 +183,7 @@ const ColorPickerButton = props => {
         margin: `0px ${"var(--ds-space-025, 2px)"}`
       },
       '&:hover': {
-        background: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+        background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
       }
     });
   };

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

@@ -10,7 +10,6 @@ import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
 import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
@@ -27,7 +26,7 @@ const wrapper = css({
   }
 });
 const focusedMenuItemStyle = css({
-  boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
+  boxShadow: `inset 0px 0px 0px 2px ${"var(--ds-border-focused, #388BFF)"}`,
   outline: 'none'
 });
 const buttonStyles = (isActive, submenuActive) => {
@@ -55,7 +54,7 @@ const buttonStyles = (isActive, submenuActive) => {
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
 			> span:hover[aria-disabled='false'] {
-				color: ${`var(--ds-text, ${N900})`};
+				color: ${"var(--ds-text, #172B4D)"};
 				background-color: ${"var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))"};
 			}
 			${!submenuActive && `
@@ -63,7 +62,7 @@ const buttonStyles = (isActive, submenuActive) => {
 						background-color: ${"var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"};
 					}`}
 			> span[aria-disabled='true'] {
-				color: ${`var(--ds-text-disabled, ${N70})`};
+				color: ${"var(--ds-text-disabled, #091E424F)"};
 			}
 			:focus > span[aria-disabled='false'] {
 				${focusedMenuItemStyle};

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

@@ -15,7 +15,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';
@@ -112,9 +111,9 @@ function CategoryListItem(_ref2) {
         marginLeft: "var(--ds-space-025, 2px)",
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-text-selected, ".concat(B400, ")")
+        color: category.name !== selectedCategory ? "var(--ds-text, #172B4D)" : "var(--ds-text-selected, #0C66E4)"
       }, category.name === selectedCategory && {
-        background: "var(--ds-background-selected, ".concat(B50, ")")
+        background: "var(--ds-background-selected, #E9F2FF)"
       })
     }, rest);
   }, [category.name, selectedCategory]);