zark-design 3.0.1 → 3.0.2
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/package.json +1 -1
- package/templates/html/showcase.html.hbs +1215 -26
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zark-design",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"description": "Design system scaffolder seguindo método ZARK — `npx zark-design init` em modo preset (ZARK pronto) ou custom (cor e logos suas, paleta 50→900 gerada). HTML + JSX side-by-side. Dark mode nativo. Sem dependência runtime.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -10,6 +10,1195 @@
|
|
|
10
10
|
|
|
11
11
|
<link rel="stylesheet" href="tokens.css"/>
|
|
12
12
|
<link rel="stylesheet" href="components.css"/>
|
|
13
|
+
<style>
|
|
14
|
+
/* ============================================================
|
|
15
|
+
SHOWCASE — page-specific styles (sidebar, topbar, sections)
|
|
16
|
+
Os tokens e componentes vêm de tokens.css + components.css.
|
|
17
|
+
============================================================ */
|
|
18
|
+
|
|
19
|
+
/* ---------- SIDEBAR ---------- */
|
|
20
|
+
.sidebar {
|
|
21
|
+
position: sticky; top: 0; height: 100vh;
|
|
22
|
+
background: var(--canvas);
|
|
23
|
+
border-right: 1px solid var(--line-200);
|
|
24
|
+
padding: 20px 14px;
|
|
25
|
+
display: flex; flex-direction: column;
|
|
26
|
+
overflow-y: auto;
|
|
27
|
+
}
|
|
28
|
+
.sidebar-brand {
|
|
29
|
+
display: flex; align-items: center; gap: 10px;
|
|
30
|
+
padding: 8px 8px 22px;
|
|
31
|
+
}
|
|
32
|
+
.sidebar-logo {
|
|
33
|
+
height: 36px; width: auto;
|
|
34
|
+
display: block;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.sidebar-section {
|
|
38
|
+
margin-top: 18px;
|
|
39
|
+
display: flex; flex-direction: column; gap: 1px;
|
|
40
|
+
}
|
|
41
|
+
.sidebar-eyebrow {
|
|
42
|
+
font-family: var(--font-mono);
|
|
43
|
+
font-size: var(--fs-2xs);
|
|
44
|
+
letter-spacing: var(--ls-widest);
|
|
45
|
+
text-transform: uppercase;
|
|
46
|
+
color: var(--ink-300);
|
|
47
|
+
padding: 6px 10px 8px;
|
|
48
|
+
}
|
|
49
|
+
.sidebar-link {
|
|
50
|
+
display: flex; align-items: center; gap: 10px;
|
|
51
|
+
padding: 7px 10px;
|
|
52
|
+
font-size: var(--fs-md);
|
|
53
|
+
color: var(--ink-500);
|
|
54
|
+
border-radius: var(--r-md);
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
transition: all var(--t-fast) var(--ease-out);
|
|
57
|
+
position: relative;
|
|
58
|
+
}
|
|
59
|
+
.sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
|
|
60
|
+
.sidebar-link.active {
|
|
61
|
+
color: var(--brand-700);
|
|
62
|
+
background: var(--brand-50);
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
}
|
|
65
|
+
.sidebar-link .num {
|
|
66
|
+
font-family: var(--font-mono);
|
|
67
|
+
font-size: var(--fs-2xs);
|
|
68
|
+
color: var(--ink-300);
|
|
69
|
+
letter-spacing: var(--ls-wide);
|
|
70
|
+
width: 18px;
|
|
71
|
+
}
|
|
72
|
+
.sidebar-link.active .num { color: var(--brand-600); }
|
|
73
|
+
|
|
74
|
+
.sidebar-footer {
|
|
75
|
+
margin-top: auto;
|
|
76
|
+
padding: 12px 4px 0;
|
|
77
|
+
border-top: 1px solid var(--line-200);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* ---------- TOP BAR ---------- */
|
|
81
|
+
.topbar {
|
|
82
|
+
position: sticky; top: 0; z-index: 30;
|
|
83
|
+
height: var(--topbar-h);
|
|
84
|
+
background: rgba(250, 250, 248, 0.78);
|
|
85
|
+
backdrop-filter: blur(12px) saturate(180%);
|
|
86
|
+
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
87
|
+
border-bottom: 1px solid var(--line-200);
|
|
88
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
89
|
+
padding: 0 32px;
|
|
90
|
+
}
|
|
91
|
+
[data-theme="dark"] .topbar { background: rgba(14, 13, 17, 0.78); }
|
|
92
|
+
.topbar-left {
|
|
93
|
+
display: flex; align-items: center; gap: 12px;
|
|
94
|
+
}
|
|
95
|
+
.crumb {
|
|
96
|
+
font-family: var(--font-mono);
|
|
97
|
+
font-size: var(--fs-sm);
|
|
98
|
+
color: var(--ink-400);
|
|
99
|
+
letter-spacing: var(--ls-wide);
|
|
100
|
+
}
|
|
101
|
+
.crumb b { color: var(--ink-700); font-weight: 500; }
|
|
102
|
+
.topbar-right { display: flex; align-items: center; gap: 8px; }
|
|
103
|
+
|
|
104
|
+
/* ---------- MAIN ---------- */
|
|
105
|
+
main { background: var(--paper); }
|
|
106
|
+
.section {
|
|
107
|
+
border-top: 1px solid var(--line-200);
|
|
108
|
+
padding: 80px 64px;
|
|
109
|
+
}
|
|
110
|
+
.section:first-child { border-top: none; }
|
|
111
|
+
.section-inner { max-width: 1200px; margin: 0 auto; }
|
|
112
|
+
.section-header {
|
|
113
|
+
display: grid;
|
|
114
|
+
grid-template-columns: minmax(220px, 280px) 1fr;
|
|
115
|
+
gap: 64px;
|
|
116
|
+
margin-bottom: 56px;
|
|
117
|
+
align-items: start;
|
|
118
|
+
}
|
|
119
|
+
.eyebrow {
|
|
120
|
+
font-family: var(--font-mono);
|
|
121
|
+
font-size: var(--fs-xs);
|
|
122
|
+
letter-spacing: var(--ls-widest);
|
|
123
|
+
text-transform: uppercase;
|
|
124
|
+
color: var(--brand-600);
|
|
125
|
+
margin-bottom: 14px;
|
|
126
|
+
}
|
|
127
|
+
.section h2 {
|
|
128
|
+
font-family: var(--font-display);
|
|
129
|
+
font-size: var(--fs-3xl);
|
|
130
|
+
line-height: var(--lh-tight);
|
|
131
|
+
letter-spacing: var(--ls-tight);
|
|
132
|
+
margin: 0;
|
|
133
|
+
color: var(--ink-700);
|
|
134
|
+
font-weight: 700;
|
|
135
|
+
}
|
|
136
|
+
.section-desc {
|
|
137
|
+
margin: 0;
|
|
138
|
+
color: var(--ink-400);
|
|
139
|
+
font-size: var(--fs-lg);
|
|
140
|
+
line-height: 1.55;
|
|
141
|
+
max-width: 640px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* ---------- PANEL ---------- */
|
|
145
|
+
.panel {
|
|
146
|
+
background: var(--surface);
|
|
147
|
+
border: 1px solid var(--line-200);
|
|
148
|
+
border-radius: var(--r-xl);
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
box-shadow: var(--shadow-sm);
|
|
151
|
+
}
|
|
152
|
+
.panel-head {
|
|
153
|
+
padding: 14px 20px;
|
|
154
|
+
border-bottom: 1px solid var(--line-100);
|
|
155
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
156
|
+
background: var(--paper);
|
|
157
|
+
}
|
|
158
|
+
.panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-600); }
|
|
159
|
+
.panel-kicker {
|
|
160
|
+
font-family: var(--font-mono);
|
|
161
|
+
font-size: var(--fs-2xs);
|
|
162
|
+
letter-spacing: var(--ls-wider);
|
|
163
|
+
text-transform: uppercase;
|
|
164
|
+
color: var(--ink-300);
|
|
165
|
+
}
|
|
166
|
+
.panel-body { padding: 24px; }
|
|
167
|
+
.panel-body.flush { padding: 0; }
|
|
168
|
+
|
|
169
|
+
.sub-label {
|
|
170
|
+
font-family: var(--font-mono);
|
|
171
|
+
font-size: var(--fs-2xs);
|
|
172
|
+
letter-spacing: var(--ls-wider);
|
|
173
|
+
text-transform: uppercase;
|
|
174
|
+
color: var(--ink-300);
|
|
175
|
+
margin-bottom: 12px;
|
|
176
|
+
}
|
|
177
|
+
.row {
|
|
178
|
+
display: flex; flex-wrap: wrap;
|
|
179
|
+
align-items: center; gap: 10px;
|
|
180
|
+
margin-bottom: 24px;
|
|
181
|
+
}
|
|
182
|
+
.row:last-child { margin-bottom: 0; }
|
|
183
|
+
.stack { display: flex; flex-direction: column; gap: 16px; }
|
|
184
|
+
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
|
185
|
+
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
186
|
+
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
187
|
+
|
|
188
|
+
/* ============================================================
|
|
189
|
+
COMPONENTS
|
|
190
|
+
============================================================ */
|
|
191
|
+
|
|
192
|
+
/* --- Buttons --- */
|
|
193
|
+
.btn {
|
|
194
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
195
|
+
gap: 6px;
|
|
196
|
+
height: 32px; padding: 0 12px;
|
|
197
|
+
font-size: var(--fs-md); font-weight: 500;
|
|
198
|
+
font-family: var(--font-sans);
|
|
199
|
+
border: 1px solid transparent;
|
|
200
|
+
border-radius: var(--r-md);
|
|
201
|
+
cursor: pointer;
|
|
202
|
+
white-space: nowrap;
|
|
203
|
+
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
|
|
204
|
+
}
|
|
205
|
+
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
|
|
206
|
+
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
|
|
207
|
+
|
|
208
|
+
.btn-xs { height: 22px; padding: 0 8px; font-size: var(--fs-xs); border-radius: var(--r-sm); gap: 4px; }
|
|
209
|
+
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-md); }
|
|
210
|
+
.btn-md { height: 32px; padding: 0 12px; font-size: var(--fs-md); border-radius: var(--r-md); }
|
|
211
|
+
.btn-lg { height: 40px; padding: 0 16px; font-size: var(--fs-base); border-radius: var(--r-lg); gap: 8px; }
|
|
212
|
+
|
|
213
|
+
.btn-primary {
|
|
214
|
+
background: var(--brand-600); color: #fff;
|
|
215
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18);
|
|
216
|
+
}
|
|
217
|
+
.btn-primary:hover { background: var(--brand-700); }
|
|
218
|
+
.btn-secondary {
|
|
219
|
+
background: var(--surface); color: var(--ink-700);
|
|
220
|
+
border-color: var(--line-300);
|
|
221
|
+
box-shadow: var(--shadow-xs);
|
|
222
|
+
}
|
|
223
|
+
.btn-secondary:hover { background: var(--paper); }
|
|
224
|
+
.btn-soft {
|
|
225
|
+
background: var(--brand-50); color: var(--brand-700);
|
|
226
|
+
}
|
|
227
|
+
.btn-soft:hover { background: var(--brand-100); }
|
|
228
|
+
.btn-ghost {
|
|
229
|
+
background: transparent; color: var(--ink-600);
|
|
230
|
+
}
|
|
231
|
+
.btn-ghost:hover { background: var(--ink-50); }
|
|
232
|
+
.btn-danger {
|
|
233
|
+
background: var(--surface); color: var(--danger-700);
|
|
234
|
+
border-color: var(--line-300);
|
|
235
|
+
}
|
|
236
|
+
.btn-danger:hover { background: var(--danger-50); }
|
|
237
|
+
.btn-icon-only { padding: 0; width: 32px; }
|
|
238
|
+
.btn-icon-only.btn-sm { width: 28px; }
|
|
239
|
+
.btn-icon-only.btn-xs { width: 22px; }
|
|
240
|
+
|
|
241
|
+
.spinner {
|
|
242
|
+
width: 14px; height: 14px;
|
|
243
|
+
border: 1.5px solid rgba(255,255,255,0.4);
|
|
244
|
+
border-top-color: #fff;
|
|
245
|
+
border-radius: 50%;
|
|
246
|
+
animation: zk-spin 0.8s linear infinite;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* --- Input --- */
|
|
250
|
+
.input {
|
|
251
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
252
|
+
height: 36px; padding: 0 12px;
|
|
253
|
+
background: var(--surface);
|
|
254
|
+
border: 1px solid var(--line-300);
|
|
255
|
+
border-radius: var(--r-lg);
|
|
256
|
+
width: 100%;
|
|
257
|
+
transition: box-shadow var(--t-fast), border-color var(--t-fast);
|
|
258
|
+
}
|
|
259
|
+
.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--brand-400); }
|
|
260
|
+
.input.invalid { border-color: var(--danger-500); }
|
|
261
|
+
.input.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
|
|
262
|
+
.input-sm { height: 28px; padding: 0 8px; font-size: var(--fs-sm); }
|
|
263
|
+
.input-md { height: 36px; }
|
|
264
|
+
.input-lg { height: 44px; padding: 0 14px; font-size: var(--fs-base); }
|
|
265
|
+
.input input {
|
|
266
|
+
flex: 1; border: none; outline: none; background: transparent;
|
|
267
|
+
font-size: var(--fs-md); color: var(--ink-700);
|
|
268
|
+
font-family: var(--font-sans); min-width: 0;
|
|
269
|
+
}
|
|
270
|
+
.input.mono input { font-family: var(--font-mono); }
|
|
271
|
+
.input .ico { color: var(--ink-300); display: inline-flex; }
|
|
272
|
+
.input .suffix { color: var(--ink-300); display: inline-flex; align-items: center; gap: 4px; }
|
|
273
|
+
|
|
274
|
+
/* --- URL input (full-width search-style) --- */
|
|
275
|
+
.url-input-full {
|
|
276
|
+
display: flex; align-items: center; width: 100%; max-width: 520px; height: 44px;
|
|
277
|
+
background: var(--surface);
|
|
278
|
+
border: 1px solid var(--line-300);
|
|
279
|
+
border-radius: var(--r-md);
|
|
280
|
+
box-shadow: var(--shadow-sm);
|
|
281
|
+
overflow: hidden;
|
|
282
|
+
}
|
|
283
|
+
.url-input-full .scheme {
|
|
284
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
285
|
+
padding: 0 14px; height: 100%;
|
|
286
|
+
color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-sm);
|
|
287
|
+
border-right: 1px solid var(--line-200);
|
|
288
|
+
}
|
|
289
|
+
.url-input-full input {
|
|
290
|
+
flex: 1; border: none; outline: none; background: transparent;
|
|
291
|
+
padding: 0 16px; font-size: var(--fs-md); color: var(--ink-700);
|
|
292
|
+
font-family: var(--font-mono);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* --- Tag --- */
|
|
296
|
+
.tag {
|
|
297
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
298
|
+
height: 22px; padding: 0 8px;
|
|
299
|
+
font-size: var(--fs-xs); font-weight: 500;
|
|
300
|
+
font-family: var(--font-mono);
|
|
301
|
+
letter-spacing: var(--ls-wide);
|
|
302
|
+
text-transform: uppercase;
|
|
303
|
+
border-radius: var(--r-sm);
|
|
304
|
+
background: var(--ink-50); color: var(--ink-500);
|
|
305
|
+
}
|
|
306
|
+
.tag-xs { height: 18px; padding: 0 6px; font-size: var(--fs-2xs); }
|
|
307
|
+
.tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
|
|
308
|
+
.tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
|
|
309
|
+
.tag-square { border-radius: var(--r-xs); }
|
|
310
|
+
.tag-brand { background: var(--brand-50); color: var(--brand-700); }
|
|
311
|
+
.tag-mono { background: var(--tag-bg); color: var(--tag-fg); }
|
|
312
|
+
.tag-success { background: var(--success-50); color: var(--success-700); }
|
|
313
|
+
.tag-warning { background: var(--warning-50); color: var(--warning-700); }
|
|
314
|
+
.tag-danger { background: var(--danger-50); color: var(--danger-700); }
|
|
315
|
+
.tag-info { background: var(--info-50); color: var(--info-700); }
|
|
316
|
+
|
|
317
|
+
/* --- Badge --- */
|
|
318
|
+
.badge {
|
|
319
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
320
|
+
min-width: 18px; height: 18px; padding: 0 5px;
|
|
321
|
+
background: var(--brand-500); color: #fff;
|
|
322
|
+
font-size: var(--fs-2xs); font-weight: 600;
|
|
323
|
+
border-radius: var(--r-sm);
|
|
324
|
+
}
|
|
325
|
+
.badge-ink { background: var(--ink-600); }
|
|
326
|
+
|
|
327
|
+
/* --- Toggle (square-style switch) --- */
|
|
328
|
+
.toggle {
|
|
329
|
+
width: 36px; height: 20px; padding: 2px;
|
|
330
|
+
border-radius: var(--r-sm);
|
|
331
|
+
background: var(--ink-200);
|
|
332
|
+
border: none; cursor: pointer; position: relative;
|
|
333
|
+
transition: background var(--t-base) var(--ease-out);
|
|
334
|
+
}
|
|
335
|
+
.toggle.on { background: var(--brand-500); }
|
|
336
|
+
.toggle .knob {
|
|
337
|
+
position: absolute; top: 2px; left: 2px;
|
|
338
|
+
width: 16px; height: 16px; border-radius: var(--r-xs);
|
|
339
|
+
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.18);
|
|
340
|
+
transition: left var(--t-base) var(--ease-out);
|
|
341
|
+
}
|
|
342
|
+
.toggle.on .knob { left: 18px; }
|
|
343
|
+
.toggle-sm { width: 28px; height: 16px; }
|
|
344
|
+
.toggle-sm .knob { width: 12px; height: 12px; }
|
|
345
|
+
.toggle-sm.on .knob { left: 14px; }
|
|
346
|
+
|
|
347
|
+
/* --- Segmented --- */
|
|
348
|
+
.segmented {
|
|
349
|
+
display: inline-flex; padding: 3px; gap: 2px;
|
|
350
|
+
background: var(--ink-50);
|
|
351
|
+
border: 1px solid var(--line-200);
|
|
352
|
+
border-radius: var(--r-lg);
|
|
353
|
+
}
|
|
354
|
+
.segmented button {
|
|
355
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
356
|
+
height: 28px; padding: 0 12px;
|
|
357
|
+
font-size: var(--fs-sm); font-weight: 500;
|
|
358
|
+
color: var(--ink-400);
|
|
359
|
+
background: transparent;
|
|
360
|
+
border: none; cursor: pointer;
|
|
361
|
+
border-radius: var(--r-md);
|
|
362
|
+
transition: all var(--t-fast);
|
|
363
|
+
}
|
|
364
|
+
.segmented button.active {
|
|
365
|
+
color: var(--ink-700); font-weight: 600;
|
|
366
|
+
background: var(--surface);
|
|
367
|
+
box-shadow: var(--shadow-xs), 0 0 0 1px var(--line-200);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/* --- Avatar --- */
|
|
371
|
+
.avatar {
|
|
372
|
+
width: 24px; height: 24px;
|
|
373
|
+
background: var(--brand-500); color: #fff;
|
|
374
|
+
border-radius: 50%;
|
|
375
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
376
|
+
font-size: 11px; font-weight: 600;
|
|
377
|
+
font-family: var(--font-display);
|
|
378
|
+
flex-shrink: 0;
|
|
379
|
+
}
|
|
380
|
+
.avatar-sq { border-radius: var(--r-sm); }
|
|
381
|
+
|
|
382
|
+
/* --- Kbd --- */
|
|
383
|
+
.kbd {
|
|
384
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
385
|
+
min-width: 18px; height: 18px; padding: 0 4px;
|
|
386
|
+
font-family: var(--font-mono); font-size: var(--fs-2xs);
|
|
387
|
+
color: var(--ink-400);
|
|
388
|
+
background: var(--surface);
|
|
389
|
+
border: 1px solid var(--line-200); border-bottom-width: 2px;
|
|
390
|
+
border-radius: var(--r-sm);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* ============================================================
|
|
394
|
+
FOUNDATIONS GRIDS
|
|
395
|
+
============================================================ */
|
|
396
|
+
|
|
397
|
+
/* --- Color swatches --- */
|
|
398
|
+
.swatch-grid {
|
|
399
|
+
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
|
|
400
|
+
}
|
|
401
|
+
.swatch {
|
|
402
|
+
border-radius: var(--r-lg);
|
|
403
|
+
overflow: hidden;
|
|
404
|
+
border: 1px solid var(--line-200);
|
|
405
|
+
background: var(--surface);
|
|
406
|
+
}
|
|
407
|
+
.swatch-color { height: 76px; }
|
|
408
|
+
.swatch-meta { padding: 10px 12px; }
|
|
409
|
+
.swatch-name {
|
|
410
|
+
font-family: var(--font-mono);
|
|
411
|
+
font-size: var(--fs-sm);
|
|
412
|
+
font-weight: 500;
|
|
413
|
+
color: var(--ink-700);
|
|
414
|
+
}
|
|
415
|
+
.swatch-hex {
|
|
416
|
+
font-family: var(--font-mono);
|
|
417
|
+
font-size: var(--fs-2xs);
|
|
418
|
+
color: var(--ink-400);
|
|
419
|
+
margin-top: 2px;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/* --- Type spec --- */
|
|
423
|
+
.type-row {
|
|
424
|
+
display: grid;
|
|
425
|
+
grid-template-columns: 100px 80px 1fr;
|
|
426
|
+
align-items: baseline;
|
|
427
|
+
gap: 16px;
|
|
428
|
+
padding: 16px 0;
|
|
429
|
+
border-bottom: 1px dashed var(--line-200);
|
|
430
|
+
}
|
|
431
|
+
.type-row:last-child { border-bottom: none; }
|
|
432
|
+
.type-token {
|
|
433
|
+
font-family: var(--font-mono);
|
|
434
|
+
font-size: var(--fs-xs);
|
|
435
|
+
color: var(--brand-600);
|
|
436
|
+
}
|
|
437
|
+
.type-px {
|
|
438
|
+
font-family: var(--font-mono);
|
|
439
|
+
font-size: var(--fs-xs);
|
|
440
|
+
color: var(--ink-300);
|
|
441
|
+
}
|
|
442
|
+
.type-sample { color: var(--ink-700); line-height: 1.2; }
|
|
443
|
+
|
|
444
|
+
/* --- Spacing ruler --- */
|
|
445
|
+
.sp-row {
|
|
446
|
+
display: grid; grid-template-columns: 80px 60px 1fr; gap: 16px; align-items: center;
|
|
447
|
+
padding: 8px 0;
|
|
448
|
+
}
|
|
449
|
+
.sp-token { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--brand-600); }
|
|
450
|
+
.sp-px { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-300); text-align: right; }
|
|
451
|
+
.sp-bar { height: 12px; background: var(--brand-300); border-radius: var(--r-xs); }
|
|
452
|
+
|
|
453
|
+
/* --- Shadow demo --- */
|
|
454
|
+
.shadow-demo {
|
|
455
|
+
background: var(--surface);
|
|
456
|
+
border-radius: var(--r-lg);
|
|
457
|
+
height: 96px;
|
|
458
|
+
padding: 16px;
|
|
459
|
+
border: 1px solid var(--line-100);
|
|
460
|
+
}
|
|
461
|
+
.shadow-demo-name {
|
|
462
|
+
font-family: var(--font-mono);
|
|
463
|
+
font-size: var(--fs-sm);
|
|
464
|
+
color: var(--ink-600);
|
|
465
|
+
font-weight: 500;
|
|
466
|
+
}
|
|
467
|
+
.shadow-demo-spec {
|
|
468
|
+
font-family: var(--font-mono);
|
|
469
|
+
font-size: var(--fs-2xs);
|
|
470
|
+
color: var(--ink-300);
|
|
471
|
+
margin-top: 4px;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
/* --- Radius demo --- */
|
|
475
|
+
.radius-demo {
|
|
476
|
+
background: var(--brand-50);
|
|
477
|
+
border: 1px solid var(--brand-200);
|
|
478
|
+
height: 80px;
|
|
479
|
+
display: flex; align-items: center; justify-content: center;
|
|
480
|
+
font-family: var(--font-mono);
|
|
481
|
+
font-size: var(--fs-sm);
|
|
482
|
+
color: var(--brand-700);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* ============================================================
|
|
486
|
+
COMPLEX
|
|
487
|
+
============================================================ */
|
|
488
|
+
|
|
489
|
+
/* --- Sidebar component example --- */
|
|
490
|
+
.demo-sidebar {
|
|
491
|
+
display: flex;
|
|
492
|
+
border-radius: var(--r-lg);
|
|
493
|
+
overflow: hidden;
|
|
494
|
+
border: 1px solid var(--line-200);
|
|
495
|
+
}
|
|
496
|
+
.demo-sidebar .ds-side {
|
|
497
|
+
width: 240px; background: var(--canvas);
|
|
498
|
+
border-right: 1px solid var(--line-200);
|
|
499
|
+
padding: 12px;
|
|
500
|
+
display: flex; flex-direction: column; gap: 4px;
|
|
501
|
+
min-height: 480px;
|
|
502
|
+
}
|
|
503
|
+
.demo-sidebar .ds-main { flex: 1; background: var(--paper); }
|
|
504
|
+
.ds-side-item {
|
|
505
|
+
display: flex; align-items: center; gap: 10px;
|
|
506
|
+
padding: 7px 10px; font-size: var(--fs-md);
|
|
507
|
+
color: var(--ink-500);
|
|
508
|
+
border-radius: var(--r-md);
|
|
509
|
+
cursor: pointer;
|
|
510
|
+
}
|
|
511
|
+
.ds-side-item:hover { background: var(--ink-50); }
|
|
512
|
+
.ds-side-item.active {
|
|
513
|
+
color: var(--brand-700);
|
|
514
|
+
background: var(--brand-50);
|
|
515
|
+
font-weight: 500;
|
|
516
|
+
}
|
|
517
|
+
.ds-side-item .ico { color: var(--ink-400); }
|
|
518
|
+
.ds-side-item.active .ico { color: var(--brand-600); }
|
|
519
|
+
.ds-side-card {
|
|
520
|
+
margin: 4px; padding: 12px;
|
|
521
|
+
background: var(--surface);
|
|
522
|
+
border: 1px solid var(--line-200);
|
|
523
|
+
border-radius: var(--r-lg);
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
/* --- Endpoint card --- */
|
|
527
|
+
.endpoint {
|
|
528
|
+
flex: 1; min-width: 200px;
|
|
529
|
+
border: 1px solid var(--line-200);
|
|
530
|
+
background: var(--surface);
|
|
531
|
+
padding: 18px;
|
|
532
|
+
cursor: pointer;
|
|
533
|
+
transition: border-color var(--t-fast);
|
|
534
|
+
}
|
|
535
|
+
.endpoint:hover { border-color: var(--ink-300); }
|
|
536
|
+
.endpoint .head {
|
|
537
|
+
display: flex; align-items: center; gap: 8px;
|
|
538
|
+
margin-bottom: 10px;
|
|
539
|
+
}
|
|
540
|
+
.endpoint .label { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
541
|
+
.endpoint .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.5; }
|
|
542
|
+
.endpoint .ico { color: var(--brand-600); }
|
|
543
|
+
|
|
544
|
+
/* --- Stat card --- */
|
|
545
|
+
.stat-card {
|
|
546
|
+
background: var(--surface); border: 1px solid var(--line-200);
|
|
547
|
+
border-radius: var(--r-xl); padding: 20px; max-width: 460px;
|
|
548
|
+
}
|
|
549
|
+
.stat-card-head {
|
|
550
|
+
display: flex; justify-content: space-between; align-items: baseline;
|
|
551
|
+
}
|
|
552
|
+
.stat-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
553
|
+
.stat-card-sub { font-size: var(--fs-sm); color: var(--ink-400); margin-top: 2px; }
|
|
554
|
+
.stat-card-num {
|
|
555
|
+
font-size: var(--fs-3xl); font-weight: 700; color: var(--ink-700);
|
|
556
|
+
font-family: var(--font-sans);
|
|
557
|
+
letter-spacing: var(--ls-tight);
|
|
558
|
+
line-height: 1;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
/* --- Integration tile --- */
|
|
562
|
+
.intg-grid {
|
|
563
|
+
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
|
|
564
|
+
max-width: 700px;
|
|
565
|
+
border: 1px solid var(--line-200);
|
|
566
|
+
border-radius: var(--r-xl);
|
|
567
|
+
overflow: hidden;
|
|
568
|
+
}
|
|
569
|
+
.intg-tile {
|
|
570
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
571
|
+
padding: 14px 16px;
|
|
572
|
+
cursor: pointer;
|
|
573
|
+
transition: background var(--t-fast);
|
|
574
|
+
}
|
|
575
|
+
.intg-tile:hover { background: var(--paper); }
|
|
576
|
+
.intg-tile .lh { display: flex; align-items: center; gap: 10px; }
|
|
577
|
+
.intg-tile .badge-color {
|
|
578
|
+
width: 22px; height: 22px;
|
|
579
|
+
border-radius: var(--r-sm);
|
|
580
|
+
color: #fff; display: flex; align-items: center; justify-content: center;
|
|
581
|
+
font-size: var(--fs-2xs); font-weight: 700;
|
|
582
|
+
}
|
|
583
|
+
.intg-tile .name { font-size: var(--fs-md); color: var(--ink-700); }
|
|
584
|
+
|
|
585
|
+
/* --- Project card --- */
|
|
586
|
+
.proj-card {
|
|
587
|
+
border: 1px solid var(--line-200);
|
|
588
|
+
border-radius: var(--r-xl);
|
|
589
|
+
padding: 16px;
|
|
590
|
+
background: var(--surface);
|
|
591
|
+
cursor: pointer;
|
|
592
|
+
transition: all var(--t-fast);
|
|
593
|
+
}
|
|
594
|
+
.proj-card:hover { box-shadow: var(--shadow-md); }
|
|
595
|
+
.proj-card .head {
|
|
596
|
+
display: flex; justify-content: space-between; align-items: flex-start;
|
|
597
|
+
margin-bottom: 6px;
|
|
598
|
+
}
|
|
599
|
+
.proj-card .title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
600
|
+
.proj-card .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.5; margin-bottom: 12px; }
|
|
601
|
+
.proj-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
602
|
+
|
|
603
|
+
/* --- Data table --- */
|
|
604
|
+
.table-bar {
|
|
605
|
+
padding: 14px 18px;
|
|
606
|
+
border-bottom: 1px solid var(--line-100);
|
|
607
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
608
|
+
}
|
|
609
|
+
.table-bar .lh { display: flex; gap: 8px; align-items: center; }
|
|
610
|
+
.table-head {
|
|
611
|
+
display: grid; grid-template-columns: 120px 1fr 110px 70px 160px 50px;
|
|
612
|
+
padding: 10px 18px;
|
|
613
|
+
font-family: var(--font-mono);
|
|
614
|
+
font-size: var(--fs-2xs);
|
|
615
|
+
letter-spacing: var(--ls-wider);
|
|
616
|
+
text-transform: uppercase;
|
|
617
|
+
color: var(--ink-300);
|
|
618
|
+
border-bottom: 1px solid var(--line-100);
|
|
619
|
+
background: var(--paper);
|
|
620
|
+
}
|
|
621
|
+
.table-row {
|
|
622
|
+
display: grid; grid-template-columns: 120px 1fr 110px 70px 160px 50px;
|
|
623
|
+
padding: 14px 18px; align-items: center;
|
|
624
|
+
border-bottom: 1px solid var(--line-100);
|
|
625
|
+
font-size: var(--fs-sm);
|
|
626
|
+
transition: background var(--t-fast);
|
|
627
|
+
}
|
|
628
|
+
.table-row:last-child { border-bottom: none; }
|
|
629
|
+
.table-row:hover { background: var(--paper); }
|
|
630
|
+
.table-row .url { color: var(--ink-600); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
631
|
+
.table-row .num { color: var(--ink-500); font-family: var(--font-mono); }
|
|
632
|
+
.table-row .date { color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-xs); }
|
|
633
|
+
|
|
634
|
+
/* --- Modal --- */
|
|
635
|
+
.modal-stage {
|
|
636
|
+
padding: 32px;
|
|
637
|
+
background: radial-gradient(ellipse at top, var(--paper) 0%, var(--canvas) 80%);
|
|
638
|
+
position: relative; min-height: 420px;
|
|
639
|
+
}
|
|
640
|
+
.modal-overlay {
|
|
641
|
+
position: absolute; inset: 0;
|
|
642
|
+
background: rgba(20, 17, 12, 0.04);
|
|
643
|
+
backdrop-filter: blur(2px);
|
|
644
|
+
}
|
|
645
|
+
.modal {
|
|
646
|
+
position: relative;
|
|
647
|
+
max-width: 460px; margin: 24px auto;
|
|
648
|
+
background: var(--surface);
|
|
649
|
+
border: 1px solid var(--line-200);
|
|
650
|
+
border-radius: var(--r-2xl);
|
|
651
|
+
box-shadow: var(--shadow-modal);
|
|
652
|
+
overflow: hidden;
|
|
653
|
+
animation: zk-fadein var(--t-slow) var(--ease-out);
|
|
654
|
+
}
|
|
655
|
+
.modal-head { padding: 24px 24px 0; }
|
|
656
|
+
.modal-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
|
|
657
|
+
.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); }
|
|
658
|
+
.modal-desc { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--ink-400); }
|
|
659
|
+
.modal-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
660
|
+
.modal-progress .bars { display: flex; gap: 4px; }
|
|
661
|
+
.modal-progress .bars span { width: 12px; height: 4px; border-radius: 2px; background: var(--ink-100); }
|
|
662
|
+
.modal-progress .bars .first { width: 28px; background: var(--brand-500); }
|
|
663
|
+
.modal-list { padding: 4px; }
|
|
664
|
+
.modal-item {
|
|
665
|
+
padding: 12px 20px; border-radius: var(--r-md);
|
|
666
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
667
|
+
}
|
|
668
|
+
.modal-item:hover { background: var(--paper); }
|
|
669
|
+
.modal-item .t { font-size: var(--fs-md); font-weight: 500; color: var(--brand-700); }
|
|
670
|
+
.modal-item.done .t { color: var(--success-700); }
|
|
671
|
+
.modal-item .d { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 2px; }
|
|
672
|
+
.modal-item .credits { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono); }
|
|
673
|
+
.modal-foot {
|
|
674
|
+
padding: 16px 20px;
|
|
675
|
+
border-top: 1px solid var(--line-100);
|
|
676
|
+
display: flex; justify-content: flex-end;
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
/* --- Code block --- */
|
|
680
|
+
.code-block {
|
|
681
|
+
background: var(--code-bg);
|
|
682
|
+
border: 1px solid var(--line-200);
|
|
683
|
+
border-radius: var(--r-lg);
|
|
684
|
+
padding: 16px;
|
|
685
|
+
font-family: var(--font-mono); font-size: var(--fs-sm);
|
|
686
|
+
line-height: 1.7;
|
|
687
|
+
color: var(--ink-600);
|
|
688
|
+
position: relative;
|
|
689
|
+
overflow-x: auto;
|
|
690
|
+
}
|
|
691
|
+
.code-block .copy {
|
|
692
|
+
position: absolute; top: 10px; right: 10px;
|
|
693
|
+
display: flex; gap: 4px;
|
|
694
|
+
}
|
|
695
|
+
.code-block .k { color: var(--code-fg); }
|
|
696
|
+
.code-block .s { color: var(--success-700); }
|
|
697
|
+
.code-block .indent-1 { padding-left: 16px; }
|
|
698
|
+
.code-block .indent-2 { padding-left: 32px; }
|
|
699
|
+
.code-block .indent-3 { padding-left: 48px; }
|
|
700
|
+
.code-block .indent-4 { padding-left: 64px; }
|
|
701
|
+
|
|
702
|
+
/* --- Banners --- */
|
|
703
|
+
.announce {
|
|
704
|
+
width: 100%;
|
|
705
|
+
background: var(--paper);
|
|
706
|
+
border: 1px solid var(--line-200);
|
|
707
|
+
border-radius: var(--r-md);
|
|
708
|
+
padding: 10px 16px;
|
|
709
|
+
text-align: center;
|
|
710
|
+
font-size: var(--fs-md);
|
|
711
|
+
color: var(--ink-600);
|
|
712
|
+
}
|
|
713
|
+
.announce a { color: var(--brand-700); text-decoration: underline; }
|
|
714
|
+
.tip {
|
|
715
|
+
display: flex; gap: 12px; padding: 14px;
|
|
716
|
+
background: var(--surface);
|
|
717
|
+
border: 1px solid var(--line-200);
|
|
718
|
+
border-radius: var(--r-lg);
|
|
719
|
+
max-width: 320px;
|
|
720
|
+
box-shadow: var(--shadow-md);
|
|
721
|
+
}
|
|
722
|
+
.tip .ico { color: var(--brand-500); margin-top: 2px; }
|
|
723
|
+
.tip .what {
|
|
724
|
+
font-size: var(--fs-xs); font-family: var(--font-mono);
|
|
725
|
+
letter-spacing: var(--ls-wider);
|
|
726
|
+
color: var(--ink-300);
|
|
727
|
+
text-transform: uppercase; margin-bottom: 4px;
|
|
728
|
+
}
|
|
729
|
+
.tip .title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-700); margin-bottom: 4px; }
|
|
730
|
+
.tip .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.45; }
|
|
731
|
+
.toast {
|
|
732
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
733
|
+
padding: 8px 14px;
|
|
734
|
+
background: var(--ink-700); color: #fff;
|
|
735
|
+
border-radius: var(--r-md);
|
|
736
|
+
font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
|
|
737
|
+
}
|
|
738
|
+
.toast-success {
|
|
739
|
+
background: var(--success-500); color: #fff;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
/* ============================================================
|
|
743
|
+
MISC
|
|
744
|
+
============================================================ */
|
|
745
|
+
.divider {
|
|
746
|
+
height: 1px; background: var(--line-200);
|
|
747
|
+
margin: 24px 0;
|
|
748
|
+
}
|
|
749
|
+
.spec {
|
|
750
|
+
display: flex; justify-content: space-between; gap: 16px;
|
|
751
|
+
padding: 8px 0;
|
|
752
|
+
border-bottom: 1px dashed var(--line-200);
|
|
753
|
+
font-size: var(--fs-sm);
|
|
754
|
+
}
|
|
755
|
+
.spec:last-child { border-bottom: none; }
|
|
756
|
+
.spec .l { color: var(--ink-400); }
|
|
757
|
+
.spec .v { color: var(--ink-600); font-family: var(--font-mono); }
|
|
758
|
+
|
|
759
|
+
/* Theme toggle in topbar */
|
|
760
|
+
.theme-toggle {
|
|
761
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
762
|
+
height: 32px; padding: 0 12px;
|
|
763
|
+
background: var(--surface);
|
|
764
|
+
border: 1px solid var(--line-300);
|
|
765
|
+
border-radius: var(--r-md);
|
|
766
|
+
color: var(--ink-600); font-size: var(--fs-sm); font-weight: 500;
|
|
767
|
+
cursor: pointer;
|
|
768
|
+
transition: all var(--t-fast);
|
|
769
|
+
}
|
|
770
|
+
.theme-toggle:hover { background: var(--paper); }
|
|
771
|
+
.theme-toggle .label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
|
|
772
|
+
|
|
773
|
+
/* ============================================================
|
|
774
|
+
APP PATTERNS (CRM-derived, standardized)
|
|
775
|
+
============================================================ */
|
|
776
|
+
|
|
777
|
+
/* ---------- STATUS / PRIORITY TAGS (with leading dot indicator) ---------- */
|
|
778
|
+
.tag-dot {
|
|
779
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
780
|
+
height: 22px; padding: 0 8px;
|
|
781
|
+
font-family: var(--font-mono);
|
|
782
|
+
font-size: var(--fs-xs);
|
|
783
|
+
font-weight: 500;
|
|
784
|
+
letter-spacing: var(--ls-wide);
|
|
785
|
+
text-transform: uppercase;
|
|
786
|
+
border-radius: var(--r-sm);
|
|
787
|
+
white-space: nowrap;
|
|
788
|
+
}
|
|
789
|
+
.tag-dot::before {
|
|
790
|
+
content: '';
|
|
791
|
+
width: 6px; height: 6px; border-radius: var(--r-xs);
|
|
792
|
+
background: currentColor; opacity: 0.85;
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
/* Status (matrix oficial: 5 estados de tarefa) */
|
|
796
|
+
.s-todo { background: #fff8e6; color: #9a6500; }
|
|
797
|
+
.s-progress { background: var(--brand-50); color: var(--brand-700); }
|
|
798
|
+
.s-review { background: var(--info-50); color: var(--info-700); }
|
|
799
|
+
.s-done { background: var(--success-50); color: var(--success-700); }
|
|
800
|
+
.s-canceled { background: var(--ink-50); color: var(--ink-500); }
|
|
801
|
+
|
|
802
|
+
/* Modificadores (sobrescrevem status: ATRASADA = vermelho, PARADO = âmbar) */
|
|
803
|
+
.s-overdue { background: var(--danger-50); color: var(--danger-700); }
|
|
804
|
+
.s-paused { background: var(--warning-50); color: var(--warning-700); }
|
|
805
|
+
.s-followup { background: var(--brand-50); color: var(--brand-700); }
|
|
806
|
+
|
|
807
|
+
/* Prioridade (4 níveis) */
|
|
808
|
+
.p-urgent { background: var(--danger-50); color: var(--danger-700); }
|
|
809
|
+
.p-high { background: var(--warning-50); color: var(--warning-700); }
|
|
810
|
+
.p-med { background: #fff8e6; color: #9a6500; }
|
|
811
|
+
.p-low { background: var(--ink-50); color: var(--ink-500); }
|
|
812
|
+
|
|
813
|
+
/* Space/Cliente tags */
|
|
814
|
+
.sp { font-weight: 600; }
|
|
815
|
+
.sp-zark { background: var(--space-zark-soft); color: var(--space-zark); }
|
|
816
|
+
.sp-allsec { background: var(--space-allsec-soft); color: var(--space-allsec); }
|
|
817
|
+
.sp-vipcar { background: var(--space-vipcar-soft); color: var(--space-vipcar); }
|
|
818
|
+
.sp-limppe { background: var(--space-limppe-soft); color: var(--space-limppe); }
|
|
819
|
+
.sp-gerais { background: var(--space-gerais-soft); color: var(--space-gerais); }
|
|
820
|
+
.sp-mixshop { background: var(--space-mixshop-soft); color: var(--space-mixshop); }
|
|
821
|
+
.sp-vipseg { background: var(--space-vipseg-soft); color: var(--space-vipseg); }
|
|
822
|
+
|
|
823
|
+
/* ---------- STAT CARD (UNIFIED) ---------- */
|
|
824
|
+
.stat {
|
|
825
|
+
background: var(--surface);
|
|
826
|
+
border: 1px solid var(--line-200);
|
|
827
|
+
border-radius: var(--r-lg);
|
|
828
|
+
padding: 18px;
|
|
829
|
+
display: flex; flex-direction: column; gap: 12px;
|
|
830
|
+
transition: border-color var(--t-fast);
|
|
831
|
+
}
|
|
832
|
+
.stat:hover { border-color: var(--line-300); }
|
|
833
|
+
.stat.is-critical { border-color: var(--danger-500); background: var(--danger-50); }
|
|
834
|
+
.stat-head {
|
|
835
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
836
|
+
}
|
|
837
|
+
.stat-label {
|
|
838
|
+
font-family: var(--font-mono);
|
|
839
|
+
font-size: var(--fs-2xs);
|
|
840
|
+
letter-spacing: var(--ls-wider);
|
|
841
|
+
text-transform: uppercase;
|
|
842
|
+
color: var(--ink-400);
|
|
843
|
+
font-weight: 500;
|
|
844
|
+
}
|
|
845
|
+
.stat-icon {
|
|
846
|
+
width: 28px; height: 28px;
|
|
847
|
+
border-radius: var(--r-md);
|
|
848
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
849
|
+
color: #fff;
|
|
850
|
+
}
|
|
851
|
+
.stat-icon.green { background: var(--success-500); }
|
|
852
|
+
.stat-icon.orange { background: var(--brand-500); }
|
|
853
|
+
.stat-icon.blue { background: var(--info-500); }
|
|
854
|
+
.stat-icon.purple { background: #7c3aed; }
|
|
855
|
+
.stat-icon.red { background: var(--danger-500); }
|
|
856
|
+
.stat-icon.ghost { background: var(--ink-50); color: var(--ink-500); }
|
|
857
|
+
.stat-value {
|
|
858
|
+
font-family: var(--font-sans);
|
|
859
|
+
font-size: var(--fs-3xl);
|
|
860
|
+
font-weight: 700;
|
|
861
|
+
letter-spacing: var(--ls-tight);
|
|
862
|
+
color: var(--ink-700);
|
|
863
|
+
line-height: 1;
|
|
864
|
+
}
|
|
865
|
+
.stat.is-critical .stat-value { color: var(--danger-700); }
|
|
866
|
+
.stat-sub {
|
|
867
|
+
font-size: var(--fs-xs);
|
|
868
|
+
color: var(--ink-400);
|
|
869
|
+
font-family: var(--font-mono);
|
|
870
|
+
}
|
|
871
|
+
.stat-progress {
|
|
872
|
+
height: 4px; background: var(--ink-50);
|
|
873
|
+
border-radius: var(--r-xs); overflow: hidden;
|
|
874
|
+
margin-top: 4px;
|
|
875
|
+
}
|
|
876
|
+
.stat-progress > span {
|
|
877
|
+
display: block; height: 100%;
|
|
878
|
+
background: var(--success-500);
|
|
879
|
+
border-radius: var(--r-xs);
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
/* ---------- CRITICAL ALERT BANNER ---------- */
|
|
883
|
+
.alert-critical {
|
|
884
|
+
background: var(--danger-50);
|
|
885
|
+
border: 1px solid var(--danger-500);
|
|
886
|
+
border-radius: var(--r-lg);
|
|
887
|
+
padding: 16px 20px;
|
|
888
|
+
}
|
|
889
|
+
.alert-critical-head {
|
|
890
|
+
display: flex; align-items: center; gap: 8px;
|
|
891
|
+
font-family: var(--font-mono);
|
|
892
|
+
font-size: var(--fs-xs);
|
|
893
|
+
letter-spacing: var(--ls-wider);
|
|
894
|
+
text-transform: uppercase;
|
|
895
|
+
font-weight: 600;
|
|
896
|
+
color: var(--danger-700);
|
|
897
|
+
margin-bottom: 12px;
|
|
898
|
+
}
|
|
899
|
+
.alert-critical-list { display: flex; flex-direction: column; gap: 2px; }
|
|
900
|
+
.alert-critical-row {
|
|
901
|
+
display: grid;
|
|
902
|
+
grid-template-columns: auto 1fr auto auto;
|
|
903
|
+
gap: 12px; align-items: center;
|
|
904
|
+
padding: 8px 10px;
|
|
905
|
+
border-radius: var(--r-sm);
|
|
906
|
+
font-size: var(--fs-md);
|
|
907
|
+
color: var(--danger-700);
|
|
908
|
+
}
|
|
909
|
+
.alert-critical-row:hover { background: rgba(220, 53, 69, 0.06); }
|
|
910
|
+
.alert-critical-row .src {
|
|
911
|
+
font-family: var(--font-mono);
|
|
912
|
+
font-size: var(--fs-xs);
|
|
913
|
+
color: var(--danger-700);
|
|
914
|
+
opacity: 0.7;
|
|
915
|
+
}
|
|
916
|
+
.alert-critical-foot {
|
|
917
|
+
margin-top: 8px; padding: 8px 10px;
|
|
918
|
+
font-size: var(--fs-xs);
|
|
919
|
+
color: var(--danger-700); opacity: 0.7;
|
|
920
|
+
font-family: var(--font-mono);
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
/* ---------- FUNNEL ---------- */
|
|
924
|
+
.funnel {
|
|
925
|
+
display: flex; height: 8px;
|
|
926
|
+
background: var(--ink-50);
|
|
927
|
+
border-radius: var(--r-xs);
|
|
928
|
+
overflow: hidden;
|
|
929
|
+
gap: 2px;
|
|
930
|
+
}
|
|
931
|
+
.funnel > span { display: block; height: 100%; }
|
|
932
|
+
.funnel-stages {
|
|
933
|
+
display: grid;
|
|
934
|
+
grid-template-columns: repeat(6, 1fr);
|
|
935
|
+
gap: 8px;
|
|
936
|
+
margin-top: 12px;
|
|
937
|
+
}
|
|
938
|
+
.funnel-stage {
|
|
939
|
+
display: flex; flex-direction: column; gap: 2px;
|
|
940
|
+
}
|
|
941
|
+
.funnel-stage-label {
|
|
942
|
+
font-size: var(--fs-xs);
|
|
943
|
+
color: var(--ink-500);
|
|
944
|
+
}
|
|
945
|
+
.funnel-stage-count {
|
|
946
|
+
font-family: var(--font-mono);
|
|
947
|
+
font-size: var(--fs-sm);
|
|
948
|
+
font-weight: 600;
|
|
949
|
+
color: var(--ink-700);
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
/* ---------- KANBAN ---------- */
|
|
953
|
+
.kanban {
|
|
954
|
+
display: flex; gap: 12px;
|
|
955
|
+
overflow-x: auto;
|
|
956
|
+
padding-bottom: 8px;
|
|
957
|
+
}
|
|
958
|
+
.k-col {
|
|
959
|
+
flex: 1; min-width: 240px;
|
|
960
|
+
background: transparent;
|
|
961
|
+
display: flex; flex-direction: column; gap: 8px;
|
|
962
|
+
}
|
|
963
|
+
.k-col-head {
|
|
964
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
965
|
+
padding: 8px 12px;
|
|
966
|
+
font-family: var(--font-mono);
|
|
967
|
+
font-size: var(--fs-xs);
|
|
968
|
+
letter-spacing: var(--ls-wide);
|
|
969
|
+
text-transform: uppercase;
|
|
970
|
+
font-weight: 600;
|
|
971
|
+
color: var(--ink-600);
|
|
972
|
+
}
|
|
973
|
+
.k-col-head .lh { display: inline-flex; align-items: center; gap: 8px; }
|
|
974
|
+
.k-col-head .dot {
|
|
975
|
+
width: 8px; height: 8px; border-radius: 50%;
|
|
976
|
+
}
|
|
977
|
+
.k-col-head .count {
|
|
978
|
+
color: var(--ink-400);
|
|
979
|
+
font-weight: 500;
|
|
980
|
+
}
|
|
981
|
+
.k-add {
|
|
982
|
+
display: flex; align-items: center; justify-content: center; gap: 6px;
|
|
983
|
+
padding: 8px;
|
|
984
|
+
font-size: var(--fs-sm); color: var(--ink-400);
|
|
985
|
+
background: transparent;
|
|
986
|
+
border: 1px dashed var(--line-300);
|
|
987
|
+
border-radius: var(--r-md);
|
|
988
|
+
cursor: pointer;
|
|
989
|
+
transition: all var(--t-fast);
|
|
990
|
+
}
|
|
991
|
+
.k-add:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
|
|
992
|
+
|
|
993
|
+
/* ---------- LEAD CARD ---------- */
|
|
994
|
+
.lead-card {
|
|
995
|
+
background: var(--surface);
|
|
996
|
+
border: 1px solid var(--line-200);
|
|
997
|
+
border-radius: var(--r-md);
|
|
998
|
+
padding: 12px;
|
|
999
|
+
display: flex; flex-direction: column; gap: 8px;
|
|
1000
|
+
cursor: grab;
|
|
1001
|
+
transition: all var(--t-fast);
|
|
1002
|
+
position: relative;
|
|
1003
|
+
}
|
|
1004
|
+
.lead-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-300); }
|
|
1005
|
+
.lead-card.is-paused { border-left: 3px solid var(--warning-500); }
|
|
1006
|
+
.lead-card-head {
|
|
1007
|
+
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
|
1008
|
+
}
|
|
1009
|
+
.lead-card-name {
|
|
1010
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1011
|
+
font-size: var(--fs-md); font-weight: 600; color: var(--ink-700);
|
|
1012
|
+
}
|
|
1013
|
+
.lead-card-name .flame { color: var(--brand-500); }
|
|
1014
|
+
.lead-card-sub {
|
|
1015
|
+
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1016
|
+
}
|
|
1017
|
+
.lead-card-meta {
|
|
1018
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
1019
|
+
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1020
|
+
}
|
|
1021
|
+
.lead-card-meta .icons {
|
|
1022
|
+
display: inline-flex; gap: 6px; color: var(--ink-300);
|
|
1023
|
+
}
|
|
1024
|
+
.lead-card-foot {
|
|
1025
|
+
display: flex; align-items: center; gap: 6px;
|
|
1026
|
+
padding-top: 8px;
|
|
1027
|
+
border-top: 1px dashed var(--line-200);
|
|
1028
|
+
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1029
|
+
}
|
|
1030
|
+
.lead-card-followup {
|
|
1031
|
+
display: inline-flex; align-items: center; gap: 4px;
|
|
1032
|
+
font-size: var(--fs-xs); color: var(--brand-700); font-weight: 500;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
/* ---------- FILTER CHIPS ---------- */
|
|
1036
|
+
.chips {
|
|
1037
|
+
display: inline-flex; gap: 4px; flex-wrap: wrap;
|
|
1038
|
+
}
|
|
1039
|
+
.chip {
|
|
1040
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1041
|
+
height: 28px; padding: 0 12px;
|
|
1042
|
+
font-family: var(--font-mono);
|
|
1043
|
+
font-size: var(--fs-xs);
|
|
1044
|
+
font-weight: 500;
|
|
1045
|
+
letter-spacing: var(--ls-wide);
|
|
1046
|
+
text-transform: uppercase;
|
|
1047
|
+
color: var(--ink-500);
|
|
1048
|
+
background: transparent;
|
|
1049
|
+
border: 1px solid transparent;
|
|
1050
|
+
border-radius: var(--r-sm);
|
|
1051
|
+
cursor: pointer;
|
|
1052
|
+
transition: all var(--t-fast);
|
|
1053
|
+
}
|
|
1054
|
+
.chip:hover { background: var(--ink-50); color: var(--ink-700); }
|
|
1055
|
+
.chip.active {
|
|
1056
|
+
background: var(--brand-50);
|
|
1057
|
+
color: var(--brand-700);
|
|
1058
|
+
border-color: var(--brand-200);
|
|
1059
|
+
}
|
|
1060
|
+
.chip .count {
|
|
1061
|
+
font-family: var(--font-mono);
|
|
1062
|
+
font-size: var(--fs-2xs);
|
|
1063
|
+
color: inherit; opacity: 0.7;
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
/* ---------- EMPTY STATE ---------- */
|
|
1067
|
+
.empty-state {
|
|
1068
|
+
border: 1px dashed var(--line-300);
|
|
1069
|
+
border-radius: var(--r-md);
|
|
1070
|
+
padding: 32px 16px;
|
|
1071
|
+
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
1072
|
+
color: var(--ink-300);
|
|
1073
|
+
text-align: center;
|
|
1074
|
+
background: transparent;
|
|
1075
|
+
}
|
|
1076
|
+
.empty-state .ico {
|
|
1077
|
+
width: 32px; height: 32px;
|
|
1078
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1079
|
+
color: var(--ink-300);
|
|
1080
|
+
}
|
|
1081
|
+
.empty-state .text {
|
|
1082
|
+
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
/* ---------- HEADER BAND ---------- */
|
|
1086
|
+
.header-band {
|
|
1087
|
+
display: flex; align-items: center; gap: 12px;
|
|
1088
|
+
padding: 16px 32px;
|
|
1089
|
+
background: linear-gradient(180deg, var(--canvas), transparent);
|
|
1090
|
+
border-bottom: 1px solid var(--line-200);
|
|
1091
|
+
}
|
|
1092
|
+
.header-band .ico-box {
|
|
1093
|
+
width: 32px; height: 32px;
|
|
1094
|
+
border-radius: var(--r-md);
|
|
1095
|
+
background: var(--success-50);
|
|
1096
|
+
color: var(--success-700);
|
|
1097
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1098
|
+
}
|
|
1099
|
+
.header-band .title {
|
|
1100
|
+
font-family: var(--font-display);
|
|
1101
|
+
font-size: var(--fs-xl);
|
|
1102
|
+
font-weight: 700;
|
|
1103
|
+
color: var(--ink-700);
|
|
1104
|
+
letter-spacing: -0.012em;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
/* ---------- TABLE ACTIONS ---------- */
|
|
1108
|
+
.t-actions {
|
|
1109
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1110
|
+
}
|
|
1111
|
+
.t-act {
|
|
1112
|
+
width: 22px; height: 22px;
|
|
1113
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1114
|
+
border: 1px solid var(--line-200);
|
|
1115
|
+
border-radius: var(--r-sm);
|
|
1116
|
+
background: var(--surface);
|
|
1117
|
+
cursor: pointer;
|
|
1118
|
+
transition: all var(--t-fast);
|
|
1119
|
+
}
|
|
1120
|
+
.t-act:hover { background: var(--paper); }
|
|
1121
|
+
.t-act.t-confirm { color: var(--success-700); }
|
|
1122
|
+
.t-act.t-confirm:hover { background: var(--success-50); border-color: var(--success-500); }
|
|
1123
|
+
.t-act.t-edit { color: var(--ink-500); }
|
|
1124
|
+
.t-act.t-delete { color: var(--danger-700); }
|
|
1125
|
+
.t-act.t-delete:hover { background: var(--danger-50); border-color: var(--danger-500); }
|
|
1126
|
+
|
|
1127
|
+
/* ---------- BREADCRUMB (formal) ---------- */
|
|
1128
|
+
.bc {
|
|
1129
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
1130
|
+
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1131
|
+
}
|
|
1132
|
+
.bc-sep { color: var(--ink-300); }
|
|
1133
|
+
.bc-item {
|
|
1134
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
1135
|
+
color: var(--ink-500);
|
|
1136
|
+
cursor: pointer;
|
|
1137
|
+
}
|
|
1138
|
+
.bc-item:hover { color: var(--ink-700); }
|
|
1139
|
+
.bc-item.current { color: var(--ink-700); font-weight: 500; cursor: default; }
|
|
1140
|
+
.bc-dot {
|
|
1141
|
+
width: 6px; height: 6px; border-radius: 50%;
|
|
1142
|
+
background: var(--brand-500);
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
/* ---------- ICON GRID ---------- */
|
|
1146
|
+
.icon-grid {
|
|
1147
|
+
display: grid;
|
|
1148
|
+
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
|
1149
|
+
gap: 1px;
|
|
1150
|
+
background: var(--line-200);
|
|
1151
|
+
border: 1px solid var(--line-200);
|
|
1152
|
+
border-radius: var(--r-lg);
|
|
1153
|
+
overflow: hidden;
|
|
1154
|
+
}
|
|
1155
|
+
.icon-cell {
|
|
1156
|
+
background: var(--surface);
|
|
1157
|
+
display: flex; flex-direction: column;
|
|
1158
|
+
align-items: center; justify-content: center; gap: 12px;
|
|
1159
|
+
padding: 20px 8px;
|
|
1160
|
+
cursor: pointer;
|
|
1161
|
+
transition: background var(--t-fast);
|
|
1162
|
+
color: var(--ink-700);
|
|
1163
|
+
}
|
|
1164
|
+
.icon-cell:hover { background: var(--paper); color: var(--brand-600); }
|
|
1165
|
+
.icon-cell:hover .icon-name { color: var(--brand-700); }
|
|
1166
|
+
.icon-cell svg { display: block; }
|
|
1167
|
+
.icon-name {
|
|
1168
|
+
font-family: var(--font-mono);
|
|
1169
|
+
font-size: var(--fs-2xs);
|
|
1170
|
+
color: var(--ink-400);
|
|
1171
|
+
letter-spacing: var(--ls-wide);
|
|
1172
|
+
text-transform: lowercase;
|
|
1173
|
+
transition: color var(--t-fast);
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
/* ---------- AVATAR (square cliente — extras) ---------- */
|
|
1177
|
+
.av-space {
|
|
1178
|
+
width: 24px; height: 24px;
|
|
1179
|
+
border-radius: var(--r-sm);
|
|
1180
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
1181
|
+
font-family: var(--font-display);
|
|
1182
|
+
font-weight: 700;
|
|
1183
|
+
font-size: 11px;
|
|
1184
|
+
color: #fff;
|
|
1185
|
+
flex-shrink: 0;
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
@media (max-width: 1100px) {
|
|
1189
|
+
.swatch-grid { grid-template-columns: repeat(4, 1fr); }
|
|
1190
|
+
.grid-2 { grid-template-columns: 1fr; }
|
|
1191
|
+
.section-header { grid-template-columns: 1fr; gap: 24px; }
|
|
1192
|
+
.section { padding: 56px 32px; }
|
|
1193
|
+
}
|
|
1194
|
+
@media (max-width: 800px) {
|
|
1195
|
+
.app { grid-template-columns: 1fr; }
|
|
1196
|
+
.sidebar { display: none; }
|
|
1197
|
+
.swatch-grid { grid-template-columns: repeat(2, 1fr); }
|
|
1198
|
+
.grid-3 { grid-template-columns: 1fr; }
|
|
1199
|
+
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
|
1200
|
+
}
|
|
1201
|
+
</style>
|
|
13
1202
|
</head>
|
|
14
1203
|
<body>
|
|
15
1204
|
|
|
@@ -98,7 +1287,7 @@
|
|
|
98
1287
|
<div class="eyebrow">01 — Foundations</div>
|
|
99
1288
|
<h2>Paleta cromática</h2>
|
|
100
1289
|
</div>
|
|
101
|
-
<p class="section-desc">Sistema warm, neutro,
|
|
1290
|
+
<p class="section-desc">Sistema warm, neutro, brand-on-paper. A cor da marca (`var(--brand-500)`) é a única assinatura cromática — usar com moderação em CTAs primários, focus rings e brand moments. Nunca como background dominante.</p>
|
|
102
1291
|
</div>
|
|
103
1292
|
|
|
104
1293
|
<div class="stack">
|
|
@@ -106,7 +1295,7 @@
|
|
|
106
1295
|
<!-- BRAND -->
|
|
107
1296
|
<div class="panel">
|
|
108
1297
|
<div class="panel-head">
|
|
109
|
-
<div class="panel-title">Brand ·
|
|
1298
|
+
<div class="panel-title">Brand · scale 50→900</div>
|
|
110
1299
|
<div class="panel-kicker">10 tokens</div>
|
|
111
1300
|
</div>
|
|
112
1301
|
<div class="panel-body">
|
|
@@ -167,7 +1356,7 @@
|
|
|
167
1356
|
</div>
|
|
168
1357
|
<div style="margin-bottom:24px">
|
|
169
1358
|
<div class="sub-label">JetBrains Mono — Código & labels</div>
|
|
170
|
-
<div style="font-family:var(--font-mono); font-size:var(--fs-xl); color:var(--ink-700); line-height:1.2">const
|
|
1359
|
+
<div style="font-family:var(--font-mono); font-size:var(--fs-xl); color:var(--ink-700); line-height:1.2">const brand = #F56F10</div>
|
|
171
1360
|
<div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-mono)</div>
|
|
172
1361
|
</div>
|
|
173
1362
|
<div>
|
|
@@ -271,7 +1460,7 @@
|
|
|
271
1460
|
<div class="eyebrow">06 — Primitives</div>
|
|
272
1461
|
<h2>Botões</h2>
|
|
273
1462
|
</div>
|
|
274
|
-
<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
|
|
1463
|
+
<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 brand de menor peso. Ghost pra ações terciárias e icon-only.</p>
|
|
275
1464
|
</div>
|
|
276
1465
|
|
|
277
1466
|
<div class="panel">
|
|
@@ -342,7 +1531,7 @@
|
|
|
342
1531
|
<div class="spec"><span class="l">Heights</span><span class="v">22 / 28 / 32 / 40 px</span></div>
|
|
343
1532
|
<div class="spec"><span class="l">Border radius</span><span class="v">--r-sm → --r-lg</span></div>
|
|
344
1533
|
<div class="spec"><span class="l">Primary fill</span><span class="v">brand-600 → brand-700 hover</span></div>
|
|
345
|
-
<div class="spec"><span class="l">Focus ring</span><span class="v">--ring-focus (3px
|
|
1534
|
+
<div class="spec"><span class="l">Focus ring</span><span class="v">--ring-focus (3px brand 20%)</span></div>
|
|
346
1535
|
</div>
|
|
347
1536
|
</div>
|
|
348
1537
|
</div>
|
|
@@ -356,7 +1545,7 @@
|
|
|
356
1545
|
<div class="eyebrow">07 — Primitives</div>
|
|
357
1546
|
<h2>Inputs</h2>
|
|
358
1547
|
</div>
|
|
359
|
-
<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
|
|
1548
|
+
<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 brand. 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>
|
|
360
1549
|
</div>
|
|
361
1550
|
|
|
362
1551
|
<div class="panel">
|
|
@@ -453,7 +1642,7 @@
|
|
|
453
1642
|
<div class="panel-body">
|
|
454
1643
|
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags — status (rounded-sm)</div></div>
|
|
455
1644
|
<div class="row">
|
|
456
|
-
<span class="tag tag-
|
|
1645
|
+
<span class="tag tag-brand">New</span>
|
|
457
1646
|
<span class="tag">Optional</span>
|
|
458
1647
|
<span class="tag tag-success">Claimed</span>
|
|
459
1648
|
<span class="tag tag-success">Completed</span>
|
|
@@ -473,9 +1662,9 @@
|
|
|
473
1662
|
|
|
474
1663
|
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tamanhos</div></div>
|
|
475
1664
|
<div class="row">
|
|
476
|
-
<span class="tag tag-
|
|
477
|
-
<span class="tag tag-
|
|
478
|
-
<span class="tag tag-
|
|
1665
|
+
<span class="tag tag-brand tag-xs">XS</span>
|
|
1666
|
+
<span class="tag tag-brand tag-sm">SM</span>
|
|
1667
|
+
<span class="tag tag-brand tag-md">MD</span>
|
|
479
1668
|
</div>
|
|
480
1669
|
|
|
481
1670
|
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Notification badges</div></div>
|
|
@@ -807,7 +1996,7 @@
|
|
|
807
1996
|
<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>
|
|
808
1997
|
<span class="label">Search</span>
|
|
809
1998
|
<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>
|
|
810
|
-
<span class="tag tag-
|
|
1999
|
+
<span class="tag tag-brand tag-xs">NEW</span>
|
|
811
2000
|
</div>
|
|
812
2001
|
<div class="desc">Search the web and get full content from results.</div>
|
|
813
2002
|
</div>
|
|
@@ -1039,7 +2228,7 @@
|
|
|
1039
2228
|
<div class="eyebrow">15 — Patterns</div>
|
|
1040
2229
|
<h2>Code Block</h2>
|
|
1041
2230
|
</div>
|
|
1042
|
-
<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
|
|
2231
|
+
<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 brand. Sempre com botões de eye/copy no canto top-right.</p>
|
|
1043
2232
|
</div>
|
|
1044
2233
|
|
|
1045
2234
|
<div class="panel">
|
|
@@ -1079,7 +2268,7 @@
|
|
|
1079
2268
|
<div class="eyebrow">16 — Patterns</div>
|
|
1080
2269
|
<h2>Banners & Toasts</h2>
|
|
1081
2270
|
</div>
|
|
1082
|
-
<p class="section-desc">Announcement bar (full-width, neutro). Tip card (lateral, com ícone
|
|
2271
|
+
<p class="section-desc">Announcement bar (full-width, neutro). Tip card (lateral, com ícone brand). Toast (bottom centered, ink-700 ou success-500, raio md). Sempre próximo da ação que originou.</p>
|
|
1083
2272
|
</div>
|
|
1084
2273
|
|
|
1085
2274
|
<div class="panel">
|
|
@@ -1286,7 +2475,7 @@
|
|
|
1286
2475
|
<div class="spec"><span class="l">Default (KPI)</span><span class="v">label + ícone colorido + número display</span></div>
|
|
1287
2476
|
<div class="spec"><span class="l">Com progress</span><span class="v">quando o stat tem meta (R$ recebido / previsto)</span></div>
|
|
1288
2477
|
<div class="spec"><span class="l">Crítico</span><span class="v">só quando exige ação imediata (inadimplência)</span></div>
|
|
1289
|
-
<div class="spec"><span class="l">Cor do ícone</span><span class="v">success (positivo) ·
|
|
2478
|
+
<div class="spec"><span class="l">Cor do ícone</span><span class="v">success (positivo) · brand (neutro) · info (referência) · red (alerta) · purple (especial)</span></div>
|
|
1290
2479
|
</div>
|
|
1291
2480
|
</div>
|
|
1292
2481
|
</div>
|
|
@@ -1356,7 +2545,7 @@
|
|
|
1356
2545
|
<div class="eyebrow">21 — App Patterns · CRM</div>
|
|
1357
2546
|
<h2>Funnel & Progress</h2>
|
|
1358
2547
|
</div>
|
|
1359
|
-
<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
|
|
2548
|
+
<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 brand. Mesma altura: 8px no funnel, 4px em stat-card.</p>
|
|
1360
2549
|
</div>
|
|
1361
2550
|
|
|
1362
2551
|
<div class="grid-2">
|
|
@@ -1524,7 +2713,7 @@
|
|
|
1524
2713
|
<div class="eyebrow">23 — App Patterns · CRM</div>
|
|
1525
2714
|
<h2>Lead Card (Pipeline)</h2>
|
|
1526
2715
|
</div>
|
|
1527
|
-
<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
|
|
2716
|
+
<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 brand 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>
|
|
1528
2717
|
</div>
|
|
1529
2718
|
|
|
1530
2719
|
<div class="panel">
|
|
@@ -1612,7 +2801,7 @@
|
|
|
1612
2801
|
<div class="eyebrow">24 — App Patterns · CRM</div>
|
|
1613
2802
|
<h2>Filter Chips</h2>
|
|
1614
2803
|
</div>
|
|
1615
|
-
<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
|
|
2804
|
+
<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 brand-50 + border brand-200. Use SEMPRE quando houver até 6 categorias; acima disso, dropdown.</p>
|
|
1616
2805
|
</div>
|
|
1617
2806
|
|
|
1618
2807
|
<div class="grid-2">
|
|
@@ -1662,7 +2851,7 @@
|
|
|
1662
2851
|
<div class="spec"><span class="l">Altura</span><span class="v">28px</span></div>
|
|
1663
2852
|
<div class="spec"><span class="l">Padding</span><span class="v">0 12px</span></div>
|
|
1664
2853
|
<div class="spec"><span class="l">Border-radius</span><span class="v">--r-sm (4px)</span></div>
|
|
1665
|
-
<div class="spec"><span class="l">Active</span><span class="v">bg
|
|
2854
|
+
<div class="spec"><span class="l">Active</span><span class="v">bg brand-50 · color brand-700 · border brand-200</span></div>
|
|
1666
2855
|
<div class="spec"><span class="l">Limite recomendado</span><span class="v">≤ 6 chips · acima disso use dropdown</span></div>
|
|
1667
2856
|
</div>
|
|
1668
2857
|
</div>
|
|
@@ -1944,16 +3133,16 @@ links.forEach(l => l.addEventListener('click', e => {
|
|
|
1944
3133
|
===================================================== */
|
|
1945
3134
|
|
|
1946
3135
|
/* --- Color swatches --- */
|
|
1947
|
-
const
|
|
1948
|
-
['
|
|
1949
|
-
['
|
|
1950
|
-
['brand-600', '
|
|
1951
|
-
['
|
|
3136
|
+
const brand = [
|
|
3137
|
+
['brand-50', '{{brand.50}}'], ['brand-100', '{{brand.100}}'], ['brand-200', '{{brand.200}}'],
|
|
3138
|
+
['brand-300', '{{brand.300}}'], ['brand-400', '{{brand.400}}'], ['brand-500', '{{brand.500}}'],
|
|
3139
|
+
['brand-600', '{{brand.600}}'], ['brand-700', '{{brand.700}}'], ['brand-800', '{{brand.800}}'],
|
|
3140
|
+
['brand-900', '{{brand.900}}'],
|
|
1952
3141
|
];
|
|
1953
3142
|
const surface = [
|
|
1954
3143
|
['paper', '#fafaf8'], ['canvas', '#f5f4f1'], ['surface', '#ffffff'],
|
|
1955
3144
|
['line-100', '#f0eeea'], ['line-200', '#e8e6e1'], ['line-300', '#d8d5cf'],
|
|
1956
|
-
['
|
|
3145
|
+
['bg-void', '{{brand.500}}-bg'], ['glucon-grey', '#1b1a1e'],
|
|
1957
3146
|
];
|
|
1958
3147
|
const ink = [
|
|
1959
3148
|
['ink-50','#f4f3f0'], ['ink-100','#e8e6e1'], ['ink-200','#c8c5bf'],
|
|
@@ -1976,7 +3165,7 @@ function swatchHTML(name, hex) {
|
|
|
1976
3165
|
</div>
|
|
1977
3166
|
</div>`;
|
|
1978
3167
|
}
|
|
1979
|
-
document.getElementById('emberGrid').innerHTML =
|
|
3168
|
+
document.getElementById('emberGrid').innerHTML = brand.map(([n,h]) => swatchHTML(n,h)).join('');
|
|
1980
3169
|
document.getElementById('surfaceGrid').innerHTML = surface.map(([n,h]) => swatchHTML(n,h)).join('');
|
|
1981
3170
|
document.getElementById('inkGrid').innerHTML = ink.map(([n,h]) => swatchHTML(n,h)).join('');
|
|
1982
3171
|
document.getElementById('semanticGrid').innerHTML = semantic.map(g => `
|
|
@@ -2148,7 +3337,7 @@ if (iconGrid) {
|
|
|
2148
3337
|
|
|
2149
3338
|
/* --- Space color grid (CRM clientes) --- */
|
|
2150
3339
|
const spaces = [
|
|
2151
|
-
{ name: 'ZARK', key: 'zark', hex: '#f56f10', use: 'Org-mãe ·
|
|
3340
|
+
{ name: 'ZARK', key: 'zark', hex: '#f56f10', use: 'Org-mãe · brand brand' },
|
|
2152
3341
|
{ name: 'ALLSEC', key: 'allsec', hex: '#c2410c', use: 'Burnt orange · seguro' },
|
|
2153
3342
|
{ name: 'VIPCAR', key: 'vipcar', hex: '#ea580c', use: 'Deep orange · auto' },
|
|
2154
3343
|
{ name: 'LIMPPE TEC',key: 'limppe', hex: '#f59e0b', use: 'Amber · serviço' },
|