From a3225bbc448c7af953ce4f1edf5ee21d56e2d67b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Wed, 11 Dec 2024 13:39:06 +0100
Subject: [PATCH] chore: some themebuilder fixes (#2879)

Header:
* Add `temabygger` to the menu on both designsystemet.no and
theme.designsystemet.no
* Make the menu be the same both places.
* Added a new prop `logoLink` so it can be linked to designsystemet.no
from the themebuilder

Front page:
* Fix some colors on the front page when switching themes on the
previews
* Add description text
* Make documentation button link to designsystemet.no/eget-tema.

Theme-name page
*  Add text
* Change layout to be more in line with the rest of the design with
tabs. Will look at flow a bit later.

Color page:
* Change FAIL tag to DECO after feedback.

Radius page:
* Add a message that tells the user that this will not be available with
the CLI yet.

Sidebar:
* Made it a bit more responsive
---
 .../src/Container/Container.module.css        |  2 +-
 apps/_components/src/Header/Header.tsx        |  4 +-
 apps/storefront/app/layout.tsx                |  4 +-
 apps/theme/app/globals.css                    | 18 +++-
 apps/theme/app/layout.tsx                     | 34 +++++--
 apps/theme/app/page.module.css                |  2 +-
 apps/theme/app/page.tsx                       | 23 +++--
 apps/theme/app/themebuilder/page.module.css   | 18 ----
 apps/theme/app/themebuilder/page.tsx          | 71 +++++---------
 apps/theme/app/welcome/page.module.css        | 26 ++---
 apps/theme/app/welcome/page.tsx               | 56 +++++++++--
 .../ColorContrasts/ColorContrasts.tsx         |  4 +-
 .../theme/components/Header/Header.module.css | 17 ++++
 apps/theme/components/Header/Header.tsx       | 44 +++++++++
 .../components/Previews/Previews.module.css   | 28 +-----
 apps/theme/components/Previews/Previews.tsx   | 97 ++++++-------------
 .../components/Previews/Theme1/Theme1.tsx     |  3 +
 .../Sidebar/ColorPage/ColorPage.module.css    |  1 -
 .../Sidebar/ColorPage/ColorPage.tsx           | 18 +---
 .../Sidebar/ColorPane/ColorPane.module.css    |  1 +
 .../Sidebar/RadiusPage/RadiusPage.module.css  | 12 +--
 .../Sidebar/RadiusPage/RadiusPage.tsx         | 22 +----
 .../components/Sidebar/Sidebar.module.css     | 17 ++--
 apps/theme/components/Sidebar/Sidebar.tsx     | 49 +---------
 .../theme/components/Toggle/Toggle.module.css |  2 +-
 .../ToggleChip/ToggleChip.module.css          | 31 ++++++
 .../components/ToggleChip/ToggleChip.tsx      | 41 ++++++++
 apps/theme/components/index.ts                |  2 +
 28 files changed, 346 insertions(+), 301 deletions(-)
 create mode 100644 apps/theme/components/Header/Header.module.css
 create mode 100644 apps/theme/components/Header/Header.tsx
 create mode 100644 apps/theme/components/ToggleChip/ToggleChip.module.css
 create mode 100644 apps/theme/components/ToggleChip/ToggleChip.tsx

diff --git a/apps/_components/src/Container/Container.module.css b/apps/_components/src/Container/Container.module.css
index 503558b48c..dab0853570 100644
--- a/apps/_components/src/Container/Container.module.css
+++ b/apps/_components/src/Container/Container.module.css
@@ -1,5 +1,5 @@
 .container {
-  max-width: var(--grid-max-width, 1450px);
+  max-width: var(--grid-max-width, 1500px);
   margin: 0 auto;
   width: 100%;
   padding-left: var(--grid-padding, 16px);
diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
index 85b429bbaa..9fe920f1ac 100644
--- a/apps/_components/src/Header/Header.tsx
+++ b/apps/_components/src/Header/Header.tsx
@@ -27,6 +27,7 @@ type HeaderProps = {
   skipLink?: boolean;
   themeSwitcher?: boolean;
   transparentBackground?: boolean;
+  logoLink?: string;
 };
 
 /**
@@ -65,6 +66,7 @@ const Header = ({
   skipLink = true,
   themeSwitcher = false,
   transparentBackground = false,
+  logoLink = '/',
 }: HeaderProps) => {
   const [open, setOpen] = useState(false);
   const [isHamburger, setIsHamburger] = useState(false);
@@ -120,7 +122,7 @@ const Header = ({
           <div className={classes.logoContainer}>
             <Link
               className={cl(classes.logoLink, 'ds-focus')}
-              href='/'
+              href={logoLink}
               aria-label='Designsystem forside'
               onClick={() => setOpen(false)}
               prefetch={false}
diff --git a/apps/storefront/app/layout.tsx b/apps/storefront/app/layout.tsx
index 967424b94a..78462668b0 100644
--- a/apps/storefront/app/layout.tsx
+++ b/apps/storefront/app/layout.tsx
@@ -47,10 +47,10 @@ const menu = [
     name: 'Komponenter',
     href: '/komponenter',
   },
-  /* {
+  {
     name: 'Temabygger',
     href: 'https://next.theme.designsystemet.no',
-  }, */
+  },
 ];
 
 const centerLinks = [
diff --git a/apps/theme/app/globals.css b/apps/theme/app/globals.css
index cf2706bcd8..c2a5248be8 100644
--- a/apps/theme/app/globals.css
+++ b/apps/theme/app/globals.css
@@ -35,14 +35,28 @@ code {
   --ds-color-accent-base-default: #740c7e;
   --ds-color-accent-text-subtle: #93429b;
   --ds-color-base-default: #740c7e;
-  --ds-color-accent-surface-hover: #6c0b75 !important;
+  --ds-color-base-hover: #872d90;
+  --ds-color-base-active: #97499f;
+  --ds-color-accent-surface-default: #ecdded;
+  --ds-color-accent-surface-hover: #e0cae3;
+  --ds-color-accent-surface-active: #d6b7d9;
+  --ds-color-accent-border-subtle: #d2b0d5;
+  --ds-color-accent-border-default: #a867af;
+  --ds-color-accent-text-default: #4f0856;
 }
 
 [data-color-scheme='dark'][data-theme='two'] {
   --ds-color-accent-base-default: #c79dcb;
   --ds-color-accent-text-subtle: #c294c6;
   --ds-color-base-default: #c79dcb;
-  --ds-color-accent-surface-hover: #6c0b75 !important;
+  --ds-color-base-hover: #b884be;
+  --ds-color-base-active: #aa6ab0;
+  --ds-color-accent-surface-default: #56095e;
+  --ds-color-accent-surface-hover: #6c0b75;
+  --ds-color-accent-surface-active: #7e1e87;
+  --ds-color-accent-border-subtle: #84298d;
+  --ds-color-accent-border-default: #a664ad;
+  --ds-color-accent-text-default: #ecdded;
 }
 
 .panelContainer {
diff --git a/apps/theme/app/layout.tsx b/apps/theme/app/layout.tsx
index 8c6f3ca838..ea6a675ca2 100644
--- a/apps/theme/app/layout.tsx
+++ b/apps/theme/app/layout.tsx
@@ -15,13 +15,29 @@ export const metadata: Metadata = {
 };
 
 const menu = [
-  /* {
-    name: 'Fargevelger',
-    href: '/',
-  }, */
   {
-    name: 'Slik bruker du verktøyet',
-    href: '/slik-bruker-du-verktoyet',
+    name: 'Grunnleggende',
+    href: 'https://www.designsystemet.no/grunnleggende',
+  },
+  {
+    name: 'God praksis',
+    href: 'https://www.designsystemet.no/god-praksis',
+  },
+  {
+    name: 'Mønstre',
+    href: 'https://www.designsystemet.no/monstre',
+  },
+  {
+    name: 'Bloggen',
+    href: 'https://www.designsystemet.no/bloggen',
+  },
+  {
+    name: 'Komponenter',
+    href: 'https://www.designsystemet.no/komponenter',
+  },
+  {
+    name: 'Temabygger',
+    href: '/',
   },
 ];
 
@@ -72,7 +88,11 @@ export default function RootLayout({
     <html lang='no'>
       <body>
         <ThemeWrapper>
-          <Header menu={menu} betaTag transparentBackground={true} />
+          <Header
+            menu={menu}
+            transparentBackground
+            logoLink='https://www.designsystemet.no/'
+          />
           <div className='content'>{children}</div>
           <Footer centerLinks={centerLinks} rightLinks={rightLinks} />
         </ThemeWrapper>
diff --git a/apps/theme/app/page.module.css b/apps/theme/app/page.module.css
index 251eeb94fd..830434d337 100644
--- a/apps/theme/app/page.module.css
+++ b/apps/theme/app/page.module.css
@@ -20,7 +20,7 @@ div[data-color-scheme='dark'][data-theme='two'] .main {
   width: 600px;
   margin: 0 auto;
   text-align: center;
-  margin-top: var(--ds-spacing-2);
+  margin-top: var(--ds-spacing-8);
 }
 
 .heading {
diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx
index 2502a717c4..631bc8344d 100644
--- a/apps/theme/app/page.tsx
+++ b/apps/theme/app/page.tsx
@@ -33,8 +33,7 @@ export default function Home() {
   const pathname = usePathname();
   const params = new URLSearchParams(searchParams);
   const colorModalRef = useRef<HTMLDialogElement>(null);
-  const addColor = useThemeStore((state) => state.addColor);
-  const resetColors = useThemeStore((state) => state.resetColors);
+  const setPreviewTheme = useThemeStore((state) => state.setThemePreview);
 
   useEffect(() => {
     // Open modal on selected color change
@@ -166,26 +165,30 @@ export default function Home() {
       <main className={classes.main}>
         <Container>
           <div className={classes.header}>
-            <Paragraph data-size='lg'>Designsystemet sin Temabygger</Paragraph>
+            <Paragraph data-size='lg'>Designsystemet sin temabygger</Paragraph>
             <Heading data-size='xl' className={classes.heading}>
               Sett i gang med å bygge ditt
               <span className={classes.headerText}> eget tema</span>
             </Heading>
             <Paragraph data-size='md' variant='long' className={classes.desc}>
-              Far compensation times than my client our too it a now, hero's
-              been rationale perfecting which towards absolutely fellow at on
-              variety
+              Skal du ta i bruk Designsystemet i din egen organisasjon med dine
+              egne profilfarger og preferanser? Temabyggeren hjelper deg i gang.
             </Paragraph>
             <div className={classes.btnGroup}>
               <Button data-color='neutral' asChild>
-                <NextLink href='/welcome'>
+                <NextLink
+                  href='/welcome'
+                  onClick={() => setPreviewTheme('one')}
+                >
                   <PaletteIcon title='a11y-title' fontSize='1.5rem' />
                   Bygg tema
                 </NextLink>
               </Button>
-              <Button data-color='neutral' variant='secondary'>
-                <BookIcon title='a11y-title' fontSize='1.5rem' />
-                Dokumentasjon
+              <Button data-color='neutral' variant='secondary' asChild>
+                <NextLink href='https://www.designsystemet.no/grunnleggende/for-designere/eget-tema'>
+                  <BookIcon title='a11y-title' fontSize='1.5rem' />
+                  Dokumentasjon
+                </NextLink>
               </Button>
             </div>
           </div>
diff --git a/apps/theme/app/themebuilder/page.module.css b/apps/theme/app/themebuilder/page.module.css
index ba05dd04b5..8034434042 100644
--- a/apps/theme/app/themebuilder/page.module.css
+++ b/apps/theme/app/themebuilder/page.module.css
@@ -2,16 +2,6 @@
   position: relative;
 }
 
-.header {
-  background-color: rgb(226, 226, 226);
-  padding: 40px;
-  height: 200px;
-  display: flex;
-  gap: 32px;
-  flex-direction: column;
-  justify-content: center;
-}
-
 .content {
   padding: 40px;
   width: calc(100% - 550px);
@@ -43,14 +33,6 @@
   max-width: 1390px;
 }
 
-.backLink {
-  color: var(--ds-color-accent-text-default);
-  margin-left: -4px;
-  display: inline-flex;
-  width: auto;
-  align-self: flex-start;
-}
-
 .hide {
   display: none;
 }
diff --git a/apps/theme/app/themebuilder/page.tsx b/apps/theme/app/themebuilder/page.tsx
index a9a058cfd6..79c7ddacc0 100644
--- a/apps/theme/app/themebuilder/page.tsx
+++ b/apps/theme/app/themebuilder/page.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import type { ColorMode } from '@digdir/designsystemet';
-import { Heading, Link, Tabs } from '@digdir/designsystemet-react';
-import { ChevronLeftIcon } from '@navikt/aksel-icons';
-import NextLink from 'next/link';
+import { Heading } from '@digdir/designsystemet-react';
+
 import { useRouter } from 'next/navigation';
 import {
   BorderRadius,
@@ -11,7 +10,9 @@ import {
   ColorPreview,
   ColorTokens,
   Colors,
+  Header,
   Sidebar,
+  ToggleChip,
 } from '../../components';
 import { Toggle } from '../../components/Toggle/Toggle';
 import { useThemeStore } from '../../store';
@@ -19,70 +20,46 @@ import { useThemeParams } from './_utils/useThemeParams';
 import classes from './page.module.css';
 
 export default function Home() {
-  const colors = useThemeStore((state) => state.colors);
-  const appearance = useThemeStore((state) => state.appearance);
   const setActivePage = useThemeStore((state) => state.setActivePage);
   const router = useRouter();
   const activePage = useThemeStore((state) => state.activePage);
   const setAppearance = useThemeStore((state) => state.setAppearance);
+  const items = [
+    {
+      name: 'Navn på tema',
+      value: 'intro',
+    },
+    {
+      name: 'Farger',
+      value: 'colors',
+    },
+    {
+      name: 'Border radius',
+      value: 'radius',
+    },
+  ];
 
   /* For theme params */
   useThemeParams();
 
-  type TestProps = 'light' | 'dark';
-
-  const setHeaderColor = () => {
-    let themeMode: TestProps = 'light';
-    if (colors.main.length === 0) {
-      return '#D9D9D9';
-    }
-    if (appearance === 'dark') {
-      themeMode = 'dark';
-    }
-    const str = colors.main[0].colors[themeMode][3].hex;
-    if (colors.main.length > 1) {
-      return (
-        'linear-gradient(90deg, ' +
-        colors.main[0].colors[themeMode][3].hex +
-        ' 0%, ' +
-        colors.main[1].colors[themeMode][3].hex +
-        ' 60%)'
-      );
-    }
-    return str;
-  };
-
   return (
     <div className={classes.page} id='preview'>
-      <div className={classes.header} style={{ background: setHeaderColor() }}>
-        <Link data-size='sm' className={classes.backLink} asChild>
-          <NextLink href='/'>
-            <ChevronLeftIcon title='a11y-title' fontSize='1.5rem' />
-            Gå tilbake til forsiden
-          </NextLink>
-        </Link>
-        <Heading data-size='md'>Temabygger</Heading>
-      </div>
+      <Header />
       <div className={classes.container}>
         <div className={classes.content}>
           <div className={classes.top}>
-            <Tabs
-              data-size='sm'
-              defaultValue='colors'
+            <ToggleChip
+              defaultValue={activePage}
+              items={items}
               onChange={(e) => {
+                console.log(e);
                 if (e === 'intro') {
                   router.push('/welcome');
                 } else {
                   setActivePage(e as 'colors' | 'radius' | 'intro');
                 }
               }}
-            >
-              <Tabs.List>
-                <Tabs.Tab value='intro'>Navn på tema</Tabs.Tab>
-                <Tabs.Tab value='colors'>Farger</Tabs.Tab>
-                <Tabs.Tab value='radius'>Border radius</Tabs.Tab>
-              </Tabs.List>
-            </Tabs>
+            />
 
             <div className={classes.themeMode}>
               <div className={classes.group}>
diff --git a/apps/theme/app/welcome/page.module.css b/apps/theme/app/welcome/page.module.css
index 7097e2a76d..7a8cb013b8 100644
--- a/apps/theme/app/welcome/page.module.css
+++ b/apps/theme/app/welcome/page.module.css
@@ -1,30 +1,32 @@
 .page {
   height: calc(100vh - 100px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .card {
-  width: 550px;
-  border: 1px solid var(--ds-color-neutral-border-subtle);
-  padding: 48px;
-  border-radius: 16px;
-  margin-top: -50px;
+  width: 620px;
+  flex-direction: column;
+  margin-left: 40px;
+  margin-top: 32px;
+  border-radius: 8px;
 }
 
 .heading {
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .paragraph {
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
 .btn {
-  margin-top: 40px;
+  display: inline-flex;
 }
 
 .textfield {
-  margin-top: 24px;
+  margin-bottom: 32px;
+  width: 320px;
+}
+
+.tabs {
+  padding: 40px 40px 0 40px;
 }
diff --git a/apps/theme/app/welcome/page.tsx b/apps/theme/app/welcome/page.tsx
index bd62fb2276..9c47230dfd 100644
--- a/apps/theme/app/welcome/page.tsx
+++ b/apps/theme/app/welcome/page.tsx
@@ -7,29 +7,60 @@ import {
   Textfield,
 } from '@digdir/designsystemet-react';
 import NextLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Header, ToggleChip } from '../../components';
 import { useThemeStore } from '../../store';
 import classes from './page.module.css';
 
 export default function Welcome() {
   const themeName = useThemeStore((state) => state.themeName);
   const setThemeName = useThemeStore((state) => state.setThemeName);
-
+  const router = useRouter();
+  const setActivePage = useThemeStore((state) => state.setActivePage);
+  const items = [
+    {
+      name: 'Navn på tema',
+      value: 'intro',
+    },
+    {
+      name: 'Farger',
+      value: 'colors',
+    },
+    {
+      name: 'Border radius',
+      value: 'radius',
+    },
+  ];
   return (
     <div className={classes.page}>
+      <Header />
+      <div className={classes.tabs}>
+        <ToggleChip
+          items={items}
+          defaultValue='intro'
+          onChange={(e) => {
+            if (e === 'colors') {
+              setActivePage('colors');
+              router.push('/themebuilder');
+            } else if (e === 'radius') {
+              setActivePage('radius');
+              router.push('/themebuilder');
+            }
+          }}
+        />
+      </div>
       <div className={classes.card}>
-        <Heading data-size='md' className={classes.heading}>
-          Velkommen til Temabyggeren
+        <Heading data-size='sm' className={classes.heading} id='themeName'>
+          Gi temaet ditt et navn
         </Heading>
         <Paragraph className={classes.paragraph}>
-          Todo: General intro the the theme builder and set expectations
-        </Paragraph>
-        <Paragraph className={classes.paragraph}>
-          Todo: Say what the name does and how it effects the user
+          Navnet bør representere virksomheten eller produktet du skal
+          profilere.
         </Paragraph>
 
         <Textfield
           className={classes.textfield}
-          label='Navn på tema'
+          aria-labelledby='themeName'
           value={themeName}
           data-size='md'
           onChange={(e) => {
@@ -43,7 +74,14 @@ export default function Welcome() {
         />
 
         <Button asChild className={classes.btn}>
-          <NextLink href='/themebuilder'>Gå videre til farger</NextLink>
+          <NextLink
+            href='/themebuilder'
+            onClick={() => {
+              setActivePage('colors');
+            }}
+          >
+            Gå videre til farger
+          </NextLink>
         </Button>
       </div>
     </div>
diff --git a/apps/theme/components/ColorContrasts/ColorContrasts.tsx b/apps/theme/components/ColorContrasts/ColorContrasts.tsx
index 7359bf08c3..d18e8beb8e 100644
--- a/apps/theme/components/ColorContrasts/ColorContrasts.tsx
+++ b/apps/theme/components/ColorContrasts/ColorContrasts.tsx
@@ -89,7 +89,7 @@ export const ColorContrasts = () => {
     let type = 'AAA';
 
     if (contrast < 3) {
-      type = 'FAIL';
+      type = 'DECO';
     } else if (contrast < 4.5) {
       type = 'AA18';
     } else if (contrast < 7) {
@@ -161,7 +161,7 @@ export const ColorContrasts = () => {
             </Paragraph>
           </div>
           <div className={classes.tagGroup}>
-            <div className={cl(classes.tag, classes.FAIL)}>FAIL</div>
+            <div className={cl(classes.tag, classes.FAIL)}>DECO</div>
             <Paragraph data-size='sm'>
               Oppfyller ingen kontrastkrav i WCAG og bør kun brukes til
               dekorative formål.
diff --git a/apps/theme/components/Header/Header.module.css b/apps/theme/components/Header/Header.module.css
new file mode 100644
index 0000000000..f2d8394e0b
--- /dev/null
+++ b/apps/theme/components/Header/Header.module.css
@@ -0,0 +1,17 @@
+.header {
+  background-color: rgb(226, 226, 226);
+  padding: 40px;
+  height: 200px;
+  display: flex;
+  gap: 32px;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.backLink {
+  color: var(--ds-color-accent-text-default);
+  margin-left: -4px;
+  display: inline-flex;
+  width: auto;
+  align-self: flex-start;
+}
diff --git a/apps/theme/components/Header/Header.tsx b/apps/theme/components/Header/Header.tsx
new file mode 100644
index 0000000000..9ce040a8f3
--- /dev/null
+++ b/apps/theme/components/Header/Header.tsx
@@ -0,0 +1,44 @@
+import { Heading, Link } from '@digdir/designsystemet-react';
+import { ChevronLeftIcon } from '@navikt/aksel-icons';
+import NextLink from 'next/link';
+import { useThemeStore } from '../../store';
+import classes from './Header.module.css';
+
+export const Header = () => {
+  const colors = useThemeStore((state) => state.colors);
+  const appearance = useThemeStore((state) => state.appearance);
+  type TestProps = 'light' | 'dark';
+
+  const setHeaderColor = () => {
+    let themeMode: TestProps = 'light';
+    if (colors.main.length === 0) {
+      return '#D9D9D9';
+    }
+    if (appearance === 'dark') {
+      themeMode = 'dark';
+    }
+    const str = colors.main[0].colors[themeMode][3].hex;
+    if (colors.main.length > 1) {
+      return (
+        'linear-gradient(90deg, ' +
+        colors.main[0].colors[themeMode][3].hex +
+        ' 0%, ' +
+        colors.main[1].colors[themeMode][3].hex +
+        ' 60%)'
+      );
+    }
+    return str;
+  };
+
+  return (
+    <div className={classes.header} style={{ background: setHeaderColor() }}>
+      <Link data-size='sm' className={classes.backLink} asChild>
+        <NextLink href='/'>
+          <ChevronLeftIcon title='a11y-title' fontSize='1.5rem' />
+          Gå tilbake til forsiden
+        </NextLink>
+      </Link>
+      <Heading data-size='md'>Temabygger</Heading>
+    </div>
+  );
+};
diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css
index 20a9e76db1..ddf8d77ec8 100644
--- a/apps/theme/components/Previews/Previews.module.css
+++ b/apps/theme/components/Previews/Previews.module.css
@@ -2,33 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 32px 0 24px;
-}
-
-.menu {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.menuItem {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  padding: 9px 14px;
-  border-radius: 500px;
-  border: none;
-  background-color: transparent;
-  color: var(--ds-color-accent-text-default);
-}
-
-.menuItem:hover {
-  cursor: pointer;
-  background-color: var(--ds-color-accent-surface-hover);
-}
-
-.menuItemActive {
-  background-color: var(--ds-color-accent-surface-hover);
+  margin: 36px 0 24px;
 }
 
 .menuItem[aria-disabled] {
diff --git a/apps/theme/components/Previews/Previews.tsx b/apps/theme/components/Previews/Previews.tsx
index e4f2fe6cf8..4d5589c017 100644
--- a/apps/theme/components/Previews/Previews.tsx
+++ b/apps/theme/components/Previews/Previews.tsx
@@ -1,88 +1,53 @@
 'use client';
 
-import type { ColorMode } from '@digdir/designsystemet/color';
 import cl from 'clsx/lite';
 import { useThemeStore } from '../../store';
 
+import { ToggleChip } from '../ToggleChip/ToggleChip';
 import classes from './Previews.module.css';
 import { Theme1 } from './Theme1/Theme1';
 
-type PreviewsProps = {
-  themeMode: ColorMode;
-  onThemeModeChange: (themeMode: ColorMode) => void;
-};
-
 export const Previews = () => {
-  const theme = useThemeStore((state) => state.themePreview);
-  const appearance = useThemeStore((state) => state.appearance);
   const setTheme = useThemeStore((state) => state.setThemePreview);
   const setAppearance = useThemeStore((state) => state.setAppearance);
+  const items = [
+    {
+      name: 'Tema 1 lys',
+      value: 'one-light',
+    },
+    {
+      name: 'Tema 1 mørk',
+      value: 'one-dark',
+    },
+    {
+      name: 'Tema 2 lys',
+      value: 'two-light',
+    },
+    {
+      name: 'Tema 2 mørk',
+      value: 'two-dark',
+    },
+  ];
 
   return (
     <>
       <div className={classes.toolbar}>
-        <div className={classes.menu}>
-          <button
-            className={cl(
-              classes.menuItem,
-              'ds-focus',
-              theme === 'one' &&
-                appearance === 'light' &&
-                classes.menuItemActive,
-            )}
-            onClick={() => {
-              setTheme('one');
-              setAppearance('light');
-            }}
-          >
-            Tema 1 lys
-          </button>
-          <button
-            className={cl(
-              classes.menuItem,
-              'ds-focus',
-              theme === 'one' &&
-                appearance === 'dark' &&
-                classes.menuItemActive,
-            )}
-            onClick={() => {
+        <ToggleChip
+          items={items}
+          onChange={(e) => {
+            if (e.includes('one')) {
               setTheme('one');
-              setAppearance('dark');
-            }}
-          >
-            Tema 1 mørk
-          </button>
-          <button
-            className={cl(
-              classes.menuItem,
-              'ds-focus',
-              theme === 'two' &&
-                appearance === 'light' &&
-                classes.menuItemActive,
-            )}
-            onClick={() => {
+            } else if (e.includes('two')) {
               setTheme('two');
+            }
+
+            if (e.includes('light')) {
               setAppearance('light');
-            }}
-          >
-            Tema 2 lys
-          </button>
-          <button
-            className={cl(
-              classes.menuItem,
-              'ds-focus',
-              theme === 'two' &&
-                appearance === 'dark' &&
-                classes.menuItemActive,
-            )}
-            onClick={() => {
-              setTheme('two');
+            } else if (e.includes('dark')) {
               setAppearance('dark');
-            }}
-          >
-            Tema 2 mørk
-          </button>
-        </div>
+            }
+          }}
+        />
       </div>
 
       <div className={cl(classes.preview)} id='preview2'>
diff --git a/apps/theme/components/Previews/Theme1/Theme1.tsx b/apps/theme/components/Previews/Theme1/Theme1.tsx
index d315d5c3e4..0a2ebee908 100644
--- a/apps/theme/components/Previews/Theme1/Theme1.tsx
+++ b/apps/theme/components/Previews/Theme1/Theme1.tsx
@@ -18,10 +18,12 @@ import {
 import cl from 'clsx/lite';
 import { useState } from 'react';
 
+import { useThemeStore } from '../../../store';
 import classes from './Theme1.module.css';
 
 export const Theme1 = () => {
   const [currentPage, setCurrentPage] = useState(3);
+  const themePreview = useThemeStore((state) => state.themePreview);
   const pagination = usePagination({
     currentPage,
     setCurrentPage,
@@ -255,6 +257,7 @@ export const Theme1 = () => {
       <div
         className={cl(classes.panel, classes.test2, classes.darkCard)}
         data-color-scheme='dark'
+        data-theme={themePreview}
       >
         <div>
           <Heading
diff --git a/apps/theme/components/Sidebar/ColorPage/ColorPage.module.css b/apps/theme/components/Sidebar/ColorPage/ColorPage.module.css
index ef9a55481c..40e841df54 100644
--- a/apps/theme/components/Sidebar/ColorPage/ColorPage.module.css
+++ b/apps/theme/components/Sidebar/ColorPage/ColorPage.module.css
@@ -41,7 +41,6 @@
 }
 
 .bottom {
-  position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
diff --git a/apps/theme/components/Sidebar/ColorPage/ColorPage.tsx b/apps/theme/components/Sidebar/ColorPage/ColorPage.tsx
index 01be6aa766..481b54a0b6 100644
--- a/apps/theme/components/Sidebar/ColorPage/ColorPage.tsx
+++ b/apps/theme/components/Sidebar/ColorPage/ColorPage.tsx
@@ -6,7 +6,6 @@ import { useState } from 'react';
 import { ColorService, useColor } from 'react-color-palette';
 import { type ColorTheme, useThemeStore } from '../../../store';
 import { ColorInput } from '../../ColorInput/ColorInput';
-import { TokenModal } from '../../TokenModal/TokenModal';
 import { ColorPane } from '../ColorPane/ColorPane';
 import classes from './ColorPage.module.css';
 
@@ -58,8 +57,9 @@ export const ColorPage = ({ onPrevClick, onNextClick }: ColorPageProps) => {
         Velg fargene dine
       </Heading>
       <Paragraph data-size='sm' className={classes.desc}>
-        Logbook a sitting success parents' girl in it however, greater, full
-        with he that pleasures up attention to hardly to power definitely hardly
+        Du kan legge til så mange hovedfarger og støttefarger du har behov for.
+        Vær oppmerksom på at du må ha Figma Enterprise for å ha mer enn 4 farger
+        i hver kategori.
       </Paragraph>
       {/* MAIN COLORS */}
       <div className={classes.group}>
@@ -142,18 +142,6 @@ export const ColorPage = ({ onPrevClick, onNextClick }: ColorPageProps) => {
         </div>
       </div>
 
-      <div className={classes.bottom}>
-        <div className={classes.btnGroup}>
-          <TokenModal />
-          {/* <Button data-size='sm' className={classes.btn} asChild>
-            <NextLink href='result'>
-              <SparklesIcon title='a11y-title' fontSize='1.5rem' />
-              Fullfør tema
-            </NextLink>
-          </Button> */}
-        </div>
-      </div>
-
       <ColorPane
         onClose={() => {
           setColor(ColorService.convert('hex', '#0062ba'));
diff --git a/apps/theme/components/Sidebar/ColorPane/ColorPane.module.css b/apps/theme/components/Sidebar/ColorPane/ColorPane.module.css
index d7bb3e4427..4595bd2094 100644
--- a/apps/theme/components/Sidebar/ColorPane/ColorPane.module.css
+++ b/apps/theme/components/Sidebar/ColorPane/ColorPane.module.css
@@ -9,6 +9,7 @@
   border-radius: 8px;
   display: none;
   z-index: 5;
+  overflow-y: auto;
 }
 
 .title {
diff --git a/apps/theme/components/Sidebar/RadiusPage/RadiusPage.module.css b/apps/theme/components/Sidebar/RadiusPage/RadiusPage.module.css
index 009c34c8c0..6b64d9fef9 100644
--- a/apps/theme/components/Sidebar/RadiusPage/RadiusPage.module.css
+++ b/apps/theme/components/Sidebar/RadiusPage/RadiusPage.module.css
@@ -1,6 +1,10 @@
 .desc {
-  margin-top: 12px;
-  margin-bottom: 24px;
+  margin-top: 16px;
+  margin-bottom: 26px;
+  color: var(--ds-color-danger-text-subtle);
+  background-color: var(--ds-color-danger-surface-default);
+  padding: 16px;
+  border-radius: 4px;
 }
 
 .separator {
@@ -22,10 +26,6 @@
 }
 
 .bottom {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
   padding: 24px;
   border-top: 1px solid var(--ds-color-neutral-border-subtle);
   display: flex;
diff --git a/apps/theme/components/Sidebar/RadiusPage/RadiusPage.tsx b/apps/theme/components/Sidebar/RadiusPage/RadiusPage.tsx
index a8d5cc1aa2..a8fa3e2ce9 100644
--- a/apps/theme/components/Sidebar/RadiusPage/RadiusPage.tsx
+++ b/apps/theme/components/Sidebar/RadiusPage/RadiusPage.tsx
@@ -1,6 +1,5 @@
 import { Heading, Paragraph } from '@digdir/designsystemet-react';
 import { BorderRadiusInput } from '../../BorderRadiusInput/BorderRadiusInput';
-import { TokenModal } from '../../TokenModal/TokenModal';
 import classes from './RadiusPage.module.css';
 
 type RadiusPageProps = {
@@ -13,29 +12,12 @@ export const RadiusPage = ({ onPrevClick, onNextClick }: RadiusPageProps) => {
     <div>
       <Heading data-size='xs'>Velg border radius</Heading>
       <Paragraph data-size='sm' className={classes.desc}>
-        Logbook a sitting success parents' girl in it however, greater, full
-        with he that pleasures up attention to hardly to power definitely hardly
+        Denne funksjonaliteten blir foreløpig ikkje med i kodesnutten for å ta i
+        bruk et tema, men vi jobber med å få det inn!
       </Paragraph>
 
       {/* BORDER RADIUS */}
       <BorderRadiusInput />
-
-      <div className={classes.bottom}>
-        <div className={classes.btnGroup}>
-          <TokenModal />
-          {/* <Button
-            data-size='sm'
-            className={classes.btn}
-            onClick={() => onPrevClick()}
-            asChild
-          >
-            <NextLink href='result'>
-              <SparklesIcon title='a11y-title' fontSize='1.5rem' />
-              Fullfør tema
-            </NextLink>
-          </Button> */}
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/apps/theme/components/Sidebar/Sidebar.module.css b/apps/theme/components/Sidebar/Sidebar.module.css
index 170c34cbf5..293b7481fb 100644
--- a/apps/theme/components/Sidebar/Sidebar.module.css
+++ b/apps/theme/components/Sidebar/Sidebar.module.css
@@ -11,7 +11,10 @@
   flex-grow: 1;
   border-radius: 8px;
   margin-top: -170px;
-  min-height: 835px;
+  min-height: calc(81vh);
+  max-height: calc(100vh - 40px);
+  display: flex;
+  justify-content: space-between;
 }
 
 .showSidebar {
@@ -24,9 +27,12 @@
 }
 
 .scrollContainer {
-  overflow: auto;
-  height: calc(100% - 90px);
   padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
+  padding-bottom: 91px;
 }
 
 .sticky {
@@ -86,13 +92,10 @@
   bottom: 0;
   right: 0;
   left: 0;
+  border-radius: 0 0 8px 8px;
   padding: 24px;
   border-top: 1px solid var(--ds-color-neutral-border-subtle);
-  display: flex;
-  align-items: center;
-  gap: 16px;
   background-color: var(--ds-color-info-background-default);
-  border-radius: 0 0 8px 8px;
 }
 
 .toggle {
diff --git a/apps/theme/components/Sidebar/Sidebar.tsx b/apps/theme/components/Sidebar/Sidebar.tsx
index b5ac4abe8e..33a5fa5daf 100644
--- a/apps/theme/components/Sidebar/Sidebar.tsx
+++ b/apps/theme/components/Sidebar/Sidebar.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useThemeStore } from '../../store';
 
 import { CogIcon } from '@navikt/aksel-icons';
+import { TokenModal } from '../TokenModal/TokenModal';
 import { ColorPage } from './ColorPage/ColorPage';
 import { RadiusPage } from './RadiusPage/RadiusPage';
 import classes from './Sidebar.module.css';
@@ -50,53 +51,9 @@ export const Sidebar = () => {
             <RadiusPage onPrevClick={() => setActivePage('colors')} />
           )}
 
-          {/* APPEARANCE */}
-          {/* <div className={classes.themeMode}>
-          <div className={classes.group}>
-            <div className={classes.label}>Visning</div>
-            <Toggle
-              type='appearance'
-              items={[
-                { name: 'Lys', type: 'sm', value: 'light' },
-                { name: 'Mørk', type: 'sm', value: 'dark' },
-                { name: 'Kontrast', type: 'sm', value: 'contrast' },
-              ]}
-              onChange={(value) => {
-                const val = value;
-                setAppearance(val as ColorMode);
-              }}
-            />
+          <div className={classes.bottom}>
+            <TokenModal />
           </div>
-        </div> */}
-
-          {/* SIZES */}
-          {/* <div className={classes.group}>
-          <div className={classes.groupHeader}>
-            <Heading data-size='2xs'>Komponentstørrelser</Heading>
-          </div>
-          <div className={classes.sizes}>
-            <SizeInput
-              onChange={(size) => setSize(size)}
-              name='xSmall'
-              size='14px'
-            />
-            <SizeInput
-              onChange={(size) => setSize(size)}
-              name='Small'
-              size='16px'
-            />
-            <SizeInput
-              onChange={(size) => setSize(size)}
-              name='Medium'
-              size='18px'
-            />
-            <SizeInput
-              onChange={(size) => setSize(size)}
-              name='Large'
-              size='21px'
-            />
-          </div>
-        </div> */}
         </div>
       </div>
     </div>
diff --git a/apps/theme/components/Toggle/Toggle.module.css b/apps/theme/components/Toggle/Toggle.module.css
index e666da3a73..fc2628f436 100644
--- a/apps/theme/components/Toggle/Toggle.module.css
+++ b/apps/theme/components/Toggle/Toggle.module.css
@@ -10,7 +10,7 @@
   height: 42px;
   display: flex;
   align-items: center;
-  padding-left: 10px;
+  padding-left: 13px;
   overflow: hidden;
 }
 
diff --git a/apps/theme/components/ToggleChip/ToggleChip.module.css b/apps/theme/components/ToggleChip/ToggleChip.module.css
new file mode 100644
index 0000000000..24915b905e
--- /dev/null
+++ b/apps/theme/components/ToggleChip/ToggleChip.module.css
@@ -0,0 +1,31 @@
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  padding: 11px 17px;
+  border-radius: 4px;
+  border: none;
+  background-color: transparent;
+  color: var(--ds-color-neutral-text-subtle);
+  border: 1px solid var(--ds-color-neutral-border-subtle);
+  cursor: pointer;
+}
+
+.menuItemActive,
+.menuItem:hover {
+  border: 1px solid var(--ds-color-neutral-border-default);
+  outline: 1px solid var(--ds-color-neutral-border-default);
+  color: var(--ds-color-neutral-text-default);
+}
+
+.menuItem[aria-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background-color: transparent !important;
+}
diff --git a/apps/theme/components/ToggleChip/ToggleChip.tsx b/apps/theme/components/ToggleChip/ToggleChip.tsx
new file mode 100644
index 0000000000..8df2e8a23b
--- /dev/null
+++ b/apps/theme/components/ToggleChip/ToggleChip.tsx
@@ -0,0 +1,41 @@
+import cl from 'clsx/lite';
+import { useEffect, useState } from 'react';
+import classes from './ToggleChip.module.css';
+
+type ToggleChipProps = {
+  onChange: (value: string) => void;
+  items: { name: string; value: string }[];
+  defaultValue?: string;
+};
+
+export const ToggleChip = ({
+  onChange,
+  items,
+  defaultValue,
+}: ToggleChipProps) => {
+  const [selected, setSelected] = useState('');
+
+  useEffect(() => {
+    setSelected(defaultValue || items[0].value);
+  }, []);
+  return (
+    <div className={classes.toggle}>
+      {items.map((item, index) => (
+        <button
+          key={index}
+          className={cl(
+            classes.menuItem,
+            'ds-focus',
+            selected === item.value && classes.menuItemActive,
+          )}
+          onClick={() => {
+            setSelected(item.value);
+            onChange(item.value);
+          }}
+        >
+          {item.name}
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/theme/components/index.ts b/apps/theme/components/index.ts
index e183254caa..0a58107ca5 100644
--- a/apps/theme/components/index.ts
+++ b/apps/theme/components/index.ts
@@ -15,3 +15,5 @@ export { BorderRadius } from './BorderRadius/BorderRadius';
 export { Theme1 } from './Previews/Theme1/Theme1';
 export { BorderRadiusInput } from './BorderRadiusInput/BorderRadiusInput';
 export { ThemeToggle } from './ThemeToggle/ThemeToggle';
+export { Header } from './Header/Header';
+export { ToggleChip } from './ToggleChip/ToggleChip';