chore: fix typography attrs and layering

packages/css/accordion.css

@@ -72,8 +72,8 @@
     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 './utilities.css';
+    @composes ds-focus from './base/base.css';
+    @composes ds-body-text--sm from './base/base.css';
 
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */

packages/css/alert.css

@@ -17,7 +17,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 './utilities.css';
+  @composes ds-body-text--md from './base/base.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 */ {
@@ -66,13 +66,13 @@
     --dsc-alert-icon-size: var(--ds-sizing-6);
     --dsc-alert-padding: var(--ds-spacing-5);
 
-    @composes ds-body-text--sm from './utilities.css';
+    @composes ds-body-text--sm from './base/base.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 './utilities.css';
+    @composes ds-body-text--lg from './base/base.css';
   }
 }

packages/css/avatar.css

@@ -19,7 +19,7 @@
   text-transform: uppercase;
   user-select: none;
 
-  @composes ds-body-text--xs from './utilities.css';
+  @composes ds-body-text--xs from './base/base.css';
 
   &:not(:has(> img)) {
     padding: var(--dsc-avatar-padding);
@@ -83,27 +83,27 @@
     --dsc-avatar-size: var(--ds-sizing-7);
     --dsc-avatar-padding: var(--ds-spacing-1);
 
-    @composes ds-body-text--xs from './utilities.css';
+    @composes ds-body-text--xs from './base/base.css';
   }
 
   &[data-size='sm'] {
     --dsc-avatar-size: var(--ds-sizing-9);
     --dsc-avatar-padding: var(--ds-spacing-1);
 
-    @composes ds-heading-text--2xs from './utilities.css';
+    @composes ds-heading-text--2xs from './base/base.css';
   }
 
   &[data-size='md'] {
     --dsc-avatar-size: var(--ds-sizing-12);
     --dsc-avatar-padding: var(--ds-spacing-2);
 
-    @composes ds-heading-text--sm from './utilities.css';
+    @composes ds-heading-text--sm from './base/base.css';
   }
 
   &[data-size='lg'] {
     --dsc-avatar-size: var(--ds-sizing-15);
     --dsc-avatar-padding: var(--ds-spacing-2);
 
-    @composes ds-heading-text--md from './utilities.css';
+    @composes ds-heading-text--md from './base/base.css';
   }
 }

packages/css/badge.css

@@ -8,7 +8,7 @@
   display: inline-flex;
   position: relative;
 
-  @composes ds-body-text--short-sm from './utilities.css';
+  @composes ds-body-text--short-sm from './base/base.css';
 
   &::before {
     content: attr(data-count);
@@ -27,7 +27,7 @@
     --dsc-badge-size: var(--ds-sizing-3);
     --dsc-badge-padding: 0 var(--ds-spacing-1);
 
-    @composes ds-body-text--short-xs from './utilities.css';
+    @composes ds-body-text--short-xs from './base/base.css';
 
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-5);
@@ -38,7 +38,7 @@
     --dsc-badge-size: var(--ds-sizing-4);
     --dsc-badge-padding: 0 var(--ds-spacing-2);
 
-    @composes ds-body-text--short-md from './utilities.css';
+    @composes ds-body-text--short-md from './base/base.css';
 
     &[data-count] {
       --dsc-badge-size: var(--ds-sizing-7);

packages/css/utilities.css → packages/css/base/base.css

@@ -26,7 +26,7 @@
  * Apply a focus outline on an element when it is focused with keyboard
  */
 .ds-focus:focus-visible {
-  @composes ds-focus--visible from './utilities.css';
+  @composes ds-focus--visible from './base.css';
 }
 
 /**

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 './utilities.css';
+  @composes ds-body-text--md from './base/base.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 './utilities.css';
+    @composes ds-body-text--sm from './base/base.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 './utilities.css';
+    @composes ds-body-text--lg from './base/base.css';
   }
 
   & > :is(ol, ul) {

packages/css/button.css

@@ -9,8 +9,8 @@
   --dsc-button-padding-inline: var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
-  @composes ds-body-text--short-md from './utilities.css';
-  @composes ds-focus from './utilities.css';
+  @composes ds-body-text--short-md from './base/base.css';
+  @composes ds-focus from './base/base.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 './utilities.css';
+    @composes ds-body-text--short-sm from './base/base.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 './utilities.css';
+    @composes ds-body-text--short-lg from './base/base.css';
   }
 
   &[data-icon] {

packages/css/card.css

@@ -44,7 +44,7 @@
 
     /* Using CSS custom property instead of composes since we need to support :has(:focus-visible) */
     &:where(:focus-visible, :has(:focus-visible)) {
-      @composes ds-focus--visible from './utilities.css';
+      @composes ds-focus--visible from './base/base.css';
     }
 
     &:active {

packages/css/chip.css

@@ -9,8 +9,8 @@
   --dsc-chip-input-size: var(--ds-spacing-5);
   --dsc-chip-padding: 0 var(--ds-spacing-3);
 
-  @composes ds-focus from './utilities.css';
-  @composes ds-paragraph-short from './utilities.css';
+  @composes ds-focus from './base/base.css';
+  @composes ds-paragraph-short from './base/base.css';
 
   align-items: center;
   background: var(--dsc-chip-background);
@@ -27,7 +27,7 @@
 
   /* Make focus ring also when input inside is focused */
   &:has(:focus-visible) {
-    @composes ds-focus--visible from './utilities.css';
+    @composes ds-focus--visible from './base/base.css';
   }
 
   &:disabled,

packages/css/dropdown.css

@@ -21,15 +21,15 @@
   .ds-dropdown__heading {
     padding: var(--dsc-dropdown-header-padding);
 
-    @composes ds-body-text--md from './utilities.css';
+    @composes ds-body-text--md from './base/base.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 './utilities.css';
+      @composes ds-body-text--sm from './base/base.css';
     }
   }
 
@@ -38,7 +38,7 @@
     --dsc-dropdown-min-width: 18rem;
 
     & .ds-dropdown__heading {
-      @composes ds-body-text--lg from './utilities.css';
+      @composes ds-body-text--lg from './base/base.css';
     }
   }
 

packages/css/fieldset.css

@@ -21,7 +21,7 @@
 
   &[data-hidelegend] > legend,
   &[data-hidelegend] > legend + p {
-    @composes ds-sr-only from '../css/utilities.css';
+    @composes ds-sr-only from './base/base.css';
   }
 
   &[data-readonly] > legend::before {

packages/css/heading.css

@@ -1,29 +1,29 @@
 .ds-heading {
   margin: 0;
 
-  @composes ds-heading-text--md from './utilities.css';
+  @composes ds-heading-text--md from './base/base.css';
 
   &[data-size='2xs'] {
-    @composes ds-heading-text--2xs from './utilities.css';
+    @composes ds-heading-text--2xs from './base/base.css';
   }
 
   &[data-size='xs'] {
-    @composes ds-heading-text--xs from './utilities.css';
+    @composes ds-heading-text--xs from './base/base.css';
   }
 
   &[data-size='sm'] {
-    @composes ds-heading-text--sm from './utilities.css';
+    @composes ds-heading-text--sm from './base/base.css';
   }
 
   &[data-size='lg'] {
-    @composes ds-heading-text--lg from './utilities.css';
+    @composes ds-heading-text--lg from './base/base.css';
   }
 
   &[data-size='xl'] {
-    @composes ds-heading-text--xl from './utilities.css';
+    @composes ds-heading-text--xl from './base/base.css';
   }
 
   &[data-size='2xl'] {
-    @composes ds-heading-text--2xl from './utilities.css';
+    @composes ds-heading-text--2xl from './base/base.css';
   }
 }

packages/css/helptext.css

@@ -3,7 +3,7 @@
   --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --dsc-helptext-size: var(--ds-sizing-7);
 
-  @composes ds-focus from '../css/utilities.css';
+  @composes ds-focus from './base/base.css';
 
   border-radius: var(--ds-border-radius-full);
   border: 2px solid;

packages/css/index.css

@@ -4,7 +4,7 @@
 
 /** Import order defines ordinal specificity for layers */
 @import url('./base/ds-reset.css') layer(ds.reset);
-@import url('./utilities.css') layer(ds.base);
+@import url('./base/base.css') layer(ds.base);
 @import url('./heading.css') layer(ds.typography);
 @import url('./label.css') layer(ds.typography);
 @import url('./paragraph.css') layer(ds.typography);

packages/css/label.css

@@ -4,20 +4,20 @@
   margin: 0;
   padding: 0;
 
-  @composes ds-label--md from './utilities.css';
+  @composes ds-label--md from './base/base.css';
 
   font-weight: var(--ds-font-weight-medium);
 
   &[data-size='xs'] {
-    @composes ds-label--xs from './utilities.css';
+    @composes ds-label--xs from './base/base.css';
   }
 
   &[data-size='sm'] {
-    @composes ds-label--sm from './utilities.css';
+    @composes ds-label--sm from './base/base.css';
   }
 
   &[data-size='lg'] {
-    @composes ds-label--lg from './utilities.css';
+    @composes ds-label--lg from './base/base.css';
   }
 
   &[data-weight='semibold'] {

packages/css/list.css

@@ -6,7 +6,7 @@
   margin: 0;
   padding-left: var(--dsc-list-padding-left);
 
-  @composes ds-body-text--md from './utilities.css';
+  @composes ds-body-text--md from './base/base.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 './utilities.css';
+    @composes ds-body-text--sm from './base/base.css';
   }
 
   &[data-size='lg'] {
     --dsc-list-spacing: var(--ds-spacing-4);
 
-    @composes ds-body-text--lg from './utilities.css';
+    @composes ds-body-text--lg from './base/base.css';
   }
 }