test adding new theme toggle

rangle · Apr 19, 2024 · 03d3dd0 · 03d3dd0
1 parent c3d3b33
commit 03d3dd0
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 29 deletions.
diff --git a/apps/demo/app/routes/index.tsx b/apps/demo/app/routes/index.tsx
@@ -30,11 +30,13 @@ import { useIsScrolled } from '../../hooks/use-is-scrolled';
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 const modes = ['dark-mode', 'light-mode'];
+const themes = ['saddles', 'photostop'];
 /** This should be integrated into a Page layout component, currently a WIP in design */
 const pageMaxWidth = 1280;
 
 export default function Index() {
   const [mode, setMode] = useState(1);
+  const [theme, setTheme] = useState(1);
   const isScrolled = useIsScrolled();
 
   const toggleMode = () => {
@@ -44,6 +46,13 @@ export default function Index() {
     setMode(mode ^ 1);
   };
 
+  const toggleTheme = () => {
+    const themeElement = document.querySelector(`.${themes[theme]}`);
+    themeElement?.classList.remove(themes[theme]);
+    themeElement?.classList.add(themes[theme ^ 1]);
+    setTheme(theme ^ 1);
+  };
+
   return (
     <RadiusAutoLayout
       direction="vertical"
@@ -91,6 +100,15 @@ export default function Index() {
               onClick: toggleMode,
               icon: (mode ? DarkMode : LightMode) as IconType,
             },
+            {
+              'aria-label': theme
+                ? 'Switch to New Theme'
+                : 'Switch to Default Theme',
+              title: theme ? 'Switch to New Theme' : 'Switch to Default Theme',
+              as: 'button',
+              onClick: toggleTheme,
+              icon: (theme ? DarkMode : LightMode) as IconType,
+            },
           ]}
           logos={
             <>

diff --git a/apps/demo/app/utils/demo.utils.ts b/apps/demo/app/utils/demo.utils.ts
@@ -9,7 +9,7 @@ const voidCallback = () => {};
  */
 const brandOrEventToken = '{--brandOrEvent}';
 /** Event tokens to look for to identify if an event is active */
-const events = ['--halloweenevent'];
+const events = [''];
 
 export const useMutationObserver = () => {
   useEffect(() => {

diff --git a/libs/foundations/scripts/generate-storybook-docs.ts b/libs/foundations/scripts/generate-storybook-docs.ts
@@ -307,34 +307,51 @@ readTokenData(tokenFileName).then(tokenFile => {
     let fileCount = 4;
     writeLayerDefinitions(`${STORYBOOK_DOCS_PATH}/${fileIndex(fileCount++)}-token-layer-definitions.mdx`, 'Layer Definition', order, layers, layerMap);
 
-    [ "core", "brand--photostop", "brand--saddles", "halloweenevent--saddles"].map((layerName) => {
-        const { name, variables }: TokenLayer = layerMap[layerName];
-        const basetokenDefinitions = renderLayerVariables(name, variables);
-        const valueMap = variables.reduce((map, obj) => {
-            map[obj.key] = obj.value;
-            return map;
-        }, {});
-
-        const modeDefinitions = ['mode--light', 'mode--dark', "breakpoint--desktop", "breakpoint--tablet",
-            "breakpoint--mobile", "components--components"].map((mode) => {
-            const modeVariables: TokenOutput[] = layerMap[mode].variables;
-            const layerVariables = modeVariables.reduce(function(acc, variable){
-                if (variable.value) {
-                    const value = variable.value.replace(/[{}]/g, "");
-                    const newValue = valueMap[value];
-                    if (newValue) {
-                        acc.push({
-                            ...variable,
-                            value: newValue
-                        })
-                   }
-                }
-                return acc;
-            }, []);
-            return (layerVariables.length > 0) ? renderLayerVariables(`${name} ${mode}`, layerVariables) : '';
-        }).join('\n');
-
-        writeTokenDefinitions(name, basetokenDefinitions, modeDefinitions, `${STORYBOOK_DOCS_PATH}/${fileIndex(fileCount++)}-${layerName}-token-definitions.mdx`);
+    ['core', 'brand--photostop', 'brand--saddles'].map((layerName) => {
+      const { name, variables }: TokenLayer = layerMap[layerName];
+      const basetokenDefinitions = renderLayerVariables(name, variables);
+      const valueMap = variables.reduce((map, obj) => {
+        map[obj.key] = obj.value;
+        return map;
+      }, {});
+
+      const modeDefinitions = [
+        'mode--light',
+        'mode--dark',
+        'breakpoint--desktop',
+        'breakpoint--tablet',
+        'breakpoint--mobile',
+        'components--components',
+      ]
+        .map((mode) => {
+          const modeVariables: TokenOutput[] = layerMap[mode].variables;
+          const layerVariables = modeVariables.reduce(function (acc, variable) {
+            if (variable.value) {
+              const value = variable.value.replace(/[{}]/g, '');
+              const newValue = valueMap[value];
+              if (newValue) {
+                acc.push({
+                  ...variable,
+                  value: newValue,
+                });
+              }
+            }
+            return acc;
+          }, []);
+          return layerVariables.length > 0
+            ? renderLayerVariables(`${name} ${mode}`, layerVariables)
+            : '';
+        })
+        .join('\n');
+
+      writeTokenDefinitions(
+        name,
+        basetokenDefinitions,
+        modeDefinitions,
+        `${STORYBOOK_DOCS_PATH}/${fileIndex(
+          fileCount++
+        )}-${layerName}-token-definitions.mdx`
+      );
     });
 });