From 8a7176b93ff9ac87443dc5b3674d27231a633bb2 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Mon, 11 Apr 2022 23:29:43 -0700
Subject: [PATCH] Don't base font-size on HTML page (#214)

---
 src/styles.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/styles.ts b/src/styles.ts
index 8e12100..7e8382f 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -1,5 +1,9 @@
 import { css } from "lit";
 
+// We set font-size to 16px and all the mdc typography styles
+// because it defaults to rem, which means that the font-size
+// of the host website would influence the ESP Web Tools dialog.
+
 export const dialogStyles = css`
   :host {
     --mdc-theme-primary: var(--improv-primary-color, #03a9f4);
@@ -9,6 +13,13 @@ export const dialogStyles = css`
     --mdc-theme-text-primary-on-background: var(--improv-text-color);
     --mdc-dialog-content-ink-color: var(--improv-text-color);
     text-align: left;
+    font-size: 16px;
+    --mdc-typography-headline6-font-size: 1.25em;
+    --mdc-typography-headline6-line-height: 2em;
+    --mdc-typography-body1-font-size: 1em;
+    --mdc-typography-body1-line-height: 1.5em;
+    --mdc-typography-button-font-size: 0.875em;
+    --mdc-typography-button-line-height: 2.25em;
   }
 
   a {