💅 Prepare theming support in design system (#2227)

* feat: poc of theme support in uikit

fix: add fallback values to css variables

fix: attempt to fix vrts

refactor: themeprovider improvements

* fix: all tokens story

* fix: attempt to fix percy snapshots

* fix: attempt to fix percy snapshots #2

* fix: attempt to fix percy snapshots #3

* [POC] Fix proposal for Percy related issues with CSS vars (#2243)

* fix: poc to deal with percy css vars problems

* fix: use proper naming

* test: revert jest-puppeteer setup changes

* refactor: add css vars to root, warn when theme not valid

* fix: warn when using useTheme outside a ThemeProvider

* refactor: allow declaring the initial theme

* refactor: useRef for root element

* feat: allow using different themes in VRTs (#2256)

* test: rollback to previous version to showcase the problem with percy

* fix: percy

* [PoC] Spec theme switcher (#2258)

* feat: spec theme feature

* feat(design-system): support scopes in theme provider

* chore(test): remove unncessary file

* chore(test): remove unnecessary import

* refactor(design-system): improve vrt wording

Co-authored-by: Kacper Krzywiec <[email protected]>

* refactor: remove @emotion/react theming from ui-kit components (#2257)

* refactor: initial

docs: use themeprovider in vrts

* fix: vrts

fix: vrts #2

fix: vrts #3

fix: vrts #4

* fix: custom themes in vrts

fix: custom themes in vrts #2

* refactor: use customProperties directly in all the remaining components

* test: use dart theme in time-input vrts

* fix: cover ssr builds in theme provider

* test: remove vrts using custom themes

* feat: theme overrides

* refactor: use dark theme in vrt as theme override instead of definig custom properties

* refactor: provide external ref to themeprovider instead of adding a div inside

* refactor: improvements

* refactor: remove react context provider from implementation

* refactor: provide useTheme hook

* test: remove dark theme vrts 😳

* refactor: improve useTheme hook

* feat: use default theme as blueprint

* fix: fix a bug with lodash merge usage

* refactor: applyTheme instead of changeTheme

* refactor: use theme context in storybook only in dev

* Poc remove emotion theming - alternative proposal (#2264)

* chore: remove unnecessary import

* chore(design-system): theme provider refactors

* fix(design-system): fix change theme with undefined value issue

* fix(design-system): fix current theme initialization in useTheme hook

* test: add theme provider tests

* test: fix tests by reverting applyTheme

* test: visual

* fix: remove unneeded tsconfig.json

* fix: remove unneeded parts

* chore: add changeset

* fix: try to fix theme provider vrts

* fix: try to fix theme provider vrts #2

* refactor: use a static ref to applyTheme function

Co-authored-by: Carlos Cortizas <[email protected]>

* chore: update versions after rebase

* Simplify alternative themes configuration (#2268)

* feat(design-system): alternate themes in custom props now only include the overwrites over default theme

* fix(docs): simplify theming swithing in storybook

* Remove unnecessary helper from theming React hook (#2270)

* fix(design-system): remove unnecessary applyTheme helper

* fix(design-system): drop unnecessary memoization

* Support themed decision groups desing tokens (#2271)

* fix(design-system): generate themed properties for ds decisions

* fix(storybook): remove legacy imports

* fix(design-system): adjust tokens story

* fix(components): remove design-tokens file usage

* fix(design-system): only showcase alternative themes tokens in local environment

* fix(design-tokens): unify custom-properties and design-token files

* fix(design-system): improve theme-provider renders (#2272)

* Update css tokens imports (#2274)

* fix: rename customProperties imports to use the new designSytem exported from the design-system package

* fix: update icons

* fix(design-system): remove unnecessary code

* fix: improve dynamic design tokens usage

* chore: remove unused imports

* chore: update changeset

* chore: code review improvements

* chore: remove unused import

* test: disable percy snapshots for interactive tests

* chore: edit changeset

* refactor: rename dark theme to test

* style: update view-switcher

* test: disable select input interactive test

* test: fix tests after updating to jest v29

* refactor(design-system): do not expose themes names

* refactor(design-system): improve naming

Co-authored-by: Carlos Cortizas <[email protected]>
Co-authored-by: Carlos Martinez <[email protected]>

.changeset/few-maps-smell.md

@@ -0,0 +1,63 @@
+---
+'@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
+---
+
+Prepare theming support in our design system.
+
+This is an internal change to restructure how we define and use design tokens, in particular by relying on CSS variables. Consumers are not affected by any of these changes.
+
+Note that the `customProperties` object exported from the `@commercetools-uikit/design-system` package is now deprecated (although still exported for backwards compatibility) in favour of the `designTokens` object.

.percy.yml

@@ -2,3 +2,4 @@ version: 2
 snapshot:
   widths:
     - 1024
+  enable-javascript: true

design-system/materials/custom-properties.css

@@ -1,7 +1,7 @@
 /*
   THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 
-  This file is created by the 'scripts/generate-custom-properties.js' script.
+  This file is created by the 'scripts/generate-design-tokens.js' script.
   The variables should be updated in 'materials/internals/definition.yaml'.
 */