chore: fix typography attrs and layering

.changeset/smooth-radios-leave.md

@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Label: Use data attributes for styling
+
+ValidationMessage: Use data attributes for styling

.changeset/tidy-cheetahs-cry.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Remove `baseline` layer and fix layerorder for typography

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

@@ -17,13 +17,16 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
+
+  color: var(--ds-color-neutral-text-default);
+  background-color: var(--ds-color-neutral-background-default);
 }
 
 /**
  * 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';
 }
 
 /**
@@ -195,3 +198,60 @@
   font-size: var(--ds-heading-2xl-font-size);
   letter-spacing: var(--ds-heading-2xl-letter-spacing);
 }
+
+.ds-label--md {
+  font-size: var(--ds-label-md-font-size);
+  font-weight: var(--ds-label-md-font-weight);
+  letter-spacing: var(--ds-label-md-letter-spacing);
+  line-height: var(--ds-label-md-line-height);
+}
+
+.ds-label--xs {
+  font-weight: var(--ds-label-xs-font-weight);
+  line-height: var(--ds-label-xs-line-height);
+  font-size: var(--ds-label-xs-font-size);
+  letter-spacing: var(--ds-label-xs-letter-spacing);
+}
+
+.ds-label--sm {
+  font-weight: var(--ds-label-sm-font-weight);
+  line-height: var(--ds-label-sm-line-height);
+  font-size: var(--ds-label-sm-font-size);
+  letter-spacing: var(--ds-label-sm-letter-spacing);
+}
+
+.ds-label--lg {
+  font-weight: var(--ds-label-lg-font-weight);
+  line-height: var(--ds-label-lg-line-height);
+  font-size: var(--ds-label-lg-font-size);
+  letter-spacing: var(--ds-label-lg-letter-spacing);
+}
+
+.ds-validation-message--xs {
+  font-weight: var(--ds-error_message-xs-font-weight);
+  line-height: var(--ds-error_message-xs-line-height);
+  font-size: var(--ds-error_message-xs-font-size);
+  letter-spacing: var(--ds-error_message-xs-letter-spacing);
+}
+
+.ds-validation-message--sm {
+  font-weight: var(--ds-error_message-sm-font-weight);
+  line-height: var(--ds-error_message-sm-line-height);
+  font-size: var(--ds-error_message-sm-font-size);
+  letter-spacing: var(--ds-error_message-sm-letter-spacing);
+}
+
+.ds-validation-message--md {
+  font-size: var(--ds-error_message-md-font-size);
+  font-weight: var(--ds-error_message-md-font-weight);
+  letter-spacing: var(--ds-error_message-md-letter-spacing);
+  line-height: var(--ds-error_message-md-line-height);
+  margin: 0;
+}
+
+.ds-validation-message--lg {
+  font-weight: var(--ds-error_message-lg-font-weight);
+  line-height: var(--ds-error_message-lg-line-height);
+  font-size: var(--ds-error_message-lg-font-size);
+  letter-spacing: var(--ds-error_message-lg-letter-spacing);
+}