Refactor CSS to use a colour palette and make light theme greyer.

1 files changed, 147 insertions, 109 deletions

diff --git a/docs/_static/style.css b/docs/_static/style.css
index 87ce6072..7f70997b 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -19,64 +19,84 @@ Historically however, thanks to:
 /* CSS variables would go here */
 :root {
   --font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
-  --primary-accent: #0a0a0a;
-  --secondary-accent: #171717;
-  --primary-text: #fff;
-  --secondary-text: #fff;
-  --settings: #fff;
-  --settings-hover: #ccc;
-  --main-background: #fff;
-  --link-text: #2591c4;
-  --link-hover-text: #0b3a44;
-  --text-normal: #3e4349;
-  --mobile-nav-background: #000;
-  --mobile-nav-text: #fff;
-  --mobile-nav-hover-text: #fff;
-  --mobile-nav-header-text: #fff;
-  --nav-background: #fff;
-  --nav-text: #444;
-  --nav-hover-text: #444;
-  --nav-header-text: #333;
-  --search-border: #5a5a5c;
-  --search-background: #171717;
-  --search-text: #fff;
-  --search-focus: #3399ff;
-  --search-button: #b1b1b1;
-  --search-button-hover: #686868;
-  --footer-text: #555;
-  --footer-link: #444;
-  --hr-border: #b1b4b6;
-  --main-big-headers-text: #212224;
-  --main-big-headers-border: #ddd;
-  --main-h5-header-text: #000;
-  --main-h6-header-text: #777;
-  --main-h4-header-border: #e5e5e5;
-  --header-link: #3e4349;
-  --header-link-hover-text: #fff;
-  --note-background: #eee;
-  --note-border: #ccc;
-  --warning-background: #fef9e9;
-  --warning-border: #fbe091;
-  --error-background:  #ffe4e4;
-  --error-border: #f66;
-  --helpful-background: #e4f2ff;
-  --helpful-border: #66beff;
-  --codeblock-background: #f5f5f5;
-  --codeblock-border: #c6c9cb;
-  --codeblock-text: #222;
-  --inline-code-background: #ecf0f3;
+
+  /* base palette */
+  --white: #ffffff;
+  --grey-1: #ebebeb;
+  --grey-2: #e0e0e0;
+  --grey-3: #d6d6d6;
+  --grey-4: #848484;
+  --grey-5: #5c5c5c;
+  --grey-6: #333333;
+  --grey-7: #292929;
+  --black: #0a0a0a;
+
+  --blue: #3399ff;
+  --light-blue: #d0e7ff;
+  --cyan-1: #22acca;
+  --cyan-2: #1c8fa8;
+  --cyan-3: #167286;
+  --yellow: #cccc00;
+  --light-yellow: #ffffcc;
+  --red: #cc0033;
+  --light-red: #ffccd9;
+
+  /* theme gets built on these base colours */
+  --settings: var(--white);
+  --settings-hover: var(--grey-1);
+  --main-background: var(--grey-1);
+  --link-text: var(--cyan-2);
+  --link-hover-text: var(--cyan-3);
+  --main-text: var(--black);
+  --mobile-nav-background: var(--black);
+  --mobile-nav-text: var(--white);
+  --mobile-nav-hover-text: var(--white);
+  --mobile-nav-header-text: var(--white);
+  --nav-background: var(--main-background);
+  --nav-text: var(--grey-6);
+  --nav-hover-text: var(--grey-6);
+  --nav-header-text: var(--black);
+  --search-border: var(--grey-4);
+  --search-background: var(--grey-6);
+  --search-text: var(--white);
+  --search-focus: var(--blue);
+  --search-button: var(--white);
+  --search-button-hover: var(--grey-1);
+  --footer-text: var(--grey-5);
+  --footer-link: var(--grey-6);
+  --hr-border: var(--grey-2);
+  --main-big-headers-text: var(--black);
+  --main-big-headers-border: var(--grey-4);
+  --main-h5-header-text: var(--black);
+  --main-h6-header-text: var(--grey-4);
+  --main-h4-header-border: var(--grey-4);
+  --header-link: var(--grey-6);
+  --header-link-hover-text: var(--white);
+  --note-background: var(--grey-3);
+  --note-border: var(--grey-4);
+  --warning-background: var(--light-yellow);
+  --warning-border: var(--yellow);
+  --error-background:  var(--light-red);
+  --error-border: var(--red);
+  --helpful-background: var(--light-blue);
+  --helpful-border: var(--blue);
+  --codeblock-background: var(--grey-2);
+  --codeblock-border: var(--grey-4);
+  --codeblock-text: var(--grey-6);
+  --inline-code-background: var(--grey-2);
   --xref-code-background: transparent;
-  --api-entry-background: #f5f5f5;
-  --table-header-background: #f5f5f5;
-  --table-text: #000;
-  --table-border: #ddd;
-  --mobile-active-toc: #212121;
-  --active-toc: #dbdbdb;
+  --api-entry-background: var(--grey-2);
+  --table-header-background: var(--grey-3);
+  --table-text: var(--black);
+  --table-border: var(--grey-4);
+  --mobile-active-toc: var(--grey-6);
+  --active-toc: var(--grey-3);
   --scrollbar: rgba(0,0,0,0.2);
   --scrollbar-hover: rgba(0,0,0,0.4);
-  --rtd-ad-border: #bfbfbf;
-  --rtd-ad-background: #eeeeee;
-  --rtd-ad-text-rgb: 64, 64, 64;
+  --rtd-ad-border: var(--grey-3);
+  --rtd-ad-background: var(--grey-2);
+  --rtd-ad-main-text: var(--grey-6);
+  --rtd-ad-small-text: var(--grey-4);
 }
 
 :root[data-font="sans"] {
@@ -84,52 +104,53 @@ Historically however, thanks to:
 }
 
 :root[data-theme="dark"] {
-  --main-background: #303030;
-  --link-text: #2591c4;
-  --link-hover-text: #3b6a74;
-  --text-normal: #fff;
-  --mobile-nav-background: #424242;
-  --mobile-nav-text: #fff;
-  --mobile-nav-hover-text: #fff;
-  --mobile-nav-header-text: #fff;
-  --nav-background: #303030;
-  --nav-text: rgba(255,255,255,0.7);
-  --nav-hover-text: rgba(255,255,255,0.5);
-  --nav-header-text: rgba(255,255,255,0.87);
-  --footer-text: #555;
-  --footer-link: #444;
-  --hr-border: #b1b4b6;
-  --main-big-headers-text: rgba(255,255,255,0.87);
-  --main-big-headers-border: #ddd;
-  --main-h5-header-text: #000;
-  --main-h6-header-text: #777;
-  --main-h4-header-border: #e5e5e5;
-  --header-link: #3e4349;
-  --header-link-hover-text: #fff;
-  --note-background: #424242;
-  --note-border: #222222;
-  --warning-background: #424242;
-  --warning-border: #aaaa22;
-  --error-background:  #424242;
-  --error-border: #aa2222;
-  --helpful-background: #424242;
-  --helpful-border: #22aaaa;
-  --codeblock-background: #222222;
-  --codeblock-border: #424242;
-  --codeblock-text: rgba(255,255,255,0.7);
-  --inline-code-background: #212121;
+  --main-background: var(--grey-7);
+  --link-text: var(--cyan-1);
+  --link-hover-text: var(--cyan-1);
+  --main-text: var(--white);
+  --mobile-nav-background: var(--grey-5);
+  --mobile-nav-text: var(--white);
+  --mobile-nav-hover-text: var(--white);
+  --mobile-nav-header-text: var(--white);
+  --nav-background: var(--grey-7);
+  --nav-text: var(--grey-1);
+  --nav-hover-text: var(--grey-2);
+  --nav-header-text: var(--white);
+  --footer-text: var(--grey-2);
+  --footer-link: var(--grey-1);
+  --hr-border: var(--grey-1);
+  --main-big-headers-text: var(--grey-1);
+  --main-big-headers-border: var(--grey-1);
+  --main-h5-header-text: var(--grey-4);
+  --main-h6-header-text: var(--grey-5);
+  --main-h4-header-border: var(--grey-2);
+  --header-link: var(--grey-2);
+  --header-link-hover-text: var(--grey-6);
+  --note-background: var(--grey-6);
+  --note-border: var(--black);
+  --warning-background: var(--light-yellow);
+  --warning-border: var(--yellow);
+  --error-background:  var(--light-red);
+  --error-border: var(--red);
+  --helpful-background: var(--light-blue);
+  --helpful-border: var(--blue);
+  --codeblock-background: var(--grey-6);
+  --codeblock-border: var(--black);
+  --codeblock-text: var(--grey-1);
+  --inline-code-background: var(--black);
   --xref-code-background: transparent;
-  --api-entry-background: #212121;
-  --table-header-background: #f5f5f5;
-  --table-text: #000;
-  --table-border: #ddd;
-  --mobile-active-toc: #212121;
-  --active-toc: #212121;
+  --api-entry-background: var(--grey-6);
+  --table-header-background: var(--grey-6);
+  --table-text: var(--grey-1);
+  --table-border: var(--grey-4);
+  --mobile-active-toc: var(--grey-6);
+  --active-toc: var(--grey-6);
   --scrollbar: rgba(0,0,0,0.5);
   --scrollbar-hover: rgba(0,0,0,0.7);
-  --rtd-ad-border: #333333;
-  --rtd-ad-background: #404040;
-  --rtd-ad-text-rgb: 221, 221, 221;
+  --rtd-ad-border: var(--grey-6);
+  --rtd-ad-background: var(--grey-5);
+  --rtd-ad-main-text: var(--grey-2);
+  --rtd-ad-small-text: var(--grey-1);
 }
 
 img[src$="snake_dark.svg"]  {
@@ -149,7 +170,7 @@ body {
   padding: 0;
   height: 100%;
   background-color: var(--main-background);
-  color: var(--text-normal);
+  color: var(--main-text);
 }
 
 
@@ -204,7 +225,7 @@ a:hover {
 header {
   grid-area: h;
   background-color: var(--main-background);
-  color: var(--primary-text);
+  color: var(--main-text);
 }
 
 header > nav {
@@ -214,7 +235,12 @@ header > nav {
 }
 
 header > nav > a {
-  color: var(--primary-text);
+  color: var(--white);
+}
+
+header > nav > a:hover {
+  color: var(--white);
+  text-decoration: underline;
 }
 
 .main-heading {
@@ -223,8 +249,8 @@ header > nav > a {
 
 .sub-header {
   grid-area: n;
-  background-color: var(--secondary-accent);
-  color: var(--secondary-text);
+  background-color: var(--grey-6);
+  color: var(--white);
 }
 
 /* these aren't shown on mobile */
@@ -629,11 +655,13 @@ div.admonition p.admonition-title + p {
 div.important, div.note, div.hint, div.tip {
   background-color: var(--note-background);
   border: 1px solid var(--note-border);
+  color: var(--note-text, var(--main-text));
 }
 
 div.attention, div.warning, div.caution, div.seealso {
   background-color: var(--warning-background);
   border: 1px solid var(--warning-border);
+  color: var(--warning-text, var(--main-text));
 }
 
 dl.field-list > dd {
@@ -651,7 +679,7 @@ div.topic {
 /* don't link-ify the FAQ page */
 a.toc-backref {
   text-decoration: none;
-  color: var(--text-normal);
+  color: var(--main-text);
 }
 
 /* bold and fix the Parameter, Raises, etc. */
@@ -673,16 +701,20 @@ a.reference.internal > strong {
 div.danger, div.error {
   background-color: var(--error-background);
   border: 1px solid var(--error-border);
+  color: var(--error-text, var(--main-text));
 }
 
 /* helpful admonitions */
 div.helpful {
   background-color: var(--helpful-background);
   border: 1px solid var(--helpful-border);
+  color: var(--helpful-text, var(--main-text));
 }
 
 div.helpful > p.admonition-title {
   display: block;
+  margin-top: 0px;
+  margin-bottom: 0.5em;
 }
 
 div.helpful > p.admonition-title::after {
@@ -769,6 +801,7 @@ dl.class {
   margin-bottom: 50px;
 }
 
+dl.data > dt,
 dl.describe > dt,
 dl.function > dt,
 dl.attribute > dt,
@@ -810,6 +843,7 @@ dd {
 
 table.docutils {
   width: 100%;
+  border-collapse: collapse;
 }
 
 table.docutils.footnote {
@@ -831,10 +865,14 @@ table.docutils thead tr th {
 table.docutils tbody tr th,
 table.docutils tbody tr td {
   border-bottom: 0;
-  border-top: solid 1px var(--table-border);
   padding: 7px 5px;
   vertical-align: top;
 }
+
+table.docutils tbody tr:not(:first-child) {
+  border-top: solid 1px var(--table-border);
+}
+
 table.docutils tbody tr:last-child th,
 table.docutils tbody tr:last-child td {
   border-bottom: solid 1px var(--table-border);
@@ -876,11 +914,11 @@ section#welcome-to-discord-py > h1 {
 }
 
 .ethical-fixedfooter a {
-  color: rgb(var(--rtd-ad-text-rgb)) !important;
+  color: var(--rtd-ad-main-text) !important;
 }
 
-.ethical-callout a {
-  color: rgba(var(--rtd-ad-text-rgb), 0.7) !important;
+.ethical-callout > small > em > a {
+  color: var(--rtd-ad-small-text) !important;
 }
 
 .active {
@@ -910,7 +948,7 @@ div.code-block-caption {
   }
 
   header {
-    background-color: var(--primary-accent);
+    background-color: var(--black);
   }
 
   header > nav {