From 806e0ad512be452aff7f632f0e840f7c88d35f3b Mon Sep 17 00:00:00 2001 From: protoclown Date: Sun, 25 Sep 2022 17:36:55 +0200 Subject: [PATCH 1/7] add yiq calculator util --- framework/core/js/src/common/compat.ts | 2 ++ framework/core/js/src/common/utils/yiqValue.ts | 14 ++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 framework/core/js/src/common/utils/yiqValue.ts diff --git a/framework/core/js/src/common/compat.ts b/framework/core/js/src/common/compat.ts index 27c5549f90..cfadfb2142 100644 --- a/framework/core/js/src/common/compat.ts +++ b/framework/core/js/src/common/compat.ts @@ -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 yiqValue from './utils/yiqValue'; 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/yiqValue': yiqValue, 'models/Notification': Notification, 'models/User': User, 'models/Post': Post, diff --git a/framework/core/js/src/common/utils/yiqValue.ts b/framework/core/js/src/common/utils/yiqValue.ts new file mode 100644 index 0000000000..5061bad54a --- /dev/null +++ b/framework/core/js/src/common/utils/yiqValue.ts @@ -0,0 +1,14 @@ +/** + * The `yiqValue` utility converts a hex color to rgb, and then calcul a yiq + * contrast value. + */ + +export default function yiqValue(hexcolor: String) { + const hexnumbers = hexcolor.replace("#", ""); + 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 contrast = ((r*299)+(g*587)+(b*114))/1000; + + return contrast; +} From 48b3c07c4ec051c6624c94f38402860c2416ec01 Mon Sep 17 00:00:00 2001 From: protoclown Date: Sun, 25 Sep 2022 18:11:10 +0200 Subject: [PATCH 2/7] fix: convert 3 chars hex to 6 chars hex --- framework/core/js/src/common/utils/yiqValue.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/framework/core/js/src/common/utils/yiqValue.ts b/framework/core/js/src/common/utils/yiqValue.ts index 5061bad54a..3fe77a91dc 100644 --- a/framework/core/js/src/common/utils/yiqValue.ts +++ b/framework/core/js/src/common/utils/yiqValue.ts @@ -4,7 +4,13 @@ */ export default function yiqValue(hexcolor: String) { - const hexnumbers = hexcolor.replace("#", ""); + + var 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); From bd0e6638cc2142b3e0cc5dfc54bb82889f488172 Mon Sep 17 00:00:00 2001 From: protoclown Date: Sun, 25 Sep 2022 18:19:53 +0200 Subject: [PATCH 3/7] fix: clarify util name --- framework/core/js/src/common/compat.ts | 4 ++-- .../js/src/common/utils/{yiqValue.ts => getContrast.ts} | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) rename framework/core/js/src/common/utils/{yiqValue.ts => getContrast.ts} (54%) diff --git a/framework/core/js/src/common/compat.ts b/framework/core/js/src/common/compat.ts index cfadfb2142..6b2df1ec7e 100644 --- a/framework/core/js/src/common/compat.ts +++ b/framework/core/js/src/common/compat.ts @@ -33,7 +33,7 @@ import formatNumber from './utils/formatNumber'; import mapRoutes from './utils/mapRoutes'; import withAttr from './utils/withAttr'; import * as FocusTrap from './utils/focusTrap'; -import yiqValue from './utils/yiqValue'; +import getContrast from './utils/getContrast'; import Notification from './models/Notification'; import User from './models/User'; import Post from './models/Post'; @@ -121,7 +121,7 @@ export default { 'utils/throttleDebounce': ThrottleDebounce, 'utils/isObject': isObject, 'utils/focusTrap': FocusTrap, - 'utils/yiqValue': yiqValue, + 'utils/getContrast': getContrast, 'models/Notification': Notification, 'models/User': User, 'models/Post': Post, diff --git a/framework/core/js/src/common/utils/yiqValue.ts b/framework/core/js/src/common/utils/getContrast.ts similarity index 54% rename from framework/core/js/src/common/utils/yiqValue.ts rename to framework/core/js/src/common/utils/getContrast.ts index 3fe77a91dc..56250a464d 100644 --- a/framework/core/js/src/common/utils/yiqValue.ts +++ b/framework/core/js/src/common/utils/getContrast.ts @@ -1,9 +1,10 @@ /** - * The `yiqValue` utility converts a hex color to rgb, and then calcul a yiq - * contrast value. + * The `getContrast` utility converts a hex color to rgb, and then calcul a YIQ + * value in order to get the appropriate contrast value (is it dark or is it + * light?) See https://www.w3.org/TR/AERT/#color-contrast for references */ -export default function yiqValue(hexcolor: String) { +export default function getContrast(hexcolor: String) { var hexnumbers = hexcolor.replace("#", ""); From 0c888f64034ea8842badabf1b25e36319fd5a308 Mon Sep 17 00:00:00 2001 From: protoclown Date: Mon, 26 Sep 2022 10:02:13 +0200 Subject: [PATCH 4/7] feat: add text color variables not depending on the dark/light mode --- framework/core/less/common/variables.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/framework/core/less/common/variables.less b/framework/core/less/common/variables.less index b82f333473..dd4b8ca2af 100644 --- a/framework/core/less/common/variables.less +++ b/framework/core/less/common/variables.less @@ -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; From 99b5036f3ec5498124c136e482ed916088d1e242 Mon Sep 17 00:00:00 2001 From: protoclown Date: Mon, 26 Sep 2022 12:59:00 +0200 Subject: [PATCH 5/7] refactor: change getContrast to isDark with for a more direct approach --- framework/core/js/src/common/compat.ts | 4 ++-- .../core/js/src/common/utils/{getContrast.ts => isDark.ts} | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) rename framework/core/js/src/common/utils/{getContrast.ts => isDark.ts} (78%) diff --git a/framework/core/js/src/common/compat.ts b/framework/core/js/src/common/compat.ts index 6b2df1ec7e..d63f4fcb91 100644 --- a/framework/core/js/src/common/compat.ts +++ b/framework/core/js/src/common/compat.ts @@ -33,7 +33,7 @@ import formatNumber from './utils/formatNumber'; import mapRoutes from './utils/mapRoutes'; import withAttr from './utils/withAttr'; import * as FocusTrap from './utils/focusTrap'; -import getContrast from './utils/getContrast'; +import isDark from './utils/isDark'; import Notification from './models/Notification'; import User from './models/User'; import Post from './models/Post'; @@ -121,7 +121,7 @@ export default { 'utils/throttleDebounce': ThrottleDebounce, 'utils/isObject': isObject, 'utils/focusTrap': FocusTrap, - 'utils/getContrast': getContrast, + 'utils/isDark': isDark, 'models/Notification': Notification, 'models/User': User, 'models/Post': Post, diff --git a/framework/core/js/src/common/utils/getContrast.ts b/framework/core/js/src/common/utils/isDark.ts similarity index 78% rename from framework/core/js/src/common/utils/getContrast.ts rename to framework/core/js/src/common/utils/isDark.ts index 56250a464d..8c949447d3 100644 --- a/framework/core/js/src/common/utils/getContrast.ts +++ b/framework/core/js/src/common/utils/isDark.ts @@ -4,7 +4,7 @@ * light?) See https://www.w3.org/TR/AERT/#color-contrast for references */ -export default function getContrast(hexcolor: String) { +export default function isDark(hexcolor: String) { var hexnumbers = hexcolor.replace("#", ""); @@ -15,7 +15,7 @@ export default function getContrast(hexcolor: String) { 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 contrast = ((r*299)+(g*587)+(b*114))/1000; + const yiq = ((r*299)+(g*587)+(b*114))/1000; - return contrast; + return (yiq >= 128) ? false : true; } From ad0624770dd0f3649751aa7bdb430d1b29c50b61 Mon Sep 17 00:00:00 2001 From: protoclown Date: Mon, 26 Sep 2022 13:01:46 +0200 Subject: [PATCH 6/7] fix: adjust snippet description --- framework/core/js/src/common/utils/isDark.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/framework/core/js/src/common/utils/isDark.ts b/framework/core/js/src/common/utils/isDark.ts index 8c949447d3..f12ac2cdf4 100644 --- a/framework/core/js/src/common/utils/isDark.ts +++ b/framework/core/js/src/common/utils/isDark.ts @@ -1,7 +1,8 @@ /** - * The `getContrast` utility converts a hex color to rgb, and then calcul a YIQ - * value in order to get the appropriate contrast value (is it dark or is it - * light?) See https://www.w3.org/TR/AERT/#color-contrast for references + * 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) { From 4966bdeb9ad5c6e243d7d0f5c548aaebdfee5948 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Fri, 21 Oct 2022 14:02:53 +0100 Subject: [PATCH 7/7] chore: change `var` to `let` --- framework/core/js/src/common/utils/isDark.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/framework/core/js/src/common/utils/isDark.ts b/framework/core/js/src/common/utils/isDark.ts index f12ac2cdf4..03755a8e8c 100644 --- a/framework/core/js/src/common/utils/isDark.ts +++ b/framework/core/js/src/common/utils/isDark.ts @@ -6,8 +6,7 @@ */ export default function isDark(hexcolor: String) { - - var hexnumbers = hexcolor.replace("#", ""); + let hexnumbers = hexcolor.replace("#", ""); if (hexnumbers.length == 3) { hexnumbers += hexnumbers;