chore: themebuilder redesign (#2740)

Started prototyping and testing the new design in code. I want to first add the functionality for colors and then have people in the team test the flow. Then when the flow is good implement the rest of the design. Resolves #2684 --------- Co-authored-by: Barsnes <[email protected]>
digdir · Dec 9, 2024 · 9c86671 · 9c86671
1 parent 0f87a12
commit 9c86671
Show file tree

Hide file tree

Showing 76 changed files with 4,154 additions and 942 deletions.
diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/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>;
 

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, 1620px);
+  max-width: var(--grid-max-width, 1450px);
   margin: 0 auto;
   width: 100%;
   padding-left: var(--grid-padding, 16px);

diff --git a/apps/_components/src/Header/Header.module.css b/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;
 }
 

diff --git a/apps/_components/src/Header/Header.tsx b/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}>

diff --git a/apps/theme/app/globals.css b/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;
 }
diff --git a/apps/theme/app/layout.tsx b/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>
   );

diff --git a/apps/theme/app/page.module.css b/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;
 }