lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

refactor(ui): port exact Archy glassmorphism system

Browse Source 
Replace all glass morphism CSS with exact Archy definitions from
neode-ui/src/style.css. Every container and button class now matches
Archy pixel-for-pixel:

- glass: rgba(0,0,0,0.35), blur(18px), border rgba(255,255,255,0.18)
- glass-strong: same bg, blur(24px)
- glass-card: rgba(0,0,0,0.65), blur(18px), border-radius 1rem
- glass-button: 48px height, rgba(0,0,0,0.6), blur(18px)
- glass-button-sm: compact variant
- gradient-button: primary CTA with gradient intensification on hover
- gradient-card, gradient-card-dark, gradient-border-container
- toast-glass, nav-tab-active with CSS mask gradient border
- Archy inset highlight: inset 0 1px 0 rgba(255,255,255,0.22)
- Archy focus glow: blue box-shadow, no outline
- Archy scrollbar: gradient thumb, hidden variant
- Archy animations: fadeUpIn 900ms cubic-bezier(0.22, 1, 0.36, 1)

Updated design rules (02-tailwind-styling.mdc, 03-design-system.mdc)
to reference Archy as canonical source. Added archy-glass-system.md
to Coding Rules Project.

Made-with: Cursor
This commit is contained in:
Dorian
2026-03-02 14:26:22 +00:00
parent 27864cf92e
commit 88e211c87d
10 changed files with 405 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/pages/ChatPage.vue
+10 -18
View File
@@ -1,5 +1,5 @@
<template>
<div class="h-full flex flex-col bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 relative overflow-hidden">
<div class="h-full flex flex-col bg-[#0a0a0a] relative overflow-hidden">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-accent/5 blur-[120px]" />
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-info/5 blur-[120px]" />
@@ -10,10 +10,11 @@
v-if="showSidebar"
class="hidden lg:flex w-64 xl:w-72 shrink-0 flex-col glass rounded-2xl overflow-hidden"
>
<div class="p-4 flex items-center justify-between">
<div class="p-4 flex items-center justify-between"
style="border-bottom: 1px solid rgba(255, 255, 255, 0.08);">
<h1 class="text-lg font-bold gradient-text">AIUI</h1>
<button
class="p-2 rounded-lg text-white/40 hover:text-white hover:bg-white/5 transition-all"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
aria-label="New chat"
@click="chatStore.createConversation()"
>
@@ -23,14 +24,14 @@
</button>
</div>
<div class="flex-1 overflow-y-auto scrollbar-thin px-2 pb-2 space-y-1">
<div class="flex-1 overflow-y-auto scrollbar-hide px-2 pb-2 space-y-1 pt-2">
<button
v-for="conv in conversations"
:key="conv.id"
class="w-full text-left px-3 py-2.5 rounded-xl text-sm transition-all duration-200 truncate"
class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 truncate"
:class="conv.id === chatStore.activeConversationId
? 'glass-strong text-white'
: 'text-white/50 hover:text-white/80 hover:bg-white/5'"
? 'nav-tab-active'
: 'text-white/60 hover:text-white hover:bg-white/10'"
@click="chatStore.setActiveConversation(conv.id)"
>
{{ conv.title }}
@@ -44,7 +45,7 @@
</p>
</div>
<div class="p-3 border-t border-white/5">
<div class="p-3" style="border-top: 1px solid rgba(255, 255, 255, 0.06);">
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] text-white/25">
<span class="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
<span>OpenRouter connected</span>
@@ -52,21 +53,12 @@
</div>
</aside>
<main class="flex-1 min-w-0 flex flex-col glass rounded-2xl overflow-hidden">
<main class="flex-1 min-w-0 flex flex-col glass-card overflow-hidden">
<ChatWindow
:side="panelSide"
@switch-side="chatStore.switchSide()"
/>
</main>
<aside
v-if="false"
class="hidden xl:flex w-80 shrink-0 flex-col glass rounded-2xl overflow-hidden"
>
<div class="p-4 text-center text-white/20 text-sm">
Content panel (coming soon)
</div>
</aside>
</div>
</div>
</template>