@atlaskit/editor-shared-styles 1.6.0

package/dist/types/selection/utils.d.ts

@@ -0,0 +1,13 @@
+import { SelectionStyle } from './types';
+/**
+ * Adds correct selection styling for a node
+ * Pass in which selection style properties you want and it will return css string of necessary styles
+ *
+ * eg.
+ *  .expand.ak-editor-selected-node {
+ *    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+ *  }
+ *
+ */
+export declare const getSelectionStyles: (selectionStyles: Array<SelectionStyle>) => string;
+export declare const hideNativeBrowserTextSelectionStyles = "\n  ::selection,*::selection {\n    background-color: transparent;\n  }\n  ::-moz-selection,*::-moz-selection {\n    background-color: transparent;\n  }\n";

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@atlaskit/editor-shared-styles",
+  "version": "1.6.0",
+  "description": "Style values used in the editor/renderer",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "atlassian": {
+    "team": "Editor",
+    "inPublicMirror": true,
+    "releaseModel": "scheduled"
+  },
+  "af:exports": {
+    "./consts": "./src/consts/index.ts",
+    "./selection": "./src/selection/index.ts",
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/theme": "^12.0.0",
+    "@babel/runtime": "^7.0.0",
+    "styled-components": "^3.2.6"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "typescript": "3.9.6"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "circular-dependencies": [
+        "file-level"
+      ],
+      "import-structure": "atlassian-conventions"
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+}

package/selection/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/editor-shared-styles/selection",
+  "main": "../dist/cjs/selection/index.js",
+  "module": "../dist/esm/selection/index.js",
+  "module:es2019": "../dist/es2019/selection/index.js",
+  "types": "../dist/types/selection/index.d.ts"
+}

package/src/consts/consts.test.ts

@@ -0,0 +1,21 @@
+import { relativeFontSizeToBase16 } from './consts';
+
+describe('consts', () => {
+  describe('relativeFontSizeToBase16', () => {
+    it('relativeFontSizeToBase16 should return 1rem with a base font size of 16px', () => {
+      expect(relativeFontSizeToBase16(16)).toBe('1rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size of 14px', () => {
+      expect(relativeFontSizeToBase16(14)).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', () => {
+      expect(relativeFontSizeToBase16('14')).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', () => {
+      expect(relativeFontSizeToBase16('14px')).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should throw an error for invalid string', () => {
+      expect(() => relativeFontSizeToBase16('px')).toThrowError();
+    });
+  });
+});

package/src/consts/consts.ts

@@ -0,0 +1,204 @@
+import {
+  B100,
+  B300,
+  B400,
+  B50,
+  B75,
+  DN50,
+  DN70,
+  N0,
+  N100,
+  N20,
+  N30,
+  N40,
+  N50,
+  N500,
+  N700,
+  N900,
+  R300,
+  R400,
+  R50,
+  R75,
+} from '@atlaskit/theme/colors';
+import {
+  codeFontFamily,
+  fontSize as defaultFontSize,
+  gridSize,
+  layers,
+} from '@atlaskit/theme/constants';
+
+import { EditorTheme } from './types';
+
+export const akEditorFullPageDefaultFontSize = 16;
+export const akEditorCodeFontFamily = codeFontFamily();
+export const akEditorInactiveForeground = N500;
+export const akEditorFocus = B100;
+export const akEditorSubtleAccent = N40;
+export const akEditorActiveBackground = N500;
+export const akEditorActiveForeground = N0;
+export const akEditorBlockquoteBorderColor = N40;
+export const akEditorDropdownActiveBackground = N900;
+export const akEditorPopupBackground = N700;
+export const akEditorPopupText = B50;
+export const akEditorPrimaryButton = B400;
+export const akEditorCodeBackground = N20;
+export const akEditorCodeBlockPadding = '12px';
+export const akEditorCodeInlinePadding = '2px 4px';
+export const akEditorDeleteBackground = R50;
+export const akEditorDeleteBackgroundShaded = R50;
+export const akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)'; // R75 with 50% opacity
+export const akEditorDeleteBorder = R300;
+export const akEditorDeleteIconColor = R400;
+export const akEditorCustomIconSize = 20;
+export const akEditorSelectedBorderColor = B300;
+export const akEditorSelectedBgColor = B50;
+export const akEditorSelectedBlanketColor = B75;
+export const akEditorSelectedBorderSize = 1;
+export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${akEditorSelectedBorderColor}`;
+export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${akEditorSelectedBorderColor}`;
+export const akEditorSelectedIconColor = B400;
+export const akEditorSelectedBorderBoldSize = 2;
+export const akEditorSelectedBlanketOpacity = 0.3;
+export const akEditorUnitZIndex = 1;
+export const akEditorShadowZIndex = 2;
+export const akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
+export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
+export const akEditorGridLineZIndex = 9999;
+// z-index for main menu bar -
+// this is highest as it should be above anything else in editor below.
+export const akEditorMenuZIndex = layers.blanket();
+// z-index used for floating toolbars like code block, table etc
+export const akEditorFloatingPanelZIndex = layers.layer();
+// z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
+export const akEditorFloatingDialogZIndex = akEditorFloatingPanelZIndex + 10;
+// z-index used for floating toolbars table cell menu which are above block toolbars
+export const akEditorFloatingOverlapPanelZIndex =
+  akEditorFloatingPanelZIndex + 5;
+export const akEditorMentionSelected = N100;
+export const akEditorTableToolbarSize = 11;
+export const akEditorTableBorder = N50;
+export const akEditorTableBorderDark = DN70;
+export const akEditorTableToolbar = N20;
+export const akEditorTableToolbarDark = DN50;
+export const akEditorTableFloatingControls = N20;
+export const akEditorTableCellSelected = B75;
+export const akEditorTableToolbarSelected = B100;
+export const akEditorTableBorderSelected = B300;
+export const akEditorTableCellDelete = R50;
+export const akEditorTableBorderDelete = R300;
+export const akEditorTableToolbarDelete = R75;
+export const akEditorTableBorderRadius = '3px';
+export const akEditorTableCellBackgroundOpacity = 0.5;
+export const akEditorFullPageMaxWidth = 680;
+export const akEditorDefaultLayoutWidth = 760;
+export const akEditorWideLayoutWidth = 960;
+export const akEditorFullWidthLayoutWidth = 1800;
+export const akEditorFullWidthLayoutLineLength = 1792;
+export const akEditorTableNumberColumnWidth = 42;
+export const akEditorBreakoutPadding = 96;
+export const akEditorGutterPadding = 32;
+export const akEditorMobileBreakoutPoint = 720;
+export const akEditorTableCellMinWidth = 48;
+export const akEditorTableLegacyCellMinWidth = 128;
+export const akEditorMediaResizeHandlerPaddingWide = 12;
+export const akEditorMediaResizeHandlerPadding = 4;
+export const akEditorSwoopCubicBezier = `cubic-bezier(0.15, 1, 0.3, 1)`;
+export const gridMediumMaxWidth = 1024;
+export const breakoutWideScaleRatio = 1.33;
+export const akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
+export const akLayoutGutterOffset = gridSize() * 1.5;
+export const akEditorLineHeight = 1.714;
+export const akEditorRuleBackground = N30;
+export const akEditorRuleBorderRadius = '1px';
+export const akEditorToolbarKeylineHeight = 2;
+export const akEditorContextPanelWidth = 320;
+
+// @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
+export const blockNodesVerticalMargin = '0.75rem';
+
+export const DEFAULT_EMBED_CARD_WIDTH = 680;
+export const DEFAULT_EMBED_CARD_HEIGHT = 480;
+
+export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+
+export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+
+export const editorFontSize = ({ theme }: { theme: EditorTheme }) =>
+  theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
+
+export const relativeSize = (multiplier: number) => ({
+  theme,
+}: {
+  theme: EditorTheme;
+}) => editorFontSize({ theme }) * multiplier;
+
+export const relativeFontSizeToBase16 = (px: number | string) => {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+  if (isNaN(px)) {
+    throw new Error(`Invalid font size: '${px}'`);
+  }
+  return `${px / 16}rem`;
+};
+
+export const getAkEditorFullPageMaxWidth = (
+  allowDynamicTextSizing: boolean = false,
+) =>
+  allowDynamicTextSizing
+    ? akEditorFullPageMaxWidth
+    : akEditorDefaultLayoutWidth;
+
+export const VIEWPORT_SIZES = {
+  laptopHiDPI: { width: 1440, height: 900 },
+  laptopMDPI: { width: 1280, height: 800 },
+  tabletL: { width: 1024, height: 1366 },
+  tabletS: { width: 768, height: 1024 },
+  mobileM: { width: 414, height: 736 },
+  mobileS: { width: 375, height: 667 },
+  mobileXS: { width: 320, height: 568 },
+};
+
+// to be updated in ED-10790: this should be variable threshold based on how many buttons enabled on main toolbar
+export const akEditorMobileMaxWidth = 0;
+
+export const getTableCellBackgroundDarkModeColors = [
+  ['White', '#000000'],
+  ['Light blue', '#0C294F'],
+  ['Light teal', '#0C343B'],
+  ['Light green', '#052E21'],
+  ['Light yellow', '#484123'],
+  ['Light red', '#441C13'],
+  ['Light purple', '#282249'],
+
+  ['Light gray', '#202328'],
+  ['Blue', '#0B3165'],
+  ['Teal', '#044853'],
+  ['Green', '#053927'],
+  ['Yellow', '#6F5C25'],
+  ['Red', '#582013'],
+  ['Purple', '#3E327B'],
+
+  ['Gray', '#475262'],
+  ['Dark blue', '#003884'],
+  ['Dark teal', '#055866'],
+  ['Dark green', '#044932'],
+  ['Dark yellow', '#82641C'],
+  ['Dark red', '#6B2A19'],
+  ['Dark purple', '#4D38B2'],
+]
+  .map(([colorName, colorValue]) =>
+    getTableCellBackgroundDarkModeColorCSS(colorName, colorValue),
+  )
+  .join('\n');
+
+export function getTableCellBackgroundDarkModeColorCSS(
+  colorName: string,
+  colorValue: string,
+): string {
+  return `
+  &[colorname="${colorName}"] {
+    background-color: ${colorValue} !important; // !important to override default style color
+  }
+  `;
+}

package/src/consts/index.ts

@@ -0,0 +1,92 @@
+export type { EditorTheme } from './types';
+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,
+  akEditorCustomIconSize,
+  akEditorSelectedBlanketColor,
+  akEditorSelectedBgColor,
+  akEditorSelectedBlanketOpacity,
+  akEditorSmallZIndex,
+  akEditorShadowZIndex,
+  akEditorSubtleAccent,
+  akEditorSwoopCubicBezier,
+  akEditorTableBorder,
+  akEditorTableBorderDark,
+  akEditorTableBorderDelete,
+  akEditorTableBorderRadius,
+  akEditorTableBorderSelected,
+  akEditorTableCellBackgroundOpacity,
+  akEditorTableCellDelete,
+  akEditorTableCellMinWidth,
+  akEditorTableCellSelected,
+  akEditorTableFloatingControls,
+  akEditorTableLegacyCellMinWidth,
+  akEditorTableNumberColumnWidth,
+  akEditorTableToolbar,
+  akEditorTableToolbarDark,
+  akEditorTableToolbarDelete,
+  akEditorTableToolbarSelected,
+  akEditorTableToolbarSize,
+  akEditorUnitZIndex,
+  akEditorWideLayoutWidth,
+  akLayoutGutterOffset,
+  akRichMediaResizeZIndex,
+  blockNodesVerticalMargin,
+  breakoutWideScaleRatio,
+  editorFontSize,
+  gridMediumMaxWidth,
+  getAkEditorFullPageMaxWidth,
+  relativeSize,
+  relativeFontSizeToBase16,
+  DEFAULT_EMBED_CARD_HEIGHT,
+  DEFAULT_EMBED_CARD_WIDTH,
+  akEditorLineHeight,
+  akEditorRuleBackground,
+  akEditorRuleBorderRadius,
+  akEditorSelectedNodeClassName,
+  akEditorToolbarKeylineHeight,
+  VIEWPORT_SIZES,
+  akEditorMobileMaxWidth,
+  getTableCellBackgroundDarkModeColors,
+  ATLASSIAN_NAVIGATION_HEIGHT,
+} from './consts';

package/src/consts/types.ts

@@ -0,0 +1,3 @@
+export type EditorTheme = {
+  baseFontSize?: number;
+};

package/src/index.ts

@@ -0,0 +1,99 @@
+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,
+  akEditorTableCellSelected,
+  akEditorTableFloatingControls,
+  akEditorTableLegacyCellMinWidth,
+  akEditorTableNumberColumnWidth,
+  akEditorTableToolbar,
+  akEditorTableToolbarDark,
+  akEditorTableToolbarDelete,
+  akEditorTableToolbarSelected,
+  akEditorTableToolbarSize,
+  akEditorUnitZIndex,
+  akEditorWideLayoutWidth,
+  akLayoutGutterOffset,
+  akRichMediaResizeZIndex,
+  blockNodesVerticalMargin,
+  breakoutWideScaleRatio,
+  editorFontSize,
+  gridMediumMaxWidth,
+  getAkEditorFullPageMaxWidth,
+  relativeSize,
+  relativeFontSizeToBase16,
+  DEFAULT_EMBED_CARD_HEIGHT,
+  DEFAULT_EMBED_CARD_WIDTH,
+  akEditorLineHeight,
+  akEditorRuleBackground,
+  akEditorRuleBorderRadius,
+  akEditorSelectedNodeClassName,
+  akEditorToolbarKeylineHeight,
+  VIEWPORT_SIZES,
+  akEditorMobileMaxWidth,
+  getTableCellBackgroundDarkModeColors,
+  ATLASSIAN_NAVIGATION_HEIGHT,
+} from './consts';
+export type { EditorTheme } from './consts';
+
+export {
+  SelectionStyle,
+  getSelectionStyles,
+  hideNativeBrowserTextSelectionStyles,
+} from './selection';
+
+export { overflowShadow } from './overflow-shadow';