Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

design system: Convert to CSS variables #1

Open
1 task
alcpereira opened this issue Feb 24, 2024 · 1 comment
Open
1 task

design system: Convert to CSS variables #1

alcpereira opened this issue Feb 24, 2024 · 1 comment
Labels

Comments

@alcpereira
Copy link
Owner

Description

To change any spacing/color/etc, it's currently needed to go into the component themselves. With the introduction of the templates/themes, the only viable way would be to have CSS variables.

Note: This might be broken down into several PRs/Issues.

Example:

.bubble {
  border: 1px solid var(--light-grey);
}

should become

.bubble {
  border: var(--bubble-border);
}

with

:root {
  /* Main colors first*/
  --color-700: rgb(94, 90, 94);
  
  --bubble-border: 1px solid var(--color-700);
}

(Color variables naming will change with this issue)

Acceptance criteria

  • Every hardcoded values that could be part of a design system (borders, gaps, padding, colors, etc.. almost everything minus the alignments like flex) should be converted to CSS variables
@flufynarwhal
Copy link
Contributor

I can work on this starting on Monday.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants