@atlaskit/editor-core 214.1.7 → 214.2.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.
Files changed (19) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js +3 -15
  3. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.js +3 -14
  4. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +1 -1
  5. package/dist/cjs/ui/EditorContentContainer/styles/extensionStyles.js +339 -316
  6. package/dist/cjs/version-wrapper.js +1 -1
  7. package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js +3 -15
  8. package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.js +3 -14
  9. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +2 -2
  10. package/dist/es2019/ui/EditorContentContainer/styles/extensionStyles.js +338 -315
  11. package/dist/es2019/version-wrapper.js +1 -1
  12. package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js +3 -15
  13. package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.js +3 -14
  14. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +2 -2
  15. package/dist/esm/ui/EditorContentContainer/styles/extensionStyles.js +338 -315
  16. package/dist/esm/version-wrapper.js +1 -1
  17. package/dist/types/ui/EditorContentContainer/styles/extensionStyles.d.ts +5 -1
  18. package/dist/types-ts4.5/ui/EditorContentContainer/styles/extensionStyles.d.ts +5 -1
  19. package/package.json +3 -3
package/dist/es2019/ui/EditorContentContainer/styles/extensionStyles.js CHANGED
@@ -1,356 +1,379 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
2
2
  import { css } from '@emotion/react';
3
+ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
4
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
+ import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
3
6
  import { blanketSelectionStyles, boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
4
7
 
5
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
6
- export const extensionStyles = css({
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
8
- '.multiBodiedExtensionView-content-wrap': {
8
+ /**
9
+ * Creates the extension styles with the ability to use feature flags and experiments.
10
+ * @returns Complete SerializedStyles including base styles and any feature-gated styles
11
+ */
12
+ export const getExtensionStyles = () => {
13
+ const baseExtensionStyles = css({
9
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
10
- '&.danger > span > .multiBodiedExtension--container': {
11
- boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
12
- backgroundColor: "var(--ds-background-danger, #FFECEB)"
13
- },
14
- // ...extensionLabelStyles
15
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
16
- '&.danger > span > div > .extension-label': {
17
- backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
18
- color: "var(--ds-text-danger, #AE2E24)",
19
- opacity: 1,
20
- boxShadow: 'none'
21
- },
22
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
23
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
24
- backgroundColor: "var(--ds-background-selected, #E9F2FF)",
25
- color: "var(--ds-text-selected, #0C66E4)",
26
- opacity: 1,
27
- boxShadow: 'none'
28
- },
29
- /* Targets the icon for bodied macro styling in button label */
30
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
31
- '&.danger > span > div > .extension-label > span': {
32
- display: 'inline'
33
- },
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
35
- '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
36
- display: 'inline'
37
- },
38
- /* Start of bodied extension edit toggle styles */
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
40
- '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
41
- opacity: 1
42
- },
43
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
44
- '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
45
- opacity: 1
46
- },
47
- /* In view mode of the bodied macro, we never want to show the extension label */
48
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
49
- '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
50
- opacity: 0
51
- },
52
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
53
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
54
- opacity: 0
55
- },
56
- /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
57
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
58
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
59
- boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`
60
- },
61
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
62
- '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
63
- boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
64
- },
65
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
66
- '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
67
- backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
68
- color: "var(--ds-text-danger, #AE2E24)",
69
- boxShadow: 'none'
70
- },
71
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
72
- '&.danger > span > .with-danger-overlay': {
73
- backgroundColor: 'transparent',
15
+ '.multiBodiedExtensionView-content-wrap': {
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
17
+ '&.danger > span > .multiBodiedExtension--container': {
18
+ boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
19
+ backgroundColor: "var(--ds-background-danger, #FFECEB)"
20
+ },
21
+ // ...extensionLabelStyles
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
23
+ '&.danger > span > div > .extension-label': {
24
+ backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
25
+ color: "var(--ds-text-danger, #AE2E24)",
26
+ opacity: 1,
27
+ boxShadow: 'none'
28
+ },
29
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
30
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
31
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)",
32
+ color: "var(--ds-text-selected, #0C66E4)",
33
+ opacity: 1,
34
+ boxShadow: 'none'
35
+ },
36
+ /* Targets the icon for bodied macro styling in button label */
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
38
+ '&.danger > span > div > .extension-label > span': {
39
+ display: 'inline'
40
+ },
41
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
42
+ '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
43
+ display: 'inline'
44
+ },
45
+ /* Start of bodied extension edit toggle styles */
74
46
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
75
- '.multiBodiedExtension--overlay': {
76
- // ...dangerOverlayStyles
77
- opacity: 0.3,
78
- backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
47
+ '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
48
+ opacity: 1
49
+ },
50
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
51
+ '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
52
+ opacity: 1
53
+ },
54
+ /* In view mode of the bodied macro, we never want to show the extension label */
55
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
56
+ '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
57
+ opacity: 0
58
+ },
59
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
60
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
61
+ opacity: 0
62
+ },
63
+ /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
64
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
65
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
66
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`
67
+ },
68
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
69
+ '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
70
+ boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
71
+ },
72
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
73
+ '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
74
+ backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
75
+ color: "var(--ds-text-danger, #AE2E24)",
76
+ boxShadow: 'none'
77
+ },
78
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
79
+ '&.danger > span > .with-danger-overlay': {
80
+ backgroundColor: 'transparent',
81
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
82
+ '.multiBodiedExtension--overlay': {
83
+ // ...dangerOverlayStyles
84
+ opacity: 0.3,
85
+ backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
86
+ }
87
+ },
88
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
89
+ '&:not(.danger).ak-editor-selected-node': {
90
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
91
+ '& > span > .multiBodiedExtension--container': [
92
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
93
+ boxShadowSelectionStyles,
94
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
95
+ blanketSelectionStyles,
96
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
97
+ hideNativeBrowserTextSelectionStyles]
98
+ },
99
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
100
+ '.multiBodiedExtension--container': {
101
+ width: '100%',
102
+ maxWidth: '100%' // ensure width can't go over 100%
79
103
  }
80
104
  },
81
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
82
- '&:not(.danger).ak-editor-selected-node': {
83
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
84
- '& > span > .multiBodiedExtension--container': [
85
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
86
- boxShadowSelectionStyles,
87
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
88
- blanketSelectionStyles,
89
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
90
- hideNativeBrowserTextSelectionStyles]
91
- },
92
105
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
93
- '.multiBodiedExtension--container': {
94
- width: '100%',
95
- maxWidth: '100%' // ensure width can't go over 100%
96
- }
97
- },
98
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
99
- '.inlineExtensionView-content-wrap': {
100
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
101
- '&.danger > span > .extension-container': {
102
- boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
103
- backgroundColor: "var(--ds-background-danger, #FFECEB)"
104
- },
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
106
- '&.danger > span > .with-danger-overlay': {
107
- /* If the macro turned used to red before, not setting the background to be transparent will cause the
108
- danger state to have two layers of red which we don't want. */
109
- backgroundColor: 'transparent',
106
+ '.inlineExtensionView-content-wrap': {
110
107
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
111
- '.extension-overlay': {
112
- // ...dangerOverlayStyles
113
- opacity: 0.3,
114
- backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
108
+ '&.danger > span > .extension-container': {
109
+ boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
110
+ backgroundColor: "var(--ds-background-danger, #FFECEB)"
111
+ },
112
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
113
+ '&.danger > span > .with-danger-overlay': {
114
+ /* If the macro turned used to red before, not setting the background to be transparent will cause the
115
+ danger state to have two layers of red which we don't want. */
116
+ backgroundColor: 'transparent',
117
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
118
+ '.extension-overlay': {
119
+ // ...dangerOverlayStyles
120
+ opacity: 0.3,
121
+ backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
122
+ }
123
+ },
124
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
125
+ '&:not(.danger).ak-editor-selected-node': {
126
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
127
+ '& > span > .extension-container': [
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
129
+ boxShadowSelectionStyles,
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
131
+ hideNativeBrowserTextSelectionStyles]
132
+ },
133
+ // ...extensionLabelStyles
134
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
135
+ '&.danger > span > div > .extension-label': {
136
+ backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
137
+ color: "var(--ds-text-danger, #AE2E24)",
138
+ opacity: 1,
139
+ boxShadow: 'none'
140
+ },
141
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
142
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
143
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)",
144
+ color: "var(--ds-text-selected, #0C66E4)",
145
+ opacity: 1,
146
+ boxShadow: 'none'
147
+ },
148
+ /* Targets the icon for bodied macro styling in button label */
149
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
150
+ '&.danger > span > div > .extension-label > span': {
151
+ display: 'inline'
152
+ },
153
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
154
+ '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
155
+ display: 'inline'
156
+ },
157
+ /* Start of bodied extension edit toggle styles */
158
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
159
+ '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
160
+ opacity: 1
161
+ },
162
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
163
+ '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
164
+ opacity: 1
165
+ },
166
+ /* In view mode of the bodied macro, we never want to show the extension label */
167
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
168
+ '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
169
+ opacity: 0
170
+ },
171
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
172
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
173
+ opacity: 0
174
+ },
175
+ /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
176
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
177
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
178
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`
179
+ },
180
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
181
+ '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
182
+ boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
183
+ },
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
185
+ '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
186
+ backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
187
+ color: "var(--ds-text-danger, #AE2E24)",
188
+ boxShadow: 'none'
115
189
  }
116
190
  },
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
118
- '&:not(.danger).ak-editor-selected-node': {
119
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
120
- '& > span > .extension-container': [
121
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
122
- boxShadowSelectionStyles,
123
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
124
- hideNativeBrowserTextSelectionStyles]
125
- },
126
- // ...extensionLabelStyles
127
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
128
- '&.danger > span > div > .extension-label': {
129
- backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
130
- color: "var(--ds-text-danger, #AE2E24)",
131
- opacity: 1,
132
- boxShadow: 'none'
133
- },
134
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
135
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
136
- backgroundColor: "var(--ds-background-selected, #E9F2FF)",
137
- color: "var(--ds-text-selected, #0C66E4)",
138
- opacity: 1,
139
- boxShadow: 'none'
140
- },
141
- /* Targets the icon for bodied macro styling in button label */
142
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
143
- '&.danger > span > div > .extension-label > span': {
144
- display: 'inline'
145
- },
146
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
147
- '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
148
- display: 'inline'
149
- },
150
- /* Start of bodied extension edit toggle styles */
151
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
152
- '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
153
- opacity: 1
154
- },
155
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
156
- '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
157
- opacity: 1
158
- },
159
- /* In view mode of the bodied macro, we never want to show the extension label */
160
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
161
- '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
162
- opacity: 0
163
- },
164
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
165
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
166
- opacity: 0
167
- },
168
- /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
169
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
170
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
171
- boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`
172
- },
173
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
174
- '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
175
- boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
176
- },
191
+ /* This is referenced in the toDOM of a bodied extension and is used to put
192
+ label content into the bodied extension.
193
+ We do this so that we don't serialise the label (which causes the label to be
194
+ copied to the clipboard causing copy-paste issues). */
177
195
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
178
- '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
179
- backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
180
- color: "var(--ds-text-danger, #AE2E24)",
181
- boxShadow: 'none'
182
- }
183
- },
184
- /* This is referenced in the toDOM of a bodied extension and is used to put
185
- label content into the bodied extension.
186
- We do this so that we don't serialise the label (which causes the label to be
187
- copied to the clipboard causing copy-paste issues). */
188
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
189
- '.bodied-extension-to-dom-label::after': {
190
- content: 'attr(data-bodied-extension-label)'
191
- },
192
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
193
- '.extensionView-content-wrap, .multiBodiedExtensionView-content-wrap, .bodiedExtensionView-content-wrap': {
194
- margin: `0.75rem 0`,
195
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
196
- '&:first-of-type': {
197
- marginTop: 0
198
- },
199
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
200
- '&:last-of-type': {
201
- marginBottom: 0
202
- },
203
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
204
- '&:not(.danger).ak-editor-selected-node': {
205
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
206
- '& > span > .extension-container': [
207
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
208
- boxShadowSelectionStyles,
209
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
210
- hideNativeBrowserTextSelectionStyles]
211
- },
212
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
213
- '&.danger > span > .extension-container': {
214
- boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
215
- backgroundColor: "var(--ds-background-danger, #FFECEB)"
216
- },
217
- // ...extensionLabelStyles
218
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
219
- '&.danger > span > div > .extension-label': {
220
- backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
221
- color: "var(--ds-text-danger, #AE2E24)",
222
- opacity: 1,
223
- boxShadow: 'none'
224
- },
225
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
226
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
227
- backgroundColor: "var(--ds-background-selected, #E9F2FF)",
228
- color: "var(--ds-text-selected, #0C66E4)",
229
- opacity: 1,
230
- boxShadow: 'none'
196
+ '.bodied-extension-to-dom-label::after': {
197
+ content: 'attr(data-bodied-extension-label)'
231
198
  },
232
- /* Targets the icon for bodied macro styling in button label */
233
199
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
234
- '&.danger > span > div > .extension-label > span': {
235
- display: 'inline'
236
- },
237
- /** Targets legacy content header in LCM extension */
238
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
239
- '&.danger > span > .legacy-content-header': {
240
- boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
241
- backgroundColor: `${"var(--ds-background-danger, #FFECEB)"}`,
200
+ '.extensionView-content-wrap, .multiBodiedExtensionView-content-wrap, .bodiedExtensionView-content-wrap': {
201
+ margin: `0.75rem 0`,
202
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
203
+ '&:first-of-type': {
204
+ marginTop: 0
205
+ },
206
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
207
+ '&:last-of-type': {
208
+ marginBottom: 0
209
+ },
210
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
211
+ '&:not(.danger).ak-editor-selected-node': {
212
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
213
+ '& > span > .extension-container': [
214
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
215
+ boxShadowSelectionStyles,
216
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
217
+ hideNativeBrowserTextSelectionStyles]
218
+ },
219
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
220
+ '&.danger > span > .extension-container': {
221
+ boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
222
+ backgroundColor: "var(--ds-background-danger, #FFECEB)"
223
+ },
224
+ // ...extensionLabelStyles
225
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
226
+ '&.danger > span > div > .extension-label': {
227
+ backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
228
+ color: "var(--ds-text-danger, #AE2E24)",
229
+ opacity: 1,
230
+ boxShadow: 'none'
231
+ },
232
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
233
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
234
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)",
235
+ color: "var(--ds-text-selected, #0C66E4)",
236
+ opacity: 1,
237
+ boxShadow: 'none'
238
+ },
239
+ /* Targets the icon for bodied macro styling in button label */
240
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
241
+ '&.danger > span > div > .extension-label > span': {
242
+ display: 'inline'
243
+ },
244
+ /** Targets legacy content header in LCM extension */
242
245
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
243
- '& .status-lozenge-span > span': {
244
- backgroundColor: `${"var(--ds-background-accent-red-subtle-hovered, #FD9891)"}`
246
+ '&.danger > span > .legacy-content-header': {
247
+ boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
248
+ backgroundColor: `${"var(--ds-background-danger, #FFECEB)"}`,
249
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
250
+ '& .status-lozenge-span > span': {
251
+ backgroundColor: `${"var(--ds-background-accent-red-subtle-hovered, #FD9891)"}`
252
+ }
253
+ },
254
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
255
+ '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
256
+ display: 'inline'
257
+ },
258
+ /* Start of bodied extension edit toggle styles */
259
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
260
+ '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
261
+ opacity: 1
262
+ },
263
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
264
+ '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
265
+ opacity: 1
266
+ },
267
+ /* In view mode of the bodied macro, we never want to show the extension label */
268
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
269
+ '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
270
+ opacity: 0
271
+ },
272
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
273
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
274
+ opacity: 0
275
+ },
276
+ /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
277
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
278
+ '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
279
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`
280
+ },
281
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
282
+ '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
283
+ boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
284
+ },
285
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
286
+ '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
287
+ backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
288
+ color: "var(--ds-text-danger, #AE2E24)",
289
+ boxShadow: 'none'
290
+ },
291
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
292
+ '&.danger > span > .with-danger-overlay': {
293
+ backgroundColor: 'transparent',
294
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
295
+ '.extension-overlay': {
296
+ // ...dangerOverlayStyles
297
+ opacity: 0.3,
298
+ backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
299
+ }
300
+ },
301
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
302
+ '&.inline': {
303
+ // wordWrap: 'break-all' was previously used here, but break-all is not a valid CSS property of word-wrap.
304
+ // It was probably intended to be word-break: break-all, however I'm omitting it here for consistency with previous actual behavior.
245
305
  }
246
306
  },
247
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
248
- '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
249
- display: 'inline'
250
- },
251
- /* Start of bodied extension edit toggle styles */
252
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
253
- '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
254
- opacity: 1
255
- },
256
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
257
- '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
258
- opacity: 1
259
- },
260
- /* In view mode of the bodied macro, we never want to show the extension label */
261
307
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
262
- '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
263
- opacity: 0
264
- },
265
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
266
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
267
- opacity: 0
268
- },
269
- /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
270
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
271
- '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
272
- boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`
273
- },
274
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
275
- '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
276
- boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
277
- },
278
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
279
- '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
280
- backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
281
- color: "var(--ds-text-danger, #AE2E24)",
282
- boxShadow: 'none'
283
- },
284
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
285
- '&.danger > span > .with-danger-overlay': {
286
- backgroundColor: 'transparent',
287
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
288
- '.extension-overlay': {
289
- // ...dangerOverlayStyles
290
- opacity: 0.3,
291
- backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
308
+ '.extensionView-content-wrap .extension-container': {
309
+ overflow: 'hidden',
310
+ /* Don't hide overflow for editors inside extensions. */
311
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
312
+ '&:has(.extension-editable-area)': {
313
+ overflow: 'visible'
292
314
  }
293
315
  },
294
316
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
295
- '&.inline': {
296
- // wordWrap: 'break-all' was previously used here, but break-all is not a valid CSS property of word-wrap.
297
- // It was probably intended to be word-break: break-all, however I'm omitting it here for consistency with previous actual behavior.
298
- }
299
- },
300
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
301
- '.extensionView-content-wrap .extension-container': {
302
- overflow: 'hidden',
303
- /* Don't hide overflow for editors inside extensions. */
304
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
305
- '&:has(.extension-editable-area)': {
306
- overflow: 'visible'
307
- }
308
- },
309
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
310
- '.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container': {
311
- width: '100%',
312
- maxWidth: '100%' // ensure width can't go over 100%
313
- },
314
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
315
- "[data-mark-type='fragment']": {
316
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
317
- '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
318
- margin: '0.75rem 0'
317
+ '.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container': {
318
+ width: '100%',
319
+ maxWidth: '100%' // ensure width can't go over 100%
319
320
  },
320
321
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
321
- "& > [data-mark-type='dataConsumer']": {
322
+ "[data-mark-type='fragment']": {
322
323
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
323
324
  '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
324
325
  margin: '0.75rem 0'
325
- }
326
- },
327
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
328
- '&:first-child': {
329
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
330
- '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
331
- marginTop: 0
332
326
  },
333
327
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
334
328
  "& > [data-mark-type='dataConsumer']": {
329
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
330
+ '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
331
+ margin: '0.75rem 0'
332
+ }
333
+ },
334
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
335
+ '&:first-child': {
335
336
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
336
337
  '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
337
338
  marginTop: 0
339
+ },
340
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
341
+ "& > [data-mark-type='dataConsumer']": {
342
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
343
+ '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
344
+ marginTop: 0
345
+ }
338
346
  }
339
- }
340
- },
341
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
342
- '&:nth-last-of-type(-n + 2):not(:first-of-type)': {
343
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
344
- '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
345
- marginBottom: 0
346
347
  },
347
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
348
- "& > [data-mark-type='dataConsumer']": {
348
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
349
+ '&:nth-last-of-type(-n + 2):not(:first-of-type)': {
349
350
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
350
351
  '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
351
352
  marginBottom: 0
353
+ },
354
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
355
+ "& > [data-mark-type='dataConsumer']": {
356
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
357
+ '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
358
+ marginBottom: 0
359
+ }
352
360
  }
353
361
  }
354
362
  }
355
- }
356
- });
363
+ });
364
+
365
+ // Dense content mode TOC styling fix - addresses EDITOR-1992
366
+ // When cleaning up the experiment, move this logic into the baseExtensionStyles above
367
+ const fontSize = expValEquals('cc_editor_ai_content_mode', 'variant', 'test') ? relativeFontSizeToBase16(expVal('cc_editor_ai_content_mode', 'baseFontSize', 13)) : undefined;
368
+ // Fixes issue where TOC links fall back to default DST styles
369
+ const denseContentModeTocStyles = expValEquals('cc_editor_ai_content_mode', 'variant', 'test') ? css({
370
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
371
+ '.extension-container a span': {
372
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
373
+ fontSize
374
+ }
375
+ }) : css({});
376
+
377
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
378
+ return css(baseExtensionStyles, denseContentModeTocStyles);
379
+ };