FIX: restore category text color field #32915
Conversation
| @@ -22,6 +22,7 @@ export default class EditCategoryGeneral extends Component { | |||
| @service site; | |||
| @service siteSettings; | |||
|
|
|||
| textColors = ["FFFFFF", "000000"]; | |||
There was a problem hiding this comment.
Maybe a 🏌️ :
Would it not make sense to have this be a constant outside of the class? We could then use it as values too, in testing, for example
There was a problem hiding this comment.
Nice suggestion, these were always in the edit category tab component prior to my previous PR (#32015), but I think it's a reasonable change to extract it out.
I've moved the default text colors to the category model and then it runs as part of the rake task to add to the JS constants, similar to the style types that I added before. I also used it in the tests.
| const color = newColor.replace("#", ""); | ||
|
|
||
| if (field.name === "color") { | ||
| const whiteDiff = this.colorDifference(color, CATEGORY_TEXT_COLORS[0]); | ||
| const blackDiff = this.colorDifference(color, CATEGORY_TEXT_COLORS[1]); | ||
| const colorIndex = whiteDiff > blackDiff ? 0 : 1; | ||
|
|
||
| this.args.form.setProperties({ | ||
| color, | ||
| text_color: CATEGORY_TEXT_COLORS[colorIndex], | ||
| }); | ||
| } else { | ||
| field.set(color); | ||
| } | ||
| } | ||
|
|
||
| @action | ||
| colorDifference(color1, color2) { | ||
| const r1 = parseInt(color1.substr(0, 2), 16); | ||
| const g1 = parseInt(color1.substr(2, 2), 16); | ||
| const b1 = parseInt(color1.substr(4, 2), 16); | ||
|
|
||
| const r2 = parseInt(color2.substr(0, 2), 16); | ||
| const g2 = parseInt(color2.substr(2, 2), 16); | ||
| const b2 = parseInt(color2.substr(4, 2), 16); | ||
|
|
||
| const rDiff = Math.max(r1, r2) - Math.min(r1, r2); | ||
| const gDiff = Math.max(g1, g2) - Math.min(g1, g2); | ||
| const bDiff = Math.max(b1, b2) - Math.min(b1, b2); | ||
|
|
||
| return rDiff + gDiff + bDiff; |
There was a problem hiding this comment.
We probably should extract most of this in a library
|
LGTM, tested locally 🚀 I pushed a small commit to simplify tests, and yes I recommend a library for this color diff thing, but up to you 👍 |
Restores the category text/foreground color field that was removed in #32015.
We are also retaining the auto text color selection that was introduced and applying on background color change rather than when the form is saved. The text color algorithm has been changed from color brightness to use color difference instead, which appears to be more reliable.
Algorithm for color difference: https://www.w3.org/TR/AERT/#color-contrast
Screen.Recording.2025-05-26.at.1.46.00.PM.mov
Internal ref: /t/154650