Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(elements|ino-markdown-editor): allow custom font-sizes via CSS variables #1182

Merged
merged 3 commits into from
Jan 30, 2024
Merged

feat(elements|ino-markdown-editor): allow custom font-sizes via CSS variables #1182

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89164b5
refactor: add CSS-Variables to adjust font-sizes
TobiasHeimGalindo Jan 18, 2024
f31fd3a
refactor: add dynamic font scaling for base-font-size
TobiasHeimGalindo Jan 26, 2024
db2690e
docs: add font scaling docu
TobiasHeimGalindo Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
}
TobiasHeimGalindo marked this conversation as resolved.
Show resolved Hide resolved

&:hover:not(&-focused) {
border-color: theme.$n-4;
Expand Down
11 changes: 7 additions & 4 deletions packages/elements/src/components/ino-markdown-editor/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 15 additions & 0 deletions packages/storybook/elements-stencil-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": [],
Expand Down
Loading