Skip to content

Conversation

@torleifhalseth
Copy link
Collaborator

@torleifhalseth torleifhalseth commented Oct 20, 2025

This pull request introduces a new, next-generation typography system for the design system’s React components, including new Heading, Paragraph, and TypographyNext components. It also updates the build system and documentation to support and promote these new components, while marking the old typography component as deprecated. The changes improve performance, accessibility, and developer experience by providing more semantic, flexible, and maintainable typography options.

New Typography System

  • Added new semantic typography components:
    • Heading: For semantic heading elements (h1h6) with design system styles. (Heading.tsx, Heading.types.ts, Heading.stories.tsx) [1] [2] [3]
    • Paragraph: For block-level paragraph text with UI font family. (Paragraph.tsx, Paragraph.types.ts, Paragraph.stories.tsx) [1] [2] [3]
    • TypographyNext: For flexible, inline text with full control over typography properties and baseline grid alignment. (Typography.new.tsx, Typography.new.stories.tsx) [1] [2]
  • Updated and expanded documentation and Storybook stories for all new components, including migration guides and usage examples. (README.md, Typography.docs.mdx, Typography.new.stories.tsx, Heading.stories.tsx, Paragraph.stories.tsx) [1] [2] [3] [4] [5]

Deprecation and Migration Guidance

  • Marked the old Typography component as deprecated and provided clear migration instructions to the new system in both documentation and Storybook. [1] [2]

Build and Style System Updates

  • Updated the build pipeline to extract and bundle style.css for the new typography system, and exposed it via package exports for easy import. (rollup.config.js, package.json) [1] [2] [3]
  • Added required PostCSS and postcss-import configuration for CSS processing. (rollup.config.js, package.json) [1] [2]
  • Ensured Storybook and package consumers import the new stylesheet for correct typography rendering. (preview.css, preview.mjs, .storybook/main.mjs) [1] [2] [3]

Miscellaneous

  • Added new vocabulary to VSCode settings for improved spellchecking. (.vscode/settings.json)
  • Minor config and dependency updates for test and build tooling. (vitest.config.ts, package.json) [1] [2]

These changes set the foundation for a more robust, accessible, and future-proof typography system in the design system library.

@torleifhalseth torleifhalseth marked this pull request as ready for review October 22, 2025 08:29
@torleifhalseth torleifhalseth requested a review from vnys as a code owner October 22, 2025 08:29
Copy link
Collaborator

@pomfrida pomfrida left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on the new typography system @torleifhalseth ! ✨
Really liked theuseDeprecationWarning hook, that's very nifty

@torleifhalseth torleifhalseth merged commit b2130c6 into main Oct 24, 2025
10 checks passed
@torleifhalseth torleifhalseth deleted the feat/thalse-typography branch October 24, 2025 11:42
@github-actions github-actions bot mentioned this pull request Oct 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(eds-core-react): Create base typography component and the opinionated components

3 participants