From 05aa972995a9003dd9ed3bea03f6eb5f8a7c01b9 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Thu, 16 Mar 2023 19:59:40 +0200
Subject: [PATCH 1/8] split up stories between raidguild and client theme

---
 .gitignore                               |  6 +++
 .storybook/preview.js                    |  5 ---
 src/components/atoms/Tag/Tag.tsx         |  4 +-
 src/index.ts                             |  2 +-
 src/stories/atoms/Accordion.stories.tsx  | 32 ++++++++++++++--
 src/stories/atoms/Badge.stories.tsx      | 33 ++++++++++++++--
 src/stories/atoms/Button.stories.tsx     | 35 +++++++++++++++--
 src/stories/atoms/Card.stories.tsx       | 37 ++++++++++++++++--
 src/stories/atoms/DatePicker.stories.tsx | 35 +++++++++++++++--
 src/stories/atoms/Heading.stories.tsx    | 36 ++++++++++++++++--
 src/stories/atoms/List.stories.tsx       | 35 +++++++++++++++--
 src/stories/atoms/Menu.stories.tsx       | 32 ++++++++++++++--
 src/stories/atoms/Spinner.stories.tsx    | 32 ++++++++++++++--
 src/stories/atoms/Tabs.stories.tsx       | 26 +++++++++++--
 src/stories/atoms/Tag.stories.tsx        | 36 ++++++++++++++++--
 src/stories/atoms/Text.stories.tsx       | 36 +++++++++++++++---
 src/stories/atoms/Toast.stories.tsx      | 28 ++++++++++++--
 src/stories/atoms/Tooltip.stories.tsx    | 32 ++++++++++++++--
 src/stories/constants.ts                 |  0
 src/stories/index-client.stories.tsx     | 48 ++++++++++++++++++++++++
 src/theme/index.ts                       |  2 +
 21 files changed, 471 insertions(+), 61 deletions(-)
 create mode 100644 src/stories/constants.ts
 create mode 100644 src/stories/index-client.stories.tsx

diff --git a/.gitignore b/.gitignore
index d9a9232..fafea2a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,9 @@ dist
 storybook-static/*
 .yarn
 .yarnrc.yml
+/.idea/inspectionProfiles/Project_Default.xml
+/.idea/.gitignore
+/.idea/design-system.iml
+/.idea/modules.xml
+/.idea/vcs.xml
+/.idea/prettier.xml
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 4e0213d..b33f135 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,4 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { themes } from '@storybook/theming';
-import theme from '../src/theme/index';
 import { Fonts, Box } from '../src';
 
 export const parameters = {
@@ -15,9 +13,6 @@ export const parameters = {
     // sets the execution mode for the addon
     manual: false,
   },
-  chakra: {
-    theme,
-  },
   controls: {
     expanded: true,
     matchers: {
diff --git a/src/components/atoms/Tag/Tag.tsx b/src/components/atoms/Tag/Tag.tsx
index 8dbf99c..1b0eb0d 100644
--- a/src/components/atoms/Tag/Tag.tsx
+++ b/src/components/atoms/Tag/Tag.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ChakraTag, ChakraTagProps } from '../../chakra';
 
-interface CustomTagProps {
+type CustomTagProps = {
   label?: string;
-}
+};
 
 export type TagProps = CustomTagProps & ChakraTagProps;
 
diff --git a/src/index.ts b/src/index.ts
index bbdadf7..2c9e7bd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,4 +24,4 @@ export {
   default as RGThemeProvider,
   Fonts,
 } from './components/RGThemeProvider';
-export { default as defaultTheme } from './theme';
+export { default as defaultTheme, clientTheme } from './theme';
diff --git a/src/stories/atoms/Accordion.stories.tsx b/src/stories/atoms/Accordion.stories.tsx
index 2e3d38f..aa7dd93 100644
--- a/src/stories/atoms/Accordion.stories.tsx
+++ b/src/stories/atoms/Accordion.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import {
   Accordion as AccordionComponent,
   AccordionItem,
@@ -8,17 +8,25 @@ import {
   AccordionIcon,
   Text,
   Heading,
+  defaultTheme,
+  clientTheme,
 } from '../..';
 
 export default {
   title: 'Components/Atoms/Accordion',
   component: AccordionComponent,
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
 } as Meta<typeof AccordionComponent>;
+type Story = StoryObj<typeof AccordionComponent>;
 
 // eslint-disable-next-line max-len
 // TODO this could be abstracted to its own component, but just added the style to the default chakra component for now
 
-const Accordion: StoryFn<typeof AccordionComponent> = () => (
+const AccordionStoryContent = () => (
   <AccordionComponent allowToggle>
     <AccordionItem>
       <AccordionButton justifyContent='space-between'>
@@ -41,4 +49,22 @@ const Accordion: StoryFn<typeof AccordionComponent> = () => (
   </AccordionComponent>
 );
 
-export { Accordion };
+export const Guild: Story = {
+  render: () => <AccordionStoryContent />,
+  name: 'RaidGuild',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <AccordionStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Badge.stories.tsx b/src/stories/atoms/Badge.stories.tsx
index 4be52b8..10d2add 100644
--- a/src/stories/atoms/Badge.stories.tsx
+++ b/src/stories/atoms/Badge.stories.tsx
@@ -1,11 +1,18 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { Badge as BadgeComponent, Stack, HStack } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Badge as BadgeComponent,
+  Stack,
+  HStack,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 
 export default {
   title: 'Components/Atoms/Badge',
   component: BadgeComponent,
 } as Meta<typeof BadgeComponent>;
+type Story = StoryObj<typeof BadgeComponent>;
 
 const badgeColors = [
   { name: 'Default', color: 'gray' },
@@ -16,7 +23,7 @@ const badgeColors = [
 
 const badgeVariants = ['outline', 'solid', 'subtle'];
 
-const Badge: StoryFn<typeof BadgeComponent> = () => (
+const BadgeStoryContent = () => (
   <Stack>
     {badgeColors.map((b) => (
       <HStack key={b.name}>
@@ -34,4 +41,22 @@ const Badge: StoryFn<typeof BadgeComponent> = () => (
   </Stack>
 );
 
-export { Badge };
+export const Guild: Story = {
+  render: () => <BadgeStoryContent />,
+  name: 'RaidGuild',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <BadgeStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Button.stories.tsx b/src/stories/atoms/Button.stories.tsx
index 0348981..3d5b6fa 100644
--- a/src/stories/atoms/Button.stories.tsx
+++ b/src/stories/atoms/Button.stories.tsx
@@ -1,11 +1,19 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { Button as ButtonComponent, Flex, Stack, Text } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Button as ButtonComponent,
+  clientTheme,
+  defaultTheme,
+  Flex,
+  Stack,
+  Text,
+} from '../..';
 
 export default {
   title: 'Components/Atoms/Buttons',
   component: ButtonComponent,
 } as Meta<typeof ButtonComponent>;
+type Story = StoryObj<typeof ButtonComponent>;
 
 const buttonVariants = [
   { name: 'Solid', variant: 'solid' },
@@ -15,7 +23,7 @@ const buttonVariants = [
   { name: 'Ghost', variant: 'ghost' },
 ];
 
-const Buttons: StoryFn<typeof ButtonComponent> = () => (
+const ButtonsStoryContent = () => (
   <Stack>
     {buttonVariants.map((button) => (
       <Flex width='400px' justify='space-between' key='variant'>
@@ -28,4 +36,23 @@ const Buttons: StoryFn<typeof ButtonComponent> = () => (
   </Stack>
 );
 
-export { Buttons };
+export const Guild: Story = {
+  render: () => <ButtonsStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <ButtonsStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Card.stories.tsx b/src/stories/atoms/Card.stories.tsx
index 14cca22..e3a0850 100644
--- a/src/stories/atoms/Card.stories.tsx
+++ b/src/stories/atoms/Card.stories.tsx
@@ -1,6 +1,15 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { Card, Image, HStack, SimpleGrid, Heading, Text } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Card,
+  Image,
+  HStack,
+  SimpleGrid,
+  Heading,
+  Text,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 import imgDesignSprints from '../../assets/images/designsprints.png';
 import { RoleBadge } from '../../components/molecules';
 
@@ -12,6 +21,7 @@ export default {
   title: 'Components/Atoms/Cards',
   component: Card,
 } as Meta<typeof Card>;
+type Story = StoryObj<typeof Card>;
 
 const cardVariants = [
   'fullBorder',
@@ -26,7 +36,7 @@ const title = 'Card Title';
 const cardCopy =
   'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores eius amet quisquam ratione, perspiciatis voluptatem officia.';
 
-const Cards: StoryFn<typeof Card> = () => (
+const CardStoryContent = () => (
   <SimpleGrid
     columns={{ base: 1, md: 2, lg: 2 }}
     gap='4rem'
@@ -72,4 +82,23 @@ const Cards: StoryFn<typeof Card> = () => (
   </SimpleGrid>
 );
 
-export { Cards };
+export const Guild: Story = {
+  render: () => <CardStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <CardStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/DatePicker.stories.tsx b/src/stories/atoms/DatePicker.stories.tsx
index 87a8e52..c90388e 100644
--- a/src/stories/atoms/DatePicker.stories.tsx
+++ b/src/stories/atoms/DatePicker.stories.tsx
@@ -1,14 +1,22 @@
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { Meta, StoryFn } from '@storybook/react';
-import { DatePicker as DatePickerComponent, Box, Stack, Text } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  DatePicker as DatePickerComponent,
+  Box,
+  Stack,
+  Text,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 
 export default {
   title: 'Components/Atoms/DatePicker',
   component: DatePickerComponent,
 } as Meta;
+type Story = StoryObj<typeof DatePickerComponent>;
 
-const DatePicker: StoryFn<typeof DatePickerComponent> = () => {
+const DatePickerStoryContent = () => {
   const localForm = useForm();
   useEffect(() => {
     localForm.reset({ raidStartDate: new Date() });
@@ -35,4 +43,23 @@ const DatePicker: StoryFn<typeof DatePickerComponent> = () => {
   );
 };
 
-export { DatePicker };
+export const Guild: Story = {
+  render: () => <DatePickerStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <DatePickerStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Heading.stories.tsx b/src/stories/atoms/Heading.stories.tsx
index 8710fcf..7c426a7 100644
--- a/src/stories/atoms/Heading.stories.tsx
+++ b/src/stories/atoms/Heading.stories.tsx
@@ -1,12 +1,21 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Heading as HeadingComponent, Stack, Flex, Text } from '../..';
+import {
+  Heading as HeadingComponent,
+  Stack,
+  Flex,
+  Text,
+  HeadingProps,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 import { HeadingVariants } from '../../components/atoms/Heading';
 
 export default {
   title: 'Components/Atoms/Heading',
   component: HeadingComponent,
 } as Meta;
+type Story = StoryObj<typeof HeadingComponent>;
 
 const headingExamples: Array<{ size: string }> = [
   { size: '4xl' },
@@ -22,7 +31,7 @@ const headingVariants: HeadingVariants[] = ['shadow', 'noShadow'];
 
 const copy = 'RaidGuild vs Moloch';
 
-const Heading: StoryFn<typeof HeadingComponent> = (args) => (
+const HeadingStoryContent = (args: HeadingProps) => (
   <Stack spacing={4}>
     {/* Map out each size */}
     {headingExamples.map((example) => (
@@ -41,4 +50,23 @@ const Heading: StoryFn<typeof HeadingComponent> = (args) => (
   </Stack>
 );
 
-export { Heading };
+export const Guild: Story = {
+  render: (args) => <HeadingStoryContent {...args} />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: (args) => <HeadingStoryContent {...args} />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/List.stories.tsx b/src/stories/atoms/List.stories.tsx
index c60dfdd..ddb3348 100644
--- a/src/stories/atoms/List.stories.tsx
+++ b/src/stories/atoms/List.stories.tsx
@@ -1,20 +1,28 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { ListItemProps } from 'components/atoms/List/List';
-import { List as ListComponent, HStack, Stack, Heading } from '../..';
+import {
+  List as ListComponent,
+  HStack,
+  Stack,
+  Heading,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 import Castle from '../../components/icons/Castle';
 
 export default {
   title: 'Components/Atoms/List',
   component: ListComponent,
 } as Meta<typeof ListComponent>;
+type Story = StoryObj<typeof ListComponent>;
 
 type ListEntry = Partial<ListItemProps> & {
   name: string;
   ordered?: boolean;
 };
 
-const List: StoryFn<typeof ListComponent> = () => {
+const ListStoryContent = () => {
   const listItems = ['lorem ipsum 1', 'lorem ipsum 2', 'lorem ipsum 3'];
 
   const listVariants: ListEntry[] = [
@@ -41,4 +49,23 @@ const List: StoryFn<typeof ListComponent> = () => {
   );
 };
 
-export { List };
+export const Guild: Story = {
+  render: () => <ListStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <ListStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Menu.stories.tsx b/src/stories/atoms/Menu.stories.tsx
index 3dde324..8150a3b 100644
--- a/src/stories/atoms/Menu.stories.tsx
+++ b/src/stories/atoms/Menu.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import React from 'react';
 import { FaCaretDown } from 'react-icons/fa';
+import { StoryObj } from '@storybook/react';
 import {
   Menu as MenuComponent,
   MenuButton,
@@ -9,9 +10,11 @@ import {
   Text,
   Flex,
   Icon,
+  defaultTheme,
+  clientTheme,
 } from '../..';
 
-export const Menu: StoryFn = () => {
+const MenuStoryContent = () => {
   return (
     <MenuComponent>
       <MenuButton>
@@ -27,10 +30,33 @@ export const Menu: StoryFn = () => {
   );
 };
 
-Menu.args = {
+const args = {
   size: 150,
 };
 
 export default {
   title: 'Components/Atoms/Menu',
+  args,
+  component: MenuComponent,
 } as Meta;
+type Story = StoryObj<typeof MenuComponent>;
+
+export const Guild: Story = {
+  render: () => <MenuStoryContent />,
+  name: 'RaidGuild',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <MenuStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Spinner.stories.tsx b/src/stories/atoms/Spinner.stories.tsx
index d9af14e..733dd78 100644
--- a/src/stories/atoms/Spinner.stories.tsx
+++ b/src/stories/atoms/Spinner.stories.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { Spinner as SpinnerComponent, Stack } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  clientTheme,
+  defaultTheme,
+  Spinner as SpinnerComponent,
+  Stack,
+} from '../..';
 
 export default {
   title: 'Components/Atoms/Spinner',
   component: SpinnerComponent,
 } as Meta<typeof SpinnerComponent>;
+type Story = StoryObj<typeof SpinnerComponent>;
 
 const spinnerSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-const Spinner: StoryFn<typeof SpinnerComponent> = () => (
+const SpinnerStoryContent = () => (
   <Stack>
     {spinnerSizes.map((size) => (
       <SpinnerComponent size={size} key={size} />
@@ -17,4 +23,22 @@ const Spinner: StoryFn<typeof SpinnerComponent> = () => (
   </Stack>
 );
 
-export { Spinner };
+export const Guild: Story = {
+  render: () => <SpinnerStoryContent />,
+  name: 'RaidGuild',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <SpinnerStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Tabs.stories.tsx b/src/stories/atoms/Tabs.stories.tsx
index 781319a..8160c9c 100644
--- a/src/stories/atoms/Tabs.stories.tsx
+++ b/src/stories/atoms/Tabs.stories.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import {
   Tabs as TabsComponent,
   Tab,
   TabList,
   TabPanels,
   TabPanel,
+  clientTheme,
+  defaultTheme,
 } from '../..';
 
 export default {
   title: 'Components/Atoms/Tabs',
   component: TabsComponent,
 } as Meta<typeof TabsComponent>;
+type Story = StoryObj<typeof TabsComponent>;
 
-const Tabs: StoryFn<typeof TabsComponent> = () => (
+const TabsStoryContent = () => (
   <TabsComponent>
     <TabList>
       <Tab>Test 1</Tab>
@@ -25,5 +28,22 @@ const Tabs: StoryFn<typeof TabsComponent> = () => (
     </TabPanels>
   </TabsComponent>
 );
+export const Guild: Story = {
+  render: () => <TabsStoryContent />,
+  name: 'RaidGuild',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
 
-export { Tabs };
+export const Client: Story = {
+  render: () => <TabsStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Tag.stories.tsx b/src/stories/atoms/Tag.stories.tsx
index e5156ee..a9573e0 100644
--- a/src/stories/atoms/Tag.stories.tsx
+++ b/src/stories/atoms/Tag.stories.tsx
@@ -1,11 +1,20 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { Tag as TagComponent, Stack, Text, Heading, Flex } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Tag as TagComponent,
+  Stack,
+  Text,
+  Heading,
+  Flex,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 
 export default {
   title: 'Components/Atoms/Tags',
   component: TagComponent,
 } as Meta<typeof TagComponent>;
+type Story = StoryObj<typeof TagComponent>;
 
 const tagVariants = [
   { name: 'Solid', variant: 'solid' },
@@ -19,7 +28,7 @@ const tagSizes = [
   { name: 'Large', size: 'lg' },
 ];
 
-const Tags: StoryFn<typeof TagComponent> = () => (
+const TagsStoryContent = () => (
   <Stack spacing={10}>
     {tagSizes.map((size) => (
       <Stack w='600px' key={size.name}>
@@ -45,4 +54,23 @@ const Tags: StoryFn<typeof TagComponent> = () => (
   </Stack>
 );
 
-export { Tags };
+export const Guild: Story = {
+  render: () => <TagsStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <TagsStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Text.stories.tsx b/src/stories/atoms/Text.stories.tsx
index 567c39e..9524d30 100644
--- a/src/stories/atoms/Text.stories.tsx
+++ b/src/stories/atoms/Text.stories.tsx
@@ -1,6 +1,13 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Text as TextComponent, Stack, Flex } from '../..';
+import {
+  Text as TextComponent,
+  Stack,
+  Flex,
+  TextProps,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 
 export default {
   title: 'Components/Atoms/Text',
@@ -16,7 +23,8 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as Meta;
+} as Meta<typeof TextComponent>;
+type Story = StoryObj<typeof TextComponent>;
 
 const textExamples: Array<{ size: any }> = [
   { size: '4xl' },
@@ -30,7 +38,7 @@ const textExamples: Array<{ size: any }> = [
 
 const copy = 'At the table of rounds we lay our swords.';
 
-const Text: StoryFn<typeof TextComponent> = (args) => (
+const TextStoryContent = (args: TextProps) => (
   <Stack spacing={3}>
     {textExamples.map((text) => (
       <Flex align='center' key={text.size}>
@@ -45,4 +53,22 @@ const Text: StoryFn<typeof TextComponent> = (args) => (
   </Stack>
 );
 
-export { Text };
+export const Guild: Story = {
+  render: (args) => <TextStoryContent {...args} />,
+  name: 'RaidGuild',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: (args) => <TextStoryContent {...args} />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Toast.stories.tsx b/src/stories/atoms/Toast.stories.tsx
index e411e6f..127d22d 100644
--- a/src/stories/atoms/Toast.stories.tsx
+++ b/src/stories/atoms/Toast.stories.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import {
   Toast as ToastComponent,
   Button,
   useToast,
   Stack,
+  defaultTheme,
   ToastProvider,
+  clientTheme,
 } from '../..';
 
 export default {
   title: 'Components/Atoms/Toast',
   component: ToastComponent,
 } as Meta<typeof ToastComponent>;
+type Story = StoryObj<typeof ToastComponent>;
 
-const Toast: StoryFn = () => {
+const ToastStoryContent = () => {
   const toast = useToast();
 
   const clickSuccessToast = () => {
@@ -81,4 +84,23 @@ const Toast: StoryFn = () => {
   );
 };
 
-export { Toast };
+export const Guild: Story = {
+  render: () => <ToastStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <ToastStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/atoms/Tooltip.stories.tsx b/src/stories/atoms/Tooltip.stories.tsx
index 7c1607c..973f533 100644
--- a/src/stories/atoms/Tooltip.stories.tsx
+++ b/src/stories/atoms/Tooltip.stories.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { Tooltip as TooltipComponent, Button } from '../..';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Tooltip as TooltipComponent,
+  Button,
+  defaultTheme,
+  clientTheme,
+} from '../..';
 
 export default {
   title: 'Components/Atoms/Tooltip',
   component: TooltipComponent,
 } as Meta<typeof TooltipComponent>;
+type Story = StoryObj<typeof TooltipComponent>;
 
-const Tooltip: StoryFn<typeof TooltipComponent> = () => (
+const TooltipStoryContent = () => (
   <TooltipComponent
     label="Reason you can't click"
     placement='end'
@@ -18,4 +24,22 @@ const Tooltip: StoryFn<typeof TooltipComponent> = () => (
   </TooltipComponent>
 );
 
-export { Tooltip };
+export const Guild: Story = {
+  render: () => <TooltipStoryContent />,
+  name: 'RaidGuild',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <TooltipStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/constants.ts b/src/stories/constants.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/stories/index-client.stories.tsx b/src/stories/index-client.stories.tsx
new file mode 100644
index 0000000..6b03005
--- /dev/null
+++ b/src/stories/index-client.stories.tsx
@@ -0,0 +1,48 @@
+import { Meta } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { Heading, Stack, Text, Flex, Box } from '..';
+
+import castle from '../assets/images/raid-guild-castle.png';
+import FooterSimple from '../components/footers/FooterSimple';
+
+export const ClientDesignSystem: StoryFn = () => (
+  <Box position='relative'>
+    <Box
+      bgImg={castle}
+      left={0}
+      top={0}
+      right={0}
+      bottom={0}
+      backgroundSize='cover'
+      backgroundPosition='right'
+      backgroundRepeat='no-repeat'
+      opacity={0.4}
+      position='absolute'
+      zIndex={-1}
+    />
+    <Flex direction='column' justify='space-between' minH='70vh' w='100%'>
+      <Stack align='center' spacing={6} my={40}>
+        <Heading as='h1' size='3xl' color='white' textAlign='center'>
+          Raid Guild Design Guide
+        </Heading>
+        <Text align='center' mb={5} fontFamily='texturina'>
+          Use the navigation on the left to explore existing components built
+          with Raid Guild styling.
+        </Text>
+      </Stack>
+      <FooterSimple />
+    </Flex>
+  </Box>
+);
+
+export default {
+  title: 'Client Design System',
+  component: ClientDesignSystem,
+  parameters: {
+    chakra: {
+      theme: {},
+    },
+  },
+} as Meta;
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 5923e53..65a60a8 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -90,4 +90,6 @@ const theme = extendTheme({
   },
 });
 
+export const clientTheme = extendTheme({});
+
 export default theme;

From 063ebd71d6a2d44ae8ff6bee6c8285f7bd8826d6 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Mon, 20 Mar 2023 09:00:02 +0200
Subject: [PATCH 2/8] rewrite all molecule stories to separate themes

---
 .../molecules/RoleBadge/RoleBadge.tsx         |  2 +-
 src/components/molecules/RoleBadge/index.tsx  |  2 +-
 src/stories/molecules/AlertDialog.stories.tsx | 27 ++++++-
 .../molecules/BuiltByRaidGuild.stories.tsx    | 32 +++++++--
 src/stories/molecules/ButtonGroup.stories.tsx | 71 +++++++++++++++----
 src/stories/molecules/Modal.stories.tsx       | 28 +++++++-
 src/stories/molecules/RoleBadge.stories.tsx   | 38 ++++++++--
 .../molecules/SectionTitle.stories.tsx        | 36 ++++++++--
 8 files changed, 198 insertions(+), 38 deletions(-)

diff --git a/src/components/molecules/RoleBadge/RoleBadge.tsx b/src/components/molecules/RoleBadge/RoleBadge.tsx
index ba66568..a860077 100644
--- a/src/components/molecules/RoleBadge/RoleBadge.tsx
+++ b/src/components/molecules/RoleBadge/RoleBadge.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex } from '../../chakra';
 import { roleImage } from './roleImages';
 
-interface RoleBadgeProps {
+export interface RoleBadgeProps {
   roleName: string;
   width?: number | string;
   height?: number | string;
diff --git a/src/components/molecules/RoleBadge/index.tsx b/src/components/molecules/RoleBadge/index.tsx
index 19824ec..4e6b333 100644
--- a/src/components/molecules/RoleBadge/index.tsx
+++ b/src/components/molecules/RoleBadge/index.tsx
@@ -1 +1 @@
-export { default as RoleBadge } from './RoleBadge';
+export { default as RoleBadge, RoleBadgeProps } from './RoleBadge';
diff --git a/src/stories/molecules/AlertDialog.stories.tsx b/src/stories/molecules/AlertDialog.stories.tsx
index bed03a6..d641441 100644
--- a/src/stories/molecules/AlertDialog.stories.tsx
+++ b/src/stories/molecules/AlertDialog.stories.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import {
   AlertDialog as AlertDialogComponent,
   Button,
   Box,
   useDisclosure,
+  defaultTheme,
+  clientTheme,
 } from '../..';
 
-export const AlertDialog: StoryFn = () => {
+const AlertDialogStoryContent = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const submit = () => {
@@ -33,8 +35,29 @@ export const AlertDialog: StoryFn = () => {
     </Box>
   );
 };
+export const Guild: Story = {
+  render: () => <AlertDialogStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <AlertDialogStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
 
 export default {
   title: 'Components/Molecules/Alert Dialog',
   component: AlertDialogComponent,
 } as Meta;
+type Story = StoryObj<typeof AlertDialogComponent>;
diff --git a/src/stories/molecules/BuiltByRaidGuild.stories.tsx b/src/stories/molecules/BuiltByRaidGuild.stories.tsx
index bda71ce..635070b 100644
--- a/src/stories/molecules/BuiltByRaidGuild.stories.tsx
+++ b/src/stories/molecules/BuiltByRaidGuild.stories.tsx
@@ -1,12 +1,36 @@
-import type { StoryFn } from '@storybook/react';
 import React from 'react';
-import { BuiltByRaidGuild as BuiltByRaidGuildComponent } from '../..';
+import { StoryObj } from '@storybook/react';
+import {
+  BuiltByRaidGuild as BuiltByRaidGuildComponent,
+  clientTheme,
+  defaultTheme,
+} from '../..';
 
 export default {
   title: 'Components/Molecules/BuiltByRaidGuild',
   component: BuiltByRaidGuildComponent,
 };
+type Story = StoryObj<typeof BuiltByRaidGuildComponent>;
 
-const BuiltByRaidGuild: StoryFn = () => <BuiltByRaidGuildComponent />;
+const BuiltByRaidGuildStoryContent = () => <BuiltByRaidGuildComponent />;
 
-export { BuiltByRaidGuild };
+export const Guild: Story = {
+  render: () => <BuiltByRaidGuildStoryContent />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <BuiltByRaidGuildStoryContent />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/molecules/ButtonGroup.stories.tsx b/src/stories/molecules/ButtonGroup.stories.tsx
index 4239058..733a525 100644
--- a/src/stories/molecules/ButtonGroup.stories.tsx
+++ b/src/stories/molecules/ButtonGroup.stories.tsx
@@ -1,36 +1,77 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
-import { ButtonGroup } from '../..';
+import { ButtonGroup, clientTheme, defaultTheme } from '../..';
 
 export default {
   title: 'Components/Molecules/ButtonGroup',
   component: ButtonGroup,
   argTypes: {
     isAttached: { control: 'boolean' },
-    // buttons: {
-    //   options: ['One', 'Two', 'Three', 'Four'],
-    //   control: { type: 'check' },
-    // },
     spacing: { control: 'number' },
     size: { options: ['xs', 'sm', 'md', 'lg'], control: { type: 'radio' } },
   },
 } as Meta;
+type Story = StoryObj<typeof ButtonGroup>;
 
-const Template: StoryFn<any> = ({
+const Template: StoryFn<{ buttons: string[]; isAttached?: boolean }> = ({
   buttons,
   ...args
 }: {
   buttons: string[];
 }) => <ButtonGroup buttons={buttons} onSelect={() => null} {...args} />;
 
-export const Attached = Template.bind({});
-Attached.args = {
-  buttons: ['Tic', 'Tac', 'Toe'],
-  isAttached: true,
+export const GuildAttached: Story = {
+  render: (args) => <Template {...args} />,
+  name: 'RaidGuild - Attached',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+  args: {
+    buttons: ['Tic', 'Tac', 'Toe'],
+    isAttached: true,
+  },
+};
+
+export const GuildSpaced: Story = {
+  render: (args) => <Template {...args} />,
+  name: 'RaidGuild - Spaced',
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+  args: {
+    buttons: ['Tic', 'Tac', 'Toe'],
+    isAttached: false,
+  },
 };
 
-export const Spaced = Template.bind({});
-Spaced.args = {
-  buttons: ['Pinapple', 'Pen'],
-  isAttached: false,
+export const ClientAttached: Story = {
+  render: (args) => <Template {...args} />,
+  name: 'ClientTheme - Attached',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+  args: {
+    buttons: ['Tic', 'Tac', 'Toe'],
+    isAttached: true,
+  },
+};
+
+export const ClientSpaced: Story = {
+  render: (args) => <Template {...args} />,
+  name: 'ClientTheme - Spaced',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+  args: {
+    buttons: ['Tic', 'Tac', 'Toe'],
+    isAttached: false,
+  },
 };
diff --git a/src/stories/molecules/Modal.stories.tsx b/src/stories/molecules/Modal.stories.tsx
index 90a863f..a2aff3c 100644
--- a/src/stories/molecules/Modal.stories.tsx
+++ b/src/stories/molecules/Modal.stories.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import {
   Modal as ModalComponent,
   Button,
   Box,
   useDisclosure,
   Text,
+  defaultTheme,
+  clientTheme,
 } from '../..';
 
 export default {
   title: 'Components/Molecules/Modal',
   component: ModalComponent,
 } as Meta<typeof ModalComponent>;
+type Story = StoryObj<typeof ModalComponent>;
 
-const Modal: StoryFn<typeof ModalComponent> = () => {
+const Template = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const submit = () => {
@@ -41,4 +44,23 @@ const Modal: StoryFn<typeof ModalComponent> = () => {
   );
 };
 
-export { Modal };
+export const Guild: Story = {
+  render: () => <Template />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <Template />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};
diff --git a/src/stories/molecules/RoleBadge.stories.tsx b/src/stories/molecules/RoleBadge.stories.tsx
index 8fe6bdb..b4d03f8 100644
--- a/src/stories/molecules/RoleBadge.stories.tsx
+++ b/src/stories/molecules/RoleBadge.stories.tsx
@@ -1,8 +1,9 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import { SimpleGrid, Stack } from '../../components/chakra';
 import { Heading } from '../../components/atoms';
 import { RoleBadge } from '../../components/molecules/RoleBadge';
+import defaultTheme, { clientTheme } from '../../theme';
 
 const roles = [
   'alchemist',
@@ -51,12 +52,35 @@ const Template: StoryFn<RoleBadgeStoryProps> = ({
   );
 };
 
-export const RoleBadges = Template.bind({});
-RoleBadges.args = {
-  size: 150,
-};
-
 export default {
   title: 'Components/Molecules/RoleBadges',
-  component: RoleBadges,
+  component: RoleBadge,
 } as Meta;
+type Story = StoryObj<RoleBadgeStoryProps>;
+
+export const Guild: Story = {
+  render: (args) => <Template {...args} />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+  args: {
+    size: 150,
+  },
+};
+
+export const Client: Story = {
+  render: (args) => <Template {...args} />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+  args: {
+    size: 150,
+  },
+};
diff --git a/src/stories/molecules/SectionTitle.stories.tsx b/src/stories/molecules/SectionTitle.stories.tsx
index a9036f8..8df56c0 100644
--- a/src/stories/molecules/SectionTitle.stories.tsx
+++ b/src/stories/molecules/SectionTitle.stories.tsx
@@ -1,17 +1,43 @@
 import React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
-import { SectionTitle as SectionTitleComponent, Stack } from '../..';
+import type { Meta } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
+import {
+  clientTheme,
+  defaultTheme,
+  Modal as ModalComponent,
+  SectionTitle as SectionTitleComponent,
+  Stack,
+} from '../..';
 
 export default {
   title: 'Components/Molecules/Section Title',
   component: SectionTitleComponent,
 } as Meta;
-
-const SectionTitle: StoryFn<typeof SectionTitleComponent> = () => (
+type Story = StoryObj<typeof ModalComponent>;
+const Template = () => (
   <Stack justify='center' my={100}>
     <SectionTitleComponent title='The Adventure Awaits' />
     <SectionTitleComponent />
   </Stack>
 );
 
-export { SectionTitle };
+export const Guild: Story = {
+  render: () => <Template />,
+  name: 'RaidGuild',
+
+  parameters: {
+    chakra: {
+      theme: defaultTheme,
+    },
+  },
+};
+
+export const Client: Story = {
+  render: () => <Template />,
+  name: 'ClientTheme',
+  parameters: {
+    chakra: {
+      theme: clientTheme,
+    },
+  },
+};

From 3cd200797ef8f27b46d2b16bc99958489791fb1a Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Tue, 21 Mar 2023 10:13:41 +0200
Subject: [PATCH 3/8] switch to using theme switch in top bar

---
 .storybook/main.ts                            |  2 +-
 .storybook/preview.js                         | 37 ----------
 .storybook/preview.tsx                        | 62 ++++++++++++++++
 src/stories/atoms/Accordion.stories.tsx       | 32 +--------
 src/stories/atoms/Badge.stories.tsx           | 33 ++-------
 src/stories/atoms/Button.stories.tsx          | 35 ++-------
 src/stories/atoms/Card.stories.tsx            | 37 ++--------
 src/stories/atoms/DatePicker.stories.tsx      | 35 ++-------
 src/stories/atoms/Heading.stories.tsx         | 36 ++--------
 src/stories/atoms/List.stories.tsx            | 35 ++-------
 src/stories/atoms/Menu.stories.tsx            | 32 +--------
 src/stories/atoms/Spinner.stories.tsx         | 32 ++-------
 src/stories/atoms/Tabs.stories.tsx            | 26 +------
 src/stories/atoms/Tag.stories.tsx             | 36 ++--------
 src/stories/atoms/Text.stories.tsx            | 36 ++--------
 src/stories/atoms/Toast.stories.tsx           | 28 +-------
 src/stories/atoms/Tooltip.stories.tsx         | 32 ++-------
 src/stories/molecules/AlertDialog.stories.tsx | 27 +------
 .../molecules/BuiltByRaidGuild.stories.tsx    | 32 ++-------
 src/stories/molecules/ButtonGroup.stories.tsx | 71 ++++---------------
 src/stories/molecules/Modal.stories.tsx       | 28 +-------
 src/stories/molecules/RoleBadge.stories.tsx   | 38 ++--------
 .../molecules/SectionTitle.stories.tsx        | 36 ++--------
 23 files changed, 152 insertions(+), 646 deletions(-)
 delete mode 100644 .storybook/preview.js
 create mode 100644 .storybook/preview.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 8468c49..6436344 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     { name: '@storybook/addon-essentials', options: { docs: false } },
     '@storybook/addon-docs',
-    '@chakra-ui/storybook-addon',
+    // '@chakra-ui/storybook-addon',
   ],
   core: {
     builder: {
diff --git a/.storybook/preview.js b/.storybook/preview.js
deleted file mode 100644
index b33f135..0000000
--- a/.storybook/preview.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { Fonts, Box } from '../src';
-
-export const parameters = {
-  viewport: {
-    viewports: INITIAL_VIEWPORTS,
-  },
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  // Storybook a11y addon configuration
-  a11y: {
-    // the target DOM element
-    element: '#root',
-    // sets the execution mode for the addon
-    manual: false,
-  },
-  controls: {
-    expanded: true,
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  options: {
-    storySort: {
-      method: 'alphabetical',
-    },
-  },
-};
-
-export const decorators = [
-  (Story) => (
-    <Box>
-      <Fonts />
-      <Story />
-    </Box>
-  ),
-];
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 0000000..2b69076
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,62 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { Fonts, Box, RGThemeProvider, defaultTheme, clientTheme } from '../src';
+import { Decorator } from '@storybook/react';
+import React from 'react';
+
+export const parameters = {
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  // Storybook a11y addon configuration
+  a11y: {
+    // the target DOM element
+    element: '#root',
+    // sets the execution mode for the addon
+    manual: false,
+  },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+    },
+  },
+};
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      // Array of plain string values or MenuItem shape (see below)
+      items: ['guild', 'client'],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+};
+
+export const decorators: Decorator[] = [
+  (Story, context) => {
+    const theme = context.parameters.theme || context.globals.theme;
+    const storyTheme = theme === 'guild' ? defaultTheme : clientTheme;
+    return (
+      <Box>
+        <Fonts />
+        <RGThemeProvider theme={storyTheme}>
+          <Story />
+        </RGThemeProvider>
+      </Box>
+    );
+  },
+];
diff --git a/src/stories/atoms/Accordion.stories.tsx b/src/stories/atoms/Accordion.stories.tsx
index aa7dd93..2e3d38f 100644
--- a/src/stories/atoms/Accordion.stories.tsx
+++ b/src/stories/atoms/Accordion.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
   Accordion as AccordionComponent,
   AccordionItem,
@@ -8,25 +8,17 @@ import {
   AccordionIcon,
   Text,
   Heading,
-  defaultTheme,
-  clientTheme,
 } from '../..';
 
 export default {
   title: 'Components/Atoms/Accordion',
   component: AccordionComponent,
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
 } as Meta<typeof AccordionComponent>;
-type Story = StoryObj<typeof AccordionComponent>;
 
 // eslint-disable-next-line max-len
 // TODO this could be abstracted to its own component, but just added the style to the default chakra component for now
 
-const AccordionStoryContent = () => (
+const Accordion: StoryFn<typeof AccordionComponent> = () => (
   <AccordionComponent allowToggle>
     <AccordionItem>
       <AccordionButton justifyContent='space-between'>
@@ -49,22 +41,4 @@ const AccordionStoryContent = () => (
   </AccordionComponent>
 );
 
-export const Guild: Story = {
-  render: () => <AccordionStoryContent />,
-  name: 'RaidGuild',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <AccordionStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Accordion };
diff --git a/src/stories/atoms/Badge.stories.tsx b/src/stories/atoms/Badge.stories.tsx
index 10d2add..4be52b8 100644
--- a/src/stories/atoms/Badge.stories.tsx
+++ b/src/stories/atoms/Badge.stories.tsx
@@ -1,18 +1,11 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  Badge as BadgeComponent,
-  Stack,
-  HStack,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { Meta, StoryFn } from '@storybook/react';
+import { Badge as BadgeComponent, Stack, HStack } from '../..';
 
 export default {
   title: 'Components/Atoms/Badge',
   component: BadgeComponent,
 } as Meta<typeof BadgeComponent>;
-type Story = StoryObj<typeof BadgeComponent>;
 
 const badgeColors = [
   { name: 'Default', color: 'gray' },
@@ -23,7 +16,7 @@ const badgeColors = [
 
 const badgeVariants = ['outline', 'solid', 'subtle'];
 
-const BadgeStoryContent = () => (
+const Badge: StoryFn<typeof BadgeComponent> = () => (
   <Stack>
     {badgeColors.map((b) => (
       <HStack key={b.name}>
@@ -41,22 +34,4 @@ const BadgeStoryContent = () => (
   </Stack>
 );
 
-export const Guild: Story = {
-  render: () => <BadgeStoryContent />,
-  name: 'RaidGuild',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <BadgeStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Badge };
diff --git a/src/stories/atoms/Button.stories.tsx b/src/stories/atoms/Button.stories.tsx
index 3d5b6fa..0348981 100644
--- a/src/stories/atoms/Button.stories.tsx
+++ b/src/stories/atoms/Button.stories.tsx
@@ -1,19 +1,11 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  Button as ButtonComponent,
-  clientTheme,
-  defaultTheme,
-  Flex,
-  Stack,
-  Text,
-} from '../..';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button as ButtonComponent, Flex, Stack, Text } from '../..';
 
 export default {
   title: 'Components/Atoms/Buttons',
   component: ButtonComponent,
 } as Meta<typeof ButtonComponent>;
-type Story = StoryObj<typeof ButtonComponent>;
 
 const buttonVariants = [
   { name: 'Solid', variant: 'solid' },
@@ -23,7 +15,7 @@ const buttonVariants = [
   { name: 'Ghost', variant: 'ghost' },
 ];
 
-const ButtonsStoryContent = () => (
+const Buttons: StoryFn<typeof ButtonComponent> = () => (
   <Stack>
     {buttonVariants.map((button) => (
       <Flex width='400px' justify='space-between' key='variant'>
@@ -36,23 +28,4 @@ const ButtonsStoryContent = () => (
   </Stack>
 );
 
-export const Guild: Story = {
-  render: () => <ButtonsStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <ButtonsStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Buttons };
diff --git a/src/stories/atoms/Card.stories.tsx b/src/stories/atoms/Card.stories.tsx
index e3a0850..14cca22 100644
--- a/src/stories/atoms/Card.stories.tsx
+++ b/src/stories/atoms/Card.stories.tsx
@@ -1,15 +1,6 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  Card,
-  Image,
-  HStack,
-  SimpleGrid,
-  Heading,
-  Text,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { Meta, StoryFn } from '@storybook/react';
+import { Card, Image, HStack, SimpleGrid, Heading, Text } from '../..';
 import imgDesignSprints from '../../assets/images/designsprints.png';
 import { RoleBadge } from '../../components/molecules';
 
@@ -21,7 +12,6 @@ export default {
   title: 'Components/Atoms/Cards',
   component: Card,
 } as Meta<typeof Card>;
-type Story = StoryObj<typeof Card>;
 
 const cardVariants = [
   'fullBorder',
@@ -36,7 +26,7 @@ const title = 'Card Title';
 const cardCopy =
   'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores eius amet quisquam ratione, perspiciatis voluptatem officia.';
 
-const CardStoryContent = () => (
+const Cards: StoryFn<typeof Card> = () => (
   <SimpleGrid
     columns={{ base: 1, md: 2, lg: 2 }}
     gap='4rem'
@@ -82,23 +72,4 @@ const CardStoryContent = () => (
   </SimpleGrid>
 );
 
-export const Guild: Story = {
-  render: () => <CardStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <CardStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Cards };
diff --git a/src/stories/atoms/DatePicker.stories.tsx b/src/stories/atoms/DatePicker.stories.tsx
index c90388e..87a8e52 100644
--- a/src/stories/atoms/DatePicker.stories.tsx
+++ b/src/stories/atoms/DatePicker.stories.tsx
@@ -1,22 +1,14 @@
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  DatePicker as DatePickerComponent,
-  Box,
-  Stack,
-  Text,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { Meta, StoryFn } from '@storybook/react';
+import { DatePicker as DatePickerComponent, Box, Stack, Text } from '../..';
 
 export default {
   title: 'Components/Atoms/DatePicker',
   component: DatePickerComponent,
 } as Meta;
-type Story = StoryObj<typeof DatePickerComponent>;
 
-const DatePickerStoryContent = () => {
+const DatePicker: StoryFn<typeof DatePickerComponent> = () => {
   const localForm = useForm();
   useEffect(() => {
     localForm.reset({ raidStartDate: new Date() });
@@ -43,23 +35,4 @@ const DatePickerStoryContent = () => {
   );
 };
 
-export const Guild: Story = {
-  render: () => <DatePickerStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <DatePickerStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { DatePicker };
diff --git a/src/stories/atoms/Heading.stories.tsx b/src/stories/atoms/Heading.stories.tsx
index 7c426a7..8710fcf 100644
--- a/src/stories/atoms/Heading.stories.tsx
+++ b/src/stories/atoms/Heading.stories.tsx
@@ -1,21 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import {
-  Heading as HeadingComponent,
-  Stack,
-  Flex,
-  Text,
-  HeadingProps,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { Heading as HeadingComponent, Stack, Flex, Text } from '../..';
 import { HeadingVariants } from '../../components/atoms/Heading';
 
 export default {
   title: 'Components/Atoms/Heading',
   component: HeadingComponent,
 } as Meta;
-type Story = StoryObj<typeof HeadingComponent>;
 
 const headingExamples: Array<{ size: string }> = [
   { size: '4xl' },
@@ -31,7 +22,7 @@ const headingVariants: HeadingVariants[] = ['shadow', 'noShadow'];
 
 const copy = 'RaidGuild vs Moloch';
 
-const HeadingStoryContent = (args: HeadingProps) => (
+const Heading: StoryFn<typeof HeadingComponent> = (args) => (
   <Stack spacing={4}>
     {/* Map out each size */}
     {headingExamples.map((example) => (
@@ -50,23 +41,4 @@ const HeadingStoryContent = (args: HeadingProps) => (
   </Stack>
 );
 
-export const Guild: Story = {
-  render: (args) => <HeadingStoryContent {...args} />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: (args) => <HeadingStoryContent {...args} />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Heading };
diff --git a/src/stories/atoms/List.stories.tsx b/src/stories/atoms/List.stories.tsx
index ddb3348..c60dfdd 100644
--- a/src/stories/atoms/List.stories.tsx
+++ b/src/stories/atoms/List.stories.tsx
@@ -1,28 +1,20 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { ListItemProps } from 'components/atoms/List/List';
-import {
-  List as ListComponent,
-  HStack,
-  Stack,
-  Heading,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { List as ListComponent, HStack, Stack, Heading } from '../..';
 import Castle from '../../components/icons/Castle';
 
 export default {
   title: 'Components/Atoms/List',
   component: ListComponent,
 } as Meta<typeof ListComponent>;
-type Story = StoryObj<typeof ListComponent>;
 
 type ListEntry = Partial<ListItemProps> & {
   name: string;
   ordered?: boolean;
 };
 
-const ListStoryContent = () => {
+const List: StoryFn<typeof ListComponent> = () => {
   const listItems = ['lorem ipsum 1', 'lorem ipsum 2', 'lorem ipsum 3'];
 
   const listVariants: ListEntry[] = [
@@ -49,23 +41,4 @@ const ListStoryContent = () => {
   );
 };
 
-export const Guild: Story = {
-  render: () => <ListStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <ListStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { List };
diff --git a/src/stories/atoms/Menu.stories.tsx b/src/stories/atoms/Menu.stories.tsx
index 8150a3b..3dde324 100644
--- a/src/stories/atoms/Menu.stories.tsx
+++ b/src/stories/atoms/Menu.stories.tsx
@@ -1,7 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { FaCaretDown } from 'react-icons/fa';
-import { StoryObj } from '@storybook/react';
 import {
   Menu as MenuComponent,
   MenuButton,
@@ -10,11 +9,9 @@ import {
   Text,
   Flex,
   Icon,
-  defaultTheme,
-  clientTheme,
 } from '../..';
 
-const MenuStoryContent = () => {
+export const Menu: StoryFn = () => {
   return (
     <MenuComponent>
       <MenuButton>
@@ -30,33 +27,10 @@ const MenuStoryContent = () => {
   );
 };
 
-const args = {
+Menu.args = {
   size: 150,
 };
 
 export default {
   title: 'Components/Atoms/Menu',
-  args,
-  component: MenuComponent,
 } as Meta;
-type Story = StoryObj<typeof MenuComponent>;
-
-export const Guild: Story = {
-  render: () => <MenuStoryContent />,
-  name: 'RaidGuild',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <MenuStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
diff --git a/src/stories/atoms/Spinner.stories.tsx b/src/stories/atoms/Spinner.stories.tsx
index 733dd78..d9af14e 100644
--- a/src/stories/atoms/Spinner.stories.tsx
+++ b/src/stories/atoms/Spinner.stories.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  clientTheme,
-  defaultTheme,
-  Spinner as SpinnerComponent,
-  Stack,
-} from '../..';
+import { Meta, StoryFn } from '@storybook/react';
+import { Spinner as SpinnerComponent, Stack } from '../..';
 
 export default {
   title: 'Components/Atoms/Spinner',
   component: SpinnerComponent,
 } as Meta<typeof SpinnerComponent>;
-type Story = StoryObj<typeof SpinnerComponent>;
 
 const spinnerSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-const SpinnerStoryContent = () => (
+const Spinner: StoryFn<typeof SpinnerComponent> = () => (
   <Stack>
     {spinnerSizes.map((size) => (
       <SpinnerComponent size={size} key={size} />
@@ -23,22 +17,4 @@ const SpinnerStoryContent = () => (
   </Stack>
 );
 
-export const Guild: Story = {
-  render: () => <SpinnerStoryContent />,
-  name: 'RaidGuild',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <SpinnerStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Spinner };
diff --git a/src/stories/atoms/Tabs.stories.tsx b/src/stories/atoms/Tabs.stories.tsx
index 8160c9c..781319a 100644
--- a/src/stories/atoms/Tabs.stories.tsx
+++ b/src/stories/atoms/Tabs.stories.tsx
@@ -1,22 +1,19 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
   Tabs as TabsComponent,
   Tab,
   TabList,
   TabPanels,
   TabPanel,
-  clientTheme,
-  defaultTheme,
 } from '../..';
 
 export default {
   title: 'Components/Atoms/Tabs',
   component: TabsComponent,
 } as Meta<typeof TabsComponent>;
-type Story = StoryObj<typeof TabsComponent>;
 
-const TabsStoryContent = () => (
+const Tabs: StoryFn<typeof TabsComponent> = () => (
   <TabsComponent>
     <TabList>
       <Tab>Test 1</Tab>
@@ -28,22 +25,5 @@ const TabsStoryContent = () => (
     </TabPanels>
   </TabsComponent>
 );
-export const Guild: Story = {
-  render: () => <TabsStoryContent />,
-  name: 'RaidGuild',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
 
-export const Client: Story = {
-  render: () => <TabsStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Tabs };
diff --git a/src/stories/atoms/Tag.stories.tsx b/src/stories/atoms/Tag.stories.tsx
index a9573e0..e5156ee 100644
--- a/src/stories/atoms/Tag.stories.tsx
+++ b/src/stories/atoms/Tag.stories.tsx
@@ -1,20 +1,11 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  Tag as TagComponent,
-  Stack,
-  Text,
-  Heading,
-  Flex,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { Meta, StoryFn } from '@storybook/react';
+import { Tag as TagComponent, Stack, Text, Heading, Flex } from '../..';
 
 export default {
   title: 'Components/Atoms/Tags',
   component: TagComponent,
 } as Meta<typeof TagComponent>;
-type Story = StoryObj<typeof TagComponent>;
 
 const tagVariants = [
   { name: 'Solid', variant: 'solid' },
@@ -28,7 +19,7 @@ const tagSizes = [
   { name: 'Large', size: 'lg' },
 ];
 
-const TagsStoryContent = () => (
+const Tags: StoryFn<typeof TagComponent> = () => (
   <Stack spacing={10}>
     {tagSizes.map((size) => (
       <Stack w='600px' key={size.name}>
@@ -54,23 +45,4 @@ const TagsStoryContent = () => (
   </Stack>
 );
 
-export const Guild: Story = {
-  render: () => <TagsStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <TagsStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Tags };
diff --git a/src/stories/atoms/Text.stories.tsx b/src/stories/atoms/Text.stories.tsx
index 9524d30..567c39e 100644
--- a/src/stories/atoms/Text.stories.tsx
+++ b/src/stories/atoms/Text.stories.tsx
@@ -1,13 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import {
-  Text as TextComponent,
-  Stack,
-  Flex,
-  TextProps,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { Text as TextComponent, Stack, Flex } from '../..';
 
 export default {
   title: 'Components/Atoms/Text',
@@ -23,8 +16,7 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as Meta<typeof TextComponent>;
-type Story = StoryObj<typeof TextComponent>;
+} as Meta;
 
 const textExamples: Array<{ size: any }> = [
   { size: '4xl' },
@@ -38,7 +30,7 @@ const textExamples: Array<{ size: any }> = [
 
 const copy = 'At the table of rounds we lay our swords.';
 
-const TextStoryContent = (args: TextProps) => (
+const Text: StoryFn<typeof TextComponent> = (args) => (
   <Stack spacing={3}>
     {textExamples.map((text) => (
       <Flex align='center' key={text.size}>
@@ -53,22 +45,4 @@ const TextStoryContent = (args: TextProps) => (
   </Stack>
 );
 
-export const Guild: Story = {
-  render: (args) => <TextStoryContent {...args} />,
-  name: 'RaidGuild',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: (args) => <TextStoryContent {...args} />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Text };
diff --git a/src/stories/atoms/Toast.stories.tsx b/src/stories/atoms/Toast.stories.tsx
index 127d22d..e411e6f 100644
--- a/src/stories/atoms/Toast.stories.tsx
+++ b/src/stories/atoms/Toast.stories.tsx
@@ -1,22 +1,19 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
   Toast as ToastComponent,
   Button,
   useToast,
   Stack,
-  defaultTheme,
   ToastProvider,
-  clientTheme,
 } from '../..';
 
 export default {
   title: 'Components/Atoms/Toast',
   component: ToastComponent,
 } as Meta<typeof ToastComponent>;
-type Story = StoryObj<typeof ToastComponent>;
 
-const ToastStoryContent = () => {
+const Toast: StoryFn = () => {
   const toast = useToast();
 
   const clickSuccessToast = () => {
@@ -84,23 +81,4 @@ const ToastStoryContent = () => {
   );
 };
 
-export const Guild: Story = {
-  render: () => <ToastStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <ToastStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Toast };
diff --git a/src/stories/atoms/Tooltip.stories.tsx b/src/stories/atoms/Tooltip.stories.tsx
index 973f533..7c1607c 100644
--- a/src/stories/atoms/Tooltip.stories.tsx
+++ b/src/stories/atoms/Tooltip.stories.tsx
@@ -1,19 +1,13 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  Tooltip as TooltipComponent,
-  Button,
-  defaultTheme,
-  clientTheme,
-} from '../..';
+import { Meta, StoryFn } from '@storybook/react';
+import { Tooltip as TooltipComponent, Button } from '../..';
 
 export default {
   title: 'Components/Atoms/Tooltip',
   component: TooltipComponent,
 } as Meta<typeof TooltipComponent>;
-type Story = StoryObj<typeof TooltipComponent>;
 
-const TooltipStoryContent = () => (
+const Tooltip: StoryFn<typeof TooltipComponent> = () => (
   <TooltipComponent
     label="Reason you can't click"
     placement='end'
@@ -24,22 +18,4 @@ const TooltipStoryContent = () => (
   </TooltipComponent>
 );
 
-export const Guild: Story = {
-  render: () => <TooltipStoryContent />,
-  name: 'RaidGuild',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <TooltipStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Tooltip };
diff --git a/src/stories/molecules/AlertDialog.stories.tsx b/src/stories/molecules/AlertDialog.stories.tsx
index d641441..bed03a6 100644
--- a/src/stories/molecules/AlertDialog.stories.tsx
+++ b/src/stories/molecules/AlertDialog.stories.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
   AlertDialog as AlertDialogComponent,
   Button,
   Box,
   useDisclosure,
-  defaultTheme,
-  clientTheme,
 } from '../..';
 
-const AlertDialogStoryContent = () => {
+export const AlertDialog: StoryFn = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const submit = () => {
@@ -35,29 +33,8 @@ const AlertDialogStoryContent = () => {
     </Box>
   );
 };
-export const Guild: Story = {
-  render: () => <AlertDialogStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <AlertDialogStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
 
 export default {
   title: 'Components/Molecules/Alert Dialog',
   component: AlertDialogComponent,
 } as Meta;
-type Story = StoryObj<typeof AlertDialogComponent>;
diff --git a/src/stories/molecules/BuiltByRaidGuild.stories.tsx b/src/stories/molecules/BuiltByRaidGuild.stories.tsx
index 635070b..bda71ce 100644
--- a/src/stories/molecules/BuiltByRaidGuild.stories.tsx
+++ b/src/stories/molecules/BuiltByRaidGuild.stories.tsx
@@ -1,36 +1,12 @@
+import type { StoryFn } from '@storybook/react';
 import React from 'react';
-import { StoryObj } from '@storybook/react';
-import {
-  BuiltByRaidGuild as BuiltByRaidGuildComponent,
-  clientTheme,
-  defaultTheme,
-} from '../..';
+import { BuiltByRaidGuild as BuiltByRaidGuildComponent } from '../..';
 
 export default {
   title: 'Components/Molecules/BuiltByRaidGuild',
   component: BuiltByRaidGuildComponent,
 };
-type Story = StoryObj<typeof BuiltByRaidGuildComponent>;
 
-const BuiltByRaidGuildStoryContent = () => <BuiltByRaidGuildComponent />;
+const BuiltByRaidGuild: StoryFn = () => <BuiltByRaidGuildComponent />;
 
-export const Guild: Story = {
-  render: () => <BuiltByRaidGuildStoryContent />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <BuiltByRaidGuildStoryContent />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { BuiltByRaidGuild };
diff --git a/src/stories/molecules/ButtonGroup.stories.tsx b/src/stories/molecules/ButtonGroup.stories.tsx
index 733a525..4239058 100644
--- a/src/stories/molecules/ButtonGroup.stories.tsx
+++ b/src/stories/molecules/ButtonGroup.stories.tsx
@@ -1,77 +1,36 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import { ButtonGroup, clientTheme, defaultTheme } from '../..';
+import { ButtonGroup } from '../..';
 
 export default {
   title: 'Components/Molecules/ButtonGroup',
   component: ButtonGroup,
   argTypes: {
     isAttached: { control: 'boolean' },
+    // buttons: {
+    //   options: ['One', 'Two', 'Three', 'Four'],
+    //   control: { type: 'check' },
+    // },
     spacing: { control: 'number' },
     size: { options: ['xs', 'sm', 'md', 'lg'], control: { type: 'radio' } },
   },
 } as Meta;
-type Story = StoryObj<typeof ButtonGroup>;
 
-const Template: StoryFn<{ buttons: string[]; isAttached?: boolean }> = ({
+const Template: StoryFn<any> = ({
   buttons,
   ...args
 }: {
   buttons: string[];
 }) => <ButtonGroup buttons={buttons} onSelect={() => null} {...args} />;
 
-export const GuildAttached: Story = {
-  render: (args) => <Template {...args} />,
-  name: 'RaidGuild - Attached',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-  args: {
-    buttons: ['Tic', 'Tac', 'Toe'],
-    isAttached: true,
-  },
-};
-
-export const GuildSpaced: Story = {
-  render: (args) => <Template {...args} />,
-  name: 'RaidGuild - Spaced',
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-  args: {
-    buttons: ['Tic', 'Tac', 'Toe'],
-    isAttached: false,
-  },
+export const Attached = Template.bind({});
+Attached.args = {
+  buttons: ['Tic', 'Tac', 'Toe'],
+  isAttached: true,
 };
 
-export const ClientAttached: Story = {
-  render: (args) => <Template {...args} />,
-  name: 'ClientTheme - Attached',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-  args: {
-    buttons: ['Tic', 'Tac', 'Toe'],
-    isAttached: true,
-  },
-};
-
-export const ClientSpaced: Story = {
-  render: (args) => <Template {...args} />,
-  name: 'ClientTheme - Spaced',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-  args: {
-    buttons: ['Tic', 'Tac', 'Toe'],
-    isAttached: false,
-  },
+export const Spaced = Template.bind({});
+Spaced.args = {
+  buttons: ['Pinapple', 'Pen'],
+  isAttached: false,
 };
diff --git a/src/stories/molecules/Modal.stories.tsx b/src/stories/molecules/Modal.stories.tsx
index a2aff3c..90a863f 100644
--- a/src/stories/molecules/Modal.stories.tsx
+++ b/src/stories/molecules/Modal.stories.tsx
@@ -1,22 +1,19 @@
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
   Modal as ModalComponent,
   Button,
   Box,
   useDisclosure,
   Text,
-  defaultTheme,
-  clientTheme,
 } from '../..';
 
 export default {
   title: 'Components/Molecules/Modal',
   component: ModalComponent,
 } as Meta<typeof ModalComponent>;
-type Story = StoryObj<typeof ModalComponent>;
 
-const Template = () => {
+const Modal: StoryFn<typeof ModalComponent> = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const submit = () => {
@@ -44,23 +41,4 @@ const Template = () => {
   );
 };
 
-export const Guild: Story = {
-  render: () => <Template />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <Template />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { Modal };
diff --git a/src/stories/molecules/RoleBadge.stories.tsx b/src/stories/molecules/RoleBadge.stories.tsx
index b4d03f8..8fe6bdb 100644
--- a/src/stories/molecules/RoleBadge.stories.tsx
+++ b/src/stories/molecules/RoleBadge.stories.tsx
@@ -1,9 +1,8 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { SimpleGrid, Stack } from '../../components/chakra';
 import { Heading } from '../../components/atoms';
 import { RoleBadge } from '../../components/molecules/RoleBadge';
-import defaultTheme, { clientTheme } from '../../theme';
 
 const roles = [
   'alchemist',
@@ -52,35 +51,12 @@ const Template: StoryFn<RoleBadgeStoryProps> = ({
   );
 };
 
+export const RoleBadges = Template.bind({});
+RoleBadges.args = {
+  size: 150,
+};
+
 export default {
   title: 'Components/Molecules/RoleBadges',
-  component: RoleBadge,
+  component: RoleBadges,
 } as Meta;
-type Story = StoryObj<RoleBadgeStoryProps>;
-
-export const Guild: Story = {
-  render: (args) => <Template {...args} />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-  args: {
-    size: 150,
-  },
-};
-
-export const Client: Story = {
-  render: (args) => <Template {...args} />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-  args: {
-    size: 150,
-  },
-};
diff --git a/src/stories/molecules/SectionTitle.stories.tsx b/src/stories/molecules/SectionTitle.stories.tsx
index 8df56c0..a9036f8 100644
--- a/src/stories/molecules/SectionTitle.stories.tsx
+++ b/src/stories/molecules/SectionTitle.stories.tsx
@@ -1,43 +1,17 @@
 import React from 'react';
-import type { Meta } from '@storybook/react';
-import { StoryObj } from '@storybook/react';
-import {
-  clientTheme,
-  defaultTheme,
-  Modal as ModalComponent,
-  SectionTitle as SectionTitleComponent,
-  Stack,
-} from '../..';
+import type { Meta, StoryFn } from '@storybook/react';
+import { SectionTitle as SectionTitleComponent, Stack } from '../..';
 
 export default {
   title: 'Components/Molecules/Section Title',
   component: SectionTitleComponent,
 } as Meta;
-type Story = StoryObj<typeof ModalComponent>;
-const Template = () => (
+
+const SectionTitle: StoryFn<typeof SectionTitleComponent> = () => (
   <Stack justify='center' my={100}>
     <SectionTitleComponent title='The Adventure Awaits' />
     <SectionTitleComponent />
   </Stack>
 );
 
-export const Guild: Story = {
-  render: () => <Template />,
-  name: 'RaidGuild',
-
-  parameters: {
-    chakra: {
-      theme: defaultTheme,
-    },
-  },
-};
-
-export const Client: Story = {
-  render: () => <Template />,
-  name: 'ClientTheme',
-  parameters: {
-    chakra: {
-      theme: clientTheme,
-    },
-  },
-};
+export { SectionTitle };

From f31e688b0bc83e9c658e7f1a5414fffc9e8051e0 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Tue, 21 Mar 2023 14:00:49 +0200
Subject: [PATCH 4/8] add storybook theme based utility functions

---
 .storybook/preview.tsx                |  9 +++--
 README.md                             |  3 ++
 src/stories/StoryBookThemeContext.tsx | 31 +++++++++++++++++
 src/stories/atoms/Button.stories.tsx  | 49 +++++++++++++++++++--------
 src/theme/index.ts                    |  7 +++-
 5 files changed, 81 insertions(+), 18 deletions(-)
 create mode 100644 src/stories/StoryBookThemeContext.tsx

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 2b69076..f2fd6d4 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,6 +2,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { Fonts, Box, RGThemeProvider, defaultTheme, clientTheme } from '../src';
 import { Decorator } from '@storybook/react';
 import React from 'react';
+import { StoryBookThemeContext } from '../src/stories/StoryBookThemeContext';
 
 export const parameters = {
   viewport: {
@@ -53,9 +54,11 @@ export const decorators: Decorator[] = [
     return (
       <Box>
         <Fonts />
-        <RGThemeProvider theme={storyTheme}>
-          <Story />
-        </RGThemeProvider>
+        <StoryBookThemeContext.Provider value={{ theme }}>
+          <RGThemeProvider theme={storyTheme}>
+            <Story />
+          </RGThemeProvider>
+        </StoryBookThemeContext.Provider>
       </Box>
     );
   },
diff --git a/README.md b/README.md
index ef6ec5c..8e244a0 100644
--- a/README.md
+++ b/README.md
@@ -23,3 +23,6 @@ On http://localhost:6006/ you'll see the components built in the [storybook](htt
 ## Prettier
 
 If you do not already use [Prettier](https://prettier.io/), please add Prettier to your text editor. Prettier allows us to have consistent formatting without having to think much about it.
+
+## Helper components
+Not all variations and components are available in both themes. Helper utility components (`<RaidGuildThemeOnly />` and `<ClientThemeOnly />`) exist to conditionally hide certain parts of a story depending on the theme.
\ No newline at end of file
diff --git a/src/stories/StoryBookThemeContext.tsx b/src/stories/StoryBookThemeContext.tsx
new file mode 100644
index 0000000..dd4cc0a
--- /dev/null
+++ b/src/stories/StoryBookThemeContext.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import React, { PropsWithChildren, useContext } from 'react';
+
+export const StoryBookThemeContext = React.createContext<{
+  theme: 'client' | 'guild';
+}>({ theme: 'guild' });
+
+export const useCurrentTheme = () => {
+  const { theme } = useContext(StoryBookThemeContext);
+  return theme;
+};
+
+export const RaidGuildThemeOnly = ({ children }: PropsWithChildren) => {
+  const theme = useCurrentTheme();
+
+  if (theme !== 'guild') {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export const ClientThemeOnly = ({ children }: PropsWithChildren) => {
+  const theme = useCurrentTheme();
+
+  if (theme !== 'client') {
+    return null;
+  }
+
+  return <>{children}</>;
+};
diff --git a/src/stories/atoms/Button.stories.tsx b/src/stories/atoms/Button.stories.tsx
index 0348981..90f3398 100644
--- a/src/stories/atoms/Button.stories.tsx
+++ b/src/stories/atoms/Button.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Button as ButtonComponent, Flex, Stack, Text } from '../..';
+import { RaidGuildThemeOnly } from '../StoryBookThemeContext';
 
 export default {
   title: 'Components/Atoms/Buttons',
@@ -9,23 +10,43 @@ export default {
 
 const buttonVariants = [
   { name: 'Solid', variant: 'solid' },
-  { name: 'Bright', variant: 'bright' },
+  { name: 'Bright', variant: 'bright', raidGuildThemeOnly: true },
   { name: 'Outline', variant: 'outline' },
-  { name: 'Gradient Outline', variant: 'gradientOutline' },
+  {
+    name: 'Gradient Outline',
+    variant: 'gradientOutline',
+    raidGuildThemeOnly: true,
+  },
   { name: 'Ghost', variant: 'ghost' },
 ];
 
-const Buttons: StoryFn<typeof ButtonComponent> = () => (
-  <Stack>
-    {buttonVariants.map((button) => (
-      <Flex width='400px' justify='space-between' key='variant'>
-        <Text size='lg'>{button.name}</Text>
-        <ButtonComponent variant={button.variant} width='150px'>
-          Let&apos;s Go
-        </ButtonComponent>
-      </Flex>
-    ))}
-  </Stack>
-);
+const Buttons: StoryFn<typeof ButtonComponent> = () => {
+  return (
+    <Stack>
+      {buttonVariants.map((button) => {
+        if (button.raidGuildThemeOnly) {
+          return (
+            <RaidGuildThemeOnly key={button.variant}>
+              <Flex width='400px' justify='space-between' key={button.variant}>
+                <Text size='lg'>{button.name}</Text>
+                <ButtonComponent variant={button.variant} width='150px'>
+                  Let&apos;s Go
+                </ButtonComponent>
+              </Flex>
+            </RaidGuildThemeOnly>
+          );
+        }
+        return (
+          <Flex width='400px' justify='space-between' key={button.variant}>
+            <Text size='lg'>{button.name}</Text>
+            <ButtonComponent variant={button.variant} width='150px'>
+              Let&apos;s Go
+            </ButtonComponent>
+          </Flex>
+        );
+      })}
+    </Stack>
+  );
+};
 
 export { Buttons };
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 65a60a8..ee6b238 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -90,6 +90,11 @@ const theme = extendTheme({
   },
 });
 
-export const clientTheme = extendTheme({});
+export const clientTheme = extendTheme({
+  colors,
+  layerStyles: {
+    ...gradientStyles,
+  },
+});
 
 export default theme;

From f4babfe056d5e2d4540471ebf841a7414e9aeb93 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Tue, 21 Mar 2023 14:29:44 +0200
Subject: [PATCH 5/8] rename for consistency

---
 .storybook/preview.tsx                               | 6 +++---
 src/stories/atoms/Button.stories.tsx                 | 2 +-
 src/stories/{StoryBookThemeContext.tsx => utils.tsx} | 0
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename src/stories/{StoryBookThemeContext.tsx => utils.tsx} (100%)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index f2fd6d4..58e5589 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { Fonts, Box, RGThemeProvider, defaultTheme, clientTheme } from '../src';
 import { Decorator } from '@storybook/react';
 import React from 'react';
-import { StoryBookThemeContext } from '../src/stories/StoryBookThemeContext';
+import { Utils } from '../src/stories/utils';
 
 export const parameters = {
   viewport: {
@@ -54,11 +54,11 @@ export const decorators: Decorator[] = [
     return (
       <Box>
         <Fonts />
-        <StoryBookThemeContext.Provider value={{ theme }}>
+        <Utils.Provider value={{ theme }}>
           <RGThemeProvider theme={storyTheme}>
             <Story />
           </RGThemeProvider>
-        </StoryBookThemeContext.Provider>
+        </Utils.Provider>
       </Box>
     );
   },
diff --git a/src/stories/atoms/Button.stories.tsx b/src/stories/atoms/Button.stories.tsx
index 90f3398..3f6c002 100644
--- a/src/stories/atoms/Button.stories.tsx
+++ b/src/stories/atoms/Button.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Button as ButtonComponent, Flex, Stack, Text } from '../..';
-import { RaidGuildThemeOnly } from '../StoryBookThemeContext';
+import { RaidGuildThemeOnly } from '../utils';
 
 export default {
   title: 'Components/Atoms/Buttons',
diff --git a/src/stories/StoryBookThemeContext.tsx b/src/stories/utils.tsx
similarity index 100%
rename from src/stories/StoryBookThemeContext.tsx
rename to src/stories/utils.tsx

From 85b47a606680cd152af6836431f742f6637076b5 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Tue, 21 Mar 2023 14:37:51 +0200
Subject: [PATCH 6/8] remove redundant file

---
 src/stories/constants.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/stories/constants.ts

diff --git a/src/stories/constants.ts b/src/stories/constants.ts
deleted file mode 100644
index e69de29..0000000

From b47c6e571adefc3f468836666e3551f9fc03fead Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Tue, 21 Mar 2023 14:44:23 +0200
Subject: [PATCH 7/8] refactor naming fix

---
 .storybook/preview.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 58e5589..dae180c 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { Fonts, Box, RGThemeProvider, defaultTheme, clientTheme } from '../src';
 import { Decorator } from '@storybook/react';
 import React from 'react';
-import { Utils } from '../src/stories/utils';
+import { StoryBookThemeContext } from '../src/stories/utils';
 
 export const parameters = {
   viewport: {
@@ -54,11 +54,11 @@ export const decorators: Decorator[] = [
     return (
       <Box>
         <Fonts />
-        <Utils.Provider value={{ theme }}>
+        <StoryBookThemeContext.Provider value={{ theme }}>
           <RGThemeProvider theme={storyTheme}>
             <Story />
           </RGThemeProvider>
-        </Utils.Provider>
+        </StoryBookThemeContext.Provider>
       </Box>
     );
   },

From 58ccb9b467c45f344886354ebfbf6724d45cca95 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Tue, 21 Mar 2023 17:50:15 +0200
Subject: [PATCH 8/8] update gitignore

---
 .gitignore | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index fafea2a..a4d4bd7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,9 +7,4 @@ dist
 storybook-static/*
 .yarn
 .yarnrc.yml
-/.idea/inspectionProfiles/Project_Default.xml
-/.idea/.gitignore
-/.idea/design-system.iml
-/.idea/modules.xml
-/.idea/vcs.xml
-/.idea/prettier.xml
+/.idea/*
\ No newline at end of file