Expand UI dynamic parameters: colors and render material side

[johnchoi313]

Light and dark default UI modes for Cards/ButtonPanels/Prompts are great, but it would be great to have an option to customize these further to have a more unique style in certain scenes. In particular, it would be great to customize font colors, border colors, and main body colors, as well as font styles if possible.

(Requested by ARENA-ETC team.)

[hi-liang]

Also include Material.side.

Not all of these deep options need builder components as there are good dozen+ colors even, could be just a documented "advanced" feature

[hi-liang]

@johnchoi313

We now have themeOverride and materialSides options for all 3 arena ui components.

The current colors are as follows for both themes, and overrides would override whatever named keys you designate:

const BLACK = new THREE.Color(0x000000);
const WHITE = new THREE.Color(0xffffff);
const TEXT_LIGHT = new THREE.Color(0x3c3c3c).convertLinearToSRGB();
const TEXT_DARK = new THREE.Color(0xf0f0f0).convertLinearToSRGB();
const BG_DARK = new THREE.Color(0x3d3d3d).convertLinearToSRGB();

const ARENAColorsLight = {
    text: TEXT_LIGHT,
    textBg: BLACK,
    captionBg: WHITE,
    textBgOpacity: 0.25,
    bg: new THREE.Color(0xf3f3f3).convertLinearToSRGB(),
    bgOpacity: 0.8,
    buttonText: TEXT_LIGHT,
    buttonBg: new THREE.Color(0xededed).convertLinearToSRGB(),
    buttonBgOpacity: 0.9,
    buttonBgHover: new THREE.Color(0xd1d1d1).convertLinearToSRGB(),
    buttonBgSelected: WHITE,
};

const ARENAColorsDark = {
    text: TEXT_DARK,
    textBg: BG_DARK,
    captionBg: WHITE,
    textBgOpacity: 0.25,
    bg: BG_DARK,
    bgOpacity: 1,
    buttonText: TEXT_DARK,
    buttonBg: new THREE.Color(0x2e2e2e).convertLinearToSRGB(),
    buttonBgOpacity: 1,
    buttonBgHover: new THREE.Color(0x373737).convertLinearToSRGB(),
    buttonBgSelected: null,
};

You wouldn't be able to reference those javascript constants previously declared, but you can certainly reuse the color codes

I'll document this better somewhere else, but please note the weird structure of the new values 2D list of [key, value] tuples where in python you would do something like:

button_panel = ButtonPanel(
    object_id="button-panel",
    
    ...

    theme="dark"
    themeOverride=[["text", "0xFF0000"], ["buttonText", "0x00FF00"]]
)