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