mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-24 02:01:19 +02:00
Code Issues Releases Wiki Activity

fix: isDark() utility can receive null value (#3774)

Browse Source 
* Make isDark() not fail as easily with invalid input

Add early return if input looks fishy, minor refactoring and improvements of the entire method.

* Fix double quotes

* Run prettier 🙄

* chore: review

Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>

---------

Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>
Co-authored-by: Sami Mazouz <sychocouldy@gmail.com>
This commit is contained in:
luk
2023-04-22 10:45:51 +02:00
committed by GitHub
parent e55844f3db
commit f8577c8078
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
framework/core/js/src/common/helpers/textContrastClass.ts
View File

@@ -1,5 +1,5 @@
import isDark from '../utils/isDark'; import isDark from '../utils/isDark';
export default function textContrastClass(hexcolor: string): string { export default function textContrastClass(hexcolor: string | null): string {
return isDark(hexcolor) ? 'text-contrast--light' : 'text-contrast--dark'; return isDark(hexcolor) ? 'text-contrast--light' : 'text-contrast--dark';
} }

18
framework/core/js/src/common/utils/isDark.ts
View File

@@ -7,19 +7,25 @@
* standards, but we use a custom threshold for each light and dark modes * standards, but we use a custom threshold for each light and dark modes
* to preserve design consistency. * to preserve design consistency.
*/ */
export default function isDark(hexcolor: string): boolean { export default function isDark(hexcolor: string | null): boolean {
// return if hexcolor is undefined or shorter than 4 characters, shortest hex form is #333;
// decided against regex hex color validation for performance considerations
if (!hexcolor || hexcolor.length < 4) {
return false;
}
let hexnumbers = hexcolor.replace('#', ''); let hexnumbers = hexcolor.replace('#', '');
if (hexnumbers.length == 3) { if (hexnumbers.length === 3) {
hexnumbers += hexnumbers; hexnumbers += hexnumbers;
} }
const r = parseInt(hexnumbers.substr(0, 2), 16); const r = parseInt(hexnumbers.slice(0, 2), 16);
const g = parseInt(hexnumbers.substr(2, 2), 16); const g = parseInt(hexnumbers.slice(2, 4), 16);
const b = parseInt(hexnumbers.substr(4, 2), 16); const b = parseInt(hexnumbers.slice(4, 6), 16);
const yiq = (r * 299 + g * 587 + b * 114) / 1000; const yiq = (r * 299 + g * 587 + b * 114) / 1000;
const threshold = parseInt(window.getComputedStyle(document.body).getPropertyValue('--yiq-threshold')); const threshold = parseInt(getComputedStyle(document.body).getPropertyValue('--yiq-threshold').trim()) || 128;
return yiq < threshold; return yiq < threshold;
} }