@atlaskit/editor-common/dist/es2019/styles/shared/annotation.js

A package that contains common classes and components for editor and renderer

// 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`,
  blur: `${annotationPrefix}-blur`,
  draft: `${annotationPrefix}-draft`,
  hover: `${annotationPrefix}-hover`
};
export const blockAnnotationPrefix = 'ak-editor-block-annotation';
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-overlay, 0px 8px 12px #091E4226, 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-overlay, 0px 8px 12px #091E4226, 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: https://product-fabric.atlassian.net/browse/DSP-4147
        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};
					}
				}
			`;