domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Always pass 6-digit hex color to monaco (#25780)

Browse source 
Monaco can not deal with color formats other than 6-digit hex, so we
convert the colors for it via new
[`tinycolor2`](https://github.com/bgrins/TinyColor) dependency (5kB
minzipped).

Also, with the addition of the module, we can replace the existing
`hexToRGBColor` usage, I verified it is compatible with the current
tests before removing the function.

Fixes: https://github.com/go-gitea/gitea/issues/25770
This commit is contained in:
silverwind 2023-07-09 12:17:22 +02:00 • committed by GitHub
parent d58096ec31
commit 38844e0869
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 33 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web_src/js/utils/color.js
View file

@ -13,27 +13,6 @@ function getLuminance(r, g, 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

14
web_src/js/utils/color.test.js
View file

@ -1,17 +1,5 @@
import {test, expect} from 'vitest';
import {hexToRGBColor, useLightTextOnBackground} from './color.js';
test('hexToRGBColor', () => {
expect(hexToRGBColor('2b8685')).toEqual([43, 134, 133]);
expect(hexToRGBColor('1e1')).toEqual([17, 238, 17]);
expect(hexToRGBColor('#1e1')).toEqual([17, 238, 17]);
expect(hexToRGBColor('1e16')).toEqual([17, 238, 17]);
expect(hexToRGBColor('3bb6b3')).toEqual([59, 182, 179]);
expect(hexToRGBColor('#3bb6b399')).toEqual([59, 182, 179]);
expect(hexToRGBColor('#0')).toEqual([0, 0, 0]);
expect(hexToRGBColor('#00000')).toEqual([0, 0, 0]);
expect(hexToRGBColor('#1234567')).toEqual([0, 0, 0]);
});
import {useLightTextOnBackground} from './color.js';
test('useLightTextOnBackground', () => {
expect(useLightTextOnBackground(215, 58, 74)).toBe(true);