@atlaskit/editor-toolbar 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-toolbar
 
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.0.6
+
+### Patch Changes
+
+- [#195270](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195270)
+  [`749d634017afc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/749d634017afc) -
+  [ux] [ED-28580] change toolbar and toolbar button height, icon size and text color icon, remove
+  dividers and add comment button label
+
 ## 0.0.5
 
 ### Patch Changes

package/afm-rovo-extension/tsconfig.json

@@ -0,0 +1,54 @@
+{
+	"extends": "../../../../tsconfig.entry-points.rovo-extension.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../rovo-extension/tsDist/@atlaskit__editor-toolbar/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/badge/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon-lab/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/logo/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/popup/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-rovo-extension/tsconfig.json"
+		}
+	]
+}

package/afm-townsquare/tsconfig.json

@@ -0,0 +1,54 @@
+{
+	"extends": "../../../../tsconfig.entry-points.townsquare.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../townsquare/tsDist/@atlaskit__editor-toolbar/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../design-system/badge/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon-lab/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/logo/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/popup/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-townsquare/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/ui/Toolbar.compiled.css

@@ -4,5 +4,5 @@
 ._1bsb184x{width:min-content}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._4t3i1ylp{height:40px}
+._4t3i14no{height:36px}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/Toolbar.js

@@ -11,7 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i1ylp _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 var Toolbar = exports.Toolbar = function Toolbar(_ref) {
   var children = _ref.children,

package/dist/cjs/ui/ToolbarButton.compiled.css

@@ -10,7 +10,7 @@
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
 ._1o0zidpf{border-bottom-right-radius:0}
-._1tkezwfg{min-height:2pc}
+._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}

package/dist/cjs/ui/ToolbarButton.js

@@ -12,13 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var ICON_COLOR = {
-  default: "var(--ds-icon-subtle, #626F86)",
-  disabled: "var(--ds-icon-disabled, #091E424F)",
-  selected: "var(--ds-icon-selected, #0C66E4)"
-};
 var styles = {
-  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tkezwfg _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _irr3i1yw _1di619ru",
@@ -27,8 +22,7 @@ var styles = {
   groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
 };
 var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var IconComponent = _ref.icon,
-    label = _ref.label,
+  var iconBefore = _ref.iconBefore,
     children = _ref.children,
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
@@ -42,7 +36,6 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     groupLocation = _ref.groupLocation,
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts;
-  var iconColor = isDisabled ? ICON_COLOR.disabled : isSelected ? ICON_COLOR.selected : ICON_COLOR.default;
   return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     ref: ref,
     xcss: (0, _css.cx)(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
@@ -57,9 +50,5 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     onFocus: onFocus,
     testId: testId,
     isDisabled: isDisabled
-  }, /*#__PURE__*/_react.default.createElement(IconComponent, {
-    label: label,
-    size: "medium",
-    color: iconColor
-  }), children);
+  }, iconBefore, children);
 });

package/dist/cjs/ui/ToolbarColorSwatch.compiled.css

@@ -0,0 +1,9 @@
+
+._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._1bah1h6o{justify-content:center}
+._1bsbgktf{width:20px}
+._1e0c1txw{display:flex}
+._2hwxr5cr{margin-right:var(--ds-space-negative-050,-4px)}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}

package/dist/cjs/ui/ToolbarColorSwatch.js

@@ -0,0 +1,25 @@
+/* ToolbarColorSwatch.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarColorSwatch = void 0;
+require("./ToolbarColorSwatch.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  colorSwatch: "_19it7r9e _2rkoiti9 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
+};
+var ToolbarColorSwatch = exports.ToolbarColorSwatch = function ToolbarColorSwatch(_ref) {
+  var children = _ref.children,
+    highlightColor = _ref.highlightColor;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.colorSwatch,
+    style: {
+      backgroundColor: highlightColor
+    }
+  }, children);
+};

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -9,8 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
 var _ToolbarButton = require("./ToolbarButton");
 var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
-  var icon = _ref.icon,
-    label = _ref.label,
+  var iconBefore = _ref.iconBefore,
     groupLocation = _ref.groupLocation,
     children = _ref.children,
     isDisabled = _ref.isDisabled;
@@ -26,8 +25,7 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
         onClick: triggerProps.onClick,
         onFocus: triggerProps.onFocus,
         testId: triggerProps.testId,
-        icon: icon,
-        label: label,
+        iconBefore: iconBefore,
         groupLocation: groupLocation,
         isDisabled: isDisabled
       });

package/dist/cjs/ui/icons/AIChatIcon.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1crf{width:9pt}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1crf{height:9pt}

package/dist/cjs/ui/icons/AIChatIcon.js

@@ -1,3 +1,4 @@
+/* AIChatIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,14 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AIChatIcon = void 0;
+require("./AIChatIcon.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _logo = require("@atlaskit/logo");
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  small: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
+};
 var AIChatIcon = exports.AIChatIcon = function AIChatIcon(_ref) {
   var label = _ref.label,
     testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_logo.RovoIcon, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.small
+  }, /*#__PURE__*/_react.default.createElement(_logo.RovoIcon, {
     label: label,
     testId: testId,
-    size: "small"
-  });
+    size: "xxsmall"
+  }));
 };

package/dist/cjs/ui/icons/TextColorIcon.compiled.css

@@ -0,0 +1 @@
+._19pk1b66{margin-top:var(--ds-space-050,4px)}

package/dist/cjs/ui/icons/TextColorIcon.js

@@ -1,13 +1,36 @@
+/* TextColorIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TextColorIcon", {
-  enumerable: true,
-  get: function get() {
-    return _textStyle.default;
-  }
-});
-var _textStyle = _interopRequireDefault(require("@atlaskit/icon/core/text-style"));
+exports.TextColorIcon = void 0;
+require("./TextColorIcon.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _textStyle = _interopRequireDefault(require("@atlaskit/icon/core/text-style"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  icon: "_19pk1b66"
+};
+var TextColorIcon = exports.TextColorIcon = function TextColorIcon(_ref) {
+  var label = _ref.label,
+    shouldRecommendSmallIcon = _ref.shouldRecommendSmallIcon,
+    size = _ref.size,
+    spacing = _ref.spacing,
+    testId = _ref.testId,
+    iconColor = _ref.iconColor,
+    isDisabled = _ref.isDisabled;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.icon
+  }, /*#__PURE__*/_react.default.createElement(_textStyle.default, {
+    label: label,
+    testId: testId,
+    color: isDisabled ? "var(--ds-icon-disabled, #091E424F)" : iconColor,
+    shouldRecommendSmallIcon: shouldRecommendSmallIcon,
+    spacing: spacing,
+    size: size
+  }));
+};

package/dist/es2019/ui/Toolbar.compiled.css

@@ -4,5 +4,5 @@
 ._1bsb184x{width:min-content}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._4t3i1ylp{height:40px}
+._4t3i14no{height:36px}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/ui/Toolbar.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i1ylp _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 export const Toolbar = ({
   children,

package/dist/es2019/ui/ToolbarButton.compiled.css

@@ -10,7 +10,7 @@
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
 ._1o0zidpf{border-bottom-right-radius:0}
-._1tkezwfg{min-height:2pc}
+._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}

package/dist/es2019/ui/ToolbarButton.js

@@ -4,13 +4,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
-const ICON_COLOR = {
-  default: "var(--ds-icon-subtle, #626F86)",
-  disabled: "var(--ds-icon-disabled, #091E424F)",
-  selected: "var(--ds-icon-selected, #0C66E4)"
-};
 const styles = {
-  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tkezwfg _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _irr3i1yw _1di619ru",
@@ -19,8 +14,7 @@ const styles = {
   groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
 };
 export const ToolbarButton = /*#__PURE__*/forwardRef(({
-  icon: IconComponent,
-  label,
+  iconBefore,
   children,
   onClick,
   isSelected,
@@ -35,7 +29,6 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   isDisabled,
   ariaKeyshortcuts
 }, ref) => {
-  const iconColor = isDisabled ? ICON_COLOR.disabled : isSelected ? ICON_COLOR.selected : ICON_COLOR.default;
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
@@ -50,9 +43,5 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
     onFocus: onFocus,
     testId: testId,
     isDisabled: isDisabled
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    label: label,
-    size: "medium",
-    color: iconColor
-  }), children);
+  }, iconBefore, children);
 });

package/dist/es2019/ui/ToolbarColorSwatch.compiled.css

@@ -0,0 +1,9 @@
+
+._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._1bah1h6o{justify-content:center}
+._1bsbgktf{width:20px}
+._1e0c1txw{display:flex}
+._2hwxr5cr{margin-right:var(--ds-space-negative-050,-4px)}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}

package/dist/es2019/ui/ToolbarColorSwatch.js

@@ -0,0 +1,19 @@
+/* ToolbarColorSwatch.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolbarColorSwatch.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  colorSwatch: "_19it7r9e _2rkoiti9 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
+};
+export const ToolbarColorSwatch = ({
+  children,
+  highlightColor
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.colorSwatch,
+    style: {
+      backgroundColor: highlightColor
+    }
+  }, children);
+};

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -2,8 +2,7 @@ import React from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { ToolbarButton } from './ToolbarButton';
 export const ToolbarDropdownMenu = ({
-  icon,
-  label,
+  iconBefore,
   groupLocation,
   children,
   isDisabled
@@ -19,8 +18,7 @@ export const ToolbarDropdownMenu = ({
       onClick: triggerProps.onClick,
       onFocus: triggerProps.onFocus,
       testId: triggerProps.testId,
-      icon: icon,
-      label: label,
+      iconBefore: iconBefore,
       groupLocation: groupLocation,
       isDisabled: isDisabled
     })

package/dist/es2019/ui/icons/AIChatIcon.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1crf{width:9pt}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1crf{height:9pt}

package/dist/es2019/ui/icons/AIChatIcon.js

@@ -1,10 +1,19 @@
+/* AIChatIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./AIChatIcon.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { RovoIcon as RovoLogoIcon } from '@atlaskit/logo';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  small: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
+};
 export const AIChatIcon = ({
   label,
   testId
-}) => /*#__PURE__*/React.createElement(RovoLogoIcon, {
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: styles.small
+}, /*#__PURE__*/React.createElement(RovoLogoIcon, {
   label: label,
   testId: testId,
-  size: "small"
-});
+  size: "xxsmall"
+}));

package/dist/es2019/ui/icons/TextColorIcon.compiled.css

@@ -0,0 +1 @@
+._19pk1b66{margin-top:var(--ds-space-050,4px)}

package/dist/es2019/ui/icons/TextColorIcon.js

@@ -1,2 +1,30 @@
-/* eslint-disable @atlaskit/editor/no-re-export */
-export { default as TextColorIcon } from '@atlaskit/icon/core/text-style';
+/* TextColorIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./TextColorIcon.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Icon from '@atlaskit/icon/core/text-style';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  icon: "_19pk1b66"
+};
+export const TextColorIcon = ({
+  label,
+  shouldRecommendSmallIcon,
+  size,
+  spacing,
+  testId,
+  iconColor,
+  isDisabled
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: label,
+    testId: testId,
+    color: isDisabled ? "var(--ds-icon-disabled, #091E424F)" : iconColor,
+    shouldRecommendSmallIcon: shouldRecommendSmallIcon,
+    spacing: spacing,
+    size: size
+  }));
+};

package/dist/esm/ui/Toolbar.compiled.css

@@ -4,5 +4,5 @@
 ._1bsb184x{width:min-content}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._4t3i1ylp{height:40px}
+._4t3i14no{height:36px}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/ui/Toolbar.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i1ylp _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,

package/dist/esm/ui/ToolbarButton.compiled.css

@@ -10,7 +10,7 @@
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
 ._1o0zidpf{border-bottom-right-radius:0}
-._1tkezwfg{min-height:2pc}
+._1tke1f4h{min-height:28px}
 ._4cvr1h6o{align-items:center}
 ._80om13gf{cursor:not-allowed}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}

package/dist/esm/ui/ToolbarButton.js

@@ -4,13 +4,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
-var ICON_COLOR = {
-  default: "var(--ds-icon-subtle, #626F86)",
-  disabled: "var(--ds-icon-disabled, #091E424F)",
-  selected: "var(--ds-icon-selected, #0C66E4)"
-};
 var styles = {
-  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tkezwfg _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
+  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
   selected: "_bfhkfg4m _irr3i1yw _1di619ru",
@@ -19,8 +14,7 @@ var styles = {
   groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
 };
 export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var IconComponent = _ref.icon,
-    label = _ref.label,
+  var iconBefore = _ref.iconBefore,
     children = _ref.children,
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
@@ -34,7 +28,6 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     groupLocation = _ref.groupLocation,
     isDisabled = _ref.isDisabled,
     ariaKeyshortcuts = _ref.ariaKeyshortcuts;
-  var iconColor = isDisabled ? ICON_COLOR.disabled : isSelected ? ICON_COLOR.selected : ICON_COLOR.default;
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
@@ -49,9 +42,5 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onFocus: onFocus,
     testId: testId,
     isDisabled: isDisabled
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    label: label,
-    size: "medium",
-    color: iconColor
-  }), children);
+  }, iconBefore, children);
 });

package/dist/esm/ui/ToolbarColorSwatch.compiled.css

@@ -0,0 +1,9 @@
+
+._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._1bah1h6o{justify-content:center}
+._1bsbgktf{width:20px}
+._1e0c1txw{display:flex}
+._2hwxr5cr{margin-right:var(--ds-space-negative-050,-4px)}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}

package/dist/esm/ui/ToolbarColorSwatch.js

@@ -0,0 +1,18 @@
+/* ToolbarColorSwatch.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolbarColorSwatch.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  colorSwatch: "_19it7r9e _2rkoiti9 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
+};
+export var ToolbarColorSwatch = function ToolbarColorSwatch(_ref) {
+  var children = _ref.children,
+    highlightColor = _ref.highlightColor;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.colorSwatch,
+    style: {
+      backgroundColor: highlightColor
+    }
+  }, children);
+};