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

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

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2;
// 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 var annotationPrefix = 'ak-editor-annotation';
export var AnnotationSharedClassNames = {
  focus: "".concat(annotationPrefix, "-focus"),
  blur: "".concat(annotationPrefix, "-blur"),
  draft: "".concat(annotationPrefix, "-draft"),
  hover: "".concat(annotationPrefix, "-hover")
};
export var blockAnnotationPrefix = 'ak-editor-block-annotation';
export var BlockAnnotationSharedClassNames = {
  focus: "".concat(blockAnnotationPrefix, "-focus"),
  blur: "".concat(blockAnnotationPrefix, "-blur"),
  draft: "".concat(blockAnnotationPrefix, "-draft")
};
export var AnnotationSharedCSSByState = function 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 ".concat("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 ".concat("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 ".concat("var(--ds-border-accent-yellow, #B38600)"),
        cursor: 'pointer'
      })
    };
  }
};
export var annotationSharedStyles = function annotationSharedStyles() {
  return 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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror {\n\t\t\t\t\t.", ",\n\t\t\t\t\t\t.", ",\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t\tcursor: initial;\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), AnnotationSharedClassNames.blur, AnnotationSharedClassNames.focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().common, AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, 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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t\tcursor: initial;\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur);
};