lfg2025/archy
1
0
Fork 0
Code Issues 25 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/components/chat/ChatHeader.vue
+7 -6
View File
@@ -1,18 +1,19 @@
<template>
<div class="glass-subtle rounded-t-2xl flex items-center justify-between px-4 py-3">
<div class="glass-strong rounded-t-2xl flex items-center justify-between px-4 py-3"
style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);">
<div class="flex items-center gap-3 min-w-0">
<div class="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center shrink-0">
<span class="text-accent text-sm font-bold">AI</span>
</div>
<div class="min-w-0">
<h2 class="text-sm font-semibold text-white truncate">{{ title }}</h2>
<p class="text-[10px] text-white/40 truncate">{{ conversationId }}</p>
<h2 class="text-sm font-semibold text-white/96 truncate">{{ title }}</h2>
<p class="text-[10px] text-white/40 truncate font-mono">{{ conversationId }}</p>
</div>
</div>
<div class="flex items-center gap-1">
<button
class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
:title="side === 'right' ? 'Move panel to left' : 'Move panel to right'"
aria-label="Switch panel side"
@click="$emit('switchSide')"
@@ -24,7 +25,7 @@
</button>
<button
class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
aria-label="New conversation"
@click="$emit('newChat')"
>
@@ -35,7 +36,7 @@
<button
v-if="showClose"
class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
aria-label="Close"
@click="$emit('close')"
>
packages/app/src/components/chat/ChatInput.vue
+7 -6
View File
@@ -1,15 +1,16 @@
<template>
<div class="p-3 md:p-4">
<div
class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300 inner-glow"
:class="isFocused ? 'border-white/20 glow-soft' : ''"
class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
:class="isFocused ? 'border-glass-highlight' : ''"
:style="isFocused ? 'box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)' : ''"
>
<textarea
ref="textareaRef"
v-model="text"
rows="1"
:placeholder="placeholder"
class="flex-1 resize-none bg-transparent text-sm text-white outline-none placeholder:text-white/30 min-h-[24px] max-h-[120px]"
class="flex-1 resize-none bg-transparent text-sm text-white/90 outline-none placeholder:text-white/25 min-h-[24px] max-h-[120px]"
@focus="isFocused = true"
@blur="isFocused = false"
@keydown.enter.exact.prevent="send"
@@ -17,10 +18,10 @@
/>
<button
:disabled="!canSend"
class="shrink-0 w-9 h-9 flex items-center justify-center rounded-xl transition-all duration-200"
class="shrink-0 glass-button glass-button-sm rounded-xl px-3 transition-all duration-200"
:class="canSend
? 'bg-accent text-white hover:bg-accent-hover active:scale-90'
: 'bg-white/5 text-white/20 cursor-not-allowed'"
? 'hover:bg-white/15 active:scale-95'
: 'opacity-30 cursor-not-allowed'"
aria-label="Send message"
@click="send"
>
packages/app/src/components/chat/ChatMessage.vue
+7 -7
View File
@@ -1,17 +1,17 @@
<template>
<div
class="flex animate-fade-up"
class="flex animate-fade-up-fast"
:class="isUser ? 'justify-end' : 'justify-start'"
:style="{ animationDelay: `${index * 30}ms` }"
>
<div
class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-200"
class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-300"
:class="bubbleClasses"
>
<p class="text-sm leading-relaxed whitespace-pre-wrap break-words">{{ message.content }}</p>
<p class="text-sm leading-relaxed whitespace-pre-wrap break-words text-white/90">{{ message.content }}</p>
<div class="flex items-center gap-2 mt-1.5">
<span class="text-[10px] opacity-40 select-none">{{ formattedTime }}</span>
<span v-if="isUser && message.status" class="text-[10px] opacity-30">
<span class="text-[10px] text-white/30 select-none">{{ formattedTime }}</span>
<span v-if="isUser && message.status" class="text-[10px] text-white/20">
{{ message.status === 'sent' ? '✓' : message.status === 'delivered' ? '✓✓' : '' }}
</span>
</div>
@@ -32,8 +32,8 @@ const isUser = computed(() => props.message.role === 'user')
const bubbleClasses = computed(() =>
isUser.value
? 'glass-strong text-white rounded-br-md'
: 'glass-dark text-gray-100 rounded-bl-md'
? 'glass-strong rounded-br-md'
: 'glass-card rounded-bl-md'
)
const formattedTime = computed(() => {
packages/app/src/components/chat/StreamingDots.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex justify-start animate-fade-up">
<div class="glass-dark rounded-2xl rounded-bl-md px-4 py-3">
<div class="flex justify-start animate-fade-up-fast">
<div class="glass-card rounded-2xl rounded-bl-md px-4 py-3">
<div class="flex items-center gap-1.5">
<span
v-for="i in 3"
packages/app/src/components/widget/WidgetFab.vue
+3 -3
View File
@@ -1,9 +1,9 @@
<template>
<button
class="fixed z-50 w-14 h-14 rounded-full glass-strong flex items-center justify-center
shadow-lg hover:shadow-xl transition-all duration-300
hover:scale-105 active:scale-95 glow-accent"
class="fixed z-50 w-14 h-14 rounded-full glass-button flex items-center justify-center
transition-all duration-300 hover:scale-105 active:scale-95"
:class="positionClasses"
:style="{ boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(247, 147, 26, 0.15)' }"
:aria-label="isOpen ? 'Close AIUI' : 'Open AIUI'"
@click="$emit('toggle')"
>
packages/app/src/components/widget/WidgetModal.vue
+2 -2
View File
@@ -7,8 +7,8 @@
:class="positionClasses"
>
<div
class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] rounded-2xl overflow-hidden shadow-2xl"
:style="{ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(247, 147, 26, 0.08)' }"
class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] glass-card overflow-hidden"
:style="{ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.06)' }"
>
<ChatWindow
variant="modal"
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>
packages/app/src/styles/main.css
+205 -75
View File
@@ -13,13 +13,13 @@
--color-warning: #F59E0B;
--color-info: #3B82F6;
--color-glass-bg: rgba(255, 255, 255, 0.08);
--color-glass-border: rgba(255, 255, 255, 0.12);
--color-glass-bg-hover: rgba(255, 255, 255, 0.14);
--color-glass-border-hover: rgba(255, 255, 255, 0.22);
--color-glass-dark: rgba(0, 0, 0, 0.35);
--color-glass-darker: rgba(0, 0, 0, 0.6);
--color-glass-border: rgba(255, 255, 255, 0.18);
--color-glass-highlight: rgba(255, 255, 255, 0.22);
--color-glass-bg-light: rgba(255, 255, 255, 0.65);
--color-glass-border-light: rgba(255, 255, 255, 0.45);
--shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.45);
--shadow-glass-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
@@ -31,60 +31,155 @@ html {
body {
overscroll-behavior: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glass {
background: var(--color-glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-glass-border);
/* ===== GLASSMORPHISM — ported from Archy ===== */
@layer components {
.glass {
background-color: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.glass-strong {
background-color: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.glass-card {
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
border-radius: 1rem;
overflow-x: hidden;
overflow-y: visible;
}
.glass-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
min-height: 48px;
padding-block: 0 !important;
line-height: 48px;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.9);
}
.glass-button-sm {
min-height: 0 !important;
height: auto !important;
line-height: inherit;
padding-block: 0.375rem !important;
padding-inline: 0.75rem;
}
.gradient-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
border-radius: 1rem;
}
.gradient-card-dark {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
border-radius: 1rem;
}
.gradient-button {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
transition: all 0.3s ease;
}
.gradient-button:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.gradient-border-container {
position: relative;
border-radius: 1.5rem;
padding: 4px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.6) 100%);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
.gradient-border-container-inner {
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 1.25rem;
}
.toast-glass {
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
border-radius: 0.75rem;
}
.nav-tab-active {
position: relative;
background: rgba(0, 0, 0, 0.35) !important;
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
color: rgba(255, 255, 255, 1) !important;
font-weight: 600 !important;
}
.nav-tab-active::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
}
.glass-subtle {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
/* ===== FOCUS STATES — gamepad/keyboard glow ===== */
*:focus-visible {
outline: none;
box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
transition: box-shadow 0.2s ease;
}
.glass-strong {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.glass-light {
background: var(--color-glass-bg-light);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-glass-border-light);
}
.glass-dark {
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass:hover {
background: var(--color-glass-bg-hover);
border-color: var(--color-glass-border-hover);
}
.glow-accent {
box-shadow: 0 0 20px rgba(247, 147, 26, 0.15),
0 0 40px rgba(247, 147, 26, 0.05);
}
.glow-soft {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.06);
}
.inner-glow {
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
}
/* ===== GRADIENT TEXT ===== */
.gradient-text {
background: linear-gradient(to right, #ffffff, #9ca3af);
@@ -93,9 +188,52 @@ body {
color: transparent;
}
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
/* ===== SCROLLBAR — Archy custom gradient scrollbar ===== */
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
border-radius: 10px;
border: 2px solid rgba(0, 0, 0, 0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* ===== ANIMATIONS — Archy timings ===== */
@keyframes fadeUpIn {
0% {
opacity: 0;
transform: translateY(28px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
@@ -109,7 +247,15 @@ body {
}
.animate-fade-up {
animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
animation: fadeUpIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.animate-fade-up-fast {
animation: fadeUpIn 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.animate-fade-in {
animation: fadeIn 0.5s ease forwards;
}
.animate-scale-in {
@@ -120,23 +266,7 @@ body {
animation: pulseGlow 2s ease-in-out infinite;
}
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
* {