@atlaskit/editor-common 110.9.0 → 110.9.1

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

@@ -1,6 +1,3 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const annotationPrefix = 'ak-editor-annotation';
 export const AnnotationSharedClassNames = {
   focus: `${annotationPrefix}-focus`,
@@ -13,106 +10,4 @@ export const BlockAnnotationSharedClassNames = {
   focus: `${blockAnnotationPrefix}-focus`,
   blur: `${blockAnnotationPrefix}-blur`,
   draft: `${blockAnnotationPrefix}-draft`
-};
-export const AnnotationSharedCSSByState = () => {
-  if (fg('editor_inline_comments_on_inline_nodes')) {
-    // NOTE: These styles are shared between renderer and editor. Sometimes they
-    // need different selectors and other times they apply the same attributes
-    // in a different way. For example in renderer the focus styles are an
-    // override, not a separate class. Be sure to check both usages of this
-    // before modifying.
-    return {
-      common: {
-        borderBottom: '2px solid transparent',
-        cursor: 'pointer',
-        padding: '1px 0 2px',
-        '&:has(.card), &:has([data-inline-card])': fg('annotations_align_editor_and_renderer_styles') ? {
-          padding: '5px 0 3px 0'
-        } : {
-          paddingTop: '4px',
-          border: 'none',
-          boxShadow: `0 2px 0 0 ${"var(--ds-border-accent-yellow, #B38600)"}`
-        },
-        '&:has(.date-lozenger-container)': {
-          paddingTop: '2px'
-        }
-      },
-      focus: css({
-        background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
-        borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
-        boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
-      }),
-      blur: css({
-        background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
-        borderBottomColor: "var(--ds-border-accent-yellow, #B38600)"
-      }),
-      hover: css({
-        background: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)",
-        borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
-        boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
-      })
-    };
-  } else {
-    return {
-      focus: css({
-        // Background is not coming through in confluence, suspecting to be caused by some specific combination of
-        // emotion and token look up
-        background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
-        borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
-        // TODO: DSP-4147 - Annotation shadow
-        boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
-        cursor: 'pointer'
-      }),
-      blur: css({
-        background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
-        borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
-        cursor: 'pointer'
-      })
-    };
-  }
-};
-export const annotationSharedStyles = () => fg('editor_inline_comments_on_inline_nodes') ?
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
-css`
-				.ProseMirror {
-					.${AnnotationSharedClassNames.blur},
-						.${AnnotationSharedClassNames.focus},
-						.${AnnotationSharedClassNames.draft} {
-						${AnnotationSharedCSSByState().common};
-					}
-
-					.${AnnotationSharedClassNames.focus} {
-						${AnnotationSharedCSSByState().focus};
-					}
-
-					.${AnnotationSharedClassNames.draft} {
-						${AnnotationSharedCSSByState().focus};
-						cursor: initial;
-					}
-
-					.${AnnotationSharedClassNames.blur} {
-						${AnnotationSharedCSSByState().blur};
-					}
-					.${AnnotationSharedClassNames.hover} {
-						${AnnotationSharedCSSByState().common};
-						${AnnotationSharedCSSByState().hover};
-					}
-				}
-			` :
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
-css`
-				.ProseMirror {
-					.${AnnotationSharedClassNames.focus} {
-						${AnnotationSharedCSSByState().focus};
-					}
-
-					.${AnnotationSharedClassNames.draft} {
-						${AnnotationSharedCSSByState().focus};
-						cursor: initial;
-					}
-
-					.${AnnotationSharedClassNames.blur} {
-						${AnnotationSharedCSSByState().blur};
-					}
-				}
-			`;
+};

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

@@ -1,7 +1,3 @@
-/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Should be safe to autofix, but ignoring for now */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -12,163 +8,4 @@ export const CodeBlockSharedCssClassName = {
   DS_CODEBLOCK: '[data-ds--code--code-block]',
   CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
   CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped'
-};
-export const codeBlockSharedStyles = () => css`
-	.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED}
-		> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}
-		> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
-		margin-right: ${"var(--ds-space-100, 8px)"};
-
-		code {
-			display: block;
-			word-break: break-word;
-			white-space: pre-wrap;
-		}
-	}
-
-	.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}
-		> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
-		display: flex;
-		flex: 1;
-
-		code {
-			flex-grow: 1;
-
-			white-space: pre;
-		}
-	}
-
-	.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
-		position: relative;
-		background-color: ${"var(--ds-surface-raised, #FFFFFF)"};
-		border-radius: ${"var(--ds-radius-small, 3px)"};
-		margin: ${blockNodesVerticalMargin} 0 0 0;
-		font-family: ${akEditorCodeFontFamily};
-		min-width: ${akEditorTableCellMinWidth}px;
-		cursor: pointer;
-		clear: both;
-
-		.code-block-gutter-pseudo-element::before {
-			content: attr(data-label);
-		}
-
-		/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */
-		white-space: normal;
-
-		.${CodeBlockSharedCssClassName.CODEBLOCK_START} {
-			position: absolute;
-			visibility: hidden;
-			height: 1.5rem;
-			top: 0px;
-			left: 0px;
-		}
-
-		.${CodeBlockSharedCssClassName.CODEBLOCK_END} {
-			position: absolute;
-			visibility: hidden;
-			height: 1.5rem;
-			bottom: 0px;
-			right: 0px;
-		}
-
-		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
-			position: relative;
-			background-color: ${"var(--ds-background-neutral, #091E420F)"};
-			display: flex;
-			border-radius: ${"var(--ds-radius-small, 3px)"};
-			width: 100%;
-			counter-reset: line;
-			overflow-x: auto;
-
-			background-image: ${overflowShadow({
-  leftCoverWidth: "var(--ds-space-300, 24px)"
-})};
-
-			background-repeat: no-repeat;
-			background-attachment: local, local, local, local, scroll, scroll, scroll, scroll;
-			background-size:
-				${"var(--ds-space-300, 24px)"} 100%,
-				${"var(--ds-space-300, 24px)"} 100%,
-				${"var(--ds-space-100, 8px)"} 100%,
-				${"var(--ds-space-100, 8px)"} 100%,
-				${"var(--ds-space-100, 8px)"} 100%,
-				1px 100%,
-				${"var(--ds-space-100, 8px)"} 100%,
-				1px 100%;
-			background-position:
-				0 0,
-				0 0,
-				100% 0,
-				100% 0,
-				100% 0,
-				100% 0,
-				0 0,
-				0 0;
-
-			/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
-			overflow-y: hidden;
-		}
-
-		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
-			background-color: ${"var(--ds-background-neutral, #091E420F)"};
-			position: relative;
-			width: var(--lineNumberGutterWidth, 2rem);
-			padding: ${"var(--ds-space-100, 8px)"};
-			flex-shrink: 0;
-			font-size: ${relativeFontSizeToBase16(14)};
-			box-sizing: content-box;
-		}
-
-		/* This is a fix of marker of list item with code block.
-		 The list item marker in Chrome is aligned by the baseline of the text,
-		 that's why we need to add a text (content: "1") to the line number gutter to align
-		 the list item marker with the text.
-		 Without it, the list item marker will be aligned by the bottom of the code block. */
-		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER}::before {
-			content: '1';
-			visibility: hidden;
-			font-size: ${relativeFontSizeToBase16(14)};
-			line-height: 1.5rem;
-		}
-
-		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
-			code {
-				tab-size: 4;
-				cursor: text;
-				color: ${"var(--ds-text, #172B4D)"};
-				border-radius: ${"var(--ds-radius-small, 3px)"};
-				margin: ${"var(--ds-space-100, 8px)"};
-				font-size: ${relativeFontSizeToBase16(14)};
-				line-height: 1.5rem;
-			}
-		}
-
-		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET} {
-			pointer-events: none;
-			user-select: none;
-			width: var(--lineNumberGutterWidth, 2rem);
-			left: 0;
-			position: absolute;
-			font-size: ${relativeFontSizeToBase16(14)};
-			padding: 0px ${"var(--ds-space-100, 8px)"};
-			line-height: 1.5rem;
-			text-align: right;
-			color: ${"var(--ds-text-subtlest, #505F79)"};
-			box-sizing: content-box;
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const codeBlockInListSafariFix = css`
-	::before {
-		content: ' ';
-		line-height: ${akEditorLineHeight};
-	}
-
-	> p:first-child,
-	> .code-block:first-child,
-	> .ProseMirror-gapcursor:first-child + .code-block {
-		margin-top: -${akEditorLineHeight}em !important;
-	}
-`;
+};

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

@@ -1,14 +1,4 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
 export const DateSharedCssClassName = {
   DATE_WRAPPER: `date-lozenger-container`,
   DATE_CONTAINER: 'dateView-content-wrap'
-};
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const dateSharedStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  [`.${DateSharedCssClassName.DATE_WRAPPER} span`]: {
-    whiteSpace: 'unset'
-  }
-});
+};

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

@@ -1,39 +1 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
-export const GRID_GUTTER = 12;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const gridStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.gridParent': {
-    width: `calc(100% + ${GRID_GUTTER * 2}px)`,
-    marginLeft: "var(--ds-space-negative-150, -12px)",
-    marginRight: "var(--ds-space-negative-150, -12px)",
-    transform: 'scale(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
-    zIndex: akEditorGridLineZIndex
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.gridContainer': {
-    position: 'fixed',
-    height: '100vh',
-    width: '100%',
-    pointerEvents: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.gridLine': {
-    borderLeft: `1px solid ${"var(--ds-border, #091E4224)"}`,
-    display: 'inline-block',
-    boxSizing: 'border-box',
-    height: '100%',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginLeft: '-1px',
-    transition: 'border-color 0.15s linear',
-    zIndex: 0
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.highlight': {
-    borderLeft: `1px solid ${"var(--ds-border-focused, #388BFF)"}`
-  }
-});
+export const GRID_GUTTER = 12;

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

@@ -1,7 +1,3 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
-import { browser } from '../../utils/browser';
 export const listItemCounterPadding = 24;
 var CSS_VAR_NAMES = /*#__PURE__*/function (CSS_VAR_NAMES) {
   CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
@@ -36,120 +32,4 @@ export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat
     return stringifyStyle(style);
   }
   return style;
-}
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
-export const listsSharedStyles = css`
-	/* =============== INDENTATION SPACING ========= */
-
-	ul,
-	ol {
-		box-sizing: border-box;
-		padding-left: var(${CSS_VAR_NAMES.ITEM_COUNTER_PADDING}, ${listItemCounterPadding}px);
-		/*
-    Firefox does not handle empty block element inside li tag.
-    If there is not block element inside li tag,
-      then firefox sets inherited height to li
-    However, if there is any block element and if it's empty
-      (or has empty inline element) then
-    firefox sets li tag height to zero.
-    More details at
-    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation
-    */
-		li p:empty,
-		li p > span:empty {
-			${browser.gecko ? 'display: inline-block;' : ''}
-		}
-	}
-
-	${orderedListSelector}, ${bulletListSelector} {
-		/*
-      Ensures list item content adheres to the list's margin instead
-      of filling the entire block row. This is important to allow
-      clicking interactive elements which are floated next to a list.
-
-      For some history and context on this block, see PRs related to tickets.:
-      @see ED-6551 - original issue.
-      @see ED-7015 - follow up issue.
-      @see ED-7447 - flow-root change.
-
-      We use 'display: table' (old clear fix / new block formatting context hack)
-      for older browsers and 'flow-root' for modern browsers.
-
-      @see https://css-tricks.com/display-flow-root/
-    */
-		/* For older browsers the do not support flow-root. */
-		/* stylelint-disable declaration-block-no-duplicate-properties */
-		display: table;
-		display: flow-root;
-		/* stylelint-enable declaration-block-no-duplicate-properties */
-	}
-
-	/* =============== INDENTATION AESTHETICS ========= */
-
-	/**
-        We support nested lists up to six levels deep.
-    **/
-
-	/* LEGACY LISTS */
-
-	ul,
-	ul ul ul ul {
-		list-style-type: disc;
-	}
-
-	ul ul,
-	ul ul ul ul ul {
-		list-style-type: circle;
-	}
-
-	ul ul ul,
-	ul ul ul ul ul ul {
-		list-style-type: square;
-	}
-
-	ol,
-	ol ol ol ol {
-		list-style-type: decimal;
-	}
-	ol ol,
-	ol ol ol ol ol {
-		list-style-type: lower-alpha;
-	}
-	ol ol ol,
-	ol ol ol ol ol ol {
-		list-style-type: lower-roman;
-	}
-
-	/* PREDICTABLE LISTS */
-
-	ol[data-indent-level='1'],
-	ol[data-indent-level='4'] {
-		list-style-type: decimal;
-	}
-
-	ol[data-indent-level='2'],
-	ol[data-indent-level='5'] {
-		list-style-type: lower-alpha;
-	}
-
-	ol[data-indent-level='3'],
-	ol[data-indent-level='6'] {
-		list-style-type: lower-roman;
-	}
-
-	ul[data-indent-level='1'],
-	ul[data-indent-level='4'] {
-		list-style-type: disc;
-	}
-
-	ul[data-indent-level='2'],
-	ul[data-indent-level='5'] {
-		list-style-type: circle;
-	}
-
-	ul[data-indent-level='3'],
-	ul[data-indent-level='6'] {
-		list-style-type: square;
-	}
-`;
+}

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

@@ -1,12 +1,5 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
-import { emojiImage, emojiSprite } from '@atlaskit/emoji';
-import { fg } from '@atlaskit/platform-feature-flags';
 const lightPanelColors = {
   info: '#DEEBFF',
   note: '#EAE6FF',
@@ -77,19 +70,6 @@ export const darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
-const lightIconColor = {
-  info: "var(--ds-icon-information, #1D7AFC)",
-  note: "var(--ds-icon-discovery, #8270DB)",
-  tip: "var(--ds-icon-success, #22A06B)",
-  success: "var(--ds-icon-success, #22A06B)",
-  warning: "var(--ds-icon-warning, #E56910)",
-  error: "var(--ds-icon-danger, #C9372C)"
-};
-
-// New custom icons are a little smaller than predefined icons.
-// To fix alignment issues with custom icons, vertical alignment is updated.
-const panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
-const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 export function getPanelDarkModeCSS(colorName, colorValue) {
   return `
   &[data-panel-color="${colorName}"] {
@@ -128,124 +108,7 @@ export const PanelSharedSelectors = {
   yellowWarningIcon: `[aria-label=":warning:"]  span:nth-child(1)`,
   copyButton: `button[aria-label="Copy"]`
 };
-const getIconStyles = panelType => {
-  return `
-		.${PanelSharedCssClassName.icon}[data-panel-type='${panelType}'] {
-			color: ${lightIconColor[panelType]};
-		}
-	`;
-};
 
 // Provides the color without tokens, used when converting to a custom panel
 export const getPanelTypeBackgroundNoTokens = panelType => lightPanelColors[panelType] || 'none';
-export const getPanelTypeBackground = panelType => hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]) || 'none';
-const mainDynamicStyles = panelType => {
-  return `
-    background-color: ${getPanelTypeBackground(panelType)};
-    color: inherit;
-  `;
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
-export const panelSharedStylesWithoutPrefix = () => css`
-	border-radius: ${"var(--ds-radius-small, 3px)"};
-	margin: ${blockNodesVerticalMargin} 0 0;
-	padding-top: ${"var(--ds-space-100, 8px)"};
-	padding-right: ${"var(--ds-space-200, 16px)"};
-	padding-bottom: ${"var(--ds-space-100, 8px)"};
-	padding-left: ${"var(--ds-space-100, 8px)"};
-	min-width: ${akEditorTableCellMinWidth}px;
-	display: flex;
-	position: relative;
-	align-items: normal;
-	word-break: break-word;
-
-	${mainDynamicStyles(PanelType.INFO)}
-
-	.${PanelSharedCssClassName.icon} {
-		flex-shrink: 0;
-		height: ${"var(--ds-space-300, 24px)"};
-		width: ${"var(--ds-space-300, 24px)"};
-		box-sizing: content-box;
-		padding-right: ${"var(--ds-space-100, 8px)"};
-		text-align: center;
-		user-select: none;
-		-moz-user-select: none;
-		-webkit-user-select: none;
-		-ms-user-select: none;
-		margin-top: 0.1em;
-
-		> span {
-			vertical-align: middle;
-			display: inline-flex;
-		}
-
-		.${emojiSprite} {
-			vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
-		}
-
-		.${emojiImage} {
-			vertical-align: ${panelEmojiImageVerticalAlignment}px;
-
-			/* Vertical align only works for inline-block elements in Firefox */
-			@-moz-document url-prefix() {
-				img {
-					display: inline-block;
-				}
-			}
-		}
-	}
-
-	.ak-editor-panel__content {
-		margin: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"};
-		flex: 1 0 0;
-		/*
-      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
-      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
-    */
-		min-width: 0;
-	}
-
-	/* support nested panel */
-	.${PanelSharedCssClassName.content} .${prefix} {
-		border: 1px solid ${"var(--ds-border, #091E42)"};
-	}
-
-	&[data-panel-type='${PanelType.INFO}'] {
-		${getIconStyles(PanelType.INFO)}
-	}
-
-	&[data-panel-type='${PanelType.NOTE}'] {
-		${mainDynamicStyles(PanelType.NOTE)}
-		${getIconStyles(PanelType.NOTE)}
-	}
-
-	&[data-panel-type='${PanelType.TIP}'] {
-		${mainDynamicStyles(PanelType.TIP)}
-		${getIconStyles(PanelType.TIP)}
-	}
-
-	&[data-panel-type='${PanelType.WARNING}'] {
-		${mainDynamicStyles(PanelType.WARNING)}
-		${getIconStyles(PanelType.WARNING)}
-	}
-
-	&[data-panel-type='${PanelType.ERROR}'] {
-		${mainDynamicStyles(PanelType.ERROR)}
-		${getIconStyles(PanelType.ERROR)}
-	}
-
-	&[data-panel-type='${PanelType.SUCCESS}'] {
-		${mainDynamicStyles(PanelType.SUCCESS)}
-		${getIconStyles(PanelType.SUCCESS)}
-	}
-
-	${fg('platform_editor_nested_dnd_styles_changes') ? `&.${PanelSharedCssClassName.noIcon} {
-			padding-right: ${"var(--ds-space-150, 12px)"};
-			padding-left: ${"var(--ds-space-150, 12px)"};
-		}` : ''}
-`;
-export const panelSharedStyles = () => css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  [`.${PanelSharedCssClassName.prefix}`]: panelSharedStylesWithoutPrefix()
-});
+export const getPanelTypeBackground = panelType => hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]) || 'none';