Tweak fonts in docs

mkdocs.yml

@@ -28,6 +28,7 @@ theme:
   name: material
   language: 'en'
   favicon: 'favicon.ico'
+  font: false
   custom_dir: 'src/docs/_overrides'
   palette:
     - media: "(prefers-color-scheme: light)"
@@ -48,7 +49,7 @@ theme:
 extra_css:
   - https://unpkg.com/[email protected]/themes/prism-twilight.min.css # Prism JS syntax highlighting
   - docs/_assets/stylesheets/extra.css # mkDocs theme tweaks
-  - docs/_assets/generated/docs-custom-properties.development.css # Load React UI CSS custom properties to make them accessible in the document root (outside shadowDOM) so we can preview colors etc.
+  - docs/_assets/generated/docs-custom-properties.development.css # Load React UI CSS custom properties to make them accessible in the document root (outside Shadow DOM), so we can set the root font size and preview colors and helpers/utilities.
 
 # Additional JS. Mind the order!
 extra_javascript:

src/components/Alert/README.md

@@ -32,7 +32,7 @@ See [API](#api) for all available options.
 ## Color Variants
 
 To cover all possible needs of your project, Alert is available in colors from
-[Feedback and Neutral color collections](/docs/foundation/collections#colors).
+[Feedback color collection](/docs/foundation/collections#colors).
 
 ### Success
 

src/components/FormLayout/README.md

@@ -300,7 +300,7 @@ This is a demo of all components supported by FormLayout.
 
 ```docoff-react-preview
 React.createElement(() => {
-  const [fieldLayout, setFieldLayout] = React.useState('vertical');
+  const [fieldLayout, setFieldLayout] = React.useState('horizontal');
   const [fruit, setFruit] = React.useState('apple');
   const [isDeliveryAddress, setIsDeliveryAddress] = React.useState(true);
   const [receiveNewsletter, setReceiveNewsletter] = React.useState(true);
@@ -323,16 +323,16 @@ React.createElement(() => {
       <Toolbar>
         <ToolbarItem>
           <ButtonGroup>
-            <Button
-              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
-              label="Vertical layout"
-              onClick={() => setFieldLayout('vertical')}
-            />
             <Button
               color={fieldLayout === 'horizontal' ? 'selected' : 'secondary'}
               label="Horizontal layout"
               onClick={() => setFieldLayout('horizontal')}
             />
+            <Button
+              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
+              label="Vertical layout"
+              onClick={() => setFieldLayout('vertical')}
+            />
           </ButtonGroup>
         </ToolbarItem>
       </Toolbar>
@@ -388,6 +388,7 @@ React.createElement(() => {
           rows={3}
         />
         <FileInputField
+          id="my-file"
           label="Attachment"
           onFilesChanged={() => {}}
         />

src/components/InputGroup/README.md

@@ -145,7 +145,7 @@ supports this kind of layout as well.
   label="Horizontal layout"
   layout="horizontal"
 >
-  <FileInputField label="Attachment" onFilesChanged={() => {}} />
+  <FileInputField id="my-file" label="Attachment" onFilesChanged={() => {}} />
   <Button label="Submit" />
 </InputGroup>
 ```

src/docs/_assets/stylesheets/extra.css

@@ -20,14 +20,7 @@
     /* stylelint-enable */
 
     --docoff-code-line-height: 1.5;
-    --docoff-code-font-family:
-        "SFMono-Regular",
-        "Menlo",
-        "Monaco",
-        "Consolas",
-        "Liberation Mono",
-        "Courier New",
-        monospace;
+    --docoff-code-font-family: var(--rui-font-family-monospace);
 
     /* Visual configuration of the `<docoff-react-preview>` live preview */
     --docoff-preview-border-color: #ced4de;
@@ -76,13 +69,17 @@
 
 /* Document */
 html {
-    font-size: 100%;
+    /* DO NOT CHANGE THE FONT SIZE. `rem` in docoff previews is calculated from the root font size which is this. */
+    font-size: var(--rui-font-size-base);
     scroll-padding-top: 3.2rem;
     scroll-margin-top: 4rem;
 }
 
 body {
-    font-size: 1rem;
+    --md-text-font-family: var(--rui-font-family-base);
+    --md-code-font-family: var(--rui-font-family-monospace);
+
+    font-size: 1em;
     background-color: var(--md-default-bg-color);
 }
 

src/docs/_overrides/main.html

@@ -2,7 +2,5 @@
 
 {% block site_meta %}
   {{ super() }}
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" />
   <link rel="preconnect" href="https://unpkg.com" />
 {% endblock %}

src/theme.scss

@@ -5,8 +5,7 @@
 @use "styles/theme-constants/svg";
 
 @layer theme {
-    :root,
-    :host {
+    :root {
         // ============================================================================================ //
         // GLOBAL TOKENS                                                                                //
         // ============================================================================================ //