UNPKG

@patreon/studio

Version:

Patreon Studio Design System

github.com/Patreon/studio

Patreon/studio

90 lines (89 loc) • 4.54 kB
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
import type { GeneratedColorPalette } from '~/types/color-system'; export declare function darkMode(props: GeneratedColorPalette): { '--global-bg-base-default': `#${string}`; '--global-bg-base-hover': `#${string}`; '--global-bg-base-pressed': `#${string}`; '--global-bg-baseAlt-default': `#${string}`; '--global-bg-baseAlt-hover': `#${string}`; '--global-bg-baseAlt-pressed': `#${string}`; '--global-bg-elevated-default': `#${string}`; '--global-bg-elevated-hover': `#${string}`; '--global-bg-elevated-pressed': `#${string}`; '--global-primary-surfaceMuted-default': `#${string}`; '--global-primary-surfaceMuted-hover': `#${string}`; '--global-primary-surfaceMuted-pressed': `#${string}`; '--global-primary-surfaceSubtle-default': `#${string}`; '--global-primary-surfaceSubtle-hover': `#${string}`; '--global-primary-surfaceSubtle-pressed': `#${string}`; '--global-bg-page-default': `#${string}`; '--global-bg-page-hover': `#${string}`; '--global-bg-page-pressed': `#${string}`; '--global-bg-pageAlt-default': `#${string}`; '--global-bg-pageAlt-hover': `#${string}`; '--global-bg-pageAlt-pressed': `#${string}`; '--global-primary-surface-default': `#${string}`; '--global-primary-surface-hover': `#${string}`; '--global-primary-surface-pressed': `#${string}`; '--global-primary-onSurface-default': `#${string}`; '--global-primary-onSurface-hover': `#${string}`; '--global-primary-onSurface-pressed': `#${string}`; '--global-content-primary-default': `#${string}`; '--global-content-primary-hover': `#${string}`; '--global-content-primary-pressed': `#${string}`; '--global-rich-surface-default': `#${string}`; '--global-rich-surface-hover': `#${string}`; '--global-rich-surface-pressed': `#${string}`; '--global-rich-surfaceAlt-default': `#${string}`; '--global-rich-surfaceAlt-hover': `#${string}`; '--global-rich-surfaceAlt-pressed': `#${string}`; '--global-rich-action-default': `#${string}`; '--global-rich-action-hover': `#${string}`; '--global-rich-action-pressed': `#${string}`; '--global-control-surface-default': `#${string}`; '--global-control-surface-hover': `#${string}`; '--global-control-surface-pressed': `#${string}`; }; export declare function lightMode(props: GeneratedColorPalette): { '--global-bg-base-default': `#${string}`; '--global-bg-base-hover': `#${string}`; '--global-bg-base-pressed': `#${string}`; '--global-bg-baseAlt-default': `#${string}`; '--global-bg-baseAlt-hover': `#${string}`; '--global-bg-baseAlt-pressed': `#${string}`; '--global-bg-elevated-default': `#${string}`; '--global-bg-elevated-hover': `#${string}`; '--global-bg-elevated-pressed': `#${string}`; '--global-primary-surfaceMuted-default': `#${string}`; '--global-primary-surfaceMuted-hover': `#${string}`; '--global-primary-surfaceMuted-pressed': `#${string}`; '--global-primary-surfaceSubtle-default': `#${string}`; '--global-primary-surfaceSubtle-hover': `#${string}`; '--global-primary-surfaceSubtle-pressed': `#${string}`; '--global-bg-page-default': `#${string}`; '--global-bg-page-hover': `#${string}`; '--global-bg-page-pressed': `#${string}`; '--global-bg-pageAlt-default': `#${string}`; '--global-bg-pageAlt-hover': `#${string}`; '--global-bg-pageAlt-pressed': `#${string}`; '--global-primary-surface-default': `#${string}`; '--global-primary-surface-hover': `#${string}`; '--global-primary-surface-pressed': `#${string}`; '--global-primary-onSurface-default': `#${string}`; '--global-primary-onSurface-hover': `#${string}`; '--global-primary-onSurface-pressed': `#${string}`; '--global-content-primary-default': `#${string}`; '--global-content-primary-hover': `#${string}`; '--global-content-primary-pressed': `#${string}`; '--global-rich-surface-default': `#${string}`; '--global-rich-surface-hover': `#${string}`; '--global-rich-surface-pressed': `#${string}`; '--global-rich-surfaceAlt-default': `#${string}`; '--global-rich-surfaceAlt-hover': `#${string}`; '--global-rich-surfaceAlt-pressed': `#${string}`; '--global-rich-action-default': `#${string}`; '--global-rich-action-hover': `#${string}`; '--global-rich-action-pressed': `#${string}`; '--global-control-surface-default': `#${string}`; '--global-control-surface-hover': `#${string}`; '--global-control-surface-pressed': `#${string}`; };