47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { define } from '@because/forge'
|
|
import { theme } from '../themes'
|
|
|
|
export const Button = define('Button', {
|
|
base: 'button',
|
|
padding: '6px 12px',
|
|
background: theme('colors-bgElement'),
|
|
border: `1px solid ${theme('colors-border')}`,
|
|
borderRadius: theme('radius-md'),
|
|
color: theme('colors-text'),
|
|
fontSize: 13,
|
|
cursor: 'pointer',
|
|
selectors: {
|
|
'&:hover': { background: theme('colors-bgHover') },
|
|
},
|
|
variants: {
|
|
variant: {
|
|
danger: { borderColor: theme('colors-dangerBorder'), color: theme('colors-dangerText') },
|
|
primary: { background: theme('colors-primary'), borderColor: theme('colors-primary'), color: theme('colors-primaryText') },
|
|
},
|
|
},
|
|
})
|
|
|
|
export const ActionBar = define('ActionBar', {
|
|
display: 'flex',
|
|
gap: 8,
|
|
marginTop: 24,
|
|
paddingTop: 24,
|
|
borderTop: `1px solid ${theme('colors-border')}`,
|
|
})
|
|
|
|
export const NewAppButton = define('NewAppButton', {
|
|
display: 'block',
|
|
padding: '8px 12px',
|
|
background: theme('colors-bgElement'),
|
|
border: `1px solid ${theme('colors-border')}`,
|
|
borderRadius: theme('radius-md'),
|
|
color: theme('colors-textMuted'),
|
|
textDecoration: 'none',
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
cursor: 'pointer',
|
|
selectors: {
|
|
'&:hover': { background: theme('colors-bgHover'), color: theme('colors-text') },
|
|
},
|
|
})
|