feat(base.css): add ruby element styles and typography demo

[Copilot]

Adds CSS styles for HTML ruby elements to support Japanese furigana annotations. Styles ported from freeCodeCamp main application's global stylesheet.

Changes

• Ruby styles in base.css:

  • p:has(ruby), li:has(> ruby): Adds vertical padding to improve readability when ruby elements are present
  • ruby: Sets base font size for ruby containers
  • rt: Sets smaller font size for ruby text (pronunciation guides)

• Typography Storybook demo: Created comprehensive typography showcase under "Design System/Typography" that demonstrates how base.css applies styles to all text elements including headings, paragraphs, links, lists, code blocks, blockquotes, form elements, and ruby annotations.

Implementation

p:has(ruby),
li:has(> ruby) {
	padding: 0.5rem 0;
}

ruby {
	font-size: 1.3rem;
}

rt {
	font-size: 0.9rem;
}

Uses rem units for proportional scaling with root font size, consistent with the source styles from freeCodeCamp/freeCodeCamp.

Storybook Demo

The Typography demo is available at src/typography/typography.stories.tsx and showcases all base.css typography styles in an interactive format.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add ruby styles to the base stylesheet</issue_title>
<issue_description>## Description

Add these styles https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/components/layouts/global.css#L42-L53 to https://github.com/freeCodeCamp/ui/blob/main/src/base.css.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add ruby styles to the base stylesheet #729

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[huyenltnguyen]

@copilot Please help create a Storybook demo for typography also.

You can create a src/typography/typography.stories.tsx and have the story listed under "Design System" (see color-system for reference). The Storybook demo should showcase how base.css applies styles to text elements.

[Copilot]

@copilot Please help create a Storybook demo for typography also.

You can create a src/typography/typography.stories.tsx and have the story listed under "Design System" (see color-system for re...

Created the Typography Storybook demo at src/typography/typography.stories.tsx under "Design System/Typography". The demo showcases all base.css typography styles including headings, paragraphs, links, lists, code blocks, blockquotes, labels, legends, and the newly added ruby annotations for furigana. (commit 663aeea)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/ui/ui/node_modules/.bin/../storybook/bin/index.cjs dev -p 6006 --no-open (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)