From be06b6b8c85b3a0ab47c1706595e3e53c9e22fd0 Mon Sep 17 00:00:00 2001 From: BenniEngel Date: Tue, 5 Nov 2024 13:43:37 +0100 Subject: [PATCH 1/5] style: Styleguide Header Design Optimization --- packages/docs/src/app/layout.module.scss | 14 +++++++++----- packages/docs/src/app/layout.tsx | 6 ++---- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss index 414450df4..6f1a63ac2 100644 --- a/packages/docs/src/app/layout.module.scss +++ b/packages/docs/src/app/layout.module.scss @@ -25,7 +25,7 @@ align-items: center; max-width: 1500px; margin: 0 auto; - padding: var(--size-px--m) var(--size-px--l); + padding: var(--size-px--m) var(--size-px--l) var(--size-px--l); flex-wrap: wrap; gap: var(--size-rem--m); @@ -36,20 +36,24 @@ left: 0; right: 0; height: 250px; - background: var(--primary--color--100); + background: var(--color--hosting-blue--200); position: absolute; z-index: -1; } - h1 { + .heading { + font-size: var(--font-size-heading--xl); + color: var(--heading--color); + font-weight: bold; margin-right: auto; + padding-bottom: var(--size-px--s); } } .homeLink { display: flex; - column-gap: var(--size-rem--s); - align-items: center; + column-gap: var(--size-rem--m); + align-items: end; } .logo { diff --git a/packages/docs/src/app/layout.tsx b/packages/docs/src/app/layout.tsx index 265748a45..b78a8db71 100644 --- a/packages/docs/src/app/layout.tsx +++ b/packages/docs/src/app/layout.tsx @@ -7,7 +7,6 @@ import React from "react"; import HeaderNavigation from "@/app/_components/layout/HeaderNavigation/HeaderNavigation"; import clsx from "clsx"; import styles from "./layout.module.scss"; -import Heading from "@mittwald/flow-react-components/Heading"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import { LinkProvider } from "@mittwald/flow-react-components/nextjs"; import { IconMittwald } from "@mittwald/flow-react-components/Icons"; @@ -15,6 +14,7 @@ import MainNavigation from "@/app/_components/layout/MainNavigation"; import MobileNavigation from "@/app/_components/layout/MobileNavigation/MobileNavigation"; import { NotificationProvider } from "@mittwald/flow-react-components/NotificationProvider"; import { Link } from "@mittwald/flow-react-components/Link"; +import { Text } from "@mittwald/flow-react-components/Text"; export const metadata: Metadata = { title: "Flow – mittwald Design System", @@ -32,9 +32,7 @@ const RootLayout: FC = async (props) => {
- - Flow - + Flow Date: Tue, 5 Nov 2024 13:54:53 +0100 Subject: [PATCH 2/5] style: Styleguide Header Design Optimization --- .idea/.gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.idea/.gitignore b/.idea/.gitignore index 13566b81b..9ed1b039d 100644 --- a/.idea/.gitignore +++ b/.idea/.gitignore @@ -6,3 +6,4 @@ # Datasource local storage ignored files /dataSources/ /dataSources.local.xml +/jsLibraryMappings.xml From 260e4c12d167b7d0ac18cad8afc6a0b7a91e894d Mon Sep 17 00:00:00 2001 From: BenniEngel Date: Wed, 6 Nov 2024 09:29:34 +0100 Subject: [PATCH 3/5] docs: Exchanged Logo and Card images --- .../docs/assets/Styleguide_Startseite.svg | 43 ++++++++++--------- packages/docs/assets/m-flow_logo.svg | 12 ++++++ packages/docs/src/app/layout.module.scss | 6 +-- packages/docs/src/app/layout.tsx | 7 ++- 4 files changed, 38 insertions(+), 30 deletions(-) create mode 100644 packages/docs/assets/m-flow_logo.svg diff --git a/packages/docs/assets/Styleguide_Startseite.svg b/packages/docs/assets/Styleguide_Startseite.svg index 40569cc74..1515ecc1e 100644 --- a/packages/docs/assets/Styleguide_Startseite.svg +++ b/packages/docs/assets/Styleguide_Startseite.svg @@ -15,16 +15,17 @@ } .cls-3 { - fill: #e0ebff; + fill: #f0f5ff; } .cls-4 { - fill: #27367b; + fill: #abc6ff; + isolation: isolate; + opacity: .3; } .cls-5 { - fill: #abc6ff; - opacity: .3; + fill: #27367b; } .cls-6 { @@ -32,38 +33,38 @@ } - + - - + + - - + + - - + + - + - - - - - + + + + + - - - - + + + + \ No newline at end of file diff --git a/packages/docs/assets/m-flow_logo.svg b/packages/docs/assets/m-flow_logo.svg new file mode 100644 index 000000000..1eae4cb54 --- /dev/null +++ b/packages/docs/assets/m-flow_logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss index 6f1a63ac2..4a7668fa5 100644 --- a/packages/docs/src/app/layout.module.scss +++ b/packages/docs/src/app/layout.module.scss @@ -56,10 +56,6 @@ align-items: end; } -.logo { - color: var(--heading--color); -} - .mainNavigation { padding-inline: var(--size-px--l); width: 270px; @@ -120,7 +116,7 @@ } .header { - padding: var(--size-px--xs) var(--size-px--s); + padding: var(--size-px--xs) var(--size-px--s) var(--size-px--m); row-gap: var(--size-rem--s); } diff --git a/packages/docs/src/app/layout.tsx b/packages/docs/src/app/layout.tsx index b78a8db71..eb925dac0 100644 --- a/packages/docs/src/app/layout.tsx +++ b/packages/docs/src/app/layout.tsx @@ -9,12 +9,12 @@ import clsx from "clsx"; import styles from "./layout.module.scss"; import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory"; import { LinkProvider } from "@mittwald/flow-react-components/nextjs"; -import { IconMittwald } from "@mittwald/flow-react-components/Icons"; +import logoMittwald from "../../assets/m-flow_logo.svg"; import MainNavigation from "@/app/_components/layout/MainNavigation"; import MobileNavigation from "@/app/_components/layout/MobileNavigation/MobileNavigation"; import { NotificationProvider } from "@mittwald/flow-react-components/NotificationProvider"; import { Link } from "@mittwald/flow-react-components/Link"; -import { Text } from "@mittwald/flow-react-components/Text"; +import { Image } from "@mittwald/flow-react-components/Image"; export const metadata: Metadata = { title: "Flow – mittwald Design System", @@ -31,8 +31,7 @@ const RootLayout: FC = async (props) => {
- - Flow + mittwald Flow Logo Date: Wed, 6 Nov 2024 09:31:26 +0100 Subject: [PATCH 4/5] docs: Exchanged Logo and Card images --- packages/docs/src/app/layout.module.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss index 4a7668fa5..6c063038c 100644 --- a/packages/docs/src/app/layout.module.scss +++ b/packages/docs/src/app/layout.module.scss @@ -40,14 +40,6 @@ position: absolute; z-index: -1; } - - .heading { - font-size: var(--font-size-heading--xl); - color: var(--heading--color); - font-weight: bold; - margin-right: auto; - padding-bottom: var(--size-px--s); - } } .homeLink { From 45f5259bafdd70ab89cfc1d04813b5b8790a8b36 Mon Sep 17 00:00:00 2001 From: BenniEngel Date: Wed, 6 Nov 2024 10:46:33 +0100 Subject: [PATCH 5/5] docs: Exchanged Home Image with no border --- .../docs/assets/Styleguide_Startseite.svg | 38 +++++++++---------- packages/docs/src/app/layout.module.scss | 3 -- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/packages/docs/assets/Styleguide_Startseite.svg b/packages/docs/assets/Styleguide_Startseite.svg index 1515ecc1e..bfc2c58d5 100644 --- a/packages/docs/assets/Styleguide_Startseite.svg +++ b/packages/docs/assets/Styleguide_Startseite.svg @@ -1,5 +1,5 @@ - + - + - - - + + + - - + + - - + + - + - - - - - + + + + + - - - - + + + + \ No newline at end of file diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss index 6c063038c..a7806283e 100644 --- a/packages/docs/src/app/layout.module.scss +++ b/packages/docs/src/app/layout.module.scss @@ -121,9 +121,6 @@ padding: 0; .homeImage { - margin-left: -1px; - width: calc(100% + 2px); - max-width: calc(100% + 2px); border-bottom-color: var(--separator--color); border-bottom-width: var(--separator--height); border-bottom-style: var(--border-style--default);