@atlaskit/editor-core 207.9.0 → 207.11.0

package/dist/es2019/ui/EditorContentContainer/styles/aiPanel.js

@@ -0,0 +1,199 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, keyframes } from '@emotion/react';
+/**
+ * aiPanelStyles
+ * was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
+ */
+
+const rotationAnimation = keyframes({
+  '0%': {
+    '--panel-gradient-angle': '0deg'
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg'
+  }
+});
+const rotationAnimationFirefox = keyframes({
+  '0%': {
+    '--panel-gradient-angle': '0deg',
+    backgroundPosition: '100%'
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg',
+    backgroundPosition: '-100%'
+  }
+});
+const aiPrismColor = {
+  ['prism.border.step.1']: {
+    light: '#0065FF',
+    dark: '#0065FF80'
+  },
+  ['prism.border.step.2']: {
+    light: '#0469FF',
+    dark: '#0469FF80'
+  },
+  ['prism.border.step.3']: {
+    light: '#BF63F3',
+    dark: '#BF63F380'
+  },
+  ['prism.border.step.4']: {
+    light: '#FFA900',
+    dark: '#FFA90080'
+  }
+};
+const aiPrismColorStep1Light = aiPrismColor['prism.border.step.1']['light'];
+const aiPrismColorStep2Light = aiPrismColor['prism.border.step.2']['light'];
+const aiPrismColorStep3Light = aiPrismColor['prism.border.step.3']['light'];
+const aiPrismColorStep4Light = aiPrismColor['prism.border.step.4']['light'];
+const aiPrismColorStep1Dark = aiPrismColor['prism.border.step.1']['dark'];
+const aiPrismColorStep2Dark = aiPrismColor['prism.border.step.2']['dark'];
+const aiPrismColorStep3Dark = aiPrismColor['prism.border.step.3']['dark'];
+const aiPrismColorStep4Dark = aiPrismColor['prism.border.step.4']['dark'];
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+const prismBorderBaseBackgroundFirefox = `linear-gradient(90deg, ${aiPrismColorStep1Light} 0%, ${aiPrismColorStep2Light} 12%, ${aiPrismColorStep3Light} 24%, ${aiPrismColorStep4Light} 48%, ${aiPrismColorStep3Light} 64%, ${aiPrismColorStep2Light} 80%, ${aiPrismColorStep1Light} 100%)`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+const prismBorderBaseBackground = `conic-gradient(from var(--panel-gradient-angle, 270deg), ${aiPrismColorStep1Light} 0%, ${aiPrismColorStep2Light} 20%, ${aiPrismColorStep3Light} 50%, ${aiPrismColorStep4Light} 56%, ${aiPrismColorStep1Light} 100%)`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+const prismBorderDarkBackgroundFirefox = `linear-gradient(90deg, ${aiPrismColorStep1Dark} 0%, ${aiPrismColorStep2Dark} 12%, ${aiPrismColorStep3Dark} 24%, ${aiPrismColorStep4Dark} 48%, ${aiPrismColorStep3Dark} 64%, ${aiPrismColorStep2Dark} 80%, ${aiPrismColorStep1Dark} 100%)`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+const prismBorderDarkBackground = `conic-gradient(from var(--panel-gradient-angle, 270deg), ${aiPrismColorStep1Dark} 0%, ${aiPrismColorStep2Dark} 20%, ${aiPrismColorStep3Dark} 50%, ${aiPrismColorStep4Dark} 56%, ${aiPrismColorStep1Dark} 100%)`;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const aiPanelBaseStyles = css({
+  '@property --panel-gradient-angle': {
+    syntax: '<angle>',
+    initialValue: '270deg',
+    inherits: false
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    /* This hides the label for the extension */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-label': {
+      display: 'none'
+    },
+    /* This styles the ai panel correctly when its just sitting on the page and there
+    is no user interaction */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      position: 'relative',
+      boxShadow: 'none',
+      overflow: 'unset',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      backgroundColor: `${"var(--ds-surface, #FFFFFF)"} !important`,
+      // prismBorderBaseStyles
+      '&::before, &::after': {
+        content: "''",
+        position: 'absolute',
+        zIndex: -1,
+        width: `calc(100% + 2px)`,
+        height: `calc(100% + 2px)`,
+        top: `-1px`,
+        left: `-1px`,
+        borderRadius: `calc(${"var(--ds-border-radius-100, 3px)"} + 1px)`,
+        transform: 'translate3d(0, 0, 0)',
+        background: prismBorderBaseBackground
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&.with-hover-border': {
+        '&::before, &::after': {
+          //prismBorderHoverStyles
+          background: "var(--ds-border-input, #8590A2)"
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& .with-margin-styles': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        backgroundColor: `${"var(--ds-surface, #FFFFFF)"} !important`,
+        borderRadius: "var(--ds-border-radius-100, 3px)"
+      }
+    }
+  },
+  /* This styles the ai panel correctly when its streaming */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]:has(.streaming)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        // prismBorderAnimationStyles
+        animationName: rotationAnimation,
+        animationDuration: '2s',
+        animationTimingFunction: 'linear',
+        animationIterationCount: 'infinite',
+        '@media (prefers-reduced-motion)': {
+          animation: 'none'
+        }
+      }
+    }
+  },
+  /* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"].danger': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
+    }
+  },
+  /* This removes the margin from the action list when inside an ai panel */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensiontype="com.atlassian.ai-blocks"][extensionkey="ai-action-items-block:aiActionItemsBodiedExtension"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'div[data-node-type="actionList"]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      margin: '0 !important'
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const aiPanelBaseFirefoxStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    '&::before, &::after': {
+      background: prismBorderBaseBackgroundFirefox,
+      backgroundSize: '200%'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]:has(.streaming)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        animationName: rotationAnimationFirefox,
+        animationDirection: 'normal',
+        animationDuration: '1s'
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const aiPanelDarkStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        background: prismBorderDarkBackground
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const aiPanelDarkFirefoxStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[extensionType="com.atlassian.ai-blocks"]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.extension-container': {
+      '&::before, &::after': {
+        background: prismBorderDarkBackgroundFirefox,
+        backgroundSize: '200%'
+      }
+    }
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/dateStyles.js

@@ -0,0 +1,69 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
+export const DateSharedCssClassName = {
+  DATE_WRAPPER: `date-lozenger-container`,
+  DATE_CONTAINER: 'dateView-content-wrap'
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const dateVanillaStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span`]: {
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    color: "var(--ds-text, #172B4D)",
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
+    margin: '0 1px',
+    position: 'relative',
+    transition: 'background 0.3s',
+    whiteSpace: 'nowrap',
+    cursor: 'unset'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span:hover`]: {
+    backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red`]: {
+    backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
+    color: "var(--ds-text-accent-red, #AE2E24)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red:hover`]: {
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const dateStyles = 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'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${DateSharedCssClassName.DATE_CONTAINER}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${DateSharedCssClassName.DATE_WRAPPER}`]: {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 'initial',
+      cursor: 'pointer'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ak-editor-selected-node': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${DateSharedCssClassName.DATE_WRAPPER} > span`]: [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles]
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.danger': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${DateSharedCssClassName.DATE_CONTAINER}.ak-editor-selected-node .${DateSharedCssClassName.DATE_WRAPPER} > span`]: {
+      boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
+    }
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/list.js

@@ -0,0 +1,45 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// copied from packages/editor/editor-shared-styles/src/consts/consts.ts
+const akEditorLineHeight = 1.714;
+// copied from packages/editor/editor-common/src/styles/shared/smart-card.ts
+const BLOCK_CARD_CONTAINER = 'blockCardView-content-wrap';
+
+// copied from packages/editor/editor-shared-styles/src/consts/consts.ts
+const blockNodesVerticalMargin = '0.75rem';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const listsStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror li': {
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '& > p:not(:first-child)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      margin: `${"var(--ds-space-050, 4px)"} 0 0 0`
+    },
+    /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
+    	The following rule resets the first p tag back to its original margin
+    	defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '& > style:first-child + p': {
+      marginTop: blockNodesVerticalMargin
+    }
+  }
+});
+
+/* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const listsStylesSafariFix = 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
+  [`.ProseMirror:not(.${BLOCK_CARD_CONTAINER}) > li::before`]: {
+    content: '" "',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    lineHeight: akEditorLineHeight
+  },
+  // 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
+  [`.ProseMirror:not(.${BLOCK_CARD_CONTAINER}) > li > p:first-child, .ProseMirror:not(.${BLOCK_CARD_CONTAINER}) > li > .code-block:first-child, .ProseMirror:not(.${BLOCK_CARD_CONTAINER}) > li > .ProseMirror-gapcursor:first-child + .code-block`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: `-${akEditorLineHeight}em !important`
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/selectionStyles.js

@@ -21,7 +21,7 @@ export const borderSelectionStyles = css({
   // Fixes ED-15246: Trello card is visible through a border of a table border
   '&::after': {
     height: '100%',
-    content: '"\\00a0"',
+    content: "'\\00a0'",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
     background: "var(--ds-border-selected, #0C66E4)",
     position: 'absolute',

package/dist/es2019/ui/EditorContentContainer/styles/shadowStyles.js

@@ -0,0 +1,56 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+export const shadowClassNames = {
+  RIGHT_SHADOW: 'right-shadow',
+  LEFT_SHADOW: 'left-shadow'
+};
+export const shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const shadowStyles = 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.RIGHT_SHADOW}::before, .${shadowClassNames.RIGHT_SHADOW}::after, .${shadowClassNames.LEFT_SHADOW}::before, .${shadowClassNames.LEFT_SHADOW}::after`]: {
+    display: 'none',
+    position: 'absolute',
+    pointerEvents: '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
+    zIndex: 2,
+    width: 8,
+    content: "''",
+    height: 'calc(100%)'
+  },
+  // 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}, .${shadowClassNames.LEFT_SHADOW}`]: {
+    position: 'relative'
+  },
+  // 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, #091e4229)"} 140% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px)`,
+    top: 0,
+    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, #091e4229)"} 140% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px)`,
+    right: 0,
+    top: 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
+  [`& .${shadowObserverClassNames.SENTINEL_LEFT}`]: {
+    height: '100%',
+    width: 0,
+    minWidth: 0
+  },
+  // 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
+  [`& .${shadowObserverClassNames.SENTINEL_RIGHT}`]: {
+    height: '100%',
+    width: 0,
+    minWidth: 0
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/smartCardStyles.js

@@ -0,0 +1,219 @@
+import { css } from '@emotion/react'; // eslint-disable-line
+
+import { boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
+export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
+export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+export const SmartCardSharedCssClassName = {
+  INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
+  BLOCK_CARD_CONTAINER: 'blockCardView-content-wrap',
+  EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
+  DATASOURCE_CONTAINER: 'datasourceView-content-wrap',
+  LOADER_WRAPPER: 'loader-wrapper'
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const smartCardStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER}`]: {
+    maxWidth: 'calc(100% - 20px)',
+    verticalAlign: 'top',
+    wordBreak: 'break-all',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.card-with-comment': {
+      background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+      borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
+      boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.card': {
+      paddingLeft: "var(--ds-space-025, 2px)",
+      paddingRight: "var(--ds-space-025, 2px)",
+      paddingTop: "var(--ds-space-100, 0.5em)",
+      paddingBottom: "var(--ds-space-100, 0.5em)",
+      marginBottom: "var(--ds-space-negative-100, -0.5em)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a:focus`]: [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles]
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&.ak-editor-selected-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a`]: [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    boxShadowSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideNativeBrowserTextSelectionStyles],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a`]: {
+      // EDM-1717: box-shadow Safari fix start
+      zIndex: 1,
+      position: 'relative'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a`]: {
+        boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
+        // EDM-1717: box-shadow Safari fix start
+        zIndex: 2
+        // EDM-1717: box-shadow Safari fix end
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
+    display: 'block',
+    margin: '0.75rem 0 0',
+    maxWidth: `${8 * 95}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&.ak-editor-selected-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    boxShadowSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideNativeBrowserTextSelectionStyles, {
+      borderRadius: "var(--ds-border-radius-200, 8px)"
+    }],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"} !important`
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
+    maxWidth: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`]: {
+      cursor: 'pointer',
+      backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+      borderRadius: "var(--ds-border-radius-200, 8px)",
+      border: `1px solid ${"var(--ds-border, #091E4224)"}`,
+      overflow: 'hidden'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ak-editor-selected-node': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`]: [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles, {
+        'input::selection': {
+          backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
+        },
+        'input::-moz-selection': {
+          backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
+        }
+      }]
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`]: {
+        boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
+      cursor: 'pointer',
+      '&::after': {
+        transition: 'box-shadow 0s'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&.ak-editor-selected-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    boxShadowSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideNativeBrowserTextSelectionStyles],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.media-card-frame::after': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"} !important`,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        background: `${"var(--ds-background-danger, #FFECEB)"} !important`
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after': {
+        background: "var(--ds-border-danger, #E2483D)"
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME}`]: {
+    padding: 0
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const smartLinksInLivePagesStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
+      cursor: 'text',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      a: {
+        cursor: 'pointer'
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      a: {
+        cursor: 'pointer'
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const smartLinksInLivePagesStylesOld = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
+      cursor: 'pointer',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      a: {
+        cursor: 'auto'
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      a: {
+        cursor: 'auto'
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const linkingVisualRefreshV1Styles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
+    // EDM-11991: Fix list plugin adding padding to ADS AvatarGroup
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul, ol': {
+      paddingLeft: 'inherit'
+    }
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/textColorStyles.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const textColorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'a .fabric-text-color-mark': {
+    color: 'unset'
+  }
+});

package/dist/es2019/ui/EditorContentContainer/styles/unsupportedStyles.js

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { backgroundSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
+export const UnsupportedSharedCssClassName = {
+  BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
+  INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const unsupportedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${UnsupportedSharedCssClassName.BLOCK_CONTAINER} > div, .${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span:nth-of-type(2)`]: {
+    cursor: 'pointer'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-selected-node': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&.${UnsupportedSharedCssClassName.BLOCK_CONTAINER} > div, &.${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span:nth-of-type(2)`]:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    backgroundSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    borderSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideNativeBrowserTextSelectionStyles]
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.danger': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-selected-node': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`&.${UnsupportedSharedCssClassName.BLOCK_CONTAINER} > div, &.${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span:nth-of-type(2)`]: {
+        border: `1px solid ${"var(--ds-border-danger, #E2483D)"}`,
+        backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+      }
+    }
+  }
+});