extract font families and bold font weight into variables

diff --git a/src/css/base.css b/src/css/base.css
index adade49..b28cab5 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -11,7 +11,6 @@ body {
 
 html {
   box-sizing: border-box;
-  font-family: "Roboto", sans-serif;
   font-size: var(--body-mobile-font-size);
   line-height: var(--body-line-height);
   -webkit-text-size-adjust: 100%;
@@ -26,6 +25,8 @@ html {
 body {
   background: var(--body-background);
   color: var(--body-font-color);
+  font-family: var(--body-font-family);
+  line-height: var(--body-line-height);
   margin: 0;
 }
 
@@ -40,14 +41,14 @@ a:hover {
 code,
 kbd,
 pre {
-  font-family: "Roboto Mono", monospace;
+  font-family: var(--monospace-font-family);
 }
 
 b,
 dt,
 strong,
 th {
-  font-weight: 500;
+  font-weight: var(--body-font-weight-bold);
 }
 
 em em { /* stylelint-disable-line */

diff --git a/src/css/doc.css b/src/css/doc.css
index fb8c79a..efab3b3 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -22,7 +22,7 @@
 .doc h5,
 .doc h6 {
   color: var(--heading-font-color);
-  font-weight: normal;
+  font-weight: var(--heading-font-weight);
   line-height: 1.3;
   margin: 1rem 0 0;
 }
@@ -51,7 +51,7 @@
 }
 
 .doc h3:not(.discrete) {
-  font-weight: 500;
+  font-weight: var(--alt-heading-font-weight);
 }
 
 .doc h1 .anchor,
@@ -248,10 +248,9 @@
   padding: 0 0.5rem;
   height: 1.25rem;
   line-height: 1;
-  font-weight: 500;
+  font-weight: var(--admonition-label-font-weight);
   text-transform: uppercase;
   border-radius: 0.45rem;
-  color: var(--admonition-label-font-color);
   transform: translate(-0.5rem, -50%);
 }
 
@@ -437,7 +436,7 @@
 .doc .tableblock caption {
   color: var(--caption-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);
-  font-weight: 500;
+  font-weight: var(--caption-font-weight);
   font-style: italic;
   letter-spacing: 0.01em;
   padding-bottom: 0.075rem;
@@ -472,7 +471,7 @@
 
 .doc .sidebarblock > .content > .title {
   font-size: calc(22.5 / var(--rem-base) * 1rem);
-  font-weight: 500;
+  font-weight: var(--alt-heading-font-weight);
   line-height: 1.3;
   margin-bottom: -0.3em;
   text-align: center;
@@ -541,7 +540,7 @@
   border: 1px solid currentColor;
   border-radius: 100%;
   display: inline-block;
-  font-family: "Roboto", sans-serif;
+  font-family: var(--body-font-family);
   font-size: calc(13.5 / var(--rem-base) * 1rem);
   font-style: normal;
   height: 1.25em;
@@ -610,6 +609,6 @@ kbd,
 .menuseq i.caret::before {
   content: "\203a";
   font-size: 1.1em;
-  font-weight: 500;
+  font-weight: var(--body-font-weight-bold);
   line-height: calc(1 / 1.1);
 }

diff --git a/src/css/highlight.css b/src/css/highlight.css
index f57f664..9788ec0 100644 (file)
--- a/src/css/highlight.css
+++ b/src/css/highlight.css
@@ -9,7 +9,7 @@
 .hljs-selector-tag,
 .hljs-subst {
   color: #333;
-  font-weight: 500;
+  font-weight: var(--monospace-font-weight-bold);
 }
 
 .hljs-number,
@@ -29,7 +29,7 @@
 .hljs-section,
 .hljs-selector-id {
   color: #900;
-  font-weight: 500;
+  font-weight: var(--monospace-font-weight-bold);
 }
 
 .hljs-subst {
@@ -39,7 +39,7 @@
 .hljs-type,
 .hljs-class .hljs-title {
   color: #458;
-  font-weight: 500;
+  font-weight: var(--monospace-font-weight-bold);
 }
 
 .hljs-tag,
@@ -66,7 +66,7 @@
 
 .hljs-meta {
   color: #999;
-  font-weight: 500;
+  font-weight: var(--monospace-font-weight-bold);
 }
 
 .hljs-deletion {
@@ -82,5 +82,5 @@
 }
 
 .hljs-strong {
-  font-weight: 500;
+  font-weight: var(--monospace-font-weight-bold);
 }

diff --git a/src/css/nav.css b/src/css/nav.css
index 62780f0..6e31a04 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -108,7 +108,7 @@ html.is-clipped--nav {
 .nav-menu h3.title {
   color: var(--nav-heading-font-color);
   font-size: inherit;
-  font-weight: 500;
+  font-weight: var(--body-font-weight-bold);
   margin: 0;
   padding: 0.25em 0 0.125em;
 }
@@ -164,7 +164,7 @@ html.is-clipped--nav {
 
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
-  font-weight: 500;
+  font-weight: var(--body-font-weight-bold);
 }
 
 .nav-panel-explore {
@@ -229,7 +229,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .component .title {
-  font-weight: 500;
+  font-weight: var(--body-font-weight-bold);
 }
 
 .nav-panel-explore .versions {
@@ -259,7 +259,7 @@ html.is-clipped--nav {
 .nav-panel-explore .component .is-current a {
   border-color: currentColor;
   opacity: 0.9;
-  font-weight: 500;
+  font-weight: var(--body-font-weight-bold);
 }
 
 /*

diff --git a/src/css/vars.css b/src/css/vars.css
index a5ad054..81d698f 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -22,9 +22,13 @@
   --body-mobile-font-size: 1.0625em; /* 17px */
   --body-print-font-size: 0.9375em; /* 15px */
   --body-line-height: 1.15;
+  --body-font-color: var(--color-jet-70);
+  --body-font-family: "Roboto", sans-serif;
+  --body-font-weight-bold: 500;
+  --monospace-font-family: "Roboto Mono", monospace;
+  --monospace-font-weight-bold: 500;
   /* 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 */
@@ -70,6 +74,8 @@
   --doc-mobile-font-size: inherit;
   --doc-line-height: 1.6;
   --heading-font-color: var(--color-jet-80);
+  --heading-font-weight: normal;
+  --alt-heading-font-weight: var(--body-font-weight-bold);
   --section-divider-color: var(--panel-border-color);
   --link-font-color: #1565c0;
   --link-hover-font-color: #104d92;
@@ -77,7 +83,9 @@
   --abstract-font-color: var(--color-jet-20);
   --abstract-border-color: var(--panel-border-color);
   --admonition-background: var(--panel-background);
+  --admonition-label-font-weight: var(--body-font-weight-bold);
   --caption-font-color: var(--color-gray-70);
+  --caption-font-weight: var(--body-font-weight-bold);
   --code-background: var(--panel-background);
   --code-font-color: var(--body-font-color);
   --example-background: var(--color-white);
@@ -94,9 +102,9 @@
   --sidebar-background: var(--color-smoke-90);
   --table-border-color: var(--panel-border-color);
   /* footer */
+  --footer-line-height: var(--doc-line-height);
   --footer-background: var(--color-smoke-90);
   --footer-font-color: var(--color-gray-70);
-  --footer-line-height: var(--doc-line-height);
   --footer-link-font-color: var(--color-jet-80);
   /* dimensions */
   --navbar-height: calc(63 / var(--rem-base) * 1rem);