Improve accessibility font sizes.

Author: wparad

CHANGELOG.md

@@ -3,6 +3,7 @@ This package follows standard semver, `<major>.<minor>.<build>`. No breaking cha
 
 ## 2.3
 * Schema types will now utilize the title property for displaying, rather than the type ID, when defined.
+* Increase font sizes by 1px to set a more accessible default display.
 
 ## 2.2
 * The `table` view is now the default as the `tree` view becomes deprecated. To display the `tree` view, use the `tree` attribute on the openapi-explorer html element.

src/styles/font-styles.js

@@ -77,7 +77,7 @@ export default css`
   syntax-highlighter {
     margin: 0px;
     font-family: var(--font-mono);
-    font-size: calc(var(--font-size-mono) - 1px);
+    font-size: var(--font-size-mono);
   }
 
   .m-markdown syntax-highlighter {
@@ -142,7 +142,7 @@ export default css`
   }
 
   .m-markdown-small code, .m-markdown-small syntax-highlighter {
-    font-size: calc(var(--font-size-mono) - 1px);
+    font-size: var(--font-size-mono);
   }
 
   .m-markdown-small pre,
@@ -256,11 +256,11 @@ export default css`
   }
 
   .m-markdown-small table code {
-    font-size: calc(var(--font-size-mono) - 2px);
+    font-size: calc(var(--font-size-mono) - 1px);
   }
 
   .m-markdown table code {
-    font-size: calc(var(--font-size-mono) - 1px);
+    font-size: var(--font-size-mono);
   }
 
   .m-markdown blockquote,

src/utils/theme.js

@@ -105,9 +105,9 @@ export default function setTheme(theme = {}) {
     --layout: ${this.layout || 'column'};
     --nav-path-padding: 7px 0 7px 1.5rem;
     --resp-area-height: ${this.responseAreaHeight};
-    --font-size-small: 13px;
-    --font-size-mono:  13px;
-    --font-size-regular: 16px;
+    --font-size-small: 16px;
+    --font-size-mono:  15px;
+    --font-size-regular: 18px;
     --dialog-z-index: 1000;
 
     /* Theme specific styles */