feat: provide vanilla HTML implementation for Body and Root component

nl-design-system · Feb 15, 2025 · f54840f · f54840f
1 parent 729f698
commit f54840f
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 0 deletions.
diff --git a/.changeset/fuzzy-cats-cough.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;