summaryrefslogtreecommitdiffstats
path: root/web_src
diff options
context:
space:
mode:
authorHester Gong <hestergong@gmail.com>2023-05-10 19:19:03 +0800
committerGitHub <noreply@github.com>2023-05-10 11:19:03 +0000
commitea7954f069bf8bcb87d520f8aab0a80b0768590d (patch)
treef5edc566c9dbafa3507ed8ef3ffaa32944f80797 /web_src
parent0ca5adee16a9de0fb0bd410aa841eeeda3372e23 (diff)
downloadgitea-ea7954f069bf8bcb87d520f8aab0a80b0768590d.tar.gz
gitea-ea7954f069bf8bcb87d520f8aab0a80b0768590d.zip
Modify luminance calculation and extract related functions into single files (#24586)
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>
Diffstat (limited to 'web_src')
-rw-r--r--web_src/js/components/ContextPopup.vue5
-rw-r--r--web_src/js/features/repo-projects.js5
-rw-r--r--web_src/js/utils.js14
-rw-r--r--web_src/js/utils/color.js42
-rw-r--r--web_src/js/utils/color.test.js34
5 files changed, 82 insertions, 18 deletions
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 98f9db51f9..bef9b7a6f3 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -26,7 +26,7 @@
<script>
import $ from 'jquery';
import {SvgIcon} from '../svg.js';
-import {useLightTextOnBackground} from '../utils.js';
+import {useLightTextOnBackground, hexToRGBColor} from '../utils/color.js';
const {appSubUrl, i18n} = window.config;
@@ -77,7 +77,8 @@ export default {
labels() {
return this.issue.labels.map((label) => {
let textColor;
- if (useLightTextOnBackground(label.color)) {
+ const [r, g, b] = hexToRGBColor(label.color);
+ if (useLightTextOnBackground(r, g, b)) {
textColor = '#eeeeee';
} else {
textColor = '#111111';
diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index 11f5518283..abbe23458e 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -1,5 +1,5 @@
import $ from 'jquery';
-import {useLightTextOnBackground} from '../utils.js';
+import {useLightTextOnBackground, hexToRGBColor} from '../utils/color.js';
const {csrfToken} = window.config;
@@ -190,7 +190,8 @@ export function initRepoProject() {
}
function setLabelColor(label, color) {
- if (useLightTextOnBackground(color)) {
+ const [r, g, b] = hexToRGBColor(color);
+ if (useLightTextOnBackground(r, g, b)) {
label.removeClass('dark-label').addClass('light-label');
} else {
label.removeClass('light-label').addClass('dark-label');
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 25094deea2..2a2d6df0b4 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -135,17 +135,3 @@ export function toAbsoluteUrl(url) {
return `${window.location.origin}${url}`;
}
-// determine if light or dark text color should be used on a given background color
-// NOTE: see models/issue_label.go for similar implementation
-export function useLightTextOnBackground(backgroundColor) {
- if (backgroundColor[0] === '#') {
- backgroundColor = backgroundColor.substring(1);
- }
- // Perceived brightness from: https://www.w3.org/TR/AERT/#color-contrast
- // In the future WCAG 3 APCA may be a better solution.
- const r = parseInt(backgroundColor.substring(0, 2), 16);
- const g = parseInt(backgroundColor.substring(2, 4), 16);
- const b = parseInt(backgroundColor.substring(4, 6), 16);
- const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
- return brightness < 0.35;
-}
diff --git a/web_src/js/utils/color.js b/web_src/js/utils/color.js
new file mode 100644
index 0000000000..389e2d095f
--- /dev/null
+++ b/web_src/js/utils/color.js
@@ -0,0 +1,42 @@
+// 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;
+}
diff --git a/web_src/js/utils/color.test.js b/web_src/js/utils/color.test.js
new file mode 100644
index 0000000000..592e93b0f2
--- /dev/null
+++ b/web_src/js/utils/color.test.js
@@ -0,0 +1,34 @@
+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]);
+});
+
+test('useLightTextOnBackground', () => {
+ expect(useLightTextOnBackground(215, 58, 74)).toBe(true);
+ expect(useLightTextOnBackground(0, 117, 202)).toBe(true);
+ expect(useLightTextOnBackground(207, 211, 215)).toBe(false);
+ expect(useLightTextOnBackground(162, 238, 239)).toBe(false);
+ expect(useLightTextOnBackground(112, 87, 255)).toBe(true);
+ expect(useLightTextOnBackground(0, 134, 114)).toBe(true);
+ expect(useLightTextOnBackground(228, 230, 105)).toBe(false);
+ expect(useLightTextOnBackground(216, 118, 227)).toBe(true);
+ expect(useLightTextOnBackground(255, 255, 255)).toBe(false);
+ expect(useLightTextOnBackground(43, 134, 133)).toBe(true);
+ expect(useLightTextOnBackground(43, 135, 134)).toBe(true);
+ expect(useLightTextOnBackground(44, 135, 134)).toBe(true);
+ expect(useLightTextOnBackground(59, 182, 179)).toBe(true);
+ expect(useLightTextOnBackground(124, 114, 104)).toBe(true);
+ expect(useLightTextOnBackground(126, 113, 108)).toBe(true);
+ expect(useLightTextOnBackground(129, 112, 109)).toBe(true);
+ expect(useLightTextOnBackground(128, 112, 112)).toBe(true);
+});
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-05 14:11:48 +0000