From 577890d89c593ae5b6cb96083fab69e2f1ae600c Mon Sep 17 00:00:00 2001 From: Sami Mazouz Date: Mon, 22 May 2023 22:23:11 +0100 Subject: [PATCH] fix: custom contrast color affected by parents Signed-off-by: Sami Mazouz --- framework/core/js/src/common/components/Badge.tsx | 2 +- framework/core/js/src/common/helpers/textContrastClass.ts | 4 +++- framework/core/less/common/scaffolding.less | 6 ++++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/framework/core/js/src/common/components/Badge.tsx b/framework/core/js/src/common/components/Badge.tsx index 7a75b3149..6529490d0 100644 --- a/framework/core/js/src/common/components/Badge.tsx +++ b/framework/core/js/src/common/components/Badge.tsx @@ -28,7 +28,7 @@ export default class Badge extend view() { const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs; - const className = classList('Badge', [type && `Badge--${type}`], attrs.className, color && textContrastClass(color)); + const className = classList('Badge', [type && `Badge--${type}`], attrs.className, textContrastClass(color)); const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust(' '); diff --git a/framework/core/js/src/common/helpers/textContrastClass.ts b/framework/core/js/src/common/helpers/textContrastClass.ts index fa1e0aec0..145378dc8 100644 --- a/framework/core/js/src/common/helpers/textContrastClass.ts +++ b/framework/core/js/src/common/helpers/textContrastClass.ts @@ -1,5 +1,7 @@ import isDark from '../utils/isDark'; -export default function textContrastClass(hexcolor: string | null): string { +export default function textContrastClass(hexcolor: string | null | undefined): string { + if (!hexcolor) return 'text-contrast--unchanged'; + return isDark(hexcolor) ? 'text-contrast--light' : 'text-contrast--dark'; } diff --git a/framework/core/less/common/scaffolding.less b/framework/core/less/common/scaffolding.less index 175f8f22a..f6d2b7997 100644 --- a/framework/core/less/common/scaffolding.less +++ b/framework/core/less/common/scaffolding.less @@ -176,4 +176,10 @@ blockquote ol:last-child { --contrast-color: var(--text-on-dark); color: var(--contrast-color); } + + // This exists to prevent inheriting the contrast color from a parent element. + // Like when a badge is inside a tag hero. + &--unchanged { + --contrast-color: var(--unchanged-color); + } }