@atlaskit/editor-shared-styles 2.8.1 → 2.8.2

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,11 @@
1
1
  # @atlaskit/editor-shared-styles
2
2
 
3
+ ## 2.8.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#59829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59829) [`3120b36a9f2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3120b36a9f2c) - Converted spacing values to the corresponding space tokens
8
+
3
9
  ## 2.8.1
4
10
 
5
11
  ### Patch Changes
@@ -0,0 +1,28 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.confluence.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "composite": true,
7
+ "outDir": "../dist",
8
+ "rootDir": "../",
9
+ "baseUrl": "../"
10
+ },
11
+ "include": [
12
+ "../src/**/*.ts",
13
+ "../src/**/*.tsx"
14
+ ],
15
+ "exclude": [
16
+ "../src/**/__tests__/*",
17
+ "../src/**/*.test.*",
18
+ "../src/**/test.*"
19
+ ],
20
+ "references": [
21
+ {
22
+ "path": "../../../design-system/theme/afm-cc/tsconfig.json"
23
+ },
24
+ {
25
+ "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
26
+ }
27
+ ]
28
+ }
@@ -11,4 +11,4 @@ var _colors = require("@atlaskit/theme/colors");
11
11
  var _constants = require("@atlaskit/theme/constants");
12
12
  var _consts = require("../consts");
13
13
  var _templateObject;
14
- var shortcutStyle = exports.shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", "; /* N60 at 50% */\n color: ", ";\n border-radius: ", "px;\n padding: 4px;\n line-height: 12px;\n font-size: ", ";\n align-self: flex-end;\n @media (max-width: ", "px) {\n display: none;\n }\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(_colors.N100, ")"), (0, _constants.borderRadius)(), (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
14
+ var shortcutStyle = exports.shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", "; /* N60 at 50% */\n color: ", ";\n border-radius: ", "px;\n padding: ", ";\n line-height: 12px;\n font-size: ", ";\n align-self: flex-end;\n @media (max-width: ", "px) {\n display: none;\n }\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);
@@ -6,7 +6,7 @@ export const shortcutStyle = css`
6
6
  background-color: ${"var(--ds-background-neutral, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
7
7
  color: ${`var(--ds-text-subtle, ${N100})`};
8
8
  border-radius: ${borderRadius()}px;
9
- padding: 4px;
9
+ padding: ${"var(--ds-space-050, 4px)"};
10
10
  line-height: 12px;
11
11
  font-size: ${relativeFontSizeToBase16(11.67)};
12
12
  align-self: flex-end;
@@ -4,4 +4,4 @@ import { css } from '@emotion/react';
4
4
  import { N100 } from '@atlaskit/theme/colors';
5
5
  import { borderRadius } from '@atlaskit/theme/constants';
6
6
  import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
7
- export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", "; /* N60 at 50% */\n color: ", ";\n border-radius: ", "px;\n padding: 4px;\n line-height: 12px;\n font-size: ", ";\n align-self: flex-end;\n @media (max-width: ", "px) {\n display: none;\n }\n"])), "var(--ds-background-neutral, rgba(223, 225, 229, 0.5))", "var(--ds-text-subtle, ".concat(N100, ")"), borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
7
+ export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", "; /* N60 at 50% */\n color: ", ";\n border-radius: ", "px;\n padding: ", ";\n line-height: 12px;\n font-size: ", ";\n align-self: flex-end;\n @media (max-width: ", "px) {\n display: none;\n }\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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.8.1",
3
+ "version": "2.8.2",
4
4
  "description": "Style values used in the editor/renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@atlaskit/theme": "^12.6.0",
39
- "@atlaskit/tokens": "^1.26.0",
39
+ "@atlaskit/tokens": "^1.29.0",
40
40
  "@babel/runtime": "^7.0.0",
41
41
  "@emotion/react": "^11.7.1"
42
42
  },
@@ -13,7 +13,7 @@ export const shortcutStyle = css`
13
13
  )}; /* N60 at 50% */
14
14
  color: ${token('color.text.subtle', N100)};
15
15
  border-radius: ${borderRadius()}px;
16
- padding: 4px;
16
+ padding: ${token('space.050', '4px')};
17
17
  line-height: 12px;
18
18
  font-size: ${relativeFontSizeToBase16(11.67)};
19
19
  align-self: flex-end;
package/tsconfig.app.json CHANGED
@@ -38,5 +38,6 @@
38
38
  {
39
39
  "path": "../../design-system/tokens/tsconfig.app.json"
40
40
  }
41
- ]
41
+ ],
42
+ "files": []
42
43
  }
package/tsconfig.dev.json CHANGED
@@ -35,5 +35,6 @@
35
35
  {
36
36
  "path": "tsconfig.app.json"
37
37
  }
38
- ]
38
+ ],
39
+ "files": []
39
40
  }
@@ -1,357 +0,0 @@
1
- ## API Report File for "@atlaskit/editor-shared-styles"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- import { SerializedStyles } from '@emotion/react';
8
-
9
- // @public (undocumented)
10
- export const akEditorActiveBackground = "#42526E";
11
-
12
- // @public (undocumented)
13
- export const akEditorActiveForeground = "#FFFFFF";
14
-
15
- // @public (undocumented)
16
- export const akEditorBlockquoteBorderColor = "#DFE1E6";
17
-
18
- // @public (undocumented)
19
- export const akEditorBreakoutPadding = 96;
20
-
21
- // @public (undocumented)
22
- export const akEditorCalculatedWideLayoutWidth = 1011;
23
-
24
- // @public (undocumented)
25
- export const akEditorCodeBackground = "#F4F5F7";
26
-
27
- // @public (undocumented)
28
- export const akEditorCodeBlockPadding = "12px";
29
-
30
- // @public (undocumented)
31
- export const akEditorCodeFontFamily: string;
32
-
33
- // @public (undocumented)
34
- export const akEditorCodeInlinePadding = "2px 4px";
35
-
36
- // @public (undocumented)
37
- export const akEditorContextPanelWidth = 320;
38
-
39
- // @public (undocumented)
40
- export const akEditorDefaultLayoutWidth = 760;
41
-
42
- // @public (undocumented)
43
- export const akEditorDeleteBackground = "#FFEBE6";
44
-
45
- // @public (undocumented)
46
- export const akEditorDeleteBackgroundShaded = "#FFEBE6";
47
-
48
- // @public (undocumented)
49
- export const akEditorDeleteBackgroundWithOpacity = "rgba(255, 189, 173, 0.5)";
50
-
51
- // @public (undocumented)
52
- export const akEditorDeleteBorder = "#FF5630";
53
-
54
- // @public (undocumented)
55
- export const akEditorDeleteIconColor = "#DE350B";
56
-
57
- // @public (undocumented)
58
- export const akEditorDropdownActiveBackground = "#091E42";
59
-
60
- // @public (undocumented)
61
- export const akEditorFloatingDialogZIndex: number;
62
-
63
- // @public (undocumented)
64
- export const akEditorFloatingOverlapPanelZIndex: number;
65
-
66
- // @public (undocumented)
67
- export const akEditorFloatingPanelZIndex: 400;
68
-
69
- // @public (undocumented)
70
- export const akEditorFocus = "#4C9AFF";
71
-
72
- // @public (undocumented)
73
- export const akEditorFullPageDefaultFontSize = 16;
74
-
75
- // @public (undocumented)
76
- export const akEditorFullPageMaxWidth = 680;
77
-
78
- // @public (undocumented)
79
- export const akEditorFullWidthLayoutLineLength = 1792;
80
-
81
- // @public (undocumented)
82
- export const akEditorFullWidthLayoutWidth = 1800;
83
-
84
- // @public (undocumented)
85
- export const akEditorGridLineZIndex = 1;
86
-
87
- // @public (undocumented)
88
- export const akEditorGutterPadding = 32;
89
-
90
- // @public (undocumented)
91
- export const akEditorInactiveForeground = "#42526E";
92
-
93
- // @public (undocumented)
94
- export const akEditorLineHeight = 1.714;
95
-
96
- // @public (undocumented)
97
- export const akEditorMediaResizeHandlerPadding = 4;
98
-
99
- // @public (undocumented)
100
- export const akEditorMediaResizeHandlerPaddingWide = 12;
101
-
102
- // @public (undocumented)
103
- export const akEditorMentionSelected = "#7A869A";
104
-
105
- // @public (undocumented)
106
- export const akEditorMenuZIndex: 500;
107
-
108
- // @public (undocumented)
109
- export const akEditorMobileBreakoutPoint = 720;
110
-
111
- // @public (undocumented)
112
- export const akEditorMobileMaxWidth = 0;
113
-
114
- // @public (undocumented)
115
- export const akEditorPopupBackground = "#253858";
116
-
117
- // @public (undocumented)
118
- export const akEditorPopupText = "#DEEBFF";
119
-
120
- // @public (undocumented)
121
- export const akEditorPrimaryButton = "#0052CC";
122
-
123
- // @public (undocumented)
124
- export const akEditorRuleBackground = "#EBECF0";
125
-
126
- // @public (undocumented)
127
- export const akEditorRuleBorderRadius = "1px";
128
-
129
- // @public (undocumented)
130
- export const akEditorSelectedBgColor = "#DEEBFF";
131
-
132
- // @public (undocumented)
133
- export const akEditorSelectedBlanketColor = "#B3D4FF";
134
-
135
- // @public (undocumented)
136
- export const akEditorSelectedBlanketOpacity = 0.3;
137
-
138
- // @public (undocumented)
139
- export const akEditorSelectedBorder: string;
140
-
141
- // @public (undocumented)
142
- export const akEditorSelectedBorderBoldSize = 2;
143
-
144
- // @public (undocumented)
145
- export const akEditorSelectedBorderColor = "#0065FF";
146
-
147
- // @public (undocumented)
148
- export const akEditorSelectedBorderSize = 1;
149
-
150
- // @public (undocumented)
151
- export const akEditorSelectedBoxShadow: string;
152
-
153
- // @public (undocumented)
154
- export const akEditorSelectedIconColor = "#0052CC";
155
-
156
- // @public (undocumented)
157
- export const akEditorSelectedNodeClassName = "ak-editor-selected-node";
158
-
159
- // @public (undocumented)
160
- export const akEditorShadowZIndex = 2;
161
-
162
- // @public (undocumented)
163
- export const akEditorSmallZIndex: number;
164
-
165
- // @public (undocumented)
166
- export const akEditorStickyHeaderZIndex = 11;
167
-
168
- // @public (undocumented)
169
- export const akEditorSubtleAccent = "#DFE1E6";
170
-
171
- // @public (undocumented)
172
- export const akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
173
-
174
- // @public (undocumented)
175
- export const akEditorTableBorder = "#C1C7D0";
176
-
177
- // @public (undocumented)
178
- export const akEditorTableBorderDark = "#3B475C";
179
-
180
- // @public (undocumented)
181
- export const akEditorTableBorderDelete = "#FF5630";
182
-
183
- // @public (undocumented)
184
- export const akEditorTableBorderRadius = "3px";
185
-
186
- // @public (undocumented)
187
- export const akEditorTableBorderSelected = "#0065FF";
188
-
189
- // @public (undocumented)
190
- export const akEditorTableCellBackgroundOpacity = 0.5;
191
-
192
- // @public (undocumented)
193
- export const akEditorTableCellBlanketDeleted = "rgba(255, 235, 230, 0.3)";
194
-
195
- // @public (undocumented)
196
- export const akEditorTableCellBlanketSelected = "rgba(179, 212, 255, 0.3)";
197
-
198
- // @public (undocumented)
199
- export const akEditorTableCellDelete = "#FFEBE6";
200
-
201
- // @public (undocumented)
202
- export const akEditorTableCellMinWidth = 48;
203
-
204
- // @public (undocumented)
205
- export const akEditorTableCellOnStickyHeaderZIndex: number;
206
-
207
- // @public (undocumented)
208
- export const akEditorTableCellSelected = "#B3D4FF";
209
-
210
- // @public (undocumented)
211
- export const akEditorTableFloatingControls = "#F4F5F7";
212
-
213
- // @public (undocumented)
214
- export const akEditorTableHeaderCellBackground = "#F1F2F4";
215
-
216
- // @public (undocumented)
217
- export const akEditorTableHeaderCellBackgroundDark = "#2C333A";
218
-
219
- // @public (undocumented)
220
- export const akEditorTableLegacyCellMinWidth = 128;
221
-
222
- // @public (undocumented)
223
- export const akEditorTableNumberColumnWidth = 42;
224
-
225
- // @public (undocumented)
226
- export const akEditorTableToolbar = "#F4F5F7";
227
-
228
- // @public (undocumented)
229
- export const akEditorTableToolbarDark = "#283447";
230
-
231
- // @public (undocumented)
232
- export const akEditorTableToolbarDelete = "#FFBDAD";
233
-
234
- // @public (undocumented)
235
- export const akEditorTableToolbarSelected = "#4C9AFF";
236
-
237
- // @public (undocumented)
238
- export const akEditorTableToolbarSize = 11;
239
-
240
- // @public (undocumented)
241
- export const akEditorToolbarKeylineHeight = 2;
242
-
243
- // @public (undocumented)
244
- export const akEditorUnitZIndex = 1;
245
-
246
- // @public (undocumented)
247
- export const akEditorWideLayoutWidth = 960;
248
-
249
- // @public (undocumented)
250
- export const akLayoutGutterOffset: number;
251
-
252
- // @public (undocumented)
253
- export const akRichMediaResizeZIndex: number;
254
-
255
- // @public (undocumented)
256
- export const ATLASSIAN_NAVIGATION_HEIGHT = "56px";
257
-
258
- // @public (undocumented)
259
- export const blockNodesVerticalMargin = "0.75rem";
260
-
261
- // @public (undocumented)
262
- export const breakoutWideScaleRatio = 1.33;
263
-
264
- // @public (undocumented)
265
- export const DEFAULT_EMBED_CARD_HEIGHT = 480;
266
-
267
- // @public (undocumented)
268
- export const DEFAULT_EMBED_CARD_WIDTH = 680;
269
-
270
- // @public (undocumented)
271
- export const editorFontSize: ({ theme }: {
272
- theme: EditorTheme;
273
- }) => number;
274
-
275
- // @public (undocumented)
276
- export type EditorTheme = {
277
- baseFontSize?: number;
278
- };
279
-
280
- // @public
281
- export const getSelectionStyles: (selectionStyles: Array<SelectionStyle>) => string;
282
-
283
- // @public (undocumented)
284
- export const getTableCellBackgroundDarkModeColors: string;
285
-
286
- // @public (undocumented)
287
- export const gridMediumMaxWidth = 1024;
288
-
289
- // @public (undocumented)
290
- export const hideNativeBrowserTextSelectionStyles = "\n ::selection,*::selection {\n background-color: transparent;\n }\n ::-moz-selection,*::-moz-selection {\n background-color: transparent;\n }\n";
291
-
292
- // @public (undocumented)
293
- export const MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
294
-
295
- // @public (undocumented)
296
- export const overflowShadow: ({ background, width, leftCoverWidth, rightCoverWidth, }: {
297
- background: string;
298
- width?: string | undefined;
299
- leftCoverWidth?: string | undefined;
300
- rightCoverWidth?: string | undefined;
301
- }) => SerializedStyles;
302
-
303
- // @public (undocumented)
304
- export const relativeFontSizeToBase16: (px: number | string) => string;
305
-
306
- // @public (undocumented)
307
- export const relativeSize: (multiplier: number) => ({ theme }: {
308
- theme: EditorTheme;
309
- }) => number;
310
-
311
- // @public
312
- export enum SelectionStyle {
313
- // (undocumented)
314
- Background = 2,
315
- // (undocumented)
316
- Blanket = 3,
317
- // (undocumented)
318
- Border = 0,
319
- // (undocumented)
320
- BoxShadow = 1
321
- }
322
-
323
- // @public (undocumented)
324
- export const VIEWPORT_SIZES: {
325
- laptopHiDPI: {
326
- width: number;
327
- height: number;
328
- };
329
- laptopMDPI: {
330
- width: number;
331
- height: number;
332
- };
333
- tabletL: {
334
- width: number;
335
- height: number;
336
- };
337
- tabletS: {
338
- width: number;
339
- height: number;
340
- };
341
- mobileM: {
342
- width: number;
343
- height: number;
344
- };
345
- mobileS: {
346
- width: number;
347
- height: number;
348
- };
349
- mobileXS: {
350
- width: number;
351
- height: number;
352
- };
353
- };
354
-
355
- // (No @packageDocumentation comment for this package)
356
-
357
- ```