From d0288e25910fd0b6a58e6792539de698ecbfdea3 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Thu, 26 Sep 2024 14:47:20 +0200 Subject: [PATCH] feat: paragraph classes, body-text in utilities (#2523) --- .changeset/strong-ghosts-marry.md | 6 + packages/css/accordion.css | 2 +- packages/css/alert.css | 6 +- packages/css/badge.css | 6 +- packages/css/baseline/typography.css | 146 +++++------------- packages/css/breadcrumbs.css | 6 +- packages/css/button.css | 6 +- packages/css/chip.css | 2 +- packages/css/dropdown.css | 6 +- packages/css/list.css | 6 +- packages/css/popover.css | 6 +- packages/css/table.css | 6 +- packages/css/tabs.css | 6 +- packages/css/tag.css | 6 +- packages/css/tooltip.css | 2 +- packages/css/utilities.css | 123 ++++++++++++++- .../Typography/Paragraph/Paragraph.tsx | 6 +- 17 files changed, 202 insertions(+), 145 deletions(-) create mode 100644 .changeset/strong-ghosts-marry.md diff --git a/.changeset/strong-ghosts-marry.md b/.changeset/strong-ghosts-marry.md new file mode 100644 index 0000000000..dcd11341dd --- /dev/null +++ b/.changeset/strong-ghosts-marry.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-css": patch +"@digdir/designsystemet-react": patch +--- + +Paragraph: Add css classes and style with data attributes diff --git a/packages/css/accordion.css b/packages/css/accordion.css index 36c4fa88f3..fe97c74108 100644 --- a/packages/css/accordion.css +++ b/packages/css/accordion.css @@ -73,7 +73,7 @@ padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding); @composes ds-focus from './utilities.css'; - @composes ds-body-text--sm from './baseline/typography.css'; + @composes ds-body-text--sm from './utilities.css'; &:focus-visible { position: relative; /* Ensure foucs outline renders on top */ diff --git a/packages/css/alert.css b/packages/css/alert.css index 6e24d3d241..cff3deb6f5 100644 --- a/packages/css/alert.css +++ b/packages/css/alert.css @@ -16,7 +16,7 @@ padding-block: var(--dsc-alert-padding); padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding); - @composes ds-body-text--md from './baseline/typography.css'; + @composes ds-body-text--md from './utilities.css'; & > :is(h1,h2,h3,h4,h5,h6):first-child::before, /* If Alert starts with Heading, align icon to this */ &:not(:has(> :is(h1,h2,h3,h4,h5,h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ { @@ -65,13 +65,13 @@ --dsc-alert-icon-size: var(--ds-sizing-6); --dsc-alert-padding: var(--ds-spacing-5); - @composes ds-body-text--sm from './baseline/typography.css'; + @composes ds-body-text--sm from './utilities.css'; } &[data-size='lg'] { --dsc-alert-icon-size: var(--ds-sizing-8); --dsc-alert-padding: var(--ds-spacing-7); - @composes ds-body-text--lg from './baseline/typography.css'; + @composes ds-body-text--lg from './utilities.css'; } } diff --git a/packages/css/badge.css b/packages/css/badge.css index e712803f03..8fdd24d9d0 100644 --- a/packages/css/badge.css +++ b/packages/css/badge.css @@ -7,7 +7,7 @@ display: inline-flex; position: relative; - @composes ds-body-text--short-sm from './baseline/typography.css'; + @composes ds-body-text--short-sm from './utilities.css'; &::before { content: attr(data-count); @@ -26,7 +26,7 @@ --dsc-badge-size: var(--ds-sizing-3); --dsc-badge-padding: 0 var(--ds-spacing-1); - @composes ds-body-text--short-xs from './baseline/typography.css'; + @composes ds-body-text--short-xs from './utilities.css'; &[data-count] { --dsc-badge-size: var(--ds-sizing-5); @@ -37,7 +37,7 @@ --dsc-badge-size: var(--ds-sizing-4); --dsc-badge-padding: 0 var(--ds-spacing-2); - @composes ds-body-text--short-md from './baseline/typography.css'; + @composes ds-body-text--short-md from './utilities.css'; &[data-count] { --dsc-badge-size: var(--ds-sizing-7); diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css index 8ea1ba46bf..5dfbab043a 100644 --- a/packages/css/baseline/typography.css +++ b/packages/css/baseline/typography.css @@ -136,128 +136,56 @@ } } -/** Body */ -.ds-body-text--xs { - --dsc-bottom-spacing: var(--ds-spacing-3); - - font-weight: var(--ds-paragraph-xs-font-weight); - line-height: var(--ds-paragraph-xs-line-height); - font-size: var(--ds-paragraph-xs-font-size); - letter-spacing: var(--ds-paragraph-xs-letter-spacing); - margin: 0; -} - -.ds-body-text--sm { - --dsc-bottom-spacing: var(--ds-spacing-4); - - font-weight: var(--ds-paragraph-sm-font-weight); - line-height: var(--ds-paragraph-sm-line-height); - font-size: var(--ds-paragraph-sm-font-size); - letter-spacing: var(--ds-paragraph-sm-letter-spacing); - margin: 0; -} - -.ds-body-text--md { - --dsc-bottom-spacing: var(--ds-spacing-5); - - font-weight: var(--ds-paragraph-md-font-weight); - line-height: var(--ds-paragraph-md-line-height); - font-size: var(--ds-paragraph-md-font-size); - letter-spacing: var(--ds-paragraph-md-letter-spacing); - margin: 0; -} +/** Paragraph */ +.ds-paragraph { + @composes ds-body-text--md from '../utilities.css'; -.ds-body-text--lg { - --dsc-bottom-spacing: var(--ds-spacing-6); - - font-weight: var(--ds-paragraph-lg-font-weight); - line-height: var(--ds-paragraph-lg-line-height); - font-size: var(--ds-paragraph-lg-font-size); - letter-spacing: var(--ds-paragraph-lg-letter-spacing); - margin: 0; -} - -.ds-body-text--long-xs { - --dsc-bottom-spacing: var(--ds-spacing-3); - - font-weight: var(--ds-paragraph-long-xs-font-weight); - line-height: var(--ds-paragraph-long-xs-line-height); - font-size: var(--ds-paragraph-long-xs-font-size); - letter-spacing: var(--ds-paragraph-long-xs-letter-spacing); - margin: 0; -} - -.ds-body-text--long-sm { - --dsc-bottom-spacing: var(--ds-spacing-4); - - font-weight: var(--ds-paragraph-long-sm-font-weight); - line-height: var(--ds-paragraph-long-sm-line-height); - font-size: var(--ds-paragraph-long-sm-font-size); - letter-spacing: var(--ds-paragraph-long-sm-letter-spacing); - margin: 0; -} + &[data-size='xs'] { + @composes ds-body-text--xs from '../utilities.css'; + } -.ds-body-text--long-md { - --dsc-bottom-spacing: var(--ds-spacing-5); + &[data-size='sm'] { + @composes ds-body-text--sm from '../utilities.css'; + } - font-weight: var(--ds-paragraph-long-md-font-weight); - line-height: var(--ds-paragraph-long-md-line-height); - font-size: var(--ds-paragraph-long-md-font-size); - letter-spacing: var(--ds-paragraph-long-md-letter-spacing); - margin: 0; -} + &[data-size='lg'] { + @composes ds-body-text--lg from '../utilities.css'; + } -.ds-body-text--long-lg { - --dsc-bottom-spacing: var(--ds-spacing-6); + &[data-variant='long'] { + @composes ds-body-text--long-md from '../utilities.css'; - font-weight: var(--ds-paragraph-long-lg-font-weight); - line-height: var(--ds-paragraph-long-lg-line-height); - font-size: var(--ds-paragraph-long-lg-font-size); - letter-spacing: var(--ds-paragraph-long-lg-letter-spacing); - margin: 0; -} + &[data-size='xs'] { + @composes ds-body-text--long-xs from '../utilities.css'; + } -.ds-body-text--short-xs { - --dsc-bottom-spacing: var(--ds-spacing-3); + &[data-size='sm'] { + @composes ds-body-text--long-sm from '../utilities.css'; + } - font-weight: var(--ds-paragraph-short-xs-font-weight); - line-height: var(--ds-paragraph-short-xs-line-height); - font-size: var(--ds-paragraph-short-xs-font-size); - letter-spacing: var(--ds-paragraph-short-xs-letter-spacing); - margin: 0; -} + &[data-size='lg'] { + @composes ds-body-text--long-lg from '../utilities.css'; + } + } -.ds-body-text--short-sm { - --dsc-bottom-spacing: var(--ds-spacing-4); + &[data-variant='short'] { + @composes ds-body-text--short-md from '../utilities.css'; - font-weight: var(--ds-paragraph-short-sm-font-weight); - line-height: var(--ds-paragraph-short-sm-line-height); - font-size: var(--ds-paragraph-short-sm-font-size); - letter-spacing: var(--ds-paragraph-short-sm-letter-spacing); - margin: 0; -} + &[data-size='xs'] { + @composes ds-body-text--short-xs from '../utilities.css'; + } -.ds-body-text--short-md { - --dsc-bottom-spacing: var(--ds-spacing-5); + &[data-size='sm'] { + @composes ds-body-text--short-sm from '../utilities.css'; + } - font-weight: var(--ds-paragraph-short-md-font-weight); - line-height: var(--ds-paragraph-short-md-line-height); - font-size: var(--ds-paragraph-short-md-font-size); - letter-spacing: var(--ds-paragraph-short-md-letter-spacing); - margin: 0; -} - -.ds-body-text--short-lg { - --dsc-bottom-spacing: var(--ds-spacing-6); - - font-weight: var(--ds-paragraph-short-lg-font-weight); - line-height: var(--ds-paragraph-short-lg-line-height); - font-size: var(--ds-paragraph-short-lg-font-size); - letter-spacing: var(--ds-paragraph-short-lg-letter-spacing); - margin: 0; + &[data-size='lg'] { + @composes ds-body-text--short-lg from '../utilities.css'; + } + } } -.ds-body-text--spacing { +.ds-paragraph--spacing { margin-bottom: var(--dsc-bottom-spacing); } diff --git a/packages/css/breadcrumbs.css b/packages/css/breadcrumbs.css index 4ab5d5eb98..a70b3b0838 100644 --- a/packages/css/breadcrumbs.css +++ b/packages/css/breadcrumbs.css @@ -2,20 +2,20 @@ --dsc-breadcrumbs-spacing: var(--ds-spacing-2); --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6); - @composes ds-body-text--md from './baseline/typography.css'; + @composes ds-body-text--md from './utilities.css'; &[data-size='sm'] { --dsc-breadcrumbs-spacing: var(--ds-spacing-1); --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5); - @composes ds-body-text--sm from './baseline/typography.css'; + @composes ds-body-text--sm from './utilities.css'; } &[data-size='lg'] { --dsc-breadcrumbs-spacing: var(--ds-spacing-3); --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7); - @composes ds-body-text--lg from './baseline/typography.css'; + @composes ds-body-text--lg from './utilities.css'; } & > :is(ol, ul) { diff --git a/packages/css/button.css b/packages/css/button.css index da2c236a2e..2acc5171de 100644 --- a/packages/css/button.css +++ b/packages/css/button.css @@ -10,7 +10,7 @@ --dsc-button-size: var(--ds-sizing-12); @composes ds-focus from './utilities.css'; - @composes ds-body-text--short-md from './baseline/typography.css'; + @composes ds-body-text--short-md from './utilities.css'; align-items: center; background: var(--dsc-button-background); @@ -43,7 +43,7 @@ --dsc-button-padding-inline: var(--ds-spacing-3); --dsc-button-size: var(--ds-sizing-10); - @composes ds-body-text--short-sm from './baseline/typography.css'; + @composes ds-body-text--short-sm from './utilities.css'; } &[data-size='lg'] { @@ -51,7 +51,7 @@ --dsc-button-padding-inline: var(--ds-spacing-5); --dsc-button-size: var(--ds-sizing-14); - @composes ds-body-text--short-lg from './baseline/typography.css'; + @composes ds-body-text--short-lg from './utilities.css'; } &[data-icon] { diff --git a/packages/css/chip.css b/packages/css/chip.css index ab74432e6f..e71f3959ea 100644 --- a/packages/css/chip.css +++ b/packages/css/chip.css @@ -10,7 +10,7 @@ --dsc-chip-padding: 0 var(--ds-spacing-3); @composes ds-focus from './utilities.css'; - @composes ds-paragraph-short from './baseline/typography.css'; + @composes ds-paragraph-short from './utilities.css'; align-items: center; background: var(--dsc-chip-background); diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css index 493d134d11..8d0e895899 100644 --- a/packages/css/dropdown.css +++ b/packages/css/dropdown.css @@ -20,7 +20,7 @@ .ds-dropdown__heading { padding: var(--dsc-dropdown-header-padding); - @composes ds-body-text--md from './baseline/typography.css'; + @composes ds-body-text--md from './utilities.css'; } &[data-size='sm'] { @@ -28,7 +28,7 @@ --dsc-dropdown-min-width: 15rem; & .ds-dropdown__heading { - @composes ds-body-text--sm from './baseline/typography.css'; + @composes ds-body-text--sm from './utilities.css'; } } @@ -37,7 +37,7 @@ --dsc-dropdown-min-width: 18rem; & .ds-dropdown__heading { - @composes ds-body-text--lg from './baseline/typography.css'; + @composes ds-body-text--lg from './utilities.css'; } } diff --git a/packages/css/list.css b/packages/css/list.css index ab36ec8adb..44f8ed0ca1 100644 --- a/packages/css/list.css +++ b/packages/css/list.css @@ -6,7 +6,7 @@ margin: 0; padding-left: var(--dsc-list-padding-left); - @composes ds-body-text--md from './baseline/typography.css'; + @composes ds-body-text--md from './utilities.css'; & > li + li { margin-top: var(--dsc-list-spacing); @@ -27,12 +27,12 @@ &[data-size='sm'] { --dsc-list-padding-left: var(--ds-spacing-4); - @composes ds-body-text--sm from './baseline/typography.css'; + @composes ds-body-text--sm from './utilities.css'; } &[data-size='lg'] { --dsc-list-spacing: var(--ds-spacing-4); - @composes ds-body-text--lg from './baseline/typography.css'; + @composes ds-body-text--lg from './utilities.css'; } } diff --git a/packages/css/popover.css b/packages/css/popover.css index af300cd52e..73a6790815 100644 --- a/packages/css/popover.css +++ b/packages/css/popover.css @@ -18,7 +18,7 @@ padding: var(--dsc-popover-padding); position: fixed; - @composes ds-body-text--md from './baseline/typography.css'; + @composes ds-body-text--md from './utilities.css'; &::before { background: var(--dsc-popover-background); @@ -38,13 +38,13 @@ &[data-size='sm'] { --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3); - @composes ds-body-text--sm from './baseline/typography.css'; + @composes ds-body-text--sm from './utilities.css'; } &[data-size='lg'] { --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5); - @composes ds-body-text--lg from './baseline/typography.css'; + @composes ds-body-text--lg from './utilities.css'; } &[data-placement='top']::before { diff --git a/packages/css/table.css b/packages/css/table.css index 62ba26d4ac..0da6b55ed8 100644 --- a/packages/css/table.css +++ b/packages/css/table.css @@ -18,7 +18,7 @@ color: var(--dsc-table-color); width: 100%; - @composes ds-body-text--md from './baseline/typography.css'; + @composes ds-body-text--md from './utilities.css'; & > :is(tbody, thead) > tr > :is(th, td) { background: var(--dsc-table-background); @@ -115,13 +115,13 @@ &[data-size='sm'] { --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3); - @composes ds-body-text--sm from './baseline/typography.css'; + @composes ds-body-text--sm from './utilities.css'; } &[data-size='lg'] { --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3); - @composes ds-body-text--lg from './baseline/typography.css'; + @composes ds-body-text--lg from './utilities.css'; } /** diff --git a/packages/css/tabs.css b/packages/css/tabs.css index 3543c0e5df..5a2b9c24e3 100644 --- a/packages/css/tabs.css +++ b/packages/css/tabs.css @@ -6,20 +6,20 @@ --dsc-tabs-content-color: var(--ds-color-neutral-text-default); --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle); - @composes ds-body-text--short-md from './baseline/typography.css'; + @composes ds-body-text--short-md from './utilities.css'; &[data-size='sm'] { --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4); --dsc-tabs-content-padding: var(--ds-spacing-4); - @composes ds-body-text--short-sm from './baseline/typography.css'; + @composes ds-body-text--short-sm from './utilities.css'; } &[data-size='lg'] { --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6); --dsc-tabs-content-padding: var(--ds-spacing-6); - @composes ds-body-text--short-lg from './baseline/typography.css'; + @composes ds-body-text--short-lg from './utilities.css'; } } diff --git a/packages/css/tag.css b/packages/css/tag.css index c06b79111d..bae3e80b6c 100644 --- a/packages/css/tag.css +++ b/packages/css/tag.css @@ -15,20 +15,20 @@ width: max-content; word-break: break-word; - @composes ds-body-text--short-md from './baseline/typography.css'; + @composes ds-body-text--short-md from './utilities.css'; &[data-size='sm'] { --dsc-tag-padding: 0 var(--ds-spacing-2); --dsc-tag-min-height: var(--ds-sizing-7); - @composes ds-body-text--short-sm from './baseline/typography.css'; + @composes ds-body-text--short-sm from './utilities.css'; } &[data-size='lg'] { --dsc-tag-padding: 0 var(--ds-spacing-3); --dsc-tag-min-height: var(--ds-sizing-9); - @composes ds-body-text--short-lg from './baseline/typography.css'; + @composes ds-body-text--short-lg from './utilities.css'; } &[data-color='info'] { diff --git a/packages/css/tooltip.css b/packages/css/tooltip.css index 7dfc5938f8..e1ba66a3ac 100644 --- a/packages/css/tooltip.css +++ b/packages/css/tooltip.css @@ -6,7 +6,7 @@ color: var(--ds-color-neutral-background-default); border-radius: var(--ds-border-radius-md); - @composes ds-body-text--short-xs from './baseline/typography.css'; + @composes ds-body-text--short-xs from './utilities.css'; } .ds-tooltip__arrow { diff --git a/packages/css/utilities.css b/packages/css/utilities.css index a0efede019..1a4a59d311 100644 --- a/packages/css/utilities.css +++ b/packages/css/utilities.css @@ -21,7 +21,7 @@ /** * Apply a focus outline on an element when it is focused with keyboard */ - .ds-focus:focus-visible { +.ds-focus:focus-visible { outline: none; box-shadow: var(--dsc-focus-boxShadow); } @@ -39,3 +39,124 @@ height: 0; display: none; } + +/** Body typography */ +.ds-body-text--xs { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-paragraph-xs-font-weight); + line-height: var(--ds-paragraph-xs-line-height); + font-size: var(--ds-paragraph-xs-font-size); + letter-spacing: var(--ds-paragraph-xs-letter-spacing); + margin: 0; +} + +.ds-body-text--sm { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-paragraph-sm-font-weight); + line-height: var(--ds-paragraph-sm-line-height); + font-size: var(--ds-paragraph-sm-font-size); + letter-spacing: var(--ds-paragraph-sm-letter-spacing); + margin: 0; +} + +.ds-body-text--md { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-md-font-weight); + line-height: var(--ds-paragraph-md-line-height); + font-size: var(--ds-paragraph-md-font-size); + letter-spacing: var(--ds-paragraph-md-letter-spacing); + margin: 0; +} + +.ds-body-text--lg { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-paragraph-lg-font-weight); + line-height: var(--ds-paragraph-lg-line-height); + font-size: var(--ds-paragraph-lg-font-size); + letter-spacing: var(--ds-paragraph-lg-letter-spacing); + margin: 0; +} + +.ds-body-text--long-xs { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-paragraph-long-xs-font-weight); + line-height: var(--ds-paragraph-long-xs-line-height); + font-size: var(--ds-paragraph-long-xs-font-size); + letter-spacing: var(--ds-paragraph-long-xs-letter-spacing); + margin: 0; +} + +.ds-body-text--long-sm { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-paragraph-long-sm-font-weight); + line-height: var(--ds-paragraph-long-sm-line-height); + font-size: var(--ds-paragraph-long-sm-font-size); + letter-spacing: var(--ds-paragraph-long-sm-letter-spacing); + margin: 0; +} + +.ds-body-text--long-md { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-long-md-font-weight); + line-height: var(--ds-paragraph-long-md-line-height); + font-size: var(--ds-paragraph-long-md-font-size); + letter-spacing: var(--ds-paragraph-long-md-letter-spacing); + margin: 0; +} + +.ds-body-text--long-lg { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-paragraph-long-lg-font-weight); + line-height: var(--ds-paragraph-long-lg-line-height); + font-size: var(--ds-paragraph-long-lg-font-size); + letter-spacing: var(--ds-paragraph-long-lg-letter-spacing); + margin: 0; +} + +.ds-body-text--short-xs { + --dsc-bottom-spacing: var(--ds-spacing-3); + + font-weight: var(--ds-paragraph-short-xs-font-weight); + line-height: var(--ds-paragraph-short-xs-line-height); + font-size: var(--ds-paragraph-short-xs-font-size); + letter-spacing: var(--ds-paragraph-short-xs-letter-spacing); + margin: 0; +} + +.ds-body-text--short-sm { + --dsc-bottom-spacing: var(--ds-spacing-4); + + font-weight: var(--ds-paragraph-short-sm-font-weight); + line-height: var(--ds-paragraph-short-sm-line-height); + font-size: var(--ds-paragraph-short-sm-font-size); + letter-spacing: var(--ds-paragraph-short-sm-letter-spacing); + margin: 0; +} + +.ds-body-text--short-md { + --dsc-bottom-spacing: var(--ds-spacing-5); + + font-weight: var(--ds-paragraph-short-md-font-weight); + line-height: var(--ds-paragraph-short-md-line-height); + font-size: var(--ds-paragraph-short-md-font-size); + letter-spacing: var(--ds-paragraph-short-md-letter-spacing); + margin: 0; +} + +.ds-body-text--short-lg { + --dsc-bottom-spacing: var(--ds-spacing-6); + + font-weight: var(--ds-paragraph-short-lg-font-weight); + line-height: var(--ds-paragraph-short-lg-line-height); + font-size: var(--ds-paragraph-short-lg-font-size); + letter-spacing: var(--ds-paragraph-short-lg-letter-spacing); + margin: 0; +} diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx index 57731cf9d6..58c8ac56a3 100644 --- a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx +++ b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx @@ -41,10 +41,12 @@ export const Paragraph = forwardRef( );