-
Notifications
You must be signed in to change notification settings - Fork 253
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
feat: Optional token scale prefix #989
Conversation
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 1375f91:
|
I understand the config flag is optional, but since the config is global, it's gonna break cases when you need to access other scales from within CSS properties? This example is super incorrect, it's just to show the cases when you need access to scales: $$size: 'calc($scales$md - 200px)',
width: 'calc($scales$md - 200px)',
background: 'linear-gradient(to left, $colors$my-pink, #333 $$size)', Some would argue that magical mapping might not be the best for consistency (I love it though). |
Oh well, this is a good point of view. We suggested this new feature because we want to write the entire token when writing the CSS styles. i.g. export const { styled, css, config, theme, createTheme } = createStitches({
prefix: "dy",
theme: {
colors: {
"my-pink": "#FFBDC9"
},
sizes: {
md: "400px",
200: "800px"
}
},
}); so, the injected CSS variable is: and we want to write the CSS style like this: $$size: 'calc($dy-sizes-md - 200px)',
width: 'calc($dy-sizes-200 - 10px)',
background: 'linear-gradient(to left, $dy-colors-my-pink, #333 $$size)', If there was such a feature that allowed to write the token completely? You can help us? |
@lcoalves Thanks for your contribution but unfortunately, we can't merge this feature for the reason @LexSwed outlined. Gonna close this issue but again thank you so much ❤️ |
This PR adds the ability to remove scale from CSS variables.
i.g.:
Currently:
Proposed feature: