Twitter | Search | |
Brent Jackson
I would love to see more standardization around how theming is handled in React so I started a theme specification (which isn't coupled to Styled System). Tell me what's missing or why you wouldn't adopt something like this
Style props for rapid UI development
Brent Jackson Brent Jackson @jxnblk
Reply Retweet Like More
Davo Galavotti ⚛️ Mar 18
Replying to @jxnblk
Have you checked the Style Properties format from style-dictionary?
Reply Retweet Like
Kristo Jorgenson Mar 18
Replying to @jxnblk
What do you think about having color intents like a material design palette so that you are tying components to intents not a specific color? I hate refactoring colors.tomatoRed to colors.fireRed
Reply Retweet Like
Brent Jackson Mar 18
Replying to @pixelbeat
Don’t think I’ve seen this but will check it out thanks!
Reply Retweet Like
Darin Dimitroff Mar 18
Replying to @jxnblk
Something I’m still unsure about is storing component variants in themes. Still find it more brittle compared to having a BaseButton component that I extend or something similar.
Reply Retweet Like
Brent Jackson Mar 18
Replying to @jesus__kristo
This spec intentionally avoids color abstractions (because they are wildly complex) so your example *should* work – colors can be whatever shape you want
Reply Retweet Like
Kristo Jorgenson Mar 18
Replying to @jxnblk
I guess it’s that complexity I’m hoping to standardize / deal with
Reply Retweet Like
Brent Jackson Mar 18
Replying to @deezel
Yeah I would be okay ditching that part of the general spec. It’s mostly documented now because Styled System supports it
Reply Retweet Like
Brent Jackson Mar 18
Replying to @jesus__kristo
I would love a complementary spec just for colors – I feel like that’ll be far more difficult for people to agree upon as a standard though
Reply Retweet Like
Darin Dimitroff Mar 18
Replying to @jxnblk
Don’t get me wrong, it’s useful and kind of eases the transition from older, heavier themes for some people. Just not as foundational as the other stuff for me.
Reply Retweet Like
Brent Jackson Mar 18
Replying to @deezel
Agreed
Reply Retweet Like
David Corbacho Mar 18
Replying to @jxnblk @gatsbyjs
Array-index values is too cryptic and not friendly DX
Reply Retweet Like
Brent Jackson Mar 18
Replying to @dcorbacho @gatsbyjs
Arrays are optional here. They are all objects
Reply Retweet Like
Rob Gordon Mar 18
Replying to @jxnblk
Different designs will call for different encodings of their tokens. Having a library of techniques to mix and match seems ideal. That said, the design system I’m working on now looks a lot like yours 😏
Reply Retweet Like
Jay 🌲 Mar 18
Replying to @jxnblk
One big question I have with theming is to what extend is theming a prefixed API vs. extendable? Since theming is runtime you miss out on prop types / typings in code and docs with highly configurable themes.
Reply Retweet Like
Andy Ford ෴ Mar 18
Replying to @jxnblk
Off-topic: I love styled-system but ran into a problem trying to use the ‘color’ prop in TypeScript since ‘color’ is a native HTML attribute. Any known workaround?
Reply Retweet Like
Matt Pocock Mar 19
Replying to @jxnblk
Box shadows!
Reply Retweet Like
Dylan Broadbridge Mar 19
Replying to @jxnblk
Is there a way to control all your scales by using a single scale value? Like choosing 1.333 sets that rythme for all your spacing, font sizes etc. I like it more than setting arbitrary values but have no idea how to make it work.
Reply Retweet Like
Brent Jackson Mar 19
Replying to @d_broadbridge
You could absolutely use functions to create this sort of data structure. This spec doesn’t tell you how to do that sort of thing though
Reply Retweet Like
Brent Jackson Mar 19
Replying to @mpocock1
There is `shadows` which is meant for text and box shadows, does that not work?
Reply Retweet Like