From ea7954f069bf8bcb87d520f8aab0a80b0768590d Mon Sep 17 00:00:00 2001 From: Hester Gong Date: Wed, 10 May 2023 19:19:03 +0800 Subject: [PATCH] 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: Screen Shot 2023-05-08 at 13 37 55 Screen Shot 2023-05-08 at 13 38 06 Screen Shot 2023-05-08 at 13 38 20 --------- Co-authored-by: silverwind Co-authored-by: Giteabot --- models/issues/label.go | 27 ----------- models/issues/label_test.go | 9 ---- modules/templates/util_render.go | 53 +++++++++++---------- modules/util/color.go | 65 ++++++++++++++++++++++++++ modules/util/color_test.go | 65 ++++++++++++++++++++++++++ web_src/js/components/ContextPopup.vue | 5 +- web_src/js/features/repo-projects.js | 5 +- web_src/js/utils.js | 14 ------ web_src/js/utils/color.js | 42 +++++++++++++++++ web_src/js/utils/color.test.js | 34 ++++++++++++++ 10 files changed, 238 insertions(+), 81 deletions(-) create mode 100644 modules/util/color.go create mode 100644 modules/util/color_test.go create mode 100644 web_src/js/utils/color.js create mode 100644 web_src/js/utils/color.test.js diff --git a/models/issues/label.go b/models/issues/label.go index 35c649e8f..9c22dcdd2 100644 --- a/models/issues/label.go +++ b/models/issues/label.go @@ -159,33 +159,6 @@ func (l *Label) BelongsToRepo() bool { return l.RepoID > 0 } -// Get color as RGB values in 0..255 range -func (l *Label) ColorRGB() (float64, float64, float64, error) { - color, err := strconv.ParseUint(l.Color[1:], 16, 64) - if err != nil { - return 0, 0, 0, err - } - - r := float64(uint8(0xFF & (uint32(color) >> 16))) - g := float64(uint8(0xFF & (uint32(color) >> 8))) - b := float64(uint8(0xFF & uint32(color))) - return r, g, b, nil -} - -// Determine if label text should be light or dark to be readable on background color -func (l *Label) UseLightTextColor() bool { - if strings.HasPrefix(l.Color, "#") { - if r, g, b, err := l.ColorRGB(); err == nil { - // Perceived brightness from: https://www.w3.org/TR/AERT/#color-contrast - // In the future WCAG 3 APCA may be a better solution - brightness := (0.299*r + 0.587*g + 0.114*b) / 255 - return brightness < 0.35 - } - } - - return false -} - // Return scope substring of label name, or empty string if none exists func (l *Label) ExclusiveScope() string { if !l.Exclusive { diff --git a/models/issues/label_test.go b/models/issues/label_test.go index 1f6ce4f42..1bc5a1a93 100644 --- a/models/issues/label_test.go +++ b/models/issues/label_test.go @@ -22,15 +22,6 @@ func TestLabel_CalOpenIssues(t *testing.T) { assert.EqualValues(t, 2, label.NumOpenIssues) } -func TestLabel_TextColor(t *testing.T) { - assert.NoError(t, unittest.PrepareTestDatabase()) - label := unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 1}) - assert.False(t, label.UseLightTextColor()) - - label = unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 2}) - assert.True(t, label.UseLightTextColor()) -} - func TestLabel_ExclusiveScope(t *testing.T) { assert.NoError(t, unittest.PrepareTestDatabase()) label := unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 7}) diff --git a/modules/templates/util_render.go b/modules/templates/util_render.go index a59ddd3f1..a26c0531f 100644 --- a/modules/templates/util_render.go +++ b/modules/templates/util_render.go @@ -20,6 +20,7 @@ import ( "code.gitea.io/gitea/modules/markup" "code.gitea.io/gitea/modules/markup/markdown" "code.gitea.io/gitea/modules/setting" + "code.gitea.io/gitea/modules/util" ) // RenderCommitMessage renders commit message with XSS-safe and special links. @@ -133,7 +134,9 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) template.HTML { labelScope := label.ExclusiveScope() textColor := "#111" - if label.UseLightTextColor() { + r, g, b := util.HexToRBGColor(label.Color) + // Determine if label text should be light or dark to be readable on background color + if util.UseLightTextOnBackground(r, g, b) { textColor = "#eee" } @@ -150,34 +153,30 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) template.HTML { scopeText := RenderEmoji(ctx, labelScope) itemText := RenderEmoji(ctx, label.Name[len(labelScope)+1:]) - itemColor := label.Color - scopeColor := label.Color - if r, g, b, err := label.ColorRGB(); err == nil { - // Make scope and item background colors slightly darker and lighter respectively. - // More contrast needed with higher luminance, empirically tweaked. - luminance := (0.299*r + 0.587*g + 0.114*b) / 255 - contrast := 0.01 + luminance*0.03 - // Ensure we add the same amount of contrast also near 0 and 1. - darken := contrast + math.Max(luminance+contrast-1.0, 0.0) - lighten := contrast + math.Max(contrast-luminance, 0.0) - // Compute factor to keep RGB values proportional. - darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0) - lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0) + // Make scope and item background colors slightly darker and lighter respectively. + // More contrast needed with higher luminance, empirically tweaked. + luminance := util.GetLuminance(r, g, b) + contrast := 0.01 + luminance*0.03 + // Ensure we add the same amount of contrast also near 0 and 1. + darken := contrast + math.Max(luminance+contrast-1.0, 0.0) + lighten := contrast + math.Max(contrast-luminance, 0.0) + // Compute factor to keep RGB values proportional. + darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0) + lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0) - scopeBytes := []byte{ - uint8(math.Min(math.Round(r*darkenFactor), 255)), - uint8(math.Min(math.Round(g*darkenFactor), 255)), - uint8(math.Min(math.Round(b*darkenFactor), 255)), - } - itemBytes := []byte{ - uint8(math.Min(math.Round(r*lightenFactor), 255)), - uint8(math.Min(math.Round(g*lightenFactor), 255)), - uint8(math.Min(math.Round(b*lightenFactor), 255)), - } - - itemColor = "#" + hex.EncodeToString(itemBytes) - scopeColor = "#" + hex.EncodeToString(scopeBytes) + scopeBytes := []byte{ + uint8(math.Min(math.Round(r*darkenFactor), 255)), + uint8(math.Min(math.Round(g*darkenFactor), 255)), + uint8(math.Min(math.Round(b*darkenFactor), 255)), } + itemBytes := []byte{ + uint8(math.Min(math.Round(r*lightenFactor), 255)), + uint8(math.Min(math.Round(g*lightenFactor), 255)), + uint8(math.Min(math.Round(b*lightenFactor), 255)), + } + + itemColor := "#" + hex.EncodeToString(itemBytes) + scopeColor := "#" + hex.EncodeToString(scopeBytes) s := fmt.Sprintf(""+ "
%s
"+ diff --git a/modules/util/color.go b/modules/util/color.go new file mode 100644 index 000000000..240b045c2 --- /dev/null +++ b/modules/util/color.go @@ -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 +} diff --git a/modules/util/color_test.go b/modules/util/color_test.go new file mode 100644 index 000000000..d96ac3673 --- /dev/null +++ b/modules/util/color_test.go @@ -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) + } +} diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue index 98f9db51f..bef9b7a6f 100644 --- a/web_src/js/components/ContextPopup.vue +++ b/web_src/js/components/ContextPopup.vue @@ -26,7 +26,7 @@