@atlaskit/editor-toolbar 0.2.3 → 0.3.0

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/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;

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

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

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

@@ -0,0 +1,84 @@
+/**
+ * Default number of columns in the color picker
+ */
+export var 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) {
+  var cols = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COLOR_PICKER_COLUMNS;
+  return palette.reduce(function (resultArray, item, index) {
+    var 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) {
+  var selectedRowIndex = -1;
+  var selectedColumnIndex = -1;
+  colorsPerRow.forEach(function (row, rowIndex) {
+    row.forEach(function (_ref, columnIndex) {
+      var value = _ref.value;
+      if (value === selectedColor) {
+        selectedRowIndex = rowIndex;
+        selectedColumnIndex = columnIndex;
+      }
+    });
+  });
+  return {
+    selectedRowIndex: selectedRowIndex,
+    selectedColumnIndex: 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) {
+  var cols = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_COLOR_PICKER_COLUMNS;
+  var 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 var getTokenCSSVariableValue = function getTokenCSSVariableValue(variableExpression) {
+  // Match CSS variable pattern: var(--variable-name, fallback)
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  var matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?/);
+  if (matcher) {
+    var variable = matcher[1].trim();
+    var 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
+    var value = window.getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+  }
+  return '';
+};