@atlaskit/editor-common 74.41.2 → 74.42.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-common
 
+## 74.42.1
+
+### Patch Changes
+
+- [`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.
+
+## 74.42.0
+
+### Minor Changes
+
+- [`7472b6ab3b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7472b6ab3b4) - [ED-19329] Add analytics event for table resize framerate
+- [`9d2794a7753`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d2794a7753) - Add `executeCommand` to `pluginInjectionAPI` which should be used to dispatch a `PluginCommand` - from the `commands` property of a plugin.
+
 ## 74.41.2
 
 ### Patch Changes

package/dist/cjs/analytics/types/table-events.js

@@ -28,6 +28,7 @@ var TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["DISTRIBUTED_COLUMNS_WIDTHS"] = "distributedColumnsWidths";
   TABLE_ACTION["FIXED"] = "fixed";
   TABLE_ACTION["RESIZED"] = "resized";
+  TABLE_ACTION["RESIZE_PERF_SAMPLING"] = "resizePerfSampling";
   return TABLE_ACTION;
 }({});
 exports.TABLE_ACTION = TABLE_ACTION;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.41.2";
+var packageVersion = "74.42.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/preset/plugin-commands.js

@@ -4,6 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pluginCommandToPMCommand = pluginCommandToPMCommand;
+/**
+ * Convert a PluginCommand to a standard Prosemirror Command.
+ * The preferred approach to dispatching a `PluginCommand` is via the
+ * `executeCommand` on `pluginInjectionAPI`. In some cases
+ * the type may require a Command until we refactor this out and this
+ * function is suitable for those cases.
+ *
+ * @param command A plugin command (a function that modifies and returns a `Transaction`)
+ * @returns Command
+ */
 function pluginCommandToPMCommand(command) {
   return function (_ref, dispatch) {
     var tr = _ref.tr;

package/dist/cjs/preset/plugin-injection-api.js

@@ -13,6 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _pluginCommands = require("./plugin-commands");
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -243,7 +244,8 @@ exports.SharedStateAPI = SharedStateAPI;
 var EditorPluginInjectionAPI = /*#__PURE__*/function () {
   function EditorPluginInjectionAPI(_ref6) {
     var _this2 = this;
-    var getEditorState = _ref6.getEditorState;
+    var getEditorState = _ref6.getEditorState,
+      getEditorView = _ref6.getEditorView;
     (0, _classCallCheck2.default)(this, EditorPluginInjectionAPI);
     (0, _defineProperty2.default)(this, "onEditorViewUpdated", function (_ref7) {
       var newEditorState = _ref7.newEditorState,
@@ -270,6 +272,7 @@ var EditorPluginInjectionAPI = /*#__PURE__*/function () {
     this.plugins = new Map();
     this.actionsAPI = new ActionsAPI();
     this.commandsAPI = new PluginCommandsAPI();
+    this.getEditorView = getEditorView;
   }
   (0, _createClass2.default)(EditorPluginInjectionAPI, [{
     key: "api",
@@ -305,9 +308,21 @@ var EditorPluginInjectionAPI = /*#__PURE__*/function () {
         }
       });
       return {
-        dependencies: dependencies
+        dependencies: dependencies,
+        executeCommand: this.executeCommand.bind(this)
       };
     }
+  }, {
+    key: "executeCommand",
+    value: function executeCommand(command) {
+      var editorView = this.getEditorView();
+      if (!editorView || !command) {
+        return false;
+      }
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      return (0, _pluginCommands.pluginCommandToPMCommand)(command)(state, dispatch);
+    }
   }]);
   return EditorPluginInjectionAPI;
 }();

package/dist/cjs/quick-insert/assets/action.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconAction;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+var _useIconThemed2 = require("../use-icon-themed");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 function IconAction() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,15 +21,24 @@ function IconAction() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(7 10)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M3 0h30v20H3a3 3 0 01-3-3V3a3 3 0 013-3z",
-    fill: "#ECEDF0"
+    fill: iconThemed({
+      light: '#ECEDF0',
+      dark: '#454F59'
+    })
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#0052CC",
+    fill: iconThemed({
+      light: '#0052CC',
+      dark: '#09326C'
+    }),
     x: 5,
     y: 5,
     width: 10,
@@ -35,9 +46,15 @@ function IconAction() {
     rx: 2
   }), /*#__PURE__*/_react.default.createElement("path", {
     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",
-    fill: "#FFF"
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#8696A7'
+    })
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M20 9h13v2H20a1 1 0 010-2z",
-    fill: "#C1C7D0"
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#738496'
+    })
   }))));
 }

package/dist/cjs/quick-insert/assets/code.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconCode;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+var _useIconThemed2 = require("../use-icon-themed");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 function IconCode() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -17,16 +19,28 @@ function IconCode() {
     height: 40,
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#fff",
+    fill: iconThemed({
+      light: '#fff',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#ebecf0",
+    fill: iconThemed({
+      light: '#ebecf0',
+      dark: '#2C333A'
+    }),
     d: "M13 6h26v28H13z"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M9 6h4v28H9a2 2 0 01-2-2V8a2 2 0 012-2z",
-    fill: "#dfe1e6"
+    fill: iconThemed({
+      light: '#dfe1e6',
+      dark: '#454F59'
+    })
   }), /*#__PURE__*/_react.default.createElement("g", {
-    fill: "#a5adba"
+    fill: iconThemed({
+      light: '#a5adba',
+      dark: '#8696A7'
+    })
   }, /*#__PURE__*/_react.default.createElement("rect", {
     x: 9,
     y: 9,
@@ -52,7 +66,10 @@ function IconCode() {
     height: 1,
     rx: 0.5
   })), /*#__PURE__*/_react.default.createElement("g", {
-    fill: "#4c9aff"
+    fill: iconThemed({
+      light: '#4c9aff',
+      dark: '#1D7AFC'
+    })
   }, /*#__PURE__*/_react.default.createElement("rect", {
     x: 28,
     y: 25,
@@ -66,7 +83,10 @@ function IconCode() {
     height: 1,
     rx: 0.5
   })), /*#__PURE__*/_react.default.createElement("g", {
-    fill: "#ff7452"
+    fill: iconThemed({
+      light: '#ff7452',
+      dark: '#B22515'
+    })
   }, /*#__PURE__*/_react.default.createElement("rect", {
     x: 16,
     y: 17,
@@ -80,7 +100,10 @@ function IconCode() {
     height: 1,
     rx: 0.5
   })), /*#__PURE__*/_react.default.createElement("g", {
-    fill: "#a5adba"
+    fill: iconThemed({
+      light: '#a5adba',
+      dark: '#8696A7'
+    })
   }, /*#__PURE__*/_react.default.createElement("rect", {
     x: 9,
     y: 13,

package/dist/cjs/quick-insert/assets/decision.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconDecision;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+var _useIconThemed2 = require("../use-icon-themed");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 function IconDecision() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,16 +21,28 @@ function IconDecision() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M10 10h29v20H10a3 3 0 01-3-3V13a3 3 0 013-3z",
-    fill: "#ECEDF0"
+    fill: iconThemed({
+      light: '#ECEDF0',
+      dark: '#454F59'
+    })
   }), /*#__PURE__*/_react.default.createElement("path", {
     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",
-    fill: "#36B37E"
+    fill: iconThemed({
+      light: '#36B37E',
+      dark: '#1F845A'
+    })
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M27 19h12v2H27a1 1 0 010-2z",
-    fill: "#C1C7D0"
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#738496'
+    })
   })));
 }

package/dist/cjs/quick-insert/assets/divider.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconDivider;
 var _react = _interopRequireDefault(require("react"));
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+var _useIconThemed2 = require("../use-icon-themed");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 function IconDivider() {
+  var _useIconThemed = (0, _useIconThemed2.useIconThemed)(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -19,52 +21,76 @@ function IconDivider() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#5A6977'
+    }),
     x: 6,
     y: 19,
     width: 28,
     height: 2,
     rx: 1
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#5A6977'
+    }),
     x: 12,
     y: 14,
     width: 16,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#5A6977'
+    }),
     x: 12,
     y: 11,
     width: 16,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#5A6977'
+    }),
     x: 12,
     y: 8,
     width: 16,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#5A6977'
+    }),
     x: 12,
     y: 31,
     width: 9,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#5A6977'
+    }),
     x: 12,
     y: 28,
     width: 16,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/_react.default.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#5A6977'
+    }),
     x: 12,
     y: 25,
     width: 16,

package/dist/cjs/quick-insert/use-icon-themed.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIconThemed = void 0;
+var _tokens = require("@atlaskit/tokens");
+/**
+ * Warning -- if additional color modes beyond light and dark are added in future -- this will have unexpected behaviour
+ */
+var useIconThemed = function useIconThemed() {
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  return {
+    iconThemed: function iconThemed(colors) {
+      return colorMode && colorMode === 'dark' ? colors['dark'] : colors['light'];
+    }
+  };
+};
+exports.useIconThemed = useIconThemed;

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 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); }; }
 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 */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.41.2";
+var packageVersion = "74.42.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.41.2",
+	"version": "74.42.1",
 	"sideEffects": false
 }

package/dist/es2019/analytics/types/table-events.js

@@ -22,6 +22,7 @@ export let TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["DISTRIBUTED_COLUMNS_WIDTHS"] = "distributedColumnsWidths";
   TABLE_ACTION["FIXED"] = "fixed";
   TABLE_ACTION["RESIZED"] = "resized";
+  TABLE_ACTION["RESIZE_PERF_SAMPLING"] = "resizePerfSampling";
   return TABLE_ACTION;
 }({});
 export let TABLE_BREAKOUT = /*#__PURE__*/function (TABLE_BREAKOUT) {

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.41.2";
+const packageVersion = "74.42.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/preset/plugin-commands.js

@@ -1,3 +1,13 @@
+/**
+ * Convert a PluginCommand to a standard Prosemirror Command.
+ * The preferred approach to dispatching a `PluginCommand` is via the
+ * `executeCommand` on `pluginInjectionAPI`. In some cases
+ * the type may require a Command until we refactor this out and this
+ * function is suitable for those cases.
+ *
+ * @param command A plugin command (a function that modifies and returns a `Transaction`)
+ * @returns Command
+ */
 export function pluginCommandToPMCommand(command) {
   return ({
     tr

package/dist/es2019/preset/plugin-injection-api.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import isEqual from 'lodash/isEqual';
 import throttle from 'lodash/throttle';
+import { pluginCommandToPMCommand } from './plugin-commands';
 function hasGetSharedState(plugin) {
   return typeof plugin.getSharedState === 'function';
 }
@@ -160,7 +161,8 @@ export class SharedStateAPI {
 }
 export class EditorPluginInjectionAPI {
   constructor({
-    getEditorState
+    getEditorState,
+    getEditorView
   }) {
     _defineProperty(this, "onEditorViewUpdated", ({
       newEditorState,
@@ -188,6 +190,7 @@ export class EditorPluginInjectionAPI {
     this.plugins = new Map();
     this.actionsAPI = new ActionsAPI();
     this.commandsAPI = new PluginCommandsAPI();
+    this.getEditorView = getEditorView;
   }
   api() {
     const {
@@ -223,7 +226,19 @@ export class EditorPluginInjectionAPI {
       }
     });
     return {
-      dependencies
+      dependencies,
+      executeCommand: this.executeCommand.bind(this)
     };
   }
+  executeCommand(command) {
+    const editorView = this.getEditorView();
+    if (!editorView || !command) {
+      return false;
+    }
+    const {
+      state,
+      dispatch
+    } = editorView;
+    return pluginCommandToPMCommand(command)(state, dispatch);
+  }
 }

package/dist/es2019/quick-insert/assets/action.js

@@ -1,7 +1,10 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconAction() {
+  const {
+    iconThemed
+  } = useIconThemed();
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,15 +14,24 @@ export default function IconAction() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("g", {
     transform: "translate(7 10)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M3 0h30v20H3a3 3 0 01-3-3V3a3 3 0 013-3z",
-    fill: "#ECEDF0"
+    fill: iconThemed({
+      light: '#ECEDF0',
+      dark: '#454F59'
+    })
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#0052CC",
+    fill: iconThemed({
+      light: '#0052CC',
+      dark: '#09326C'
+    }),
     x: 5,
     y: 5,
     width: 10,
@@ -27,9 +39,15 @@ export default function IconAction() {
     rx: 2
   }), /*#__PURE__*/React.createElement("path", {
     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",
-    fill: "#FFF"
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#8696A7'
+    })
   }), /*#__PURE__*/React.createElement("path", {
     d: "M20 9h13v2H20a1 1 0 010-2z",
-    fill: "#C1C7D0"
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#738496'
+    })
   }))));
 }

package/dist/es2019/quick-insert/assets/code.js

@@ -1,7 +1,10 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconCode() {
+  const {
+    iconThemed
+  } = useIconThemed();
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -9,16 +12,28 @@ export default function IconCode() {
     height: 40,
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
+    fill: iconThemed({
+      light: '#fff',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#ebecf0",
+    fill: iconThemed({
+      light: '#ebecf0',
+      dark: '#2C333A'
+    }),
     d: "M13 6h26v28H13z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M9 6h4v28H9a2 2 0 01-2-2V8a2 2 0 012-2z",
-    fill: "#dfe1e6"
+    fill: iconThemed({
+      light: '#dfe1e6',
+      dark: '#454F59'
+    })
   }), /*#__PURE__*/React.createElement("g", {
-    fill: "#a5adba"
+    fill: iconThemed({
+      light: '#a5adba',
+      dark: '#8696A7'
+    })
   }, /*#__PURE__*/React.createElement("rect", {
     x: 9,
     y: 9,
@@ -44,7 +59,10 @@ export default function IconCode() {
     height: 1,
     rx: 0.5
   })), /*#__PURE__*/React.createElement("g", {
-    fill: "#4c9aff"
+    fill: iconThemed({
+      light: '#4c9aff',
+      dark: '#1D7AFC'
+    })
   }, /*#__PURE__*/React.createElement("rect", {
     x: 28,
     y: 25,
@@ -58,7 +76,10 @@ export default function IconCode() {
     height: 1,
     rx: 0.5
   })), /*#__PURE__*/React.createElement("g", {
-    fill: "#ff7452"
+    fill: iconThemed({
+      light: '#ff7452',
+      dark: '#B22515'
+    })
   }, /*#__PURE__*/React.createElement("rect", {
     x: 16,
     y: 17,
@@ -72,7 +93,10 @@ export default function IconCode() {
     height: 1,
     rx: 0.5
   })), /*#__PURE__*/React.createElement("g", {
-    fill: "#a5adba"
+    fill: iconThemed({
+      light: '#a5adba',
+      dark: '#8696A7'
+    })
   }, /*#__PURE__*/React.createElement("rect", {
     x: 9,
     y: 13,