From e2c5816493ee8d02ecdac9c8189a536c71a61da9 Mon Sep 17 00:00:00 2001
From: Bram Borggreve <beeman@beeman.nl>
Date: Sun, 3 Dec 2023 07:46:46 +0000
Subject: [PATCH] fix: rework ui-header to not use external css modules

---
 .../src/lib/ui-header/ui-header.module.css    | 32 -------
 packages/core/src/lib/ui-header/ui-header.tsx | 54 +++++++----
 .../component-generator.spec.ts.snap          | 91 +++++++------------
 ...refixFileName__-header.module.css.template | 32 -------
 .../__prefixFileName__-header.tsx.template    | 56 ++++++++----
 .../components-generator.spec.ts.snap         | 91 +++++++------------
 .../theme-generator.spec.ts.snap              | 91 +++++++------------
 7 files changed, 170 insertions(+), 277 deletions(-)
 delete mode 100644 packages/core/src/lib/ui-header/ui-header.module.css
 delete mode 100644 packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template

diff --git a/packages/core/src/lib/ui-header/ui-header.module.css b/packages/core/src/lib/ui-header/ui-header.module.css
deleted file mode 100644
index 6b46067..0000000
--- a/packages/core/src/lib/ui-header/ui-header.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.header {
-  height: rem(56px);
-  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-}
-
-.inner {
-  height: rem(56px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.link {
-  display: block;
-  line-height: 1;
-  padding: rem(8px) rem(12px);
-  border-radius: var(--mantine-radius-sm);
-  text-decoration: none;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
-  font-size: var(--mantine-font-size-sm);
-  font-weight: 500;
-
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  }
-}
-.linkActive {
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
-}
diff --git a/packages/core/src/lib/ui-header/ui-header.tsx b/packages/core/src/lib/ui-header/ui-header.tsx
index b83003d..84bf0d4 100644
--- a/packages/core/src/lib/ui-header/ui-header.tsx
+++ b/packages/core/src/lib/ui-header/ui-header.tsx
@@ -1,10 +1,8 @@
-import { Anchor, Burger, Group } from '@mantine/core'
+import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core'
 import { ReactNode } from 'react'
-import cx from 'clsx'
 import { Link, useLocation } from 'react-router-dom'
 import { UiLogo, UiLogoType } from '../ui-logo'
-
-import classes from './ui-header.module.css'
+import { useUiColorScheme } from '../ui-theme'
 
 export interface UiHeaderProps {
   base?: string
@@ -21,23 +19,41 @@ export interface UiHeaderLink {
 }
 
 export function UiHeader({ base, links = [], logo, logoSmall, opened, profile, toggle }: UiHeaderProps) {
+  const { colorScheme } = useUiColorScheme()
+  const isDark = colorScheme === 'dark'
   const { pathname } = useLocation()
-  const items = links.map((link) => (
-    <Anchor
-      component={Link}
-      key={link.label}
-      to={link.link}
-      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
-    >
-      {link.label}
-    </Anchor>
-  ))
+  const items = links.map((link) => {
+    const active = pathname.startsWith(link.link)
+    const linkColor = isDark ? 'gray.4' : 'dark.8'
+    const activeLinkColor = isDark ? 'brand.6' : 'brand.4'
+
+    return (
+      <Anchor
+        component={Link}
+        key={link.label}
+        to={link.link}
+        display="block"
+        bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}
+        c={active ? activeLinkColor : linkColor}
+        fw={500}
+        fz={rem(14)}
+        lh={1}
+        p={`${rem(8)} ${rem(12)}`}
+        style={{
+          borderRadius: rem(4),
+          textDecoration: 'none',
+        }}
+      >
+        {link.label}
+      </Anchor>
+    )
+  })
 
   const burger = toggle ? <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" /> : null
 
   return (
-    <header className={classes.header}>
-      <div className={classes.inner}>
+    <Box component="header" px="md" h={rem(56)} bg={isDark ? 'dark.9' : 'white'}>
+      <Flex justify="space-between" align="center" style={{ height: rem(56) }}>
         <Group>
           <Group>
             {burger}
@@ -46,13 +62,13 @@ export function UiHeader({ base, links = [], logo, logoSmall, opened, profile, t
               <Group visibleFrom="md">{logo ?? <UiLogoType height={28} />}</Group>
             </Anchor>
           </Group>
-          <Group gap={5} className={classes.links} visibleFrom="md">
+          <Group gap={5} visibleFrom="md">
             {items}
           </Group>
         </Group>
 
         <Group>{profile}</Group>
-      </div>
-    </header>
+      </Flex>
+    </Box>
   )
 }
diff --git a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
index 8e67cd4..d85f02a 100644
--- a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
+++ b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
@@ -1328,58 +1328,13 @@ exports[`component generator should create files for header 1`] = `
         "isBinary": false,
         "path": "./test/index.ts",
       },
-      "ui-header.module.css": {
-        "content": [
-          ".header {",
-          "height: rem(56px);",
-          "background-color: light-dark(",
-          "var(--mantine-color-white),",
-          "var(--mantine-color-dark-9)",
-          ");",
-          "padding-left: var(--mantine-spacing-md);",
-          "padding-right: var(--mantine-spacing-md);",
-          "}",
-          ".inner {",
-          "height: rem(56px);",
-          "display: flex;",
-          "justify-content: space-between;",
-          "align-items: center;",
-          "}",
-          ".link {",
-          "display: block;",
-          "line-height: 1;",
-          "padding: rem(8px) rem(12px);",
-          "border-radius: var(--mantine-radius-sm);",
-          "text-decoration: none;",
-          "color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));",
-          "font-size: var(--mantine-font-size-sm);",
-          "font-weight: 500;",
-          "@mixin hover {",
-          "background-color: light-dark(",
-          "var(--mantine-color-gray-0),",
-          "var(--mantine-color-dark-6)",
-          ");",
-          "}",
-          "}",
-          ".linkActive {",
-          "background-color: light-dark(",
-          "var(--mantine-color-gray-0),",
-          "var(--mantine-color-dark-6)",
-          ");",
-          "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
-          "}",
-        ],
-        "isBinary": false,
-        "path": "./test/ui-header.module.css",
-      },
       "ui-header.tsx": {
         "content": [
-          "import { Anchor, Burger, Group } from '@mantine/core';",
+          "import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core';",
           "import { ReactNode } from 'react';",
-          "import cx from 'clsx';",
           "import { Link, useLocation } from 'react-router-dom';",
-          "import { UiLogo, UiLogoType } from '../ui-logo';",
-          "import classes from './ui-header.module.css';",
+          "import { UiLogo, UiLogoType } from '../-logo';",
+          "import { useUiColorScheme } from '../-theme';",
           "export interface UiHeaderProps {",
           "base?: string;",
           "logo?: ReactNode;",
@@ -1402,25 +1357,45 @@ exports[`component generator should create files for header 1`] = `
           "profile,",
           "toggle,",
           "}: UiHeaderProps) {",
+          "const { colorScheme } = useUiColorScheme();",
+          "const isDark = colorScheme === 'dark';",
           "const { pathname } = useLocation();",
-          "const items = links.map((link) => (",
+          "const items = links.map((link) => {",
+          "const active = pathname.startsWith(link.link);",
+          "const linkColor = isDark ? 'gray.4' : 'dark.8';",
+          "const activeLinkColor = isDark ? 'brand.6' : 'brand.4';",
+          "return (",
           "<Anchor",
           "component={Link}",
           "key={link.label}",
           "to={link.link}",
-          "className={cx(classes.link, {",
-          "[classes.linkActive]: pathname.startsWith(link.link),",
-          "})}",
+          "display="block"",
+          "bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}",
+          "c={active ? activeLinkColor : linkColor}",
+          "fw={500}",
+          "fz={rem(14)}",
+          "lh={1}",
+          "p={\`\${rem(8)} \${rem(12)}\`}",
+          "style={{",
+          "borderRadius: rem(4),",
+          "textDecoration: 'none',",
+          "}}",
           ">",
           "{link.label}",
           "</Anchor>",
-          "));",
+          ");",
+          "});",
           "const burger = toggle ? (",
           "<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" />",
           ") : null;",
           "return (",
-          "<header className={classes.header}>",
-          "<div className={classes.inner}>",
+          "<Box",
+          "component="header"",
+          "px="md"",
+          "h={rem(56)}",
+          "bg={isDark ? 'dark.9' : 'white'}",
+          ">",
+          "<Flex justify="space-between" align="center" style={{ height: rem(56) }}>",
           "<Group>",
           "<Group>",
           "{burger}",
@@ -1433,13 +1408,13 @@ exports[`component generator should create files for header 1`] = `
           "</Group>",
           "</Anchor>",
           "</Group>",
-          "<Group gap={5} className={classes.links} visibleFrom="md">",
+          "<Group gap={5} visibleFrom="md">",
           "{items}",
           "</Group>",
           "</Group>",
           "<Group>{profile}</Group>",
-          "</div>",
-          "</header>",
+          "</Flex>",
+          "</Box>",
           ");",
           "}",
         ],
diff --git a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template
deleted file mode 100644
index 6b46067..0000000
--- a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template
+++ /dev/null
@@ -1,32 +0,0 @@
-.header {
-  height: rem(56px);
-  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-}
-
-.inner {
-  height: rem(56px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.link {
-  display: block;
-  line-height: 1;
-  padding: rem(8px) rem(12px);
-  border-radius: var(--mantine-radius-sm);
-  text-decoration: none;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
-  font-size: var(--mantine-font-size-sm);
-  font-weight: 500;
-
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  }
-}
-.linkActive {
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
-}
diff --git a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template
index 718a536..84acf4b 100644
--- a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template
+++ b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.tsx.template
@@ -1,10 +1,8 @@
-import { Anchor, Burger, Group } from '@mantine/core'
+import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core'
 import { ReactNode } from 'react'
-import cx from 'clsx'
 import { Link, useLocation } from 'react-router-dom'
-import { <%= prefix.className %>Logo, <%= prefix.className %>LogoType } from '../<%= prefix.fileName %>-logo'
-
-import classes from './<%= prefix.fileName %>-header.module.css'
+import { <%= prefix.className %>Logo, <%= prefix.className %>LogoType } from '../<%= prefix.filenameName %>-logo'
+import { use<%= prefix.className %>ColorScheme } from '../<%= prefix.filenameName %>-theme'
 
 export interface <%= prefix.className %>HeaderProps {
   base?: string
@@ -21,23 +19,41 @@ export interface <%= prefix.className %>HeaderLink {
 }
 
 export function <%= prefix.className %>Header({ base, links = [], logo, logoSmall, opened, profile, toggle }: <%= prefix.className %>HeaderProps) {
+  const { colorScheme } = use<%= prefix.className %>ColorScheme()
+  const isDark = colorScheme === 'dark'
   const { pathname } = useLocation()
-  const items = links.map((link) => (
-    <Anchor
-      component={Link}
-      key={link.label}
-      to={link.link}
-      className={cx(classes.link, { [classes.linkActive]: pathname.startsWith(link.link) })}
-    >
-      {link.label}
-    </Anchor>
-  ))
+  const items = links.map((link) => {
+    const active = pathname.startsWith(link.link)
+    const linkColor = isDark ? 'gray.4' : 'dark.8'
+    const activeLinkColor = isDark ? 'brand.6' : 'brand.4'
+
+    return (
+      <Anchor
+        component={Link}
+        key={link.label}
+        to={link.link}
+        display="block"
+        bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}
+        c={active ? activeLinkColor : linkColor}
+        fw={500}
+        fz={rem(14)}
+        lh={1}
+        p={`${rem(8)} ${rem(12)}`}
+        style={{
+          borderRadius: rem(4),
+          textDecoration: 'none',
+        }}
+      >
+        {link.label}
+      </Anchor>
+    )
+  })
 
   const burger = toggle ? <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" /> : null
 
   return (
-    <header className={classes.header}>
-      <div className={classes.inner}>
+    <Box component="header" px="md" h={rem(56)} bg={isDark ? 'dark.9' : 'white'}>
+      <Flex justify="space-between" align="center" style={{ height: rem(56) }}>
         <Group>
           <Group>
             {burger}
@@ -46,13 +62,13 @@ export function <%= prefix.className %>Header({ base, links = [], logo, logoSmal
               <Group visibleFrom="md">{logo ?? <<%= prefix.className %>LogoType height={28} />}</Group>
             </Anchor>
           </Group>
-          <Group gap={5} className={classes.links} visibleFrom="md">
+          <Group gap={5} visibleFrom="md">
             {items}
           </Group>
         </Group>
 
         <Group>{profile}</Group>
-      </div>
-    </header>
+      </Flex>
+    </Box>
   )
 }
diff --git a/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap b/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
index d656b6c..7327d5e 100644
--- a/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
+++ b/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
@@ -927,58 +927,13 @@ exports[`components generator should run successfully 1`] = `
             "isBinary": false,
             "path": "./test/ui-header/index.ts",
           },
-          "ui-header.module.css": {
-            "content": [
-              ".header {",
-              "height: rem(56px);",
-              "background-color: light-dark(",
-              "var(--mantine-color-white),",
-              "var(--mantine-color-dark-9)",
-              ");",
-              "padding-left: var(--mantine-spacing-md);",
-              "padding-right: var(--mantine-spacing-md);",
-              "}",
-              ".inner {",
-              "height: rem(56px);",
-              "display: flex;",
-              "justify-content: space-between;",
-              "align-items: center;",
-              "}",
-              ".link {",
-              "display: block;",
-              "line-height: 1;",
-              "padding: rem(8px) rem(12px);",
-              "border-radius: var(--mantine-radius-sm);",
-              "text-decoration: none;",
-              "color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));",
-              "font-size: var(--mantine-font-size-sm);",
-              "font-weight: 500;",
-              "@mixin hover {",
-              "background-color: light-dark(",
-              "var(--mantine-color-gray-0),",
-              "var(--mantine-color-dark-6)",
-              ");",
-              "}",
-              "}",
-              ".linkActive {",
-              "background-color: light-dark(",
-              "var(--mantine-color-gray-0),",
-              "var(--mantine-color-dark-6)",
-              ");",
-              "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
-              "}",
-            ],
-            "isBinary": false,
-            "path": "./test/ui-header/ui-header.module.css",
-          },
           "ui-header.tsx": {
             "content": [
-              "import { Anchor, Burger, Group } from '@mantine/core';",
+              "import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core';",
               "import { ReactNode } from 'react';",
-              "import cx from 'clsx';",
               "import { Link, useLocation } from 'react-router-dom';",
-              "import { UiLogo, UiLogoType } from '../ui-logo';",
-              "import classes from './ui-header.module.css';",
+              "import { UiLogo, UiLogoType } from '../-logo';",
+              "import { useUiColorScheme } from '../-theme';",
               "export interface UiHeaderProps {",
               "base?: string;",
               "logo?: ReactNode;",
@@ -1001,25 +956,45 @@ exports[`components generator should run successfully 1`] = `
               "profile,",
               "toggle,",
               "}: UiHeaderProps) {",
+              "const { colorScheme } = useUiColorScheme();",
+              "const isDark = colorScheme === 'dark';",
               "const { pathname } = useLocation();",
-              "const items = links.map((link) => (",
+              "const items = links.map((link) => {",
+              "const active = pathname.startsWith(link.link);",
+              "const linkColor = isDark ? 'gray.4' : 'dark.8';",
+              "const activeLinkColor = isDark ? 'brand.6' : 'brand.4';",
+              "return (",
               "<Anchor",
               "component={Link}",
               "key={link.label}",
               "to={link.link}",
-              "className={cx(classes.link, {",
-              "[classes.linkActive]: pathname.startsWith(link.link),",
-              "})}",
+              "display="block"",
+              "bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}",
+              "c={active ? activeLinkColor : linkColor}",
+              "fw={500}",
+              "fz={rem(14)}",
+              "lh={1}",
+              "p={\`\${rem(8)} \${rem(12)}\`}",
+              "style={{",
+              "borderRadius: rem(4),",
+              "textDecoration: 'none',",
+              "}}",
               ">",
               "{link.label}",
               "</Anchor>",
-              "));",
+              ");",
+              "});",
               "const burger = toggle ? (",
               "<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" />",
               ") : null;",
               "return (",
-              "<header className={classes.header}>",
-              "<div className={classes.inner}>",
+              "<Box",
+              "component="header"",
+              "px="md"",
+              "h={rem(56)}",
+              "bg={isDark ? 'dark.9' : 'white'}",
+              ">",
+              "<Flex justify="space-between" align="center" style={{ height: rem(56) }}>",
               "<Group>",
               "<Group>",
               "{burger}",
@@ -1032,13 +1007,13 @@ exports[`components generator should run successfully 1`] = `
               "</Group>",
               "</Anchor>",
               "</Group>",
-              "<Group gap={5} className={classes.links} visibleFrom="md">",
+              "<Group gap={5} visibleFrom="md">",
               "{items}",
               "</Group>",
               "</Group>",
               "<Group>{profile}</Group>",
-              "</div>",
-              "</header>",
+              "</Flex>",
+              "</Box>",
               ");",
               "}",
             ],
diff --git a/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap b/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
index 4114dd5..aee6cdf 100644
--- a/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
+++ b/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
@@ -1096,58 +1096,13 @@ exports[`theme generator should run successfully 1`] = `
                         "isBinary": false,
                         "path": "./test-target/src/app/ui/ui-header/index.ts",
                       },
-                      "ui-header.module.css": {
-                        "content": [
-                          ".header {",
-                          "height: rem(56px);",
-                          "background-color: light-dark(",
-                          "var(--mantine-color-white),",
-                          "var(--mantine-color-dark-9)",
-                          ");",
-                          "padding-left: var(--mantine-spacing-md);",
-                          "padding-right: var(--mantine-spacing-md);",
-                          "}",
-                          ".inner {",
-                          "height: rem(56px);",
-                          "display: flex;",
-                          "justify-content: space-between;",
-                          "align-items: center;",
-                          "}",
-                          ".link {",
-                          "display: block;",
-                          "line-height: 1;",
-                          "padding: rem(8px) rem(12px);",
-                          "border-radius: var(--mantine-radius-sm);",
-                          "text-decoration: none;",
-                          "color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));",
-                          "font-size: var(--mantine-font-size-sm);",
-                          "font-weight: 500;",
-                          "@mixin hover {",
-                          "background-color: light-dark(",
-                          "var(--mantine-color-gray-0),",
-                          "var(--mantine-color-dark-6)",
-                          ");",
-                          "}",
-                          "}",
-                          ".linkActive {",
-                          "background-color: light-dark(",
-                          "var(--mantine-color-gray-0),",
-                          "var(--mantine-color-dark-6)",
-                          ");",
-                          "color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));",
-                          "}",
-                        ],
-                        "isBinary": false,
-                        "path": "./test-target/src/app/ui/ui-header/ui-header.module.css",
-                      },
                       "ui-header.tsx": {
                         "content": [
-                          "import { Anchor, Burger, Group } from '@mantine/core';",
+                          "import { Anchor, Box, Burger, Flex, Group, rem } from '@mantine/core';",
                           "import { ReactNode } from 'react';",
-                          "import cx from 'clsx';",
                           "import { Link, useLocation } from 'react-router-dom';",
-                          "import { UiLogo, UiLogoType } from '../ui-logo';",
-                          "import classes from './ui-header.module.css';",
+                          "import { UiLogo, UiLogoType } from '../-logo';",
+                          "import { useUiColorScheme } from '../-theme';",
                           "export interface UiHeaderProps {",
                           "base?: string;",
                           "logo?: ReactNode;",
@@ -1170,25 +1125,45 @@ exports[`theme generator should run successfully 1`] = `
                           "profile,",
                           "toggle,",
                           "}: UiHeaderProps) {",
+                          "const { colorScheme } = useUiColorScheme();",
+                          "const isDark = colorScheme === 'dark';",
                           "const { pathname } = useLocation();",
-                          "const items = links.map((link) => (",
+                          "const items = links.map((link) => {",
+                          "const active = pathname.startsWith(link.link);",
+                          "const linkColor = isDark ? 'gray.4' : 'dark.8';",
+                          "const activeLinkColor = isDark ? 'brand.6' : 'brand.4';",
+                          "return (",
                           "<Anchor",
                           "component={Link}",
                           "key={link.label}",
                           "to={link.link}",
-                          "className={cx(classes.link, {",
-                          "[classes.linkActive]: pathname.startsWith(link.link),",
-                          "})}",
+                          "display="block"",
+                          "bg={active ? (isDark ? 'dark.6' : 'gray.0') : 'transparent'}",
+                          "c={active ? activeLinkColor : linkColor}",
+                          "fw={500}",
+                          "fz={rem(14)}",
+                          "lh={1}",
+                          "p={\`\${rem(8)} \${rem(12)}\`}",
+                          "style={{",
+                          "borderRadius: rem(4),",
+                          "textDecoration: 'none',",
+                          "}}",
                           ">",
                           "{link.label}",
                           "</Anchor>",
-                          "));",
+                          ");",
+                          "});",
                           "const burger = toggle ? (",
                           "<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="md" />",
                           ") : null;",
                           "return (",
-                          "<header className={classes.header}>",
-                          "<div className={classes.inner}>",
+                          "<Box",
+                          "component="header"",
+                          "px="md"",
+                          "h={rem(56)}",
+                          "bg={isDark ? 'dark.9' : 'white'}",
+                          ">",
+                          "<Flex justify="space-between" align="center" style={{ height: rem(56) }}>",
                           "<Group>",
                           "<Group>",
                           "{burger}",
@@ -1201,13 +1176,13 @@ exports[`theme generator should run successfully 1`] = `
                           "</Group>",
                           "</Anchor>",
                           "</Group>",
-                          "<Group gap={5} className={classes.links} visibleFrom="md">",
+                          "<Group gap={5} visibleFrom="md">",
                           "{items}",
                           "</Group>",
                           "</Group>",
                           "<Group>{profile}</Group>",
-                          "</div>",
-                          "</header>",
+                          "</Flex>",
+                          "</Box>",
                           ");",
                           "}",
                         ],