refactor/theme variables and v4 ui updates

[enesozturk]

Changes

This PR introduces changes to our design system theme variables.

Theme variable namings

We are using inconsistent naming convention for the colors that some of the starts with --wui-color-* and some of the starts with --wui-*. At some certain situations. This is making things a bit hard.

Example case: at some components we might need set the local color with properties and we are following this approach which is easy and short way to make conditional stylings. Once we have different naming conventions for colors, we need to make extra conditions while setting the --local-color and this makes things harder.

public override render() {
    this.style.cssText = `
      --local-color: ${`var(--wui-color-${this.color});`}
      ...
    `
    ...
  }

Components updates

We have updates to many components at Figma, but buttons are one of the main components in our UI and they have now different colors, active & focus states and different variants. These components has been refactored completely:

• wui-button
• wui-chip-button

Updating page containers

In V4, we removed bottom border of the header, and that's why the content of the page is closer to header and there is no gap between. This PR also includes to padding refactors of the page container wui-flex elements

Theme elementStyle

In ThemeUtils file, we have elementStyle styling that we use this in almost every component. This styles including many stylings for a, and buttons, and their different states. Even though this seems good. While refactoring the wui-button realized that overriding button stylings in both places creates overhead.

When we create a web component which include <button/> inside, we should decide it's stylings inside that new web component. That button shouldn't use the common styles from elementStyle object.

Example playground run

https://github.com/WalletConnect/web3modal/assets/19428358/ab8162a1-6479-4a51-bdb3-036758179796

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
web3modal-gallery	✅ Ready (Inspect)	Visit Preview	May 16, 2024 9:23am
web3modal-laboratory	✅ Ready (Inspect)	Visit Preview	May 16, 2024 9:23am