UNPKG

@atlaskit/editor-core

Version:

A package contains Atlassian editor core functionality

268 lines (262 loc) • 21.2 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.findReplaceStylesWithRefSyncBlock = exports.findReplaceStylesWithCodeblockColorContrastFix = exports.findReplaceStylesNewWithCodeblockColorContrastFix = exports.findReplaceStylesNewWithA11Y = exports.findReplaceStyles = void 0; var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _react = require("@emotion/react"); var _styles = require("@atlaskit/editor-common/styles"); /* eslint-disable @atlaskit/ui-styling-standard/use-compiled */ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles var findReplaceStyles = exports.findReplaceStyles = (0, _react.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 var findReplaceStylesWithCodeblockColorContrastFix = exports.findReplaceStylesWithCodeblockColorContrastFix = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.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 var findReplaceStylesNewWithCodeblockColorContrastFix = exports.findReplaceStylesNewWithCodeblockColorContrastFix = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.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 var findReplaceStylesNewWithA11Y = exports.findReplaceStylesNewWithA11Y = (0, _react.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 var findReplaceStylesWithRefSyncBlock = exports.findReplaceStylesWithRefSyncBlock = (0, _react.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)" } });