-
-
Notifications
You must be signed in to change notification settings - Fork 779
/
font.ts
115 lines (106 loc) · 2.58 KB
/
font.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
112
113
114
115
import type { Theme } from './types'
export const fontFamily = {
sans: [
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
].join(','),
serif: [
'ui-serif',
'Georgia',
'Cambria',
'"Times New Roman"',
'Times',
'serif',
].join(','),
mono: [
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
].join(','),
} satisfies Theme['fontFamily']
export const fontSize: Theme['fontSize'] = {
'xs': ['0.75rem', '1rem'],
'sm': ['0.875rem', '1.25rem'],
'base': ['1rem', '1.5rem'],
'lg': ['1.125rem', '1.75rem'],
'xl': ['1.25rem', '1.75rem'],
'2xl': ['1.5rem', '2rem'],
'3xl': ['1.875rem', '2.25rem'],
'4xl': ['2.25rem', '2.5rem'],
'5xl': ['3rem', '1'],
'6xl': ['3.75rem', '1'],
'7xl': ['4.5rem', '1'],
'8xl': ['6rem', '1'],
'9xl': ['8rem', '1'],
}satisfies Theme['fontSize']
export const textIndent: Theme['textIndent'] = {
'DEFAULT': '1.5rem',
'xs': '0.5rem',
'sm': '1rem',
'md': '1.5rem',
'lg': '2rem',
'xl': '2.5rem',
'2xl': '3rem',
'3xl': '4rem',
} satisfies Theme['textIndent']
export const textStrokeWidth: Theme['textStrokeWidth'] = {
DEFAULT: '1.5rem',
none: '0',
sm: 'thin',
md: 'medium',
lg: 'thick',
} satisfies Theme['textStrokeWidth']
export const textShadow = {
DEFAULT: ['0 0 1px rgba(0,0,0,0.2)', '0 0 1px rgba(1,0,5,0.1)'],
none: '0 0 rgba(0,0,0,0)',
sm: '1px 1px 3px rgba(36,37,47,0.25)',
md: ['0 1px 2px rgba(30,29,39,0.19)', '1px 2px 4px rgba(54,64,147,0.18)'],
lg: ['3px 3px 6px rgba(0,0,0,0.26)', '0 0 5px rgba(15,3,86,0.22)'],
xl: ['1px 1px 3px rgba(0,0,0,0.29)', '2px 4px 7px rgba(73,64,125,0.35)'],
} satisfies Theme['textShadow']
export const lineHeight = {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
} satisfies Theme['lineHeight']
export const letterSpacing = {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
} satisfies Theme['letterSpacing']
export const fontWeight = {
thin: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
// int[0, 900] -> int
} satisfies Theme['fontWeight']
export const wordSpacing = letterSpacing satisfies Theme['letterSpacing']