Refactor renderColorPicker to support 'Clear' background color option

Currently, renderColorPicker in packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx renders color buttons for the background color picker, but does not handle a "clear" option for background color. The background color button now includes a "clear" button, so the color picker UI should recognize and visually represent the clear/transparent state.

Expected behavior:

• The color picker should display a "clear" option alongside the custom color choices (kobi red, rose bud, goldenrod, primerose, mantis, Regent st. blue, periwrinkle gray, pale rose).
• The "clear" option should be visually distinct (e.g., with a cross or an empty/transparent box) so users understand it resets the background color.
• Clicking the "clear" button should trigger the correct callback to set the background color to transparent.

How this feature can be developed:

• Update the logic in renderColorPicker to check for the "clear" color key.
• Render a special button for "clear" with a unique style, such as a transparent background and a label or icon (e.g., an 'X' or 'Clear').
• Ensure accessibility and keyboard navigation support for the clear option.
• Update background color dropdown items and related utilities if needed to propagate the clear value correctly.

Example code (from current implementation):

export function renderColorPicker<Strings extends string>(
    item: IContextualMenuItem,
    colorDef: Record<Strings, Colors>,
    onClick: (
        e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
        item: IContextualMenuItem
    ) => void
) {
    const key = item.key as Strings;
    const buttonColor = colorDef[key].lightModeColor;

    return (
        <button onClick={e => onClick(e, item)} title={item.text}>
            <div
                className={
                    classNames.colorSquare +
                    ' ' +
                    (key == 'textColorWhite' || key == 'backgroundColorWhite'
                        ? classNames.colorSquareBorderWhite
                        : classNames.colorSquareBorder)
                }
                style={{
                    backgroundColor: buttonColor,
                }}></div>
        </button>
    );
}

Requested update:
Add logic such that if buttonColor is 'transparent' (e.g., for "clear"), the button renders a special icon or label (not just an empty box).

Start in packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx and trace the background color dropdown items and related utilities that provide the color key. Verify the clear option is represented distinctly, remains accessible by mouse and keyboard, and invokes the existing callback with the transparent value.