Problem

I have tried a number of different ways to see if tinymce supports reusing the color swatch UI widget that the toolbar option backcolor and forecolor produces when attached to a toolbar button. However, I cannot seem to identify the right hooks necessary to pull this off. I see where I can use a color picker within a dialog box via the colorinput panel. However, I was hoping for a better UX design that is similar to the UI produced by the aforementioned toolbar options. Does tinymce provide a way to produce a custom widget similar to that out of the box or at least provide the hooks within the

Goal

Great Outcome: Find a way to leverage the existing implementation of the color swatch picker for backcolor in my custom button but for a different purpose, applying a fill color.

Good Outcome:
Recreate the UI widget that backcolor uses in order to create a clean color picking interface when applying a fill color on a selection

Ok Outcome: Use a SplitButton that produces a list with the icons colored accordingly with the name of the hex color displayed next to it

Attempt So Far

(This just produces a list of color swatches that I can’t even set the color to in order to have the swatch color fill the icon the same way backcolor does visually).

 editor.ui.registry.addSplitButton('mySplitButton', {
        text: 'My Split Button',
        onAction: function () {
            
        },
        onItemAction: function (api, value) {
            var selectedNode = editor.selection.getNode();
            editor.dom.setStyle(selectedNode, 'background-color', value);
        },
        fetch: function (callback) {
            var items = [
                {
                    type: 'choiceitem',
                    value: '#FF0000',
                    icon: 'color-swatch'
                },
                {
                    type: 'choiceitem',
                    value: '#0000FF',
                    icon: 'color-swatch'
                }
            ];
            callback(items);
        },
        onSetup: function (api) {
            //I have explored what's possible here, but nothing seems to expose control 
            //over the list of items rendered so that I can apply a CSS `color` rule to them to at
            //least show the swatch color on the icon.
        }
    });