From c435a5791cec1fbf2c27b657b8a7f2beb1db0818 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 5 Mar 2025 10:47:16 +0100
Subject: [PATCH] remove all style tags

---
 apps/_components/src/Container/Container.tsx  |  9 +++-
 apps/storefront/app/(frontpage)/layout.tsx    |  2 +-
 apps/storefront/app/(frontpage)/page.mdx      | 12 -----
 .../app/bloggen/(frontpage)/layout.tsx        |  2 +-
 .../app/bloggen/(frontpage)/page.mdx          | 13 -----
 .../PostLayout/PostLayout.module.css          | 16 -------
 .../_components/PostLayout/PostLayout.tsx     | 12 +----
 apps/storefront/app/komponenter/layout.tsx    |  4 +-
 apps/storefront/app/komponenter/page.tsx      | 12 -----
 apps/storefront/app/monstre/page.mdx          | 10 ----
 apps/storefront/globals.css                   | 47 +++++++++++++++++++
 .../layouts/MenuPageLayout/MenuPageLayout.tsx | 12 +----
 12 files changed, 61 insertions(+), 90 deletions(-)

diff --git a/apps/_components/src/Container/Container.tsx b/apps/_components/src/Container/Container.tsx
index 10c9a8eb08..a9390f5c54 100644
--- a/apps/_components/src/Container/Container.tsx
+++ b/apps/_components/src/Container/Container.tsx
@@ -5,8 +5,13 @@ import classes from './Container.module.css';
 type ContainerProps = {
   children: React.ReactNode;
   className?: string;
+  id?: string;
 };
 
-export const Container = ({ children, className }: ContainerProps) => {
-  return <div className={cl(classes.container, className)}>{children}</div>;
+export const Container = ({ children, className, id }: ContainerProps) => {
+  return (
+    <div id={id} className={cl(classes.container, className)}>
+      {children}
+    </div>
+  );
 };
diff --git a/apps/storefront/app/(frontpage)/layout.tsx b/apps/storefront/app/(frontpage)/layout.tsx
index f045575932..5d6f875706 100644
--- a/apps/storefront/app/(frontpage)/layout.tsx
+++ b/apps/storefront/app/(frontpage)/layout.tsx
@@ -14,7 +14,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <main id='main'>
-      <div>
+      <div id='frontpage'>
         <img
           src='/img/elements/first.svg'
           alt=''
diff --git a/apps/storefront/app/(frontpage)/page.mdx b/apps/storefront/app/(frontpage)/page.mdx
index 817d5bf1fa..23c0fd6d9d 100644
--- a/apps/storefront/app/(frontpage)/page.mdx
+++ b/apps/storefront/app/(frontpage)/page.mdx
@@ -107,15 +107,3 @@ export const metadata = {
     },
   ]}
 />
-
-<style href="header">
-  {`
-    header:first-of-type {
-      background-color: transparent;
-    }
-
-    .ds-logo-image img {
-      width: 85%;
-    }
-`}
-</style>
diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.tsx b/apps/storefront/app/bloggen/(frontpage)/layout.tsx
index a2ef53188c..1b9e5f24a0 100644
--- a/apps/storefront/app/bloggen/(frontpage)/layout.tsx
+++ b/apps/storefront/app/bloggen/(frontpage)/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div>
+    <div id='bloggen'>
       <Banner color='red'>
         <BannerIcon>
           <PencilIcon fontSize={34} aria-hidden='true' />
diff --git a/apps/storefront/app/bloggen/(frontpage)/page.mdx b/apps/storefront/app/bloggen/(frontpage)/page.mdx
index 0269112148..c86a299b32 100644
--- a/apps/storefront/app/bloggen/(frontpage)/page.mdx
+++ b/apps/storefront/app/bloggen/(frontpage)/page.mdx
@@ -104,16 +104,3 @@ export const metadata = {
   featured={false}
   level={2}
 />
-
-<style href="body">
-  {`
-    body {
-      background-color: var(--ds-color-neutral-background-subtle);
-
-        [data-color-scheme='dark'] &,
-        [data-color-scheme='auto'] & {
-          background-color: var(--ds-color-neutral-background-default);
-        }
-    }
-  `}
-</style>
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
index 4b8cdd1661..030e3a068c 100644
--- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
+++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
@@ -64,22 +64,6 @@
   width: 100%;
 }
 
-/* .content img {
-  display: block;
-  width: 860px;
-  margin: var(--ds-size-12) 0;
-  margin-left: calc((100% - 860px) / 2) !important;
-  background-color: var(--ds-color-neutral-background-subtle);
-}
-
-.content video,
-.content [data-iframe-video] {
-  display: block;
-  width: 860px;
-  margin-left: calc((100% - 860px) / 2) !important;
-  background-color: var(--ds-color-neutral-background-subtle);
-} */
-
 .main > figure {
   margin: auto;
   width: 100%;
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
index 9c7830b243..5fe8cf3c09 100644
--- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
+++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -33,7 +33,7 @@ function PostLayout({
   figureCount = FIGURE_COUNT,
 }: BlogArticleLayoutProps) {
   return (
-    <div className={classes.wrapper}>
+    <div className={classes.wrapper} id='post-layout'>
       <Container className={classes.page}>
         {Array.from({ length: figureCount }).map((_, index) => (
           <Figures
@@ -87,16 +87,6 @@ function PostLayout({
           </MdxContent>
         </main>
       </Container>
-      <style suppressHydrationWarning href='header'>
-        {`
-          header {
-            [data-color-scheme='dark'] &,
-            [data-color-scheme='auto'] & {
-              background-color: var(--ds-color-neutral-background-default) !important;
-            }
-          }
-        `}
-      </style>
     </div>
   );
 }
diff --git a/apps/storefront/app/komponenter/layout.tsx b/apps/storefront/app/komponenter/layout.tsx
index 6d27adc289..b169494aa5 100644
--- a/apps/storefront/app/komponenter/layout.tsx
+++ b/apps/storefront/app/komponenter/layout.tsx
@@ -27,7 +27,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           sammen på mange ulike måter og i forskjellige mønstre.
         </BannerIngress>
       </Banner>
-      <Container className={classes.grid}>{children}</Container>
+      <Container className={classes.grid} id='komponenter'>
+        {children}
+      </Container>
     </main>
   );
 };
diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
index 006d82b8f6..37363422f0 100644
--- a/apps/storefront/app/komponenter/page.tsx
+++ b/apps/storefront/app/komponenter/page.tsx
@@ -23,18 +23,6 @@ export default function page() {
       {sortedData.map((component) => (
         <ComponentCard key={component.title} {...component} />
       ))}
-      <style suppressHydrationWarning href='body'>
-        {`
-          body {
-            background-color: var(--ds-color-neutral-background-subtle);
-
-              [data-color-scheme='dark'] &,
-              [data-color-scheme='auto'] & {
-                background-color: var(--ds-color-neutral-background-default);
-              }
-          }
-        `}
-      </style>
     </>
   );
 }
diff --git a/apps/storefront/app/monstre/page.mdx b/apps/storefront/app/monstre/page.mdx
index edf38382b0..72f1565fde 100644
--- a/apps/storefront/app/monstre/page.mdx
+++ b/apps/storefront/app/monstre/page.mdx
@@ -71,13 +71,3 @@ Alle som ønsker kan påvirke arbeidet gjennom åpne diskusjoner i [Slack](https
   dataUnstyled
   caption='Digdir, Nav, Skatteetaten, Oslo kommune og Brønnøysundregistren er blant dem som deltar i arbeidet om å etablere felles mønstre på tvers'
 />
-
-
-
-<style href="body">
-  {`
-    body {
-      background-color: var(--ds-color-neutral-background-subtle);
-    }
-  `}
-</style>
diff --git a/apps/storefront/globals.css b/apps/storefront/globals.css
index e4887ecc70..a2242758e9 100644
--- a/apps/storefront/globals.css
+++ b/apps/storefront/globals.css
@@ -16,6 +16,53 @@
 
 body {
   font-family: 'Inter', sans-serif;
+  background-color: var(--ds-color-neutral-background-default);
+
+  &:has(#bloggen) {
+    background-color: var(--ds-color-neutral-background-tinted);
+
+    [data-color-scheme='dark'] &,
+    [data-color-scheme='auto'] & {
+      background-color: var(--ds-color-neutral-background-default);
+    }
+  }
+
+  &:has(#komponenter) {
+    background-color: var(--ds-color-neutral-background-tinted);
+
+    [data-color-scheme='dark'] &,
+    [data-color-scheme='auto'] & {
+      background-color: var(--ds-color-neutral-background-default);
+    }
+  }
+
+  &:has(#menu-page-layout) {
+    & header {
+      [data-color-scheme='dark'] &,
+      [data-color-scheme='auto'] & {
+        background-color: var(--ds-color-neutral-background-default) !important;
+      }
+    }
+  }
+
+  &:has(#frontpage) {
+    header:first-of-type {
+      background-color: transparent;
+    }
+
+    .ds-logo-image img {
+      width: 85%;
+    }
+  }
+
+  &:has(#post-layout) {
+    header {
+      [data-color-scheme='dark'] &,
+      [data-color-scheme='auto'] & {
+        background-color: var(--ds-color-neutral-background-default) !important;
+      }
+    }
+  }
 }
 
 * {
diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
index befc8f3051..4764080cd3 100644
--- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
+++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -46,7 +46,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
           {banner.ingress && <BannerIngress>{banner.ingress}</BannerIngress>}
         </Banner>
       )}
-      <Container className={classes.page}>
+      <Container className={classes.page} id='menu-page-layout'>
         <div className={classes.left}>
           <SidebarMenu routerPath={pathname ?? ''} />
         </div>
@@ -79,16 +79,6 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
           </div>
         </main>
       </Container>
-      <style suppressHydrationWarning href='header'>
-        {`
-          header {
-            [data-color-scheme='dark'] &,
-            [data-color-scheme='auto'] & {
-              background-color: var(--ds-color-neutral-background-default) !important;
-            }
-          }
-        `}
-      </style>
     </div>
   );
 };