From b48fa1f1a0cf021ea714ae9e9b6b70aedc22825e Mon Sep 17 00:00:00 2001
From: Fabian Boehm <FHomborg@gmail.com>
Date: Fri, 25 Aug 2023 17:13:35 +0200
Subject: [PATCH] Css refresh (#9982)

This cleans up the CSS, reduces the number of different colors and special settings we use.

It increases contrast so we now pass WCAG AAA (according to chromium), and switches to css variables for colors to make dark mode simpler to implement.
---
 .../python_docs_theme/static/pydoctheme.css   | 183 +++++++-----------
 doc_src/python_docs_theme/static/pygments.css |  53 +++--
 2 files changed, 101 insertions(+), 135 deletions(-)

diff --git a/doc_src/python_docs_theme/static/pydoctheme.css b/doc_src/python_docs_theme/static/pydoctheme.css
index 4c8b7dd71..5e57c95b9 100644
--- a/doc_src/python_docs_theme/static/pydoctheme.css
+++ b/doc_src/python_docs_theme/static/pydoctheme.css
@@ -1,5 +1,18 @@
 :root {
-  color-scheme: light dark; /* both supported */
+    color-scheme: light dark; /* both supported */
+    --link-color: #0030B3;
+    --visited-link-color: #6363bb;
+    --hover-link-color: #00A5F4;
+    --text-color: #222;
+    --main-background: #EEEEFA;
+    --secondary-background: #ddddea;
+    --outer-background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
+    --code-background: rgba(255,255,255, .2);
+    --code-border: #ac9;
+    --sidebar-border-color: #ccc;
+    --secondary-link-color: #444;
+    --highlight-background: #FFF;
+    --td-background: white;
 }
 
 html {
@@ -8,7 +21,10 @@ html {
 }
 
 body {
-    background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
+    background: var(--outer-background);
+}
+
+html, body, input {
     /* Pick a font.
        sans-serif is the Browser default. This is great because the user could change it.
        Unfortunately the defaults are decades old and e.g. on Windows still use Arial in Firefox and Edge,
@@ -29,8 +45,7 @@ body {
 body {
   /* These stay, assuming some browsers pick different defaults */
   font-size: 100%;
-  background-color: #eeeefa;
-  color: #000;
+  background-color: var(--main-background);
   margin: 0;
   padding: 0;
 }
@@ -97,7 +112,7 @@ div.sphinxsidebar ul ul, div.sphinxsidebar ul.want-points {
 div.sphinxsidebar ul {
   margin: 10px;
   padding: 0;
-  color: #444444;
+  color: var(--secondary-link-color);
   margin: 10px;
   list-style: none;
 }
@@ -132,7 +147,7 @@ div.sphinxsidebar h3 {
 }
 
 div.sphinxsidebar h4 {
-  color: #444444;
+  color: var(--secondary-link-color);
   font-size: 1.3em;
   font-weight: normal;
   margin: 5px 0 0 0;
@@ -162,7 +177,7 @@ a:hover, div.footer a {
 }
 
 div.related a, div.sphinxsidebar a {
-  color: #444444;
+  color: var(--secondary-link-color);
 }
 
 div.warning {
@@ -192,10 +207,6 @@ div.footer {
   font-size: 75%;
 }
 
-th, dl.field-list > dt {
-  background-color: #ede;
-}
-
 table.docutils {
   border-collapse: collapse;
 }
@@ -212,9 +223,9 @@ th > :first-child, td > :first-child {
 /* End of SPHINX IMPORT */
 
 div#fmain {
-    color: #222;
+    color: var(--text-color);
     padding: 1em 2em;
-    background-color: #EEEEFA;
+    background-color: var(--main-background);
     border-radius: 14px;
     position: relative;
     margin: 1em auto 1em;
@@ -227,7 +238,8 @@ div#fmain {
 div.related {
     margin-bottom: 0;
     padding: 0.5em 0;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid;
+    border-color: var(--sidebar-border-color);
     margin-top: 0;
 }
 
@@ -243,15 +255,10 @@ div.section {
     width: 100%;
 }
 
-div.related a:hover,
-div.footer a:hover,
-div.sphinxsidebar a:hover {
-    color: #0095C4;
-}
-
 div.related:first-child {
     border-top: 0;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid;
+    border-color: var(--sidebar-border-color);
 }
 
 .inline-search {
@@ -265,7 +272,8 @@ form.inline-search input[type="submit"] {
 }
 
 div.sphinxsidebar {
-    border-right: 1px solid #ccc;
+    border-right: 1px solid;
+    border-color: var(--sidebar-border-color);
     border-radius: 0px;
     line-height: 1em;
     font-size: smaller;
@@ -331,7 +339,8 @@ ul li dd {
 
 form.inline-search input,
 div.sphinxsidebar input {
-    border: 1px solid #999999;
+    border: 1px solid;
+    border-color: var(--sidebar-border-color);
     font-size: smaller;
     border-radius: 3px;
 }
@@ -370,7 +379,8 @@ div.body hr {
 
 div.body pre, code {
     border-radius: 3px;
-    border: 1px solid #ac9;
+    border: 1px solid;
+    border-color: var(--code-border);
 }
 
 div.highlight {
@@ -405,28 +415,31 @@ div.body div.seealso {
     border: 1px solid #dddd66;
 }
 
-div.body a {
-    color: #0072aa;
+a {
+    color: var(--link-color);
 }
 
 div.body a:visited {
-    color: #6363bb;
+    color: var(--visited-link-color);
 }
 
+div.related a:hover,
+div.footer a:hover,
+div.sphinxsidebar a:hover,
 div.body a:hover {
-    color: #00B0E4;
+    color: var(--hover-link-color);
 }
 
 code {
     /* Make inline-code better visible */
-    background-color: rgba(20,20,80, .1);
+    background-color: var(--code-background);
     padding-left: 5px;
     padding-right: 5px;
     margin-left: 3px;
     margin-right: 3px;
 }
 
-tt, code, pre, dl > dt span ~ em, #synopsis p, #synopsis code, .command {
+tt, code, pre, dl > dt span ~ em, #synopsis p, #synopsis code, .command, button {
     /* Pick a monospace font.
        ui-monospace is the monospace version of system-ui - the system's monospace font.
        Unfortunately it's barely supported anywhere (at time of writing only Safari does!),
@@ -473,7 +486,8 @@ div.body tt.xref, div.body a tt, div.body code.xref, div.body a code {
 }
 
 table.docutils {
-    border: 1px solid #ddd;
+    border: 1px solid;
+    border-color: var(--sidebar-border-color);
     min-width: 20%;
     border-radius: 3px;
     margin-top: 1em;
@@ -484,7 +498,8 @@ table.docutils {
 }
 
 table.docutils td, table.docutils th {
-    border: 1px solid #ddd !important;
+    border: 1px solid;
+    border-color: var(--sidebar-border-color);
     border-radius: 3px;
 }
 
@@ -492,13 +507,13 @@ table p, table li {
     text-align: left !important;
 }
 
-table.docutils th {
-    background-color: #eee;
+th {
+    background-color: var(--secondary-background);
     padding: 0.3em 0.5em;
 }
 
 table.docutils td {
-    background-color: white;
+    background-color: var(--td-background);
     padding: 0.3em 0.5em;
 }
 
@@ -514,16 +529,8 @@ div.footer {
     margin-right: 10px;
 }
 
-.refcount {
-    color: #060;
-}
-
-.stableabi {
-    color: #229;
-}
-
 .highlight {
-    background: #FFF;
+    background: var(--highlight-background);
 }
 
 #synopsis p {
@@ -625,11 +632,10 @@ div.documentwrapper {
 .prompt { color: #8f7902; }
 
 kbd {
-  background-color: #f9f9f9;
-  border: 1px solid #aaa;
+  background-color: var(--td-background);
+  border: 1px solid;
+  border-color: var(--sidebar-border-color);
   border-radius: .2em;
-  box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
-  color: #000;
   padding: 0.1em 0.3em;
 }
 
@@ -641,91 +647,38 @@ div.body .internal.reference:link {
     content: "$";
 }
 .footnote, .footnote-reference {
-    background-color: #ddddea;
+    background-color: var(--secondary-background);
     font-size: 90%;
 }
 
 @media (prefers-color-scheme: dark) {
-    body {
-        background: linear-gradient(to top, #1f1f3f 0%,#051f3a 100%);
+    :root {
+        --link-color: #5fb0fc;
+        --text-color: #DDD;
+        --main-background: #202028;
+        --secondary-background: #112;
+        --outer-background: linear-gradient(to top, #1f1f3f 0%,#051f3a 100%);
+        --code-background: rgba(20, 20, 25, .2);
+        --code-border: #536;
+        --sidebar-border-color: #666;
+        --secondary-link-color: #DDD;
+        --highlight-background: #000;
+        --td-background: #111;
     }
+
     div#fmain {
-        color: #DDD;
-        background-color: #202028;
         box-shadow: 0 0 5px 1px #000;
     }
 
-    div.body pre, code {
-        border: 1px solid #536;
-    }
-
-    .footnote, .footnote-reference {
-        background-color: #101020;
-    }
-
-    div.sphinxsidebar {
-        border-right: 1px solid #666;
-    }
-
-    div.related:first-child {
-        border-bottom: 1px solid #666;
-    }
-
-    div.related {
-        border-top: 1px solid #666;
-    }
-
-    div.sphinxsidebar a, div.footer {
-        color: #DDD;
-    }
-
-    div.sphinxsidebar h3 a, div.related a, div.sphinxsidebar h3, div.footer a {
-        color: #DDD;
-    }
-    .highlight {
-        background: #000;
-    }
     kbd {
-        background-color: #111;
-        border: 1px solid #444;
         box-shadow: 0.1em 0.1em 0.2em rgba(100,100,100,0.1);
         color: #FFF;
     }
-    table.docutils th {
-        background-color: #222;
-    }
 
     table.docutils td {
         background-color: #111;
     }
-    input {
-        background-color: #222;
-        color: #DDD;
-    }
-
-    dt:target, span.highlighted {
-        background-color: #404060;
-    }
-    table.docutils {
-        border: 1px solid #222;
-    }
-
-    table.docutils td, table.docutils th {
-        border: 1px solid #222 !important;
-    }
-    div.body a {
-        color: #2092fa;
-    }
 
     /* Color based on the Name.Function (.nf) class from pygments.css. */
     .command { color: #008fd7 }
-
-    /* The table background on fishfish Beta r1 */
-    th, dl.field-list > dt {
-        background-color: #121;
-    }
-
-    code {
-        background-color: rgba(200, 200, 255, .2);
-    }
 }
diff --git a/doc_src/python_docs_theme/static/pygments.css b/doc_src/python_docs_theme/static/pygments.css
index d657ce377..d33895f48 100644
--- a/doc_src/python_docs_theme/static/pygments.css
+++ b/doc_src/python_docs_theme/static/pygments.css
@@ -1,20 +1,19 @@
 .highlight .hll { background-color: #ffffcc }
 .highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
 .highlight .k { color: #204a87; font-weight: bold } /* Keyword */
-.highlight .o { color: #00a6b2; } /* Operator */
-.highlight .p { color: #00bfff; } /* Punctuation */
-.highlight .c { color: #777; font-style: italic; } /* Comment */
-.highlight .ch { color: #8f7902; font-style: italic } /* Comment.Hashbang */
-.highlight .cm { color: #8f7902; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #8f7902; font-style: italic } /* Comment.Preproc */
-.highlight .cpf { color: #8f7902; font-style: italic } /* Comment.PreprocFile */
-.highlight .c1 { color: #8f7902; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #8f7902; font-style: italic } /* Comment.Special */
+.highlight .o { color: #005F66; } /* Operator */
+.highlight .p { color: #000f8f; } /* Punctuation */
+.highlight .c { color: #575757; font-style: italic; } /* Comment */
+.highlight .ch { color: #645502; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #645502; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #645502; font-style: italic } /* Comment.Preproc */
+.highlight .cpf { color: #645502; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #645502; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #645502; font-style: italic } /* Comment.Special */
 .highlight .gd { color: #a40000 } /* Generic.Deleted */
 .highlight .gr { color: #ef2929 } /* Generic.Error */
 .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
 .highlight .gi { color: #00A000 } /* Generic.Inserted */
-.highlight .gp { color: #8f7902 } /* Generic.Prompt */
 .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
 .highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
 .highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
@@ -24,15 +23,15 @@
 .highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
 .highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
 .highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
-.highlight .s { color: #4e9a06 } /* Literal.String */
+.highlight .s { color: #2F5B06 } /* Literal.String */
 .highlight .na { color: #c4a000 } /* Name.Attribute */
 .highlight .nb { color: #204a87 } /* Name.Builtin */
-.highlight .no { color: #00bfff } /* Name.Constant */
+.highlight .no { color: #000f8f } /* Name.Constant */
 .highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
 .highlight .ni { color: #ce5c00 } /* Name.Entity */
 .highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #005fd7 } /* Name.Function */
-.highlight .nl { color: #f57900 } /* Name.Label */
+.highlight .nf { color: #004BCC; } /* Name.Function */
+.highlight .nl { color: #f57900; } /* Name.Label */
 .highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
 .highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
 .highlight .w { color: #f8f8f8; } /* Text.Whitespace */
@@ -46,13 +45,13 @@
 .highlight .sc { color: #4e9a06 } /* Literal.String.Char */
 .highlight .dl { color: #4e9a06 } /* Literal.String.Delimiter */
 .highlight .sd { color: #8f7902; font-style: italic } /* Literal.String.Doc */
-.highlight .s2 { color: #4daf08 } /* Literal.String.Double */
-.highlight .se { color: #00a6b2 } /* Literal.String.Escape */
+.highlight .s2 { color: #2E6506 } /* Literal.String.Double */
+.highlight .se { color: #800400 } /* Literal.String.Escape */
 .highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
 .highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
 .highlight .sx { color: #4e9a06 } /* Literal.String.Other */
 .highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
-.highlight .s1 { color: #d0d00b } /* Literal.String.Single */
+.highlight .s1 { color: #605000 } /* Literal.String.Single */
 .highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
 .highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
 .highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
@@ -66,12 +65,26 @@
     :root {
         --contrast: #FFFFFF;
     }
-    .highlight .k { color: #507a97; font-weight: bold } /* Keyword */
-    .highlight .nf { color: #008fd7 } /* Name.Function */
-    .highlight .nb { color: #209a87 } /* Name.Builtin */
+    .highlight .no { color: #00bfff } /* Name.Constant */
+    .highlight .p { color: #00bfff; } /* Punctuation */
+    .highlight .k { color: #60A3BE; font-weight: bold } /* Keyword */
+    .highlight .nf { color: #00a0ff } /* Name.Function */
+    .highlight .nb { color: #A0AfF7 } /* Name.Builtin - we don't emit this, it's for bash scripts*/
+    .highlight .s { color: #4eFa06 } /* Literal.String */
+    .highlight .s1 { color: #a0a00b } /* Literal.String.Single */
     .highlight .s2 { color: #9ce781 } /* Literal.String.Double */
+    .highlight .c { color: #969696; font-style: italic; } /* Comment */
+    .highlight .ch { color: #b19602; font-style: italic } /* Comment.Hashbang */
+    .highlight .cm { color: #b19602; font-style: italic } /* Comment.Multiline */
+    .highlight .cp { color: #b19602; font-style: italic } /* Comment.Preproc */
+    .highlight .cpf { color: #b19602; font-style: italic } /* Comment.PreprocFile */
+    .highlight .c1 { color: #b19602; font-style: italic } /* Comment.Single */
+    .highlight .cs { color: #b19602; font-style: italic } /* Comment.Special */
+    .highlight .o { color: #00F6b2; } /* Operator */
+    .highlight .se { color: #00a6b2 } /* Literal.String.Escape */
 }
 .highlight .g { color: var(--contrast) } /* Generic */
+.highlight .gp { color: var(--contrast) } /* Generic.Prompt */
 .highlight .l { color: var(--contrast) } /* Literal */
 .highlight .n { color: var(--contrast) } /* Name */
 .highlight .x { color: var(--contrast) } /* Other */