@atlaskit/editor-toolbar 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-toolbar
 
+## 0.1.1
+
+### Patch Changes
+
+- [`428e4e6ff8ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/428e4e6ff8ac9) -
+  ED-28683 remove textStyle option from ToolbarDropdownItem, apply this style from the children
+  instead
+- [#197017](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197017)
+  [`5ef01d09bada1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ef01d09bada1) -
+  [ux] ED-28687 [Register] Text colour + highlight
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -255,6 +255,12 @@ Object.defineProperty(exports, "ToolbarButtonGroup", {
     return _ToolbarButtonGroup.ToolbarButtonGroup;
   }
 });
+Object.defineProperty(exports, "ToolbarColorSwatch", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarColorSwatch.ToolbarColorSwatch;
+  }
+});
 Object.defineProperty(exports, "ToolbarDropdownDivider", {
   enumerable: true,
   get: function get() {
@@ -320,6 +326,7 @@ var _ToolbarSection = require("./ui/ToolbarSection");
 var _ToolbarTooltip = require("./ui/ToolbarTooltip");
 var _ToolbarNestedDropdownMenu = require("./ui/ToolbarNestedDropdownMenu");
 var _ToolbarDropdownDivider = require("./ui/ToolbarDropdownDivider");
+var _ToolbarColorSwatch = require("./ui/ToolbarColorSwatch");
 var _AIAdjustLengthIcon = require("./ui/icons/AIAdjustLengthIcon");
 var _AIChatIcon = require("./ui/icons/AIChatIcon");
 var _AIProfessionalIcon = require("./ui/icons/AIProfessionalIcon");

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

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -17,14 +17,7 @@ var styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
@@ -54,8 +47,6 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     elemAfter = _ref2.elemAfter,
     isSelected = _ref2.isSelected,
     children = _ref2.children,
-    _ref2$textStyle = _ref2.textStyle,
-    textStyle = _ref2$textStyle === void 0 ? 'normal' : _ref2$textStyle,
     isDisabled = _ref2.isDisabled,
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
@@ -73,7 +64,5 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     ref: triggerRef,
     component: CustomDropdownMenuItemButton,
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles[textStyle]
-  }, children));
+  }, children);
 };

package/dist/es2019/index.js

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -4,19 +4,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
   children,
@@ -45,7 +38,6 @@ export const ToolbarDropdownItem = ({
   elemAfter,
   isSelected,
   children,
-  textStyle = 'normal',
   isDisabled,
   hasNestedDropdownMenu,
   triggerRef,
@@ -63,6 +55,4 @@ export const ToolbarDropdownItem = ({
   ref: triggerRef,
   component: CustomDropdownMenuItemButton,
   testId: testId
-}, /*#__PURE__*/React.createElement(Box, {
-  xcss: styles[textStyle]
-}, children));
+}, children);

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -4,19 +4,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -46,8 +39,6 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     elemAfter = _ref2.elemAfter,
     isSelected = _ref2.isSelected,
     children = _ref2.children,
-    _ref2$textStyle = _ref2.textStyle,
-    textStyle = _ref2$textStyle === void 0 ? 'normal' : _ref2$textStyle,
     isDisabled = _ref2.isDisabled,
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
@@ -65,7 +56,5 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     ref: triggerRef,
     component: CustomDropdownMenuItemButton,
     testId: testId
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles[textStyle]
-  }, children));
+  }, children);
 };

package/dist/types/index.d.ts

@@ -9,6 +9,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -20,5 +20,5 @@ type ToolbarDropdownItemProps = {
     testId?: string;
     ariaKeyshortcuts?: string;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, textStyle, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/index.d.ts

@@ -9,6 +9,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

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

@@ -20,5 +20,5 @@ type ToolbarDropdownItemProps = {
     testId?: string;
     ariaKeyshortcuts?: string;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, textStyle, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { cssMap } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import Toggle from '@atlaskit/toggle';
 import { token } from '@atlaskit/tokens';
@@ -52,6 +53,27 @@ import { ToolbarTooltip } from '../../../src/ui/ToolbarTooltip';
 
 import { useExampleToolbarState } from './useExampleToolbarState';
 
+const headingSizeStylesMap = cssMap({
+    xlarge: {
+		font: token('font.heading.xlarge'),
+	},
+    large: {
+		font: token('font.heading.large')
+	},
+    medium: {
+		font: token('font.heading.medium')
+	},
+    small: {
+		 font: token('font.heading.small')
+	},
+    xsmall: {
+		font: token('font.heading.xsmall')
+	},
+    xxsmall: {
+		font: token('font.heading.xxsmall')
+	},
+});
+
 export const ExampleManuallyComposedToolbar = () => {
 	const {
 		textStyle,
@@ -271,7 +293,6 @@ export const ExampleManuallyComposedToolbar = () => {
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
 										onClick={onClick('Normal text', onSetTextStyle('normal'))}
 										isSelected={textStyle === 'normal'}
-										textStyle="normal"
 										ariaKeyshortcuts="⌘⌥0"
 									>
 										Normal text
@@ -281,20 +302,18 @@ export const ExampleManuallyComposedToolbar = () => {
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
 										onClick={onClick('Heading one', onSetTextStyle('heading1'))}
 										isSelected={textStyle === 'heading1'}
-										textStyle="heading1"
 										ariaKeyshortcuts="⌘⌥1"
 									>
-										Heading 1
+										<Box xcss={headingSizeStylesMap.xlarge}>Heading 1</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingTwoIcon label="Heading Two" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
 										onClick={onClick('Heading two', onSetTextStyle('heading2'))}
 										isSelected={textStyle === 'heading2'}
-										textStyle="heading2"
 										ariaKeyshortcuts="⌘⌥2"
 									>
-										Heading 2
+										<Box xcss={headingSizeStylesMap.large}>Heading 2</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingThreeIcon label="Heading Three" />}
@@ -304,44 +323,40 @@ export const ExampleManuallyComposedToolbar = () => {
 										textStyle="heading3"
 										ariaKeyshortcuts="⌘⌥3"
 									>
-										Heading 3
+										<Box xcss={headingSizeStylesMap.medium}>Heading 3</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingFourIcon label="Heading Four" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
 										onClick={onClick('Heading four', onSetTextStyle('heading4'))}
 										isSelected={textStyle === 'heading4'}
-										textStyle="heading4"
 										ariaKeyshortcuts="⌘⌥4"
 									>
-										Heading 4
+										<Box xcss={headingSizeStylesMap.small}>Heading 4</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingFiveIcon label="Heading Five" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
 										onClick={onClick('Heading five', onSetTextStyle('heading5'))}
 										isSelected={textStyle === 'heading5'}
-										textStyle="heading5"
 										ariaKeyshortcuts="⌘⌥5"
 									>
-										Heading 5
+										<Box xcss={headingSizeStylesMap.xsmall}>Heading 5</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingSixIcon label="Heading Six" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
 										onClick={onClick('Heading six', onSetTextStyle('heading6'))}
 										isSelected={textStyle === 'heading6'}
-										textStyle="heading6"
 										ariaKeyshortcuts="⌘⌥6"
 									>
-										Heading 6
+										<Box xcss={headingSizeStylesMap.xxsmall}>Heading 6</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<QuoteIcon label="Quote" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
 										onClick={onClick('Quote', onSetTextStyle('quote'))}
 										isSelected={textStyle === 'quote'}
-										textStyle="normal"
 										ariaKeyshortcuts="⌘⌥9"
 									>
 										Quote

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",

package/src/index.ts

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';

package/src/ui/ToolbarDropdownItem.tsx

@@ -3,7 +3,7 @@ import React, { type ReactNode, forwardRef, type Ref } from 'react';
 import { cssMap, cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import type { CustomItemComponentProps } from '@atlaskit/menu/types';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
 type TextStyle =
@@ -50,27 +50,6 @@ const styles = cssMap({
 			backgroundColor: token('color.background.selected.pressed'),
 		},
 	},
-	normal: {
-		font: token('font.body'),
-	},
-	heading1: {
-		font: token('font.heading.xlarge'),
-	},
-	heading2: {
-		font: token('font.heading.large'),
-	},
-	heading3: {
-		font: token('font.heading.medium'),
-	},
-	heading4: {
-		font: token('font.heading.small'),
-	},
-	heading5: {
-		font: token('font.heading.xsmall'),
-	},
-	heading6: {
-		font: token('font.heading.xxsmall'),
-	},
 });
 
 export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
@@ -137,7 +116,6 @@ export const ToolbarDropdownItem = ({
 	elemAfter,
 	isSelected,
 	children,
-	textStyle = 'normal',
 	isDisabled,
 	hasNestedDropdownMenu,
 	triggerRef,
@@ -157,6 +135,6 @@ export const ToolbarDropdownItem = ({
 		component={CustomDropdownMenuItemButton}
 		testId={testId}
 	>
-		<Box xcss={styles[textStyle]}>{children}</Box>
+		{children}
 	</DropdownItem>
 );