voycar-frontend/custom-color-theme.js at main · solid-stack-solutions/voycar-frontend · GitHub

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
// generated with https://www.skeleton.dev/docs/generator
export const customColorTheme = {
    name: "custom-color-theme",
    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": "9999px",
        "--theme-rounded-container": "8px",
        "--theme-border-base": "1px",
        // =~= Theme On-X Colors =~=
        "--on-primary": "0 0 0",
        "--on-secondary": "255 255 255",
        "--on-tertiary": "0 0 0",
        "--on-success": "0 0 0",
        "--on-warning": "0 0 0",
        "--on-error": "0 0 0",
        "--on-surface": "255 255 255",
        // =~= Theme Colors  =~=
        // primary | #789a55
        "--color-primary-50": "235 240 230", // #ebf0e6
        "--color-primary-100": "228 235 221", // #e4ebdd
        "--color-primary-200": "221 230 213", // #dde6d5
        "--color-primary-300": "201 215 187", // #c9d7bb
        "--color-primary-400": "161 184 136", // #a1b888
        "--color-primary-500": "120 154 85", // #789a55
        "--color-primary-600": "108 139 77", // #6c8b4d
        "--color-primary-700": "90 116 64", // #5a7440
        "--color-primary-800": "72 92 51", // #485c33
        "--color-primary-900": "59 75 42", // #3b4b2a
        // secondary | #2d6a4f
        "--color-secondary-50": "224 233 229", // #e0e9e5
        "--color-secondary-100": "213 225 220", // #d5e1dc
        "--color-secondary-200": "203 218 211", // #cbdad3
        "--color-secondary-300": "171 195 185", // #abc3b9
        "--color-secondary-400": "108 151 132", // #6c9784
        "--color-secondary-500": "45 106 79", // #2d6a4f
        "--color-secondary-600": "41 95 71", // #295f47
        "--color-secondary-700": "34 80 59", // #22503b
        "--color-secondary-800": "27 64 47", // #1b402f
        "--color-secondary-900": "22 52 39", // #163427
        // tertiary | #7cc69d
        "--color-tertiary-50": "235 246 240", // #ebf6f0
        "--color-tertiary-100": "229 244 235", // #e5f4eb
        "--color-tertiary-200": "222 241 231", // #def1e7
        "--color-tertiary-300": "203 232 216", // #cbe8d8
        "--color-tertiary-400": "163 215 186", // #a3d7ba
        "--color-tertiary-500": "124 198 157", // #7cc69d
        "--color-tertiary-600": "112 178 141", // #70b28d
        "--color-tertiary-700": "93 149 118", // #5d9576
        "--color-tertiary-800": "74 119 94", // #4a775e
        "--color-tertiary-900": "61 97 77", // #3d614d
        // success | #70fe82
        "--color-success-50": "234 255 236", // #eaffec
        "--color-success-100": "226 255 230", // #e2ffe6
        "--color-success-200": "219 255 224", // #dbffe0
        "--color-success-300": "198 255 205", // #c6ffcd
        "--color-success-400": "155 254 168", // #9bfea8
        "--color-success-500": "112 254 130", // #70fe82
        "--color-success-600": "101 229 117", // #65e575
        "--color-success-700": "84 191 98", // #54bf62
        "--color-success-800": "67 152 78", // #43984e
        "--color-success-900": "55 124 64", // #377c40
        // warning | #ffd24d
        "--color-warning-50": "255 248 228", // #fff8e4
        "--color-warning-100": "255 246 219", // #fff6db
        "--color-warning-200": "255 244 211", // #fff4d3
        "--color-warning-300": "255 237 184", // #ffedb8
        "--color-warning-400": "255 224 130", // #ffe082
        "--color-warning-500": "255 210 77", // #ffd24d
        "--color-warning-600": "230 189 69", // #e6bd45
        "--color-warning-700": "191 158 58", // #bf9e3a
        "--color-warning-800": "153 126 46", // #997e2e
        "--color-warning-900": "125 103 38", // #7d6726
        // error | #e95256
        "--color-error-50": "252 229 230", // #fce5e6
        "--color-error-100": "251 220 221", // #fbdcdd
        "--color-error-200": "250 212 213", // #fad4d5
        "--color-error-300": "246 186 187", // #f6babb
        "--color-error-400": "240 134 137", // #f08689
        "--color-error-500": "233 82 86", // #e95256
        "--color-error-600": "210 74 77", // #d24a4d
        "--color-error-700": "175 62 65", // #af3e41
        "--color-error-800": "140 49 52", // #8c3134
        "--color-error-900": "114 40 42", // #72282a
        // surface | #444444
        "--color-surface-50": "227 227 227", // #e3e3e3
        "--color-surface-100": "218 218 218", // #dadada
        "--color-surface-200": "208 208 208", // #d0d0d0
        "--color-surface-300": "180 180 180", // #b4b4b4
        "--color-surface-400": "124 124 124", // #7c7c7c
        "--color-surface-500": "68 68 68", // #444444
        "--color-surface-600": "61 61 61", // #3d3d3d
        "--color-surface-700": "51 51 51", // #333333
        "--color-surface-800": "41 41 41", // #292929
        "--color-surface-900": "33 33 33", // #212121
    },
};