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.
@@ -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`