@atlaskit/editor-core 233.0.2 → 234.0.0

package/dist/esm/ui/EditorContentContainer/styles/expandStyles.js

@@ -1,346 +0,0 @@
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled,
-	@repo/internal/deprecations/deprecation-ticket-required,
-	@atlaskit/ui-styling-standard/no-exported-styles */
-
-import { css } from '@emotion/react';
-import { akEditorFullPageDefaultFontSize, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
-/**
- * Base expand styles, always applied.
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export var expandStylesBase = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__icon > div': {
-    display: 'flex'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand': {
-    // sharedExpandStyles.containerStyles({ expanded: false, focused: false })(),
-    borderWidth: "var(--ds-border-width, 1px)",
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    borderRadius: "var(--ds-radius-small, 4px)",
-    minHeight: '25px',
-    background: "var(--ds-background-neutral-subtle, #00000000)",
-    margin: "var(--ds-space-050, 4px)".concat(" 0 0"),
-    transition: 'background 0.3s cubic-bezier(0.15, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
-    padding: "var(--ds-space-100, 8px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    'td > :not(style):first-child, td > style:first-child + *': {
-      marginTop: 0
-    },
-    cursor: 'pointer',
-    boxSizing: 'border-box',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    'td > &': {
-      marginTop: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__icon-container svg': {
-      color: "var(--ds-icon-subtle, #505258)",
-      transform: 'rotate(90deg)'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&.ak-editor-selected-node:not(.danger)': {
-      // SelectionStyle.Blanket
-      position: 'relative',
-      // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
-      // in Safari. Looks like it's caused by user-select: all in the emoji element
-      WebkitUserSelect: 'text',
-      '&::before': {
-        position: 'absolute',
-        content: "''",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        width: '100%',
-        pointerEvents: 'none',
-        zIndex: 12,
-        // akEditorStickyheaderZIndex (11) + 1
-        backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
-      },
-      // SelectionStyle.Border (common case)
-      border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-selected, #1868DB)"),
-      // hideNativeBrowserTextSelectionStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&::selection, *::selection': {
-        backgroundColor: 'transparent'
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-      '&::-moz-selection, *::-moz-selection': {
-        backgroundColor: 'transparent'
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&.danger': {
-      background: "var(--ds-background-danger, #FFECEB)",
-      borderColor: "var(--ds-border-danger, #E2483D)"
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__content': {
-    // sharedExpandStyles.contentStyles({ expanded: false, focused: false })(),
-    paddingTop: "var(--ds-space-0, 0px)",
-    paddingRight: "var(--ds-space-100, 8px)",
-    paddingLeft: "var(--ds-space-300, 24px)",
-    marginLeft: "var(--ds-space-050, 4px)",
-    display: 'flow-root',
-    /* The follow rules inside @supports block are added as a part of ED-8893
-    	The fix is targeting mobile bridge on iOS 12 or below,
-    	We should consider remove this fix when we no longer support iOS 12 */
-    '@supports not (display: flow-root)': {
-      width: '100%',
-      boxSizing: 'border-box'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.expand-content-wrapper, .nestedExpand-content-wrapper': {
-      /* We visually hide the content here to preserve the content during copy+paste */
-      /* Do not add text nowrap here because inline comment navigation depends on the location of the text */
-      width: '100%',
-      display: 'block',
-      height: 0,
-      overflow: 'hidden',
-      clip: 'rect(1px, 1px, 1px, 1px)',
-      userSelect: 'none'
-    },
-    cursor: 'text',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&.ak-editor-expand__content--collapsed': {
-      display: 'none'
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__title-input': {
-    // sharedExpandStyles.titleInputStyles(),
-    outline: 'none',
-    border: 'none',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: 'calc(14rem / 16)',
-    // relativeFontSizeToBase16(14),
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 1.714,
-    fontWeight: "var(--ds-font-weight-regular, 400)",
-    color: "var(--ds-text-subtlest, #6B6E76)",
-    background: 'transparent',
-    display: 'flex',
-    flex: 1,
-    padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
-    width: '100%',
-    '&::placeholder': {
-      opacity: 1,
-      color: "var(--ds-text-subtlest, #6B6E76)"
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__title-container': {
-    // sharedExpandStyles.titleContainerStyles(),
-    padding: 0,
-    display: 'flex',
-    // Omitting alignItems: 'flex-start' as it would be overridden
-    background: 'none',
-    border: 'none',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: 'calc(14rem / 16)',
-    // relativeFontSizeToBase16(14),
-    width: '100%',
-    color: "var(--ds-text-subtle, #505258)",
-    // Omitting overflow: 'hidden' as it would be overridden
-    cursor: 'pointer',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&:focus': {
-      outline: 0
-    },
-    alignItems: 'center',
-    overflow: 'visible'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__icon-button': {
-    appearance: 'none',
-    width: "var(--ds-space-300, 24px)",
-    height: "var(--ds-space-300, 24px)",
-    border: 'none',
-    borderRadius: "var(--ds-radius-small, 4px)",
-    background: "var(--ds-background-neutral-subtle, #00000000)",
-    padding: 0,
-    margin: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    '&:disabled': {
-      cursor: 'not-allowed'
-    },
-    '&:focus-visible': {
-      outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)"),
-      outlineOffset: "var(--ds-space-025, 2px)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&:hover:not(:disabled)': {
-      background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__icon-svg': {
-      color: "var(--ds-icon-subtle, #505258)",
-      transform: 'rotate(0deg)',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-      transition: "transform 0.2s ".concat(akEditorSwoopCubicBezier, ";")
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__expanded': {
-    background: "var(--ds-background-neutral-subtle, #00000000)",
-    borderColor: "var(--ds-border, #0B120E24)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__content': {
-      paddingTop: "var(--ds-space-100, 8px)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__icon-button': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-expand__icon-svg': {
-        transform: 'rotate(90deg)'
-      }
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__input-container': {
-    width: '100%'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-expand:not(.ak-editor-expand__expanded)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__content': {
-      position: 'absolute',
-      height: '1px',
-      width: '1px',
-      overflow: 'hidden',
-      clip: 'rect(1px, 1px, 1px, 1px)',
-      whiteSpace: 'nowrap'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__icon-container svg': {
-      color: "var(--ds-icon-subtle, #505258)",
-      transform: 'rotate(0deg)'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&:not(.ak-editor-selected-node):not(.danger)': {
-      background: 'transparent',
-      borderColor: 'transparent',
-      '&:hover': {
-        borderColor: "var(--ds-border, #0B120E24)",
-        background: "var(--ds-background-neutral-subtle, #00000000)"
-      }
-    }
-  }
-});
-
-// Export the default styles with negative margins (original behavior)
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
-export var expandStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
-    marginLeft: "var(--ds-space-negative-150, -12px)",
-    marginRight: "var(--ds-space-negative-150, -12px)"
-  }
-});
-
-/**
- * This function gets the dynamic styles that scale the expand title font size based on the base font size.
- * If the base font size is not the default font size, we want the expand title font size to match the base font size.
- * @param baseFontSize - The base font size in pixels. (e.g., 16 for default, 13 for dense mode)
- * @returns SerializedStyles with expand title font size override if baseFontSize is provided and different from default.
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var getDenseExpandTitleStyles = function getDenseExpandTitleStyles(baseFontSize) {
-  if (!baseFontSize || baseFontSize === akEditorFullPageDefaultFontSize) {
-    return css({});
-  }
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__title-input': {
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography, @atlaskit/ui-styling-standard/no-unsafe-values
-      fontSize: "".concat(baseFontSize, "px")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__title-container': {
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography, @atlaskit/ui-styling-standard/no-unsafe-values
-      fontSize: "".concat(baseFontSize, "px")
-    }
-  });
-};
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
-export var expandStylesMixin_fg_platform_visual_refresh_icons = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__title-input': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 1,
-    fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-  }
-});
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
-export var expandStylesMixinNestedDnd = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-content-area.appearance-full-page .ProseMirror > .ak-editor-expand__type-expand, .fabric-editor-breakout-mark-dom > .ak-editor-expand__type-expand': {
-    marginLeft: "var(--ds-space-negative-250, -20px)",
-    marginRight: "var(--ds-space-negative-250, -20px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-expand__expanded': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-expand__content': {
-      // firstNodeWithNotMarginTop
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-      '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
-        marginTop: 0
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> div.ak-editor-expand[data-node-type="nestedExpand"]': {
-        marginTop: "var(--ds-space-050, 4px)"
-      }
-    }
-  }
-});
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var expandStylesMixin_chromeless_expand_fix = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror > .ak-editor-expand': {
-    marginLeft: 0,
-    marginRight: 0
-  }
-});