Implement design changes

apps/docs/package.json

@@ -8,10 +8,11 @@
     "build:deps": "",
     "build:imports": "tsx dev/generateLiveCodeEditorGlobalImports.ts",
     "dev": "next dev",
-    "postinstall": "fumadocs-mdx"
+    "postinstall": "fumadocs-mdx",
+    "start": "pnpx serve@latest out"
   },
   "dependencies": {
-    "@internationalized/date": "^3.10.1",
+    "@internationalized/date": "^3.12.0",
     "@mfalkenberg/react-live-ssr": "^4.1.7",
     "@mittwald/flow-design-tokens": "workspace:*",
     "@mittwald/flow-react-components": "workspace:*",
@@ -24,38 +25,39 @@
     "clsx": "^2.1.1",
     "cron-parser": "^5.5.0",
     "cron-time-generator": "^2.0.3",
-    "cronstrue": "^3.9.0",
+    "cronstrue": "^3.13.0",
     "dot-prop": "^10.1.0",
     "fs-jetpack": "^5.1.0",
-    "fumadocs-mdx": "^14.2.6",
+    "fumadocs-mdx": "^14.2.9",
     "humanize-string": "^3.1.0",
     "luxon": "^3.7.2",
     "next": "~16.1.6",
     "next-mdx-remote": "^5.0.0",
+    "next-themes": "^0.4.6",
     "parse-es-import": "^0.6.0",
     "prism-react-renderer": "^2.4.1",
     "raw-loader": "^4.0.2",
-    "react": "^19.2.0",
+    "react": "^19.2.4",
     "react-children-utilities": "^2.10.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.71.1",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.2",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "remeda": "^2.33.4",
+    "remeda": "^2.33.6",
     "sass": "^1.97.3",
     "slugify": "^1.6.6",
     "tsx": "^4.21.0",
-    "webpack": "^5.104.1"
+    "webpack": "^5.105.4"
   },
   "devDependencies": {
     "@mittwald/typescript-config": "workspace:*",
     "@next/eslint-plugin-next": "~16.1.6",
-    "@types/node": "^24.10.9",
-    "@types/react": "^19.2",
-    "@types/react-dom": "^19.2",
-    "eslint": "^9.39.2",
-    "glob": "^13.0.0",
-    "nx": "^22.4.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.4",
+    "glob": "^13.0.6",
+    "nx": "^22.5.4",
     "react-docgen-typescript": "^2.4.0",
     "typescript": "^5.9.3"
   }

apps/docs/src/app/_components/layout/Footer/footer.module.scss → apps/docs/src/app/_components/layout/Footer/Footer.module.scss

@@ -1,5 +1,9 @@
 .footer.footer {
-  background-color: var(--color--hosting-blue--200);
+  background-color: color-mix(
+    in srgb,
+    var(--neutral--color--200) 60%,
+    transparent
+  );
   margin-top: var(--size-px--l);
 
   .footerContent {
@@ -17,6 +21,11 @@
   .resources {
     flex: 1;
   }
+
+  .mittwaldLogo {
+    width: 240px !important;
+    height: 50px !important;
+  }
 }
 
 @media (max-width: 1400px) {
@@ -30,3 +39,9 @@
     }
   }
 }
+
+[data-flow-theme="dark"] {
+  .footer.footer {
+    background-color: color-mix(in srgb, #121518 40%, transparent);
+  }
+}

apps/docs/src/app/_components/layout/Footer/Footer.tsx

@@ -2,15 +2,14 @@
 import {
   Flex,
   Heading,
-  Image,
+  IconFeedback,
   Link,
   Text,
 } from "@mittwald/flow-react-components";
 import React, { type FC } from "react";
-import logoMittwald from "../../../../../assets/mittwald-logo-footer.svg";
-import styles from "./footer.module.scss";
+import styles from "./Footer.module.scss";
 import { DateTime } from "luxon";
-import feedback from "../../../../../assets/Styleguide-Footer_Feedback.svg";
+import { MittwaldLogo } from "@/app/_components/layout/Footer/MittwaldLogo";
 
 const Footer: FC = () => {
   const year = DateTime.now().year;
@@ -74,8 +73,8 @@ const Footer: FC = () => {
               </Link>
             </Flex>
           </Flex>
-          <Flex direction="column" gap="xs" className={styles.mittwaldLogo}>
-            <Image src={logoMittwald.src} alt="mittwald Logo" width={300} />
+          <Flex direction="column" gap="xs">
+            <MittwaldLogo />
             <Text whiteSpace="nowrap">
               <small>© {year} Mittwald CM Service GmbH & Co. KG</small>
             </Text>
@@ -98,12 +97,7 @@ const Footer: FC = () => {
               Feedback zu Flow geben
             </Link>
           </Flex>
-          <Image
-            src={feedback.src}
-            alt="Styleguide Feedback"
-            className={styles.feedbackImage}
-            width={200}
-          />
+          <IconFeedback size="l" className={styles.feedbackImage} />
         </Flex>
       </Flex>
     </footer>