React Finland

React Finland 2021

Zero-runtime CSS-in-TypeScript with vanilla-extract

Mark Dalgleish

A thorough analysis of CSS-in-JS

Andrei Pfeiffer

Rethinking CSS - Introducing Stylex

Naman Goel

React Summit Remote Edition

React Summit Remote Edition 2020

Styles and Theming with Restyle in React Native

Hi, folks. My name is Haris Mahmoud. I'm a senior engineer at Shopify based in Toronto, Canada. I work specifically on the client team on the Arrive app. It's an app that helps keep track of all of your online orders. I also run an online store called Rapid Supply, which sells apparel, pins, stickers, and accessories for developers and other tech enthusiasts. So today we'll be chatting about styles and theming in React Native from the perspective of the Arrive app and the experiences that I gained while working on the app. The Arrive app is 95% React Native, with the remaining portions relying on a couple of native modules for both iOS and Android. I'll be talking about some of the main problems that we faced when it came to theming and styling for the app and how our Restyle library helps solve those problems. The first issue that we came across revolved around managing colors. Colors are notoriously hard to name. They're hard to keep track of. They became super hard to maintain as more and more colors got added or old colors need to be adjusted to meet changing needs for the app. The second issue revolved around managing font styles. First of all, we had far too much code duplication throughout the app. We needed to write down multiple different style declarations for every single text component that we had in our app. This required far too much code all over the place and became super hard to manage. One of the first things we did there was to try and simplify this, is to build out a font styles object that defines some of our default font styles, and then implement those and use those as necessary for the different text components throughout our app. This worked okay, but we started to run into issues when, for example, we'd have a new font style that was exactly the same as one that existed, but had one small change. So we weren't sure whether we needed to introduce a brand new font style or use the font style that we already have with one override. And the second problem that we had was trying to figure out then how broad or specific the font styles needed to be. Was body far too generic? Was call to action far too specific? In the latter scenario, if we came across a situation where we needed to use the exact same font style that call to action already implemented, but it was for something that wasn't a call to action, we didn't know whether we needed to refactor the entire code base to accommodate a renamed call to action font style, or just use it as is and kind of deal with the awkward consequences of losing some of that consistency. Dark mode and theming is obviously a huge portion of mobile apps, and we knew that we wanted to implement and tackle dark mode, but we already had a number of issues with regards to themes, with regards to colors and font styles. And the thought of adding more colors and more font style alternatives just didn't seem like the right approach when we already had problems that we were trying to figure out. So this is sort of where Restyle comes into play. Restyle is an open source library. It provides a type enforced system for building UI components powered by TypeScript. Its themability is baked right in from the get go. So if and when you decide to implement dark mode or a theme, it's extremely trivial and easy to do so. I'm going to walk you through some of the best practices or concepts that come about through Restyle and how they solved the problems that we had while working on Arrive. Restyle expects you to have a defined theme. This is a global theme object with a set of values for colors, spacing, breakpoints, and a number of other things. This theme is then used by passing into the theme provider using the theme prop. 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 card primary background and button primary background. 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 a 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 sizing or spacing numbers using the X notation. So you could implement double XL or XS for a smaller spacing measurement. Resell 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 needed to override these with the text and box components. These utilize the theme right off the bat. So you can pass in style properties using props to the text and box components. Color properties and measurement properties all map to values that 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. So how do we tackle dark mode now? It's super, 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. So in this case, I'm using a use state hook to set the dark mode value. Based on that value, we pass in dark theme 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 autocomplete 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. Thanks for listening.


Haris Mahmood

React Summit

React Summit 2020

Theming Gatsby Apps with Theme UI

♪ Hey everyone, welcome to theming Gatsby apps with theme UI. I am Paris Chandler. I am on the developers success team at G2I. I'm a front end developer. I'm creator of Black Tech Twitter and founder of Black Tech Pipeline. So getting into it, first things first, what's Gatsby? It's a React-based framework that allows developers to quickly build up static websites and applications. And installing it is super simple. It takes three commands. You install the Gatsby CLI, create a Gatsby project, spin up your site with Gatsby develop, and then you can access your new site on localhost 8000. It's as simple as that. So the first thing you'll see is this landing page. And the cool thing about this is that these pages are optimized for SEO performance and accessibility. And it comes with a lot of configurations under the hood that you won't need to set up yourself. Now getting into it, what is theme UI? Theme UI is a styling library that allows developers to configure designs for components by giving them predefined values in a shared object. And the developers of theme UI call this constraint-based design principles. In my own words, theme UI is a template for configurable reusable styles that will help to build styling systems for your projects. These are once again super easy to install. So you just install the theme UI Gatsby plugin, add it to your plugins array, create an SRC folder, and within that create your Gatsby plugin theme folder, and within that create an index.js file. Then you can export your theme UI object into that. Sorry. So this is an example of a theme UI object. So you have your colors, your fonts, your font sizes and spacing, and these are the styles that are defined throughout your application. And if you don't feel like building out a theme UI object from scratch, theme UI has a custom theme tool that allows you to build out your object by clicking, dragging, and dropping. It'll create your theme object for you. You can copy and paste it from there into your project. So there are two ways to access values in your theme object. So you can use the components that come with theme UI and style them with the SX prop. And if you don't want to use components, you'd need to use the JSX pragma in order to use SX prop, and the SX prop is the only way to access your theme object values. So here, this is the SX prop and how you'd access the styles within your object. So you'll notice that within the SX prop, there are object keys that are strings, and that's because they refer to the keys in your theme object. So just to give you an idea of what it's like to use SX prop on a basic level, I've got a theme object here with a primary color of Rebecca purple and a secondary color of coral. Below in my square component, I'm setting the background color to primary and the other to secondary, and this is how easy it is to refer to your theme object throughout your project. And this is an example of your primary and secondary values. Then there are variants that allow you to define variations of styles for common components like buttons. So you have a button object with two objects in them. One is a primary object with a set of styles and the other is a secondary object with a set of styles. You can apply either variants by using the variant prop, and this works really well for things like buttons or links. Theme UI also has predefined breakpoints, but you're able to override them with your own breakpoint values. And there's also color modes. So color modes allow you to create things like dark mode in your theme object. You create those modes by adding a nested mode object to your colors object and defining your mode styles in there. An important thing to note is that all colors defined in your colors object are your default colors, and all colors defined in your modes are your secondary styles. So while that was really fast, let's just recap what we've learned. Theme objects are where your style values for your entire application live. There's a custom tool that will build out your theme object for you to copy and paste. And remember to add and import your JSX pragma and use the SX prop to access your styles. And theme UI comes with tons of cool features such as variants, breakpoints, color modes, and more. And again, I'm Paris Athena. I work at G2I and I'm founder of Blacktech Pipeline, and I hope to meet you soon.


Pariss Athena

#css-in-js