Skip to content

Commit

Permalink
fix(markdown): add margins to all markdown elements (#986)
Browse files Browse the repository at this point in the history
  • Loading branch information
@douglasbouttell-camunda @Skaiir
douglasbouttell-camunda authored and Skaiir committed Jan 31, 2024
1 parent 77fd972 commit 55b5fda
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 2 deletions.
Binary file modified e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 28 additions & 2 deletions packages/form-js-carbon-styles/src/carbon-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,50 +56,65 @@ 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 {
font-size: var(--cds-productive-heading-05-font-size);
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 {
font-size: var(--cds-productive-heading-04-font-size);
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 {
Expand All @@ -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 {
Expand All @@ -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,
Expand All @@ -126,6 +143,7 @@ const MARKDOWN_STYLES = css`
border: 0;
margin: 0;
list-style: none;
margin-bottom: var(--cds-spacing-05);
}
& ul {
Expand Down Expand Up @@ -156,6 +174,14 @@ const MARKDOWN_STYLES = css`
content: counter(item) '.';
}
}
pre {
margin-bottom: var(--cds-spacing-05);
}
div > :last-child {
margin-bottom: 0;
}
}
`;

Expand Down
25 changes: 25 additions & 0 deletions packages/form-js-carbon-styles/src/carbon-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,46 +171,60 @@
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 {
font-size: var(--cds-productive-heading-05-font-size);
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 {
font-size: var(--cds-productive-heading-04-font-size);
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 {
Expand All @@ -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 {
Expand All @@ -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,
Expand All @@ -237,6 +253,7 @@
border: 0;
margin: 0;
list-style: none;
margin-bottom: var(--cds-spacing-05);
}

ul {
Expand Down Expand Up @@ -267,6 +284,14 @@
}
}
}

pre {
margin-bottom: var(--cds-spacing-05);
}

div > :last-child {
margin-bottom: 0;
}
}

// Anchor styles /////////////
Expand Down

0 comments on commit 55b5fda

Please sign in to comment.