Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
super nit that all the copyrights need to be updated
|
🙈 Do they though? Haha we never update our other ones. |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'any' } |
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
Haha, I think we just do it when we notice. Though it really doesn't make much sense to me.
Anyhow, it looks pretty good, verified the story works. I like that you've managed to tie in some of the values with the actual variables
ktabors
left a comment
ktabors
left a comment
There was a problem hiding this comment.
This is just for limited user while we work on docs, right?
| { | ||
| "name": "@react-spectrum/style-macro-s1", | ||
| "private": true, | ||
| "version": "3.5.3", |
There was a problem hiding this comment.
it's private so won't be published for now. also versions get updated when we do releases.
| aria-label="Choose frequency" | ||
| selectionMode="single" | ||
| width="size-1200"> | ||
| <></> |
There was a problem hiding this comment.
TypeScript complained that children were required but there were none here.
|
|
||
| export function Example() { | ||
| return ( | ||
| <div className={style({backgroundColor: 'orange-500', color: 'black', fontSize: 'lg', paddingX: 8, paddingY: 4, borderRadius: 'default'})()}> |
There was a problem hiding this comment.
Do we need an example passing in variables that change, like hover, to show how that works and to see that it works?
| return `[light-dark(${color[light]}, ${color[dark]})]`; | ||
| } | ||
|
|
||
| const baseSpacing = { |
There was a problem hiding this comment.
Should we switch this to pixel instead of 4px grid?
There was a problem hiding this comment.
I don't think we have made that decision yet. This will all get updated
| const sizing = { | ||
| ...scaledSpacing, | ||
| auto: 'auto', | ||
| '1/2': '50%', |
There was a problem hiding this comment.
Can we remove factions and people use percentages directly like [50%]?
| '4/6': '66.666667%', | ||
| '5/6': '83.333333%', | ||
| full: '100%', | ||
| screen: '100vh', |
4 participants
This implements a macro to generate atomic spectrum styles at build time for Spectrum 1. It maps to our existing CSS variables so that the values change according to Provider settings like color scheme and scale. The package is currently intended to be a private implementation detail of our components but we might expose it at some point.
In order to do this, I also updated Parcel to v2.12 and typescript to 5.3.