fix: fix the formio-conten style

Author: AliKdhim87

.changeset/gorgeous-jokes-flow.md

@@ -0,0 +1,5 @@
+---
+"@frameless/pdc-frontend": patch
+---
+
+Los het stijlprobleem van het Vormgeving-informatietekstblok in OpenForms op ([GitHub Issue frameless/strapi#881](https://github.com/frameless/strapi/issues/881)).

apps/pdc-frontend/package.json

@@ -33,7 +33,7 @@
     "@tanstack/react-query": "4.29.25",
     "@utrecht/component-library-css": "4.2.0",
     "@utrecht/component-library-react": "5.0.0",
-    "@utrecht/design-tokens": "1.1.0",
+    "@utrecht/design-tokens": "2.4.0",
     "@utrecht/web-component-library-react": "1.3.0",
     "accept-language": "3.0.18",
     "classnames": "2.3.3",
@@ -58,6 +58,7 @@
     "@utrecht/focus-ring-css": "1.1.0",
     "@utrecht/form-label-css": "1.1.0",
     "@utrecht/table-css": "1.4.0",
+    "@utrecht/spotlight-section-css": "1.6.0",
     "@utrecht/multiline-data-css": "1.1.0",
     "@utrecht/textbox-css": "1.2.0",
     "eslint-config-next": "13.2.4",

apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss

@@ -2,6 +2,8 @@
 @import "~@utrecht/form-label-css/src/mixin";
 @import "~@utrecht/textbox-css/src/mixin";
 @import "~@utrecht/table-css/src/html/mixin";
+@import "~@utrecht/spotlight-section-css/src/mixin";
+
 :root {
   --of-progress-indicator-padding-block-end: 0;
 }
@@ -70,3 +72,32 @@
 .openforms-body .openforms-body--wysiwyg {
   @include utrecht-html-table;
 }
+
+.openforms-formio-content {
+  &--info {
+    --of-formio-content-info-border-inline-start-style: none;
+    @include utrecht-spotlight-section;
+    @include utrecht-spotlight-section-type("info");
+  }
+  &--warning {
+    --of-formio-content-warning-border-inline-start-style: none;
+    @include utrecht-spotlight-section;
+    @include utrecht-spotlight-section-type("warning");
+  }
+  &--error {
+    --of-formio-content-error-border-inline-start-style: none;
+    @include utrecht-spotlight-section;
+    @include utrecht-spotlight-section-type("warning");
+  }
+  &--success {
+    --of-formio-content-success-border-inline-start-style: none;
+    @include utrecht-spotlight-section;
+    @include utrecht-spotlight-section-type("ok");
+  }
+  &--success,
+  &--info,
+  &--warning,
+  &--error {
+    flex-direction: column;
+  }
+}

yarn.lock

@@ -8252,6 +8252,11 @@
   resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-1.1.0.tgz#0377dbfac70564fc8fc33f9ad53323351f83004e"
   integrity sha512-1P9aVSL5xlBx2sFEzm1v+obgAPvwiLj4dg0vAZnFxLF6ZLbPPu0kP+tQhW3Gj945DU3qkwL/tIuimObYulYVAg==
 
+"@utrecht/design-tokens@2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@utrecht/design-tokens/-/design-tokens-2.4.0.tgz#e72ac3b1b2ae0f0794c79d249a1c475480caf222"
+  integrity sha512-TPLbXIgNOmoNbl6eTibBGkJ8sIH/8C77Bgot0LyLBe95/CQMCy9t172uB8C2SrtTKBsrxJwQhIUkHZ3YCGPvyA==
+
 "@utrecht/fieldset-react@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@utrecht/fieldset-react/-/fieldset-react-1.0.2.tgz#b126b7bc0c77c6037dc7e06812002096efbd600f"
@@ -8335,6 +8340,11 @@
   dependencies:
     clsx "2.1.1"
 
+"@utrecht/spotlight-section-css@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@utrecht/spotlight-section-css/-/spotlight-section-css-1.6.0.tgz#4966e3e6eba2eda10d2dd357bc12f65455de221e"
+  integrity sha512-dUKcskHCIbzbJKjsd591ogKqfbQeoDVgOnNUZcT80hz3Fdj+84/axQF4ZccuxyhJ7oRNdJlr2wnx9BzvkQCfJg==
+
 "@utrecht/table-css@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@utrecht/table-css/-/table-css-1.4.0.tgz#fc675468cd887f301af895f72f26cc4d69fd857d"