mirror of https://github.com/go-gitea/gitea.git
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>pull/24600/head^2
Hester Gong
2 years ago
committed by
GitHub
parent
0ca5adee16
commit
ea7954f069
@ -0,0 +1,65 @@
|
||||
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||
// SPDX-License-Identifier: MIT
|
||||
package util
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"math"
|
||||
"strconv"
|
||||
"strings"
|
||||
)
|
||||
|
||||
// Check similar implementation in web_src/js/utils/color.js and keep synchronization
|
||||
|
||||
// Return R, G, B values defined in reletive luminance
|
||||
func getLuminanceRGB(channel float64) float64 {
|
||||
sRGB := channel / 255
|
||||
if sRGB <= 0.03928 {
|
||||
return sRGB / 12.92
|
||||
}
|
||||
return math.Pow((sRGB+0.055)/1.055, 2.4)
|
||||
}
|
||||
|
||||
// Get color as RGB values in 0..255 range from the hex color string (with or without #)
|
||||
func HexToRBGColor(colorString string) (float64, float64, float64) {
|
||||
hexString := colorString
|
||||
if strings.HasPrefix(colorString, "#") {
|
||||
hexString = colorString[1:]
|
||||
}
|
||||
// only support transfer of rgb, rgba, rrggbb and rrggbbaa
|
||||
// if not in these formats, use default values 0, 0, 0
|
||||
if len(hexString) != 3 && len(hexString) != 4 && len(hexString) != 6 && len(hexString) != 8 {
|
||||
return 0, 0, 0
|
||||
}
|
||||
if len(hexString) == 3 || len(hexString) == 4 {
|
||||
hexString = fmt.Sprintf("%c%c%c%c%c%c", hexString[0], hexString[0], hexString[1], hexString[1], hexString[2], hexString[2])
|
||||
}
|
||||
if len(hexString) == 8 {
|
||||
hexString = hexString[0:6]
|
||||
}
|
||||
color, err := strconv.ParseUint(hexString, 16, 64)
|
||||
if err != nil {
|
||||
return 0, 0, 0
|
||||
}
|
||||
r := float64(uint8(0xFF & (uint32(color) >> 16)))
|
||||
g := float64(uint8(0xFF & (uint32(color) >> 8)))
|
||||
b := float64(uint8(0xFF & uint32(color)))
|
||||
return r, g, b
|
||||
}
|
||||
|
||||
// return luminance given RGB channels
|
||||
// Reference from: https://www.w3.org/WAI/GL/wiki/Relative_luminance
|
||||
func GetLuminance(r, g, b float64) float64 {
|
||||
R := getLuminanceRGB(r)
|
||||
G := getLuminanceRGB(g)
|
||||
B := getLuminanceRGB(b)
|
||||
luminance := 0.2126*R + 0.7152*G + 0.0722*B
|
||||
return luminance
|
||||
}
|
||||
|
||||
// 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
|
||||
func UseLightTextOnBackground(r, g, b float64) bool {
|
||||
return GetLuminance(r, g, b) < 0.453
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||
// SPDX-License-Identifier: MIT
|
||||
package util
|
||||
|
||||
import (
|
||||
"testing"
|
||||
|
||||
"github.com/stretchr/testify/assert"
|
||||
)
|
||||
|
||||
func Test_HexToRBGColor(t *testing.T) {
|
||||
cases := []struct {
|
||||
colorString string
|
||||
expectedR float64
|
||||
expectedG float64
|
||||
expectedB float64
|
||||
}{
|
||||
{"2b8685", 43, 134, 133},
|
||||
{"1e1", 17, 238, 17},
|
||||
{"#1e1", 17, 238, 17},
|
||||
{"1e16", 17, 238, 17},
|
||||
{"3bb6b3", 59, 182, 179},
|
||||
{"#3bb6b399", 59, 182, 179},
|
||||
{"#0", 0, 0, 0},
|
||||
{"#00000", 0, 0, 0},
|
||||
{"#1234567", 0, 0, 0},
|
||||
}
|
||||
for n, c := range cases {
|
||||
r, g, b := HexToRBGColor(c.colorString)
|
||||
assert.Equal(t, c.expectedR, r, "case %d: error R should match: expected %f, but get %f", n, c.expectedR, r)
|
||||
assert.Equal(t, c.expectedG, g, "case %d: error G should match: expected %f, but get %f", n, c.expectedG, g)
|
||||
assert.Equal(t, c.expectedB, b, "case %d: error B should match: expected %f, but get %f", n, c.expectedB, b)
|
||||
}
|
||||
}
|
||||
|
||||
func Test_UseLightTextOnBackground(t *testing.T) {
|
||||
cases := []struct {
|
||||
r float64
|
||||
g float64
|
||||
b float64
|
||||
expected bool
|
||||
}{
|
||||
{215, 58, 74, true},
|
||||
{0, 117, 202, true},
|
||||
{207, 211, 215, false},
|
||||
{162, 238, 239, false},
|
||||
{112, 87, 255, true},
|
||||
{0, 134, 114, true},
|
||||
{228, 230, 105, false},
|
||||
{216, 118, 227, true},
|
||||
{255, 255, 255, false},
|
||||
{43, 134, 133, true},
|
||||
{43, 135, 134, true},
|
||||
{44, 135, 134, true},
|
||||
{59, 182, 179, true},
|
||||
{124, 114, 104, true},
|
||||
{126, 113, 108, true},
|
||||
{129, 112, 109, true},
|
||||
{128, 112, 112, true},
|
||||
}
|
||||
for n, c := range cases {
|
||||
result := UseLightTextOnBackground(c.r, c.g, c.b)
|
||||
assert.Equal(t, c.expected, result, "case %d: error should match", n)
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
Loading…
Reference in New Issue