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