Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
104 lines
2.4 KiB
TypeScript
104 lines
2.4 KiB
TypeScript
export type Type =
|
|
| 'page'
|
|
| 'section'
|
|
| 'heading'
|
|
| 'subheading'
|
|
| 'paragraph'
|
|
| 'label'
|
|
| 'detail'
|
|
| 'hint'
|
|
| 'link'
|
|
|
|
export type Color =
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'success'
|
|
| 'info'
|
|
| 'warning'
|
|
| 'error'
|
|
| 'neutral'
|
|
| 'muted'
|
|
| 'none'
|
|
|
|
export function useTypography(props: {
|
|
class?: string
|
|
ux?: string
|
|
type: Type
|
|
color?: Color
|
|
margin?: boolean
|
|
}) {
|
|
return useStyling(
|
|
'typography',
|
|
{
|
|
slots: {
|
|
base: '',
|
|
},
|
|
variants: {
|
|
type: {
|
|
page: { base: 'text-4xl font-bold tracking-tight leading-tight' },
|
|
section: { base: 'text-3xl font-semibold tracking-tight leading-snug' },
|
|
heading: { base: 'text-2xl font-semibold leading-snug' },
|
|
subheading: { base: 'text-xl font-medium leading-snug' },
|
|
paragraph: { base: 'text-lg leading-relaxed' },
|
|
label: { base: 'text-lg font-bold leading-none' },
|
|
detail: { base: 'text-base leading-snug' },
|
|
hint: { base: 'text-base leading-snug' },
|
|
link: { base: 'text-base leading-snug' },
|
|
},
|
|
color: {
|
|
primary: { base: 'text-primary-600' },
|
|
secondary: { base: 'text-secondary-600' },
|
|
success: { base: 'text-success-600' },
|
|
info: { base: 'text-info-600' },
|
|
warning: { base: 'text-warning-700' },
|
|
error: { base: 'text-error-600' },
|
|
neutral: { base: 'text-neutral-800' },
|
|
muted: { base: 'text-neutral-500' },
|
|
none: {},
|
|
},
|
|
margin: {
|
|
true: {},
|
|
false: {},
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
type: 'page',
|
|
margin: true,
|
|
class: { base: 'mb-4' },
|
|
},
|
|
{
|
|
type: 'section',
|
|
margin: true,
|
|
class: { base: 'mb-4' },
|
|
},
|
|
{
|
|
type: 'heading',
|
|
margin: true,
|
|
class: { base: 'mb-3' },
|
|
},
|
|
{
|
|
type: 'subheading',
|
|
margin: true,
|
|
class: { base: 'mb-2' },
|
|
},
|
|
{
|
|
type: 'paragraph',
|
|
margin: true,
|
|
class: { base: 'mb-4' },
|
|
},
|
|
{
|
|
type: 'label',
|
|
margin: true,
|
|
class: { base: 'mb-2' },
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
color: props.type === 'link' ? 'none' : 'neutral',
|
|
margin: true,
|
|
},
|
|
},
|
|
props
|
|
)
|
|
}
|