feat: add theme variables

vechain · Dec 1, 2023 · b4de980 · b4de980
1 parent 30deb72
commit b4de980
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 43 deletions.
diff --git a/packages/dapp-kit-ui/src/assets/styles/button.ts b/packages/dapp-kit-ui/src/assets/styles/button.ts
@@ -19,25 +19,25 @@ export const buttonStyle = css`
     }
 
     button.LIGHT {
-        background-color: ${Colors.XXLightGrey};
-        color: ${Colors.LightBlack};
+        background-color: var(--vwk-color-xxlightgrey, ${Colors.XXLightGrey});
+        color: var(--vwk-color-lightblack, ${Colors.LightBlack});
     }
     button.LIGHT:hover {
-        background-color: ${Colors.XLightGrey};
+        background-color: var(--vwk-color-xlightgrey, ${Colors.XLightGrey});
     }
     button.LIGHT:active {
-        background-color: ${Colors.LightGrey};
+        background-color: var(--vwk-color-lightgrey, ${Colors.LightGrey});
     }
 
     button.DARK {
-        background-color: ${Colors.XXDarkGrey};
-        color: ${Colors.XXLightGrey};
+        background-color: var(--vwk-color-xxdarkgrey, ${Colors.XXDarkGrey});
+        color: var(--vwk-color-xxlightgrey, ${Colors.XXLightGrey});
     }
     button.DARK:hover {
-        background-color: ${Colors.XDarkGrey};
+        background-color: var(--vwk-color-xdarkgrey, ${Colors.XDarkGrey});
     }
     button.DARK:active {
-        background-color: ${Colors.DarkGrey};
+        background-color: var(--vwk-color-darkgrey, ${Colors.DarkGrey});
     }
 `;
 
@@ -55,24 +55,24 @@ export const triggerButtonStyle = css`
     }
 
     button.LIGHT {
-        background-color: ${Colors.XXLightGrey};
-        color: ${Colors.LightBlack};
+        background-color: var(--vwk-color-xxlightgrey, ${Colors.XXLightGrey});
+        color: var(--vwk-color-lightblack, ${Colors.LightBlack});
     }
     button.LIGHT:hover {
-        background-color: ${Colors.XLightGrey};
+        background-color: var(--vwk-color-xlightgrey, ${Colors.XLightGrey});
     }
     button.LIGHT:active {
-        background-color: ${Colors.LightGrey};
+        background-color: var(--vwk-color-lightgrey, ${Colors.LightGrey});
     }
 
     button.DARK {
-        background-color: ${Colors.LightBlack};
-        color: ${Colors.XXLightGrey};
+        background-color: var(--vwk-color-lightblack, ${Colors.LightBlack});
+        color: var(--vwk-color-xxlightgrey, ${Colors.XXLightGrey});
     }
     button.DARK:hover {
-        background-color: ${Colors.XLightBlack};
+        background-color: var(--vwk-color-xlightblack, ${Colors.XLightBlack});
     }
     button.DARK:active {
-        background-color: ${Colors.XXLightBlack};
+        background-color: var(--vwk-color-xxlightblack, ${Colors.XXLightBlack});
     }
 `;
diff --git a/packages/dapp-kit-ui/src/components/address-modal.ts b/packages/dapp-kit-ui/src/components/address-modal.ts
@@ -71,11 +71,17 @@ export class AddressModal extends LitElement {
             }
 
             .icon.LIGHT:hover {
-                background-color: ${Colors.XXLightGrey};
+                background-color: var(
+                    --vwk-color-xxlightgrey,
+                    ${Colors.XXLightGrey}
+                );
             }
 
             .icon.DARK:hover {
-                background-color: ${Colors.XXDarkGrey};
+                background-color: var(
+                    --vwk-color-xxdarkgrey,
+                    ${Colors.XXDarkGrey}
+                );
             }
 
             .address-icon {

diff --git a/packages/dapp-kit-ui/src/components/base/modal.ts b/packages/dapp-kit-ui/src/components/base/modal.ts
@@ -38,13 +38,13 @@ export class Modal extends LitElement {
         }
 
         .modal.LIGHT {
-            background-color: ${Colors.White};
-            color: ${Colors.LightBlack};
+            background-color: var(--vwk-color-white, ${Colors.White});
+            color: var(--vwk-color-lightblack, ${Colors.LightBlack});
         }
 
         .modal.DARK {
-            background-color: ${Colors.LightBlack};
-            color: ${Colors.XXLightGrey};
+            background-color: var(--vwk-color-lightblack, ${Colors.LightBlack});
+            color: var(--vwk-color-xxlightgrey, ${Colors.XXLightGrey});
         }
 
         @media (max-width: ${Breakpoint.Mobile}px) {

diff --git a/packages/dapp-kit-ui/src/components/connect-modal.ts b/packages/dapp-kit-ui/src/components/connect-modal.ts
@@ -46,11 +46,14 @@ export class ConnectModal extends LitElement {
         }
 
         .icon.LIGHT:hover {
-            background-color: ${Colors.XXLightGrey};
+            background-color: var(
+                --vwk-color-xxlightgrey,
+                ${Colors.XXLightGrey}
+            );
         }
 
         .icon.DARK:hover {
-            background-color: ${Colors.XXDarkGrey};
+            background-color: var(--vwk-color-xxdarkgrey, ${Colors.XXDarkGrey});
         }
     `;
 

diff --git a/packages/dapp-kit-ui/src/components/wallet-connect-qr-code.ts b/packages/dapp-kit-ui/src/components/wallet-connect-qr-code.ts
@@ -29,10 +29,10 @@ export class WalletConnectQrCode extends LitElement {
             .qrcode-container {
                 position: relative;
                 margin: 20px auto 0 auto;
-                background-color: ${Colors.White};
+                background-color: var(--vwk-color-white, ${Colors.White});
                 width: 280px;
                 padding: 10px;
-                border: 1px solid ${Colors.Grey};
+                border: 1px solid var(--vwk-color-grey, ${Colors.Grey});
                 border-radius: 20px;
                 display: flex;
                 justify-content: center;
@@ -59,11 +59,11 @@ export class WalletConnectQrCode extends LitElement {
             }
 
             .line.LIGHT {
-                background-color: ${Colors.Grey};
+                background-color: var(--vwk-color-grey, ${Colors.Grey});
             }
 
             .line.DARK {
-                background-color: ${Colors.Grey};
+                background-color: var(--vwk-color-grey, ${Colors.Grey});
             }
 
             .or {
@@ -73,11 +73,11 @@ export class WalletConnectQrCode extends LitElement {
             }
 
             .or.LIGHT {
-                color: ${Colors.Grey};
+                color: var(--vwk-color-grey, ${Colors.Grey});
             }
 
             .or.DARK {
-                color: ${Colors.Grey};
+                color: var(--vwk-color-grey, ${Colors.Grey});
             }
 
             .icon {
@@ -98,7 +98,10 @@ export class WalletConnectQrCode extends LitElement {
             }
 
             use {
-                stroke: #3496ff;
+                stroke: var(
+                    --vwk-color-walletconnectblue,
+                    ${Colors.WalletConnectBlue}
+                );
                 animation: loading 1s linear infinite;
             }
 
@@ -117,7 +120,10 @@ export class WalletConnectQrCode extends LitElement {
                 font-family: 'Inter', sans-serif;
                 font-size: 14px;
                 padding: 20px 0;
-                color: #3496ff;
+                color: var(
+                    --vwk-color-walletconnectblue,
+                    ${Colors.WalletConnectBlue}
+                );
             }
         `,
     ];

diff --git a/packages/dapp-kit-ui/src/constants/colors.ts b/packages/dapp-kit-ui/src/constants/colors.ts
@@ -1,15 +1,16 @@
 import { css } from 'lit';
 
 export const Colors = {
-    White: css`#ffffff`,
-    XXLightGrey: css`#f2f2f2`,
-    XLightGrey: css`#eeeeee`,
-    LightGrey: css`#eaeaea`,
-    Grey: css`#888888`,
-    DarkGrey: css`#4a4a4a`,
-    XDarkGrey: css`#454545`,
-    XXDarkGrey: css`#404040`,
-    XXLightBlack: css`#353535`,
-    XLightBlack: css`#303030`,
-    LightBlack: css`#2a2a2a`,
+    White: css`#ffffff`, // var(--vwk-color-white)
+    XXLightGrey: css`#f2f2f2`, // var(--vwk-color-xxlightgrey)
+    XLightGrey: css`#eeeeee`, // var(--vwk-color-xlightgrey)
+    LightGrey: css`#eaeaea`, // var(--vwk-color-lightgrey)
+    Grey: css`#888888`, // var(--vwk-color-grey)
+    DarkGrey: css`#4a4a4a`, // var(--vwk-color-darkgrey)
+    XDarkGrey: css`#454545`, // var(--vwk-color-xdarkgrey)
+    XXDarkGrey: css`#404040`, // var(--vwk-color-xxdarkgrey)
+    XXLightBlack: css`#353535`, // var(--vwk-color-xxlightblack)
+    XLightBlack: css`#303030`, // var(--vwk-color-xlightblack)
+    LightBlack: css`#2a2a2a`, // var(--vwk-color-lightblack)
+    WalletConnectBlue: css`#3496ff`, // var(--vwk-color-walletconnectblue)
 };