From 89164b5ae13cb55925367b2a9de5eaeac9e79a94 Mon Sep 17 00:00:00 2001
From: Tobias Heim Galindo <tobisellfy@gmail.com>
Date: Thu, 18 Jan 2024 11:05:31 +0100
Subject: [PATCH] refactor: add CSS-Variables to adjust font-sizes

---
 .../ino-markdown-editor/ino-markdown-editor.scss  | 13 +++++++++++++
 .../src/components/ino-markdown-editor/readme.md  | 11 +++++++----
 packages/storybook/elements-stencil-docs.json     | 15 +++++++++++++++
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss b/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss
index 91e5ec0719..2019bb240a 100644
--- a/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss
+++ b/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss
@@ -4,6 +4,10 @@
 /**
   @prop --ino-markdown-editor-min-height: min-height of text editor. Default value is `100px`.
   @prop --ino-markdown-editor-max-height: max-height of text editor Default value is `none`.
+  @prop --ino-markdown-editor-paragraph-font-size: Font size of paragraph text. Default value is `16px`.
+  @prop --ino-markdown-editor-h1-font-size: Font size of H1 headers. Default value is `32px`.
+  @prop --ino-markdown-editor-h2-font-size: Font size of H2 headers. Default value is `28px`.
+
 */
 
 // specific styles for the markdown editor dialog window that opens when having text selected and clicking the "create link" button
@@ -149,6 +153,15 @@ ino-markdown-editor {
     border-radius: 4px;
     border: 1px solid theme.$n-2;
     color: rgba(0, 0, 0, 0.87);
+    font-size: var(--ino-markdown-editor-paragraph-font-size, 1rem);
+
+    h1 {
+      font-size: var(--ino-markdown-editor-h1-font-size, 2rem);
+    }
+
+    h2 {
+      font-size: var(--ino-markdown-editor-h2-font-size, 1.75rem);
+    }
 
     &:hover:not(&-focused) {
       border-color: theme.$n-4;
diff --git a/packages/elements/src/components/ino-markdown-editor/readme.md b/packages/elements/src/components/ino-markdown-editor/readme.md
index ec9e9fb9e2..91b96ea958 100644
--- a/packages/elements/src/components/ino-markdown-editor/readme.md
+++ b/packages/elements/src/components/ino-markdown-editor/readme.md
@@ -44,10 +44,13 @@ The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org
 
 ## CSS Custom Properties
 
-| Name                               | Description                                          |
-| ---------------------------------- | ---------------------------------------------------- |
-| `--ino-markdown-editor-max-height` | max-height of text editor Default value is `none`.   |
-| `--ino-markdown-editor-min-height` | min-height of text editor. Default value is `100px`. |
+| Name                                        | Description                                           |
+| ------------------------------------------- | ----------------------------------------------------- |
+| `--ino-markdown-editor-h1-font-size`        | Font size of H1 headers. Default value is `32px`.     |
+| `--ino-markdown-editor-h2-font-size`        | Font size of H2 headers. Default value is `28px`.     |
+| `--ino-markdown-editor-max-height`          | max-height of text editor Default value is `none`.    |
+| `--ino-markdown-editor-min-height`          | min-height of text editor. Default value is `100px`.  |
+| `--ino-markdown-editor-paragraph-font-size` | Font size of paragraph text. Default value is `16px`. |
 
 
 ## Dependencies
diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json
index fbf2b4d754..37afb80709 100644
--- a/packages/storybook/elements-stencil-docs.json
+++ b/packages/storybook/elements-stencil-docs.json
@@ -6401,6 +6401,16 @@
         }
       ],
       "styles": [
+        {
+          "name": "--ino-markdown-editor-h1-font-size",
+          "annotation": "prop",
+          "docs": "Font size of H1 headers. Default value is `32px`."
+        },
+        {
+          "name": "--ino-markdown-editor-h2-font-size",
+          "annotation": "prop",
+          "docs": "Font size of H2 headers. Default value is `28px`."
+        },
         {
           "name": "--ino-markdown-editor-max-height",
           "annotation": "prop",
@@ -6410,6 +6420,11 @@
           "name": "--ino-markdown-editor-min-height",
           "annotation": "prop",
           "docs": "min-height of text editor. Default value is `100px`."
+        },
+        {
+          "name": "--ino-markdown-editor-paragraph-font-size",
+          "annotation": "prop",
+          "docs": "Font size of paragraph text. Default value is `16px`."
         }
       ],
       "slots": [],