-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.ts
104 lines (100 loc) · 4.32 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
import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
export const myCustomTheme01: CustomThemeConfig = {
name: 'my-custom-theme01',
properties: {
// =~= Theme Properties =~=
"--theme-font-family-base": `system-ui`,
"--theme-font-family-heading": `system-ui`,
"--theme-font-color-base": "0 0 0",
"--theme-font-color-dark": "255 255 255",
"--theme-rounded-base": "8px",
"--theme-rounded-container": "12px",
"--theme-border-base": "4px",
// =~= Theme On-X Colors =~=
"--on-primary": "0 0 0",
"--on-secondary": "255 255 255",
"--on-tertiary": "255 255 255",
"--on-success": "0 0 0",
"--on-warning": "0 0 0",
"--on-error": "0 0 0",
"--on-surface": "255 255 255",
// =~= Theme Colors =~=
// primary | #c1e8ff
"--color-primary-50": "246 252 255", // #f6fcff
"--color-primary-100": "243 250 255", // #f3faff
"--color-primary-200": "240 249 255", // #f0f9ff
"--color-primary-300": "230 246 255", // #e6f6ff
"--color-primary-400": "212 239 255", // #d4efff
"--color-primary-500": "193 232 255", // #c1e8ff
"--color-primary-600": "174 209 230", // #aed1e6
"--color-primary-700": "145 174 191", // #91aebf
"--color-primary-800": "116 139 153", // #748b99
"--color-primary-900": "95 114 125", // #5f727d
// secondary | #4F46E5
"--color-secondary-50": "229 227 251", // #e5e3fb
"--color-secondary-100": "220 218 250", // #dcdafa
"--color-secondary-200": "211 209 249", // #d3d1f9
"--color-secondary-300": "185 181 245", // #b9b5f5
"--color-secondary-400": "132 126 237", // #847eed
"--color-secondary-500": "79 70 229", // #4F46E5
"--color-secondary-600": "71 63 206", // #473fce
"--color-secondary-700": "59 53 172", // #3b35ac
"--color-secondary-800": "47 42 137", // #2f2a89
"--color-secondary-900": "39 34 112", // #272270
// tertiary | #052659
"--color-tertiary-50": "218 222 230", // #dadee6
"--color-tertiary-100": "205 212 222", // #cdd4de
"--color-tertiary-200": "193 201 214", // #c1c9d6
"--color-tertiary-300": "155 168 189", // #9ba8bd
"--color-tertiary-400": "80 103 139", // #50678b
"--color-tertiary-500": "5 38 89", // #052659
"--color-tertiary-600": "5 34 80", // #052250
"--color-tertiary-700": "4 29 67", // #041d43
"--color-tertiary-800": "3 23 53", // #031735
"--color-tertiary-900": "2 19 44", // #02132c
// success | #daebe3
"--color-success-50": "249 252 251", // #f9fcfb
"--color-success-100": "248 251 249", // #f8fbf9
"--color-success-200": "246 250 248", // #f6faf8
"--color-success-300": "240 247 244", // #f0f7f4
"--color-success-400": "229 241 235", // #e5f1eb
"--color-success-500": "218 235 227", // #daebe3
"--color-success-600": "196 212 204", // #c4d4cc
"--color-success-700": "164 176 170", // #a4b0aa
"--color-success-800": "131 141 136", // #838d88
"--color-success-900": "107 115 111", // #6b736f
// warning | #f3c382
"--color-warning-50": "253 246 236", // #fdf6ec
"--color-warning-100": "253 243 230", // #fdf3e6
"--color-warning-200": "252 240 224", // #fcf0e0
"--color-warning-300": "250 231 205", // #fae7cd
"--color-warning-400": "247 213 168", // #f7d5a8
"--color-warning-500": "243 195 130", // #f3c382
"--color-warning-600": "219 176 117", // #dbb075
"--color-warning-700": "182 146 98", // #b69262
"--color-warning-800": "146 117 78", // #92754e
"--color-warning-900": "119 96 64", // #776040
// error | #7da0ca
"--color-error-50": "236 241 247", // #ecf1f7
"--color-error-100": "229 236 244", // #e5ecf4
"--color-error-200": "223 231 242", // #dfe7f2
"--color-error-300": "203 217 234", // #cbd9ea
"--color-error-400": "164 189 218", // #a4bdda
"--color-error-500": "125 160 202", // #7da0ca
"--color-error-600": "113 144 182", // #7190b6
"--color-error-700": "94 120 152", // #5e7898
"--color-error-800": "75 96 121", // #4b6079
"--color-error-900": "61 78 99", // #3d4e63
// surface | #021024
"--color-surface-50": "217 219 222", // #d9dbde
"--color-surface-100": "204 207 211", // #cccfd3
"--color-surface-200": "192 195 200", // #c0c3c8
"--color-surface-300": "154 159 167", // #9a9fa7
"--color-surface-400": "78 88 102", // #4e5866
"--color-surface-500": "2 16 36", // #021024
"--color-surface-600": "2 14 32", // #020e20
"--color-surface-700": "2 12 27", // #020c1b
"--color-surface-800": "1 10 22", // #010a16
"--color-surface-900": "1 8 18", // #010812
}
}