neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
122 lines
2.5 KiB
Markdown
122 lines
2.5 KiB
Markdown
---
|
|
name: system/component-patterns
|
|
title: Component Patterns
|
|
description: Reusable UI components with consistent patterns.
|
|
tags: [system, component, patterns, reusability]
|
|
source: raycast.com, linear.app, stripe.com, design-systems.dev
|
|
---
|
|
|
|
# Component Patterns
|
|
|
|
## 1. Button Variants
|
|
|
|
```css
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--color-accent);
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--color-accent-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--color-text-primary);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.btn-secondary:hover {
|
|
border-color: var(--color-accent);
|
|
background: rgba(99, 102, 241, 0.1);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.btn-ghost:hover {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.btn-lg { padding: 16px 32px; font-size: 1.125rem; }
|
|
.btn-sm { padding: 8px 16px; font-size: 0.875rem; }
|
|
```
|
|
|
|
## 2. Input Variants
|
|
|
|
```css
|
|
.input {
|
|
padding: 12px 16px;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 10px;
|
|
color: var(--color-text-primary);
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
|
}
|
|
```
|
|
|
|
## 3. Card Variants
|
|
|
|
```css
|
|
.card {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 20px;
|
|
padding: 32px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card:hover {
|
|
border-color: var(--color-border-hover);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
```
|
|
|
|
## 4. Badge/Dot
|
|
|
|
```css
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 12px;
|
|
background: rgba(99, 102, 241, 0.1);
|
|
color: var(--color-accent);
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
```
|
|
|
|
## Anti-patterns
|
|
|
|
| ❌ Плохо | ✅ Хорошо |
|
|
|----------|-----------|
|
|
| 10+ размеров кнопок | 3–5 вариантов |
|
|
| Без `:focus` | `:focus-visible` outline |
|
|
| Без transition | `transition: all 0.3s ease` |
|
|
| Hover на touch | `@media (hover: hover)` |
|