Assign figma variables to default antora styles + theme switcher + new fonts (#2)

* css variables, theme switching, style updates, font files and material icons

* hljs colors, top logo

* code font color

* style lint

* fix bundle step

Author: colegoldsmith

gulp.d/tasks/build.js

@@ -47,7 +47,8 @@ module.exports = (src, dest, preview) => () => {
         },
       },
     ]),
-    postcssVar({ preserve: preview }),
+    // NOTE because css vars are our theme switching mechanism we must preserve them with preserve: true
+    postcssVar({ preserve: true }),
     // NOTE to make vars.css available to all top-level stylesheets, use the next line in place of the previous one
     //postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }),
     preview ? postcssCalc : () => {}, // cssnano already applies postcssCalc

package-lock.json

@@ -15,8 +15,9 @@
   ],
   "devDependencies": {
     "@asciidoctor/core": "~2.2",
-    "@fontsource/roboto": "~4.5",
-    "@fontsource/roboto-mono": "~4.5",
+    "@fontsource/material-icons-outlined": "~5.0",
+    "@fontsource/roboto-flex": "~5.0",
+    "@fontsource/roboto-mono": "~5.0",
     "autoprefixer": "~9.7",
     "browser-pack-flat": "~3.4",
     "browserify": "~16.5",

package.json

@@ -25,6 +25,9 @@ body {
   margin: 0;
   tab-size: 4;
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
+  /* ds-text-body */
+  font-size: 1rem;
+  font-weight: 400;
 }
 
 a {

src/css/base.css

@@ -25,17 +25,40 @@
 .doc h5,
 .doc h6 {
   color: var(--heading-font-color);
-  font-weight: var(--heading-font-weight);
   hyphens: none;
-  line-height: 1.3;
+  line-height: 1.5;
   margin: 1rem 0 0;
 }
 
 .doc > h1.page:first-child {
-  font-size: calc(36 / var(--rem-base) * 1rem);
+  /* font-size: calc(36 / var(--rem-base) * 1rem); */
   margin: 1.5rem 0;
 }
 
+.doc h1 {
+  /* .ds-text-h1 */
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.doc h2 {
+  /* .ds-text-h2 */
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.doc h3 {
+  /* .ds-text-h3 { */
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.doc h4 {
+  /* .ds-text-h4 */
+  font-size: 0.938rem;
+  font-weight: 600;
+}
+
 @media screen and (min-width: 769px) {
   .doc > h1.page:first-child {
     margin-top: 2.5rem;
@@ -82,12 +105,13 @@
 .doc h6 .anchor {
   position: absolute;
   text-decoration: none;
-  width: 1.75ex;
-  margin-left: -1.5ex;
+  width: 2.75ex;
+  margin-left: -2.5ex;
   visibility: hidden;
-  font-size: 0.8em;
+  /* font-size: 0.8em; */
   font-weight: normal;
-  padding-top: 0.05em;
+  /* padding-top: 0.05em; */
+  color: var(--ds-primary-soft-hover-bg);
 }
 
 .doc h1 .anchor::before,
@@ -96,7 +120,8 @@
 .doc h4 .anchor::before,
 .doc h5 .anchor::before,
 .doc h6 .anchor::before {
-  content: "\00a7";
+  font-family: "Material Icons Outlined", sans-serif;
+  content: "\f1cd";
 }
 
 .doc h1:hover .anchor,

src/css/doc.css

@@ -0,0 +1,73 @@
+.ds-text-display {
+  font-size: 2.125rem;
+  font-weight: 600;
+}
+
+.ds-text-h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.ds-text-h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.ds-text-h3 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.ds-text-h4 {
+  font-size: 0.938rem;
+  font-weight: 600;
+}
+
+.ds-text-body {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.ds-text-body-small {
+  font-size: 0.906rem;
+  font-weight: 400;
+}
+
+.ds-text-caption {
+  font-size: 0.906rem;
+  font-weight: 500;
+}
+
+.ds-text-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.ds-text-overline {
+  font-size: 0.75rem;
+  font-weight: 650;
+  letter-spacing: 0.075rem;
+  text-transform: uppercase;
+}
+
+.ds-text-button {
+  font-size: 0.90625rem;
+  font-weight: 600;
+}
+
+.ds-text-tab {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.ds-text-mono {
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.96875rem;
+  font-weight: 400;
+}
+
+.ds-text-mono-small {
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.875rem;
+  font-weight: 400;
+}