Beta badge inner visual alignment

packages/eui/changelogs/upcoming/8255.md

@@ -0,0 +1,2 @@
+- Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility
+

packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts

@@ -20,14 +20,18 @@ 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`
       display: inline-block;
       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: {