style(Field): change style of Label (#4134)

Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

Author: Barsnes

.changeset/brown-candles-sing.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Field**: Set `display: block` on `<label>`

.changeset/small-bikes-sit.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Label**: Use `line-height: var(--ds-body-md-line-height);`

.changeset/soft-planes-watch.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Field**: `data-field="description"` no longer gets `margin-top`

packages/css/src/field.css

@@ -14,6 +14,8 @@
     color: var(
       --ds-color-neutral-text-subtle
     ); /* TODO: Change to opacity or color-mix(currentColor, trasparent) to ensure contrast when parent element color changes? */
+    margin-top: 0; /* Line-height removes the need for this */
+    margin-block: 0;
   }
 
   & input:not([hidden]),
@@ -23,6 +25,11 @@
     display: block; /* Ensure input is not placed on same line as label/description/validation */
   }
 
+  /* Respect hidden attribute and make overwrites easy */
+  & label:where(:not([hidden])) {
+    display: block;
+  }
+
   /**
    * States
    */

packages/css/src/fieldset.css

@@ -20,7 +20,7 @@
 
   & > legend + p {
     color: var(--ds-color-neutral-text-subtle);
-    margin-block: var(--ds-size-1) 0;
+    margin-block: 0;
   }
 
   & > *.ds-sr-only + * {

packages/css/src/label.css

@@ -1,5 +1,6 @@
 .ds-label {
   font-weight: var(--ds-font-weight-medium);
+  line-height: var(--ds-body-md-line-height);
 
   &[data-weight='semibold'] {
     font-weight: var(--ds-font-weight-semibold);