feat: compose paragraph (#2517)

I did every component in singular commits so it's easier to check.

Did not do anything with form components.

Excluding `Card` since it was only on content and footer, which is
deleted in another PR

packages/css/accordion.css

@@ -72,6 +72,9 @@
     padding-block: var(--dsc-accordion-padding);
     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';
+
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
     }

packages/css/alert.css

@@ -16,37 +16,42 @@
   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';
+
   & > :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 */ {
     background-color: var(--dsc-alert-icon-color);
     content: '';
     display: block;
     height: var(--dsc-alert-icon-size);
-    margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+    margin-inline: calc(
+      (var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1
+    ); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+
     mask: var(--dsc-alert-icon-url) center/contain no-repeat;
     position: absolute;
-    translate: 0 calc(.5lh - var(--dsc-alert-icon-size) / 2); /* Center icon to line height */
+    translate: 0 calc((1lh - var(--dsc-alert-icon-size)) / 2); /* Center icon to line height */
     width: var(--dsc-alert-icon-size);
   }
 
   /**
     * Colors
     */
-  &[data-color="warning"] {
+  &[data-color='warning'] {
     --dsc-alert-border-color: var(--ds-color-warning-border-default);
     --dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
     --dsc-alert-background: var(--ds-color-warning-surface-default);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
   }
 
-  &[data-color="success"] {
+  &[data-color='success'] {
     --dsc-alert-background: var(--ds-color-success-surface-default);
     --dsc-alert-border-color: var(--ds-color-success-border-default);
     --dsc-alert-icon-color: var(--ds-color-success-text-subtle);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
   }
 
-  &[data-color="danger"] {
+  &[data-color='danger'] {
     --dsc-alert-background: var(--ds-color-danger-surface-default);
     --dsc-alert-border-color: var(--ds-color-danger-border-default);
     --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
@@ -56,13 +61,17 @@
   /**
     * Sizes
     */
-  &[data-size="sm"] {
+  &[data-size='sm'] {
     --dsc-alert-icon-size: var(--ds-sizing-6);
     --dsc-alert-padding: var(--ds-spacing-5);
+
+    @composes ds-body-text--sm from './baseline/typography.css';
   }
 
-  &[data-size="lg"] {
+  &[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';
   }
 }

packages/css/badge.css

@@ -7,6 +7,8 @@
   display: inline-flex;
   position: relative;
 
+  @composes ds-body-text--short-sm from './baseline/typography.css';
+
   &::before {
     content: attr(data-count);
     background: var(--dsc-badge-background);
@@ -24,6 +26,8 @@
     --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';
+
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-5);
     }
@@ -33,6 +37,8 @@
     --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';
+
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-7);
     }

packages/css/baseline/typography.css

@@ -144,7 +144,6 @@
   line-height: var(--ds-paragraph-xs-line-height);
   font-size: var(--ds-paragraph-xs-font-size);
   letter-spacing: var(--ds-paragraph-xs-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -155,7 +154,6 @@
   line-height: var(--ds-paragraph-sm-line-height);
   font-size: var(--ds-paragraph-sm-font-size);
   letter-spacing: var(--ds-paragraph-sm-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -166,7 +164,6 @@
   line-height: var(--ds-paragraph-md-line-height);
   font-size: var(--ds-paragraph-md-font-size);
   letter-spacing: var(--ds-paragraph-md-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -177,7 +174,6 @@
   line-height: var(--ds-paragraph-lg-line-height);
   font-size: var(--ds-paragraph-lg-font-size);
   letter-spacing: var(--ds-paragraph-lg-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -188,7 +184,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -199,7 +194,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -210,7 +204,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -221,7 +214,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -232,7 +224,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -243,7 +234,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -254,7 +244,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 
@@ -265,7 +254,6 @@
   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);
-  color: var(--ds-color-neutral-text-default);
   margin: 0;
 }
 

packages/css/breadcrumbs.css

@@ -2,14 +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';
+
   &[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';
   }
 
   &[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';
   }
 
   & > :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-paragraph-short from './baseline/typography.css';
+  @composes ds-body-text--short-md from './baseline/typography.css';
 
   align-items: center;
   background: var(--dsc-button-background);
@@ -42,12 +42,16 @@
     --dsc-button-padding-block: var(--ds-spacing-2);
     --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';
   }
 
   &[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';
   }
 
   &[data-icon] {

packages/css/dropdown.css

@@ -17,14 +17,28 @@
     display: none;
   }
 
+  .ds-dropdown__heading {
+    padding: var(--dsc-dropdown-header-padding);
+
+    @composes ds-body-text--md from './baseline/typography.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';
+    }
   }
 
   &[data-size='lg'] {
     --dsc-dropdown-padding: var(--ds-spacing-4) var(--ds-spacing-2);
     --dsc-dropdown-min-width: 18rem;
+
+    & .ds-dropdown__heading {
+      @composes ds-body-text--lg from './baseline/typography.css';
+    }
   }
 
   & :is(a, button, [role='button']) {
@@ -38,8 +52,4 @@
     padding: 0;
     list-style: none;
   }
-
-  .ds-dropdown__heading {
-    padding: var(--dsc-dropdown-header-padding);
-  }
 }

packages/css/list.css

@@ -1,32 +1,38 @@
 .ds-list {
-  --dsc-list-font-size: var(--ds-font-size-5);
   --dsc-list-padding-left: var(--ds-spacing-6);
   --dsc-list-spacing: var(--ds-spacing-3);
   --dsc-list-spacing-nested: var(--ds-spacing-2);
 
-  font-size: var(--dsc-list-font-size); /* Replace with composes paragraph-md */
-  line-height: var(--ds-line-height-md); /* Replace with composes paragraph-md */
   margin: 0;
   padding-left: var(--dsc-list-padding-left);
 
-  & > li + li { margin-top: var(--dsc-list-spacing) }
-  & > li > :is(ol, ul) { --dsc-list-spacing: var(--dsc-list-spacing-nested) } /* Shrink spacing a bit when nested */
+  @composes ds-body-text--md from './baseline/typography.css';
+
+  & > li + li {
+    margin-top: var(--dsc-list-spacing);
+  }
+
+  & > li > :is(ol, ul) {
+    --dsc-list-spacing: var(--dsc-list-spacing-nested);
+  } /* Shrink spacing a bit when nested */
 
   /* Add zero-width space to fix VoiceOver: https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html
    * This can also be acheived by using role="list" + role="listitem", but is nice to solve with CSS avoiding cluttered HTML
    */
   & > li::before {
-    content: "\200B";
+    content: '\200B';
     position: absolute;
   }
 
-  &[data-size="sm"] {
+  &[data-size='sm'] {
     --dsc-list-padding-left: var(--ds-spacing-4);
-    --dsc-list-font-size: var(--ds-font-size-4); /* Replace with composes paragraph-sm */
+
+    @composes ds-body-text--sm from './baseline/typography.css';
   }
 
-  &[data-size="lg"] {
-    --dsc-list-font-size: var(--ds-font-size-6); /* Replace with composes paragraph-sm */
+  &[data-size='lg'] {
     --dsc-list-spacing: var(--ds-spacing-4);
+
+    @composes ds-body-text--lg from './baseline/typography.css';
   }
 }