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

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

import { css } from '@emotion/react';
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
import { commentStatusStyleMap } from '../../media/styles';
export const annotationPrefix = 'ak-editor-annotation';
export const AnnotationSharedClassNames = {
  focus: `${annotationPrefix}-focus`,
  blur: `${annotationPrefix}-blur`,
  draft: `${annotationPrefix}-draft`
};
export const blockAnnotationPrefix = 'ak-editor-block-annotation';
export const BlockAnnotationSharedClassNames = {
  focus: `${blockAnnotationPrefix}-focus`,
  blur: `${blockAnnotationPrefix}-blur`,
  draft: `${blockAnnotationPrefix}-draft`
};
const mediaNodeDomRef = 'mediaView-content-wrap';
const Y75a = 'rgba(255, 240, 179, 0.5)';
const Y200a = 'rgba(255, 196, 0, 0.82)';
export const AnnotationSharedCSSByState = () => getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? {
  focus: css({
    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
    cursor: 'pointer',
    '&:has(.card)': {
      fontSize: '1.5rem',
      lineHeight: '1.2rem',
      '& > *': {
        fontSize: '16px'
      }
    }
  }),
  blur: css({
    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
    cursor: 'pointer',
    '&:has(.card)': {
      fontSize: '1.5rem',
      lineHeight: '1.2rem',
      '& > *': {
        fontSize: '16px'
      }
    }
  })
} : {
  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, ${Y75})`,
    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
    cursor: 'pointer'
  }),
  blur: css({
    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
    cursor: 'pointer'
  })
};

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
export const annotationSharedStyles = () => css`
  .ProseMirror {
    .${AnnotationSharedClassNames.focus} {
      ${AnnotationSharedCSSByState().focus};
    }

    .${AnnotationSharedClassNames.draft} {
      ${AnnotationSharedCSSByState().focus};
      cursor: initial;
    }

    .${AnnotationSharedClassNames.blur} {
      ${AnnotationSharedCSSByState().blur};
    }

    // Styling for comments on media node
    .${mediaNodeDomRef}[class*=ak-editor-block-annotation-] {
      border-radius: 3px;
    }

    .${mediaNodeDomRef}.${BlockAnnotationSharedClassNames.draft} {
      box-shadow: ${commentStatusStyleMap('draft')};
    }

    .${mediaNodeDomRef}.${BlockAnnotationSharedClassNames.focus} {
      box-shadow: ${commentStatusStyleMap('focus')};
    }

    .${mediaNodeDomRef}.${BlockAnnotationSharedClassNames.blur} {
      box-shadow: ${commentStatusStyleMap('blur')};
    }
  }
`;
export const mediaAnnotationStyles = css({
  boxShadow: `5px 5px ${`var(--ds-background-accent-yellow-subtler, ${Y75a})`}`,
  borderRadius: '3px'
});