-
-
Notifications
You must be signed in to change notification settings - Fork 96
/
theme.ts
114 lines (98 loc) · 3.58 KB
/
theme.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
import type { CSSAtKeyframes } from './css'
export interface ThemeResolver {
<Section extends keyof Theme>(section: Section): Record<string, ThemeSectionType<Theme[Section]>>
<Section extends keyof Theme>(section: Section, key: string | string[]):
| ThemeSectionType<Theme[Section]>
| undefined
<Section extends keyof Theme>(
section: Section,
key: string | string[],
defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>,
): NonNullable<ThemeSectionType<Theme[Section]>>
}
export type Unwrap<T> = T extends string[] ? string : T extends Record<string, infer R> ? R : T
export type ThemeSectionType<T> = T extends ThemeSection<infer R> ? Unwrap<R> : never
export interface ThemeSectionResolverContext {
/**
* No-op function as negated values are automatically infered and do _not_ not to be in the theme.
*/
readonly negative: (
records: Record<string, string | undefined>,
) => Record<string, string | undefined>
readonly breakpoints: (
records: Record<string, string | undefined>,
) => Record<string, string | undefined>
}
export type ThemeSectionRecord<T = string> = Record<string, T | undefined>
export type ThemeSectionResolver<T = string> = (
theme: <T>(keypath: string, defaultValue?: T) => T,
context: ThemeSectionResolverContext,
) => ThemeSectionRecord<T>
export type ThemeSection<T = string> = ThemeSectionRecord<T> | ThemeSectionResolver<T>
export type ThemeColor = string | Record<string, string>
export type ThemeFontSize =
| string
| [size: string, lineHeight: string]
| [size: string, options: { lineHeight?: string; letterSpacing?: string }]
export type ThemeOutline = [outline: string, offset: string]
export interface Theme {
colors: ThemeSection<ThemeColor>
spacing: ThemeSection
durations: ThemeSection<string | string[]>
screens: ThemeSection
animation: ThemeSection<string | string[]>
backgroundColor: ThemeSection<ThemeColor>
backgroundImage: ThemeSection<string | string[]>
backgroundOpacity: ThemeSection
borderColor: ThemeSection<ThemeColor>
borderOpacity: ThemeSection
borderRadius: ThemeSection
borderWidth: ThemeSection
boxShadow: ThemeSection<string | string[]>
divideColor: ThemeSection<ThemeColor>
divideOpacity: ThemeSection
divideWidth: ThemeSection
fill: ThemeSection<ThemeColor>
flex: ThemeSection
fontFamily: ThemeSection<string | string[]>
fontSize: ThemeSection<ThemeFontSize>
fontWeight: ThemeSection
gap: ThemeSection
gradientColorStops: ThemeSection<ThemeColor>
height: ThemeSection
inset: ThemeSection
keyframes: ThemeSection<CSSAtKeyframes>
letterSpacing: ThemeSection
lineHeight: ThemeSection
margin: ThemeSection
maxHeight: ThemeSection
maxWidth: ThemeSection
minHeight: ThemeSection
minWidth: ThemeSection
opacity: ThemeSection
order: ThemeSection
outline: ThemeSection<ThemeOutline>
padding: ThemeSection
placeholderColor: ThemeSection<ThemeColor>
placeholderOpacity: ThemeSection
ringColor: ThemeSection<ThemeColor>
ringOffsetColor: ThemeSection<ThemeColor>
ringOffsetWidth: ThemeSection
ringOpacity: ThemeSection
ringWidth: ThemeSection
rotate: ThemeSection
scale: ThemeSection
skew: ThemeSection
space: ThemeSection
stroke: ThemeSection<ThemeColor>
strokeWidth: ThemeSection
textColor: ThemeSection<ThemeColor>
textOpacity: ThemeSection
transitionDelay: ThemeSection<string | string[]>
transitionDuration: ThemeSection<string | string[]>
transitionProperty: ThemeSection<string | string[]>
transitionTimingFunction: ThemeSection<string | string[]>
translate: ThemeSection
width: ThemeSection
zIndex: ThemeSection
}