extract all colors into CSS variables

- define color variables for smoke, gray, and jet variations
- extract all colors into semantic CSS vars
- rework existing CSS vars to be more consistent
- normalize some of the colors so they are easier to maintain
- set background color on body

diff --git a/src/css/base.css b/src/css/base.css
index c3602d0..9362b9d 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -23,7 +23,8 @@ html {
 }
 
 body {
-  color: var(--color-text);
+  background: var(--body-background);
+  color: var(--body-font-color);
   line-height: 1.6;
   margin: 0;
 }

diff --git a/src/css/doc.css b/src/css/doc.css
index 978a322..8d7828d 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,14 +1,14 @@
 .doc {
   margin: 0 auto;
-  max-width: var(--width-doc-mobile);
+  max-width: var(--doc-max-width-mobile);
   padding: 0 1rem 4rem;
-  color: #333;
+  color: var(--doc-font-color);
 }
 
 @media screen and (min-width: 1024px) {
   .doc {
     margin: 0 2rem;
-    max-width: var(--width-doc);
+    max-width: var(--doc-max-width);
   }
 }
 
@@ -18,7 +18,7 @@
 .doc h4,
 .doc h5,
 .doc h6 {
-  color: #191919;
+  color: var(--heading-font-color);
   font-weight: normal;
   line-height: 1.3;
   margin: 1rem 0 0;
@@ -64,11 +64,11 @@
 
 .doc a,
 .doc a:visited {
-  color: #1565c0;
+  color: var(--link-font-color);
 }
 
 .doc a:hover {
-  color: #104d92;
+  color: var(--link-hover-font-color);
 }
 
 .doc i.fa {
@@ -78,14 +78,12 @@
 /* what about td/th code? */
 .doc p code {
   font-size: 0.9em;
-  background-color: #fafafa;
+  background: var(--code-background);
   padding: 0.075rem 0.25rem 0.125rem;
   border-radius: 0.2rem;
-  /* font-weight: 300; */
 }
 
 .doc pre {
-  /* color: #000; */
   font-size: 0.9rem;
   line-height: 1.5;
   margin: 0;
@@ -137,12 +135,12 @@
 }
 
 .doc table.tableblock th {
-  border-bottom: 2.5px solid #ddd;
+  border-bottom: 2.5px solid var(--table-border-color);
 }
 
 .doc table.tableblock td {
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
+  border-top: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
 }
 
 .doc .halign-left {
@@ -199,7 +197,7 @@
 
 .doc .admonitionblock td.content {
   padding: 1rem 1rem 0.75rem;
-  background-color: #fafafa;
+  background: var(--admonition-background);
   width: 100%;
 }
 
@@ -214,28 +212,33 @@
   font-weight: 500;
   text-transform: uppercase;
   border-radius: 0.45rem;
-  color: #fff;
+  color: var(--admonition-label-font-color);
   transform: translate(-0.5rem, -50%);
 }
 
 .doc .admonitionblock.caution .icon {
-  background-color: #a0439c;
+  background-color: var(--caution-color);
+  color: var(--caution-on-color);
 }
 
 .doc .admonitionblock.important .icon {
-  background-color: #d32f2f;
+  background-color: var(--important-color);
+  color: var(--important-on-color);
 }
 
 .doc .admonitionblock.note .icon {
-  background-color: #217ee7;
+  background-color: var(--note-color);
+  color: var(--note-on-color);
 }
 
 .doc .admonitionblock.tip .icon {
-  background-color: #41af46;
+  background-color: var(--tip-color);
+  color: var(--tip-on-color);
 }
 
 .doc .admonitionblock.warning .icon {
-  background-color: #e18114;
+  background-color: var(--warning-color);
+  color: var(--warning-on-color);
 }
 
 .doc .admonitionblock .icon i {
@@ -260,8 +263,7 @@
 }
 
 .doc .imageblock .title {
-  /* color: #4a4a4a; */
-  color: #191919;
+  color: var(--caption-font-color);
   font-style: italic;
   margin-top: 0.5rem;
 }
@@ -283,7 +285,7 @@
 }
 
 .doc h2:not(.discrete) {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--section-divider-color);
   margin-left: -1rem;
   margin-right: -1rem;
   padding: 0.4rem 1rem 0.1rem;
@@ -309,22 +311,22 @@
 */
 
 #preamble .abstract blockquote {
-  background-color: #f0f0f0;
-  border-left: 5px solid #ddd;
-  color: #4a4a4a;
+  background: var(--abstract-background);
+  border-left: 5px solid var(--abstract-border-color);
+  color: var(--abstract-font-color);
   font-size: 0.9em;
   padding: 0.75em 1em;
 }
 
 .doc .quoteblock {
-  background: #fafafa;
-  border-left: 5px solid #4a4a4a;
-  color: #5d5d5d;
+  background: var(--quote-background);
+  border-left: 5px solid var(--quote-border-color);
+  color: var(--quote-font-color);
   padding: 0.25rem 2rem 1.25rem;
 }
 
 .doc .quoteblock .attribution {
-  color: #8e8e8e;
+  color: var(--quote-attribution-font-color);
   font-size: 0.8rem;
   margin-top: 0.75rem;
 }
@@ -434,8 +436,7 @@
 .doc .literalblock .title,
 .doc .listingblock .title,
 .doc .openblock .title {
-  /* color: #4a4a4a; */
-  color: #191919;
+  color: var(--caption-font-color);
   font-size: 0.925rem;
   font-style: italic;
   letter-spacing: -0.005em;
@@ -446,10 +447,9 @@
   margin-top: 0;
 }
 
-/* Other possible colors #248232 (dark green) #2ba84a (brighter green), #f7ef99 (soft yellow), #f78e69 (orangey-grayish) */
 .doc .exampleblock > .content {
-  background-color: #fff;
-  box-shadow: inset 0 0 1.75px #248232;
+  background: var(--example-background);
+  border: 1.5px solid var(--example-border-color);
   padding: 0.75rem;
 }
 
@@ -458,12 +458,12 @@
 }
 
 .doc .sidebarblock {
-  background-color: #ebebeb;
+  background: var(--sidebar-background);
   padding: 0.75rem 1.5rem;
 }
 
 .doc .sidebarblock > .content > .title {
-  color: #191919;
+  color: var(--caption-font-color);
   font-size: 1.2rem;
   font-weight: 500;
   line-height: 1.3;
@@ -482,8 +482,8 @@
 
 .doc pre:not(.highlight),
 .doc pre.highlight code {
-  background-color: #fafafa;
-  box-shadow: inset 0 0 1.75px #ddd;
+  background: var(--pre-background);
+  box-shadow: inset 0 0 1.75px var(--pre-border-color);
   display: block;
   overflow-x: auto;
   padding: 0.75rem;
@@ -497,7 +497,7 @@
 .doc .listingblock code[data-lang]::before {
   content: attr(data-lang);
   display: none;
-  color: #8e8e8e;
+  color: var(--pre-annotation-font-color);
   font-size: 0.75em;
   font-weight: 500;
   letter-spacing: 0.05em;
@@ -513,7 +513,6 @@
 }
 
 .doc .dlist dt {
-  color: #4a4a4a;
   font-style: italic;
 }
 
@@ -522,8 +521,7 @@
 }
 
 .doc .conum[data-value] {
-  /* border: 1px solid #989898; */
-  border: 1px solid #404040;
+  border: 1px solid currentColor;
   border-radius: 100%;
   display: inline-block;
   font-family: "Roboto", sans-serif;
@@ -571,10 +569,10 @@ b.button::after {
 kbd {
   display: inline-block;
   font-size: 0.7rem;
-  background-color: #fafafa;
-  border: 1px solid #c1c1c1;
+  background: var(--kbd-background);
+  border: 1px solid var(--kbd-border-color);
   border-radius: 0.25em;
-  box-shadow: 0 1px 0 #c1c1c1, 0 0 0 0.1em #fff inset;
+  box-shadow: 0 1px 0 var(--kbd-border-color), 0 0 0 0.1em var(--body-background) inset;
   padding: 0.25em 0.5em;
   vertical-align: text-bottom;
   white-space: nowrap;

diff --git a/src/css/footer.css b/src/css/footer.css
index a0f5cf5..7ca050f 100644 (file)
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,8 +1,8 @@
 footer.footer {
-  font-size: 0.85rem;
-  background-color: #2c2c2c;
-  color: #8e8e8e;
-  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  background-color: var(--footer-background);
+  color: var(--footer-font-color);
+  padding: 1.5rem;
 }
 
 .footer p {
@@ -10,5 +10,5 @@ footer.footer {
 }
 
 .footer a {
-  color: #5d5d5d;
+  color: var(--footer-link-font-color);
 }

diff --git a/src/css/header.css b/src/css/header.css
index 84eab5f..782f565 100644 (file)
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -3,14 +3,14 @@ html.is-clipped--navbar {
 }
 
 body {
-  padding-top: var(--height-navbar);
+  padding-top: var(--navbar-height);
 }
 
 .navbar {
-  background-color: var(--color-navbar-bg);
-  color: var(--color-navbar-text);
+  background: var(--navbar-background);
+  color: var(--navbar-font-color);
   font-size: 0.83333rem;
-  height: var(--height-navbar);
+  height: var(--navbar-height);
   position: fixed;
   top: 0;
   width: 100%;
@@ -24,7 +24,7 @@ body {
 
 .navbar-brand .navbar-item:first-child,
 .navbar-brand .navbar-item:first-child a {
-  color: var(--color-navbar-text);
+  color: var(--navbar-font-color);
   font-size: 1.15rem;
 }
 
@@ -35,22 +35,22 @@ body {
 @media screen and (min-width: 1024px) {
   .navbar-end > .navbar-item,
   .navbar-end .navbar-link {
-    color: var(--color-navbar-text);
+    color: var(--navbar-font-color);
   }
 
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover {
-    background-color: var(--color-navbar-bg-focus);
-    color: var(--color-navbar-text);
+    background: var(--navbar-hover-background);
+    color: var(--navbar-font-color);
   }
 
   .navbar-end .navbar-link::after {
-    border-color: var(--color-navbar-text);
+    border-color: var(--navbar-font-color);
   }
 
   .navbar-item.has-dropdown:hover .navbar-link {
-    background-color: var(--color-navbar-bg-focus);
-    color: var(--color-navbar-text);
+    background: var(--navbar-hover-background);
+    color: var(--navbar-font-color);
   }
 }
 
@@ -58,19 +58,19 @@ body {
   align-items: stretch;
   display: flex;
   flex-shrink: 0;
-  height: var(--height-navbar);
+  height: var(--navbar-height);
 }
 
 .navbar-burger {
-  color: var(--color-navbar-text);
+  color: var(--navbar-font-color);
   background: none;
   border: none;
   outline: none;
   cursor: pointer;
   display: block;
-  height: var(--height-navbar);
+  height: var(--navbar-height);
   position: relative;
-  /* width: var(--height-navbar); */
+  /* width: var(--navbar-height); */
   width: 2.75rem;
   margin-left: auto;
   padding: 0;
@@ -81,7 +81,7 @@ body {
 }
 
 .navbar-burger span {
-  background-color: var(--color-navbar-text);
+  background: var(--navbar-font-color);
   display: block;
   height: 1px;
   left: 50%;
@@ -125,7 +125,7 @@ body {
 
 .navbar-item,
 .navbar-link {
-  color: var(--color-text);
+  color: var(--navbar-menu-font-color);
   display: block;
   line-height: 1.5;
   padding: 0.5rem 1rem;
@@ -160,7 +160,7 @@ body {
 }
 
 .navbar-divider {
-  background-color: #e1e1e1;
+  background-color: var(--navbar-menu-border-color);
   border: none;
   height: 1px;
   margin: 0.25rem 0;
@@ -173,20 +173,20 @@ body {
   }
 
   .navbar-menu {
-    background-color: #fff;
+    background: var(--navbar-menu-background);
     padding: 0.5rem 0;
   }
 
   .navbar-menu.is-active {
     display: block;
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    max-height: var(--height-nav);
+    max-height: var(--nav-height);
     overflow-y: auto;
   }
 
   .navbar-menu a.navbar-item:hover,
   .navbar-menu .navbar-link:hover {
-    background-color: #fafafa;
+    background-color: var(--navbar-menu-hover-background);
   }
 }
 
@@ -241,8 +241,8 @@ body {
   }
 
   .navbar-dropdown {
-    background-color: #fff;
-    border: 1px solid #e1e1e1;
+    background-color: var(--navbar-menu-background);
+    border: 1px solid var(--navbar-menu-border-color);
     display: none;
     font-size: 0.875rem;
     top: 100%;
@@ -266,18 +266,18 @@ body {
   }
 
   .navbar-dropdown a.navbar-item:hover {
-    background-color: #fafafa;
+    background-color: var(--navbar-menu-hover-background);
   }
 }
 
 .navbar .button {
   display: inline-flex;
   align-items: center;
-  background-color: #fff;
-  border: 1px solid #e1e1e1;
+  background: var(--navbar-button-background);
+  border: 1px solid var(--navbar-button-border-color);
   border-radius: 0.15rem;
   height: 1.75rem;
-  color: #333;
+  color: var(--navbar-button-font-color);
   padding: 0 0.75em;
   white-space: nowrap;
 }

diff --git a/src/css/nav.css b/src/css/nav.css
index e94d6f4..372a851 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -1,7 +1,7 @@
 .nav-container {
   display: none;
   position: fixed;
-  top: var(--height-navbar);
+  top: var(--navbar-height);
   left: 0;
   width: 100%;
   font-size: 0.9375rem;
@@ -14,7 +14,7 @@
 
 @media screen and (min-width: 769px) {
   .nav-container {
-    width: var(--width-nav);
+    width: var(--nav-width);
     font-size: 0.875rem;
   }
 }
@@ -30,24 +30,24 @@
 }
 
 .nav {
-  background-color: #fafafa;
+  background: var(--nav-background);
   position: relative;
-  top: var(--height-toolbar);
-  height: var(--height-nav-mobile);
+  top: var(--toolbar-height);
+  height: var(--nav-height-mobile);
 }
 
 @media screen and (min-width: 769px) {
   .nav {
-    box-shadow: 0.5px 0 3px #c1c1c1;
+    box-shadow: 0.5px 0 3px var(--nav-border-color);
   }
 }
 
 @media screen and (min-width: 1024px) {
   .nav {
-    top: var(--height-navbar);
+    top: var(--navbar-height);
     box-shadow: none;
     position: sticky;
-    height: var(--height-nav);
+    height: var(--nav-height);
   }
 }
 
@@ -67,12 +67,12 @@ html.is-clipped--nav {
   display: flex;
   flex-direction: column;
   /* help Chrome calculate the height correctly; must match .nav value minus height of drawer */
-  height: var(--height-nav-panel-mobile);
+  height: var(--nav-panel-height-mobile);
 }
 
 @media screen and (min-width: 1024px) {
   .nav-panel-menu {
-    height: var(--height-nav-panel);
+    height: var(--nav-panel-height);
   }
 }
 
@@ -85,7 +85,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-menu::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
+  background-color: var(--nav-border-color);
 }
 
 .nav-menu {
@@ -100,7 +100,7 @@ html.is-clipped--nav {
 .nav-menu h3.title {
   margin: 0;
   font-weight: 500;
-  color: #424242;
+  color: var(--nav-heading-font-color);
   font-size: 1em;
   padding: 0.25em 0 0.125em;
 }
@@ -175,9 +175,8 @@ html.is-clipped--nav {
 
 .nav-panel-explore .context {
   flex-shrink: 0;
-  color: #5d5d5d;
-  background-color: #fafafa;
-  box-shadow: 0 -1px 0 #e1e1e1;
+  color: var(--nav-muted-color);
+  box-shadow: 0 -1px 0 var(--nav-panel-divider-color);
   padding: 0 0.25rem 0 0.5rem;
   display: flex;
   align-items: center;
@@ -185,7 +184,7 @@ html.is-clipped--nav {
   cursor: pointer;
   line-height: 1;
   font-size: 0.8125rem;
-  height: var(--height-drawer);
+  height: var(--drawer-height);
 }
 
 @media screen and (min-width: 1024px) {
@@ -195,7 +194,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore.is-active .context {
-  box-shadow: 0 1px 0 #e1e1e1;
+  box-shadow: 0 1px 0 var(--nav-panel-divider-color);
 }
 
 .nav-panel-explore .context .version {
@@ -208,8 +207,8 @@ html.is-clipped--nav {
 
 .nav-panel-explore .components {
   flex-grow: 1;
-  box-shadow: inset 0 1px 5px #e1e1e1;
-  background-color: #f0f0f0;
+  box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
+  background: var(--nav-secondary-background);
   padding: 0.5rem;
   margin: 0;
   overflow-y: auto;
@@ -246,15 +245,17 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .component .version a {
-  border: 1px solid #b0b0b0;
+  border: 1px solid var(--nav-border-color);
   border-radius: 0.25em;
-  color: #4a4a4a;
+  color: inherit;
+  opacity: 0.75;
   white-space: nowrap;
   padding: 0.05em 0.25em 0;
 }
 
 .nav-panel-explore .component .is-current a {
-  border-color: #4a4a4a;
+  border-color: currentColor;
+  opacity: 0.9;
   font-weight: 500;
 }
 

diff --git a/src/css/page-versions.css b/src/css/page-versions.css
index 364cdeb..25146f8 100644 (file)
--- a/src/css/page-versions.css
+++ b/src/css/page-versions.css
@@ -10,10 +10,6 @@
   }
 }
 
-.page-versions.is-active {
-  color: #333;
-}
-
 .page-versions .version-menu-toggle {
   color: inherit;
   font-family: inherit;
@@ -21,7 +17,7 @@
   background: url(../img/chevron.svg) no-repeat;
   background-position: right 0.5rem top 50%;
   background-size: auto 0.75em;
-  border: 1px solid transparent;
+  border: none;
   outline: none;
   cursor: pointer;
   padding: 0.35rem 1.5rem 0.35rem 0.5rem;
@@ -35,7 +31,7 @@
 
 .page-versions .version-menu {
   border: 1px solid transparent;
-  background-color: #f0f0f0;
+  background-color: var(--page-version-menu-background);
   padding: 1.3rem 0.5rem 0.35rem;
   position: absolute;
   top: 0;
@@ -58,7 +54,7 @@
 }
 
 .page-versions .version.is-missing {
-  color: #8e8e8e;
+  color: var(--page-version-missing-font-color);
   font-style: italic;
   text-decoration: none;
 }

diff --git a/src/css/print.css b/src/css/print.css
index c72840a..e67daf6 100644 (file)
--- a/src/css/print.css
+++ b/src/css/print.css
@@ -71,9 +71,10 @@
 
   footer.footer {
     background: none;
-    border-top: 1px solid #ddd;
-    color: #5d5d5d;
+    border-top: 1px solid var(--panel-border-color);
+    color: var(--quote-attribution-font-color);
     font-size: 0.9em;
+    padding: 0.5rem;
   }
 
   .footer * {

diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 3607518..2b2075b 100644 (file)
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -1,14 +1,14 @@
 .toolbar {
-  color: #5d5d5d;
+  color: var(--toolbar-font-color);
   align-items: center;
-  background-color: #fafafa;
-  box-shadow: 0 1px 0 #e1e1e1;
+  background-color: var(--toolbar-background);
+  box-shadow: 0 1px 0 var(--toolbar-border-color);
   display: flex;
   font-size: 0.75rem;
-  height: var(--height-toolbar);
+  height: var(--toolbar-height);
   justify-content: flex-start;
   position: sticky;
-  top: var(--height-navbar);
+  top: var(--navbar-height);
   z-index: var(--z-index-toolbar);
 }
 
@@ -71,5 +71,5 @@
 }
 
 .toolbar .edit-this-page a {
-  color: #8e8e8e;
+  color: var(--toolbar-muted-color);
 }

diff --git a/src/css/vars.css b/src/css/vars.css
index 7973ceb..05bfa8d 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -1,20 +1,105 @@
 :root {
-  --color-text: #222;
-  --color-navbar-bg: #0a0a0a;
-  --color-navbar-bg-focus: #000;
-  --color-navbar-text: #fff;
-  --height-navbar: 3.25rem;
-  --height-drawer: 2.5rem;
-  --height-toolbar: 2.5rem;
-  --height-to-body: var(--height-navbar);
-  --height-min-body: calc(100vh - var(--height-to-body));
-  --height-nav: var(--height-min-body);
-  --height-nav-mobile: calc(var(--height-min-body) - var(--height-toolbar));
-  --height-nav-panel: calc(var(--height-nav) - var(--height-drawer));
-  --height-nav-panel-mobile: calc(var(--height-nav-mobile) - var(--height-drawer));
-  --width-nav: 16rem;
-  --width-doc: 54rem;
-  --width-doc-mobile: 40rem;
+  /* colors */
+  --color-white: #fff;
+  --color-smoke-10: #fefefe;
+  --color-smoke-30: #fafafa;
+  --color-smoke-50: #f5f5f5;
+  --color-smoke-70: #f0f0f0;
+  --color-smoke-90: #e1e1e1;
+  --color-gray-10: #c1c1c1;
+  --color-gray-30: #8e8e8e;
+  --color-gray-50: #808080;
+  --color-gray-70: #5d5d5d;
+  --color-jet-20: #4a4a4a;
+  --color-jet-30: #424242;
+  --color-jet-50: #333;
+  --color-jet-70: #222;
+  --color-jet-80: #191919;
+  --color-black: #000;
+  /* base */
+  --body-background: var(--color-white);
+  --body-font-color: var(--color-jet-70);
+  --panel-background: var(--color-smoke-30);
+  --panel-border-color: var(--color-smoke-90);
+  /* navbar */
+  --navbar-background: var(--color-jet-80);
+  --navbar-hover-background: var(--color-black);
+  --navbar-font-color: var(--color-white);
+  --navbar-button-background: var(--color-white);
+  --navbar-button-border-color: var(--panel-border-color);
+  --navbar-button-font-color: var(--body-font-color);
+  --navbar-menu-border-color: var(--panel-border-color);
+  --navbar-menu-background: var(--color-white);
+  --navbar-menu-hover-background: var(--color-smoke-50);
+  --navbar-menu-font-color: var(--body-font-color);
+  /* nav */
+  --nav-background: var(--panel-background);
+  --nav-border-color: var(--color-gray-10);
+  --nav-heading-font-color: var(--color-jet-30);
+  --nav-muted-color: var(--color-gray-70);
+  --nav-panel-divider-color: var(--color-smoke-90);
+  --nav-secondary-background: var(--color-smoke-70);
+  /* toolbar */
+  --toolbar-background: var(--panel-background);
+  --toolbar-border-color: var(--panel-border-color);
+  --toolbar-font-color: var(--color-gray-70);
+  --toolbar-muted-color: var(--color-gray-30);
+  --page-version-menu-background: var(--color-smoke-70);
+  --page-version-missing-font-color: var(--color-gray-30);
+  /* footer */
+  --footer-background: var(--color-smoke-90);
+  --footer-font-color: var(--color-gray-70);
+  --footer-link-font-color: var(--color-jet-80);
+  /* admonitions */
+  --caution-color: #a0439c;
+  --caution-on-color: var(--color-white);
+  --important-color: #d32f2f;
+  --important-on-color: var(--color-white);
+  --note-color: #217ee7;
+  --note-on-color: var(--color-white);
+  --tip-color: #41af46;
+  --tip-on-color: var(--color-white);
+  --warning-color: #e18114;
+  --warning-on-color: var(--color-white);
+  /* doc */
+  --doc-font-color: var(--color-jet-50);
+  --heading-font-color: var(--color-jet-80);
+  --section-divider-color: var(--panel-border-color);
+  --link-font-color: #1565c0;
+  --link-hover-font-color: #104d92;
+  --abstract-background: var(--color-smoke-70);
+  --abstract-font-color: var(--color-jet-20);
+  --abstract-border-color: var(--panel-border-color);
+  --admonition-background: var(--panel-background);
+  --caption-font-color: var(--heading-font-color);
+  --code-background: var(--panel-background);
+  --example-background: var(--color-white);
+  --example-border-color: #638282; /* #2f5958 */
+  --kbd-background: var(--panel-background);
+  --kbd-border-color: var(--color-gray-10);
+  --pre-background: var(--panel-background);
+  --pre-border-color: var(--panel-border-color);
+  --pre-annotation-font-color: var(--color-gray-30);
+  --quote-background: var(--panel-background);
+  --quote-border-color: var(--color-jet-20);
+  --quote-font-color: var(--color-gray-70);
+  --quote-attribution-font-color: var(--color-gray-30);
+  --sidebar-background: var(--color-smoke-90);
+  --table-border-color: var(--panel-border-color);
+  /* dimensions */
+  --navbar-height: 3.25rem;
+  --drawer-height: 2.5rem;
+  --toolbar-height: 2.5rem;
+  --body-top: var(--navbar-height);
+  --body-min-height: calc(100vh - var(--body-top));
+  --nav-height: var(--body-min-height);
+  --nav-height-mobile: calc(var(--body-min-height) - var(--toolbar-height));
+  --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
+  --nav-panel-height-mobile: calc(var(--nav-height-mobile) - var(--drawer-height));
+  --nav-width: 16rem;
+  --doc-max-width: 54rem;
+  --doc-max-width-mobile: 40rem;
+  /* stacking */
   --z-index-nav: 1;
   --z-index-toolbar: 2;
   --z-index-page-version-menu: 3;