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

A package contains Atlassian editor core functionality

/* 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 const 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)"}, 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 const findReplaceStylesWithCodeblockColorContrastFix = 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
  [`.${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)"} !important`
    }
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const findReplaceStylesNewWithCodeblockColorContrastFix = 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
  [`.${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)"} !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 const 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: `
		inset 0 0 0 1px ${"var(--ds-border-accent-magenta, #CD519D)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}
		`,
    // 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)"} !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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"}
		`,
    // 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)"} !important`
  },
  // text - inactive match - dark mode
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.search-match-text.search-match-dark': {
    boxShadow: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"}
		`,
    // 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)"} !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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
		`,
    // 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)"} !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: `
			inset 0 0 0 1px ${"var(--ds-border-accent-magenta, #CD519D)"},
			inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}
			`
    },
    // 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: `
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"},
			0px 0px 0px 5px ${"var(--ds-border-accent-magenta, #CD519D)"}
			`
    }
  },
  // 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: `
			inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
			inset 0 0 0 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"}
			`
    },
    // 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: `
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"},
			0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
			`
    }
  },
  // 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: `
			inset 0 0 0 1px ${"var(--ds-border-accent-magenta, #CD519D)"},
			inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"},
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}
			`
    },
    // 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: `
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"},
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"},
			0px 0px 0px 5px ${"var(--ds-border-accent-magenta, #CD519D)"}
			`
    }
  },
  // 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: `
			inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
			inset 0 0 0 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"},
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}
			`
    },
    // 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: `
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"},
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"},
			0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
			`
    }
  },
  // 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: `
			inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
			inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"}
			`
    },
    // 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: `
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"},
			0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}
			`
    }
  },
  // 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: `
			inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
			inset 0 0 0 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
			`
    },
    // 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: `
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
			0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}
			`
    }
  },
  // 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: `
			inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
			inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"},
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}
			`
    },
    // 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: `
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"},
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"},
			0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}
			`
    }
  },
  // 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: `
			inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
			inset 0 0 0 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}
			`
    },
    // 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: `
			0 0 0 1px ${"var(--ds-border-selected, #1868DB)"},
			0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
			0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}
			`
    }
  },
  // 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: `
		inset 0 0 0 1px ${"var(--ds-border-accent-magenta, #CD519D)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}
		`,
    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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"}
		`,
    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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"}
		`,
    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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
		`,
    backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const 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: `
		inset 0 0 0 1px ${"var(--ds-border-accent-magenta, #CD519D)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}
		`,
    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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)"}
		`,
    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: `
		inset 0 0 0 1px ${"var(--ds-border-accent-magenta, #CD519D)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"},
		0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}
		`,
    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 ${"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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"}
		`,
    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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
		inset 0 0 0 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
		`,
    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: `
		inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
		inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #77325B)"},
		0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}
		`,
    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 ${"var(--ds-border-focused, #4688EC)"}`,
    backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
  }
});