@atlaskit/editor-shared-styles 2.13.4 → 3.0.0
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.
- package/CHANGELOG.md +17 -0
- package/afm-cc/tsconfig.json +0 -3
- package/afm-jira/tsconfig.json +0 -3
- package/afm-post-office/tsconfig.json +0 -3
- package/dist/cjs/consts/consts.js +20 -43
- package/dist/cjs/consts/index.js +0 -132
- package/dist/cjs/index.js +0 -132
- package/dist/cjs/overflow-shadow/overflow-shadow.js +1 -2
- package/dist/cjs/scrollbar-styles.js +1 -1
- package/dist/cjs/selection/utils.js +2 -2
- package/dist/cjs/shortcut/shortcut.js +1 -3
- package/dist/es2019/consts/consts.js +20 -44
- package/dist/es2019/consts/index.js +1 -1
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/overflow-shadow/overflow-shadow.js +10 -11
- package/dist/es2019/scrollbar-styles.js +3 -3
- package/dist/es2019/selection/utils.js +3 -3
- package/dist/es2019/shortcut/shortcut.js +3 -5
- package/dist/esm/consts/consts.js +20 -44
- package/dist/esm/consts/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/overflow-shadow/overflow-shadow.js +1 -2
- package/dist/esm/scrollbar-styles.js +1 -1
- package/dist/esm/selection/utils.js +3 -3
- package/dist/esm/shortcut/shortcut.js +1 -3
- package/dist/types/consts/consts.d.ts +14 -36
- package/dist/types/consts/index.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types-ts4.5/consts/consts.d.ts +14 -36
- package/dist/types-ts4.5/consts/index.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/package.json +2 -3
- package/src/consts/consts.ts +38 -107
- package/src/consts/index.ts +0 -22
- package/src/index.ts +0 -22
- package/src/overflow-shadow/overflow-shadow.ts +12 -13
- package/src/scrollbar-styles.ts +3 -3
- package/src/selection/utils.ts +2 -3
- package/src/shortcut/shortcut.ts +3 -8
- package/tsconfig.app.json +0 -3
|
@@ -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,
|
|
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, #
|
|
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
|
}
|
|
@@ -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: ", "
|
|
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);
|
|
@@ -1,37 +1,22 @@
|
|
|
1
1
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
2
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
3
|
-
|
|
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
|
+
|
|
7
4
|
export const akEditorFullPageDefaultFontSize = 16;
|
|
8
|
-
export const akEditorCodeFontFamily =
|
|
9
|
-
export const
|
|
10
|
-
export const
|
|
11
|
-
export const
|
|
12
|
-
export const akEditorActiveBackground = N500;
|
|
13
|
-
export const akEditorActiveForeground = N0;
|
|
14
|
-
export const akEditorBlockquoteBorderColor = N40;
|
|
15
|
-
export const akEditorDropdownActiveBackground = N900;
|
|
16
|
-
export const akEditorPopupBackground = N700;
|
|
17
|
-
export const akEditorPopupText = B50;
|
|
18
|
-
export const akEditorPrimaryButton = B400;
|
|
19
|
-
export const akEditorCodeBackground = N20;
|
|
5
|
+
export const akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
|
|
6
|
+
export const akEditorSubtleAccent = "var(--ds-background-accent-gray-subtler, #DCDFE4)";
|
|
7
|
+
export const akEditorBlockquoteBorderColor = "var(--ds-border, #091E4224)";
|
|
8
|
+
export const akEditorCodeBackground = "var(--ds-background-accent-gray-subtlest, #F1F2F4)";
|
|
20
9
|
export const akEditorCodeBlockPadding = '12px';
|
|
21
10
|
export const akEditorCodeInlinePadding = '2px 4px';
|
|
22
|
-
export const akEditorDeleteBackground =
|
|
23
|
-
export const akEditorDeleteBackgroundShaded = R50;
|
|
11
|
+
export const akEditorDeleteBackground = "var(--ds-background-danger, #FFECEB)";
|
|
24
12
|
export const akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)'; // R75 with 50% opacity
|
|
25
|
-
export const akEditorDeleteBorder =
|
|
26
|
-
export const akEditorDeleteIconColor =
|
|
13
|
+
export const akEditorDeleteBorder = "var(--ds-border-danger, #E2483D)";
|
|
14
|
+
export const akEditorDeleteIconColor = "var(--ds-icon-danger, #C9372C)";
|
|
27
15
|
export const akEditorCustomIconSize = 20;
|
|
28
|
-
export const akEditorSelectedBorderColor =
|
|
29
|
-
export const akEditorSelectedBgColor = B50;
|
|
30
|
-
export const akEditorSelectedBlanketColor = B75;
|
|
16
|
+
export const akEditorSelectedBorderColor = "var(--ds-border-selected, #0C66E4)";
|
|
31
17
|
export const akEditorSelectedBorderSize = 1;
|
|
32
|
-
export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${
|
|
33
|
-
export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${
|
|
34
|
-
export const akEditorSelectedIconColor = B400;
|
|
18
|
+
export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${"var(--ds-border-selected, #0C66E4)"}`;
|
|
19
|
+
export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${"var(--ds-border-selected, #0C66E4)"}`;
|
|
35
20
|
export const akEditorSelectedBorderBoldSize = 2;
|
|
36
21
|
export const akEditorSelectedBlanketOpacity = 0.3;
|
|
37
22
|
export const akEditorUnitZIndex = 1;
|
|
@@ -41,30 +26,21 @@ export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
|
|
|
41
26
|
export const akEditorGridLineZIndex = 2;
|
|
42
27
|
// z-index for main menu bar -
|
|
43
28
|
// this is highest as it should be above anything else in editor below.
|
|
44
|
-
export const akEditorMenuZIndex =
|
|
29
|
+
export const akEditorMenuZIndex = 500;
|
|
45
30
|
// z-index used for floating toolbars like code block, table etc
|
|
46
|
-
export const akEditorFloatingPanelZIndex =
|
|
31
|
+
export const akEditorFloatingPanelZIndex = 400;
|
|
47
32
|
// z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
|
|
48
33
|
export const akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
|
|
49
34
|
// z-index used for table cell menu options button on a sticky header
|
|
50
35
|
export const akEditorTableCellOnStickyHeaderZIndex = akEditorFloatingDialogZIndex - 5;
|
|
51
36
|
// z-index used for floating toolbars table cell menu which are above block toolbars
|
|
52
37
|
export const akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
|
|
53
|
-
export const akEditorMentionSelected = N100;
|
|
54
38
|
export const akEditorTableToolbarSize = 11;
|
|
55
|
-
export const akEditorTableBorder =
|
|
56
|
-
export const
|
|
57
|
-
export const akEditorTableToolbar = N20;
|
|
58
|
-
export const akEditorTableToolbarDark = DN50;
|
|
59
|
-
export const akEditorTableFloatingControls = N20;
|
|
60
|
-
export const akEditorTableCellSelected = B75;
|
|
39
|
+
export const akEditorTableBorder = "var(--ds-background-accent-gray-subtler, #DCDFE4)";
|
|
40
|
+
export const akEditorTableToolbar = "var(--ds-background-accent-gray-subtlest, #F1F2F4)";
|
|
61
41
|
export const akEditorTableHeaderCellBackground = '#F1F2F4';
|
|
62
42
|
export const akEditorTableHeaderCellBackgroundDark = '#2C333A';
|
|
63
|
-
export const
|
|
64
|
-
export const akEditorTableBorderSelected = B300;
|
|
65
|
-
export const akEditorTableCellDelete = R50;
|
|
66
|
-
export const akEditorTableBorderDelete = R300;
|
|
67
|
-
export const akEditorTableToolbarDelete = R75;
|
|
43
|
+
export const akEditorTableBorderSelected = "var(--ds-border-focused, #388BFF)";
|
|
68
44
|
export const akEditorTableBorderRadius = '3px';
|
|
69
45
|
export const akEditorTableCellBackgroundOpacity = 0.5;
|
|
70
46
|
export const akEditorFullPageMaxWidth = 680;
|
|
@@ -87,9 +63,8 @@ export const breakoutWideScaleRatio = 1.33;
|
|
|
87
63
|
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
64
|
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
65
|
export const akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
|
|
90
|
-
export const akLayoutGutterOffset =
|
|
66
|
+
export const akLayoutGutterOffset = 12;
|
|
91
67
|
export const akEditorLineHeight = 1.714;
|
|
92
|
-
export const akEditorRuleBackground = N30;
|
|
93
68
|
export const akEditorRuleBorderRadius = '1px';
|
|
94
69
|
export const akEditorToolbarKeylineHeight = 2;
|
|
95
70
|
export const akEditorContextPanelWidth = 320;
|
|
@@ -104,11 +79,12 @@ export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
|
|
|
104
79
|
|
|
105
80
|
// @deprecated
|
|
106
81
|
export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
|
|
82
|
+
const DEFAULT_FONT_SIZE = 14;
|
|
107
83
|
export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () => fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
|
|
108
84
|
export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
109
85
|
export const editorFontSize = ({
|
|
110
86
|
theme
|
|
111
|
-
}) => theme && theme.baseFontSize ? theme.baseFontSize :
|
|
87
|
+
}) => theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
|
|
112
88
|
export const relativeSize = multiplier => ({
|
|
113
89
|
theme
|
|
114
90
|
}) => editorFontSize({
|
|
@@ -164,4 +140,4 @@ export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
|
|
|
164
140
|
}
|
|
165
141
|
`;
|
|
166
142
|
}
|
|
167
|
-
export const avatarColors = [
|
|
143
|
+
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)"];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
|
package/dist/es2019/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
|
|
2
2
|
export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selection';
|
|
3
3
|
export { overflowShadow } from './overflow-shadow';
|
|
@@ -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
|
-
${
|
|
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,
|
|
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
|
-
${
|
|
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,
|
|
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,
|
|
43
|
-
${"var(--ds-UNSAFE-transparent,
|
|
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,
|
|
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,
|
|
55
|
-
${"var(--ds-UNSAFE-transparent,
|
|
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,
|
|
59
|
+
${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
|
|
61
60
|
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
62
61
|
)
|
|
63
62
|
`;
|
|
@@ -11,15 +11,15 @@ export const scrollbarStyles = `
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
&::-webkit-scrollbar-thumb {
|
|
14
|
-
background-color: ${"var(--ds-background-neutral-subtle,
|
|
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,
|
|
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,
|
|
23
|
+
background-color: ${"var(--ds-background-neutral-bold-hovered, #2C3E5D)"};
|
|
24
24
|
}
|
|
25
25
|
`;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
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: ${
|
|
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, #
|
|
68
|
+
background-color: ${"var(--ds-blanket-selected, #388BFF14)"}
|
|
69
69
|
}`;
|
|
70
70
|
default:
|
|
71
71
|
return '';
|
|
@@ -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,
|
|
10
|
-
color: ${
|
|
11
|
-
border-radius: ${
|
|
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)};
|
|
@@ -1,38 +1,23 @@
|
|
|
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
|
-
|
|
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
|
+
|
|
8
5
|
export var akEditorFullPageDefaultFontSize = 16;
|
|
9
|
-
export var akEditorCodeFontFamily =
|
|
10
|
-
export var
|
|
11
|
-
export var
|
|
12
|
-
export var
|
|
13
|
-
export var akEditorActiveBackground = N500;
|
|
14
|
-
export var akEditorActiveForeground = N0;
|
|
15
|
-
export var akEditorBlockquoteBorderColor = N40;
|
|
16
|
-
export var akEditorDropdownActiveBackground = N900;
|
|
17
|
-
export var akEditorPopupBackground = N700;
|
|
18
|
-
export var akEditorPopupText = B50;
|
|
19
|
-
export var akEditorPrimaryButton = B400;
|
|
20
|
-
export var akEditorCodeBackground = N20;
|
|
6
|
+
export var akEditorCodeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
|
|
7
|
+
export var akEditorSubtleAccent = "var(--ds-background-accent-gray-subtler, #DCDFE4)";
|
|
8
|
+
export var akEditorBlockquoteBorderColor = "var(--ds-border, #091E4224)";
|
|
9
|
+
export var akEditorCodeBackground = "var(--ds-background-accent-gray-subtlest, #F1F2F4)";
|
|
21
10
|
export var akEditorCodeBlockPadding = '12px';
|
|
22
11
|
export var akEditorCodeInlinePadding = '2px 4px';
|
|
23
|
-
export var akEditorDeleteBackground =
|
|
24
|
-
export var akEditorDeleteBackgroundShaded = R50;
|
|
12
|
+
export var akEditorDeleteBackground = "var(--ds-background-danger, #FFECEB)";
|
|
25
13
|
export var akEditorDeleteBackgroundWithOpacity = 'rgba(255, 189, 173, 0.5)'; // R75 with 50% opacity
|
|
26
|
-
export var akEditorDeleteBorder =
|
|
27
|
-
export var akEditorDeleteIconColor =
|
|
14
|
+
export var akEditorDeleteBorder = "var(--ds-border-danger, #E2483D)";
|
|
15
|
+
export var akEditorDeleteIconColor = "var(--ds-icon-danger, #C9372C)";
|
|
28
16
|
export var akEditorCustomIconSize = 20;
|
|
29
|
-
export var akEditorSelectedBorderColor =
|
|
30
|
-
export var akEditorSelectedBgColor = B50;
|
|
31
|
-
export var akEditorSelectedBlanketColor = B75;
|
|
17
|
+
export var akEditorSelectedBorderColor = "var(--ds-border-selected, #0C66E4)";
|
|
32
18
|
export var akEditorSelectedBorderSize = 1;
|
|
33
|
-
export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected,
|
|
34
|
-
export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected,
|
|
35
|
-
export var akEditorSelectedIconColor = B400;
|
|
19
|
+
export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ", "var(--ds-border-selected, #0C66E4)");
|
|
20
|
+
export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-selected, #0C66E4)");
|
|
36
21
|
export var akEditorSelectedBorderBoldSize = 2;
|
|
37
22
|
export var akEditorSelectedBlanketOpacity = 0.3;
|
|
38
23
|
export var akEditorUnitZIndex = 1;
|
|
@@ -42,30 +27,21 @@ export var akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
|
|
|
42
27
|
export var akEditorGridLineZIndex = 2;
|
|
43
28
|
// z-index for main menu bar -
|
|
44
29
|
// this is highest as it should be above anything else in editor below.
|
|
45
|
-
export var akEditorMenuZIndex =
|
|
30
|
+
export var akEditorMenuZIndex = 500;
|
|
46
31
|
// z-index used for floating toolbars like code block, table etc
|
|
47
|
-
export var akEditorFloatingPanelZIndex =
|
|
32
|
+
export var akEditorFloatingPanelZIndex = 400;
|
|
48
33
|
// z-index used for pickers (date, emoji, mentions) and type-aheads, hyperlinks
|
|
49
34
|
export var akEditorFloatingDialogZIndex = akEditorMenuZIndex + 10;
|
|
50
35
|
// z-index used for table cell menu options button on a sticky header
|
|
51
36
|
export var akEditorTableCellOnStickyHeaderZIndex = akEditorFloatingDialogZIndex - 5;
|
|
52
37
|
// z-index used for floating toolbars table cell menu which are above block toolbars
|
|
53
38
|
export var akEditorFloatingOverlapPanelZIndex = akEditorFloatingPanelZIndex + 5;
|
|
54
|
-
export var akEditorMentionSelected = N100;
|
|
55
39
|
export var akEditorTableToolbarSize = 11;
|
|
56
|
-
export var akEditorTableBorder =
|
|
57
|
-
export var
|
|
58
|
-
export var akEditorTableToolbar = N20;
|
|
59
|
-
export var akEditorTableToolbarDark = DN50;
|
|
60
|
-
export var akEditorTableFloatingControls = N20;
|
|
61
|
-
export var akEditorTableCellSelected = B75;
|
|
40
|
+
export var akEditorTableBorder = "var(--ds-background-accent-gray-subtler, #DCDFE4)";
|
|
41
|
+
export var akEditorTableToolbar = "var(--ds-background-accent-gray-subtlest, #F1F2F4)";
|
|
62
42
|
export var akEditorTableHeaderCellBackground = '#F1F2F4';
|
|
63
43
|
export var akEditorTableHeaderCellBackgroundDark = '#2C333A';
|
|
64
|
-
export var
|
|
65
|
-
export var akEditorTableBorderSelected = B300;
|
|
66
|
-
export var akEditorTableCellDelete = R50;
|
|
67
|
-
export var akEditorTableBorderDelete = R300;
|
|
68
|
-
export var akEditorTableToolbarDelete = R75;
|
|
44
|
+
export var akEditorTableBorderSelected = "var(--ds-border-focused, #388BFF)";
|
|
69
45
|
export var akEditorTableBorderRadius = '3px';
|
|
70
46
|
export var akEditorTableCellBackgroundOpacity = 0.5;
|
|
71
47
|
export var akEditorFullPageMaxWidth = 680;
|
|
@@ -90,9 +66,8 @@ export var breakoutWideScaleRatio = 1.33;
|
|
|
90
66
|
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
67
|
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
68
|
export var akRichMediaResizeZIndex = akEditorUnitZIndex * 99;
|
|
93
|
-
export var akLayoutGutterOffset =
|
|
69
|
+
export var akLayoutGutterOffset = 12;
|
|
94
70
|
export var akEditorLineHeight = 1.714;
|
|
95
|
-
export var akEditorRuleBackground = N30;
|
|
96
71
|
export var akEditorRuleBorderRadius = '1px';
|
|
97
72
|
export var akEditorToolbarKeylineHeight = 2;
|
|
98
73
|
export var akEditorContextPanelWidth = 320;
|
|
@@ -107,13 +82,14 @@ export var MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
|
|
|
107
82
|
|
|
108
83
|
// @deprecated
|
|
109
84
|
export var ATLASSIAN_NAVIGATION_HEIGHT = '56px';
|
|
85
|
+
var DEFAULT_FONT_SIZE = 14;
|
|
110
86
|
export var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = function FULL_PAGE_EDITOR_TOOLBAR_HEIGHT() {
|
|
111
87
|
return fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
|
|
112
88
|
};
|
|
113
89
|
export var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
114
90
|
export var editorFontSize = function editorFontSize(_ref) {
|
|
115
91
|
var theme = _ref.theme;
|
|
116
|
-
return theme && theme.baseFontSize ? theme.baseFontSize :
|
|
92
|
+
return theme && theme.baseFontSize ? theme.baseFontSize : DEFAULT_FONT_SIZE;
|
|
117
93
|
};
|
|
118
94
|
export var relativeSize = function relativeSize(multiplier) {
|
|
119
95
|
return function (_ref2) {
|
|
@@ -174,4 +150,4 @@ export var getTableCellBackgroundDarkModeColors = [['White', '#000000'], ['Light
|
|
|
174
150
|
export function getTableCellBackgroundDarkModeColorCSS(colorName, colorValue) {
|
|
175
151
|
return "\n &[colorname=\"".concat(colorName, "\"] {\n background-color: ").concat(colorValue, " !important; // !important to override default style color\n }\n ");
|
|
176
152
|
}
|
|
177
|
-
export var avatarColors = ["var(--ds-icon-accent-red,
|
|
153
|
+
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/consts/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorCustomIconSize, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
|
package/dist/esm/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { akEditorBlockquoteBorderColor, akEditorBreakoutPadding, akEditorCodeBackground, akEditorCodeBlockPadding, akEditorCodeFontFamily, akEditorCodeInlinePadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex, akEditorFloatingPanelZIndex, akEditorFullPageMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullWidthLayoutWidth, akEditorFullWidthLayoutLineLength, akEditorGridLineZIndex, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMenuZIndex, akEditorStickyHeaderZIndex, akEditorMobileBreakoutPoint, akEditorSelectedBorderColor, akEditorSelectedBorderBoldSize, akEditorSelectedBorderSize, akEditorSelectedBorder, akEditorSelectedBoxShadow, akEditorSelectedBlanketOpacity, akEditorSmallZIndex, akEditorShadowZIndex, akEditorSubtleAccent, akEditorSwoopCubicBezier, akEditorTableBorder, akEditorTableBorderRadius, akEditorTableBorderSelected, akEditorTableCellBackgroundOpacity, akEditorTableCellMinWidth, akEditorTableCellOnStickyHeaderZIndex, akEditorTableHeaderCellBackground, akEditorTableHeaderCellBackgroundDark, akEditorTableLegacyCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorWideLayoutWidth, akLayoutGutterOffset, akRichMediaResizeZIndex, avatarColors, blockNodesVerticalMargin, breakoutWideScaleRatio, editorFontSize, gridMediumMaxWidth, relativeSize, relativeFontSizeToBase16, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, akEditorLineHeight, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, akEditorToolbarKeylineHeight, MAX_BROWSER_SCROLLBAR_HEIGHT, VIEWPORT_SIZES, akEditorMobileMaxWidth, getTableCellBackgroundDarkModeColors, ATLASSIAN_NAVIGATION_HEIGHT, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, akEditorTableCellBlanketSelected, akEditorTableCellBlanketDeleted } from './consts';
|
|
2
2
|
export { SelectionStyle, getSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selection';
|
|
3
3
|
export { overflowShadow } from './overflow-shadow';
|
|
@@ -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,
|
|
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
|
};
|
|
@@ -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,
|
|
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");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
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,
|
|
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, #
|
|
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
|
}
|
|
@@ -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: ", "
|
|
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);
|