chore: advanced color settings prototype

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

@@ -1,5 +1,5 @@
 .header {
-  height: 100px;
+  height: 90px;
   display: flex;
   align-items: center;
   position: relative;

apps/theme/app/globals.css

@@ -9,6 +9,10 @@ body {
   margin: 0;
 }
 
+button {
+  font-family: 'Inter', sans-serif !important;
+}
+
 .is-sticky {
   position: fixed;
   top: 0;
@@ -84,3 +88,21 @@ code {
 .content {
   min-height: 100svh;
 }
+
+.subtle-toggle-group {
+  background-color: var(--ds-color-neutral-surface-tinted);
+  border: 1px solid var(--ds-color-neutral-border-subtle);
+  border-radius: 5px;
+}
+
+.subtle-toggle-group button[data-variant='primary'] {
+  background-color: var(--ds-color-neutral-surface-default);
+  color: var(--ds-color-text-default);
+  border: 1px solid var(--ds-color-neutral-border-default);
+  border-radius: 4px;
+}
+
+.ds-field [data-field='description'] {
+  margin-top: 4px;
+  margin-bottom: 12px;
+}

apps/theme/app/themebuilder/_components/ThemePages.module.css

@@ -1,20 +1,17 @@
 .panel {
-  background-color: var(--ds-color-neutral-background-tinted);
-  border: 1px solid var(--ds-color-neutral-border-subtle);
+  background-color: var(--ds-color-neutral-surface-default);
+  box-shadow: var(--ds-shadow-xs);
   border-radius: 8px;
   margin-top: 28px;
   width: 100%;
-  max-width: 1390px;
   overflow: hidden;
 }
 
 .basicPanel {
-  background-color: var(--ds-color-neutral-background-tinted);
-  border: 1px solid var(--ds-color-neutral-border-subtle);
+  background-color: var(--ds-color-neutral-surface-default);
+  box-shadow: var(--ds-shadow-xs);
   border-radius: 8px;
-  margin-top: 28px;
   width: 100%;
-  max-width: 1390px;
   padding: var(--ds-size-6);
 }
 

apps/theme/app/themebuilder/_components/ThemePages.tsx

@@ -1,9 +1,9 @@
 'use client';
-
-import cl from 'clsx/lite';
 import { useEffect, useRef } from 'react';
 import { ColorContrasts, ColorPreview, ColorTokens } from '../../../components';
+import { ColorDetail } from '../../../components/ColorDetail/ColorDetail';
 import { Colors } from '../../../components/Colors/Colors';
+import { ContrastRules } from '../../../components/ContrastRules/ContrastRules';
 import { OverviewComponents } from '../../../components/OverviewComponents/OverviewComponents';
 import { useThemeStore } from '../../../store';
 import {
@@ -69,34 +69,29 @@ export const ThemePages = () => {
       >
         <OverviewComponents ref={containerRef} />
       </div>
-      <div
-        className={cl(classes.basicPanel, classes.colorsContainer)}
-        data-color-scheme={colorScheme}
-        hidden={!(themeTab === 'colorsystem')}
-      >
+      <div hidden={!(themeTab === 'colorsystem')}>
         <Colors />
       </div>
-
       <>
-        <div
-          className={classes.panel}
-          data-color-scheme={colorScheme}
-          hidden={!(themeTab === 'colorsystem')}
-        >
+        <div hidden={!(themeTab === 'colorsystem')}>
           <ColorPreview />
         </div>
-        <div
-          className={classes.panel}
-          data-color-scheme={colorScheme}
-          hidden={!(themeTab === 'colorsystem')}
-        >
+        <div hidden={!(themeTab === 'colorsystem')}>
           <ColorTokens />
         </div>
 
+        <div hidden={!(themeTab === 'colorsystem')}>
+          <ColorDetail />
+        </div>
+
+        <div hidden={!(themeTab === 'contrast')}>
+          <ContrastRules />
+        </div>
+
         <div
           className={classes.panel}
           data-color-scheme={colorScheme}
-          hidden={!(themeTab === 'colorsystem')}
+          hidden={!(themeTab === 'contrast')}
         >
           <ColorContrasts />
         </div>

apps/theme/app/themebuilder/_utils/useThemeParams.tsx

@@ -1,6 +1,7 @@
 import {
   type ColorScheme,
   type CssColor,
+  colorMetadata,
   generateColorSchemes,
 } from '@digdir/designsystemet/color';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
@@ -32,7 +33,11 @@ export const useThemeParams = () => {
     if (query.get('main')) {
       const mainColors = createColorsFromQuery(query.get('main') as string);
 
-      if (mainColors) newColors.main = mainColors;
+      if (mainColors) {
+        newColors.main = mainColors.map((color) => ({
+          ...color,
+        }));
+      }
     }
 
     if (query.get('neutral')) {
@@ -43,6 +48,7 @@ export const useThemeParams = () => {
           {
             name: 'neutral',
             colors: generateColorSchemes('#1E2B3C'),
+            colorMetadata: JSON.parse(JSON.stringify(colorMetadata)),
           },
         ];
     }
@@ -52,7 +58,11 @@ export const useThemeParams = () => {
         query.get('support') as string,
       );
 
-      if (supportColors) newColors.support = supportColors;
+      if (supportColors) {
+        newColors.support = supportColors.map((color) => ({
+          ...color,
+        }));
+      }
     }
 
     useThemeStore.setState({
@@ -98,6 +108,10 @@ export const useThemeParams = () => {
 function createColorsFromQuery(colors: string) {
   return colors.split(' ').map((color) => {
     const [name, hex] = color.split(':');
-    return { name, colors: generateColorSchemes(hex as CssColor) };
+    return {
+      name,
+      colors: generateColorSchemes(hex as CssColor),
+      colorMetadata: JSON.parse(JSON.stringify(colorMetadata)),
+    };
   });
 }

apps/theme/app/themebuilder/page.module.css

@@ -1,10 +1,12 @@
 .page {
   position: relative;
+  background-color: var(--ds-color-neutral-background-tinted);
 }
 
 .content {
-  padding: 32px 40px 40px 40px;
-  width: calc(100% - 550px);
+  padding-top: 0;
+  padding-right: 0;
+  width: calc(100% - 470px);
   margin-bottom: 40px;
   flex-grow: 500;
 
@@ -14,15 +16,16 @@
 }
 
 .sideBarContainer {
-  width: 420px;
+  flex-grow: 1;
+  width: 450px;
 }
 
 .container {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 24px;
-  flex-direction: row-reverse;
+  gap: 28px;
+  padding-left: 32px;
+  padding-right: 32px;
 }
 
 .hide {
@@ -80,6 +83,80 @@
   justify-content: flex-end;
   margin-bottom: -8px;
   align-items: flex-end;
+  max-width: 1390px;
+}
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--ds-color-neutral-surface-default);
+  margin-bottom: 28px;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: var(--ds-shadow-xs);
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  & button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    margin: 0;
+    text-transform: capitalize;
+    padding: var(--ds-size-3) var(--ds-size-5);
+    font-size: 16px;
+    font-weight: 500;
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: 100px;
+    border: 1px solid var(--ds-color-neutral-border-subtle);
+    transition: 0.1s all;
+
+    &:not([data-active='true']) {
+      color: var(--ds-color-neutral-text-subtle);
+    }
+
+    &[data-active='true'],
+    &:hover {
+      border: 1px solid var(--ds-color-brand3-border-default);
+      color: var(--ds-color-brand3-text-default);
+      outline: 1px solid var(--ds-color-brand3-border-default);
+    }
+  }
+}
+
+/* .tabs button.tab-1 {
+  background-color: var(--ds-color-brand2-surface-tinted);
+  border: 1px solid var(--ds-color-brand2-border-subtle);
+}
+
+.tabs button.tab-2 {
+  background-color: var(--ds-color-brand1-surface-tinted);
+  border: 1px solid var(--ds-color-brand1-border-subtle);
+}
+
+.tabs button.tab-2 .icon {
+  background-color: var(--ds-color-brand2-surface-active);
+} */
+
+.icon {
+  background-color: var(--ds-color-brand3-surface-hover);
+  height: 34px;
+  width: 34px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tabs button:not([data-active='true']) .icon {
+  background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 @media screen and (max-width: 1500px) {

apps/theme/app/themebuilder/page.tsx

@@ -1,6 +1,14 @@
 'use client';
+import {
+  GlassesIcon,
+  PackageIcon,
+  PaletteIcon,
+  PencilLineIcon,
+} from '@navikt/aksel-icons';
+import cl from 'clsx/lite';
 import { Sidebar, ThemeHeader } from '../../components';
 import { AppearanceToggle } from '../../components/AppearanceToggle/AppearanceToggle';
+import { useThemeStore } from '../../store';
 import { ThemePages } from './_components/ThemePages';
 import { useThemeParams } from './_utils/useThemeParams';
 import classes from './page.module.css';
@@ -9,19 +17,63 @@ export default function Page() {
   /* For theme params */
   useThemeParams();
 
+  const themeTab = useThemeStore((state) => state.themeTab);
+  const setThemeTab = useThemeStore((state) => state.setThemeTab);
+
+  const tabs: {
+    name: string;
+    value: 'overview' | 'colorsystem' | 'contrast' | 'typography' | 'radius';
+  }[] = [
+    { name: 'Farger', value: 'colorsystem' },
+    { name: 'Kontrast', value: 'contrast' },
+    { name: 'Eksempler', value: 'overview' },
+  ];
+
   return (
     <main className={classes.page} id='main'>
       <ThemeHeader />
       <div className={classes.container}>
-        <div className={classes.sideBarContainer}>
-          <Sidebar />
-        </div>
         <div className={classes.content}>
           <div className={classes.toolbar}>
+            {/* Tabs that change between overview and */}
+            <div data-size='md' className={classes.tabs}>
+              {tabs.map((tab, i) => (
+                <button
+                  key={tab.value}
+                  data-size='sm'
+                  className={cl(
+                    classes.tab,
+                    classes[`tab-${i}`], // Unique class based on index
+                    'ds-focus-visible',
+                  )}
+                  onClick={() => setThemeTab(tab.value)}
+                  data-active={themeTab === tab.value}
+                >
+                  <div className={classes.icon}>
+                    {i === 0 && (
+                      <PaletteIcon title='a11y-title' fontSize='1.6rem' />
+                    )}
+                    {i === 1 && (
+                      <GlassesIcon title='a11y-title' fontSize='1.6rem' />
+                    )}
+                    {i === 2 && (
+                      <PencilLineIcon title='a11y-title' fontSize='1.6rem' />
+                    )}
+                    {i === 3 && (
+                      <PackageIcon title='a11y-title' fontSize='1.6rem' />
+                    )}
+                  </div>
+                  {tab.name}
+                </button>
+              ))}
+            </div>
             <AppearanceToggle />
           </div>
           <ThemePages />
         </div>
+        <div className={classes.sideBarContainer}>
+          <Sidebar />
+        </div>
       </div>
     </main>
   );

apps/theme/components/AppearanceToggle/AppearanceToggle.module.css

@@ -1,9 +1,16 @@
 .toggle {
   display: flex;
-  gap: var(--ds-size-4);
+  gap: var(--ds-size-2);
 }
 
 .item {
   flex: 1 1;
-  width: 100px;
+  width: 88px;
+  gap: 8px;
+}
+
+.item[data-variant='primary'] {
+  background-color: var(--ds-color-brand3-surface-tinted);
+  color: var(--ds-color-neutral-text-default);
+  border: 1px solid var(--ds-color-brand3-border-subtle);
 }