/
shortcuts.ts
32 lines (30 loc) 路 1.35 KB
/
shortcuts.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import type { UserShortcuts } from '@unocss/core'
const buttonBase = 'appearance-none unselectable inline-flex items-center justify-center border leading-none px-3 py-2 rounded disabled:opacity-50'
export const shortcuts: UserShortcuts = [
[
/^(?:du-)?title$/,
() => 'text-contrast-higher font-heading font-600 leading-heading',
],
[
/^(?:du-)?control$/,
() =>
'appearance-none block w-full leading-none border-contrast-lower px-3 py-2 rounded focus:border-primary focus-visible:outline-none',
],
[
/^(?:du-)?button-(.+?)(?:-?(outlined))?$/,
([, color, outlined]) =>
color === 'text'
? `${buttonBase} bg-transparent border-transparent text-theme-base hover:text-theme-base hover:decoration-underline focus:decoration-underline`
: outlined
? `${buttonBase} bg-transparent border-${color} text-${color} outline-${color} hover:bg-${color} hover:text-white focus:bg-${color} focus:text-white`
: `${buttonBase} bg-${color} border-transparent text-white outline-${color} hover:bg-${color}-600 hover:text-white focus:bg-${color}-600`,
],
[/^column-(\d+)$/, ([, d]) => `flex-none w-${d}/12`],
{
'columns': 'flex flex-wrap',
'column': 'block flex-1',
'column-narrow': 'block flex-[0_0_auto] w-auto',
'column-auto': 'block flex-1 w-auto',
'column-full': 'block flex-none w-full',
},
]