Improve Lawnchair documentation v3 (#4644)

* Add notes regarding nightly releases
* Update README preview image
* Improve contributing guide
* Create Lawnchair visual guidelines document
* Organize assets to `./docs/assets/`
* Other misc doc improvements

---------

Co-authored-by: JovannMC <jovannmc@femboyfurry.net>
Co-authored-by: SuperDragonXD <70206496+SuperDragonXD@users.noreply.github.com>

docs/assets/README.md

@@ -0,0 +1,16 @@
+# Lawnchair Visual Guidelines
+
+This directory lists all the decoration & visual explainers used in the Lawnchair Documentation.
+
+All assets created should use Material 3 design with `#47B84F` as source color and the [Inter](https://fonts.google.com/specimen/Inter) ([OFL v1.1](https://github.com/rsms/inter/?tab=OFL-1.1-1-ov-file#readme)) typography. Visit the [Material 3 theme builder](https://material-foundation.github.io/material-theme-builder/?primary=%2347B84F&bodyFont=Inter&displayFont=Inter&colorMatch=false) for more information, and [the CSS directory](css/) for an example color scheme for the web.
+
+When creating device mockups for Lawnchair, make sure that you're using the latest commits of Lawnchair or use Lawnchair Nightly as base.
+
+## Device Mockup
+
+Use in: [README](/README.md)
+
+* Icon pack: [Lawnicons](https://github.com/LawnchairLauncher/lawnicons)
+* Wallpaper: https://unsplash.com/photos/photography-of-green-leaves-ZVKr8wADhpc
+* Color Extraction Technique: Tonal Spot from Lawnchair
+* License: https://unsplash.com/license

docs/assets/css/dark-hc.css

@@ -0,0 +1,55 @@
+.dark-high-contrast {
+  --md-sys-color-primary: rgb(240 255 237);
+  --md-sys-color-surface-tint: rgb(155 212 160);
+  --md-sys-color-on-primary: rgb(0 0 0);
+  --md-sys-color-primary-container: rgb(159 216 164);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(240 255 237);
+  --md-sys-color-on-secondary: rgb(0 0 0);
+  --md-sys-color-secondary-container: rgb(188 208 186);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(242 253 255);
+  --md-sys-color-on-tertiary: rgb(0 0 0);
+  --md-sys-color-tertiary-container: rgb(165 210 219);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 249 249);
+  --md-sys-color-on-error: rgb(0 0 0);
+  --md-sys-color-error-container: rgb(255 186 177);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(16 21 16);
+  --md-sys-color-on-background: rgb(224 228 220);
+  --md-sys-color-surface: rgb(16 21 16);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(65 73 65);
+  --md-sys-color-on-surface-variant: rgb(246 253 241);
+  --md-sys-color-outline: rgb(197 205 194);
+  --md-sys-color-outline-variant: rgb(197 205 194);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(224 228 220);
+  --md-sys-color-inverse-on-surface: rgb(0 0 0);
+  --md-sys-color-inverse-primary: rgb(0 50 18);
+  --md-sys-color-primary-fixed: rgb(187 245 191);
+  --md-sys-color-on-primary-fixed: rgb(0 0 0);
+  --md-sys-color-primary-fixed-dim: rgb(159 216 164);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 27 7);
+  --md-sys-color-secondary-fixed: rgb(216 236 213);
+  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
+  --md-sys-color-secondary-fixed-dim: rgb(188 208 186);
+  --md-sys-color-on-secondary-fixed-variant: rgb(9 26 12);
+  --md-sys-color-tertiary-fixed: rgb(193 239 248);
+  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+  --md-sys-color-tertiary-fixed-dim: rgb(165 210 219);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(0 26 30);
+  --md-sys-color-surface-dim: rgb(16 21 16);
+  --md-sys-color-surface-bright: rgb(54 58 53);
+  --md-sys-color-surface-container-lowest: rgb(11 15 11);
+  --md-sys-color-surface-container-low: rgb(24 29 24);
+  --md-sys-color-surface-container: rgb(28 33 28);
+  --md-sys-color-surface-container-high: rgb(38 43 38);
+  --md-sys-color-surface-container-highest: rgb(49 54 48);
+  --md-extended-color-custom-color1-color: rgb(255 249 248);
+  --md-extended-color-custom-color1-on-color: rgb(0 0 0);
+  --md-extended-color-custom-color1-color-container: rgb(255 188 156);
+  --md-extended-color-custom-color1-on-color-container: rgb(0 0 0);
+}

docs/assets/css/dark-mc.css

@@ -0,0 +1,55 @@
+.dark-medium-contrast {
+  --md-sys-color-primary: rgb(159 216 164);
+  --md-sys-color-surface-tint: rgb(155 212 160);
+  --md-sys-color-on-primary: rgb(0 27 7);
+  --md-sys-color-primary-container: rgb(103 157 110);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(188 208 186);
+  --md-sys-color-on-secondary: rgb(9 26 12);
+  --md-sys-color-secondary-container: rgb(130 150 130);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(165 210 219);
+  --md-sys-color-on-tertiary: rgb(0 26 30);
+  --md-sys-color-tertiary-container: rgb(108 152 160);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 186 177);
+  --md-sys-color-on-error: rgb(55 0 1);
+  --md-sys-color-error-container: rgb(255 84 73);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(16 21 16);
+  --md-sys-color-on-background: rgb(224 228 220);
+  --md-sys-color-surface: rgb(16 21 16);
+  --md-sys-color-on-surface: rgb(248 252 244);
+  --md-sys-color-surface-variant: rgb(65 73 65);
+  --md-sys-color-on-surface-variant: rgb(197 205 194);
+  --md-sys-color-outline: rgb(157 165 155);
+  --md-sys-color-outline-variant: rgb(126 133 124);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(224 228 220);
+  --md-sys-color-inverse-on-surface: rgb(38 43 38);
+  --md-sys-color-inverse-primary: rgb(29 82 42);
+  --md-sys-color-primary-fixed: rgb(182 241 187);
+  --md-sys-color-on-primary-fixed: rgb(0 21 5);
+  --md-sys-color-primary-fixed-dim: rgb(155 212 160);
+  --md-sys-color-on-primary-fixed-variant: rgb(5 63 26);
+  --md-sys-color-secondary-fixed: rgb(211 232 209);
+  --md-sys-color-on-secondary-fixed: rgb(5 20 8);
+  --md-sys-color-secondary-fixed-dim: rgb(184 204 182);
+  --md-sys-color-on-secondary-fixed-variant: rgb(41 58 42);
+  --md-sys-color-tertiary-fixed: rgb(189 234 244);
+  --md-sys-color-on-tertiary-fixed: rgb(0 20 24);
+  --md-sys-color-tertiary-fixed-dim: rgb(161 206 215);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(9 60 67);
+  --md-sys-color-surface-dim: rgb(16 21 16);
+  --md-sys-color-surface-bright: rgb(54 58 53);
+  --md-sys-color-surface-container-lowest: rgb(11 15 11);
+  --md-sys-color-surface-container-low: rgb(24 29 24);
+  --md-sys-color-surface-container: rgb(28 33 28);
+  --md-sys-color-surface-container-high: rgb(38 43 38);
+  --md-sys-color-surface-container-highest: rgb(49 54 48);
+  --md-extended-color-custom-color1-color: rgb(255 188 156);
+  --md-extended-color-custom-color1-on-color: rgb(44 13 0);
+  --md-extended-color-custom-color1-color-container: rgb(201 126 89);
+  --md-extended-color-custom-color1-on-color-container: rgb(0 0 0);
+}

docs/assets/css/dark.css

@@ -0,0 +1,55 @@
+.dark {
+  --md-sys-color-primary: rgb(155 212 160);
+  --md-sys-color-surface-tint: rgb(155 212 160);
+  --md-sys-color-on-primary: rgb(0 57 21);
+  --md-sys-color-primary-container: rgb(27 81 41);
+  --md-sys-color-on-primary-container: rgb(182 241 187);
+  --md-sys-color-secondary: rgb(184 204 182);
+  --md-sys-color-on-secondary: rgb(35 52 37);
+  --md-sys-color-secondary-container: rgb(57 75 58);
+  --md-sys-color-on-secondary-container: rgb(211 232 209);
+  --md-sys-color-tertiary: rgb(161 206 215);
+  --md-sys-color-on-tertiary: rgb(0 54 62);
+  --md-sys-color-tertiary-container: rgb(31 77 85);
+  --md-sys-color-on-tertiary-container: rgb(189 234 244);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(16 21 16);
+  --md-sys-color-on-background: rgb(224 228 220);
+  --md-sys-color-surface: rgb(16 21 16);
+  --md-sys-color-on-surface: rgb(224 228 220);
+  --md-sys-color-surface-variant: rgb(65 73 65);
+  --md-sys-color-on-surface-variant: rgb(193 201 190);
+  --md-sys-color-outline: rgb(139 147 137);
+  --md-sys-color-outline-variant: rgb(65 73 65);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(224 228 220);
+  --md-sys-color-inverse-on-surface: rgb(45 50 44);
+  --md-sys-color-inverse-primary: rgb(53 105 63);
+  --md-sys-color-primary-fixed: rgb(182 241 187);
+  --md-sys-color-on-primary-fixed: rgb(0 33 9);
+  --md-sys-color-primary-fixed-dim: rgb(155 212 160);
+  --md-sys-color-on-primary-fixed-variant: rgb(27 81 41);
+  --md-sys-color-secondary-fixed: rgb(211 232 209);
+  --md-sys-color-on-secondary-fixed: rgb(15 31 17);
+  --md-sys-color-secondary-fixed-dim: rgb(184 204 182);
+  --md-sys-color-on-secondary-fixed-variant: rgb(57 75 58);
+  --md-sys-color-tertiary-fixed: rgb(189 234 244);
+  --md-sys-color-on-tertiary-fixed: rgb(0 31 36);
+  --md-sys-color-tertiary-fixed-dim: rgb(161 206 215);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(31 77 85);
+  --md-sys-color-surface-dim: rgb(16 21 16);
+  --md-sys-color-surface-bright: rgb(54 58 53);
+  --md-sys-color-surface-container-lowest: rgb(11 15 11);
+  --md-sys-color-surface-container-low: rgb(24 29 24);
+  --md-sys-color-surface-container: rgb(28 33 28);
+  --md-sys-color-surface-container-high: rgb(38 43 38);
+  --md-sys-color-surface-container-highest: rgb(49 54 48);
+  --md-extended-color-custom-color1-color: rgb(255 182 146);
+  --md-extended-color-custom-color1-on-color: rgb(84 33 3);
+  --md-extended-color-custom-color1-color-container: rgb(112 55 23);
+  --md-extended-color-custom-color1-on-color-container: rgb(255 219 203);
+}

docs/assets/css/light-hc.css

@@ -0,0 +1,55 @@
+.light-high-contrast {
+  --md-sys-color-primary: rgb(0 41 13);
+  --md-sys-color-surface-tint: rgb(53 105 63);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(23 77 37);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(21 38 23);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(54 71 55);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(0 39 44);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(27 73 81);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(78 0 2);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(140 0 9);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(247 251 242);
+  --md-sys-color-on-background: rgb(24 29 24);
+  --md-sys-color-surface: rgb(247 251 242);
+  --md-sys-color-on-surface: rgb(0 0 0);
+  --md-sys-color-surface-variant: rgb(221 229 218);
+  --md-sys-color-on-surface-variant: rgb(31 38 31);
+  --md-sys-color-outline: rgb(62 69 61);
+  --md-sys-color-outline-variant: rgb(62 69 61);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(45 50 44);
+  --md-sys-color-inverse-on-surface: rgb(255 255 255);
+  --md-sys-color-inverse-primary: rgb(192 250 196);
+  --md-sys-color-primary-fixed: rgb(23 77 37);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(0 53 19);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(54 71 55);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(32 49 33);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(27 73 81);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(0 50 57);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(215 219 211);
+  --md-sys-color-surface-bright: rgb(247 251 242);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(241 245 236);
+  --md-sys-color-surface-container: rgb(235 239 231);
+  --md-sys-color-surface-container-high: rgb(229 233 225);
+  --md-sys-color-surface-container-highest: rgb(224 228 220);
+  --md-extended-color-custom-color1-color: rgb(63 21 0);
+  --md-extended-color-custom-color1-on-color: rgb(255 255 255);
+  --md-extended-color-custom-color1-color-container: rgb(107 51 20);
+  --md-extended-color-custom-color1-on-color-container: rgb(255 255 255);
+}

docs/assets/css/light-mc.css

@@ -0,0 +1,55 @@
+.light-medium-contrast {
+  --md-sys-color-primary: rgb(23 77 37);
+  --md-sys-color-surface-tint: rgb(53 105 63);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(75 128 83);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(54 71 55);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(103 121 102);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(27 73 81);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(80 123 132);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(140 0 9);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(218 52 46);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(247 251 242);
+  --md-sys-color-on-background: rgb(24 29 24);
+  --md-sys-color-surface: rgb(247 251 242);
+  --md-sys-color-on-surface: rgb(24 29 24);
+  --md-sys-color-surface-variant: rgb(221 229 218);
+  --md-sys-color-on-surface-variant: rgb(62 69 61);
+  --md-sys-color-outline: rgb(90 97 88);
+  --md-sys-color-outline-variant: rgb(117 125 116);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(45 50 44);
+  --md-sys-color-inverse-on-surface: rgb(238 242 234);
+  --md-sys-color-inverse-primary: rgb(155 212 160);
+  --md-sys-color-primary-fixed: rgb(75 128 83);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(50 103 61);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(103 121 102);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(78 97 79);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(80 123 132);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(55 98 106);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(215 219 211);
+  --md-sys-color-surface-bright: rgb(247 251 242);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(241 245 236);
+  --md-sys-color-surface-container: rgb(235 239 231);
+  --md-sys-color-surface-container-high: rgb(229 233 225);
+  --md-sys-color-surface-container-highest: rgb(224 228 220);
+  --md-extended-color-custom-color1-color: rgb(107 51 20);
+  --md-extended-color-custom-color1-on-color: rgb(255 255 255);
+  --md-extended-color-custom-color1-color-container: rgb(168 99 64);
+  --md-extended-color-custom-color1-on-color-container: rgb(255 255 255);
+}

docs/assets/css/light.css

@@ -0,0 +1,55 @@
+.light {
+  --md-sys-color-primary: rgb(53 105 63);
+  --md-sys-color-surface-tint: rgb(53 105 63);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(182 241 187);
+  --md-sys-color-on-primary-container: rgb(0 33 9);
+  --md-sys-color-secondary: rgb(81 99 81);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(211 232 209);
+  --md-sys-color-on-secondary-container: rgb(15 31 17);
+  --md-sys-color-tertiary: rgb(57 101 109);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(189 234 244);
+  --md-sys-color-on-tertiary-container: rgb(0 31 36);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(65 0 2);
+  --md-sys-color-background: rgb(247 251 242);
+  --md-sys-color-on-background: rgb(24 29 24);
+  --md-sys-color-surface: rgb(247 251 242);
+  --md-sys-color-on-surface: rgb(24 29 24);
+  --md-sys-color-surface-variant: rgb(221 229 218);
+  --md-sys-color-on-surface-variant: rgb(65 73 65);
+  --md-sys-color-outline: rgb(114 121 112);
+  --md-sys-color-outline-variant: rgb(193 201 190);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(45 50 44);
+  --md-sys-color-inverse-on-surface: rgb(238 242 234);
+  --md-sys-color-inverse-primary: rgb(155 212 160);
+  --md-sys-color-primary-fixed: rgb(182 241 187);
+  --md-sys-color-on-primary-fixed: rgb(0 33 9);
+  --md-sys-color-primary-fixed-dim: rgb(155 212 160);
+  --md-sys-color-on-primary-fixed-variant: rgb(27 81 41);
+  --md-sys-color-secondary-fixed: rgb(211 232 209);
+  --md-sys-color-on-secondary-fixed: rgb(15 31 17);
+  --md-sys-color-secondary-fixed-dim: rgb(184 204 182);
+  --md-sys-color-on-secondary-fixed-variant: rgb(57 75 58);
+  --md-sys-color-tertiary-fixed: rgb(189 234 244);
+  --md-sys-color-on-tertiary-fixed: rgb(0 31 36);
+  --md-sys-color-tertiary-fixed-dim: rgb(161 206 215);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(31 77 85);
+  --md-sys-color-surface-dim: rgb(215 219 211);
+  --md-sys-color-surface-bright: rgb(247 251 242);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(241 245 236);
+  --md-sys-color-surface-container: rgb(235 239 231);
+  --md-sys-color-surface-container-high: rgb(229 233 225);
+  --md-sys-color-surface-container-highest: rgb(224 228 220);
+  --md-extended-color-custom-color1-color: rgb(141 78 44);
+  --md-extended-color-custom-color1-on-color: rgb(255 255 255);
+  --md-extended-color-custom-color1-color-container: rgb(255 219 203);
+  --md-extended-color-custom-color1-on-color-container: rgb(52 16 0);
+}