diff --git a/packages/eui/changelogs/upcoming/8255.md b/packages/eui/changelogs/upcoming/8255.md new file mode 100644 index 00000000000..f2df8d8351b --- /dev/null +++ b/packages/eui/changelogs/upcoming/8255.md @@ -0,0 +1,2 @@ +- Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility + diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 625e21d99a5..32c1f4a5026 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -20,6 +20,10 @@ import { euiBadgeColors } from '../color_utils'; export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, colorMode } = euiThemeContext; const badgeColors = euiBadgeColors(euiThemeContext); + const badgeSizes = { + m: euiTheme.size.l, + s: mathWithUnits(euiTheme.size.base, (x) => x * 1.25), + }; return { euiBetaBadge: css` @@ -27,7 +31,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { border-radius: ${euiTheme.size.l}; cursor: default; - font-weight: ${euiTheme.font.weight.bold}; + font-weight: ${euiTheme.font.weight.semiBold}; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; @@ -53,19 +57,23 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { // Font sizes m: css` font-size: ${euiFontSizeFromScale('xs', euiTheme)}; - line-height: ${euiTheme.size.l}; + line-height: ${badgeSizes.m}; `, s: css` - font-size: 0.625rem; - line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)}; + font-size: 0.7rem; + line-height: ${badgeSizes.s}; `, // Padding/width sizes badgeSizes: { default: { m: ` - ${logicalCSS('padding-horizontal', euiTheme.size.base)}`, + ${logicalCSS('height', badgeSizes.m)} + ${logicalCSS('padding-horizontal', euiTheme.size.base)} + `, s: ` - ${logicalCSS('padding-horizontal', euiTheme.size.m)}`, + ${logicalCSS('height', badgeSizes.s)} + ${logicalCSS('padding-horizontal', euiTheme.size.m)} + `, }, // When it's just an icon or a single letter, make the badge a circle circle: {