CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TalwindCSS Update #10

Merged
an.di merged 10 commits from adilallo/TailwindCSSUpdate into adilallo/component/RuleStack 2025-08-23 23:20:25 +00:00
Conversation 0 Commits 10 Files Changed 20
+1220 -206
an.di commented 2025-08-23 23:12:21 +00:00
Owner
Copy Link
Copy Source

Update Design Token System and Font Optimization

Overview

This PR implements a comprehensive design token system using Tailwind CSS v4, optimizes font loading, and ensures consistent typography across all components. The changes establish a single source of truth for design values and resolve font weight conflicts.

Changes

  • Design Token System: Added complete design token system in app/tailwind.css with spacing, colors, typography, shadows, and border radius tokens
  • Font Loading Optimization: Updated app/layout.js to load all required font weights (400, 500, 600, 700, 800) with display: "swap" for better performance
  • Typography Classes: Implemented typography utility classes that automatically handle font families and weights
  • Font Weight Conflicts: Resolved conflicts between typography classes and manual font weight overrides
  • Design Token Mapping: Ensured all Tailwind numeric classes correctly map to design tokens (e.g., p-8 = var(--spacing-scale-032))

Key Components Updated

  • HeroBanner.js: Updated border radius to use design token (rounded-[var(--spacing-scale-008)])
  • NumberedCards.js: Updated max-width to use design token (max-w-[var(--spacing-measures-max-width-lg)])
  • Footer.js: Updated spacing tokens and typography to use design tokens consistently

How to Test

  1. Run locally: npm run dev and verify all components render correctly
  2. Check typography: Verify font weights display properly (400, 500, 600, 700, 800) across all components
  3. Test responsive layout: Check all breakpoints (xsm, sm, md, lg, xl) maintain consistent spacing and typography
  4. Verify design tokens: Confirm spacing, colors, and border radius use design tokens consistently
  5. Font loading: Check browser dev tools to ensure all font weights load without fallbacks
  6. Storybook: Run npm run storybook to verify component stories display correctly
# Update Design Token System and Font Optimization ## Overview This PR implements a comprehensive design token system using Tailwind CSS v4, optimizes font loading, and ensures consistent typography across all components. The changes establish a single source of truth for design values and resolve font weight conflicts. ## Changes - **Design Token System**: Added complete design token system in `app/tailwind.css` with spacing, colors, typography, shadows, and border radius tokens - **Font Loading Optimization**: Updated `app/layout.js` to load all required font weights (400, 500, 600, 700, 800) with `display: "swap"` for better performance - **Typography Classes**: Implemented typography utility classes that automatically handle font families and weights - **Font Weight Conflicts**: Resolved conflicts between typography classes and manual font weight overrides - **Design Token Mapping**: Ensured all Tailwind numeric classes correctly map to design tokens (e.g., `p-8` = `var(--spacing-scale-032)`) ### Key Components Updated - **HeroBanner.js**: Updated border radius to use design token (`rounded-[var(--spacing-scale-008)]`) - **NumberedCards.js**: Updated max-width to use design token (`max-w-[var(--spacing-measures-max-width-lg)]`) - **Footer.js**: Updated spacing tokens and typography to use design tokens consistently ## How to Test 1. **Run locally**: `npm run dev` and verify all components render correctly 2. **Check typography**: Verify font weights display properly (400, 500, 600, 700, 800) across all components 3. **Test responsive layout**: Check all breakpoints (xsm, sm, md, lg, xl) maintain consistent spacing and typography 4. **Verify design tokens**: Confirm spacing, colors, and border radius use design tokens consistently 5. **Font loading**: Check browser dev tools to ensure all font weights load without fallbacks 6. **Storybook**: Run `npm run storybook` to verify component stories display correctly
an.di added 10 commits 2025-08-23 23:12:22 +00:00
Fix Storybook fonts a8f17cc6c7
Rule Stack Start a9557ddedf
Update Tailwind CSS ff14e39f21
Update NumberedCards.js 6f5279cf7d
Fix Section Header 8113658d8b
Update tailwind.css eb1bfcfe8d
Update SectionNumber.js a8efb34d63
Brand color changes d428bf0c09
Hero Banner tailwind changes 3c7f826f5e
Update tailwind fonts 76d747a557
an.di changed target branch from main to adilallo/component/RuleStack 2025-08-23 23:12:36 +00:00
an.di merged commit cf703c9322 into adilallo/component/RuleStack 2025-08-23 23:20:25 +00:00
an.di self-assigned this 2025-08-28 20:31:22 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#10
Delete Branch "adilallo/TailwindCSSUpdate"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?