FIX base theme initialization and theme bootup

[ndelangen]

Issue: #5824 #5780

creating a theme that derived off of light or dark default themes was impractical, and wasn't working quite as users were expecting it to behave.

What I did

ADD ability for users to specify baseTheme, and the theme createFn will merge in the appropriate themeVars.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[codecov]

Codecov Report

Merging #5843 into next will increase coverage by 0.69%.
The diff coverage is 65.75%.

@@            Coverage Diff            @@
##            next    #5843      +/-   ##
=========================================
+ Coverage   34.3%   34.99%   +0.69%     
=========================================
  Files        648      648              
  Lines       9465     9478      +13     
  Branches    1344     1332      -12     
=========================================
+ Hits        3247     3317      +70     
+ Misses      5600     5533      -67     
- Partials     618      628      +10

Impacted Files	Coverage Δ
lib/theming/src/base.ts	100% <ø> (+100%)	⬆️
lib/ui/src/index.js	63.63% <0%> (ø)	⬆️
lib/theming/src/ensure.ts	0% <0%> (ø)	⬆️
lib/theming/src/themes/light.ts	100% <100%> (+100%)	⬆️
lib/theming/src/themes/dark.ts	100% <100%> (+100%)	⬆️
...i/src/components/sidebar/SidebarHeading.stories.js	100% <100%> (ø)	⬆️
lib/ui/src/core/layout.js	13.79% <5.88%> (-2.88%)	⬇️
lib/theming/src/create.ts	89.58% <92.85%> (+89.58%)	⬆️
lib/theming/src/animation.ts	100% <0%> (+100%)	⬆️
... and 3 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 15312c1...52968c9. Read the comment docs.

[shilman]

@ndelangen please test the hell out of this?

[tmeasday]

I feel like this code would benefit from some tests but I appreciate this is a fairly late change

[shilman]

When I add this line to offcial-storybook/config.js the app hangs:

    theme: create({ base: 'dark', colorPrimary: '#FF4785', colorSecondary: '#1EA7FD' }),

If it helps, the console error is:

VM158:1 Uncaught TypeError: Cannot read property 'name' of undefined

[ndelangen]

I'm writing tests @shilman

[shilman]

@ndelangen A couple comments, both outside the scope of this PR:

• After testing out a buggy version, I had to do localStorage.clear() to get the theme to load. Seems like a bug, but maybe it's a corner case
• Seems like the theme serialization should be profiled.. pretty slow to load on my laptop

[shilman]

@ndelangen Maybe a stupid question:

    theme: create({ base: 'dark', colorPrimary: 'red', colorSecondary: 'green' }),

I did this in official-storybook. I see green in the resulting UI, but I don't see any red. Doesn't seem right to me?

[ndelangen]

@shilman

I'd like to remove the need to do theme serialization asap.

theme.color.primary seems to be very rarely used, @domyen came up with the naming and usage of colors.

[domyen]

@ndelangen yea theme.color.primary is not used at all, happy for you to axe it! (the var was mirrored from storybook/frontpage, but we don't need it here)

[ndelangen]

I wrote in such a way, users won't need to change anything.
As long as they are using create()..

[ndelangen]

I also noticed that setOptions is called a ton, and it's was re-creating the theme on every navigation.

It'd be nice to fix this a bit better, but for now I improved it by deepEqual(theme, updatedTheme).