-
Notifications
You must be signed in to change notification settings - Fork 246
Open
Description
First off, I love the proposed enhancements here.
In terms of the concerns over proper color contrast for accessibility of the badges when using dev-defined colors, you should be able to analyze the color and determine whether it’s better to go with white or black text against the color background for maximum contrast. You could even take it a step further and tune the design to mimic how GitHub handles labels (using some clever color calculations):
.btUVdh {
text-decoration-color: currentcolor;
--label-r: 83;
--label-g: 25;
--label-b: 231;
--label-h: 257;
--label-s: 81;
--label-l: 50;
--perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
--lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
--border-color: var( --borderColor-muted, var(--color-border-subtle) );
--lightness-threshold: 0.6;
--background-alpha: 0.18;
--border-alpha: 0.3;
--lighten-by: calc( ((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch) );
background: rgba( var(--label-r), var(--label-g),var(--label-b), var(--background-alpha) );
color: hsl( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%) );
border-color: hsla( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha) );
}
dnszero and gcacarscaptainbrosset, leahmsft and mystica2000