@atlaskit/editor-toolbar 0.0.5 → 0.0.7

package/dist/esm/ui/ToolbarDropdownMenu.js

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

package/dist/esm/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/esm/ui/icons/AIChatIcon.js

@@ -1,11 +1,20 @@
+/* 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';
+var styles = {
+  small: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
+};
 export var AIChatIcon = function AIChatIcon(_ref) {
   var label = _ref.label,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(RovoLogoIcon, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.small
+  }, /*#__PURE__*/React.createElement(RovoLogoIcon, {
     label: label,
     testId: testId,
-    size: "small"
-  });
+    size: "xxsmall"
+  }));
 };

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

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

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

@@ -1,2 +1,29 @@
-/* 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';
+var styles = {
+  icon: "_19pk1b66"
+};
+export var 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.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/types/ui/ToolbarButton.d.ts

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarButtonProps = Partial<TriggerProps> & {
     children?: ReactNode;
     isSelected?: boolean;
@@ -8,8 +8,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
-    label: string;
-    icon: IconComponent;
+    iconBefore: React.ReactNode;
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;

package/dist/types/ui/ToolbarColorSwatch.d.ts

@@ -0,0 +1,7 @@
+import React, { type ReactNode } from 'react';
+type ToolbarColorSwatchProps = {
+    children?: ReactNode;
+    highlightColor?: string;
+};
+export declare const ToolbarColorSwatch: ({ children, highlightColor, }: ToolbarColorSwatchProps) => React.JSX.Element;
+export {};

package/dist/types/ui/ToolbarDropdownMenu.d.ts

@@ -1,11 +1,10 @@
 import React, { type ReactNode } from 'react';
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
-    icon: IconComponent;
-    label: string;
+    iconBefore: React.ReactNode;
     children?: ReactNode;
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
 };
-export declare const ToolbarDropdownMenu: ({ icon, label, groupLocation, children, isDisabled, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, }: ToolbarDropdownMenuProps) => React.JSX.Element;
 export {};

package/dist/types/ui/icons/TextColorIcon.d.ts

@@ -1 +1,9 @@
-export { default as TextColorIcon } from '@atlaskit/icon/core/text-style';
+import React from 'react';
+import { type NewCoreIconProps } from '@atlaskit/icon/types';
+import { type IconColor } from '@atlaskit/tokens/css-type-schema';
+type TextColorIconProps = NewCoreIconProps & {
+    iconColor?: IconColor;
+    isDisabled?: boolean;
+};
+export declare const TextColorIcon: ({ label, shouldRecommendSmallIcon, size, spacing, testId, iconColor, isDisabled, }: TextColorIconProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/ToolbarButton.d.ts

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarButtonProps = Partial<TriggerProps> & {
     children?: ReactNode;
     isSelected?: boolean;
@@ -8,8 +8,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
-    label: string;
-    icon: IconComponent;
+    iconBefore: React.ReactNode;
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;

package/dist/types-ts4.5/ui/ToolbarColorSwatch.d.ts

@@ -0,0 +1,7 @@
+import React, { type ReactNode } from 'react';
+type ToolbarColorSwatchProps = {
+    children?: ReactNode;
+    highlightColor?: string;
+};
+export declare const ToolbarColorSwatch: ({ children, highlightColor, }: ToolbarColorSwatchProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts

@@ -1,11 +1,10 @@
 import React, { type ReactNode } from 'react';
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
-    icon: IconComponent;
-    label: string;
+    iconBefore: React.ReactNode;
     children?: ReactNode;
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
 };
-export declare const ToolbarDropdownMenu: ({ icon, label, groupLocation, children, isDisabled, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, }: ToolbarDropdownMenuProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/icons/TextColorIcon.d.ts

@@ -1 +1,9 @@
-export { default as TextColorIcon } from '@atlaskit/icon/core/text-style';
+import React from 'react';
+import { type NewCoreIconProps } from '@atlaskit/icon/types';
+import { type IconColor } from '@atlaskit/tokens/css-type-schema';
+type TextColorIconProps = NewCoreIconProps & {
+    iconColor?: IconColor;
+    isDisabled?: boolean;
+};
+export declare const TextColorIcon: ({ label, shouldRecommendSmallIcon, size, spacing, testId, iconColor, isDisabled, }: TextColorIconProps) => React.JSX.Element;
+export {};

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 import Toggle from '@atlaskit/toggle';
 import { token } from '@atlaskit/tokens';
+import { type IconColor } from '@atlaskit/tokens/css-type-schema';
 
-import { ColorIndicatorWrapper } from '../../../src/ui/ColorIndicatorWrapper';
 import { AddIcon } from '../../../src/ui/icons/AddIcon';
 import { AIAdjustLengthIcon } from '../../../src/ui/icons/AIAdjustLengthIcon';
 import { AICasualIcon } from '../../../src/ui/icons/AICasualIcon';
@@ -41,8 +41,7 @@ import { TextIcon } from '../../../src/ui/icons/TextIcon';
 import { Toolbar } from '../../../src/ui/Toolbar';
 import { ToolbarButton } from '../../../src/ui/ToolbarButton';
 import { ToolbarButtonGroup } from '../../../src/ui/ToolbarButtonGroup';
-import { ToolbarDivider } from '../../../src/ui/ToolbarDivider';
-import { ToolbarDropdownDivider } from '../../../src/ui/ToolbarDropdownDivider';
+import { ToolbarColorSwatch } from '../../../src/ui/ToolbarColorSwatch';
 import { ToolbarDropdownItem } from '../../../src/ui/ToolbarDropdownItem';
 import { ToolbarDropdownItemSection } from '../../../src/ui/ToolbarDropdownItemSection';
 import { ToolbarDropdownMenu } from '../../../src/ui/ToolbarDropdownMenu';
@@ -139,8 +138,7 @@ export const ExampleManuallyComposedToolbar = () => {
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Ask Rovo">
 							<ToolbarButton
-								icon={AIChatIcon}
-								label="Ask Rovo"
+								iconBefore={<AIChatIcon label="Ask Rovo" />}
 								onClick={onClick('Ask Rovo')}
 								groupLocation="start"
 								isDisabled={isRovoDisabled}
@@ -148,7 +146,10 @@ export const ExampleManuallyComposedToolbar = () => {
 								Ask Rovo
 							</ToolbarButton>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
+						<ToolbarDropdownMenu
+							iconBefore={<MoreItemsIcon label="More formatting" />}
+							groupLocation="end"
+						>
 							<ToolbarDropdownItemSection>
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
@@ -235,8 +236,7 @@ export const ExampleManuallyComposedToolbar = () => {
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Improve writing">
 							<ToolbarButton
-								icon={AICommandIcon}
-								label="Improve writing"
+								iconBefore={<AICommandIcon label="Improve writing" />}
 								onClick={onClick('Improve writing')}
 								isDisabled={isImproveWritingDisabled}
 							>
@@ -246,26 +246,23 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Text styles">
 							<ToolbarDropdownMenu
-								icon={
+								iconBefore={
 									{
-										none: TextIcon,
-										normal: TextIcon,
-										heading1: HeadingOneIcon,
-										heading2: HeadingTwoIcon,
-										heading3: HeadingThreeIcon,
-										heading4: HeadingFourIcon,
-										heading5: HeadingFiveIcon,
-										heading6: HeadingSixIcon,
-										quote: QuoteIcon,
+										none: <TextIcon label="Normal text" />,
+										normal: <TextIcon label="Normal text" />,
+										heading1: <HeadingOneIcon label="Heading One" />,
+										heading2: <HeadingTwoIcon label="Heading Two" />,
+										heading3: <HeadingThreeIcon label="Heading Three" />,
+										heading4: <HeadingFourIcon label="Heading Four" />,
+										heading5: <HeadingFiveIcon label="Heading Five" />,
+										heading6: <HeadingSixIcon label="Heading Six" />,
+										quote: <QuoteIcon label="Quote" />,
 									}[textStyle]
 								}
-								label="Text styles"
 								isDisabled={isTextStylesDisabled}
 							>
 								<ToolbarDropdownItemSection>
@@ -357,8 +354,13 @@ export const ExampleManuallyComposedToolbar = () => {
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}>
 							<ToolbarButton
-								icon={formatting.italic && !formatting.bold ? ItalicIcon : BoldIcon}
-								label={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}
+								iconBefore={
+									formatting.italic && !formatting.bold ? (
+										<ItalicIcon label="Italic" />
+									) : (
+										<BoldIcon label="Bold" />
+									)
+								}
 								onClick={onClick(
 									formatting.italic && !formatting.bold ? 'Italic' : 'Bold',
 									onToggleFormatting(formatting.italic && !formatting.bold ? 'italic' : 'bold'),
@@ -369,7 +371,10 @@ export const ExampleManuallyComposedToolbar = () => {
 								ariaKeyshortcuts={formatting.italic && !formatting.bold ? '⌘I' : '⌘B'}
 							/>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
+						<ToolbarDropdownMenu
+							iconBefore={<MoreItemsIcon label="More formatting" />}
+							groupLocation="end"
+						>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<BoldIcon label="Bold" />}
@@ -392,7 +397,6 @@ export const ExampleManuallyComposedToolbar = () => {
 									Italic
 								</ToolbarDropdownItem>
 							</ToolbarDropdownItemSection>
-							<ToolbarDropdownDivider />
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<ClearFormattingIcon label="Clear formatting" />}
@@ -405,23 +409,23 @@ export const ExampleManuallyComposedToolbar = () => {
 							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
-
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Text color">
 							<ToolbarDropdownMenu
-								icon={({ label, color, shouldRecommendSmallIcon, size, spacing, testId }) => (
-									<ColorIndicatorWrapper color={token('color.border.accent.blue')}>
+								iconBefore={
+									<ToolbarColorSwatch
+										highlightColor={token('color.background.accent.blue.subtlest')}
+									>
 										<TextColorIcon
-											label={label}
-											color={color}
-											shouldRecommendSmallIcon={shouldRecommendSmallIcon}
-											size={size}
-											spacing={spacing}
-											testId={testId}
+											label={'Text color'}
+											iconColor={token('color.text.accent.magenta') as IconColor}
+											shouldRecommendSmallIcon={true}
+											size={'small'}
+											isDisabled={isTextColorDisabled}
+											spacing={'compact'}
 										/>
-									</ColorIndicatorWrapper>
-								)}
-								label="Text color"
+									</ToolbarColorSwatch>
+								}
 								isDisabled={isTextColorDisabled}
 							>
 								<ToolbarDropdownItemSection>
@@ -441,8 +445,13 @@ export const ExampleManuallyComposedToolbar = () => {
 							content={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
 						>
 							<ToolbarButton
-								icon={listOrAlignment === 'numbered' ? ListNumberedIcon : ListBulletedIcon}
-								label={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
+								iconBefore={
+									listOrAlignment === 'numbered' ? (
+										<ListNumberedIcon label="Numbered list" />
+									) : (
+										<ListBulletedIcon label="Bulleted list" />
+									)
+								}
 								onClick={onClick(
 									listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
 									onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
@@ -455,8 +464,7 @@ export const ExampleManuallyComposedToolbar = () => {
 							/>
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu
-							icon={MoreItemsIcon}
-							label="Lists, indentation and alignment"
+							iconBefore={<MoreItemsIcon label="Lists, indentation and alignment" />}
 							groupLocation="end"
 						>
 							<ToolbarDropdownItemSection>
@@ -485,14 +493,11 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Link">
 							<ToolbarButton
-								icon={LinkIcon}
-								label="Link"
+								iconBefore={<LinkIcon label="Link" />}
 								onClick={onClick('Link')}
 								isDisabled={isLinkDisabled}
 							/>
@@ -500,29 +505,25 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Comment">
 							<ToolbarButton
-								icon={CommentIcon}
-								label="Comment"
+								iconBefore={<CommentIcon label="Comment" />}
 								onClick={onClick('Comment')}
 								isDisabled={isCommentDisabled}
-							/>
+							>
+								Comment
+							</ToolbarButton>
 						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Apps and extensions">
 							<ToolbarDropdownMenu
-								icon={AppsIcon}
-								label="Apps and extensions"
+								iconBefore={<AppsIcon label="Apps and extensions" />}
 								isDisabled={isAppsAndExtensionsDisabled}
 							>
 								<ToolbarDropdownItemSection>
@@ -539,16 +540,19 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip
 							content={pinning === 'pinned' ? 'Unpin the toolbar' : 'Pin the toolbar at the top'}
 						>
 							<ToolbarButton
-								icon={pinning === 'pinned' ? PinnedIcon : PinIcon}
-								label={pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar'}
+								iconBefore={
+									pinning === 'pinned' ? (
+										<PinnedIcon label="Unpin toolbar" />
+									) : (
+										<PinIcon label="Pin toolbar" />
+									)
+								}
 								onClick={onClick(
 									pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar',
 									onTogglePinning,

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.5",
+	"version": "0.0.7",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -28,12 +28,12 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^27.8.0",
-		"@atlaskit/icon-lab": "^5.2.0",
+		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/icon-lab": "^5.3.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/tokens": "^5.6.0",
+		"@atlaskit/tokens": "^6.0.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"

package/src/ui/Toolbar.tsx

@@ -10,7 +10,7 @@ const styles = cssMap({
 		paddingLeft: token('space.050'),
 		boxShadow: token('elevation.shadow.overlay'),
 		borderRadius: '6px',
-		height: '40px',
+		height: '36px',
 		width: 'min-content',
 		display: 'flex',
 		alignItems: 'center',

package/src/ui/ToolbarButton.tsx

@@ -5,13 +5,7 @@ import { type TriggerProps } from '@atlaskit/popup';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
-
-const ICON_COLOR = {
-	default: token('color.icon.subtle'),
-	disabled: token('color.icon.disabled'),
-	selected: token('color.icon.selected'),
-};
+import { type ToolbarButtonGroupLocation } from '../types';
 
 const styles = cssMap({
 	button: {
@@ -22,7 +16,7 @@ const styles = cssMap({
 		alignItems: 'center',
 		justifyContent: 'center',
 		borderRadius: token('border.radius.100'),
-		minHeight: '32px',
+		minHeight: '28px',
 		color: token('color.text.subtle'),
 		fontWeight: token('font.weight.medium'),
 		paddingLeft: token('space.100'),
@@ -85,8 +79,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 	onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 	testId?: string;
-	label: string;
-	icon: IconComponent;
+	iconBefore: React.ReactNode;
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	ariaKeyshortcuts?: string;
@@ -95,8 +88,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 export const ToolbarButton = forwardRef(
 	(
 		{
-			icon: IconComponent,
-			label,
+			iconBefore,
 			children,
 			onClick,
 			isSelected,
@@ -113,11 +105,6 @@ export const ToolbarButton = forwardRef(
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
-		const iconColor = isDisabled
-			? ICON_COLOR.disabled
-			: isSelected
-				? ICON_COLOR.selected
-				: ICON_COLOR.default;
 		return (
 			<Pressable
 				ref={ref}
@@ -140,7 +127,7 @@ export const ToolbarButton = forwardRef(
 				testId={testId}
 				isDisabled={isDisabled}
 			>
-				<IconComponent label={label} size="medium" color={iconColor} />
+				{iconBefore}
 				{children}
 			</Pressable>
 		);

package/src/ui/ToolbarColorSwatch.tsx

@@ -0,0 +1,40 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+type ToolbarColorSwatchProps = {
+	children?: ReactNode;
+	highlightColor?: string;
+};
+
+const styles = cssMap({
+	colorSwatch: {
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+		border: `${token('border.width')} solid ${token('color.border')}`,
+		borderRadius: token('border.radius.100'),
+		width: '20px',
+		height: '20px',
+		marginLeft: token('space.negative.050'),
+		marginRight: token('space.negative.050'),
+	},
+});
+
+export const ToolbarColorSwatch = ({
+	children,
+	highlightColor,
+}: ToolbarColorSwatchProps) => {
+	return (
+		<Box
+			xcss={styles.colorSwatch}
+			style={{
+				backgroundColor: highlightColor,
+			}}
+		>
+			{children}
+		</Box>
+	);
+};

package/src/ui/ToolbarDropdownMenu.tsx

@@ -2,21 +2,19 @@ import React, { type ReactNode } from 'react';
 
 import DropdownMenu from '@atlaskit/dropdown-menu';
 
-import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+import { type ToolbarButtonGroupLocation } from '../types';
 
 import { ToolbarButton } from './ToolbarButton';
 
 type ToolbarDropdownMenuProps = {
-	icon: IconComponent;
-	label: string;
+	iconBefore: React.ReactNode;
 	children?: ReactNode;
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 };
 
 export const ToolbarDropdownMenu = ({
-	icon,
-	label,
+	iconBefore,
 	groupLocation,
 	children,
 	isDisabled,
@@ -34,8 +32,7 @@ export const ToolbarDropdownMenu = ({
 					onClick={triggerProps.onClick}
 					onFocus={triggerProps.onFocus}
 					testId={triggerProps.testId}
-					icon={icon}
-					label={label}
+					iconBefore={iconBefore}
 					groupLocation={groupLocation}
 					isDisabled={isDisabled}
 				/>

package/src/ui/icons/AIChatIcon.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
 
+import { cssMap } from '@atlaskit/css';
 import { RovoIcon as RovoLogoIcon } from '@atlaskit/logo';
+import { Box } from '@atlaskit/primitives/compiled';
 
 type AIChatIconProps = {
 	label: string;
 	testId?: string;
 };
 
+const styles = cssMap({
+	small: {
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		height: '12px',
+		width: '12px',
+	},
+});
+
 export const AIChatIcon = ({ label, testId }: AIChatIconProps) => (
-	<RovoLogoIcon label={label} testId={testId} size="small" />
+	<Box xcss={styles.small}>
+		<RovoLogoIcon label={label} testId={testId} size="xxsmall" />
+	</Box>
 );