wip: refactor theme

apps/storybook/.storybook/manager.ts

@@ -1,7 +1,7 @@
 import { addons } from "@storybook/manager-api";
 
-import { lightTheme } from "./theme";
+import { darkTheme } from "./theme";
 
 addons.setConfig({
-  theme: lightTheme,
+  theme: darkTheme
 });

apps/storybook/.storybook/preview.ts

@@ -1,6 +1,11 @@
 import type { Preview } from "@storybook/react";
+import React from "react";
 
+import { themes } from "@storybook/theming";
+import { DocsContainer } from "@storybook/addon-docs";
+import { useDarkMode } from "storybook-dark-mode";
 import { darkTheme, lightTheme } from "./theme";
+// import { darkTheme, lightTheme } from "./theme";
 
 const preview: Preview = {
   parameters: {
@@ -11,10 +16,17 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    docs: {
+      container: (props) => {
+        const isDark = useDarkMode();
+        const currentProps = { ...props };
+        currentProps.theme = isDark ? darkTheme : lightTheme;
+        return React.createElement(DocsContainer, currentProps);
+      },
+    },
     darkMode: {
-      current: "light",
       dark: darkTheme,
-      light: lightTheme,
+      light: lightTheme
     },
     viewport: {
       viewports: {

apps/storybook/.storybook/theme.ts

@@ -1,27 +1,28 @@
 import { create } from "@storybook/theming";
 
-export const lightTheme = create({
+export const darkTheme = create({
   base: "dark",
-  appBg: "#283648",
-  appContentBg: "#283648",
-  barBg: "#283648",
+  appBg: "#18202B",
+  appContentBg: "#18202B",
+  barBg: "#18202B",
   colorSecondary: "#2BB381",
   textColor: "#ffffff",
+  textInverseColor: "#18202B",
   brandImage: "https://plan4better.de/images/logo-light.png",
   brandTitle: "Plan4Better UI",
   brandUrl: "https://plan4better.de",
   fontBase: '"Work Sans","Open Sans", sans-serif',
   fontCode: "monospace",
 });
 
-export const darkTheme = create({
+export const lightTheme = create({
   base: "light",
-  appBg: "#f1f0eb",
-  appContentBg: "#f1f0eb",
-  barBg: "#f1f0eb",
+  appBg: "#F4F5FA",
+  appContentBg: "#F4F5FA",
+  barBg: "#F4F5FA",
   colorSecondary: "#2BB381",
   textColor: "#283648",
-  textInverseColor: "#f1f0eb",
+  textInverseColor: "#F4F5FA",
   brandImage: "https://plan4better.de/images/logo.png",
   brandTitle: "Plan4Better UI",
   brandUrl: "https://plan4better.de",

package.json

@@ -37,7 +37,7 @@
     "rimraf": "^5.0.1",
     "syncpack": "^9.8.6",
     "tsx": "^3.12.7",
-    "turbo": "latest",
+    "turbo": "^1.10.13",
     "typescript": "^5.1.6"
   },
   "engines": {

packages/ui/package.json

@@ -40,6 +40,7 @@
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
     "run-exclusive": "^2.2.18",
+    "storybook-dark-mode": "^3.0.0",
     "tsafe": "^1.6.0",
     "tss-react": "^4.8.3",
     "uuid": "^9.0.0"

packages/ui/stories/components/Button.stories.tsx

@@ -1,20 +1,27 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ThemeProvider } from "../theme";
-import { Button } from "../theme";
+import ThemeProvider from "../../theme/ThemeProvider";
+import Button from "@mui/material/Button";
+import { useDarkMode } from "storybook-dark-mode";
 
 const meta: Meta<typeof Button> = {
   component: Button,
   tags: ["autodocs"],
   argTypes: {
     variant: {
-      options: ["primary", "secondary", "ternary"],
+      options: ["text", "contained", "outlined"],
       control: { type: "radio" },
     },
   },
   decorators: [
     (Story) => (
-      <ThemeProvider>
+      <ThemeProvider
+        settings={{
+          themeColor: "primary",
+          contentWidth: "boxed",
+          mode: useDarkMode() ? "dark" : "light",
+        }}
+      >
         <Story />
       </ThemeProvider>
     ),
@@ -27,87 +34,7 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = {
   args: {
     children: "Primary",
-    variant: "primary",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
-    },
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    children: "Secondary",
-    variant: "secondary",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
-    },
-  },
-};
-
-export const Ternary: Story = {
-  args: {
-    children: "Ternary",
-    variant: "ternary",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
-    },
-  },
-};
-
-export const NoBorder: Story = {
-  args: {
-    children: "No Border",
-    variant: "noBorder",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
-    },
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    children: "Warning",
-    variant: "warning",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
-    },
-  },
-};
-
-export const IconStartButton: Story = {
-  args: {
-    children: "Warning",
-    variant: "warning",
-    startIcon: "warnOutlined",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
-    },
-  },
-};
-
-export const IconEndButton: Story = {
-  args: {
-    children: "primary",
-    variant: "primary",
-    endIcon: "check",
+    variant: "contained",
   },
   parameters: {
     design: {

packages/ui/stories/foundations/Colors.mdx

@@ -1,15 +1,17 @@
 import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
 import { Fragment } from "react";
 import { useDarkMode } from "storybook-dark-mode";
-
-import { StoryProvider, useTheme, Text, Checkbox } from "../theme";
+import { useTheme } from '@mui/material/styles';
+import { ThemeProvider } from "../../theme/ThemeProvider";
 
 <Meta
   decorators={[
     (Story) => (
-      <StoryProvider dark={useDarkMode()}>
+      <ThemeProvider
+        settings={{ themeColor: "primary", contentWidth: "boxed", mode: useDarkMode() ? "dark" : "light" }}
+      >
         <Story />
-      </StoryProvider>
+      </ThemeProvider>
     ),
   ]}
 />
@@ -40,58 +42,38 @@ By utilizing both a dark and light color, it is possible to switch between two m
 one where dark elements are displayed on light surfaces for a light mode, and another where
 light elements are shown on dark surfaces by inverting the colors for a dark mode.
 
-<ColorPalette>
-  <ColorItem
-    title="Focus"
-    subtitle="Green"
-    colors={{ Green: useTheme().colors.palette.focus.main }}
-  />
-
-  <ColorItem
-    title="Dark"
-    subtitle="DarkBlue"
-    colors={{ DarkBlue: useTheme().colors.palette.dark.main }}
-  />
-  <ColorItem
-    title="Light"
-    subtitle="Whisper White"
-    colors={{ WhisperWhite: useTheme().colors.palette.light.main  }}
-  />
-</ColorPalette>
-
 #### Colors palette
 
 For functional applications, the color palette can be extended to include shade ranging from light to dark.
 
+
 <ColorPalette>
   <ColorItem
-    title="Focus"
-    subtitle="Green Tones"
-    colors={{ Main: useTheme().colors.palette.focus.main,
-              Light: useTheme().colors.palette.focus.light,
-              Variant1: useTheme().colors.palette.focus.light2
+    title="Primary"
+    subtitle="Some of the greens"
+    colors={{ Main: useTheme().palette.primary.main,
+              Light: useTheme().palette.primary.light,
+              Dark: useTheme().palette.primary.dark,
             }}
   />
-  <ColorItem
-    title="Dark"
-    subtitle="Blue Tones"
-    colors={{ Main: useTheme().colors.palette.dark.main,
-              Light: useTheme().colors.palette.dark.light,
-              Variant1: useTheme().colors.palette.dark.greyVariant1,
-              Variant2: useTheme().colors.palette.dark.greyVariant2,
-              Variant3: useTheme().colors.palette.dark.greyVariant3,
-              Variant4: useTheme().colors.palette.dark.greyVariant4,
-            }}
+  <ColorItem 
+    title="theme.color.primary" 
+    subtitle="Coral" 
+    colors={{ WildWatermelon: '#FF4785' }} 
+  />
+  <ColorItem 
+    title="theme.color.secondary" 
+    subtitle="Ocean" 
+    colors={{ DodgerBlue: '#1EA7FD' }} 
   />
   <ColorItem
-    title="Light"
-    subtitle="White Tones"
-    colors={{ Main: useTheme().colors.palette.light.main,
-              Light: useTheme().colors.palette.light.light,
-              Variant1: useTheme().colors.palette.light.greyVariant1,
-              Variant2: useTheme().colors.palette.light.greyVariant2,
-              Variant3: useTheme().colors.palette.light.greyVariant3,
-              Variant4: useTheme().colors.palette.light.greyVariant4,
-            }}
+    title="theme.color.positive"
+    subtitle="Green"
+    colors={{
+      Apple: 'rgba(102,191,60,1)',
+      Apple80: 'rgba(102,191,60,.8)',
+      Apple60: 'rgba(102,191,60,.6)',
+      Apple30: 'rgba(102,191,60,.3)',
+    }}
   />
-</ColorPalette>
+</ColorPalette>

packages/ui/stories/components/Alert.stories.tsx → packages/ui/stories_backup/components/Alert.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react/dist";
 
 import { Alert } from "../../components/Alert";
-import { Text } from "../theme";
-import { ThemeProvider } from "../theme";
+import { Text } from "../../stories/theme";
+import { ThemeProvider } from "../../stories/theme";
 
 const meta: Meta<typeof Alert> = {
   component: Alert,

packages/ui/stories/components/Checkbox.stories.tsx → packages/ui/stories_backup/components/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Checkbox } from "../../components/Checkbox";
-import { ThemeProvider } from "../theme";
+import { ThemeProvider } from "../../stories/theme";
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,

packages/ui/stories/components/CircularProgress.stories.tsx → packages/ui/stories_backup/components/CircularProgress.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { CircularProgress } from "../../components/CircularProgress";
-import { ThemeProvider } from "../theme";
+import { ThemeProvider } from "../../stories/theme";
 
 const meta: Meta<typeof CircularProgress> = {
   component: CircularProgress,

packages/ui/stories/components/ContentManagement.stories.tsx → packages/ui/stories_backup/components/ContentManagement.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react/dist";
 
 import ContentManagement from "../../components/temporary/contentManagement/ContentManagement";
-import { ThemeProvider } from "../theme";
+import { ThemeProvider } from "../../stories/theme";
 
 const meta: Meta<typeof ContentManagement> = {
   component: ContentManagement,

packages/ui/stories/components/Data Display/Chip.stories.tsx → packages/ui/stories_backup/components/Data Display/Chip.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react/dist";
 
 import { Chip } from "../../../components/DataDisplay";
-import { ThemeProvider } from "../../theme";
+import { ThemeProvider } from "../../../stories/theme";
 
 const meta: Meta<typeof Chip> = {
   component: Chip,

packages/ui/stories/components/Data Display/Divider.stories.tsx → packages/ui/stories_backup/components/Data Display/Divider.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react/dist";
 
 import { Divider } from "../../../components/DataDisplay";
-import { ThemeProvider } from "../../theme";
+import { ThemeProvider } from "../../../stories/theme";
 
 const meta: Meta<typeof Divider> = {
   component: Divider,