Fixed background and forefround in theme previews

digdir · Jun 10, 2024 · 7e44eb3 · 7e44eb3
1 parent c8ba36e
commit 7e44eb3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/apps/theme/components/Previews/Components/Components.module.css b/apps/theme/components/Previews/Components/Components.module.css
@@ -1,5 +1,5 @@
 .components {
-  background-color: var(--back);
+  background-color: var(--background);
   border-radius: 12px;
   width: 100%;
   padding: 24px;
@@ -10,7 +10,7 @@
 }
 
 .card {
-  background-color: var(--fore);
+  background-color: var(--foreground);
   border-radius: 8px;
   padding: 24px;
 }

diff --git a/apps/theme/components/Previews/Dashboard/Dashboard.module.css b/apps/theme/components/Previews/Dashboard/Dashboard.module.css
@@ -1,5 +1,5 @@
 .dashboard {
-  background-color: var(--back);
+  background-color: var(--background);
   width: 100%;
   position: relative;
   min-height: 815px;
@@ -8,7 +8,7 @@
 }
 
 .sidebar {
-  background-color: var(--fore);
+  background-color: var(--foreground);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -70,7 +70,7 @@
 }
 
 .card {
-  background-color: var(--fore);
+  background-color: var(--foreground);
   padding: 24px;
   border-radius: 8px;
 }

diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css
@@ -69,8 +69,8 @@
 }
 
 .preview {
-  --back: var(--grey2);
-  --fore: var(--grey1);
+  --background: var(--grey2);
+  --foreground: var(--grey1);
 
   border: 1px solid #ebebeb;
   width: 100%;
@@ -79,3 +79,9 @@
   gap: 32px;
   box-shadow: 0 0 20px 2px #ebebeb;
 }
+
+.preview[data-ds-color-mode='dark'],
+.preview[data-ds-color-mode='contrast'] {
+  --background: var(--grey1);
+  --foreground: var(--grey2);
+}