refactor: add dynamic font scaling for base-font-size

inovex · Jan 26, 2024 · f31fd3a · f31fd3a
1 parent 89164b5
commit f31fd3a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 25 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,9 +4,7 @@
 /**
   @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`.
+  @prop --ino-markdown-editor-font-size: Base font size for all text elements, which scales other font sizes accordingly. Default value is `16px`.
 
 */
 
@@ -148,19 +146,20 @@ ino-markdown-editor {
   }
 
   .ProseMirror {
+    --base-font-size: var(--ino-markdown-editor-font-size, 16px);
     min-height: var(--ino-markdown-editor-min-height, 100px);
     padding: 15px;
     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);
+    font-size: var(--base-font-size);
 
     h1 {
-      font-size: var(--ino-markdown-editor-h1-font-size, 2rem);
+      font-size: calc(var(--base-font-size) * 2);
     }
 
     h2 {
-      font-size: var(--ino-markdown-editor-h2-font-size, 1.75rem);
+      font-size: calc(var(--base-font-size) * 1.75);
     }
 
     &:hover:not(&-focused) {

diff --git a/packages/elements/src/components/ino-markdown-editor/readme.md b/packages/elements/src/components/ino-markdown-editor/readme.md
@@ -44,13 +44,11 @@ The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org
 
 ## CSS Custom Properties
 
-| 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`. |
+| Name                               | Description                                                                                               |
+| ---------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--ino-markdown-editor-font-size`  | Base font size for all text elements, which scales other font sizes accordingly. Default value is `16px`. |
+| `--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`.                                                      |
 
 
 ## Dependencies

diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json
@@ -6402,14 +6402,9 @@
       ],
       "styles": [
         {
-          "name": "--ino-markdown-editor-h1-font-size",
+          "name": "--ino-markdown-editor-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`."
+          "docs": "Base font size for all text elements, which scales other font sizes accordingly. Default value is `16px`."
         },
         {
           "name": "--ino-markdown-editor-max-height",
@@ -6420,11 +6415,6 @@
           "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": [],