@iota/dapp-kit 0.1.1 → 0.2.0

package/dist/esm/themes/darkTheme.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeVars } from './themeContract.js';
+export declare const darkTheme: ThemeVars;

package/dist/esm/themes/darkTheme.js

@@ -0,0 +1,67 @@
+// src/themes/darkTheme.ts
+var darkTheme = {
+  blurs: {
+    modalOverlay: "blur(12px)"
+  },
+  backgroundColors: {
+    primaryButton: "#253041",
+    primaryButtonHover: "#313D50",
+    outlineButtonHover: "#313D50",
+    modalOverlay: "rgba(0, 47, 109, 0.72)",
+    modalPrimary: "#0f141c",
+    modalSecondary: "#171d26",
+    iconButton: "transparent",
+    dropdownMenu: "#0f141c",
+    dropdownMenuSeparator: "#bed8ff14",
+    walletItemSelected: "#171D26",
+    walletItemHover: "rgba(190, 216, 255, 0.12)",
+    scrollThumb: "#3c4656"
+  },
+  borderColors: {
+    outlineButton: "#8892A1"
+  },
+  colors: {
+    primaryButton: "#E3EAF6",
+    outlineButtonHover: "#171D26",
+    iconButton: "#E3EAF6",
+    body: "#E3EAF6",
+    bodyMuted: "#8892A1",
+    bodyDanger: "#FFB0BE"
+  },
+  radii: {
+    small: "6px",
+    medium: "8px",
+    large: "12px",
+    xlarge: "16px",
+    full: "120px"
+  },
+  fontWeights: {
+    normal: "400",
+    medium: "500",
+    bold: "600"
+  },
+  fontSizes: {
+    small: "14px",
+    medium: "16px",
+    large: "18px",
+    xlarge: "20px"
+  },
+  typography: {
+    fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    fontStyle: "normal",
+    lineHeight: "24px",
+    letterSpacing: "0.1px"
+  },
+  spacing: {
+    xxsmall: "4px",
+    xsmall: "8px",
+    small: "12px",
+    medium: "16px",
+    large: "24px",
+    xlarge: "32px"
+  }
+};
+export {
+  darkTheme
+};
+//# sourceMappingURL=darkTheme.js.map

package/dist/esm/themes/darkTheme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/themes/darkTheme.ts"],
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ThemeVars } from './themeContract.js';\n\nexport const darkTheme: ThemeVars = {\n    blurs: {\n        modalOverlay: 'blur(12px)',\n    },\n    backgroundColors: {\n        primaryButton: '#253041',\n        primaryButtonHover: '#313D50',\n        outlineButtonHover: '#313D50',\n        modalOverlay: 'rgba(0, 47, 109, 0.72)',\n        modalPrimary: '#0f141c',\n        modalSecondary: '#171d26',\n        iconButton: 'transparent',\n        dropdownMenu: '#0f141c',\n        dropdownMenuSeparator: '#bed8ff14',\n        walletItemSelected: '#171D26',\n        walletItemHover: 'rgba(190, 216, 255, 0.12)',\n        scrollThumb: '#3c4656',\n    },\n    borderColors: {\n        outlineButton: '#8892A1',\n    },\n    colors: {\n        primaryButton: '#E3EAF6',\n        outlineButtonHover: '#171D26',\n        iconButton: '#E3EAF6',\n        body: '#E3EAF6',\n        bodyMuted: '#8892A1',\n        bodyDanger: '#FFB0BE',\n    },\n    radii: {\n        small: '6px',\n        medium: '8px',\n        large: '12px',\n        xlarge: '16px',\n        full: '120px',\n    },\n    fontWeights: {\n        normal: '400',\n        medium: '500',\n        bold: '600',\n    },\n    fontSizes: {\n        small: '14px',\n        medium: '16px',\n        large: '18px',\n        xlarge: '20px',\n    },\n    typography: {\n        fontFamily:\n            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n        fontStyle: 'normal',\n        lineHeight: '24px',\n        letterSpacing: '0.1px',\n    },\n    spacing: {\n        xxsmall: '4px',\n        xsmall: '8px',\n        small: '12px',\n        medium: '16px',\n        large: '24px',\n        xlarge: '32px',\n    },\n};\n"],
+  "mappings": ";AAMO,IAAM,YAAuB;AAAA,EAChC,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YACI;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AACJ;",
+  "names": []
+}

package/dist/esm/themes/lightTheme.js

@@ -1,42 +1,39 @@
 // src/themes/lightTheme.ts
 var lightTheme = {
   blurs: {
-    modalOverlay: "blur(0)"
+    modalOverlay: "blur(12px)"
   },
   backgroundColors: {
-    primaryButton: "#F6F7F9",
-    primaryButtonHover: "#F0F2F5",
-    outlineButtonHover: "#F4F4F5",
-    modalOverlay: "rgba(24 36 53 / 20%)",
-    modalPrimary: "white",
-    modalSecondary: "#F7F8F8",
+    primaryButton: "#DDE4F0",
+    primaryButtonHover: "#002F6D14",
+    outlineButtonHover: "#002F6D14",
+    modalOverlay: "rgba(0, 47, 109, 0.72)",
+    modalPrimary: "#ffffff",
+    modalSecondary: "#e3eaf6",
     iconButton: "transparent",
-    iconButtonHover: "#F0F1F2",
     dropdownMenu: "#FFFFFF",
-    dropdownMenuSeparator: "#F3F6F8",
-    walletItemSelected: "white",
-    walletItemHover: "#3C424226"
+    dropdownMenuSeparator: "#002f6d14",
+    walletItemSelected: "#EFF4FA",
+    walletItemHover: "rgba(0, 103, 238, 0.12)",
+    scrollThumb: "#cad4e2"
   },
   borderColors: {
-    outlineButton: "#E4E4E7"
+    outlineButton: "#6E7787"
   },
   colors: {
-    primaryButton: "#373737",
-    outlineButton: "#373737",
-    iconButton: "#000000",
-    body: "#182435",
-    bodyMuted: "#767A81",
-    bodyDanger: "#FF794B"
+    primaryButton: "#171D26",
+    outlineButtonHover: "#E3EAF6",
+    iconButton: "#171D26",
+    body: "#171D26",
+    bodyMuted: "#545E6E",
+    bodyDanger: "#B51431"
   },
   radii: {
     small: "6px",
     medium: "8px",
     large: "12px",
-    xlarge: "16px"
-  },
-  shadows: {
-    primaryButton: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-    walletItemSelected: "0px 2px 6px rgba(0, 0, 0, 0.05)"
+    xlarge: "16px",
+    full: "120px"
   },
   fontWeights: {
     normal: "400",
@@ -52,8 +49,16 @@ var lightTheme = {
   typography: {
     fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
     fontStyle: "normal",
-    lineHeight: "1.3",
-    letterSpacing: "1"
+    lineHeight: "24px",
+    letterSpacing: "0.1px"
+  },
+  spacing: {
+    xxsmall: "4px",
+    xsmall: "8px",
+    small: "12px",
+    medium: "16px",
+    large: "24px",
+    xlarge: "32px"
   }
 };
 export {

package/dist/esm/themes/lightTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/themes/lightTheme.ts"],
-  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ThemeVars } from './themeContract.js';\n\nexport const lightTheme: ThemeVars = {\n    blurs: {\n        modalOverlay: 'blur(0)',\n    },\n    backgroundColors: {\n        primaryButton: '#F6F7F9',\n        primaryButtonHover: '#F0F2F5',\n        outlineButtonHover: '#F4F4F5',\n        modalOverlay: 'rgba(24 36 53 / 20%)',\n        modalPrimary: 'white',\n        modalSecondary: '#F7F8F8',\n        iconButton: 'transparent',\n        iconButtonHover: '#F0F1F2',\n        dropdownMenu: '#FFFFFF',\n        dropdownMenuSeparator: '#F3F6F8',\n        walletItemSelected: 'white',\n        walletItemHover: '#3C424226',\n    },\n    borderColors: {\n        outlineButton: '#E4E4E7',\n    },\n    colors: {\n        primaryButton: '#373737',\n        outlineButton: '#373737',\n        iconButton: '#000000',\n        body: '#182435',\n        bodyMuted: '#767A81',\n        bodyDanger: '#FF794B',\n    },\n    radii: {\n        small: '6px',\n        medium: '8px',\n        large: '12px',\n        xlarge: '16px',\n    },\n    shadows: {\n        primaryButton: '0px 4px 12px rgba(0, 0, 0, 0.1)',\n        walletItemSelected: '0px 2px 6px rgba(0, 0, 0, 0.05)',\n    },\n    fontWeights: {\n        normal: '400',\n        medium: '500',\n        bold: '600',\n    },\n    fontSizes: {\n        small: '14px',\n        medium: '16px',\n        large: '18px',\n        xlarge: '20px',\n    },\n    typography: {\n        fontFamily:\n            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n        fontStyle: 'normal',\n        lineHeight: '1.3',\n        letterSpacing: '1',\n    },\n};\n"],
-  "mappings": ";AAMO,IAAM,aAAwB;AAAA,EACjC,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,EACrB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACL,eAAe;AAAA,IACf,oBAAoB;AAAA,EACxB;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YACI;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AACJ;",
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ThemeVars } from './themeContract.js';\n\nexport const lightTheme: ThemeVars = {\n    blurs: {\n        modalOverlay: 'blur(12px)',\n    },\n    backgroundColors: {\n        primaryButton: '#DDE4F0',\n        primaryButtonHover: '#002F6D14',\n        outlineButtonHover: '#002F6D14',\n        modalOverlay: 'rgba(0, 47, 109, 0.72)',\n        modalPrimary: '#ffffff',\n        modalSecondary: '#e3eaf6',\n        iconButton: 'transparent',\n        dropdownMenu: '#FFFFFF',\n        dropdownMenuSeparator: '#002f6d14',\n        walletItemSelected: '#EFF4FA',\n        walletItemHover: 'rgba(0, 103, 238, 0.12)',\n        scrollThumb: '#cad4e2',\n    },\n    borderColors: {\n        outlineButton: '#6E7787',\n    },\n    colors: {\n        primaryButton: '#171D26',\n        outlineButtonHover: '#E3EAF6',\n        iconButton: '#171D26',\n        body: '#171D26',\n        bodyMuted: '#545E6E',\n        bodyDanger: '#B51431',\n    },\n    radii: {\n        small: '6px',\n        medium: '8px',\n        large: '12px',\n        xlarge: '16px',\n        full: '120px',\n    },\n    fontWeights: {\n        normal: '400',\n        medium: '500',\n        bold: '600',\n    },\n    fontSizes: {\n        small: '14px',\n        medium: '16px',\n        large: '18px',\n        xlarge: '20px',\n    },\n    typography: {\n        fontFamily:\n            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n        fontStyle: 'normal',\n        lineHeight: '24px',\n        letterSpacing: '0.1px',\n    },\n    spacing: {\n        xxsmall: '4px',\n        xsmall: '8px',\n        small: '12px',\n        medium: '16px',\n        large: '24px',\n        xlarge: '32px',\n    },\n};\n"],
+  "mappings": ";AAMO,IAAM,aAAwB;AAAA,EACjC,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,aAAa;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YACI;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AACJ;",
   "names": []
 }

package/dist/esm/themes/themeContract.d.ts

@@ -12,16 +12,16 @@ declare const themeContractValues: {
         modalPrimary: string;
         modalSecondary: string;
         iconButton: string;
-        iconButtonHover: string;
         dropdownMenu: string;
         dropdownMenuSeparator: string;
+        scrollThumb: string;
     };
     borderColors: {
         outlineButton: string;
     };
     colors: {
         primaryButton: string;
-        outlineButton: string;
+        outlineButtonHover: string;
         body: string;
         bodyMuted: string;
         bodyDanger: string;
@@ -32,10 +32,7 @@ declare const themeContractValues: {
         medium: string;
         large: string;
         xlarge: string;
-    };
-    shadows: {
-        primaryButton: string;
-        walletItemSelected: string;
+        full: string;
     };
     fontWeights: {
         normal: string;
@@ -54,6 +51,14 @@ declare const themeContractValues: {
         lineHeight: string;
         letterSpacing: string;
     };
+    spacing: {
+        xxsmall: string;
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
 };
 export type ThemeVars = typeof themeContractValues;
 /**
@@ -94,16 +99,16 @@ export declare const themeVars: {
         modalPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         modalSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         iconButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        iconButtonHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         dropdownMenu: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         dropdownMenuSeparator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        scrollThumb: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     borderColors: {
         outlineButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     colors: {
         primaryButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        outlineButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        outlineButtonHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         bodyMuted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         bodyDanger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -114,10 +119,7 @@ export declare const themeVars: {
         medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    shadows: {
-        primaryButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        walletItemSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontWeights: {
         normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -136,5 +138,13 @@ export declare const themeVars: {
         lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    spacing: {
+        xxsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
 };
 export {};

package/dist/esm/themes/themeContract.js

@@ -14,16 +14,16 @@ var themeContractValues = {
     modalPrimary: "",
     modalSecondary: "",
     iconButton: "",
-    iconButtonHover: "",
     dropdownMenu: "",
-    dropdownMenuSeparator: ""
+    dropdownMenuSeparator: "",
+    scrollThumb: ""
   },
   borderColors: {
     outlineButton: ""
   },
   colors: {
     primaryButton: "",
-    outlineButton: "",
+    outlineButtonHover: "",
     body: "",
     bodyMuted: "",
     bodyDanger: "",
@@ -33,11 +33,8 @@ var themeContractValues = {
     small: "",
     medium: "",
     large: "",
-    xlarge: ""
-  },
-  shadows: {
-    primaryButton: "",
-    walletItemSelected: ""
+    xlarge: "",
+    full: ""
   },
   fontWeights: {
     normal: "",
@@ -55,6 +52,14 @@ var themeContractValues = {
     fontStyle: "",
     lineHeight: "",
     letterSpacing: ""
+  },
+  spacing: {
+    xxsmall: "",
+    xsmall: "",
+    small: "",
+    medium: "",
+    large: "",
+    xlarge: ""
   }
 };
 var themeVars = createGlobalThemeContract(

package/dist/esm/themes/themeContract.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/themes/themeContract.ts"],
-  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createGlobalThemeContract } from '@vanilla-extract/css';\n\nconst themeContractValues = {\n    blurs: {\n        modalOverlay: '',\n    },\n    backgroundColors: {\n        primaryButton: '',\n        primaryButtonHover: '',\n        outlineButtonHover: '',\n        walletItemHover: '',\n        walletItemSelected: '',\n        modalOverlay: '',\n        modalPrimary: '',\n        modalSecondary: '',\n        iconButton: '',\n        iconButtonHover: '',\n        dropdownMenu: '',\n        dropdownMenuSeparator: '',\n    },\n    borderColors: {\n        outlineButton: '',\n    },\n    colors: {\n        primaryButton: '',\n        outlineButton: '',\n        body: '',\n        bodyMuted: '',\n        bodyDanger: '',\n        iconButton: '',\n    },\n    radii: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n    shadows: {\n        primaryButton: '',\n        walletItemSelected: '',\n    },\n    fontWeights: {\n        normal: '',\n        medium: '',\n        bold: '',\n    },\n    fontSizes: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n    typography: {\n        fontFamily: '',\n        fontStyle: '',\n        lineHeight: '',\n        letterSpacing: '',\n    },\n};\n\nexport type ThemeVars = typeof themeContractValues;\n\n/**\n * A custom theme that is enabled when various conditions are\n */\nexport type DynamicTheme = {\n    /**\n     * An optional media query required for the given theme to be enabled. This is useful\n     * when you want the theme of your application to automatically switch depending on\n     * a media feature.\n     *\n     * @example '(prefers-color-scheme: dark)'\n     */\n    mediaQuery?: string;\n\n    /**\n     * An optional CSS selector required for the given theme to be enabled. This is useful\n     * when you have a manual theme switcher on your application that sets a top-level\n     * class name or data-attribute to control the current theme.\n     *\n     * @example '.data-dark'\n     */\n    selector?: string;\n\n    /** The theme definitions that will be set when the selector and mediaQuery criteria are matched. */\n    variables: ThemeVars;\n};\n\nexport type Theme = ThemeVars | DynamicTheme[];\n\nexport const themeVars = createGlobalThemeContract(\n    themeContractValues,\n    (_, path) => `dapp-kit-${path.join('-')}`,\n);\n"],
-  "mappings": ";AAIA,SAAS,iCAAiC;AAE1C,IAAM,sBAAsB;AAAA,EACxB,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,uBAAuB;AAAA,EAC3B;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACL,eAAe;AAAA,IACf,oBAAoB;AAAA,EACxB;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AACJ;AAgCO,IAAM,YAAY;AAAA,EACrB;AAAA,EACA,CAAC,GAAG,SAAS,YAAY,KAAK,KAAK,GAAG;AAC1C;",
+  "sourcesContent": ["// Copyright (c) Mysten Labs, Inc.\n// Modifications Copyright (c) 2024 IOTA Stiftung\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createGlobalThemeContract } from '@vanilla-extract/css';\n\nconst themeContractValues = {\n    blurs: {\n        modalOverlay: '',\n    },\n    backgroundColors: {\n        primaryButton: '',\n        primaryButtonHover: '',\n        outlineButtonHover: '',\n        walletItemHover: '',\n        walletItemSelected: '',\n        modalOverlay: '',\n        modalPrimary: '',\n        modalSecondary: '',\n        iconButton: '',\n        dropdownMenu: '',\n        dropdownMenuSeparator: '',\n        scrollThumb: '',\n    },\n    borderColors: {\n        outlineButton: '',\n    },\n    colors: {\n        primaryButton: '',\n        outlineButtonHover: '',\n        body: '',\n        bodyMuted: '',\n        bodyDanger: '',\n        iconButton: '',\n    },\n    radii: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n        full: '',\n    },\n    fontWeights: {\n        normal: '',\n        medium: '',\n        bold: '',\n    },\n    fontSizes: {\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n    typography: {\n        fontFamily: '',\n        fontStyle: '',\n        lineHeight: '',\n        letterSpacing: '',\n    },\n    spacing: {\n        xxsmall: '',\n        xsmall: '',\n        small: '',\n        medium: '',\n        large: '',\n        xlarge: '',\n    },\n};\n\nexport type ThemeVars = typeof themeContractValues;\n\n/**\n * A custom theme that is enabled when various conditions are\n */\nexport type DynamicTheme = {\n    /**\n     * An optional media query required for the given theme to be enabled. This is useful\n     * when you want the theme of your application to automatically switch depending on\n     * a media feature.\n     *\n     * @example '(prefers-color-scheme: dark)'\n     */\n    mediaQuery?: string;\n\n    /**\n     * An optional CSS selector required for the given theme to be enabled. This is useful\n     * when you have a manual theme switcher on your application that sets a top-level\n     * class name or data-attribute to control the current theme.\n     *\n     * @example '.data-dark'\n     */\n    selector?: string;\n\n    /** The theme definitions that will be set when the selector and mediaQuery criteria are matched. */\n    variables: ThemeVars;\n};\n\nexport type Theme = ThemeVars | DynamicTheme[];\n\nexport const themeVars = createGlobalThemeContract(\n    themeContractValues,\n    (_, path) => `dapp-kit-${path.join('-')}`,\n);\n"],
+  "mappings": ";AAIA,SAAS,iCAAiC;AAE1C,IAAM,sBAAsB;AAAA,EACxB,OAAO;AAAA,IACH,cAAc;AAAA,EAClB;AAAA,EACA,kBAAkB;AAAA,IACd,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,aAAa;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACV,eAAe;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,IACJ,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,EACZ;AACJ;AAgCO,IAAM,YAAY;AAAA,EACrB;AAAA,EACA,CAAC,GAAG,SAAS,YAAY,KAAK,KAAK,GAAG;AAC1C;",
   "names": []
 }