zark-design 1.0.0 → 3.0.0
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/bin/cli.js +364 -90
- package/package.json +2 -2
- package/templates/README.md.hbs +264 -0
- package/templates/_shared/ASSETS-README.md.hbs +39 -0
- package/templates/_shared/tokens.css.hbs +202 -0
- package/templates/_shared/tokens.js.hbs +34 -0
- package/templates/html/components.css +740 -0
- package/templates/html/index.html +135 -0
- package/templates/html/showcase.html +3550 -0
- package/templates/jsx/App.example.jsx +229 -0
- package/templates/jsx/components/AlertCritical.jsx +43 -0
- package/templates/jsx/components/Avatar.jsx +41 -0
- package/templates/jsx/components/Badge.jsx +12 -0
- package/templates/jsx/components/Banner.jsx +42 -0
- package/templates/jsx/components/Button.jsx +43 -0
- package/templates/jsx/components/Chip.jsx +28 -0
- package/templates/jsx/components/CodeBlock.jsx +42 -0
- package/templates/jsx/components/EmptyState.jsx +27 -0
- package/templates/jsx/components/Funnel.jsx +55 -0
- package/templates/jsx/components/Input.jsx +53 -0
- package/templates/jsx/components/KanbanColumn.jsx +51 -0
- package/templates/jsx/components/Kbd.jsx +11 -0
- package/templates/jsx/components/LeadCard.jsx +79 -0
- package/templates/jsx/components/Modal.jsx +57 -0
- package/templates/jsx/components/Panel.jsx +25 -0
- package/templates/jsx/components/Section.jsx +28 -0
- package/templates/jsx/components/Segmented.jsx +26 -0
- package/templates/jsx/components/Sidebar.jsx +49 -0
- package/templates/jsx/components/Spec.jsx +19 -0
- package/templates/jsx/components/StatCard.jsx +44 -0
- package/templates/jsx/components/TableActions.jsx +34 -0
- package/templates/jsx/components/Tag.jsx +21 -0
- package/templates/jsx/components/TagDot.jsx +26 -0
- package/templates/jsx/components/Toast.jsx +25 -0
- package/templates/jsx/components/Toggle.jsx +29 -0
- package/templates/jsx/components.css +740 -0
- package/templates/{icons.jsx → jsx/icons.jsx} +20 -9
- package/templates/jsx/index.js +31 -0
- package/templates/presets/zark/preset.json +26 -0
- package/templates/REFERENCE.md +0 -376
- package/templates/SHOWCASE.html +0 -254
- package/templates/brand.jsx +0 -89
- package/templates/components.jsx +0 -385
- package/templates/design-canvas.jsx +0 -789
- package/templates/foundations.jsx +0 -363
- package/templates/layouts.jsx +0 -232
- package/templates/patterns.jsx +0 -268
- package/templates/primitives.jsx +0 -306
- package/templates/tokens.css +0 -306
- package/templates/visual-references/icon-zark.png +0 -0
- package/templates/visual-references/logo-zark-principal.png +0 -0
- package/templates/visual-references/pasted-1777605750385-0.png +0 -0
- package/templates/visual-references/pasted-1777605766298-0.png +0 -0
- package/templates/visual-references/pasted-1777605775820-0.png +0 -0
- package/templates/visual-references/pasted-1777605789833-0.png +0 -0
- package/templates/visual-references/pasted-1777605802420-0.png +0 -0
- package/templates/visual-references/pasted-1777605812470-0.png +0 -0
- package/templates/visual-references/pasted-1777605817688-0.png +0 -0
- package/templates/visual-references/pasted-1777605828485-0.png +0 -0
- package/templates/visual-references/pasted-1777605837137-0.png +0 -0
- package/templates/visual-references/pasted-1777605849789-0.png +0 -0
- package/templates/visual-references/pasted-1777605864942-0.png +0 -0
- package/templates/visual-references/pasted-1777605877920-0.png +0 -0
- package/templates/visual-references/pasted-1777605897353-0.png +0 -0
- /package/templates/{assets/zark-logo.png → presets/zark/assets/logo-zark-laranja.png} +0 -0
- /package/templates/{assets → presets/zark/assets}/zark-icon.png +0 -0
|
@@ -0,0 +1,3550 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-BR" data-theme="light">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8"/>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
+
<title>ZARK — Design System (Sistemas)</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
/* ============================================================
|
|
13
|
+
ZARK DESIGN SYSTEM — TOKENS (embedded)
|
|
14
|
+
============================================================ */
|
|
15
|
+
:root {
|
|
16
|
+
/* Brand / Ember */
|
|
17
|
+
--brand-50: #fff3e9;
|
|
18
|
+
--brand-100: #ffe1c8;
|
|
19
|
+
--brand-200: #ffc28e;
|
|
20
|
+
--brand-300: #ffa056;
|
|
21
|
+
--brand-400: #ff8a3a;
|
|
22
|
+
--brand-500: #f56f10;
|
|
23
|
+
--brand-600: #d45e0d;
|
|
24
|
+
--brand-700: #ad4a09;
|
|
25
|
+
--brand-800: #843706;
|
|
26
|
+
--brand-900: #5e2704;
|
|
27
|
+
--brand: #f56f10;
|
|
28
|
+
--bg-void: #151419;
|
|
29
|
+
--bg-glucon: #1b1a1e;
|
|
30
|
+
|
|
31
|
+
/* Neutrals */
|
|
32
|
+
--paper: #fafaf8;
|
|
33
|
+
--canvas: #f5f4f1;
|
|
34
|
+
--surface: #ffffff;
|
|
35
|
+
--line-100: #f0eeea;
|
|
36
|
+
--line-200: #e8e6e1;
|
|
37
|
+
--line-300: #d8d5cf;
|
|
38
|
+
|
|
39
|
+
--ink-50: #f4f3f0;
|
|
40
|
+
--ink-100: #e8e6e1;
|
|
41
|
+
--ink-200: #c8c5bf;
|
|
42
|
+
--ink-300: #a09c95;
|
|
43
|
+
--ink-400: #6f6b64;
|
|
44
|
+
--ink-500: #4a4741;
|
|
45
|
+
--ink-600: #2e2c28;
|
|
46
|
+
--ink-700: #1a1916;
|
|
47
|
+
--ink-800: #111110;
|
|
48
|
+
--ink-900: #0a0a09;
|
|
49
|
+
|
|
50
|
+
/* Semantic */
|
|
51
|
+
--success-50: #ecfdf3;
|
|
52
|
+
--success-500: #10a960;
|
|
53
|
+
--success-700: #067a44;
|
|
54
|
+
--warning-50: #fff8e6;
|
|
55
|
+
--warning-500: #d99000;
|
|
56
|
+
--warning-700: #9a6500;
|
|
57
|
+
--danger-50: #fef1f1;
|
|
58
|
+
--danger-500: #dc3545;
|
|
59
|
+
--danger-700: #a52833;
|
|
60
|
+
--info-50: #eef5ff;
|
|
61
|
+
--info-500: #2f7adc;
|
|
62
|
+
--info-700: #1f5ba8;
|
|
63
|
+
|
|
64
|
+
--tag-bg: #fff0e0;
|
|
65
|
+
--tag-fg: #ad4a09;
|
|
66
|
+
--code-bg: #fff5ea;
|
|
67
|
+
--code-fg: #ad4a09;
|
|
68
|
+
|
|
69
|
+
/* Typography */
|
|
70
|
+
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
71
|
+
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
72
|
+
--font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
|
|
73
|
+
--font-ui: "Inter", -apple-system, sans-serif;
|
|
74
|
+
|
|
75
|
+
--fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
|
|
76
|
+
--fs-base:14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px;
|
|
77
|
+
--fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 64px;
|
|
78
|
+
--fs-display: 88px;
|
|
79
|
+
|
|
80
|
+
--lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.45; --lh-loose: 1.6;
|
|
81
|
+
|
|
82
|
+
--ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0;
|
|
83
|
+
--ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.14em;
|
|
84
|
+
|
|
85
|
+
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
|
|
86
|
+
|
|
87
|
+
/* Spacing */
|
|
88
|
+
--sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px;
|
|
89
|
+
--sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px; --sp-10: 20px;
|
|
90
|
+
--sp-12: 24px; --sp-14: 28px; --sp-16: 32px; --sp-20: 40px; --sp-24: 48px;
|
|
91
|
+
--sp-32: 64px; --sp-40: 80px; --sp-48: 96px;
|
|
92
|
+
|
|
93
|
+
/* Radii */
|
|
94
|
+
--r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
|
|
95
|
+
--r-xl: 12px; --r-2xl: 16px; --r-3xl: 20px;
|
|
96
|
+
|
|
97
|
+
/* Shadows */
|
|
98
|
+
--shadow-xs: 0 1px 0 rgba(20, 17, 12, 0.04);
|
|
99
|
+
--shadow-sm: 0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
|
|
100
|
+
--shadow-md: 0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
|
|
101
|
+
--shadow-lg: 0 12px 32px rgba(20, 17, 12, 0.08), 0 2px 6px rgba(20, 17, 12, 0.04);
|
|
102
|
+
--shadow-xl: 0 24px 64px rgba(20, 17, 12, 0.12), 0 4px 12px rgba(20, 17, 12, 0.05);
|
|
103
|
+
--shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);
|
|
104
|
+
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
105
|
+
|
|
106
|
+
--ring-focus: 0 0 0 3px rgba(255, 93, 31, 0.20);
|
|
107
|
+
--ring-focus-soft: 0 0 0 3px rgba(255, 93, 31, 0.12);
|
|
108
|
+
|
|
109
|
+
/* Motion */
|
|
110
|
+
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
111
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
112
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
113
|
+
--t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; --t-slower: 420ms;
|
|
114
|
+
|
|
115
|
+
/* Layout */
|
|
116
|
+
--sidebar-w: 240px; --topbar-h: 56px; --container-max: 1280px;
|
|
117
|
+
|
|
118
|
+
/* ---------- SPACE / CLIENTE COLORS (CRM) ----------
|
|
119
|
+
Cor única por espaço — usada em ícone, tag, avatar, accent.
|
|
120
|
+
Sempre tom mais saturado (500) + tom suave (50/100) para bg leve. */
|
|
121
|
+
--space-zark: #f56f10; /* brand-500 — brand */
|
|
122
|
+
--space-zark-soft: #fff3e9;
|
|
123
|
+
--space-allsec: #c2410c; /* burnt orange */
|
|
124
|
+
--space-allsec-soft: #fff3e9;
|
|
125
|
+
--space-vipcar: #ea580c; /* deep orange */
|
|
126
|
+
--space-vipcar-soft: #fff3e9;
|
|
127
|
+
--space-limppe: #f59e0b; /* amber */
|
|
128
|
+
--space-limppe-soft: #fff8e6;
|
|
129
|
+
--space-gerais: #1f2937; /* slate near-black */
|
|
130
|
+
--space-gerais-soft: #f4f3f0;
|
|
131
|
+
--space-mixshop: #b91c1c; /* deep red */
|
|
132
|
+
--space-mixshop-soft:#fef1f1;
|
|
133
|
+
--space-vipseg: #991b1b; /* darker red */
|
|
134
|
+
--space-vipseg-soft: #fef1f1;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
[data-theme="dark"] {
|
|
138
|
+
--brand-50: #2a1810; --brand-100: #3d2114; --brand-200: #5e2704;
|
|
139
|
+
--brand-300: #843706; --brand-400: #ad4a09; --brand-500: #f56f10;
|
|
140
|
+
--brand-600: #ff8a3a; --brand-700: #ffa056; --brand-800: #ffc28e;
|
|
141
|
+
--brand-900: #ffe1c8;
|
|
142
|
+
|
|
143
|
+
--paper: #0e0d11; --canvas: #151419; --surface: #1b1a1e;
|
|
144
|
+
--line-100: #232227; --line-200: #2c2b32; --line-300: #3a383f;
|
|
145
|
+
|
|
146
|
+
--ink-50: #1a1916; --ink-100: #2c2b27; --ink-200: #4a4741;
|
|
147
|
+
--ink-300: #6f6b64; --ink-400: #a09c95; --ink-500: #c8c5bf;
|
|
148
|
+
--ink-600: #e0ddd6; --ink-700: #f0ede5; --ink-800: #f7f5ef;
|
|
149
|
+
--ink-900: #fafaf8;
|
|
150
|
+
|
|
151
|
+
--success-50: #0f2419;
|
|
152
|
+
--warning-50: #2a1f08;
|
|
153
|
+
--danger-50: #2a1010;
|
|
154
|
+
--info-50: #0e1a2c;
|
|
155
|
+
|
|
156
|
+
--tag-bg: #3d2114; --tag-fg: #ffc28e;
|
|
157
|
+
--code-bg: #2a1810; --code-fg: #ffa056;
|
|
158
|
+
|
|
159
|
+
--shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.5);
|
|
160
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
161
|
+
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
162
|
+
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
163
|
+
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
164
|
+
--shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
165
|
+
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
166
|
+
|
|
167
|
+
--ring-focus: 0 0 0 3px rgba(255, 138, 58, 0.30);
|
|
168
|
+
--ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* ============================================================
|
|
172
|
+
BASE
|
|
173
|
+
============================================================ */
|
|
174
|
+
* { box-sizing: border-box; }
|
|
175
|
+
html, body {
|
|
176
|
+
margin: 0; padding: 0;
|
|
177
|
+
font-family: var(--font-sans);
|
|
178
|
+
font-size: var(--fs-base);
|
|
179
|
+
line-height: var(--lh-base);
|
|
180
|
+
color: var(--ink-700);
|
|
181
|
+
background: var(--paper);
|
|
182
|
+
-webkit-font-smoothing: antialiased;
|
|
183
|
+
text-rendering: optimizeLegibility;
|
|
184
|
+
}
|
|
185
|
+
::selection { background: var(--brand-200); color: var(--ink-700); }
|
|
186
|
+
a { color: inherit; text-decoration: none; }
|
|
187
|
+
button { font-family: inherit; }
|
|
188
|
+
|
|
189
|
+
@keyframes zk-spin { to { transform: rotate(360deg); } }
|
|
190
|
+
@keyframes zk-fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }
|
|
191
|
+
|
|
192
|
+
/* ============================================================
|
|
193
|
+
APP SHELL
|
|
194
|
+
============================================================ */
|
|
195
|
+
.app {
|
|
196
|
+
display: grid;
|
|
197
|
+
grid-template-columns: var(--sidebar-w) 1fr;
|
|
198
|
+
min-height: 100vh;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* ---------- SIDEBAR ---------- */
|
|
202
|
+
.sidebar {
|
|
203
|
+
position: sticky; top: 0; height: 100vh;
|
|
204
|
+
background: var(--canvas);
|
|
205
|
+
border-right: 1px solid var(--line-200);
|
|
206
|
+
padding: 20px 14px;
|
|
207
|
+
display: flex; flex-direction: column;
|
|
208
|
+
overflow-y: auto;
|
|
209
|
+
}
|
|
210
|
+
.sidebar-brand {
|
|
211
|
+
display: flex; align-items: center; gap: 10px;
|
|
212
|
+
padding: 8px 8px 22px;
|
|
213
|
+
}
|
|
214
|
+
.sidebar-logo {
|
|
215
|
+
height: 36px; width: auto;
|
|
216
|
+
display: block;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.sidebar-section {
|
|
220
|
+
margin-top: 18px;
|
|
221
|
+
display: flex; flex-direction: column; gap: 1px;
|
|
222
|
+
}
|
|
223
|
+
.sidebar-eyebrow {
|
|
224
|
+
font-family: var(--font-mono);
|
|
225
|
+
font-size: var(--fs-2xs);
|
|
226
|
+
letter-spacing: var(--ls-widest);
|
|
227
|
+
text-transform: uppercase;
|
|
228
|
+
color: var(--ink-300);
|
|
229
|
+
padding: 6px 10px 8px;
|
|
230
|
+
}
|
|
231
|
+
.sidebar-link {
|
|
232
|
+
display: flex; align-items: center; gap: 10px;
|
|
233
|
+
padding: 7px 10px;
|
|
234
|
+
font-size: var(--fs-md);
|
|
235
|
+
color: var(--ink-500);
|
|
236
|
+
border-radius: var(--r-md);
|
|
237
|
+
cursor: pointer;
|
|
238
|
+
transition: all var(--t-fast) var(--ease-out);
|
|
239
|
+
position: relative;
|
|
240
|
+
}
|
|
241
|
+
.sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
|
|
242
|
+
.sidebar-link.active {
|
|
243
|
+
color: var(--brand-700);
|
|
244
|
+
background: var(--brand-50);
|
|
245
|
+
font-weight: 500;
|
|
246
|
+
}
|
|
247
|
+
.sidebar-link .num {
|
|
248
|
+
font-family: var(--font-mono);
|
|
249
|
+
font-size: var(--fs-2xs);
|
|
250
|
+
color: var(--ink-300);
|
|
251
|
+
letter-spacing: var(--ls-wide);
|
|
252
|
+
width: 18px;
|
|
253
|
+
}
|
|
254
|
+
.sidebar-link.active .num { color: var(--brand-600); }
|
|
255
|
+
|
|
256
|
+
.sidebar-footer {
|
|
257
|
+
margin-top: auto;
|
|
258
|
+
padding: 12px 4px 0;
|
|
259
|
+
border-top: 1px solid var(--line-200);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* ---------- TOP BAR ---------- */
|
|
263
|
+
.topbar {
|
|
264
|
+
position: sticky; top: 0; z-index: 30;
|
|
265
|
+
height: var(--topbar-h);
|
|
266
|
+
background: rgba(250, 250, 248, 0.78);
|
|
267
|
+
backdrop-filter: blur(12px) saturate(180%);
|
|
268
|
+
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
269
|
+
border-bottom: 1px solid var(--line-200);
|
|
270
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
271
|
+
padding: 0 32px;
|
|
272
|
+
}
|
|
273
|
+
[data-theme="dark"] .topbar { background: rgba(14, 13, 17, 0.78); }
|
|
274
|
+
.topbar-left {
|
|
275
|
+
display: flex; align-items: center; gap: 12px;
|
|
276
|
+
}
|
|
277
|
+
.crumb {
|
|
278
|
+
font-family: var(--font-mono);
|
|
279
|
+
font-size: var(--fs-sm);
|
|
280
|
+
color: var(--ink-400);
|
|
281
|
+
letter-spacing: var(--ls-wide);
|
|
282
|
+
}
|
|
283
|
+
.crumb b { color: var(--ink-700); font-weight: 500; }
|
|
284
|
+
.topbar-right { display: flex; align-items: center; gap: 8px; }
|
|
285
|
+
|
|
286
|
+
/* ---------- MAIN ---------- */
|
|
287
|
+
main { background: var(--paper); }
|
|
288
|
+
.section {
|
|
289
|
+
border-top: 1px solid var(--line-200);
|
|
290
|
+
padding: 80px 64px;
|
|
291
|
+
}
|
|
292
|
+
.section:first-child { border-top: none; }
|
|
293
|
+
.section-inner { max-width: 1200px; margin: 0 auto; }
|
|
294
|
+
.section-header {
|
|
295
|
+
display: grid;
|
|
296
|
+
grid-template-columns: minmax(220px, 280px) 1fr;
|
|
297
|
+
gap: 64px;
|
|
298
|
+
margin-bottom: 56px;
|
|
299
|
+
align-items: start;
|
|
300
|
+
}
|
|
301
|
+
.eyebrow {
|
|
302
|
+
font-family: var(--font-mono);
|
|
303
|
+
font-size: var(--fs-xs);
|
|
304
|
+
letter-spacing: var(--ls-widest);
|
|
305
|
+
text-transform: uppercase;
|
|
306
|
+
color: var(--brand-600);
|
|
307
|
+
margin-bottom: 14px;
|
|
308
|
+
}
|
|
309
|
+
.section h2 {
|
|
310
|
+
font-family: var(--font-display);
|
|
311
|
+
font-size: var(--fs-3xl);
|
|
312
|
+
line-height: var(--lh-tight);
|
|
313
|
+
letter-spacing: var(--ls-tight);
|
|
314
|
+
margin: 0;
|
|
315
|
+
color: var(--ink-700);
|
|
316
|
+
font-weight: 700;
|
|
317
|
+
}
|
|
318
|
+
.section-desc {
|
|
319
|
+
margin: 0;
|
|
320
|
+
color: var(--ink-400);
|
|
321
|
+
font-size: var(--fs-lg);
|
|
322
|
+
line-height: 1.55;
|
|
323
|
+
max-width: 640px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* ---------- PANEL ---------- */
|
|
327
|
+
.panel {
|
|
328
|
+
background: var(--surface);
|
|
329
|
+
border: 1px solid var(--line-200);
|
|
330
|
+
border-radius: var(--r-xl);
|
|
331
|
+
overflow: hidden;
|
|
332
|
+
box-shadow: var(--shadow-sm);
|
|
333
|
+
}
|
|
334
|
+
.panel-head {
|
|
335
|
+
padding: 14px 20px;
|
|
336
|
+
border-bottom: 1px solid var(--line-100);
|
|
337
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
338
|
+
background: var(--paper);
|
|
339
|
+
}
|
|
340
|
+
.panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-600); }
|
|
341
|
+
.panel-kicker {
|
|
342
|
+
font-family: var(--font-mono);
|
|
343
|
+
font-size: var(--fs-2xs);
|
|
344
|
+
letter-spacing: var(--ls-wider);
|
|
345
|
+
text-transform: uppercase;
|
|
346
|
+
color: var(--ink-300);
|
|
347
|
+
}
|
|
348
|
+
.panel-body { padding: 24px; }
|
|
349
|
+
.panel-body.flush { padding: 0; }
|
|
350
|
+
|
|
351
|
+
.sub-label {
|
|
352
|
+
font-family: var(--font-mono);
|
|
353
|
+
font-size: var(--fs-2xs);
|
|
354
|
+
letter-spacing: var(--ls-wider);
|
|
355
|
+
text-transform: uppercase;
|
|
356
|
+
color: var(--ink-300);
|
|
357
|
+
margin-bottom: 12px;
|
|
358
|
+
}
|
|
359
|
+
.row {
|
|
360
|
+
display: flex; flex-wrap: wrap;
|
|
361
|
+
align-items: center; gap: 10px;
|
|
362
|
+
margin-bottom: 24px;
|
|
363
|
+
}
|
|
364
|
+
.row:last-child { margin-bottom: 0; }
|
|
365
|
+
.stack { display: flex; flex-direction: column; gap: 16px; }
|
|
366
|
+
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
|
367
|
+
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
368
|
+
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
369
|
+
|
|
370
|
+
/* ============================================================
|
|
371
|
+
COMPONENTS
|
|
372
|
+
============================================================ */
|
|
373
|
+
|
|
374
|
+
/* --- Buttons --- */
|
|
375
|
+
.btn {
|
|
376
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
377
|
+
gap: 6px;
|
|
378
|
+
height: 32px; padding: 0 12px;
|
|
379
|
+
font-size: var(--fs-md); font-weight: 500;
|
|
380
|
+
font-family: var(--font-sans);
|
|
381
|
+
border: 1px solid transparent;
|
|
382
|
+
border-radius: var(--r-md);
|
|
383
|
+
cursor: pointer;
|
|
384
|
+
white-space: nowrap;
|
|
385
|
+
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
|
|
386
|
+
}
|
|
387
|
+
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
|
|
388
|
+
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
|
|
389
|
+
|
|
390
|
+
.btn-xs { height: 22px; padding: 0 8px; font-size: var(--fs-xs); border-radius: var(--r-sm); gap: 4px; }
|
|
391
|
+
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-md); }
|
|
392
|
+
.btn-md { height: 32px; padding: 0 12px; font-size: var(--fs-md); border-radius: var(--r-md); }
|
|
393
|
+
.btn-lg { height: 40px; padding: 0 16px; font-size: var(--fs-base); border-radius: var(--r-lg); gap: 8px; }
|
|
394
|
+
|
|
395
|
+
.btn-primary {
|
|
396
|
+
background: var(--brand-600); color: #fff;
|
|
397
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18);
|
|
398
|
+
}
|
|
399
|
+
.btn-primary:hover { background: var(--brand-700); }
|
|
400
|
+
.btn-secondary {
|
|
401
|
+
background: var(--surface); color: var(--ink-700);
|
|
402
|
+
border-color: var(--line-300);
|
|
403
|
+
box-shadow: var(--shadow-xs);
|
|
404
|
+
}
|
|
405
|
+
.btn-secondary:hover { background: var(--paper); }
|
|
406
|
+
.btn-soft {
|
|
407
|
+
background: var(--brand-50); color: var(--brand-700);
|
|
408
|
+
}
|
|
409
|
+
.btn-soft:hover { background: var(--brand-100); }
|
|
410
|
+
.btn-ghost {
|
|
411
|
+
background: transparent; color: var(--ink-600);
|
|
412
|
+
}
|
|
413
|
+
.btn-ghost:hover { background: var(--ink-50); }
|
|
414
|
+
.btn-danger {
|
|
415
|
+
background: var(--surface); color: var(--danger-700);
|
|
416
|
+
border-color: var(--line-300);
|
|
417
|
+
}
|
|
418
|
+
.btn-danger:hover { background: var(--danger-50); }
|
|
419
|
+
.btn-icon-only { padding: 0; width: 32px; }
|
|
420
|
+
.btn-icon-only.btn-sm { width: 28px; }
|
|
421
|
+
.btn-icon-only.btn-xs { width: 22px; }
|
|
422
|
+
|
|
423
|
+
.spinner {
|
|
424
|
+
width: 14px; height: 14px;
|
|
425
|
+
border: 1.5px solid rgba(255,255,255,0.4);
|
|
426
|
+
border-top-color: #fff;
|
|
427
|
+
border-radius: 50%;
|
|
428
|
+
animation: zk-spin 0.8s linear infinite;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* --- Input --- */
|
|
432
|
+
.input {
|
|
433
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
434
|
+
height: 36px; padding: 0 12px;
|
|
435
|
+
background: var(--surface);
|
|
436
|
+
border: 1px solid var(--line-300);
|
|
437
|
+
border-radius: var(--r-lg);
|
|
438
|
+
width: 100%;
|
|
439
|
+
transition: box-shadow var(--t-fast), border-color var(--t-fast);
|
|
440
|
+
}
|
|
441
|
+
.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--brand-400); }
|
|
442
|
+
.input.invalid { border-color: var(--danger-500); }
|
|
443
|
+
.input.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
|
|
444
|
+
.input-sm { height: 28px; padding: 0 8px; font-size: var(--fs-sm); }
|
|
445
|
+
.input-md { height: 36px; }
|
|
446
|
+
.input-lg { height: 44px; padding: 0 14px; font-size: var(--fs-base); }
|
|
447
|
+
.input input {
|
|
448
|
+
flex: 1; border: none; outline: none; background: transparent;
|
|
449
|
+
font-size: var(--fs-md); color: var(--ink-700);
|
|
450
|
+
font-family: var(--font-sans); min-width: 0;
|
|
451
|
+
}
|
|
452
|
+
.input.mono input { font-family: var(--font-mono); }
|
|
453
|
+
.input .ico { color: var(--ink-300); display: inline-flex; }
|
|
454
|
+
.input .suffix { color: var(--ink-300); display: inline-flex; align-items: center; gap: 4px; }
|
|
455
|
+
|
|
456
|
+
/* --- URL input (full-width search-style) --- */
|
|
457
|
+
.url-input-full {
|
|
458
|
+
display: flex; align-items: center; width: 100%; max-width: 520px; height: 44px;
|
|
459
|
+
background: var(--surface);
|
|
460
|
+
border: 1px solid var(--line-300);
|
|
461
|
+
border-radius: var(--r-md);
|
|
462
|
+
box-shadow: var(--shadow-sm);
|
|
463
|
+
overflow: hidden;
|
|
464
|
+
}
|
|
465
|
+
.url-input-full .scheme {
|
|
466
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
467
|
+
padding: 0 14px; height: 100%;
|
|
468
|
+
color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-sm);
|
|
469
|
+
border-right: 1px solid var(--line-200);
|
|
470
|
+
}
|
|
471
|
+
.url-input-full input {
|
|
472
|
+
flex: 1; border: none; outline: none; background: transparent;
|
|
473
|
+
padding: 0 16px; font-size: var(--fs-md); color: var(--ink-700);
|
|
474
|
+
font-family: var(--font-mono);
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* --- Tag --- */
|
|
478
|
+
.tag {
|
|
479
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
480
|
+
height: 22px; padding: 0 8px;
|
|
481
|
+
font-size: var(--fs-xs); font-weight: 500;
|
|
482
|
+
font-family: var(--font-mono);
|
|
483
|
+
letter-spacing: var(--ls-wide);
|
|
484
|
+
text-transform: uppercase;
|
|
485
|
+
border-radius: var(--r-sm);
|
|
486
|
+
background: var(--ink-50); color: var(--ink-500);
|
|
487
|
+
}
|
|
488
|
+
.tag-xs { height: 18px; padding: 0 6px; font-size: var(--fs-2xs); }
|
|
489
|
+
.tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
|
|
490
|
+
.tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
|
|
491
|
+
.tag-square { border-radius: var(--r-xs); }
|
|
492
|
+
.tag-ember { background: var(--brand-50); color: var(--brand-700); }
|
|
493
|
+
.tag-mono { background: var(--tag-bg); color: var(--tag-fg); }
|
|
494
|
+
.tag-success { background: var(--success-50); color: var(--success-700); }
|
|
495
|
+
.tag-warning { background: var(--warning-50); color: var(--warning-700); }
|
|
496
|
+
.tag-danger { background: var(--danger-50); color: var(--danger-700); }
|
|
497
|
+
.tag-info { background: var(--info-50); color: var(--info-700); }
|
|
498
|
+
|
|
499
|
+
/* --- Badge --- */
|
|
500
|
+
.badge {
|
|
501
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
502
|
+
min-width: 18px; height: 18px; padding: 0 5px;
|
|
503
|
+
background: var(--brand-500); color: #fff;
|
|
504
|
+
font-size: var(--fs-2xs); font-weight: 600;
|
|
505
|
+
border-radius: var(--r-sm);
|
|
506
|
+
}
|
|
507
|
+
.badge-ink { background: var(--ink-600); }
|
|
508
|
+
|
|
509
|
+
/* --- Toggle (square-style switch) --- */
|
|
510
|
+
.toggle {
|
|
511
|
+
width: 36px; height: 20px; padding: 2px;
|
|
512
|
+
border-radius: var(--r-sm);
|
|
513
|
+
background: var(--ink-200);
|
|
514
|
+
border: none; cursor: pointer; position: relative;
|
|
515
|
+
transition: background var(--t-base) var(--ease-out);
|
|
516
|
+
}
|
|
517
|
+
.toggle.on { background: var(--brand-500); }
|
|
518
|
+
.toggle .knob {
|
|
519
|
+
position: absolute; top: 2px; left: 2px;
|
|
520
|
+
width: 16px; height: 16px; border-radius: var(--r-xs);
|
|
521
|
+
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.18);
|
|
522
|
+
transition: left var(--t-base) var(--ease-out);
|
|
523
|
+
}
|
|
524
|
+
.toggle.on .knob { left: 18px; }
|
|
525
|
+
.toggle-sm { width: 28px; height: 16px; }
|
|
526
|
+
.toggle-sm .knob { width: 12px; height: 12px; }
|
|
527
|
+
.toggle-sm.on .knob { left: 14px; }
|
|
528
|
+
|
|
529
|
+
/* --- Segmented --- */
|
|
530
|
+
.segmented {
|
|
531
|
+
display: inline-flex; padding: 3px; gap: 2px;
|
|
532
|
+
background: var(--ink-50);
|
|
533
|
+
border: 1px solid var(--line-200);
|
|
534
|
+
border-radius: var(--r-lg);
|
|
535
|
+
}
|
|
536
|
+
.segmented button {
|
|
537
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
538
|
+
height: 28px; padding: 0 12px;
|
|
539
|
+
font-size: var(--fs-sm); font-weight: 500;
|
|
540
|
+
color: var(--ink-400);
|
|
541
|
+
background: transparent;
|
|
542
|
+
border: none; cursor: pointer;
|
|
543
|
+
border-radius: var(--r-md);
|
|
544
|
+
transition: all var(--t-fast);
|
|
545
|
+
}
|
|
546
|
+
.segmented button.active {
|
|
547
|
+
color: var(--ink-700); font-weight: 600;
|
|
548
|
+
background: var(--surface);
|
|
549
|
+
box-shadow: var(--shadow-xs), 0 0 0 1px var(--line-200);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
/* --- Avatar --- */
|
|
553
|
+
.avatar {
|
|
554
|
+
width: 24px; height: 24px;
|
|
555
|
+
background: var(--brand-500); color: #fff;
|
|
556
|
+
border-radius: 50%;
|
|
557
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
558
|
+
font-size: 11px; font-weight: 600;
|
|
559
|
+
font-family: var(--font-display);
|
|
560
|
+
flex-shrink: 0;
|
|
561
|
+
}
|
|
562
|
+
.avatar-sq { border-radius: var(--r-sm); }
|
|
563
|
+
|
|
564
|
+
/* --- Kbd --- */
|
|
565
|
+
.kbd {
|
|
566
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
567
|
+
min-width: 18px; height: 18px; padding: 0 4px;
|
|
568
|
+
font-family: var(--font-mono); font-size: var(--fs-2xs);
|
|
569
|
+
color: var(--ink-400);
|
|
570
|
+
background: var(--surface);
|
|
571
|
+
border: 1px solid var(--line-200); border-bottom-width: 2px;
|
|
572
|
+
border-radius: var(--r-sm);
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/* ============================================================
|
|
576
|
+
FOUNDATIONS GRIDS
|
|
577
|
+
============================================================ */
|
|
578
|
+
|
|
579
|
+
/* --- Color swatches --- */
|
|
580
|
+
.swatch-grid {
|
|
581
|
+
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
|
|
582
|
+
}
|
|
583
|
+
.swatch {
|
|
584
|
+
border-radius: var(--r-lg);
|
|
585
|
+
overflow: hidden;
|
|
586
|
+
border: 1px solid var(--line-200);
|
|
587
|
+
background: var(--surface);
|
|
588
|
+
}
|
|
589
|
+
.swatch-color { height: 76px; }
|
|
590
|
+
.swatch-meta { padding: 10px 12px; }
|
|
591
|
+
.swatch-name {
|
|
592
|
+
font-family: var(--font-mono);
|
|
593
|
+
font-size: var(--fs-sm);
|
|
594
|
+
font-weight: 500;
|
|
595
|
+
color: var(--ink-700);
|
|
596
|
+
}
|
|
597
|
+
.swatch-hex {
|
|
598
|
+
font-family: var(--font-mono);
|
|
599
|
+
font-size: var(--fs-2xs);
|
|
600
|
+
color: var(--ink-400);
|
|
601
|
+
margin-top: 2px;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
/* --- Type spec --- */
|
|
605
|
+
.type-row {
|
|
606
|
+
display: grid;
|
|
607
|
+
grid-template-columns: 100px 80px 1fr;
|
|
608
|
+
align-items: baseline;
|
|
609
|
+
gap: 16px;
|
|
610
|
+
padding: 16px 0;
|
|
611
|
+
border-bottom: 1px dashed var(--line-200);
|
|
612
|
+
}
|
|
613
|
+
.type-row:last-child { border-bottom: none; }
|
|
614
|
+
.type-token {
|
|
615
|
+
font-family: var(--font-mono);
|
|
616
|
+
font-size: var(--fs-xs);
|
|
617
|
+
color: var(--brand-600);
|
|
618
|
+
}
|
|
619
|
+
.type-px {
|
|
620
|
+
font-family: var(--font-mono);
|
|
621
|
+
font-size: var(--fs-xs);
|
|
622
|
+
color: var(--ink-300);
|
|
623
|
+
}
|
|
624
|
+
.type-sample { color: var(--ink-700); line-height: 1.2; }
|
|
625
|
+
|
|
626
|
+
/* --- Spacing ruler --- */
|
|
627
|
+
.sp-row {
|
|
628
|
+
display: grid; grid-template-columns: 80px 60px 1fr; gap: 16px; align-items: center;
|
|
629
|
+
padding: 8px 0;
|
|
630
|
+
}
|
|
631
|
+
.sp-token { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--brand-600); }
|
|
632
|
+
.sp-px { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-300); text-align: right; }
|
|
633
|
+
.sp-bar { height: 12px; background: var(--brand-300); border-radius: var(--r-xs); }
|
|
634
|
+
|
|
635
|
+
/* --- Shadow demo --- */
|
|
636
|
+
.shadow-demo {
|
|
637
|
+
background: var(--surface);
|
|
638
|
+
border-radius: var(--r-lg);
|
|
639
|
+
height: 96px;
|
|
640
|
+
padding: 16px;
|
|
641
|
+
border: 1px solid var(--line-100);
|
|
642
|
+
}
|
|
643
|
+
.shadow-demo-name {
|
|
644
|
+
font-family: var(--font-mono);
|
|
645
|
+
font-size: var(--fs-sm);
|
|
646
|
+
color: var(--ink-600);
|
|
647
|
+
font-weight: 500;
|
|
648
|
+
}
|
|
649
|
+
.shadow-demo-spec {
|
|
650
|
+
font-family: var(--font-mono);
|
|
651
|
+
font-size: var(--fs-2xs);
|
|
652
|
+
color: var(--ink-300);
|
|
653
|
+
margin-top: 4px;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
/* --- Radius demo --- */
|
|
657
|
+
.radius-demo {
|
|
658
|
+
background: var(--brand-50);
|
|
659
|
+
border: 1px solid var(--brand-200);
|
|
660
|
+
height: 80px;
|
|
661
|
+
display: flex; align-items: center; justify-content: center;
|
|
662
|
+
font-family: var(--font-mono);
|
|
663
|
+
font-size: var(--fs-sm);
|
|
664
|
+
color: var(--brand-700);
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
/* ============================================================
|
|
668
|
+
COMPLEX
|
|
669
|
+
============================================================ */
|
|
670
|
+
|
|
671
|
+
/* --- Sidebar component example --- */
|
|
672
|
+
.demo-sidebar {
|
|
673
|
+
display: flex;
|
|
674
|
+
border-radius: var(--r-lg);
|
|
675
|
+
overflow: hidden;
|
|
676
|
+
border: 1px solid var(--line-200);
|
|
677
|
+
}
|
|
678
|
+
.demo-sidebar .ds-side {
|
|
679
|
+
width: 240px; background: var(--canvas);
|
|
680
|
+
border-right: 1px solid var(--line-200);
|
|
681
|
+
padding: 12px;
|
|
682
|
+
display: flex; flex-direction: column; gap: 4px;
|
|
683
|
+
min-height: 480px;
|
|
684
|
+
}
|
|
685
|
+
.demo-sidebar .ds-main { flex: 1; background: var(--paper); }
|
|
686
|
+
.ds-side-item {
|
|
687
|
+
display: flex; align-items: center; gap: 10px;
|
|
688
|
+
padding: 7px 10px; font-size: var(--fs-md);
|
|
689
|
+
color: var(--ink-500);
|
|
690
|
+
border-radius: var(--r-md);
|
|
691
|
+
cursor: pointer;
|
|
692
|
+
}
|
|
693
|
+
.ds-side-item:hover { background: var(--ink-50); }
|
|
694
|
+
.ds-side-item.active {
|
|
695
|
+
color: var(--brand-700);
|
|
696
|
+
background: var(--brand-50);
|
|
697
|
+
font-weight: 500;
|
|
698
|
+
}
|
|
699
|
+
.ds-side-item .ico { color: var(--ink-400); }
|
|
700
|
+
.ds-side-item.active .ico { color: var(--brand-600); }
|
|
701
|
+
.ds-side-card {
|
|
702
|
+
margin: 4px; padding: 12px;
|
|
703
|
+
background: var(--surface);
|
|
704
|
+
border: 1px solid var(--line-200);
|
|
705
|
+
border-radius: var(--r-lg);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
/* --- Endpoint card --- */
|
|
709
|
+
.endpoint {
|
|
710
|
+
flex: 1; min-width: 200px;
|
|
711
|
+
border: 1px solid var(--line-200);
|
|
712
|
+
background: var(--surface);
|
|
713
|
+
padding: 18px;
|
|
714
|
+
cursor: pointer;
|
|
715
|
+
transition: border-color var(--t-fast);
|
|
716
|
+
}
|
|
717
|
+
.endpoint:hover { border-color: var(--ink-300); }
|
|
718
|
+
.endpoint .head {
|
|
719
|
+
display: flex; align-items: center; gap: 8px;
|
|
720
|
+
margin-bottom: 10px;
|
|
721
|
+
}
|
|
722
|
+
.endpoint .label { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
723
|
+
.endpoint .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.5; }
|
|
724
|
+
.endpoint .ico { color: var(--brand-600); }
|
|
725
|
+
|
|
726
|
+
/* --- Stat card --- */
|
|
727
|
+
.stat-card {
|
|
728
|
+
background: var(--surface); border: 1px solid var(--line-200);
|
|
729
|
+
border-radius: var(--r-xl); padding: 20px; max-width: 460px;
|
|
730
|
+
}
|
|
731
|
+
.stat-card-head {
|
|
732
|
+
display: flex; justify-content: space-between; align-items: baseline;
|
|
733
|
+
}
|
|
734
|
+
.stat-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
735
|
+
.stat-card-sub { font-size: var(--fs-sm); color: var(--ink-400); margin-top: 2px; }
|
|
736
|
+
.stat-card-num {
|
|
737
|
+
font-size: var(--fs-3xl); font-weight: 700; color: var(--ink-700);
|
|
738
|
+
font-family: var(--font-sans);
|
|
739
|
+
letter-spacing: var(--ls-tight);
|
|
740
|
+
line-height: 1;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
/* --- Integration tile --- */
|
|
744
|
+
.intg-grid {
|
|
745
|
+
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
|
|
746
|
+
max-width: 700px;
|
|
747
|
+
border: 1px solid var(--line-200);
|
|
748
|
+
border-radius: var(--r-xl);
|
|
749
|
+
overflow: hidden;
|
|
750
|
+
}
|
|
751
|
+
.intg-tile {
|
|
752
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
753
|
+
padding: 14px 16px;
|
|
754
|
+
cursor: pointer;
|
|
755
|
+
transition: background var(--t-fast);
|
|
756
|
+
}
|
|
757
|
+
.intg-tile:hover { background: var(--paper); }
|
|
758
|
+
.intg-tile .lh { display: flex; align-items: center; gap: 10px; }
|
|
759
|
+
.intg-tile .badge-color {
|
|
760
|
+
width: 22px; height: 22px;
|
|
761
|
+
border-radius: var(--r-sm);
|
|
762
|
+
color: #fff; display: flex; align-items: center; justify-content: center;
|
|
763
|
+
font-size: var(--fs-2xs); font-weight: 700;
|
|
764
|
+
}
|
|
765
|
+
.intg-tile .name { font-size: var(--fs-md); color: var(--ink-700); }
|
|
766
|
+
|
|
767
|
+
/* --- Project card --- */
|
|
768
|
+
.proj-card {
|
|
769
|
+
border: 1px solid var(--line-200);
|
|
770
|
+
border-radius: var(--r-xl);
|
|
771
|
+
padding: 16px;
|
|
772
|
+
background: var(--surface);
|
|
773
|
+
cursor: pointer;
|
|
774
|
+
transition: all var(--t-fast);
|
|
775
|
+
}
|
|
776
|
+
.proj-card:hover { box-shadow: var(--shadow-md); }
|
|
777
|
+
.proj-card .head {
|
|
778
|
+
display: flex; justify-content: space-between; align-items: flex-start;
|
|
779
|
+
margin-bottom: 6px;
|
|
780
|
+
}
|
|
781
|
+
.proj-card .title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
782
|
+
.proj-card .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.5; margin-bottom: 12px; }
|
|
783
|
+
.proj-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
784
|
+
|
|
785
|
+
/* --- Data table --- */
|
|
786
|
+
.table-bar {
|
|
787
|
+
padding: 14px 18px;
|
|
788
|
+
border-bottom: 1px solid var(--line-100);
|
|
789
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
790
|
+
}
|
|
791
|
+
.table-bar .lh { display: flex; gap: 8px; align-items: center; }
|
|
792
|
+
.table-head {
|
|
793
|
+
display: grid; grid-template-columns: 120px 1fr 110px 70px 160px 50px;
|
|
794
|
+
padding: 10px 18px;
|
|
795
|
+
font-family: var(--font-mono);
|
|
796
|
+
font-size: var(--fs-2xs);
|
|
797
|
+
letter-spacing: var(--ls-wider);
|
|
798
|
+
text-transform: uppercase;
|
|
799
|
+
color: var(--ink-300);
|
|
800
|
+
border-bottom: 1px solid var(--line-100);
|
|
801
|
+
background: var(--paper);
|
|
802
|
+
}
|
|
803
|
+
.table-row {
|
|
804
|
+
display: grid; grid-template-columns: 120px 1fr 110px 70px 160px 50px;
|
|
805
|
+
padding: 14px 18px; align-items: center;
|
|
806
|
+
border-bottom: 1px solid var(--line-100);
|
|
807
|
+
font-size: var(--fs-sm);
|
|
808
|
+
transition: background var(--t-fast);
|
|
809
|
+
}
|
|
810
|
+
.table-row:last-child { border-bottom: none; }
|
|
811
|
+
.table-row:hover { background: var(--paper); }
|
|
812
|
+
.table-row .url { color: var(--ink-600); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
813
|
+
.table-row .num { color: var(--ink-500); font-family: var(--font-mono); }
|
|
814
|
+
.table-row .date { color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-xs); }
|
|
815
|
+
|
|
816
|
+
/* --- Modal --- */
|
|
817
|
+
.modal-stage {
|
|
818
|
+
padding: 32px;
|
|
819
|
+
background: radial-gradient(ellipse at top, var(--paper) 0%, var(--canvas) 80%);
|
|
820
|
+
position: relative; min-height: 420px;
|
|
821
|
+
}
|
|
822
|
+
.modal-overlay {
|
|
823
|
+
position: absolute; inset: 0;
|
|
824
|
+
background: rgba(20, 17, 12, 0.04);
|
|
825
|
+
backdrop-filter: blur(2px);
|
|
826
|
+
}
|
|
827
|
+
.modal {
|
|
828
|
+
position: relative;
|
|
829
|
+
max-width: 460px; margin: 24px auto;
|
|
830
|
+
background: var(--surface);
|
|
831
|
+
border: 1px solid var(--line-200);
|
|
832
|
+
border-radius: var(--r-2xl);
|
|
833
|
+
box-shadow: var(--shadow-modal);
|
|
834
|
+
overflow: hidden;
|
|
835
|
+
animation: zk-fadein var(--t-slow) var(--ease-out);
|
|
836
|
+
}
|
|
837
|
+
.modal-head { padding: 24px 24px 0; }
|
|
838
|
+
.modal-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
|
|
839
|
+
.modal-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.012em; color: var(--ink-700); }
|
|
840
|
+
.modal-desc { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--ink-400); }
|
|
841
|
+
.modal-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
842
|
+
.modal-progress .bars { display: flex; gap: 4px; }
|
|
843
|
+
.modal-progress .bars span { width: 12px; height: 4px; border-radius: 2px; background: var(--ink-100); }
|
|
844
|
+
.modal-progress .bars .first { width: 28px; background: var(--brand-500); }
|
|
845
|
+
.modal-list { padding: 4px; }
|
|
846
|
+
.modal-item {
|
|
847
|
+
padding: 12px 20px; border-radius: var(--r-md);
|
|
848
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
849
|
+
}
|
|
850
|
+
.modal-item:hover { background: var(--paper); }
|
|
851
|
+
.modal-item .t { font-size: var(--fs-md); font-weight: 500; color: var(--brand-700); }
|
|
852
|
+
.modal-item.done .t { color: var(--success-700); }
|
|
853
|
+
.modal-item .d { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 2px; }
|
|
854
|
+
.modal-item .credits { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono); }
|
|
855
|
+
.modal-foot {
|
|
856
|
+
padding: 16px 20px;
|
|
857
|
+
border-top: 1px solid var(--line-100);
|
|
858
|
+
display: flex; justify-content: flex-end;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
/* --- Code block --- */
|
|
862
|
+
.code-block {
|
|
863
|
+
background: var(--code-bg);
|
|
864
|
+
border: 1px solid var(--line-200);
|
|
865
|
+
border-radius: var(--r-lg);
|
|
866
|
+
padding: 16px;
|
|
867
|
+
font-family: var(--font-mono); font-size: var(--fs-sm);
|
|
868
|
+
line-height: 1.7;
|
|
869
|
+
color: var(--ink-600);
|
|
870
|
+
position: relative;
|
|
871
|
+
overflow-x: auto;
|
|
872
|
+
}
|
|
873
|
+
.code-block .copy {
|
|
874
|
+
position: absolute; top: 10px; right: 10px;
|
|
875
|
+
display: flex; gap: 4px;
|
|
876
|
+
}
|
|
877
|
+
.code-block .k { color: var(--code-fg); }
|
|
878
|
+
.code-block .s { color: var(--success-700); }
|
|
879
|
+
.code-block .indent-1 { padding-left: 16px; }
|
|
880
|
+
.code-block .indent-2 { padding-left: 32px; }
|
|
881
|
+
.code-block .indent-3 { padding-left: 48px; }
|
|
882
|
+
.code-block .indent-4 { padding-left: 64px; }
|
|
883
|
+
|
|
884
|
+
/* --- Banners --- */
|
|
885
|
+
.announce {
|
|
886
|
+
width: 100%;
|
|
887
|
+
background: var(--paper);
|
|
888
|
+
border: 1px solid var(--line-200);
|
|
889
|
+
border-radius: var(--r-md);
|
|
890
|
+
padding: 10px 16px;
|
|
891
|
+
text-align: center;
|
|
892
|
+
font-size: var(--fs-md);
|
|
893
|
+
color: var(--ink-600);
|
|
894
|
+
}
|
|
895
|
+
.announce a { color: var(--brand-700); text-decoration: underline; }
|
|
896
|
+
.tip {
|
|
897
|
+
display: flex; gap: 12px; padding: 14px;
|
|
898
|
+
background: var(--surface);
|
|
899
|
+
border: 1px solid var(--line-200);
|
|
900
|
+
border-radius: var(--r-lg);
|
|
901
|
+
max-width: 320px;
|
|
902
|
+
box-shadow: var(--shadow-md);
|
|
903
|
+
}
|
|
904
|
+
.tip .ico { color: var(--brand-500); margin-top: 2px; }
|
|
905
|
+
.tip .what {
|
|
906
|
+
font-size: var(--fs-xs); font-family: var(--font-mono);
|
|
907
|
+
letter-spacing: var(--ls-wider);
|
|
908
|
+
color: var(--ink-300);
|
|
909
|
+
text-transform: uppercase; margin-bottom: 4px;
|
|
910
|
+
}
|
|
911
|
+
.tip .title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-700); margin-bottom: 4px; }
|
|
912
|
+
.tip .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.45; }
|
|
913
|
+
.toast {
|
|
914
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
915
|
+
padding: 8px 14px;
|
|
916
|
+
background: var(--ink-700); color: #fff;
|
|
917
|
+
border-radius: var(--r-md);
|
|
918
|
+
font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
|
|
919
|
+
}
|
|
920
|
+
.toast-success {
|
|
921
|
+
background: var(--success-500); color: #fff;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
/* ============================================================
|
|
925
|
+
MISC
|
|
926
|
+
============================================================ */
|
|
927
|
+
.divider {
|
|
928
|
+
height: 1px; background: var(--line-200);
|
|
929
|
+
margin: 24px 0;
|
|
930
|
+
}
|
|
931
|
+
.spec {
|
|
932
|
+
display: flex; justify-content: space-between; gap: 16px;
|
|
933
|
+
padding: 8px 0;
|
|
934
|
+
border-bottom: 1px dashed var(--line-200);
|
|
935
|
+
font-size: var(--fs-sm);
|
|
936
|
+
}
|
|
937
|
+
.spec:last-child { border-bottom: none; }
|
|
938
|
+
.spec .l { color: var(--ink-400); }
|
|
939
|
+
.spec .v { color: var(--ink-600); font-family: var(--font-mono); }
|
|
940
|
+
|
|
941
|
+
/* Theme toggle in topbar */
|
|
942
|
+
.theme-toggle {
|
|
943
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
944
|
+
height: 32px; padding: 0 12px;
|
|
945
|
+
background: var(--surface);
|
|
946
|
+
border: 1px solid var(--line-300);
|
|
947
|
+
border-radius: var(--r-md);
|
|
948
|
+
color: var(--ink-600); font-size: var(--fs-sm); font-weight: 500;
|
|
949
|
+
cursor: pointer;
|
|
950
|
+
transition: all var(--t-fast);
|
|
951
|
+
}
|
|
952
|
+
.theme-toggle:hover { background: var(--paper); }
|
|
953
|
+
.theme-toggle .label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
|
|
954
|
+
|
|
955
|
+
/* ============================================================
|
|
956
|
+
APP PATTERNS (CRM-derived, standardized)
|
|
957
|
+
============================================================ */
|
|
958
|
+
|
|
959
|
+
/* ---------- STATUS / PRIORITY TAGS (with leading dot indicator) ---------- */
|
|
960
|
+
.tag-dot {
|
|
961
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
962
|
+
height: 22px; padding: 0 8px;
|
|
963
|
+
font-family: var(--font-mono);
|
|
964
|
+
font-size: var(--fs-xs);
|
|
965
|
+
font-weight: 500;
|
|
966
|
+
letter-spacing: var(--ls-wide);
|
|
967
|
+
text-transform: uppercase;
|
|
968
|
+
border-radius: var(--r-sm);
|
|
969
|
+
white-space: nowrap;
|
|
970
|
+
}
|
|
971
|
+
.tag-dot::before {
|
|
972
|
+
content: '';
|
|
973
|
+
width: 6px; height: 6px; border-radius: var(--r-xs);
|
|
974
|
+
background: currentColor; opacity: 0.85;
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
/* Status (matrix oficial: 5 estados de tarefa) */
|
|
978
|
+
.s-todo { background: #fff8e6; color: #9a6500; }
|
|
979
|
+
.s-progress { background: var(--brand-50); color: var(--brand-700); }
|
|
980
|
+
.s-review { background: var(--info-50); color: var(--info-700); }
|
|
981
|
+
.s-done { background: var(--success-50); color: var(--success-700); }
|
|
982
|
+
.s-canceled { background: var(--ink-50); color: var(--ink-500); }
|
|
983
|
+
|
|
984
|
+
/* Modificadores (sobrescrevem status: ATRASADA = vermelho, PARADO = âmbar) */
|
|
985
|
+
.s-overdue { background: var(--danger-50); color: var(--danger-700); }
|
|
986
|
+
.s-paused { background: var(--warning-50); color: var(--warning-700); }
|
|
987
|
+
.s-followup { background: var(--brand-50); color: var(--brand-700); }
|
|
988
|
+
|
|
989
|
+
/* Prioridade (4 níveis) */
|
|
990
|
+
.p-urgent { background: var(--danger-50); color: var(--danger-700); }
|
|
991
|
+
.p-high { background: var(--warning-50); color: var(--warning-700); }
|
|
992
|
+
.p-med { background: #fff8e6; color: #9a6500; }
|
|
993
|
+
.p-low { background: var(--ink-50); color: var(--ink-500); }
|
|
994
|
+
|
|
995
|
+
/* Space/Cliente tags */
|
|
996
|
+
.sp { font-weight: 600; }
|
|
997
|
+
.sp-zark { background: var(--space-zark-soft); color: var(--space-zark); }
|
|
998
|
+
.sp-allsec { background: var(--space-allsec-soft); color: var(--space-allsec); }
|
|
999
|
+
.sp-vipcar { background: var(--space-vipcar-soft); color: var(--space-vipcar); }
|
|
1000
|
+
.sp-limppe { background: var(--space-limppe-soft); color: var(--space-limppe); }
|
|
1001
|
+
.sp-gerais { background: var(--space-gerais-soft); color: var(--space-gerais); }
|
|
1002
|
+
.sp-mixshop { background: var(--space-mixshop-soft); color: var(--space-mixshop); }
|
|
1003
|
+
.sp-vipseg { background: var(--space-vipseg-soft); color: var(--space-vipseg); }
|
|
1004
|
+
|
|
1005
|
+
/* ---------- STAT CARD (UNIFIED) ---------- */
|
|
1006
|
+
.stat {
|
|
1007
|
+
background: var(--surface);
|
|
1008
|
+
border: 1px solid var(--line-200);
|
|
1009
|
+
border-radius: var(--r-lg);
|
|
1010
|
+
padding: 18px;
|
|
1011
|
+
display: flex; flex-direction: column; gap: 12px;
|
|
1012
|
+
transition: border-color var(--t-fast);
|
|
1013
|
+
}
|
|
1014
|
+
.stat:hover { border-color: var(--line-300); }
|
|
1015
|
+
.stat.is-critical { border-color: var(--danger-500); background: var(--danger-50); }
|
|
1016
|
+
.stat-head {
|
|
1017
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
1018
|
+
}
|
|
1019
|
+
.stat-label {
|
|
1020
|
+
font-family: var(--font-mono);
|
|
1021
|
+
font-size: var(--fs-2xs);
|
|
1022
|
+
letter-spacing: var(--ls-wider);
|
|
1023
|
+
text-transform: uppercase;
|
|
1024
|
+
color: var(--ink-400);
|
|
1025
|
+
font-weight: 500;
|
|
1026
|
+
}
|
|
1027
|
+
.stat-icon {
|
|
1028
|
+
width: 28px; height: 28px;
|
|
1029
|
+
border-radius: var(--r-md);
|
|
1030
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1031
|
+
color: #fff;
|
|
1032
|
+
}
|
|
1033
|
+
.stat-icon.green { background: var(--success-500); }
|
|
1034
|
+
.stat-icon.orange { background: var(--brand-500); }
|
|
1035
|
+
.stat-icon.blue { background: var(--info-500); }
|
|
1036
|
+
.stat-icon.purple { background: #7c3aed; }
|
|
1037
|
+
.stat-icon.red { background: var(--danger-500); }
|
|
1038
|
+
.stat-icon.ghost { background: var(--ink-50); color: var(--ink-500); }
|
|
1039
|
+
.stat-value {
|
|
1040
|
+
font-family: var(--font-sans);
|
|
1041
|
+
font-size: var(--fs-3xl);
|
|
1042
|
+
font-weight: 700;
|
|
1043
|
+
letter-spacing: var(--ls-tight);
|
|
1044
|
+
color: var(--ink-700);
|
|
1045
|
+
line-height: 1;
|
|
1046
|
+
}
|
|
1047
|
+
.stat.is-critical .stat-value { color: var(--danger-700); }
|
|
1048
|
+
.stat-sub {
|
|
1049
|
+
font-size: var(--fs-xs);
|
|
1050
|
+
color: var(--ink-400);
|
|
1051
|
+
font-family: var(--font-mono);
|
|
1052
|
+
}
|
|
1053
|
+
.stat-progress {
|
|
1054
|
+
height: 4px; background: var(--ink-50);
|
|
1055
|
+
border-radius: var(--r-xs); overflow: hidden;
|
|
1056
|
+
margin-top: 4px;
|
|
1057
|
+
}
|
|
1058
|
+
.stat-progress > span {
|
|
1059
|
+
display: block; height: 100%;
|
|
1060
|
+
background: var(--success-500);
|
|
1061
|
+
border-radius: var(--r-xs);
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
/* ---------- CRITICAL ALERT BANNER ---------- */
|
|
1065
|
+
.alert-critical {
|
|
1066
|
+
background: var(--danger-50);
|
|
1067
|
+
border: 1px solid var(--danger-500);
|
|
1068
|
+
border-radius: var(--r-lg);
|
|
1069
|
+
padding: 16px 20px;
|
|
1070
|
+
}
|
|
1071
|
+
.alert-critical-head {
|
|
1072
|
+
display: flex; align-items: center; gap: 8px;
|
|
1073
|
+
font-family: var(--font-mono);
|
|
1074
|
+
font-size: var(--fs-xs);
|
|
1075
|
+
letter-spacing: var(--ls-wider);
|
|
1076
|
+
text-transform: uppercase;
|
|
1077
|
+
font-weight: 600;
|
|
1078
|
+
color: var(--danger-700);
|
|
1079
|
+
margin-bottom: 12px;
|
|
1080
|
+
}
|
|
1081
|
+
.alert-critical-list { display: flex; flex-direction: column; gap: 2px; }
|
|
1082
|
+
.alert-critical-row {
|
|
1083
|
+
display: grid;
|
|
1084
|
+
grid-template-columns: auto 1fr auto auto;
|
|
1085
|
+
gap: 12px; align-items: center;
|
|
1086
|
+
padding: 8px 10px;
|
|
1087
|
+
border-radius: var(--r-sm);
|
|
1088
|
+
font-size: var(--fs-md);
|
|
1089
|
+
color: var(--danger-700);
|
|
1090
|
+
}
|
|
1091
|
+
.alert-critical-row:hover { background: rgba(220, 53, 69, 0.06); }
|
|
1092
|
+
.alert-critical-row .src {
|
|
1093
|
+
font-family: var(--font-mono);
|
|
1094
|
+
font-size: var(--fs-xs);
|
|
1095
|
+
color: var(--danger-700);
|
|
1096
|
+
opacity: 0.7;
|
|
1097
|
+
}
|
|
1098
|
+
.alert-critical-foot {
|
|
1099
|
+
margin-top: 8px; padding: 8px 10px;
|
|
1100
|
+
font-size: var(--fs-xs);
|
|
1101
|
+
color: var(--danger-700); opacity: 0.7;
|
|
1102
|
+
font-family: var(--font-mono);
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
/* ---------- FUNNEL ---------- */
|
|
1106
|
+
.funnel {
|
|
1107
|
+
display: flex; height: 8px;
|
|
1108
|
+
background: var(--ink-50);
|
|
1109
|
+
border-radius: var(--r-xs);
|
|
1110
|
+
overflow: hidden;
|
|
1111
|
+
gap: 2px;
|
|
1112
|
+
}
|
|
1113
|
+
.funnel > span { display: block; height: 100%; }
|
|
1114
|
+
.funnel-stages {
|
|
1115
|
+
display: grid;
|
|
1116
|
+
grid-template-columns: repeat(6, 1fr);
|
|
1117
|
+
gap: 8px;
|
|
1118
|
+
margin-top: 12px;
|
|
1119
|
+
}
|
|
1120
|
+
.funnel-stage {
|
|
1121
|
+
display: flex; flex-direction: column; gap: 2px;
|
|
1122
|
+
}
|
|
1123
|
+
.funnel-stage-label {
|
|
1124
|
+
font-size: var(--fs-xs);
|
|
1125
|
+
color: var(--ink-500);
|
|
1126
|
+
}
|
|
1127
|
+
.funnel-stage-count {
|
|
1128
|
+
font-family: var(--font-mono);
|
|
1129
|
+
font-size: var(--fs-sm);
|
|
1130
|
+
font-weight: 600;
|
|
1131
|
+
color: var(--ink-700);
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
/* ---------- KANBAN ---------- */
|
|
1135
|
+
.kanban {
|
|
1136
|
+
display: flex; gap: 12px;
|
|
1137
|
+
overflow-x: auto;
|
|
1138
|
+
padding-bottom: 8px;
|
|
1139
|
+
}
|
|
1140
|
+
.k-col {
|
|
1141
|
+
flex: 1; min-width: 240px;
|
|
1142
|
+
background: transparent;
|
|
1143
|
+
display: flex; flex-direction: column; gap: 8px;
|
|
1144
|
+
}
|
|
1145
|
+
.k-col-head {
|
|
1146
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
1147
|
+
padding: 8px 12px;
|
|
1148
|
+
font-family: var(--font-mono);
|
|
1149
|
+
font-size: var(--fs-xs);
|
|
1150
|
+
letter-spacing: var(--ls-wide);
|
|
1151
|
+
text-transform: uppercase;
|
|
1152
|
+
font-weight: 600;
|
|
1153
|
+
color: var(--ink-600);
|
|
1154
|
+
}
|
|
1155
|
+
.k-col-head .lh { display: inline-flex; align-items: center; gap: 8px; }
|
|
1156
|
+
.k-col-head .dot {
|
|
1157
|
+
width: 8px; height: 8px; border-radius: 50%;
|
|
1158
|
+
}
|
|
1159
|
+
.k-col-head .count {
|
|
1160
|
+
color: var(--ink-400);
|
|
1161
|
+
font-weight: 500;
|
|
1162
|
+
}
|
|
1163
|
+
.k-add {
|
|
1164
|
+
display: flex; align-items: center; justify-content: center; gap: 6px;
|
|
1165
|
+
padding: 8px;
|
|
1166
|
+
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1167
|
+
background: transparent;
|
|
1168
|
+
border: 1px dashed var(--line-300);
|
|
1169
|
+
border-radius: var(--r-md);
|
|
1170
|
+
cursor: pointer;
|
|
1171
|
+
transition: all var(--t-fast);
|
|
1172
|
+
}
|
|
1173
|
+
.k-add:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
|
|
1174
|
+
|
|
1175
|
+
/* ---------- LEAD CARD ---------- */
|
|
1176
|
+
.lead-card {
|
|
1177
|
+
background: var(--surface);
|
|
1178
|
+
border: 1px solid var(--line-200);
|
|
1179
|
+
border-radius: var(--r-md);
|
|
1180
|
+
padding: 12px;
|
|
1181
|
+
display: flex; flex-direction: column; gap: 8px;
|
|
1182
|
+
cursor: grab;
|
|
1183
|
+
transition: all var(--t-fast);
|
|
1184
|
+
position: relative;
|
|
1185
|
+
}
|
|
1186
|
+
.lead-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-300); }
|
|
1187
|
+
.lead-card.is-paused { border-left: 3px solid var(--warning-500); }
|
|
1188
|
+
.lead-card-head {
|
|
1189
|
+
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
|
1190
|
+
}
|
|
1191
|
+
.lead-card-name {
|
|
1192
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1193
|
+
font-size: var(--fs-md); font-weight: 600; color: var(--ink-700);
|
|
1194
|
+
}
|
|
1195
|
+
.lead-card-name .flame { color: var(--brand-500); }
|
|
1196
|
+
.lead-card-sub {
|
|
1197
|
+
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1198
|
+
}
|
|
1199
|
+
.lead-card-meta {
|
|
1200
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
1201
|
+
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1202
|
+
}
|
|
1203
|
+
.lead-card-meta .icons {
|
|
1204
|
+
display: inline-flex; gap: 6px; color: var(--ink-300);
|
|
1205
|
+
}
|
|
1206
|
+
.lead-card-foot {
|
|
1207
|
+
display: flex; align-items: center; gap: 6px;
|
|
1208
|
+
padding-top: 8px;
|
|
1209
|
+
border-top: 1px dashed var(--line-200);
|
|
1210
|
+
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1211
|
+
}
|
|
1212
|
+
.lead-card-followup {
|
|
1213
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
1214
|
+
font-size: var(--fs-xs); color: var(--brand-700); font-weight: 500;
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
/* ---------- FILTER CHIPS ---------- */
|
|
1218
|
+
.chips {
|
|
1219
|
+
display: inline-flex; gap: 4px; flex-wrap: wrap;
|
|
1220
|
+
}
|
|
1221
|
+
.chip {
|
|
1222
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1223
|
+
height: 28px; padding: 0 12px;
|
|
1224
|
+
font-family: var(--font-mono);
|
|
1225
|
+
font-size: var(--fs-xs);
|
|
1226
|
+
font-weight: 500;
|
|
1227
|
+
letter-spacing: var(--ls-wide);
|
|
1228
|
+
text-transform: uppercase;
|
|
1229
|
+
color: var(--ink-500);
|
|
1230
|
+
background: transparent;
|
|
1231
|
+
border: 1px solid transparent;
|
|
1232
|
+
border-radius: var(--r-sm);
|
|
1233
|
+
cursor: pointer;
|
|
1234
|
+
transition: all var(--t-fast);
|
|
1235
|
+
}
|
|
1236
|
+
.chip:hover { background: var(--ink-50); color: var(--ink-700); }
|
|
1237
|
+
.chip.active {
|
|
1238
|
+
background: var(--brand-50);
|
|
1239
|
+
color: var(--brand-700);
|
|
1240
|
+
border-color: var(--brand-200);
|
|
1241
|
+
}
|
|
1242
|
+
.chip .count {
|
|
1243
|
+
font-family: var(--font-mono);
|
|
1244
|
+
font-size: var(--fs-2xs);
|
|
1245
|
+
color: inherit; opacity: 0.7;
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
/* ---------- EMPTY STATE ---------- */
|
|
1249
|
+
.empty-state {
|
|
1250
|
+
border: 1px dashed var(--line-300);
|
|
1251
|
+
border-radius: var(--r-md);
|
|
1252
|
+
padding: 32px 16px;
|
|
1253
|
+
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
1254
|
+
color: var(--ink-300);
|
|
1255
|
+
text-align: center;
|
|
1256
|
+
background: transparent;
|
|
1257
|
+
}
|
|
1258
|
+
.empty-state .ico {
|
|
1259
|
+
width: 32px; height: 32px;
|
|
1260
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1261
|
+
color: var(--ink-300);
|
|
1262
|
+
}
|
|
1263
|
+
.empty-state .text {
|
|
1264
|
+
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1265
|
+
}
|
|
1266
|
+
|
|
1267
|
+
/* ---------- HEADER BAND ---------- */
|
|
1268
|
+
.header-band {
|
|
1269
|
+
display: flex; align-items: center; gap: 12px;
|
|
1270
|
+
padding: 16px 32px;
|
|
1271
|
+
background: linear-gradient(180deg, var(--canvas), transparent);
|
|
1272
|
+
border-bottom: 1px solid var(--line-200);
|
|
1273
|
+
}
|
|
1274
|
+
.header-band .ico-box {
|
|
1275
|
+
width: 32px; height: 32px;
|
|
1276
|
+
border-radius: var(--r-md);
|
|
1277
|
+
background: var(--success-50);
|
|
1278
|
+
color: var(--success-700);
|
|
1279
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1280
|
+
}
|
|
1281
|
+
.header-band .title {
|
|
1282
|
+
font-family: var(--font-display);
|
|
1283
|
+
font-size: var(--fs-xl);
|
|
1284
|
+
font-weight: 700;
|
|
1285
|
+
color: var(--ink-700);
|
|
1286
|
+
letter-spacing: -0.012em;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
/* ---------- TABLE ACTIONS ---------- */
|
|
1290
|
+
.t-actions {
|
|
1291
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1292
|
+
}
|
|
1293
|
+
.t-act {
|
|
1294
|
+
width: 22px; height: 22px;
|
|
1295
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1296
|
+
border: 1px solid var(--line-200);
|
|
1297
|
+
border-radius: var(--r-sm);
|
|
1298
|
+
background: var(--surface);
|
|
1299
|
+
cursor: pointer;
|
|
1300
|
+
transition: all var(--t-fast);
|
|
1301
|
+
}
|
|
1302
|
+
.t-act:hover { background: var(--paper); }
|
|
1303
|
+
.t-act.t-confirm { color: var(--success-700); }
|
|
1304
|
+
.t-act.t-confirm:hover { background: var(--success-50); border-color: var(--success-500); }
|
|
1305
|
+
.t-act.t-edit { color: var(--ink-500); }
|
|
1306
|
+
.t-act.t-delete { color: var(--danger-700); }
|
|
1307
|
+
.t-act.t-delete:hover { background: var(--danger-50); border-color: var(--danger-500); }
|
|
1308
|
+
|
|
1309
|
+
/* ---------- BREADCRUMB (formal) ---------- */
|
|
1310
|
+
.bc {
|
|
1311
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
1312
|
+
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1313
|
+
}
|
|
1314
|
+
.bc-sep { color: var(--ink-300); }
|
|
1315
|
+
.bc-item {
|
|
1316
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1317
|
+
color: var(--ink-500);
|
|
1318
|
+
cursor: pointer;
|
|
1319
|
+
}
|
|
1320
|
+
.bc-item:hover { color: var(--ink-700); }
|
|
1321
|
+
.bc-item.current { color: var(--ink-700); font-weight: 500; cursor: default; }
|
|
1322
|
+
.bc-dot {
|
|
1323
|
+
width: 6px; height: 6px; border-radius: 50%;
|
|
1324
|
+
background: var(--brand-500);
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
/* ---------- ICON GRID ---------- */
|
|
1328
|
+
.icon-grid {
|
|
1329
|
+
display: grid;
|
|
1330
|
+
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
|
1331
|
+
gap: 1px;
|
|
1332
|
+
background: var(--line-200);
|
|
1333
|
+
border: 1px solid var(--line-200);
|
|
1334
|
+
border-radius: var(--r-lg);
|
|
1335
|
+
overflow: hidden;
|
|
1336
|
+
}
|
|
1337
|
+
.icon-cell {
|
|
1338
|
+
background: var(--surface);
|
|
1339
|
+
display: flex; flex-direction: column;
|
|
1340
|
+
align-items: center; justify-content: center; gap: 12px;
|
|
1341
|
+
padding: 20px 8px;
|
|
1342
|
+
cursor: pointer;
|
|
1343
|
+
transition: background var(--t-fast);
|
|
1344
|
+
color: var(--ink-700);
|
|
1345
|
+
}
|
|
1346
|
+
.icon-cell:hover { background: var(--paper); color: var(--brand-600); }
|
|
1347
|
+
.icon-cell:hover .icon-name { color: var(--brand-700); }
|
|
1348
|
+
.icon-cell svg { display: block; }
|
|
1349
|
+
.icon-name {
|
|
1350
|
+
font-family: var(--font-mono);
|
|
1351
|
+
font-size: var(--fs-2xs);
|
|
1352
|
+
color: var(--ink-400);
|
|
1353
|
+
letter-spacing: var(--ls-wide);
|
|
1354
|
+
text-transform: lowercase;
|
|
1355
|
+
transition: color var(--t-fast);
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
/* ---------- AVATAR (square cliente — extras) ---------- */
|
|
1359
|
+
.av-space {
|
|
1360
|
+
width: 24px; height: 24px;
|
|
1361
|
+
border-radius: var(--r-sm);
|
|
1362
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1363
|
+
font-family: var(--font-display);
|
|
1364
|
+
font-weight: 700;
|
|
1365
|
+
font-size: 11px;
|
|
1366
|
+
color: #fff;
|
|
1367
|
+
flex-shrink: 0;
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
@media (max-width: 1100px) {
|
|
1371
|
+
.swatch-grid { grid-template-columns: repeat(4, 1fr); }
|
|
1372
|
+
.grid-2 { grid-template-columns: 1fr; }
|
|
1373
|
+
.section-header { grid-template-columns: 1fr; gap: 24px; }
|
|
1374
|
+
.section { padding: 56px 32px; }
|
|
1375
|
+
}
|
|
1376
|
+
@media (max-width: 800px) {
|
|
1377
|
+
.app { grid-template-columns: 1fr; }
|
|
1378
|
+
.sidebar { display: none; }
|
|
1379
|
+
.swatch-grid { grid-template-columns: repeat(2, 1fr); }
|
|
1380
|
+
.grid-3 { grid-template-columns: 1fr; }
|
|
1381
|
+
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
|
1382
|
+
}
|
|
1383
|
+
</style>
|
|
1384
|
+
</head>
|
|
1385
|
+
<body>
|
|
1386
|
+
|
|
1387
|
+
<div class="app">
|
|
1388
|
+
|
|
1389
|
+
<!-- =================== SIDEBAR =================== -->
|
|
1390
|
+
<aside class="sidebar">
|
|
1391
|
+
<div class="sidebar-brand">
|
|
1392
|
+
<img src="assets/logo-zark-laranja.png" alt="ZARK" class="sidebar-logo"/>
|
|
1393
|
+
</div>
|
|
1394
|
+
|
|
1395
|
+
<div class="sidebar-eyebrow">Foundations</div>
|
|
1396
|
+
<a class="sidebar-link active" href="#colors"><span class="num">01</span>Cores</a>
|
|
1397
|
+
<a class="sidebar-link" href="#typography"><span class="num">02</span>Tipografia</a>
|
|
1398
|
+
<a class="sidebar-link" href="#spacing"><span class="num">03</span>Espaçamento</a>
|
|
1399
|
+
<a class="sidebar-link" href="#radius"><span class="num">04</span>Raios</a>
|
|
1400
|
+
<a class="sidebar-link" href="#shadows"><span class="num">05</span>Sombras</a>
|
|
1401
|
+
|
|
1402
|
+
<div class="sidebar-eyebrow">Primitives</div>
|
|
1403
|
+
<a class="sidebar-link" href="#buttons"><span class="num">06</span>Botões</a>
|
|
1404
|
+
<a class="sidebar-link" href="#inputs"><span class="num">07</span>Inputs</a>
|
|
1405
|
+
<a class="sidebar-link" href="#tags"><span class="num">08</span>Tags & Badges</a>
|
|
1406
|
+
<a class="sidebar-link" href="#controls"><span class="num">09</span>Toggle & Segmented</a>
|
|
1407
|
+
<a class="sidebar-link" href="#avatar"><span class="num">10</span>Avatar & Kbd</a>
|
|
1408
|
+
|
|
1409
|
+
<div class="sidebar-eyebrow">Patterns</div>
|
|
1410
|
+
<a class="sidebar-link" href="#sidebar"><span class="num">11</span>Sidebar</a>
|
|
1411
|
+
<a class="sidebar-link" href="#cards"><span class="num">12</span>Cards</a>
|
|
1412
|
+
<a class="sidebar-link" href="#table"><span class="num">13</span>Data Table</a>
|
|
1413
|
+
<a class="sidebar-link" href="#modal"><span class="num">14</span>Modal</a>
|
|
1414
|
+
<a class="sidebar-link" href="#code"><span class="num">15</span>Code Block</a>
|
|
1415
|
+
<a class="sidebar-link" href="#banners"><span class="num">16</span>Banners</a>
|
|
1416
|
+
|
|
1417
|
+
<div class="sidebar-eyebrow">App Patterns (CRM)</div>
|
|
1418
|
+
<a class="sidebar-link" href="#status"><span class="num">17</span>Status & Priority</a>
|
|
1419
|
+
<a class="sidebar-link" href="#spaces"><span class="num">18</span>Cores por Espaço</a>
|
|
1420
|
+
<a class="sidebar-link" href="#stats"><span class="num">19</span>Stat Cards</a>
|
|
1421
|
+
<a class="sidebar-link" href="#alert"><span class="num">20</span>Critical Alert</a>
|
|
1422
|
+
<a class="sidebar-link" href="#funnel"><span class="num">21</span>Funnel & Progress</a>
|
|
1423
|
+
<a class="sidebar-link" href="#kanban"><span class="num">22</span>Kanban</a>
|
|
1424
|
+
<a class="sidebar-link" href="#leadcard"><span class="num">23</span>Lead Card</a>
|
|
1425
|
+
<a class="sidebar-link" href="#chips"><span class="num">24</span>Filter Chips</a>
|
|
1426
|
+
<a class="sidebar-link" href="#empty"><span class="num">25</span>Empty State</a>
|
|
1427
|
+
<a class="sidebar-link" href="#icons"><span class="num">26</span>Icons</a>
|
|
1428
|
+
<a class="sidebar-link" href="#tactions"><span class="num">27</span>Table Actions</a>
|
|
1429
|
+
|
|
1430
|
+
<div class="sidebar-footer">
|
|
1431
|
+
<div class="sidebar-link" style="cursor:default">
|
|
1432
|
+
<span class="num">v1</span>
|
|
1433
|
+
<span style="font-size:var(--fs-xs);color:var(--ink-400);font-family:var(--font-mono)">Sistemas · 2026</span>
|
|
1434
|
+
</div>
|
|
1435
|
+
</div>
|
|
1436
|
+
</aside>
|
|
1437
|
+
|
|
1438
|
+
<!-- =================== MAIN =================== -->
|
|
1439
|
+
<div>
|
|
1440
|
+
|
|
1441
|
+
<!-- TOPBAR -->
|
|
1442
|
+
<header class="topbar">
|
|
1443
|
+
<div class="topbar-left">
|
|
1444
|
+
<div class="crumb">design-system / <b>sistemas</b></div>
|
|
1445
|
+
</div>
|
|
1446
|
+
<div class="topbar-right">
|
|
1447
|
+
<button class="btn btn-ghost btn-sm">
|
|
1448
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M9 5v4l2.5 1.5"/></svg>
|
|
1449
|
+
Histórico
|
|
1450
|
+
</button>
|
|
1451
|
+
<button class="btn btn-secondary btn-sm">
|
|
1452
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h12M3 9h12M3 14h12"/></svg>
|
|
1453
|
+
Exportar tokens
|
|
1454
|
+
</button>
|
|
1455
|
+
<button id="themeToggle" class="theme-toggle" onclick="toggleTheme()">
|
|
1456
|
+
<svg id="themeIcon" width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="3.5"/><path d="M9 1.5v2M9 14.5v2M16.5 9h-2M3.5 9h-2M14.3 3.7l-1.4 1.4M5.1 12.9l-1.4 1.4M14.3 14.3l-1.4-1.4M5.1 5.1L3.7 3.7"/></svg>
|
|
1457
|
+
<span class="label" id="themeLabel">Light</span>
|
|
1458
|
+
</button>
|
|
1459
|
+
</div>
|
|
1460
|
+
</header>
|
|
1461
|
+
|
|
1462
|
+
<main>
|
|
1463
|
+
|
|
1464
|
+
<!-- =================== 01 COLORS =================== -->
|
|
1465
|
+
<section id="colors" class="section">
|
|
1466
|
+
<div class="section-inner">
|
|
1467
|
+
<div class="section-header">
|
|
1468
|
+
<div>
|
|
1469
|
+
<div class="eyebrow">01 — Foundations</div>
|
|
1470
|
+
<h2>Paleta cromática</h2>
|
|
1471
|
+
</div>
|
|
1472
|
+
<p class="section-desc">Sistema warm, neutro, ember-on-paper. Liquid Lava (#F56F10) é a única cor de marca — usar com moderação em CTAs primários, focus rings e brand moments. Nunca como background dominante.</p>
|
|
1473
|
+
</div>
|
|
1474
|
+
|
|
1475
|
+
<div class="stack">
|
|
1476
|
+
|
|
1477
|
+
<!-- BRAND -->
|
|
1478
|
+
<div class="panel">
|
|
1479
|
+
<div class="panel-head">
|
|
1480
|
+
<div class="panel-title">Brand · Liquid Lava scale</div>
|
|
1481
|
+
<div class="panel-kicker">10 tokens</div>
|
|
1482
|
+
</div>
|
|
1483
|
+
<div class="panel-body">
|
|
1484
|
+
<div class="swatch-grid" id="emberGrid"></div>
|
|
1485
|
+
</div>
|
|
1486
|
+
</div>
|
|
1487
|
+
|
|
1488
|
+
<!-- NEUTRALS -->
|
|
1489
|
+
<div class="panel">
|
|
1490
|
+
<div class="panel-head">
|
|
1491
|
+
<div class="panel-title">Neutros · Paper → Ink</div>
|
|
1492
|
+
<div class="panel-kicker">superfícies + texto</div>
|
|
1493
|
+
</div>
|
|
1494
|
+
<div class="panel-body">
|
|
1495
|
+
<div class="sub-label">Superfícies & linhas</div>
|
|
1496
|
+
<div class="swatch-grid" id="surfaceGrid"></div>
|
|
1497
|
+
<div style="height:24px"></div>
|
|
1498
|
+
<div class="sub-label">Ink (texto)</div>
|
|
1499
|
+
<div class="swatch-grid" id="inkGrid"></div>
|
|
1500
|
+
</div>
|
|
1501
|
+
</div>
|
|
1502
|
+
|
|
1503
|
+
<!-- SEMANTIC -->
|
|
1504
|
+
<div class="panel">
|
|
1505
|
+
<div class="panel-head">
|
|
1506
|
+
<div class="panel-title">Semânticos</div>
|
|
1507
|
+
<div class="panel-kicker">success · warning · danger · info</div>
|
|
1508
|
+
</div>
|
|
1509
|
+
<div class="panel-body">
|
|
1510
|
+
<div class="grid-4" id="semanticGrid"></div>
|
|
1511
|
+
</div>
|
|
1512
|
+
</div>
|
|
1513
|
+
|
|
1514
|
+
</div>
|
|
1515
|
+
</div>
|
|
1516
|
+
</section>
|
|
1517
|
+
|
|
1518
|
+
<!-- =================== 02 TYPOGRAPHY =================== -->
|
|
1519
|
+
<section id="typography" class="section">
|
|
1520
|
+
<div class="section-inner">
|
|
1521
|
+
<div class="section-header">
|
|
1522
|
+
<div>
|
|
1523
|
+
<div class="eyebrow">02 — Foundations</div>
|
|
1524
|
+
<h2>Tipografia</h2>
|
|
1525
|
+
</div>
|
|
1526
|
+
<p class="section-desc">Inter para UI e <strong>números</strong> (KPIs, valores, contadores). JetBrains Mono para código e labels técnicos. Space Grotesk para <strong>títulos</strong> — H1, H2, H3, modal titles, header bands. Cada uma tem um papel: nunca trocar.</p>
|
|
1527
|
+
</div>
|
|
1528
|
+
|
|
1529
|
+
<div class="grid-2">
|
|
1530
|
+
<div class="panel">
|
|
1531
|
+
<div class="panel-head"><div class="panel-title">Famílias</div><div class="panel-kicker">3 fontes</div></div>
|
|
1532
|
+
<div class="panel-body">
|
|
1533
|
+
<div style="margin-bottom:24px">
|
|
1534
|
+
<div class="sub-label">Inter — UI & Números</div>
|
|
1535
|
+
<div style="font-family:var(--font-sans); font-size:var(--fs-2xl); color:var(--ink-700); line-height:1.2">The quick brown fox</div>
|
|
1536
|
+
<div style="font-family:var(--font-sans); font-size:var(--fs-3xl); font-weight:700; color:var(--ink-700); line-height:1; letter-spacing:-0.02em; margin-top:8px">R$ 13.676 · 28 / 100</div>
|
|
1537
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-sans) · 400 · 500 · 600 · 700 · 800</div>
|
|
1538
|
+
</div>
|
|
1539
|
+
<div style="margin-bottom:24px">
|
|
1540
|
+
<div class="sub-label">JetBrains Mono — Código & labels</div>
|
|
1541
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-xl); color:var(--ink-700); line-height:1.2">const ember = #F56F10</div>
|
|
1542
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-mono)</div>
|
|
1543
|
+
</div>
|
|
1544
|
+
<div>
|
|
1545
|
+
<div class="sub-label">Space Grotesk — Títulos</div>
|
|
1546
|
+
<div style="font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:700; color:var(--ink-700); letter-spacing:-0.02em; line-height:1.1">ZARK Sistemas</div>
|
|
1547
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-display) · h1 · h2 · h3 · modal title</div>
|
|
1548
|
+
</div>
|
|
1549
|
+
</div>
|
|
1550
|
+
</div>
|
|
1551
|
+
|
|
1552
|
+
<div class="panel">
|
|
1553
|
+
<div class="panel-head"><div class="panel-title">Pesos & Spacing</div><div class="panel-kicker">Inter</div></div>
|
|
1554
|
+
<div class="panel-body">
|
|
1555
|
+
<div class="sub-label">Pesos</div>
|
|
1556
|
+
<div style="font-size:var(--fs-xl); color:var(--ink-700); display:flex; flex-direction:column; gap:8px">
|
|
1557
|
+
<div style="font-weight:400">Regular 400 — body padrão</div>
|
|
1558
|
+
<div style="font-weight:500">Medium 500 — UI labels, botões</div>
|
|
1559
|
+
<div style="font-weight:600">Semibold 600 — headings médios</div>
|
|
1560
|
+
<div style="font-weight:700">Bold 700 — display, ênfase</div>
|
|
1561
|
+
</div>
|
|
1562
|
+
<div style="height:20px"></div>
|
|
1563
|
+
<div class="sub-label">Letter spacing</div>
|
|
1564
|
+
<div style="display:flex; flex-direction:column; gap:10px; font-size:var(--fs-base); color:var(--ink-700)">
|
|
1565
|
+
<div style="letter-spacing:var(--ls-tight)">tight -0.02em — display</div>
|
|
1566
|
+
<div style="letter-spacing:var(--ls-snug)">snug -0.01em — heading</div>
|
|
1567
|
+
<div style="letter-spacing:var(--ls-normal)">normal 0 — body</div>
|
|
1568
|
+
<div style="letter-spacing:var(--ls-wide); font-family:var(--font-mono); font-size:var(--fs-sm); text-transform:uppercase">wide 0.04em — button</div>
|
|
1569
|
+
<div style="letter-spacing:var(--ls-widest); font-family:var(--font-mono); font-size:var(--fs-2xs); text-transform:uppercase">widest 0.14em — eyebrow</div>
|
|
1570
|
+
</div>
|
|
1571
|
+
</div>
|
|
1572
|
+
</div>
|
|
1573
|
+
</div>
|
|
1574
|
+
|
|
1575
|
+
<div style="height:24px"></div>
|
|
1576
|
+
|
|
1577
|
+
<div class="panel">
|
|
1578
|
+
<div class="panel-head"><div class="panel-title">Escala — fs tokens</div><div class="panel-kicker">10 → 88px</div></div>
|
|
1579
|
+
<div class="panel-body" id="typeScale"></div>
|
|
1580
|
+
</div>
|
|
1581
|
+
</div>
|
|
1582
|
+
</section>
|
|
1583
|
+
|
|
1584
|
+
<!-- =================== 03 SPACING =================== -->
|
|
1585
|
+
<section id="spacing" class="section">
|
|
1586
|
+
<div class="section-inner">
|
|
1587
|
+
<div class="section-header">
|
|
1588
|
+
<div>
|
|
1589
|
+
<div class="eyebrow">03 — Foundations</div>
|
|
1590
|
+
<h2>Espaçamento</h2>
|
|
1591
|
+
</div>
|
|
1592
|
+
<p class="section-desc">Base 4px. Default de stack vertical: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-12</code> (24px). Default de gap em flex: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-8</code> (16px). Padding interno de card: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-16</code> ou <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-20</code>.</p>
|
|
1593
|
+
</div>
|
|
1594
|
+
<div class="panel">
|
|
1595
|
+
<div class="panel-head"><div class="panel-title">Escala de spacing</div><div class="panel-kicker">--sp-0 → --sp-48</div></div>
|
|
1596
|
+
<div class="panel-body" id="spacingScale"></div>
|
|
1597
|
+
</div>
|
|
1598
|
+
</div>
|
|
1599
|
+
</section>
|
|
1600
|
+
|
|
1601
|
+
<!-- =================== 04 RADIUS =================== -->
|
|
1602
|
+
<section id="radius" class="section">
|
|
1603
|
+
<div class="section-inner">
|
|
1604
|
+
<div class="section-header">
|
|
1605
|
+
<div>
|
|
1606
|
+
<div class="eyebrow">04 — Foundations</div>
|
|
1607
|
+
<h2>Border radius</h2>
|
|
1608
|
+
</div>
|
|
1609
|
+
<p class="section-desc">xs em status dots, badges e progress bars · sm em tags, chips e botões pequenos · md em botões e inputs padrão · lg em cards · xl/2xl em modals e hero panels · 3xl raramente. Avatares usam <code style="font-family:var(--font-mono);color:var(--brand-700)">border-radius: 50%</code> direto (são círculos geométricos, não tags).</p>
|
|
1610
|
+
</div>
|
|
1611
|
+
<div class="panel">
|
|
1612
|
+
<div class="panel-body">
|
|
1613
|
+
<div class="grid-4" id="radiusGrid"></div>
|
|
1614
|
+
</div>
|
|
1615
|
+
</div>
|
|
1616
|
+
</div>
|
|
1617
|
+
</section>
|
|
1618
|
+
|
|
1619
|
+
<!-- =================== 05 SHADOWS =================== -->
|
|
1620
|
+
<section id="shadows" class="section">
|
|
1621
|
+
<div class="section-inner">
|
|
1622
|
+
<div class="section-header">
|
|
1623
|
+
<div>
|
|
1624
|
+
<div class="eyebrow">05 — Foundations</div>
|
|
1625
|
+
<h2>Sombras</h2>
|
|
1626
|
+
</div>
|
|
1627
|
+
<p class="section-desc">Sempre warm (rgba 20,17,12) — nunca azul-frio (rgba 0,0,0). Curtas em cards, largas em modais. <code style="font-family:var(--font-mono);color:var(--brand-700)">--ring-focus</code> sempre presente em elementos interativos via teclado.</p>
|
|
1628
|
+
</div>
|
|
1629
|
+
<div class="panel">
|
|
1630
|
+
<div class="panel-body">
|
|
1631
|
+
<div class="grid-3" id="shadowGrid"></div>
|
|
1632
|
+
</div>
|
|
1633
|
+
</div>
|
|
1634
|
+
</div>
|
|
1635
|
+
</section>
|
|
1636
|
+
|
|
1637
|
+
<!-- =================== 06 BUTTONS =================== -->
|
|
1638
|
+
<section id="buttons" class="section">
|
|
1639
|
+
<div class="section-inner">
|
|
1640
|
+
<div class="section-header">
|
|
1641
|
+
<div>
|
|
1642
|
+
<div class="eyebrow">06 — Primitives</div>
|
|
1643
|
+
<h2>Botões</h2>
|
|
1644
|
+
</div>
|
|
1645
|
+
<p class="section-desc">5 variantes × 4 tamanhos. Primary é a única cor de marca em CTA — use com moderação. Secondary é o default. Soft pra ações ember de menor peso. Ghost pra ações terciárias e icon-only.</p>
|
|
1646
|
+
</div>
|
|
1647
|
+
|
|
1648
|
+
<div class="panel">
|
|
1649
|
+
<div class="panel-head"><div class="panel-title">Buttons</div><div class="panel-kicker">5 variantes × 4 sizes</div></div>
|
|
1650
|
+
<div class="panel-body">
|
|
1651
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Variantes — md</div></div>
|
|
1652
|
+
<div class="row">
|
|
1653
|
+
<button class="btn btn-primary btn-md">
|
|
1654
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13V5M5 9l4-4 4 4"/></svg>
|
|
1655
|
+
Upgrade
|
|
1656
|
+
</button>
|
|
1657
|
+
<button class="btn btn-secondary btn-md">Get code</button>
|
|
1658
|
+
<button class="btn btn-soft btn-md">
|
|
1659
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg>
|
|
1660
|
+
Try with AI
|
|
1661
|
+
</button>
|
|
1662
|
+
<button class="btn btn-ghost btn-md">
|
|
1663
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4l-5 5 5 5"/></svg>
|
|
1664
|
+
Back
|
|
1665
|
+
</button>
|
|
1666
|
+
<button class="btn btn-danger btn-md">
|
|
1667
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="10" height="10" rx="1.5"/></svg>
|
|
1668
|
+
Stop
|
|
1669
|
+
</button>
|
|
1670
|
+
</div>
|
|
1671
|
+
|
|
1672
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tamanhos — primary</div></div>
|
|
1673
|
+
<div class="row">
|
|
1674
|
+
<button class="btn btn-primary btn-xs">XS</button>
|
|
1675
|
+
<button class="btn btn-primary btn-sm">Small</button>
|
|
1676
|
+
<button class="btn btn-primary btn-md">Medium</button>
|
|
1677
|
+
<button class="btn btn-primary btn-lg">Large</button>
|
|
1678
|
+
</div>
|
|
1679
|
+
|
|
1680
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Com ícone</div></div>
|
|
1681
|
+
<div class="row">
|
|
1682
|
+
<button class="btn btn-primary btn-md">
|
|
1683
|
+
Start scraping
|
|
1684
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4l5 5-5 5"/></svg>
|
|
1685
|
+
</button>
|
|
1686
|
+
<button class="btn btn-secondary btn-md">
|
|
1687
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v8M5 7l4 4 4-4M3 14h12"/></svg>
|
|
1688
|
+
JSON
|
|
1689
|
+
</button>
|
|
1690
|
+
<button class="btn btn-secondary btn-md">
|
|
1691
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5l-3 4 3 4M12 5l3 4-3 4"/></svg>
|
|
1692
|
+
Markdown
|
|
1693
|
+
</button>
|
|
1694
|
+
<button class="btn btn-ghost btn-md">
|
|
1695
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v12M3 9h12"/></svg>
|
|
1696
|
+
Add
|
|
1697
|
+
</button>
|
|
1698
|
+
<button class="btn btn-secondary btn-icon-only btn-md">
|
|
1699
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="1.5"/><circle cx="9" cy="3.5" r="1.5"/><circle cx="9" cy="14.5" r="1.5"/></svg>
|
|
1700
|
+
</button>
|
|
1701
|
+
</div>
|
|
1702
|
+
|
|
1703
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Estados</div></div>
|
|
1704
|
+
<div class="row">
|
|
1705
|
+
<button class="btn btn-primary btn-md">Default</button>
|
|
1706
|
+
<button class="btn btn-primary btn-md" style="background:var(--brand-700)">Hover</button>
|
|
1707
|
+
<button class="btn btn-primary btn-md" style="background:var(--brand-800)">Pressed</button>
|
|
1708
|
+
<button class="btn btn-secondary btn-md" disabled>Disabled</button>
|
|
1709
|
+
<button class="btn btn-primary btn-md"><span class="spinner"></span> Loading…</button>
|
|
1710
|
+
</div>
|
|
1711
|
+
|
|
1712
|
+
<div class="divider"></div>
|
|
1713
|
+
<div class="spec"><span class="l">Heights</span><span class="v">22 / 28 / 32 / 40 px</span></div>
|
|
1714
|
+
<div class="spec"><span class="l">Border radius</span><span class="v">--r-sm → --r-lg</span></div>
|
|
1715
|
+
<div class="spec"><span class="l">Primary fill</span><span class="v">brand-600 → brand-700 hover</span></div>
|
|
1716
|
+
<div class="spec"><span class="l">Focus ring</span><span class="v">--ring-focus (3px ember 20%)</span></div>
|
|
1717
|
+
</div>
|
|
1718
|
+
</div>
|
|
1719
|
+
</div>
|
|
1720
|
+
</section>
|
|
1721
|
+
|
|
1722
|
+
<!-- =================== 07 INPUTS =================== -->
|
|
1723
|
+
<section id="inputs" class="section">
|
|
1724
|
+
<div class="section-inner">
|
|
1725
|
+
<div class="section-header">
|
|
1726
|
+
<div>
|
|
1727
|
+
<div class="eyebrow">07 — Primitives</div>
|
|
1728
|
+
<h2>Inputs</h2>
|
|
1729
|
+
</div>
|
|
1730
|
+
<p class="section-desc">Border <code style="font-family:var(--font-mono);color:var(--brand-700)">--line-300</code>, raio <code style="font-family:var(--font-mono);color:var(--brand-700)">--r-lg</code>. Focus eleva o ring ember. Estado <code style="font-family:var(--font-mono);color:var(--brand-700)">invalid</code> troca a borda pra danger. URL input full-width é o padrão para campos de URL em hero.</p>
|
|
1731
|
+
</div>
|
|
1732
|
+
|
|
1733
|
+
<div class="panel">
|
|
1734
|
+
<div class="panel-head"><div class="panel-title">Inputs, toggles, segmented</div></div>
|
|
1735
|
+
<div class="panel-body">
|
|
1736
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Text inputs — sm/md/lg</div></div>
|
|
1737
|
+
<div class="row">
|
|
1738
|
+
<div style="width:240px">
|
|
1739
|
+
<label class="input input-sm">
|
|
1740
|
+
<span class="ico"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="5"/><path d="M12 12l3 3"/></svg></span>
|
|
1741
|
+
<input placeholder="Search..."/>
|
|
1742
|
+
<span class="suffix"><span class="kbd">⌘K</span></span>
|
|
1743
|
+
</label>
|
|
1744
|
+
</div>
|
|
1745
|
+
<div style="width:280px">
|
|
1746
|
+
<label class="input input-md">
|
|
1747
|
+
<span class="ico"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M2.5 9h13M9 2.5c2 2 2 11 0 13M9 2.5c-2 2-2 11 0 13"/></svg></span>
|
|
1748
|
+
<input placeholder="https://example.com"/>
|
|
1749
|
+
</label>
|
|
1750
|
+
</div>
|
|
1751
|
+
<div style="width:300px">
|
|
1752
|
+
<label class="input input-lg">
|
|
1753
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="12" height="8" rx="1.5"/><path d="M5 7V5a4 4 0 018 0v2"/></svg></span>
|
|
1754
|
+
<input type="password" placeholder="Senha (large)"/>
|
|
1755
|
+
</label>
|
|
1756
|
+
</div>
|
|
1757
|
+
</div>
|
|
1758
|
+
|
|
1759
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Mono · API key</div></div>
|
|
1760
|
+
<div class="row">
|
|
1761
|
+
<div style="width:320px">
|
|
1762
|
+
<label class="input input-md mono">
|
|
1763
|
+
<input value="zk-9b71-4f••••••••aebf" readonly/>
|
|
1764
|
+
<span class="suffix">
|
|
1765
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 9c2-3.5 5-5 8-5s6 1.5 8 5c-2 3.5-5 5-8 5s-6-1.5-8-5z"/><circle cx="9" cy="9" r="2"/></svg>
|
|
1766
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="9" height="9" rx="1.5"/><path d="M3 12V4a1 1 0 011-1h8"/></svg>
|
|
1767
|
+
</span>
|
|
1768
|
+
</label>
|
|
1769
|
+
</div>
|
|
1770
|
+
</div>
|
|
1771
|
+
|
|
1772
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Estado invalid</div></div>
|
|
1773
|
+
<div class="row">
|
|
1774
|
+
<div style="width:280px">
|
|
1775
|
+
<label class="input input-md invalid">
|
|
1776
|
+
<span class="ico" style="color:var(--danger-500)"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M9 5v4M9 12v0.5"/></svg></span>
|
|
1777
|
+
<input value="email-invalido"/>
|
|
1778
|
+
</label>
|
|
1779
|
+
<div style="font-size:var(--fs-xs); color:var(--danger-700); margin-top:6px; font-family:var(--font-mono)">Formato de email inválido</div>
|
|
1780
|
+
</div>
|
|
1781
|
+
</div>
|
|
1782
|
+
|
|
1783
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">URL input — full-width (search-style)</div></div>
|
|
1784
|
+
<div class="row">
|
|
1785
|
+
<div class="url-input-full">
|
|
1786
|
+
<span class="scheme">
|
|
1787
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M2.5 9h13M9 2.5c2 2 2 11 0 13M9 2.5c-2 2-2 11 0 13"/></svg>
|
|
1788
|
+
https://
|
|
1789
|
+
</span>
|
|
1790
|
+
<input placeholder="www.zark.com/sistema/..."/>
|
|
1791
|
+
</div>
|
|
1792
|
+
</div>
|
|
1793
|
+
|
|
1794
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Textarea</div></div>
|
|
1795
|
+
<div class="row">
|
|
1796
|
+
<textarea placeholder="Descreva o briefing..." style="
|
|
1797
|
+
width:100%; max-width:520px; min-height:90px;
|
|
1798
|
+
padding:10px 12px;
|
|
1799
|
+
background:var(--surface);
|
|
1800
|
+
border:1px solid var(--line-300);
|
|
1801
|
+
border-radius:var(--r-lg);
|
|
1802
|
+
font-family:var(--font-sans); font-size:var(--fs-md);
|
|
1803
|
+
color:var(--ink-700); resize:vertical;
|
|
1804
|
+
outline:none;
|
|
1805
|
+
"></textarea>
|
|
1806
|
+
</div>
|
|
1807
|
+
</div>
|
|
1808
|
+
</div>
|
|
1809
|
+
</div>
|
|
1810
|
+
</section>
|
|
1811
|
+
|
|
1812
|
+
<!-- =================== 08 TAGS & BADGES =================== -->
|
|
1813
|
+
<section id="tags" class="section">
|
|
1814
|
+
<div class="section-inner">
|
|
1815
|
+
<div class="section-header">
|
|
1816
|
+
<div>
|
|
1817
|
+
<div class="eyebrow">08 — Primitives</div>
|
|
1818
|
+
<h2>Tags, badges, kbd</h2>
|
|
1819
|
+
</div>
|
|
1820
|
+
<p class="section-desc">Tags curtos com raio --r-sm (4px) pra status e estados. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.tag-square</code> usa raio --r-xs (3px) ainda mais sharp pra data labels técnicos (linguagens, endpoints, IDs). Mono uppercase com letter-spacing wide é a assinatura.</p>
|
|
1821
|
+
</div>
|
|
1822
|
+
|
|
1823
|
+
<div class="panel">
|
|
1824
|
+
<div class="panel-body">
|
|
1825
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags — status (rounded-sm)</div></div>
|
|
1826
|
+
<div class="row">
|
|
1827
|
+
<span class="tag tag-ember">New</span>
|
|
1828
|
+
<span class="tag">Optional</span>
|
|
1829
|
+
<span class="tag tag-success">Claimed</span>
|
|
1830
|
+
<span class="tag tag-success">Completed</span>
|
|
1831
|
+
<span class="tag tag-info">Live</span>
|
|
1832
|
+
<span class="tag tag-warning">Pending</span>
|
|
1833
|
+
<span class="tag tag-danger">Failed</span>
|
|
1834
|
+
</div>
|
|
1835
|
+
|
|
1836
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags — square (data labels)</div></div>
|
|
1837
|
+
<div class="row">
|
|
1838
|
+
<span class="tag tag-mono tag-square tag-xs">TypeScript</span>
|
|
1839
|
+
<span class="tag tag-mono tag-square tag-xs">Python</span>
|
|
1840
|
+
<span class="tag tag-mono tag-square tag-xs">Next.js</span>
|
|
1841
|
+
<span class="tag tag-mono tag-square tag-xs">ZARK SDK</span>
|
|
1842
|
+
<span class="tag tag-mono tag-square tag-xs">v1.0.4</span>
|
|
1843
|
+
</div>
|
|
1844
|
+
|
|
1845
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tamanhos</div></div>
|
|
1846
|
+
<div class="row">
|
|
1847
|
+
<span class="tag tag-ember tag-xs">XS</span>
|
|
1848
|
+
<span class="tag tag-ember tag-sm">SM</span>
|
|
1849
|
+
<span class="tag tag-ember tag-md">MD</span>
|
|
1850
|
+
</div>
|
|
1851
|
+
|
|
1852
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Notification badges</div></div>
|
|
1853
|
+
<div class="row">
|
|
1854
|
+
<div style="position:relative; display:inline-block">
|
|
1855
|
+
<button class="btn btn-ghost btn-icon-only btn-md">
|
|
1856
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7a5 5 0 0110 0v3l1.5 2H2.5L4 10V7z"/><path d="M7 14a2 2 0 004 0"/></svg>
|
|
1857
|
+
</button>
|
|
1858
|
+
<span class="badge" style="position:absolute; top:2px; right:2px">1</span>
|
|
1859
|
+
</div>
|
|
1860
|
+
<div style="position:relative; display:inline-block">
|
|
1861
|
+
<button class="btn btn-ghost btn-md">
|
|
1862
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M7 7a2 2 0 114 0c0 1-2 1.5-2 3M9 13v0.01"/></svg>
|
|
1863
|
+
Help
|
|
1864
|
+
</button>
|
|
1865
|
+
<span class="badge" style="position:absolute; top:-4px; right:-4px">6</span>
|
|
1866
|
+
</div>
|
|
1867
|
+
<div style="position:relative; display:inline-block">
|
|
1868
|
+
<button class="btn btn-ghost btn-icon-only btn-md">
|
|
1869
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13a4 4 0 100-8 4 4 0 000 8zM9 13v3M5 16h8"/></svg>
|
|
1870
|
+
</button>
|
|
1871
|
+
<span class="badge badge-ink" style="position:absolute; top:-4px; right:-4px">12</span>
|
|
1872
|
+
</div>
|
|
1873
|
+
</div>
|
|
1874
|
+
|
|
1875
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Keyboard shortcuts</div></div>
|
|
1876
|
+
<div class="row">
|
|
1877
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">⌘</span><span class="kbd">K</span></span>
|
|
1878
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">⇧</span><span class="kbd">↵</span></span>
|
|
1879
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">Esc</span></span>
|
|
1880
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">⌘</span><span class="kbd">⇧</span><span class="kbd">P</span></span>
|
|
1881
|
+
</div>
|
|
1882
|
+
</div>
|
|
1883
|
+
</div>
|
|
1884
|
+
</div>
|
|
1885
|
+
</section>
|
|
1886
|
+
|
|
1887
|
+
<!-- =================== 09 CONTROLS =================== -->
|
|
1888
|
+
<section id="controls" class="section">
|
|
1889
|
+
<div class="section-inner">
|
|
1890
|
+
<div class="section-header">
|
|
1891
|
+
<div>
|
|
1892
|
+
<div class="eyebrow">09 — Primitives</div>
|
|
1893
|
+
<h2>Toggle & Segmented</h2>
|
|
1894
|
+
</div>
|
|
1895
|
+
<p class="section-desc">Toggle pra estados booleanos (on/off, mostrar/esconder). Segmented pra switch entre views ou modos exclusivos com 2-4 opções.</p>
|
|
1896
|
+
</div>
|
|
1897
|
+
|
|
1898
|
+
<div class="grid-2">
|
|
1899
|
+
<div class="panel">
|
|
1900
|
+
<div class="panel-head"><div class="panel-title">Toggles</div></div>
|
|
1901
|
+
<div class="panel-body">
|
|
1902
|
+
<div class="row" style="margin-bottom:18px">
|
|
1903
|
+
<button class="toggle on" onclick="this.classList.toggle('on')"><span class="knob"></span></button>
|
|
1904
|
+
<span style="font-size:var(--fs-md); color:var(--ink-600)">Main content only</span>
|
|
1905
|
+
</div>
|
|
1906
|
+
<div class="row" style="margin-bottom:18px">
|
|
1907
|
+
<button class="toggle" onclick="this.classList.toggle('on')"><span class="knob"></span></button>
|
|
1908
|
+
<span style="font-size:var(--fs-md); color:var(--ink-600)">Stealth mode</span>
|
|
1909
|
+
<span class="tag tag-square tag-xs">5 cr / page</span>
|
|
1910
|
+
</div>
|
|
1911
|
+
<div class="row" style="margin-bottom:0">
|
|
1912
|
+
<button class="toggle toggle-sm on" onclick="this.classList.toggle('on')"><span class="knob"></span></button>
|
|
1913
|
+
<span style="font-size:var(--fs-sm); color:var(--ink-500)">Small variant</span>
|
|
1914
|
+
</div>
|
|
1915
|
+
<div class="divider"></div>
|
|
1916
|
+
<div class="spec"><span class="l">Off bg</span><span class="v">--ink-200</span></div>
|
|
1917
|
+
<div class="spec"><span class="l">On bg</span><span class="v">--brand-500</span></div>
|
|
1918
|
+
<div class="spec"><span class="l">Animation</span><span class="v">--t-base ease-out</span></div>
|
|
1919
|
+
</div>
|
|
1920
|
+
</div>
|
|
1921
|
+
|
|
1922
|
+
<div class="panel">
|
|
1923
|
+
<div class="panel-head"><div class="panel-title">Segmented</div></div>
|
|
1924
|
+
<div class="panel-body">
|
|
1925
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Scrape / Search / Map / Crawl</div></div>
|
|
1926
|
+
<div class="row" style="margin-bottom:18px">
|
|
1927
|
+
<div class="segmented" id="seg1">
|
|
1928
|
+
<button class="active" data-v="scrape">Scrape</button>
|
|
1929
|
+
<button data-v="search">Search <span class="tag tag-mono tag-square tag-xs">New</span></button>
|
|
1930
|
+
<button data-v="map">Map</button>
|
|
1931
|
+
<button data-v="crawl">Crawl</button>
|
|
1932
|
+
</div>
|
|
1933
|
+
</div>
|
|
1934
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">View toggle</div></div>
|
|
1935
|
+
<div class="row">
|
|
1936
|
+
<div class="segmented" id="seg2">
|
|
1937
|
+
<button class="active" data-v="grid">
|
|
1938
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="5" height="5"/><rect x="10" y="3" width="5" height="5"/><rect x="3" y="10" width="5" height="5"/><rect x="10" y="10" width="5" height="5"/></svg>
|
|
1939
|
+
Grid
|
|
1940
|
+
</button>
|
|
1941
|
+
<button data-v="list">
|
|
1942
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 5h12M3 9h12M3 13h12"/></svg>
|
|
1943
|
+
List
|
|
1944
|
+
</button>
|
|
1945
|
+
</div>
|
|
1946
|
+
</div>
|
|
1947
|
+
</div>
|
|
1948
|
+
</div>
|
|
1949
|
+
</div>
|
|
1950
|
+
</div>
|
|
1951
|
+
</section>
|
|
1952
|
+
|
|
1953
|
+
<!-- =================== 10 AVATAR & KBD =================== -->
|
|
1954
|
+
<section id="avatar" class="section">
|
|
1955
|
+
<div class="section-inner">
|
|
1956
|
+
<div class="section-header">
|
|
1957
|
+
<div>
|
|
1958
|
+
<div class="eyebrow">10 — Primitives</div>
|
|
1959
|
+
<h2>Avatar & Kbd</h2>
|
|
1960
|
+
</div>
|
|
1961
|
+
<p class="section-desc">Avatares usam Space Grotesk na inicial — micro-brand moment. Square pra contextos enterprise/team, circle pra contextos pessoais. Kbd sempre com border-bottom de 2px pra parecer tecla.</p>
|
|
1962
|
+
</div>
|
|
1963
|
+
|
|
1964
|
+
<div class="grid-2">
|
|
1965
|
+
<div class="panel">
|
|
1966
|
+
<div class="panel-head"><div class="panel-title">Avatar — sizes</div></div>
|
|
1967
|
+
<div class="panel-body">
|
|
1968
|
+
<div class="row" style="align-items:flex-end">
|
|
1969
|
+
<span class="avatar" style="width:18px; height:18px; font-size:9px">R</span>
|
|
1970
|
+
<span class="avatar" style="width:24px; height:24px; font-size:11px">R</span>
|
|
1971
|
+
<span class="avatar" style="width:32px; height:32px; font-size:14px">R</span>
|
|
1972
|
+
<span class="avatar" style="width:40px; height:40px; font-size:16px">R</span>
|
|
1973
|
+
<span class="avatar" style="width:56px; height:56px; font-size:24px">R</span>
|
|
1974
|
+
</div>
|
|
1975
|
+
<div class="row" style="align-items:flex-end">
|
|
1976
|
+
<span class="avatar avatar-sq" style="width:24px; height:24px; font-size:11px">Z</span>
|
|
1977
|
+
<span class="avatar avatar-sq" style="width:32px; height:32px; font-size:14px; background:var(--ink-700)">A</span>
|
|
1978
|
+
<span class="avatar avatar-sq" style="width:40px; height:40px; font-size:16px; background:var(--info-500)">M</span>
|
|
1979
|
+
</div>
|
|
1980
|
+
<div class="row">
|
|
1981
|
+
<div style="display:flex; align-items:center; gap:8px">
|
|
1982
|
+
<span class="avatar" style="width:22px; height:22px; font-size:10px">M</span>
|
|
1983
|
+
<span style="font-size:var(--fs-sm); color:var(--ink-500); font-family:var(--font-mono)">mayconjordanr@gmail.com</span>
|
|
1984
|
+
</div>
|
|
1985
|
+
</div>
|
|
1986
|
+
</div>
|
|
1987
|
+
</div>
|
|
1988
|
+
|
|
1989
|
+
<div class="panel">
|
|
1990
|
+
<div class="panel-head"><div class="panel-title">Kbd — combos</div></div>
|
|
1991
|
+
<div class="panel-body">
|
|
1992
|
+
<div class="row" style="margin-bottom:14px">
|
|
1993
|
+
<span class="sub-label" style="width:160px; margin-bottom:0">Open command palette</span>
|
|
1994
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">⌘</span><span class="kbd">K</span></span>
|
|
1995
|
+
</div>
|
|
1996
|
+
<div class="row" style="margin-bottom:14px">
|
|
1997
|
+
<span class="sub-label" style="width:160px; margin-bottom:0">Submit</span>
|
|
1998
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">⇧</span><span class="kbd">↵</span></span>
|
|
1999
|
+
</div>
|
|
2000
|
+
<div class="row" style="margin-bottom:14px">
|
|
2001
|
+
<span class="sub-label" style="width:160px; margin-bottom:0">Close modal</span>
|
|
2002
|
+
<span class="kbd">Esc</span>
|
|
2003
|
+
</div>
|
|
2004
|
+
<div class="row" style="margin-bottom:14px">
|
|
2005
|
+
<span class="sub-label" style="width:160px; margin-bottom:0">New project</span>
|
|
2006
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">⌘</span><span class="kbd">⇧</span><span class="kbd">N</span></span>
|
|
2007
|
+
</div>
|
|
2008
|
+
<div class="row">
|
|
2009
|
+
<span class="sub-label" style="width:160px; margin-bottom:0">Quick switcher</span>
|
|
2010
|
+
<span style="display:inline-flex; gap:4px"><span class="kbd">⌃</span><span class="kbd">`</span></span>
|
|
2011
|
+
</div>
|
|
2012
|
+
</div>
|
|
2013
|
+
</div>
|
|
2014
|
+
</div>
|
|
2015
|
+
</div>
|
|
2016
|
+
</section>
|
|
2017
|
+
|
|
2018
|
+
<!-- =================== 11 SIDEBAR =================== -->
|
|
2019
|
+
<section id="sidebar" class="section">
|
|
2020
|
+
<div class="section-inner">
|
|
2021
|
+
<div class="section-header">
|
|
2022
|
+
<div>
|
|
2023
|
+
<div class="eyebrow">11 — Patterns</div>
|
|
2024
|
+
<h2>Sidebar de aplicação</h2>
|
|
2025
|
+
</div>
|
|
2026
|
+
<p class="section-desc">Largura 240px, bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--canvas</code>, items com altura ~32px. Active state usa <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-50</code> bg + <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-700</code> texto. Footer leve com avatar + email do user.</p>
|
|
2027
|
+
</div>
|
|
2028
|
+
|
|
2029
|
+
<div class="panel">
|
|
2030
|
+
<div class="panel-head"><div class="panel-title">Sidebar component</div><div class="panel-kicker">240px width</div></div>
|
|
2031
|
+
<div class="panel-body flush">
|
|
2032
|
+
<div class="demo-sidebar">
|
|
2033
|
+
<div class="ds-side">
|
|
2034
|
+
<div style="padding:8px 10px 16px">
|
|
2035
|
+
<img src="assets/logo-zark-laranja.png" alt="ZARK" style="height:18px; display:block"/>
|
|
2036
|
+
</div>
|
|
2037
|
+
<div style="padding:0 4px 8px">
|
|
2038
|
+
<label class="input input-sm">
|
|
2039
|
+
<span class="ico"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="M12 12l3 3"/></svg></span>
|
|
2040
|
+
<input placeholder="Search"/>
|
|
2041
|
+
<span class="suffix"><span class="kbd">⌘K</span></span>
|
|
2042
|
+
</label>
|
|
2043
|
+
</div>
|
|
2044
|
+
<div class="ds-side-item active">
|
|
2045
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l6-6 6 6v6a1 1 0 01-1 1h-3v-4H7v4H4a1 1 0 01-1-1V9z"/></svg></span>
|
|
2046
|
+
<span style="flex:1">Overview</span>
|
|
2047
|
+
</div>
|
|
2048
|
+
<div class="ds-side-item">
|
|
2049
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l10 6-10 6V3z"/></svg></span>
|
|
2050
|
+
<span style="flex:1">Playground</span>
|
|
2051
|
+
</div>
|
|
2052
|
+
<div class="ds-side-item">
|
|
2053
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h6v6H3zM9 9h6v6H9zM3 12h3v3H3zM12 3h3v3h-3z"/></svg></span>
|
|
2054
|
+
<span style="flex:1">Extract</span>
|
|
2055
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 7l4 4 4-4"/></svg>
|
|
2056
|
+
</div>
|
|
2057
|
+
<div style="margin-left:26px; display:flex; flex-direction:column; gap:1px">
|
|
2058
|
+
<div class="ds-side-item" style="padding:5px 10px"><span style="flex:1; font-size:var(--fs-sm)">Overview</span></div>
|
|
2059
|
+
<div class="ds-side-item" style="padding:5px 10px"><span style="flex:1; font-size:var(--fs-sm)">Playground</span></div>
|
|
2060
|
+
</div>
|
|
2061
|
+
<div class="ds-side-item">
|
|
2062
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l3-3 3 3 3-5 3 7"/></svg></span>
|
|
2063
|
+
<span style="flex:1">Activity Logs</span>
|
|
2064
|
+
</div>
|
|
2065
|
+
<div class="ds-side-item">
|
|
2066
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M9 5v4l2.5 1.5"/></svg></span>
|
|
2067
|
+
<span style="flex:1">Usage</span>
|
|
2068
|
+
</div>
|
|
2069
|
+
<div class="ds-side-item">
|
|
2070
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="9" r="3"/><path d="M9 9h6v3M12 12v2"/></svg></span>
|
|
2071
|
+
<span style="flex:1">API Keys</span>
|
|
2072
|
+
</div>
|
|
2073
|
+
<div class="ds-side-item">
|
|
2074
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="2.5"/><path d="M9 1.5v2M9 14.5v2M16.5 9h-2M3.5 9h-2M14.3 3.7l-1.4 1.4M5.1 12.9l-1.4 1.4M14.3 14.3l-1.4-1.4M5.1 5.1L3.7 3.7"/></svg></span>
|
|
2075
|
+
<span style="flex:1">Settings</span>
|
|
2076
|
+
</div>
|
|
2077
|
+
|
|
2078
|
+
<div style="flex:1"></div>
|
|
2079
|
+
|
|
2080
|
+
<div class="ds-side-card">
|
|
2081
|
+
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px">
|
|
2082
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--brand-500)"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg>
|
|
2083
|
+
<span style="font-size:var(--fs-sm); font-weight:600; color:var(--ink-700)">What's New</span>
|
|
2084
|
+
<span style="font-size:var(--fs-2xs); color:var(--brand-600); font-family:var(--font-mono)">(6)</span>
|
|
2085
|
+
</div>
|
|
2086
|
+
<div style="font-size:var(--fs-xs); color:var(--ink-400)">View our latest update</div>
|
|
2087
|
+
</div>
|
|
2088
|
+
|
|
2089
|
+
<div style="display:flex; align-items:center; gap:8px; padding:8px 10px">
|
|
2090
|
+
<span class="avatar avatar-sq" style="width:22px; height:22px; font-size:10px">M</span>
|
|
2091
|
+
<span style="font-size:var(--fs-xs); color:var(--ink-500); font-family:var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap">maycon@zark.app</span>
|
|
2092
|
+
</div>
|
|
2093
|
+
</div>
|
|
2094
|
+
|
|
2095
|
+
<!-- Topbar preview do app -->
|
|
2096
|
+
<div class="ds-main">
|
|
2097
|
+
<div style="height:56px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-200)">
|
|
2098
|
+
<div style="display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--r-md)">
|
|
2099
|
+
<span class="avatar avatar-sq" style="width:18px; height:18px; font-size:9px">P</span>
|
|
2100
|
+
<span style="font-size:var(--fs-md); color:var(--brand-700); font-weight:500">Personal Team</span>
|
|
2101
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--brand-700)"><path d="M5 7l4 4 4-4"/></svg>
|
|
2102
|
+
</div>
|
|
2103
|
+
<div style="display:flex; gap:6px; align-items:center">
|
|
2104
|
+
<button class="btn btn-ghost btn-icon-only btn-sm">
|
|
2105
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7a5 5 0 0110 0v3l1.5 2H2.5L4 10V7z"/><path d="M7 14a2 2 0 004 0"/></svg>
|
|
2106
|
+
</button>
|
|
2107
|
+
<button class="btn btn-ghost btn-sm">
|
|
2108
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="6.5"/><path d="M7 7a2 2 0 114 0c0 1-2 1.5-2 3M9 13v0.01"/></svg>
|
|
2109
|
+
Help
|
|
2110
|
+
</button>
|
|
2111
|
+
<button class="btn btn-secondary btn-sm">
|
|
2112
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h6l3 3v8a1 1 0 01-1 1H5a1 1 0 01-1-1V4a1 1 0 011-1z"/></svg>
|
|
2113
|
+
Docs
|
|
2114
|
+
</button>
|
|
2115
|
+
<button class="btn btn-primary btn-sm">
|
|
2116
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13V5M5 9l4-4 4 4"/></svg>
|
|
2117
|
+
Upgrade
|
|
2118
|
+
</button>
|
|
2119
|
+
</div>
|
|
2120
|
+
</div>
|
|
2121
|
+
<div style="padding:32px">
|
|
2122
|
+
<div class="sub-label">Sidebar states</div>
|
|
2123
|
+
<div style="display:flex; flex-direction:column; gap:4px; max-width:240px; margin-top:12px">
|
|
2124
|
+
<div class="ds-side-item">
|
|
2125
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l6-6 6 6v6h-4v-4H7v4H3V9z"/></svg></span>
|
|
2126
|
+
<span style="flex:1">Default</span>
|
|
2127
|
+
</div>
|
|
2128
|
+
<div class="ds-side-item" style="background:var(--ink-50); color:var(--ink-700)">
|
|
2129
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 3l10 6-10 6V3z"/></svg></span>
|
|
2130
|
+
<span style="flex:1">Hover</span>
|
|
2131
|
+
</div>
|
|
2132
|
+
<div class="ds-side-item active">
|
|
2133
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l3-3 3 3 3-5 3 7"/></svg></span>
|
|
2134
|
+
<span style="flex:1">Active (selected)</span>
|
|
2135
|
+
</div>
|
|
2136
|
+
</div>
|
|
2137
|
+
<div class="divider"></div>
|
|
2138
|
+
<div class="spec"><span class="l">Width</span><span class="v">240px</span></div>
|
|
2139
|
+
<div class="spec"><span class="l">Background</span><span class="v">--canvas</span></div>
|
|
2140
|
+
<div class="spec"><span class="l">Active fill</span><span class="v">--brand-50 + --brand-700</span></div>
|
|
2141
|
+
<div class="spec"><span class="l">Item height</span><span class="v">~32px</span></div>
|
|
2142
|
+
</div>
|
|
2143
|
+
</div>
|
|
2144
|
+
</div>
|
|
2145
|
+
</div>
|
|
2146
|
+
</div>
|
|
2147
|
+
</div>
|
|
2148
|
+
</section>
|
|
2149
|
+
|
|
2150
|
+
<!-- =================== 12 CARDS =================== -->
|
|
2151
|
+
<section id="cards" class="section">
|
|
2152
|
+
<div class="section-inner">
|
|
2153
|
+
<div class="section-header">
|
|
2154
|
+
<div>
|
|
2155
|
+
<div class="eyebrow">12 — Patterns</div>
|
|
2156
|
+
<h2>Cards</h2>
|
|
2157
|
+
</div>
|
|
2158
|
+
<p class="section-desc">Endpoint cards usam border-only (sem shadow) em row contínua. Stat cards trazem display font no número. Project cards combinam title + tags. Integration tile usa cores próprias por marca.</p>
|
|
2159
|
+
</div>
|
|
2160
|
+
|
|
2161
|
+
<div class="panel">
|
|
2162
|
+
<div class="panel-head"><div class="panel-title">Cards</div></div>
|
|
2163
|
+
<div class="panel-body flush">
|
|
2164
|
+
|
|
2165
|
+
<div style="padding:24px">
|
|
2166
|
+
<div class="sub-label">Endpoint cards — borderless row</div>
|
|
2167
|
+
<div style="display:flex; gap:0; margin-top:4px">
|
|
2168
|
+
<div class="endpoint">
|
|
2169
|
+
<div class="head">
|
|
2170
|
+
<span class="ico"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="6" r="1.5"/><circle cx="12" cy="6" r="1.5"/><circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/></svg></span>
|
|
2171
|
+
<span class="label">Scrape</span>
|
|
2172
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 4l5 5-5 5"/></svg>
|
|
2173
|
+
</div>
|
|
2174
|
+
<div class="desc">Get llm-ready data from websites. Markdown, JSON, screenshot, etc.</div>
|
|
2175
|
+
</div>
|
|
2176
|
+
<div class="endpoint">
|
|
2177
|
+
<div class="head">
|
|
2178
|
+
<span class="ico"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="M12 12l3 3"/></svg></span>
|
|
2179
|
+
<span class="label">Search</span>
|
|
2180
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 4l5 5-5 5"/></svg>
|
|
2181
|
+
<span class="tag tag-ember tag-xs">NEW</span>
|
|
2182
|
+
</div>
|
|
2183
|
+
<div class="desc">Search the web and get full content from results.</div>
|
|
2184
|
+
</div>
|
|
2185
|
+
<div class="endpoint">
|
|
2186
|
+
<div class="head">
|
|
2187
|
+
<span class="ico"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="9" r="6.5"/><path d="M2.5 9h13M9 2.5c2 2 2 11 0 13M9 2.5c-2 2-2 11 0 13"/></svg></span>
|
|
2188
|
+
<span class="label">Crawl</span>
|
|
2189
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 4l5 5-5 5"/></svg>
|
|
2190
|
+
</div>
|
|
2191
|
+
<div class="desc">Crawl all the pages on a website and get data for each page.</div>
|
|
2192
|
+
</div>
|
|
2193
|
+
<div class="endpoint">
|
|
2194
|
+
<div class="head">
|
|
2195
|
+
<span class="ico"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg></span>
|
|
2196
|
+
<span class="label">Extract</span>
|
|
2197
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 4l5 5-5 5"/></svg>
|
|
2198
|
+
</div>
|
|
2199
|
+
<div class="desc">Get structured data from websites with AI.</div>
|
|
2200
|
+
</div>
|
|
2201
|
+
</div>
|
|
2202
|
+
</div>
|
|
2203
|
+
|
|
2204
|
+
<div style="border-top:1px solid var(--line-100); padding:24px">
|
|
2205
|
+
<div class="sub-label">Stat / data card</div>
|
|
2206
|
+
<div class="stat-card">
|
|
2207
|
+
<div class="stat-card-head">
|
|
2208
|
+
<div>
|
|
2209
|
+
<div class="stat-card-title">Páginas processadas — Últimos 7 dias</div>
|
|
2210
|
+
<div class="stat-card-sub">+18% vs semana anterior</div>
|
|
2211
|
+
</div>
|
|
2212
|
+
<div class="stat-card-num">2.418</div>
|
|
2213
|
+
</div>
|
|
2214
|
+
<div style="margin-top:18px; height:40px; background: linear-gradient(180deg, var(--brand-50), transparent); border-radius:var(--r-md); display:flex; align-items:flex-end; padding:4px; gap:3px">
|
|
2215
|
+
<div style="flex:1; height:30%; background:var(--brand-300); border-radius:2px"></div>
|
|
2216
|
+
<div style="flex:1; height:50%; background:var(--brand-400); border-radius:2px"></div>
|
|
2217
|
+
<div style="flex:1; height:40%; background:var(--brand-300); border-radius:2px"></div>
|
|
2218
|
+
<div style="flex:1; height:70%; background:var(--brand-400); border-radius:2px"></div>
|
|
2219
|
+
<div style="flex:1; height:55%; background:var(--brand-400); border-radius:2px"></div>
|
|
2220
|
+
<div style="flex:1; height:85%; background:var(--brand-500); border-radius:2px"></div>
|
|
2221
|
+
<div style="flex:1; height:100%; background:var(--brand-600); border-radius:2px"></div>
|
|
2222
|
+
</div>
|
|
2223
|
+
<div style="margin-top:8px; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-300)">
|
|
2224
|
+
<span>04/29</span><span>05/02</span><span>05/05</span>
|
|
2225
|
+
</div>
|
|
2226
|
+
</div>
|
|
2227
|
+
</div>
|
|
2228
|
+
|
|
2229
|
+
<div style="border-top:1px solid var(--line-100); padding:24px">
|
|
2230
|
+
<div class="sub-label">Integration tile</div>
|
|
2231
|
+
<div class="intg-grid">
|
|
2232
|
+
<div class="intg-tile" style="border-bottom:1px solid var(--line-100); border-right:1px solid var(--line-100)">
|
|
2233
|
+
<div class="lh"><span class="badge-color" style="background:#3572A5">P</span><span class="name">Python</span></div>
|
|
2234
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2235
|
+
</div>
|
|
2236
|
+
<div class="intg-tile" style="border-bottom:1px solid var(--line-100); border-right:1px solid var(--line-100)">
|
|
2237
|
+
<div class="lh"><span class="badge-color" style="background:#F7DF1E; color:#000">J</span><span class="name">JS / TS SDK</span></div>
|
|
2238
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2239
|
+
</div>
|
|
2240
|
+
<div class="intg-tile" style="border-bottom:1px solid var(--line-100)">
|
|
2241
|
+
<div class="lh"><span class="badge-color" style="background:#1D6F42">L</span><span class="name">Langchain</span></div>
|
|
2242
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2243
|
+
</div>
|
|
2244
|
+
<div class="intg-tile" style="border-right:1px solid var(--line-100)">
|
|
2245
|
+
<div class="lh"><span class="badge-color" style="background:#7341FF">M</span><span class="name">Make</span></div>
|
|
2246
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2247
|
+
</div>
|
|
2248
|
+
<div class="intg-tile" style="border-right:1px solid var(--line-100)">
|
|
2249
|
+
<div class="lh"><span class="badge-color" style="background:#5865F2">D</span><span class="name">Discord</span></div>
|
|
2250
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2251
|
+
</div>
|
|
2252
|
+
<div class="intg-tile">
|
|
2253
|
+
<div class="lh"><span class="badge-color" style="background:#42BD41">P</span><span class="name">Pipedream</span></div>
|
|
2254
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2255
|
+
</div>
|
|
2256
|
+
</div>
|
|
2257
|
+
</div>
|
|
2258
|
+
|
|
2259
|
+
<div style="border-top:1px solid var(--line-100); padding:24px">
|
|
2260
|
+
<div class="sub-label">Project / example card with tags</div>
|
|
2261
|
+
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:700px">
|
|
2262
|
+
<div class="proj-card">
|
|
2263
|
+
<div class="head">
|
|
2264
|
+
<div class="title">30+ Examples</div>
|
|
2265
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2266
|
+
</div>
|
|
2267
|
+
<div class="desc">Collection of simple projects built with ZARK</div>
|
|
2268
|
+
<div class="tags">
|
|
2269
|
+
<span class="tag tag-mono tag-square tag-xs">TypeScript</span>
|
|
2270
|
+
<span class="tag tag-mono tag-square tag-xs">Python</span>
|
|
2271
|
+
<span class="tag tag-mono tag-square tag-xs">ZARK SDK</span>
|
|
2272
|
+
</div>
|
|
2273
|
+
</div>
|
|
2274
|
+
<div class="proj-card">
|
|
2275
|
+
<div class="head">
|
|
2276
|
+
<div class="title">LLMs.txt Generator</div>
|
|
2277
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2278
|
+
</div>
|
|
2279
|
+
<div class="desc">Generate an llms.txt with this web app built on Next.js</div>
|
|
2280
|
+
<div class="tags">
|
|
2281
|
+
<span class="tag tag-mono tag-square tag-xs">TypeScript</span>
|
|
2282
|
+
<span class="tag tag-mono tag-square tag-xs">Next.js</span>
|
|
2283
|
+
<span class="tag tag-mono tag-square tag-xs">ZARK SDK</span>
|
|
2284
|
+
</div>
|
|
2285
|
+
</div>
|
|
2286
|
+
</div>
|
|
2287
|
+
</div>
|
|
2288
|
+
|
|
2289
|
+
</div>
|
|
2290
|
+
</div>
|
|
2291
|
+
</div>
|
|
2292
|
+
</section>
|
|
2293
|
+
|
|
2294
|
+
<!-- =================== 13 DATA TABLE =================== -->
|
|
2295
|
+
<section id="table" class="section">
|
|
2296
|
+
<div class="section-inner">
|
|
2297
|
+
<div class="section-header">
|
|
2298
|
+
<div>
|
|
2299
|
+
<div class="eyebrow">13 — Patterns</div>
|
|
2300
|
+
<h2>Data Table</h2>
|
|
2301
|
+
</div>
|
|
2302
|
+
<p class="section-desc">Header em mono uppercase com letter-spacing wider e cor ink-300. Rows com hover sutil em paper. Endpoint sempre como tag mono square na primeira coluna. Status com tag colorido por estado.</p>
|
|
2303
|
+
</div>
|
|
2304
|
+
|
|
2305
|
+
<div class="panel">
|
|
2306
|
+
<div class="panel-body flush">
|
|
2307
|
+
<div class="table-bar">
|
|
2308
|
+
<div class="lh">
|
|
2309
|
+
<div style="width:240px">
|
|
2310
|
+
<label class="input input-sm">
|
|
2311
|
+
<span class="ico"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="M12 12l3 3"/></svg></span>
|
|
2312
|
+
<input placeholder="Search..."/>
|
|
2313
|
+
</label>
|
|
2314
|
+
</div>
|
|
2315
|
+
<button class="btn btn-secondary btn-sm">
|
|
2316
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4h12l-4 6v4l-4 1v-5z"/></svg>
|
|
2317
|
+
/scrape
|
|
2318
|
+
</button>
|
|
2319
|
+
</div>
|
|
2320
|
+
<button class="btn btn-secondary btn-sm">
|
|
2321
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="12" height="11" rx="1.5"/><path d="M3 7h12M6 2v3M12 2v3"/></svg>
|
|
2322
|
+
Custom range
|
|
2323
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 7l4 4 4-4"/></svg>
|
|
2324
|
+
</button>
|
|
2325
|
+
</div>
|
|
2326
|
+
<div class="table-head">
|
|
2327
|
+
<span>Endpoint</span><span>URL</span><span>Status</span><span>Cr</span><span>Date</span><span></span>
|
|
2328
|
+
</div>
|
|
2329
|
+
<div id="tableRows"></div>
|
|
2330
|
+
</div>
|
|
2331
|
+
</div>
|
|
2332
|
+
</div>
|
|
2333
|
+
</section>
|
|
2334
|
+
|
|
2335
|
+
<!-- =================== 14 MODAL =================== -->
|
|
2336
|
+
<section id="modal" class="section">
|
|
2337
|
+
<div class="section-inner">
|
|
2338
|
+
<div class="section-header">
|
|
2339
|
+
<div>
|
|
2340
|
+
<div class="eyebrow">14 — Patterns</div>
|
|
2341
|
+
<h2>Modal — onboarding</h2>
|
|
2342
|
+
</div>
|
|
2343
|
+
<p class="section-desc">Modal max-width 460px, raio 2xl, shadow modal. Overlay com blur de 2px. Sempre anuncia step counter. Título em Space Grotesk — segue a regra: títulos sempre em display font.</p>
|
|
2344
|
+
</div>
|
|
2345
|
+
|
|
2346
|
+
<div class="panel">
|
|
2347
|
+
<div class="panel-body flush">
|
|
2348
|
+
<div class="modal-stage">
|
|
2349
|
+
<div class="modal-overlay"></div>
|
|
2350
|
+
<div class="modal">
|
|
2351
|
+
<div class="modal-head">
|
|
2352
|
+
<div class="modal-title-row">
|
|
2353
|
+
<h3 class="modal-title">Vamos começar</h3>
|
|
2354
|
+
<span class="tag tag-square tag-xs">Optional</span>
|
|
2355
|
+
</div>
|
|
2356
|
+
<p class="modal-desc">Complete essas ações rápidas pra ganhar créditos bônus na sua conta.</p>
|
|
2357
|
+
<div class="modal-progress">
|
|
2358
|
+
<div class="bars">
|
|
2359
|
+
<span class="first"></span>
|
|
2360
|
+
<span></span><span></span><span></span>
|
|
2361
|
+
</div>
|
|
2362
|
+
<span class="tag tag-square tag-xs">Step 1 of 4</span>
|
|
2363
|
+
</div>
|
|
2364
|
+
</div>
|
|
2365
|
+
<div class="modal-list">
|
|
2366
|
+
<div class="modal-item done">
|
|
2367
|
+
<div>
|
|
2368
|
+
<div class="t">Email verificado</div>
|
|
2369
|
+
<div class="d">Seu email foi confirmado</div>
|
|
2370
|
+
</div>
|
|
2371
|
+
<span class="tag tag-success tag-xs">Claimed</span>
|
|
2372
|
+
</div>
|
|
2373
|
+
<div class="modal-item">
|
|
2374
|
+
<div>
|
|
2375
|
+
<div class="t">Star no GitHub repo</div>
|
|
2376
|
+
<div class="d">Confira o código open source e contribua</div>
|
|
2377
|
+
</div>
|
|
2378
|
+
<span class="credits">+100 credits</span>
|
|
2379
|
+
</div>
|
|
2380
|
+
<div class="modal-item">
|
|
2381
|
+
<div>
|
|
2382
|
+
<div class="t">Entrar no Discord</div>
|
|
2383
|
+
<div class="d">Conecte com a gente e tire dúvidas</div>
|
|
2384
|
+
</div>
|
|
2385
|
+
<span class="credits">+50 credits</span>
|
|
2386
|
+
</div>
|
|
2387
|
+
<div class="modal-item">
|
|
2388
|
+
<div>
|
|
2389
|
+
<div class="t">Seguir no X</div>
|
|
2390
|
+
<div class="d">Acompanhe novas features e launches</div>
|
|
2391
|
+
</div>
|
|
2392
|
+
<span class="credits">+50 credits</span>
|
|
2393
|
+
</div>
|
|
2394
|
+
</div>
|
|
2395
|
+
<div class="modal-foot">
|
|
2396
|
+
<button class="btn btn-secondary btn-md">Continuar</button>
|
|
2397
|
+
</div>
|
|
2398
|
+
</div>
|
|
2399
|
+
</div>
|
|
2400
|
+
</div>
|
|
2401
|
+
</div>
|
|
2402
|
+
</div>
|
|
2403
|
+
</section>
|
|
2404
|
+
|
|
2405
|
+
<!-- =================== 15 CODE BLOCK =================== -->
|
|
2406
|
+
<section id="code" class="section">
|
|
2407
|
+
<div class="section-inner">
|
|
2408
|
+
<div class="section-header">
|
|
2409
|
+
<div>
|
|
2410
|
+
<div class="eyebrow">15 — Patterns</div>
|
|
2411
|
+
<h2>Code Block</h2>
|
|
2412
|
+
</div>
|
|
2413
|
+
<p class="section-desc">Bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--code-bg</code> warm. Strings em success-700, keys em code-fg ember. Sempre com botões de eye/copy no canto top-right.</p>
|
|
2414
|
+
</div>
|
|
2415
|
+
|
|
2416
|
+
<div class="panel">
|
|
2417
|
+
<div class="panel-head"><div class="panel-title">Code block — MCP integration</div></div>
|
|
2418
|
+
<div class="panel-body">
|
|
2419
|
+
<div class="code-block">
|
|
2420
|
+
<div class="copy">
|
|
2421
|
+
<button class="btn btn-ghost btn-icon-only btn-xs">
|
|
2422
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 9c2-3.5 5-5 8-5s6 1.5 8 5c-2 3.5-5 5-8 5s-6-1.5-8-5z"/><circle cx="9" cy="9" r="2"/></svg>
|
|
2423
|
+
</button>
|
|
2424
|
+
<button class="btn btn-ghost btn-icon-only btn-xs">
|
|
2425
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="6" y="6" width="9" height="9" rx="1.5"/><path d="M3 12V4a1 1 0 011-1h8"/></svg>
|
|
2426
|
+
</button>
|
|
2427
|
+
</div>
|
|
2428
|
+
<div>{</div>
|
|
2429
|
+
<div class="indent-1"><span class="k">"mcpServers"</span>: {</div>
|
|
2430
|
+
<div class="indent-2"><span class="k">"zark-mcp"</span>: {</div>
|
|
2431
|
+
<div class="indent-3"><span class="k">"command"</span>: <span class="s">"npx"</span>,</div>
|
|
2432
|
+
<div class="indent-3"><span class="k">"args"</span>: [<span class="s">"-y"</span>, <span class="s">"zark-mcp"</span>],</div>
|
|
2433
|
+
<div class="indent-3"><span class="k">"env"</span>: {</div>
|
|
2434
|
+
<div class="indent-4"><span class="k">"ZARK_API_KEY"</span>: <span class="s">"$API_KEY"</span></div>
|
|
2435
|
+
<div class="indent-3">}</div>
|
|
2436
|
+
<div class="indent-2">}</div>
|
|
2437
|
+
<div class="indent-1">}</div>
|
|
2438
|
+
<div>}</div>
|
|
2439
|
+
</div>
|
|
2440
|
+
</div>
|
|
2441
|
+
</div>
|
|
2442
|
+
</div>
|
|
2443
|
+
</section>
|
|
2444
|
+
|
|
2445
|
+
<!-- =================== 16 BANNERS =================== -->
|
|
2446
|
+
<section id="banners" class="section">
|
|
2447
|
+
<div class="section-inner">
|
|
2448
|
+
<div class="section-header">
|
|
2449
|
+
<div>
|
|
2450
|
+
<div class="eyebrow">16 — Patterns</div>
|
|
2451
|
+
<h2>Banners & Toasts</h2>
|
|
2452
|
+
</div>
|
|
2453
|
+
<p class="section-desc">Announcement bar (full-width, neutro). Tip card (lateral, com ícone ember). Toast (bottom centered, ink-700 ou success-500, raio md). Sempre próximo da ação que originou.</p>
|
|
2454
|
+
</div>
|
|
2455
|
+
|
|
2456
|
+
<div class="panel">
|
|
2457
|
+
<div class="panel-body">
|
|
2458
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Top announcement bar</div></div>
|
|
2459
|
+
<div class="row" style="margin-bottom:24px">
|
|
2460
|
+
<div class="announce">
|
|
2461
|
+
Acabamos de levantar Series A e lançar ZARK v2 🎉 <a href="#">Ler o blog.</a>
|
|
2462
|
+
</div>
|
|
2463
|
+
</div>
|
|
2464
|
+
|
|
2465
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">In-page tip card</div></div>
|
|
2466
|
+
<div class="row" style="margin-bottom:24px">
|
|
2467
|
+
<div class="tip">
|
|
2468
|
+
<span class="ico">
|
|
2469
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg>
|
|
2470
|
+
</span>
|
|
2471
|
+
<div style="flex:1">
|
|
2472
|
+
<div class="what">What's New</div>
|
|
2473
|
+
<div class="title">Apresentando ZARK v2</div>
|
|
2474
|
+
<div class="desc">10x mais rápido, busca de notícias e imagens, smart crawling e mais.</div>
|
|
2475
|
+
</div>
|
|
2476
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300); cursor:pointer"><path d="M5 5l8 8M13 5l-8 8"/></svg>
|
|
2477
|
+
</div>
|
|
2478
|
+
</div>
|
|
2479
|
+
|
|
2480
|
+
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Toast</div></div>
|
|
2481
|
+
<div class="row">
|
|
2482
|
+
<div class="toast">
|
|
2483
|
+
Welcome to ZARK!
|
|
2484
|
+
<img src="assets/zark-icon.png" alt="ZARK" style="height:14px; width:auto; display:block; filter:brightness(0) invert(1)"/>
|
|
2485
|
+
</div>
|
|
2486
|
+
|
|
2487
|
+
<div class="toast toast-success">
|
|
2488
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9l4 4 6-8"/></svg>
|
|
2489
|
+
Copied as Markdown
|
|
2490
|
+
</div>
|
|
2491
|
+
<div class="toast" style="background:var(--danger-500)">
|
|
2492
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="9" r="6.5"/><path d="M9 5v4M9 12v0.5"/></svg>
|
|
2493
|
+
Erro ao salvar configuração
|
|
2494
|
+
</div>
|
|
2495
|
+
</div>
|
|
2496
|
+
</div>
|
|
2497
|
+
</div>
|
|
2498
|
+
|
|
2499
|
+
</div>
|
|
2500
|
+
</section>
|
|
2501
|
+
|
|
2502
|
+
<!-- =================== 17 STATUS & PRIORITY =================== -->
|
|
2503
|
+
<section id="status" class="section">
|
|
2504
|
+
<div class="section-inner">
|
|
2505
|
+
<div class="section-header">
|
|
2506
|
+
<div>
|
|
2507
|
+
<div class="eyebrow">17 — App Patterns · CRM</div>
|
|
2508
|
+
<h2>Status & Priority</h2>
|
|
2509
|
+
</div>
|
|
2510
|
+
<p class="section-desc">Matriz oficial unificada. Substitui as 3+ variações encontradas no CRM (URGENT/URGENTE em formatos diferentes, tags de status com alturas variando). Sempre mono uppercase, altura 22px, raio sm, dot colorido à esquerda. Modificadores (ATRASADA, PARADO) sobrescrevem o status base.</p>
|
|
2511
|
+
</div>
|
|
2512
|
+
|
|
2513
|
+
<div class="grid-2">
|
|
2514
|
+
<div class="panel">
|
|
2515
|
+
<div class="panel-head"><div class="panel-title">Status — 5 estados base</div><div class="panel-kicker">tarefa lifecycle</div></div>
|
|
2516
|
+
<div class="panel-body">
|
|
2517
|
+
<div class="row" style="margin-bottom:14px">
|
|
2518
|
+
<span class="tag-dot s-todo">A FAZER</span>
|
|
2519
|
+
<span class="tag-dot s-progress">EM PROGRESSO</span>
|
|
2520
|
+
<span class="tag-dot s-review">EM REVISÃO</span>
|
|
2521
|
+
<span class="tag-dot s-done">CONCLUÍDO</span>
|
|
2522
|
+
<span class="tag-dot s-canceled">CANCELADO</span>
|
|
2523
|
+
</div>
|
|
2524
|
+
<div class="divider"></div>
|
|
2525
|
+
<div class="sub-label">Modificadores (sobrescrevem o status base)</div>
|
|
2526
|
+
<div class="row" style="margin-bottom:0">
|
|
2527
|
+
<span class="tag-dot s-overdue">ATRASADA</span>
|
|
2528
|
+
<span class="tag-dot s-paused">PARADO</span>
|
|
2529
|
+
<span class="tag-dot s-followup">FOLLOW-UP</span>
|
|
2530
|
+
</div>
|
|
2531
|
+
<div class="divider"></div>
|
|
2532
|
+
<div class="spec"><span class="l">Altura</span><span class="v">22px (fixo)</span></div>
|
|
2533
|
+
<div class="spec"><span class="l">Padding</span><span class="v">0 8px</span></div>
|
|
2534
|
+
<div class="spec"><span class="l">Border-radius</span><span class="v">--r-sm (4px)</span></div>
|
|
2535
|
+
<div class="spec"><span class="l">Font</span><span class="v">mono · 11px · 500 · uppercase</span></div>
|
|
2536
|
+
</div>
|
|
2537
|
+
</div>
|
|
2538
|
+
|
|
2539
|
+
<div class="panel">
|
|
2540
|
+
<div class="panel-head"><div class="panel-title">Priority — 4 níveis</div><div class="panel-kicker">prioridade da tarefa</div></div>
|
|
2541
|
+
<div class="panel-body">
|
|
2542
|
+
<div class="row" style="margin-bottom:14px">
|
|
2543
|
+
<span class="tag-dot p-urgent">URGENTE</span>
|
|
2544
|
+
<span class="tag-dot p-high">ALTA</span>
|
|
2545
|
+
<span class="tag-dot p-med">MÉDIA</span>
|
|
2546
|
+
<span class="tag-dot p-low">BAIXA</span>
|
|
2547
|
+
</div>
|
|
2548
|
+
<div class="divider"></div>
|
|
2549
|
+
<div class="sub-label">Combinação típica em uma tarefa</div>
|
|
2550
|
+
<div style="display:flex; gap:6px; align-items:center; padding:12px; background:var(--paper); border:1px solid var(--line-200); border-radius:var(--r-md)">
|
|
2551
|
+
<span style="flex:1; font-size:var(--fs-md); color:var(--ink-700); font-weight:500">Enviar proposta para TR PAULO</span>
|
|
2552
|
+
<span class="tag-dot spsp-vipcar">VIPCAR</span>
|
|
2553
|
+
<span class="tag-dot s-todo">A FAZER</span>
|
|
2554
|
+
<span class="tag-dot p-urgent">URGENTE</span>
|
|
2555
|
+
</div>
|
|
2556
|
+
<div class="divider"></div>
|
|
2557
|
+
<div class="spec"><span class="l">Ordem da esquerda → direita</span><span class="v">space · status · priority</span></div>
|
|
2558
|
+
<div class="spec"><span class="l">Gap entre tags</span><span class="v">6px</span></div>
|
|
2559
|
+
</div>
|
|
2560
|
+
</div>
|
|
2561
|
+
</div>
|
|
2562
|
+
</div>
|
|
2563
|
+
</section>
|
|
2564
|
+
|
|
2565
|
+
<!-- =================== 18 SPACE COLORS =================== -->
|
|
2566
|
+
<section id="spaces" class="section">
|
|
2567
|
+
<div class="section-inner">
|
|
2568
|
+
<div class="section-header">
|
|
2569
|
+
<div>
|
|
2570
|
+
<div class="eyebrow">18 — App Patterns · CRM</div>
|
|
2571
|
+
<h2>Cores por Espaço</h2>
|
|
2572
|
+
</div>
|
|
2573
|
+
<p class="section-desc">Cada cliente/espaço tem UMA cor fixa, usada em ícone na sidebar, tag de espaço, avatar quadrado e accent borders. Resolve o problema atual onde MIXSHOP/GERAIS/VIPSEG aparecem em cores diferentes em telas diferentes.</p>
|
|
2574
|
+
</div>
|
|
2575
|
+
|
|
2576
|
+
<div class="panel">
|
|
2577
|
+
<div class="panel-head"><div class="panel-title">Token map por cliente</div><div class="panel-kicker">7 espaços</div></div>
|
|
2578
|
+
<div class="panel-body">
|
|
2579
|
+
<div class="grid-3" id="spaceGrid"></div>
|
|
2580
|
+
</div>
|
|
2581
|
+
</div>
|
|
2582
|
+
|
|
2583
|
+
<div style="height:24px"></div>
|
|
2584
|
+
|
|
2585
|
+
<div class="panel">
|
|
2586
|
+
<div class="panel-head"><div class="panel-title">Aplicação consistente</div></div>
|
|
2587
|
+
<div class="panel-body">
|
|
2588
|
+
<div class="sub-label">Avatar quadrado + tag</div>
|
|
2589
|
+
<div class="row">
|
|
2590
|
+
<span style="display:inline-flex; align-items:center; gap:8px"><span class="av-space" style="background:var(--space-zark)">Z</span><span class="tag-dot spsp-zark">ZARK</span></span>
|
|
2591
|
+
<span style="display:inline-flex; align-items:center; gap:8px"><span class="av-space" style="background:var(--space-allsec)">A</span><span class="tag-dot spsp-allsec">ALLSEC</span></span>
|
|
2592
|
+
<span style="display:inline-flex; align-items:center; gap:8px"><span class="av-space" style="background:var(--space-vipcar)">V</span><span class="tag-dot spsp-vipcar">VIPCAR</span></span>
|
|
2593
|
+
<span style="display:inline-flex; align-items:center; gap:8px"><span class="av-space" style="background:var(--space-limppe)">L</span><span class="tag-dot spsp-limppe">LIMPPE TEC</span></span>
|
|
2594
|
+
<span style="display:inline-flex; align-items:center; gap:8px"><span class="av-space" style="background:var(--space-gerais)">G</span><span class="tag-dot spsp-gerais">GERAIS</span></span>
|
|
2595
|
+
<span style="display:inline-flex; align-items:center; gap:8px"><span class="av-space" style="background:var(--space-mixshop)">M</span><span class="tag-dot spsp-mixshop">MIXSHOP</span></span>
|
|
2596
|
+
<span style="display:inline-flex; align-items:center; gap:8px"><span class="av-space" style="background:var(--space-vipseg)">V</span><span class="tag-dot spsp-vipseg">VIPSEG</span></span>
|
|
2597
|
+
</div>
|
|
2598
|
+
</div>
|
|
2599
|
+
</div>
|
|
2600
|
+
</div>
|
|
2601
|
+
</section>
|
|
2602
|
+
|
|
2603
|
+
<!-- =================== 19 STAT CARDS =================== -->
|
|
2604
|
+
<section id="stats" class="section">
|
|
2605
|
+
<div class="section-inner">
|
|
2606
|
+
<div class="section-header">
|
|
2607
|
+
<div>
|
|
2608
|
+
<div class="eyebrow">19 — App Patterns · CRM</div>
|
|
2609
|
+
<h2>Stat Cards (unificado)</h2>
|
|
2610
|
+
</div>
|
|
2611
|
+
<p class="section-desc">Hoje o CRM tem 4 estilos competindo (border-only, ícone em quadrado colorido, mini sem ícone, alerta vermelho). Padrão unificado: ícone em quadrado colorido (28px) + label mono uppercase + número em display font. Variantes só pra progress e crítico.</p>
|
|
2612
|
+
</div>
|
|
2613
|
+
|
|
2614
|
+
<div class="panel">
|
|
2615
|
+
<div class="panel-head"><div class="panel-title">4 variantes oficiais</div><div class="panel-kicker">use a default · variante só quando justifica</div></div>
|
|
2616
|
+
<div class="panel-body">
|
|
2617
|
+
<div class="grid-4">
|
|
2618
|
+
<div class="stat">
|
|
2619
|
+
<div class="stat-head">
|
|
2620
|
+
<span class="stat-label">CONCLUÍDAS · SEMANA</span>
|
|
2621
|
+
<span class="stat-icon green"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 9l4 4 6-8"/></svg></span>
|
|
2622
|
+
</div>
|
|
2623
|
+
<div class="stat-value">8</div>
|
|
2624
|
+
<div class="stat-sub">+18% vs anterior</div>
|
|
2625
|
+
</div>
|
|
2626
|
+
|
|
2627
|
+
<div class="stat">
|
|
2628
|
+
<div class="stat-head">
|
|
2629
|
+
<span class="stat-label">CRIADAS · SEMANA</span>
|
|
2630
|
+
<span class="stat-icon orange"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 5v8M5 9h8"/></svg></span>
|
|
2631
|
+
</div>
|
|
2632
|
+
<div class="stat-value">19</div>
|
|
2633
|
+
<div class="stat-sub">média 2.7/dia</div>
|
|
2634
|
+
</div>
|
|
2635
|
+
|
|
2636
|
+
<div class="stat">
|
|
2637
|
+
<div class="stat-head">
|
|
2638
|
+
<span class="stat-label">RECEBIDO · MAI</span>
|
|
2639
|
+
<span class="stat-icon green"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l4 4 8-8"/></svg></span>
|
|
2640
|
+
</div>
|
|
2641
|
+
<div class="stat-value" style="font-size:var(--fs-2xl)">R$ 3.897</div>
|
|
2642
|
+
<div class="stat-sub">de R$ 19.376 previstos</div>
|
|
2643
|
+
<div class="stat-progress"><span style="width:20%"></span></div>
|
|
2644
|
+
</div>
|
|
2645
|
+
|
|
2646
|
+
<div class="stat is-critical">
|
|
2647
|
+
<div class="stat-head">
|
|
2648
|
+
<span class="stat-label" style="color:var(--danger-700); opacity:0.8">INADIMPLÊNCIA</span>
|
|
2649
|
+
<span class="stat-icon red"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5v4M9 12v0.5"/></svg></span>
|
|
2650
|
+
</div>
|
|
2651
|
+
<div class="stat-value" style="font-size:var(--fs-2xl)">R$ 5.197</div>
|
|
2652
|
+
<div class="stat-sub" style="color:var(--danger-700); opacity:0.7">em faturas atrasadas</div>
|
|
2653
|
+
</div>
|
|
2654
|
+
</div>
|
|
2655
|
+
|
|
2656
|
+
<div class="divider"></div>
|
|
2657
|
+
<div class="spec"><span class="l">Default (KPI)</span><span class="v">label + ícone colorido + número display</span></div>
|
|
2658
|
+
<div class="spec"><span class="l">Com progress</span><span class="v">quando o stat tem meta (R$ recebido / previsto)</span></div>
|
|
2659
|
+
<div class="spec"><span class="l">Crítico</span><span class="v">só quando exige ação imediata (inadimplência)</span></div>
|
|
2660
|
+
<div class="spec"><span class="l">Cor do ícone</span><span class="v">success (positivo) · ember (neutro) · info (referência) · red (alerta) · purple (especial)</span></div>
|
|
2661
|
+
</div>
|
|
2662
|
+
</div>
|
|
2663
|
+
</div>
|
|
2664
|
+
</section>
|
|
2665
|
+
|
|
2666
|
+
<!-- =================== 20 CRITICAL ALERT =================== -->
|
|
2667
|
+
<section id="alert" class="section">
|
|
2668
|
+
<div class="section-inner">
|
|
2669
|
+
<div class="section-header">
|
|
2670
|
+
<div>
|
|
2671
|
+
<div class="eyebrow">20 — App Patterns · CRM</div>
|
|
2672
|
+
<h2>Critical Alert Banner</h2>
|
|
2673
|
+
</div>
|
|
2674
|
+
<p class="section-desc">Padrão derivado do "8 TAREFAS EM ATRASO" do dashboard. Banner pleno de bg vermelho (danger-50) + border vermelho (danger-500) + lista de items clicáveis. Reservado para situações que exigem ação imediata. NUNCA usar pra warnings normais (esses vão em banner amarelo).</p>
|
|
2675
|
+
</div>
|
|
2676
|
+
|
|
2677
|
+
<div class="panel">
|
|
2678
|
+
<div class="panel-body">
|
|
2679
|
+
<div class="alert-critical">
|
|
2680
|
+
<div class="alert-critical-head">
|
|
2681
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 2L1 15h16L9 2zM9 7v4M9 13v0.5"/></svg>
|
|
2682
|
+
8 tarefas em atraso
|
|
2683
|
+
</div>
|
|
2684
|
+
<div class="alert-critical-list">
|
|
2685
|
+
<div class="alert-critical-row">
|
|
2686
|
+
<span class="tag-dot p-urgent">URGENTE</span>
|
|
2687
|
+
<span style="font-weight:500">ENTRE PARA SELEÇÃO VIP (Camisa oficial)</span>
|
|
2688
|
+
<span class="src">VIPCAR · Tarefas e Acompanhamento</span>
|
|
2689
|
+
<span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
|
|
2690
|
+
</div>
|
|
2691
|
+
<div class="alert-critical-row" style="background:rgba(220,53,69,0.06)">
|
|
2692
|
+
<span class="tag-dot p-urgent">URGENTE</span>
|
|
2693
|
+
<span style="font-weight:500">CHAMANDO O HEXA!</span>
|
|
2694
|
+
<span class="src">VIPCAR · Tarefas e Acompanhamento</span>
|
|
2695
|
+
<span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
|
|
2696
|
+
</div>
|
|
2697
|
+
<div class="alert-critical-row">
|
|
2698
|
+
<span class="tag-dot p-urgent">URGENTE</span>
|
|
2699
|
+
<span style="font-weight:500">ASSOCIADO CAMISA 10!!</span>
|
|
2700
|
+
<span class="src">VIPCAR · Tarefas e Acompanhamento</span>
|
|
2701
|
+
<span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
|
|
2702
|
+
</div>
|
|
2703
|
+
<div class="alert-critical-row">
|
|
2704
|
+
<span class="tag-dot p-urgent">URGENTE</span>
|
|
2705
|
+
<span style="font-weight:500">Enviar proposta para TR PAULO</span>
|
|
2706
|
+
<span class="src">ZARK · Tarefas</span>
|
|
2707
|
+
<span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
|
|
2708
|
+
</div>
|
|
2709
|
+
</div>
|
|
2710
|
+
<div class="alert-critical-foot">+ 4 outras tarefas atrasadas</div>
|
|
2711
|
+
</div>
|
|
2712
|
+
|
|
2713
|
+
<div class="divider"></div>
|
|
2714
|
+
<div class="spec"><span class="l">Quando usar</span><span class="v">tarefas em atraso, faturas críticas, deadlines vencidos</span></div>
|
|
2715
|
+
<div class="spec"><span class="l">Quando NÃO usar</span><span class="v">avisos genéricos (use Banner amarelo) · sucesso (use Toast verde)</span></div>
|
|
2716
|
+
<div class="spec"><span class="l">Limite por tela</span><span class="v">1 alert critical visível por vez</span></div>
|
|
2717
|
+
</div>
|
|
2718
|
+
</div>
|
|
2719
|
+
</div>
|
|
2720
|
+
</section>
|
|
2721
|
+
|
|
2722
|
+
<!-- =================== 21 FUNNEL & PROGRESS =================== -->
|
|
2723
|
+
<section id="funnel" class="section">
|
|
2724
|
+
<div class="section-inner">
|
|
2725
|
+
<div class="section-header">
|
|
2726
|
+
<div>
|
|
2727
|
+
<div class="eyebrow">21 — App Patterns · CRM</div>
|
|
2728
|
+
<h2>Funnel & Progress</h2>
|
|
2729
|
+
</div>
|
|
2730
|
+
<p class="section-desc">Funnel horizontal segmentado (Pipeline de Vendas) usa as mesmas cores do status do estágio. Progress bar simples (KPI com meta) usa success ou ember. Mesma altura: 8px no funnel, 4px em stat-card.</p>
|
|
2731
|
+
</div>
|
|
2732
|
+
|
|
2733
|
+
<div class="grid-2">
|
|
2734
|
+
<div class="panel">
|
|
2735
|
+
<div class="panel-head"><div class="panel-title">Funnel — Pipeline de vendas</div></div>
|
|
2736
|
+
<div class="panel-body">
|
|
2737
|
+
<div class="sub-label">Funil</div>
|
|
2738
|
+
<div class="funnel">
|
|
2739
|
+
<span style="width:0%; background:#3b82f6"></span>
|
|
2740
|
+
<span style="width:36%; background:#7c3aed"></span>
|
|
2741
|
+
<span style="width:18%; background:var(--brand-500)"></span>
|
|
2742
|
+
<span style="width:0%; background:#06b6d4"></span>
|
|
2743
|
+
<span style="width:0%; background:var(--success-500)"></span>
|
|
2744
|
+
<span style="width:46%; background:var(--ink-200)"></span>
|
|
2745
|
+
</div>
|
|
2746
|
+
<div class="funnel-stages">
|
|
2747
|
+
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#3b82f6"></span>Novo</span><span class="funnel-stage-count">0</span></div>
|
|
2748
|
+
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#7c3aed"></span>Qualificando</span><span class="funnel-stage-count">4</span></div>
|
|
2749
|
+
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand-500)"></span>Reunião</span><span class="funnel-stage-count">1</span></div>
|
|
2750
|
+
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#06b6d4"></span>Proposta</span><span class="funnel-stage-count">0</span></div>
|
|
2751
|
+
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--success-500)"></span>Won</span><span class="funnel-stage-count">0</span></div>
|
|
2752
|
+
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--ink-300)"></span>Perdido</span><span class="funnel-stage-count">0</span></div>
|
|
2753
|
+
</div>
|
|
2754
|
+
</div>
|
|
2755
|
+
</div>
|
|
2756
|
+
|
|
2757
|
+
<div class="panel">
|
|
2758
|
+
<div class="panel-head"><div class="panel-title">Linear progress</div></div>
|
|
2759
|
+
<div class="panel-body">
|
|
2760
|
+
<div class="sub-label">Meta mensal</div>
|
|
2761
|
+
<div style="display:flex; align-items:center; gap:12px; margin-bottom:18px">
|
|
2762
|
+
<span style="flex:1; font-size:var(--fs-sm); color:var(--ink-600)">0/14 tarefas</span>
|
|
2763
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--brand-700); font-weight:600">0%</span>
|
|
2764
|
+
</div>
|
|
2765
|
+
<div class="stat-progress" style="height:6px"><span style="width:0%"></span></div>
|
|
2766
|
+
|
|
2767
|
+
<div style="height:24px"></div>
|
|
2768
|
+
|
|
2769
|
+
<div class="sub-label">Recebido vs previsto (Financeiro)</div>
|
|
2770
|
+
<div style="display:flex; align-items:center; gap:12px; margin-bottom:6px">
|
|
2771
|
+
<span style="flex:1; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-700); font-weight:500">R$ 3.897 / R$ 19.376</span>
|
|
2772
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--success-700); font-weight:600">20%</span>
|
|
2773
|
+
</div>
|
|
2774
|
+
<div class="stat-progress" style="height:6px"><span style="width:20%"></span></div>
|
|
2775
|
+
|
|
2776
|
+
<div class="divider"></div>
|
|
2777
|
+
<div class="spec"><span class="l">Cor padrão</span><span class="v">--success-500 (positivo)</span></div>
|
|
2778
|
+
<div class="spec"><span class="l">Cor alternativa</span><span class="v">--brand-500 (neutro/em andamento)</span></div>
|
|
2779
|
+
<div class="spec"><span class="l">Cor de alerta</span><span class="v">--danger-500 (estoura limite)</span></div>
|
|
2780
|
+
</div>
|
|
2781
|
+
</div>
|
|
2782
|
+
</div>
|
|
2783
|
+
</div>
|
|
2784
|
+
</section>
|
|
2785
|
+
|
|
2786
|
+
<!-- =================== 22 KANBAN =================== -->
|
|
2787
|
+
<section id="kanban" class="section">
|
|
2788
|
+
<div class="section-inner">
|
|
2789
|
+
<div class="section-header">
|
|
2790
|
+
<div>
|
|
2791
|
+
<div class="eyebrow">22 — App Patterns · CRM</div>
|
|
2792
|
+
<h2>Kanban Column</h2>
|
|
2793
|
+
</div>
|
|
2794
|
+
<p class="section-desc">Coluna minimalista — sem bg cinza pesado. Header em mono uppercase com dot colorido (mesma cor do status) + contador. Empty state usa o componente Empty State (seção 25). "+ Nova tarefa" sempre como primeiro affordance.</p>
|
|
2795
|
+
</div>
|
|
2796
|
+
|
|
2797
|
+
<div class="panel">
|
|
2798
|
+
<div class="panel-head"><div class="panel-title">Kanban — Tarefas e Acompanhamento</div><div class="panel-kicker">5 estados</div></div>
|
|
2799
|
+
<div class="panel-body">
|
|
2800
|
+
<div class="kanban">
|
|
2801
|
+
<div class="k-col">
|
|
2802
|
+
<div class="k-col-head">
|
|
2803
|
+
<span class="lh"><span class="dot" style="background:#9a6500"></span>A FAZER</span>
|
|
2804
|
+
<span class="count">14</span>
|
|
2805
|
+
</div>
|
|
2806
|
+
<button class="k-add"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 4v10M4 9h10"/></svg> Nova tarefa</button>
|
|
2807
|
+
<div class="lead-card">
|
|
2808
|
+
<div class="lead-card-head">
|
|
2809
|
+
<span class="lead-card-name">POST · Natal</span>
|
|
2810
|
+
</div>
|
|
2811
|
+
<div style="display:flex; gap:4px">
|
|
2812
|
+
<span class="tag-dot spsp-vipcar">VIPCAR</span>
|
|
2813
|
+
<span class="tag-dot p-high">ALTA</span>
|
|
2814
|
+
</div>
|
|
2815
|
+
</div>
|
|
2816
|
+
<div class="lead-card">
|
|
2817
|
+
<div class="lead-card-head">
|
|
2818
|
+
<span class="lead-card-name">Fazer fundo para a copa Story</span>
|
|
2819
|
+
</div>
|
|
2820
|
+
<div style="display:flex; gap:4px">
|
|
2821
|
+
<span class="tag-dot spsp-vipcar">VIPCAR</span>
|
|
2822
|
+
<span class="tag-dot p-med">MÉDIA</span>
|
|
2823
|
+
</div>
|
|
2824
|
+
</div>
|
|
2825
|
+
</div>
|
|
2826
|
+
|
|
2827
|
+
<div class="k-col">
|
|
2828
|
+
<div class="k-col-head">
|
|
2829
|
+
<span class="lh"><span class="dot" style="background:var(--brand-500)"></span>EM PROGRESSO</span>
|
|
2830
|
+
<span class="count">2</span>
|
|
2831
|
+
</div>
|
|
2832
|
+
<button class="k-add"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 4v10M4 9h10"/></svg> Nova tarefa</button>
|
|
2833
|
+
<div class="lead-card">
|
|
2834
|
+
<div class="lead-card-head">
|
|
2835
|
+
<span class="lead-card-name">Gerar sites Satélites</span>
|
|
2836
|
+
</div>
|
|
2837
|
+
<div style="display:flex; gap:4px">
|
|
2838
|
+
<span class="tag-dot spsp-vipcar">VIPCAR</span>
|
|
2839
|
+
<span class="tag-dot p-med">MÉDIA</span>
|
|
2840
|
+
</div>
|
|
2841
|
+
</div>
|
|
2842
|
+
</div>
|
|
2843
|
+
|
|
2844
|
+
<div class="k-col">
|
|
2845
|
+
<div class="k-col-head">
|
|
2846
|
+
<span class="lh"><span class="dot" style="background:var(--info-500)"></span>EM REVISÃO</span>
|
|
2847
|
+
<span class="count">0</span>
|
|
2848
|
+
</div>
|
|
2849
|
+
<button class="k-add"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 4v10M4 9h10"/></svg> Nova tarefa</button>
|
|
2850
|
+
<div class="empty-state" style="padding:20px 12px">
|
|
2851
|
+
<div class="ico"><svg width="20" height="20" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg></div>
|
|
2852
|
+
<div class="text">Arraste tarefas aqui</div>
|
|
2853
|
+
</div>
|
|
2854
|
+
</div>
|
|
2855
|
+
|
|
2856
|
+
<div class="k-col">
|
|
2857
|
+
<div class="k-col-head">
|
|
2858
|
+
<span class="lh"><span class="dot" style="background:var(--success-500)"></span>CONCLUÍDO</span>
|
|
2859
|
+
<span class="count">34</span>
|
|
2860
|
+
</div>
|
|
2861
|
+
<button class="k-add"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 4v10M4 9h10"/></svg> Nova tarefa</button>
|
|
2862
|
+
<div class="lead-card" style="opacity:0.7">
|
|
2863
|
+
<div class="lead-card-head">
|
|
2864
|
+
<span class="lead-card-name" style="text-decoration:line-through; color:var(--ink-400)">Melhorar SEO</span>
|
|
2865
|
+
</div>
|
|
2866
|
+
<div style="display:flex; gap:4px">
|
|
2867
|
+
<span class="tag-dot spsp-vipcar">VIPCAR</span>
|
|
2868
|
+
<span class="tag-dot s-done">CONCLUÍDO</span>
|
|
2869
|
+
</div>
|
|
2870
|
+
</div>
|
|
2871
|
+
</div>
|
|
2872
|
+
|
|
2873
|
+
<div class="k-col">
|
|
2874
|
+
<div class="k-col-head">
|
|
2875
|
+
<span class="lh"><span class="dot" style="background:var(--ink-300)"></span>CANCELADO</span>
|
|
2876
|
+
<span class="count">0</span>
|
|
2877
|
+
</div>
|
|
2878
|
+
<button class="k-add"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 4v10M4 9h10"/></svg> Nova tarefa</button>
|
|
2879
|
+
<div class="empty-state" style="padding:20px 12px">
|
|
2880
|
+
<div class="ico"><svg width="20" height="20" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg></div>
|
|
2881
|
+
<div class="text">Nenhuma cancelada</div>
|
|
2882
|
+
</div>
|
|
2883
|
+
</div>
|
|
2884
|
+
</div>
|
|
2885
|
+
</div>
|
|
2886
|
+
</div>
|
|
2887
|
+
</div>
|
|
2888
|
+
</section>
|
|
2889
|
+
|
|
2890
|
+
<!-- =================== 23 LEAD CARD =================== -->
|
|
2891
|
+
<section id="leadcard" class="section">
|
|
2892
|
+
<div class="section-inner">
|
|
2893
|
+
<div class="section-header">
|
|
2894
|
+
<div>
|
|
2895
|
+
<div class="eyebrow">23 — App Patterns · CRM</div>
|
|
2896
|
+
<h2>Lead Card (Pipeline)</h2>
|
|
2897
|
+
</div>
|
|
2898
|
+
<p class="section-desc">Card compacto para Pipeline de Vendas. Nome + flame icon (temperatura) + status tag. Ícones de canal (telefone, instagram, email). Footer com follow-up date em ember quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.is-paused</code> adiciona border-left amber para PARADO.</p>
|
|
2899
|
+
</div>
|
|
2900
|
+
|
|
2901
|
+
<div class="panel">
|
|
2902
|
+
<div class="panel-head"><div class="panel-title">Lead cards — variações</div></div>
|
|
2903
|
+
<div class="panel-body">
|
|
2904
|
+
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; max-width:840px">
|
|
2905
|
+
|
|
2906
|
+
<div class="lead-card is-paused">
|
|
2907
|
+
<div class="lead-card-head">
|
|
2908
|
+
<span class="lead-card-name">
|
|
2909
|
+
<svg class="flame" width="14" height="14" viewBox="0 0 18 18" fill="currentColor"><path d="M9 2c0 0 4 3 4 7a4 4 0 11-8 0c0-2 1-3 1-3 0 1 1 2 2 2 0-2 1-4 1-6z"/></svg>
|
|
2910
|
+
Tiffany Dias
|
|
2911
|
+
</span>
|
|
2912
|
+
<span class="tag-dot s-paused">PARADO</span>
|
|
2913
|
+
</div>
|
|
2914
|
+
<div class="lead-card-meta">
|
|
2915
|
+
<span class="icons">
|
|
2916
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4l3-1 2 4-2 1c0 3 3 6 6 6l1-2 4 2-1 3c-7 0-13-6-13-13z"/></svg>
|
|
2917
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="12" height="12" rx="3"/><circle cx="9" cy="9" r="2.5"/></svg>
|
|
2918
|
+
</span>
|
|
2919
|
+
<span style="font-family:var(--font-mono)"><svg width="10" height="10" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="display:inline-block;vertical-align:-1px;margin-right:2px"><circle cx="9" cy="9" r="6.5"/><path d="M9 5v4l2.5 1.5"/></svg> 5d</span>
|
|
2920
|
+
</div>
|
|
2921
|
+
<div class="lead-card-foot">
|
|
2922
|
+
<svg width="11" height="11" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9c2-3 5-4 6-4s4 1 6 4c-2 3-5 4-6 4s-4-1-6-4z"/></svg>
|
|
2923
|
+
Indicado por Karol (Irma Jordan)
|
|
2924
|
+
</div>
|
|
2925
|
+
</div>
|
|
2926
|
+
|
|
2927
|
+
<div class="lead-card is-paused">
|
|
2928
|
+
<div class="lead-card-head">
|
|
2929
|
+
<span class="lead-card-name">
|
|
2930
|
+
<svg class="flame" width="14" height="14" viewBox="0 0 18 18" fill="currentColor"><path d="M9 2c0 0 4 3 4 7a4 4 0 11-8 0c0-2 1-3 1-3 0 1 1 2 2 2 0-2 1-4 1-6z"/></svg>
|
|
2931
|
+
Paulo Turismo
|
|
2932
|
+
</span>
|
|
2933
|
+
<span class="tag-dot s-paused">PARADO</span>
|
|
2934
|
+
</div>
|
|
2935
|
+
<div class="lead-card-sub">TR PAULO</div>
|
|
2936
|
+
<div class="lead-card-meta">
|
|
2937
|
+
<span class="icons">
|
|
2938
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4l3-1 2 4-2 1c0 3 3 6 6 6l1-2 4 2-1 3c-7 0-13-6-13-13z"/></svg>
|
|
2939
|
+
</span>
|
|
2940
|
+
<span style="font-family:var(--font-mono)">5d</span>
|
|
2941
|
+
</div>
|
|
2942
|
+
<div class="lead-card-followup">
|
|
2943
|
+
<svg width="11" height="11" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="12" height="11" rx="1.5"/><path d="M3 7h12M6 2v3M12 2v3"/></svg>
|
|
2944
|
+
Follow-up: 27/04/2026
|
|
2945
|
+
</div>
|
|
2946
|
+
<div class="lead-card-foot">
|
|
2947
|
+
<svg width="11" height="11" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9c2-3 5-4 6-4s4 1 6 4c-2 3-5 4-6 4s-4-1-6-4z"/></svg>
|
|
2948
|
+
Indicado por Gustavo (Zark)
|
|
2949
|
+
</div>
|
|
2950
|
+
</div>
|
|
2951
|
+
|
|
2952
|
+
<div class="lead-card">
|
|
2953
|
+
<div class="lead-card-head">
|
|
2954
|
+
<span class="lead-card-name">Karoline Silva</span>
|
|
2955
|
+
<span class="tag-dot s-progress">EM ANDAMENTO</span>
|
|
2956
|
+
</div>
|
|
2957
|
+
<div class="lead-card-sub">Save Car</div>
|
|
2958
|
+
<div class="lead-card-meta">
|
|
2959
|
+
<span class="icons">
|
|
2960
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4l3-1 2 4-2 1c0 3 3 6 6 6l1-2 4 2-1 3c-7 0-13-6-13-13z"/></svg>
|
|
2961
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="12" height="12" rx="3"/><circle cx="9" cy="9" r="2.5"/></svg>
|
|
2962
|
+
</span>
|
|
2963
|
+
<span style="font-family:var(--font-mono)">2d</span>
|
|
2964
|
+
</div>
|
|
2965
|
+
</div>
|
|
2966
|
+
|
|
2967
|
+
</div>
|
|
2968
|
+
<div class="divider"></div>
|
|
2969
|
+
<div class="spec"><span class="l">Width mínima</span><span class="v">220px</span></div>
|
|
2970
|
+
<div class="spec"><span class="l">Padding</span><span class="v">12px</span></div>
|
|
2971
|
+
<div class="spec"><span class="l">Border-radius</span><span class="v">--r-md (6px)</span></div>
|
|
2972
|
+
<div class="spec"><span class="l">Border-left modifier</span><span class="v">3px solid + cor do estado (PARADO=warning, ATRASADO=danger)</span></div>
|
|
2973
|
+
</div>
|
|
2974
|
+
</div>
|
|
2975
|
+
</div>
|
|
2976
|
+
</section>
|
|
2977
|
+
|
|
2978
|
+
<!-- =================== 24 FILTER CHIPS =================== -->
|
|
2979
|
+
<section id="chips" class="section">
|
|
2980
|
+
<div class="section-inner">
|
|
2981
|
+
<div class="section-header">
|
|
2982
|
+
<div>
|
|
2983
|
+
<div class="eyebrow">24 — App Patterns · CRM</div>
|
|
2984
|
+
<h2>Filter Chips</h2>
|
|
2985
|
+
</div>
|
|
2986
|
+
<p class="section-desc">Substitui os 3 padrões de filtro no CRM (chips, dropdowns, toggle filters). Chip mono uppercase com contador opcional, raio --r-sm. Active state usa ember-50 + border ember-200. Use SEMPRE quando houver até 6 categorias; acima disso, dropdown.</p>
|
|
2987
|
+
</div>
|
|
2988
|
+
|
|
2989
|
+
<div class="grid-2">
|
|
2990
|
+
<div class="panel">
|
|
2991
|
+
<div class="panel-head"><div class="panel-title">Chip group — categoria</div></div>
|
|
2992
|
+
<div class="panel-body">
|
|
2993
|
+
<div class="sub-label">Vault de acessos</div>
|
|
2994
|
+
<div class="chips" id="chipsAcessos">
|
|
2995
|
+
<button class="chip active" data-v="todas">TODAS <span class="count">(7)</span></button>
|
|
2996
|
+
<button class="chip" data-v="hosp">HOSPEDAGEM <span class="count">(3)</span></button>
|
|
2997
|
+
<button class="chip" data-v="email">EMAIL <span class="count">(1)</span></button>
|
|
2998
|
+
<button class="chip" data-v="social">SOCIAL MEDIA <span class="count">(1)</span></button>
|
|
2999
|
+
<button class="chip" data-v="outros">OUTROS <span class="count">(2)</span></button>
|
|
3000
|
+
</div>
|
|
3001
|
+
<div style="height:18px"></div>
|
|
3002
|
+
<div class="sub-label">Prioridade (filtro de tarefa)</div>
|
|
3003
|
+
<div class="chips" id="chipsPrio">
|
|
3004
|
+
<button class="chip active">TODAS</button>
|
|
3005
|
+
<button class="chip">BAIXA</button>
|
|
3006
|
+
<button class="chip">MÉDIA</button>
|
|
3007
|
+
<button class="chip">ALTA</button>
|
|
3008
|
+
<button class="chip">URGENTE</button>
|
|
3009
|
+
<button class="chip">ATRASADAS</button>
|
|
3010
|
+
</div>
|
|
3011
|
+
</div>
|
|
3012
|
+
</div>
|
|
3013
|
+
|
|
3014
|
+
<div class="panel">
|
|
3015
|
+
<div class="panel-head"><div class="panel-title">Chip com ícone</div></div>
|
|
3016
|
+
<div class="panel-body">
|
|
3017
|
+
<div class="sub-label">Filtros visuais</div>
|
|
3018
|
+
<div class="chips">
|
|
3019
|
+
<button class="chip active">
|
|
3020
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="9" r="6.5"/></svg>
|
|
3021
|
+
AO VIVO
|
|
3022
|
+
</button>
|
|
3023
|
+
<button class="chip">
|
|
3024
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 5h12M3 9h12M3 13h8"/></svg>
|
|
3025
|
+
LISTA
|
|
3026
|
+
</button>
|
|
3027
|
+
<button class="chip">
|
|
3028
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="5" height="12"/><rect x="10" y="3" width="5" height="8"/></svg>
|
|
3029
|
+
QUADRO
|
|
3030
|
+
</button>
|
|
3031
|
+
</div>
|
|
3032
|
+
<div class="divider"></div>
|
|
3033
|
+
<div class="spec"><span class="l">Altura</span><span class="v">28px</span></div>
|
|
3034
|
+
<div class="spec"><span class="l">Padding</span><span class="v">0 12px</span></div>
|
|
3035
|
+
<div class="spec"><span class="l">Border-radius</span><span class="v">--r-sm (4px)</span></div>
|
|
3036
|
+
<div class="spec"><span class="l">Active</span><span class="v">bg ember-50 · color brand-700 · border ember-200</span></div>
|
|
3037
|
+
<div class="spec"><span class="l">Limite recomendado</span><span class="v">≤ 6 chips · acima disso use dropdown</span></div>
|
|
3038
|
+
</div>
|
|
3039
|
+
</div>
|
|
3040
|
+
</div>
|
|
3041
|
+
</div>
|
|
3042
|
+
</section>
|
|
3043
|
+
|
|
3044
|
+
<!-- =================== 25 EMPTY STATE =================== -->
|
|
3045
|
+
<section id="empty" class="section">
|
|
3046
|
+
<div class="section-inner">
|
|
3047
|
+
<div class="section-header">
|
|
3048
|
+
<div>
|
|
3049
|
+
<div class="eyebrow">25 — App Patterns · CRM</div>
|
|
3050
|
+
<h2>Empty State</h2>
|
|
3051
|
+
</div>
|
|
3052
|
+
<p class="section-desc">Container dashed + sparkle ícone + texto muted. Usado em colunas de Kanban vazias, drop zones do Pipeline, listas sem dados. Sempre passivo (não convida ação direta) — pra CTA explícito, use o k-add com "+ Novo X".</p>
|
|
3053
|
+
</div>
|
|
3054
|
+
|
|
3055
|
+
<div class="grid-3">
|
|
3056
|
+
<div class="panel">
|
|
3057
|
+
<div class="panel-head"><div class="panel-title">Drop zone</div></div>
|
|
3058
|
+
<div class="panel-body">
|
|
3059
|
+
<div class="empty-state" style="min-height:140px; justify-content:center">
|
|
3060
|
+
<div class="ico"><svg width="24" height="24" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg></div>
|
|
3061
|
+
<div class="text">Arraste leads aqui</div>
|
|
3062
|
+
</div>
|
|
3063
|
+
</div>
|
|
3064
|
+
</div>
|
|
3065
|
+
|
|
3066
|
+
<div class="panel">
|
|
3067
|
+
<div class="panel-head"><div class="panel-title">Lista vazia</div></div>
|
|
3068
|
+
<div class="panel-body">
|
|
3069
|
+
<div class="empty-state" style="min-height:140px; justify-content:center">
|
|
3070
|
+
<div class="ico"><svg width="24" height="24" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="12" height="12" rx="1.5"/><path d="M3 7h12M3 11h12"/></svg></div>
|
|
3071
|
+
<div class="text">Nenhuma tarefa criada</div>
|
|
3072
|
+
<button class="btn btn-soft btn-sm" style="margin-top:6px">+ Nova tarefa</button>
|
|
3073
|
+
</div>
|
|
3074
|
+
</div>
|
|
3075
|
+
</div>
|
|
3076
|
+
|
|
3077
|
+
<div class="panel">
|
|
3078
|
+
<div class="panel-head"><div class="panel-title">Sem resultados</div></div>
|
|
3079
|
+
<div class="panel-body">
|
|
3080
|
+
<div class="empty-state" style="min-height:140px; justify-content:center">
|
|
3081
|
+
<div class="ico"><svg width="24" height="24" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="M12 12l3 3"/></svg></div>
|
|
3082
|
+
<div class="text">Nada encontrado para "vipseg cobranças"</div>
|
|
3083
|
+
</div>
|
|
3084
|
+
</div>
|
|
3085
|
+
</div>
|
|
3086
|
+
</div>
|
|
3087
|
+
</div>
|
|
3088
|
+
</section>
|
|
3089
|
+
|
|
3090
|
+
<!-- =================== 26 ICONS =================== -->
|
|
3091
|
+
<section id="icons" class="section">
|
|
3092
|
+
<div class="section-inner">
|
|
3093
|
+
<div class="section-header">
|
|
3094
|
+
<div>
|
|
3095
|
+
<div class="eyebrow">26 — App Patterns · CRM</div>
|
|
3096
|
+
<h2>Biblioteca de Ícones</h2>
|
|
3097
|
+
</div>
|
|
3098
|
+
<p class="section-desc">Set oficial — outline, stroke 1.5px, viewBox 18×18, sempre em <code style="font-family:var(--font-mono);color:var(--brand-700)">currentColor</code>. Nunca trocar por filled, nunca misturar com Lucide ou Heroicons num mesmo contexto. Quando faltar ícone, criar seguindo as mesmas regras.</p>
|
|
3099
|
+
</div>
|
|
3100
|
+
|
|
3101
|
+
<div class="panel">
|
|
3102
|
+
<div class="panel-head">
|
|
3103
|
+
<div class="panel-title">Set completo</div>
|
|
3104
|
+
<div class="panel-kicker"><span id="iconCount">0</span> ícones</div>
|
|
3105
|
+
</div>
|
|
3106
|
+
<div class="panel-body">
|
|
3107
|
+
<div class="row" style="margin-bottom:18px">
|
|
3108
|
+
<div class="sub-label" style="width:100%; margin-bottom:0">Tamanhos recomendados</div>
|
|
3109
|
+
</div>
|
|
3110
|
+
<div class="row" style="margin-bottom:24px; align-items:center; gap:24px">
|
|
3111
|
+
<div style="display:flex; align-items:center; gap:8px">
|
|
3112
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ink-700)"><circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/></svg>
|
|
3113
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-500)">14px · denso</span>
|
|
3114
|
+
</div>
|
|
3115
|
+
<div style="display:flex; align-items:center; gap:8px">
|
|
3116
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ink-700)"><circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/></svg>
|
|
3117
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-500)">16px · default</span>
|
|
3118
|
+
</div>
|
|
3119
|
+
<div style="display:flex; align-items:center; gap:8px">
|
|
3120
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ink-700)"><circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/></svg>
|
|
3121
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-500)">18px · botão</span>
|
|
3122
|
+
</div>
|
|
3123
|
+
<div style="display:flex; align-items:center; gap:8px">
|
|
3124
|
+
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ink-700)"><circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/></svg>
|
|
3125
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-500)">20px · header</span>
|
|
3126
|
+
</div>
|
|
3127
|
+
<div style="display:flex; align-items:center; gap:8px">
|
|
3128
|
+
<svg width="24" height="24" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ink-700)"><circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/></svg>
|
|
3129
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-500)">24px · display</span>
|
|
3130
|
+
</div>
|
|
3131
|
+
</div>
|
|
3132
|
+
|
|
3133
|
+
<div class="divider"></div>
|
|
3134
|
+
|
|
3135
|
+
<div class="icon-grid" id="iconGrid"></div>
|
|
3136
|
+
|
|
3137
|
+
<div class="divider"></div>
|
|
3138
|
+
<div class="spec"><span class="l">Stroke</span><span class="v">1.5px (fixo)</span></div>
|
|
3139
|
+
<div class="spec"><span class="l">ViewBox</span><span class="v">0 0 18 18</span></div>
|
|
3140
|
+
<div class="spec"><span class="l">Cor</span><span class="v">currentColor (herda do parent)</span></div>
|
|
3141
|
+
<div class="spec"><span class="l">Linecap & linejoin</span><span class="v">round</span></div>
|
|
3142
|
+
<div class="spec"><span class="l">Source</span><span class="v">design-system/icons.jsx</span></div>
|
|
3143
|
+
</div>
|
|
3144
|
+
</div>
|
|
3145
|
+
|
|
3146
|
+
<div style="height:24px"></div>
|
|
3147
|
+
|
|
3148
|
+
<div class="panel">
|
|
3149
|
+
<div class="panel-head"><div class="panel-title">Aplicação em contexto</div></div>
|
|
3150
|
+
<div class="panel-body">
|
|
3151
|
+
<div class="sub-label">Em botões</div>
|
|
3152
|
+
<div class="row" style="margin-bottom:24px">
|
|
3153
|
+
<button class="btn btn-primary btn-md">
|
|
3154
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v12M3 9h12"/></svg>
|
|
3155
|
+
Nova Tarefa
|
|
3156
|
+
</button>
|
|
3157
|
+
<button class="btn btn-secondary btn-md">
|
|
3158
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v9M5 9l4 4 4-4M3 15h12"/></svg>
|
|
3159
|
+
Exportar
|
|
3160
|
+
</button>
|
|
3161
|
+
<button class="btn btn-ghost btn-md">
|
|
3162
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h12l-4.5 6V15l-3-2v-3z"/></svg>
|
|
3163
|
+
Filtrar
|
|
3164
|
+
</button>
|
|
3165
|
+
</div>
|
|
3166
|
+
<div class="sub-label">Em sidebar (16px)</div>
|
|
3167
|
+
<div class="row" style="margin-bottom:24px; max-width:240px; flex-direction:column; align-items:stretch">
|
|
3168
|
+
<div class="ds-side-item active">
|
|
3169
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l6-5 6 5v6a1 1 0 0 1-1 1h-3v-4H7v4H4a1 1 0 0 1-1-1V9z"/></svg></span>
|
|
3170
|
+
<span style="flex:1">Dashboard</span>
|
|
3171
|
+
</div>
|
|
3172
|
+
<div class="ds-side-item">
|
|
3173
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9h3l2-5 4 10 2-5h3"/></svg></span>
|
|
3174
|
+
<span style="flex:1">Activity</span>
|
|
3175
|
+
</div>
|
|
3176
|
+
<div class="ds-side-item">
|
|
3177
|
+
<span class="ico"><svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="2.5"/><path d="M9 1.5v2M9 14.5v2M16.5 9h-2M3.5 9h-2M14.3 3.7l-1.4 1.4M5.1 12.9l-1.4 1.4M14.3 14.3l-1.4-1.4M5.1 5.1L3.7 3.7"/></svg></span>
|
|
3178
|
+
<span style="flex:1">Settings</span>
|
|
3179
|
+
</div>
|
|
3180
|
+
</div>
|
|
3181
|
+
|
|
3182
|
+
<div class="sub-label">Coloridos por contexto (cor herda do parent)</div>
|
|
3183
|
+
<div class="row">
|
|
3184
|
+
<div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--success-50); border-radius:var(--r-md); color:var(--success-700)">
|
|
3185
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l4 4 8-9"/></svg>
|
|
3186
|
+
<span style="font-size:var(--fs-sm); font-weight:500">Concluído</span>
|
|
3187
|
+
</div>
|
|
3188
|
+
<div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--danger-50); border-radius:var(--r-md); color:var(--danger-700)">
|
|
3189
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l7 13H2L9 2z"/><path d="M9 7v3"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/></svg>
|
|
3190
|
+
<span style="font-size:var(--fs-sm); font-weight:500">Atrasada</span>
|
|
3191
|
+
</div>
|
|
3192
|
+
<div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--brand-50); border-radius:var(--r-md); color:var(--brand-700)">
|
|
3193
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5L9 2z"/></svg>
|
|
3194
|
+
<span style="font-size:var(--fs-sm); font-weight:500">Highlight</span>
|
|
3195
|
+
</div>
|
|
3196
|
+
</div>
|
|
3197
|
+
</div>
|
|
3198
|
+
</div>
|
|
3199
|
+
</div>
|
|
3200
|
+
</section>
|
|
3201
|
+
|
|
3202
|
+
<!-- =================== 27 TABLE ACTIONS =================== -->
|
|
3203
|
+
<section id="tactions" class="section">
|
|
3204
|
+
<div class="section-inner">
|
|
3205
|
+
<div class="section-header">
|
|
3206
|
+
<div>
|
|
3207
|
+
<div class="eyebrow">27 — App Patterns · CRM</div>
|
|
3208
|
+
<h2>Table Row Actions</h2>
|
|
3209
|
+
</div>
|
|
3210
|
+
<p class="section-desc">Substitui os ícones soltos coloridos (check verde / lápis cinza / lixeira vermelha) por botões com border + hover state. Mais clicável, alinha com o resto do sistema e dá feedback visual real.</p>
|
|
3211
|
+
</div>
|
|
3212
|
+
|
|
3213
|
+
<div class="panel">
|
|
3214
|
+
<div class="panel-head"><div class="panel-title">Linha de ação em tabela</div></div>
|
|
3215
|
+
<div class="panel-body flush">
|
|
3216
|
+
<div style="display:grid; grid-template-columns: 1fr 100px 80px 100px 110px 90px 90px; padding:10px 18px; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--ink-300); border-bottom:1px solid var(--line-100); background:var(--paper)">
|
|
3217
|
+
<span>Descrição</span><span>Categoria</span><span>Tipo</span><span>Valor</span><span>Vencimento</span><span>Status</span><span>Ações</span>
|
|
3218
|
+
</div>
|
|
3219
|
+
<div style="display:grid; grid-template-columns: 1fr 100px 80px 100px 110px 90px 90px; padding:14px 18px; align-items:center; border-bottom:1px solid var(--line-100); font-size:var(--fs-sm)">
|
|
3220
|
+
<span style="color:var(--ink-700)">Compra no débito · CAPPTA·PANIFICADORA D</span>
|
|
3221
|
+
<span style="display:inline-flex; align-items:center; gap:6px; color:var(--ink-600)"><span style="width:6px; height:6px; border-radius:50%; background:#7c3aed"></span> Alimentação</span>
|
|
3222
|
+
<span><span class="tag-dot p-low">VARIÁVEL</span></span>
|
|
3223
|
+
<span style="font-family:var(--font-mono); font-weight:600; color:var(--ink-700)">R$ 10</span>
|
|
3224
|
+
<span style="font-family:var(--font-mono); color:var(--ink-500); font-size:var(--fs-xs)">30/04/2026</span>
|
|
3225
|
+
<span><span class="tag-dot p-high">A PAGAR</span></span>
|
|
3226
|
+
<span class="t-actions">
|
|
3227
|
+
<button class="t-act t-confirm" title="Confirmar pagamento"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 9l4 4 6-8"/></svg></button>
|
|
3228
|
+
<button class="t-act t-edit" title="Editar"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3l3 3-9 9H3v-3l9-9z"/></svg></button>
|
|
3229
|
+
<button class="t-act t-delete" title="Excluir"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 5h12M7 5V3h4v2M5 5v10a1 1 0 001 1h6a1 1 0 001-1V5"/></svg></button>
|
|
3230
|
+
</span>
|
|
3231
|
+
</div>
|
|
3232
|
+
<div style="display:grid; grid-template-columns: 1fr 100px 80px 100px 110px 90px 90px; padding:14px 18px; align-items:center; border-bottom:1px solid var(--line-100); font-size:var(--fs-sm)">
|
|
3233
|
+
<span style="color:var(--ink-700)">Transferência Pix · RECEITA FEDERAL</span>
|
|
3234
|
+
<span style="display:inline-flex; align-items:center; gap:6px; color:var(--ink-600)"><span style="width:6px; height:6px; border-radius:50%; background:#dc2626"></span> Impostos</span>
|
|
3235
|
+
<span><span class="tag-dot p-low">VARIÁVEL</span></span>
|
|
3236
|
+
<span style="font-family:var(--font-mono); font-weight:600; color:var(--ink-700)">R$ 71</span>
|
|
3237
|
+
<span style="font-family:var(--font-mono); color:var(--ink-500); font-size:var(--fs-xs)">30/04/2026</span>
|
|
3238
|
+
<span><span class="tag-dot s-done">PAGO</span></span>
|
|
3239
|
+
<span class="t-actions">
|
|
3240
|
+
<button class="t-act t-confirm"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 9l4 4 6-8"/></svg></button>
|
|
3241
|
+
<button class="t-act t-edit"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3l3 3-9 9H3v-3l9-9z"/></svg></button>
|
|
3242
|
+
<button class="t-act t-delete"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 5h12M7 5V3h4v2M5 5v10a1 1 0 001 1h6a1 1 0 001-1V5"/></svg></button>
|
|
3243
|
+
</span>
|
|
3244
|
+
</div>
|
|
3245
|
+
<div style="padding:24px">
|
|
3246
|
+
<div class="spec"><span class="l">Botão de ação</span><span class="v">22px square · border line-200 · hover bg + border colorida</span></div>
|
|
3247
|
+
<div class="spec"><span class="l">Confirmar (check)</span><span class="v">success-700 · hover bg success-50</span></div>
|
|
3248
|
+
<div class="spec"><span class="l">Editar (lápis)</span><span class="v">ink-500 · hover bg paper</span></div>
|
|
3249
|
+
<div class="spec"><span class="l">Excluir (lixeira)</span><span class="v">danger-700 · hover bg danger-50 · sempre exige confirmação modal</span></div>
|
|
3250
|
+
<div class="spec"><span class="l">Categoria</span><span class="v">dot 6px + label · cor própria por categoria</span></div>
|
|
3251
|
+
</div>
|
|
3252
|
+
</div>
|
|
3253
|
+
</div>
|
|
3254
|
+
|
|
3255
|
+
<div style="height:80px"></div>
|
|
3256
|
+
|
|
3257
|
+
<div style="text-align:center; padding:48px 0; border-top:1px solid var(--line-200)">
|
|
3258
|
+
<img src="assets/logo-zark-laranja.png" alt="ZARK" style="height:48px; display:inline-block"/>
|
|
3259
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-300); letter-spacing:var(--ls-wider); text-transform:uppercase; margin-top:16px">Design System · Sistemas v3 · 2026 · App Patterns extraídos do CRM</div>
|
|
3260
|
+
</div>
|
|
3261
|
+
</div>
|
|
3262
|
+
</section>
|
|
3263
|
+
|
|
3264
|
+
</main>
|
|
3265
|
+
</div>
|
|
3266
|
+
</div>
|
|
3267
|
+
|
|
3268
|
+
<script>
|
|
3269
|
+
/* =====================================================
|
|
3270
|
+
Theme toggle
|
|
3271
|
+
===================================================== */
|
|
3272
|
+
function applyTheme(mode) {
|
|
3273
|
+
document.documentElement.dataset.theme = mode;
|
|
3274
|
+
localStorage.setItem('zark-theme', mode);
|
|
3275
|
+
const label = document.getElementById('themeLabel');
|
|
3276
|
+
const icon = document.getElementById('themeIcon');
|
|
3277
|
+
if (label) label.textContent = mode === 'dark' ? 'Dark' : 'Light';
|
|
3278
|
+
if (icon) {
|
|
3279
|
+
icon.innerHTML = mode === 'dark'
|
|
3280
|
+
? '<path d="M14 10a5.5 5.5 0 01-7-7 6 6 0 107 7z"/>'
|
|
3281
|
+
: '<circle cx="9" cy="9" r="3.5"/><path d="M9 1.5v2M9 14.5v2M16.5 9h-2M3.5 9h-2M14.3 3.7l-1.4 1.4M5.1 12.9l-1.4 1.4M14.3 14.3l-1.4-1.4M5.1 5.1L3.7 3.7"/>';
|
|
3282
|
+
}
|
|
3283
|
+
}
|
|
3284
|
+
function toggleTheme() {
|
|
3285
|
+
const cur = document.documentElement.dataset.theme || 'light';
|
|
3286
|
+
applyTheme(cur === 'light' ? 'dark' : 'light');
|
|
3287
|
+
}
|
|
3288
|
+
(function initTheme(){
|
|
3289
|
+
const saved = localStorage.getItem('zark-theme');
|
|
3290
|
+
if (saved) applyTheme(saved);
|
|
3291
|
+
else applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
3292
|
+
})();
|
|
3293
|
+
|
|
3294
|
+
/* =====================================================
|
|
3295
|
+
Sidebar nav active state on scroll
|
|
3296
|
+
===================================================== */
|
|
3297
|
+
const links = document.querySelectorAll('.sidebar-link[href^="#"]');
|
|
3298
|
+
const sections = document.querySelectorAll('main .section');
|
|
3299
|
+
function updateActive() {
|
|
3300
|
+
let cur = sections[0]?.id;
|
|
3301
|
+
const top = window.scrollY + 120;
|
|
3302
|
+
sections.forEach(s => { if (s.offsetTop <= top) cur = s.id; });
|
|
3303
|
+
links.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + cur));
|
|
3304
|
+
}
|
|
3305
|
+
window.addEventListener('scroll', updateActive, { passive: true });
|
|
3306
|
+
links.forEach(l => l.addEventListener('click', e => {
|
|
3307
|
+
e.preventDefault();
|
|
3308
|
+
const id = l.getAttribute('href').slice(1);
|
|
3309
|
+
const el = document.getElementById(id);
|
|
3310
|
+
if (el) window.scrollTo({ top: el.offsetTop - 16, behavior: 'smooth' });
|
|
3311
|
+
}));
|
|
3312
|
+
|
|
3313
|
+
/* =====================================================
|
|
3314
|
+
Render dynamic foundation grids
|
|
3315
|
+
===================================================== */
|
|
3316
|
+
|
|
3317
|
+
/* --- Color swatches --- */
|
|
3318
|
+
const ember = [
|
|
3319
|
+
['ember-50', '#fff3e9'], ['ember-100', '#ffe1c8'], ['ember-200', '#ffc28e'],
|
|
3320
|
+
['ember-300', '#ffa056'], ['ember-400', '#ff8a3a'], ['brand-500', '#f56f10'],
|
|
3321
|
+
['brand-600', '#d45e0d'], ['brand-700', '#ad4a09'], ['ember-800', '#843706'],
|
|
3322
|
+
['ember-900', '#5e2704'],
|
|
3323
|
+
];
|
|
3324
|
+
const surface = [
|
|
3325
|
+
['paper', '#fafaf8'], ['canvas', '#f5f4f1'], ['surface', '#ffffff'],
|
|
3326
|
+
['line-100', '#f0eeea'], ['line-200', '#e8e6e1'], ['line-300', '#d8d5cf'],
|
|
3327
|
+
['dark-void', '#151419'], ['glucon-grey', '#1b1a1e'],
|
|
3328
|
+
];
|
|
3329
|
+
const ink = [
|
|
3330
|
+
['ink-50','#f4f3f0'], ['ink-100','#e8e6e1'], ['ink-200','#c8c5bf'],
|
|
3331
|
+
['ink-300','#a09c95'], ['ink-400','#6f6b64'], ['ink-500','#4a4741'],
|
|
3332
|
+
['ink-600','#2e2c28'], ['ink-700','#1a1916'], ['ink-800','#111110'],
|
|
3333
|
+
['ink-900','#0a0a09'],
|
|
3334
|
+
];
|
|
3335
|
+
const semantic = [
|
|
3336
|
+
{ name: 'success', tones: [['success-50','#ecfdf3'],['success-500','#10a960'],['success-700','#067a44']] },
|
|
3337
|
+
{ name: 'warning', tones: [['warning-50','#fff8e6'],['warning-500','#d99000'],['warning-700','#9a6500']] },
|
|
3338
|
+
{ name: 'danger', tones: [['danger-50','#fef1f1'],['danger-500','#dc3545'],['danger-700','#a52833']] },
|
|
3339
|
+
{ name: 'info', tones: [['info-50','#eef5ff'],['info-500','#2f7adc'],['info-700','#1f5ba8']] },
|
|
3340
|
+
];
|
|
3341
|
+
function swatchHTML(name, hex) {
|
|
3342
|
+
return `<div class="swatch">
|
|
3343
|
+
<div class="swatch-color" style="background:var(--${name}, ${hex})"></div>
|
|
3344
|
+
<div class="swatch-meta">
|
|
3345
|
+
<div class="swatch-name">--${name}</div>
|
|
3346
|
+
<div class="swatch-hex">${hex}</div>
|
|
3347
|
+
</div>
|
|
3348
|
+
</div>`;
|
|
3349
|
+
}
|
|
3350
|
+
document.getElementById('emberGrid').innerHTML = ember.map(([n,h]) => swatchHTML(n,h)).join('');
|
|
3351
|
+
document.getElementById('surfaceGrid').innerHTML = surface.map(([n,h]) => swatchHTML(n,h)).join('');
|
|
3352
|
+
document.getElementById('inkGrid').innerHTML = ink.map(([n,h]) => swatchHTML(n,h)).join('');
|
|
3353
|
+
document.getElementById('semanticGrid').innerHTML = semantic.map(g => `
|
|
3354
|
+
<div class="panel" style="box-shadow:none">
|
|
3355
|
+
<div class="panel-head" style="background:var(--surface)"><div class="panel-title">${g.name}</div></div>
|
|
3356
|
+
<div class="panel-body" style="padding:14px">
|
|
3357
|
+
${g.tones.map(([n,h]) => `
|
|
3358
|
+
<div style="display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line-100)">
|
|
3359
|
+
<span style="width:24px; height:24px; border-radius:var(--r-sm); background:var(--${n}); border:1px solid var(--line-200)"></span>
|
|
3360
|
+
<div style="flex:1">
|
|
3361
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-700)">--${n}</div>
|
|
3362
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-400)">${h}</div>
|
|
3363
|
+
</div>
|
|
3364
|
+
</div>
|
|
3365
|
+
`).join('')}
|
|
3366
|
+
</div>
|
|
3367
|
+
</div>
|
|
3368
|
+
`).join('');
|
|
3369
|
+
|
|
3370
|
+
/* --- Type scale --- */
|
|
3371
|
+
const scale = [
|
|
3372
|
+
['fs-2xs', 10], ['fs-xs', 11], ['fs-sm', 12], ['fs-md', 13], ['fs-base', 14],
|
|
3373
|
+
['fs-lg', 16], ['fs-xl', 18], ['fs-2xl', 22], ['fs-3xl', 28], ['fs-4xl', 36],
|
|
3374
|
+
['fs-5xl', 48], ['fs-6xl', 64], ['fs-display', 88],
|
|
3375
|
+
];
|
|
3376
|
+
document.getElementById('typeScale').innerHTML = scale.map(([n, px]) => `
|
|
3377
|
+
<div class="type-row">
|
|
3378
|
+
<span class="type-token">--${n}</span>
|
|
3379
|
+
<span class="type-px">${px}px</span>
|
|
3380
|
+
<span class="type-sample" style="font-size:${px}px; ${px >= 28 ? 'font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em' : ''}">${px >= 28 ? 'Pipeline de Vendas' : 'The quick brown fox'}</span>
|
|
3381
|
+
</div>
|
|
3382
|
+
`).join('');
|
|
3383
|
+
|
|
3384
|
+
/* --- Spacing scale --- */
|
|
3385
|
+
const spacing = [
|
|
3386
|
+
['sp-0', 0], ['sp-1', 2], ['sp-2', 4], ['sp-3', 6], ['sp-4', 8],
|
|
3387
|
+
['sp-5', 10], ['sp-6', 12], ['sp-7', 14], ['sp-8', 16], ['sp-10', 20],
|
|
3388
|
+
['sp-12', 24], ['sp-14', 28], ['sp-16', 32], ['sp-20', 40], ['sp-24', 48],
|
|
3389
|
+
['sp-32', 64], ['sp-40', 80], ['sp-48', 96],
|
|
3390
|
+
];
|
|
3391
|
+
document.getElementById('spacingScale').innerHTML = spacing.map(([n, px]) => `
|
|
3392
|
+
<div class="sp-row">
|
|
3393
|
+
<span class="sp-token">--${n}</span>
|
|
3394
|
+
<span class="sp-px">${px}px</span>
|
|
3395
|
+
<div class="sp-bar" style="width:${px}px; min-width:${px === 0 ? '2px' : px + 'px'}; ${px === 0 ? 'background:var(--line-200); height:2px' : ''}"></div>
|
|
3396
|
+
</div>
|
|
3397
|
+
`).join('');
|
|
3398
|
+
|
|
3399
|
+
/* --- Radius grid --- */
|
|
3400
|
+
const radii = [
|
|
3401
|
+
['r-xs', 3], ['r-sm', 4], ['r-md', 6], ['r-lg', 8],
|
|
3402
|
+
['r-xl', 12], ['r-2xl', 16], ['r-3xl', 20],
|
|
3403
|
+
];
|
|
3404
|
+
document.getElementById('radiusGrid').innerHTML = radii.map(([n, px]) => `
|
|
3405
|
+
<div>
|
|
3406
|
+
<div class="radius-demo" style="border-radius: var(--${n})">${px}px</div>
|
|
3407
|
+
<div style="display:flex; justify-content:space-between; padding:8px 4px">
|
|
3408
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-700)">--${n}</span>
|
|
3409
|
+
</div>
|
|
3410
|
+
</div>
|
|
3411
|
+
`).join('');
|
|
3412
|
+
|
|
3413
|
+
/* --- Shadow grid --- */
|
|
3414
|
+
const shadows = [
|
|
3415
|
+
['shadow-xs', 'hairline · 0 1px 0 rgba(20,17,12,.04)'],
|
|
3416
|
+
['shadow-sm', 'card neutro · 0 1px 2px + 1px outline'],
|
|
3417
|
+
['shadow-md', 'card hover · 0 4px 12px'],
|
|
3418
|
+
['shadow-lg', 'popover · 0 12px 32px'],
|
|
3419
|
+
['shadow-xl', 'sheet · 0 24px 64px'],
|
|
3420
|
+
['shadow-modal', 'modal full · 0 32px 96px'],
|
|
3421
|
+
];
|
|
3422
|
+
document.getElementById('shadowGrid').innerHTML = shadows.map(([n, spec]) => `
|
|
3423
|
+
<div class="shadow-demo" style="box-shadow: var(--${n})">
|
|
3424
|
+
<div class="shadow-demo-name">--${n}</div>
|
|
3425
|
+
<div class="shadow-demo-spec">${spec}</div>
|
|
3426
|
+
</div>
|
|
3427
|
+
`).join('');
|
|
3428
|
+
|
|
3429
|
+
/* --- Table rows --- */
|
|
3430
|
+
const rows = [
|
|
3431
|
+
['/SCRAPE','https://www.zark.dev/careers','Completed','1','Mai 05, 26 09:57'],
|
|
3432
|
+
['/SCRAPE','https://www.zark.dev/playground/extract','Completed','2','Mai 05, 26 09:57'],
|
|
3433
|
+
['/SCRAPE','https://www.zark.dev/extract','Failed','0','Mai 05, 26 09:55'],
|
|
3434
|
+
['/SCRAPE','https://www.zark.dev/templates','Completed','1','Mai 05, 26 09:54'],
|
|
3435
|
+
['/SEARCH','llm-ready scraper for SaaS','Pending','—','Mai 05, 26 09:50'],
|
|
3436
|
+
];
|
|
3437
|
+
const toneFor = s => s === 'Completed' ? 'success' : s === 'Failed' ? 'danger' : 'warning';
|
|
3438
|
+
document.getElementById('tableRows').innerHTML = rows.map(r => `
|
|
3439
|
+
<div class="table-row">
|
|
3440
|
+
<span class="tag tag-mono tag-square tag-xs">${r[0]}</span>
|
|
3441
|
+
<span class="url">${r[1]}</span>
|
|
3442
|
+
<span><span class="tag tag-${toneFor(r[2])} tag-xs">${r[2]}</span></span>
|
|
3443
|
+
<span class="num">${r[3]}</span>
|
|
3444
|
+
<span class="date">${r[4]}</span>
|
|
3445
|
+
<svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300); cursor:pointer"><path d="M9 3v8M5 7l4 4 4-4M3 14h12"/></svg>
|
|
3446
|
+
</div>
|
|
3447
|
+
`).join('');
|
|
3448
|
+
|
|
3449
|
+
/* --- Segmented JS --- */
|
|
3450
|
+
document.querySelectorAll('.segmented').forEach(seg => {
|
|
3451
|
+
seg.querySelectorAll('button').forEach(btn => {
|
|
3452
|
+
btn.addEventListener('click', () => {
|
|
3453
|
+
seg.querySelectorAll('button').forEach(b => b.classList.remove('active'));
|
|
3454
|
+
btn.classList.add('active');
|
|
3455
|
+
});
|
|
3456
|
+
});
|
|
3457
|
+
});
|
|
3458
|
+
|
|
3459
|
+
/* --- Chip groups JS --- */
|
|
3460
|
+
document.querySelectorAll('.chips').forEach(group => {
|
|
3461
|
+
group.querySelectorAll('.chip').forEach(chip => {
|
|
3462
|
+
chip.addEventListener('click', () => {
|
|
3463
|
+
group.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
|
|
3464
|
+
chip.classList.add('active');
|
|
3465
|
+
});
|
|
3466
|
+
});
|
|
3467
|
+
});
|
|
3468
|
+
|
|
3469
|
+
/* --- Icon library (extracted from icons.jsx) --- */
|
|
3470
|
+
const ICONS = [
|
|
3471
|
+
['search', '<circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/>'],
|
|
3472
|
+
['home', '<path d="M3 9l6-5 6 5v6a1 1 0 0 1-1 1h-3v-4H7v4H4a1 1 0 0 1-1-1V9z"/>'],
|
|
3473
|
+
['play', '<circle cx="9" cy="9" r="6.5"/><path d="M7.5 6.5l4 2.5-4 2.5z" fill="currentColor"/>'],
|
|
3474
|
+
['extract', '<path d="M3 4h12M3 9h8M3 14h12"/><path d="M14 6l2 2-2 2"/>'],
|
|
3475
|
+
['activity', '<path d="M2 9h3l2-5 4 10 2-5h3"/>'],
|
|
3476
|
+
['usage', '<path d="M3 14h12"/><rect x="4" y="9" width="2" height="5"/><rect x="8" y="6" width="2" height="8"/><rect x="12" y="3" width="2" height="11"/>'],
|
|
3477
|
+
['key', '<circle cx="6" cy="9" r="3"/><path d="M9 9h7l-2 2 2 2"/>'],
|
|
3478
|
+
['settings', '<circle cx="9" cy="9" r="2.5"/><path d="M9 1.5v2M9 14.5v2M16.5 9h-2M3.5 9h-2M14.3 3.7l-1.4 1.4M5.1 12.9l-1.4 1.4M14.3 14.3l-1.4-1.4M5.1 5.1L3.7 3.7"/>'],
|
|
3479
|
+
['bell', '<path d="M4 12V8a5 5 0 0 1 10 0v4l1 1H3l1-1z"/><path d="M7.5 15a1.5 1.5 0 0 0 3 0"/>'],
|
|
3480
|
+
['help', '<circle cx="9" cy="9" r="6.5"/><path d="M7 7a2 2 0 0 1 4 0c0 1-2 1.5-2 3"/><circle cx="9" cy="13" r="0.7" fill="currentColor"/>'],
|
|
3481
|
+
['docs', '<path d="M4 2h7l3 3v11H4z"/><path d="M11 2v3h3M6 8h6M6 11h6M6 14h4"/>'],
|
|
3482
|
+
['upgrade', '<path d="M9 3l5 5h-3v6H7V8H4l5-5z"/>'],
|
|
3483
|
+
['chev-down', '<path d="M4 7l5 4 5-4"/>'],
|
|
3484
|
+
['chev-up', '<path d="M4 11l5-4 5 4"/>'],
|
|
3485
|
+
['chev-left', '<path d="M11 4L7 9l4 5"/>'],
|
|
3486
|
+
['chev-right','<path d="M7 4l4 5-4 5"/>'],
|
|
3487
|
+
['plus', '<path d="M9 3v12M3 9h12"/>'],
|
|
3488
|
+
['close', '<path d="M4 4l10 10M14 4L4 14"/>'],
|
|
3489
|
+
['check', '<path d="M3 9l4 4 8-9"/>'],
|
|
3490
|
+
['eye', '<path d="M1.5 9S4 4 9 4s7.5 5 7.5 5-2.5 5-7.5 5-7.5-5-7.5-5z"/><circle cx="9" cy="9" r="2.2"/>'],
|
|
3491
|
+
['copy', '<rect x="5" y="5" width="9" height="10" rx="1.5"/><path d="M11 5V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h1"/>'],
|
|
3492
|
+
['download', '<path d="M9 3v9M5 9l4 4 4-4M3 15h12"/>'],
|
|
3493
|
+
['upload', '<path d="M9 13V4M5 7l4-4 4 4M3 15h12"/>'],
|
|
3494
|
+
['external', '<path d="M7 3H4v11h11v-3"/><path d="M10 3h5v5M15 3l-7 7"/>'],
|
|
3495
|
+
['filter', '<path d="M3 4h12l-4.5 6V15l-3-2v-3z"/>'],
|
|
3496
|
+
['calendar', '<rect x="3" y="4" width="12" height="11" rx="1.5"/><path d="M3 7h12M6 2v3M12 2v3"/>'],
|
|
3497
|
+
['cmd', '<path d="M5 5h8v8H5z"/><path d="M5 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM13 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5 13a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM13 13a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/>'],
|
|
3498
|
+
['sparkles', '<path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5L9 2z"/>'],
|
|
3499
|
+
['globe', '<circle cx="9" cy="9" r="6.5"/><path d="M3 9h12M9 2.5c2 2 3 4 3 6.5s-1 4.5-3 6.5c-2-2-3-4-3-6.5s1-4.5 3-6.5z"/>'],
|
|
3500
|
+
['code', '<path d="M6 5l-4 4 4 4M12 5l4 4-4 4M11 3l-4 12"/>'],
|
|
3501
|
+
['spinner', '<path d="M9 2.5a6.5 6.5 0 1 1-6.5 6.5"/>'],
|
|
3502
|
+
['stop', '<rect x="4" y="4" width="10" height="10" rx="1.5"/>'],
|
|
3503
|
+
['share', '<path d="M9 2v9M5 6l4-4 4 4M3 11v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3"/>'],
|
|
3504
|
+
['warning', '<path d="M9 2l7 13H2L9 2z"/><path d="M9 7v3"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/>'],
|
|
3505
|
+
['drag', '<g fill="currentColor" stroke="none"><circle cx="6" cy="5" r="1"/><circle cx="6" cy="9" r="1"/><circle cx="6" cy="13" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="9" r="1"/><circle cx="12" cy="13" r="1"/></g>'],
|
|
3506
|
+
['flame', '<g fill="currentColor" stroke="none"><path d="M9 1.5c0 2.5-2 3.5-3.5 5.5C4 9 4 11.5 5.5 13.5 6.5 14.8 8 15.5 9 15.5s2.5-.7 3.5-2c1.5-2 1.5-4.5 0-6.5C11 5 9 4 9 1.5z M9 9c.5 1 1.5 1.2 1.5 2.5S9.8 13.5 9 13.5s-1.5-.7-1.5-2S8.5 10 9 9z" fill-rule="evenodd"/></g>'],
|
|
3507
|
+
];
|
|
3508
|
+
const iconGrid = document.getElementById('iconGrid');
|
|
3509
|
+
const iconCount = document.getElementById('iconCount');
|
|
3510
|
+
if (iconGrid) {
|
|
3511
|
+
iconGrid.innerHTML = ICONS.map(([name, svg]) => `
|
|
3512
|
+
<div class="icon-cell" title="${name}" onclick="navigator.clipboard?.writeText('Icons.${name.replace(/-(.)/g, (_,c)=>c.toUpperCase()).replace(/^./, c=>c.toUpperCase())}')">
|
|
3513
|
+
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${svg}</svg>
|
|
3514
|
+
<span class="icon-name">${name}</span>
|
|
3515
|
+
</div>
|
|
3516
|
+
`).join('');
|
|
3517
|
+
if (iconCount) iconCount.textContent = ICONS.length;
|
|
3518
|
+
}
|
|
3519
|
+
|
|
3520
|
+
/* --- Space color grid (CRM clientes) --- */
|
|
3521
|
+
const spaces = [
|
|
3522
|
+
{ name: 'ZARK', key: 'zark', hex: '#f56f10', use: 'Org-mãe · ember brand' },
|
|
3523
|
+
{ name: 'ALLSEC', key: 'allsec', hex: '#c2410c', use: 'Burnt orange · seguro' },
|
|
3524
|
+
{ name: 'VIPCAR', key: 'vipcar', hex: '#ea580c', use: 'Deep orange · auto' },
|
|
3525
|
+
{ name: 'LIMPPE TEC',key: 'limppe', hex: '#f59e0b', use: 'Amber · serviço' },
|
|
3526
|
+
{ name: 'GERAIS', key: 'gerais', hex: '#1f2937', use: 'Slate · institucional' },
|
|
3527
|
+
{ name: 'MIXSHOP', key: 'mixshop', hex: '#b91c1c', use: 'Deep red · varejo' },
|
|
3528
|
+
{ name: 'VIPSEG', key: 'vipseg', hex: '#991b1b', use: 'Darker red · seguro' },
|
|
3529
|
+
];
|
|
3530
|
+
const spaceGrid = document.getElementById('spaceGrid');
|
|
3531
|
+
if (spaceGrid) {
|
|
3532
|
+
spaceGrid.innerHTML = spaces.map(s => `
|
|
3533
|
+
<div class="swatch" style="border-color: var(--line-200)">
|
|
3534
|
+
<div class="swatch-color" style="background: var(--space-${s.key}); position:relative">
|
|
3535
|
+
<span class="av-space" style="position:absolute; bottom:10px; right:10px; width:32px; height:32px; font-size:14px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.3)">${s.name.charAt(0)}</span>
|
|
3536
|
+
</div>
|
|
3537
|
+
<div class="swatch-meta">
|
|
3538
|
+
<div class="swatch-name">--space-${s.key}</div>
|
|
3539
|
+
<div class="swatch-hex">${s.hex} · ${s.name}</div>
|
|
3540
|
+
<div style="font-size:var(--fs-2xs); color:var(--ink-400); margin-top:6px; font-family:var(--font-mono); letter-spacing:var(--ls-wide)">${s.use}</div>
|
|
3541
|
+
</div>
|
|
3542
|
+
</div>
|
|
3543
|
+
`).join('');
|
|
3544
|
+
}
|
|
3545
|
+
|
|
3546
|
+
updateActive();
|
|
3547
|
+
</script>
|
|
3548
|
+
|
|
3549
|
+
</body>
|
|
3550
|
+
</html>
|