@atlaskit/editor-core/dist/esm/ui/EditorContentContainer/styles/findReplaceStyles.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 { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var findReplaceStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match': {
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
    borderRadius: "var(--ds-radius-small, 3px)",
    backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8C8F97)")
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.selected-search-match': {
    backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var findReplaceStylesWithCodeblockColorContrastFix = css(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, " .search-match.selected-search-match"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  span: {
    // we need to use !important here as we need to override inline selection styles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
    color: "var(--ds-text, #292A2E)".concat(" !important")
  }
}));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var findReplaceStylesNewWithCodeblockColorContrastFix = css(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, " .search-match-text.selected-search-match"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  span: {
    // we need to use !important here as we need to override inline selection styles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
    color: "var(--ds-text, #292A2E)".concat(" !important")
  }
}));

// TODO: ED-28370 - during platform_editor_find_and_replace_improvements clean up, rename this css object to findReplaceStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var findReplaceStylesNewWithA11Y = css({
  // text - inactive match - light mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-text': {
    borderRadius: "var(--ds-space-050, 4px)",
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-border-accent-magenta, #CD519D)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t"),
    // we need to use !important here as we need to override inline selection styles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)".concat(" !important"),
    color: "var(--ds-text, #292A2E)"
  },
  // text - active match - light mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-text.selected-search-match': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)", "\n\t\t"),
    // we need to use !important here as we need to override inline selection styles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
    backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)".concat(" !important")
  },
  // text - inactive match - dark mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-text.search-match-dark': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #77325B)", "\n\t\t"),
    // we need to use !important here as we need to override inline selection styles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
    backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #77325B)".concat(" !important"),
    color: "var(--ds-text-inverse, #FFFFFF)"
  },
  // text - active match - dark mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-text.selected-search-match.search-match-dark': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
    // we need to use !important here as we need to override inline selection styles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
    backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)".concat(" !important")
  },
  // block node - inactive match - light mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-border-accent-magenta, #CD519D)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-subtler, #FDD0EC)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-border-accent-magenta, #CD519D)", "\n\t\t\t")
    }
  },
  // block node - active match - light mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t\t")
    }
  },
  // block node - inactive match - light mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.ak-editor-selected-node': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-border-accent-magenta, #CD519D)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #1868DB)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)", ",\n\t\t\t0px 0px 0px 4px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-border-accent-magenta, #CD519D)", "\n\t\t\t")
    }
  },
  // block node - active match - light mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected.ak-editor-selected-node': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #1868DB)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)", ",\n\t\t\t0px 0px 0px 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t\t")
    }
  },
  // block node - inactive match - dark mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-dark': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #77325B)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-bolder-pressed, #77325B)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)", "\n\t\t\t")
    }
  },
  // block node - active match - dark mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected.search-match-dark': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)", "\n\t\t\t")
    }
  },
  // block node - inactive match - dark mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-dark.ak-editor-selected-node': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #77325B)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #1868DB)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)", ",\n\t\t\t0px 0px 0px 4px ", "var(--ds-background-accent-magenta-bolder-pressed, #77325B)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)", "\n\t\t\t")
    }
  },
  // block node - active match - dark mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected.search-match-dark.ak-editor-selected-node': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-smart-link-container="true"], .loader-wrapper>div::after': {
      boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #1868DB)", "\n\t\t\t")
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.loader-wrapper>a, .hover-card-trigger-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container>span': {
      boxShadow: "\n\t\t\t0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)", ",\n\t\t\t0px 0px 0px 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\t\t0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)", "\n\t\t\t")
    }
  },
  // expand title - inactive match - light mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-expand-title > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
    borderRadius: "var(--ds-space-050, 4px)",
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-border-accent-magenta, #CD519D)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.ak-editor-expand__title-input': {
      color: "var(--ds-text, #292A2E)"
    }
  },
  // expand title - active match - light mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-expand-title.selected-search-match > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"
  },
  // expand title - inactive match - dark mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-expand-title.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #77325B)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #77325B)",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '.ak-editor-expand__title-input': {
      color: "var(--ds-text-inverse, #FFFFFF)"
    }
  },
  // expand title - active match - dark mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-expand-title.selected-search-match.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var findReplaceStylesWithRefSyncBlock = css({
  // sync block (reference) - inactive match - light mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.ak-editor-sync-block': {
    borderRadius: "var(--ds-space-050, 4px)",
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-border-accent-magenta, #CD519D)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)"
  },
  // sync block (reference) - active match - light mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected.ak-editor-sync-block': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"
  },
  // sync block (reference) - inactive match - light mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.ak-editor-sync-block.ak-editor-selected-node': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-border-accent-magenta, #CD519D)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", ",\n\t\t0 0 0 1px ", "var(--ds-border-selected, #1868DB)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)"
  },
  // sync block (reference) - active match - light mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected.ak-editor-sync-block.ak-editor-selected-node': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #4688EC)"),
    backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"
  },
  // sync block (reference) - inactive match - dark mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-dark.ak-editor-sync-block': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #77325B)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #77325B)"
  },
  // sync block (reference) - active match - dark mode - without node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected.search-match-dark.ak-editor-sync-block': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
  },
  // sync block (reference) - inactive match - dark mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-dark.ak-editor-sync-block.ak-editor-selected-node': {
    boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #77325B)", ",\n\t\t0 0 0 1px ", "var(--ds-border-selected, #1868DB)", "\n\t\t"),
    backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #77325B)"
  },
  // sync block (reference) - active match - dark mode - with node selection
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-block.search-match-block-selected.search-match-dark.ak-editor-sync-block.ak-editor-selected-node': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #4688EC)"),
    backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
  }
});