@atlaskit/editor-common 74.42.0 → 74.42.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 74.42.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`5f8e4780f9e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f8e4780f9e) - [ux] ED-19473 & ED-19435 Adds dark mode icons for action, code, decision, divider and Editor example to test them in none, light and dark modes.
8
+
3
9
  ## 74.42.0
4
10
 
5
11
  ### Minor Changes
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
16
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
17
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
18
18
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
19
- var packageVersion = "74.42.0";
19
+ var packageVersion = "74.42.1";
20
20
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
21
21
  // Remove URL as it has UGC
22
22
  // TODO: Sanitise the URL instead of just removing it
@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = IconAction;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
9
+ var _useIconThemed2 = require("../use-icon-themed");
10
10
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
11
11
 
12
12
  function IconAction() {
13
+ var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
14
+ iconThemed = _useIconThemed.iconThemed;
13
15
  return /*#__PURE__*/_react.default.createElement("svg", {
14
16
  focusable: "false",
15
17
  "aria-hidden": true,
@@ -19,15 +21,24 @@ function IconAction() {
19
21
  fill: "none",
20
22
  fillRule: "evenodd"
21
23
  }, /*#__PURE__*/_react.default.createElement("path", {
22
- fill: "#FFF",
24
+ fill: iconThemed({
25
+ light: '#FFF',
26
+ dark: '#161A1D'
27
+ }),
23
28
  d: "M0 0h40v40H0z"
24
29
  }), /*#__PURE__*/_react.default.createElement("g", {
25
30
  transform: "translate(7 10)"
26
31
  }, /*#__PURE__*/_react.default.createElement("path", {
27
32
  d: "M3 0h30v20H3a3 3 0 01-3-3V3a3 3 0 013-3z",
28
- fill: "#ECEDF0"
33
+ fill: iconThemed({
34
+ light: '#ECEDF0',
35
+ dark: '#454F59'
36
+ })
29
37
  }), /*#__PURE__*/_react.default.createElement("rect", {
30
- fill: "#0052CC",
38
+ fill: iconThemed({
39
+ light: '#0052CC',
40
+ dark: '#09326C'
41
+ }),
31
42
  x: 5,
32
43
  y: 5,
33
44
  width: 10,
@@ -35,9 +46,15 @@ function IconAction() {
35
46
  rx: 2
36
47
  }), /*#__PURE__*/_react.default.createElement("path", {
37
48
  d: "M8.81 12.365l.05.055a.5.5 0 00.77-.042l.048-.065 3.11-4.205a.666.666 0 00-.09-.886.554.554 0 00-.82.098l-2.703 3.655-1.096-1.184a.553.553 0 00-.825 0 .667.667 0 000 .892l1.556 1.682z",
38
- fill: "#FFF"
49
+ fill: iconThemed({
50
+ light: '#FFF',
51
+ dark: '#8696A7'
52
+ })
39
53
  }), /*#__PURE__*/_react.default.createElement("path", {
40
54
  d: "M20 9h13v2H20a1 1 0 010-2z",
41
- fill: "#C1C7D0"
55
+ fill: iconThemed({
56
+ light: '#C1C7D0',
57
+ dark: '#738496'
58
+ })
42
59
  }))));
43
60
  }
@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = IconCode;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
9
+ var _useIconThemed2 = require("../use-icon-themed");
10
10
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
11
11
 
12
12
  function IconCode() {
13
+ var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
14
+ iconThemed = _useIconThemed.iconThemed;
13
15
  return /*#__PURE__*/_react.default.createElement("svg", {
14
16
  focusable: "false",
15
17
  "aria-hidden": true,
@@ -17,16 +19,28 @@ function IconCode() {
17
19
  height: 40,
18
20
  fillRule: "evenodd"
19
21
  }, /*#__PURE__*/_react.default.createElement("path", {
20
- fill: "#fff",
22
+ fill: iconThemed({
23
+ light: '#fff',
24
+ dark: '#161A1D'
25
+ }),
21
26
  d: "M0 0h40v40H0z"
22
27
  }), /*#__PURE__*/_react.default.createElement("path", {
23
- fill: "#ebecf0",
28
+ fill: iconThemed({
29
+ light: '#ebecf0',
30
+ dark: '#2C333A'
31
+ }),
24
32
  d: "M13 6h26v28H13z"
25
33
  }), /*#__PURE__*/_react.default.createElement("path", {
26
34
  d: "M9 6h4v28H9a2 2 0 01-2-2V8a2 2 0 012-2z",
27
- fill: "#dfe1e6"
35
+ fill: iconThemed({
36
+ light: '#dfe1e6',
37
+ dark: '#454F59'
38
+ })
28
39
  }), /*#__PURE__*/_react.default.createElement("g", {
29
- fill: "#a5adba"
40
+ fill: iconThemed({
41
+ light: '#a5adba',
42
+ dark: '#8696A7'
43
+ })
30
44
  }, /*#__PURE__*/_react.default.createElement("rect", {
31
45
  x: 9,
32
46
  y: 9,
@@ -52,7 +66,10 @@ function IconCode() {
52
66
  height: 1,
53
67
  rx: 0.5
54
68
  })), /*#__PURE__*/_react.default.createElement("g", {
55
- fill: "#4c9aff"
69
+ fill: iconThemed({
70
+ light: '#4c9aff',
71
+ dark: '#1D7AFC'
72
+ })
56
73
  }, /*#__PURE__*/_react.default.createElement("rect", {
57
74
  x: 28,
58
75
  y: 25,
@@ -66,7 +83,10 @@ function IconCode() {
66
83
  height: 1,
67
84
  rx: 0.5
68
85
  })), /*#__PURE__*/_react.default.createElement("g", {
69
- fill: "#ff7452"
86
+ fill: iconThemed({
87
+ light: '#ff7452',
88
+ dark: '#B22515'
89
+ })
70
90
  }, /*#__PURE__*/_react.default.createElement("rect", {
71
91
  x: 16,
72
92
  y: 17,
@@ -80,7 +100,10 @@ function IconCode() {
80
100
  height: 1,
81
101
  rx: 0.5
82
102
  })), /*#__PURE__*/_react.default.createElement("g", {
83
- fill: "#a5adba"
103
+ fill: iconThemed({
104
+ light: '#a5adba',
105
+ dark: '#8696A7'
106
+ })
84
107
  }, /*#__PURE__*/_react.default.createElement("rect", {
85
108
  x: 9,
86
109
  y: 13,
@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = IconDecision;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
9
+ var _useIconThemed2 = require("../use-icon-themed");
10
10
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
11
11
 
12
12
  function IconDecision() {
13
+ var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
14
+ iconThemed = _useIconThemed.iconThemed;
13
15
  return /*#__PURE__*/_react.default.createElement("svg", {
14
16
  focusable: "false",
15
17
  "aria-hidden": true,
@@ -19,16 +21,28 @@ function IconDecision() {
19
21
  fill: "none",
20
22
  fillRule: "evenodd"
21
23
  }, /*#__PURE__*/_react.default.createElement("path", {
22
- fill: "#FFF",
24
+ fill: iconThemed({
25
+ light: '#FFF',
26
+ dark: '#161A1D'
27
+ }),
23
28
  d: "M0 0h40v40H0z"
24
29
  }), /*#__PURE__*/_react.default.createElement("path", {
25
30
  d: "M10 10h29v20H10a3 3 0 01-3-3V13a3 3 0 013-3z",
26
- fill: "#ECEDF0"
31
+ fill: iconThemed({
32
+ light: '#ECEDF0',
33
+ dark: '#454F59'
34
+ })
27
35
  }), /*#__PURE__*/_react.default.createElement("path", {
28
36
  d: "M14.414 16l3.293 3.293c.187.187.293.442.293.707v5a1 1 0 01-2 0v-4.586l-3-3V18.5a1 1 0 01-2 0V15a1 1 0 011-1h3.5a1 1 0 010 2h-1.086zm8.293-1.707a.999.999 0 010 1.414l-2.5 2.5a.997.997 0 01-1.414 0 .999.999 0 010-1.414l2.5-2.5a.999.999 0 011.414 0z",
29
- fill: "#36B37E"
37
+ fill: iconThemed({
38
+ light: '#36B37E',
39
+ dark: '#1F845A'
40
+ })
30
41
  }), /*#__PURE__*/_react.default.createElement("path", {
31
42
  d: "M27 19h12v2H27a1 1 0 010-2z",
32
- fill: "#C1C7D0"
43
+ fill: iconThemed({
44
+ light: '#C1C7D0',
45
+ dark: '#738496'
46
+ })
33
47
  })));
34
48
  }
@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = IconDivider;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
9
+ var _useIconThemed2 = require("../use-icon-themed");
10
10
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
11
11
 
12
12
  function IconDivider() {
13
+ var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
14
+ iconThemed = _useIconThemed.iconThemed;
13
15
  return /*#__PURE__*/_react.default.createElement("svg", {
14
16
  focusable: "false",
15
17
  "aria-hidden": true,
@@ -19,52 +21,76 @@ function IconDivider() {
19
21
  fill: "none",
20
22
  fillRule: "evenodd"
21
23
  }, /*#__PURE__*/_react.default.createElement("path", {
22
- fill: "#FFF",
24
+ fill: iconThemed({
25
+ light: '#FFF',
26
+ dark: '#161A1D'
27
+ }),
23
28
  d: "M0 0h40v40H0z"
24
29
  }), /*#__PURE__*/_react.default.createElement("rect", {
25
- fill: "#C1C7D0",
30
+ fill: iconThemed({
31
+ light: '#C1C7D0',
32
+ dark: '#5A6977'
33
+ }),
26
34
  x: 6,
27
35
  y: 19,
28
36
  width: 28,
29
37
  height: 2,
30
38
  rx: 1
31
39
  }), /*#__PURE__*/_react.default.createElement("rect", {
32
- fill: "#C1C7D0",
40
+ fill: iconThemed({
41
+ light: '#C1C7D0',
42
+ dark: '#5A6977'
43
+ }),
33
44
  x: 12,
34
45
  y: 14,
35
46
  width: 16,
36
47
  height: 1,
37
48
  rx: 0.5
38
49
  }), /*#__PURE__*/_react.default.createElement("rect", {
39
- fill: "#C1C7D0",
50
+ fill: iconThemed({
51
+ light: '#C1C7D0',
52
+ dark: '#5A6977'
53
+ }),
40
54
  x: 12,
41
55
  y: 11,
42
56
  width: 16,
43
57
  height: 1,
44
58
  rx: 0.5
45
59
  }), /*#__PURE__*/_react.default.createElement("rect", {
46
- fill: "#C1C7D0",
60
+ fill: iconThemed({
61
+ light: '#C1C7D0',
62
+ dark: '#5A6977'
63
+ }),
47
64
  x: 12,
48
65
  y: 8,
49
66
  width: 16,
50
67
  height: 1,
51
68
  rx: 0.5
52
69
  }), /*#__PURE__*/_react.default.createElement("rect", {
53
- fill: "#C1C7D0",
70
+ fill: iconThemed({
71
+ light: '#C1C7D0',
72
+ dark: '#5A6977'
73
+ }),
54
74
  x: 12,
55
75
  y: 31,
56
76
  width: 9,
57
77
  height: 1,
58
78
  rx: 0.5
59
79
  }), /*#__PURE__*/_react.default.createElement("rect", {
60
- fill: "#C1C7D0",
80
+ fill: iconThemed({
81
+ light: '#C1C7D0',
82
+ dark: '#5A6977'
83
+ }),
61
84
  x: 12,
62
85
  y: 28,
63
86
  width: 16,
64
87
  height: 1,
65
88
  rx: 0.5
66
89
  }), /*#__PURE__*/_react.default.createElement("rect", {
67
- fill: "#C1C7D0",
90
+ fill: iconThemed({
91
+ light: '#C1C7D0',
92
+ dark: '#5A6977'
93
+ }),
68
94
  x: 12,
69
95
  y: 25,
70
96
  width: 16,
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useIconThemed = void 0;
7
+ var _tokens = require("@atlaskit/tokens");
8
+ /**
9
+ * Warning -- if additional color modes beyond light and dark are added in future -- this will have unexpected behaviour
10
+ */
11
+ var useIconThemed = function useIconThemed() {
12
+ var _useThemeObserver = (0, _tokens.useThemeObserver)(),
13
+ colorMode = _useThemeObserver.colorMode;
14
+ return {
15
+ iconThemed: function iconThemed(colors) {
16
+ return colorMode && colorMode === 'dark' ? colors['dark'] : colors['light'];
17
+ }
18
+ };
19
+ };
20
+ exports.useIconThemed = useIconThemed;
@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
24
24
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
25
25
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "74.42.0";
27
+ var packageVersion = "74.42.1";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var DropList = /*#__PURE__*/function (_Component) {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.42.0",
3
+ "version": "74.42.1",
4
4
  "sideEffects": false
5
5
  }
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "74.42.0";
3
+ const packageVersion = "74.42.1";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
@@ -1,7 +1,10 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconAction() {
5
+ const {
6
+ iconThemed
7
+ } = useIconThemed();
5
8
  return /*#__PURE__*/React.createElement("svg", {
6
9
  focusable: "false",
7
10
  "aria-hidden": true,
@@ -11,15 +14,24 @@ export default function IconAction() {
11
14
  fill: "none",
12
15
  fillRule: "evenodd"
13
16
  }, /*#__PURE__*/React.createElement("path", {
14
- fill: "#FFF",
17
+ fill: iconThemed({
18
+ light: '#FFF',
19
+ dark: '#161A1D'
20
+ }),
15
21
  d: "M0 0h40v40H0z"
16
22
  }), /*#__PURE__*/React.createElement("g", {
17
23
  transform: "translate(7 10)"
18
24
  }, /*#__PURE__*/React.createElement("path", {
19
25
  d: "M3 0h30v20H3a3 3 0 01-3-3V3a3 3 0 013-3z",
20
- fill: "#ECEDF0"
26
+ fill: iconThemed({
27
+ light: '#ECEDF0',
28
+ dark: '#454F59'
29
+ })
21
30
  }), /*#__PURE__*/React.createElement("rect", {
22
- fill: "#0052CC",
31
+ fill: iconThemed({
32
+ light: '#0052CC',
33
+ dark: '#09326C'
34
+ }),
23
35
  x: 5,
24
36
  y: 5,
25
37
  width: 10,
@@ -27,9 +39,15 @@ export default function IconAction() {
27
39
  rx: 2
28
40
  }), /*#__PURE__*/React.createElement("path", {
29
41
  d: "M8.81 12.365l.05.055a.5.5 0 00.77-.042l.048-.065 3.11-4.205a.666.666 0 00-.09-.886.554.554 0 00-.82.098l-2.703 3.655-1.096-1.184a.553.553 0 00-.825 0 .667.667 0 000 .892l1.556 1.682z",
30
- fill: "#FFF"
42
+ fill: iconThemed({
43
+ light: '#FFF',
44
+ dark: '#8696A7'
45
+ })
31
46
  }), /*#__PURE__*/React.createElement("path", {
32
47
  d: "M20 9h13v2H20a1 1 0 010-2z",
33
- fill: "#C1C7D0"
48
+ fill: iconThemed({
49
+ light: '#C1C7D0',
50
+ dark: '#738496'
51
+ })
34
52
  }))));
35
53
  }
@@ -1,7 +1,10 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconCode() {
5
+ const {
6
+ iconThemed
7
+ } = useIconThemed();
5
8
  return /*#__PURE__*/React.createElement("svg", {
6
9
  focusable: "false",
7
10
  "aria-hidden": true,
@@ -9,16 +12,28 @@ export default function IconCode() {
9
12
  height: 40,
10
13
  fillRule: "evenodd"
11
14
  }, /*#__PURE__*/React.createElement("path", {
12
- fill: "#fff",
15
+ fill: iconThemed({
16
+ light: '#fff',
17
+ dark: '#161A1D'
18
+ }),
13
19
  d: "M0 0h40v40H0z"
14
20
  }), /*#__PURE__*/React.createElement("path", {
15
- fill: "#ebecf0",
21
+ fill: iconThemed({
22
+ light: '#ebecf0',
23
+ dark: '#2C333A'
24
+ }),
16
25
  d: "M13 6h26v28H13z"
17
26
  }), /*#__PURE__*/React.createElement("path", {
18
27
  d: "M9 6h4v28H9a2 2 0 01-2-2V8a2 2 0 012-2z",
19
- fill: "#dfe1e6"
28
+ fill: iconThemed({
29
+ light: '#dfe1e6',
30
+ dark: '#454F59'
31
+ })
20
32
  }), /*#__PURE__*/React.createElement("g", {
21
- fill: "#a5adba"
33
+ fill: iconThemed({
34
+ light: '#a5adba',
35
+ dark: '#8696A7'
36
+ })
22
37
  }, /*#__PURE__*/React.createElement("rect", {
23
38
  x: 9,
24
39
  y: 9,
@@ -44,7 +59,10 @@ export default function IconCode() {
44
59
  height: 1,
45
60
  rx: 0.5
46
61
  })), /*#__PURE__*/React.createElement("g", {
47
- fill: "#4c9aff"
62
+ fill: iconThemed({
63
+ light: '#4c9aff',
64
+ dark: '#1D7AFC'
65
+ })
48
66
  }, /*#__PURE__*/React.createElement("rect", {
49
67
  x: 28,
50
68
  y: 25,
@@ -58,7 +76,10 @@ export default function IconCode() {
58
76
  height: 1,
59
77
  rx: 0.5
60
78
  })), /*#__PURE__*/React.createElement("g", {
61
- fill: "#ff7452"
79
+ fill: iconThemed({
80
+ light: '#ff7452',
81
+ dark: '#B22515'
82
+ })
62
83
  }, /*#__PURE__*/React.createElement("rect", {
63
84
  x: 16,
64
85
  y: 17,
@@ -72,7 +93,10 @@ export default function IconCode() {
72
93
  height: 1,
73
94
  rx: 0.5
74
95
  })), /*#__PURE__*/React.createElement("g", {
75
- fill: "#a5adba"
96
+ fill: iconThemed({
97
+ light: '#a5adba',
98
+ dark: '#8696A7'
99
+ })
76
100
  }, /*#__PURE__*/React.createElement("rect", {
77
101
  x: 9,
78
102
  y: 13,
@@ -1,7 +1,10 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconDecision() {
5
+ const {
6
+ iconThemed
7
+ } = useIconThemed();
5
8
  return /*#__PURE__*/React.createElement("svg", {
6
9
  focusable: "false",
7
10
  "aria-hidden": true,
@@ -11,16 +14,28 @@ export default function IconDecision() {
11
14
  fill: "none",
12
15
  fillRule: "evenodd"
13
16
  }, /*#__PURE__*/React.createElement("path", {
14
- fill: "#FFF",
17
+ fill: iconThemed({
18
+ light: '#FFF',
19
+ dark: '#161A1D'
20
+ }),
15
21
  d: "M0 0h40v40H0z"
16
22
  }), /*#__PURE__*/React.createElement("path", {
17
23
  d: "M10 10h29v20H10a3 3 0 01-3-3V13a3 3 0 013-3z",
18
- fill: "#ECEDF0"
24
+ fill: iconThemed({
25
+ light: '#ECEDF0',
26
+ dark: '#454F59'
27
+ })
19
28
  }), /*#__PURE__*/React.createElement("path", {
20
29
  d: "M14.414 16l3.293 3.293c.187.187.293.442.293.707v5a1 1 0 01-2 0v-4.586l-3-3V18.5a1 1 0 01-2 0V15a1 1 0 011-1h3.5a1 1 0 010 2h-1.086zm8.293-1.707a.999.999 0 010 1.414l-2.5 2.5a.997.997 0 01-1.414 0 .999.999 0 010-1.414l2.5-2.5a.999.999 0 011.414 0z",
21
- fill: "#36B37E"
30
+ fill: iconThemed({
31
+ light: '#36B37E',
32
+ dark: '#1F845A'
33
+ })
22
34
  }), /*#__PURE__*/React.createElement("path", {
23
35
  d: "M27 19h12v2H27a1 1 0 010-2z",
24
- fill: "#C1C7D0"
36
+ fill: iconThemed({
37
+ light: '#C1C7D0',
38
+ dark: '#738496'
39
+ })
25
40
  })));
26
41
  }
@@ -1,7 +1,10 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconDivider() {
5
+ const {
6
+ iconThemed
7
+ } = useIconThemed();
5
8
  return /*#__PURE__*/React.createElement("svg", {
6
9
  focusable: "false",
7
10
  "aria-hidden": true,
@@ -11,52 +14,76 @@ export default function IconDivider() {
11
14
  fill: "none",
12
15
  fillRule: "evenodd"
13
16
  }, /*#__PURE__*/React.createElement("path", {
14
- fill: "#FFF",
17
+ fill: iconThemed({
18
+ light: '#FFF',
19
+ dark: '#161A1D'
20
+ }),
15
21
  d: "M0 0h40v40H0z"
16
22
  }), /*#__PURE__*/React.createElement("rect", {
17
- fill: "#C1C7D0",
23
+ fill: iconThemed({
24
+ light: '#C1C7D0',
25
+ dark: '#5A6977'
26
+ }),
18
27
  x: 6,
19
28
  y: 19,
20
29
  width: 28,
21
30
  height: 2,
22
31
  rx: 1
23
32
  }), /*#__PURE__*/React.createElement("rect", {
24
- fill: "#C1C7D0",
33
+ fill: iconThemed({
34
+ light: '#C1C7D0',
35
+ dark: '#5A6977'
36
+ }),
25
37
  x: 12,
26
38
  y: 14,
27
39
  width: 16,
28
40
  height: 1,
29
41
  rx: 0.5
30
42
  }), /*#__PURE__*/React.createElement("rect", {
31
- fill: "#C1C7D0",
43
+ fill: iconThemed({
44
+ light: '#C1C7D0',
45
+ dark: '#5A6977'
46
+ }),
32
47
  x: 12,
33
48
  y: 11,
34
49
  width: 16,
35
50
  height: 1,
36
51
  rx: 0.5
37
52
  }), /*#__PURE__*/React.createElement("rect", {
38
- fill: "#C1C7D0",
53
+ fill: iconThemed({
54
+ light: '#C1C7D0',
55
+ dark: '#5A6977'
56
+ }),
39
57
  x: 12,
40
58
  y: 8,
41
59
  width: 16,
42
60
  height: 1,
43
61
  rx: 0.5
44
62
  }), /*#__PURE__*/React.createElement("rect", {
45
- fill: "#C1C7D0",
63
+ fill: iconThemed({
64
+ light: '#C1C7D0',
65
+ dark: '#5A6977'
66
+ }),
46
67
  x: 12,
47
68
  y: 31,
48
69
  width: 9,
49
70
  height: 1,
50
71
  rx: 0.5
51
72
  }), /*#__PURE__*/React.createElement("rect", {
52
- fill: "#C1C7D0",
73
+ fill: iconThemed({
74
+ light: '#C1C7D0',
75
+ dark: '#5A6977'
76
+ }),
53
77
  x: 12,
54
78
  y: 28,
55
79
  width: 16,
56
80
  height: 1,
57
81
  rx: 0.5
58
82
  }), /*#__PURE__*/React.createElement("rect", {
59
- fill: "#C1C7D0",
83
+ fill: iconThemed({
84
+ light: '#C1C7D0',
85
+ dark: '#5A6977'
86
+ }),
60
87
  x: 12,
61
88
  y: 25,
62
89
  width: 16,
@@ -0,0 +1,14 @@
1
+ import { useThemeObserver } from '@atlaskit/tokens';
2
+ /**
3
+ * Warning -- if additional color modes beyond light and dark are added in future -- this will have unexpected behaviour
4
+ */
5
+ export const useIconThemed = () => {
6
+ const {
7
+ colorMode
8
+ } = useThemeObserver();
9
+ return {
10
+ iconThemed: colors => {
11
+ return colorMode && colorMode === 'dark' ? colors['dark'] : colors['light'];
12
+ }
13
+ };
14
+ };
@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
8
8
  import { borderRadius } from '@atlaskit/theme/constants';
9
9
  import Layer from '../Layer';
10
10
  const packageName = "@atlaskit/editor-common";
11
- const packageVersion = "74.42.0";
11
+ const packageVersion = "74.42.1";
12
12
  const halfFocusRing = 1;
13
13
  const dropOffset = '0, 8';
14
14
  class DropList extends Component {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.42.0",
3
+ "version": "74.42.1",
4
4
  "sideEffects": false
5
5
  }
@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
6
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
7
7
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
8
8
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
9
- var packageVersion = "74.42.0";
9
+ var packageVersion = "74.42.1";
10
10
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
11
11
  // Remove URL as it has UGC
12
12
  // TODO: Sanitise the URL instead of just removing it
@@ -1,7 +1,9 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconAction() {
5
+ var _useIconThemed = useIconThemed(),
6
+ iconThemed = _useIconThemed.iconThemed;
5
7
  return /*#__PURE__*/React.createElement("svg", {
6
8
  focusable: "false",
7
9
  "aria-hidden": true,
@@ -11,15 +13,24 @@ export default function IconAction() {
11
13
  fill: "none",
12
14
  fillRule: "evenodd"
13
15
  }, /*#__PURE__*/React.createElement("path", {
14
- fill: "#FFF",
16
+ fill: iconThemed({
17
+ light: '#FFF',
18
+ dark: '#161A1D'
19
+ }),
15
20
  d: "M0 0h40v40H0z"
16
21
  }), /*#__PURE__*/React.createElement("g", {
17
22
  transform: "translate(7 10)"
18
23
  }, /*#__PURE__*/React.createElement("path", {
19
24
  d: "M3 0h30v20H3a3 3 0 01-3-3V3a3 3 0 013-3z",
20
- fill: "#ECEDF0"
25
+ fill: iconThemed({
26
+ light: '#ECEDF0',
27
+ dark: '#454F59'
28
+ })
21
29
  }), /*#__PURE__*/React.createElement("rect", {
22
- fill: "#0052CC",
30
+ fill: iconThemed({
31
+ light: '#0052CC',
32
+ dark: '#09326C'
33
+ }),
23
34
  x: 5,
24
35
  y: 5,
25
36
  width: 10,
@@ -27,9 +38,15 @@ export default function IconAction() {
27
38
  rx: 2
28
39
  }), /*#__PURE__*/React.createElement("path", {
29
40
  d: "M8.81 12.365l.05.055a.5.5 0 00.77-.042l.048-.065 3.11-4.205a.666.666 0 00-.09-.886.554.554 0 00-.82.098l-2.703 3.655-1.096-1.184a.553.553 0 00-.825 0 .667.667 0 000 .892l1.556 1.682z",
30
- fill: "#FFF"
41
+ fill: iconThemed({
42
+ light: '#FFF',
43
+ dark: '#8696A7'
44
+ })
31
45
  }), /*#__PURE__*/React.createElement("path", {
32
46
  d: "M20 9h13v2H20a1 1 0 010-2z",
33
- fill: "#C1C7D0"
47
+ fill: iconThemed({
48
+ light: '#C1C7D0',
49
+ dark: '#738496'
50
+ })
34
51
  }))));
35
52
  }
@@ -1,7 +1,9 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconCode() {
5
+ var _useIconThemed = useIconThemed(),
6
+ iconThemed = _useIconThemed.iconThemed;
5
7
  return /*#__PURE__*/React.createElement("svg", {
6
8
  focusable: "false",
7
9
  "aria-hidden": true,
@@ -9,16 +11,28 @@ export default function IconCode() {
9
11
  height: 40,
10
12
  fillRule: "evenodd"
11
13
  }, /*#__PURE__*/React.createElement("path", {
12
- fill: "#fff",
14
+ fill: iconThemed({
15
+ light: '#fff',
16
+ dark: '#161A1D'
17
+ }),
13
18
  d: "M0 0h40v40H0z"
14
19
  }), /*#__PURE__*/React.createElement("path", {
15
- fill: "#ebecf0",
20
+ fill: iconThemed({
21
+ light: '#ebecf0',
22
+ dark: '#2C333A'
23
+ }),
16
24
  d: "M13 6h26v28H13z"
17
25
  }), /*#__PURE__*/React.createElement("path", {
18
26
  d: "M9 6h4v28H9a2 2 0 01-2-2V8a2 2 0 012-2z",
19
- fill: "#dfe1e6"
27
+ fill: iconThemed({
28
+ light: '#dfe1e6',
29
+ dark: '#454F59'
30
+ })
20
31
  }), /*#__PURE__*/React.createElement("g", {
21
- fill: "#a5adba"
32
+ fill: iconThemed({
33
+ light: '#a5adba',
34
+ dark: '#8696A7'
35
+ })
22
36
  }, /*#__PURE__*/React.createElement("rect", {
23
37
  x: 9,
24
38
  y: 9,
@@ -44,7 +58,10 @@ export default function IconCode() {
44
58
  height: 1,
45
59
  rx: 0.5
46
60
  })), /*#__PURE__*/React.createElement("g", {
47
- fill: "#4c9aff"
61
+ fill: iconThemed({
62
+ light: '#4c9aff',
63
+ dark: '#1D7AFC'
64
+ })
48
65
  }, /*#__PURE__*/React.createElement("rect", {
49
66
  x: 28,
50
67
  y: 25,
@@ -58,7 +75,10 @@ export default function IconCode() {
58
75
  height: 1,
59
76
  rx: 0.5
60
77
  })), /*#__PURE__*/React.createElement("g", {
61
- fill: "#ff7452"
78
+ fill: iconThemed({
79
+ light: '#ff7452',
80
+ dark: '#B22515'
81
+ })
62
82
  }, /*#__PURE__*/React.createElement("rect", {
63
83
  x: 16,
64
84
  y: 17,
@@ -72,7 +92,10 @@ export default function IconCode() {
72
92
  height: 1,
73
93
  rx: 0.5
74
94
  })), /*#__PURE__*/React.createElement("g", {
75
- fill: "#a5adba"
95
+ fill: iconThemed({
96
+ light: '#a5adba',
97
+ dark: '#8696A7'
98
+ })
76
99
  }, /*#__PURE__*/React.createElement("rect", {
77
100
  x: 9,
78
101
  y: 13,
@@ -1,7 +1,9 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconDecision() {
5
+ var _useIconThemed = useIconThemed(),
6
+ iconThemed = _useIconThemed.iconThemed;
5
7
  return /*#__PURE__*/React.createElement("svg", {
6
8
  focusable: "false",
7
9
  "aria-hidden": true,
@@ -11,16 +13,28 @@ export default function IconDecision() {
11
13
  fill: "none",
12
14
  fillRule: "evenodd"
13
15
  }, /*#__PURE__*/React.createElement("path", {
14
- fill: "#FFF",
16
+ fill: iconThemed({
17
+ light: '#FFF',
18
+ dark: '#161A1D'
19
+ }),
15
20
  d: "M0 0h40v40H0z"
16
21
  }), /*#__PURE__*/React.createElement("path", {
17
22
  d: "M10 10h29v20H10a3 3 0 01-3-3V13a3 3 0 013-3z",
18
- fill: "#ECEDF0"
23
+ fill: iconThemed({
24
+ light: '#ECEDF0',
25
+ dark: '#454F59'
26
+ })
19
27
  }), /*#__PURE__*/React.createElement("path", {
20
28
  d: "M14.414 16l3.293 3.293c.187.187.293.442.293.707v5a1 1 0 01-2 0v-4.586l-3-3V18.5a1 1 0 01-2 0V15a1 1 0 011-1h3.5a1 1 0 010 2h-1.086zm8.293-1.707a.999.999 0 010 1.414l-2.5 2.5a.997.997 0 01-1.414 0 .999.999 0 010-1.414l2.5-2.5a.999.999 0 011.414 0z",
21
- fill: "#36B37E"
29
+ fill: iconThemed({
30
+ light: '#36B37E',
31
+ dark: '#1F845A'
32
+ })
22
33
  }), /*#__PURE__*/React.createElement("path", {
23
34
  d: "M27 19h12v2H27a1 1 0 010-2z",
24
- fill: "#C1C7D0"
35
+ fill: iconThemed({
36
+ light: '#C1C7D0',
37
+ dark: '#738496'
38
+ })
25
39
  })));
26
40
  }
@@ -1,7 +1,9 @@
1
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4138
2
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
2
  import React from 'react';
3
+ import { useIconThemed } from '../use-icon-themed';
4
4
  export default function IconDivider() {
5
+ var _useIconThemed = useIconThemed(),
6
+ iconThemed = _useIconThemed.iconThemed;
5
7
  return /*#__PURE__*/React.createElement("svg", {
6
8
  focusable: "false",
7
9
  "aria-hidden": true,
@@ -11,52 +13,76 @@ export default function IconDivider() {
11
13
  fill: "none",
12
14
  fillRule: "evenodd"
13
15
  }, /*#__PURE__*/React.createElement("path", {
14
- fill: "#FFF",
16
+ fill: iconThemed({
17
+ light: '#FFF',
18
+ dark: '#161A1D'
19
+ }),
15
20
  d: "M0 0h40v40H0z"
16
21
  }), /*#__PURE__*/React.createElement("rect", {
17
- fill: "#C1C7D0",
22
+ fill: iconThemed({
23
+ light: '#C1C7D0',
24
+ dark: '#5A6977'
25
+ }),
18
26
  x: 6,
19
27
  y: 19,
20
28
  width: 28,
21
29
  height: 2,
22
30
  rx: 1
23
31
  }), /*#__PURE__*/React.createElement("rect", {
24
- fill: "#C1C7D0",
32
+ fill: iconThemed({
33
+ light: '#C1C7D0',
34
+ dark: '#5A6977'
35
+ }),
25
36
  x: 12,
26
37
  y: 14,
27
38
  width: 16,
28
39
  height: 1,
29
40
  rx: 0.5
30
41
  }), /*#__PURE__*/React.createElement("rect", {
31
- fill: "#C1C7D0",
42
+ fill: iconThemed({
43
+ light: '#C1C7D0',
44
+ dark: '#5A6977'
45
+ }),
32
46
  x: 12,
33
47
  y: 11,
34
48
  width: 16,
35
49
  height: 1,
36
50
  rx: 0.5
37
51
  }), /*#__PURE__*/React.createElement("rect", {
38
- fill: "#C1C7D0",
52
+ fill: iconThemed({
53
+ light: '#C1C7D0',
54
+ dark: '#5A6977'
55
+ }),
39
56
  x: 12,
40
57
  y: 8,
41
58
  width: 16,
42
59
  height: 1,
43
60
  rx: 0.5
44
61
  }), /*#__PURE__*/React.createElement("rect", {
45
- fill: "#C1C7D0",
62
+ fill: iconThemed({
63
+ light: '#C1C7D0',
64
+ dark: '#5A6977'
65
+ }),
46
66
  x: 12,
47
67
  y: 31,
48
68
  width: 9,
49
69
  height: 1,
50
70
  rx: 0.5
51
71
  }), /*#__PURE__*/React.createElement("rect", {
52
- fill: "#C1C7D0",
72
+ fill: iconThemed({
73
+ light: '#C1C7D0',
74
+ dark: '#5A6977'
75
+ }),
53
76
  x: 12,
54
77
  y: 28,
55
78
  width: 16,
56
79
  height: 1,
57
80
  rx: 0.5
58
81
  }), /*#__PURE__*/React.createElement("rect", {
59
- fill: "#C1C7D0",
82
+ fill: iconThemed({
83
+ light: '#C1C7D0',
84
+ dark: '#5A6977'
85
+ }),
60
86
  x: 12,
61
87
  y: 25,
62
88
  width: 16,
@@ -0,0 +1,13 @@
1
+ import { useThemeObserver } from '@atlaskit/tokens';
2
+ /**
3
+ * Warning -- if additional color modes beyond light and dark are added in future -- this will have unexpected behaviour
4
+ */
5
+ export var useIconThemed = function useIconThemed() {
6
+ var _useThemeObserver = useThemeObserver(),
7
+ colorMode = _useThemeObserver.colorMode;
8
+ return {
9
+ iconThemed: function iconThemed(colors) {
10
+ return colorMode && colorMode === 'dark' ? colors['dark'] : colors['light'];
11
+ }
12
+ };
13
+ };
@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
18
18
  import { borderRadius } from '@atlaskit/theme/constants';
19
19
  import Layer from '../Layer';
20
20
  var packageName = "@atlaskit/editor-common";
21
- var packageVersion = "74.42.0";
21
+ var packageVersion = "74.42.1";
22
22
  var halfFocusRing = 1;
23
23
  var dropOffset = '0, 8';
24
24
  var DropList = /*#__PURE__*/function (_Component) {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.42.0",
3
+ "version": "74.42.1",
4
4
  "sideEffects": false
5
5
  }
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Warning -- if additional color modes beyond light and dark are added in future -- this will have unexpected behaviour
3
+ */
4
+ export declare const useIconThemed: () => {
5
+ iconThemed: (colors: {
6
+ light: string;
7
+ dark: string;
8
+ }) => string;
9
+ };
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Warning -- if additional color modes beyond light and dark are added in future -- this will have unexpected behaviour
3
+ */
4
+ export declare const useIconThemed: () => {
5
+ iconThemed: (colors: {
6
+ light: string;
7
+ dark: string;
8
+ }) => string;
9
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.42.0",
3
+ "version": "74.42.1",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"