Label of button-group is dimmed

[Bond246]

Current Behavior

I use button-groups and text nodes in a really mixed way.
Thats why i've expected that text labels of button-groups seem to be dimmed. Not only the label but also emoji icons i've put in the label. If i change the text-color by adding something like <font color="red"> to the label this color is also dimmed.

Expected Behavior

The color should not be dimmed.
In the screenshot example above the color should be white not something like gray.

Steps To Reproduce

[{"id":"517f4cd01606e746","type":"ui-text","z":"5a063c4965b355f2","group":"e2a75656db3d9f6a","order":2,"width":"3","height":"1","name":"","label":"🛋️ Stehlampe led","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":570,"y":1400,"wires":[]},{"id":"871b27817411fce0","type":"ui-button-group","z":"5a063c4965b355f2","name":"","group":"e2a75656db3d9f6a","order":1,"width":6,"height":1,"label":"🛋️ Stehlampe","className":"","rounded":true,"useThemeColors":false,"passthru":false,"options":[{"label":"","icon":"lightbulb-on","value":"ON","valueType":"str","color":"#fdde34"},{"label":"","icon":"lightbulb-off","value":"OFF","valueType":"str","color":"#4a4a4a"}],"topic":"topic","topicType":"msg","x":300,"y":520,"wires":[["4f2378ec4f27e9d3"]]},{"id":"e2a75656db3d9f6a","type":"ui-group","name":"Beleuchtung","page":"a2b46d0bd47e6940","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a2b46d0bd47e6940","type":"ui-page","name":"Home","ui":"1792a4055503e618","path":"/home","icon":"home","layout":"flex","theme":"8ad8c521246da50d","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"1792a4055503e618","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"default"},{"id":"8ad8c521246da50d","type":"ui-theme","name":"Default Theme","colors":{"surface":"#4e945a","primary":"#4e945a","bgPage":"#111111","groupBg":"#333333","groupOutline":"#333333"},"sizes":{"density":"comfortable","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Environment

• Dashboard version: 1.19.1
• Node-RED version: 4.0.5
• Node.js version: docker: nodered/node-red:4.0.5
• npm version: docker: nodered/node-red:4.0.5
• Platform/OS: docker/ubuntu
• Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[jodelkoenig]

Confirmed to be a mismatch between ui elements. Below a picture with a switch and text element. Vanilla nodered. Only dashboard2 plugin installed. nothing else

[Bond246]

There are also other issues with the slider for example:

The sliders have a margin-inline of 8px that moves them some pixel to the right compared to other elements.