New Theming (50)

[YoussefHenna]

• This is a large PR, but the changes in example, packages/core, packages/maps, and packages/native are just updating old theme references to the new theme references.
• The important changes and new theming logic exist in a new package packages/theme
• Changes based on https://www.notion.so/teamdraftbit/Refactor-Themes-e7ceeae7644e4366b7ee029ab92b67c9
• Initially only supports colors, later we plan on supporting fonts and other other attributes.
• Adds the concept of color palettes
  • Which are just objects that hold color values. These colors are then referenced in themes. The idea here is that we'll provide a set of default color palettes for users to use to easily create themes. Similair to tailwind's palettes https://tailwindcss.com/docs/customizing-colors
  • This logic will mostly be handled on the builder side, not here. Here is mostly just validation
• Adds the concept of breakpoints
  • This is just another object where any key can be set to a number that represents a specific device width breakpoint. On the builder side, we'll probably have these static and set to the same breakpoints we use in other places.
  • With breakpoint keys set, a theme value can have a different value per breakpoint. Does not make much sense with colors, but will be useful down the line when we add other stuff to themes (spacing, roundness, etc).
• The same idea used for breakpoints is platform-specific theme values. For the same theme value, you can have different values per platform.
• In the end, a theme object is exposed
  • Similar to the one we already had with minor differences (Ex: theme.colors.primary is now theme.colors.branding.primary). We'll need a migration for this.
  • Usage is simple, but I'm using object proxies when exposing the theme in order to be able to handle the case of breakpoints and platforms and return the correct value. (Ex: theme.colors.branding.someValue can return a different value for ios and android)
• Also added a way to change the theme at any point in the app
• This will only be merged once builder is updated to use the new theme

untitled.webm

[linear]

P-4845 Initial Theming Implementation on Jigsaw

[github-actions]

Published version: @draftbit/[email protected]