feat: font size picker

assets/scss/styles.scss

@@ -41,11 +41,13 @@ html {
 
 body {
   @apply bg-primary;
-  @apply text-secondary text-xs;
+  @apply text-secondary;
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
 
+  font-size: var(--font-size);
+  line-height: var(--line-height);
   overflow: overlay;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -162,16 +164,15 @@ hr {
   @apply text-secondaryDark text-lg;
 }
 
-.textarea,
 .input,
-.select {
+.select,
+.textarea {
   @apply flex flex-1;
   @apply w-full;
   @apply px-4 py-2;
   @apply bg-primary;
   @apply truncate;
   @apply rounded;
-  @apply text-xs;
   @apply font-semibold;
   @apply border border-divider;
   @apply transition;
@@ -179,6 +180,14 @@ hr {
   @apply disabled:cursor-not-allowed;
 }
 
+input,
+select,
+textarea,
+button {
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+
 .input[type="file"],
 .input[type="radio"],
 #installPWA {

assets/scss/themes.scss

@@ -297,3 +297,36 @@
 :root[data-accent="yellow"] {
   @include yellowTheme;
 }
+
+@mixin fontSmall {
+  // Font size
+  --font-size: 0.75rem;
+  // Line height
+  --line-height: 1rem;
+}
+
+@mixin fontMedium {
+  // Font size
+  --font-size: 0.875rem;
+  // Line height
+  --line-height: 1.25rem;
+}
+
+@mixin fontLarge {
+  // Font size
+  --font-size: 1rem;
+  // Line height
+  --line-height: 1.5rem;
+}
+
+:root[data-font-size="xs"] {
+  @include fontSmall;
+}
+
+:root[data-font-size="sm"] {
+  @include fontMedium;
+}
+
+:root[data-font-size="base"] {
+  @include fontLarge;
+}