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

A package contains Atlassian editor core functionality

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mentionsStyles = exports.mentionsSelectionStylesWithSearchMatch = exports.mentionsSelectionStyles = exports.mentionNodeStyles = exports.mentionDangerStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _mention = require("@atlaskit/editor-common/mention");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _selectionStyles = require("./selectionStyles");
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */

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

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var mentionsStyles = exports.mentionsStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_mention.MentionSharedCssClassName.MENTION_CONTAINER), (0, _defineProperty2.default)({}, "&.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, " [data-mention-id] > span"), [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.boxShadowSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.backgroundSelectionStyles, mentionsSelectedColor])), '.danger', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_mention.MentionSharedCssClassName.MENTION_CONTAINER, ".").concat(_editorSharedStyles.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(_editorSharedStyles.akEditorSelectedBorderSize, "px ").concat(_editorSharedStyles.akEditorDeleteBorder),
    backgroundColor: "var(--ds-background-danger, #FFECEB)"
  }
}), ".".concat(_mention.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
var mentionNodeStyles = exports.mentionNodeStyles = (0, _react.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
var mentionsSelectionStyles = exports.mentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({
  // 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(_editorSharedStyles.akEditorSelectedBorderSize, "px ").concat(_editorSharedStyles.akEditorDeleteBorder),
      backgroundColor: "var(--ds-background-danger, #FFECEB)"
    }
  }
}, ".".concat(_editorSharedStyles.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
  _selectionStyles.boxShadowSelectionStyles,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
  _selectionStyles.backgroundSelectionStyles,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
  _selectionStyles.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
var mentionsSelectionStylesWithSearchMatch = exports.mentionsSelectionStylesWithSearchMatch = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
  // 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(_editorSharedStyles.akEditorSelectedBorderSize, "px ").concat(_editorSharedStyles.akEditorDeleteBorder),
      backgroundColor: "var(--ds-background-danger, #FFECEB)"
    }
  }
}, ".".concat(_editorSharedStyles.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
  _selectionStyles.backgroundSelectionStyles,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
  _selectionStyles.hideNativeBrowserTextSelectionStyles, mentionsSelectedColor]
}), ".".concat(_editorSharedStyles.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
  _selectionStyles.boxShadowSelectionStyles]
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var mentionDangerStyles = exports.mentionDangerStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_editorSharedStyles.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
  _selectionStyles.dangerBorderStyles,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
  _selectionStyles.dangerBackgroundStyles]
}));