Preview darkside

Author: thokra-nav

.changeset/curvy-actors-divide.md

@@ -0,0 +1,5 @@
+---
+"@nais/ds-svelte-community": patch
+---
+
+Preview darkside

packages/ds-svelte-community/src/lib/components/primitives/Bleed/bleed.test.ts

@@ -24,6 +24,16 @@ describe("Bleed", () => {
 			await bunmatch(render(Bleed, props), ReactBleed, {
 				props,
 				children: [React.createElement("span", {}, "Bleed body")],
+				opts: {
+					alterAttrValue(name, value) {
+						// TODO: This is to support darkside styles
+						if (name === "style") {
+							const reg = /--__ax[^;]+;/g;
+							return value.replaceAll(reg, "");
+						}
+						return value;
+					},
+				},
 			}),
 		).toBeTrue();
 	});

packages/ds-svelte-community/src/lib/components/primitives/Box/box.test.ts

@@ -29,6 +29,16 @@ describe("Box", () => {
 			await bunmatch(render(Box, props), ReactBox, {
 				props,
 				children: [React.createElement("span", {}, "Box body")],
+				opts: {
+					alterAttrValue(name, value) {
+						// TODO: This is to support darkside styles
+						if (name === "style") {
+							const reg = /--__ax[^;]+;/g;
+							return value.replaceAll(reg, "");
+						}
+						return value;
+					},
+				},
 			}),
 		).toBeTrue();
 	});

packages/ds-svelte-community/src/lib/components/primitives/HGrid/hgrid.test.ts

@@ -21,6 +21,16 @@ describe("HGrid", () => {
 					React.createElement("div", { key: "1" }),
 					React.createElement("div", { key: "2" }),
 				],
+				opts: {
+					alterAttrValue(name, value) {
+						// TODO: This is to support darkside styles
+						if (name === "style") {
+							const reg = /--__ax[^;]+;/g;
+							return value.replaceAll(reg, "");
+						}
+						return value;
+					},
+				},
 			}),
 		).toBeTrue();
 	});

packages/ds-svelte-community/src/routes/+layout.svelte

@@ -9,7 +9,7 @@
 	import Tag from "$lib/components/Tag/Tag.svelte";
 	import type { Snippet } from "svelte";
 	import "../doclib/styles.css";
-	import "../lib/css/darkside.css";
+	import "../lib/css/index.css";
 	import type { LayoutData } from "./$types";
 
 	let { data, children }: { data: LayoutData; children: Snippet } = $props();

packages/ds-svelte-community/src/routes/CSS/+page.svx

@@ -22,3 +22,9 @@ If you want unstyled `a`, you can add the class `unstyled` to prevent this styli
 If you want to use Tailwind, follow the [official guide to configure SvelteKit with Tailwind](https://tailwindcss.com/docs/guides/sveltekit).
 
 Although, you might not need to add `@tailwind base;` and `@tailwind components;` to your `.css` file.
+
+## Darkside
+
+To preview darkside, import `@nais/ds-svelte-community/css/darkside.css` instead of `@nais/ds-svelte-community/css`.
+
+Add `navds-theme` as a class to your `body` element, and optionally the `dark` class.