Skip to content

feat: Refresh DoodleUI typography foundation BED-9082 - #3067

Draft
justin-prime1 wants to merge 2 commits into
mainfrom
feature/doodleui-typography-foundation
Draft

feat: Refresh DoodleUI typography foundation BED-9082#3067
justin-prime1 wants to merge 2 commits into
mainfrom
feature/doodleui-typography-foundation

Conversation

@justin-prime1

@justin-prime1 justin-prime1 commented Jul 28, 2026

Copy link
Copy Markdown

Summary

  • replace the DoodleUI heading family with Nunito Sans and the body/UI family with Figtree
  • apply the approved H1-H6, body, subtitle, and caption metrics
  • use the semantic muted-text token for Body1, Body2, and Caption in light mode while preserving dark-mode behavior
  • update typography documentation, Storybook examples, component defaults, and automated mapping tests
  • preserve the existing public Typography API and provide the workspace dependency consumed by the BHCE and BHE adoption work

Jira

BED-9082: Update typography foundations in DoodleUI

Validation

  • just prepare-for-codereview
  • DoodleUI test suite: 90 tests passed
  • DoodleUI production build
  • shared UI tests and production build
  • representative browser checks for headings, multiline body text, captions, dense content, long strings, responsive widths, dark-mode regression, and blocked-webfont fallback

Notes

  • Font files are supplied by the existing Fontsource/Yarn offline-cache approach.
  • Roboto Mono remains available for code-oriented content.
  • Theresa's review of the prepared representative screenshots remains the final UX acceptance step.

Summary by CodeRabbit

  • New Features

    • Refreshed typography with Figtree for body text and Nunito Sans for headings.
    • Added updated typography variants, wrapping behavior, muted text colors, and dark-mode styling.
    • Added Storybook examples for long text, dense lists, and card compositions.
    • Added text-muted as an alias for the existing light text color.
  • Bug Fixes

    • Improved semantic heading rendering and typography consistency in cards and dialogs.
  • Documentation

    • Updated typography setup, usage guidance, and migration notes.

@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: d202d555-1dfe-4cf7-b992-362e2b2de196

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

The doodle-ui typography system now uses Figtree and Nunito Sans, updated Tailwind tokens and variant mappings, shared typography styles in Card and Dialog, expanded Storybook examples, and corresponding tests and documentation.

Changes

Typography visual language refresh

Layer / File(s) Summary
Font and token foundation
packages/javascript/doodle-ui/package.json, packages/javascript/doodle-ui/src/tailwind/*, packages/javascript/doodle-ui/.storybook/preview.tsx, packages/javascript/doodle-ui/README.md
Replaces Roboto dependencies and imports, updates font stacks, adds the text-muted token, and documents the new typography setup and migration details.
Typography variant mappings
packages/javascript/doodle-ui/src/components/Typography/Typography.tsx, packages/javascript/doodle-ui/src/components/Typography/Typography.test.tsx, packages/javascript/doodle-ui/src/tailwind/typography.test.ts
Updates variant metrics, colors, and wrapping classes, with tests covering mappings, font stacks, and muted text behavior.
Component typography adoption
packages/javascript/doodle-ui/src/components/Card/*, packages/javascript/doodle-ui/src/components/Dialog/*
Uses shared h3 and body2 typography variants in Card and Dialog components and adds semantic styling tests.
Story and example refresh
packages/javascript/doodle-ui/src/components/DataTable/*, packages/javascript/doodle-ui/src/components/Typography/Typography.stories.tsx
Removes Roboto-specific DataTable classes and adds Typography stories for long text, dense lists, and Card compositions.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested labels: enhancement, user interface, javascript

Suggested reviewers: thenando

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and accurately summarizes the main change: refreshing the DoodleUI typography foundation.
Description check ✅ Passed It includes a detailed summary, Jira link, validation, and notes, but the template’s Types of changes and Checklist sections are missing.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/doodleui-typography-foundation

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot added enhancement New feature or request javascript Pull requests that update javascript code user interface A pull request containing changes affecting the UI code. labels Jul 28, 2026
@justin-prime1
justin-prime1 marked this pull request as draft July 28, 2026 23:58

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/javascript/doodle-ui/README.md`:
- Around line 76-87: Update the two fenced code blocks in the README: tag the
dependency installation block with sh and the font import block with tsx (or
ts), preserving their contents.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 1ab2b2a2-2a94-4ad1-b4e4-c6f769076de6

📥 Commits

Reviewing files that changed from the base of the PR and between 1634f0e and d18c4cd.

⛔ Files ignored due to path filters (4)
  • .yarn/cache/@fontsource-figtree-npm-5.3.0-b25258c461-d1899a45cb.zip is excluded by !**/.yarn/**, !**/*.zip
  • .yarn/cache/@fontsource-nunito-sans-npm-5.3.0-dc8ab0f7ed-4ffde59fb0.zip is excluded by !**/.yarn/**, !**/*.zip
  • .yarn/cache/@fontsource-roboto-npm-5.2.10-7b0c25dd7f-2fc9e9db66.zip is excluded by !**/.yarn/**, !**/*.zip
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (15)
  • packages/javascript/doodle-ui/.storybook/preview.tsx
  • packages/javascript/doodle-ui/README.md
  • packages/javascript/doodle-ui/package.json
  • packages/javascript/doodle-ui/src/components/Card/Card.test.tsx
  • packages/javascript/doodle-ui/src/components/Card/Card.tsx
  • packages/javascript/doodle-ui/src/components/DataTable/DataTable.stories.tsx
  • packages/javascript/doodle-ui/src/components/DataTable/StorybookExample/ExampleDataTable.tsx
  • packages/javascript/doodle-ui/src/components/Dialog/Dialog.test.tsx
  • packages/javascript/doodle-ui/src/components/Dialog/Dialog.tsx
  • packages/javascript/doodle-ui/src/components/Typography/Typography.stories.tsx
  • packages/javascript/doodle-ui/src/components/Typography/Typography.test.tsx
  • packages/javascript/doodle-ui/src/components/Typography/Typography.tsx
  • packages/javascript/doodle-ui/src/tailwind/plugin.ts
  • packages/javascript/doodle-ui/src/tailwind/preset.ts
  • packages/javascript/doodle-ui/src/tailwind/typography.test.ts

Comment on lines 76 to 87
```
yarn add @fontsource/roboto
yarn add @fontsource/figtree @fontsource/nunito-sans
```

Then import the font in your entrypoint:
Then import the required weights in your entrypoint:

```
import '@fontsource/roboto/400.css';
import '@fontsource/figtree/400.css';
import '@fontsource/figtree/500.css';
import '@fontsource/nunito-sans/600.css';
import '@fontsource/nunito-sans/700.css';
```

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add language tags to the new fenced code blocks.

The two new fences trigger markdownlint MD040. Use sh for the installation block and tsx (or ts) for the import block.

Proposed fix
-```
+```sh
 yarn add `@fontsource/figtree` `@fontsource/nunito-sans`

Then import the required weights in your entrypoint:

- +tsx
import '@fontsource/figtree/400.css';

</details>

<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion

🧰 Tools
🪛 markdownlint-cli2 (0.23.1)

[warning] 76-76: Fenced code blocks should have a language specified

(MD040, fenced-code-language)


[warning] 82-82: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/javascript/doodle-ui/README.md` around lines 76 - 87, Update the two
fenced code blocks in the README: tag the dependency installation block with sh
and the font import block with tsx (or ts), preserving their contents.

Source: Linters/SAST tools

@TheNando
TheNando force-pushed the feature/doodleui-typography-foundation branch from d18c4cd to 80b0f9d Compare August 18, 2026 17:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request javascript Pull requests that update javascript code user interface A pull request containing changes affecting the UI code.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants