Dorian
88e211c87d
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
120 lines
4.0 KiB
Plaintext
120 lines
4.0 KiB
Plaintext
---
|
|
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:
|
|
- `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)
|
|
|
|
### 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
|
|
- Body font: Inter, system-ui (AIUI default)
|
|
- Mono font: Menlo, Monaco, Courier New
|
|
- 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
|
|
4px grid: `4, 8, 12, 16, 20, 24, 28, 32` px.
|
|
|
|
### 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
|
|
|
|
### Cards
|
|
Use `.glass-card` with additional padding:
|
|
```html
|
|
<div class="glass-card p-6">Content</div>
|
|
```
|
|
|
|
### 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, 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`
|
|
|
|
## 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
|