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

A package contains Atlassian editor core functionality

/* 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 */
const mentionsSelectedColor = css({
  color: "var(--ds-text-subtle, #505258)"
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const mentionsStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
  [`.${MentionSharedCssClassName.MENTION_CONTAINER}`]: {
    // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`&.${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]
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.danger': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${MentionSharedCssClassName.MENTION_CONTAINER}.${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 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder}`,
        backgroundColor: "var(--ds-background-danger, #FFECEB)"
      }
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
    [`.${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 const 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 ${"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 const mentionsSelectionStyles = css({
  // 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 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder}`,
      backgroundColor: "var(--ds-background-danger, #FFECEB)"
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
  [`.${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 const mentionsSelectionStylesWithSearchMatch = css({
  // 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 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder}`,
      backgroundColor: "var(--ds-background-danger, #FFECEB)"
    }
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
  [`.${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]
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
  [`.${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 const mentionDangerStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
  [`.${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]
  }
});