Carpini/theming dapp kit (#137)

* feat: add theme variables * feat: add font family and z-index variables * fix: fix font size and font family and add font weight * fix: color variables and circual * fix: address modal * fix: wc logo * fix: add shared style * fix: colors comments * fix: background property * fix: remove vechain theme
vechain · Dec 5, 2023 · 375c218 · 375c218
1 parent 552a877
commit 375c218
Show file tree

Hide file tree

Showing 22 changed files with 325 additions and 190 deletions.
diff --git a/packages/dapp-kit-ui/src/assets/icons/check.ts b/packages/dapp-kit-ui/src/assets/icons/check.ts
@@ -1,7 +1,12 @@
 import { html } from 'lit';
+import { Colors } from '../../constants';
 
 export const CheckSvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3496ff">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill=${Colors.WalletConnectBlue}
+    >
         <path
             d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
         />

diff --git a/packages/dapp-kit-ui/src/assets/icons/chevron-left.ts b/packages/dapp-kit-ui/src/assets/icons/chevron-left.ts
@@ -1,17 +1,26 @@
 import { html, svg } from 'lit';
+import { Colors } from '../../constants';
 
 export const ChevronLeftSvg = svg`
       <path
         d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
     `;
 
 export const LightChevronLeftSvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#777777">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill=${Colors.Light.Quaternary}
+    >
         ${ChevronLeftSvg}
     </svg>
 `;
 export const DarkChevronLeftSvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#999999">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill=${Colors.Dark.Quaternary}
+    >
         ${ChevronLeftSvg}
     </svg>
 `;
diff --git a/packages/dapp-kit-ui/src/assets/icons/close.ts b/packages/dapp-kit-ui/src/assets/icons/close.ts
@@ -1,17 +1,26 @@
 import { html, svg } from 'lit';
+import { Colors } from '../../constants';
 
 export const CloseSvg = svg`
       <path
         d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
     `;
 
 export const LightCloseSvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#777777">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill=${Colors.Light.Quaternary}
+    >
         ${CloseSvg}
     </svg>
 `;
 export const DarkCloseSvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#999999">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill=${Colors.Dark.Quaternary}
+    >
         ${CloseSvg}
     </svg>
 `;
diff --git a/packages/dapp-kit-ui/src/assets/icons/copy.ts b/packages/dapp-kit-ui/src/assets/icons/copy.ts
@@ -1,4 +1,5 @@
 import { html, svg } from 'lit';
+import { Colors } from '../../constants';
 
 export const CopySvg = svg`
       <path d="M17.5 14H19C20.1046 14 21 13.1046 21 12V5C21 3.89543 20.1046 3 19 3H12C10.8954 3 10 3.89543 10 5V6.5M5 10H12C13.1046 10 14 10.8954 14 12V19C14 20.1046 13.1046 21 12 21H5C3.89543 21 3 20.1046 3 19V12C3 10.8954 3.89543 10 5 10Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -8,7 +9,7 @@ export const LightCopySvg = html`
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        stroke="#777777"
+        stroke=${Colors.Light.Quaternary}
         fill="#00000000"
     >
         ${CopySvg}
@@ -18,7 +19,7 @@ export const DarkCopySvg = html`
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        stroke="#999999"
+        stroke=${Colors.Dark.Quaternary}
         fill="#00000000"
     >
         ${CopySvg}

diff --git a/packages/dapp-kit-ui/src/assets/icons/disconnect.ts b/packages/dapp-kit-ui/src/assets/icons/disconnect.ts
@@ -1,4 +1,5 @@
 import { html, svg } from 'lit';
+import { Colors } from '../../constants';
 
 export const DisconnectSvg = svg`
     <path
@@ -7,12 +8,20 @@ export const DisconnectSvg = svg`
 `;
 
 export const LightDisconnectSvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="#777777">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 15 15"
+        fill=${Colors.Light.Quaternary}
+    >
         ${DisconnectSvg}
     </svg>
 `;
 export const DarkDisconnectSvg = html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="#999999">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 15 15"
+        fill=${Colors.Dark.Quaternary}
+    >
         ${DisconnectSvg}
     </svg>
 `;
diff --git a/packages/dapp-kit-ui/src/assets/icons/wallet-connect.ts b/packages/dapp-kit-ui/src/assets/icons/wallet-connect.ts
@@ -0,0 +1,16 @@
+import { html } from 'lit';
+import { Colors } from '../../constants';
+
+export const WalletConnectLogoSvg = html`
+    <svg
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        style="background: ${Colors.WalletConnectBlue};"
+    >
+        <path
+            d="M9.58818 11.8556C13.1293 8.31442 18.8706 8.31442 22.4117 11.8556L22.8379 12.2818C23.015 12.4588 23.015 12.7459 22.8379 12.9229L21.3801 14.3808C21.2915 14.4693 21.148 14.4693 21.0595 14.3808L20.473 13.7943C18.0026 11.3239 13.9973 11.3239 11.5269 13.7943L10.8989 14.4223C10.8104 14.5109 10.6668 14.5109 10.5783 14.4223L9.12041 12.9645C8.94336 12.7875 8.94336 12.5004 9.12041 12.3234L9.58818 11.8556ZM25.4268 14.8706L26.7243 16.1682C26.9013 16.3452 26.9013 16.6323 26.7243 16.8093L20.8737 22.6599C20.6966 22.8371 20.4096 22.8371 20.2325 22.6599L16.0802 18.5076C16.0359 18.4634 15.9641 18.4634 15.9199 18.5076L11.7675 22.6599C11.5905 22.8371 11.3034 22.8371 11.1264 22.66C11.1264 22.66 11.1264 22.6599 11.1264 22.6599L5.27561 16.8092C5.09856 16.6322 5.09856 16.3451 5.27561 16.168L6.57313 14.8706C6.75019 14.6934 7.03726 14.6934 7.21431 14.8706L11.3668 19.023C11.411 19.0672 11.4828 19.0672 11.5271 19.023L15.6793 14.8706C15.8563 14.6934 16.1434 14.6934 16.3205 14.8706L20.473 19.023C20.5172 19.0672 20.589 19.0672 20.6332 19.023L24.7856 14.8706C24.9627 14.6935 25.2498 14.6935 25.4268 14.8706Z"
+            fill="white"
+        ></path>
+    </svg>
+`;
diff --git a/packages/dapp-kit-ui/src/assets/index.ts b/packages/dapp-kit-ui/src/assets/index.ts
diff --git a/packages/dapp-kit-ui/src/assets/styles/button.ts b/packages/dapp-kit-ui/src/assets/styles/button.ts
@@ -1,9 +1,11 @@
 import { css } from 'lit';
-import { Colors } from '../../constants/colors';
+import { Colors, Font } from '../../constants';
 
 export const buttonStyle = css`
     button {
-        font-family: 'Inter', sans-serif;
+        font-family: var(--vwk-font-family, ${Font.Family});
+        font-size: var(--vwk-font-size-medium, ${Font.Size.Medium});
+        font-weight: var(--vwk-font-weight-medium, ${Font.Weight.Medium});
         cursor: pointer;
         display: flex;
         flex-direction: row;
@@ -12,67 +14,73 @@ export const buttonStyle = css`
         border: none;
         border-radius: 12px;
         padding: 12px;
-        font-size: 15px;
-        font-weight: 500;
         width: 100%;
         gap: 10px;
     }
 
     button.LIGHT {
-        background-color: ${Colors.XXLightGrey};
-        color: ${Colors.LightBlack};
+        background: var(--vwk-color-light-primary, ${Colors.Light.Primary});
+        color: var(--vwk-color-light-tertiary, ${Colors.Light.Tertiary});
     }
     button.LIGHT:hover {
-        background-color: ${Colors.XLightGrey};
+        background: var(
+            --vwk-color-light-primary-hover,
+            ${Colors.Light.PrimaryHover}
+        );
     }
     button.LIGHT:active {
-        background-color: ${Colors.LightGrey};
+        background: var(
+            --vwk-color-light-primary-active,
+            ${Colors.Light.PrimaryActive}
+        );
     }
 
     button.DARK {
-        background-color: ${Colors.XXDarkGrey};
-        color: ${Colors.XXLightGrey};
+        background: var(--vwk-color-dark-primary, ${Colors.Dark.Primary});
+        color: var(--vwk-color-dark-tertiary, ${Colors.Dark.Tertiary});
     }
     button.DARK:hover {
-        background-color: ${Colors.XDarkGrey};
+        background: var(
+            --vwk-color-dark-primary-hover,
+            ${Colors.Dark.PrimaryHover}
+        );
     }
     button.DARK:active {
-        background-color: ${Colors.DarkGrey};
+        background: var(
+            --vwk-color-dark-primary-active,
+            ${Colors.Dark.PrimaryActive}
+        );
     }
 `;
 
-export const triggerButtonStyle = css`
-    button {
-        font-family: 'Inter', sans-serif;
+export const iconButtonStyle = css`
+    .icon-button {
         cursor: pointer;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        border: none;
-        border-radius: 12px;
-        padding: 12px;
+        width: 25px;
+        height: 25px;
+        padding: 5px;
+        border-radius: 50%;
     }
 
-    button.LIGHT {
-        background-color: ${Colors.XXLightGrey};
-        color: ${Colors.LightBlack};
-    }
-    button.LIGHT:hover {
-        background-color: ${Colors.XLightGrey};
-    }
-    button.LIGHT:active {
-        background-color: ${Colors.LightGrey};
+    .icon-button.LIGHT:hover {
+        background: var(
+            --vwk-color-light-primary,
+            ${Colors.Light.PrimaryHover}
+        );
     }
 
-    button.DARK {
-        background-color: ${Colors.LightBlack};
-        color: ${Colors.XXLightGrey};
+    .icon-button.DARK:hover {
+        background: var(--vwk-color-dark-primary, ${Colors.Dark.PrimaryHover});
     }
-    button.DARK:hover {
-        background-color: ${Colors.XLightBlack};
+
+    .icon-button.LIGHT:active {
+        background: var(
+            --vwk-color-light-primary,
+            ${Colors.Light.PrimaryActive}
+        );
     }
-    button.DARK:active {
-        background-color: ${Colors.XXLightBlack};
+
+    .icon-button.DARK:active {
+        background: var(--vwk-color-dark-primary, ${Colors.Dark.PrimaryActive});
     }
 `;
diff --git a/packages/dapp-kit-ui/src/components/address-button.ts b/packages/dapp-kit-ui/src/components/address-button.ts
@@ -1,30 +1,31 @@
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { type ThemeMode } from '../constants';
+import { Font, type ThemeMode } from '../constants';
 import { friendlyAddress, getPicassoImage } from '../utils/account';
-import { triggerButtonStyle } from '../assets';
+import { buttonStyle } from '../assets/styles';
 
 @customElement('vwk-connected-address-button')
 export class AddressButton extends LitElement {
     static override styles = [
-        triggerButtonStyle,
+        buttonStyle,
         css`
             button {
                 padding: 9px 12px;
+                width: auto;
+                gap: 4px;
             }
 
             /* Style for the wallet address */
 
             .wallet-address {
-                font-size: 14px;
+                font-size: var(--vwk-font-size-medium, ${Font.Size.Medium});
                 margin-left: 8px;
-                font-family: 'Inter', sans-serif;
+                font-family: var(--vwk-font-family, ${Font.Family});
             }
 
             .address-icon {
                 width: 23px;
                 height: 23px;
-                margin-right: 4px;
                 border-radius: 50%;
             }
         `,