From 6dbb1c5c28bdc598136f080c4f5e4dd79447bcbf Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 4 Jul 2024 12:50:16 +0200
Subject: [PATCH] add dark switcher to storefront on tokens

---
 .../grunnleggende/designelementer/farger/page.mdx    |  2 +-
 .../components/Tokens/TokenList/TokenList.tsx        | 12 ++++++------
 apps/storefront/tokens/dark.ts                       |  4 ++++
 apps/storefront/tokens/{index.ts => light.ts}        |  0
 4 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 apps/storefront/tokens/dark.ts
 rename apps/storefront/tokens/{index.ts => light.ts} (100%)

diff --git a/apps/storefront/app/grunnleggende/designelementer/farger/page.mdx b/apps/storefront/app/grunnleggende/designelementer/farger/page.mdx
index 58789ceeb2..ded833b423 100644
--- a/apps/storefront/app/grunnleggende/designelementer/farger/page.mdx
+++ b/apps/storefront/app/grunnleggende/designelementer/farger/page.mdx
@@ -41,5 +41,5 @@ _farge - stryke - vekt_ <br/>
 <TokenList
   type='color'
   showThemePicker={true}
-  showModeSwitcher={false}
+  showModeSwitcher={true}
 />
diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
index 54c5106c41..32a03df8d8 100644
--- a/apps/storefront/components/Tokens/TokenList/TokenList.tsx
+++ b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
@@ -13,7 +13,8 @@ import {
 import { ClipboardButton } from '@digdir/components';
 
 import { capitalizeString } from '../../../utils/StringHelpers';
-import * as tokens from '../../../tokens';
+import * as tokensLight from '../../../tokens/light';
+import * as tokensDark from '../../../tokens/dark';
 import { TokenColor } from '../TokenColor/TokenColor';
 import { TokenFontSize } from '../TokenFontSize/TokenFontSize';
 import { TokenShadow } from '../TokenShadow/TokenShadow';
@@ -185,6 +186,8 @@ const TokenList = ({
   const [mode, setMode] = useState<'light' | 'dark'>('light');
   const [cardColumns, setCardColumns] = useState<CardColumnType>(3);
 
+  const tokens = mode === 'light' ? tokensLight : tokensDark;
+
   useEffect(() => {
     setCardColumns(type === 'color' ? 3 : 2);
   }, [type]);
@@ -207,10 +210,7 @@ const TokenList = ({
   );
 
   return (
-    <div
-      className={classes.tokens}
-      data-ds-color-mode={mode}
-    >
+    <div className={classes.tokens}>
       <div className={classes.package}>
         <Link href='https://www.npmjs.com/package/@digdir/designsystemet-theme'>
           <img
@@ -247,7 +247,7 @@ const TokenList = ({
           {showModeSwitcher && (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger variant='secondary'>
-                Mode: {mode}
+                Mode: {capitalizeString(mode)}
               </DropdownMenu.Trigger>
               <DropdownMenu.Content>
                 <DropdownMenu.Item onClick={() => setMode('light')}>
diff --git a/apps/storefront/tokens/dark.ts b/apps/storefront/tokens/dark.ts
new file mode 100644
index 0000000000..d5b64dc0ca
--- /dev/null
+++ b/apps/storefront/tokens/dark.ts
@@ -0,0 +1,4 @@
+export * as digdir from './digdir/dark';
+export * as tilsynet from './uutilsynet/dark';
+export * as altinn from './altinn/dark';
+export * as portal from './portal/dark';
diff --git a/apps/storefront/tokens/index.ts b/apps/storefront/tokens/light.ts
similarity index 100%
rename from apps/storefront/tokens/index.ts
rename to apps/storefront/tokens/light.ts