StackExchange / StackExchange/Stacks
Switch from Less variables to CSS variables for design tokens
Open
Nobody has claimed this yet.
enhancement
- Dominant language
- TypeScript
- Stars
- 672
- Forks
- 107
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 26
Description
Since we've converted colors to CSS variables, our other design tokens, spacing, sizing, etc, can be converted to CSS variables. This will allow Stacks to more easily ship various spacing density themes, and could shift more to the client like font sizes, etc.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the existing Less variables and the CSS variables already used for colors. Review how spacing, sizing, and other design tokens are consumed before deciding the conversion scope; done means those tokens use CSS variables and can support the proposed spacing-density themes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100