From 95cf7abb66b463c959ee7f891c7aa4a9d1575760 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Tue, 3 Oct 2023 15:38:03 +0200
Subject: [PATCH] style: support padding and background color in error message,
 to look like an alert

---
 .../form-field-error-message/css/_mixin.scss  |  5 +++
 .../form-field-error-message/tokens.json      | 41 +++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/components/form-field-error-message/css/_mixin.scss b/components/form-field-error-message/css/_mixin.scss
index c84b19fbdd9..b26d4bc663a 100644
--- a/components/form-field-error-message/css/_mixin.scss
+++ b/components/form-field-error-message/css/_mixin.scss
@@ -6,6 +6,7 @@
 @mixin utrecht-form-field-error-message {
   --utrecht-document-color: currentColor;
 
+  background-color: var(--utrecht-error-message-background-color);
   color: var(--utrecht-form-field-error-message-color);
   display: block;
   font-family: var(--utrecht-document-font-family, inherit);
@@ -19,6 +20,10 @@
     var(--utrecht-space-around, 0) *
       var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0))
   );
+  padding-block-end: var(--utrecht-error-message-padding-block-end);
+  padding-block-start: var(--utrecht-error-message-padding-block-start);
+  padding-inline-end: var(--utrecht-error-message-padding-inline-end);
+  padding-inline-start: var(--utrecht-error-message-padding-inline-start);
 
   & > * {
     --utrecht-space-around: 1;
diff --git a/components/form-field-error-message/tokens.json b/components/form-field-error-message/tokens.json
index c3bebcf7ea9..edba5ae25e6 100644
--- a/components/form-field-error-message/tokens.json
+++ b/components/form-field-error-message/tokens.json
@@ -1,6 +1,15 @@
 {
   "utrecht": {
     "form-field-error-message": {
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "type": "color"
+      },
       "color": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -56,6 +65,38 @@
           "nl.nldesignsystem.figma.supports-token": false
         },
         "type": "sizing"
+      },
+      "padding-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-inline-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-inline-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
       }
     }
   }