Skip to content

Refactor/frontend theme tokens #352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlieNiT merged 2 commits into from
Jul 8, 2026
Merged

Refactor/frontend theme tokens #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
92f741b
refactor(frontend): unify panels onto one theme and extract color tokens
Jul 8, 2026
61f0aa1
fix(frontend): make panel bodies scroll instead of crushing list items
Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 26 additions & 46 deletions frontend/src/components/common/ConfirmModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,48 @@
<VueFinalModal
class="flex justify-center items-center"
overlay-class="bg-black/50"
content-class="flex flex-col max-w-md mx-4 p-6 rounded-xl shadow-lg space-y-4 transition-colors"
content-class="panel max-w-md w-full !p-0"
content-transition="vfm-slide-up"
overlay-transition="vfm-fade"
>
<div
class="p-4 rounded-xl"
:class="[
'flex flex-col space-y-4',
dark
? 'bg-slate-900 text-white border-slate-700'
: 'bg-white text-gray-800',
]"
>
<div class="flex items-center justify-between">
<h1 class="text-xl font-semibold">{{ title }}</h1>
<button
class="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
@click="handleClose"
<div class="panel-header">
<h1 class="panel-title !text-xl">{{ title }}</h1>
<button class="panel-close" @click="handleClose">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
:class="dark ? 'text-white' : 'text-gray-600'"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>

<div class="p-6 space-y-4">
<div>
<slot name="content">
<p class="text-gray-600 dark:text-gray-300">
<p class="text-content-muted">
اینجا می‌توانید محتوای مودال را قرار دهید.
</p>
</slot>
</div>

<div class="flex justify-end gap-4 mt-4">
<div class="flex justify-end gap-4 mt-2">
<button
class="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
:class="
dark
? 'text-gray-200 bg-gray-700 hover:bg-gray-600'
: 'text-gray-700 bg-gray-100 hover:bg-gray-200'
"
class="px-4 py-2 text-sm font-medium rounded-lg transition-colors text-content-muted bg-surface-raised hover:bg-border"
@click="emit('cancel')"
>
انصراف
</button>
<button
class="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
:class="
dark
? 'text-white bg-blue-600 hover:bg-blue-700'
: 'text-white bg-blue-600 hover:bg-blue-700'
"
class="panel-btn !px-5 !py-2 !text-sm"
@click="emit('confirm')"
>
تایید
Expand All @@ -83,6 +61,8 @@ defineProps({
type: String,
default: 'تایید عملیات',
},
// Retained for backward compatibility with existing callers; the modal
// now always uses the unified slate/amber panel theme.
dark: {
type: Boolean,
default: false,
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/common/CostlyButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ defineProps({
loading: Boolean,
backgroundColor: {
type: String,
default: 'green',
default: 'var(--color-accent)',
},
textColor: {
type: String,
default: 'white',
default: 'var(--color-accent-content)',
},
});
</script>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/common/FloatingUI.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<div>
<div
v-if="chipBoxText"
class="fixed top-6 left-1/2 -translate-x-1/2 bg-slate-900/80 text-gray-200 px-6 py-3 rounded-full shadow-lg z-[100] border border-sky-500/40 pointer-events-none whitespace-nowrap"
class="fixed top-6 left-1/2 -translate-x-1/2 bg-surface-alt/80 text-content-muted px-6 py-3 rounded-full shadow-lg z-[100] border border-info/40 pointer-events-none whitespace-nowrap"
>
{{ chipBoxText }}
</div>

<div
v-if="tooltipText"
class="fixed bg-slate-900/80 text-gray-200 px-4 py-2 rounded-md shadow-lg z-[100] border border-sky-500/40 pointer-events-none whitespace-nowrap text-sm"
class="fixed bg-surface-alt/80 text-content-muted px-4 py-2 rounded-md shadow-lg z-[100] border border-info/40 pointer-events-none whitespace-nowrap text-sm"
:style="tooltipStyle"
>
{{ tooltipText }}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/Iframe.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
ref="containerRef"
class="relative bg-slate-900/80 border border-sky-500/40 rounded-3xl shadow-lg overflow-hidden transition-all duration-300 ease-linear"
class="relative bg-surface-alt/80 border border-info/40 rounded-3xl shadow-lg overflow-hidden transition-all duration-300 ease-linear"
:class="{ 'fullscreen-active': isFullscreen }"
>
<button
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/common/InfoBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
width: `calc(var(--spacing) * ${boxWidth})`,
...infoBoxStyle,
}"
class="bg-[rgb(121,200,237,0.8)] text-[#310f0f] p-4 rounded-xl font-main text-base z-[10000] flex flex-col items-center pointer-events-auto"
class="bg-surface/90 text-content border border-border p-4 rounded-xl shadow-2xl font-main text-base z-[10000] flex flex-col items-center pointer-events-auto"
@pointerdown.stop
>
<h3 class="text-lg font-bold text-center shrink-0">
<h3 class="text-lg font-bold text-center shrink-0 text-accent">
{{ title }}
</h3>

Expand All @@ -30,7 +30,7 @@
</div>
<div
v-if="errorText"
class="text-center text-sm text-red-700 font-semibold bg-red-200 p-2 rounded-md"
class="text-center text-sm text-danger-content font-semibold bg-danger-soft border border-danger/40 p-2 rounded-md"
>
{{ errorText }}
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/common/LoadingBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
/>

<div
class="relative h-6 w-full bg-gray-700 rounded-full overflow-hidden"
class="relative h-6 w-full bg-surface-raised rounded-full overflow-hidden"
>
<div
class="absolute top-0 left-0 h-full bg-blue-500 rounded-full transition-all duration-300 ease-linear"
class="absolute top-0 left-0 h-full bg-info-alt rounded-full transition-all duration-300 ease-linear"
:style="{ width: progress + '%' }"
></div>
</div>
Expand All @@ -32,7 +32,7 @@

<script setup>
defineProps({
progress: {

Check warning on line 35 in frontend/src/components/common/LoadingBar.vue

View workflow job for this annotation

GitHub Actions / build-and-test 

Prop "progress" should be optional
type: Number,
required: true,
default: 0,
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/LoadingIndicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="text-2xl text-gray-300 font-main bg-[rgb(121,200,237,0.8)] px-8 py-4 rounded-lg"
class="text-2xl text-content font-main bg-surface/90 border border-border shadow-2xl px-8 py-4 rounded-lg"
>
{{ message }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/MuteButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<button
class="h-12 w-12 rounded-lg p-2 transition-colors duration-200 hover:bg-slate-700/90 flex justify-center items-center"
class="h-12 w-12 rounded-lg p-2 transition-colors duration-200 hover:bg-surface-raised/90 flex justify-center items-center"
title="قطع/پخش صدا"
@pointerdown.stop="toggleMute"
>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/common/PlayerInventoryBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}"
>
<div
class="flex justify-between px-1 mb-1 text-xs text-gray-300 drop-shadow-md"
class="flex justify-between px-1 mb-1 text-xs text-content-muted drop-shadow-md"
>
<span class="block">{{ barData.name }}</span>
<span
Expand All @@ -22,7 +22,7 @@
class="relative flex items-center h-6 rounded-md shadow-inner"
:class="[
barData.englishName === 'Coin' && barData.value < 0
? 'bg-red-800/50'
? 'bg-danger-soft'
: 'bg-black/30',
]"
:style="{
Expand Down Expand Up @@ -93,9 +93,9 @@ const barPercentage = computed(() => {

const requiredLineClass = computed(() => {
if (props.barData.required <= props.barData.value) {
return 'border-green-500';
return 'border-success';
} else {
return 'border-red-500 border-dotted';
return 'border-danger border-dotted';
}
});
</script>
3 changes: 2 additions & 1 deletion frontend/src/components/common/StarryNight.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
ref="starsContainer"
class="fixed top-0 left-0 w-full h-full -z-10"
:style="{
background: 'linear-gradient(180deg, #692A47 0%, #123952 100%)',
background:
'linear-gradient(180deg, var(--color-sky-top) 0%, var(--color-sky-bottom) 100%)',
}"
></div>
</template>
Expand Down
40 changes: 20 additions & 20 deletions frontend/src/components/features/island/ChallengeBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="relative bg-slate-900/90 border border-slate-700 rounded-2xl shadow-xl p-8 transition-all duration-500"
class="relative bg-surface-alt/90 border border-border-soft rounded-2xl shadow-xl p-8 transition-all duration-500"
>
<div class="absolute top-4 right-4">
<button
Expand All @@ -18,7 +18,7 @@
</div>
<div class="text-center pt-12">
<p
class="text-xl md:text-2xl font-light text-gray-200 leading-relaxed"
class="text-xl md:text-2xl font-light text-content-muted leading-relaxed"
>
{{ challenge.description }}
</p>
Expand All @@ -41,7 +41,7 @@
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-12 w-12 text-red-400"
class="h-12 w-12 text-danger-content"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -53,12 +53,12 @@
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="mt-4 text-xl font-semibold text-red-400">
<p class="mt-4 text-xl font-semibold text-danger-content">
پاسخ شما اشتباه است
</p>
<p
v-if="challenge.submissionState.feedback"
class="mt-2 text-sm text-gray-300 max-w-md text-justify"
class="mt-2 text-sm text-content-muted max-w-md text-justify"
>
{{ challenge.submissionState.feedback }}
</p>
Expand All @@ -71,7 +71,7 @@
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-12 w-12 text-sky-400"
class="h-12 w-12 text-info-content"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -83,10 +83,10 @@
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="mt-4 text-xl font-semibold text-gray-200">
<p class="mt-4 text-xl font-semibold text-content-muted">
پاسخ شما ثبت شد
</p>
<p class="mt-2 text-sm text-gray-400">
<p class="mt-2 text-sm text-content-subtle">
نتیجه تا چند دقیقه دیگر اعلام می‌شود. می‌توانید به بازی
ادامه دهید.
</p>
Expand All @@ -95,7 +95,7 @@
<div
v-else-if="challenge.submissionState.status === 'correct'"
key="correct"
class="flex flex-col items-center justify-center text-green-400"
class="flex flex-col items-center justify-center text-success-content"
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -123,7 +123,7 @@
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-12 w-12 text-amber-400"
class="h-12 w-12 text-accent"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -135,12 +135,12 @@
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="mt-4 text-xl font-semibold text-amber-400">
<p class="mt-4 text-xl font-semibold text-accent">
پاسخ شما نیمه‌درست است
</p>
<p
v-if="challenge.submissionState.feedback"
class="mt-2 text-sm text-gray-300 max-w-md text-justify"
class="mt-2 text-sm text-content-muted max-w-md text-justify"
>
{{ challenge.submissionState.feedback }}
</p>
Expand All @@ -158,15 +158,15 @@
v-model="inputValue"
:type="challenge.type"
placeholder="پاسخ..."
class="w-full p-3 text-lg text-center text-gray-100 bg-slate-800/70 rounded-lg border-2 border-slate-600 focus:border-cyan-500 focus:ring-0 outline-none transition-colors"
class="w-full p-3 text-lg text-center text-content bg-surface-alt rounded-lg border-2 border-border focus:border-accent focus:ring-0 outline-none transition-colors"
:disabled="!challenge.submissionState.submittable"
@keyup.enter="submit"
/>
<button
:disabled="
!challenge.submissionState.submittable || !hasValue
"
class="btn-hover px-6 py-3 text-lg font-semibold text-white bg-[#07458bb5] rounded-lg shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
class="btn-hover px-6 py-3 text-lg font-semibold text-accent-content bg-accent rounded-lg shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
@click="submit"
>
ارسال
Expand All @@ -176,10 +176,10 @@
<div v-else class="flex items-center justify-center gap-3">
<label
:for="fileInputId"
class="btn-hover flex-grow text-center px-5 py-3 text-lg font-medium text-gray-200 bg-slate-700/80 rounded-lg border-2 border-transparent hover:border-cyan-500 cursor-pointer"
class="btn-hover flex-grow text-center px-5 py-3 text-lg font-medium text-content-muted bg-surface-raised/80 rounded-lg border-2 border-transparent hover:border-accent cursor-pointer"
>
<span v-if="!selectedFileName">انتخاب فایل</span>
<span v-else class="text-cyan-400">{{
<span v-else class="text-accent">{{
selectedFileName
}}</span>
</label>
Expand All @@ -196,7 +196,7 @@
!challenge.submissionState.submittable ||
!inputValue
"
class="btn-hover px-6 py-3 text-lg font-semibold text-white bg-green-600 rounded-lg disabled:bg-gray-600 disabled:opacity-50 disabled:transform-none disabled:filter-none shrink-0"
class="btn-hover px-6 py-3 text-lg font-semibold text-accent-content bg-accent rounded-lg disabled:bg-border disabled:text-content-subtle disabled:opacity-50 disabled:transform-none disabled:filter-none shrink-0"
@click="submit"
>
ارسال
Expand Down Expand Up @@ -247,12 +247,12 @@ const helpButtonIcon = computed(() => {

const helpButtonClass = computed(() => {
if (isHelpButtonDisabled.value) {
return 'text-gray-500';
return 'text-content-faint';
}
if (props.challenge.submissionState.hasRequestedHelp) {
return 'text-green-400';
return 'text-success-content';
}
return 'text-blue-400';
return 'text-accent';
});

const helpButtonAnimationClass = computed(() => {
Expand Down
Loading
Loading