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
digdir · Dec 11, 2024 · a3225bb · a3225bb
1 parent de912ae
commit a3225bb
Show file tree

Hide file tree

Showing 28 changed files with 346 additions and 301 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,88 +1,65 @@
 '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,
   ColorContrasts,
   ColorPreview,
   ColorTokens,
   Colors,
+  Header,
   Sidebar,
+  ToggleChip,
 } from '../../components';
 import { Toggle } from '../../components/Toggle/Toggle';
 import { useThemeStore } from '../../store';
 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
@@ -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;
 }