github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-17 02:02:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: unreadable badge icon on certain colors (#3810)

Browse Source
This commit is contained in:
Sami Mazouz 2023-04-29 18:35:18 +01:00 committed by GitHub
parent af3f91ca5b
commit 7ebeb9c0a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import Tooltip from './Tooltip';
import Component, { ComponentAttrs } from '../Component';
import icon from '../helpers/icon';
import classList from '../utils/classList';
import textContrastClass from '../helpers/textContrastClass';
export interface IBadgeAttrs extends ComponentAttrs {
icon: string;
@ -27,7 +28,7 @@ export default class Badge<CustomAttrs extends IBadgeAttrs = IBadgeAttrs> extend
view() {
const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs;
const className = classList('Badge', [type && `Badge--${type}`], attrs.className);
const className = classList('Badge', [type && `Badge--${type}`], attrs.className, color && textContrastClass(color));
const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');

2
framework/core/less/common/Badge.less
View File

@ -4,7 +4,7 @@
height: var(--size);
border-radius: calc(~"var(--size) / 2");
background: var(--badge-bg);
color: var(--badge-color);
color: var(--contrast-color, var(--badge-color));
display: inline-flex;
align-items: center;
justify-content: center;