Make all font-sizes use `em` or `rem` units, instead of `px` to stop text becoming absolutely tiny.

EraYaN commented 3 years ago

User story.

As an API developer, I can read a markdown table in a schema, so that I can not squint (?).

Cant say I've ever written a story before.

Is your feature request related to a problem?

I'm always frustrated when the text size on my Windows 10 100% scaling Edge browser based Stoplight Elements in Angular results in a 8.5px ish font-size for code blocks inside a markdown section.

Describe the solution you'd like

If all of elements font-size declarations would start using either em or rem then the size of the fonts could be adjusted by adjusting the parent or root html elements font-size. Which would stop some of our readers and myself from having to squint to read any of the text.

Additional context

Add any other context or screenshots about the feature request here.

That font-size is so tiny, it makes it hard to read the text comfortably. And gives how many places in styles.min.css and throughout the generated markup have actually hardcoded font-size values with the px unit makes it hard to override these in a style sheet and some use of !important.

Or maybe in this case not using the style attribute on the markdown viewer would do, since .sl-prose is 16px which is much better and easier to read.

mnaumanali94 commented 2 years ago

@marbemac This seems like a mosaic decision. What do you think?

marbemac commented 2 years ago

@EraYaN any chance you could share an example openapi file that has markdown or other content inside of it that demonstrates the issue?

A quick test in edge 90 on windows 11 indicates ~11.3px font size for a code span inside of a table in the markdown:

EraYaN commented 2 years ago

Yes it's this one: https://api.calcasa.nl/api-docs/v0/openapi.yaml (Check for example the "Aanvraagdoel" model) The actual documentation website is not public and mostly on intranet., so I can't really show you the result. .sl-prose class seems to anchor the font-size at 16px, but that element actually has a element.style of 12px, which might result in the 8.5 px size because the <td> element gets a calculated size of 10.5px due to the same 0.825em size. I'm not quite sure how this is happening since it doesn't match exactly, but it is, it might just be something in angular or in angulars' prime. It renders the same in Edge and in Firefox.

Our style bundle results from this. And the html element font-size is 14px from src/styles.scss.

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "src/styles.scss",
  "node_modules/primeflex/primeflex.css",
  "node_modules/prismjs/themes/prism.css",
  "node_modules/prismjs/plugins/command-line/prism-command-line.css",
  "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
  "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css",
  "node_modules/katex/dist/katex.min.css",
  "node_modules/@stoplight/elements/styles.min.css"
],

Other than that styles.scss is only this:

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  align-items: stretch;
  color: var(--primary-color-text);
  caret-color: var(--primary-color-text);
  height: 100vh;
  background-color: var(--surface-d);
}

app-root {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
  display: block;
}

EDIT; So for me to get the size it reports for you, it need to remove the style="font-size:12px;" from the sl-markdown-viewer class.

stoplightio / elements