Styling tweaks for external usage (#372)

Author: davidjgoss

CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- Add CSS custom properties for overriding fonts ([#372](https://github.com/cucumber/react-components/pull/372))
+
 ### Fixed
 - Avoid NaN percentage passed when nothing ran ([#363](https://github.com/cucumber/react-components/pull/363))
 - Don't render hook steps with no content ([#361](https://github.com/cucumber/react-components/pull/361))

README.md

@@ -99,6 +99,13 @@ In your CSS for the `acme-widgets` class, you can override the supported [custom
 }
 ```
 
+### Fonts
+
+By default, web-safe default font stacks are used, but you can override these so the components use your preferred fonts. These custom properties are supported:
+
+- `--cucumber-sans-font-family` - the font used for the text
+- `--cucumber-mono-font-family` - the font used for doc strings and attachments
+
 ### Custom styles
 
 For more control over the styling, you can override the CSS used by individual components.

src/components/app/ExecutionSummary.module.scss

@@ -35,6 +35,7 @@
   margin: 0;
 
   svg {
+    display: inline-block;
     max-width: 2em;
   }
 }

src/components/gherkin/Title.module.scss

@@ -4,3 +4,13 @@
   padding: 0;
   margin: 0;
 }
+
+h1.title,
+h2.title {
+  font-size: 1.5em;
+}
+
+h3.title,
+h4.title {
+  font-size: 1.125em;
+}

src/styles/fonts.scss

@@ -0,0 +1,18 @@
+$defaultSansFamily:
+  'Inter var',
+  ui-sans-serif,
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  'Noto Sans',
+  sans-serif,
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol',
+  'Noto Color Emoji';
+$defaultMonoFamily:
+  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

src/styles/theming.scss

@@ -1,21 +1,7 @@
-$sansFamily:
-  'Inter var',
-  ui-sans-serif,
-  system-ui,
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  Arial,
-  'Noto Sans',
-  sans-serif,
-  'Apple Color Emoji',
-  'Segoe UI Emoji',
-  'Segoe UI Symbol',
-  'Noto Color Emoji';
-$monoFamily:
-  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+@import './fonts';
+
+$sansFamily: var(--cucumber-sans-font-family, $defaultSansFamily);
+$monoFamily: var(--cucumber-mono-font-family, $defaultMonoFamily);
 $backgroundColor: var(--cucumber-background-color, white);
 $textColor: var(--cucumber-text-color, #222);
 $anchorColor: var(--cucumber-anchor-color, #297bde);