mirror of
https://github.com/go-gitea/gitea
synced 2024-06-26 05:05:51 +00:00
ea7954f069
Close #24508 Main changes: As discussed in the issue 1. Change luminance calculation function to use [Relative Luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) 2. Move the luminance related functions into color.go/color.js 3. Add tests for both the files (Not sure if test cases are too many now) Before (tests included by `UseLightTextOnBackground` are labels started with `##`): https://try.gitea.io/HesterG/testrepo/labels After: <img width="1307" alt="Screen Shot 2023-05-08 at 13 37 55" src="https://user-images.githubusercontent.com/17645053/236742562-fdfc3a4d-2fab-466b-9613-96f2bf96b4bc.png"> <img width="1289" alt="Screen Shot 2023-05-08 at 13 38 06" src="https://user-images.githubusercontent.com/17645053/236742570-022db68e-cec0-43bb-888a-fc54f5332cc3.png"> <img width="1299" alt="Screen Shot 2023-05-08 at 13 38 20" src="https://user-images.githubusercontent.com/17645053/236742572-9af1de45-fb7f-460b-828d-ba25fae20f51.png"> --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>
43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
// Check similar implementation in modules/util/color.go and keep synchronization
|
|
// Return R, G, B values defined in reletive luminance
|
|
function getLuminanceRGB(channel) {
|
|
const sRGB = channel / 255;
|
|
return (sRGB <= 0.03928) ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055) ** 2.4;
|
|
}
|
|
|
|
// Reference from: https://www.w3.org/WAI/GL/wiki/Relative_luminance
|
|
function getLuminance(r, g, b) {
|
|
const R = getLuminanceRGB(r);
|
|
const G = getLuminanceRGB(g);
|
|
const B = getLuminanceRGB(b);
|
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
|
}
|
|
|
|
// Get color as RGB values in 0..255 range from the hex color string (with or without #)
|
|
export function hexToRGBColor(backgroundColorStr) {
|
|
let backgroundColor = backgroundColorStr;
|
|
if (backgroundColorStr[0] === '#') {
|
|
backgroundColor = backgroundColorStr.substring(1);
|
|
}
|
|
// only support transfer of rgb, rgba, rrggbb and rrggbbaa
|
|
// if not in these formats, use default values 0, 0, 0
|
|
if (![3, 4, 6, 8].includes(backgroundColor.length)) {
|
|
return [0, 0, 0];
|
|
}
|
|
if ([3, 4].includes(backgroundColor.length)) {
|
|
const [r, g, b] = backgroundColor;
|
|
backgroundColor = `${r}${r}${g}${g}${b}${b}`;
|
|
}
|
|
const r = parseInt(backgroundColor.substring(0, 2), 16);
|
|
const g = parseInt(backgroundColor.substring(2, 4), 16);
|
|
const b = parseInt(backgroundColor.substring(4, 6), 16);
|
|
return [r, g, b];
|
|
}
|
|
|
|
// Reference from: https://firsching.ch/github_labels.html
|
|
// In the future WCAG 3 APCA may be a better solution.
|
|
// Check if text should use light color based on RGB of background
|
|
export function useLightTextOnBackground(r, g, b) {
|
|
return getLuminance(r, g, b) < 0.453;
|
|
}
|