|
1 | 1 | :root { |
2 | 2 | /* Accent Colors */ |
3 | | - --accent-color: #1c71d8; |
4 | | - --accent-bg-color: #3584e4; |
5 | | - --accent-fg-color: #ffffff; |
| 3 | + --accent-color: oklch(0.56 0.18 256.43 / 1); |
| 4 | + --accent-bg-color: oklch(0.61 0.16 255.34 / 1); |
| 5 | + --accent-fg-color: oklch(1 0 0 / 1); |
6 | 6 |
|
7 | 7 | /* Destructive Colors */ |
8 | | - --destructive-color: #c01c28; |
9 | | - --destructive-bg-color: #e01b24; |
10 | | - --destructive-fg-color: #ffffff; |
| 8 | + --destructive-color: oklch(0.52 0.20 24.70 / 1); |
| 9 | + --destructive-bg-color: oklch(0.58 0.22 26.62 / 1); |
| 10 | + --destructive-fg-color: oklch(1 0 0 / 1); |
11 | 11 |
|
12 | 12 | /* Success Colors */ |
13 | | - --success-color: #1b8553; |
14 | | - --success-bg-color: #2ec27e; |
15 | | - --success-fg-color: #ffffff; |
| 13 | + --success-color: oklch(0.55 0.12 156.94 / 1); |
| 14 | + --success-bg-color: oklch(0.72 0.16 157.74 / 1); |
| 15 | + --success-fg-color: oklch(1 0 0 / 1); |
16 | 16 |
|
17 | 17 | /* Warning Colors */ |
18 | | - --warning-color: #9c6e03; |
19 | | - --warning-bg-color: #e5a50a; |
20 | | - --warning-fg-color: rgba(0, 0, 0, 0.8); |
| 18 | + --warning-color: oklch(0.57 0.12 79.38 / 1); |
| 19 | + --warning-bg-color: oklch(0.76 0.16 80.30 / 1); |
| 20 | + --warning-fg-color: oklch(0 0 0 / 0.80); |
21 | 21 |
|
22 | 22 | /* Error Colors */ |
23 | | - --error-color: #c01c28; |
24 | | - --error-bg-color: #e01b24; |
25 | | - --error-fg-color: #ffffff; |
| 23 | + --error-color: oklch(0.52 0.20 24.70 / 1); |
| 24 | + --error-bg-color: oklch(0.58 0.22 26.62 / 1); |
| 25 | + --error-fg-color: oklch(1 0 0 / 1); |
26 | 26 |
|
27 | 27 | /* Window Colors */ |
28 | | - --window-bg-color: #fafafa; |
29 | | - --window-fg-color: rgba(0, 0, 0, 0.8); |
| 28 | + --window-bg-color: oklch(0.99 0 0 / 1); |
| 29 | + --window-fg-color: oklch(0 0 0 / 0.80); |
30 | 30 |
|
31 | 31 | /* View Colors */ |
32 | | - --view-bg-color: #ffffff; |
33 | | - --view-fg-color: rgba(0, 0, 0, 0.8); |
| 32 | + --view-bg-color: oklch(1 0 0 / 1); |
| 33 | + --view-fg-color: oklch(0 0 0 / 0.80); |
34 | 34 |
|
35 | 35 | /* Header Bar Colors */ |
36 | | - --headerbar-bg-color: #ffffff; |
37 | | - --headerbar-fg-color: rgba(0, 0, 0, 0.8); |
38 | | - --headerbar-border-color: rgba(0, 0, 0, 0.8); |
39 | | - --headerbar-backdrop-color: #fafafa; |
40 | | - --headerbar-shade-color: rgba(0, 0, 0, 0.12); |
41 | | - --headerbar-darker-shade-color: rgba(0, 0, 0, 0.12); |
| 36 | + --headerbar-bg-color: oklch(1 0 0 / 1); |
| 37 | + --headerbar-fg-color: oklch(0 0 0 / 0.80); |
| 38 | + --headerbar-border-color: oklch(0 0 0 / 0.80); |
| 39 | + --headerbar-backdrop-color: oklch(0.99 0 0 / 1); |
| 40 | + --headerbar-shade-color: oklch(0 0 0 / 0.12); |
| 41 | + --headerbar-darker-shade-color: oklch(0 0 0 / 0.12); |
42 | 42 |
|
43 | 43 | /* Sidebar Colors */ |
44 | | - --sidebar-bg-color: #ebebeb; |
45 | | - --sidebar-fg-color: rgba(0, 0, 0, 0.8); |
46 | | - --sidebar-backdrop-color: #f2f2f2; |
47 | | - --sidebar-border-color: rgba(0, 0, 0, 0.07); |
48 | | - --sidebar-shade-color: rgba(0, 0, 0, 0.07); |
| 44 | + --sidebar-bg-color: oklch(0.94 0 0 / 1); |
| 45 | + --sidebar-fg-color: oklch(0 0 0 / 0.80); |
| 46 | + --sidebar-backdrop-color: oklch(0.96 0 0 / 1); |
| 47 | + --sidebar-border-color: oklch(0 0 0 / 0.07); |
| 48 | + --sidebar-shade-color: oklch(0 0 0 / 0.07); |
49 | 49 |
|
50 | 50 | /* Secondary Sidebar Colors */ |
51 | | - --secondary-sidebar-bg-color: #f3f3f3; |
52 | | - --secondary-sidebar-fg-color: rgba(0, 0, 0, 0.8); |
53 | | - --secondary-sidebar-backdrop-color: #f6f6f6; |
54 | | - --secondary-sidebar-border-color: rgba(0, 0, 0, 0.07); |
55 | | - --secondary-sidebar-shade-color: rgba(0, 0, 0, 0.07); |
| 51 | + --secondary-sidebar-bg-color: oklch(0.96 0 0 / 1); |
| 52 | + --secondary-sidebar-fg-color: oklch(0 0 0 / 0.80); |
| 53 | + --secondary-sidebar-backdrop-color: oklch(0.97 0 0 / 1); |
| 54 | + --secondary-sidebar-border-color: oklch(0 0 0 / 0.07); |
| 55 | + --secondary-sidebar-shade-color: oklch(0 0 0 / 0.07); |
56 | 56 |
|
57 | 57 | /* Card Colors */ |
58 | | - --card-bg-color: #ffffff; |
59 | | - --card-fg-color: rgba(0, 0, 0, 0.8); |
60 | | - --card-shade-color: rgba(0, 0, 0, 0.07); |
| 58 | + --card-bg-color: oklch(1 0 0 / 1); |
| 59 | + --card-fg-color: oklch(0 0 0 / 0.80); |
| 60 | + --card-shade-color: oklch(0 0 0 / 0.07); |
61 | 61 |
|
62 | 62 | /* Thumbnail Colors */ |
63 | | - --thumbnail-bg-color: #ffffff; |
64 | | - --thumbnail-fg-color: rgba(0, 0, 0, 0.8); |
| 63 | + --thumbnail-bg-color: oklch(1 0 0 / 1); |
| 64 | + --thumbnail-fg-color: oklch(0 0 0 / 0.80); |
65 | 65 |
|
66 | 66 | /* Dialog Colors */ |
67 | | - --dialog-bg-color: #fafafa; |
68 | | - --dialog-fg-color: rgba(0, 0, 0, 0.8); |
| 67 | + --dialog-bg-color: oklch(0.99 0 0 / 1); |
| 68 | + --dialog-fg-color: oklch(0 0 0 / 0.80); |
69 | 69 |
|
70 | 70 | /* Popover Colors */ |
71 | | - --popover-bg-color: #ffffff; |
72 | | - --popover-fg-color: rgba(0, 0, 0, 0.8); |
73 | | - --popover-shade-color: rgba(0, 0, 0, 0.07); |
| 71 | + --popover-bg-color: oklch(1 0 0 / 1); |
| 72 | + --popover-fg-color: oklch(0 0 0 / 0.80); |
| 73 | + --popover-shade-color: oklch(0 0 0 / 0.07); |
74 | 74 |
|
75 | 75 | /* Miscellaneous Colors */ |
76 | | - --shade-color: rgba(0, 0, 0, 0.07); |
77 | | - --scrollbar-outline-color: #ffffff; |
| 76 | + --shade-color: oklch(0 0 0 / 0.07); |
| 77 | + --scrollbar-outline-color: oklch(1 0 0 / 1); |
78 | 78 |
|
79 | 79 | /* Helper Colors */ |
80 | 80 | --borders: rgba(0, 0, 0, 0.15); |
81 | 81 |
|
82 | 82 | /* Palette Colors */ |
83 | | - --blue-1: #99c1f1; |
84 | | - --blue-2: #62a0ea; |
85 | | - --blue-3: #3584e4; |
86 | | - --blue-4: #1c71d8; |
87 | | - --blue-5: #1a5fb4; |
88 | | - |
89 | | - --green-1: #8ff0a4; |
90 | | - --green-2: #57e389; |
91 | | - --green-3: #33d17a; |
92 | | - --green-4: #2ec27e; |
93 | | - --green-5: #26a269; |
94 | | - |
95 | | - --yellow-1: #f9f06b; |
96 | | - --yellow-2: #f8e45c; |
97 | | - --yellow-3: #f6d32d; |
98 | | - --yellow-4: #f5c211; |
99 | | - --yellow-5: #e5a50a; |
100 | | - |
101 | | - --orange-1: #ffbe6f; |
102 | | - --orange-2: #ffa348; |
103 | | - --orange-3: #ff7800; |
104 | | - --orange-4: #e66100; |
105 | | - --orange-5: #c64600; |
106 | | - |
107 | | - --red-1: #f66151; |
108 | | - --red-2: #ed333b; |
109 | | - --red-3: #e01b24; |
110 | | - --red-4: #c01c28; |
111 | | - --red-5: #a51d2d; |
112 | | - |
113 | | - --purple-1: #dc8add; |
114 | | - --purple-2: #c061cb; |
115 | | - --purple-3: #9141ac; |
116 | | - --purple-4: #813d9c; |
117 | | - --purple-5: #613583; |
118 | | - |
119 | | - --brown-1: #cdab8f; |
120 | | - --brown-2: #b5835a; |
121 | | - --brown-3: #986a44; |
122 | | - --brown-4: #865e3c; |
123 | | - --brown-5: #63452c; |
124 | | - |
125 | | - --light-1: #ffffff; |
126 | | - --light-2: #f6f5f4; |
127 | | - --light-3: #deddda; |
128 | | - --light-4: #c0bfbc; |
129 | | - --light-5: #9a9996; |
130 | | - |
131 | | - --dark-1: #77767b; |
132 | | - --dark-2: #5e5c64; |
133 | | - --dark-3: #3d3846; |
134 | | - --dark-4: #241f31; |
135 | | - --dark-5: #000000; |
| 83 | + --blue-1: oklch(0.80 0.08 253.32 / 1); |
| 84 | + --blue-2: oklch(0.70 0.13 253.81 / 1); |
| 85 | + --blue-3: oklch(0.61 0.16 255.34 / 1); |
| 86 | + --blue-4: oklch(0.56 0.18 256.43 / 1); |
| 87 | + --blue-5: oklch(0.49 0.15 256.36 / 1); |
| 88 | + |
| 89 | + --green-1: oklch(0.88 0.14 149.71 / 1); |
| 90 | + --green-2: oklch(0.82 0.18 152.10 / 1); |
| 91 | + --green-3: oklch(0.76 0.18 153.61 / 1); |
| 92 | + --green-4: oklch(0.72 0.16 157.74 / 1); |
| 93 | + --green-5: oklch(0.63 0.14 157.86 / 1); |
| 94 | + |
| 95 | + --yellow-1: oklch(0.94 0.15 105.39 / 1); |
| 96 | + --yellow-2: oklch(0.91 0.15 100.93 / 1); |
| 97 | + --yellow-3: oklch(0.87 0.17 96.01 / 1); |
| 98 | + --yellow-4: oklch(0.84 0.17 89.13 / 1); |
| 99 | + --yellow-5: oklch(0.76 0.16 80.30 / 1); |
| 100 | + |
| 101 | + --orange-1: oklch(0.85 0.12 70.28 / 1); |
| 102 | + --orange-2: oklch(0.79 0.15 61.99 / 1); |
| 103 | + --orange-3: oklch(0.72 0.19 49.76 / 1); |
| 104 | + --orange-4: oklch(0.65 0.18 45.56 / 1); |
| 105 | + --orange-5: oklch(0.57 0.17 40.75 / 1); |
| 106 | + |
| 107 | + --red-1: oklch(0.68 0.19 28.95 / 1); |
| 108 | + --red-2: oklch(0.62 0.22 24.71 / 1); |
| 109 | + --red-3: oklch(0.58 0.22 26.62 / 1); |
| 110 | + --red-4: oklch(0.52 0.20 24.70 / 1); |
| 111 | + --red-5: oklch(0.47 0.17 21.40 / 1); |
| 112 | + |
| 113 | + --purple-1: oklch(0.75 0.15 326.49 / 1); |
| 114 | + --purple-2: oklch(0.64 0.18 323.36 / 1); |
| 115 | + --purple-3: oklch(0.53 0.18 316.65 / 1); |
| 116 | + --purple-4: oklch(0.49 0.16 315.20 / 1); |
| 117 | + --purple-5: oklch(0.42 0.13 307.80 / 1); |
| 118 | + |
| 119 | + --brown-1: oklch(0.76 0.06 61.31 / 1); |
| 120 | + --brown-2: oklch(0.65 0.08 59.94 / 1); |
| 121 | + --brown-3: oklch(0.56 0.08 59.75 / 1); |
| 122 | + --brown-4: oklch(0.52 0.07 60.61 / 1); |
| 123 | + --brown-5: oklch(0.42 0.06 60.20 / 1); |
| 124 | + |
| 125 | + --light-1: oklch(1 0 0 / 1); |
| 126 | + --light-2: oklch(0.97 0 67.80 / 1); |
| 127 | + --light-3: oklch(0.90 0 91.45 / 1); |
| 128 | + --light-4: oklch(0.80 0 91.46 / 1); |
| 129 | + --light-5: oklch(0.68 0 91.47 / 1); |
| 130 | + |
| 131 | + --dark-1: oklch(0.57 0.01 295.33 / 1); |
| 132 | + --dark-2: oklch(0.48 0.01 297.35 / 1); |
| 133 | + --dark-3: oklch(0.35 0.02 301.42 / 1); |
| 134 | + --dark-4: oklch(0.25 0.03 296.66 / 1); |
| 135 | + --dark-5: oklch(0 0 0 / 1); |
136 | 136 | } |
137 | 137 |
|
138 | 138 | @media (prefers-color-scheme: dark) { |
139 | 139 | :root { |
140 | 140 | /* Accent Colors */ |
141 | | - --accent-color: #78aeed; |
142 | | - --accent-bg-color: #3584e4; |
143 | | - --accent-fg-color: #ffffff; |
| 141 | + --accent-color: oklch(0.74 0.11 252.99 / 1); |
| 142 | + --accent-bg-color: oklch(0.61 0.16 255.34 / 1); |
| 143 | + --accent-fg-color: oklch(1 0 0 / 1); |
144 | 144 |
|
145 | 145 | /* Destructive Colors */ |
146 | | - --destructive-color: #ff7b63; |
147 | | - --destructive-bg-color: #c01c28; |
148 | | - --destructive-fg-color: #ffffff; |
| 146 | + --destructive-color: oklch(0.73 0.17 31.89 / 1); |
| 147 | + --destructive-bg-color: oklch(0.52 0.20 24.70 / 1); |
| 148 | + --destructive-fg-color: oklch(1 0 0 / 1); |
149 | 149 |
|
150 | 150 | /* Success Colors */ |
151 | | - --success-color: #8ff0a4; |
152 | | - --success-bg-color: #26a269; |
153 | | - --success-fg-color: #ffffff; |
| 151 | + --success-color: oklch(0.88 0.14 149.71 / 1); |
| 152 | + --success-bg-color: oklch(0.63 0.14 157.86 / 1); |
| 153 | + --success-fg-color: oklch(1 0 0 / 1); |
154 | 154 |
|
155 | 155 | /* Warning Colors */ |
156 | | - --warning-color: #f8e45c; |
157 | | - --warning-bg-color: #cd9309; |
158 | | - --warning-fg-color: rgba(0, 0, 0, 0.8); |
| 156 | + --warning-color: oklch(0.91 0.15 100.93 / 1); |
| 157 | + --warning-bg-color: oklch(0.70 0.14 80.05 / 1); |
| 158 | + --warning-fg-color: oklch(0 0 0 / 0.80); |
159 | 159 |
|
160 | 160 | /* Error Colors */ |
161 | | - --error-color: #ff7b63; |
162 | | - --error-bg-color: #c01c28; |
163 | | - --error-fg-color: #ffffff; |
| 161 | + --error-color: oklch(0.73 0.17 31.89 / 1); |
| 162 | + --error-bg-color: oklch(0.52 0.20 24.70 / 1); |
| 163 | + --error-fg-color: oklch(1 0 0 / 1); |
164 | 164 |
|
165 | 165 | /* Window Colors */ |
166 | | - --window-bg-color: #242424; |
167 | | - --window-fg-color: #ffffff; |
| 166 | + --window-bg-color: oklch(0.26 0 0 / 1); |
| 167 | + --window-fg-color: oklch(1 0 0 / 1); |
168 | 168 |
|
169 | 169 | /* View Colors */ |
170 | | - --view-bg-color: #1e1e1e; |
171 | | - --view-fg-color: #ffffff; |
| 170 | + --view-bg-color: oklch(0.24 0 0 / 1); |
| 171 | + --view-fg-color: oklch(1 0 0 / 1); |
172 | 172 |
|
173 | 173 | /* Header Bar Colors */ |
174 | | - --headerbar-bg-color: #303030; |
175 | | - --headerbar-fg-color: #ffffff; |
176 | | - --headerbar-border-color: #ffffff; |
177 | | - --headerbar-backdrop-color: #242424; |
178 | | - --headerbar-shade-color: rgba(0, 0, 0, 0.36); |
179 | | - --headerbar-darker-shade-color: rgba(0, 0, 0, 0.9); |
| 174 | + --headerbar-bg-color: oklch(0.31 0 0 / 1); |
| 175 | + --headerbar-fg-color: oklch(1 0 0 / 1); |
| 176 | + --headerbar-border-color: oklch(1 0 0 / 1); |
| 177 | + --headerbar-backdrop-color: oklch(0.26 0 0 / 1); |
| 178 | + --headerbar-shade-color: oklch(0 0 0 / 0.36); |
| 179 | + --headerbar-darker-shade-color: oklch(0 0 0 / 0.90); |
180 | 180 |
|
181 | 181 | /* Sidebar Colors */ |
182 | | - --sidebar-bg-color: #303030; |
183 | | - --sidebar-fg-color: #ffffff; |
184 | | - --sidebar-backdrop-color: #2a2a2a; |
185 | | - --sidebar-border-color: rgba(0, 0, 0, 0.36); |
186 | | - --sidebar-shade-color: rgba(0, 0, 0, 0.25); |
| 182 | + --sidebar-bg-color: oklch(0.31 0 0 / 1); |
| 183 | + --sidebar-fg-color: oklch(1 0 0 / 1); |
| 184 | + --sidebar-backdrop-color: oklch(0.29 0 0 / 1); |
| 185 | + --sidebar-border-color: oklch(0 0 0 / 0.36); |
| 186 | + --sidebar-shade-color: oklch(0 0 0 / 0.25); |
187 | 187 |
|
188 | 188 | /* Secondary Sidebar Colors */ |
189 | | - --secondary-sidebar-bg-color: #2a2a2a; |
190 | | - --secondary-sidebar-fg-color: #ffffff; |
191 | | - --secondary-sidebar-backdrop-color: #272727; |
192 | | - --secondary-sidebar-border-color: rgba(0, 0, 0, 0.36); |
193 | | - --secondary-sidebar-shade-color: rgba(0, 0, 0, 0.25); |
| 189 | + --secondary-sidebar-bg-color: oklch(0.29 0 0 / 1); |
| 190 | + --secondary-sidebar-fg-color: oklch(1 0 0 / 1); |
| 191 | + --secondary-sidebar-backdrop-color: oklch(0.27 0 0 / 1); |
| 192 | + --secondary-sidebar-border-color: oklch(0 0 0 / 0.36); |
| 193 | + --secondary-sidebar-shade-color: oklch(0 0 0 / 0.25); |
194 | 194 |
|
195 | 195 | /* Card Colors */ |
196 | | - --card-bg-color: rgba(255, 255, 255, 0.08); |
197 | | - --card-fg-color: #ffffff; |
198 | | - --card-shade-color: rgba(0, 0, 0, 0.36); |
| 196 | + --card-bg-color: oklch(1 0 0 / 0.08); |
| 197 | + --card-fg-color: oklch(1 0 0 / 1); |
| 198 | + --card-shade-color: oklch(0 0 0 / 0.36); |
199 | 199 |
|
200 | 200 | /* Thumbnail Colors */ |
201 | | - --thumbnail-bg-color: #383838; |
202 | | - --thumbnail-fg-color: #ffffff; |
| 201 | + --thumbnail-bg-color: oklch(0.34 0 0 / 1); |
| 202 | + --thumbnail-fg-color: oklch(1 0 0 / 1); |
203 | 203 |
|
204 | 204 | /* Dialog Colors */ |
205 | | - --dialog-bg-color: #383838; |
206 | | - --dialog-fg-color: #ffffff; |
| 205 | + --dialog-bg-color: oklch(0.34 0 0 / 1); |
| 206 | + --dialog-fg-color: oklch(1 0 0 / 1); |
207 | 207 |
|
208 | 208 | /*tPopover Colors */ |
209 | | - --popover-bg-color: #383838; |
210 | | - --popover-fg-color: #ffffff; |
211 | | - --popover-shade-color: rgba(0, 0, 0, 0.25); |
| 209 | + --popover-bg-color: oklch(0.34 0 0 / 1); |
| 210 | + --popover-fg-color: oklch(1 0 0 / 1); |
| 211 | + --popover-shade-color: oklch(0 0 0 / 0.25); |
212 | 212 |
|
213 | 213 | /* Miscellaneous Colors */ |
214 | | - --shade-color: rgba(0, 0, 0, 0.25); |
215 | | - --scrollbar-outline-color: rgba(0, 0, 0, 0.5); |
| 214 | + --shade-color: oklch(0 0 0 / 0.25); |
| 215 | + --scrollbar-outline-color: oklch(0 0 0 / 0.50); |
216 | 216 |
|
217 | 217 | /* Helper Colors */ |
218 | 218 | --borders: rgba(255, 255, 255, 0.5); |
|
0 commit comments