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

fix: custom contrast color affected by parents

Browse Source 
Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>
This commit is contained in:
Sami Mazouz
2023-05-22 22:23:11 +01:00
parent 253a3d281d
commit 577890d89c
3 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
framework/core/js/src/common/components/Badge.tsx
View File

@@ -28,7 +28,7 @@ export default class Badge<CustomAttrs extends IBadgeAttrs = IBadgeAttrs> extend
view() { view() {
const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs; 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('&nbsp;'); const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');

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

@@ -1,5 +1,7 @@
import isDark from '../utils/isDark'; 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'; return isDark(hexcolor) ? 'text-contrast--light' : 'text-contrast--dark';
} }

6
framework/core/less/common/scaffolding.less
View File

@@ -176,4 +176,10 @@ blockquote ol:last-child {
--contrast-color: var(--text-on-dark); --contrast-color: var(--text-on-dark);
color: var(--contrast-color); 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);
}
} }