lfg2025/archy
1
0
Fork 0
Code Issues 24 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
.cursor/rules/02-tailwind-styling.mdc
+72 -38
View File
@@ -1,17 +1,21 @@
---
description: Tailwind CSS utility-first styling conventions for AIUI
description: Tailwind CSS utility-first styling conventions for AIUI, ported from Archy
globs: "**/*.vue,**/*.css,**/*.ts"
alwaysApply: false
---
# Tailwind CSS Styling
## Source of Truth
All glass morphism, container, and button patterns originate from the Archy project (`/Projects/Archy/neode-ui/src/style.css`). When in doubt, match Archy exactly.
## Utility-First
Use Tailwind utilities directly in templates. Extract to component classes only when a pattern repeats 3+ times.
## 4px Spacing Grid
All spacing follows a 4px base grid:
- 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 8 = 32px, 12 = 48px, 16 = 64px
```
1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 7 = 28px, 8 = 32px
```
## Typography Scale
```
@@ -27,52 +31,82 @@ text-4xl = 36px (hero headings)
Font weights: `font-normal` (body), `font-medium` (emphasis), `font-semibold` (headings/buttons), `font-bold` (strong emphasis).
## Border Radius
- `rounded-md` (6px) — inputs
- `rounded-lg` (8px) — buttons, standard cards
- `rounded-2xl` (16px) — modern cards, modals
- `rounded-full` — pills, avatars
## Glass Morphism (from Archy)
## Shadows
- `shadow-sm` — subtle elevation
- `shadow-md` — standard card
- `shadow-lg` — modal, dropdown
- `shadow-xl` — hero card
### Containers (exact Archy values)
- `.glass` — base: `bg: rgba(0,0,0,0.35)`, `blur(18px)`, `border: 1px solid rgba(255,255,255,0.18)`, `shadow: 0 8px 24px rgba(0,0,0,0.45)`
- `.glass-strong` — stronger blur: same bg but `blur(24px)`
- `.glass-card` — primary card: `bg: rgba(0,0,0,0.65)`, `blur(18px)`, `border-radius: 1rem`, same border/shadow
- `.gradient-card` — gradient: `linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.8) 100%)`
- `.gradient-card-dark` — dark gradient: `linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%)`
- `.gradient-border-container` — gradient border with inner glass, `border-radius: 1.5rem`
- `.toast-glass` — `border-radius: 0.75rem`, same glass as `.glass-card`
## Glass Morphism
For cards over complex backgrounds:
### Buttons (exact Archy values)
- `.glass-button` — 48px height, `bg: rgba(0,0,0,0.6)`, `blur(18px)`, border `rgba(255,255,255,0.18)`, `color: rgba(255,255,255,0.9)`
- `.glass-button-sm` — compact variant (auto height, `py-1.5 px-3`)
- `.gradient-button` — primary action: `linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.8) 100%)`, border `rgba(255,255,255,0.2)`, intensifies on hover
### Icon / Ghost buttons (Archy pattern)
```html
<div class="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl">
<button class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
```
Never use glass morphism on body text containers or form inputs.
Touch target: minimum 44x44px via padding.
### Active Navigation
`.nav-tab-active` — `bg: rgba(0,0,0,0.35)`, inset highlight, gradient border via CSS mask `::before`
### Usage Rules
- ✅ Cards, panels, modals, sidebars
- ✅ Navigation bars, headers (fixed positioning)
- ✅ Hover states, buttons
- ❌ Body text containers (readability)
- ❌ Form input fields (confusing UX)
## Inset Highlight
The signature Archy inset glow:
```css
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
```
Apply to headers, selected cards, active nav items.
## Border — No Separators Between Sections
Per Archy theme rules: no borders between sidebar and content, or header and content. Only subtle `rgba(255,255,255,0.06-0.08)` borders for internal dividers.
## Gradient Text
```html
<h1 class="gradient-text">Title</h1>
```
`linear-gradient(to right, #ffffff, #9ca3af)` with `background-clip: text`.
## Focus States — Gamepad/Keyboard Glow
All focusable elements get a blue glow (no outline):
```css
*:focus-visible {
outline: none;
box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
}
```
## Scrollbar
- `.custom-scrollbar` — gradient thumb (`rgba(255,255,255,0.3)` to `0.1`), dark track
- `.scrollbar-hide` — hidden scrollbar, keeps scroll functionality
## Responsive — Mobile First
Always write base styles for mobile, enhance with breakpoints:
Base styles for mobile, enhance with breakpoints:
```html
<div class="text-base md:text-lg lg:text-xl p-4 md:p-6 lg:p-8">
```
Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px).
## Dark Mode
Use CSS custom properties for theme switching. Both Tailwind `dark:` and custom theme classes supported:
## Hover States (from Archy)
```html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div class="transition-all duration-300 hover:bg-white/10 hover:text-white">
```
Interactive card lift: `hover:translateY(-2px)` with intensified shadow.
## Gradients for Hierarchy
Use gradients strategically for emphasis, not decoration:
```html
<h2 class="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
```
## Hover States
All interactive elements need immediate visual feedback (< 100ms):
```html
<button class="transition-colors duration-200 hover:bg-primary-dark">
```
## Focus States
Always visible focus for accessibility:
```html
<button class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
```
## Animations (Archy timings)
- `animate-fade-up` — 900ms `cubic-bezier(0.22, 1, 0.36, 1)` with 120ms delay
- `animate-fade-up-fast` — 400ms, no delay (for chat messages)
- `animate-fade-in` — 500ms ease
- `animate-scale-in` — 250ms for modals/popups
.cursor/rules/03-design-system.mdc
+90 -45
View File
@@ -1,74 +1,119 @@
---
description: Design system foundations - colors, typography, spacing, component patterns
description: Design system foundations - glassmorphism from Archy, colors, typography, spacing
globs: "**/*.vue,**/*.css,**/*.ts"
alwaysApply: false
---
# Design System
All glass morphism, container, and button patterns are ported from the Archy project and must match exactly.
## Glass Morphism Hierarchy (from Archy)
### Glass Intensity Levels
| Class | Background | Blur | Use Case |
|-------|-----------|------|----------|
| `.glass` | `rgba(0,0,0,0.35)` | 18px | Sidebar, panels, inputs |
| `.glass-strong` | `rgba(0,0,0,0.35)` | 24px | Headers, message bubbles (user) |
| `.glass-card` | `rgba(0,0,0,0.65)` | 18px | Primary cards, modals, main containers |
| `.gradient-card` | gradient white→black | 18px | Feature cards |
| `.gradient-card-dark` | gradient black→black | 18px | Dark feature cards |
All share: `border: 1px solid rgba(255,255,255,0.18)`, `box-shadow: 0 8px 24px rgba(0,0,0,0.45)`.
### Button Hierarchy (from Archy)
| Class | Purpose | Details |
|-------|---------|---------|
| `.glass-button` | Default | 48px height, `rgba(0,0,0,0.6)`, blur 18px |
| `.glass-button-sm` | Compact | Auto height, smaller padding |
| `.gradient-button` | Primary action | Gradient bg, intensifies on hover |
| Ghost | Icon/text actions | `p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10` |
### Inset Highlight
Signature Archy top-edge glow on focused/active elements:
```css
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
```
### Gradient Border (CSS mask technique)
For premium-feel borders on selected cards and active nav:
```css
::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;
}
```
## Design Tokens
### Color Palette
Semantic color tokens defined by purpose, not appearance:
- `primary` — main brand actions (#606060 / configurable)
Semantic color tokens defined by purpose:
- `primary` — main brand actions (#606060)
- `accent` — highlight, Bitcoin orange (#F7931A)
- `success` — positive states (#10B981)
- `error` — negative states (#EF4444)
- `warning` — caution states (#F59E0B)
- `info` — informational (#3B82F6)
- Neutrals: gray-50 through gray-900
### Glass Tokens (from Archy Tailwind config)
- `glass-dark`: `rgba(0, 0, 0, 0.35)`
- `glass-darker`: `rgba(0, 0, 0, 0.6)`
- `glass-border`: `rgba(255, 255, 255, 0.18)`
- `glass-highlight`: `rgba(255, 255, 255, 0.22)`
### Shadows
- `shadow-glass`: `0 8px 24px rgba(0, 0, 0, 0.45)`
- `shadow-glass-sm`: `0 6px 18px rgba(0, 0, 0, 0.35)`
- `shadow-glass-inset`: `inset 0 1px 0 rgba(255, 255, 255, 0.22)`
### Typography
- Display font: Geometric sans-serif (Space Grotesk, Inter Display)
- Body font: Clean sans-serif (Inter, system-ui)
- Body font: Inter, system-ui (AIUI default)
- Mono font: Menlo, Monaco, Courier New
- Use single font family with weight variations for simplicity
- Text opacity scale: `text-white/25` (placeholders), `text-white/40` (muted), `text-white/60` (secondary), `text-white/70` (interactive default), `text-white/80` (body), `text-white/90` (emphasis), `text-white/96` (headings), `text-white` (active/selected)
### Spacing
All spacing on 4px grid. Common patterns:
- Component padding: `p-4` (16px) to `p-6` (24px)
- Section spacing: `py-12` (48px) to `py-16` (64px)
- Element gaps: `gap-4` (16px) default
4px grid: `4, 8, 12, 16, 20, 24, 28, 32` px.
### Shadows & Glows
```css
shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08)
shadow-card: 0 4px 16px rgba(0, 0, 0, 0.1)
shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15)
```
### Border Radius
- `rounded-lg` (8px) — buttons, nav items, inputs
- `rounded-xl` (12px) — toasts, small cards
- `rounded-2xl` (16px) — main cards, modals
- `rounded-3xl` (24px) — bottom sheets
- `rounded-full` — pills, avatars, FABs
- `1rem` (16px) — `.glass-card` default
## Component Patterns
### Buttons
- Primary: solid background, white text, `rounded-lg`, `font-semibold`
- Secondary: border only, primary text, fill on hover
- Ghost: text only, subtle background on hover
- Icon: `p-2 rounded-md`, minimum 44x44px touch target
- Sizes: sm (`px-4 py-2`), md (`px-6 py-3`), lg (`px-8 py-4`)
### Cards
- Background: white/dark with `rounded-2xl` (16px radius)
- Padding: `p-6`
- Shadow: `shadow-card` default, `shadow-elevated` on hover
- Interactive cards get `hover:shadow-lg transition-shadow duration-300 cursor-pointer`
Use `.glass-card` with additional padding:
```html
<div class="glass-card p-6">Content</div>
```
### Form Elements
- Inputs: `min-h-[44px]` touch target, `text-base` (prevents iOS zoom), `rounded-lg`
- Labels: `text-sm font-semibold text-gray-700 mb-2`
- Error text: `text-sm text-error mt-1`
- Focus: `focus:border-primary focus:ring-2 focus:ring-primary/50`
### Badges
- Status badges: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium`
- Color variants: success (green-100/green-800), warning (yellow-100/yellow-800), error (red-100/red-800)
### Modals
```html
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
<div class="glass-card p-6 max-w-md w-full">...</div>
</div>
```
### Icons
- SVG preferred, using Lucide Icons
- Sizes: xs (16px), sm (20px), md (24px), lg (32px), xl (48px)
- Always use `currentColor` for stroke/fill
- Icon-only buttons must have `aria-label`
- SVG, using `currentColor`
- Sizes: 16px, 20px, 24px, 32px
- Icon-only buttons: `p-2 rounded-lg` (reaches 44px touch target with 24px icon)
- Must have `aria-label`
## Layout Patterns
- Standard container: `max-w-7xl mx-auto px-4 md:px-6`
- Reading container: `max-w-3xl mx-auto px-4 md:px-6`
- Sidebar + content: `grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6`
## Theme Architecture
- Base background: `#0a0a0a` (near-black)
- No separator borders between sidebar/header/content
- Header, sidebar, root share same visual weight
- CSS-based themes with reactive Vue state
- `localStorage` persistence