theme: add CSS font variables #227

exampleSite/content/basics/migration/_index.en.md

@@ -16,6 +16,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 3.3.0
 
+- **New**: Introduction of new CSS variables to set the font. The theme distinguishs between `--MAIN-font` for all content text and `--CODE-font` for inline or block code. There are additional overrides for all headings. See the [theme variant generator]({{%relref "basics/generator" %}}) of the exampleSite for all available variables.
+
 - **New**: The new shortcode `swagger` is available to include a UI for REST OpenAPI Specifications. See the [`documentation`]({{% relref "shortcodes/swagger" %}}) for available features.
 
 ---

static/css/theme.css

@@ -53,7 +53,7 @@ body {
     color: #101010; /* var(--MAIN-TEXT-color) */
     display: flex;
     flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS */
-    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
     font-size: 16.25px;
     font-weight: 300;
     height: 100%;
@@ -455,7 +455,7 @@ th {
 
 h1 {
     color: #101010; /* var(--MAIN-TEXT-color) */
-    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
     font-weight: 200;
     text-align: center;
     text-transform: uppercase;
@@ -463,7 +463,7 @@ h1 {
 
 h2, h3, h4, h5, h6 {
     color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
-    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */
     letter-spacing: -1px;
     text-rendering: optimizeLegibility;
 }
@@ -683,7 +683,7 @@ code,
 kbd,
 pre,
 samp {
-    font-family: "Consolas", menlo, monospace;
+    font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
     font-size: 92%;
     vertical-align: baseline;
 }
@@ -1094,7 +1094,7 @@ span.nav i{
     border-radius: 0 2px 2px 0;
     color: #5e5e5e; /* var(--CODE-INLINE-color) */
     cursor: pointer;
-    font-family: "Consolas", menlo, monospace;
+    font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
     font-size: 92%;
     padding-left: 22px;
 }

static/css/variant.css

@@ -13,6 +13,16 @@
     --INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color, var(--INTERNAL-MAIN-TITLES-H4-color));
     --INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color, var(--INTERNAL-MAIN-TITLES-H5-color));
 
+    --INTERNAL-MAIN-font: var(--MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif);
+    --INTERNAL-MAIN-TITLES-TEXT-font: var(--MAIN-TITLES-TEXT-font, var(--INTERNAL-MAIN-font));
+
+    --INTERNAL-MAIN-TITLES-H1-font: var(--MAIN-TITLES-H1-font, var(--INTERNAL-MAIN-font));
+    --INTERNAL-MAIN-TITLES-H2-font: var(--MAIN-TITLES-H2-font, var(--INTERNAL-MAIN-TITLES-TEXT-font));
+    --INTERNAL-MAIN-TITLES-H3-font: var(--MAIN-TITLES-H3-font, var(--INTERNAL-MAIN-TITLES-H2-font));
+    --INTERNAL-MAIN-TITLES-H4-font: var(--MAIN-TITLES-H4-font, var(--INTERNAL-MAIN-TITLES-H3-font));
+    --INTERNAL-MAIN-TITLES-H5-font: var(--MAIN-TITLES-H5-font, var(--INTERNAL-MAIN-TITLES-H4-font));
+    --INTERNAL-MAIN-TITLES-H6-font: var(--MAIN-TITLES-H6-font, var(--INTERNAL-MAIN-TITLES-H5-font));
+
     --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000));
     --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #f8f8f8));
     --INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color)));
@@ -21,6 +31,8 @@
     --INTERNAL-CODE-INLINE-BG-color: var(--CODE-INLINE-BG-color, #fffae9);
     --INTERNAL-CODE-INLINE-BORDER-color: var(--CODE-INLINE-BORDER-color, #fbf0cb);
 
+    --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace);
+
     --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, default));
     --INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, light));
 
@@ -80,6 +92,7 @@
 body {
     background-color: var(--INTERNAL-MAIN-BG-color);
     color: var(--INTERNAL-MAIN-TEXT-color);
+    font-family: var(--INTERNAL-MAIN-font);
 }
 
 a,
@@ -145,26 +158,32 @@ a:hover,
 
 h1 {
     color: var(--INTERNAL-MAIN-TITLES-H1-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H1-font);
 }
 
 h2 {
     color: var(--INTERNAL-MAIN-TITLES-H2-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H2-font);
 }
 
 h3 {
     color: var(--INTERNAL-MAIN-TITLES-H3-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H3-font);
 }
 
 h4 {
     color: var(--INTERNAL-MAIN-TITLES-H4-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H4-font);
 }
 
 h5 {
     color: var(--INTERNAL-MAIN-TITLES-H5-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H5-font);
 }
 
 h6 {
     color: var(--INTERNAL-MAIN-TITLES-H6-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
 }
 
 code {
@@ -358,3 +377,14 @@ div.box.transparent > .box-label {
 div.box.transparent > .box-content {
     color: var(--INTERNAL-MAIN-TEXT-color);
 }
+
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--INTERNAL-CODE-font);
+}
+
+.copy-to-clipboard-button {
+    font-family: var(--INTERNAL-CODE-font);
+}

static/js/variant.js

@@ -472,6 +472,16 @@ var variants = {
 		{ name: 'MAIN-TITLES-H5-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H4-color',        tooltip: 'text color of h5-h6 titles', },
 		{ name: 'MAIN-TITLES-H6-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H5-color',        tooltip: 'text color of h6 titles', },
 
+		{ name: 'MAIN-font',                             group: 'content',        default: '"Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif', tooltip: 'text font of content and h1 titles', },
+
+		{ name: 'MAIN-TITLES-TEXT-font',                 group: 'headings',      fallback: 'MAIN-font',                   tooltip: 'text font of h2-h6 titles and transparent box titles', },
+		{ name: 'MAIN-TITLES-H1-font',                   group: 'headings',      fallback: 'MAIN-font',                   tooltip: 'text font of h1 titles', },
+		{ name: 'MAIN-TITLES-H2-font',                   group: 'headings',      fallback: 'MAIN-TITLES-TEXT-font',       tooltip: 'text font of h2-h6 titles', },
+		{ name: 'MAIN-TITLES-H3-font',                   group: 'headings',      fallback: 'MAIN-TITLES-H2-font',         tooltip: 'text font of h3-h6 titles', },
+		{ name: 'MAIN-TITLES-H4-font',                   group: 'headings',      fallback: 'MAIN-TITLES-H3-font',         tooltip: 'text font of h4-h6 titles', },
+		{ name: 'MAIN-TITLES-H5-font',                   group: 'headings',      fallback: 'MAIN-TITLES-H4-font',         tooltip: 'text font of h5-h6 titles', },
+		{ name: 'MAIN-TITLES-H6-font',                   group: 'headings',      fallback: 'MAIN-TITLES-H5-font',         tooltip: 'text font of h6 titles', },
+
 		{ name: 'CODE-BLOCK-color',                      group: 'code blocks',    default: '#000000',                     tooltip: 'fallback text color of block code; should be adjusted to your selected chroma style', },
 		{ name: 'CODE-BLOCK-BG-color',                   group: 'code blocks',    default: '#f8f8f8',                     tooltip: 'fallback background color of block code; should be adjusted to your selected chroma style', },
 		{ name: 'CODE-BLOCK-BORDER-color',               group: 'code blocks',   fallback: 'CODE-BLOCK-BG-color',         tooltip: 'border color of block code', },
@@ -480,6 +490,8 @@ var variants = {
 		{ name: 'CODE-INLINE-BG-color',                  group: 'inline code',    default: '#fffae9',                     tooltip: 'background color of inline code', },
 		{ name: 'CODE-INLINE-BORDER-color',              group: 'inline code',    default: '#fbf0cb',                     tooltip: 'border color of inline code', },
 
+		{ name: 'CODE-font',                             group: 'content',        default: '"Consolas", menlo, monospace', tooltip: 'text font of code', },
+
 		{ name: 'MERMAID-theme',                         group: '3rd party',      default: 'default',                     tooltip: 'name of the default Mermaid theme for this variant, can be overridden in config.toml', },
 		{ name: 'SWAGGER-theme',                         group: '3rd party',      default: 'default',                     tooltip: 'name of the default Swagger theme for this variant, can be overridden in config.toml', },