feat(eds-demo): 💄 Implement Typography System

[pomfrida]

resolves https://github.com/equinor/design-system-internal/issues/205

This PR implements the EDS 2.0 typography system based on the approach from the CodePen example (found in the task), using data-attribute driven sizing and space toggle CSS techniques.

What's Implemented

Typography Component (Typography.tsx)

• React component with props for size, lineHeight, baselineAligned, weight, and as (HTML element)
• Supports full scale from xs (10.5px) to 6xl (37px)
• Preset components: Heading, Body, Caption, Label, Strong
• Uses Inter font family
• Dashboard.tsx - Heading "People" uses Typography
• Tab.tsx - Tab component uses Typography
• Cleaned up duplicate CSS files in dynamic + static

Typography CSS System (typography.css)

• Data-attribute driven sizing (data-font-size, data-line-height, data-not-baseline-aligned)
• Space toggles based CSS custom properties system for conditional logic
• Baseline grid text alignment with text-box: trim-both ex alphabetic
• Ratio-based padding calculations for optical alignment
• Font weights from EDS tokens: lighter (300), normal (400), bolder (500)

Components Updated

• Button.tsx - PrimaryButton and SecondaryButton now use Typography
• DataTable.tsx - Table headers and cell content use Typography
• TopBar.tsx - Subtitle uses Typography
• Base components (TableHeader, Tab) - Removed hardcoded typography wrappers to allow Typography component usage

Testing Notes

Typography has been verified against Figma designs for font sizes, weights, and line heights. The space toggle system and baseline alignment features work as expected in supporting browsers.

[Copilot]

Pull Request Overview

This PR implements the EDS 2.0 typography system using a CSS data-attribute driven approach with space toggle techniques for conditional styling. The implementation provides comprehensive typography scaling from xs (10.5px) to 6xl (37px) with baseline grid alignment and ratio-based padding calculations for optical alignment.

• Typography system with full scale support and baseline alignment
• Data-attribute driven sizing system using CSS custom properties
• Component updates to use the new Typography component across the demo app

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/eds-demo/src/app/typography.css	New comprehensive CSS typography system with data-attribute driven sizing
packages/eds-demo/src/app/globals.css	Import typography CSS and update base styling
packages/eds-demo/src/app/_components/Typography.tsx	New React Typography component with preset components
packages/eds-demo/src/app/_components/index.tsx	Remove hardcoded typography wrapper from TableHeader
packages/eds-demo/src/app/_components/TopBar.tsx	Update to use Typography component
packages/eds-demo/src/app/_components/DataTable.tsx	Replace hardcoded typography with Typography component
packages/eds-demo/src/app/_components/Dashboard.tsx	Update heading to use Typography component
packages/eds-demo/src/app/_components/Button.tsx	Update buttons to use Typography component
packages/eds-demo/src/app/_components/ActionButton.tsx	Add Typography component usage
packages/eds-demo/src/app/(exercise)/static/exercise/styles.module.css	Remove duplicate CSS file
packages/eds-demo/src/app/(exercise)/dynamic/exercise/styles.module.css	Remove duplicate CSS file
.vscode/settings.json	Add eds-demo to workspace folders

Comments suppressed due to low confidence (1)

packages/eds-demo/src/app/_components/Typography.tsx:1

• The CSS property value should be 'cap' instead of 'ex' to match the comment on line 215 which states 'trim-both cap alphabetic'.

import { ReactNode, HTMLAttributes, CSSProperties } from "react";

[torleifhalseth]

The styles.module.css in the static and dynamic exercise folder is used for demo/tutorial purpose and should be removed.

[torleifhalseth]

Awesome with all these preset components. This is what our users want. 🎖️

[vnys]

…at least Fusion and Amplify 😉 They have asked specifically for a more opinionated typography component, but I assume others would chime in as well if we ask them. We need to ensure we have the same in Figma and Code though, so I suggest you and @eddiman or @alexlvrs start looking at that @pomfrida once we get the colours out the door.

[torleifhalseth]

Really nice interface/type using Omit from the base type.

[vnys]

Couple of minor changes required. I see that @millus has already implemented the CDN for the fonts, so no need to do anything about that.

[vnys]

…at least Fusion and Amplify 😉 They have asked specifically for a more opinionated typography component, but I assume others would chime in as well if we ask them. We need to ensure we have the same in Figma and Code though, so I suggest you and @eddiman or @alexlvrs start looking at that @pomfrida once we get the colours out the door.