Customization via CSS variables (#282)

This PR makes the notifications a bit more reliant on the CSS variables. I tried doing the same for search as well, but focused mostly on colors. Making the full design rely on `font-size` is a bit more tricky for the search modal, because there's more involved than the "simple box" that are the notifications. We can always improve as we move further. I also had to change the setting of the [default CSS variable on flyout](https://github.com/readthedocs/addons/blob/9ae69be90f49096b3a975238ca1e67a78055d456/src/flyout.css#L32) from `:root` to `:host` as the former didn't seem to work. Closes #197 --------- Co-authored-by: Manuel Kaufmann <[email protected]>
readthedocs · Jun 18, 2024 · 9efb643 · 9efb643
1 parent eff37f3
commit 9efb643
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 52 deletions.
diff --git a/dist/readthedocs-addons.js b/dist/readthedocs-addons.js
diff --git a/dist/readthedocs-addons.js.map b/dist/readthedocs-addons.js.map
diff --git a/src/flyout.css b/src/flyout.css
@@ -29,8 +29,11 @@
   top: 50px;
 }
 
-:root {
-  --readthedocs-flyout-font-size: 0.8rem;
+:host {
+  --addons-flyout-font-size: var(
+    --readthedocs-flyout-font-size,
+    var(--readthedocs-font-size, 0.8rem)
+  );
 }
 
 :host > div {
@@ -42,7 +45,7 @@
     "Arial",
     "sans-serif"
   );
-  font-size: var(--readthedocs-flyout-font-size);
+  font-size: var(--addons-flyout-font-size);
   color: var(--readthedocs-flyout-color, rgb(128, 128, 128));
   background-color: var(--readthedocs-flyout-background-color, rgb(39, 39, 37));
   z-index: 3000;
@@ -66,13 +69,16 @@ header > span {
   color: var(--readthedocs-flyout-current-version-color, #27ae60);
   font-size: var(
     --readthedocs-flyout-header-font-size,
-    calc(var(--readthedocs-flyout-font-size) * 1.125)
+    calc(var(--addons-flyout-font-size) * 1.125)
   );
 }
 
 header > span svg.icon {
   color: rgb(128, 128, 128);
-  height: 1rem;
+  height: var(
+    --readthedocs-flyout-header-font-size,
+    calc(var(--addons-flyout-font-size) * 1.125)
+  );
   padding-right: 5px;
   vertical-align: middle;
 }
@@ -101,7 +107,7 @@ dl {
 dl > dt {
   font-size: var(
     --readthedocs-flyout-dt-font-size,
-    calc(var(--readthedocs-flyout-font-size) * 1.125)
+    calc(var(--addons-flyout-font-size) * 1.125)
   );
   color: var(--readthedocs-flyout-section-heading-color, rgb(128, 128, 128));
 }
@@ -111,7 +117,7 @@ dl > dd {
   margin: 0;
   font-size: var(
     --readthedocs-flyout-dd-font-size,
-    calc(var(--readthedocs-flyout-font-size) * 1.125)
+    calc(var(--addons-flyout-font-size) * 1.125)
   );
 }
 

diff --git a/src/notification.css b/src/notification.css
@@ -1,7 +1,14 @@
+:host {
+  --addons-notification-font-size: var(
+    --readthedocs-notification-font-size,
+    var(--readthedocs-font-size, 1rem)
+  );
+}
+
 :host > div {
   margin: 1rem 0rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: var(--addons-notification-font-size);
+  padding-bottom: var(--addons-notification-font-size);
   overflow: auto;
   border-radius: 0.5rem;
   font-family: var(
@@ -12,7 +19,7 @@
     "Arial",
     "sans-serif"
   );
-  font-size: var(--readthedocs-notification-font-size, 1rem);
+  font-size: var(--addons-notification-font-size);
   color: var(--readthedocs-notification-color, rgb(64, 64, 64));
   background-color: var(
     --readthedocs-notification-background-color,
@@ -30,13 +37,16 @@
 
 :host(.toast) > div {
   position: fixed;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: calc(var(--addons-notification-font-size) * 0.75);
+  padding-bottom: calc(var(--addons-notification-font-size) * 0.75);
   margin: 0.75rem 0rem;
   top: 2rem;
   right: 2rem;
   z-index: 1750;
-  font-size: 0.85rem;
+  font-size: var(
+    --readthedocs-notification-toast-font-size,
+    calc(var(--addons-notification-font-size) * 0.85)
+  );
   width: 35rem;
   max-width: calc(100vw - 4rem);
 }
@@ -64,13 +74,13 @@
 }
 
 :host > div > svg.header.icon {
-  height: 2rem;
+  height: calc(var(--addons-notification-font-size) * 2);
   padding: 0.5rem 1.5rem;
   float: left;
 }
 
 :host(.toast) > div > svg.header.icon {
-  height: 1.5rem;
+  height: calc(var(--addons-notification-font-size) * 1.5);
 }
 
 :host(.titled) > div > svg.header.icon {
@@ -95,26 +105,26 @@
 }
 
 :host > div > .title {
-  padding: 0.25rem 1rem;
+  padding: 0.25rem var(--addons-notification-font-size);
   margin-bottom: 0.25rem;
-  line-height: 1rem;
+  line-height: var(--addons-notification-font-size);
   font-weight: bold;
 }
 :host > div > div.content {
-  line-height: 1rem;
-  font-size: 0.85em;
-  padding: 0 1.5rem;
+  line-height: var(--addons-notification-font-size);
+  font-size: calc(var(--addons-notification-font-size) * 0.85);
+  padding: 0 calc(var(--addons-notification-font-size) * 1.5);
 }
 
 :host(.toast) > div > .title {
-  padding: 0rem 1rem;
+  padding: 0rem var(--addons-notification-font-size);
 }
 
 :host(.titled) > div > .title {
   display: block;
   margin: 0rem;
-  padding: 0.1rem 1rem;
-  line-height: 2rem;
+  padding: 0.1rem var(--addons-notification-font-size);
+  line-height: calc(var(--addons-notification-font-size) * 2);
   border-radius: 0.5rem 0.5rem 0 0;
   color: var(--readthedocs-notification-title-color, rgb(96, 96, 96));
   background-color: var(
@@ -147,7 +157,7 @@
 
 :host > div > .title > .right > svg {
   display: inline-block;
-  height: 1rem;
+  height: var(--addons-notification-font-size);
   vertical-align: middle;
   cursor: pointer;
   color: var(--readthedocs-notification-title-color, rgba(96, 96, 96));

diff --git a/src/search.css b/src/search.css
@@ -10,7 +10,7 @@
   font-size: var(--readthedocs-search-font-size, 16px);
 
   /* TODO: make some of this variables */
-  color: rgb(64, 64, 64);
+  color: var(--readthedocs-search-color, rgb(64, 64, 64));
   position: fixed;
   top: 0;
   left: 0;
@@ -21,15 +21,15 @@
 }
 
 :host > div a {
-  color: #2980b9;
+  color: var(--readthedocs-search-result-section-color, #2980b9);
   text-decoration: none;
   cursor: pointer;
 }
 
 :host > div code {
-  background: #fff;
+  background: var(--readthedocs-search-footer-code-background-color, #fff);
   padding: 2px 5px;
-  border: solid 1px #e1e4e5;
+  border: solid 1px var(--readthedocs-search-footer-code-border-color, #e1e4e5);
   color: #333;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -46,7 +46,10 @@
   z-index: 1250;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(
+    --readthedocs-search-backdrop-color,
+    rgba(0, 0, 0, 0.3)
+  );
   backdrop-filter: blur(3px);
 }
 
@@ -65,18 +68,18 @@
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--readthedocs-search-content-border-color, #e0e0e0);
   border-radius: 0.7rem;
   line-height: 1.875;
-  background-color: #fcfcfc;
+  background-color: var(--readthedocs-search-content-background-color, #fcfcfc);
   box-shadow:
     rgba(0, 0, 0, 0.05) 5px 5px 5px 5px,
     rgba(0, 0, 0, 0.05) -5px -5px 5px 5px;
   text-align: left;
 }
 
 :host > div form {
-  background-color: #eaeaea;
+  background-color: var(--readthedocs-search-input-background-color, #eaeaea);
   margin: 1.2rem;
   border-radius: 0.25em;
   font-size: 1.15em;
@@ -126,7 +129,7 @@ div.hit-block {
   border-radius: 0.3rem;
   border-style: solid;
   border-width: 1px;
-  border-color: #80808057;
+  border-color: var(--readthedocs-search-result-section-border-color, #a0a0a0);
   margin-bottom: 5px;
 
   display: flex;
@@ -200,7 +203,8 @@ div.hit-block .hit-block-heading-container svg {
   margin-top: 0;
   font-size: 1.15em;
   color: black;
-  border-bottom: 1px solid #80808057;
+  border-bottom: 1px solid
+    var(--readthedocs-search-result-section-border-color, #a0a0a0);
   line-height: inherit;
 }
 
@@ -214,7 +218,7 @@ div.hit-block .hit-block-heading-container svg {
 }
 
 :host > div .results .hit .subheading {
-  color: #999;
+  color: var(--readthedocs-search-result-section-subheading-color, #999);
   font-weight: 700;
   font-size: 15px;
   margin-right: 10px;
@@ -246,7 +250,7 @@ div.hit-block .hit-block-heading-container svg {
 }
 
 :host > div .results .hit span {
-  color: #6ea0ec;
+  color: var(--readthedocs-search-result-section-highlight-color, #6ea0ec);
   font-style: italic;
   font-weight: bold;
 }
@@ -255,7 +259,10 @@ div.hit-block .hit-block-heading-container svg {
   width: 100%;
   display: inline-block;
   height: 30px;
-  background-color: rgb(234, 234, 234);
+  background-color: var(
+    --readthedocs-search-footer-background-color,
+    rgb(234, 234, 234)
+  );
   color: #404040;
 }
 
@@ -291,7 +298,7 @@ div.hit-block .hit-block-heading-container svg {
   border-radius: 0.3rem;
   border-style: solid;
   border-width: 1px;
-  border-color: #80808057;
+  border-color: var(--readthedocs-search-filters-border-color, #e0e0e0);
 }
 
 :host > div .filters li {