diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png index aac62955c..4fcf7da23 100644 Binary files a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png and b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png differ diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png index 1d1ed5d66..356dd8165 100644 Binary files a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png and b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png differ diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png index e41ed93e7..cd87d47e9 100644 Binary files a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png and b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png differ diff --git a/packages/form-js-carbon-styles/src/carbon-styles.js b/packages/form-js-carbon-styles/src/carbon-styles.js index 6fcbffb6c..a6e0b1f8e 100644 --- a/packages/form-js-carbon-styles/src/carbon-styles.js +++ b/packages/form-js-carbon-styles/src/carbon-styles.js @@ -56,18 +56,25 @@ const getSelectArrowStyles = ({ arrowRightPosition, color }) => css` const MARKDOWN_STYLES = css` .fjs-container .fjs-form-field.fjs-form-field-text .markup { - & { + font-size: var(--cds-body-long-01-font-size); + font-weight: var(--cds-body-long-01-font-weight); + line-height: var(--cds-body-long-01-line-height); + letter-spacing: var(--cds-body-long-01-letter-spacing); + + & p { font-size: var(--cds-body-long-01-font-size); font-weight: var(--cds-body-long-01-font-weight); line-height: var(--cds-body-long-01-line-height); letter-spacing: var(--cds-body-long-01-letter-spacing); + margin-bottom: var(--cds-spacing-05); } - + & h1 { font-size: var(--cds-productive-heading-06-font-size); font-weight: var(--cds-productive-heading-06-font-weight); line-height: var(--cds-productive-heading-06-line-height); letter-spacing: var(--cds-productive-heading-06-letter-spacing); + margin-bottom: var(--cds-spacing-05); } & h2 { @@ -75,6 +82,7 @@ const MARKDOWN_STYLES = css` font-weight: var(--cds-productive-heading-05-font-weight); line-height: var(--cds-productive-heading-05-line-height); letter-spacing: var(--cds-productive-heading-05-letter-spacing); + margin-bottom: var(--cds-spacing-05); } & h3 { @@ -82,24 +90,31 @@ const MARKDOWN_STYLES = css` font-weight: var(--cds-productive-heading-04-font-weight); line-height: var(--cds-productive-heading-04-line-height); letter-spacing: var(--cds-productive-heading-04-letter-spacing); + margin-bottom: var(--cds-spacing-05); } + & h4 { font-size: var(--cds-productive-heading-03-font-size); font-weight: var(--cds-productive-heading-03-font-weight); line-height: var(--cds-productive-heading-03-line-height); letter-spacing: var(--cds-productive-heading-03-letter-spacing); + margin-bottom: var(--cds-spacing-05); } + & h5 { font-size: var(--cds-productive-heading-02-font-size); font-weight: var(--cds-productive-heading-02-font-weight); line-height: var(--cds-productive-heading-02-line-height); letter-spacing: var(--cds-productive-heading-02-letter-spacing); + margin-bottom: var(--cds-spacing-05); } + & h6 { font-size: var(--cds-productive-heading-01-font-size); font-weight: var(--cds-productive-heading-01-font-weight); line-height: var(--cds-productive-heading-01-line-height); letter-spacing: var(--cds-productive-heading-01-letter-spacing); + margin-bottom: var(--cds-spacing-05); } & code { @@ -109,6 +124,7 @@ const MARKDOWN_STYLES = css` line-height: var(--cds-code-02-line-height); letter-spacing: var(--cds-code-02-letter-spacing); white-space: pre-wrap; + margin-bottom: var(--cds-spacing-05); } & blockquote { @@ -117,6 +133,7 @@ const MARKDOWN_STYLES = css` font-weight: var(--cds-quotation-02-font-weight); line-height: var(--cds-quotation-02-line-height); letter-spacing: var(--cds-quotation-02-letter-spacing); + margin-bottom: var(--cds-spacing-05); } & ul, @@ -126,6 +143,7 @@ const MARKDOWN_STYLES = css` border: 0; margin: 0; list-style: none; + margin-bottom: var(--cds-spacing-05); } & ul { @@ -156,6 +174,14 @@ const MARKDOWN_STYLES = css` content: counter(item) '.'; } } + + pre { + margin-bottom: var(--cds-spacing-05); + } + + div > :last-child { + margin-bottom: 0; + } } `; diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss index 78e719f59..bbfcf8adf 100644 --- a/packages/form-js-carbon-styles/src/carbon-styles.scss +++ b/packages/form-js-carbon-styles/src/carbon-styles.scss @@ -171,11 +171,20 @@ line-height: var(--cds-body-long-01-line-height); letter-spacing: var(--cds-body-long-01-letter-spacing); + p { + font-size: var(--cds-body-long-01-font-size); + font-weight: var(--cds-body-long-01-font-weight); + line-height: var(--cds-body-long-01-line-height); + letter-spacing: var(--cds-body-long-01-letter-spacing); + margin-bottom: var(--cds-spacing-05); + } + h1 { font-size: var(--cds-productive-heading-06-font-size); font-weight: var(--cds-productive-heading-06-font-weight); line-height: var(--cds-productive-heading-06-line-height); letter-spacing: var(--cds-productive-heading-06-letter-spacing); + margin-bottom: var(--cds-spacing-05); } h2 { @@ -183,6 +192,7 @@ font-weight: var(--cds-productive-heading-05-font-weight); line-height: var(--cds-productive-heading-05-line-height); letter-spacing: var(--cds-productive-heading-05-letter-spacing); + margin-bottom: var(--cds-spacing-05); } h3 { @@ -190,6 +200,7 @@ font-weight: var(--cds-productive-heading-04-font-weight); line-height: var(--cds-productive-heading-04-line-height); letter-spacing: var(--cds-productive-heading-04-letter-spacing); + margin-bottom: var(--cds-spacing-05); } h4 { @@ -197,6 +208,7 @@ font-weight: var(--cds-productive-heading-03-font-weight); line-height: var(--cds-productive-heading-03-line-height); letter-spacing: var(--cds-productive-heading-03-letter-spacing); + margin-bottom: var(--cds-spacing-05); } h5 { @@ -204,6 +216,7 @@ font-weight: var(--cds-productive-heading-02-font-weight); line-height: var(--cds-productive-heading-02-line-height); letter-spacing: var(--cds-productive-heading-02-letter-spacing); + margin-bottom: var(--cds-spacing-05); } h6 { @@ -211,6 +224,7 @@ font-weight: var(--cds-productive-heading-01-font-weight); line-height: var(--cds-productive-heading-01-line-height); letter-spacing: var(--cds-productive-heading-01-letter-spacing); + margin-bottom: var(--cds-spacing-05); } code { @@ -220,6 +234,7 @@ line-height: var(--cds-code-02-line-height); letter-spacing: var(--cds-code-02-letter-spacing); white-space: pre-wrap; + margin-bottom: var(--cds-spacing-05); } blockquote { @@ -228,6 +243,7 @@ font-weight: var(--cds-quotation-02-font-weight); line-height: var(--cds-quotation-02-line-height); letter-spacing: var(--cds-quotation-02-letter-spacing); + margin-bottom: var(--cds-spacing-05); } ul, @@ -237,6 +253,7 @@ border: 0; margin: 0; list-style: none; + margin-bottom: var(--cds-spacing-05); } ul { @@ -267,6 +284,14 @@ } } } + + pre { + margin-bottom: var(--cds-spacing-05); + } + + div > :last-child { + margin-bottom: 0; + } } // Anchor styles /////////////