From 2d6adaf334355aca70b5fc0a2d1716e1d1f00d0f Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 17 Sep 2024 10:02:07 +0200
Subject: [PATCH 1/8] fix: errormessage, heading, ingress, label css

---
 .../css/baseline/typography/error-message.css | 31 +++++-------
 packages/css/baseline/typography/heading.css  | 48 +++++++++----------
 packages/css/baseline/typography/ingress.css  | 28 +++++------
 packages/css/baseline/typography/label.css    |  6 +--
 .../Typography/ErrorMessage/ErrorMessage.tsx  | 20 +++-----
 .../components/Typography/Heading/Heading.tsx | 15 ++----
 .../components/Typography/Ingress/Ingress.tsx | 13 ++---
 .../src/components/Typography/Label/Label.tsx | 39 +++++++--------
 8 files changed, 80 insertions(+), 120 deletions(-)

diff --git a/packages/css/baseline/typography/error-message.css b/packages/css/baseline/typography/error-message.css
index a1d85be1a3..77742ffaa0 100644
--- a/packages/css/baseline/typography/error-message.css
+++ b/packages/css/baseline/typography/error-message.css
@@ -2,28 +2,21 @@
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
   margin: 0;
-}
-
-.ds-error-message--error {
   color: var(--ds-color-danger-text-subtle);
-}
-
-.ds-error-message--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
 
-.ds-error_message--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-error_message--md {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
-}
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-3);
+  }
 
-.ds-error_message--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-4);
-}
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-4);
+  }
 
-.ds-error_message--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-3);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
+  }
 }
diff --git a/packages/css/baseline/typography/heading.css b/packages/css/baseline/typography/heading.css
index 00d4da0f07..cb4aa42b05 100644
--- a/packages/css/baseline/typography/heading.css
+++ b/packages/css/baseline/typography/heading.css
@@ -1,38 +1,34 @@
 .ds-heading {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
+  --dsc-bottom-spacing: var(--ds-spacing-4);
 
   margin: 0;
   color: var(--ds-color-neutral-text-default);
-}
 
-.ds-heading--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-heading--2xl {
-  --dsc-bottom-spacing: var(--ds-spacing-7);
-}
+  &[data-size='2xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-1);
+  }
 
-.ds-heading--xl {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
-}
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-2);
+  }
 
-.ds-heading--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
-}
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-3);
+  }
 
-.ds-heading--md {
-  --dsc-bottom-spacing: var(--ds-spacing-4);
-}
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
+  }
 
-.ds-heading--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-3);
-}
-
-.ds-heading--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-2);
-}
+  &[data-size='xl'] {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
+  }
 
-.ds-heading--2xs {
-  --dsc-bottom-spacing: var(--ds-spacing-1);
+  &[data-size='2xl'] {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
+  }
 }
diff --git a/packages/css/baseline/typography/ingress.css b/packages/css/baseline/typography/ingress.css
index a76cde76e4..82f2a2a553 100644
--- a/packages/css/baseline/typography/ingress.css
+++ b/packages/css/baseline/typography/ingress.css
@@ -3,24 +3,20 @@
 
   margin: 0;
   color: var(--ds-color-neutral-text-default);
-}
 
-.ds-ingress--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-ingress--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
-}
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-8);
+  }
 
-.ds-ingress--md {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
-}
-
-.ds-ingress--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-7);
-}
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
+  }
 
-.ds-ingress--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-8);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
+  }
 }
diff --git a/packages/css/baseline/typography/label.css b/packages/css/baseline/typography/label.css
index 5dd5118316..799a5276fb 100644
--- a/packages/css/baseline/typography/label.css
+++ b/packages/css/baseline/typography/label.css
@@ -5,8 +5,8 @@
   margin: 0;
   padding: 0;
   color: var(--ds-color-neutral-text-default);
-}
 
-.ds-label--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 }
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
index c05808bda6..f53cfb8154 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
@@ -11,8 +11,6 @@ export type ErrorMessageProps = {
   size?: 'xs' | 'sm' | 'md' | 'lg';
   /** Adds margin-bottom */
   spacing?: boolean;
-  /** Toggle error color */
-  error?: boolean;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
@@ -22,26 +20,20 @@ export type ErrorMessageProps = {
 
 /** Use `ErrorMessage` to display text as error message. */
 export const ErrorMessage = forwardRef<HTMLParagraphElement, ErrorMessageProps>(
-  (
-    { size = 'md', className, spacing, asChild, error = true, ...rest },
+  function ErrorMessage(
+    { size = 'md', className, spacing, asChild, ...rest },
     ref,
-  ) => {
+  ) {
     const Component = asChild ? Slot : 'div';
 
     return (
       <Component
         ref={ref}
-        className={cl(
-          'ds-error-message',
-          `ds-error_message--${size}`,
-          spacing && 'ds-error-message--spacing',
-          error && 'ds-error-message--error',
-          className,
-        )}
+        className={cl('ds-error-message', className)}
+        data-size={size}
+        data-spacing={spacing || undefined}
         {...rest}
       />
     );
   },
 );
-
-ErrorMessage.displayName = 'ErrorMessage';
diff --git a/packages/react/src/components/Typography/Heading/Heading.tsx b/packages/react/src/components/Typography/Heading/Heading.tsx
index 2a6c5cc74e..49d70f39bd 100644
--- a/packages/react/src/components/Typography/Heading/Heading.tsx
+++ b/packages/react/src/components/Typography/Heading/Heading.tsx
@@ -30,25 +30,20 @@ export type HeadingProps = {
  * <Heading size='lg' level={2}>Heading</Heading>
  */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  (
+  function Heading(
     { size = 'xl', level = 2, spacing = false, className, asChild, ...rest },
     ref,
-  ) => {
+  ) {
     const Component = asChild ? Slot : (`h${level}` as ElementType);
 
     return (
       <Component
+        className={cl('ds-heading', className)}
+        data-size={size}
+        data-spacing={spacing || undefined}
         ref={ref}
-        className={cl(
-          'ds-heading',
-          `ds-heading--${size}`,
-          spacing && 'ds-heading--spacing',
-          className,
-        )}
         {...rest}
       />
     );
   },
 );
-
-Heading.displayName = 'Heading';
diff --git a/packages/react/src/components/Typography/Ingress/Ingress.tsx b/packages/react/src/components/Typography/Ingress/Ingress.tsx
index 9b05e7c1f1..033a932ea1 100644
--- a/packages/react/src/components/Typography/Ingress/Ingress.tsx
+++ b/packages/react/src/components/Typography/Ingress/Ingress.tsx
@@ -24,22 +24,17 @@ export type IngressProps = {
  * <Ingress size='lg'>Ingress</Ingress>
  */
 export const Ingress = forwardRef<HTMLParagraphElement, IngressProps>(
-  ({ size = 'md', className, spacing, asChild, ...rest }, ref) => {
+  function Ingress({ size = 'md', className, spacing, asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'p';
 
     return (
       <Component
         ref={ref}
-        className={cl(
-          `ds-ingress`,
-          `ds-ingress--${size}`,
-          spacing && 'ds-ingress--spacing',
-          className,
-        )}
+        className={cl(`ds-ingress`, className)}
+        data-size={size}
+        data-spacing={spacing || undefined}
         {...rest}
       />
     );
   },
 );
-
-Ingress.displayName = 'Ingress';
diff --git a/packages/react/src/components/Typography/Label/Label.tsx b/packages/react/src/components/Typography/Label/Label.tsx
index 809ebae1da..0e8002864f 100644
--- a/packages/react/src/components/Typography/Label/Label.tsx
+++ b/packages/react/src/components/Typography/Label/Label.tsx
@@ -29,27 +29,20 @@ export type LabelProps = {
  * @example
  * <Label size='lg'>Label</Label>
  */
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  (
-    { className, spacing, size = 'md', weight = 'medium', asChild, ...rest },
-    ref,
-  ) => {
-    const Component = asChild ? Slot : 'label';
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  { className, spacing, size = 'md', weight = 'medium', asChild, ...rest },
+  ref,
+) {
+  const Component = asChild ? Slot : 'label';
 
-    return (
-      <Component
-        ref={ref}
-        className={cl(
-          'ds-label',
-          `ds-label--${size}`,
-          spacing && 'ds-label--spacing',
-          weight && `ds-font-weight--${weight}`,
-          className,
-        )}
-        {...rest}
-      />
-    );
-  },
-);
-
-Label.displayName = 'Label';
+  return (
+    <Component
+      ref={ref}
+      className={cl('ds-label', className)}
+      data-size={size}
+      data-weight={weight}
+      data-spacing={spacing || undefined}
+      {...rest}
+    />
+  );
+});

From 2b838b5be74394c74fb79bc17f8494efb05d6f4e Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 17 Sep 2024 10:07:51 +0200
Subject: [PATCH 2/8] fix: update erromessage usage

---
 packages/react/src/components/form/CharacterCounter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/CharacterCounter.tsx b/packages/react/src/components/form/CharacterCounter.tsx
index bd1a902c53..f817701d69 100644
--- a/packages/react/src/components/form/CharacterCounter.tsx
+++ b/packages/react/src/components/form/CharacterCounter.tsx
@@ -45,7 +45,7 @@ export const CharacterCounter = ({
       <span className={`ds-sr-only`} id={id}>
         {srLabel}
       </span>
-      <ErrorMessage asChild size={size} error={hasExceededLimit}>
+      <ErrorMessage asChild size={size}>
         <span aria-live={hasExceededLimit ? 'polite' : 'off'}>
           {label(currentCount)}
         </span>

From 4de493a186bdb826f6fcd1d8cf2d13481e701371 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Tue, 17 Sep 2024 10:10:02 +0200
Subject: [PATCH 3/8] fix: update errormessage story

---
 .../components/Typography/ErrorMessage/ErrorMessage.stories.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx
index e6f49b3f1e..690bb21673 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx
@@ -16,6 +16,5 @@ export const Preview: Story = {
     children: 'Dette er en beskrivende feilmelding.',
     spacing: false,
     size: 'md',
-    error: true,
   },
 };

From 804f95be4729e356517a06ade1db953559b42470 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 20 Sep 2024 13:17:40 +0200
Subject: [PATCH 4/8] fix: update typography.css

---
 packages/css/baseline/typography.css          | 299 ++++++++----------
 .../ValidationMessage/ValidationMessage.tsx   |  11 +-
 2 files changed, 142 insertions(+), 168 deletions(-)

diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css
index 72d3424bb1..a5aa8661c4 100644
--- a/packages/css/baseline/typography.css
+++ b/packages/css/baseline/typography.css
@@ -1,125 +1,114 @@
 /** Heading */
 .ds-heading {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
+  --dsc-bottom-spacing: var(--ds-spacing-4);
 
-  margin: 0;
   color: var(--ds-color-neutral-text-default);
-}
-
-.ds-heading--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
-
-.ds-heading--2xs {
-  --dsc-bottom-spacing: var(--ds-spacing-1);
+  font-size: var (--ds-heading-md-font-size);
+  font-weight: var(--ds-heading-md-font-weight);
+  letter-spacing: var(--ds-heading-md-letter-spacing);
+  line-height: var(--ds-heading-md-line-height);
+  margin: 0;
 
-  font-weight: var(--ds-heading-2xs-font-weight);
-  line-height: var(--ds-heading-2xs-line-height);
-  font-size: var(--ds-heading-2xs-font-size);
-  letter-spacing: var(--ds-heading-2xs-letter-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-heading--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-2);
+  &[data-size='2xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-1);
 
-  font-weight: var(--ds-heading-xs-font-weight);
-  line-height: var(--ds-heading-xs-line-height);
-  font-size: var(--ds-heading-xs-font-size);
-  letter-spacing: var(--ds-heading-xs-letter-spacing);
-}
+    font-weight: var(--ds-heading-2xs-font-weight);
+    line-height: var(--ds-heading-2xs-line-height);
+    font-size: var(--ds-heading-2xs-font-size);
+    letter-spacing: var(--ds-heading-2xs-letter-spacing);
+  }
 
-.ds-heading--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-3);
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-2);
 
-  font-weight: var(--ds-heading-sm-font-weight);
-  line-height: var(--ds-heading-sm-line-height);
-  font-size: var(--ds-heading-sm-font-size);
-  letter-spacing: var(--ds-heading-sm-letter-spacing);
-}
+    font-weight: var(--ds-heading-xs-font-weight);
+    line-height: var(--ds-heading-xs-line-height);
+    font-size: var(--ds-heading-xs-font-size);
+    letter-spacing: var(--ds-heading-xs-letter-spacing);
+  }
 
-.ds-heading--md {
-  --dsc-bottom-spacing: var(--ds-spacing-4);
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-3);
 
-  font-weight: var(--ds-heading-md-font-weight);
-  line-height: var(--ds-heading-md-line-height);
-  font-size: var (--ds-heading-md-font-size);
-  letter-spacing: var(--ds-heading-md-letter-spacing);
-}
+    font-weight: var(--ds-heading-sm-font-weight);
+    line-height: var(--ds-heading-sm-line-height);
+    font-size: var(--ds-heading-sm-font-size);
+    letter-spacing: var(--ds-heading-sm-letter-spacing);
+  }
 
-.ds-heading--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
 
-  font-weight: var(--ds-heading-lg-font-weight);
-  line-height: var(--ds-heading-lg-line-height);
-  font-size: var(--ds-heading-lg-font-size);
-  letter-spacing: var(--ds-heading-lg-letter-spacing);
-}
+    font-weight: var(--ds-heading-lg-font-weight);
+    line-height: var(--ds-heading-lg-line-height);
+    font-size: var(--ds-heading-lg-font-size);
+    letter-spacing: var(--ds-heading-lg-letter-spacing);
+  }
 
-.ds-heading--xl {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
+  &[data-size='xl'] {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
 
-  font-weight: var(--ds-heading-xl-font-weight);
-  line-height: var(--ds-heading-xl-line-height);
-  font-size: var(--ds-heading-xl-font-size);
-  letter-spacing: var(--ds-heading-xl-letter-spacing);
-}
+    font-weight: var(--ds-heading-xl-font-weight);
+    line-height: var(--ds-heading-xl-line-height);
+    font-size: var(--ds-heading-xl-font-size);
+    letter-spacing: var(--ds-heading-xl-letter-spacing);
+  }
 
-.ds-heading--2xl {
-  --dsc-bottom-spacing: var(--ds-spacing-7);
+  &[data-size='2xl'] {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
 
-  font-weight: var(--ds-heading-2xl-font-weight);
-  line-height: var(--ds-heading-2xl-line-height);
-  font-size: var(--ds-heading-2xl-font-size);
-  letter-spacing: var(--ds-heading-2xl-letter-spacing);
+    font-weight: var(--ds-heading-2xl-font-weight);
+    line-height: var(--ds-heading-2xl-line-height);
+    font-size: var(--ds-heading-2xl-font-size);
+    letter-spacing: var(--ds-heading-2xl-letter-spacing);
+  }
 }
 
 /** Ingress */
-
 .ds-ingress {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
-  margin: 0;
   color: var(--ds-color-neutral-text-default);
-}
-
-.ds-ingress--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
-
-.ds-ingress--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-8);
+  font-size: var(--ds-ingress-md-font-size);
+  font-weight: var(--ds-ingress-md-font-weight);
+  letter-spacing: var(--ds-ingress-md-letter-spacing);
+  line-height: var(--ds-ingress-md-line-height);
+  margin: 0;
 
-  font-weight: var(--ds-ingress-xs-font-weight);
-  line-height: var(--ds-ingress-xs-line-height);
-  font-size: var(--ds-ingress-xs-font-size);
-  letter-spacing: var(--ds-ingress-xs-letter-spacing);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-ingress--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-7);
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-8);
 
-  font-weight: var(--ds-ingress-sm-font-weight);
-  line-height: var(--ds-ingress-sm-line-height);
-  font-size: var(--ds-ingress-sm-font-size);
-  letter-spacing: var(--ds-ingress-sm-letter-spacing);
-}
+    font-weight: var(--ds-ingress-xs-font-weight);
+    line-height: var(--ds-ingress-xs-line-height);
+    font-size: var(--ds-ingress-xs-font-size);
+    letter-spacing: var(--ds-ingress-xs-letter-spacing);
+  }
 
-.ds-ingress--md {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
 
-  font-weight: var(--ds-ingress-md-font-weight);
-  line-height: var(--ds-ingress-md-line-height);
-  font-size: var(--ds-ingress-md-font-size);
-  letter-spacing: var(--ds-ingress-md-letter-spacing);
-}
+    font-weight: var(--ds-ingress-sm-font-weight);
+    line-height: var(--ds-ingress-sm-line-height);
+    font-size: var(--ds-ingress-sm-font-size);
+    letter-spacing: var(--ds-ingress-sm-letter-spacing);
+  }
 
-.ds-ingress--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-6);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
 
-  font-weight: var(--ds-ingress-lg-font-weight);
-  line-height: var(--ds-ingress-lg-line-height);
-  font-size: var(--ds-ingress-lg-font-size);
-  letter-spacing: var(--ds-ingress-lg-letter-spacing);
+    font-weight: var(--ds-ingress-lg-font-weight);
+    line-height: var(--ds-ingress-lg-line-height);
+    font-size: var(--ds-ingress-lg-font-size);
+    letter-spacing: var(--ds-ingress-lg-letter-spacing);
+  }
 }
 
 /** Paragraph */
@@ -308,103 +297,92 @@
 }
 
 /** Label */
-
 .ds-label {
   --dsc-bottom-spacing: var(--ds-spacing-1);
 
+  color: var(--ds-color-neutral-text-default);
   display: inline-block;
+  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);
   margin: 0;
   padding: 0;
-  color: var(--ds-color-neutral-text-default);
-}
 
-.ds-label--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
-
-.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);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-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);
-}
+  &[data-size='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--md {
-  font-weight: var(--ds-label-md-font-weight);
-  line-height: var(--ds-label-md-line-height);
-  font-size: var(--ds-label-md-font-size);
-  letter-spacing: var(--ds-label-md-letter-spacing);
-}
+  &[data-size='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);
+  &[data-size='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);
+  }
 }
 
-/** Error message */
-
+/** Validation message */
 .ds-validation-message {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
+  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--error {
-  color: var(--ds-color-danger-text-subtle);
-}
-
-.ds-validation-message--spacing {
-  margin-bottom: var(--dsc-bottom-spacing);
-}
 
-.ds-validation-message--xs {
-  --dsc-bottom-spacing: var(--ds-spacing-3);
+  &[data-error] {
+    color: var(--ds-color-danger-text-subtle);
+  }
 
-  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);
-}
+  &[data-spacing] {
+    margin-bottom: var(--dsc-bottom-spacing);
+  }
 
-.ds-validation-message--sm {
-  --dsc-bottom-spacing: var(--ds-spacing-4);
+  &[data-size='xs'] {
+    --dsc-bottom-spacing: var(--ds-spacing-3);
 
-  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);
-}
+    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--md {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='sm'] {
+    --dsc-bottom-spacing: var(--ds-spacing-4);
 
-  font-weight: var(--ds-error_message-md-font-weight);
-  line-height: var(--ds-error_message-md-line-height);
-  font-size: var(--ds-error_message-md-font-size);
-  letter-spacing: var(--ds-error_message-md-letter-spacing);
-}
+    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--lg {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
+  &[data-size='lg'] {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
 
-  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);
+    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);
+  }
 }
 
 /** Font weight
  ** used for weight on Label */
-
 .ds-font-weight--medium {
   font-weight: var(--ds-font-weight-medium);
 }
@@ -419,7 +397,6 @@
 
 /** Line height
  ** used for long, short Paragraph */
-
 .ds-line-height--sm {
   line-height: var(--ds-line-height-sm);
 }
diff --git a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
index 205d3eb9f7..0dd505dcec 100644
--- a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
@@ -32,14 +32,11 @@ export const ValidationMessage = forwardRef<
 
   return (
     <Component
+      className={cl('ds-validation-message', className)}
+      data-error={error || undefined}
+      data-size={size}
+      data-spacing={spacing || undefined}
       ref={ref}
-      className={cl(
-        'ds-validation-message',
-        `ds-error_message--${size}`,
-        spacing && 'ds-validation-message--spacing',
-        error && 'ds-validation-message--error',
-        className,
-      )}
       {...rest}
     />
   );

From 882596ccc0a143aa00fa0e546ac06813c7e54c1b Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 20 Sep 2024 13:20:48 +0200
Subject: [PATCH 5/8] fix(Label): font weight from classname

---
 packages/react/src/components/Typography/Label/Label.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Typography/Label/Label.tsx b/packages/react/src/components/Typography/Label/Label.tsx
index 0e8002864f..ef19ce00fb 100644
--- a/packages/react/src/components/Typography/Label/Label.tsx
+++ b/packages/react/src/components/Typography/Label/Label.tsx
@@ -38,9 +38,12 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   return (
     <Component
       ref={ref}
-      className={cl('ds-label', className)}
+      className={cl(
+        'ds-label',
+        weight && `ds-font-weight--${weight}`,
+        className,
+      )}
       data-size={size}
-      data-weight={weight}
       data-spacing={spacing || undefined}
       {...rest}
     />

From b626a8169ffb5cb5d496fa31cffe4b75069f73d3 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Fri, 20 Sep 2024 13:21:42 +0200
Subject: [PATCH 6/8] docs(ValidationMessage): reintroduce error in story

---
 .../Typography/ValidationMessage/ValidationMessage.stories.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.stories.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.stories.tsx
index a6b44d89ad..3dfc6c7245 100644
--- a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.stories.tsx
+++ b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.stories.tsx
@@ -16,5 +16,6 @@ export const Preview: Story = {
     children: 'Dette er en beskrivende feilmelding.',
     spacing: false,
     size: 'md',
+    error: true,
   },
 };

From 34838f8d81e1fc64167a4b4c76d72ed3a5826c88 Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Mon, 23 Sep 2024 09:42:24 +0200
Subject: [PATCH 7/8] Update typography.css

---
 packages/css/baseline/typography.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css
index a5aa8661c4..d78718cb75 100644
--- a/packages/css/baseline/typography.css
+++ b/packages/css/baseline/typography.css
@@ -3,7 +3,7 @@
   --dsc-bottom-spacing: var(--ds-spacing-4);
 
   color: var(--ds-color-neutral-text-default);
-  font-size: var (--ds-heading-md-font-size);
+  font-size: var(--ds-heading-md-font-size);
   font-weight: var(--ds-heading-md-font-weight);
   letter-spacing: var(--ds-heading-md-letter-spacing);
   line-height: var(--ds-heading-md-line-height);

From d35829e817462a6a38ad8ddf6780a3b4575fbec2 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Mon, 23 Sep 2024 13:50:51 +0200
Subject: [PATCH 8/8] chore: lint-style

---
 packages/css/baseline/typography.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css
index 4587bdd5d6..d78718cb75 100644
--- a/packages/css/baseline/typography.css
+++ b/packages/css/baseline/typography.css
@@ -33,6 +33,7 @@
 
   &[data-size='sm'] {
     --dsc-bottom-spacing: var(--ds-spacing-3);
+
     font-weight: var(--ds-heading-sm-font-weight);
     line-height: var(--ds-heading-sm-line-height);
     font-size: var(--ds-heading-sm-font-size);