-
Notifications
You must be signed in to change notification settings - Fork 0
/
unocss.config.ts
111 lines (106 loc) · 2.19 KB
/
unocss.config.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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import extractorSvelte from '@unocss/extractor-svelte';
import presetMini from '@unocss/preset-mini';
import transformerDirectives from '@unocss/transformer-directives';
import { defineConfig } from 'unocss';
const SHORTCUT_LOOKUP = {
'2k': ['2560px', '1440px'],
'4k': ['4096px', '2160px'],
'8k': ['7680px', '4320px'],
fhd: ['1920px', '1080px'],
h: 'height',
hd: ['1280', '720px'],
'max-h': 'max-height',
'max-w': 'max-width',
'min-h': 'min-height',
'min-w': 'min-width',
sd: ['720', '576px'],
uhd: ['3840px', '2160px'],
w: 'width',
};
const SL = SHORTCUT_LOOKUP;
export default defineConfig({
extractors: [extractorSvelte()],
presets: [presetMini()],
rules: [
[/^m-(\d+)$/, ([, d]) => ({ margin: `calc(${Number.parseInt(d) / 4} * var(--base-margin))` })],
[/^p-(\d+)$/, ([, d]) => ({ padding: `calc(${Number.parseInt(d) / 4} * var(--base-padding))` })],
[
/^wh-(\d+)$/,
([, d]) => ({
height: `${Number.parseInt(d) / 4}rem`,
width: `${Number.parseInt(d) / 4}rem`,
}),
],
[
/^wh-(\d+)px$/,
([, d]) => ({
height: `${d}px`,
width: `${d}px`,
}),
],
[
/^wh-(\d+)%$/,
([, d]) => ({
height: `${d}%`,
width: `${d}%`,
}),
],
[
/^flex-(\d+)$/,
([, d]) => ({
flex: `${d}`,
}),
],
[
/^(w|max-w|min-w|h|max-h|min-h)-half/,
([, type]) => {
const key = SL[type];
return {
[key]: '50%',
};
},
],
[
/^(w|max-w|min-w|h|max-h|min-h)-(sd|hd|fhd|header)/,
([, type, resolution]) => {
const key = SL[type];
return {
[key]: SL[resolution][0],
};
},
],
[
/^wrap-anywhere$/,
() => ({
'overflow-wrap': 'anywhere',
}),
],
[
/^h-content/,
() => ({
height: 'calc(99vh - var(--header-height))',
}),
],
[
/^flip-(x|y)$/,
([, axis]) => ({
transform: `scale${axis === 'x' ? 'X' : 'Y'}(-1)`,
}),
],
],
theme: {
colors: {
dark: 'hsl(28, 10%, 8%)',
'highlight-dark': 'hsl(23, 41%, 37%)',
'highlight-light': 'hsl(30, 100%, 91%)',
light: 'hsl(28, 20%, 98%)',
primary: 'hsl(28, 100%, 46%)',
secondary: 'hsl(42, 100%, 35%)',
},
fontFamily: {
mono: 'Consolas',
sans: 'Consolas',
},
},
transformers: [transformerDirectives()],
});