chore: themebuilder redesign

apps/_components/src/CodeSnippet/CodeSnippet.tsx

@@ -27,7 +27,15 @@ const plugins = [
 ];
 
 type CodeSnippetProps = {
-  language?: 'css' | 'html' | 'ts' | 'markdown' | 'json' | 'shell' | 'tsx';
+  language?:
+    | 'css'
+    | 'html'
+    | 'ts'
+    | 'markdown'
+    | 'json'
+    | 'shell'
+    | 'tsx'
+    | 'bash';
   children: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 

apps/_components/src/Container/Container.module.css

@@ -1,5 +1,5 @@
 .container {
-  max-width: var(--grid-max-width, 1620px);
+  max-width: var(--grid-max-width, 1450px);
   margin: 0 auto;
   width: 100%;
   padding-left: var(--grid-padding, 16px);

apps/_components/src/Header/Header.module.css

@@ -1,5 +1,5 @@
 .header {
-  height: 106px;
+  height: 100px;
   display: flex;
   align-items: center;
   position: relative;
@@ -12,6 +12,10 @@
   }
 }
 
+.header.transparentHeader {
+  background-color: transparent;
+}
+
 .container {
   display: flex;
   align-items: center;
@@ -49,10 +53,10 @@
 }
 
 .tag {
-  background-color: var(--ds-global-purple-5);
+  background-color: var(--ds-global-purple-4);
   border-radius: 4px;
-  padding: 7px 10px;
-  font-size: 18px;
+  padding: 4px 10px;
+  font-size: 16px;
   font-weight: 500;
 }
 

apps/_components/src/Header/Header.tsx

@@ -26,6 +26,7 @@ type HeaderProps = {
   betaTag?: boolean;
   skipLink?: boolean;
   themeSwitcher?: boolean;
+  transparentBackground?: boolean;
 };
 
 /**
@@ -63,6 +64,7 @@ const Header = ({
   betaTag,
   skipLink = true,
   themeSwitcher = false,
+  transparentBackground = false,
 }: HeaderProps) => {
   const [open, setOpen] = useState(false);
   const [isHamburger, setIsHamburger] = useState(false);
@@ -107,7 +109,11 @@ const Header = ({
         <SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>
       ) : null}
       <header
-        className={cl(classes.header, isHamburger && classes.hamburger)}
+        className={cl(
+          classes.header,
+          isHamburger && classes.hamburger,
+          transparentBackground && classes.transparentHeader,
+        )}
         ref={headerRef}
       >
         <div className={classes.container}>

apps/theme/app/globals.css

@@ -31,6 +31,54 @@ code {
   border-radius: 2px;
 }
 
+[data-theme='two'] {
+  --ds-color-accent-base-default: #740c7e;
+  --ds-color-accent-text-subtle: #93429b;
+  --ds-color-base-default: #740c7e;
+  --ds-color-accent-surface-hover: #6c0b75 !important;
+}
+
+[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;
+}
+
+.panelContainer {
+  display: flex;
+}
+
+.panelLeft {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 420px;
+  padding: 28px;
+  border-right: 1px solid var(--ds-color-neutral-border-subtle);
+  position: relative;
+}
+
+.panelRight {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-rows: min-content;
+  width: 100%;
+  gap: 12px;
+  padding: 28px;
+  background-color: var(--ds-color-neutral-background-subtle);
+  border-radius: 0 8px 8px 0;
+}
+
+.panelBottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 28px;
+  position: absolute;
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
+}
+
 .content {
-  min-height: 100vh;
+  min-height: 100svh;
 }

apps/theme/app/layout.tsx

@@ -1,10 +1,14 @@
 import type { Metadata } from 'next';
-import './globals.css';
+
 import '@digdir/designsystemet-css';
 import '@digdir/designsystemet-theme';
+import 'react-color-palette/css';
+import './globals.css';
 import { EnvelopeClosedIcon } from '@navikt/aksel-icons';
 import { Figma, Footer, Github, Header, Slack } from '@repo/components';
 
+import { ThemeWrapper } from '../components/ThemeWrapper/ThemeWrapper';
+
 export const metadata: Metadata = {
   title: 'Temabygger - Designsystemet',
   description: 'Bygg ditt eget tema med designsystemet',
@@ -67,9 +71,11 @@ export default function RootLayout({
   return (
     <html lang='no'>
       <body>
-        <Header menu={menu} betaTag />
-        <div className='content'>{children}</div>
-        <Footer centerLinks={centerLinks} rightLinks={rightLinks} />
+        <ThemeWrapper>
+          <Header menu={menu} betaTag transparentBackground={true} />
+          <div className='content'>{children}</div>
+          <Footer centerLinks={centerLinks} rightLinks={rightLinks} />
+        </ThemeWrapper>
       </body>
     </html>
   );

apps/theme/app/page.module.css

@@ -1,134 +1,45 @@
 .main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-top: 4px;
-  margin-bottom: 100px;
-  font-size: 18px;
-}
-
-.container {
-  max-width: 1600px;
-  margin: 0 auto;
-  width: 100%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 25%, rgba(30, 152, 245, 0.2) 55%);
+  margin-top: -106px;
+  padding-top: 106px;
 }
 
-.colors {
-  display: flex;
-}
-
-.top {
-  display: flex;
+[data-color-scheme='dark'] .main {
+  background: linear-gradient(180deg, rgba(0, 28, 54, 1) 20%, rgba(30, 152, 245, 0.2) 45%);
 }
 
-.swatchContainer {
-  border: 1px solid #c0c0c0;
-  height: 260px;
-  width: 495px;
-  padding: 20px;
-  margin-right: 32px;
-  border-radius: 4px;
-  gap: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.tom {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  font-size: 16px;
-}
-
-.swatch {
-  height: 30px;
-  width: 30px;
-  border-radius: 50%;
-}
-
-.swatch:hover {
-  cursor: pointer;
-}
-
-.swatches {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+div[data-color-scheme='light'][data-theme='two'] .main {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 20.33%, rgba(116, 12, 126, 0.2) 57.04%);
 }
 
-.box {
-  display: flex;
-  align-items: end;
-  justify-content: center;
-  gap: 32px;
-  padding: 12px 80px 40px;
-  border-radius: 8px;
+div[data-color-scheme='dark'][data-theme='two'] .main {
+  background: linear-gradient(180deg, #131c27 20.33%, #280f36 57.04%);
 }
 
-.title {
+.header {
+  width: 600px;
+  margin: 0 auto;
   text-align: center;
-  margin-bottom: 36px;
-  font-size: 32px;
-  font-weight: 500;
-  margin-top: 0;
-}
-
-.test2 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-top: var(--ds-spacing-2);
 }
 
-.test {
-  margin-bottom: 16px;
-  font-size: 21px;
-  border-radius: 2px;
-  font-weight: 400;
-  color: rgb(104, 104, 104);
-  letter-spacing: 0.5px;
+.heading {
+  margin-top: var(--ds-spacing-1);
 }
 
-.tokens {
-  margin-top: 40px;
+.desc {
+  margin-top: var(--ds-spacing-5);
 }
 
-.tokens h3 {
-  font-size: 18px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.tokens h2 {
-  font-size: 22px;
-  margin-bottom: 0;
-}
-
-.token {
-  font-size: 16px;
-}
-
-.token div {
-  margin-bottom: 6px;
-}
-
-.brandRow {
-  margin-top: 24px;
-}
-
-.contrastSection {
+.btnGroup {
   display: flex;
+  gap: 20px;
   align-items: center;
-  gap: 2px;
-  height: 52px;
-  width: 85px;
-  font-size: 16px;
-}
-
-.contrastSection svg {
-  color: #c90000;
+  justify-content: center;
+  margin-top: var(--ds-spacing-7);
 }
 
-.contrastSectionSuccess svg {
-  color: #090;
+.headerText {
+  color: var(--ds-color-accent-base-default);
+  font-weight: 600;
 }