feat: dropdown + card

package.json

@@ -40,7 +40,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^6.1.11",
-    "db-ui-toolkit": "github:BootNodeDev/db-ui-toolkit#0.0.5",
+    "db-ui-toolkit": "github:BootNodeDev/db-ui-toolkit#0.0.6",
     "viem": "~2.10.9",
     "wagmi": "^2.9.2",
     "zod": "^3.23.8"

src/styles/base.tsx

@@ -7,29 +7,41 @@ import { css } from 'styled-components'
  * theme-specific and to avoid conflicts with other CSS variables.
  */
 export const base = css`
+  /* Border radius */
   --base-border-radius-xs: 2px;
   --base-border-radius-sm: 4px;
   --base-border-radius: 8px;
   --base-border-radius-xl: 16px;
 
+  /* Grid / flex gap */
   --base-gap-sm: 4px;
   --base-gap: 8px;
   --base-gap-xl: 16px;
 
+  /* Font families */
   --base-font-family: 'Manrope', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
   --base-font-family-code: 'Roboto Mono', 'Courier New', monospace;
 
+  /* Font sizes */
   --base-title-font-size: 2.4rem;
   --base-text-font-size: 1.6rem;
 
+  /* Padding */
+  --base-common-padding-sm: 4px;
+  --base-common-padding: 8px;
+  --base-common-padding-xl: 16px;
+
+  /* Main container horizontal padding */
   --base-padding-mobile: 4px;
   --base-padding-tablet-portrait: 8px;
   --base-padding-tablet-landscape: 8px;
   --base-padding-desktop: 16px;
   --base-padding-desktop-xl: 16px;
 
+  /* Main container max width */
   --base-container-max-width: 1360px;
 
+  /* Button */
   --base-button-border-radius: var(--base-border-radius-sm);
   --base-button-font-size: 1.5rem;
   --base-button-gap: var(--base-gap);

src/styles/globalStyles.tsx

@@ -25,8 +25,8 @@ export const GlobalStyles = createGlobalStyle`
     background-position: 100% 0;
     background-repeat: no-repeat;
     color: var(--theme-color-text, #000);
-    font-family: var(--base-font-family, 'sans-serif');
-    font-size: var(--base-text-size, 16px);
+    font-family: var(--base-font-family, sans-serif);
+    font-size: var(--base-text-font-size, 16px);
     line-height: 1.5;
     outline-color: var(--theme-color-primary, #ccc);
   }

src/styles/themes/dark.tsx

@@ -27,13 +27,19 @@ export const darkTheme = css`
     --theme-color-5: #f7f7f7;
     --theme-color-6: #e2e0e7;
     --theme-color-7: #c5c2cb;
+    --theme-color-8: #800;
+    --theme-color-9: #080;
+    --theme-color-10: #cc0;
 
     /**
      * From here on put the variables that you will use in your CSS elsewhere.
      */
     --theme-color-primary: #c670e5;
     --theme-color-secondary: #8b46a4;
     --theme-color-text: #e2e0e7;
+    --theme-color-danger: var(--theme-color-8);
+    --theme-color-ok: var(--theme-color-9);
+    --theme-color-warning: var(--theme-color-10);
 
     /* Main body */
     --theme-body-background: var(--theme-color-1);
@@ -72,5 +78,28 @@ export const darkTheme = css`
     --theme-button-connect-background-color-disabled: #fff;
     --theme-button-connect-border-color-disabled: #fff;
     --theme-button-connect-color-disabled: var(--theme-color-7);
+
+    /* Dropdown */
+    --theme-dropdown-background-color: #292b43;
+    --theme-dropdown-border-color: #292b43;
+
+    --theme-dropdown-box-shadow: 0 9.6px 13px 0 rgb(0 0 0 / 8%);
+
+    --theme-dropdown-item-background-color: transparent;
+    --theme-dropdown-item-background-color-hover: transparent;
+    --theme-dropdown-item-background-color-active: rgb(0 0 0 / 10%);
+
+    --theme-dropdown-item-color: #fff;
+    --theme-dropdown-item-color-hover: #fff;
+    --theme-dropdown-item-color-active: #fff;
+
+    --theme-dropdown-item-border-color: #4b4d60;
+    --theme-dropdown-item-border-color-hover: #4b4d60;
+    --theme-dropdown-item-border-color-active: #4b4d60;
+
+    /* Card */
+    --theme-card-background-color: #292b43;
+    --theme-card-border-color: #292b43;
+    --theme-card-box-shadow: 0 9.6px 13px 0 rgb(0 0 0 / 8%);
   }
 `

src/styles/themes/light.tsx

@@ -29,13 +29,19 @@ export const lightTheme = css`
     --theme-color-7: #c5c2cb;
     --theme-color-8: #f6f6f6;
     --theme-color-9: #f8f8f8;
+    --theme-color-10: #800;
+    --theme-color-11: #080;
+    --theme-color-12: #cc0;
 
     /**
      * From here on put the variables that you will use in your CSS elsewhere.
      */
     --theme-color-primary: var(--theme-color-1);
     --theme-color-secondary: var(--theme-color-2);
     --theme-color-text: var(--theme-color-3);
+    --theme-color-danger: var(--theme-color-10);
+    --theme-color-ok: var(--theme-color-11);
+    --theme-color-warning: var(--theme-color-12);
 
     /* Main body */
     --theme-body-background: linear-gradient(
@@ -78,5 +84,28 @@ export const lightTheme = css`
     --theme-button-connect-background-color-disabled: #fff;
     --theme-button-connect-border-color-disabled: #fff;
     --theme-button-connect-color-disabled: var(--theme-color-7);
+
+    /* Dropdown */
+    --theme-dropdown-background-color: #fff;
+    --theme-dropdown-border-color: #fff;
+
+    --theme-dropdown-box-shadow: 0 9.6px 13px 0 rgb(0 0 0 / 8%);
+
+    --theme-dropdown-item-background-color: transparent;
+    --theme-dropdown-item-background-color-hover: transparent;
+    --theme-dropdown-item-background-color-active: rgb(0 0 0 / 10%);
+
+    --theme-dropdown-item-color: #2e3048;
+    --theme-dropdown-item-color-hover: #2e3048;
+    --theme-dropdown-item-color-active: #2e3048;
+
+    --theme-dropdown-item-border-color: #f0f0f0;
+    --theme-dropdown-item-border-color-hover: #f0f0f0;
+    --theme-dropdown-item-border-color-active: #f0f0f0;
+
+    /* Card */
+    --theme-card-background-color: #fff;
+    --theme-card-border-color: #fff;
+    --theme-card-box-shadow: 0 9.6px 13px 0 rgb(0 0 0 / 8%);
   }
 `