So, how do colors work now? The first thing that we did was realize that, hey, every design system will commonly have a color palette. These palettes will include a number of base colors with lighter and darker shades. So the first thing we did was implement this palette without worrying about the theme. The next thing we did was then use this palette to define the colors within our theme. And the names that we gave each of our colors was very context-driven.
So, for example, we had CardPrimaryBackground and ButtonPrimaryBackground. This scenario made it very easy for us to add new colors to the palette, modify colors in our palette and change the implementation of that palette for a very specific context without worrying about any ripple effects that it might have across the app. This made it very easy to introduce new colors as well and just keep an overall well-managed state with regards to colors.
Spacing became a lot easier when we implemented a number multiplication system. We chose one specific number and all of our spacing essentially just followed multiples of that spacing number. With regards to naming, we used a T-shirt-style naming convention, so we had small, medium, large, XL. This is pretty nice because you can easily extend this to add smaller and larger spacing numbers using the X notation. So you could implement double XL or XS for a smaller spacing measurement.
Restyle also provides two predefined components called Box and Text. We realized that the default View and Text components just weren't the best starting points, so we need to override these with the Text and Box components. These utilize the theme right off the bat. You can pass in Style properties using Props to the Text and Box components. Color properties and measurement properties all map to values you've provided in your theme. You can also pass in a Text variant to apply a predefined Text style that you'll have defined in your theme. The Box provides a similar experience to the Text component but adds a number of additional props for padding, margin, alignments, and borders.
How do we tackle Dark mode now? It's super simple. The first thing we need to do is build a new theme based off of the default theme. The only thing we're doing here is overriding the colors that we need to change for our Dark mode theme. The next thing we need to do is find a way to be able to store that value someplace and toggle the value back and forth. In this case I'm using a UState hook to set the Dark mode value. Based on that value we pass in DarkTheme or Theme to the theme provider. And that's literally it. Your restyle components now automatically adjust to accommodate the current theme.
The dev experience for this entire process is also super awesome since this is all backed by TypeScript. As you're developing your app, as you're styling things, things automatically auto-complete and you get all the other benefits that TypeScript provides. There's a number of other features that we didn't get a chance to talk about today so I highly recommend checking out the project on GitHub. Thanks so much for having me today and for listening, check out restyle on GitHub and Shopify's career page if you're looking for a new gig. Thanks so much.
Comments