@atlaskit/editor-shared-styles 2.0.1 → 2.1.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 (18) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/consts/package.json +1 -0
  3. package/dist/cjs/consts/consts.js +5 -2
  4. package/dist/cjs/selection/utils.js +4 -2
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/consts/consts.js +4 -2
  7. package/dist/es2019/overflow-shadow/overflow-shadow.js +1 -0
  8. package/dist/es2019/selection/utils.js +4 -4
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/consts/consts.js +5 -2
  11. package/dist/esm/overflow-shadow/overflow-shadow.js +1 -0
  12. package/dist/esm/selection/utils.js +4 -3
  13. package/dist/esm/version.json +1 -1
  14. package/package.json +4 -2
  15. package/selection/package.json +1 -0
  16. package/src/consts/consts.ts +10 -2
  17. package/src/overflow-shadow/overflow-shadow.ts +1 -0
  18. package/src/selection/utils.ts +7 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-shared-styles
2
2
 
3
+ ## 2.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`02bfb564e45`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02bfb564e45) - [ux] Instrumented `@atlaskit/editor-shared-styles` and partial `@atlaskit/editor-core` with the new theming package, `@atlaskit/tokens`.
8
+
9
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
10
+ These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
11
+
12
+ - [`5ab00fca118`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5ab00fca118) - Instrumented `@atlaskit/editor-shared-styles` with the new theming package, `@atlaskit/tokens`.
13
+
14
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
15
+ These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
16
+
3
17
  ## 2.0.1
4
18
 
5
19
  ### Patch Changes
package/consts/package.json CHANGED
@@ -3,5 +3,6 @@
3
3
  "main": "../dist/cjs/consts/index.js",
4
4
  "module": "../dist/esm/consts/index.js",
5
5
  "module:es2019": "../dist/es2019/consts/index.js",
6
+ "sideEffects": false,
6
7
  "types": "../dist/types/consts/index.d.ts"
7
8
  }
package/dist/cjs/consts/consts.js CHANGED
@@ -15,6 +15,9 @@ var _colors = require("@atlaskit/theme/colors");
15
15
 
16
16
  var _constants = require("@atlaskit/theme/constants");
17
17
 
18
+ var _tokens = require("@atlaskit/tokens");
19
+
20
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
18
21
  var akEditorFullPageDefaultFontSize = 16;
19
22
  exports.akEditorFullPageDefaultFontSize = akEditorFullPageDefaultFontSize;
20
23
  var akEditorCodeFontFamily = (0, _constants.codeFontFamily)();
@@ -66,9 +69,9 @@ var akEditorSelectedBlanketColor = _colors.B75;
66
69
  exports.akEditorSelectedBlanketColor = akEditorSelectedBlanketColor;
67
70
  var akEditorSelectedBorderSize = 1;
68
71
  exports.akEditorSelectedBorderSize = akEditorSelectedBorderSize;
69
- var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(akEditorSelectedBorderColor);
72
+ var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
70
73
  exports.akEditorSelectedBorder = akEditorSelectedBorder;
71
- var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorSelectedBorderColor);
74
+ var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat((0, _tokens.token)('color.border.selected', akEditorSelectedBorderColor));
72
75
  exports.akEditorSelectedBoxShadow = akEditorSelectedBoxShadow;
73
76
  var akEditorSelectedIconColor = _colors.B400;
74
77
  exports.akEditorSelectedIconColor = akEditorSelectedIconColor;
package/dist/cjs/selection/utils.js CHANGED
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.hideNativeBrowserTextSelectionStyles = exports.getSelectionStyles = void 0;
7
7
 
8
+ var _tokens = require("@atlaskit/tokens");
9
+
8
10
  var _consts = require("../consts");
9
11
 
10
12
  var _types = require("./types");
@@ -38,10 +40,10 @@ var getSelectionStyle = function getSelectionStyle(style) {
38
40
  return "\n box-shadow: ".concat(_consts.akEditorSelectedBoxShadow, ";\n border-color: transparent;\n ");
39
41
 
40
42
  case _types.SelectionStyle.Background:
41
- return "background-color: ".concat(_consts.akEditorSelectedBgColor, ";");
43
+ return "background-color: ".concat((0, _tokens.token)('color.background.selected', _consts.akEditorSelectedBgColor), ";");
42
44
 
43
45
  case _types.SelectionStyle.Blanket:
44
- return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::after {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n opacity: ".concat(_consts.akEditorSelectedBlanketOpacity, ";\n pointer-events: none;\n background-color: ").concat(_consts.akEditorSelectedBlanketColor, "\n }");
46
+ return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::after {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n background-color: ".concat((0, _tokens.token)('color.blanket.selected', '#B3D4FF4C'), "\n }");
45
47
 
46
48
  default:
47
49
  return '';
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.0.1",
3
+ "version": "2.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/consts/consts.js CHANGED
@@ -1,5 +1,7 @@
1
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
1
2
  import { B100, B300, B400, B50, B75, DN50, DN70, N0, N100, N20, N30, N40, N50, N500, N700, N900, R300, R400, R50, R75 } from '@atlaskit/theme/colors';
2
3
  import { codeFontFamily, fontSize as defaultFontSize, gridSize, layers } from '@atlaskit/theme/constants';
4
+ import { token } from '@atlaskit/tokens';
3
5
  export const akEditorFullPageDefaultFontSize = 16;
4
6
  export const akEditorCodeFontFamily = codeFontFamily();
5
7
  export const akEditorInactiveForeground = N500;
@@ -26,8 +28,8 @@ export const akEditorSelectedBorderColor = B300;
26
28
  export const akEditorSelectedBgColor = B50;
27
29
  export const akEditorSelectedBlanketColor = B75;
28
30
  export const akEditorSelectedBorderSize = 1;
29
- export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${akEditorSelectedBorderColor}`;
30
- export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${akEditorSelectedBorderColor}`;
31
+ export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${token('color.border.selected', akEditorSelectedBorderColor)}`;
32
+ export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${token('color.border.selected', akEditorSelectedBorderColor)}`;
31
33
  export const akEditorSelectedIconColor = B400;
32
34
  export const akEditorSelectedBorderBoldSize = 2;
33
35
  export const akEditorSelectedBlanketOpacity = 0.3;
package/dist/es2019/overflow-shadow/overflow-shadow.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
1
2
  import { css } from '@emotion/react';
2
3
  export const overflowShadow = ({
3
4
  background,
package/dist/es2019/selection/utils.js CHANGED
@@ -1,4 +1,5 @@
1
- import { akEditorSelectedBgColor, akEditorSelectedBlanketColor, akEditorSelectedBlanketOpacity, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
1
+ import { token } from '@atlaskit/tokens';
2
+ import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
2
3
  import { SelectionStyle } from './types';
3
4
  /**
4
5
  * Adds correct selection styling for a node
@@ -33,7 +34,7 @@ const getSelectionStyle = style => {
33
34
  `;
34
35
 
35
36
  case SelectionStyle.Background:
36
- return `background-color: ${akEditorSelectedBgColor};`;
37
+ return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
37
38
 
38
39
  case SelectionStyle.Blanket:
39
40
  return `
@@ -50,9 +51,8 @@ const getSelectionStyle = style => {
50
51
  right: 0;
51
52
  top: 0;
52
53
  bottom: 0;
53
- opacity: ${akEditorSelectedBlanketOpacity};
54
54
  pointer-events: none;
55
- background-color: ${akEditorSelectedBlanketColor}
55
+ background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
56
56
  }`;
57
57
 
58
58
  default:
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.0.1",
3
+ "version": "2.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/consts/consts.js CHANGED
@@ -1,6 +1,9 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+
3
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
4
  import { B100, B300, B400, B50, B75, DN50, DN70, N0, N100, N20, N30, N40, N50, N500, N700, N900, R300, R400, R50, R75 } from '@atlaskit/theme/colors';
3
5
  import { codeFontFamily, fontSize as defaultFontSize, gridSize, layers } from '@atlaskit/theme/constants';
6
+ import { token } from '@atlaskit/tokens';
4
7
  export var akEditorFullPageDefaultFontSize = 16;
5
8
  export var akEditorCodeFontFamily = codeFontFamily();
6
9
  export var akEditorInactiveForeground = N500;
@@ -27,8 +30,8 @@ export var akEditorSelectedBorderColor = B300;
27
30
  export var akEditorSelectedBgColor = B50;
28
31
  export var akEditorSelectedBlanketColor = B75;
29
32
  export var akEditorSelectedBorderSize = 1;
30
- export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(akEditorSelectedBorderColor);
31
- export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(akEditorSelectedBorderColor);
33
+ export var akEditorSelectedBorder = "".concat(akEditorSelectedBorderSize, "px solid ").concat(token('color.border.selected', akEditorSelectedBorderColor));
34
+ export var akEditorSelectedBoxShadow = "0 0 0 ".concat(akEditorSelectedBorderSize, "px ").concat(token('color.border.selected', akEditorSelectedBorderColor));
32
35
  export var akEditorSelectedIconColor = B400;
33
36
  export var akEditorSelectedBorderBoldSize = 2;
34
37
  export var akEditorSelectedBlanketOpacity = 0.3;
package/dist/esm/overflow-shadow/overflow-shadow.js CHANGED
@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
 
3
3
  var _templateObject;
4
4
 
5
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
5
6
  import { css } from '@emotion/react';
6
7
  export var overflowShadow = function overflowShadow(_ref) {
7
8
  var background = _ref.background,
package/dist/esm/selection/utils.js CHANGED
@@ -1,4 +1,5 @@
1
- import { akEditorSelectedBgColor, akEditorSelectedBlanketColor, akEditorSelectedBlanketOpacity, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
1
+ import { token } from '@atlaskit/tokens';
2
+ import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
2
3
  import { SelectionStyle } from './types';
3
4
  /**
4
5
  * Adds correct selection styling for a node
@@ -27,10 +28,10 @@ var getSelectionStyle = function getSelectionStyle(style) {
27
28
  return "\n box-shadow: ".concat(akEditorSelectedBoxShadow, ";\n border-color: transparent;\n ");
28
29
 
29
30
  case SelectionStyle.Background:
30
- return "background-color: ".concat(akEditorSelectedBgColor, ";");
31
+ return "background-color: ".concat(token('color.background.selected', akEditorSelectedBgColor), ";");
31
32
 
32
33
  case SelectionStyle.Blanket:
33
- return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::after {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n opacity: ".concat(akEditorSelectedBlanketOpacity, ";\n pointer-events: none;\n background-color: ").concat(akEditorSelectedBlanketColor, "\n }");
34
+ return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::after {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n background-color: ".concat(token('color.blanket.selected', '#B3D4FF4C'), "\n }");
34
35
 
35
36
  default:
36
37
  return '';
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.0.1",
3
+ "version": "2.1.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.0.1",
3
+ "version": "2.1.0",
4
4
  "description": "Style values used in the editor/renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,6 +26,7 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@atlaskit/theme": "^12.1.0",
29
+ "@atlaskit/tokens": "^0.9.0",
29
30
  "@babel/runtime": "^7.0.0",
30
31
  "@emotion/react": "^11.7.1"
31
32
  },
@@ -42,7 +43,8 @@
42
43
  "import-structure": "atlassian-conventions"
43
44
  },
44
45
  "@repo/internal": {
45
- "deprecation": "no-deprecated-imports"
46
+ "deprecation": "no-deprecated-imports",
47
+ "theming": "tokens"
46
48
  }
47
49
  },
48
50
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
package/selection/package.json CHANGED
@@ -3,5 +3,6 @@
3
3
  "main": "../dist/cjs/selection/index.js",
4
4
  "module": "../dist/esm/selection/index.js",
5
5
  "module:es2019": "../dist/es2019/selection/index.js",
6
+ "sideEffects": false,
6
7
  "types": "../dist/types/selection/index.d.ts"
7
8
  }
package/src/consts/consts.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
1
2
  import {
2
3
  B100,
3
4
  B300,
@@ -26,6 +27,7 @@ import {
26
27
  gridSize,
27
28
  layers,
28
29
  } from '@atlaskit/theme/constants';
30
+ import { token } from '@atlaskit/tokens';
29
31
 
30
32
  import { EditorTheme } from './types';
31
33
 
@@ -54,8 +56,14 @@ export const akEditorSelectedBorderColor = B300;
54
56
  export const akEditorSelectedBgColor = B50;
55
57
  export const akEditorSelectedBlanketColor = B75;
56
58
  export const akEditorSelectedBorderSize = 1;
57
- export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${akEditorSelectedBorderColor}`;
58
- export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${akEditorSelectedBorderColor}`;
59
+ export const akEditorSelectedBorder = `${akEditorSelectedBorderSize}px solid ${token(
60
+ 'color.border.selected',
61
+ akEditorSelectedBorderColor,
62
+ )}`;
63
+ export const akEditorSelectedBoxShadow = `0 0 0 ${akEditorSelectedBorderSize}px ${token(
64
+ 'color.border.selected',
65
+ akEditorSelectedBorderColor,
66
+ )}`;
59
67
  export const akEditorSelectedIconColor = B400;
60
68
  export const akEditorSelectedBorderBoldSize = 2;
61
69
  export const akEditorSelectedBlanketOpacity = 0.3;
package/src/overflow-shadow/overflow-shadow.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
1
2
  import { css } from '@emotion/react';
2
3
 
3
4
  export const overflowShadow = ({
package/src/selection/utils.ts CHANGED
@@ -1,7 +1,7 @@
1
+ import { token } from '@atlaskit/tokens';
2
+
1
3
  import {
2
4
  akEditorSelectedBgColor,
3
- akEditorSelectedBlanketColor,
4
- akEditorSelectedBlanketOpacity,
5
5
  akEditorSelectedBorder,
6
6
  akEditorSelectedBoxShadow,
7
7
  } from '../consts';
@@ -45,7 +45,10 @@ const getSelectionStyle = (style: SelectionStyle): string => {
45
45
  border-color: transparent;
46
46
  `;
47
47
  case SelectionStyle.Background:
48
- return `background-color: ${akEditorSelectedBgColor};`;
48
+ return `background-color: ${token(
49
+ 'color.background.selected',
50
+ akEditorSelectedBgColor,
51
+ )};`;
49
52
  case SelectionStyle.Blanket:
50
53
  return `
51
54
  position: relative;
@@ -61,9 +64,8 @@ const getSelectionStyle = (style: SelectionStyle): string => {
61
64
  right: 0;
62
65
  top: 0;
63
66
  bottom: 0;
64
- opacity: ${akEditorSelectedBlanketOpacity};
65
67
  pointer-events: none;
66
- background-color: ${akEditorSelectedBlanketColor}
68
+ background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
67
69
  }`;
68
70
  default:
69
71
  return '';