refactor(eds-core-react): migrate Banner.Message and Chip label off TypographyNext (#4984)

Removes the TypographyNext wrapper from both components and moves
typography directly into their CSS using --eds-typography-* tokens.

Banner.Message now renders a plain <p> with font-family, font-size, and
line-height set in banner.css. The old baseline="center" trimming was
unintentional for a wrapping paragraph and has not been carried forward.

Chip replaces TypographyNext and the data-font-family/data-font-size/
data-space-proportions attributes with explicit token overrides in
chip.css, preserving squished spacing, md icon size, and md gap-horizontal
so density responsiveness is fully retained.

Closes #4835
Closes #4836

Author: Chibuzor-Nwemambu

packages/eds-core-react/src/components/next/Banner/Banner.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react'
 import { close } from '@equinor/eds-icons'
-import { TypographyNext } from '../../Typography'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
 import type {
@@ -27,19 +26,13 @@ const BannerIcon = forwardRef<HTMLSpanElement, BannerIconProps>(
 const BannerMessage = forwardRef<HTMLParagraphElement, BannerMessageProps>(
   function BannerMessage({ className, children, ...rest }, ref) {
     return (
-      <TypographyNext
+      <p
         ref={ref}
-        as="p"
-        family="ui"
-        size="md"
-        baseline="center"
-        lineHeight="default"
-        tracking="normal"
         className={['eds-banner__message', className].filter(Boolean).join(' ')}
         {...rest}
       >
         {children}
-      </TypographyNext>
+      </p>
     )
   },
 )

packages/eds-core-react/src/components/next/Banner/banner.css

@@ -36,9 +36,18 @@
 
   .eds-banner__message {
     flex: 1;
+
     min-width: 0;
     margin: 0;
+
+    font-family: var(--eds-typography-ui-body-font-family);
+    font-size: var(--eds-typography-ui-body-md-font-size);
+    line-height: var(--eds-typography-ui-body-md-line-height-default);
     color: var(--eds-color-text-strong);
+
+    @supports (text-box: trim-both cap alphabetic) {
+      text-box: trim-both cap alphabetic;
+    }
   }
 
   .eds-banner__actions {

packages/eds-core-react/src/components/next/Chip/Chip.tsx

@@ -7,7 +7,6 @@ import {
 } from '@equinor/eds-icons'
 import type { ChipProps } from './Chip.types'
 import { Icon } from '../Icon'
-import { TypographyNext } from '../../Typography'
 
 export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   {
@@ -51,10 +50,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
       className={classes}
       data-variant={variant}
       data-color-appearance={tone}
-      data-font-family="ui"
-      data-font-size="md"
       data-selectable-space="sm"
-      data-space-proportions="squished"
       data-selected={selected || undefined}
       aria-pressed={toggleable ? selected : undefined}
       aria-expanded={dropdown ? selected : undefined}
@@ -65,16 +61,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
       {selected && !dropdown && !deletable && (
         <Icon data={check} aria-hidden className="icon" />
       )}
-      <TypographyNext
-        as="span"
-        className="label"
-        family="ui"
-        size="md"
-        lineHeight="squished"
-        baseline="center"
-      >
-        {children}
-      </TypographyNext>
+      <span className="label">{children}</span>
       {deletable && <Icon data={close} title="Remove" className="icon" />}
       {!deletable && dropdown && (
         <Icon

packages/eds-core-react/src/components/next/Chip/chip.css

@@ -1,9 +1,21 @@
 @layer eds-components {
   .eds-chip {
+    /* Replaces data-space-proportions="squished" — squished vertical spacing for sm selectable space */
+    --eds-spacing-proportions-sm-vertical: var(
+      --eds-spacing-inset-sm-vertical-squished
+    );
+
+    /* Replaces data-font-size="md" — sets icon size and gap tokens for md context */
+    --eds-typography-icon-size: var(--eds-sizing-icon-md);
+    --eds-typography-gap-horizontal: var(--eds-spacing-icon-md-gap-horizontal);
+
     /* Typography metrics — same compensation pattern as Button */
+    --_label-font-size: var(--eds-typography-ui-body-md-font-size);
     --_label-line-height: var(--eds-typography-ui-body-md-line-height-squished);
     --_label-height: round(1cap, 4px); /* Figma has a cap-rounded value but it is not exposed as a CSS token; 1cap gives the same result (Inter metrics + 4px grid) */
+    --_font-family: var(--eds-typography-ui-body-font-family);
     --_padding-block: var(--eds-selectable-space-vertical);
+
     /*
      * Reduce block padding by half the line-height overflow so the visual
      * height equals (padding × 2 + cap-height) instead of (padding × 2 + line-height).
@@ -28,7 +40,9 @@
     border: none;
     border-radius: var(--eds-spacing-border-radius-pill, 100vmax);
 
-    font: inherit;
+    font-family: var(--_font-family);
+    font-size: var(--_label-font-size);
+    line-height: var(--_label-line-height);
     color: inherit;
 
     transition:
@@ -105,15 +119,6 @@
   }
 }
 
-/*
- * Outside @layer to override typography.css [data-font-family] { display: block }.
- * data-font-family/data-font-size on the chip container establishes the typography
- * context for gap and icon sizing tokens.
- */
-.eds-chip {
-  display: inline-flex;
-}
-
 /*
  * Label needs inline-flex to center custom icons with text.
  * text-box: normal disables baseline trimming — chip handles sizing via