-
Notifications
You must be signed in to change notification settings - Fork 181
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
ideas for v2 and usage with Gatsby Themes & theme-ui #207
Comments
Very excited about this! Just expanding on the second and third points for clarity: Typography.js current generates a style object that is more inline with standard CSS syntax, with nested selectors and media queries. When using a library like Emotion, child selectors, pseudoclasses, and media queries tend to be nested within a single component's style object. I think it would be nice if the styles generated by Typography.js could support both style object shapes for different approaches. // current, more-CSS like object
styles: {
'ol, ul': {
listStylePosition: 'outside',
listStyleImage: 'none',
},
li: {
marginBottom: `calc(${blockMarginBottom} / 2)`,
},
'ol li, ul li': {
paddingLeft: 0,
}
} // style object that's easier to consume with CSS-in-JS components
styles: {
ol: {
listStylePosition: 'outside',
listStyleImage: 'none',
'li': {
paddingLeft: 0
},
},
ul: {
listStylePosition: 'outside',
listStyleImage: 'none',
'li': {
paddingLeft: 0
},
},
li: {
marginBottom: `calc(${blockMarginBottom} / 2)`,
}
} The second style object is a little more verbose but helps with style encapsulation, and would mean that theme-ui can ditch its style object transformation utility |
Hey all, going to finally get my PR merged for v2.
I'm talking to @jxnblk, @johno, and @fk about a possible v2 with better integration with https://github.com/system-ui/theme-ui
Some ideas in no particular order:
rem
topx
which should work but needs testedblockquote:last-child
andli > p
as these are hard to override in css-in-js as those tend to only style elementsThe text was updated successfully, but these errors were encountered: