From f54840f85a73ea14a565532d8910400391ae7332 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Sat, 15 Feb 2025 11:49:47 +0100
Subject: [PATCH] feat: provide vanilla HTML implementation for Body and Root
 component

---
 .changeset/fuzzy-cats-cough.md       |  5 +++++
 .changeset/tasty-bees-marry.md       |  5 +++++
 components/body/src/html/_mixin.scss | 13 +++++++++++++
 components/body/src/html/index.scss  |  9 +++++++++
 components/root/src/html/_mixin.scss | 23 +++++++++++++++++++++++
 components/root/src/html/index.scss  |  9 +++++++++
 6 files changed, 64 insertions(+)
 create mode 100644 .changeset/fuzzy-cats-cough.md
 create mode 100644 .changeset/tasty-bees-marry.md
 create mode 100644 components/body/src/html/_mixin.scss
 create mode 100644 components/body/src/html/index.scss
 create mode 100644 components/root/src/html/_mixin.scss
 create mode 100644 components/root/src/html/index.scss

diff --git a/.changeset/fuzzy-cats-cough.md b/.changeset/fuzzy-cats-cough.md
new file mode 100644
index 00000000000..46ba3503936
--- /dev/null
+++ b/.changeset/fuzzy-cats-cough.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/body-css": minor
+---
+
+Provide `.css` file for the `body` selector for styling vanilla HTML.
diff --git a/.changeset/tasty-bees-marry.md b/.changeset/tasty-bees-marry.md
new file mode 100644
index 00000000000..046f5fa01d9
--- /dev/null
+++ b/.changeset/tasty-bees-marry.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/root-css": minor
+---
+
+Provide `.css` file for the `:root` selector for styling vanilla HTML.
diff --git a/components/body/src/html/_mixin.scss b/components/body/src/html/_mixin.scss
new file mode 100644
index 00000000000..3658cd9ee69
--- /dev/null
+++ b/components/body/src/html/_mixin.scss
@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "../mixin";
+
+@mixin utrecht-html-body {
+  body {
+    @include utrecht-body;
+  }
+}
diff --git a/components/body/src/html/index.scss b/components/body/src/html/index.scss
new file mode 100644
index 00000000000..efd8e7b85a1
--- /dev/null
+++ b/components/body/src/html/index.scss
@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "./mixin";
+
+@include utrecht-html-body;
diff --git a/components/root/src/html/_mixin.scss b/components/root/src/html/_mixin.scss
new file mode 100644
index 00000000000..2dd4c40c4cb
--- /dev/null
+++ b/components/root/src/html/_mixin.scss
@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "../mixin";
+
+@mixin utrecht-html-html {
+  html {
+    @include utrecht-root;
+  }
+}
+
+/**
+ * Match `:root` instead of `html`, to avoid styling when a template
+ * accidentally renders an extraneous `html` element inside the `body`.
+ */
+@mixin utrecht-html-root {
+  :root {
+    @include utrecht-root;
+  }
+}
diff --git a/components/root/src/html/index.scss b/components/root/src/html/index.scss
new file mode 100644
index 00000000000..49345da2d20
--- /dev/null
+++ b/components/root/src/html/index.scss
@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "./mixin";
+
+@include utrecht-html-root;