tiny, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet

feat: use color scheme for more than inputs

uses it across the document, so scrollbars are also themed

+43 -41
+43 -41
dev.css
··· 2 2 /* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */ 3 3 4 4 /* table of contents 5 - 1. configuration 6 - 2. dark mode handling 7 - 3. css reset 8 - 4. margins for most elements 9 - 5. font family 10 - 6. body and selection styling 11 - 7. typography 12 - 8. blockquotes 13 - 9. header 14 - 10. footer 15 - 11. buttons and inputs 16 - 12. code and keyboards 17 - 13. details 18 - 14. description lists 19 - 15. horizontal rules 20 - 16. fieldsets 21 - 17. tables 22 - 18. lists 5 + 1. configuration 6 + 2. dark mode handling 7 + 3. root color scheme 8 + 4. css reset 9 + 5. margins for most elements 10 + 6. font family 11 + 7. body and selection styling 12 + 8. typography 13 + 9. blockquotes 14 + 10. header 15 + 11. footer 16 + 12. buttons and inputs 17 + 13. code and keyboards 18 + 14. details 19 + 15. description lists 20 + 16. horizontal rules 21 + 17. fieldsets 22 + 18. tables 23 + 19. lists 23 24 */ 24 25 25 26 /* 1. configuration */ ··· 29 30 "Segoe UI", sans-serif; 30 31 --dc-font-mono: "Geist Mono", monospace; 31 32 32 - /* color scheme for inputs */ 33 - --dc-cs: light; 34 - 35 33 /* light colors */ 34 + --dc-cs: light; 36 35 --dc-tx-1: #000000; 37 36 --dc-tx-2: #1a1a1a; 38 37 --dc-bg-1: #fafafa; ··· 46 45 --dc-ac-tx: #ededed; 47 46 48 47 /* dark colors */ 48 + --dc-d-cs: dark; 49 49 --dc-d-tx-1: #ededed; 50 50 --dc-d-tx-2: #a1a1a1; 51 51 --dc-d-bg-1: #000; ··· 62 62 /* 2. dark mode handling */ 63 63 @media (prefers-color-scheme: dark) { 64 64 :root { 65 + --dc-cs: var(--dc-d-cs); 65 66 --dc-tx-1: var(--dc-d-tx-1); 66 67 --dc-tx-2: var(--dc-d-tx-2); 67 68 --dc-bg-1: var(--dc-d-bg-1); ··· 73 74 --dc-lkb-tx: var(--dc-d-lkb-tx); 74 75 --dc-ac-1: var(--dc-d-ac-1); 75 76 --dc-ac-tx: var(--dc-d-ac-tx); 76 - 77 - /* color scheme for inputs */ 78 - --dc-cs: dark; 79 77 } 80 78 } 81 79 82 - /* 3. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */ 80 + /* 3. root color scheme */ 81 + :root { 82 + color-scheme: only var(--dc-cs); 83 + } 84 + 85 + /* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */ 83 86 *, 84 87 *::before, 85 88 *::after { ··· 113 116 isolation: isolate; 114 117 } 115 118 116 - /* 4. margins for most elements */ 119 + /* 5. margins for most elements */ 117 120 address, 118 121 area, 119 122 article, ··· 147 150 margin-bottom: 1rem; 148 151 } 149 152 150 - /* 5. font family */ 153 + /* 6. font family */ 151 154 html { 152 155 font-family: var(--dc-font-sans); 153 156 } ··· 159 162 font-family: var(--dc-font-mono); 160 163 } 161 164 162 - /* 6. body and selection styling */ 165 + /* 7. body and selection styling */ 163 166 body { 164 167 margin: 0 auto; 165 168 max-width: 48rem; ··· 175 178 color: var(--dc-ac-tx); 176 179 } 177 180 178 - /* 7. typography */ 181 + /* 8. typography */ 179 182 h1, 180 183 h2, 181 184 h3, ··· 217 220 border-radius: 0.25rem; 218 221 } 219 222 220 - /* 8. blockquotes */ 223 + /* 9. blockquotes */ 221 224 blockquote { 222 225 padding: 1.25rem; 223 226 background: var(--dc-bg-2); ··· 231 234 margin-bottom: 0; 232 235 } 233 236 234 - /* 9. header */ 237 + /* 10. header */ 235 238 header { 236 239 background: var(--dc-bg-2); 237 240 border-bottom: 1px solid var(--dc-bg-3); ··· 297 300 content: "• "; 298 301 } 299 302 300 - /* 10. footer */ 303 + /* 11. footer */ 301 304 footer { 302 305 border-top: 1px solid var(--dc-bg-3); 303 306 padding: 0.5rem calc(50vw - 50%); ··· 317 320 border-bottom: 0; 318 321 } 319 322 320 - /* 11. buttons and inputs */ 323 + /* 12. buttons and inputs */ 321 324 a button, 322 325 button, 323 326 input[type="submit"], ··· 369 372 border-radius: 0.25rem; 370 373 box-shadow: none; 371 374 box-sizing: border-box; 372 - color-scheme: var(--dc-cs); 373 375 } 374 376 375 377 textarea { 376 378 max-width: 100%; 377 379 } 378 380 379 - /* 12. code and keyboards */ 381 + /* 13. code and keyboards */ 380 382 code, 381 383 samp, 382 384 kbd, ··· 398 400 overflow: auto; 399 401 } 400 402 401 - /* 13. details */ 403 + /* 14. details */ 402 404 details { 403 405 padding: 0.5rem 1rem; 404 406 background: var(--dc-bg-2); ··· 425 427 padding-bottom: 0; 426 428 } 427 429 428 - /* 14. description lists */ 430 + /* 15. description lists */ 429 431 dt { 430 432 font-weight: bold; 431 433 } ··· 434 436 content: "→ "; 435 437 } 436 438 437 - /* 15. horizontal rules */ 439 + /* 16. horizontal rules */ 438 440 hr { 439 441 border: 0; 440 442 border-bottom: 1px solid var(--dc-bg-3); 441 443 margin: 1rem auto; 442 444 } 443 445 444 - /* 16. fieldsets */ 446 + /* 17. fieldsets */ 445 447 fieldset { 446 448 margin-top: 1rem; 447 449 padding: 2rem; ··· 453 455 padding: auto 0.5rem; 454 456 } 455 457 456 - /* 17. tables */ 458 + /* 18. tables */ 457 459 table { 458 460 border-collapse: collapse; 459 461 width: 100%; ··· 479 481 margin-bottom: 0.5rem; 480 482 } 481 483 482 - /* 18. lists */ 484 + /* 19. lists */ 483 485 ol, 484 486 ul { 485 487 padding-left: 2rem;