fix: 🐛 theme imports should be correct

digdir · Aug 5, 2024 · 3ba3061 · 3ba3061
1 parent cb0e42e
commit 3ba3061
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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');
+@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');
diff --git 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');
+@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');
diff --git 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');
+@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');
diff --git 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');
+@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');
diff --git a/packages/theme/index.html 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>