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 2019bb240a..34a44f5a86 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,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 index 91b96ea958..426a57b7e0 100644 --- 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 index 37afb80709..42ad1e256a 100644 --- 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": [],