From 3ba3061c9f2dba1f429f52f11f65b5519bde9b75 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Mon, 5 Aug 2024 15:27:35 +0200
Subject: [PATCH] fix: :bug: theme imports should be correct

---
 .vscode/settings.json               |  3 +++
 packages/cli/src/tokens/actions.ts  |  2 +-
 packages/theme/brand/altinn.css     | 10 +++++-----
 packages/theme/brand/digdir.css     | 10 +++++-----
 packages/theme/brand/portal.css     | 10 +++++-----
 packages/theme/brand/uutilsynet.css | 10 +++++-----
 packages/theme/index.html           | 20 ++++++++++++++++++++
 7 files changed, 44 insertions(+), 21 deletions(-)
 create mode 100644 packages/theme/index.html

diff --git a/.vscode/settings.json b/.vscode/settings.json
index cc8d16bdc6..53e9f80e9a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -21,5 +21,8 @@
   "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}",
   "[github-actions-workflow]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/packages/cli/src/tokens/actions.ts b/packages/cli/src/tokens/actions.ts
index 730a90ab98..c308c8124d 100644
--- a/packages/cli/src/tokens/actions.ts
+++ b/packages/cli/src/tokens/actions.ts
@@ -27,7 +27,7 @@ export const makeEntryFile: Action = {
 
     const generateImportUrls = R.pipe(
       sortLightmodeFirst,
-      R.map((file): string => `@import url('./${theme}/${file.toString()}');`),
+      R.map((file): string => `@import url('${theme}/${file.toString()}');`),
       R.join('\n'),
     );
 
diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css
index ede2ef2fec..a776d702cd 100644
--- a/packages/theme/brand/altinn.css
+++ b/packages/theme/brand/altinn.css
@@ -2,8 +2,8 @@
 
 @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
 
-@import url('./altinn/color-mode/light.css');
-@import url('./altinn/typography/secondary.css');
-@import url('./altinn/semantic.css');
-@import url('./altinn/color-mode/dark.css');
-@import url('./altinn/typography/primary.css');
\ No newline at end of file
+@import url('altinn/color-mode/light.css');
+@import url('altinn/typography/secondary.css');
+@import url('altinn/semantic.css');
+@import url('altinn/color-mode/dark.css');
+@import url('altinn/typography/primary.css');
\ No newline at end of file
diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css
index 4b9df40cc8..2fcd7df598 100644
--- a/packages/theme/brand/digdir.css
+++ b/packages/theme/brand/digdir.css
@@ -2,8 +2,8 @@
 
 @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
 
-@import url('./digdir/color-mode/light.css');
-@import url('./digdir/typography/secondary.css');
-@import url('./digdir/semantic.css');
-@import url('./digdir/color-mode/dark.css');
-@import url('./digdir/typography/primary.css');
\ No newline at end of file
+@import url('digdir/color-mode/light.css');
+@import url('digdir/typography/secondary.css');
+@import url('digdir/semantic.css');
+@import url('digdir/color-mode/dark.css');
+@import url('digdir/typography/primary.css');
\ No newline at end of file
diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css
index c7efe8ce73..6084341a11 100644
--- a/packages/theme/brand/portal.css
+++ b/packages/theme/brand/portal.css
@@ -2,8 +2,8 @@
 
 @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
 
-@import url('./portal/color-mode/light.css');
-@import url('./portal/typography/secondary.css');
-@import url('./portal/semantic.css');
-@import url('./portal/color-mode/dark.css');
-@import url('./portal/typography/primary.css');
\ No newline at end of file
+@import url('portal/color-mode/light.css');
+@import url('portal/typography/secondary.css');
+@import url('portal/semantic.css');
+@import url('portal/typography/primary.css');
+@import url('portal/color-mode/dark.css');
\ No newline at end of file
diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css
index 675a578e81..4883161881 100644
--- a/packages/theme/brand/uutilsynet.css
+++ b/packages/theme/brand/uutilsynet.css
@@ -2,8 +2,8 @@
 
 @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
 
-@import url('./uutilsynet/color-mode/light.css');
-@import url('./uutilsynet/typography/secondary.css');
-@import url('./uutilsynet/semantic.css');
-@import url('./uutilsynet/color-mode/dark.css');
-@import url('./uutilsynet/typography/primary.css');
\ No newline at end of file
+@import url('uutilsynet/color-mode/light.css');
+@import url('uutilsynet/typography/secondary.css');
+@import url('uutilsynet/semantic.css');
+@import url('uutilsynet/color-mode/dark.css');
+@import url('uutilsynet/typography/primary.css');
\ No newline at end of file
diff --git a/packages/theme/index.html b/packages/theme/index.html
new file mode 100644
index 0000000000..414d54b1ea
--- /dev/null
+++ b/packages/theme/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="nb">
+  <head>
+    <title>My Website</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="brand/digdir.css"
+    />
+    <style>
+      body {
+        background: var(--ds-color-accent-base-default);
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Welcome to My Website</h1>
+    <p>This is the default index.html file.</p>
+  </body>
+</html>