style: support padding and background color in error message, to look…

… like an alert
nl-design-system · Oct 3, 2023 · 95cf7ab · 95cf7ab
1 parent d41062d
commit 95cf7ab
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git 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
@@ -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
+          }
+        }
       }
     }
   }