From 514cc8c051cf7a88e447ddc08c4ab2c0f16c9a9f Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 5 May 2021 12:53:49 -0300
Subject: [PATCH] styles: overwrite Stylekit font variables

---
 .../javascripts/components/MultipleSelectedNotes.tsx |  4 ++--
 app/assets/stylesheets/_main.scss                    |  9 ++++++++-
 app/assets/stylesheets/_modals.scss                  |  2 +-
 app/assets/stylesheets/_sn.scss                      |  4 ++--
 app/assets/stylesheets/_stylekit-sub.scss            | 12 +++++++++++-
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/components/MultipleSelectedNotes.tsx b/app/assets/javascripts/components/MultipleSelectedNotes.tsx
index 071860d40..cdf2697ad 100644
--- a/app/assets/javascripts/components/MultipleSelectedNotes.tsx
+++ b/app/assets/javascripts/components/MultipleSelectedNotes.tsx
@@ -19,10 +19,10 @@ const MultipleSelectedNotes = observer(({ appState }: Props) => {
       </div>
       <div className="flex-grow flex flex-col justify-center items-center w-full max-w-md">
         <NotesIcon className="block" />
-        <h2 className="text-2xl m-0 text-center mt-4">
+        <h2 className="text-lg m-0 text-center mt-4">
           {count} selected notes
         </h2>
-        <p className="text-lg mt-2 text-center max-w-80">
+        <p className="text-sm mt-2 text-center max-w-60">
           Actions will be performed on all selected notes.
         </p>
       </div>
diff --git a/app/assets/stylesheets/_main.scss b/app/assets/stylesheets/_main.scss
index 46803073c..d19a840fa 100644
--- a/app/assets/stylesheets/_main.scss
+++ b/app/assets/stylesheets/_main.scss
@@ -15,6 +15,14 @@ $z-index-footer-bar-item-panel: 2000;
 $z-index-lock-screen: 10000;
 $z-index-modal: 10000;
 
+html {
+  font-size: 100%;
+}
+
+body {
+  font-size: var(--sn-stylekit-base-font-size);
+}
+
 html,
 body {
   font-family: -apple-system, BlinkMacSystemFont,
@@ -26,7 +34,6 @@ body {
   -webkit-font-smoothing: antialiased;
   min-height: 100%;
   height: 100%;
-  font-size: var(--sn-stylekit-base-font-size);
   line-height: normal;
   margin: 0;
   color: var(--sn-stylekit-foreground-color);
diff --git a/app/assets/stylesheets/_modals.scss b/app/assets/stylesheets/_modals.scss
index 966e9ef24..82bbc6f2f 100644
--- a/app/assets/stylesheets/_modals.scss
+++ b/app/assets/stylesheets/_modals.scss
@@ -50,7 +50,7 @@
 }
 
 .header .subtitle {
-  font-size: 1.1rem;
+  font-size: 0.89375rem;
 }
 
 .sk-modal {
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 38081612f..93d894597 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -86,8 +86,8 @@
   width: 32px;
 }
 
-.max-w-80 {
-  max-width: 20rem;
+.max-w-60 {
+  max-width: 15rem;
 }
 
 .max-w-265px {
diff --git a/app/assets/stylesheets/_stylekit-sub.scss b/app/assets/stylesheets/_stylekit-sub.scss
index e57379aaf..a5c3ed3ae 100644
--- a/app/assets/stylesheets/_stylekit-sub.scss
+++ b/app/assets/stylesheets/_stylekit-sub.scss
@@ -1,5 +1,15 @@
 :root {
-  --sn-stylekit-font-size-editor: 1.154rem;
+  --sn-stylekit-font-size-editor: 0.9375rem;
+  --sn-stylekit-base-font-size: 0.8125rem;
+
+  --sn-stylekit-font-size-p: 0.8125rem;
+
+  --sn-stylekit-font-size-h6: 0.65rem;
+  --sn-stylekit-font-size-h5: 0.73125rem;
+  --sn-stylekit-font-size-h4: 0.8125rem;
+  --sn-stylekit-font-size-h3: 0.89375rem;
+  --sn-stylekit-font-size-h2: 0.975rem;
+  --sn-stylekit-font-size-h1: 1.05625rem;
 }
 
 .sn-component {