feat: paragraph classes, body-text in utilities (#2523)

.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

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 */

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';
   }
 }

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);

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);
 }
 

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) {

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,15 +43,15 @@
     --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'] {
     --dsc-button-padding-block: var(--ds-spacing-3);
     --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] {

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);

packages/css/dropdown.css

@@ -20,15 +20,15 @@
   .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'] {
     --dsc-dropdown-padding: var(--ds-spacing-2);
     --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';
     }
   }
 

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';
   }
 }

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 {

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';
   }
 
   /**