refactor(ui): port exact Archy glassmorphism system
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:
@@ -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')"
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user