From 636fda45f2a08e5da273c06c86aeb0f39960ae65 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Tue, 24 Jun 2025 13:50:19 +0200
Subject: [PATCH] Replace styleguide components

---
 maintenance/app.vue                           |  83 +++++-
 .../components/BaseCard/BaseCard.story.js     |  79 +++++
 maintenance/components/BaseCard/BaseCard.vue  | 133 +++++++++
 maintenance/components/maintenance.vue        |  80 -----
 .../lib/styleguide/components/index.ts        |   6 -
 .../components/layout/Flex/Flex.vue           |  94 ------
 .../components/layout/Flex/FlexItem.vue       | 107 -------
 .../components/layout/Flex/style.scss         |  12 -
 .../components/layout/Space/Space.vue         | 119 --------
 .../components/layout/Space/style.scss        |   9 -
 .../components/typography/Logo/Logo.vue       |  55 ++++
 .../components/typography/Logo/style.scss     |  20 ++
 maintenance/lib/styleguide/index.ts           |   3 +-
 maintenance/lib/styleguide/mixins/index.ts    |   3 -
 .../lib/styleguide/mixins/media-query.ts      |  62 ----
 maintenance/media-queries.scss                |   5 +
 maintenance/nuxt.config.ts                    |   2 +-
 maintenance/style.css                         | 280 ++++++++++++++++++
 18 files changed, 642 insertions(+), 510 deletions(-)
 create mode 100644 maintenance/components/BaseCard/BaseCard.story.js
 create mode 100644 maintenance/components/BaseCard/BaseCard.vue
 delete mode 100644 maintenance/components/maintenance.vue
 delete mode 100644 maintenance/lib/styleguide/components/layout/Flex/Flex.vue
 delete mode 100644 maintenance/lib/styleguide/components/layout/Flex/FlexItem.vue
 delete mode 100644 maintenance/lib/styleguide/components/layout/Flex/style.scss
 delete mode 100644 maintenance/lib/styleguide/components/layout/Space/Space.vue
 delete mode 100644 maintenance/lib/styleguide/components/layout/Space/style.scss
 create mode 100644 maintenance/lib/styleguide/components/typography/Logo/Logo.vue
 create mode 100644 maintenance/lib/styleguide/components/typography/Logo/style.scss
 delete mode 100644 maintenance/lib/styleguide/mixins/index.ts
 delete mode 100644 maintenance/lib/styleguide/mixins/media-query.ts
 create mode 100644 maintenance/media-queries.scss
 create mode 100644 maintenance/style.css

diff --git a/maintenance/app.vue b/maintenance/app.vue
index 1e0d6f1c6..e8812b8d7 100644
--- a/maintenance/app.vue
+++ b/maintenance/app.vue
@@ -1,20 +1,73 @@
-<script setup lang="ts">
-import Maintenance from './components/maintenance.vue';
+<template>
+    <transition name="fade" appear>
+      <div class="container">
+        <base-card>
+          <div class="flex-container">
+            <div class="item">
+                <a
+                  :href="emails.ORGANIZATION_LINK"
+                  :title="$t('login.moreInfo', metadata)"
+                  target="_blank"
+                >
+                <img class="image" alt="Under maintenance" src="/img/custom/logo-squared.svg" >
+                </a>
+              </div>
+              <div class="item">
+                <h3>{{ $t('maintenance.title', metadata) }}</h3>
+              </div>
+              <div class="explanation">
+                  <p>{{ $t('maintenance.explanation') }}</p>
+                  <p>
+                    {{ $t('maintenance.questions') }}
+                    <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
+                  </p>
+              </div>
+            </div>
+            </base-card>
+          </div>
+    </transition>
+  </template>
 
+  <script setup>
+  import emails from '~/constants/emails'
+  import metadata from '~/constants/metadata'
+
+  import BaseCard from '~/components/BaseCard/BaseCard.vue'
+
+  const supportEmail = emails.supportEmail
 </script>
 
-<template>
-  <div>
-    <Maintenance />
-  </div>
-</template>
+<style src="./style.css" lang="scss" />
 
-<style>
-:root {
-  --space-base: 16px;
-  --space-small: 8px;
-  --space-x-small: 6px;
-  --space-xx-small: 4px;
-  --color-locale-menu: #333;
-}
+<style scoped lang="scss">
+@use './media-queries.scss' as media-queries;
+
+  .image {
+    width: 75%;
+    height: auto;
+  }
+
+  .flex-container {
+    display: flex;
+    gap: var(--space-small);
+  }
+
+  .item {
+    margin-top: var(--space-small);
+  }
+
+  .container {
+    padding: 0 var(--space-small);
+    margin: 0 auto;
+
+    max-width: var(--md);
+
+    @media #{media-queries.$medium} {
+      padding: 0 var(--space-base);
+    }
+
+    @media #{media-queries.$large} {
+      padding: 0 var(--space-large);
+    }
+  }
 </style>
diff --git a/maintenance/components/BaseCard/BaseCard.story.js b/maintenance/components/BaseCard/BaseCard.story.js
new file mode 100644
index 000000000..928aba5e6
--- /dev/null
+++ b/maintenance/components/BaseCard/BaseCard.story.js
@@ -0,0 +1,79 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import logos from '~/constants/logos.js'
+import BaseCard from './BaseCard.vue'
+
+storiesOf('Generic/BaseCard', module)
+  .addDecorator(helpers.layout)
+
+  .add('default', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card>
+        <h2 class="title">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
+
+  .add('with slot: hero image', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card style="width: 400px;">
+        <template #heroImage>
+          <img class="image" src="https://unsplash.com/photos/R4y_E5ZQDPg/download" />
+        </template>
+        <h2 class="title">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
+
+  .add('with slot: image column', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card style="width: 600px;">
+        <template #imageColumn>
+          <img class="image" alt="Example image" src="${logos.LOGO_WELCOME_PATH}" />
+        </template>
+        <h2 class="title">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
+
+  .add('with slot: topMenu', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card style="width: 600px;">
+        <template #imageColumn>
+          <img class="image" alt="Example image" src="${logos.LOGO_WELCOME_PATH}" />
+        </template>
+        <h2 class="title">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+        <template #topMenu>
+          <base-button size="small">Menu</base-button>
+        </template>
+      </base-card>
+    `,
+  }))
+
+  .add('with highlight prop', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card highlight style="width: 400px;">
+        <h2 class="title">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
+
+  .add('with wideContent prop', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card wideContent style="width: 400px;">
+        <h2 class="title">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
diff --git a/maintenance/components/BaseCard/BaseCard.vue b/maintenance/components/BaseCard/BaseCard.vue
new file mode 100644
index 000000000..5d3131a02
--- /dev/null
+++ b/maintenance/components/BaseCard/BaseCard.vue
@@ -0,0 +1,133 @@
+<template>
+  <article :class="classNames">
+    <template v-if="$slots.imageColumn">
+      <aside class="image-column">
+        <slot name="imageColumn" />
+      </aside>
+      <section class="content-column">
+        <slot />
+      </section>
+    </template>
+
+    <template v-else-if="$slots.heroImage">
+      <section class="hero-image">
+        <slot name="heroImage" />
+      </section>
+      <slot />
+    </template>
+
+    <slot v-else />
+    <aside v-if="$slots.topMenu" class="top-menu">
+      <slot name="topMenu" />
+    </aside>
+  </article>
+</template>
+
+<script>
+export default {
+  props: {
+    highlight: {
+      type: Boolean,
+      default: false,
+    },
+    wideContent: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classNames() {
+      let classNames = 'base-card'
+
+      if (this.$slots.imageColumn) classNames += ' --columns'
+      if (this.highlight) classNames += ' --highlight'
+      if (this.wideContent) classNames += ' --wide-content'
+
+      return classNames
+    },
+  },
+}
+</script>
+
+<style>
+.base-card {
+  position: relative;
+  padding: var(--space-base);
+  border-radius: var(--border-radius-x-large);
+  overflow: hidden;
+  overflow-wrap: break-word;
+  background-color: var(--color-neutral-100);
+  box-shadow: var(--box-shadow-base);
+
+  &.--columns {
+    display: flex;
+  }
+
+  &.--highlight {
+    border: var(--border-size-base) solid var(--color-warning);
+  }
+
+  &.--wide-content {
+    padding: var(--space-small)
+
+    > .hero-image {
+      width: calc(100% + (2 * var(--space-small)));
+      margin: calc(-1 * var(--space-small));
+      margin-bottom: var(--space-small);
+    }
+  }
+
+  > .title,
+  > .content-column > .title {
+    font-size: var(--font-size-large);
+    margin-bottom: var(--space-x-small);
+  }
+
+  > .hero-image {
+    width: calc(100% + (2 * var(--space-base)));
+    max-height: var(--size-image-max-height);
+    margin: calc(-1 * var(--space-base));
+    margin-bottom: var(--space-base);
+    overflow: hidden;
+
+    > .image {
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+
+  > .image-column {
+    flex-basis: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-right: var(--space-base);
+
+    .image {
+      width: 100%;
+      max-width: 200px;
+    }
+  }
+
+  > .content-column {
+    flex-basis: 50%;
+  }
+
+  > .top-menu {
+    position: absolute;
+    top: var(--space-small);
+    left: var(--space-small);
+  }
+}
+
+@media (max-width: 565px) {
+  .base-card.--columns {
+    flex-direction: column;
+
+    > .image-column {
+      padding-right: 0;
+      margin-bottom: var(--space-base);
+    }
+  }
+}
+</style>
diff --git a/maintenance/components/maintenance.vue b/maintenance/components/maintenance.vue
deleted file mode 100644
index 42180b722..000000000
--- a/maintenance/components/maintenance.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-    <transition name="fade" appear>
-      <ds-container width="medium">
-        <base-card>
-          <ds-space>
-            <!-- <locale-switch class="login-locale-switch" offset="5" /> -->
-          </ds-space>
-          <ds-flex>
-            <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
-              <ds-space>
-                <!-- QUESTION: could we have internal page or even all internal pages here as well with PageParamsLink by having the footer underneath? -->
-                <!--   I tried this out, but only could get the nginx page displayed. I guees the there were nuxt errors, because the nuxt config file 'webapp/maintenance/source/nuxt.config.maintenance.js' would have to be refactored for that as well and may be the missing folder `components/_new/generic/` plays a role, see https://github.com/Ocelot-Social-Community/Ocelot-Social/pull/4619 -->
-                <!-- <page-params-link :pageParams="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)">
-                  <logo type="maintenance" />
-                </page-params-link> -->
-                <!-- BUT: not the logo and not even the a-tag is working at the moment -->
-                <!-- <a
-                  :href="emails.ORGANIZATION_LINK"
-                  :title="$t('login.moreInfo', metadata)"
-                  target="_blank"
-                > -->
-                <img class="image" alt="Under maintenance" src="/img/custom/logo-squared.svg" >
-                <!-- </a> -->
-              </ds-space>
-            </ds-flex-item>
-            <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
-              <ds-flex-item>
-                <ds-heading tag="h3">{{ $t('maintenance.title', metadata) }}</ds-heading>
-              </ds-flex-item>
-              <ds-flex-item>
-                <ds-space margin="small">
-                  <ds-text>{{ $t('maintenance.explanation') }}</ds-text>
-                  <ds-text>
-                    {{ $t('maintenance.questions') }}
-                    <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
-                  </ds-text>
-                </ds-space>
-              </ds-flex-item>
-            </ds-flex-item>
-          </ds-flex>
-        </base-card>
-      </ds-container>
-    </transition>
-  </template>
-
-  <script>
-  import emails from '~/constants/emails'
-  // import links from '~/constants/links.js'
-  import metadata from '~/constants/metadata'
-//  import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-  // import Logo from '~/components/Logo/Logo'
-
-  import { Container as DsContainer, Card as BaseCard, Space as DsSpace, Flex as DsFlex, FlexItem as DsFlexItem, Heading as DsHeading, Text as DsText } from '../lib/styleguide'
-
-  export default {
-    components: {
-      // LocaleSwitch,
-      // Logo,
-      DsContainer,
-      BaseCard,
-      DsSpace,
-      DsFlex,
-      DsFlexItem,
-      DsHeading,
-      DsText,
-    },
-    layout: 'blank',
-    data() {
-      // return { links, metadata, supportEmail: emails.SUPPORT_EMAIL }
-      return { metadata, supportEmail: emails.SUPPORT_EMAIL }
-    },
-  }
-  </script>
-
-  <style lang="scss">
-  .image {
-    width: 75%;
-    height: auto;
-  }
-  </style>
diff --git a/maintenance/lib/styleguide/components/index.ts b/maintenance/lib/styleguide/components/index.ts
index a7def42b6..d70af3a0e 100644
--- a/maintenance/lib/styleguide/components/index.ts
+++ b/maintenance/lib/styleguide/components/index.ts
@@ -10,15 +10,12 @@ import Radio from './data-input/Radio/Radio.vue'
 import Select from './data-input/Select/Select.vue'
 import Container from './layout/Container/Container.vue'
 import Card from './layout/Card/Card.vue'
-import Flex from './layout/Flex/Flex.vue'
-import FlexItem from './layout/Flex/FlexItem.vue'
 import Grid from './layout/Grid/Grid.vue'
 import Modal from './layout/Modal/Modal.vue'
 import Page from './layout/Page/Page.vue'
 import PageTitle from './layout/PageTitle/PageTitle.vue'
 import Placeholder from './layout/Placeholder/Placeholder.vue'
 import Section from './layout/Section/Section.vue'
-import Space from './layout/Space/Space.vue'
 import Spinner from './layout/Spinner/Spinner.vue'
 import Button from './navigation/Button/Button.vue'
 import Menu from './navigation/Menu/Menu.vue'
@@ -43,15 +40,12 @@ export {
   Select,
   Container,
   Card,
-  Flex,
-  FlexItem,
   Grid,
   Modal,
   Page,
   PageTitle,
   Placeholder,
   Section,
-  Space,
   Spinner,
   Button,
   Menu,
diff --git a/maintenance/lib/styleguide/components/layout/Flex/Flex.vue b/maintenance/lib/styleguide/components/layout/Flex/Flex.vue
deleted file mode 100644
index 24699075b..000000000
--- a/maintenance/lib/styleguide/components/layout/Flex/Flex.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :style="styles"
-    class="ds-flex">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { getSpace } from '@@/utils'
-import { mediaQuery } from '@@/mixins'
-
-/**
- * Used in combination with the flex item component to create flexible layouts.
- * @version 1.0.0
- */
-export default defineComponent({
-  name: 'DsFlex',
-  mixins: [mediaQuery],
-
-  provide() {
-    return {
-      $parentFlex: this
-    }
-  },
-
-  props: {
-    /**
-     * Default gutter size of columns
-     */
-    gutter: {
-      type: [String, Object],
-      default: null
-    },
-    /**
-     * Default width of columns
-     */
-    width: {
-      type: [String, Number, Object],
-      default: 1
-    },
-    /**
-     * Direction of the flex items
-     * @options row|row-reverse|column|column-reverse
-     */
-    direction: {
-      type: [String, Object],
-      default: null
-    },
-    /**
-     * The outtermost html tag
-     */
-    tag: {
-      type: String,
-      default: 'div'
-    }
-  },
-
-  computed: {
-    styles() {
-      const gutter = this.mediaQuery(this.gutter)
-      const direction = this.mediaQuery(this.direction)
-      const gutterStyle = gutter ? this.parseGutter(gutter) : {}
-      const directionStyle = direction ? this.parseDirection(direction) : {}
-      return {
-        ...gutterStyle,
-        ...directionStyle
-      }
-    }
-  },
-
-  methods: {
-    parseGutter(gutter: string) {
-      const realGutter = getSpace(gutter)
-      return {
-        marginLeft: `-${realGutter / 2}px`,
-        marginRight: `-${realGutter / 2}px`
-      }
-    },
-    parseDirection(direction: string) {
-      return {
-        flexDirection: direction
-      }
-    }
-  },
-});
-</script>
-
-<style lang="scss" src="./style.scss">
-</style>
-
diff --git a/maintenance/lib/styleguide/components/layout/Flex/FlexItem.vue b/maintenance/lib/styleguide/components/layout/Flex/FlexItem.vue
deleted file mode 100644
index 6326d241b..000000000
--- a/maintenance/lib/styleguide/components/layout/Flex/FlexItem.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :style="styles"
-    class="ds-flex-item">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { getSpace } from '@@/utils'
-import { mediaQuery } from '@@/mixins'
-
-/**
- * @version 1.0.0
- * @see DsFlex
- */
-export default defineComponent({
-  name: 'DsFlexItem',
-  mixins: [mediaQuery],
-
-  inject: {
-    $parentFlex: {
-      default: null
-    }
-  },
-
-  props: {
-    /**
-     * The item's width
-     * @default 1
-     */
-    width: {
-      type: [String, Number, Object],
-      default() {
-        return this.$parentFlex ? this.$parentFlex.width : 1
-      }
-    },
-    /**
-     * The outtermost html tag
-     */
-    tag: {
-      type: String,
-      default: 'div'
-    },
-
-    /**
-     * Center content vertical and horizontal
-     */
-    centered: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    gutter() {
-      return this.$parentFlex ? this.$parentFlex.gutter : 0
-    },
-    styles() {
-      const width = this.mediaQuery(this.width)
-      const gutter = this.mediaQuery(this.gutter)
-      const widthStyle = this.parseWidth(width)
-      const gutterStyle = this.parseGutter(gutter)
-      const centerStyle = this.centered
-        ? {
-            'align-self': 'center',
-            'jusify-self': 'center'
-          }
-        : {}
-      return {
-        ...widthStyle,
-        ...gutterStyle,
-        ...centerStyle
-      }
-    }
-  },
-
-  methods: {
-    parseWidth(width: string | number) {
-      const styles = {}
-      if (isNaN(width)) {
-        styles.flexBasis = width
-        styles.width = width
-      } else {
-        styles.flexGrow = width
-        styles.flexShrink = 0
-        styles.flexBasis = 0
-      }
-      return styles
-    },
-    parseGutter(gutter: string) {
-      const realGutter = getSpace(gutter)
-      if (realGutter === 0) {
-        return {}
-      }
-      return {
-        paddingLeft: `${realGutter / 2}px`,
-        paddingRight: `${realGutter / 2}px`,
-        marginBottom: `${realGutter}px`
-      }
-    }
-  },
-});
-</script>
diff --git a/maintenance/lib/styleguide/components/layout/Flex/style.scss b/maintenance/lib/styleguide/components/layout/Flex/style.scss
deleted file mode 100644
index a32e770bb..000000000
--- a/maintenance/lib/styleguide/components/layout/Flex/style.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "@@/styles/shared" as *;
-
-.ds-flex {
-  @include reset;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.ds-flex-item {
-  @include reset;
-  @include layout-flex-fix;
-}
diff --git a/maintenance/lib/styleguide/components/layout/Space/Space.vue b/maintenance/lib/styleguide/components/layout/Space/Space.vue
deleted file mode 100644
index eb104c33f..000000000
--- a/maintenance/lib/styleguide/components/layout/Space/Space.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :style="styles"
-    class="ds-space"
-    :class="[
-      centered && 'ds-space-centered'
-    ]"
-  >
-    <slot />
-  </component>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { getSpace } from '@@/utils'
-import { mediaQuery } from '@@/mixins'
-
-/**
- * Use this component for grouping and separation.
- * @version 1.0.0
- */
-export default defineComponent({
-  name: 'DsSpace',
-  mixins: [mediaQuery],
-
-  inject: {
-    $parentRow: {
-      default: null
-    }
-  },
-
-  props: {
-    /**
-     * The top margin of this space.
-     */
-    marginTop: {
-      type: [String, Object],
-      default: null
-    },
-    /**
-     * The bottom margin of this space.
-     */
-    marginBottom: {
-      type: [String, Object],
-      default: 'large'
-    },
-    /**
-     * The bottom and top margin of this space.
-     */
-    margin: {
-      type: [String, Object],
-      default: null
-    },
-
-    /**
-     * Center content vertacally and horizontally
-     */
-    centered: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * The html element name used for this space.
-     */
-    tag: {
-      type: String,
-      default: 'div'
-    }
-  },
-
-  computed: {
-    styles() {
-      const top = this.margin ? this.margin : this.marginTop
-      const bottom = this.margin ? this.margin : this.marginBottom
-
-      const marginTop = this.mediaQuery(top)
-      const marginBottom = this.mediaQuery(bottom)
-      const marginTopStyle = this.parseMargin('Top')(marginTop)
-      const marginBottomStyle = this.parseMargin('Bottom')(marginBottom)
-      const centerStyle = this.centered
-        ? {
-            'text-align': 'center',
-            flex: 1,
-            'align-content': 'center',
-            'jusify-content': 'center'
-          }
-        : {}
-
-      return {
-        ...marginTopStyle,
-        ...marginBottomStyle,
-        ...centerStyle
-      }
-    }
-  },
-
-  methods: {
-    parseMargin(direction) {
-      return margin => {
-        const styles = {}
-        if (!margin) {
-          return styles
-        }
-        const realMargin = getSpace(margin)
-        if (realMargin !== 0) {
-          styles[`margin${direction}`] = `${realMargin}px`
-        }
-        return styles
-      }
-    }
-  },
-});
-</script>
-
-<style lang="scss" src="./style.scss">
-</style>
-
diff --git a/maintenance/lib/styleguide/components/layout/Space/style.scss b/maintenance/lib/styleguide/components/layout/Space/style.scss
deleted file mode 100644
index 282e700ff..000000000
--- a/maintenance/lib/styleguide/components/layout/Space/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "@@/styles/shared" as *;
-
-.ds-space {
-  @include reset;
-}
-
-.ds-space-centered {
-  text-align: center;
-}
diff --git a/maintenance/lib/styleguide/components/typography/Logo/Logo.vue b/maintenance/lib/styleguide/components/typography/Logo/Logo.vue
new file mode 100644
index 000000000..5e773259d
--- /dev/null
+++ b/maintenance/lib/styleguide/components/typography/Logo/Logo.vue
@@ -0,0 +1,55 @@
+<template>
+  <component
+    :is="tag"
+    class="ds-logo"
+    :class="[inverse && 'ds-logo-inverse']"
+  >
+    <svg-logo
+      v-if="!inverse"
+      class="ds-logo-svg"
+    />
+    <svg-logo-inverse
+      v-else
+      class="ds-logo-svg"
+    />
+  </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import svgLogo from '@@/assets/img/Logo-Horizontal.svg'
+import svgLogoInverse from '@@/assets/img/Logo-Horizontal-Dark.svg'
+/**
+ * This component displays the brand's logo.
+ * @version 1.0.0
+ */
+export default defineComponent({
+  name: 'DsLogo',
+
+  components: {
+    svgLogo,
+    svgLogoInverse
+  },
+
+  props: {
+    /**
+     * Inverse the logo
+     */
+    inverse: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The html element name used for the logo.
+     */
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+});
+</script>
+
+<style lang="scss" src="./style.scss">
+</style>
diff --git a/maintenance/lib/styleguide/components/typography/Logo/style.scss b/maintenance/lib/styleguide/components/typography/Logo/style.scss
new file mode 100644
index 000000000..83892282f
--- /dev/null
+++ b/maintenance/lib/styleguide/components/typography/Logo/style.scss
@@ -0,0 +1,20 @@
+@use "@@/styles/shared" as *;
+@use "@@/styles/tokens/tokens" as *;
+
+.ds-logo {
+  @include reset;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: $text-color-primary;
+}
+
+.ds-logo-inverse {
+  color: $text-color-primary-inverse;
+}
+
+.ds-logo-svg {
+  width: 130px;
+  height: auto;
+  fill: currentColor;
+}
diff --git a/maintenance/lib/styleguide/index.ts b/maintenance/lib/styleguide/index.ts
index ce31c20c3..f0b89b7c2 100644
--- a/maintenance/lib/styleguide/index.ts
+++ b/maintenance/lib/styleguide/index.ts
@@ -1,9 +1,8 @@
 import '@@/styles/main.scss'
 
 import * as utils from './utils'
-import * as mixins from './mixins'
 
 export * from './components'
 
-export { utils, mixins }
+export { utils }
 
diff --git a/maintenance/lib/styleguide/mixins/index.ts b/maintenance/lib/styleguide/mixins/index.ts
deleted file mode 100644
index 97f270f60..000000000
--- a/maintenance/lib/styleguide/mixins/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import mediaQuery from './media-query'
-
-export { mediaQuery }
diff --git a/maintenance/lib/styleguide/mixins/media-query.ts b/maintenance/lib/styleguide/mixins/media-query.ts
deleted file mode 100644
index 96b78acad..000000000
--- a/maintenance/lib/styleguide/mixins/media-query.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { tokenMap } from '@@/styles/tokens'
-
-const windowSize = {
-  width: null,
-  height: null,
-}
-
-function updateWindowSize() {
-  windowSize.width =
-    document.documentElement.clientWidth || document.body.clientWidth
-
-  windowSize.height =
-    document.documentElement.clientHeight || document.body.clientHeight
-}
-
-let init = false
-
-function initListener() {
-  if (init) {
-    return
-  }
-  try {
-    if (window && typeof window !== 'undefined') {
-      window.addEventListener('resize', updateWindowSize)
-      updateWindowSize()
-    }
-    init = true
-  } catch (err) {
-    init = true
-    return false
-  }
-}
-
-/**
- * @mixin
- */
-export default {
-  data() {
-    return {
-      mediaQueryWindowSize: windowSize,
-    }
-  },
-  methods: {
-    mediaQuery(arg) {
-      initListener()
-      if (arg === null || typeof arg !== 'object') {
-        return arg
-      }
-      let result = arg.base
-      Object.keys(tokenMap.mediaSize)
-        .reverse()
-        .some((key) => {
-          const width = tokenMap.mediaSize[key].value
-          if (width <= this.mediaQueryWindowSize.width && arg[key]) {
-            result = arg[key]
-            return true
-          }
-        })
-      return result
-    },
-  },
-}
diff --git a/maintenance/media-queries.scss b/maintenance/media-queries.scss
new file mode 100644
index 000000000..527f25128
--- /dev/null
+++ b/maintenance/media-queries.scss
@@ -0,0 +1,5 @@
+$x-small: '(screen and (min-width: 480px))';
+$small: '(screen and (min-width: 600px))';
+$medium: '(screen and (min-width: 768px))';
+$large: '(screen and (min-width: 1024px))';
+$x-large: '(screen and (min-width: 1200px))';
diff --git a/maintenance/nuxt.config.ts b/maintenance/nuxt.config.ts
index b2e00995d..d404ac44a 100644
--- a/maintenance/nuxt.config.ts
+++ b/maintenance/nuxt.config.ts
@@ -30,7 +30,7 @@ export default defineNuxtConfig({
     plugins: [viteTsConfigPaths()],
     resolve: {
     alias: {
-      '@@': resolve(__dirname, './src'),
+      '@@': resolve(__dirname, './lib/styleguide'),
     }
   },
     build: {
diff --git a/maintenance/style.css b/maintenance/style.css
new file mode 100644
index 000000000..fe5850ad3
--- /dev/null
+++ b/maintenance/style.css
@@ -0,0 +1,280 @@
+:root {
+  /* Color Brand */
+  --color-primary: rgb(23, 181, 63);
+  --color-primary-light: rgb(96, 214, 98);
+  --color-primary-dark: rgb(25, 122, 49);
+  --color-primary-active: rgb(25, 194, 67);
+  --color-primary-inverse: rgb(241, 253, 244);
+  --color-secondary: rgb(0, 142, 230);
+  --color-secondary-active: rgb(10, 161, 255);
+  --color-secondary-inverse: rgb(240, 249, 255);
+  --color-success: rgb(23, 181, 63);
+  --color-success-active: rgb(26, 203, 71);
+  --color-success-inverse: rgb(241, 253, 244);
+  --color-danger: rgb(219, 57, 36);
+  --color-danger-light: rgb(242, 97, 65);
+  --color-danger-dark: rgb(158, 43, 28);
+  --color-danger-active: rgb(224, 81, 62);
+  --color-danger-inverse: rgb(253, 243, 242);
+  --color-warning: rgb(230, 121, 25);
+  --color-warning-active: rgb(233, 137, 53);
+  --color-warning-inverse: rgb(253, 247, 241);
+  --color-yellow: rgb(245, 196, 0);
+  --color-yellow-active: rgb(255, 206, 10);
+  --color-yellow-inverse: rgb(255, 252, 240);
+
+  /* Color Neutral */
+  --color-neutral-0: rgb(25, 23, 28);
+  --color-neutral-10: rgb(40, 37, 45);
+  --color-neutral-20: rgb(75, 69, 84);
+  --color-neutral-30: rgb(100, 92, 112);
+  --color-neutral-40: rgb(112, 103, 126);
+  --color-neutral-50: rgb(151, 143, 163);
+  --color-neutral-60: rgb(177, 171, 186);
+  --color-neutral-70: rgb(203, 199, 209);
+  --color-neutral-80: rgb(229, 227, 232);
+  --color-neutral-85: rgb(239, 238, 241);
+  --color-neutral-90: rgb(245, 244, 246);
+  --color-neutral-95: rgb(250, 249, 250);
+  --color-neutral-100: rgb(255, 255, 255);
+
+  /* Color Text */
+  --text-color-base: rgb(75, 69, 84);
+  --text-color-soft: rgb(112, 103, 126);
+  --text-color-softer: rgb(177, 171, 186);
+  --text-color-disabled: rgb(177, 171, 186);
+  --text-color-inverse: rgb(250, 249, 250);
+  --text-color-link: rgb(23, 181, 63);
+  --text-color-link-active: rgb(25, 194, 67);
+  --text-color-primary: rgb(23, 181, 63);
+  --text-color-primary-inverse: rgb(241, 253, 244);
+  --text-color-secondary: rgb(0, 142, 230);
+  --text-color-secondary-inverse: rgb(240, 249, 255);
+  --text-color-success: rgb(23, 181, 63);
+  --text-color-success-inverse: rgb(241, 253, 244);
+  --text-color-warning: rgb(230, 121, 25);
+  --text-color-warning-inverse: rgb(253, 247, 241);
+  --text-color-danger: rgb(219, 57, 36);
+  --text-color-danger-inverse: rgb(253, 243, 242);
+
+  /* Color Background */
+  --background-color-base: rgb(255, 255, 255);
+  --background-color-soft: rgb(250, 249, 250);
+  --background-color-softer: rgb(245, 244, 246);
+  --background-color-softer-active: rgb(250, 249, 250);
+  --background-color-softest: rgb(239, 238, 241);
+  --background-color-softest-active: rgb(245, 244, 246);
+  --background-color-inverse: rgb(25, 23, 28);
+  --background-color-inverse-soft: rgb(40, 37, 45);
+  --background-color-inverse-softer: rgb(75, 69, 84);
+  --background-color-inverse-softer-active: rgb(100, 92, 112);
+  --background-color-disabled: rgb(245, 244, 246);
+  --background-color-primary: rgb(23, 181, 63);
+  --background-color-primary-active: rgb(25, 194, 67);
+  --background-color-primary-inverse: rgb(241, 253, 244);
+  --background-color-secondary: rgb(0, 142, 230);
+  --background-color-secondary-active: rgb(10, 161, 255);
+  --background-color-secondary-inverse: rgb(240, 249, 255);
+  --background-color-third: rgb(126, 82, 204);
+  --background-color-third-active: rgb(160, 103, 255);
+  --background-color-third-inverse: rgb(239, 230, 255);
+  --background-color-success: rgb(23, 181, 63);
+  --background-color-success-active: rgb(26, 203, 71);
+  --background-color-success-inverse: rgb(241, 253, 244);
+  --background-color-warning: rgb(230, 121, 25);
+  --background-color-warning-active: rgb(233, 137, 53);
+  --background-color-warning-inverse: rgb(253, 247, 241);
+  --background-color-danger: rgb(219, 57, 36);
+  --background-color-danger-active: rgb(224, 81, 62);
+  --background-color-danger-inverse: rgb(253, 243, 242);
+
+  /* Color Border */
+  --border-color-base: rgb(177, 171, 186);
+  --border-color-soft: rgb(203, 199, 209);
+  --border-color-softer: rgb(229, 227, 232);
+  --border-color-softest: rgb(245, 244, 246);
+  --border-color-active: rgb(23, 181, 63);
+  --border-color-primary: rgb(23, 181, 63);
+  --border-color-success: rgb(23, 181, 63);
+  --border-color-warning: rgb(230, 121, 25);
+  --border-color-danger: rgb(219, 57, 36);
+
+  /* Border Size */
+  --border-size-base: 1px;
+  --border-size-large: 3px;
+  --border-size-x-large: 6px;
+
+  /* Border Radius */
+  --border-radius-x-large: 5px;
+  --border-radius-large: 4px;
+  --border-radius-base: 4px;
+  --border-radius-small: 2px;
+  --border-radius-rounded: 2em;
+  --border-radius-circle: 50%;
+
+  /* Font Size */
+  --font-size-xxxx-large: 3rem;
+  --font-size-xxx-large: 2.5rem;
+  --font-size-xx-large: 2rem;
+  --font-size-x-large: 1.5rem;
+  --font-size-large: 1.25rem;
+  --font-size-base: 1rem;
+  --font-size-body: 15px;
+  --font-size-small: 0.8rem;
+  --font-size-x-small: 0.7rem;
+  --font-size-xx-small: 0.6rem;
+
+  /* Font Space */
+  --font-space-xxxx-large: 2em;
+  --font-space-xxx-large: 1.5em;
+  --font-space-xx-large: 1.2em;
+  --font-space-x-large: 1em;
+  --font-space-large: 0.6em;
+  --font-space-base: 0.5em;
+  --font-space-small: 0.4em;
+  --font-space-x-small: 0.3em;
+  --font-space-xx-small: 0.2em;
+  --font-space-xxx-small: 0.1em;
+
+  /* Font Family */
+  --font-family-heading: 'LatoWeb', sans-serif;
+  --font-family-text: 'LatoWeb', sans-serif;
+  --font-family-serif: 'Gentium Basic', serif;
+  --font-family-code: inconsolata, monospace;
+
+  /* Font Weight */
+  --font-weight-regular: normal;
+  --font-weight-bold: 600;
+
+  /* Line Height */
+  --line-height-large: 1.5rem;
+  --line-height-base: 1.3rem;
+  --line-height-small: 1.1rem;
+  --line-height-smaller: 1.0rem;
+
+  /* Letter Spacing */
+  --letter-spacing-x-large: 0.1em;
+  --letter-spacing-large: 0.05em;
+  --letter-spacing-base: 0;
+  --letter-spacing-small: -0.01em;
+  --letter-spacing-x-small: -0.015em;
+
+  /* Opacity */
+  --opacity-base: 1;
+  --opacity-soft: 0.7;
+  --opacity-disabled: 0.5;
+
+  /* Space */
+  --space-xxx-large: 128px;
+  --space-xx-large: 64px;
+  --space-x-large: 48px;
+  --space-large: 32px;
+  --space-base: 24px;
+  --space-small: 16px;
+  --space-x-small: 8px;
+  --space-xx-small: 4px;
+  --space-xxx-small: 2px;
+  --space-none: 0;
+
+  /* Size Height */
+  --size-height-base: 42px;
+  --size-height-large: 50px;
+  --size-height-xlarge: 60px;
+  --size-height-footer: 64px;
+  --size-height-connections: 315px;
+  --size-tappable-square: 44px;
+  --size-ribbon: 6px;
+
+  /* Size Width */
+  --size-width-filter-sidebar: 85px;
+  --size-width-paginate: 200px;
+  --size-max-width-filter-menu: 1026px;
+
+  /* Size Avatar */
+  --size-avatar-small: 34px;
+  --size-avatar-base: 44px;
+  --size-avatar-large: 114px;
+
+  /* Size Buttons */
+  --size-button-large: 50px;
+  --size-button-base: 36px;
+  --size-button-small: 26px;
+
+  /* Size Images */
+  --size-image-max-height: 2000px;
+  --size-image-cropper-max-height: 600px;
+  --size-image-cropper-min-height: 400px;
+  --size-image-uploader-min-height: 250px;
+
+  /* Size Icons */
+  --size-icon-base: 16px;
+  --size-icon-large: 60px;
+
+  /* Shadow */
+  --box-shadow-x-large: 0 15px 30px 0 rgba(0,0,0,.11),0 5px 15px 0 rgba(0,0,0,.08);
+  --box-shadow-large: 0 10px 20px 0 rgba(0,0,0,.11),0 3px 10px 0 rgba(0,0,0,.08);
+  --box-shadow-base: 0px 12px 26px -4px rgba(0, 0, 0, .1);
+  --box-shadow-small: 0px 8px 18px -2px rgba(0, 0, 0, .1);
+  --box-shadow-x-small: 0px 0px 3px 0px rgba(0, 0, 0, .1);
+  --box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 0.5);
+  --box-shadow-inset: inset 0 0 20px 1px rgba(0,0,0,.15);
+  --box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05);
+
+  /* Effects */
+  --blur-radius: 22px;
+
+  /* Animation Duration */
+  --duration-short: 0.08s;
+  --duration-base: 0.5s;
+  --duration-long: 0.75s;
+  --duration-x-long: 1s;
+  --duration-xx-long: 2s;
+
+  /* Animation Ease */
+  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-sharp: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-bounce: cubic-bezier(.87,-.41,.19,1.44);
+  --ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-sharp: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+
+  /* Z-Index */
+  --z-index-modal: 9999;
+  --z-index-overlay: 9000;
+  --z-index-dropdown: 8888;
+  --z-index-page-submenu: 2500;
+  --z-index-page-header: 2000;
+  --z-index-page-sidebar: 1500;
+  --z-index-sticky-float: 150;
+  --z-index-sticky: 100;
+  --z-index-post-teaser-link: 5;
+  --z-index-surface: 1;
+
+  /* Custom Tokens (Footer, Header, etc.) */
+  --color-header-background: var(--color-neutral-100);
+  --color-footer-background: var(--color-neutral-100);
+  --color-footer-link: var(--color-primary);
+  --color-locale-menu: var(--text-color-soft);
+  --color-donation-bar: var(--color-primary);
+  --color-donation-bar-light: var(--color-primary-light);
+  --color-toast-red: var(--color-danger);
+  --color-toast-orange: var(--color-warning);
+  --color-toast-yellow: var(--color-yellow);
+  --color-toast-blue: var(--color-secondary);
+  --color-toast-green: var(--color-success);
+  --color-ribbon-event: var(--background-color-third);
+  --color-ribbon-event-active: var(--background-color-third-active);
+  --color-ribbon-article: var(--background-color-secondary);
+  --color-ribbon-article-active: var(--background-color-secondary-active);
+
+  /* Chat Tokens */
+  --chat-message-bg-me: var(--color-primary-light);
+  --chat-message-color: var(--text-color-base);
+  --chat-message-bg-others: var(--color-neutral-80);
+  --chat-sidemenu-bg: var(--color-secondary-active);
+  --chat-new-message-color: var(--color-secondary-active);
+  --chat-message-timestamp: var(--text-color-soft);
+  --chat-message-checkmark-seen: var(--text-color-secondary);
+  --chat-message-checkmark: var(--text-color-soft);
+  --chat-room-color-counter-badge: var(--text-color-inverse);
+  --chat-room-background-counter-badge: var(--color-secondary);
+}