From 2f4f2e8160031ae4c8be25917e9aafab875ee97b Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Sat, 12 Oct 2024 18:08:48 +0100
Subject: [PATCH 1/5] Cleanup rdoc.css

---
 .../generator/template/darkfish/css/rdoc.css  | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index a4e1ef188c..f24c99efec 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -23,6 +23,8 @@
   --border-color: #e0e0e0;
   --sidebar-text-color: #2c3e50;  /* Dark blue-gray for contrast */
   --source-code-background-color: #e8f0eb;
+  --search-section-background-color: #e8e8e8;
+  --nav-border-color: #aaa;
 
   /* Font family variables */
   --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
@@ -160,7 +162,7 @@ nav[hidden] {
 
 nav footer {
   padding: 1em;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--nav-border-color);
 }
 
 nav .nav-section {
@@ -365,7 +367,7 @@ main h6 {
 .ruby-string     { color: #22863a; }  /* Green for strings */
 
 code {
-  background-color: #f0f4f8;  /* Match pre background */
+  background-color: var(--code-block-background-color);
   padding: 0.2em 0.4em;
   border-radius: 3px;
   font-size: 85%;
@@ -412,7 +414,7 @@ em {
 }
 
 main {
-  color: #333;
+  color: var(--text-color);
 }
 
 main > h1:first-child,
@@ -484,13 +486,13 @@ main pre {
 
 main hr {
   margin: 1.5em 1em;
-  border: 2px solid #ddd;
+  border: 2px solid var(--border-color);
 }
 
 main blockquote {
   margin: 0 2em 1.2em 1.2em;
   padding-left: 0.5em;
-  border-left: 2px solid #ddd;
+  border-left: 2px solid var(--border-color);
 }
 
 main ol,
@@ -520,20 +522,23 @@ main dd {
 main header h2 {
   margin-top: 2em;
   border-width: 0;
-  border-top: 4px solid #bbb;
+  border-top: 4px solid var(--border-color);
   font-size: 130%;
 }
 
 main header h3 {
   margin: 2em 0 1.5em;
   border-width: 0;
-  border-top: 3px solid #bbb;
+  border-top: 3px solid var(--border-color);
   font-size: 120%;
 }
 
 .documentation-section-title {
   position: relative;
 }
+
+/* This is the little arrow that appears when you hover over a section title */
+/* Probably rarely used and can be removed if desired */
 .documentation-section-title .section-click-top {
   position: absolute;
   top: 6px;
@@ -570,6 +575,7 @@ main header h3 {
   color: #666;
 }
 
+/* Not sure what this is for */
 .documentation-section h2 {
   position: relative;
 }
@@ -655,10 +661,6 @@ main .method-controls {
   cursor: pointer;
 }
 
-main .method-alias .method-heading {
-  color: #666;
-}
-
 main .method-description,
 main .aliases {
   margin-top: 0.75em;
@@ -688,9 +690,6 @@ main #attribute-method-details .method-detail:hover {
 main .attribute-access-type {
   text-transform: uppercase;
 }
-/* @end */
-
-/* @end */
 
 /* @group search results */
 #search-results {
@@ -704,13 +703,13 @@ main .attribute-access-type {
 }
 
 #search-results .search-selected {
-  background: #e8e8e8;
+  background: var(--search-section-background-color);
   border-bottom: 1px solid transparent;
 }
 
 #search-results li {
   list-style: none;
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid var(--nav-border-color);
   margin-bottom: 0.5em;
 }
 

From f56b140aedfa45d806043aade0d6061c05eef425 Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Sat, 12 Oct 2024 18:24:22 +0100
Subject: [PATCH 2/5] Use red as the highlight color

---
 .../generator/template/darkfish/css/rdoc.css  | 433 +++++++-----------
 1 file changed, 169 insertions(+), 264 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index f24c99efec..b1ed2e19c7 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -1,5 +1,5 @@
 /*
- * "Darkfish" Rdoc CSS
+ * "Darkfish" RDoc CSS
  * $Id: rdoc.css 54 2009-01-27 01:09:48Z deveiant $
  *
  * Author: Michael Granger <ged@FaerieMUD.org>
@@ -7,24 +7,22 @@
  */
 
 /* vim: ft=css et sw=2 ts=2 sts=2 */
-/* Base Green is: #6C8C22 */
 
 /* 1. Variables and Root Styles */
 :root {
   --sidebar-width: 300px;
-  --primary-color: #2c8c5e;  /* A more muted green */
-  --secondary-color: #246b4b;  /* A darker, muted green */
-  --text-color: #333;
-  --background-color: #f8f9fa;
-  --code-block-background-color: #f0f4f8;
-  --code-block-border-color: #d1d5da;
-  --link-color: #246b4b;  /* A muted teal-green color */
-  --link-hover-color: #25a28a;  /* A slightly brighter teal-green */
-  --border-color: #e0e0e0;
-  --sidebar-text-color: #2c3e50;  /* Dark blue-gray for contrast */
-  --source-code-background-color: #e8f0eb;
-  --search-section-background-color: #e8e8e8;
-  --nav-border-color: #aaa;
+  --highlight-color: #b61d1c; /* Reddish color for accents and headings */
+  --secondary-highlight-color: #c83045; /* Darker reddish color for secondary highlights */
+  --text-color: #505050; /* Dark bluish-grey for text */
+  --background-color: #fefefe; /* Near white background */
+  --code-block-background-color: #e6e6e6; /* Slightly darker grey for code blocks */
+  --link-color: #3F3D56; /* Dark bluish-grey for links */
+  --link-hover-color: #b61d1c; /* Reddish color on hover */
+  --border-color: #e0e0e0; /* General border color */
+  --source-code-toggle-color: var(--secondary-highlight-color);
+  --scrollbar-thumb-hover-background: #505050; /* Hover color for scrollbar thumb */
+  --table-header-background-color: #eceaed;
+  --table-td-background-color: #f5f4f6;
 
   /* Font family variables */
   --font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
@@ -86,39 +84,52 @@ h4:target,
 h5:target,
 h6:target {
   margin-left: -10px;
-  border-left: 10px solid var(--source-code-background-color);
+  border-left: 10px solid var(--code-block-background-color);
   scroll-margin-top: 1rem;
 }
 
+main .anchor-link:target {
+  scroll-margin-top: 20px;
+}
+
 /* 4. Links */
-:link,
-:visited {
+a {
   color: var(--link-color);
   text-decoration: none;
   transition: color 0.3s ease;
 }
 
-:link:hover,
-:visited:hover {
+a:hover {
   color: var(--link-hover-color);
   text-decoration: underline;
 }
 
+a code:hover {
+  color: var(--link-hover-color);
+}
+
 /* 5. Code and Pre */
 code,
 pre {
   font-family: var(--font-code);
   background-color: var(--code-block-background-color);
-  border: 1px solid var(--code-block-border-color);
+  border: 1px solid var(--border-color);
   border-radius: 6px;
   padding: 16px;
   overflow-x: auto;
-  font-size: 15px;  /* Increased from 14px */
-  line-height: 1.5;  /* Slightly increased for better readability with larger font */
-  margin: 1em 0;  /* Add some vertical margin */
+  font-size: 15px;
+  line-height: 1.5;
+  margin: 1em 0;
+}
+
+code {
+  background-color: var(--code-block-background-color);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-size: 85%;
 }
 
-/* 6. Tables */
+/* Tables */
 table {
   margin: 0;
   border-spacing: 0;
@@ -127,15 +138,15 @@ table {
 
 table tr th, table tr td {
   padding: 0.2em 0.4em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color);
 }
 
 table tr th {
-  background-color: #eceaed;
+  background-color: var(--table-header-background-color);
 }
 
 table tr:nth-child(even) td {
-  background-color: #f5f4f6;
+  background-color: var(--table-td-background-color);
 }
 
 /* 7. Navigation and Sidebar */
@@ -148,12 +159,12 @@ nav {
   bottom: 0;
   left: 0;
   width: var(--sidebar-width);
-  background: var(--background-color);
+  background: var(--background-color); /* It needs an explicit background for toggling narrow screens */
   overflow-y: auto;
   z-index: 10;
   display: flex;
   flex-direction: column;
-  color: var(--sidebar-text-color);
+  color: var(--text-color);
 }
 
 nav[hidden] {
@@ -162,7 +173,11 @@ nav[hidden] {
 
 nav footer {
   padding: 1em;
-  border-top: 1px solid var(--nav-border-color);
+  border-top: 1px solid var(--border-color);
+}
+
+nav footer a {
+  color: var(--secondary-highlight-color);
 }
 
 nav .nav-section {
@@ -170,20 +185,20 @@ nav .nav-section {
   padding: 0 1em;
 }
 
-nav h2 {
+nav h2, nav h3 {
   margin: 0 0 0.5em;
   padding: 0.5em 0;
-  font-size: 1.2em;
-  color: var(--text-color);
+  color: var(--highlight-color);
   border-bottom: 1px solid var(--border-color);
 }
 
+nav h2 {
+  font-size: 1.2em;
+}
+
 nav h3,
 #table-of-contents-navigation {
-  margin: 0;
-  padding: 0.5em 0;
   font-size: 1em;
-  color: var(--text-color);
 }
 
 nav ul,
@@ -216,6 +231,7 @@ nav a {
 }
 
 nav a:hover {
+  color: var(--link-hover-color);
   text-decoration: underline;
 }
 
@@ -276,6 +292,13 @@ main {
   }
 }
 
+main h1[class] {
+  margin-top: 0;
+  margin-bottom: 1em;
+  font-size: 2.5em;
+  color: var(--highlight-color);
+}
+
 main h1,
 main h2,
 main h3,
@@ -283,6 +306,7 @@ main h4,
 main h5,
 main h6 {
   font-family: var(--font-heading);
+  color: var(--highlight-color);
 }
 
 @media (min-width: 1024px) {
@@ -291,12 +315,7 @@ main h6 {
   }
 }
 
-#validator-badges {
-  margin: 1em 1em 2em;
-  font-size: smaller;
-}
-
-/* 9. Search */
+/* Search */
 #search-section {
   padding: 1em;
   background-color: var(--background-color);
@@ -317,20 +336,19 @@ main h6 {
   font-size: 14px;
   outline: none;
   transition: border-color 0.3s ease;
-  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 #search-field:focus {
-  border-color: var(--primary-color);
+  border-color: var(--highlight-color);
 }
 
 #search-field::placeholder {
   color: var(--text-color);
-  opacity: 0.6;
 }
 
 #search-field-wrapper::before {
-  content: "\1F50D";  /* Unicode for magnifying glass */
+  content: "\1F50D";
   position: absolute;
   left: 0.75em;
   top: 50%;
@@ -340,170 +358,110 @@ main h6 {
   opacity: 0.6;
 }
 
-/* 10. Utility Classes */
-.hide { display: none !important; }
-.initially-hidden { display: none; }
-
-/* 11. Media Queries */
-@media (min-width: 1024px) {
-  /* Styles for larger screens */
-}
-
-/* 12. Print Styles */
-@media print {
-  /* Print-specific styles */
-}
-
-/* 13. Syntax Highlighting */
-.ruby-constant   { color: #0366d6; }  /* Bright blue for constants */
-.ruby-keyword    { color: #d73a49; }  /* Red for keywords */
-.ruby-ivar       { color: #e36209; }  /* Orange for instance variables */
-.ruby-operator   { color: #005cc5; }  /* Dark blue for operators */
-.ruby-identifier { color: #24292e; }  /* Dark gray for identifiers */
-.ruby-node       { color: #22863a; }  /* Green for interpolation */
-.ruby-comment    { color: #6a737d; }  /* Gray for comments */
-.ruby-regexp     { color: #032f62; }  /* Navy for regular expressions */
-.ruby-value      { color: #005cc5; }  /* Dark blue for numeric values */
-.ruby-string     { color: #22863a; }  /* Green for strings */
-
-code {
-  background-color: var(--code-block-background-color);
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 85%;
+/* Search Results */
+#search-results {
+  font-family: var(--font-primary);
+  font-weight: 300;
 }
 
-em {
-  text-decoration-color: rgba(52, 48, 64, 0.25);
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
+#search-results .search-match {
+  font-family: var(--font-heading);
+  font-weight: normal;
 }
 
-strong,
-em {
-  background-color: rgba(158, 178, 255, 0.1);
+#search-results .search-selected {
+  background: var(--code-block-background-color);
+  border-bottom: 1px solid transparent;
 }
 
-/* 14. Specific Component Styles */
-.table-of-contents ul {
-  margin: 1em;
+#search-results li {
   list-style: none;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 0.5em;
 }
 
-.table-of-contents ul ul {
-  margin-top: 0.25em;
-}
-
-.table-of-contents ul :link,
-.table-of-contents ul :visited {
-  font-size: 16px;
-}
-
-.table-of-contents li {
-  margin-bottom: 0.25em;
-}
-
-.table-of-contents li .toc-toggle {
-  width: 16px;
-  height: 16px;
-  background: url(../images/add.png) no-repeat;
-}
-
-.table-of-contents li .toc-toggle.open {
-  background: url(../images/delete.png) no-repeat;
-}
-
-main {
-  color: var(--text-color);
-}
-
-main > h1:first-child,
-main > h2:first-child,
-main > h3:first-child,
-main > h4:first-child,
-main > h5:first-child,
-main > h6:first-child {
-  margin-top: 0px;
+#search-results li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
 }
 
-main sup {
-  vertical-align: super;
-  font-size: 0.8em;
+#search-results li p {
+  padding: 0;
+  margin: 0.5em;
 }
 
-main .anchor-link:target {
-  scroll-margin-top: 20px;
+#search-results .search-namespace {
+  font-weight: bold;
 }
 
-/* The heading with the class name */
-main h1[class] {
-  margin-top: 0;
-  margin-bottom: 1em;
-  font-size: 2.5em;
-  color: var(--primary-color);
+#search-results li em {
+  background-color: rgba(224, 108, 117, 0.1);
+  font-style: normal;
 }
 
-main h1 {
-  margin: 1.5em 0 0.5em;
-  font-size: 2.2em;
-  color: var(--secondary-color);
+#search-results pre {
+  margin: 0.5em;
+  font-family: var(--font-code);
 }
 
-main h2 {
-  margin: 1.3em 0 0.5em;
-  font-size: 1.8em;
-  color: var(--secondary-color);
-}
+/* Syntax Highlighting - Gruvbox Light Scheme */
 
-main h3 {
-  margin: 1.2em 0 0.5em;
-  font-size: 1.5em;
-  color: var(--secondary-color);
-}
+.ruby-constant   { color: #AF3A03; }  /* Dark Orange */
+.ruby-keyword    { color: #9D0006; }  /* Dark Red */
+.ruby-ivar       { color: #B57614; }  /* Brown */
+.ruby-operator   { color: #427B58; }  /* Dark Teal */
+.ruby-identifier { color: #076678; }  /* Deep Teal */
+.ruby-node       { color: #8F3F71; }  /* Plum */
+.ruby-comment    { color: #928374; font-style: italic; }  /* Gray */
+.ruby-regexp     { color: #8F3F71; }  /* Plum */
+.ruby-value      { color: #AF3A03; }  /* Dark Orange */
+.ruby-string     { color: #79740E; }  /* Olive */
 
-main h4 {
-  margin: 1.1em 0 0.5em;
-  font-size: 1.3em;
-  color: var(--secondary-color);
+/* Emphasis */
+em {
+  text-decoration-color: rgba(52, 48, 64, 0.25);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
 }
 
-main h5, main h6 {
-  margin: 1em 0 0.5em;
-  font-size: 1.1em;
-  color: var(--secondary-color);
+strong,
+em {
+  color: var(--highlight-color);
+  background-color: rgba(255, 111, 97, 0.1); /* Light red background for emphasis */
 }
 
+/* Paragraphs */
 main p {
   line-height: 1.5em;
   font-weight: 400;
 }
 
+/* Preformatted Text */
 main pre {
   margin: 1.2em 0.5em;
   padding: 1em;
   font-size: 0.8em;
 }
 
+/* Horizontal Rules */
 main hr {
   margin: 1.5em 1em;
   border: 2px solid var(--border-color);
 }
 
+/* Blockquotes */
 main blockquote {
   margin: 0 2em 1.2em 1.2em;
   padding-left: 0.5em;
   border-left: 2px solid var(--border-color);
 }
 
-main ol,
-main ul {
-  margin: 1em 2em;
-}
-
+/* Lists */
 main li > p {
-  margin-bottom: 0.5em;
+  margin: 0.5em;
 }
 
+/* Definition Lists */
 main dl {
   margin: 1em 0.5em;
 }
@@ -519,6 +477,7 @@ main dd {
   margin: 0 1em 1em 0.5em;
 }
 
+/* Headers within Main */
 main header h2 {
   margin-top: 2em;
   border-width: 0;
@@ -533,71 +492,43 @@ main header h3 {
   font-size: 120%;
 }
 
-.documentation-section-title {
-  position: relative;
-}
-
-/* This is the little arrow that appears when you hover over a section title */
-/* Probably rarely used and can be removed if desired */
-.documentation-section-title .section-click-top {
-  position: absolute;
-  top: 6px;
-  left: 12px;
-  font-size: 10px;
-  color: #9b9877;
-  visibility: hidden;
-  padding-left: 0.5px;
-}
-
-.documentation-section-title:hover .section-click-top {
-  visibility: visible;
-}
-
-.constants-list > dl {
-  margin: 1em 0 2em;
-  border: 0;
-}
+/* Utility Classes */
+.hide { display: none !important; }
+.initially-hidden { display: none; }
 
-.constants-list > dl dt {
-  margin-bottom: 0.75em;
-  padding-left: 0;
-  font-family: var(--font-code);
-  font-size: 110%;
+/* Media Queries */
+@media (min-width: 1024px) {
+  /* Styles for larger screens */
+  .table-of-contents main {
+    margin-left: 20em;
+  }
 }
 
-.constants-list > dl dt a {
-  color: inherit;
+@media print {
+  /* Print-specific styles */
 }
 
-.constants-list > dl dd {
-  margin: 0 0 2em 0;
-  padding: 0;
-  color: #666;
+/* Table of Contents */
+.table-of-contents ul {
+  margin: 1em;
+  list-style: none;
 }
 
-/* Not sure what this is for */
-.documentation-section h2 {
-  position: relative;
+.table-of-contents ul ul {
+  margin-top: 0.25em;
 }
 
-.documentation-section h2 a {
-  position: absolute;
-  top: 8px;
-  right: 10px;
-  font-size: 12px;
-  color: #9b9877;
-  visibility: hidden;
+.table-of-contents ul :link,
+.table-of-contents ul :visited {
+  font-size: 16px;
 }
 
-.documentation-section h2:hover a {
-  visibility: visible;
+.table-of-contents li {
+  margin-bottom: 0.25em;
 }
 
-/* @group Method Details */
-
+/* Method Details */
 main .method-source-code {
-  /* While this is already invisible through the rule below, this will inform the browser to
-  not consider source code during text searching until it is actually expanded. */
   visibility: hidden;
   max-height: 0;
   overflow: auto;
@@ -608,7 +539,7 @@ main .method-source-code {
 }
 
 main .method-source-code pre {
-  background: var(--source-code-background-color);
+  border-color: var(--source-code-toggle-color);
 }
 
 main .method-source-code.active-menu {
@@ -627,7 +558,7 @@ main .method-detail {
 
 main .method-detail:target {
   margin-left: -10px;
-  border-left: 10px solid var(--source-code-background-color);
+  border-left: 10px solid var(--code-block-background-color);
 }
 
 main .method-header {
@@ -639,14 +570,13 @@ main .method-heading {
   font-family: var(--font-code);
   font-size: 110%;
   font-weight: bold;
-  color: var(--text-color);
 }
 
 main .method-heading::after {
   content: '¶';
   position: absolute;
   visibility: hidden;
-  color: var(--secondary-color);
+  color: var(--highlight-color);
   font-size: 0.5em;
 }
 
@@ -657,7 +587,7 @@ main .method-heading:hover::after {
 main .method-controls {
   line-height: 20px;
   float: right;
-  color: var(--secondary-color);
+  color: var(--source-code-toggle-color);
   cursor: pointer;
 }
 
@@ -673,6 +603,10 @@ main .aliases {
   cursor: default;
 }
 
+main .aliases a {
+  color: var(--secondary-highlight-color);
+}
+
 main .mixin-from {
   font-size: 80%;
   font-style: italic;
@@ -687,56 +621,12 @@ main #attribute-method-details .method-detail:hover {
   background-color: transparent;
   cursor: default;
 }
+
 main .attribute-access-type {
   text-transform: uppercase;
 }
 
-/* @group search results */
-#search-results {
-  font-family: var(--font-primary);
-  font-weight: 300;
-}
-
-#search-results .search-match {
-  font-family: var(--font-heading);
-  font-weight: normal;
-}
-
-#search-results .search-selected {
-  background: var(--search-section-background-color);
-  border-bottom: 1px solid transparent;
-}
-
-#search-results li {
-  list-style: none;
-  border-bottom: 1px solid var(--nav-border-color);
-  margin-bottom: 0.5em;
-}
-
-#search-results li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
-#search-results li p {
-  padding: 0;
-  margin: 0.5em;
-}
-
-#search-results .search-namespace {
-  font-weight: bold;
-}
-
-#search-results li em {
-  background: yellow;
-  font-style: normal;
-}
-
-#search-results pre {
-  margin: 0.5em;
-  font-family: var(--font-code);
-}
-
+/* Responsive Adjustments */
 @media (max-width: 480px) {
   nav {
     width: 100%;
@@ -768,5 +658,20 @@ main .attribute-access-type {
     float: none;
   }
 }
-/* @end */
 
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background-color);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-background);
+}

From 06d3480108560620763c81386f873ff315c3ee14 Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Sun, 13 Oct 2024 10:26:19 +0100
Subject: [PATCH 3/5] Use the same red as ruby-lang.org

---
 .../generator/template/darkfish/css/rdoc.css     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index b1ed2e19c7..121e4f1a87 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -11,14 +11,14 @@
 /* 1. Variables and Root Styles */
 :root {
   --sidebar-width: 300px;
-  --highlight-color: #b61d1c; /* Reddish color for accents and headings */
+  --highlight-color: #cc342d; /* Reddish color for accents and headings */
   --secondary-highlight-color: #c83045; /* Darker reddish color for secondary highlights */
   --text-color: #505050; /* Dark bluish-grey for text */
   --background-color: #fefefe; /* Near white background */
-  --code-block-background-color: #e6e6e6; /* Slightly darker grey for code blocks */
-  --link-color: #3F3D56; /* Dark bluish-grey for links */
-  --link-hover-color: #b61d1c; /* Reddish color on hover */
-  --border-color: #e0e0e0; /* General border color */
+  --code-block-background-color: #f6f6f3; /* Slightly darker grey for code blocks */
+  --link-color: #3f3d56; /* Dark bluish-grey for links */
+  --link-hover-color: var(--highlight-color); /* Reddish color on hover */
+  --border-color: #e0e0e0;; /* General border color */
   --source-code-toggle-color: var(--secondary-highlight-color);
   --scrollbar-thumb-hover-background: #505050; /* Hover color for scrollbar thumb */
   --table-header-background-color: #eceaed;
@@ -84,12 +84,12 @@ h4:target,
 h5:target,
 h6:target {
   margin-left: -10px;
-  border-left: 10px solid var(--code-block-background-color);
+  border-left: 10px solid var(--border-color);
   scroll-margin-top: 1rem;
 }
 
 main .anchor-link:target {
-  scroll-margin-top: 20px;
+  scroll-margin-top: 1rem;
 }
 
 /* 4. Links */
@@ -558,7 +558,7 @@ main .method-detail {
 
 main .method-detail:target {
   margin-left: -10px;
-  border-left: 10px solid var(--code-block-background-color);
+  border-left: 10px solid var(--border-color);
 }
 
 main .method-header {

From 0c196aaa256f7b8e610b799fde581a6daf7cc035 Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Wed, 23 Oct 2024 14:58:22 +0100
Subject: [PATCH 4/5] Make main section links stand out more

---
 lib/rdoc/generator/template/darkfish/css/rdoc.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 121e4f1a87..bf3e6736fe 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -16,7 +16,7 @@
   --text-color: #505050; /* Dark bluish-grey for text */
   --background-color: #fefefe; /* Near white background */
   --code-block-background-color: #f6f6f3; /* Slightly darker grey for code blocks */
-  --link-color: #3f3d56; /* Dark bluish-grey for links */
+  --link-color: #42405F; /* Dark bluish-grey for links */
   --link-hover-color: var(--highlight-color); /* Reddish color on hover */
   --border-color: #e0e0e0;; /* General border color */
   --source-code-toggle-color: var(--secondary-highlight-color);
@@ -95,13 +95,11 @@ main .anchor-link:target {
 /* 4. Links */
 a {
   color: var(--link-color);
-  text-decoration: none;
   transition: color 0.3s ease;
 }
 
 a:hover {
   color: var(--link-hover-color);
-  text-decoration: underline;
 }
 
 a code:hover {

From 4cb9cdfe1342f0713d8faec7991e807a40b79c2e Mon Sep 17 00:00:00 2001
From: Stan Lo <stan.lo@shopify.com>
Date: Wed, 23 Oct 2024 23:30:50 +0100
Subject: [PATCH 5/5] Remove scrollbar styling

---
 .../generator/template/darkfish/css/rdoc.css    | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index bf3e6736fe..6802a99e3c 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -656,20 +656,3 @@ main .attribute-access-type {
     float: none;
   }
 }
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--background-color);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover-background);
-}