[PoC]: Theming support in the ui-kit

[kark]

Summary

This is a PoC of theming support through css-variables. Part of #1661 initiative

Possible improvements

• [ ] enable theme persistence upon page refresh in the useTheme hook
• [ ] enable defining only a part of choices in the new themes (and in case of any missing fallback to the values from the default theme)

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d7833dfa4221373bb24153854deaeb2db6d7c412

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 91 packages

Name	Type
@commercetools-uikit/design-system	Minor
@commercetools-uikit/calendar-utils	Minor
@commercetools-uikit/avatar	Minor
@commercetools-uikit/accessible-button	Minor
@commercetools-uikit/flat-button	Minor
@commercetools-uikit/icon-button	Minor
@commercetools-uikit/link-button	Minor
@commercetools-uikit/primary-button	Minor
@commercetools-uikit/secondary-button	Minor
@commercetools-uikit/secondary-icon-button	Minor
@commercetools-uikit/card	Minor
@commercetools-uikit/collapsible-panel	Minor
@commercetools-uikit/constraints	Minor
@commercetools-uikit/data-table	Minor
@commercetools-uikit/data-table-manager	Minor
@commercetools-uikit/field-label	Minor
@commercetools-uikit/grid	Minor
@commercetools-uikit/icons	Minor
@commercetools-uikit/async-creatable-select-input	Minor
@commercetools-uikit/async-select-input	Minor
@commercetools-uikit/checkbox-input	Minor
@commercetools-uikit/creatable-select-input	Minor
@commercetools-uikit/date-time-input	Minor
@commercetools-uikit/input-utils	Minor
@commercetools-uikit/localized-multiline-text-input	Minor
@commercetools-uikit/localized-rich-text-input	Minor
@commercetools-uikit/localized-text-input	Minor
@commercetools-uikit/money-input	Minor
@commercetools-uikit/multiline-text-input	Minor
@commercetools-uikit/number-input	Minor
@commercetools-uikit/password-input	Minor
@commercetools-uikit/radio-input	Minor
@commercetools-uikit/rich-text-utils	Minor
@commercetools-uikit/search-select-input	Minor
@commercetools-uikit/select-input	Minor
@commercetools-uikit/select-utils	Minor
@commercetools-uikit/text-input	Minor
@commercetools-uikit/time-input	Minor
@commercetools-uikit/toggle-input	Minor
@commercetools-uikit/label	Minor
@commercetools-uikit/link	Minor
@commercetools-uikit/loading-spinner	Minor
@commercetools-uikit/notifications	Minor
@commercetools-uikit/primary-action-dropdown	Minor
@commercetools-uikit/spacings-inline	Minor
@commercetools-uikit/spacings-inset	Minor
@commercetools-uikit/spacings-inset-squish	Minor
@commercetools-uikit/spacings-stack	Minor
@commercetools-uikit/stamp	Minor
@commercetools-uikit/tag	Minor
@commercetools-uikit/text	Minor
@commercetools-uikit/tooltip	Minor
@commercetools-uikit/view-switcher	Minor
@commercetools-frontend/ui-kit	Minor
visual-testing-app	Minor
@commercetools-uikit/pagination	Minor
@commercetools-uikit/async-creatable-select-field	Minor
@commercetools-uikit/async-select-field	Minor
@commercetools-uikit/creatable-select-field	Minor
@commercetools-uikit/date-field	Minor
@commercetools-uikit/date-range-field	Minor
@commercetools-uikit/date-time-field	Minor
@commercetools-uikit/localized-multiline-text-field	Minor
@commercetools-uikit/localized-text-field	Minor
@commercetools-uikit/money-field	Minor
@commercetools-uikit/multiline-text-field	Minor
@commercetools-uikit/number-field	Minor
@commercetools-uikit/password-field	Minor
@commercetools-uikit/radio-field	Minor
@commercetools-uikit/search-select-field	Minor
@commercetools-uikit/select-field	Minor
@commercetools-uikit/text-field	Minor
@commercetools-uikit/time-field	Minor
@commercetools-uikit/date-input	Minor
@commercetools-uikit/date-range-input	Minor
@commercetools-uikit/localized-money-input	Minor
@commercetools-uikit/rich-text-input	Minor
@commercetools-uikit/buttons	Minor
@commercetools-uikit/inputs	Minor
@commercetools-uikit/spacings	Minor
@commercetools-uikit/messages	Minor
@commercetools-uikit/fields	Minor
@commercetools-uikit/field-errors	Minor
@commercetools-uikit/calendar-time-utils	Minor
@commercetools-uikit/hooks	Minor
@commercetools-uikit/i18n	Minor
@commercetools-uikit/localized-utils	Minor
@commercetools-uikit/utils	Minor
@commercetools-uikit/accessible-hidden	Minor
@commercetools-uikit/collapsible-motion	Minor
@commercetools-uikit/collapsible	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
ui-kit	✅ Ready (Inspect)	Visit Preview	Oct 3, 2022 at 6:59AM (UTC)

[CarlosCortizasCT]

I pushed a new PR with a proposal for allowing us to use different themes in VRTs: #2256

[kark]

Also, I reviewed all the percy snapshot changes and there is this one I think we need to double check. It's probably ok, but it would be great to take another look at it.

That is a good catch.

I think the new version is correct, this is the DOM snapshot of this visual test from the main branch taken by Percy. Locally in my browser it's rendered like this (exactly like the new screenshot):

The screenshot taken by Percy based on this very same html looked like this before:

It seems that before enabling enable-javascript: true option this part (that for top should yield margin: 4px 0) didn't work correctly.