In an attempt to make our brand more consistent and easier to design for, in 2021 we began the process of simplifying Palette to reduce the amount of visual information in the system. Less Typography choices, less spacing options, less colors. While this has largely gone smoothly, there are some things to be aware of.
For reference, check out the difference between our v2 and v3 themes below:
While most migration work will be happening in
Force, we use Palette all across Artsy,
including a lighter React Native version in
Eigen. Each app will likely have its own
patterns for toggling between v2 and v3, but in short migrating is as simple as
<ThemeProviderV3> context and placing it at the top of the
component tree that you'd like to migrate:
Alternatively, you can set the theme version using the main
This is useful if you're programmatically setting things, as we do in Force via our route config.
Once the component tree is wrapped in the correct provider you should be able to access our v3 theme.
useThemeConfig hook can be used within components that are shared
between v2 and v3 apps, and thus can't be converted wholesale to v3. (A good
example of this is the Artwork Filter, which is a complex component used in a
couple different places.)
What we're doing in the above is defining an object with two keys --
v3 -- and the
useThemeConfig hook will then match against the keys depending
on which theme context is currently being used and return the correct values. So
you can see that
Will return dynamic values for
tokens.px -- either
(See here for a real-world example.)
We've simplified our typography choices down to six choices, as can be seen here.
Variants are now generic size values (
lg, and so on) rather than
context-specific names (
If migrating from pre-v1
<Serif> components, note that we no
longer use serif fonts and areas where those components are used should be
Some migration examples:
Do this instead:
See our docs on Spacing for the full list,
but in particular the often-used
3 = 30px is no longer available.
If migrating a page, v2 values that no longer exist in v3 will collapse to zero.
See our docs on Colors for the full list.