@atlaskit/editor-common 92.1.2 → 93.1.0

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

@@ -3,7 +3,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
-import { N40A } from '@atlaskit/theme/colors';
 import { shadowClassNames } from '../../ui/OverflowShadow';
 import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 const shadowWidth = 8;
@@ -40,14 +39,14 @@ const shadowSharedStyle = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   [`& .${shadowClassNames.LEFT_SHADOW}::before`]: {
-    background: `linear-gradient( to left, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    background: `linear-gradient( to left, transparent 0, ${"var(--ds-shadow-overflow-spread, #091e4229)"} 140% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
     top: '0px',
     left: 0,
     display: 'block'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   [`& .${shadowClassNames.RIGHT_SHADOW}::after`]: {
-    background: `linear-gradient( to right, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    background: `linear-gradient( to right, transparent 0, ${"var(--ds-shadow-overflow-spread, #091e4229)"} 140% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
     right: '0px',
     top: '0px',
     display: 'block'

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

@@ -2,8 +2,6 @@
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, N40 } from '@atlaskit/theme/colors';
-import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
@@ -15,9 +13,9 @@ export const smartCardStyles = () => css`
 		vertical-align: top;
 		word-break: break-all;
 		${fg('editor_inline_comments_on_inline_nodes') ? `.card-with-comment {
-          background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
-          border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
-          box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
+          background: ${"var(--ds-background-accent-yellow-subtler, #F8E6A0)"};
+          border-bottom: 2px solid ${"var(--ds-border-accent-yellow, #B38600)"};
+          box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"};
         }` : ''}
 		.card {
 			padding-left: ${"var(--ds-space-025, 2px)"};
@@ -83,9 +81,9 @@ fg('linking_platform_smart_links_in_live_pages') ? 'pointer' : 'auto'};
 
 		.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
 			cursor: pointer;
-			background-color: ${`var(--ds-background-neutral-subtle, ${N0})`};
+			background-color: ${"var(--ds-background-neutral-subtle, #00000000)"};
 			border-radius: ${"var(--ds-border-radius-200, 8px)"};
-			border: 1px solid ${`var(--ds-border, ${N40})`};
+			border: 1px solid ${"var(--ds-border, #091E4224)"};
 		}
 
 		&.${akEditorSelectedNodeClassName} {

package/dist/es2019/table/SortingIcon.js

@@ -6,7 +6,6 @@
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N20, N30 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { SortOrder } from '../types';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from './consts';
@@ -33,13 +32,13 @@ const buttonStyles = css`
 	top: 0;
 	border: 2px solid ${"var(--ds-border, #fff)"};
 	border-radius: ${"var(--ds-border-radius-100, 4px)"};
-	background-color: ${`var(--ds-surface-overlay, ${N20})`};
+	background-color: ${"var(--ds-surface-overlay, #FFFFFF)"};
 	justify-content: center;
 	align-items: center;
 	cursor: pointer;
 
 	&:hover {
-		background-color: ${`var(--ds-surface-overlay-hovered, ${N30})`};
+		background-color: ${"var(--ds-surface-overlay-hovered, #F1F2F4)"};
 	}
 
 	&:active {

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

@@ -3,7 +3,6 @@ import React, { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { ThemeProvider } from '@emotion/react';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
 export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
@@ -19,7 +18,7 @@ export function BaseThemeWrapper({
   children
 }) {
   const memoizedTheme = useMemo(() => ({
-    baseFontSize: baseFontSize || fontSize(),
+    baseFontSize: baseFontSize || 14,
     layoutMaxWidth: akEditorDefaultLayoutWidth
   }), [baseFontSize]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {

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

@@ -8,16 +8,15 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
 const captionWrapperStyle = css({
   marginTop: "var(--ds-space-100, 8px)",
   textAlign: 'center',
   position: 'relative',
-  color: `var(--ds-text-subtle, ${N400})`
+  color: "var(--ds-text-subtle, #44546F)"
 });
 const placeholderStyle = css({
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: "var(--ds-text-subtlest, #626F86)",
   position: 'absolute',
   top: 0,
   width: '100%'

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

@@ -11,10 +11,9 @@ import { css, jsx } from '@emotion/react';
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "92.1.2";
+const packageVersion = "93.1.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {
@@ -39,10 +38,10 @@ class DropList extends Component {
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(this, "menuWrapper", () => {
       return css({
-        color: `var(--ds-text, ${N900})`,
-        backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+        color: "var(--ds-text, #172B4D)",
+        backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
         borderRadius: "var(--ds-border-radius, 3px)",
-        boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px calc(-1 * 2px) ${N50A}, 0 0 1px ${N60A}`})`,
+        boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
         boxSizing: 'border-box',
         overflow: 'auto',
         padding: `${"var(--ds-space-050, 4px)"} 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 */