Skip to content

Commit db9ed85

Browse files
committed
Preview darkside
1 parent ec81de4 commit db9ed85

File tree

6 files changed

+42
-1
lines changed

6 files changed

+42
-1
lines changed

.changeset/curvy-actors-divide.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@nais/ds-svelte-community": patch
3+
---
4+
5+
Preview darkside

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@ describe("Bleed", () => {
2424
await bunmatch(render(Bleed, props), ReactBleed, {
2525
props,
2626
children: [React.createElement("span", {}, "Bleed body")],
27+
opts: {
28+
alterAttrValue(name, value) {
29+
// TODO: This is to support darkside styles
30+
if (name === "style") {
31+
const reg = /--__ax[^;]+;/g;
32+
return value.replaceAll(reg, "");
33+
}
34+
return value;
35+
},
36+
},
2737
}),
2838
).toBeTrue();
2939
});

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ describe("Box", () => {
2929
await bunmatch(render(Box, props), ReactBox, {
3030
props,
3131
children: [React.createElement("span", {}, "Box body")],
32+
opts: {
33+
alterAttrValue(name, value) {
34+
// TODO: This is to support darkside styles
35+
if (name === "style") {
36+
const reg = /--__ax[^;]+;/g;
37+
return value.replaceAll(reg, "");
38+
}
39+
return value;
40+
},
41+
},
3242
}),
3343
).toBeTrue();
3444
});

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,16 @@ describe("HGrid", () => {
2121
React.createElement("div", { key: "1" }),
2222
React.createElement("div", { key: "2" }),
2323
],
24+
opts: {
25+
alterAttrValue(name, value) {
26+
// TODO: This is to support darkside styles
27+
if (name === "style") {
28+
const reg = /--__ax[^;]+;/g;
29+
return value.replaceAll(reg, "");
30+
}
31+
return value;
32+
},
33+
},
2434
}),
2535
).toBeTrue();
2636
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import Tag from "$lib/components/Tag/Tag.svelte";
1010
import type { Snippet } from "svelte";
1111
import "../doclib/styles.css";
12-
import "../lib/css/darkside.css";
12+
import "../lib/css/index.css";
1313
import type { LayoutData } from "./$types";
1414
1515
let { data, children }: { data: LayoutData; children: Snippet } = $props();

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,9 @@ If you want unstyled `a`, you can add the class `unstyled` to prevent this styli
2222
If you want to use Tailwind, follow the [official guide to configure SvelteKit with Tailwind](https://tailwindcss.com/docs/guides/sveltekit).
2323

2424
Although, you might not need to add `@tailwind base;` and `@tailwind components;` to your `.css` file.
25+
26+
## Darkside
27+
28+
To preview darkside, import `@nais/ds-svelte-community/css/darkside.css` instead of `@nais/ds-svelte-community/css`.
29+
30+
Add `navds-theme` as a class to your `body` element, and optionally the `dark` class.

0 commit comments

Comments
 (0)