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

Connect tailwind tokens #1

Merged
an.di merged 1 commits from adilallo/FigmaTokensSetup into main 2025-05-27 16:40:11 +00:00
Conversation 0 Commits 1 Files Changed 2
+265
an.di commented 2025-05-27 16:39:40 +00:00
Owner
Copy Link
Copy Source

Set Up Figma Token System with Supernova

Overview

This PR integrates the Figma design token system into the React project using Supernova.io. Supernova is connected directly to the CommunityRule Figma project and automatically exports a tailwind.css file containing all tokens (colors, spacing, typography, radii, etc.). This file is imported into globals.css and consumed across the app.

Changes

  • Added Supernova-managed tailwind.css file with design tokens
  • Integrated file into globals.css for global usage
  • Configured token-based theming (colors, spacing, typography, border radius, etc.)
  • Added custom breakpoints (manually appended, not generated by Supernova):
    • --breakpoint-xsm: 429px
    • --breakpoint-sm: 430px
    • --breakpoint-md: 640px
    • --breakpoint-lg: 1024px
    • --breakpoint-xl: 1440px
  • Reset default Tailwind config inside theme to ensure token-first styling

Notes

  • Supernova file should not be edited manually — but breakpoints have been added here for now.
    • Long term: migrate breakpoints into a separate config OR reapply them each time Supernova exports a new file.
  • Supernova is currently connected under a personal free account (limit: 1 team member).
    • A handoff process may be needed if additional collaborators are required.

How to Test

  1. Run the app and confirm design tokens are applied globally.
  2. Verify token-driven styles (colors, spacing, typography) match Figma definitions.
  3. Resize the browser window to confirm custom breakpoints are recognized.
  4. Check that tailwind.css is being imported through globals.css.

Screenshots

Screenshot 2025-08-19 at 11.40.19 PM.png Screenshot 2025-08-19 at 11.41.04 PM.png
# Set Up Figma Token System with Supernova ## Overview This PR integrates the **Figma design token system** into the React project using **Supernova.io**. Supernova is connected directly to the CommunityRule Figma project and automatically exports a `tailwind.css` file containing all tokens (colors, spacing, typography, radii, etc.). This file is imported into `globals.css` and consumed across the app. ## Changes - Added **Supernova-managed `tailwind.css`** file with design tokens - Integrated file into `globals.css` for global usage - Configured **token-based theming** (colors, spacing, typography, border radius, etc.) - Added **custom breakpoints** (manually appended, not generated by Supernova): - `--breakpoint-xsm: 429px` - `--breakpoint-sm: 430px` - `--breakpoint-md: 640px` - `--breakpoint-lg: 1024px` - `--breakpoint-xl: 1440px` - Reset default Tailwind config inside theme to ensure token-first styling ## Notes - **Supernova file should not be edited manually** — but breakpoints have been added here for now. - Long term: migrate breakpoints into a separate config OR reapply them each time Supernova exports a new file. - Supernova is currently connected under a **personal free account** (limit: 1 team member). - A **handoff process** may be needed if additional collaborators are required. ## How to Test 1. Run the app and confirm design tokens are applied globally. 2. Verify token-driven styles (colors, spacing, typography) match Figma definitions. 3. Resize the browser window to confirm **custom breakpoints** are recognized. 4. Check that `tailwind.css` is being imported through `globals.css`. ## Screenshots <img width="1065" alt="Screenshot 2025-08-19 at 11.40.19 PM.png" src="attachments/ac3254b4-b69d-40d8-bb7d-f171ecd7a6e1"> <img width="884" alt="Screenshot 2025-08-19 at 11.41.04 PM.png" src="attachments/e430c77d-474a-45a0-b0a2-95be0d37adc8">
Screenshot 2025-08-19 at 11.40.19 PM.png
302 KiB
Screenshot 2025-08-19 at 11.41.04 PM.png
400 KiB
an.di added 1 commit 2025-05-27 16:39:41 +00:00
Connect tailwind tokens d3ebf9853a
an.di self-assigned this 2025-05-27 16:39:58 +00:00
an.di merged commit f770b7d3b7 into main 2025-05-27 16:40:11 +00:00
an.di deleted branch adilallo/FigmaTokensSetup 2025-05-27 16:40:11 +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#1
Delete Branch "adilallo/FigmaTokensSetup"

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?