feat(theme): refactor themes

[nadiia]

Description

The change is broken down in 3 separate commits:

• Part#1 refactors theme
• Part#2 add semantic color tokens
• Part#3 applies newly added semantic color tokens in place of older to be deprecated semantic tokens

Scope

• Patch: Bug Fix
• Minor: New Feature
• Major: Breaking Change

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/uber-ui-platform/baseweb/bxfxov9y5
🌍 Preview: https://baseweb-git-wpt-5198.uber-ui-platform.now.sh

[UberOpenSourceBot]

Visual changes were detected on this branch. Please review the following PR containing updated snapshots: #2455

[gergelyke]

shouldn't it stay in the light theme?

[gergelyke]

looks great!

[chasestarr]

many of the 'surface' backgrounds have changed from white to light grey in the vrts, was that intentional? Otherwise, the change lgtm

[sandgraham]

if people have these already set as primitives in their current theme will they be overwritten by these keys with the same name?

[nadiia]

You mean if they create a custom theme and extend it with custom props? Then it depends on how they extend the current theme, should their custom props come last then it overrides what's in the default theme.

[sandgraham]

What would accent end up as on the final theme object if I did the following?

createTheme({
  // other primitives...
  accent: 'pink',
});

In createTheme we combine a bunch of colors:

const theme = {
    colors: {
      ...colorTokensWithOverrides, // user defined primitives
      ...getColorComponentTokens(colorTokensWithOverrides),
      ...getDeprecatedSemanticColors(colorTokensWithOverrides),
      ...semanticColors, // has `accent`, `positive`, etc.
    },
};

semanticColors has keys for accent, positive, etc. so wouldn't they override the primitives on the final theme object?

[nadiia]

I see. The accent, etc, will be overriden but not the other props that have value set from the theme primitives. I guess foundation semantic colors can be included in the theme building primitives and the sert of semantic values also built it taking overrides into account. What do you think?

[sandgraham]

yeah, maybe add primaryA and primaryB to ColorTokensT.

then we can use a getter like getSemanticColors(colorTokensWithOverrides) which will override the foundation values with the passed in primitives.

[nadiia]

Addressed it in here

[UberOpenSourceBot]

Visual changes have been resolved. #2455 has been closed. If future commits on WPT-5198 trigger visual changes, a new snapshot branch will be created and a new PR will be opened.

[nadiia]

many of the 'surface' backgrounds have changed from white to light grey in the vrts, was that intentional? Otherwise, the change lgtm

You're right, I think the legacy backgroundAlt was the same as primary but in the new semantic values they are different. I changed it to use new backgroundPrimary in here. See the rendered docs here.