@atlaskit/editor-toolbar 0.2.2 → 0.3.0

package/dist/es2019/ui/ColorPalette/Color.js

@@ -0,0 +1,65 @@
+/* Color.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./Color.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, memo } from 'react';
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
+import Tooltip from '@atlaskit/tooltip';
+const buttonWrapperStyles = null;
+const buttonStyles = null;
+
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export const Color = /*#__PURE__*/memo(({
+  autoFocus,
+  tabIndex,
+  value,
+  label,
+  isSelected,
+  borderColor,
+  checkMarkColor = "var(--ds-icon-inverse, #FFFFFF)",
+  hexToPaletteColor,
+  decorator,
+  onClick,
+  onKeyDown
+}) => {
+  const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+  const handleMouseDown = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleClick = useCallback(e => {
+    e.preventDefault();
+    onClick(value, label);
+  }, [onClick, value, label]);
+  const handleKeyDown = useCallback(e => {
+    if (!onKeyDown) {
+      return;
+    }
+    e.preventDefault();
+    onKeyDown(value, label, e);
+  }, [onKeyDown, value, label]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: label
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2rkoiti9 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": label,
+    role: "radio",
+    "aria-checked": isSelected,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onMouseDown: handleMouseDown,
+    tabIndex: tabIndex,
+    style: {
+      backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
+      border: `1px solid ${borderColor}`
+    },
+    autoFocus: autoFocus,
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko1hkb _19itv4vr _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvugt7 _1bg4v77o"])
+  }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    LEGACY_primaryColor: checkMarkColor,
+    label: ""
+  }), decorator)));
+});

package/dist/es2019/ui/ColorPalette/getColorMessage.js

@@ -0,0 +1,18 @@
+/**
+ * Retrieves the appropriate internationalization message for a given color
+ * @param messages - Record of color values to message descriptors
+ * @param color - The color value to look up
+ * @returns The message descriptor or undefined if not found
+ */
+export default function getColorMessage(messages, color) {
+  const message = messages[color];
+  if (!message) {
+    // eslint-disable-next-line no-console
+    console.warn(`Color palette does not have an internationalization message for color ${color.toUpperCase()}.
+You must add a message description to properly translate this color.
+Using current label as default message.
+This could have happened when someone changed the 'colorPalette' from 'adf-schema' without updating this file.
+`);
+  }
+  return message;
+}

package/dist/es2019/ui/ColorPalette/index.compiled.css

@@ -0,0 +1 @@
+._1e0c1txw{display:flex}

package/dist/es2019/ui/ColorPalette/index.js

@@ -0,0 +1,110 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useMemo } from 'react';
+import chromatism from 'chromatism';
+import { useIntl } from 'react-intl-next';
+import { Box } from '@atlaskit/primitives/compiled';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { Color } from './Color';
+import getColorMessage from './getColorMessage';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getTokenCSSVariableValue } from './utils';
+const styles = {
+  paletteWrapper: "_1e0c1txw"
+};
+
+/**
+ * For a given color pick the color from a list of colors with
+ * the highest contrast
+ *
+ * @param color color string, supports HEX, RGB, RGBA etc.
+ * @param useIconToken boolean, describes if a token should be used for the icon color
+ * @return Highest contrast color in pool
+ */
+function getCheckMarkColor(color, useIconToken) {
+  const tokenVal = getTokenCSSVariableValue(color);
+  const colorValue = !!tokenVal ? tokenVal : color;
+
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  const contrastColor = ['#FFFFFF', '#42526E'].sort((a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue))[0];
+  if (!useIconToken) {
+    return contrastColor;
+  }
+
+  // Use of these token comes from guidance from designers in the Design System team
+  // they are only intended for use with text colors (and there are different tokens
+  // planned to be used when this extended to be used with other palettes).
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
+}
+
+/**
+ * ColorPalette component for displaying a grid of selectable colors
+ *
+ * Features:
+ * - Responsive grid layout
+ * - Keyboard navigation support
+ * - Accessibility compliance (ARIA attributes)
+ * - Theme-aware tooltips
+ * - Design token integration
+ * - Customizable color mapping
+ */
+const ColorPalette = ({
+  cols = DEFAULT_COLOR_PICKER_COLUMNS,
+  onClick,
+  onKeyDown,
+  selectedColor,
+  paletteOptions
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    palette,
+    hexToPaletteColor,
+    paletteColorTooltipMessages
+  } = paletteOptions;
+  const {
+    colorMode: tokenTheme
+  } = useThemeObserver();
+  const useIconToken = !!hexToPaletteColor;
+  const colorsPerRow = useMemo(() => {
+    return getColorsPerRowFromPalette(palette, cols);
+  }, [palette, cols]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(row => /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.paletteWrapper,
+    key: `row-first-color-${row[0].value}`,
+    role: "radiogroup"
+  }, row.map(({
+    value,
+    label,
+    border,
+    message,
+    decorator
+  }) => {
+    let tooltipMessage = message;
+
+    // Override with theme-specific tooltip messages if provided
+    if (paletteColorTooltipMessages) {
+      if (tokenTheme === 'dark') {
+        tooltipMessage = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
+      }
+      if (tokenTheme === 'light') {
+        tooltipMessage = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
+      }
+    }
+    return /*#__PURE__*/React.createElement(Color, {
+      key: value,
+      value: value,
+      borderColor: border,
+      label: tooltipMessage ? formatMessage(tooltipMessage) : label,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      isSelected: value === selectedColor,
+      checkMarkColor: getCheckMarkColor(value, useIconToken),
+      hexToPaletteColor: hexToPaletteColor,
+      decorator: decorator
+    });
+  }))));
+};
+export default ColorPalette;

package/dist/es2019/ui/ColorPalette/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/ColorPalette/utils.js

@@ -0,0 +1,83 @@
+/**
+ * Default number of columns in the color picker
+ */
+export const DEFAULT_COLOR_PICKER_COLUMNS = 7;
+
+/**
+ * Splits a palette array into rows based on the specified number of columns
+ * @param palette - Array of palette colors
+ * @param cols - Number of columns per row
+ * @returns Array of color rows
+ */
+export function getColorsPerRowFromPalette(palette, cols = DEFAULT_COLOR_PICKER_COLUMNS) {
+  return palette.reduce((resultArray, item, index) => {
+    const chunkIndex = Math.floor(index / cols);
+    resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
+    resultArray[chunkIndex].push(item);
+    return resultArray;
+  }, []);
+}
+
+/**
+ * Finds the row and column indices of a selected color in the palette grid
+ * @param colorsPerRow - 2D array of colors organized by rows
+ * @param selectedColor - The currently selected color value
+ * @returns Object containing row and column indices
+ */
+export function getSelectedRowAndColumn(colorsPerRow, selectedColor) {
+  let selectedRowIndex = -1;
+  let selectedColumnIndex = -1;
+  colorsPerRow.forEach((row, rowIndex) => {
+    row.forEach(({
+      value
+    }, columnIndex) => {
+      if (value === selectedColor) {
+        selectedRowIndex = rowIndex;
+        selectedColumnIndex = columnIndex;
+      }
+    });
+  });
+  return {
+    selectedRowIndex,
+    selectedColumnIndex
+  };
+}
+
+/**
+ * Finds the row and column indices of a selected color in a flat palette array
+ * @param palette - Flat array of palette colors
+ * @param selectedColor - The currently selected color value
+ * @param cols - Number of columns per row
+ * @returns Object containing row and column indices
+ */
+export function getSelectedRowAndColumnFromPalette(palette, selectedColor, cols = DEFAULT_COLOR_PICKER_COLUMNS) {
+  const colorsPerRow = getColorsPerRowFromPalette(palette, cols);
+  return getSelectedRowAndColumn(colorsPerRow, selectedColor);
+}
+
+/**
+ * Extracts the actual color value from a CSS variable expression
+ * Handles both token variables and fallback values
+ * @param variableExpression - CSS variable expression (e.g., "var(--ds-background-accent-blue-subtle, #0052CC)")
+ * @returns The resolved color value or empty string if not found
+ */
+export const getTokenCSSVariableValue = variableExpression => {
+  // Match CSS variable pattern: var(--variable-name, fallback)
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  const matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?/);
+  if (matcher) {
+    const variable = matcher[1].trim();
+    const fallback = matcher[2] ? matcher[2].replace(',', '').trim() : '';
+
+    // Return fallback if we're in a server environment
+    if (typeof document === 'undefined') {
+      return fallback;
+    }
+
+    // Get the computed value from the document
+    const value = window.getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+  }
+  return '';
+};

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
-export const ToolbarDropdownMenu = ({
+import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
+const ToolbarDropdownMenuContent = ({
   iconBefore,
   groupLocation,
   children,
@@ -13,6 +14,24 @@ export const ToolbarDropdownMenu = ({
   const {
     onDropdownOpenChanged
   } = useToolbarUI();
+  const {
+    closeMenu,
+    isOpen,
+    openMenu
+  } = useToolbarDropdownMenu();
+  const handleOpenChange = useCallback(args => {
+    onDropdownOpenChanged(args);
+    if (!args.isOpen) {
+      closeMenu();
+    }
+  }, [closeMenu, onDropdownOpenChanged]);
+  const handleClick = useCallback(() => {
+    if (!isOpen) {
+      openMenu();
+    } else {
+      closeMenu();
+    }
+  }, [closeMenu, openMenu, isOpen]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: triggerProps => /*#__PURE__*/React.createElement(ToolbarButton, {
       ref: triggerProps.triggerRef,
@@ -21,7 +40,10 @@ export const ToolbarDropdownMenu = ({
       "aria-haspopup": triggerProps['aria-haspopup'],
       "aria-controls": triggerProps['aria-controls'],
       onBlur: triggerProps.onBlur,
-      onClick: triggerProps.onClick,
+      onClick: e => {
+        handleClick();
+        triggerProps.onClick && triggerProps.onClick(e);
+      },
       onFocus: triggerProps.onFocus,
       testId: testId,
       iconBefore: iconBefore,
@@ -29,6 +51,23 @@ export const ToolbarDropdownMenu = ({
       isDisabled: isDisabled,
       label: label
     }),
-    onOpenChange: onDropdownOpenChanged
+    onOpenChange: handleOpenChange,
+    isOpen: isOpen
   }, children);
+};
+export const ToolbarDropdownMenu = ({
+  iconBefore,
+  groupLocation,
+  children,
+  isDisabled,
+  testId,
+  label
+}) => {
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+    iconBefore: iconBefore,
+    groupLocation: groupLocation,
+    isDisabled: isDisabled,
+    testId: testId,
+    label: label
+  }, children));
 };

package/dist/es2019/ui/ToolbarDropdownMenuContext.js

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState } from 'react';
+const ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
+export const useToolbarDropdownMenu = () => {
+  const context = useContext(ToolbarDropdownMenuContext);
+  if (!context) {
+    throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
+  }
+  return context;
+};
+export const ToolbarDropdownMenuProvider = ({
+  children
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openMenu = () => setIsOpen(true);
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+  const contextValue = {
+    openMenu,
+    closeMenu,
+    isOpen
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContext.Provider, {
+    value: contextValue
+  }, children);
+};

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

@@ -1,19 +1,41 @@
 /* AIChatIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./AIChatIcon.compiled.css";
+import * as React from 'react';
 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"
+  container: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
 };
+const ROVO_SVG_PATH = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M5.4905 0.135176C5.80591 -0.0450587 6.19311 -0.0450584 6.50852 0.135176L10.8688 2.62676C11.1885 2.80943 11.3857 3.14937 11.3857 3.51754V8.48246C11.3857 8.85063 11.1885 9.19057 10.8688 9.37324L6.50852 11.8648C6.19311 12.0451 5.80591 12.0451 5.4905 11.8648L1.13022 9.37324C0.810557 9.19057 0.613281 8.85063 0.613281 8.48246V3.51754C0.613281 3.14937 0.810557 2.80943 1.13022 2.62676L5.4905 0.135176Z" fill="#BF63F3"/>
+		<mask id="mask0_7293_80230" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+			<path d="M5.49147 0.135176C5.80688 -0.0450587 6.19409 -0.0450584 6.5095 0.135176L10.8698 2.62676C11.1894 2.80943 11.3867 3.14937 11.3867 3.51754V8.48246C11.3867 8.85063 11.1894 9.19057 10.8698 9.37324L6.5095 11.8648C6.19409 12.0451 5.80688 12.0451 5.49147 11.8648L1.13119 9.37324C0.811533 9.19057 0.614258 8.85063 0.614258 8.48246V3.51754C0.614258 3.14937 0.811533 2.80943 1.13119 2.62676L5.49147 0.135176Z" fill="#BF63F3"/>
+		</mask>
+		<g mask="url(#mask0_7293_80230)">
+			<path d="M1.16288 17.7949C1.88804 16.4071 2.9469 15.3192 4.34131 14.5785C5.73572 13.8378 7.35499 13.5206 8.99441 13.7092L0.174767 -2.55519C-1.28774 -2.29055 -2.70974 -1.80225 -4.07832 -1.07526C-5.44691 -0.348264 -6.62375 0.522036 -7.64571 1.5465L1.16656 17.7973L1.16288 17.7949Z" fill="#82B536"/>
+			<path d="M6.2482 7.95377C3.81481 8.96062 1.95638 10.6236 1.88069 12.9253C1.88069 12.9253 1.88199 12.9371 1.88076 12.9428C1.87578 13.1139 1.87896 13.2868 1.89469 13.4633C1.89533 13.4648 1.89596 13.4663 1.89659 13.4678C1.91139 13.6465 1.93718 13.8294 1.97333 14.0151C1.98259 14.0588 1.99625 14.1041 2.00551 14.1478C2.03868 14.296 2.07186 14.4442 2.11979 14.5968C2.18327 14.7994 2.25711 15.0047 2.3457 15.2144C2.50959 15.6024 2.70185 15.9488 2.90932 16.2571C3.18552 16.6673 3.48842 17.0101 3.79015 17.2936C3.86597 17.3643 3.94053 17.432 4.01695 17.4954C4.37212 17.7357 4.89091 18.0543 5.7602 18.4584C6.328 18.7233 7.04924 19.025 7.97282 19.3662C8.7114 18.2422 10.0629 17.368 11.3277 16.3888C12.3263 15.6149 13.2681 14.7764 13.805 13.6971C14.2974 12.7085 14.3102 11.4765 13.7704 10.1986C12.4194 7.00012 9.42898 6.63591 6.2507 7.95097L6.2482 7.95377Z" fill="#FCA700"/>
+			<path d="M11.6634 -7.61136L-2.81461 -5.02797C-2.81461 -5.02797 -1.3238 1.52224 -4.55981 7.48526C-4.11672 7.5189 -3.66847 7.5392 -3.21522 7.53288C5.12023 7.41664 11.7808 0.635945 11.6634 -7.61401L11.6634 -7.61136Z" fill="#1868DB"/>
+		</g>
+		<path d="M5.67239 2.71364C5.90711 2.58408 6.19359 2.58646 6.42641 2.72078L8.69144 4.02848C8.92849 4.16524 9.07522 4.41898 9.07522 4.69232V7.30776C9.07522 7.58218 8.92938 7.83479 8.69162 7.97148L6.98899 8.95449C6.99272 8.94401 6.99627 8.93347 6.99965 8.92286C7.03126 8.82487 7.04801 8.72132 7.04801 8.61548V6.00004C7.04801 5.64073 6.8569 5.3094 6.54519 5.13016L5.27598 4.39771V3.3846C5.27598 3.30477 5.28833 3.22678 5.31168 3.15296C5.3691 2.97429 5.49122 2.81962 5.65828 2.72306L5.65879 2.72277C5.66358 2.72001 5.66814 2.71694 5.67239 2.71364Z" fill="white"/>
+		<path d="M5.09599 3.04811L3.39336 4.03112C3.1556 4.1678 3.00977 4.42042 3.00977 4.69484V7.31028C3.00977 7.58362 3.15646 7.83734 3.39352 7.9741L5.65857 9.28182C5.89139 9.41612 6.17789 9.41851 6.4126 9.28896C6.41685 9.28566 6.42137 9.28261 6.42616 9.27985C6.59341 9.18336 6.71572 9.02863 6.77323 8.84989C6.79663 8.77599 6.809 8.69792 6.809 8.618V7.60489L5.53987 6.87249C5.22822 6.69323 5.03697 6.36183 5.03697 6.00256V3.38712C5.03697 3.28142 5.05368 3.17802 5.0852 3.08015C5.08862 3.0694 5.09222 3.05872 5.09599 3.04811Z" fill="white"/>
+	</svg>`;
+const RovoLogoSVG = ({
+  label,
+  testId
+}) => /*#__PURE__*/React.createElement("span", {
+  role: "img",
+  "aria-label": label,
+  "data-testid": testId
+  // eslint-disable-next-line react/no-danger
+  ,
+  dangerouslySetInnerHTML: {
+    __html: ROVO_SVG_PATH
+  },
+  className: ax([styles.container])
+});
 export const AIChatIcon = ({
   label,
   testId
-}) => /*#__PURE__*/React.createElement(Box, {
-  xcss: styles.small
-}, /*#__PURE__*/React.createElement(RovoLogoIcon, {
+}) => /*#__PURE__*/React.createElement(RovoLogoSVG, {
   label: label,
-  testId: testId,
-  size: "xxsmall"
-}));
+  testId: testId
+});

package/dist/esm/index.js

@@ -11,6 +11,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
+export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -56,4 +57,5 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
 export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
+export { default as ColorPalette } from './ui/ColorPalette';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/esm/ui/ColorPalette/Color.compiled.css

@@ -0,0 +1,25 @@
+
+._19itcf40{border:var(--_1wr0y6w)}
+._2rko1hkb{border-radius:var(--ds-border-radius-050,4px)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._189et94y{border-width:1px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._19bvidpf{padding-left:0}
+._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._1bsbcr4y{width:var(--ds-space-300,26px)}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._4cvr1h6o{align-items:center}
+._4t3icr4y{height:var(--ds-space-300,26px)}
+._80omtlke{cursor:pointer}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._ca0qidpf{padding-top:0}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._u5f3idpf{padding-right:0}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}
+._y2mv12j9:focus{outline:var(--_toyvsf)}
+._858umuej:focus, ._jyzfmuej:focus-within, ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
+._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}

package/dist/esm/ui/ColorPalette/Color.js

@@ -0,0 +1,67 @@
+/* Color.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./Color.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, memo } from 'react';
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
+import Tooltip from '@atlaskit/tooltip';
+var buttonWrapperStyles = null;
+var buttonStyles = null;
+
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export var Color = /*#__PURE__*/memo(function (_ref) {
+  var autoFocus = _ref.autoFocus,
+    tabIndex = _ref.tabIndex,
+    value = _ref.value,
+    label = _ref.label,
+    isSelected = _ref.isSelected,
+    borderColor = _ref.borderColor,
+    _ref$checkMarkColor = _ref.checkMarkColor,
+    checkMarkColor = _ref$checkMarkColor === void 0 ? "var(--ds-icon-inverse, #FFFFFF)" : _ref$checkMarkColor,
+    hexToPaletteColor = _ref.hexToPaletteColor,
+    decorator = _ref.decorator,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown;
+  var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+  var handleMouseDown = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var handleClick = useCallback(function (e) {
+    e.preventDefault();
+    onClick(value, label);
+  }, [onClick, value, label]);
+  var handleKeyDown = useCallback(function (e) {
+    if (!onKeyDown) {
+      return;
+    }
+    e.preventDefault();
+    onKeyDown(value, label, e);
+  }, [onKeyDown, value, label]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: label
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2rkoiti9 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": label,
+    role: "radio",
+    "aria-checked": isSelected,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onMouseDown: handleMouseDown,
+    tabIndex: tabIndex,
+    autoFocus: autoFocus,
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko1hkb _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    style: {
+      backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
+      border: "1px solid ".concat(borderColor),
+      "--_1wr0y6w": ix("1px solid ".concat("var(--ds-border-inverse, #FFFFFF)")),
+      "--_toyvsf": ix("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    LEGACY_primaryColor: checkMarkColor,
+    label: ""
+  }), decorator)));
+});

package/dist/esm/ui/ColorPalette/getColorMessage.js

@@ -0,0 +1,14 @@
+/**
+ * Retrieves the appropriate internationalization message for a given color
+ * @param messages - Record of color values to message descriptors
+ * @param color - The color value to look up
+ * @returns The message descriptor or undefined if not found
+ */
+export default function getColorMessage(messages, color) {
+  var message = messages[color];
+  if (!message) {
+    // eslint-disable-next-line no-console
+    console.warn("Color palette does not have an internationalization message for color ".concat(color.toUpperCase(), ".\nYou must add a message description to properly translate this color.\nUsing current label as default message.\nThis could have happened when someone changed the 'colorPalette' from 'adf-schema' without updating this file.\n"));
+  }
+  return message;
+}

package/dist/esm/ui/ColorPalette/index.compiled.css

@@ -0,0 +1 @@
+._1e0c1txw{display:flex}

package/dist/esm/ui/ColorPalette/index.js

@@ -0,0 +1,109 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useMemo } from 'react';
+import chromatism from 'chromatism';
+import { useIntl } from 'react-intl-next';
+import { Box } from '@atlaskit/primitives/compiled';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { Color } from './Color';
+import getColorMessage from './getColorMessage';
+import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getTokenCSSVariableValue } from './utils';
+var styles = {
+  paletteWrapper: "_1e0c1txw"
+};
+
+/**
+ * For a given color pick the color from a list of colors with
+ * the highest contrast
+ *
+ * @param color color string, supports HEX, RGB, RGBA etc.
+ * @param useIconToken boolean, describes if a token should be used for the icon color
+ * @return Highest contrast color in pool
+ */
+function getCheckMarkColor(color, useIconToken) {
+  var tokenVal = getTokenCSSVariableValue(color);
+  var colorValue = !!tokenVal ? tokenVal : color;
+
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  var contrastColor = ['#FFFFFF', '#42526E'].sort(function (a, b) {
+    return chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue);
+  })[0];
+  if (!useIconToken) {
+    return contrastColor;
+  }
+
+  // Use of these token comes from guidance from designers in the Design System team
+  // they are only intended for use with text colors (and there are different tokens
+  // planned to be used when this extended to be used with other palettes).
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #44546F)";
+}
+
+/**
+ * ColorPalette component for displaying a grid of selectable colors
+ *
+ * Features:
+ * - Responsive grid layout
+ * - Keyboard navigation support
+ * - Accessibility compliance (ARIA attributes)
+ * - Theme-aware tooltips
+ * - Design token integration
+ * - Customizable color mapping
+ */
+var ColorPalette = function ColorPalette(_ref) {
+  var _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? DEFAULT_COLOR_PICKER_COLUMNS : _ref$cols,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    selectedColor = _ref.selectedColor,
+    paletteOptions = _ref.paletteOptions;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var palette = paletteOptions.palette,
+    hexToPaletteColor = paletteOptions.hexToPaletteColor,
+    paletteColorTooltipMessages = paletteOptions.paletteColorTooltipMessages;
+  var _useThemeObserver = useThemeObserver(),
+    tokenTheme = _useThemeObserver.colorMode;
+  var useIconToken = !!hexToPaletteColor;
+  var colorsPerRow = useMemo(function () {
+    return getColorsPerRowFromPalette(palette, cols);
+  }, [palette, cols]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.paletteWrapper,
+      key: "row-first-color-".concat(row[0].value),
+      role: "radiogroup"
+    }, row.map(function (_ref2) {
+      var value = _ref2.value,
+        label = _ref2.label,
+        border = _ref2.border,
+        message = _ref2.message,
+        decorator = _ref2.decorator;
+      var tooltipMessage = message;
+
+      // Override with theme-specific tooltip messages if provided
+      if (paletteColorTooltipMessages) {
+        if (tokenTheme === 'dark') {
+          tooltipMessage = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
+        }
+        if (tokenTheme === 'light') {
+          tooltipMessage = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
+        }
+      }
+      return /*#__PURE__*/React.createElement(Color, {
+        key: value,
+        value: value,
+        borderColor: border,
+        label: tooltipMessage ? formatMessage(tooltipMessage) : label,
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        isSelected: value === selectedColor,
+        checkMarkColor: getCheckMarkColor(value, useIconToken),
+        hexToPaletteColor: hexToPaletteColor,
+        decorator: decorator
+      });
+    }));
+  }));
+};
+export default ColorPalette;