css-system-colors.md (1710B)
1 +++ 2 title = "CSS System Colors Dashboard" 3 description = "A website that gives developers a visual preview of CSS' underused system-color data type." 4 date = 2024-05-20 5 +++ 6 7 [**CSS System Colors Dashboard**][dash] is a website that gives 8 developers a visual preview of CSS' underused `system-color` data type. 9 These colors are context-dependent, changing between operating systems 10 and browsers; the dashboard provides effective visualization of the 11 colors across environments. 12 13 I discovered native colors in CSS through [Jim Nielsen][jim]. These 14 colors are extremely useful for developing "along the grain" of a 15 platform. I now use them all the time! [This new dashboard][dash] lists 16 the available system colors and displays their value in context. 17 18 The dashboard is a [tangible deliverable]. It's a simple, cute tool with 19 a lot of utility. 20 21 This project was developed in part as an experiment in learning Rust. 22 I used [axum] and [askama] in building the site, selected for their 23 (aspirationally) intuitive interfaces and strong embrace of the type 24 system. However, I found the development experience in the language 25 overcomplicated and unergonomic. I still hope to enter the Rust 26 community—I am enthusiastic about the ideals of the language and its 27 potential—but will seek out other ways to do so. 28 29 Check out [the live website][dash] in your browser to explore your 30 system colors and view the source code [on my forge][git]. 31 32 [dash]: https://systemcolors.xyz 33 [jim]: https://blog.jim-nielsen.com/2021/css-system-colors/ 34 [tangible deliverable]: @/posts/tangible-deliverables.md 35 [axum]: https://github.com/tokio-rs/axum 36 [askama]: https://github.com/djc/askama 37 [git]: https://git.figbert.com/css-system-colors/