@atlaskit/editor-shared-styles 2.13.4 → 2.13.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/consts/consts.js +9 -9
  3. package/dist/cjs/overflow-shadow/overflow-shadow.js +1 -2
  4. package/dist/cjs/scrollbar-styles.js +1 -1
  5. package/dist/cjs/selection/utils.js +2 -2
  6. package/dist/cjs/shortcut/shortcut.js +1 -3
  7. package/dist/es2019/consts/consts.js +10 -12
  8. package/dist/es2019/overflow-shadow/overflow-shadow.js +10 -11
  9. package/dist/es2019/scrollbar-styles.js +3 -3
  10. package/dist/es2019/selection/utils.js +3 -3
  11. package/dist/es2019/shortcut/shortcut.js +3 -5
  12. package/dist/esm/consts/consts.js +10 -12
  13. package/dist/esm/overflow-shadow/overflow-shadow.js +1 -2
  14. package/dist/esm/scrollbar-styles.js +1 -1
  15. package/dist/esm/selection/utils.js +3 -3
  16. package/dist/esm/shortcut/shortcut.js +1 -3
  17. package/dist/types/consts/consts.d.ts +4 -4
  18. package/dist/types-ts4.5/consts/consts.d.ts +4 -4
  19. package/package.json +2 -2
  20. package/src/consts/consts.ts +28 -53
  21. package/src/overflow-shadow/overflow-shadow.ts +12 -13
  22. package/src/scrollbar-styles.ts +3 -3
  23. package/src/selection/utils.ts +2 -3
  24. package/src/shortcut/shortcut.ts +3 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-shared-styles
2
2
 
3
+ ## 2.13.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#143733](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143733)
8
+ [`db2f2648fd208`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db2f2648fd208) -
9
+ [ux] Removing token fallbacks for styling. For apps supporting tokens this has no difference, for
10
+ those not there may be slight variations in colors to align with tokens.
11
+
3
12
  ## 2.13.4
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/consts/consts.js CHANGED
@@ -10,11 +10,10 @@ exports.relativeSize = exports.relativeFontSizeToBase16 = exports.gridMediumMaxW
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
12
  var _colors = require("@atlaskit/theme/colors");
13
- var _constants = require("@atlaskit/theme/constants");
14
13
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
15
14
 
16
15
  var akEditorFullPageDefaultFontSize = exports.akEditorFullPageDefaultFontSize = 16;
17
- var akEditorCodeFontFamily = exports.akEditorCodeFontFamily = (0, _constants.codeFontFamily)();
16
+ var akEditorCodeFontFamily = exports.akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
18
17
  var akEditorInactiveForeground = exports.akEditorInactiveForeground = _colors.N500;
19
18
  var akEditorFocus = exports.akEditorFocus = _colors.B100;
20
19
  var akEditorSubtleAccent = exports.akEditorSubtleAccent = _colors.N40;
@@ -38,8 +37,8 @@ var akEditorSelectedBorderColor = exports.akEditorSelectedBorderColor = _colors.
38
37
  var akEditorSelectedBgColor = exports.akEditorSelectedBgColor = _colors.B50;
39
38
  var akEditorSelectedBlanketColor = exports.akEditorSelectedBlanketColor = _colors.B75;
40
39
  var akEditorSelectedBorderSize = exports.akEditorSelectedBorderSize = 1;
41
- var akEditorSelectedBorder = exports.akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
42
- var akEditorSelectedBoxShadow = exports.akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
40
+ var akEditorSelectedBorder = exports.akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, #0C66E4)");
41
+ var akEditorSelectedBoxShadow = exports.akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, #0C66E4)");
43
42
  var akEditorSelectedIconColor = exports.akEditorSelectedIconColor = _colors.B400;
44
43
  var akEditorSelectedBorderBoldSize = exports.akEditorSelectedBorderBoldSize = 2;
45
44
  var akEditorSelectedBlanketOpacity = exports.akEditorSelectedBlanketOpacity = 0.3;
@@ -50,9 +49,9 @@ var akEditorSmallZIndex = exports.akEditorSmallZIndex = akEditorStickyHeaderZInd
50
49
  var akEditorGridLineZIndex = exports.akEditorGridLineZIndex = 2;
51
50
  // z-index for main menu bar -
52
51
  // this is highest as it should be above anything else in editor below.
53
- var akEditorMenuZIndex = exports.akEditorMenuZIndex = _constants.layers.blanket();
52
+ var akEditorMenuZIndex = exports.akEditorMenuZIndex = 500;
54
53
  // z-index used for floating toolbars like code block, table etc
55
- var akEditorFloatingPanelZIndex = exports.akEditorFloatingPanelZIndex = _constants.layers.layer();
54
+ var akEditorFloatingPanelZIndex = exports.akEditorFloatingPanelZIndex = 400;
56
55
  // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
57
56
  var akEditorFloatingDialogZIndex = exports.akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
58
57
  // z-index used for table cell menu options button on a sticky header
@@ -98,7 +97,7 @@ var breakoutWideScaleRatio = exports.breakoutWideScaleRatio = 1.33;
98
97
  var akEditorCalculatedWideLayoutWidthSmallViewport = exports.akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
99
98
  var akEditorCalculatedWideLayoutWidth = exports.akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
100
99
  var akRichMediaResizeZIndex = exports.akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
101
- var akLayoutGutterOffset = exports.akLayoutGutterOffset = (0, _constants.gridSize)() * 1.5;
100
+ var akLayoutGutterOffset = exports.akLayoutGutterOffset = 12;
102
101
  var akEditorLineHeight = exports.akEditorLineHeight = 1.714;
103
102
  var akEditorRuleBackground = exports.akEditorRuleBackground = _colors.N30;
104
103
  var akEditorRuleBorderRadius = exports.akEditorRuleBorderRadius = '1px';
@@ -115,13 +114,14 @@ var MAX_BROWSER_SCROLLBAR_HEIGHT = exports.MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
115
114
 
116
115
  // @deprecated
117
116
  var ATLASSIAN_NAVIGATION_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = '56px';
117
+ var DEFAULT_FONT_SIZE = 14;
118
118
  var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = exports.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = function FULL_PAGE_EDITOR_TOOLBAR_HEIGHT() {
119
119
  return (0, _platformFeatureFlags.fg)('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
120
120
  };
121
121
  var akEditorSelectedNodeClassName = exports.akEditorSelectedNodeClassName = 'ak-editor-selected-node';
122
122
  var editorFontSize = exports.editorFontSize = function editorFontSize(_ref) {
123
123
  var theme = _ref.theme;
124
- return theme && theme.baseFontSize ? theme.baseFontSize : (0, _constants.fontSize)();
124
+ return theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
125
125
  };
126
126
  var relativeSize = exports.relativeSize = function relativeSize(multiplier) {
127
127
  return function (_ref2) {
@@ -182,4 +182,4 @@ var getTableCellBackgroundDarkModeColors = exports.getTableCellBackgroundDarkMod
182
182
  function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
183
183
  return "\n &[colorname=\"".concat(colorName, "\"] {\n background-color: ").concat(colorValue, " !important; // !important to override default style color\n }\n ");
184
184
  }
185
- var avatarColors = exports.avatarColors = ["var(--ds-icon-accent-red, ".concat(_colors.R100, ")"), "var(--ds-background-accent-red-bolder-hovered, ".concat(_colors.R300, ")"), "var(--ds-icon-accent-magenta, ".concat(_colors.R500, ")"), "var(--ds-background-accent-magenta-bolder-hovered, ".concat(_colors.Y100, ")"), "var(--ds-icon-accent-orange, ".concat(_colors.Y300, ")"), "var(--ds-background-accent-orange-bolder-hovered, ".concat(_colors.Y500, ")"), "var(--ds-icon-accent-green, ".concat(_colors.G100, ")"), "var(--ds-background-accent-green-bolder-hovered, ".concat(_colors.G300, ")"), "var(--ds-icon-accent-blue, ".concat(_colors.G500, ")"), "var(--ds-background-accent-blue-bolder-hovered, ".concat(_colors.T100, ")"), "var(--ds-icon-accent-teal, ".concat(_colors.T300, ")"), "var(--ds-background-accent-teal-bolder-hovered, ".concat(_colors.T500, ")"), "var(--ds-icon-accent-lime, ".concat(_colors.B100, ")"), "var(--ds-background-accent-lime-bolder-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon-accent-purple, ".concat(_colors.B500, ")"), "var(--ds-background-accent-purple-bolder-hovered, ".concat(_colors.N70, ")"), "var(--ds-icon-accent-gray, ".concat(_colors.N200, ")"), "var(--ds-background-accent-gray-bolder-hovered, ".concat(_colors.N800, ")"), "var(--ds-icon-accent-yellow, ".concat(_colors.P100, ")"), "var(--ds-background-accent-yellow-bolder-hovered, ".concat(_colors.P300, ")"), "var(--ds-background-accent-yellow-bolder-pressed, ".concat(_colors.P500, ")")];
185
+ var avatarColors = exports.avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
package/dist/cjs/overflow-shadow/overflow-shadow.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.overflowShadow = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
- var _colors = require("@atlaskit/theme/colors");
11
10
  var _templateObject;
12
11
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
13
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -19,5 +18,5 @@ var overflowShadow = exports.overflowShadow = function overflowShadow(_ref) {
19
18
  var rightCoverWidthResolved = rightCoverWidth || width;
20
19
 
21
20
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
22
- return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* overflow shadow right spread */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow right perimeter */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left spread */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left perimeter */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n )\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width);
21
+ return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n/* shadow cover left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* overflow shadow right spread */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow right perimeter */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left spread */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left perimeter */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n )\n"])), "var(--ds-background-neutral, #091E420F)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, #091E420F)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width);
23
22
  };
package/dist/cjs/scrollbar-styles.js CHANGED
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.scrollbarStyles = void 0;
7
7
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
8
- var scrollbarStyles = exports.scrollbarStyles = "\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n &::-webkit-scrollbar {\n overflow: hidden,\n }\n\n &::-webkit-scrollbar-corner {\n display: none;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: ".concat("var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))", ";\n }\n\n &:hover::-webkit-scrollbar-thumb {\n background-color: ", "var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))", ";\n border-radius: 8px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background-color: ", "var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))", ";\n }\n");
8
+ var scrollbarStyles = exports.scrollbarStyles = "\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n &::-webkit-scrollbar {\n overflow: hidden,\n }\n\n &::-webkit-scrollbar-corner {\n display: none;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: ".concat("var(--ds-background-neutral-subtle, #00000000)", ";\n }\n\n &:hover::-webkit-scrollbar-thumb {\n background-color: ", "var(--ds-background-neutral-bold, #44546F)", ";\n border-radius: 8px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background-color: ", "var(--ds-background-neutral-bold-hovered, #2C3E5D)", ";\n }\n");
package/dist/cjs/selection/utils.js CHANGED
@@ -29,9 +29,9 @@ var getSelectionStyle = function getSelectionStyle(style) {
29
29
  case _types.SelectionStyle.BoxShadow:
30
30
  return "\n box-shadow: ".concat(_consts.akEditorSelectedBoxShadow, ";\n border-color: transparent;\n ");
31
31
  case _types.SelectionStyle.Background:
32
- return "background-color: ".concat("var(--ds-background-selected, ".concat(_consts.akEditorSelectedBgColor, ")"), ";");
32
+ return "background-color: ".concat("var(--ds-background-selected, #E9F2FF)", ";");
33
33
  case _types.SelectionStyle.Blanket:
34
- return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::before {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n z-index: ".concat(_consts.akEditorSmallZIndex, ";\n background-color: ", "var(--ds-blanket-selected, #B3D4FF4C)", "\n }");
34
+ return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::before {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n z-index: ".concat(_consts.akEditorSmallZIndex, ";\n background-color: ", "var(--ds-blanket-selected, #388BFF14)", "\n }");
35
35
  default:
36
36
  return '';
37
37
  }
package/dist/cjs/shortcut/shortcut.js CHANGED
@@ -7,9 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.shortcutStyle = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
- var _colors = require("@atlaskit/theme/colors");
11
- var _constants = require("@atlaskit/theme/constants");
12
10
  var _consts = require("../consts");
13
11
  var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
12
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
15
- var shortcutStyle = exports.shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", "; /* N60 at 50% */\n\tcolor: ", ";\n\tborder-radius: ", "px;\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(_colors.N100, ")"), (0, _constants.borderRadius)(), "var(--ds-space-050, 4px)", (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
13
+ var shortcutStyle = exports.shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tborder-radius: ", ";\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)", "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
package/dist/es2019/consts/consts.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import { fg } from '@atlaskit/platform-feature-flags';
2
2
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
- import { B100, B300, B400, B50, B500, B75, DN50, DN70, G100, G300, G500, N0, N100, N20, N200, N30, N40, N50, N500, N70, N700, N800, N900, P100, P300, P500, R100, R300, R400, R50, R500, R75, T100, T300, T500, Y100, Y300, Y500 } from '@atlaskit/theme/colors';
4
- import { codeFontFamily, fontSize as defaultFontSize,
5
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
6
- gridSize, layers } from '@atlaskit/theme/constants';
3
+ 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';
7
4
  export const akEditorFullPageDefaultFontSize = 16;
8
- export const akEditorCodeFontFamily = codeFontFamily();
5
+ export const akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
9
6
  export const akEditorInactiveForeground = N500;
10
7
  export const akEditorFocus = B100;
11
8
  export const akEditorSubtleAccent = N40;
@@ -29,8 +26,8 @@ export const akEditorSelectedBorderColor = B300;
29
26
  export const akEditorSelectedBgColor = B50;
30
27
  export const akEditorSelectedBlanketColor = B75;
31
28
  export const akEditorSelectedBorderSize = 1;
32
- export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`}`;
33
- export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`}`;
29
+ export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${"var(--ds-border-selected, #0C66E4)"}`;
30
+ export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${"var(--ds-border-selected, #0C66E4)"}`;
34
31
  export const akEditorSelectedIconColor = B400;
35
32
  export const akEditorSelectedBorderBoldSize = 2;
36
33
  export const akEditorSelectedBlanketOpacity = 0.3;
@@ -41,9 +38,9 @@ export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
41
38
  export const akEditorGridLineZIndex = 2;
42
39
  // z-index for main menu bar -
43
40
  // this is highest as it should be above anything else in editor below.
44
- export const akEditorMenuZIndex = layers.blanket();
41
+ export const akEditorMenuZIndex = 500;
45
42
  // z-index used for floating toolbars like code block, table etc
46
- export const akEditorFloatingPanelZIndex = layers.layer();
43
+ export const akEditorFloatingPanelZIndex = 400;
47
44
  // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
48
45
  export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
49
46
  // z-index used for table cell menu options button on a sticky header
@@ -87,7 +84,7 @@ export const breakoutWideScaleRatio = 1.33;
87
84
  export const akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
88
85
  export const akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
89
86
  export const akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
90
- export const akLayoutGutterOffset = gridSize() * 1.5;
87
+ export const akLayoutGutterOffset = 12;
91
88
  export const akEditorLineHeight = 1.714;
92
89
  export const akEditorRuleBackground = N30;
93
90
  export const akEditorRuleBorderRadius = '1px';
@@ -104,11 +101,12 @@ export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
104
101
 
105
102
  // @deprecated
106
103
  export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
104
+ const DEFAULT_FONT_SIZE = 14;
107
105
  export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () => fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
108
106
  export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
109
107
  export const editorFontSize = ({
110
108
  theme
111
- }) => theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
109
+ }) => theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
112
110
  export const relativeSize = multiplier => ({
113
111
  theme
114
112
  }) => editorFontSize({
@@ -164,4 +162,4 @@ export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
164
162
  }
165
163
  `;
166
164
  }
167
- export const avatarColors = [`var(--ds-icon-accent-red, ${R100})`, `var(--ds-background-accent-red-bolder-hovered, ${R300})`, `var(--ds-icon-accent-magenta, ${R500})`, `var(--ds-background-accent-magenta-bolder-hovered, ${Y100})`, `var(--ds-icon-accent-orange, ${Y300})`, `var(--ds-background-accent-orange-bolder-hovered, ${Y500})`, `var(--ds-icon-accent-green, ${G100})`, `var(--ds-background-accent-green-bolder-hovered, ${G300})`, `var(--ds-icon-accent-blue, ${G500})`, `var(--ds-background-accent-blue-bolder-hovered, ${T100})`, `var(--ds-icon-accent-teal, ${T300})`, `var(--ds-background-accent-teal-bolder-hovered, ${T500})`, `var(--ds-icon-accent-lime, ${B100})`, `var(--ds-background-accent-lime-bolder-hovered, ${B300})`, `var(--ds-icon-accent-purple, ${B500})`, `var(--ds-background-accent-purple-bolder-hovered, ${N70})`, `var(--ds-icon-accent-gray, ${N200})`, `var(--ds-background-accent-gray-bolder-hovered, ${N800})`, `var(--ds-icon-accent-yellow, ${P100})`, `var(--ds-background-accent-yellow-bolder-hovered, ${P300})`, `var(--ds-background-accent-yellow-bolder-pressed, ${P500})`];
165
+ export const avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
package/dist/es2019/overflow-shadow/overflow-shadow.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
2
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
3
  import { css } from '@emotion/react';
4
- import { N20 } from '@atlaskit/theme/colors';
5
4
  export const overflowShadow = ({
6
5
  leftCoverWidth,
7
6
  rightCoverWidth
@@ -15,49 +14,49 @@ export const overflowShadow = ({
15
14
  /* shadow cover left */
16
15
  linear-gradient(
17
16
  to right,
18
- ${`var(--ds-background-neutral, ${N20})`} ${leftCoverWidthResolved},
17
+ ${"var(--ds-background-neutral, #091E420F)"} ${leftCoverWidthResolved},
19
18
  transparent ${leftCoverWidthResolved}
20
19
  ),
21
20
  /* shadow cover background left */
22
21
  linear-gradient(
23
22
  to right,
24
- ${"var(--ds-surface-raised, transparent)"} ${leftCoverWidthResolved},
23
+ ${"var(--ds-surface-raised, #FFFFFF)"} ${leftCoverWidthResolved},
25
24
  transparent ${leftCoverWidthResolved}
26
25
  ),
27
26
  /* shadow cover right */
28
27
  linear-gradient(
29
28
  to left,
30
- ${`var(--ds-background-neutral, ${N20})`} ${rightCoverWidthResolved},
29
+ ${"var(--ds-background-neutral, #091E420F)"} ${rightCoverWidthResolved},
31
30
  transparent ${rightCoverWidthResolved}
32
31
  ),
33
32
  /* shadow cover background right */
34
33
  linear-gradient(
35
34
  to left,
36
- ${"var(--ds-surface-raised, transparent)"} ${rightCoverWidthResolved},
35
+ ${"var(--ds-surface-raised, #FFFFFF)"} ${rightCoverWidthResolved},
37
36
  transparent ${rightCoverWidthResolved}
38
37
  ),
39
38
  /* overflow shadow right spread */
40
39
  linear-gradient(
41
40
  to left,
42
- ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
43
- ${"var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))"} ${width}
41
+ ${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
42
+ ${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
44
43
  ),
45
44
  /* overflow shadow right perimeter */
46
45
  linear-gradient(
47
46
  to left,
48
- ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
47
+ ${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
49
48
  ${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
50
49
  ),
51
50
  /* overflow shadow left spread */
52
51
  linear-gradient(
53
52
  to right,
54
- ${"var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))"} 0,
55
- ${"var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))"} ${width}
53
+ ${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
54
+ ${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
56
55
  ),
57
56
  /* overflow shadow left perimeter */
58
57
  linear-gradient(
59
58
  to right,
60
- ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0,
59
+ ${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
61
60
  ${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
62
61
  )
63
62
  `;
package/dist/es2019/scrollbar-styles.js CHANGED
@@ -11,15 +11,15 @@ export const scrollbarStyles = `
11
11
  }
12
12
 
13
13
  &::-webkit-scrollbar-thumb {
14
- background-color: ${"var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))"};
14
+ background-color: ${"var(--ds-background-neutral-subtle, #00000000)"};
15
15
  }
16
16
 
17
17
  &:hover::-webkit-scrollbar-thumb {
18
- background-color: ${"var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))"};
18
+ background-color: ${"var(--ds-background-neutral-bold, #44546F)"};
19
19
  border-radius: 8px;
20
20
  }
21
21
 
22
22
  &::-webkit-scrollbar-thumb:hover {
23
- background-color: ${"var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))"};
23
+ background-color: ${"var(--ds-background-neutral-bold-hovered, #2C3E5D)"};
24
24
  }
25
25
  `;
package/dist/es2019/selection/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
1
+ import { akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
2
2
  import { SelectionStyle } from './types';
3
3
 
4
4
  /**
@@ -46,7 +46,7 @@ const getSelectionStyle = style => {
46
46
  border-color: transparent;
47
47
  `;
48
48
  case SelectionStyle.Background:
49
- return `background-color: ${`var(--ds-background-selected, ${akEditorSelectedBgColor})`};`;
49
+ return `background-color: ${"var(--ds-background-selected, #E9F2FF)"};`;
50
50
  case SelectionStyle.Blanket:
51
51
  return `
52
52
  position: relative;
@@ -65,7 +65,7 @@ const getSelectionStyle = style => {
65
65
  width: 100%;
66
66
  pointer-events: none;
67
67
  z-index: ${akEditorSmallZIndex};
68
- background-color: ${"var(--ds-blanket-selected, #B3D4FF4C)"}
68
+ background-color: ${"var(--ds-blanket-selected, #388BFF14)"}
69
69
  }`;
70
70
  default:
71
71
  return '';
package/dist/es2019/shortcut/shortcut.js CHANGED
@@ -1,14 +1,12 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
- import { N100 } from '@atlaskit/theme/colors';
4
- import { borderRadius } from '@atlaskit/theme/constants';
5
3
  import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
6
4
 
7
5
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
8
6
  export const shortcutStyle = css`
9
- background-color: ${"var(--ds-background-neutral, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
10
- color: ${`var(--ds-text-subtle, ${N100})`};
11
- border-radius: ${borderRadius()}px;
7
+ background-color: ${"var(--ds-background-neutral, #091E420F)"};
8
+ color: ${"var(--ds-text-subtle, #44546F)"};
9
+ border-radius: ${"var(--ds-border-radius, 3px)"};
12
10
  padding: ${"var(--ds-space-050, 4px)"};
13
11
  line-height: 12px;
14
12
  font-size: ${relativeFontSizeToBase16(11.67)};
package/dist/esm/consts/consts.js CHANGED
@@ -1,12 +1,9 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
3
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
4
- import { B100, B300, B400, B50, B500, B75, DN50, DN70, G100, G300, G500, N0, N100, N20, N200, N30, N40, N50, N500, N70, N700, N800, N900, P100, P300, P500, R100, R300, R400, R50, R500, R75, T100, T300, T500, Y100, Y300, Y500 } from '@atlaskit/theme/colors';
5
- import { codeFontFamily, fontSize as defaultFontSize,
6
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
7
- gridSize, layers } from '@atlaskit/theme/constants';
4
+ 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';
8
5
  export var akEditorFullPageDefaultFontSize = 16;
9
- export var akEditorCodeFontFamily = codeFontFamily();
6
+ export var akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
10
7
  export var akEditorInactiveForeground = N500;
11
8
  export var akEditorFocus = B100;
12
9
  export var akEditorSubtleAccent = N40;
@@ -30,8 +27,8 @@ export var akEditorSelectedBorderColor = B300;
30
27
  export var akEditorSelectedBgColor = B50;
31
28
  export var akEditorSelectedBlanketColor = B75;
32
29
  export var akEditorSelectedBorderSize = 1;
33
- export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
34
- export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
30
+ export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, #0C66E4)");
31
+ export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, #0C66E4)");
35
32
  export var akEditorSelectedIconColor = B400;
36
33
  export var akEditorSelectedBorderBoldSize = 2;
37
34
  export var akEditorSelectedBlanketOpacity = 0.3;
@@ -42,9 +39,9 @@ export var akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
42
39
  export var akEditorGridLineZIndex = 2;
43
40
  // z-index for main menu bar -
44
41
  // this is highest as it should be above anything else in editor below.
45
- export var akEditorMenuZIndex = layers.blanket();
42
+ export var akEditorMenuZIndex = 500;
46
43
  // z-index used for floating toolbars like code block, table etc
47
- export var akEditorFloatingPanelZIndex = layers.layer();
44
+ export var akEditorFloatingPanelZIndex = 400;
48
45
  // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
49
46
  export var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
50
47
  // z-index used for table cell menu options button on a sticky header
@@ -90,7 +87,7 @@ export var breakoutWideScaleRatio = 1.33;
90
87
  export var akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
91
88
  export var akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
92
89
  export var akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
93
- export var akLayoutGutterOffset = gridSize() * 1.5;
90
+ export var akLayoutGutterOffset = 12;
94
91
  export var akEditorLineHeight = 1.714;
95
92
  export var akEditorRuleBackground = N30;
96
93
  export var akEditorRuleBorderRadius = '1px';
@@ -107,13 +104,14 @@ export var MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
107
104
 
108
105
  // @deprecated
109
106
  export var ATLASSIAN_NAVIGATION_HEIGHT = '56px';
107
+ var DEFAULT_FONT_SIZE = 14;
110
108
  export var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = function FULL_PAGE_EDITOR_TOOLBAR_HEIGHT() {
111
109
  return fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
112
110
  };
113
111
  export var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
114
112
  export var editorFontSize = function editorFontSize(_ref) {
115
113
  var theme = _ref.theme;
116
- return theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
114
+ return theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
117
115
  };
118
116
  export var relativeSize = function relativeSize(multiplier) {
119
117
  return function (_ref2) {
@@ -174,4 +172,4 @@ export var getTableCellBackgroundDarkModeColors = [['White', '#000000'], ['Light
174
172
  export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
175
173
  return "\n &[colorname=\"".concat(colorName, "\"] {\n background-color: ").concat(colorValue, " !important; // !important to override default style color\n }\n ");
176
174
  }
177
- export var avatarColors = ["var(--ds-icon-accent-red, ".concat(R100, ")"), "var(--ds-background-accent-red-bolder-hovered, ".concat(R300, ")"), "var(--ds-icon-accent-magenta, ".concat(R500, ")"), "var(--ds-background-accent-magenta-bolder-hovered, ".concat(Y100, ")"), "var(--ds-icon-accent-orange, ".concat(Y300, ")"), "var(--ds-background-accent-orange-bolder-hovered, ".concat(Y500, ")"), "var(--ds-icon-accent-green, ".concat(G100, ")"), "var(--ds-background-accent-green-bolder-hovered, ".concat(G300, ")"), "var(--ds-icon-accent-blue, ".concat(G500, ")"), "var(--ds-background-accent-blue-bolder-hovered, ".concat(T100, ")"), "var(--ds-icon-accent-teal, ".concat(T300, ")"), "var(--ds-background-accent-teal-bolder-hovered, ".concat(T500, ")"), "var(--ds-icon-accent-lime, ".concat(B100, ")"), "var(--ds-background-accent-lime-bolder-hovered, ".concat(B300, ")"), "var(--ds-icon-accent-purple, ".concat(B500, ")"), "var(--ds-background-accent-purple-bolder-hovered, ".concat(N70, ")"), "var(--ds-icon-accent-gray, ".concat(N200, ")"), "var(--ds-background-accent-gray-bolder-hovered, ".concat(N800, ")"), "var(--ds-icon-accent-yellow, ".concat(P100, ")"), "var(--ds-background-accent-yellow-bolder-hovered, ".concat(P300, ")"), "var(--ds-background-accent-yellow-bolder-pressed, ".concat(P500, ")")];
175
+ export var avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-background-accent-red-bolder-hovered, #AE2E24)", "var(--ds-icon-accent-magenta, #CD519D)", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "var(--ds-icon-accent-orange, #E56910)", "var(--ds-background-accent-orange-bolder-hovered, #A54800)", "var(--ds-icon-accent-green, #22A06B)", "var(--ds-background-accent-green-bolder-hovered, #216E4E)", "var(--ds-icon-accent-blue, #1D7AFC)", "var(--ds-background-accent-blue-bolder-hovered, #0055CC)", "var(--ds-icon-accent-teal, #2898BD)", "var(--ds-background-accent-teal-bolder-hovered, #206A83)", "var(--ds-icon-accent-lime, #6A9A23)", "var(--ds-background-accent-lime-bolder-hovered, #4C6B1F)", "var(--ds-icon-accent-purple, #8270DB)", "var(--ds-background-accent-purple-bolder-hovered, #5E4DB2)", "var(--ds-icon-accent-gray, #758195)", "var(--ds-background-accent-gray-bolder-hovered, #44546F)", "var(--ds-icon-accent-yellow, #B38600)", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)"];
package/dist/esm/overflow-shadow/overflow-shadow.js CHANGED
@@ -3,7 +3,6 @@ var _templateObject;
3
3
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
4
4
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
5
5
  import { css } from '@emotion/react';
6
- import { N20 } from '@atlaskit/theme/colors';
7
6
  export var overflowShadow = function overflowShadow(_ref) {
8
7
  var leftCoverWidth = _ref.leftCoverWidth,
9
8
  rightCoverWidth = _ref.rightCoverWidth;
@@ -12,5 +11,5 @@ export var overflowShadow = function overflowShadow(_ref) {
12
11
  var rightCoverWidthResolved = rightCoverWidth || width;
13
12
 
14
13
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
15
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* overflow shadow right spread */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow right perimeter */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left spread */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left perimeter */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n )\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, transparent)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, ".concat(N20, ")"), rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, transparent)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, rgba(9, 30, 66, 0.13))", "var(--ds-UNSAFE-transparent, rgba(99, 114, 130, 0))", width, "var(--ds-shadow-overflow-perimeter, transparent)", "var(--ds-UNSAFE-transparent, transparent)", width);
14
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* shadow cover left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background left */\n linear-gradient(\n to right,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* shadow cover background right */\n linear-gradient(\n to left,\n ", " ", ",\n transparent ", "\n ),\n/* overflow shadow right spread */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow right perimeter */\n linear-gradient(\n to left,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left spread */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n ),\n /* overflow shadow left perimeter */\n linear-gradient(\n to right,\n ", " 0,\n ", " ", "\n )\n"])), "var(--ds-background-neutral, #091E420F)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", leftCoverWidthResolved, leftCoverWidthResolved, "var(--ds-background-neutral, #091E420F)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-surface-raised, #FFFFFF)", rightCoverWidthResolved, rightCoverWidthResolved, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-spread, #091e4229)", "var(--ds-UNSAFE-transparent, transparent)", width, "var(--ds-shadow-overflow-perimeter, #091e421f)", "var(--ds-UNSAFE-transparent, transparent)", width);
16
15
  };
package/dist/esm/scrollbar-styles.js CHANGED
@@ -1,2 +1,2 @@
1
1
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
2
- export var scrollbarStyles = "\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n &::-webkit-scrollbar {\n overflow: hidden,\n }\n\n &::-webkit-scrollbar-corner {\n display: none;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: ".concat("var(--ds-background-neutral-subtle, rgba(0, 0, 0, 0))", ";\n }\n\n &:hover::-webkit-scrollbar-thumb {\n background-color: ", "var(--ds-background-neutral-bold, rgba(0, 0, 0, 0.2))", ";\n border-radius: 8px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background-color: ", "var(--ds-background-neutral-bold-hovered, rgba(0, 0, 0, 0.4))", ";\n }\n");
2
+ export var scrollbarStyles = "\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n &::-webkit-scrollbar {\n overflow: hidden,\n }\n\n &::-webkit-scrollbar-corner {\n display: none;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: ".concat("var(--ds-background-neutral-subtle, #00000000)", ";\n }\n\n &:hover::-webkit-scrollbar-thumb {\n background-color: ", "var(--ds-background-neutral-bold, #44546F)", ";\n border-radius: 8px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background-color: ", "var(--ds-background-neutral-bold-hovered, #2C3E5D)", ";\n }\n");
package/dist/esm/selection/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
1
+ import { akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
2
2
  import { SelectionStyle } from './types';
3
3
 
4
4
  /**
@@ -24,9 +24,9 @@ var getSelectionStyle = function getSelectionStyle(style) {
24
24
  case SelectionStyle.BoxShadow:
25
25
  return "\n box-shadow: ".concat(akEditorSelectedBoxShadow, ";\n border-color: transparent;\n ");
26
26
  case SelectionStyle.Background:
27
- return "background-color: ".concat("var(--ds-background-selected, ".concat(akEditorSelectedBgColor, ")"), ";");
27
+ return "background-color: ".concat("var(--ds-background-selected, #E9F2FF)", ";");
28
28
  case SelectionStyle.Blanket:
29
- return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::before {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n z-index: ".concat(akEditorSmallZIndex, ";\n background-color: ", "var(--ds-blanket-selected, #B3D4FF4C)", "\n }");
29
+ return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::before {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n z-index: ".concat(akEditorSmallZIndex, ";\n background-color: ", "var(--ds-blanket-selected, #388BFF14)", "\n }");
30
30
  default:
31
31
  return '';
32
32
  }
package/dist/esm/shortcut/shortcut.js CHANGED
@@ -2,9 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  var _templateObject;
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import { css } from '@emotion/react';
5
- import { N100 } from '@atlaskit/theme/colors';
6
- import { borderRadius } from '@atlaskit/theme/constants';
7
5
  import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
8
6
 
9
7
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
10
- export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", "; /* N60 at 50% */\n\tcolor: ", ";\n\tborder-radius: ", "px;\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(N100, ")"), borderRadius(), "var(--ds-space-050, 4px)", relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
8
+ export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tborder-radius: ", ";\n\tpadding: ", ";\n\tline-height: 12px;\n\tfont-size: ", ";\n\talign-self: flex-end;\n\t@media (max-width: ", "px) {\n\t\tdisplay: none;\n\t}\n"])), "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)", "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
package/dist/types/consts/consts.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { EditorTheme } from './types';
2
2
  export declare const akEditorFullPageDefaultFontSize = 16;
3
- export declare const akEditorCodeFontFamily: string;
3
+ export declare const akEditorCodeFontFamily: "var(--ds-font-family-code)";
4
4
  export declare const akEditorInactiveForeground = "#42526E";
5
5
  export declare const akEditorFocus = "#4C9AFF";
6
6
  export declare const akEditorSubtleAccent = "#DFE1E6";
@@ -34,8 +34,8 @@ export declare const akEditorShadowZIndex = 2;
34
34
  export declare const akEditorStickyHeaderZIndex = 11;
35
35
  export declare const akEditorSmallZIndex: number;
36
36
  export declare const akEditorGridLineZIndex = 2;
37
- export declare const akEditorMenuZIndex: 500;
38
- export declare const akEditorFloatingPanelZIndex: 400;
37
+ export declare const akEditorMenuZIndex = 500;
38
+ export declare const akEditorFloatingPanelZIndex = 400;
39
39
  export declare const akEditorFloatingDialogZIndex: number;
40
40
  export declare const akEditorTableCellOnStickyHeaderZIndex: number;
41
41
  export declare const akEditorFloatingOverlapPanelZIndex: number;
@@ -76,7 +76,7 @@ export declare const breakoutWideScaleRatio = 1.33;
76
76
  export declare const akEditorCalculatedWideLayoutWidthSmallViewport = 905;
77
77
  export declare const akEditorCalculatedWideLayoutWidth = 1011;
78
78
  export declare const akRichMediaResizeZIndex: number;
79
- export declare const akLayoutGutterOffset: number;
79
+ export declare const akLayoutGutterOffset = 12;
80
80
  export declare const akEditorLineHeight = 1.714;
81
81
  export declare const akEditorRuleBackground = "#EBECF0";
82
82
  export declare const akEditorRuleBorderRadius = "1px";
package/dist/types-ts4.5/consts/consts.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { EditorTheme } from './types';
2
2
  export declare const akEditorFullPageDefaultFontSize = 16;
3
- export declare const akEditorCodeFontFamily: string;
3
+ export declare const akEditorCodeFontFamily: "var(--ds-font-family-code)";
4
4
  export declare const akEditorInactiveForeground = "#42526E";
5
5
  export declare const akEditorFocus = "#4C9AFF";
6
6
  export declare const akEditorSubtleAccent = "#DFE1E6";
@@ -34,8 +34,8 @@ export declare const akEditorShadowZIndex = 2;
34
34
  export declare const akEditorStickyHeaderZIndex = 11;
35
35
  export declare const akEditorSmallZIndex: number;
36
36
  export declare const akEditorGridLineZIndex = 2;
37
- export declare const akEditorMenuZIndex: 500;
38
- export declare const akEditorFloatingPanelZIndex: 400;
37
+ export declare const akEditorMenuZIndex = 500;
38
+ export declare const akEditorFloatingPanelZIndex = 400;
39
39
  export declare const akEditorFloatingDialogZIndex: number;
40
40
  export declare const akEditorTableCellOnStickyHeaderZIndex: number;
41
41
  export declare const akEditorFloatingOverlapPanelZIndex: number;
@@ -76,7 +76,7 @@ export declare const breakoutWideScaleRatio = 1.33;
76
76
  export declare const akEditorCalculatedWideLayoutWidthSmallViewport = 905;
77
77
  export declare const akEditorCalculatedWideLayoutWidth = 1011;
78
78
  export declare const akRichMediaResizeZIndex: number;
79
- export declare const akLayoutGutterOffset: number;
79
+ export declare const akLayoutGutterOffset = 12;
80
80
  export declare const akEditorLineHeight = 1.714;
81
81
  export declare const akEditorRuleBackground = "#EBECF0";
82
82
  export declare const akEditorRuleBorderRadius = "1px";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.13.4",
3
+ "version": "2.13.5",
4
4
  "description": "Style values used in the editor/renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
43
43
  "dependencies": {
44
44
  "@atlaskit/platform-feature-flags": "^0.3.0",
45
45
  "@atlaskit/theme": "^13.0.0",
46
- "@atlaskit/tokens": "^1.59.0",
46
+ "@atlaskit/tokens": "^1.61.0",
47
47
  "@babel/runtime": "^7.0.0",
48
48
  "@emotion/react": "^11.7.1"
49
49
  },
package/src/consts/consts.ts CHANGED
@@ -5,54 +5,29 @@ import {
5
5
  B300,
6
6
  B400,
7
7
  B50,
8
- B500,
9
8
  B75,
10
9
  DN50,
11
10
  DN70,
12
- G100,
13
- G300,
14
- G500,
15
11
  N0,
16
12
  N100,
17
13
  N20,
18
- N200,
19
14
  N30,
20
15
  N40,
21
16
  N50,
22
17
  N500,
23
- N70,
24
18
  N700,
25
- N800,
26
19
  N900,
27
- P100,
28
- P300,
29
- P500,
30
- R100,
31
20
  R300,
32
21
  R400,
33
22
  R50,
34
- R500,
35
23
  R75,
36
- T100,
37
- T300,
38
- T500,
39
- Y100,
40
- Y300,
41
- Y500,
42
24
  } from '@atlaskit/theme/colors';
43
- import {
44
- codeFontFamily,
45
- fontSize as defaultFontSize,
46
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
47
- gridSize,
48
- layers,
49
- } from '@atlaskit/theme/constants';
50
25
  import { token } from '@atlaskit/tokens';
51
26
 
52
27
  import type { EditorTheme } from './types';
53
28
 
54
29
  export const akEditorFullPageDefaultFontSize = 16;
55
- export const akEditorCodeFontFamily = codeFontFamily();
30
+ export const akEditorCodeFontFamily = token('font.family.code');
56
31
  export const akEditorInactiveForeground = N500;
57
32
  export const akEditorFocus = B100;
58
33
  export const akEditorSubtleAccent = N40;
@@ -78,11 +53,9 @@ export const akEditorSelectedBlanketColor = B75;
78
53
  export const akEditorSelectedBorderSize = 1;
79
54
  export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${token(
80
55
  'color.border.selected',
81
- akEditorSelectedBorderColor,
82
56
  )}`;
83
57
  export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${token(
84
58
  'color.border.selected',
85
- akEditorSelectedBorderColor,
86
59
  )}`;
87
60
  export const akEditorSelectedIconColor = B400;
88
61
  export const akEditorSelectedBorderBoldSize = 2;
@@ -94,9 +67,9 @@ export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
94
67
  export const akEditorGridLineZIndex = 2;
95
68
  // z-index for main menu bar -
96
69
  // this is highest as it should be above anything else in editor below.
97
- export const akEditorMenuZIndex = layers.blanket();
70
+ export const akEditorMenuZIndex = 500;
98
71
  // z-index used for floating toolbars like code block, table etc
99
- export const akEditorFloatingPanelZIndex = layers.layer();
72
+ export const akEditorFloatingPanelZIndex = 400;
100
73
  // z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
101
74
  export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
102
75
  // z-index used for table cell menu options button on a sticky header
@@ -141,7 +114,7 @@ export const breakoutWideScaleRatio = 1.33;
141
114
  export const akEditorCalculatedWideLayoutWidthSmallViewport = 905; // from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
142
115
  export const akEditorCalculatedWideLayoutWidth = 1011; // = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
143
116
  export const akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
144
- export const akLayoutGutterOffset = gridSize() * 1.5;
117
+ export const akLayoutGutterOffset = 12;
145
118
  export const akEditorLineHeight = 1.714;
146
119
  export const akEditorRuleBackground = N30;
147
120
  export const akEditorRuleBorderRadius = '1px';
@@ -161,6 +134,8 @@ export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
161
134
  // @deprecated
162
135
  export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
163
136
 
137
+ const DEFAULT_FONT_SIZE = 14;
138
+
164
139
  export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () =>
165
140
  fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')
166
141
  ? token('space.500', '40px')
@@ -169,7 +144,7 @@ export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () =>
169
144
  export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
170
145
 
171
146
  export const editorFontSize = ({ theme }: { theme: { baseFontSize?: number } | undefined }) =>
172
- theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
147
+ theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
173
148
 
174
149
  export const relativeSize =
175
150
  (multiplier: number) =>
@@ -239,25 +214,25 @@ export function getTableCellBackgroundDarkModeColorCSS(
239
214
  }
240
215
 
241
216
  export const avatarColors = [
242
- token('color.icon.accent.red', R100),
243
- token('color.background.accent.red.bolder.hovered', R300),
244
- token('color.icon.accent.magenta', R500),
245
- token('color.background.accent.magenta.bolder.hovered', Y100),
246
- token('color.icon.accent.orange', Y300),
247
- token('color.background.accent.orange.bolder.hovered', Y500),
248
- token('color.icon.accent.green', G100),
249
- token('color.background.accent.green.bolder.hovered', G300),
250
- token('color.icon.accent.blue', G500),
251
- token('color.background.accent.blue.bolder.hovered', T100),
252
- token('color.icon.accent.teal', T300),
253
- token('color.background.accent.teal.bolder.hovered', T500),
254
- token('color.icon.accent.lime', B100),
255
- token('color.background.accent.lime.bolder.hovered', B300),
256
- token('color.icon.accent.purple', B500),
257
- token('color.background.accent.purple.bolder.hovered', N70),
258
- token('color.icon.accent.gray', N200),
259
- token('color.background.accent.gray.bolder.hovered', N800),
260
- token('color.icon.accent.yellow', P100),
261
- token('color.background.accent.yellow.bolder.hovered', P300),
262
- token('color.background.accent.yellow.bolder.pressed', P500),
217
+ token('color.icon.accent.red'),
218
+ token('color.background.accent.red.bolder.hovered'),
219
+ token('color.icon.accent.magenta'),
220
+ token('color.background.accent.magenta.bolder.hovered'),
221
+ token('color.icon.accent.orange'),
222
+ token('color.background.accent.orange.bolder.hovered'),
223
+ token('color.icon.accent.green'),
224
+ token('color.background.accent.green.bolder.hovered'),
225
+ token('color.icon.accent.blue'),
226
+ token('color.background.accent.blue.bolder.hovered'),
227
+ token('color.icon.accent.teal'),
228
+ token('color.background.accent.teal.bolder.hovered'),
229
+ token('color.icon.accent.lime'),
230
+ token('color.background.accent.lime.bolder.hovered'),
231
+ token('color.icon.accent.purple'),
232
+ token('color.background.accent.purple.bolder.hovered'),
233
+ token('color.icon.accent.gray'),
234
+ token('color.background.accent.gray.bolder.hovered'),
235
+ token('color.icon.accent.yellow'),
236
+ token('color.background.accent.yellow.bolder.hovered'),
237
+ token('color.background.accent.yellow.bolder.pressed'),
263
238
  ];
package/src/overflow-shadow/overflow-shadow.ts CHANGED
@@ -2,7 +2,6 @@
2
2
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
3
3
  import { css } from '@emotion/react';
4
4
 
5
- import { N20 } from '@atlaskit/theme/colors';
6
5
  import { token } from '@atlaskit/tokens';
7
6
 
8
7
  export const overflowShadow = ({
@@ -21,50 +20,50 @@ export const overflowShadow = ({
21
20
  /* shadow cover left */
22
21
  linear-gradient(
23
22
  to right,
24
- ${token('color.background.neutral', N20)} ${leftCoverWidthResolved},
23
+ ${token('color.background.neutral')} ${leftCoverWidthResolved},
25
24
  transparent ${leftCoverWidthResolved}
26
25
  ),
27
26
  /* shadow cover background left */
28
27
  linear-gradient(
29
28
  to right,
30
- ${token('elevation.surface.raised', 'transparent')} ${leftCoverWidthResolved},
29
+ ${token('elevation.surface.raised')} ${leftCoverWidthResolved},
31
30
  transparent ${leftCoverWidthResolved}
32
31
  ),
33
32
  /* shadow cover right */
34
33
  linear-gradient(
35
34
  to left,
36
- ${token('color.background.neutral', N20)} ${rightCoverWidthResolved},
35
+ ${token('color.background.neutral')} ${rightCoverWidthResolved},
37
36
  transparent ${rightCoverWidthResolved}
38
37
  ),
39
38
  /* shadow cover background right */
40
39
  linear-gradient(
41
40
  to left,
42
- ${token('elevation.surface.raised', 'transparent')} ${rightCoverWidthResolved},
41
+ ${token('elevation.surface.raised')} ${rightCoverWidthResolved},
43
42
  transparent ${rightCoverWidthResolved}
44
43
  ),
45
44
  /* overflow shadow right spread */
46
45
  linear-gradient(
47
46
  to left,
48
- ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
49
- ${token('utility.UNSAFE.transparent', 'rgba(99, 114, 130, 0)')} ${width}
47
+ ${token('elevation.shadow.overflow.spread')} 0,
48
+ ${token('utility.UNSAFE.transparent')} ${width}
50
49
  ),
51
50
  /* overflow shadow right perimeter */
52
51
  linear-gradient(
53
52
  to left,
54
- ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
55
- ${token('utility.UNSAFE.transparent', 'transparent')} ${width}
53
+ ${token('elevation.shadow.overflow.perimeter')} 0,
54
+ ${token('utility.UNSAFE.transparent')} ${width}
56
55
  ),
57
56
  /* overflow shadow left spread */
58
57
  linear-gradient(
59
58
  to right,
60
- ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
61
- ${token('utility.UNSAFE.transparent', 'rgba(99, 114, 130, 0)')} ${width}
59
+ ${token('elevation.shadow.overflow.spread')} 0,
60
+ ${token('utility.UNSAFE.transparent')} ${width}
62
61
  ),
63
62
  /* overflow shadow left perimeter */
64
63
  linear-gradient(
65
64
  to right,
66
- ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
67
- ${token('utility.UNSAFE.transparent', 'transparent')} ${width}
65
+ ${token('elevation.shadow.overflow.perimeter')} 0,
66
+ ${token('utility.UNSAFE.transparent')} ${width}
68
67
  )
69
68
  `;
70
69
  };
package/src/scrollbar-styles.ts CHANGED
@@ -13,15 +13,15 @@ export const scrollbarStyles = `
13
13
  }
14
14
 
15
15
  &::-webkit-scrollbar-thumb {
16
- background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
16
+ background-color: ${token('color.background.neutral.subtle')};
17
17
  }
18
18
 
19
19
  &:hover::-webkit-scrollbar-thumb {
20
- background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
20
+ background-color: ${token('color.background.neutral.bold')};
21
21
  border-radius: 8px;
22
22
  }
23
23
 
24
24
  &::-webkit-scrollbar-thumb:hover {
25
- background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
25
+ background-color: ${token('color.background.neutral.bold.hovered')};
26
26
  }
27
27
  `;
package/src/selection/utils.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { token } from '@atlaskit/tokens';
2
2
 
3
3
  import {
4
- akEditorSelectedBgColor,
5
4
  akEditorSelectedBorder,
6
5
  akEditorSelectedBorderColor,
7
6
  akEditorSelectedBoxShadow,
@@ -61,7 +60,7 @@ const getSelectionStyle = (style: SelectionStyle): string => {
61
60
  border-color: transparent;
62
61
  `;
63
62
  case SelectionStyle.Background:
64
- return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
63
+ return `background-color: ${token('color.background.selected')};`;
65
64
  case SelectionStyle.Blanket:
66
65
  return `
67
66
  position: relative;
@@ -80,7 +79,7 @@ const getSelectionStyle = (style: SelectionStyle): string => {
80
79
  width: 100%;
81
80
  pointer-events: none;
82
81
  z-index: ${akEditorSmallZIndex};
83
- background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
82
+ background-color: ${token('color.blanket.selected')}
84
83
  }`;
85
84
  default:
86
85
  return '';
package/src/shortcut/shortcut.ts CHANGED
@@ -1,20 +1,15 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
3
 
4
- import { N100 } from '@atlaskit/theme/colors';
5
- import { borderRadius } from '@atlaskit/theme/constants';
6
4
  import { token } from '@atlaskit/tokens';
7
5
 
8
6
  import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
9
7
 
10
8
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
11
9
  export const shortcutStyle = css`
12
- background-color: ${token(
13
- 'color.background.neutral',
14
- 'rgba(223, 225, 229, 0.5)',
15
- )}; /* N60 at 50% */
16
- color: ${token('color.text.subtle', N100)};
17
- border-radius: ${borderRadius()}px;
10
+ background-color: ${token('color.background.neutral')};
11
+ color: ${token('color.text.subtle')};
12
+ border-radius: ${token('border.radius', '3px')};
18
13
  padding: ${token('space.050', '4px')};
19
14
  line-height: 12px;
20
15
  font-size: ${relativeFontSizeToBase16(11.67)};