@atlaskit/editor-core/dist/esm/ui/EditorContentContainer/styles/mentions.js

A package contains Atlassian editor core functionality

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
import { backgroundSelectionStyles, boxShadowSelectionStyles, dangerBackgroundStyles, dangerBorderStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';

/* need to specify dark text colour because personal mentions
(in dark blue) have white text by default */
var mentionsSelectedColor = css({
  color: "var(--ds-text-subtle, #505258)"
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mentionsStyles = css(_defineProperty(_defineProperty({}, ".".concat(MentionSharedCssClassName.MENTION_CONTAINER), _defineProperty({}, "&.".concat(akEditorSelectedNodeClassName, " [data-mention-id] > 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
backgroundSelectionStyles, mentionsSelectedColor])), '.danger', _defineProperty(_defineProperty({}, ".".concat(MentionSharedCssClassName.MENTION_CONTAINER, ".").concat(akEditorSelectedNodeClassName), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '> span > span > span': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    boxShadow: "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorDeleteBorder),
    backgroundColor: "var(--ds-background-danger, #FFECEB)"
  }
}), ".".concat(MentionSharedCssClassName.MENTION_CONTAINER, " > span > span > span"), {
  backgroundColor: "var(--ds-background-neutral, #0515240F)",
  color: "var(--ds-text-subtle, #505258)"
})));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mentionNodeStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '.editor-mention-primitive': {
    display: 'inline',
    borderRadius: "var(--ds-radius-full, 9999px)",
    cursor: 'pointer',
    padding: '1px 0.3em 1px 0.23em',
    // To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
    // we match the line height exactly
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
    lineHeight: '1.714',
    fontWeight: "var(--ds-font-weight-regular, 400)",
    wordBreak: 'break-word',
    background: "var(--ds-background-neutral, #0515240F)",
    border: '1px solid transparent',
    color: "var(--ds-text-subtle, #505258)",
    '&:hover': {
      background: "var(--ds-background-neutral-hovered, #0B120E24)"
    },
    '&:active': {
      background: "var(--ds-background-neutral-pressed, #080F214A)"
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '.editor-mention-primitive.mention-restricted': {
    background: 'transparent',
    border: "1px solid ".concat("var(--ds-border-bold, #7D818A)"),
    color: "var(--ds-text, #292A2E)",
    '&:hover': {
      background: 'transparent'
    },
    '&:active': {
      background: 'transparent'
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '.editor-mention-primitive.mention-self': {
    background: "var(--ds-background-brand-bold, #1868DB)",
    border: '1px solid transparent',
    color: "var(--ds-text-inverse, #FFFFFF)",
    '&:hover': {
      background: "var(--ds-background-brand-bold-hovered, #1558BC)"
    },
    '&:active': {
      background: "var(--ds-background-brand-bold-pressed, #144794)"
    }
  }
});

// This is mentions styles for mentions selection styles based on the vanilla node view
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mentionsSelectionStyles = css(_defineProperty({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.danger': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.editor-mention-primitive': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
      boxShadow: "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorDeleteBorder),
      backgroundColor: "var(--ds-background-danger, #FFECEB)"
    }
  }
}, ".".concat(akEditorSelectedNodeClassName), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '> .editor-mention-primitive, > .editor-mention-primitive.mention-self, > .editor-mention-primitive.mention-restricted':
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,
  [
  // 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
  backgroundSelectionStyles,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
  hideNativeBrowserTextSelectionStyles, mentionsSelectedColor]
}));

// This is mentions styles for mentions selection styles based on the vanilla node view
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mentionsSelectionStylesWithSearchMatch = css(_defineProperty(_defineProperty({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.danger': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.editor-mention-primitive': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
      boxShadow: "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorDeleteBorder),
      backgroundColor: "var(--ds-background-danger, #FFECEB)"
    }
  }
}, ".".concat(akEditorSelectedNodeClassName), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '> .editor-mention-primitive, > .editor-mention-primitive.mention-self, > .editor-mention-primitive.mention-restricted':
  // 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
  hideNativeBrowserTextSelectionStyles, mentionsSelectedColor]
}), ".".concat(akEditorSelectedNodeClassName, ":not(.search-match-block)"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '> .editor-mention-primitive, > .editor-mention-primitive.mention-self, > .editor-mention-primitive.mention-restricted':
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,
  [
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
  boxShadowSelectionStyles]
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mentionDangerStyles = css(_defineProperty({}, ".".concat(akEditorSelectedNodeClassName, ":not(.search-match-block).danger"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '> .editor-mention-primitive, > .editor-mention-primitive.mention-self, > .editor-mention-primitive.mention-restricted':
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,
  [
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  dangerBorderStyles,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
  dangerBackgroundStyles]
}));