refactor: add CSS-Variables to adjust font-sizes

inovex · Jan 18, 2024 · 89164b5 · 89164b5
1 parent b0aada3
commit 89164b5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 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
@@ -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
@@ -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
@@ -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": [],