separate update, I believe this does it (and more…):
state_display: >
[[[ var statecolor = (entity.state == 'on') ? 'var(--active-color)' : 'var(--text-color-off)';
var labelcolor = (entity.state == 'on') ? 'var(--button-card-light-color)' : 'orange';
var id = entity.entity_id.split('.')[1];
var power = states['sensor.' + id + '_power'];
var bri = entity.attributes.brightness ? Math.round(entity.attributes.brightness/2.55) : '';
var content = power? power.state + ' W': '';
var divider = power? ': ' : '';
var fakestate = `<span style="color: ${statecolor};"> ${entity.state}</span>`;
var fakelabel = `<span style="color: ${labelcolor};"> ${content} </span>`;
return fakestate + divider + fakelabel; ]]]
also took out the ‘null’ statements, because all of a sudden I saw ‘Null’ on the buttons, which was new for me tbh, maybe some backend change caused that. Anyways, the above allows me to style all section of the line, and guards for existence on all individual parts…pfff
almost forgot to mention: thanks to @bramski for his amazing PowerCalc allowing me to finally add power consumption for all our smart lights and other devices which Ive been looking for for over 4 years. (and forcing me to edit these buttons once again, revisiting JS/CSS … duh