Skip to content

Commit 262bb60

Browse files
dargmueslidargmuesli
committed
feat(style): start work on redesign
1 parent 219003b commit 262bb60

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+767
-295
lines changed

‎src/app/assets/css/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@
7777
@apply max-w-full overflow-hidden font-bold text-ellipsis;
7878
}
7979

80+
@utility subheadlineEmphasized {
81+
@apply align-middle text-[15px] leading-5 font-semibold -tracking-[0.4px];
82+
}
83+
8084
@utility truncate-overflow {
8185
@apply overflow-hidden text-ellipsis;
8286
}

‎src/app/assets/css/vibetype.css‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,29 @@
44
/* stylelint-disable plugin/no-unsupported-browser-features */
55

66
:root {
7+
/* v3 */
8+
--base-background: #fff;
9+
--base-background-nav-bar: #eff0efe5;
10+
--base-white: #fff;
11+
--critic-red-light: #ffb8cb;
12+
--critic-red-middle-dark: #c20034;
13+
--neutral-level-1: #eff0ef;
14+
--neutral-level-2: #dbdcdb;
15+
--neutral-level-5: #737874;
16+
--neutral-level-6: #000;
17+
--primary-green-light: #c2f5ca;
18+
--primary-green-middle-dark: #1ba732;
19+
--secondary-blue-light: #b9d6fe;
20+
--secondary-blue-middle-dark: #0351bf;
21+
--warning-yellow-light: #f5f0c2;
22+
--warning-yellow-middle-dark: #a7991b;
23+
24+
/* v2 */
725
--accent-line: #dcf9ea;
826
--accent-strong-hover: #2bb86d;
927
--accent-strong: #36db83;
1028
--accent-weak-hover: #c0e6d2;
1129
--accent-weak: #dcf9ea;
12-
--base-white: #fafafc;
1330
--critic-red-middle: #ff1453;
1431
--critic-string: #e00000;
1532
--critic-weak: #ffebeb;
@@ -48,10 +65,24 @@
4865
}
4966

5067
.dark {
68+
/* v3 */
69+
--base-background: #000;
70+
--base-background-nav-bar: #191a19e5;
71+
--neutral-level-1: #191a19;
72+
--neutral-level-2: #282a28;
73+
--neutral-level-5: #737874;
74+
--neutral-level-6: #fff;
75+
--primary-green-light: #9fefac;
76+
--primary-green-middle-dark: #158428;
77+
--secondary-blue-light: #90befd;
78+
--secondary-blue-middle-dark: #024097;
79+
--warning-yellow-light: #fbf9e5;
80+
--warning-yellow-middle-dark: #cab921;
81+
82+
/* v2 */
5183
--accent-strong: #4dc762;
5284
--accent-weak-hover: #9cd0a6;
5385
--accent-weak: #c1dcc6;
54-
--base-white: #e4e4eb;
5586
--critic-weak: #e67070;
5687
--complement-strong: #d7456b;
5788
--faint-line: #2d2d2c;

‎src/app/components/app/AppContent.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="w-full max-w-md self-center px-4 py-2">
3+
<slot />
4+
</div>
5+
</template>

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<AppLink
3+
v-if="to"
4+
v-bind="delegatedProps"
5+
:aria-label
6+
:class="cn(classComputed, classProps)"
7+
:is-disabled="disabled"
8+
:is-colored="false"
9+
:to
10+
@click="emit('click')"
11+
>
12+
<slot name="prefix" />
13+
<!-- <div class="truncate-overflow"> -->
14+
<slot />
15+
<!-- </div> -->
16+
<slot name="suffix" />
17+
</AppLink>
18+
<button
19+
v-else
20+
:aria-label
21+
:class="cn(['rounded-sm', classComputed], classProps)"
22+
:disabled
23+
:title="ariaLabel"
24+
:type
25+
@click="emit('click')"
26+
>
27+
<slot name="prefix" />
28+
<!-- <span class="truncate-overflow"> -->
29+
<slot />
30+
<!-- </span> -->
31+
<slot name="suffix" />
32+
</button>
33+
</template>
34+
35+
<script setup lang="ts">
36+
import type { ButtonHTMLAttributes, HtmlHTMLAttributes } from 'vue'
37+
import type { RouteLocationRaw } from 'vue-router'
38+
39+
import { cn } from '@/utils/shadcn'
40+
41+
const {
42+
ariaLabel,
43+
class: classProps = undefined,
44+
disabled,
45+
isBlock,
46+
isExternal,
47+
isLinkColored,
48+
to = undefined,
49+
type = 'button',
50+
} = defineProps<
51+
{
52+
ariaLabel: string
53+
disabled?: boolean
54+
isBlock?: boolean
55+
isExternal?: boolean
56+
isLinkColored?: boolean
57+
to?: RouteLocationRaw
58+
type?: ButtonHTMLAttributes['type']
59+
} & { class?: HtmlHTMLAttributes['class'] }
60+
>()
61+
const delegatedProps = computed(() => ({
62+
ariaLabel,
63+
isExternal,
64+
}))
65+
66+
const emit = defineEmits<{
67+
click: []
68+
}>()
69+
70+
// computations
71+
const classComputed = computed(() =>
72+
[
73+
'overflow-hidden',
74+
...(isBlock ? ['block'] : ['inline-flex items-center gap-2']),
75+
...(isLinkColored ? ['text-link-dark dark:text-link-bright'] : []),
76+
].join(' '),
77+
)
78+
</script>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<AppButtonHeadless
3+
v-bind="delegatedProps"
4+
:data-variant="variant"
5+
:class="
6+
cn(
7+
'flex gap-3 rounded-3xl p-3',
8+
'data-[variant=primary]:bg-(--primary-green-middle-dark) data-[variant=secondary]:bg-(--neutral-level-1)',
9+
classProps,
10+
)
11+
"
12+
@click="emit('click')"
13+
>
14+
<slot name="prefix" />
15+
<AppTypographySubheadlineEmphasized>
16+
<slot />
17+
</AppTypographySubheadlineEmphasized>
18+
</AppButtonHeadless>
19+
</template>
20+
21+
<script setup lang="ts">
22+
import type { ButtonHTMLAttributes, HtmlHTMLAttributes } from 'vue'
23+
import type { RouteLocationRaw } from 'vue-router'
24+
25+
import { cn } from '@/utils/shadcn'
26+
27+
const {
28+
ariaLabel,
29+
class: classProps = undefined,
30+
disabled,
31+
isExternal,
32+
to = undefined,
33+
type = 'button',
34+
variant = 'primary',
35+
} = defineProps<
36+
{
37+
ariaLabel: string
38+
disabled?: boolean
39+
isExternal?: boolean
40+
to?: RouteLocationRaw
41+
type?: ButtonHTMLAttributes['type']
42+
variant?: 'primary' | 'secondary'
43+
} & { class?: HtmlHTMLAttributes['class'] }
44+
>()
45+
const delegatedProps = computed(() => ({
46+
ariaLabel,
47+
disabled,
48+
isExternal,
49+
to,
50+
type,
51+
}))
52+
53+
const emit = defineEmits<{
54+
click: []
55+
}>()
56+
</script>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<AppIcon v-slot="attributes">
3+
<IHeroiconsCamera v-bind="attributes" :aria-label="t('ariaLabel')" />
4+
</AppIcon>
5+
</template>
6+
7+
<script setup lang="ts">
8+
const { t } = useI18n()
9+
</script>
10+
11+
<i18n lang="yaml">
12+
de:
13+
ariaLabel: Kamera
14+
en:
15+
ariaLabel: Camera
16+
</i18n>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<AppIcon v-slot="attributes">
3-
<IVibetypeFavorite v-bind="attributes" :aria-label="t('ariaLabel')" />
3+
<IHeroiconsHeart v-bind="attributes" :aria-label="t('ariaLabel')" />
44
</AppIcon>
55
</template>
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<AppIcon v-slot="attributes">
3-
<IVibetypeFavoriteFilled v-bind="attributes" :aria-label="t('ariaLabel')" />
3+
<IHeroiconsHeartSolid v-bind="attributes" :aria-label="t('ariaLabel')" />
44
</AppIcon>
55
</template>
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<AppIcon v-slot="attributes">
3-
<IVibetypeHome v-bind="attributes" :aria-label="t('ariaLabel')" />
3+
<IHeroiconsHomeSolid v-bind="attributes" :aria-label="t('ariaLabel')" />
44
</AppIcon>
55
</template>
66

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<span
3+
:class="
4+
cn(
5+
'align-middle text-[12px] leading-4 font-semibold -tracking-[0.4px]',
6+
classProps,
7+
)
8+
"
9+
>
10+
<slot />
11+
</span>
12+
</template>
13+
14+
<script setup lang="ts">
15+
import type { HtmlHTMLAttributes } from 'vue'
16+
17+
import { cn } from '@/utils/shadcn'
18+
19+
const { class: classProps = undefined } = defineProps<{
20+
class?: HtmlHTMLAttributes['class']
21+
}>()
22+
</script>

0 commit comments

Comments
 (0)