Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-06-03 21:55:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: MultiPurposeLabel text color (#3485)

Browse Source
This commit is contained in:
Kuchenpirat 2024-04-17 19:24:54 +02:00 committed by GitHub
parent 0b851e79ec
commit 360b8e21d9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue
View File

@ -8,8 +8,11 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from "@nuxtjs/composition-api"; import { computed, defineComponent } from "@nuxtjs/composition-api";
// @ts-ignore missing color types
import Color from "@sphinxxxx/color-conversion";
import { MultiPurposeLabelSummary } from "~/lib/api/types/recipe"; import { MultiPurposeLabelSummary } from "~/lib/api/types/recipe";
export default defineComponent({ export default defineComponent({
props: { props: {
label: { label: {
@ -34,19 +37,27 @@ export default defineComponent({
const ACCESSIBILITY_THRESHOLD = 0.179; const ACCESSIBILITY_THRESHOLD = 0.179;
function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) { function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor; try {
const r = parseInt(color.substring(0, 2), 16); // hexToR const color = new Color(bgColor);
const g = parseInt(color.substring(2, 4), 16); // hexToG
const b = parseInt(color.substring(4, 6), 16); // hexToB // if opacity is less than 0.3 always return dark color
const uicolors = [r / 255, g / 255, b / 255]; if (color._rgba[3] < 0.3) {
const c = uicolors.map((col) => { return darkColor;
if (col <= 0.03928) {
return col / 12.92;
} }
return Math.pow((col + 0.055) / 1.055, 2.4);
}); const uicolors = [color._rgba[0] / 255, color._rgba[1] / 255, color._rgba[2] / 255];
const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; const c = uicolors.map((col) => {
return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor; if (col <= 0.03928) {
return col / 12.92;
}
return Math.pow((col + 0.055) / 1.055, 2.4);
});
const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
} catch (error) {
console.warn(error);
return "black";
}
} }
return { return {