docs: rework design system documentation and configure tailwind-merge #430
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- **Design system documentation improvements:** - Removed excessive examples that didn't match actual components - Removed sections showing standard Tailwind features - Streamlined icon sizes, borders, and elevation docs - **Typography system updates:** - Changed CSS variables from `--font-family-*` to `--font-*` - Updated typography docs to show new two-part pattern (font-family + text-style) - Documented that composite text styles don't include font-family - Fixed all documentation references to use shorter variable names - **Tailwind-merge configuration:** - Added `COMMON_UNITS` constant for shared size tokens across design system - Configured icon sizes to conflict with w/h/size utilities - Configured text style composites to conflict with font-size utilities - Added configuration for borders, radius, elevation, and opacity tokens - **Icon component updates:** - Added semantic size-icon-* defaults to all icon components - Allows size overrides while maintaining consistent defaults - Small icons default to size-icon-sm, medium to size-icon-md, large to size-icon-lg 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
✅ Deploy Preview for frontile-next ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…m tokens - Add custom class groups to tailwind-merge for Frontile design tokens: - Icon sizes (size-icon-*) - Border widths (border-thin, border-heavy, border-aggressive) - Border radius (rounded-default, rounded-pill) - Elevation shadows (shadow-elevation-0 through shadow-elevation-5) - Opacity (opacity-hover, opacity-disabled) - Typography composite utilities (text-marquee-*, text-header-*, text-body-*, etc.) - Configure tailwind-variants via createTV to use custom twMerge config - Consolidate size constants into shared COMMON_UNITS array - Use shared twMergeConfig constant for both tailwind-merge and tailwind-variants - Add tw-merge template helper for using twMerge in templates - Fix TypeScript types using generic type argument and 'as const' 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Create single twMergeConfig constant with 'as const' for type safety - Use shared config in both extendTailwindMerge and createTV - Eliminates duplicate configuration definitions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR reworks the design system documentation to remove excessive examples and configures tailwind-merge for proper class conflict resolution across all design tokens.
Design System Documentation
Icon Sizes: Removed "Buttons with Icons", "List Items with Icons", "Input Fields with Icons" sections that showed component implementations not matching actual Frontile components. Added comprehensive "All Icon Sizes" section showing all 14 size variants.
Borders & Radius: Removed redundant sections ("Border Radius Examples", "Directional Border Utilities", "Directional Border Radius") that just demonstrated standard Tailwind features.
Elevation: Removed component-specific examples ("Dropdown Menus", "Modal Dialog", "Alert Notifications") and custom font classes. Kept only "Cards and Panels" and "Interactive States" sections.
Typography System Updates
Changed CSS variables from
--font-family-*to shorter--font-*format:--font-family-marquee→--font-marquee--font-family-header→--font-header--font-family-body→--font-bodyUpdated typography documentation to show the new two-part usage pattern:
Composite text styles (
text-header-md,text-body-lg, etc.) now set font-size, weight, spacing, and line-height but NOT font-family, providing more flexibility.Tailwind-Merge Configuration
Added comprehensive configuration in
packages/theme/src/tw.ts:Icon Component Updates
Updated all icon components with semantic
size-icon-*defaults:size-icon-smsize-icon-mdsize-icon-lgSizes can still be overridden via
...attributesspreading.Test Plan
🤖 Generated with Claude Code