feat: Add CozyTheme provider to handle normal and inverted themes and adapt existing UI

[Ldoppea]

Tip

As usual this PR is meant to be read commit by commit
Also, to ease reading styles.ts files diffs you can hide whitespace diffs

We want the UI to adapt to normal and inverted themes

Until now we did not support Theming in the UI and we manually applied colors to component based on the expected result (normal or inverted)

In the IAP feature we will need to reuse the PromptingPage component using normal theme, but this component is implemented for the inverted theme only

So it is time to implement some Theming mechanism

The CozyTheme provider will be responsible to enforce a theme (normal or inverted) to all its children

This provider is inspired by the one on cozy-ui

Then useCozyTheme hook can be used on every component and should return the current theme name and its corresponding colors palette

This hook takes a forcedVariant parameter that can be used by top level components that are not embedded in the provider

Related files:
https://github.com/cozy/cozy-ui/blob/master/react/providers/CozyTheme/index.jsx

---

This PR also ports some of the following components:

• Button
• Typography
• TextField

And the following views:

• LockScreen
• PinPrompt
• SetPinView
• OsReceiveScreen

Some other components still have to be adapted but this can be done in another PR. The requirement was to adapt the PromptingPage. All edits on previous components were side effects as they would have been broken when porting PromptingPage

Next to this PR, the goal would be to adapt remaining components AND to get rid of this code that should not be in the palette (its place is in colours.ts as semantic variables)

---

TODO:

• Adapt Colors for MaBulle

[Ldoppea]

Note that I'm not happy with the way styles has to be initialized. This code should be done in every stylized component:

  const { colors } = useCozyTheme()
  const [styles, setStyles] = useState<ButtonStyles | undefined>(undefined)

  useEffect(() => {
    setStyles(computeStyles(colors))
  }, [colors])

  if (styles === undefined) {
    return null
  }

If you know a better way to handle this?

[Ldoppea]

Just made this edit and this one to clean Typography usage

[Crash--]

It feels weird to have to handle that at the component level. We should think about an abstraction to handle that automatically (or use an existing design system)

[Ldoppea]

I changed this based on @zatteo suggestion: #1062 (comment)

[Crash--]

Nice !

[zatteo]

Note that I'm not happy with the way styles has to be initialized. This code should be done in every stylized component:

  const { colors } = useCozyTheme()
  const [styles, setStyles] = useState<ButtonStyles | undefined>(undefined)

  useEffect(() => {
    setStyles(computeStyles(colors))
  }, [colors])
  
  // styles is never undefined if I check use cozyTheme
  if (styles === undefined) {
    return null
  }

If you know a better way to handle this?

About the if (styles === undefined), styles is never undefined ? So we can remove it ?

If yes, my suggestion :

  const { colors } = useCozyTheme()
  const styles = computeStyles(colors)
  
  // Or even if we are afraid about performance
  const { colors } = useCozyTheme()
  const styles = useMemo(() => computeStyles(colors), [colors])

[Ldoppea]

About the if (styles === undefined), styles is never undefined ? So we can remove it ?

If yes, my suggestion :

  const { colors } = useCozyTheme()
  const styles = computeStyles(colors)
  
  // Or even if we are afraid about performance
  const { colors } = useCozyTheme()
  const styles = useMemo(() => computeStyles(colors), [colors])

Seen during a visio: styles can be undefined because useEffect is called after the first render. But this is not the case is we use useMemo as suggested.

I made the edit here: https://github.com/cozy/cozy-flagship-app/compare/ff49720a0876d94cdf1f6a0aa56c36b1a87af1f6..05c51500c15acbd85305377d6a0f280f164acf5f

[Ldoppea]

I reverted @acezard PR in #1065

And I reapplied the disable logic for SetPinView's buttons here: 1046a7e