Update docs to match updated logo and color palette (#5283)

![8511](862d151f-ff1d-4da8-9230-8dd32f41f197)

## Summary

Supersedes #5277, includes redesigned dark mode.

## Test Plan

* `python scripts/generate_mkdocs.py`
* `mkdocs serve`

README.md

@@ -14,9 +14,9 @@ An extremely fast Python linter, written in Rust.
 
 <p align="center">
   <picture align="center">
-    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/1309177/212613422-7faaf278-706b-4294-ad92-236ffcab3430.svg">
-    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/1309177/212613257-5f4bca12-6d6b-4c79-9bac-51a4c6d08928.svg">
-    <img alt="Shows a bar chart with benchmark results." src="https://user-images.githubusercontent.com/1309177/212613257-5f4bca12-6d6b-4c79-9bac-51a4c6d08928.svg">
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/1309177/232603514-c95e9b0f-6b31-43de-9a80-9e844173fd6a.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/1309177/232603516-4fb4892d-585c-4b20-b810-3db9161831e4.svg">
+    <img alt="Shows a bar chart with benchmark results." src="https://user-images.githubusercontent.com/1309177/232603516-4fb4892d-585c-4b20-b810-3db9161831e4.svg">
   </picture>
 </p>
 

docs/assets/bolt.svg

@@ -0,0 +1,3 @@
+<svg width="446" height="545" viewBox="0 0 446 545" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M180.516 0.5C175.507 0.5 171.445 4.55928 171.445 9.56667V36.7667C171.445 41.774 167.384 45.8333 162.374 45.8333H136.975C131.965 45.8333 127.904 49.8926 127.904 54.9V127.433C127.904 132.441 123.842 136.5 118.832 136.5H93.4331C88.4232 136.5 84.3619 140.559 84.3619 145.567V195.433C84.3619 200.441 80.3006 204.5 75.2907 204.5H49.8915C44.8816 204.5 40.8203 208.559 40.8203 213.567V263.433C40.8203 268.441 36.759 272.5 31.7491 272.5H9.07117C4.0613 272.5 0 276.559 0 281.567V308.767C0 313.774 4.0613 317.833 9.07117 317.833H126.996C132.006 317.833 136.068 321.893 136.068 326.9V376.767C136.068 381.774 132.006 385.833 126.996 385.833H101.597C96.5873 385.833 92.526 389.893 92.526 394.9V444.767C92.526 449.774 88.4647 453.833 83.4548 453.833H58.0555C53.0456 453.833 48.9843 457.893 48.9843 462.9V535.433C48.9843 540.441 53.0456 544.5 58.0555 544.5H130.625C135.635 544.5 139.696 540.441 139.696 535.433V499.167H175.981C180.991 499.167 185.052 495.107 185.052 490.1V462.9C185.052 457.893 189.113 453.833 194.123 453.833H219.522C224.532 453.833 228.594 449.774 228.594 444.767V417.567C228.594 412.559 232.655 408.5 237.665 408.5H263.064C268.074 408.5 272.135 404.441 272.135 399.433V372.233C272.135 367.226 276.197 363.167 281.206 363.167H306.606C311.616 363.167 315.677 359.107 315.677 354.1V326.9C315.677 321.893 319.738 317.833 324.748 317.833H350.147C355.157 317.833 359.219 313.774 359.219 308.767V281.567C359.219 276.559 363.28 272.5 368.29 272.5H393.689C398.699 272.5 402.76 268.441 402.76 263.433V190.9C402.76 185.893 398.699 181.833 393.689 181.833H367.383C362.373 181.833 358.311 177.774 358.311 172.767V145.567C358.311 140.559 362.373 136.5 367.383 136.5H392.782C397.792 136.5 401.853 132.441 401.853 127.433V100.233C401.853 95.226 405.914 91.1667 410.924 91.1667H436.324C441.333 91.1667 445.395 87.1074 445.395 82.1V9.56667C445.395 4.55929 441.333 0.5 436.324 0.5H180.516ZM146.953 385.833C141.943 385.833 137.882 389.893 137.882 394.9V444.767C137.882 449.774 133.821 453.833 128.811 453.833H103.411C98.4015 453.833 94.3402 457.893 94.3402 462.9V490.1C94.3402 495.107 98.4015 499.167 103.411 499.167H139.696V462.9C139.696 457.893 143.757 453.833 148.767 453.833H174.167C179.176 453.833 183.238 449.774 183.238 444.767V417.567C183.238 412.559 187.299 408.5 192.309 408.5H217.708C222.718 408.5 226.779 404.441 226.779 399.433V372.233C226.779 367.226 230.841 363.167 235.851 363.167H261.25C266.26 363.167 270.321 359.107 270.321 354.1V326.9C270.321 321.893 274.382 317.833 279.392 317.833H304.791C309.801 317.833 313.863 313.774 313.863 308.767V281.567C313.863 276.559 317.924 272.5 322.934 272.5H348.333C353.343 272.5 357.404 268.441 357.404 263.433V236.233C357.404 231.226 353.343 227.167 348.333 227.167H278.485C273.475 227.167 269.414 223.107 269.414 218.1V190.9C269.414 185.893 273.475 181.833 278.485 181.833H303.884C308.894 181.833 312.956 177.774 312.956 172.767V145.567C312.956 140.559 317.017 136.5 322.027 136.5H347.426C352.436 136.5 356.497 132.441 356.497 127.433V100.233C356.497 95.226 360.558 91.1667 365.568 91.1667H390.968C395.978 91.1667 400.039 87.1074 400.039 82.1V54.9C400.039 49.8926 395.978 45.8333 390.968 45.8333H182.331C177.321 45.8333 173.259 49.8926 173.259 54.9V127.433C173.259 132.441 169.198 136.5 164.188 136.5H138.789C133.779 136.5 129.718 140.559 129.718 145.567V195.433C129.718 200.441 125.656 204.5 120.647 204.5H95.2473C90.2375 204.5 86.1762 208.559 86.1762 213.567V263.433C86.1762 268.441 90.2375 272.5 95.2473 272.5H172.352C177.362 272.5 181.423 276.559 181.423 281.567V376.767C181.423 381.774 177.362 385.833 172.352 385.833H146.953Z" fill="#D7FF64"/>
+</svg>

docs/assets/ruff.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
-    <path
-        d="M115.36 61.84 70.22 50.49 114.45 2.4a1.222 1.222 0 0 0-1.54-1.87L12.3 61.98c-.41.25-.64.72-.57 1.2.06.48.4.87.87 1.01l45.07 13.25-44.29 48.16c-.42.46-.44 1.15-.04 1.61.24.29.58.44.94.44.22 0 .45-.06.65-.19l100.78-63.41c.42-.26.64-.75.56-1.22-.08-.49-.43-.88-.91-.99z"
-        style="fill:#ffffff"
-    />
-</svg>

docs/stylesheets/extra.css

@@ -0,0 +1,69 @@
+:root {
+  --black: #261230;
+  --white: #ffffff;
+  --astral-purple: #1f092a;
+  --astral-purple-alt: #30173d;
+  --light-gray: #826894;
+  --radiate: #d7ff64;
+  --flare: #6340ac;
+  --rock: #78876e;
+  --galaxy: #261230;
+  --space: #30173d;
+  --comet: #6f5d6f;
+  --cosmic: #de5fe9;
+  --sun: #ffac2f;
+  --electron: #46ebe1;
+  --aurora: #46eb74;
+  --constellation: #5f6de9;
+  --neutron: #cff3cf;
+  --proton: #f6afbc;
+  --nebula: #cdcbfb;
+  --supernova: #f1aff6;
+  --starlight: #f4f4f1;
+  --lunar: #fbf2fc;
+  --asteroid: #e3cee3;
+  --crater: #f0dfdf;
+}
+
+[data-md-color-scheme="astral-light"] {
+  --md-default-bg-color--dark: var(--black);
+  --md-primary-fg-color: var(--galaxy);
+  --md-typeset-a-color: var(--flare);
+  --md-accent-fg-color: var(--cosmic);
+}
+
+[data-md-color-scheme="astral-dark"] {
+  --md-default-bg-color: var(--astral-purple);
+  --md-default-fg-color: var(--white);
+  --md-default-fg-color--light: var(--white);
+  --md-default-fg-color--lighter: var(--white);
+  --md-primary-fg-color: var(--astral-purple-alt);
+  --md-primary-bg-color: var(--white);
+  --md-accent-fg-color: var(--radiate);
+
+  --md-typeset-color: var(--white);
+  --md-typeset-a-color: var(--radiate);
+  --md-typeset-mark-color: var(--sun);
+
+  --md-code-fg-color: var(--white);
+  --md-code-bg-color: var(--astral-purple-alt);
+
+  --md-code-hl-comment-color: var(--light-gray);
+  --md-code-hl-punctuation-color: var(--light-gray);
+  --md-code-hl-generic-color: var(--light-gray);
+  --md-code-hl-variable-color: var(--light-gray);
+  --md-code-hl-string-color: var(--aurora);
+  --md-code-hl-keyword-color: var(--sun);
+  --md-code-hl-operator-color: var(--sun);
+  --md-code-hl-number-color: hsla(0, 67%, 50%, 1);
+  --md-code-hl-special-color: hsla(340, 83%, 47%, 1);
+  --md-code-hl-function-color: var(--cosmic);
+  --md-code-hl-constant-color: var(--radiate);
+  --md-code-hl-name-color: var(--md-code-fg-color);
+
+  --md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
+  --md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
+
+  --md-typeset-table-color: hsla(0, 0%, 100%, 0.12);
+  --md-typeset-table-color--light: hsla(0, 0%, 100%, 0.035);
+}

mkdocs.template.yml

@@ -1,7 +1,7 @@
 site_name: Ruff
 theme:
   name: material
-  logo: assets/ruff.svg
+  logo: assets/bolt.svg
   favicon: assets/ruff-favicon.png
   features:
     - navigation.instant
@@ -14,14 +14,12 @@ theme:
     - content.code.copy
   palette:
     - media: "(prefers-color-scheme: light)"
-      scheme: default
-      primary: red
+      scheme: astral-light
       toggle:
         icon: material/weather-sunny
         name: Switch to dark mode
     - media: "(prefers-color-scheme: dark)"
-      scheme: slate
-      primary: red
+      scheme: astral-dark
       toggle:
         icon: material/weather-night
         name: Switch to light mode
@@ -50,3 +48,5 @@ markdown_extensions:
       anchor_linenums: true
 plugins:
   - search
+extra_css:
+  - stylesheets/extra.css

scripts/transform_readme.py

@@ -8,8 +8,8 @@ import argparse
 from pathlib import Path
 
 URL = "https://user-images.githubusercontent.com/1309177/{}.svg"
-URL_LIGHT = URL.format("212613257-5f4bca12-6d6b-4c79-9bac-51a4c6d08928")
-URL_DARK = URL.format("212613422-7faaf278-706b-4294-ad92-236ffcab3430")
+URL_LIGHT = URL.format("232603516-4fb4892d-585c-4b20-b810-3db9161831e4")
+URL_DARK = URL.format("232603514-c95e9b0f-6b31-43de-9a80-9e844173fd6a")
 
 # https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to
 GITHUB = f"""