Refactor/design tokens#372
Closed
mxrtins04 wants to merge 3 commits into
Closed
Conversation
Contributor
|
hey @mxrtins04, thanks for jumping in! closing this pr because the author needs to be assigned to the linked issue (#24) before opening a pr. please comment on the issue requesting assignment, wait to be assigned, then re-raise your pr. this keeps work fairly distributed across contributors. hope to see a revised pr from you soon! |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Closes #24
Introduces a CSS custom property token layer and migrates three components off inline hex, establishing the pattern for the remaining 70+ files.
src/styles/theme.css defines tokens under :root and .dark for surface, background, text, and brand color roles. Hardcoded values like rgba(201,152,58,...) are consolidated here.
src/styles/tailwind.css extends Tailwind with semantic utilities (bg-surface, text-brand, text-primary, border-subtle, etc.) mapped to the CSS vars.
RoleSwitcher.tsx replaces bg-[#1a1612] / bg-[#8b7d6b] and theme === 'dark' branches with semantic tokens. Same migration applied to Modal.tsx and ProjectCard.tsx.
ThemeContext.test.tsx covers toggle behaviour, .dark class application on the document root, and token resolution for both themes.
README.md gets a "Design tokens" section documenting the naming convention, how to add new tokens, and how to extend the Tailwind map.
ThemeContext.tsx toggle logic is untouched. No components outside the three listed are modified. No inline style props receive untrusted values. Styling-only change.