up-cc 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agents/up-api-tester.md +405 -0
- package/agents/up-backend-specialist.md +7 -0
- package/agents/up-code-reviewer.md +42 -2
- package/agents/up-database-specialist.md +7 -0
- package/agents/up-executor.md +7 -0
- package/agents/up-exhaustive-tester.md +348 -0
- package/agents/up-frontend-specialist.md +7 -0
- package/agents/up-system-designer.md +33 -1
- package/agents/up-visual-critic.md +358 -0
- package/package.json +1 -1
- package/references/engineering-principles.md +205 -0
- package/templates/design-tokens.md +151 -0
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# Design Tokens — {PROJECT_NAME}
|
|
2
|
+
|
|
3
|
+
Referencia visual do projeto. Gerado pelo up-system-designer durante o Estagio 2 (Arquitetura).
|
|
4
|
+
Usado pelo up-visual-critic como baseline para avaliar consistencia visual.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Colors
|
|
9
|
+
|
|
10
|
+
### Primary
|
|
11
|
+
- `--color-primary`: {valor} — Acao principal, CTA, links
|
|
12
|
+
- `--color-primary-hover`: {valor} — Hover da cor primaria
|
|
13
|
+
- `--color-primary-foreground`: {valor} — Texto sobre cor primaria
|
|
14
|
+
|
|
15
|
+
### Secondary
|
|
16
|
+
- `--color-secondary`: {valor} — Acoes secundarias
|
|
17
|
+
- `--color-secondary-hover`: {valor}
|
|
18
|
+
- `--color-secondary-foreground`: {valor}
|
|
19
|
+
|
|
20
|
+
### Neutral
|
|
21
|
+
- `--color-background`: {valor} — Fundo geral
|
|
22
|
+
- `--color-foreground`: {valor} — Texto principal
|
|
23
|
+
- `--color-muted`: {valor} — Fundos sutis
|
|
24
|
+
- `--color-muted-foreground`: {valor} — Texto secundario
|
|
25
|
+
- `--color-border`: {valor} — Bordas
|
|
26
|
+
- `--color-input`: {valor} — Fundo de inputs
|
|
27
|
+
- `--color-card`: {valor} — Fundo de cards
|
|
28
|
+
|
|
29
|
+
### Semantic
|
|
30
|
+
- `--color-success`: {valor} — Sucesso, confirmacao
|
|
31
|
+
- `--color-warning`: {valor} — Alerta, atencao
|
|
32
|
+
- `--color-error`: {valor} — Erro, destrutivo
|
|
33
|
+
- `--color-info`: {valor} — Informativo
|
|
34
|
+
|
|
35
|
+
## Typography
|
|
36
|
+
|
|
37
|
+
### Font Family
|
|
38
|
+
- `--font-sans`: {valor} — Texto geral (ex: Inter, Geist, system-ui)
|
|
39
|
+
- `--font-mono`: {valor} — Codigo (ex: JetBrains Mono, Fira Code)
|
|
40
|
+
|
|
41
|
+
### Font Size Scale
|
|
42
|
+
| Token | Size | Usage |
|
|
43
|
+
|-------|------|-------|
|
|
44
|
+
| `--text-xs` | 12px | Labels, captions |
|
|
45
|
+
| `--text-sm` | 14px | Body secundario, inputs |
|
|
46
|
+
| `--text-base` | 16px | Body principal |
|
|
47
|
+
| `--text-lg` | 18px | Subtitulos |
|
|
48
|
+
| `--text-xl` | 20px | Section headers |
|
|
49
|
+
| `--text-2xl` | 24px | Page titles |
|
|
50
|
+
| `--text-3xl` | 30px | Hero sections |
|
|
51
|
+
| `--text-4xl` | 36px | Display |
|
|
52
|
+
|
|
53
|
+
### Font Weight
|
|
54
|
+
| Token | Weight | Usage |
|
|
55
|
+
|-------|--------|-------|
|
|
56
|
+
| `--font-normal` | 400 | Body text |
|
|
57
|
+
| `--font-medium` | 500 | Labels, emphasis |
|
|
58
|
+
| `--font-semibold` | 600 | Subtitles, buttons |
|
|
59
|
+
| `--font-bold` | 700 | Titles, headings |
|
|
60
|
+
|
|
61
|
+
## Spacing
|
|
62
|
+
|
|
63
|
+
### Scale (base: 4px)
|
|
64
|
+
| Token | Value | Usage |
|
|
65
|
+
|-------|-------|-------|
|
|
66
|
+
| `--space-1` | 4px | Inline gaps, icon padding |
|
|
67
|
+
| `--space-2` | 8px | Tight element spacing |
|
|
68
|
+
| `--space-3` | 12px | Input padding, small gaps |
|
|
69
|
+
| `--space-4` | 16px | Card padding, standard gap |
|
|
70
|
+
| `--space-5` | 20px | Section padding (mobile) |
|
|
71
|
+
| `--space-6` | 24px | Section gaps |
|
|
72
|
+
| `--space-8` | 32px | Section padding (desktop) |
|
|
73
|
+
| `--space-10` | 40px | Large section spacing |
|
|
74
|
+
| `--space-12` | 48px | Page margins |
|
|
75
|
+
| `--space-16` | 64px | Hero spacing |
|
|
76
|
+
|
|
77
|
+
## Border Radius
|
|
78
|
+
|
|
79
|
+
| Token | Value | Usage |
|
|
80
|
+
|-------|-------|-------|
|
|
81
|
+
| `--radius-sm` | 4px | Badges, tags |
|
|
82
|
+
| `--radius-md` | 8px | Buttons, inputs |
|
|
83
|
+
| `--radius-lg` | 12px | Cards, modals |
|
|
84
|
+
| `--radius-xl` | 16px | Large cards, sheets |
|
|
85
|
+
| `--radius-full` | 9999px | Avatars, pills |
|
|
86
|
+
|
|
87
|
+
## Shadows
|
|
88
|
+
|
|
89
|
+
| Token | Value | Usage |
|
|
90
|
+
|-------|-------|-------|
|
|
91
|
+
| `--shadow-sm` | 0 1px 2px rgba(0,0,0,0.05) | Inputs, subtle elevation |
|
|
92
|
+
| `--shadow-md` | 0 4px 6px rgba(0,0,0,0.07) | Cards, dropdowns |
|
|
93
|
+
| `--shadow-lg` | 0 10px 15px rgba(0,0,0,0.1) | Modals, popovers |
|
|
94
|
+
| `--shadow-xl` | 0 20px 25px rgba(0,0,0,0.15) | Dialogs, sheets |
|
|
95
|
+
|
|
96
|
+
## Breakpoints
|
|
97
|
+
|
|
98
|
+
| Token | Value | Usage |
|
|
99
|
+
|-------|-------|-------|
|
|
100
|
+
| `--bp-sm` | 640px | Mobile landscape |
|
|
101
|
+
| `--bp-md` | 768px | Tablet |
|
|
102
|
+
| `--bp-lg` | 1024px | Desktop |
|
|
103
|
+
| `--bp-xl` | 1280px | Wide desktop |
|
|
104
|
+
| `--bp-2xl` | 1536px | Ultra wide |
|
|
105
|
+
|
|
106
|
+
## Z-Index Scale
|
|
107
|
+
|
|
108
|
+
| Token | Value | Usage |
|
|
109
|
+
|-------|-------|-------|
|
|
110
|
+
| `--z-dropdown` | 50 | Dropdowns, selects |
|
|
111
|
+
| `--z-sticky` | 100 | Sticky headers |
|
|
112
|
+
| `--z-overlay` | 200 | Overlays, backdrops |
|
|
113
|
+
| `--z-modal` | 300 | Modals, dialogs |
|
|
114
|
+
| `--z-popover` | 400 | Popovers, tooltips |
|
|
115
|
+
| `--z-toast` | 500 | Toast notifications |
|
|
116
|
+
|
|
117
|
+
## Component Tokens
|
|
118
|
+
|
|
119
|
+
### Buttons
|
|
120
|
+
- Height: 36px (sm), 40px (md), 44px (lg)
|
|
121
|
+
- Padding horizontal: 12px (sm), 16px (md), 24px (lg)
|
|
122
|
+
- Font size: 13px (sm), 14px (md), 15px (lg)
|
|
123
|
+
- Border radius: `--radius-md`
|
|
124
|
+
- Transition: 150ms ease
|
|
125
|
+
|
|
126
|
+
### Inputs
|
|
127
|
+
- Height: 36px (sm), 40px (md), 44px (lg)
|
|
128
|
+
- Padding horizontal: 12px
|
|
129
|
+
- Font size: 14px
|
|
130
|
+
- Border: 1px solid `--color-border`
|
|
131
|
+
- Border radius: `--radius-md`
|
|
132
|
+
- Focus ring: 2px `--color-primary` with offset
|
|
133
|
+
|
|
134
|
+
### Cards
|
|
135
|
+
- Padding: `--space-4` (mobile), `--space-6` (desktop)
|
|
136
|
+
- Border: 1px solid `--color-border`
|
|
137
|
+
- Border radius: `--radius-lg`
|
|
138
|
+
- Shadow: `--shadow-sm`
|
|
139
|
+
|
|
140
|
+
### Tables
|
|
141
|
+
- Header bg: `--color-muted`
|
|
142
|
+
- Row height: 48px
|
|
143
|
+
- Cell padding: `--space-3` horizontal
|
|
144
|
+
- Border: 1px solid `--color-border` (bottom only)
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
**Nota:** Este arquivo e referencia para o visual critic. Os valores reais sao definidos em:
|
|
149
|
+
- Tailwind: `tailwind.config.ts` (theme.extend)
|
|
150
|
+
- CSS: `globals.css` (CSS custom properties)
|
|
151
|
+
- shadcn: `components.json` + `lib/utils.ts`
|