diff --git a/.changeset/solid-roses-cheer.md b/.changeset/solid-roses-cheer.md new file mode 100644 index 000000000..213b59cb4 --- /dev/null +++ b/.changeset/solid-roses-cheer.md @@ -0,0 +1,5 @@ +--- +'@mysten/dapp-kit-core': minor +--- + +Added new CSS variables following --dapp-kit-\* syntatics to customize button sizing and layout diff --git a/packages/dapp-kit-next/packages/dapp-kit-core/src/web/internal/button.styles.ts b/packages/dapp-kit-next/packages/dapp-kit-core/src/web/internal/button.styles.ts index e5a91a19d..1c5596232 100644 --- a/packages/dapp-kit-next/packages/dapp-kit-core/src/web/internal/button.styles.ts +++ b/packages/dapp-kit-next/packages/dapp-kit-core/src/web/internal/button.styles.ts @@ -19,11 +19,12 @@ export const styles = [ justify-content: center; align-items: center; gap: 12px; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - height: 40px; + padding-left: var(--dapp-kit-button-padding-x); + padding-right: var(--dapp-kit-button-padding-x); + padding-top: var(--dapp-kit-button-padding-y); + padding-bottom: var(--dapp-kit-button-padding-y); + height: var(--dapp-kit-button-height); + min-width: var(--dapp-kit-button-min-width); } .button:focus-visible { diff --git a/packages/dapp-kit-next/packages/dapp-kit-core/src/web/styles/theme.ts b/packages/dapp-kit-next/packages/dapp-kit-core/src/web/styles/theme.ts index f741714d0..5663b2869 100644 --- a/packages/dapp-kit-next/packages/dapp-kit-core/src/web/styles/theme.ts +++ b/packages/dapp-kit-next/packages/dapp-kit-core/src/web/styles/theme.ts @@ -32,6 +32,14 @@ export const themeStyles = css` --dapp-kit-radius-lg: var(--dapp-kit-radius); --dapp-kit-radius-xl: calc(var(--dapp-kit-radius) + 4px); + /** Width and Height */ + --dapp-kit-button-height: 40px; + --dapp-kit-button-min-width: 120px; + + /** Padding */ + --dapp-kit-button-padding-x: 16px; + --dapp-kit-button-padding-y: 8px; + /** Typography */ --dapp-kit-font-sans: var( --font-sans,