We launched a quite large redesign and rebranding of the "My Beeline" app to "Janymda". If you look only at the technical side of things, it's mostly style changes, almost without touching product layout. I'll add some screenshots in the comments for context. For about three weeks, we worked synchronously, almost without being distracted by anything else. There are a lot of thoughts about this, possibly even for a series of posts. A lot of interesting specifics and impressions that I'd like to reflect on.
Chapter One. Changing Colors
And this would be really simple if we just needed to change hexes at the design system level. But there's a nuance. We got the concept of brands. Let me explain.
Given: Absolutely standard story. The design system has components. Colors in them depend on tokens. The Compose theme passes down token values down the hierarchy based on some conditions. Like, for light and dark themes, a different instance of a class with all colors is created depending on the parameter passed to the theme. Compose theme is just a CompositionLocalProvider.
Task: Add brands to this equation, the idea being that the entire app is repainted in new colors, but except for sections related to Beeline (conventional tariffs). They remain in the old yellow-black palette. That is, to simplify greatly - there should be not two themes (light/dark), but four (light/dark * janymda/beeline).
It turns out that in components we now need to be able to support colors of one brand and colors of the second brand simultaneously. And this is something completely new for us. We need to find a solution.
At first glance, this really looks like dark theme support. But in practice, brand colors themselves depend on basic colors. This is a new dimension at a higher level. And only thanks to this, brand colors can also change depending on light/dark theme. In total, we added brand as another parameter in the theme, brand colors are assembled and passed down as a new CompositionLocal. There's now the ability to flexibly set both brand and darkness of colors right where we want it. For example, in previews.
We added tokens - now we need to change the default color tokens in all components to brand ones. So that any switch or loader from the design system, without extra moves from product developers, repaint themselves as needed. It's not complicated, but quite a lot of routine and not the fastest testing and design review process.
The points above describe everything that needs to be done at the design system level. And it seems logical that the whole app should already be repainted. Job done, right? But I mentioned that on some screens the theme should "remain" the old one. And if the default theme is now "janymda", then in Beeline features you need to explicitly wrap your layout in a theme with the corresponding brand. Funny that this turned out to be the hardest part. If there's more than one of these teams, then explaining everything to everyone and synchronizing to fit into the right schedule in an organized way is quite a pain.
Next - even more fun. We didn't stop at colors, even with such specific quirks like brands.