Merge pull request #12891 from zbartyzel/scaladoc/docs-styles

Improve docs styles

Author: romanowski

docs/logo.svg

@@ -1,15 +1,15 @@
 /* button */
 .search span {
-    background: #ED3522;
-    fill: #fff;
+    background: var(--red500);
+    fill: var(--white);
     cursor: pointer;
     border: none;
     padding: 9px;
     border-radius: 24px;
-    box-shadow: 0 0 16px #F27264;
+    box-shadow: 0 0 16px var(--code-bg);
 }
 .search span:hover {
-    fill: #F27264;
+    background: var(--red600);
 }
 
 @media(max-width: 576px) {
@@ -29,7 +29,7 @@
 }
 
 #scaladoc-search {
-    margin-top: 10px;
+    margin-top: 16px;
     cursor: pointer;
     position: fixed;
     top: 0;
@@ -65,15 +65,15 @@
 }
 
 #scaladoc-searchbar-results {
-    background: white;
+    background: var(--white);
     display: flex;
     flex-direction: column;
     max-height: 500px;
     overflow: auto;
 }
 
 .scaladoc-searchbar-result {
-    background: white;
+    background: var(--white);
     line-height: 24px;
     display: flex;
     padding: 4px 10px 4px 10px;
@@ -90,11 +90,11 @@
 }
 
 .scaladoc-searchbar-result[selected] {
-    background-color: #d4edff;
+    background-color: var(--blue100);
 }
 
 .scaladoc-searchbar-result a {
-    color: #1f2326;
+    color: var(--grey900);
     /* for some reason, with display:block if there's a wrap between the
      * search result text and the location span, the dead space to the
      * left of the location span doesn't get treated as part of the block,
@@ -134,7 +134,7 @@
     background-size: 50% 2px, 2px 50%;
     background-repeat: no-repeat;
     border-radius: 12px;
-    box-shadow: 0 0 2px black;
+    box-shadow: 0 0 2px var(--black);
 }
 
 .snippet-comment-button:hover {

scaladoc-js/resources/scaladoc-searchbar.css

@@ -0,0 +1,124 @@
+:root {
+  /* White */
+  --white: hsl(193, 24%, 99%);
+
+  /* Black */
+  --black: hsl(200, 72%, 6%);
+
+  /* Grey */
+  --grey100: hsl(193, 24%, 97%);
+  --grey200: hsl(193, 20%, 95%);
+  --grey300: hsl(193, 16%, 86%);
+  --grey400: hsl(193, 16%, 74%);
+  --grey500: hsl(193, 16%, 66%);
+  --grey600: hsl(193, 14%, 52%);
+  --grey700: hsl(193, 14%, 42%);
+  --grey800: hsl(193, 12%, 28%);
+  --grey900: hsl(193, 12%, 16%);
+
+  /* Blue */
+  --blue100: hsl(200, 64%, 92%);
+  --blue200: hsl(200, 66%, 82%);
+  --blue300: hsl(200, 68%, 70%);
+  --blue400: hsl(200, 62%, 58%);
+  --blue500: hsl(200, 72%, 42%);
+  --blue600: hsl(200, 71%, 24%);
+  --blue700: hsl(200, 72%, 18%);
+  --blue800: hsl(200, 72%, 12%);
+  --blue900: hsl(200, 72%, 8%);
+
+  /* Red */
+  --red500: hsl(1 , 60% , 92%);
+  --red500: hsl(1 , 64% , 84%);
+  --red500: hsl(1 , 66% , 72%);
+  --red500: hsl(1 , 66% , 64%);
+  --red500: hsl(1 , 71% , 52%);
+  --red600: hsl(1 , 71% , 40%);
+  --red700: hsl(1 , 72% , 32%);
+  --red800: hsl(1 , 72% , 24%);
+  --red900: hsl(1 , 75% , 12%);
+
+
+  /* Light Mode */
+  --border-light: var(--grey200);
+  --border-medium: var(--grey300);
+
+  --body-bg: var(--white);
+  --body-fg: var(--grey900);
+  --title-fg: var(--grey800);
+
+  --active-bg: var(--blue300);
+  --active-bg-shadow: var(--blue400);
+  --active-fg: var(--grey900);
+
+  --inactive-bg: var(--grey400);
+  --inactive-bg-shadow: var(--grey700);
+  --inactive-fg: var(--grey700);
+
+  --code-bg: var(--grey200);
+  --code-fg: var(--grey800);
+  --symbol-fg: var(--grey900);
+  --documentable-bg: var(--grey200);
+
+  --link-fg: var(--blue500);
+  --link-hover-fg: var(--blue600);
+  --link-sig-fg: var(--blue500);
+
+  --leftbar-bg: var(--grey100);
+  --leftbar-fg: var(--grey900);
+  --leftbar-current-bg: var(--blue100);
+  --leftbar-current-fg: var(--blue500);
+  --leftbar-hover-bg: var(--blue100);
+  --leftbar-hover-fg: var(--grey900);
+
+  --footer-bg: var(--white);
+  --footer-fg: var(--grey700);
+
+  --icon-color: var(--grey400);
+  --selected-fg: var(--blue900);
+  --selected-bg: var(--blue200);
+}
+
+  /* Dark Mode */
+:root.theme-dark {
+  --border-light: var(--blue800);
+  --border-medium: var(--blue700);
+
+  --body-bg: var(--blue900);
+  --body-fg: var(--grey300);
+  --title-fg: var(--blue200);
+
+  --active-bg: var(--blue500);
+  --active-bg-shadow: var(--blue400);
+  --active-fg: var(--grey300);
+
+  --inactive-bg: var(--grey800);
+  --inactive-bg-shadow: var(--grey600);
+  --inactive-fg: var(--grey600);
+
+  --code-bg: var(--blue800);
+  --code-fg: var(--grey400);
+  --symbol-fg: var(--grey300);
+  --documentable-bg: var(--blue800);
+
+  --link-fg: var(--blue400);
+  --link-hover-fg: var(--blue300);
+  --link-sig-fg: var(--blue400);
+
+  --leftbar-bg: var(--black);
+  --leftbar-fg: var(--grey300);
+  --leftbar-current-bg: var(--blue700);
+  --leftbar-current-fg: var(--white);
+  --leftbar-hover-bg: var(--blue800);
+  --leftbar-hover-fg: var(--grey300);
+
+  --footer-bg: var(--blue900);
+  --footer-fg: var(--grey400);
+
+  --icon-color: var(--grey600);
+  --selected-fg: var(--blue800);
+  --selected-bg: var(--blue200);
+
+  --tab-selected: var(--white);
+  --tab-default: var(--grey300);
+}

scaladoc/resources/dotty_res/styles/colors.css

@@ -19,6 +19,11 @@
   height: 400px;
 }
 
+.diagram-class {
+  background-color: var(--code-bg);
+  margin-bottom: 16px;
+}
+
 .diagram-class a {
   text-decoration: underline;
   color: #FFF;

scaladoc/resources/dotty_res/styles/diagram.css

@@ -1,5 +1,5 @@
 .documentableFilter {
-  padding: 24px 12px;
+  padding: 24px 24px 24px 12px;
   background-color: var(--code-bg);
 }
 
@@ -26,22 +26,28 @@
 }
 
 .filterToggleButton svg {
-  fill: var(--body-fg);
+  fill: var(--icon-color);
   transition: fill 0.1s ease-in, transform 0.1s ease-in-out;
 }
 
 .filterToggleButton:hover svg,
 .filterToggleButton:focus svg {
-  fill: var(--active-fg);
+  fill: var(--icon-color);
 }
 
 .filterableInput {
-  padding: 6px 4px;
   flex: 1;
   outline: 0;
-  border: 0;
+  border: 1px solid var(--border-medium);
   border-radius: 3px;
   background-color: var(--body-bg);
+  font-family: "Lato", sans-serif;
+  padding: 8px;
+  margin-left: 8px;
+}
+
+.filterableInput:focus {
+  border: 1px solid var(--active-bg-shadow);
 }
 
 .filterLowerContainer {