137 lines
3.6 KiB
TypeScript
137 lines
3.6 KiB
TypeScript
import { createScope } from '../src'
|
|
import { ExampleSection, theme } from './ssr/helpers'
|
|
|
|
const { define } = createScope('Button')
|
|
|
|
const Button = define('Root', {
|
|
base: 'button',
|
|
|
|
padding: `${theme.spacing.sm}px ${theme.spacing.lg}px`,
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: theme.spacing.xs,
|
|
background: theme.colors.accent,
|
|
color: theme.colors.bg,
|
|
border: `1px solid ${theme.colors.accent}`,
|
|
borderRadius: theme.radius.sm,
|
|
fontSize: 14,
|
|
fontWeight: 400,
|
|
cursor: "pointer",
|
|
transition: "all 0.2s ease",
|
|
userSelect: "none",
|
|
|
|
states: {
|
|
":not(:disabled):hover": {
|
|
background: theme.colors.accentDim,
|
|
borderColor: theme.colors.accentDim,
|
|
},
|
|
":not(:disabled):active": {
|
|
transform: 'translateY(1px)',
|
|
},
|
|
},
|
|
|
|
variants: {
|
|
intent: {
|
|
primary: {
|
|
background: theme.colors.accent,
|
|
color: theme.colors.bg,
|
|
border: `1px solid ${theme.colors.accent}`,
|
|
},
|
|
secondary: {
|
|
background: theme.colors.bgElevated,
|
|
color: theme.colors.fg,
|
|
border: `1px solid ${theme.colors.border}`,
|
|
states: {
|
|
":not(:disabled):hover": {
|
|
borderColor: theme.colors.borderActive,
|
|
}
|
|
}
|
|
},
|
|
danger: {
|
|
background: "#ff0000",
|
|
color: theme.colors.bg,
|
|
border: "1px solid #ff0000",
|
|
states: {
|
|
":not(:disabled):hover": {
|
|
background: "#cc0000",
|
|
borderColor: "#cc0000",
|
|
}
|
|
}
|
|
},
|
|
ghost: {
|
|
background: "transparent",
|
|
color: theme.colors.fgMuted,
|
|
border: `1px solid ${theme.colors.border}`,
|
|
states: {
|
|
":not(:disabled):hover": {
|
|
color: theme.colors.fg,
|
|
borderColor: theme.colors.borderActive,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
size: {
|
|
small: {
|
|
padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
|
|
fontSize: 12,
|
|
},
|
|
large: {
|
|
padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
disabled: {
|
|
opacity: 0.3,
|
|
cursor: "not-allowed",
|
|
},
|
|
},
|
|
})
|
|
|
|
const ButtonRow = define('Row', {
|
|
display: 'flex',
|
|
gap: theme.spacing.md,
|
|
flexWrap: 'wrap',
|
|
alignItems: 'center',
|
|
})
|
|
|
|
export const ButtonExamplesContent = () => (
|
|
<>
|
|
<ExampleSection title="Intents">
|
|
<ButtonRow>
|
|
<Button intent="primary">Primary</Button>
|
|
<Button intent="secondary">Secondary</Button>
|
|
<Button intent="danger">Danger</Button>
|
|
<Button intent="ghost">Ghost</Button>
|
|
</ButtonRow>
|
|
</ExampleSection >
|
|
|
|
<ExampleSection title="Sizes">
|
|
<ButtonRow>
|
|
<Button size="small">Small Button</Button>
|
|
<Button>Medium Button</Button>
|
|
<Button size="large">Large Button</Button>
|
|
</ButtonRow>
|
|
</ExampleSection>
|
|
|
|
<ExampleSection title="Sizes">
|
|
<ButtonRow>
|
|
<Button intent="primary" size="small">Small Primary</Button>
|
|
<Button intent="secondary" size="small">Small Secondary</Button>
|
|
<Button intent="danger" size="large">Large Danger</Button>
|
|
<Button intent="ghost" size="large">Large Ghost</Button>
|
|
</ButtonRow>
|
|
</ExampleSection>
|
|
|
|
<ExampleSection title="Disabled">
|
|
<ButtonRow>
|
|
<Button disabled>Default Disabled</Button>
|
|
<Button intent="primary" disabled>Primary Disabled</Button>
|
|
<Button intent="secondary" disabled>Secondary Disabled</Button>
|
|
<Button intent="danger" disabled>Danger Disabled</Button>
|
|
<Button intent="ghost" disabled>Ghost Disabled</Button>
|
|
</ButtonRow>
|
|
</ExampleSection>
|
|
</>
|
|
)
|