mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-03 15:07:53 +02:00
Code Issues Releases Wiki Activity

feat: contrast util with yiq calculator (#3652)

Browse Source 
* add yiq calculator util

* fix: convert 3 chars hex to 6 chars hex

* fix: clarify util name

* feat: add text color variables not depending on the dark/light mode

* refactor: change getContrast to isDark with for a more direct approach

* fix: adjust snippet description

* chore: change `var` to `let`

Co-authored-by: David Wheatley <david@davwheat.dev>
This commit is contained in:
ornanovitch
2022-11-07 12:20:02 +01:00
committed by GitHub
parent f0a867b20f
commit fccc3e2188
3 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
framework/core/js/src/common/compat.ts
View File

@@ -33,6 +33,7 @@ import formatNumber from './utils/formatNumber';
import mapRoutes from './utils/mapRoutes';
import withAttr from './utils/withAttr';
import * as FocusTrap from './utils/focusTrap';
import isDark from './utils/isDark';
import Notification from './models/Notification';
import User from './models/User';
import Post from './models/Post';
@@ -120,6 +121,7 @@ export default {
'utils/throttleDebounce': ThrottleDebounce,
'utils/isObject': isObject,
'utils/focusTrap': FocusTrap,
'utils/isDark': isDark,
'models/Notification': Notification,
'models/User': User,
'models/Post': Post,

21
framework/core/js/src/common/utils/isDark.ts Normal file
View File

@@ -0,0 +1,21 @@
/**
* The `isDark` utility converts a hex color to rgb, and then calcul a YIQ
* value in order to get the appropriate brightness value (is it dark or is it
* light?) See https://www.w3.org/TR/AERT/#color-contrast for references. A YIQ
* value >= 128 is a light color.
*/
export default function isDark(hexcolor: String) {
let hexnumbers = hexcolor.replace("#", "");
if (hexnumbers.length == 3) {
hexnumbers += hexnumbers;
}
const r = parseInt(hexnumbers.substr(0,2),16);
const g = parseInt(hexnumbers.substr(2,2),16);
const b = parseInt(hexnumbers.substr(4,2),16);
const yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? false : true;
}

7
framework/core/less/common/variables.less
View File

@@ -64,6 +64,13 @@
@code-color: #fff;
}
// Beyond dark or light mode, we need stable colors depending on the luminosity
// of the parents element's background. This allow not to change the color
// variable depending on the dark/light mode to get the same final color, and
// thus to simplify the logic.
@text-on-dark: #ddd;
@text-on-light: #111;
@hero-bg: @control-bg;
@hero-color: @control-color;
@hero-muted-color: @control-color;