Typography Page in Varbase Storybook to Use Bootstrap Utility Classes and Showcase (Text, heading, links, ...) Components [#3561315]

Problem/Motivation

The Typography page in Varbase Storybook is outdated and does not follow the latest design structure or Bootstrap typography utilities.
It also references missing components and relies on inline styles instead of Bootstrap utility classes.
The page must be rebuilt to align with Varbase design foundations and atomic components.

https://www.figma.com/design/shEqHupsCBTp2CmIiA84rv/VB---Stylesheet_2024...

Steps to reproduce

Open Varbase Storybook.
Navigate to the Typography page.
Observe missing components, inline styles, and incorrect layout.

Proposed resolution

Refactor the Typography Storybook page.
Structure content based on design: Typeface, Colors, Headings, Display, Body Text, Other Typography.
Remove all inline styles and replace them with Bootstrap 5.3.8 typography utilities.
Use Varbase atom components (heading, link) with correct include() syntax.
Ensure the page builds correctly in Storybook JSON.

Remaining tasks

✅ File an issue about this project
✅ Addition/Change/Update/Fix to this project
✅ Testing to ensure no regression
➖ Automated unit/functional testing coverage
➖ Developer Documentation support on feature change/addition
➖ User Guide Documentation support on feature change/addition
✅ UX/UI designer responsibilities
✅ Accessibility and Readability
✅ Code review from 1 Varbase core team member
✅ Full testing and approval
✅ Credit contributors
✅ Review with the product owner
✅ Update Release Notes and Update Helper on new feature change/addition
✅ Release varbase-10.1.0, vartheme_bs5-4.0.2

Varbase update type

✅ No Update
➖ Optional Update
➖ Forced Update
➖ Forced Update if Unchanged

User interface changes

API changes

Data model changes

Release notes snippet

feat: #3561315 Typography Page in Varbase Storybook to Use Bootstrap Utility Classes and Showcase (Text, heading, links, ...) Components

Comment	File	Size	Author
#4	VB-Stylesheet_2024-–-Figma-12-03-2025_12_45_PM.png	259.99 KB	rajab natshah
#3	loop-template-prompt.md	5.36 KB	rajab natshah
#3	session-summary-typography-refactor.md	7.79 KB	rajab natshah
#3	user-prompts-log.md	3.03 KB	rajab natshah
#3	ai-agent-prompt-template.md	7.73 KB	rajab natshah
	Foundation-Typography-Typography-⋅-Storybook-12-03-2025_06_48_PM.png	845.62 KB	rajab natshah

Comments

Comment #1

3 December 2025 at 17:25

rajab natshah created an issue. See original summary.

Comment #2

3 December 2025 at 17:28

rajab natshah committed 97d9f1cc on 4.0.x

feat: #3561315 Typography Page in Varbase Storybook to Use Bootstrap...

Comment #3

rajab natshah

he/him

commented 3 December 2025 at 17:50

Status	File	Size
new	ai-agent-prompt-template.md	7.73 KB
new	user-prompts-log.md	3.03 KB
new	session-summary-typography-refactor.md	7.79 KB
new	loop-template-prompt.md	5.36 KB

It feels like a starting point for an @agent-component-storybook-creator AI Agent
about 30m then I got this ready

claude --permission-mode bypassPermissions """
Implement this design from Figma:
@https://www.figma.com/design/shEqHupsCBTp2CmIiA84rv/VB---Stylesheet_2024?node-id=6618-2619&m=dev

Target path: /var/www/html/dev/v10x01b1typography/docroot/themes/contrib/vartheme_bs5/components/foundation/typography

Requirements:
- Do not add any custom SCSS or CSS files
- This is a storybook component only for foundation display
- Follow the same pattern as colors component
- Use direct HTML with Bootstrap utility classes and inline styles

Tasks:
1. Create the component structure
2. Run: ddev yarn storybook:gen && ddev yarn storybook:build
3. Create Playwright tests in tests/e2e/typography.spec.js
4. Keep in a loop from 1-6 until no errors and implemented
5. Run: ddev drush cr
6. List all prompts in an .md file

Reference: Look at /var/www/html/dev/v10x01b1typography/docroot/themes/contrib/vartheme_bs5/components/foundation/colors for the correct implementation pattern.
"""

Then