@atlaskit/editor-shared-styles 2.12.1 → 2.13.1

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 CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-shared-styles
2
2
 
3
+ ## 2.13.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#121871](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121871)
8
+ [`3d286b2a5bdcb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d286b2a5bdcb) -
9
+ ED-24090 increase guideline z index
10
+
11
+ ## 2.13.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#118748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118748)
16
+ [`10bb9e2def098`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10bb9e2def098) -
17
+ [ux] Reduce media single max width padding for all editors except full page
18
+
3
19
  ## 2.12.1
4
20
 
5
21
  ### Patch Changes
@@ -47,7 +47,7 @@ var akEditorUnitZIndex = exports.akEditorUnitZIndex = 1;
47
47
  var akEditorShadowZIndex = exports.akEditorShadowZIndex = 2;
48
48
  var akEditorStickyHeaderZIndex = exports.akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
49
49
  var akEditorSmallZIndex = exports.akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
50
- var akEditorGridLineZIndex = exports.akEditorGridLineZIndex = 1;
50
+ var akEditorGridLineZIndex = exports.akEditorGridLineZIndex = 2;
51
51
  // z-index for main menu bar -
52
52
  // this is highest as it should be above anything else in editor below.
53
53
  var akEditorMenuZIndex = exports.akEditorMenuZIndex = _constants.layers.blanket();
@@ -85,7 +85,7 @@ var akEditorTableNumberColumnWidth = exports.akEditorTableNumberColumnWidth = 42
85
85
  var akEditorBreakoutPadding = exports.akEditorBreakoutPadding = 96;
86
86
  var akEditorGutterPadding = exports.akEditorGutterPadding = 32;
87
87
  var akEditorGutterPaddingDynamic = exports.akEditorGutterPaddingDynamic = function akEditorGutterPaddingDynamic() {
88
- return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
88
+ return (0, _platformFeatureFlags.fg)('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
89
89
  };
90
90
  var akEditorMobileBreakoutPoint = exports.akEditorMobileBreakoutPoint = 720;
91
91
  var akEditorTableCellMinWidth = exports.akEditorTableCellMinWidth = 48;
@@ -115,7 +115,7 @@ var MAX_BROWSER_SCROLLBAR_HEIGHT = exports.MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
115
115
  // @deprecated
116
116
  var ATLASSIAN_NAVIGATION_HEIGHT = exports.ATLASSIAN_NAVIGATION_HEIGHT = '56px';
117
117
  var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = exports.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = function FULL_PAGE_EDITOR_TOOLBAR_HEIGHT() {
118
- return (0, _platformFeatureFlags.getBooleanFF)('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
118
+ return (0, _platformFeatureFlags.fg)('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
119
119
  };
120
120
  var akEditorSelectedNodeClassName = exports.akEditorSelectedNodeClassName = 'ak-editor-selected-node';
121
121
  var editorFontSize = exports.editorFontSize = function editorFontSize(_ref) {
@@ -11,5 +11,5 @@ var _colors = require("@atlaskit/theme/colors");
11
11
  var _constants = require("@atlaskit/theme/constants");
12
12
  var _consts = require("../consts");
13
13
  var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
14
+ // 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
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);
@@ -1,4 +1,4 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
2
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
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
4
  import { codeFontFamily, fontSize as defaultFontSize,
@@ -38,7 +38,7 @@ export const akEditorUnitZIndex = 1;
38
38
  export const akEditorShadowZIndex = 2;
39
39
  export const akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
40
40
  export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
41
- export const akEditorGridLineZIndex = 1;
41
+ export const akEditorGridLineZIndex = 2;
42
42
  // z-index for main menu bar -
43
43
  // this is highest as it should be above anything else in editor below.
44
44
  export const akEditorMenuZIndex = layers.blanket();
@@ -75,7 +75,7 @@ export const akEditorFullWidthLayoutLineLength = 1792;
75
75
  export const akEditorTableNumberColumnWidth = 42;
76
76
  export const akEditorBreakoutPadding = 96;
77
77
  export const akEditorGutterPadding = 32;
78
- export const akEditorGutterPaddingDynamic = () => getBooleanFF('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
78
+ export const akEditorGutterPaddingDynamic = () => fg('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
79
79
  export const akEditorMobileBreakoutPoint = 720;
80
80
  export const akEditorTableCellMinWidth = 48;
81
81
  export const akEditorTableLegacyCellMinWidth = 128;
@@ -103,7 +103,7 @@ export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
103
103
 
104
104
  // @deprecated
105
105
  export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
106
- export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () => getBooleanFF('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
106
+ export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () => fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
107
107
  export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
108
108
  export const editorFontSize = ({
109
109
  theme
@@ -4,7 +4,7 @@ import { N100 } from '@atlaskit/theme/colors';
4
4
  import { borderRadius } from '@atlaskit/theme/constants';
5
5
  import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
6
6
 
7
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
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
8
8
  export const shortcutStyle = css`
9
9
  background-color: ${"var(--ds-background-neutral, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
10
10
  color: ${`var(--ds-text-subtle, ${N100})`};
@@ -1,5 +1,5 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
3
3
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
4
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
5
  import { codeFontFamily, fontSize as defaultFontSize,
@@ -39,7 +39,7 @@ export var akEditorUnitZIndex = 1;
39
39
  export var akEditorShadowZIndex = 2;
40
40
  export var akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
41
41
  export var akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
42
- export var akEditorGridLineZIndex = 1;
42
+ export var akEditorGridLineZIndex = 2;
43
43
  // z-index for main menu bar -
44
44
  // this is highest as it should be above anything else in editor below.
45
45
  export var akEditorMenuZIndex = layers.blanket();
@@ -77,7 +77,7 @@ export var akEditorTableNumberColumnWidth = 42;
77
77
  export var akEditorBreakoutPadding = 96;
78
78
  export var akEditorGutterPadding = 32;
79
79
  export var akEditorGutterPaddingDynamic = function akEditorGutterPaddingDynamic() {
80
- return getBooleanFF('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
80
+ return fg('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
81
81
  };
82
82
  export var akEditorMobileBreakoutPoint = 720;
83
83
  export var akEditorTableCellMinWidth = 48;
@@ -107,7 +107,7 @@ export var MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
107
107
  // @deprecated
108
108
  export var ATLASSIAN_NAVIGATION_HEIGHT = '56px';
109
109
  export var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = function FULL_PAGE_EDITOR_TOOLBAR_HEIGHT() {
110
- return getBooleanFF('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
110
+ return fg('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-space-500, 40px)" : '56px';
111
111
  };
112
112
  export var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
113
113
  export var editorFontSize = function editorFontSize(_ref) {
@@ -6,5 +6,5 @@ import { N100 } from '@atlaskit/theme/colors';
6
6
  import { borderRadius } from '@atlaskit/theme/constants';
7
7
  import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
8
8
 
9
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
9
+ // 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
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);
@@ -33,7 +33,7 @@ export declare const akEditorUnitZIndex = 1;
33
33
  export declare const akEditorShadowZIndex = 2;
34
34
  export declare const akEditorStickyHeaderZIndex = 11;
35
35
  export declare const akEditorSmallZIndex: number;
36
- export declare const akEditorGridLineZIndex = 1;
36
+ export declare const akEditorGridLineZIndex = 2;
37
37
  export declare const akEditorMenuZIndex: 500;
38
38
  export declare const akEditorFloatingPanelZIndex: 400;
39
39
  export declare const akEditorFloatingDialogZIndex: number;
@@ -91,7 +91,9 @@ export declare const ATLASSIAN_NAVIGATION_HEIGHT = "56px";
91
91
  export declare const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT: () => "56px" | "var(--ds-space-500)";
92
92
  export declare const akEditorSelectedNodeClassName = "ak-editor-selected-node";
93
93
  export declare const editorFontSize: ({ theme }: {
94
- theme: EditorTheme;
94
+ theme: {
95
+ baseFontSize?: number;
96
+ };
95
97
  }) => number;
96
98
  export declare const relativeSize: (multiplier: number) => ({ theme }: {
97
99
  theme: EditorTheme;
@@ -33,7 +33,7 @@ export declare const akEditorUnitZIndex = 1;
33
33
  export declare const akEditorShadowZIndex = 2;
34
34
  export declare const akEditorStickyHeaderZIndex = 11;
35
35
  export declare const akEditorSmallZIndex: number;
36
- export declare const akEditorGridLineZIndex = 1;
36
+ export declare const akEditorGridLineZIndex = 2;
37
37
  export declare const akEditorMenuZIndex: 500;
38
38
  export declare const akEditorFloatingPanelZIndex: 400;
39
39
  export declare const akEditorFloatingDialogZIndex: number;
@@ -91,7 +91,9 @@ export declare const ATLASSIAN_NAVIGATION_HEIGHT = "56px";
91
91
  export declare const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT: () => "56px" | "var(--ds-space-500)";
92
92
  export declare const akEditorSelectedNodeClassName = "ak-editor-selected-node";
93
93
  export declare const editorFontSize: ({ theme }: {
94
- theme: EditorTheme;
94
+ theme: {
95
+ baseFontSize?: number;
96
+ };
95
97
  }) => number;
96
98
  export declare const relativeSize: (multiplier: number) => ({ theme }: {
97
99
  theme: EditorTheme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.12.1",
3
+ "version": "2.13.1",
4
4
  "description": "Style values used in the editor/renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
45
45
  "dependencies": {
46
46
  "@atlaskit/platform-feature-flags": "^0.3.0",
47
47
  "@atlaskit/theme": "^12.11.0",
48
- "@atlaskit/tokens": "^1.53.0",
48
+ "@atlaskit/tokens": "^1.56.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1"
51
51
  },
@@ -1,4 +1,4 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
2
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
3
  import {
4
4
  B100,
@@ -91,7 +91,7 @@ export const akEditorUnitZIndex = 1;
91
91
  export const akEditorShadowZIndex = 2;
92
92
  export const akEditorStickyHeaderZIndex = 11; // filmstrip uses 10 for its shadow
93
93
  export const akEditorSmallZIndex = akEditorStickyHeaderZIndex + 1;
94
- export const akEditorGridLineZIndex = 1;
94
+ export const akEditorGridLineZIndex = 2;
95
95
  // z-index for main menu bar -
96
96
  // this is highest as it should be above anything else in editor below.
97
97
  export const akEditorMenuZIndex = layers.blanket();
@@ -129,7 +129,7 @@ export const akEditorTableNumberColumnWidth = 42;
129
129
  export const akEditorBreakoutPadding = 96;
130
130
  export const akEditorGutterPadding = 32;
131
131
  export const akEditorGutterPaddingDynamic = () =>
132
- getBooleanFF('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
132
+ fg('platform.editor.core.increase-full-page-guttering') ? 52 : 32;
133
133
  export const akEditorMobileBreakoutPoint = 720;
134
134
  export const akEditorTableCellMinWidth = 48;
135
135
  export const akEditorTableLegacyCellMinWidth = 128;
@@ -161,13 +161,13 @@ export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
161
161
  export const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
162
162
 
163
163
  export const FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = () =>
164
- getBooleanFF('platform.confluence.frontend.narrow-full-page-editor-toolbar')
164
+ fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')
165
165
  ? token('space.500', '40px')
166
166
  : '56px';
167
167
 
168
168
  export const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
169
169
 
170
- export const editorFontSize = ({ theme }: { theme: EditorTheme }) =>
170
+ export const editorFontSize = ({ theme }: { theme: { baseFontSize?: number } }) =>
171
171
  theme && theme.baseFontSize ? theme.baseFontSize : defaultFontSize();
172
172
 
173
173
  export const relativeSize =
@@ -7,7 +7,7 @@ import { token } from '@atlaskit/tokens';
7
7
 
8
8
  import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
9
9
 
10
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
10
+ // 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
11
  export const shortcutStyle = css`
12
12
  background-color: ${token(
13
13
  'color.background.neutral',