feat(style): start work on redesign

src/app/assets/css/app.css

@@ -77,6 +77,10 @@
   @apply max-w-full overflow-hidden font-bold text-ellipsis;
 }
 
+@utility subheadlineEmphasized {
+  @apply align-middle text-[15px] leading-5 font-semibold -tracking-[0.4px];
+}
+
 @utility truncate-overflow {
   @apply overflow-hidden text-ellipsis;
 }

src/app/assets/css/vibetype.css

@@ -4,12 +4,29 @@
 /* stylelint-disable plugin/no-unsupported-browser-features */
 
 :root {
+  /* v3 */
+  --base-background: #fff;
+  --base-background-nav-bar: #eff0efe5;
+  --base-white: #fff;
+  --critic-red-light: #ffb8cb;
+  --critic-red-middle-dark: #c20034;
+  --neutral-level-1: #eff0ef;
+  --neutral-level-2: #dbdcdb;
+  --neutral-level-5: #737874;
+  --neutral-level-6: #000;
+  --primary-green-light: #c2f5ca;
+  --primary-green-middle-dark: #1ba732;
+  --secondary-blue-light: #b9d6fe;
+  --secondary-blue-middle-dark: #0351bf;
+  --warning-yellow-light: #f5f0c2;
+  --warning-yellow-middle-dark: #a7991b;
+
+  /* v2 */
   --accent-line: #dcf9ea;
   --accent-strong-hover: #2bb86d;
   --accent-strong: #36db83;
   --accent-weak-hover: #c0e6d2;
   --accent-weak: #dcf9ea;
-  --base-white: #fafafc;
   --critic-red-middle: #ff1453;
   --critic-string: #e00000;
   --critic-weak: #ffebeb;
@@ -48,10 +65,24 @@
 }
 
 .dark {
+  /* v3 */
+  --base-background: #000;
+  --base-background-nav-bar: #191a19e5;
+  --neutral-level-1: #191a19;
+  --neutral-level-2: #282a28;
+  --neutral-level-5: #737874;
+  --neutral-level-6: #fff;
+  --primary-green-light: #9fefac;
+  --primary-green-middle-dark: #158428;
+  --secondary-blue-light: #90befd;
+  --secondary-blue-middle-dark: #024097;
+  --warning-yellow-light: #fbf9e5;
+  --warning-yellow-middle-dark: #cab921;
+
+  /* v2 */
   --accent-strong: #4dc762;
   --accent-weak-hover: #9cd0a6;
   --accent-weak: #c1dcc6;
-  --base-white: #e4e4eb;
   --critic-weak: #e67070;
   --complement-strong: #d7456b;
   --faint-line: #2d2d2c;

src/app/components/app/AppContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full max-w-md self-center px-4 py-2">
+    <slot />
+  </div>
+</template>

src/app/components/app/button/AppButtonHeadless.vue

@@ -0,0 +1,78 @@
+<template>
+  <AppLink
+    v-if="to"
+    v-bind="delegatedProps"
+    :aria-label
+    :class="cn(classComputed, classProps)"
+    :is-disabled="disabled"
+    :is-colored="false"
+    :to
+    @click="emit('click')"
+  >
+    <slot name="prefix" />
+    <!-- <div class="truncate-overflow"> -->
+    <slot />
+    <!-- </div> -->
+    <slot name="suffix" />
+  </AppLink>
+  <button
+    v-else
+    :aria-label
+    :class="cn(['rounded-sm', classComputed], classProps)"
+    :disabled
+    :title="ariaLabel"
+    :type
+    @click="emit('click')"
+  >
+    <slot name="prefix" />
+    <!-- <span class="truncate-overflow"> -->
+    <slot />
+    <!-- </span> -->
+    <slot name="suffix" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { ButtonHTMLAttributes, HtmlHTMLAttributes } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import { cn } from '@/utils/shadcn'
+
+const {
+  ariaLabel,
+  class: classProps = undefined,
+  disabled,
+  isBlock,
+  isExternal,
+  isLinkColored,
+  to = undefined,
+  type = 'button',
+} = defineProps<
+  {
+    ariaLabel: string
+    disabled?: boolean
+    isBlock?: boolean
+    isExternal?: boolean
+    isLinkColored?: boolean
+    to?: RouteLocationRaw
+    type?: ButtonHTMLAttributes['type']
+  } & { class?: HtmlHTMLAttributes['class'] }
+>()
+const delegatedProps = computed(() => ({
+  ariaLabel,
+  isExternal,
+}))
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+// computations
+const classComputed = computed(() =>
+  [
+    'overflow-hidden',
+    ...(isBlock ? ['block'] : ['inline-flex items-center gap-2']),
+    ...(isLinkColored ? ['text-link-dark dark:text-link-bright'] : []),
+  ].join(' '),
+)
+</script>

src/app/components/app/button/AppButtonNew.vue

@@ -0,0 +1,56 @@
+<template>
+  <AppButtonHeadless
+    v-bind="delegatedProps"
+    :data-variant="variant"
+    :class="
+      cn(
+        'flex gap-3 rounded-3xl p-3',
+        'data-[variant=primary]:bg-(--primary-green-middle-dark) data-[variant=secondary]:bg-(--neutral-level-1)',
+        classProps,
+      )
+    "
+    @click="emit('click')"
+  >
+    <slot name="prefix" />
+    <AppTypographySubheadlineEmphasized>
+      <slot />
+    </AppTypographySubheadlineEmphasized>
+  </AppButtonHeadless>
+</template>
+
+<script setup lang="ts">
+import type { ButtonHTMLAttributes, HtmlHTMLAttributes } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import { cn } from '@/utils/shadcn'
+
+const {
+  ariaLabel,
+  class: classProps = undefined,
+  disabled,
+  isExternal,
+  to = undefined,
+  type = 'button',
+  variant = 'primary',
+} = defineProps<
+  {
+    ariaLabel: string
+    disabled?: boolean
+    isExternal?: boolean
+    to?: RouteLocationRaw
+    type?: ButtonHTMLAttributes['type']
+    variant?: 'primary' | 'secondary'
+  } & { class?: HtmlHTMLAttributes['class'] }
+>()
+const delegatedProps = computed(() => ({
+  ariaLabel,
+  disabled,
+  isExternal,
+  to,
+  type,
+}))
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>

src/app/components/app/icon/AppIconCamera.vue

@@ -0,0 +1,16 @@
+<template>
+  <AppIcon v-slot="attributes">
+    <IHeroiconsCamera v-bind="attributes" :aria-label="t('ariaLabel')" />
+  </AppIcon>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  ariaLabel: Kamera
+en:
+  ariaLabel: Camera
+</i18n>

src/app/components/app/icon/AppIconFavorite.vue

@@ -1,6 +1,6 @@
 <template>
   <AppIcon v-slot="attributes">
-    <IVibetypeFavorite v-bind="attributes" :aria-label="t('ariaLabel')" />
+    <IHeroiconsHeart v-bind="attributes" :aria-label="t('ariaLabel')" />
   </AppIcon>
 </template>
 

src/app/components/app/icon/AppIconFavoriteFilled.vue

@@ -1,6 +1,6 @@
 <template>
   <AppIcon v-slot="attributes">
-    <IVibetypeFavoriteFilled v-bind="attributes" :aria-label="t('ariaLabel')" />
+    <IHeroiconsHeartSolid v-bind="attributes" :aria-label="t('ariaLabel')" />
   </AppIcon>
 </template>
 

src/app/components/app/icon/AppIconHome.vue

@@ -1,6 +1,6 @@
 <template>
   <AppIcon v-slot="attributes">
-    <IVibetypeHome v-bind="attributes" :aria-label="t('ariaLabel')" />
+    <IHeroiconsHomeSolid v-bind="attributes" :aria-label="t('ariaLabel')" />
   </AppIcon>
 </template>
 

src/app/components/app/typography/AppTypographyCaption1Emphasized.vue

@@ -0,0 +1,22 @@
+<template>
+  <span
+    :class="
+      cn(
+        'align-middle text-[12px] leading-4 font-semibold -tracking-[0.4px]',
+        classProps,
+      )
+    "
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { HtmlHTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/shadcn'
+
+const { class: classProps = undefined } = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>

src/app/components/app/typography/AppTypographyCaption2Emphasized.vue

@@ -0,0 +1,19 @@
+<template>
+  <span
+    :class="
+      cn('text-[11px] leading-3.25 font-semibold -tracking-[0.4px]', classProps)
+    "
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { HtmlHTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/shadcn'
+
+const { class: classProps = undefined } = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>

src/app/components/app/typography/AppTypographyFootnoteEmphasized.vue

@@ -0,0 +1,22 @@
+<template>
+  <span
+    :class="
+      cn(
+        'text-[13px] leading-4.5 font-semibold -tracking-[0.4px] text-(--neutral-level-5)',
+        classProps,
+      )
+    "
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { HtmlHTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/shadcn'
+
+const { class: classProps = undefined } = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>

src/app/components/app/typography/AppTypographyHeadlineRegular.vue

@@ -0,0 +1,19 @@
+<template>
+  <span
+    :class="
+      cn('text-[17px] leading-5.5 font-semibold -tracking-[0.4px]', classProps)
+    "
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { HtmlHTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/shadcn'
+
+const { class: classProps = undefined } = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>

src/app/components/app/typography/AppTypographySubheadlineEmphasized.vue

@@ -0,0 +1,15 @@
+<template>
+  <span :class="cn('subheadlineEmphasized', classProps)">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { HtmlHTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/shadcn'
+
+const { class: classProps = undefined } = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>

src/app/components/app/typography/AppTypographyTitle3Emphasized.vue

@@ -0,0 +1,19 @@
+<template>
+  <span
+    :class="
+      cn('text-xl leading-6.25 font-semibold -tracking-[0.4px]', classProps)
+    "
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { HtmlHTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/shadcn'
+
+const { class: classProps = undefined } = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>