@atlaskit/editor-shared-styles 2.11.0 → 2.12.0

package/src/index.ts

@@ -1,107 +1,108 @@
 export {
-  akEditorActiveBackground,
-  akEditorActiveForeground,
-  akEditorBlockquoteBorderColor,
-  akEditorBreakoutPadding,
-  akEditorCodeBackground,
-  akEditorCodeBlockPadding,
-  akEditorCodeFontFamily,
-  akEditorCodeInlinePadding,
-  akEditorContextPanelWidth,
-  akEditorDefaultLayoutWidth,
-  akEditorDeleteBackground,
-  akEditorDeleteBackgroundShaded,
-  akEditorDeleteBackgroundWithOpacity,
-  akEditorDeleteBorder,
-  akEditorDeleteIconColor,
-  akEditorDropdownActiveBackground,
-  akEditorFloatingDialogZIndex,
-  akEditorFloatingOverlapPanelZIndex,
-  akEditorFloatingPanelZIndex,
-  akEditorFocus,
-  akEditorFullPageMaxWidth,
-  akEditorFullPageDefaultFontSize,
-  akEditorFullWidthLayoutWidth,
-  akEditorFullWidthLayoutLineLength,
-  akEditorGridLineZIndex,
-  akEditorGutterPadding,
-  akEditorInactiveForeground,
-  akEditorMediaResizeHandlerPadding,
-  akEditorMediaResizeHandlerPaddingWide,
-  akEditorMentionSelected,
-  akEditorMenuZIndex,
-  akEditorStickyHeaderZIndex,
-  akEditorMobileBreakoutPoint,
-  akEditorPopupBackground,
-  akEditorPopupText,
-  akEditorPrimaryButton,
-  akEditorSelectedBorderColor,
-  akEditorSelectedBorderBoldSize,
-  akEditorSelectedBorderSize,
-  akEditorSelectedBorder,
-  akEditorSelectedBoxShadow,
-  akEditorSelectedIconColor,
-  akEditorSelectedBlanketColor,
-  akEditorSelectedBgColor,
-  akEditorSelectedBlanketOpacity,
-  akEditorSmallZIndex,
-  akEditorShadowZIndex,
-  akEditorSubtleAccent,
-  akEditorSwoopCubicBezier,
-  akEditorTableBorder,
-  akEditorTableBorderDark,
-  akEditorTableBorderDelete,
-  akEditorTableBorderRadius,
-  akEditorTableBorderSelected,
-  akEditorTableCellBackgroundOpacity,
-  akEditorTableCellDelete,
-  akEditorTableCellMinWidth,
-  akEditorTableCellOnStickyHeaderZIndex,
-  akEditorTableCellSelected,
-  akEditorTableFloatingControls,
-  akEditorTableHeaderCellBackground,
-  akEditorTableHeaderCellBackgroundDark,
-  akEditorTableLegacyCellMinWidth,
-  akEditorTableNumberColumnWidth,
-  akEditorTableToolbar,
-  akEditorTableToolbarDark,
-  akEditorTableToolbarDelete,
-  akEditorTableToolbarSelected,
-  akEditorTableToolbarSize,
-  akEditorUnitZIndex,
-  akEditorCalculatedWideLayoutWidth,
-  akEditorWideLayoutWidth,
-  akLayoutGutterOffset,
-  akRichMediaResizeZIndex,
-  avatarColors,
-  blockNodesVerticalMargin,
-  breakoutWideScaleRatio,
-  editorFontSize,
-  gridMediumMaxWidth,
-  relativeSize,
-  relativeFontSizeToBase16,
-  DEFAULT_EMBED_CARD_HEIGHT,
-  DEFAULT_EMBED_CARD_WIDTH,
-  akEditorLineHeight,
-  akEditorRuleBackground,
-  akEditorRuleBorderRadius,
-  akEditorSelectedNodeClassName,
-  akEditorToolbarKeylineHeight,
-  MAX_BROWSER_SCROLLBAR_HEIGHT,
-  VIEWPORT_SIZES,
-  akEditorMobileMaxWidth,
-  getTableCellBackgroundDarkModeColors,
-  ATLASSIAN_NAVIGATION_HEIGHT,
-  FULL_PAGE_EDITOR_TOOLBAR_HEIGHT,
-  akEditorTableCellBlanketSelected,
-  akEditorTableCellBlanketDeleted,
+	akEditorActiveBackground,
+	akEditorActiveForeground,
+	akEditorBlockquoteBorderColor,
+	akEditorBreakoutPadding,
+	akEditorCodeBackground,
+	akEditorCodeBlockPadding,
+	akEditorCodeFontFamily,
+	akEditorCodeInlinePadding,
+	akEditorContextPanelWidth,
+	akEditorDefaultLayoutWidth,
+	akEditorDeleteBackground,
+	akEditorDeleteBackgroundShaded,
+	akEditorDeleteBackgroundWithOpacity,
+	akEditorDeleteBorder,
+	akEditorDeleteIconColor,
+	akEditorDropdownActiveBackground,
+	akEditorFloatingDialogZIndex,
+	akEditorFloatingOverlapPanelZIndex,
+	akEditorFloatingPanelZIndex,
+	akEditorFocus,
+	akEditorFullPageMaxWidth,
+	akEditorFullPageDefaultFontSize,
+	akEditorFullWidthLayoutWidth,
+	akEditorFullWidthLayoutLineLength,
+	akEditorGridLineZIndex,
+	akEditorGutterPadding,
+	akEditorGutterPaddingDynamic,
+	akEditorInactiveForeground,
+	akEditorMediaResizeHandlerPadding,
+	akEditorMediaResizeHandlerPaddingWide,
+	akEditorMentionSelected,
+	akEditorMenuZIndex,
+	akEditorStickyHeaderZIndex,
+	akEditorMobileBreakoutPoint,
+	akEditorPopupBackground,
+	akEditorPopupText,
+	akEditorPrimaryButton,
+	akEditorSelectedBorderColor,
+	akEditorSelectedBorderBoldSize,
+	akEditorSelectedBorderSize,
+	akEditorSelectedBorder,
+	akEditorSelectedBoxShadow,
+	akEditorSelectedIconColor,
+	akEditorSelectedBlanketColor,
+	akEditorSelectedBgColor,
+	akEditorSelectedBlanketOpacity,
+	akEditorSmallZIndex,
+	akEditorShadowZIndex,
+	akEditorSubtleAccent,
+	akEditorSwoopCubicBezier,
+	akEditorTableBorder,
+	akEditorTableBorderDark,
+	akEditorTableBorderDelete,
+	akEditorTableBorderRadius,
+	akEditorTableBorderSelected,
+	akEditorTableCellBackgroundOpacity,
+	akEditorTableCellDelete,
+	akEditorTableCellMinWidth,
+	akEditorTableCellOnStickyHeaderZIndex,
+	akEditorTableCellSelected,
+	akEditorTableFloatingControls,
+	akEditorTableHeaderCellBackground,
+	akEditorTableHeaderCellBackgroundDark,
+	akEditorTableLegacyCellMinWidth,
+	akEditorTableNumberColumnWidth,
+	akEditorTableToolbar,
+	akEditorTableToolbarDark,
+	akEditorTableToolbarDelete,
+	akEditorTableToolbarSelected,
+	akEditorTableToolbarSize,
+	akEditorUnitZIndex,
+	akEditorCalculatedWideLayoutWidth,
+	akEditorWideLayoutWidth,
+	akLayoutGutterOffset,
+	akRichMediaResizeZIndex,
+	avatarColors,
+	blockNodesVerticalMargin,
+	breakoutWideScaleRatio,
+	editorFontSize,
+	gridMediumMaxWidth,
+	relativeSize,
+	relativeFontSizeToBase16,
+	DEFAULT_EMBED_CARD_HEIGHT,
+	DEFAULT_EMBED_CARD_WIDTH,
+	akEditorLineHeight,
+	akEditorRuleBackground,
+	akEditorRuleBorderRadius,
+	akEditorSelectedNodeClassName,
+	akEditorToolbarKeylineHeight,
+	MAX_BROWSER_SCROLLBAR_HEIGHT,
+	VIEWPORT_SIZES,
+	akEditorMobileMaxWidth,
+	getTableCellBackgroundDarkModeColors,
+	ATLASSIAN_NAVIGATION_HEIGHT,
+	FULL_PAGE_EDITOR_TOOLBAR_HEIGHT,
+	akEditorTableCellBlanketSelected,
+	akEditorTableCellBlanketDeleted,
 } from './consts';
 export type { EditorTheme } from './consts';
 
 export {
-  SelectionStyle,
-  getSelectionStyles,
-  hideNativeBrowserTextSelectionStyles,
+	SelectionStyle,
+	getSelectionStyles,
+	hideNativeBrowserTextSelectionStyles,
 } from './selection';
 
 export { overflowShadow } from './overflow-shadow';

package/src/overflow-shadow/overflow-shadow.ts

@@ -5,18 +5,18 @@ import { N20 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 export const overflowShadow = ({
-  leftCoverWidth,
-  rightCoverWidth,
+	leftCoverWidth,
+	rightCoverWidth,
 }: {
-  leftCoverWidth?: string;
-  rightCoverWidth?: string;
+	leftCoverWidth?: string;
+	rightCoverWidth?: string;
 }) => {
-  const width = token('space.100', '8px');
-  const leftCoverWidthResolved = leftCoverWidth || width;
-  const rightCoverWidthResolved = rightCoverWidth || width;
+	const width = token('space.100', '8px');
+	const leftCoverWidthResolved = leftCoverWidth || width;
+	const rightCoverWidthResolved = rightCoverWidth || width;
 
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  return css`
+	// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+	return css`
 /* shadow cover left */
   linear-gradient(
     to right,
@@ -26,10 +26,7 @@ export const overflowShadow = ({
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${token(
-      'elevation.surface.raised',
-      'transparent',
-    )} ${leftCoverWidthResolved},
+    ${token('elevation.surface.raised', 'transparent')} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
@@ -41,10 +38,7 @@ export const overflowShadow = ({
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${token(
-      'elevation.surface.raised',
-      'transparent',
-    )} ${rightCoverWidthResolved},
+    ${token('elevation.surface.raised', 'transparent')} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* overflow shadow right spread */

package/src/scrollbar-styles.ts

@@ -13,24 +13,15 @@ export const scrollbarStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: ${token(
-      'color.background.neutral.subtle',
-      'rgba(0, 0, 0, 0)',
-    )};
+    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background-color: ${token(
-      'color.background.neutral.bold',
-      'rgba(0, 0, 0, 0.2)',
-    )};
+    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
     border-radius: 8px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${token(
-      'color.background.neutral.bold.hovered',
-      'rgba(0, 0, 0, 0.4)',
-    )};
+    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
   }
 `;

package/src/selection/__tests__/unit/utils.ts

@@ -2,42 +2,38 @@ import { SelectionStyle } from '../../types';
 import { getSelectionStyles } from '../../utils';
 
 describe('selection plugin: utils', () => {
-  describe('getSelectionStyles', () => {
-    const selectionStyles = [
-      { name: 'border', style: SelectionStyle.Border, regex: /border\:/ },
-      {
-        name: 'box-shadow',
-        style: SelectionStyle.BoxShadow,
-        regex: /box\-shadow\:/,
-      },
-      {
-        name: 'background',
-        style: SelectionStyle.Background,
-        regex: /background\-color\:/,
-      },
-      { name: 'blanket', style: SelectionStyle.Blanket, regex: /\:\:before/ },
-    ];
+	describe('getSelectionStyles', () => {
+		const selectionStyles = [
+			{ name: 'border', style: SelectionStyle.Border, regex: /border\:/ },
+			{
+				name: 'box-shadow',
+				style: SelectionStyle.BoxShadow,
+				regex: /box\-shadow\:/,
+			},
+			{
+				name: 'background',
+				style: SelectionStyle.Background,
+				regex: /background\-color\:/,
+			},
+			{ name: 'blanket', style: SelectionStyle.Blanket, regex: /\:\:before/ },
+		];
 
-    for (const selectionStyle of selectionStyles) {
-      it(`gets styles for ${selectionStyle.name}`, () => {
-        const css = getSelectionStyles([selectionStyle.style]);
-        expect(css).toMatch(selectionStyle.regex);
-      });
-    }
+		for (const selectionStyle of selectionStyles) {
+			it(`gets styles for ${selectionStyle.name}`, () => {
+				const css = getSelectionStyles([selectionStyle.style]);
+				expect(css).toMatch(selectionStyle.regex);
+			});
+		}
 
-    it('combines multiple styles', () => {
-      const allStyles = selectionStyles.map(
-        (selectionStyle) => selectionStyle.style,
-      );
-      const allRegex = selectionStyles.map(
-        (selectionStyle) => selectionStyle.regex,
-      );
+		it('combines multiple styles', () => {
+			const allStyles = selectionStyles.map((selectionStyle) => selectionStyle.style);
+			const allRegex = selectionStyles.map((selectionStyle) => selectionStyle.regex);
 
-      const css = getSelectionStyles(allStyles);
+			const css = getSelectionStyles(allStyles);
 
-      for (const regex of allRegex) {
-        expect(css).toMatch(regex);
-      }
-    });
-  });
+			for (const regex of allRegex) {
+				expect(css).toMatch(regex);
+			}
+		});
+	});
 });

package/src/selection/index.ts

@@ -1,5 +1,2 @@
 export { SelectionStyle } from './types';
-export {
-  getSelectionStyles,
-  hideNativeBrowserTextSelectionStyles,
-} from './utils';
+export { getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './utils';

package/src/selection/types.ts

@@ -4,8 +4,8 @@
  * file in editor-core
  */
 export enum SelectionStyle {
-  Border,
-  BoxShadow,
-  Background,
-  Blanket,
+	Border,
+	BoxShadow,
+	Background,
+	Blanket,
 }

package/src/selection/utils.ts

@@ -1,11 +1,11 @@
 import { token } from '@atlaskit/tokens';
 
 import {
-  akEditorSelectedBgColor,
-  akEditorSelectedBorder,
-  akEditorSelectedBorderColor,
-  akEditorSelectedBoxShadow,
-  akEditorSmallZIndex,
+	akEditorSelectedBgColor,
+	akEditorSelectedBorder,
+	akEditorSelectedBorderColor,
+	akEditorSelectedBoxShadow,
+	akEditorSmallZIndex,
 } from '../consts';
 
 import { SelectionStyle } from './types';
@@ -20,13 +20,11 @@ import { SelectionStyle } from './types';
  *  }
  *
  */
-export const getSelectionStyles = (
-  selectionStyles: Array<SelectionStyle>,
-): string =>
-  selectionStyles
-    .map((selectionStyle) => getSelectionStyle(selectionStyle))
-    .concat(hideNativeBrowserTextSelectionStyles)
-    .join('\n');
+export const getSelectionStyles = (selectionStyles: Array<SelectionStyle>): string =>
+	selectionStyles
+		.map((selectionStyle) => getSelectionStyle(selectionStyle))
+		.concat(hideNativeBrowserTextSelectionStyles)
+		.join('\n');
 
 export const hideNativeBrowserTextSelectionStyles = `
   ::selection,*::selection {
@@ -38,9 +36,9 @@ export const hideNativeBrowserTextSelectionStyles = `
 `;
 
 const getSelectionStyle = (style: SelectionStyle): string => {
-  switch (style) {
-    case SelectionStyle.Border:
-      return `
+	switch (style) {
+		case SelectionStyle.Border:
+			return `
         border: ${akEditorSelectedBorder};
 
         // Fixes ED-15246: Trello card is visible through a border of a table border
@@ -57,18 +55,15 @@ const getSelectionStyle = (style: SelectionStyle): string => {
           display: inline-block;
         }
       `;
-    case SelectionStyle.BoxShadow:
-      return `
+		case SelectionStyle.BoxShadow:
+			return `
         box-shadow: ${akEditorSelectedBoxShadow};
         border-color: transparent;
         `;
-    case SelectionStyle.Background:
-      return `background-color: ${token(
-        'color.background.selected',
-        akEditorSelectedBgColor,
-      )};`;
-    case SelectionStyle.Blanket:
-      return `
+		case SelectionStyle.Background:
+			return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
+		case SelectionStyle.Blanket:
+			return `
         position: relative;
 
         // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
@@ -87,7 +82,7 @@ const getSelectionStyle = (style: SelectionStyle): string => {
           z-index: ${akEditorSmallZIndex};
           background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
         }`;
-    default:
-      return '';
-  }
+		default:
+			return '';
+	}
 };

package/src/shortcut/shortcut.ts

@@ -8,17 +8,17 @@ import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const shortcutStyle = css`
-  background-color: ${token(
-    'color.background.neutral',
-    'rgba(223, 225, 229, 0.5)',
-  )}; /* N60 at 50% */
-  color: ${token('color.text.subtle', N100)};
-  border-radius: ${borderRadius()}px;
-  padding: ${token('space.050', '4px')};
-  line-height: 12px;
-  font-size: ${relativeFontSizeToBase16(11.67)};
-  align-self: flex-end;
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    display: none;
-  }
+	background-color: ${token(
+		'color.background.neutral',
+		'rgba(223, 225, 229, 0.5)',
+	)}; /* N60 at 50% */
+	color: ${token('color.text.subtle', N100)};
+	border-radius: ${borderRadius()}px;
+	padding: ${token('space.050', '4px')};
+	line-height: 12px;
+	font-size: ${relativeFontSizeToBase16(11.67)};
+	align-self: flex-end;
+	@media (max-width: ${akEditorMobileMaxWidth}px) {
+		display: none;
+	}
 `;

package/tsconfig.app.json

@@ -1,46 +1,46 @@
 {
-  "extends": "../../../tsconfig.base.json",
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
-  "exclude": [
-    "**/docs/**/*",
-    "**/__tests__/**/*",
-    "**/vr-tests/**/*",
-    "**/__perf__/**/*",
-    "**/*.test.*",
-    "**/test.*",
-    "**/test-*",
-    "**/examples.ts",
-    "**/examples.tsx",
-    "**/examples/*.ts",
-    "**/examples/*.tsx",
-    "**/examples/**/*.ts",
-    "**/examples/**/*.tsx",
-    "**/storybook/**/*",
-    "**/constellation/**/*",
-    ".storybook/*",
-    "./__fixtures__/**/*",
-    "./__generated__/**/*",
-    "./mocks/**/*",
-    "./__mocks__/**/*",
-    "**/mock.*",
-    "**/codemods/**/*.ts",
-    "**/codemods/**/*.tsx"
-  ],
-  "compilerOptions": {
-    "baseUrl": "./",
-    "composite": true,
-    "outDir": "../../../tsDist/@atlaskit__editor-shared-styles/app"
-  },
-  "references": [
-    {
-      "path": "../../platform/feature-flags/tsconfig.app.json"
-    },
-    {
-      "path": "../../design-system/theme/tsconfig.app.json"
-    },
-    {
-      "path": "../../design-system/tokens/tsconfig.app.json"
-    }
-  ],
-  "files": []
+	"extends": "../../../tsconfig.base.json",
+	"include": ["./src/**/*.ts", "./src/**/*.tsx"],
+	"exclude": [
+		"**/docs/**/*",
+		"**/__tests__/**/*",
+		"**/vr-tests/**/*",
+		"**/__perf__/**/*",
+		"**/*.test.*",
+		"**/test.*",
+		"**/test-*",
+		"**/examples.ts",
+		"**/examples.tsx",
+		"**/examples/*.ts",
+		"**/examples/*.tsx",
+		"**/examples/**/*.ts",
+		"**/examples/**/*.tsx",
+		"**/storybook/**/*",
+		"**/constellation/**/*",
+		".storybook/*",
+		"./__fixtures__/**/*",
+		"./__generated__/**/*",
+		"./mocks/**/*",
+		"./__mocks__/**/*",
+		"**/mock.*",
+		"**/codemods/**/*.ts",
+		"**/codemods/**/*.tsx"
+	],
+	"compilerOptions": {
+		"baseUrl": "./",
+		"composite": true,
+		"outDir": "../../../tsDist/@atlaskit__editor-shared-styles/app"
+	},
+	"references": [
+		{
+			"path": "../../platform/feature-flags/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/theme/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/tokens/tsconfig.app.json"
+		}
+	],
+	"files": []
 }