isuggest.selfce.st
Catppuccin userstyle for tangled.sh
1/* ==UserStyle==
2@name tangled.sh Catppuccin
3@namespace github.com/catppuccin/userstyles/styles/tangled
4@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tangled
5@version 2000.01.01
6@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tangled/catppuccin.user.less
7@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atangled
8@description Soothing pastel theme for tangled
9@author Catppuccin
10@license MIT
11
12@preprocessor less
13@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
14@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
15@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
16==/UserStyle== */
17
18@-moz-document domain("tangled.sh") {
19 :root {
20 @media (prefers-color-scheme: light) {
21 #catppuccin(@lightFlavor);
22 }
23 @media (prefers-color-scheme: dark) {
24 #catppuccin(@darkFlavor);
25 }
26 }
27
28 #catppuccin(@flavor) {
29 @rosewater: @catppuccin[@@flavor][@rosewater];
30 @flamingo: @catppuccin[@@flavor][@flamingo];
31 @pink: @catppuccin[@@flavor][@pink];
32 @mauve: @catppuccin[@@flavor][@mauve];
33 @red: @catppuccin[@@flavor][@red];
34 @maroon: @catppuccin[@@flavor][@maroon];
35 @peach: @catppuccin[@@flavor][@peach];
36 @yellow: @catppuccin[@@flavor][@yellow];
37 @green: @catppuccin[@@flavor][@green];
38 @teal: @catppuccin[@@flavor][@teal];
39 @sky: @catppuccin[@@flavor][@sky];
40 @sapphire: @catppuccin[@@flavor][@sapphire];
41 @blue: @catppuccin[@@flavor][@blue];
42 @lavender: @catppuccin[@@flavor][@lavender];
43 @text: @catppuccin[@@flavor][@text];
44 @subtext1: @catppuccin[@@flavor][@subtext1];
45 @subtext0: @catppuccin[@@flavor][@subtext0];
46 @overlay2: @catppuccin[@@flavor][@overlay2];
47 @overlay1: @catppuccin[@@flavor][@overlay1];
48 @overlay0: @catppuccin[@@flavor][@overlay0];
49 @surface2: @catppuccin[@@flavor][@surface2];
50 @surface1: @catppuccin[@@flavor][@surface1];
51 @surface0: @catppuccin[@@flavor][@surface0];
52 @base: @catppuccin[@@flavor][@base];
53 @mantle: @catppuccin[@@flavor][@mantle];
54 @crust: @catppuccin[@@flavor][@crust];
55 @accent: @catppuccin[@@flavor][@@accentColor];
56
57 color-scheme: if(@flavor = latte, light, dark);
58
59 ::selection {
60 background-color: fade(@accent, 30%);
61 }
62
63 input,
64 textarea {
65 &::placeholder {
66 color: @subtext0 !important;
67 }
68 }
69
70 /* tangled.sh userstyle */
71
72 /* sitewide background */
73 body {
74 background-color: @base;
75 }
76
77 /* sitewide basic text */
78 a, p, .dark\:text-white {
79 color: @text;
80 }
81
82 /* sitewide subtexts */
83 .text-gray-600.dark\:text-gray-300 {
84 color: @subtext1;
85 }
86 .text-gray-700.dark\:text-gray-400 {
87 color: @subtext0;
88 }
89 .text-gray-400.font-mono {
90 color: @overlay2;
91 }
92
93 /* sitewide inputs */
94 input,
95 textarea {
96 background-color: @base;
97 }
98
99 /* sitewide markdown backtick code */
100 .bg-gray-100.dark\:bg-gray-700 {
101 background-color: @surface1;
102 }
103
104
105 /* top bar +new icon */
106 .btn-create::before {
107 background-color: @accent;
108 border-color: @accent;
109 }
110 .btn-create:hover::before {
111 background-color: fade(@accent, 60%);
112 border-color: fade(@accent, 20%);
113 }
114 .btn-create {
115 color: @crust;
116 }
117
118 /* top bar logout */
119 .text-red-400.dark\:text-red-400 {
120 color: @red;
121 &:hover {
122 color: lighten(@red, 5%);
123 }
124 }
125
126
127 /* footer segment headers */
128 .text-gray-900.dark\:text-gray-200 {
129 color: @subtext1;
130 }
131
132 /* footer copyright */
133 .text-gray-600.dark\:text-gray-400 {
134 color: @subtext0;
135 }
136
137 /* generic button */
138 .btn::before {
139 background-color: @surface1;
140 border-color: @overlay0;
141 }
142 .btn:hover::before {
143 background-color: @surface2;
144 }
145
146 /* timeline page list item */
147 .bg-white.dark\:bg-gray-800 {
148 background-color: @surface0;
149 }
150
151 /* profile punchcard component - reduce by 16.5% (ish) each step */
152 /* 100% */
153 .bg-green-500.dark\:bg-green-600 {
154 background-color: @accent
155 }
156 /* 84% */
157 .bg-green-400.dark\:bg-green-700 {
158 background-color: fade(@accent, 84%);
159 }
160 /* 67% */
161 .bg-green-300.dark\:bg-green-800 {
162 background-color: fade(@accent, 67%);
163 }
164 /* 50% */
165 .bg-green-200.dark\:bg-green-900 {
166 background-color: fade(@accent, 50%);
167 }
168 /* none */
169 .bg-gray-200.dark\:bg-gray-700 {
170 background-color: @surface2;
171 }
172 /* future */
173 .border.border-gray-200.dark\:border-gray-700 {
174 border-color: @surface1;
175 }
176
177 /* profile activity list statuses (e.g. 3 open, 16 merged, 5 closed, etc.)
178 /* open PRs */
179 .bg-green-600.dark\:bg-green-700.text-white {
180 background-color: @green;
181 color: @crust;
182 }
183 .text-green-600.dark\:text-green-500 {
184 color: @green;
185 }
186 /* merged PRs */
187 .bg-purple-600.dark\:bg-purple-700.text-white {
188 background-color: @mauve;
189 color: @crust;
190 }
191 .text-purple-600.dark\:text-purple-500 {
192 color: @mauve;
193 }
194 /* closed PRs */
195 .bg-gray-800.dark\:bg-gray-700 {
196 background-color: @mantle;
197 color: @text;
198 }
199 /* "No activity for this month" text */
200 .text-gray-500.dark\:text-gray-400 {
201 color: @overlay1;
202 }
203
204 /* chroma syntax highlighting overrides */
205 /* the good news is that tangled by default already uses catppuccin macchiato so we can just edit those styles a little */
206 .chroma {
207 color: @text;
208 }
209 span.kd, span.kt {
210 color: @red;
211 }
212 span.o {
213 color: @sky;
214 }
215 span.k {
216 color: @mauve;
217 }
218 span.nf {
219 color: @blue;
220 }
221 span.s1 {
222 color: @green;
223 }
224 span.kc {
225 color: @peach;
226 }
227
228 /* email verification statuses */
229 /* verified */
230 span.bg-green-100.text-green-800.dark\:bg-green-900.dark\:text-green-200 {
231 background-color: @green;
232 color: @crust;
233 }
234 /* primary */
235 span.bg-blue-100.text-blue-800.dark\:bg-blue-900.dark\:text-blue-200 {
236 background-color: @blue;
237 color: @crust;
238 }
239 /* unverified */
240 span.bg-yellow-100.text-yellow-800.dark\:bg-yellow-900.dark\:text-yellow-200 {
241 background-color: @yellow;
242 color: @crust;
243 }
244
245 /* settings delete button */
246 button.text-red-500.dark\:text-red-400 {
247 color: @red;
248 &:hover {
249 color: lighten(@red, 5%);
250 }
251 }
252
253 /* repository issues and PRs */
254 /* commit */
255 .text-gray-700.dark\:text-gray-300.bg-gray-100.dark\:bg-gray-900 {
256 color: @text;
257 background-color: @base;
258 }
259
260 /* verified commit */
261 .bg-green-100.text-green-800.dark\:bg-green-900.dark\:text-green-200 {
262 color: @crust;
263 background-color: @green;
264 }
265
266 /* open issue or PR in repo */
267 .bg-green-600.dark\:bg-green-700 {
268 color: @crust;
269 background-color: @green;
270 > span.text-white.dark\:text-white, svg.text-white.dark\:text-white, span.text-white, svg.text-white {
271 color: @crust;
272 }
273 }
274
275 /* closed issue or PR */
276 .bg-gray-800.dark\:bg-gray-700 {
277 background-color: @base;
278 > span.text-white, svg.text-white {
279 color: @text;
280 }
281 }
282
283 /* merged issue */
284 .bg-purple-600.dark\:bg-purple-700 {
285 background-color: @mauve;
286 > span.text-white, svg.text-white {
287 color: @crust;
288 }
289 }
290
291 /* ci run success checkmark */
292 .text-green-600 {
293 color: @green;
294 }
295
296 /* ci run failed cross */
297 .text-red-600 {
298 color: @red;
299 }
300
301 /* ci in progress or waiting */
302 .text-orange-400.dark\:text-orange-300 {
303 color: @peach;
304 }
305
306 /* ci progress circle */
307 /* this is super hacky and hella unmaintainable if tangled even changes the colour somewhat */
308 /* i'm wholly prepared to drop this. */
309 circle[stroke*="#ef4444"] {
310 stroke: @red; // failed
311 }
312 circle[stroke*="#fb923c"] {
313 stroke: @peach; // in progress or waiting
314 }
315 circle[stroke*="#10b981"] {
316 stroke: @green; // success
317 }
318
319 /* repository settings tab list selected */
320 .bg-white.dark\:bg-gray-700 {
321 background-color: @surface0;
322 }
323
324 /* repository setting tab list item */
325 .bg-gray-100.dark\:bg-gray-800 {
326 background-color: @base;
327 }
328
329 /* repository default branch dropdown */
330 select.bg-white.dark\:bg-gray-800 {
331 background-color: @base;
332 }
333
334
335
336 }
337}
338
339/* deno-fmt-ignore */
340@catppuccin: {
341 @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
342 @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
343 @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
344 @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
345};