UNPKG

@mysten/dapp-kit

Version:

A collection of React hooks and components for interacting with the Sui blockchain and wallets.

51 lines (46 loc) 1.31 kB
// Copyright (c) Mysten Labs, Inc. // SPDX-License-Identifier: Apache-2.0 import type { RecipeVariants } from '@vanilla-extract/recipes'; import { recipe } from '@vanilla-extract/recipes'; import { themeVars } from '../../themes/themeContract.js'; export const buttonVariants = recipe({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: themeVars.fontWeights.medium, ':disabled': { opacity: 0.5, }, }, variants: { variant: { primary: { backgroundColor: themeVars.backgroundColors.primaryButton, color: themeVars.colors.primaryButton, boxShadow: themeVars.shadows.primaryButton, ':hover': { backgroundColor: themeVars.backgroundColors.primaryButtonHover, }, }, outline: { borderWidth: 1, borderStyle: 'solid', borderColor: themeVars.borderColors.outlineButton, color: themeVars.colors.outlineButton, ':hover': { backgroundColor: themeVars.backgroundColors.outlineButtonHover, }, }, }, size: { md: { borderRadius: themeVars.radii.medium, padding: '8px 16px' }, lg: { borderRadius: themeVars.radii.large, padding: '16px 24px ' }, }, }, defaultVariants: { variant: 'primary', size: 'md', }, }); export type ButtonVariants = RecipeVariants<typeof buttonVariants>;