@atlaskit/editor-shared-styles 1.6.0

package/CHANGELOG.md

@@ -0,0 +1,114 @@
+# @atlaskit/editor-shared-styles
+
+## 1.6.0
+
+### Minor Changes
+
+- [`1a07c1caf61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a07c1caf61) - CETI-93 - Fixed custom panel icon sizing and alignment when icon render as image
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.5.0
+
+### Minor Changes
+
+- [`c2c0160f566`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2c0160f566) - Bump editor-shared-styles to pick up relativeFontSizeToBase16
+
+## 1.4.1
+
+### Patch Changes
+
+- [`5c835144ef0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c835144ef0) - [ME-741][me-743] Remove PX references in editor packages and modify code block font size.
+- Updated dependencies
+
+## 1.4.0
+
+### Minor Changes
+
+- [`e2fb7440936`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2fb7440936) - ED-12430: Fix issue with Editor showing double scrollbar when context panel is visible.Update context panel to have same height as editor content area when using position absolute styles
+
+## 1.3.0
+
+### Minor Changes
+
+- [`511a91ad376`](https://bitbucket.org/atlassian/atlassian-frontend/commits/511a91ad376) - [ux] ED-12128: Update Context Panel to use set width of 320px and remove 'width' prop.
+  Remove 'width' prop from the Context Panel component as we no longer allow dynamic panel width to enforce consistency.
+
+  All references to this component can safely remove the 'wdith' prop as it is no longer part of the component props.
+
+- [`007103b93e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/007103b93e6) - [ux] ED-11993 Change behaviour of context panel so it will not push content if there is enough space to slide out without overlapping.
+  Config panel will keep existing behaviour to push content if there isn't enough space to show without overlapping content. Also add width css transition to context panel content to mimic "slide in" animation.
+
+  Add new shared const of `akEditorFullWidthLayoutLineLength` which indicates the line length of a full-width editor
+
+## 1.2.1
+
+### Patch Changes
+
+- [`7d24194b639`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d24194b639) - EDM-1717: Fix Safari danger styles for inline smart links
+
+## 1.2.0
+
+### Minor Changes
+
+- [`0615a2be97`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0615a2be97) - ED-10441: share overflow-shadow helper
+
+## 1.1.7
+
+### Patch Changes
+
+- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+
+## 1.1.6
+
+### Patch Changes
+
+- [`d6c23f1886`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6c23f1886) - Added dark mode support to table cell background colors
+
+## 1.1.5
+
+### Patch Changes
+
+- [`7895bfa4f3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7895bfa4f3) - [ux] ED-10562 Update selection styles for unsupported content
+
+  Use background colour instead of blanket styling
+  Fix an issue on Safari where text inside unsupported content appeared selected when node was selected
+
+## 1.1.4
+
+### Patch Changes
+
+- [`34674fa4cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34674fa4cd) - [ux] ED-10780 removed the threshold that enabled responsive changes
+
+## 1.1.3
+
+### Patch Changes
+
+- [`a2634b5390`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a2634b5390) - [ux] ED-10780 reduced the threshold for responcive toolbar oayout;fixed problem with italic button not working when it is in collapse menu.
+
+## 1.1.2
+
+### Patch Changes
+
+- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+  This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
+  Also add `typescript` to `devDependencies` to denote version that the package was built with.
+
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.1.0
+
+### Minor Changes
+
+- [`fbc358206c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fbc358206c) - ED-9125 ED-8837 Export values for selected border and selected box shadow, and util to disable browser text selection
+- [`4f217f1d92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f217f1d92) - ED-10168 Add new package @atlaskit/editor-shared-styles
+
+### Patch Changes
+
+- [`b9812b8b35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9812b8b35) - ED-10004 improved editor toolbar responsiveness

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "paths": {}
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/consts/package.json

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

package/dist/cjs/consts/consts.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTableCellBackgroundDarkModeColorCSS = getTableCellBackgroundDarkModeColorCSS;
+exports.getTableCellBackgroundDarkModeColors = exports.akEditorMobileMaxWidth = exports.VIEWPORT_SIZES = exports.getAkEditorFullPageMaxWidth = exports.relativeFontSizeToBase16 = exports.relativeSize = exports.editorFontSize = exports.akEditorSelectedNodeClassName = exports.ATLASSIAN_NAVIGATION_HEIGHT = exports.DEFAULT_EMBED_CARD_HEIGHT = exports.DEFAULT_EMBED_CARD_WIDTH = exports.blockNodesVerticalMargin = exports.akEditorContextPanelWidth = exports.akEditorToolbarKeylineHeight = exports.akEditorRuleBorderRadius = exports.akEditorRuleBackground = exports.akEditorLineHeight = exports.akLayoutGutterOffset = exports.akRichMediaResizeZIndex = exports.breakoutWideScaleRatio = exports.gridMediumMaxWidth = exports.akEditorSwoopCubicBezier = exports.akEditorMediaResizeHandlerPadding = exports.akEditorMediaResizeHandlerPaddingWide = exports.akEditorTableLegacyCellMinWidth = exports.akEditorTableCellMinWidth = exports.akEditorMobileBreakoutPoint = exports.akEditorGutterPadding = exports.akEditorBreakoutPadding = exports.akEditorTableNumberColumnWidth = exports.akEditorFullWidthLayoutLineLength = exports.akEditorFullWidthLayoutWidth = exports.akEditorWideLayoutWidth = exports.akEditorDefaultLayoutWidth = exports.akEditorFullPageMaxWidth = exports.akEditorTableCellBackgroundOpacity = exports.akEditorTableBorderRadius = exports.akEditorTableToolbarDelete = exports.akEditorTableBorderDelete = exports.akEditorTableCellDelete = exports.akEditorTableBorderSelected = exports.akEditorTableToolbarSelected = exports.akEditorTableCellSelected = exports.akEditorTableFloatingControls = exports.akEditorTableToolbarDark = exports.akEditorTableToolbar = exports.akEditorTableBorderDark = exports.akEditorTableBorder = exports.akEditorTableToolbarSize = exports.akEditorMentionSelected = exports.akEditorFloatingOverlapPanelZIndex = exports.akEditorFloatingDialogZIndex = exports.akEditorFloatingPanelZIndex = exports.akEditorMenuZIndex = exports.akEditorGridLineZIndex = exports.akEditorSmallZIndex = exports.akEditorStickyHeaderZIndex = exports.akEditorShadowZIndex = exports.akEditorUnitZIndex = exports.akEditorSelectedBlanketOpacity = exports.akEditorSelectedBorderBoldSize = exports.akEditorSelectedIconColor = exports.akEditorSelectedBoxShadow = exports.akEditorSelectedBorder = exports.akEditorSelectedBorderSize = exports.akEditorSelectedBlanketColor = exports.akEditorSelectedBgColor = exports.akEditorSelectedBorderColor = exports.akEditorCustomIconSize = exports.akEditorDeleteIconColor = exports.akEditorDeleteBorder = exports.akEditorDeleteBackgroundWithOpacity = exports.akEditorDeleteBackgroundShaded = exports.akEditorDeleteBackground = exports.akEditorCodeInlinePadding = exports.akEditorCodeBlockPadding = exports.akEditorCodeBackground = exports.akEditorPrimaryButton = exports.akEditorPopupText = exports.akEditorPopupBackground = exports.akEditorDropdownActiveBackground = exports.akEditorBlockquoteBorderColor = exports.akEditorActiveForeground = exports.akEditorActiveBackground = exports.akEditorSubtleAccent = exports.akEditorFocus = exports.akEditorInactiveForeground = exports.akEditorCodeFontFamily = exports.akEditorFullPageDefaultFontSize = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var akEditorFullPageDefaultFontSize = 16;
+exports.akEditorFullPageDefaultFontSize = akEditorFullPageDefaultFontSize;
+var akEditorCodeFontFamily = (0, _constants.codeFontFamily)();
+exports.akEditorCodeFontFamily = akEditorCodeFontFamily;
+var akEditorInactiveForeground = _colors.N500;
+exports.akEditorInactiveForeground = akEditorInactiveForeground;
+var akEditorFocus = _colors.B100;
+exports.akEditorFocus = akEditorFocus;
+var akEditorSubtleAccent = _colors.N40;
+exports.akEditorSubtleAccent = akEditorSubtleAccent;
+var akEditorActiveBackground = _colors.N500;
+exports.akEditorActiveBackground = akEditorActiveBackground;
+var akEditorActiveForeground = _colors.N0;
+exports.akEditorActiveForeground = akEditorActiveForeground;
+var akEditorBlockquoteBorderColor = _colors.N40;
+exports.akEditorBlockquoteBorderColor = akEditorBlockquoteBorderColor;
+var akEditorDropdownActiveBackground = _colors.N900;
+exports.akEditorDropdownActiveBackground = akEditorDropdownActiveBackground;
+var akEditorPopupBackground = _colors.N700;
+exports.akEditorPopupBackground = akEditorPopupBackground;
+var akEditorPopupText = _colors.B50;
+exports.akEditorPopupText = akEditorPopupText;
+var akEditorPrimaryButton = _colors.B400;
+exports.akEditorPrimaryButton = akEditorPrimaryButton;
+var akEditorCodeBackground = _colors.N20;
+exports.akEditorCodeBackground = akEditorCodeBackground;
+var akEditorCodeBlockPadding = '12px';
+exports.akEditorCodeBlockPadding = akEditorCodeBlockPadding;
+var akEditorCodeInlinePadding = '2px 4px';
+exports.akEditorCodeInlinePadding = akEditorCodeInlinePadding;
+var akEditorDeleteBackground = _colors.R50;
+exports.akEditorDeleteBackground = akEditorDeleteBackground;
+var akEditorDeleteBackgroundShaded = _colors.R50;
+exports.akEditorDeleteBackgroundShaded = akEditorDeleteBackgroundShaded;
+var akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)'; // R75 with 50% opacity
+
+exports.akEditorDeleteBackgroundWithOpacity = akEditorDeleteBackgroundWithOpacity;
+var akEditorDeleteBorder = _colors.R300;
+exports.akEditorDeleteBorder = akEditorDeleteBorder;
+var akEditorDeleteIconColor = _colors.R400;
+exports.akEditorDeleteIconColor = akEditorDeleteIconColor;
+var akEditorCustomIconSize = 20;
+exports.akEditorCustomIconSize = akEditorCustomIconSize;
+var akEditorSelectedBorderColor = _colors.B300;
+exports.akEditorSelectedBorderColor = akEditorSelectedBorderColor;
+var akEditorSelectedBgColor = _colors.B50;
+exports.akEditorSelectedBgColor = akEditorSelectedBgColor;
+var akEditorSelectedBlanketColor = _colors.B75;
+exports.akEditorSelectedBlanketColor = akEditorSelectedBlanketColor;
+var akEditorSelectedBorderSize = 1;
+exports.akEditorSelectedBorderSize = akEditorSelectedBorderSize;
+var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(akEditorSelectedBorderColor);
+exports.akEditorSelectedBorder = akEditorSelectedBorder;
+var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorSelectedBorderColor);
+exports.akEditorSelectedBoxShadow = akEditorSelectedBoxShadow;
+var akEditorSelectedIconColor = _colors.B400;
+exports.akEditorSelectedIconColor = akEditorSelectedIconColor;
+var akEditorSelectedBorderBoldSize = 2;
+exports.akEditorSelectedBorderBoldSize = akEditorSelectedBorderBoldSize;
+var akEditorSelectedBlanketOpacity = 0.3;
+exports.akEditorSelectedBlanketOpacity = akEditorSelectedBlanketOpacity;
+var akEditorUnitZIndex = 1;
+exports.akEditorUnitZIndex = akEditorUnitZIndex;
+var akEditorShadowZIndex = 2;
+exports.akEditorShadowZIndex = akEditorShadowZIndex;
+var akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
+
+exports.akEditorStickyHeaderZIndex = akEditorStickyHeaderZIndex;
+var akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
+exports.akEditorSmallZIndex = akEditorSmallZIndex;
+var akEditorGridLineZIndex = 9999; // z-index for main menu bar -
+// this is highest as it should be above anything else in editor below.
+
+exports.akEditorGridLineZIndex = akEditorGridLineZIndex;
+
+var akEditorMenuZIndex = _constants.layers.blanket(); // z-index used for floating toolbars like code block, table etc
+
+
+exports.akEditorMenuZIndex = akEditorMenuZIndex;
+
+var akEditorFloatingPanelZIndex = _constants.layers.layer(); // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
+
+
+exports.akEditorFloatingPanelZIndex = akEditorFloatingPanelZIndex;
+var akEditorFloatingDialogZIndex = akEditorFloatingPanelZIndex + 10; // z-index used for floating toolbars table cell menu which are above block toolbars
+
+exports.akEditorFloatingDialogZIndex = akEditorFloatingDialogZIndex;
+var akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
+exports.akEditorFloatingOverlapPanelZIndex = akEditorFloatingOverlapPanelZIndex;
+var akEditorMentionSelected = _colors.N100;
+exports.akEditorMentionSelected = akEditorMentionSelected;
+var akEditorTableToolbarSize = 11;
+exports.akEditorTableToolbarSize = akEditorTableToolbarSize;
+var akEditorTableBorder = _colors.N50;
+exports.akEditorTableBorder = akEditorTableBorder;
+var akEditorTableBorderDark = _colors.DN70;
+exports.akEditorTableBorderDark = akEditorTableBorderDark;
+var akEditorTableToolbar = _colors.N20;
+exports.akEditorTableToolbar = akEditorTableToolbar;
+var akEditorTableToolbarDark = _colors.DN50;
+exports.akEditorTableToolbarDark = akEditorTableToolbarDark;
+var akEditorTableFloatingControls = _colors.N20;
+exports.akEditorTableFloatingControls = akEditorTableFloatingControls;
+var akEditorTableCellSelected = _colors.B75;
+exports.akEditorTableCellSelected = akEditorTableCellSelected;
+var akEditorTableToolbarSelected = _colors.B100;
+exports.akEditorTableToolbarSelected = akEditorTableToolbarSelected;
+var akEditorTableBorderSelected = _colors.B300;
+exports.akEditorTableBorderSelected = akEditorTableBorderSelected;
+var akEditorTableCellDelete = _colors.R50;
+exports.akEditorTableCellDelete = akEditorTableCellDelete;
+var akEditorTableBorderDelete = _colors.R300;
+exports.akEditorTableBorderDelete = akEditorTableBorderDelete;
+var akEditorTableToolbarDelete = _colors.R75;
+exports.akEditorTableToolbarDelete = akEditorTableToolbarDelete;
+var akEditorTableBorderRadius = '3px';
+exports.akEditorTableBorderRadius = akEditorTableBorderRadius;
+var akEditorTableCellBackgroundOpacity = 0.5;
+exports.akEditorTableCellBackgroundOpacity = akEditorTableCellBackgroundOpacity;
+var akEditorFullPageMaxWidth = 680;
+exports.akEditorFullPageMaxWidth = akEditorFullPageMaxWidth;
+var akEditorDefaultLayoutWidth = 760;
+exports.akEditorDefaultLayoutWidth = akEditorDefaultLayoutWidth;
+var akEditorWideLayoutWidth = 960;
+exports.akEditorWideLayoutWidth = akEditorWideLayoutWidth;
+var akEditorFullWidthLayoutWidth = 1800;
+exports.akEditorFullWidthLayoutWidth = akEditorFullWidthLayoutWidth;
+var akEditorFullWidthLayoutLineLength = 1792;
+exports.akEditorFullWidthLayoutLineLength = akEditorFullWidthLayoutLineLength;
+var akEditorTableNumberColumnWidth = 42;
+exports.akEditorTableNumberColumnWidth = akEditorTableNumberColumnWidth;
+var akEditorBreakoutPadding = 96;
+exports.akEditorBreakoutPadding = akEditorBreakoutPadding;
+var akEditorGutterPadding = 32;
+exports.akEditorGutterPadding = akEditorGutterPadding;
+var akEditorMobileBreakoutPoint = 720;
+exports.akEditorMobileBreakoutPoint = akEditorMobileBreakoutPoint;
+var akEditorTableCellMinWidth = 48;
+exports.akEditorTableCellMinWidth = akEditorTableCellMinWidth;
+var akEditorTableLegacyCellMinWidth = 128;
+exports.akEditorTableLegacyCellMinWidth = akEditorTableLegacyCellMinWidth;
+var akEditorMediaResizeHandlerPaddingWide = 12;
+exports.akEditorMediaResizeHandlerPaddingWide = akEditorMediaResizeHandlerPaddingWide;
+var akEditorMediaResizeHandlerPadding = 4;
+exports.akEditorMediaResizeHandlerPadding = akEditorMediaResizeHandlerPadding;
+var akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
+exports.akEditorSwoopCubicBezier = akEditorSwoopCubicBezier;
+var gridMediumMaxWidth = 1024;
+exports.gridMediumMaxWidth = gridMediumMaxWidth;
+var breakoutWideScaleRatio = 1.33;
+exports.breakoutWideScaleRatio = breakoutWideScaleRatio;
+var akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
+exports.akRichMediaResizeZIndex = akRichMediaResizeZIndex;
+var akLayoutGutterOffset = (0, _constants.gridSize)() * 1.5;
+exports.akLayoutGutterOffset = akLayoutGutterOffset;
+var akEditorLineHeight = 1.714;
+exports.akEditorLineHeight = akEditorLineHeight;
+var akEditorRuleBackground = _colors.N30;
+exports.akEditorRuleBackground = akEditorRuleBackground;
+var akEditorRuleBorderRadius = '1px';
+exports.akEditorRuleBorderRadius = akEditorRuleBorderRadius;
+var akEditorToolbarKeylineHeight = 2;
+exports.akEditorToolbarKeylineHeight = akEditorToolbarKeylineHeight;
+var akEditorContextPanelWidth = 320; // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
+
+exports.akEditorContextPanelWidth = akEditorContextPanelWidth;
+var blockNodesVerticalMargin = '0.75rem';
+exports.blockNodesVerticalMargin = blockNodesVerticalMargin;
+var DEFAULT_EMBED_CARD_WIDTH = 680;
+exports.DEFAULT_EMBED_CARD_WIDTH = DEFAULT_EMBED_CARD_WIDTH;
+var DEFAULT_EMBED_CARD_HEIGHT = 480;
+exports.DEFAULT_EMBED_CARD_HEIGHT = DEFAULT_EMBED_CARD_HEIGHT;
+var ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+exports.ATLASSIAN_NAVIGATION_HEIGHT = ATLASSIAN_NAVIGATION_HEIGHT;
+var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+exports.akEditorSelectedNodeClassName = akEditorSelectedNodeClassName;
+
+var editorFontSize = function editorFontSize(_ref) {
+  var theme = _ref.theme;
+  return theme && theme.baseFontSize ? theme.baseFontSize : (0, _constants.fontSize)();
+};
+
+exports.editorFontSize = editorFontSize;
+
+var relativeSize = function relativeSize(multiplier) {
+  return function (_ref2) {
+    var theme = _ref2.theme;
+    return editorFontSize({
+      theme: theme
+    }) * multiplier;
+  };
+};
+
+exports.relativeSize = relativeSize;
+
+var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error("Invalid font size: '".concat(px, "'"));
+  }
+
+  return "".concat(px / 16, "rem");
+};
+
+exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
+
+var getAkEditorFullPageMaxWidth = function getAkEditorFullPageMaxWidth() {
+  var allowDynamicTextSizing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return allowDynamicTextSizing ? akEditorFullPageMaxWidth : akEditorDefaultLayoutWidth;
+};
+
+exports.getAkEditorFullPageMaxWidth = getAkEditorFullPageMaxWidth;
+var 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
+
+exports.VIEWPORT_SIZES = VIEWPORT_SIZES;
+var akEditorMobileMaxWidth = 0;
+exports.akEditorMobileMaxWidth = akEditorMobileMaxWidth;
+var 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(function (_ref3) {
+  var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+      colorName = _ref4[0],
+      colorValue = _ref4[1];
+
+  return getTableCellBackgroundDarkModeColorCSS(colorName, colorValue);
+}).join('\n');
+exports.getTableCellBackgroundDarkModeColors = getTableCellBackgroundDarkModeColors;
+
+function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
+  return "\n  &[colorname=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n  }\n  ");
+}

package/dist/cjs/consts/consts.test.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _consts = require("./consts");
+
+describe('consts', function () {
+  describe('relativeFontSizeToBase16', function () {
+    it('relativeFontSizeToBase16 should return 1rem with a base font size of 16px', function () {
+      expect((0, _consts.relativeFontSizeToBase16)(16)).toBe('1rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size of 14px', function () {
+      expect((0, _consts.relativeFontSizeToBase16)(14)).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', function () {
+      expect((0, _consts.relativeFontSizeToBase16)('14')).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should return 0.875rem with a base font size (string) of 14px', function () {
+      expect((0, _consts.relativeFontSizeToBase16)('14px')).toBe('0.875rem');
+    });
+    it('relativeFontSizeToBase16 should throw an error for invalid string', function () {
+      expect(function () {
+        return (0, _consts.relativeFontSizeToBase16)('px');
+      }).toThrowError();
+    });
+  });
+});

package/dist/cjs/consts/index.js

@@ -0,0 +1,541 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "akEditorActiveBackground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorActiveBackground;
+  }
+});
+Object.defineProperty(exports, "akEditorActiveForeground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorActiveForeground;
+  }
+});
+Object.defineProperty(exports, "akEditorBlockquoteBorderColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorBlockquoteBorderColor;
+  }
+});
+Object.defineProperty(exports, "akEditorBreakoutPadding", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorBreakoutPadding;
+  }
+});
+Object.defineProperty(exports, "akEditorCodeBackground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCodeBackground;
+  }
+});
+Object.defineProperty(exports, "akEditorCodeBlockPadding", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCodeBlockPadding;
+  }
+});
+Object.defineProperty(exports, "akEditorCodeFontFamily", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCodeFontFamily;
+  }
+});
+Object.defineProperty(exports, "akEditorCodeInlinePadding", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCodeInlinePadding;
+  }
+});
+Object.defineProperty(exports, "akEditorContextPanelWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorContextPanelWidth;
+  }
+});
+Object.defineProperty(exports, "akEditorDefaultLayoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorDefaultLayoutWidth;
+  }
+});
+Object.defineProperty(exports, "akEditorDeleteBackground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorDeleteBackground;
+  }
+});
+Object.defineProperty(exports, "akEditorDeleteBackgroundShaded", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorDeleteBackgroundShaded;
+  }
+});
+Object.defineProperty(exports, "akEditorDeleteBackgroundWithOpacity", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorDeleteBackgroundWithOpacity;
+  }
+});
+Object.defineProperty(exports, "akEditorDeleteBorder", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorDeleteBorder;
+  }
+});
+Object.defineProperty(exports, "akEditorDeleteIconColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorDeleteIconColor;
+  }
+});
+Object.defineProperty(exports, "akEditorDropdownActiveBackground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorDropdownActiveBackground;
+  }
+});
+Object.defineProperty(exports, "akEditorFloatingDialogZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFloatingDialogZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorFloatingOverlapPanelZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFloatingOverlapPanelZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorFloatingPanelZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFloatingPanelZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorFocus", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFocus;
+  }
+});
+Object.defineProperty(exports, "akEditorFullPageMaxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFullPageMaxWidth;
+  }
+});
+Object.defineProperty(exports, "akEditorFullPageDefaultFontSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFullPageDefaultFontSize;
+  }
+});
+Object.defineProperty(exports, "akEditorFullWidthLayoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFullWidthLayoutWidth;
+  }
+});
+Object.defineProperty(exports, "akEditorFullWidthLayoutLineLength", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorFullWidthLayoutLineLength;
+  }
+});
+Object.defineProperty(exports, "akEditorGridLineZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorGridLineZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorGutterPadding", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorGutterPadding;
+  }
+});
+Object.defineProperty(exports, "akEditorInactiveForeground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorInactiveForeground;
+  }
+});
+Object.defineProperty(exports, "akEditorMediaResizeHandlerPadding", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorMediaResizeHandlerPadding;
+  }
+});
+Object.defineProperty(exports, "akEditorMediaResizeHandlerPaddingWide", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorMediaResizeHandlerPaddingWide;
+  }
+});
+Object.defineProperty(exports, "akEditorMentionSelected", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorMentionSelected;
+  }
+});
+Object.defineProperty(exports, "akEditorMenuZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorMenuZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorStickyHeaderZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorStickyHeaderZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorMobileBreakoutPoint", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorMobileBreakoutPoint;
+  }
+});
+Object.defineProperty(exports, "akEditorPopupBackground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorPopupBackground;
+  }
+});
+Object.defineProperty(exports, "akEditorPopupText", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorPopupText;
+  }
+});
+Object.defineProperty(exports, "akEditorPrimaryButton", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorPrimaryButton;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBorderColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBorderColor;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBorderBoldSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBorderBoldSize;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBorderSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBorderSize;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBorder", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBorder;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBoxShadow", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBoxShadow;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedIconColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedIconColor;
+  }
+});
+Object.defineProperty(exports, "akEditorCustomIconSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorCustomIconSize;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBlanketColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBlanketColor;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBgColor", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBgColor;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedBlanketOpacity", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedBlanketOpacity;
+  }
+});
+Object.defineProperty(exports, "akEditorSmallZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSmallZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorShadowZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorShadowZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorSubtleAccent", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSubtleAccent;
+  }
+});
+Object.defineProperty(exports, "akEditorSwoopCubicBezier", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSwoopCubicBezier;
+  }
+});
+Object.defineProperty(exports, "akEditorTableBorder", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableBorder;
+  }
+});
+Object.defineProperty(exports, "akEditorTableBorderDark", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableBorderDark;
+  }
+});
+Object.defineProperty(exports, "akEditorTableBorderDelete", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableBorderDelete;
+  }
+});
+Object.defineProperty(exports, "akEditorTableBorderRadius", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableBorderRadius;
+  }
+});
+Object.defineProperty(exports, "akEditorTableBorderSelected", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableBorderSelected;
+  }
+});
+Object.defineProperty(exports, "akEditorTableCellBackgroundOpacity", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableCellBackgroundOpacity;
+  }
+});
+Object.defineProperty(exports, "akEditorTableCellDelete", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableCellDelete;
+  }
+});
+Object.defineProperty(exports, "akEditorTableCellMinWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableCellMinWidth;
+  }
+});
+Object.defineProperty(exports, "akEditorTableCellSelected", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableCellSelected;
+  }
+});
+Object.defineProperty(exports, "akEditorTableFloatingControls", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableFloatingControls;
+  }
+});
+Object.defineProperty(exports, "akEditorTableLegacyCellMinWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableLegacyCellMinWidth;
+  }
+});
+Object.defineProperty(exports, "akEditorTableNumberColumnWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableNumberColumnWidth;
+  }
+});
+Object.defineProperty(exports, "akEditorTableToolbar", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableToolbar;
+  }
+});
+Object.defineProperty(exports, "akEditorTableToolbarDark", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableToolbarDark;
+  }
+});
+Object.defineProperty(exports, "akEditorTableToolbarDelete", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableToolbarDelete;
+  }
+});
+Object.defineProperty(exports, "akEditorTableToolbarSelected", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableToolbarSelected;
+  }
+});
+Object.defineProperty(exports, "akEditorTableToolbarSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorTableToolbarSize;
+  }
+});
+Object.defineProperty(exports, "akEditorUnitZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorUnitZIndex;
+  }
+});
+Object.defineProperty(exports, "akEditorWideLayoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorWideLayoutWidth;
+  }
+});
+Object.defineProperty(exports, "akLayoutGutterOffset", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akLayoutGutterOffset;
+  }
+});
+Object.defineProperty(exports, "akRichMediaResizeZIndex", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akRichMediaResizeZIndex;
+  }
+});
+Object.defineProperty(exports, "blockNodesVerticalMargin", {
+  enumerable: true,
+  get: function get() {
+    return _consts.blockNodesVerticalMargin;
+  }
+});
+Object.defineProperty(exports, "breakoutWideScaleRatio", {
+  enumerable: true,
+  get: function get() {
+    return _consts.breakoutWideScaleRatio;
+  }
+});
+Object.defineProperty(exports, "editorFontSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.editorFontSize;
+  }
+});
+Object.defineProperty(exports, "gridMediumMaxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.gridMediumMaxWidth;
+  }
+});
+Object.defineProperty(exports, "getAkEditorFullPageMaxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.getAkEditorFullPageMaxWidth;
+  }
+});
+Object.defineProperty(exports, "relativeSize", {
+  enumerable: true,
+  get: function get() {
+    return _consts.relativeSize;
+  }
+});
+Object.defineProperty(exports, "relativeFontSizeToBase16", {
+  enumerable: true,
+  get: function get() {
+    return _consts.relativeFontSizeToBase16;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_EMBED_CARD_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _consts.DEFAULT_EMBED_CARD_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_EMBED_CARD_WIDTH", {
+  enumerable: true,
+  get: function get() {
+    return _consts.DEFAULT_EMBED_CARD_WIDTH;
+  }
+});
+Object.defineProperty(exports, "akEditorLineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorLineHeight;
+  }
+});
+Object.defineProperty(exports, "akEditorRuleBackground", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorRuleBackground;
+  }
+});
+Object.defineProperty(exports, "akEditorRuleBorderRadius", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorRuleBorderRadius;
+  }
+});
+Object.defineProperty(exports, "akEditorSelectedNodeClassName", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorSelectedNodeClassName;
+  }
+});
+Object.defineProperty(exports, "akEditorToolbarKeylineHeight", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorToolbarKeylineHeight;
+  }
+});
+Object.defineProperty(exports, "VIEWPORT_SIZES", {
+  enumerable: true,
+  get: function get() {
+    return _consts.VIEWPORT_SIZES;
+  }
+});
+Object.defineProperty(exports, "akEditorMobileMaxWidth", {
+  enumerable: true,
+  get: function get() {
+    return _consts.akEditorMobileMaxWidth;
+  }
+});
+Object.defineProperty(exports, "getTableCellBackgroundDarkModeColors", {
+  enumerable: true,
+  get: function get() {
+    return _consts.getTableCellBackgroundDarkModeColors;
+  }
+});
+Object.defineProperty(exports, "ATLASSIAN_NAVIGATION_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _consts.ATLASSIAN_NAVIGATION_HEIGHT;
+  }
+});
+
+var _consts = require("./consts");