From 0eb1d6aabe3e01ddf5d46894d958f9185c563331 Mon Sep 17 00:00:00 2001
From: Ali Amori Kadhim <ali@frameless.io>
Date: Thu, 26 Sep 2024 10:22:14 +0200
Subject: [PATCH] fix: fix the formio-conten style

---
 .changeset/gorgeous-jokes-flow.md             |  5 +++
 apps/pdc-frontend/package.json                |  3 +-
 .../OpenFormsEmbed/OpenFormsEmbed.scss        | 31 +++++++++++++++++++
 yarn.lock                                     | 10 ++++++
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/gorgeous-jokes-flow.md

diff --git a/.changeset/gorgeous-jokes-flow.md b/.changeset/gorgeous-jokes-flow.md
new file mode 100644
index 00000000..a80103f1
--- /dev/null
+++ b/.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)).
diff --git a/apps/pdc-frontend/package.json b/apps/pdc-frontend/package.json
index e57077a3..efba32e7 100644
--- a/apps/pdc-frontend/package.json
+++ b/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",
diff --git a/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss b/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss
index e3b49998..76252b59 100644
--- a/apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.scss
+++ b/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;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index d07fd609..ab3ca88a 100644
--- a/yarn.lock
+++ b/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"