remove all style tags

digdir · Mar 5, 2025 · c435a57 · c435a57
1 parent 9340c53
commit c435a57
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 90 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };