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

A package contains Atlassian editor core functionality

/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
import { boxShadowSelectionStyles, dangerBorderStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
export const DateSharedCssClassName = {
  DATE_WRAPPER: `date-lozenger-container`,
  DATE_CONTAINER: 'dateView-content-wrap'
};

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const dateVanillaStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span`]: {
    backgroundColor: "var(--ds-background-neutral, #0515240F)",
    color: "var(--ds-text, #292A2E)",
    borderRadius: "var(--ds-radius-small, 4px)",
    padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
    margin: '0 1px',
    position: 'relative',
    transition: 'background 0.3s',
    whiteSpace: 'nowrap',
    cursor: 'unset'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span:hover`]: {
    backgroundColor: "var(--ds-background-neutral-hovered, #0B120E24)"
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red`]: {
    backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
    color: "var(--ds-text-accent-red, #AE2E24)"
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
  [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red:hover`]: {
    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
  }
});

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const dateStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  [`.${DateSharedCssClassName.DATE_WRAPPER} span`]: {
    whiteSpace: 'unset'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
  [`.${DateSharedCssClassName.DATE_CONTAINER}`]: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
    [`.${DateSharedCssClassName.DATE_WRAPPER}`]: {
      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
      lineHeight: 'initial',
      cursor: 'pointer'
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '&.ak-editor-selected-node': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
      [`.${DateSharedCssClassName.DATE_WRAPPER} > 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
      hideNativeBrowserTextSelectionStyles]
    }
  },
  // 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
    [`.${DateSharedCssClassName.DATE_CONTAINER}.ak-editor-selected-node .${DateSharedCssClassName.DATE_WRAPPER} > span`]: {
      boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
    }
  }
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const dangerDateStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
  [`.${DateSharedCssClassName.DATE_CONTAINER}.ak-editor-selected-node.danger .${DateSharedCssClassName.DATE_WRAPPER} > span`]:
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
  [dangerBorderStyles]
});