zark-design 2.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/cli.js +363 -90
- package/package.json +2 -2
- package/templates/{README.md → README.md.hbs} +8 -8
- package/templates/_shared/ASSETS-README.md.hbs +39 -0
- package/templates/_shared/tokens.css.hbs +202 -0
- package/templates/_shared/tokens.js.hbs +34 -0
- package/templates/html/components.css +22 -22
- package/templates/html/{index.html → index.html.hbs} +3 -3
- package/templates/html/{showcase.html → showcase.html.hbs} +53 -1424
- package/templates/jsx/{App.example.jsx → App.example.jsx.hbs} +10 -10
- package/templates/jsx/components/Avatar.jsx +2 -2
- package/templates/jsx/components/Funnel.jsx +2 -2
- package/templates/jsx/components/Sidebar.jsx +1 -1
- package/templates/jsx/components.css +22 -22
- package/templates/jsx/icons.jsx +2 -2
- package/templates/jsx/index.js +27 -27
- package/templates/presets/zark/preset.json +26 -0
- package/templates/html/tokens.css +0 -283
- package/templates/jsx/assets/logo-zark-laranja.png +0 -0
- package/templates/jsx/assets/zark-icon.png +0 -0
- package/templates/jsx/tokens.css +0 -283
- package/templates/jsx/tokens.js +0 -62
- /package/templates/{html/assets/zark-icon.png → presets/zark/assets/icon.png} +0 -0
- /package/templates/{html/assets/logo-zark-laranja.png → presets/zark/assets/logo-primary.png} +0 -0
|
@@ -3,1384 +3,13 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8"/>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
6
|
-
<title>
|
|
6
|
+
<title>{{name}} — Design System</title>
|
|
7
7
|
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
8
8
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
|
9
9
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
10
10
|
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
ZARK DESIGN SYSTEM — TOKENS (embedded)
|
|
14
|
-
============================================================ */
|
|
15
|
-
:root {
|
|
16
|
-
/* Brand / Ember */
|
|
17
|
-
--ember-50: #fff3e9;
|
|
18
|
-
--ember-100: #ffe1c8;
|
|
19
|
-
--ember-200: #ffc28e;
|
|
20
|
-
--ember-300: #ffa056;
|
|
21
|
-
--ember-400: #ff8a3a;
|
|
22
|
-
--ember-500: #f56f10;
|
|
23
|
-
--ember-600: #d45e0d;
|
|
24
|
-
--ember-700: #ad4a09;
|
|
25
|
-
--ember-800: #843706;
|
|
26
|
-
--ember-900: #5e2704;
|
|
27
|
-
--liquid-lava: #f56f10;
|
|
28
|
-
--dark-void: #151419;
|
|
29
|
-
--glucon-grey: #1b1a1e;
|
|
30
|
-
|
|
31
|
-
/* Neutrals */
|
|
32
|
-
--paper: #fafaf8;
|
|
33
|
-
--canvas: #f5f4f1;
|
|
34
|
-
--surface: #ffffff;
|
|
35
|
-
--line-100: #f0eeea;
|
|
36
|
-
--line-200: #e8e6e1;
|
|
37
|
-
--line-300: #d8d5cf;
|
|
38
|
-
|
|
39
|
-
--ink-50: #f4f3f0;
|
|
40
|
-
--ink-100: #e8e6e1;
|
|
41
|
-
--ink-200: #c8c5bf;
|
|
42
|
-
--ink-300: #a09c95;
|
|
43
|
-
--ink-400: #6f6b64;
|
|
44
|
-
--ink-500: #4a4741;
|
|
45
|
-
--ink-600: #2e2c28;
|
|
46
|
-
--ink-700: #1a1916;
|
|
47
|
-
--ink-800: #111110;
|
|
48
|
-
--ink-900: #0a0a09;
|
|
49
|
-
|
|
50
|
-
/* Semantic */
|
|
51
|
-
--success-50: #ecfdf3;
|
|
52
|
-
--success-500: #10a960;
|
|
53
|
-
--success-700: #067a44;
|
|
54
|
-
--warning-50: #fff8e6;
|
|
55
|
-
--warning-500: #d99000;
|
|
56
|
-
--warning-700: #9a6500;
|
|
57
|
-
--danger-50: #fef1f1;
|
|
58
|
-
--danger-500: #dc3545;
|
|
59
|
-
--danger-700: #a52833;
|
|
60
|
-
--info-50: #eef5ff;
|
|
61
|
-
--info-500: #2f7adc;
|
|
62
|
-
--info-700: #1f5ba8;
|
|
63
|
-
|
|
64
|
-
--tag-bg: #fff0e0;
|
|
65
|
-
--tag-fg: #ad4a09;
|
|
66
|
-
--code-bg: #fff5ea;
|
|
67
|
-
--code-fg: #ad4a09;
|
|
68
|
-
|
|
69
|
-
/* Typography */
|
|
70
|
-
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
71
|
-
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
72
|
-
--font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
|
|
73
|
-
--font-ui: "Inter", -apple-system, sans-serif;
|
|
74
|
-
|
|
75
|
-
--fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
|
|
76
|
-
--fs-base:14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px;
|
|
77
|
-
--fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 64px;
|
|
78
|
-
--fs-display: 88px;
|
|
79
|
-
|
|
80
|
-
--lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.45; --lh-loose: 1.6;
|
|
81
|
-
|
|
82
|
-
--ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0;
|
|
83
|
-
--ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.14em;
|
|
84
|
-
|
|
85
|
-
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
|
|
86
|
-
|
|
87
|
-
/* Spacing */
|
|
88
|
-
--sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px;
|
|
89
|
-
--sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px; --sp-10: 20px;
|
|
90
|
-
--sp-12: 24px; --sp-14: 28px; --sp-16: 32px; --sp-20: 40px; --sp-24: 48px;
|
|
91
|
-
--sp-32: 64px; --sp-40: 80px; --sp-48: 96px;
|
|
92
|
-
|
|
93
|
-
/* Radii */
|
|
94
|
-
--r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
|
|
95
|
-
--r-xl: 12px; --r-2xl: 16px; --r-3xl: 20px;
|
|
96
|
-
|
|
97
|
-
/* Shadows */
|
|
98
|
-
--shadow-xs: 0 1px 0 rgba(20, 17, 12, 0.04);
|
|
99
|
-
--shadow-sm: 0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
|
|
100
|
-
--shadow-md: 0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
|
|
101
|
-
--shadow-lg: 0 12px 32px rgba(20, 17, 12, 0.08), 0 2px 6px rgba(20, 17, 12, 0.04);
|
|
102
|
-
--shadow-xl: 0 24px 64px rgba(20, 17, 12, 0.12), 0 4px 12px rgba(20, 17, 12, 0.05);
|
|
103
|
-
--shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);
|
|
104
|
-
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
105
|
-
|
|
106
|
-
--ring-focus: 0 0 0 3px rgba(255, 93, 31, 0.20);
|
|
107
|
-
--ring-focus-soft: 0 0 0 3px rgba(255, 93, 31, 0.12);
|
|
108
|
-
|
|
109
|
-
/* Motion */
|
|
110
|
-
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
111
|
-
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
112
|
-
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
113
|
-
--t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; --t-slower: 420ms;
|
|
114
|
-
|
|
115
|
-
/* Layout */
|
|
116
|
-
--sidebar-w: 240px; --topbar-h: 56px; --container-max: 1280px;
|
|
117
|
-
|
|
118
|
-
/* ---------- SPACE / CLIENTE COLORS (CRM) ----------
|
|
119
|
-
Cor única por espaço — usada em ícone, tag, avatar, accent.
|
|
120
|
-
Sempre tom mais saturado (500) + tom suave (50/100) para bg leve. */
|
|
121
|
-
--space-zark: #f56f10; /* ember-500 — brand */
|
|
122
|
-
--space-zark-soft: #fff3e9;
|
|
123
|
-
--space-allsec: #c2410c; /* burnt orange */
|
|
124
|
-
--space-allsec-soft: #fff3e9;
|
|
125
|
-
--space-vipcar: #ea580c; /* deep orange */
|
|
126
|
-
--space-vipcar-soft: #fff3e9;
|
|
127
|
-
--space-limppe: #f59e0b; /* amber */
|
|
128
|
-
--space-limppe-soft: #fff8e6;
|
|
129
|
-
--space-gerais: #1f2937; /* slate near-black */
|
|
130
|
-
--space-gerais-soft: #f4f3f0;
|
|
131
|
-
--space-mixshop: #b91c1c; /* deep red */
|
|
132
|
-
--space-mixshop-soft:#fef1f1;
|
|
133
|
-
--space-vipseg: #991b1b; /* darker red */
|
|
134
|
-
--space-vipseg-soft: #fef1f1;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
[data-theme="dark"] {
|
|
138
|
-
--ember-50: #2a1810; --ember-100: #3d2114; --ember-200: #5e2704;
|
|
139
|
-
--ember-300: #843706; --ember-400: #ad4a09; --ember-500: #f56f10;
|
|
140
|
-
--ember-600: #ff8a3a; --ember-700: #ffa056; --ember-800: #ffc28e;
|
|
141
|
-
--ember-900: #ffe1c8;
|
|
142
|
-
|
|
143
|
-
--paper: #0e0d11; --canvas: #151419; --surface: #1b1a1e;
|
|
144
|
-
--line-100: #232227; --line-200: #2c2b32; --line-300: #3a383f;
|
|
145
|
-
|
|
146
|
-
--ink-50: #1a1916; --ink-100: #2c2b27; --ink-200: #4a4741;
|
|
147
|
-
--ink-300: #6f6b64; --ink-400: #a09c95; --ink-500: #c8c5bf;
|
|
148
|
-
--ink-600: #e0ddd6; --ink-700: #f0ede5; --ink-800: #f7f5ef;
|
|
149
|
-
--ink-900: #fafaf8;
|
|
150
|
-
|
|
151
|
-
--success-50: #0f2419;
|
|
152
|
-
--warning-50: #2a1f08;
|
|
153
|
-
--danger-50: #2a1010;
|
|
154
|
-
--info-50: #0e1a2c;
|
|
155
|
-
|
|
156
|
-
--tag-bg: #3d2114; --tag-fg: #ffc28e;
|
|
157
|
-
--code-bg: #2a1810; --code-fg: #ffa056;
|
|
158
|
-
|
|
159
|
-
--shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.5);
|
|
160
|
-
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
161
|
-
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
162
|
-
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
163
|
-
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
164
|
-
--shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
165
|
-
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
166
|
-
|
|
167
|
-
--ring-focus: 0 0 0 3px rgba(255, 138, 58, 0.30);
|
|
168
|
-
--ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
/* ============================================================
|
|
172
|
-
BASE
|
|
173
|
-
============================================================ */
|
|
174
|
-
* { box-sizing: border-box; }
|
|
175
|
-
html, body {
|
|
176
|
-
margin: 0; padding: 0;
|
|
177
|
-
font-family: var(--font-sans);
|
|
178
|
-
font-size: var(--fs-base);
|
|
179
|
-
line-height: var(--lh-base);
|
|
180
|
-
color: var(--ink-700);
|
|
181
|
-
background: var(--paper);
|
|
182
|
-
-webkit-font-smoothing: antialiased;
|
|
183
|
-
text-rendering: optimizeLegibility;
|
|
184
|
-
}
|
|
185
|
-
::selection { background: var(--ember-200); color: var(--ink-700); }
|
|
186
|
-
a { color: inherit; text-decoration: none; }
|
|
187
|
-
button { font-family: inherit; }
|
|
188
|
-
|
|
189
|
-
@keyframes zk-spin { to { transform: rotate(360deg); } }
|
|
190
|
-
@keyframes zk-fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }
|
|
191
|
-
|
|
192
|
-
/* ============================================================
|
|
193
|
-
APP SHELL
|
|
194
|
-
============================================================ */
|
|
195
|
-
.app {
|
|
196
|
-
display: grid;
|
|
197
|
-
grid-template-columns: var(--sidebar-w) 1fr;
|
|
198
|
-
min-height: 100vh;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
/* ---------- SIDEBAR ---------- */
|
|
202
|
-
.sidebar {
|
|
203
|
-
position: sticky; top: 0; height: 100vh;
|
|
204
|
-
background: var(--canvas);
|
|
205
|
-
border-right: 1px solid var(--line-200);
|
|
206
|
-
padding: 20px 14px;
|
|
207
|
-
display: flex; flex-direction: column;
|
|
208
|
-
overflow-y: auto;
|
|
209
|
-
}
|
|
210
|
-
.sidebar-brand {
|
|
211
|
-
display: flex; align-items: center; gap: 10px;
|
|
212
|
-
padding: 8px 8px 22px;
|
|
213
|
-
}
|
|
214
|
-
.sidebar-logo {
|
|
215
|
-
height: 36px; width: auto;
|
|
216
|
-
display: block;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.sidebar-section {
|
|
220
|
-
margin-top: 18px;
|
|
221
|
-
display: flex; flex-direction: column; gap: 1px;
|
|
222
|
-
}
|
|
223
|
-
.sidebar-eyebrow {
|
|
224
|
-
font-family: var(--font-mono);
|
|
225
|
-
font-size: var(--fs-2xs);
|
|
226
|
-
letter-spacing: var(--ls-widest);
|
|
227
|
-
text-transform: uppercase;
|
|
228
|
-
color: var(--ink-300);
|
|
229
|
-
padding: 6px 10px 8px;
|
|
230
|
-
}
|
|
231
|
-
.sidebar-link {
|
|
232
|
-
display: flex; align-items: center; gap: 10px;
|
|
233
|
-
padding: 7px 10px;
|
|
234
|
-
font-size: var(--fs-md);
|
|
235
|
-
color: var(--ink-500);
|
|
236
|
-
border-radius: var(--r-md);
|
|
237
|
-
cursor: pointer;
|
|
238
|
-
transition: all var(--t-fast) var(--ease-out);
|
|
239
|
-
position: relative;
|
|
240
|
-
}
|
|
241
|
-
.sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
|
|
242
|
-
.sidebar-link.active {
|
|
243
|
-
color: var(--ember-700);
|
|
244
|
-
background: var(--ember-50);
|
|
245
|
-
font-weight: 500;
|
|
246
|
-
}
|
|
247
|
-
.sidebar-link .num {
|
|
248
|
-
font-family: var(--font-mono);
|
|
249
|
-
font-size: var(--fs-2xs);
|
|
250
|
-
color: var(--ink-300);
|
|
251
|
-
letter-spacing: var(--ls-wide);
|
|
252
|
-
width: 18px;
|
|
253
|
-
}
|
|
254
|
-
.sidebar-link.active .num { color: var(--ember-600); }
|
|
255
|
-
|
|
256
|
-
.sidebar-footer {
|
|
257
|
-
margin-top: auto;
|
|
258
|
-
padding: 12px 4px 0;
|
|
259
|
-
border-top: 1px solid var(--line-200);
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
/* ---------- TOP BAR ---------- */
|
|
263
|
-
.topbar {
|
|
264
|
-
position: sticky; top: 0; z-index: 30;
|
|
265
|
-
height: var(--topbar-h);
|
|
266
|
-
background: rgba(250, 250, 248, 0.78);
|
|
267
|
-
backdrop-filter: blur(12px) saturate(180%);
|
|
268
|
-
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
269
|
-
border-bottom: 1px solid var(--line-200);
|
|
270
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
271
|
-
padding: 0 32px;
|
|
272
|
-
}
|
|
273
|
-
[data-theme="dark"] .topbar { background: rgba(14, 13, 17, 0.78); }
|
|
274
|
-
.topbar-left {
|
|
275
|
-
display: flex; align-items: center; gap: 12px;
|
|
276
|
-
}
|
|
277
|
-
.crumb {
|
|
278
|
-
font-family: var(--font-mono);
|
|
279
|
-
font-size: var(--fs-sm);
|
|
280
|
-
color: var(--ink-400);
|
|
281
|
-
letter-spacing: var(--ls-wide);
|
|
282
|
-
}
|
|
283
|
-
.crumb b { color: var(--ink-700); font-weight: 500; }
|
|
284
|
-
.topbar-right { display: flex; align-items: center; gap: 8px; }
|
|
285
|
-
|
|
286
|
-
/* ---------- MAIN ---------- */
|
|
287
|
-
main { background: var(--paper); }
|
|
288
|
-
.section {
|
|
289
|
-
border-top: 1px solid var(--line-200);
|
|
290
|
-
padding: 80px 64px;
|
|
291
|
-
}
|
|
292
|
-
.section:first-child { border-top: none; }
|
|
293
|
-
.section-inner { max-width: 1200px; margin: 0 auto; }
|
|
294
|
-
.section-header {
|
|
295
|
-
display: grid;
|
|
296
|
-
grid-template-columns: minmax(220px, 280px) 1fr;
|
|
297
|
-
gap: 64px;
|
|
298
|
-
margin-bottom: 56px;
|
|
299
|
-
align-items: start;
|
|
300
|
-
}
|
|
301
|
-
.eyebrow {
|
|
302
|
-
font-family: var(--font-mono);
|
|
303
|
-
font-size: var(--fs-xs);
|
|
304
|
-
letter-spacing: var(--ls-widest);
|
|
305
|
-
text-transform: uppercase;
|
|
306
|
-
color: var(--ember-600);
|
|
307
|
-
margin-bottom: 14px;
|
|
308
|
-
}
|
|
309
|
-
.section h2 {
|
|
310
|
-
font-family: var(--font-display);
|
|
311
|
-
font-size: var(--fs-3xl);
|
|
312
|
-
line-height: var(--lh-tight);
|
|
313
|
-
letter-spacing: var(--ls-tight);
|
|
314
|
-
margin: 0;
|
|
315
|
-
color: var(--ink-700);
|
|
316
|
-
font-weight: 700;
|
|
317
|
-
}
|
|
318
|
-
.section-desc {
|
|
319
|
-
margin: 0;
|
|
320
|
-
color: var(--ink-400);
|
|
321
|
-
font-size: var(--fs-lg);
|
|
322
|
-
line-height: 1.55;
|
|
323
|
-
max-width: 640px;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
/* ---------- PANEL ---------- */
|
|
327
|
-
.panel {
|
|
328
|
-
background: var(--surface);
|
|
329
|
-
border: 1px solid var(--line-200);
|
|
330
|
-
border-radius: var(--r-xl);
|
|
331
|
-
overflow: hidden;
|
|
332
|
-
box-shadow: var(--shadow-sm);
|
|
333
|
-
}
|
|
334
|
-
.panel-head {
|
|
335
|
-
padding: 14px 20px;
|
|
336
|
-
border-bottom: 1px solid var(--line-100);
|
|
337
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
338
|
-
background: var(--paper);
|
|
339
|
-
}
|
|
340
|
-
.panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-600); }
|
|
341
|
-
.panel-kicker {
|
|
342
|
-
font-family: var(--font-mono);
|
|
343
|
-
font-size: var(--fs-2xs);
|
|
344
|
-
letter-spacing: var(--ls-wider);
|
|
345
|
-
text-transform: uppercase;
|
|
346
|
-
color: var(--ink-300);
|
|
347
|
-
}
|
|
348
|
-
.panel-body { padding: 24px; }
|
|
349
|
-
.panel-body.flush { padding: 0; }
|
|
350
|
-
|
|
351
|
-
.sub-label {
|
|
352
|
-
font-family: var(--font-mono);
|
|
353
|
-
font-size: var(--fs-2xs);
|
|
354
|
-
letter-spacing: var(--ls-wider);
|
|
355
|
-
text-transform: uppercase;
|
|
356
|
-
color: var(--ink-300);
|
|
357
|
-
margin-bottom: 12px;
|
|
358
|
-
}
|
|
359
|
-
.row {
|
|
360
|
-
display: flex; flex-wrap: wrap;
|
|
361
|
-
align-items: center; gap: 10px;
|
|
362
|
-
margin-bottom: 24px;
|
|
363
|
-
}
|
|
364
|
-
.row:last-child { margin-bottom: 0; }
|
|
365
|
-
.stack { display: flex; flex-direction: column; gap: 16px; }
|
|
366
|
-
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
|
367
|
-
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
368
|
-
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
369
|
-
|
|
370
|
-
/* ============================================================
|
|
371
|
-
COMPONENTS
|
|
372
|
-
============================================================ */
|
|
373
|
-
|
|
374
|
-
/* --- Buttons --- */
|
|
375
|
-
.btn {
|
|
376
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
377
|
-
gap: 6px;
|
|
378
|
-
height: 32px; padding: 0 12px;
|
|
379
|
-
font-size: var(--fs-md); font-weight: 500;
|
|
380
|
-
font-family: var(--font-sans);
|
|
381
|
-
border: 1px solid transparent;
|
|
382
|
-
border-radius: var(--r-md);
|
|
383
|
-
cursor: pointer;
|
|
384
|
-
white-space: nowrap;
|
|
385
|
-
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
|
|
386
|
-
}
|
|
387
|
-
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
|
|
388
|
-
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
|
|
389
|
-
|
|
390
|
-
.btn-xs { height: 22px; padding: 0 8px; font-size: var(--fs-xs); border-radius: var(--r-sm); gap: 4px; }
|
|
391
|
-
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-md); }
|
|
392
|
-
.btn-md { height: 32px; padding: 0 12px; font-size: var(--fs-md); border-radius: var(--r-md); }
|
|
393
|
-
.btn-lg { height: 40px; padding: 0 16px; font-size: var(--fs-base); border-radius: var(--r-lg); gap: 8px; }
|
|
394
|
-
|
|
395
|
-
.btn-primary {
|
|
396
|
-
background: var(--ember-600); color: #fff;
|
|
397
|
-
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18);
|
|
398
|
-
}
|
|
399
|
-
.btn-primary:hover { background: var(--ember-700); }
|
|
400
|
-
.btn-secondary {
|
|
401
|
-
background: var(--surface); color: var(--ink-700);
|
|
402
|
-
border-color: var(--line-300);
|
|
403
|
-
box-shadow: var(--shadow-xs);
|
|
404
|
-
}
|
|
405
|
-
.btn-secondary:hover { background: var(--paper); }
|
|
406
|
-
.btn-soft {
|
|
407
|
-
background: var(--ember-50); color: var(--ember-700);
|
|
408
|
-
}
|
|
409
|
-
.btn-soft:hover { background: var(--ember-100); }
|
|
410
|
-
.btn-ghost {
|
|
411
|
-
background: transparent; color: var(--ink-600);
|
|
412
|
-
}
|
|
413
|
-
.btn-ghost:hover { background: var(--ink-50); }
|
|
414
|
-
.btn-danger {
|
|
415
|
-
background: var(--surface); color: var(--danger-700);
|
|
416
|
-
border-color: var(--line-300);
|
|
417
|
-
}
|
|
418
|
-
.btn-danger:hover { background: var(--danger-50); }
|
|
419
|
-
.btn-icon-only { padding: 0; width: 32px; }
|
|
420
|
-
.btn-icon-only.btn-sm { width: 28px; }
|
|
421
|
-
.btn-icon-only.btn-xs { width: 22px; }
|
|
422
|
-
|
|
423
|
-
.spinner {
|
|
424
|
-
width: 14px; height: 14px;
|
|
425
|
-
border: 1.5px solid rgba(255,255,255,0.4);
|
|
426
|
-
border-top-color: #fff;
|
|
427
|
-
border-radius: 50%;
|
|
428
|
-
animation: zk-spin 0.8s linear infinite;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
/* --- Input --- */
|
|
432
|
-
.input {
|
|
433
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
434
|
-
height: 36px; padding: 0 12px;
|
|
435
|
-
background: var(--surface);
|
|
436
|
-
border: 1px solid var(--line-300);
|
|
437
|
-
border-radius: var(--r-lg);
|
|
438
|
-
width: 100%;
|
|
439
|
-
transition: box-shadow var(--t-fast), border-color var(--t-fast);
|
|
440
|
-
}
|
|
441
|
-
.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--ember-400); }
|
|
442
|
-
.input.invalid { border-color: var(--danger-500); }
|
|
443
|
-
.input.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
|
|
444
|
-
.input-sm { height: 28px; padding: 0 8px; font-size: var(--fs-sm); }
|
|
445
|
-
.input-md { height: 36px; }
|
|
446
|
-
.input-lg { height: 44px; padding: 0 14px; font-size: var(--fs-base); }
|
|
447
|
-
.input input {
|
|
448
|
-
flex: 1; border: none; outline: none; background: transparent;
|
|
449
|
-
font-size: var(--fs-md); color: var(--ink-700);
|
|
450
|
-
font-family: var(--font-sans); min-width: 0;
|
|
451
|
-
}
|
|
452
|
-
.input.mono input { font-family: var(--font-mono); }
|
|
453
|
-
.input .ico { color: var(--ink-300); display: inline-flex; }
|
|
454
|
-
.input .suffix { color: var(--ink-300); display: inline-flex; align-items: center; gap: 4px; }
|
|
455
|
-
|
|
456
|
-
/* --- URL input (full-width search-style) --- */
|
|
457
|
-
.url-input-full {
|
|
458
|
-
display: flex; align-items: center; width: 100%; max-width: 520px; height: 44px;
|
|
459
|
-
background: var(--surface);
|
|
460
|
-
border: 1px solid var(--line-300);
|
|
461
|
-
border-radius: var(--r-md);
|
|
462
|
-
box-shadow: var(--shadow-sm);
|
|
463
|
-
overflow: hidden;
|
|
464
|
-
}
|
|
465
|
-
.url-input-full .scheme {
|
|
466
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
467
|
-
padding: 0 14px; height: 100%;
|
|
468
|
-
color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-sm);
|
|
469
|
-
border-right: 1px solid var(--line-200);
|
|
470
|
-
}
|
|
471
|
-
.url-input-full input {
|
|
472
|
-
flex: 1; border: none; outline: none; background: transparent;
|
|
473
|
-
padding: 0 16px; font-size: var(--fs-md); color: var(--ink-700);
|
|
474
|
-
font-family: var(--font-mono);
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
/* --- Tag --- */
|
|
478
|
-
.tag {
|
|
479
|
-
display: inline-flex; align-items: center; gap: 4px;
|
|
480
|
-
height: 22px; padding: 0 8px;
|
|
481
|
-
font-size: var(--fs-xs); font-weight: 500;
|
|
482
|
-
font-family: var(--font-mono);
|
|
483
|
-
letter-spacing: var(--ls-wide);
|
|
484
|
-
text-transform: uppercase;
|
|
485
|
-
border-radius: var(--r-sm);
|
|
486
|
-
background: var(--ink-50); color: var(--ink-500);
|
|
487
|
-
}
|
|
488
|
-
.tag-xs { height: 18px; padding: 0 6px; font-size: var(--fs-2xs); }
|
|
489
|
-
.tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
|
|
490
|
-
.tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
|
|
491
|
-
.tag-square { border-radius: var(--r-xs); }
|
|
492
|
-
.tag-ember { background: var(--ember-50); color: var(--ember-700); }
|
|
493
|
-
.tag-mono { background: var(--tag-bg); color: var(--tag-fg); }
|
|
494
|
-
.tag-success { background: var(--success-50); color: var(--success-700); }
|
|
495
|
-
.tag-warning { background: var(--warning-50); color: var(--warning-700); }
|
|
496
|
-
.tag-danger { background: var(--danger-50); color: var(--danger-700); }
|
|
497
|
-
.tag-info { background: var(--info-50); color: var(--info-700); }
|
|
498
|
-
|
|
499
|
-
/* --- Badge --- */
|
|
500
|
-
.badge {
|
|
501
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
502
|
-
min-width: 18px; height: 18px; padding: 0 5px;
|
|
503
|
-
background: var(--ember-500); color: #fff;
|
|
504
|
-
font-size: var(--fs-2xs); font-weight: 600;
|
|
505
|
-
border-radius: var(--r-sm);
|
|
506
|
-
}
|
|
507
|
-
.badge-ink { background: var(--ink-600); }
|
|
508
|
-
|
|
509
|
-
/* --- Toggle (square-style switch) --- */
|
|
510
|
-
.toggle {
|
|
511
|
-
width: 36px; height: 20px; padding: 2px;
|
|
512
|
-
border-radius: var(--r-sm);
|
|
513
|
-
background: var(--ink-200);
|
|
514
|
-
border: none; cursor: pointer; position: relative;
|
|
515
|
-
transition: background var(--t-base) var(--ease-out);
|
|
516
|
-
}
|
|
517
|
-
.toggle.on { background: var(--ember-500); }
|
|
518
|
-
.toggle .knob {
|
|
519
|
-
position: absolute; top: 2px; left: 2px;
|
|
520
|
-
width: 16px; height: 16px; border-radius: var(--r-xs);
|
|
521
|
-
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.18);
|
|
522
|
-
transition: left var(--t-base) var(--ease-out);
|
|
523
|
-
}
|
|
524
|
-
.toggle.on .knob { left: 18px; }
|
|
525
|
-
.toggle-sm { width: 28px; height: 16px; }
|
|
526
|
-
.toggle-sm .knob { width: 12px; height: 12px; }
|
|
527
|
-
.toggle-sm.on .knob { left: 14px; }
|
|
528
|
-
|
|
529
|
-
/* --- Segmented --- */
|
|
530
|
-
.segmented {
|
|
531
|
-
display: inline-flex; padding: 3px; gap: 2px;
|
|
532
|
-
background: var(--ink-50);
|
|
533
|
-
border: 1px solid var(--line-200);
|
|
534
|
-
border-radius: var(--r-lg);
|
|
535
|
-
}
|
|
536
|
-
.segmented button {
|
|
537
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
538
|
-
height: 28px; padding: 0 12px;
|
|
539
|
-
font-size: var(--fs-sm); font-weight: 500;
|
|
540
|
-
color: var(--ink-400);
|
|
541
|
-
background: transparent;
|
|
542
|
-
border: none; cursor: pointer;
|
|
543
|
-
border-radius: var(--r-md);
|
|
544
|
-
transition: all var(--t-fast);
|
|
545
|
-
}
|
|
546
|
-
.segmented button.active {
|
|
547
|
-
color: var(--ink-700); font-weight: 600;
|
|
548
|
-
background: var(--surface);
|
|
549
|
-
box-shadow: var(--shadow-xs), 0 0 0 1px var(--line-200);
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
/* --- Avatar --- */
|
|
553
|
-
.avatar {
|
|
554
|
-
width: 24px; height: 24px;
|
|
555
|
-
background: var(--ember-500); color: #fff;
|
|
556
|
-
border-radius: 50%;
|
|
557
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
558
|
-
font-size: 11px; font-weight: 600;
|
|
559
|
-
font-family: var(--font-display);
|
|
560
|
-
flex-shrink: 0;
|
|
561
|
-
}
|
|
562
|
-
.avatar-sq { border-radius: var(--r-sm); }
|
|
563
|
-
|
|
564
|
-
/* --- Kbd --- */
|
|
565
|
-
.kbd {
|
|
566
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
567
|
-
min-width: 18px; height: 18px; padding: 0 4px;
|
|
568
|
-
font-family: var(--font-mono); font-size: var(--fs-2xs);
|
|
569
|
-
color: var(--ink-400);
|
|
570
|
-
background: var(--surface);
|
|
571
|
-
border: 1px solid var(--line-200); border-bottom-width: 2px;
|
|
572
|
-
border-radius: var(--r-sm);
|
|
573
|
-
}
|
|
574
|
-
|
|
575
|
-
/* ============================================================
|
|
576
|
-
FOUNDATIONS GRIDS
|
|
577
|
-
============================================================ */
|
|
578
|
-
|
|
579
|
-
/* --- Color swatches --- */
|
|
580
|
-
.swatch-grid {
|
|
581
|
-
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
|
|
582
|
-
}
|
|
583
|
-
.swatch {
|
|
584
|
-
border-radius: var(--r-lg);
|
|
585
|
-
overflow: hidden;
|
|
586
|
-
border: 1px solid var(--line-200);
|
|
587
|
-
background: var(--surface);
|
|
588
|
-
}
|
|
589
|
-
.swatch-color { height: 76px; }
|
|
590
|
-
.swatch-meta { padding: 10px 12px; }
|
|
591
|
-
.swatch-name {
|
|
592
|
-
font-family: var(--font-mono);
|
|
593
|
-
font-size: var(--fs-sm);
|
|
594
|
-
font-weight: 500;
|
|
595
|
-
color: var(--ink-700);
|
|
596
|
-
}
|
|
597
|
-
.swatch-hex {
|
|
598
|
-
font-family: var(--font-mono);
|
|
599
|
-
font-size: var(--fs-2xs);
|
|
600
|
-
color: var(--ink-400);
|
|
601
|
-
margin-top: 2px;
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
/* --- Type spec --- */
|
|
605
|
-
.type-row {
|
|
606
|
-
display: grid;
|
|
607
|
-
grid-template-columns: 100px 80px 1fr;
|
|
608
|
-
align-items: baseline;
|
|
609
|
-
gap: 16px;
|
|
610
|
-
padding: 16px 0;
|
|
611
|
-
border-bottom: 1px dashed var(--line-200);
|
|
612
|
-
}
|
|
613
|
-
.type-row:last-child { border-bottom: none; }
|
|
614
|
-
.type-token {
|
|
615
|
-
font-family: var(--font-mono);
|
|
616
|
-
font-size: var(--fs-xs);
|
|
617
|
-
color: var(--ember-600);
|
|
618
|
-
}
|
|
619
|
-
.type-px {
|
|
620
|
-
font-family: var(--font-mono);
|
|
621
|
-
font-size: var(--fs-xs);
|
|
622
|
-
color: var(--ink-300);
|
|
623
|
-
}
|
|
624
|
-
.type-sample { color: var(--ink-700); line-height: 1.2; }
|
|
625
|
-
|
|
626
|
-
/* --- Spacing ruler --- */
|
|
627
|
-
.sp-row {
|
|
628
|
-
display: grid; grid-template-columns: 80px 60px 1fr; gap: 16px; align-items: center;
|
|
629
|
-
padding: 8px 0;
|
|
630
|
-
}
|
|
631
|
-
.sp-token { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ember-600); }
|
|
632
|
-
.sp-px { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-300); text-align: right; }
|
|
633
|
-
.sp-bar { height: 12px; background: var(--ember-300); border-radius: var(--r-xs); }
|
|
634
|
-
|
|
635
|
-
/* --- Shadow demo --- */
|
|
636
|
-
.shadow-demo {
|
|
637
|
-
background: var(--surface);
|
|
638
|
-
border-radius: var(--r-lg);
|
|
639
|
-
height: 96px;
|
|
640
|
-
padding: 16px;
|
|
641
|
-
border: 1px solid var(--line-100);
|
|
642
|
-
}
|
|
643
|
-
.shadow-demo-name {
|
|
644
|
-
font-family: var(--font-mono);
|
|
645
|
-
font-size: var(--fs-sm);
|
|
646
|
-
color: var(--ink-600);
|
|
647
|
-
font-weight: 500;
|
|
648
|
-
}
|
|
649
|
-
.shadow-demo-spec {
|
|
650
|
-
font-family: var(--font-mono);
|
|
651
|
-
font-size: var(--fs-2xs);
|
|
652
|
-
color: var(--ink-300);
|
|
653
|
-
margin-top: 4px;
|
|
654
|
-
}
|
|
655
|
-
|
|
656
|
-
/* --- Radius demo --- */
|
|
657
|
-
.radius-demo {
|
|
658
|
-
background: var(--ember-50);
|
|
659
|
-
border: 1px solid var(--ember-200);
|
|
660
|
-
height: 80px;
|
|
661
|
-
display: flex; align-items: center; justify-content: center;
|
|
662
|
-
font-family: var(--font-mono);
|
|
663
|
-
font-size: var(--fs-sm);
|
|
664
|
-
color: var(--ember-700);
|
|
665
|
-
}
|
|
666
|
-
|
|
667
|
-
/* ============================================================
|
|
668
|
-
COMPLEX
|
|
669
|
-
============================================================ */
|
|
670
|
-
|
|
671
|
-
/* --- Sidebar component example --- */
|
|
672
|
-
.demo-sidebar {
|
|
673
|
-
display: flex;
|
|
674
|
-
border-radius: var(--r-lg);
|
|
675
|
-
overflow: hidden;
|
|
676
|
-
border: 1px solid var(--line-200);
|
|
677
|
-
}
|
|
678
|
-
.demo-sidebar .ds-side {
|
|
679
|
-
width: 240px; background: var(--canvas);
|
|
680
|
-
border-right: 1px solid var(--line-200);
|
|
681
|
-
padding: 12px;
|
|
682
|
-
display: flex; flex-direction: column; gap: 4px;
|
|
683
|
-
min-height: 480px;
|
|
684
|
-
}
|
|
685
|
-
.demo-sidebar .ds-main { flex: 1; background: var(--paper); }
|
|
686
|
-
.ds-side-item {
|
|
687
|
-
display: flex; align-items: center; gap: 10px;
|
|
688
|
-
padding: 7px 10px; font-size: var(--fs-md);
|
|
689
|
-
color: var(--ink-500);
|
|
690
|
-
border-radius: var(--r-md);
|
|
691
|
-
cursor: pointer;
|
|
692
|
-
}
|
|
693
|
-
.ds-side-item:hover { background: var(--ink-50); }
|
|
694
|
-
.ds-side-item.active {
|
|
695
|
-
color: var(--ember-700);
|
|
696
|
-
background: var(--ember-50);
|
|
697
|
-
font-weight: 500;
|
|
698
|
-
}
|
|
699
|
-
.ds-side-item .ico { color: var(--ink-400); }
|
|
700
|
-
.ds-side-item.active .ico { color: var(--ember-600); }
|
|
701
|
-
.ds-side-card {
|
|
702
|
-
margin: 4px; padding: 12px;
|
|
703
|
-
background: var(--surface);
|
|
704
|
-
border: 1px solid var(--line-200);
|
|
705
|
-
border-radius: var(--r-lg);
|
|
706
|
-
}
|
|
707
|
-
|
|
708
|
-
/* --- Endpoint card --- */
|
|
709
|
-
.endpoint {
|
|
710
|
-
flex: 1; min-width: 200px;
|
|
711
|
-
border: 1px solid var(--line-200);
|
|
712
|
-
background: var(--surface);
|
|
713
|
-
padding: 18px;
|
|
714
|
-
cursor: pointer;
|
|
715
|
-
transition: border-color var(--t-fast);
|
|
716
|
-
}
|
|
717
|
-
.endpoint:hover { border-color: var(--ink-300); }
|
|
718
|
-
.endpoint .head {
|
|
719
|
-
display: flex; align-items: center; gap: 8px;
|
|
720
|
-
margin-bottom: 10px;
|
|
721
|
-
}
|
|
722
|
-
.endpoint .label { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
723
|
-
.endpoint .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.5; }
|
|
724
|
-
.endpoint .ico { color: var(--ember-600); }
|
|
725
|
-
|
|
726
|
-
/* --- Stat card --- */
|
|
727
|
-
.stat-card {
|
|
728
|
-
background: var(--surface); border: 1px solid var(--line-200);
|
|
729
|
-
border-radius: var(--r-xl); padding: 20px; max-width: 460px;
|
|
730
|
-
}
|
|
731
|
-
.stat-card-head {
|
|
732
|
-
display: flex; justify-content: space-between; align-items: baseline;
|
|
733
|
-
}
|
|
734
|
-
.stat-card-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
735
|
-
.stat-card-sub { font-size: var(--fs-sm); color: var(--ink-400); margin-top: 2px; }
|
|
736
|
-
.stat-card-num {
|
|
737
|
-
font-size: var(--fs-3xl); font-weight: 700; color: var(--ink-700);
|
|
738
|
-
font-family: var(--font-sans);
|
|
739
|
-
letter-spacing: var(--ls-tight);
|
|
740
|
-
line-height: 1;
|
|
741
|
-
}
|
|
742
|
-
|
|
743
|
-
/* --- Integration tile --- */
|
|
744
|
-
.intg-grid {
|
|
745
|
-
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
|
|
746
|
-
max-width: 700px;
|
|
747
|
-
border: 1px solid var(--line-200);
|
|
748
|
-
border-radius: var(--r-xl);
|
|
749
|
-
overflow: hidden;
|
|
750
|
-
}
|
|
751
|
-
.intg-tile {
|
|
752
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
753
|
-
padding: 14px 16px;
|
|
754
|
-
cursor: pointer;
|
|
755
|
-
transition: background var(--t-fast);
|
|
756
|
-
}
|
|
757
|
-
.intg-tile:hover { background: var(--paper); }
|
|
758
|
-
.intg-tile .lh { display: flex; align-items: center; gap: 10px; }
|
|
759
|
-
.intg-tile .badge-color {
|
|
760
|
-
width: 22px; height: 22px;
|
|
761
|
-
border-radius: var(--r-sm);
|
|
762
|
-
color: #fff; display: flex; align-items: center; justify-content: center;
|
|
763
|
-
font-size: var(--fs-2xs); font-weight: 700;
|
|
764
|
-
}
|
|
765
|
-
.intg-tile .name { font-size: var(--fs-md); color: var(--ink-700); }
|
|
766
|
-
|
|
767
|
-
/* --- Project card --- */
|
|
768
|
-
.proj-card {
|
|
769
|
-
border: 1px solid var(--line-200);
|
|
770
|
-
border-radius: var(--r-xl);
|
|
771
|
-
padding: 16px;
|
|
772
|
-
background: var(--surface);
|
|
773
|
-
cursor: pointer;
|
|
774
|
-
transition: all var(--t-fast);
|
|
775
|
-
}
|
|
776
|
-
.proj-card:hover { box-shadow: var(--shadow-md); }
|
|
777
|
-
.proj-card .head {
|
|
778
|
-
display: flex; justify-content: space-between; align-items: flex-start;
|
|
779
|
-
margin-bottom: 6px;
|
|
780
|
-
}
|
|
781
|
-
.proj-card .title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
|
|
782
|
-
.proj-card .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.5; margin-bottom: 12px; }
|
|
783
|
-
.proj-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
784
|
-
|
|
785
|
-
/* --- Data table --- */
|
|
786
|
-
.table-bar {
|
|
787
|
-
padding: 14px 18px;
|
|
788
|
-
border-bottom: 1px solid var(--line-100);
|
|
789
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
790
|
-
}
|
|
791
|
-
.table-bar .lh { display: flex; gap: 8px; align-items: center; }
|
|
792
|
-
.table-head {
|
|
793
|
-
display: grid; grid-template-columns: 120px 1fr 110px 70px 160px 50px;
|
|
794
|
-
padding: 10px 18px;
|
|
795
|
-
font-family: var(--font-mono);
|
|
796
|
-
font-size: var(--fs-2xs);
|
|
797
|
-
letter-spacing: var(--ls-wider);
|
|
798
|
-
text-transform: uppercase;
|
|
799
|
-
color: var(--ink-300);
|
|
800
|
-
border-bottom: 1px solid var(--line-100);
|
|
801
|
-
background: var(--paper);
|
|
802
|
-
}
|
|
803
|
-
.table-row {
|
|
804
|
-
display: grid; grid-template-columns: 120px 1fr 110px 70px 160px 50px;
|
|
805
|
-
padding: 14px 18px; align-items: center;
|
|
806
|
-
border-bottom: 1px solid var(--line-100);
|
|
807
|
-
font-size: var(--fs-sm);
|
|
808
|
-
transition: background var(--t-fast);
|
|
809
|
-
}
|
|
810
|
-
.table-row:last-child { border-bottom: none; }
|
|
811
|
-
.table-row:hover { background: var(--paper); }
|
|
812
|
-
.table-row .url { color: var(--ink-600); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
813
|
-
.table-row .num { color: var(--ink-500); font-family: var(--font-mono); }
|
|
814
|
-
.table-row .date { color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-xs); }
|
|
815
|
-
|
|
816
|
-
/* --- Modal --- */
|
|
817
|
-
.modal-stage {
|
|
818
|
-
padding: 32px;
|
|
819
|
-
background: radial-gradient(ellipse at top, var(--paper) 0%, var(--canvas) 80%);
|
|
820
|
-
position: relative; min-height: 420px;
|
|
821
|
-
}
|
|
822
|
-
.modal-overlay {
|
|
823
|
-
position: absolute; inset: 0;
|
|
824
|
-
background: rgba(20, 17, 12, 0.04);
|
|
825
|
-
backdrop-filter: blur(2px);
|
|
826
|
-
}
|
|
827
|
-
.modal {
|
|
828
|
-
position: relative;
|
|
829
|
-
max-width: 460px; margin: 24px auto;
|
|
830
|
-
background: var(--surface);
|
|
831
|
-
border: 1px solid var(--line-200);
|
|
832
|
-
border-radius: var(--r-2xl);
|
|
833
|
-
box-shadow: var(--shadow-modal);
|
|
834
|
-
overflow: hidden;
|
|
835
|
-
animation: zk-fadein var(--t-slow) var(--ease-out);
|
|
836
|
-
}
|
|
837
|
-
.modal-head { padding: 24px 24px 0; }
|
|
838
|
-
.modal-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
|
|
839
|
-
.modal-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.012em; color: var(--ink-700); }
|
|
840
|
-
.modal-desc { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--ink-400); }
|
|
841
|
-
.modal-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
842
|
-
.modal-progress .bars { display: flex; gap: 4px; }
|
|
843
|
-
.modal-progress .bars span { width: 12px; height: 4px; border-radius: 2px; background: var(--ink-100); }
|
|
844
|
-
.modal-progress .bars .first { width: 28px; background: var(--ember-500); }
|
|
845
|
-
.modal-list { padding: 4px; }
|
|
846
|
-
.modal-item {
|
|
847
|
-
padding: 12px 20px; border-radius: var(--r-md);
|
|
848
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
849
|
-
}
|
|
850
|
-
.modal-item:hover { background: var(--paper); }
|
|
851
|
-
.modal-item .t { font-size: var(--fs-md); font-weight: 500; color: var(--ember-700); }
|
|
852
|
-
.modal-item.done .t { color: var(--success-700); }
|
|
853
|
-
.modal-item .d { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 2px; }
|
|
854
|
-
.modal-item .credits { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono); }
|
|
855
|
-
.modal-foot {
|
|
856
|
-
padding: 16px 20px;
|
|
857
|
-
border-top: 1px solid var(--line-100);
|
|
858
|
-
display: flex; justify-content: flex-end;
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
/* --- Code block --- */
|
|
862
|
-
.code-block {
|
|
863
|
-
background: var(--code-bg);
|
|
864
|
-
border: 1px solid var(--line-200);
|
|
865
|
-
border-radius: var(--r-lg);
|
|
866
|
-
padding: 16px;
|
|
867
|
-
font-family: var(--font-mono); font-size: var(--fs-sm);
|
|
868
|
-
line-height: 1.7;
|
|
869
|
-
color: var(--ink-600);
|
|
870
|
-
position: relative;
|
|
871
|
-
overflow-x: auto;
|
|
872
|
-
}
|
|
873
|
-
.code-block .copy {
|
|
874
|
-
position: absolute; top: 10px; right: 10px;
|
|
875
|
-
display: flex; gap: 4px;
|
|
876
|
-
}
|
|
877
|
-
.code-block .k { color: var(--code-fg); }
|
|
878
|
-
.code-block .s { color: var(--success-700); }
|
|
879
|
-
.code-block .indent-1 { padding-left: 16px; }
|
|
880
|
-
.code-block .indent-2 { padding-left: 32px; }
|
|
881
|
-
.code-block .indent-3 { padding-left: 48px; }
|
|
882
|
-
.code-block .indent-4 { padding-left: 64px; }
|
|
883
|
-
|
|
884
|
-
/* --- Banners --- */
|
|
885
|
-
.announce {
|
|
886
|
-
width: 100%;
|
|
887
|
-
background: var(--paper);
|
|
888
|
-
border: 1px solid var(--line-200);
|
|
889
|
-
border-radius: var(--r-md);
|
|
890
|
-
padding: 10px 16px;
|
|
891
|
-
text-align: center;
|
|
892
|
-
font-size: var(--fs-md);
|
|
893
|
-
color: var(--ink-600);
|
|
894
|
-
}
|
|
895
|
-
.announce a { color: var(--ember-700); text-decoration: underline; }
|
|
896
|
-
.tip {
|
|
897
|
-
display: flex; gap: 12px; padding: 14px;
|
|
898
|
-
background: var(--surface);
|
|
899
|
-
border: 1px solid var(--line-200);
|
|
900
|
-
border-radius: var(--r-lg);
|
|
901
|
-
max-width: 320px;
|
|
902
|
-
box-shadow: var(--shadow-md);
|
|
903
|
-
}
|
|
904
|
-
.tip .ico { color: var(--ember-500); margin-top: 2px; }
|
|
905
|
-
.tip .what {
|
|
906
|
-
font-size: var(--fs-xs); font-family: var(--font-mono);
|
|
907
|
-
letter-spacing: var(--ls-wider);
|
|
908
|
-
color: var(--ink-300);
|
|
909
|
-
text-transform: uppercase; margin-bottom: 4px;
|
|
910
|
-
}
|
|
911
|
-
.tip .title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-700); margin-bottom: 4px; }
|
|
912
|
-
.tip .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.45; }
|
|
913
|
-
.toast {
|
|
914
|
-
display: inline-flex; align-items: center; gap: 8px;
|
|
915
|
-
padding: 8px 14px;
|
|
916
|
-
background: var(--ink-700); color: #fff;
|
|
917
|
-
border-radius: var(--r-md);
|
|
918
|
-
font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
|
|
919
|
-
}
|
|
920
|
-
.toast-success {
|
|
921
|
-
background: var(--success-500); color: #fff;
|
|
922
|
-
}
|
|
923
|
-
|
|
924
|
-
/* ============================================================
|
|
925
|
-
MISC
|
|
926
|
-
============================================================ */
|
|
927
|
-
.divider {
|
|
928
|
-
height: 1px; background: var(--line-200);
|
|
929
|
-
margin: 24px 0;
|
|
930
|
-
}
|
|
931
|
-
.spec {
|
|
932
|
-
display: flex; justify-content: space-between; gap: 16px;
|
|
933
|
-
padding: 8px 0;
|
|
934
|
-
border-bottom: 1px dashed var(--line-200);
|
|
935
|
-
font-size: var(--fs-sm);
|
|
936
|
-
}
|
|
937
|
-
.spec:last-child { border-bottom: none; }
|
|
938
|
-
.spec .l { color: var(--ink-400); }
|
|
939
|
-
.spec .v { color: var(--ink-600); font-family: var(--font-mono); }
|
|
940
|
-
|
|
941
|
-
/* Theme toggle in topbar */
|
|
942
|
-
.theme-toggle {
|
|
943
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
944
|
-
height: 32px; padding: 0 12px;
|
|
945
|
-
background: var(--surface);
|
|
946
|
-
border: 1px solid var(--line-300);
|
|
947
|
-
border-radius: var(--r-md);
|
|
948
|
-
color: var(--ink-600); font-size: var(--fs-sm); font-weight: 500;
|
|
949
|
-
cursor: pointer;
|
|
950
|
-
transition: all var(--t-fast);
|
|
951
|
-
}
|
|
952
|
-
.theme-toggle:hover { background: var(--paper); }
|
|
953
|
-
.theme-toggle .label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
|
|
954
|
-
|
|
955
|
-
/* ============================================================
|
|
956
|
-
APP PATTERNS (CRM-derived, standardized)
|
|
957
|
-
============================================================ */
|
|
958
|
-
|
|
959
|
-
/* ---------- STATUS / PRIORITY TAGS (with leading dot indicator) ---------- */
|
|
960
|
-
.tag-dot {
|
|
961
|
-
display: inline-flex; align-items: center; gap: 4px;
|
|
962
|
-
height: 22px; padding: 0 8px;
|
|
963
|
-
font-family: var(--font-mono);
|
|
964
|
-
font-size: var(--fs-xs);
|
|
965
|
-
font-weight: 500;
|
|
966
|
-
letter-spacing: var(--ls-wide);
|
|
967
|
-
text-transform: uppercase;
|
|
968
|
-
border-radius: var(--r-sm);
|
|
969
|
-
white-space: nowrap;
|
|
970
|
-
}
|
|
971
|
-
.tag-dot::before {
|
|
972
|
-
content: '';
|
|
973
|
-
width: 6px; height: 6px; border-radius: var(--r-xs);
|
|
974
|
-
background: currentColor; opacity: 0.85;
|
|
975
|
-
}
|
|
976
|
-
|
|
977
|
-
/* Status (matrix oficial: 5 estados de tarefa) */
|
|
978
|
-
.s-todo { background: #fff8e6; color: #9a6500; }
|
|
979
|
-
.s-progress { background: var(--ember-50); color: var(--ember-700); }
|
|
980
|
-
.s-review { background: var(--info-50); color: var(--info-700); }
|
|
981
|
-
.s-done { background: var(--success-50); color: var(--success-700); }
|
|
982
|
-
.s-canceled { background: var(--ink-50); color: var(--ink-500); }
|
|
983
|
-
|
|
984
|
-
/* Modificadores (sobrescrevem status: ATRASADA = vermelho, PARADO = âmbar) */
|
|
985
|
-
.s-overdue { background: var(--danger-50); color: var(--danger-700); }
|
|
986
|
-
.s-paused { background: var(--warning-50); color: var(--warning-700); }
|
|
987
|
-
.s-followup { background: var(--ember-50); color: var(--ember-700); }
|
|
988
|
-
|
|
989
|
-
/* Prioridade (4 níveis) */
|
|
990
|
-
.p-urgent { background: var(--danger-50); color: var(--danger-700); }
|
|
991
|
-
.p-high { background: var(--warning-50); color: var(--warning-700); }
|
|
992
|
-
.p-med { background: #fff8e6; color: #9a6500; }
|
|
993
|
-
.p-low { background: var(--ink-50); color: var(--ink-500); }
|
|
994
|
-
|
|
995
|
-
/* Space/Cliente tags */
|
|
996
|
-
.sp { font-weight: 600; }
|
|
997
|
-
.sp-zark { background: var(--space-zark-soft); color: var(--space-zark); }
|
|
998
|
-
.sp-allsec { background: var(--space-allsec-soft); color: var(--space-allsec); }
|
|
999
|
-
.sp-vipcar { background: var(--space-vipcar-soft); color: var(--space-vipcar); }
|
|
1000
|
-
.sp-limppe { background: var(--space-limppe-soft); color: var(--space-limppe); }
|
|
1001
|
-
.sp-gerais { background: var(--space-gerais-soft); color: var(--space-gerais); }
|
|
1002
|
-
.sp-mixshop { background: var(--space-mixshop-soft); color: var(--space-mixshop); }
|
|
1003
|
-
.sp-vipseg { background: var(--space-vipseg-soft); color: var(--space-vipseg); }
|
|
1004
|
-
|
|
1005
|
-
/* ---------- STAT CARD (UNIFIED) ---------- */
|
|
1006
|
-
.stat {
|
|
1007
|
-
background: var(--surface);
|
|
1008
|
-
border: 1px solid var(--line-200);
|
|
1009
|
-
border-radius: var(--r-lg);
|
|
1010
|
-
padding: 18px;
|
|
1011
|
-
display: flex; flex-direction: column; gap: 12px;
|
|
1012
|
-
transition: border-color var(--t-fast);
|
|
1013
|
-
}
|
|
1014
|
-
.stat:hover { border-color: var(--line-300); }
|
|
1015
|
-
.stat.is-critical { border-color: var(--danger-500); background: var(--danger-50); }
|
|
1016
|
-
.stat-head {
|
|
1017
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
1018
|
-
}
|
|
1019
|
-
.stat-label {
|
|
1020
|
-
font-family: var(--font-mono);
|
|
1021
|
-
font-size: var(--fs-2xs);
|
|
1022
|
-
letter-spacing: var(--ls-wider);
|
|
1023
|
-
text-transform: uppercase;
|
|
1024
|
-
color: var(--ink-400);
|
|
1025
|
-
font-weight: 500;
|
|
1026
|
-
}
|
|
1027
|
-
.stat-icon {
|
|
1028
|
-
width: 28px; height: 28px;
|
|
1029
|
-
border-radius: var(--r-md);
|
|
1030
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
1031
|
-
color: #fff;
|
|
1032
|
-
}
|
|
1033
|
-
.stat-icon.green { background: var(--success-500); }
|
|
1034
|
-
.stat-icon.orange { background: var(--ember-500); }
|
|
1035
|
-
.stat-icon.blue { background: var(--info-500); }
|
|
1036
|
-
.stat-icon.purple { background: #7c3aed; }
|
|
1037
|
-
.stat-icon.red { background: var(--danger-500); }
|
|
1038
|
-
.stat-icon.ghost { background: var(--ink-50); color: var(--ink-500); }
|
|
1039
|
-
.stat-value {
|
|
1040
|
-
font-family: var(--font-sans);
|
|
1041
|
-
font-size: var(--fs-3xl);
|
|
1042
|
-
font-weight: 700;
|
|
1043
|
-
letter-spacing: var(--ls-tight);
|
|
1044
|
-
color: var(--ink-700);
|
|
1045
|
-
line-height: 1;
|
|
1046
|
-
}
|
|
1047
|
-
.stat.is-critical .stat-value { color: var(--danger-700); }
|
|
1048
|
-
.stat-sub {
|
|
1049
|
-
font-size: var(--fs-xs);
|
|
1050
|
-
color: var(--ink-400);
|
|
1051
|
-
font-family: var(--font-mono);
|
|
1052
|
-
}
|
|
1053
|
-
.stat-progress {
|
|
1054
|
-
height: 4px; background: var(--ink-50);
|
|
1055
|
-
border-radius: var(--r-xs); overflow: hidden;
|
|
1056
|
-
margin-top: 4px;
|
|
1057
|
-
}
|
|
1058
|
-
.stat-progress > span {
|
|
1059
|
-
display: block; height: 100%;
|
|
1060
|
-
background: var(--success-500);
|
|
1061
|
-
border-radius: var(--r-xs);
|
|
1062
|
-
}
|
|
1063
|
-
|
|
1064
|
-
/* ---------- CRITICAL ALERT BANNER ---------- */
|
|
1065
|
-
.alert-critical {
|
|
1066
|
-
background: var(--danger-50);
|
|
1067
|
-
border: 1px solid var(--danger-500);
|
|
1068
|
-
border-radius: var(--r-lg);
|
|
1069
|
-
padding: 16px 20px;
|
|
1070
|
-
}
|
|
1071
|
-
.alert-critical-head {
|
|
1072
|
-
display: flex; align-items: center; gap: 8px;
|
|
1073
|
-
font-family: var(--font-mono);
|
|
1074
|
-
font-size: var(--fs-xs);
|
|
1075
|
-
letter-spacing: var(--ls-wider);
|
|
1076
|
-
text-transform: uppercase;
|
|
1077
|
-
font-weight: 600;
|
|
1078
|
-
color: var(--danger-700);
|
|
1079
|
-
margin-bottom: 12px;
|
|
1080
|
-
}
|
|
1081
|
-
.alert-critical-list { display: flex; flex-direction: column; gap: 2px; }
|
|
1082
|
-
.alert-critical-row {
|
|
1083
|
-
display: grid;
|
|
1084
|
-
grid-template-columns: auto 1fr auto auto;
|
|
1085
|
-
gap: 12px; align-items: center;
|
|
1086
|
-
padding: 8px 10px;
|
|
1087
|
-
border-radius: var(--r-sm);
|
|
1088
|
-
font-size: var(--fs-md);
|
|
1089
|
-
color: var(--danger-700);
|
|
1090
|
-
}
|
|
1091
|
-
.alert-critical-row:hover { background: rgba(220, 53, 69, 0.06); }
|
|
1092
|
-
.alert-critical-row .src {
|
|
1093
|
-
font-family: var(--font-mono);
|
|
1094
|
-
font-size: var(--fs-xs);
|
|
1095
|
-
color: var(--danger-700);
|
|
1096
|
-
opacity: 0.7;
|
|
1097
|
-
}
|
|
1098
|
-
.alert-critical-foot {
|
|
1099
|
-
margin-top: 8px; padding: 8px 10px;
|
|
1100
|
-
font-size: var(--fs-xs);
|
|
1101
|
-
color: var(--danger-700); opacity: 0.7;
|
|
1102
|
-
font-family: var(--font-mono);
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
/* ---------- FUNNEL ---------- */
|
|
1106
|
-
.funnel {
|
|
1107
|
-
display: flex; height: 8px;
|
|
1108
|
-
background: var(--ink-50);
|
|
1109
|
-
border-radius: var(--r-xs);
|
|
1110
|
-
overflow: hidden;
|
|
1111
|
-
gap: 2px;
|
|
1112
|
-
}
|
|
1113
|
-
.funnel > span { display: block; height: 100%; }
|
|
1114
|
-
.funnel-stages {
|
|
1115
|
-
display: grid;
|
|
1116
|
-
grid-template-columns: repeat(6, 1fr);
|
|
1117
|
-
gap: 8px;
|
|
1118
|
-
margin-top: 12px;
|
|
1119
|
-
}
|
|
1120
|
-
.funnel-stage {
|
|
1121
|
-
display: flex; flex-direction: column; gap: 2px;
|
|
1122
|
-
}
|
|
1123
|
-
.funnel-stage-label {
|
|
1124
|
-
font-size: var(--fs-xs);
|
|
1125
|
-
color: var(--ink-500);
|
|
1126
|
-
}
|
|
1127
|
-
.funnel-stage-count {
|
|
1128
|
-
font-family: var(--font-mono);
|
|
1129
|
-
font-size: var(--fs-sm);
|
|
1130
|
-
font-weight: 600;
|
|
1131
|
-
color: var(--ink-700);
|
|
1132
|
-
}
|
|
1133
|
-
|
|
1134
|
-
/* ---------- KANBAN ---------- */
|
|
1135
|
-
.kanban {
|
|
1136
|
-
display: flex; gap: 12px;
|
|
1137
|
-
overflow-x: auto;
|
|
1138
|
-
padding-bottom: 8px;
|
|
1139
|
-
}
|
|
1140
|
-
.k-col {
|
|
1141
|
-
flex: 1; min-width: 240px;
|
|
1142
|
-
background: transparent;
|
|
1143
|
-
display: flex; flex-direction: column; gap: 8px;
|
|
1144
|
-
}
|
|
1145
|
-
.k-col-head {
|
|
1146
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
1147
|
-
padding: 8px 12px;
|
|
1148
|
-
font-family: var(--font-mono);
|
|
1149
|
-
font-size: var(--fs-xs);
|
|
1150
|
-
letter-spacing: var(--ls-wide);
|
|
1151
|
-
text-transform: uppercase;
|
|
1152
|
-
font-weight: 600;
|
|
1153
|
-
color: var(--ink-600);
|
|
1154
|
-
}
|
|
1155
|
-
.k-col-head .lh { display: inline-flex; align-items: center; gap: 8px; }
|
|
1156
|
-
.k-col-head .dot {
|
|
1157
|
-
width: 8px; height: 8px; border-radius: 50%;
|
|
1158
|
-
}
|
|
1159
|
-
.k-col-head .count {
|
|
1160
|
-
color: var(--ink-400);
|
|
1161
|
-
font-weight: 500;
|
|
1162
|
-
}
|
|
1163
|
-
.k-add {
|
|
1164
|
-
display: flex; align-items: center; justify-content: center; gap: 6px;
|
|
1165
|
-
padding: 8px;
|
|
1166
|
-
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1167
|
-
background: transparent;
|
|
1168
|
-
border: 1px dashed var(--line-300);
|
|
1169
|
-
border-radius: var(--r-md);
|
|
1170
|
-
cursor: pointer;
|
|
1171
|
-
transition: all var(--t-fast);
|
|
1172
|
-
}
|
|
1173
|
-
.k-add:hover { color: var(--ember-700); border-color: var(--ember-300); background: var(--ember-50); }
|
|
1174
|
-
|
|
1175
|
-
/* ---------- LEAD CARD ---------- */
|
|
1176
|
-
.lead-card {
|
|
1177
|
-
background: var(--surface);
|
|
1178
|
-
border: 1px solid var(--line-200);
|
|
1179
|
-
border-radius: var(--r-md);
|
|
1180
|
-
padding: 12px;
|
|
1181
|
-
display: flex; flex-direction: column; gap: 8px;
|
|
1182
|
-
cursor: grab;
|
|
1183
|
-
transition: all var(--t-fast);
|
|
1184
|
-
position: relative;
|
|
1185
|
-
}
|
|
1186
|
-
.lead-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-300); }
|
|
1187
|
-
.lead-card.is-paused { border-left: 3px solid var(--warning-500); }
|
|
1188
|
-
.lead-card-head {
|
|
1189
|
-
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
|
1190
|
-
}
|
|
1191
|
-
.lead-card-name {
|
|
1192
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
1193
|
-
font-size: var(--fs-md); font-weight: 600; color: var(--ink-700);
|
|
1194
|
-
}
|
|
1195
|
-
.lead-card-name .flame { color: var(--ember-500); }
|
|
1196
|
-
.lead-card-sub {
|
|
1197
|
-
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1198
|
-
}
|
|
1199
|
-
.lead-card-meta {
|
|
1200
|
-
display: flex; align-items: center; justify-content: space-between;
|
|
1201
|
-
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1202
|
-
}
|
|
1203
|
-
.lead-card-meta .icons {
|
|
1204
|
-
display: inline-flex; gap: 6px; color: var(--ink-300);
|
|
1205
|
-
}
|
|
1206
|
-
.lead-card-foot {
|
|
1207
|
-
display: flex; align-items: center; gap: 6px;
|
|
1208
|
-
padding-top: 8px;
|
|
1209
|
-
border-top: 1px dashed var(--line-200);
|
|
1210
|
-
font-size: var(--fs-xs); color: var(--ink-400);
|
|
1211
|
-
}
|
|
1212
|
-
.lead-card-followup {
|
|
1213
|
-
display: inline-flex; align-items: center; gap: 4px;
|
|
1214
|
-
font-size: var(--fs-xs); color: var(--ember-700); font-weight: 500;
|
|
1215
|
-
}
|
|
1216
|
-
|
|
1217
|
-
/* ---------- FILTER CHIPS ---------- */
|
|
1218
|
-
.chips {
|
|
1219
|
-
display: inline-flex; gap: 4px; flex-wrap: wrap;
|
|
1220
|
-
}
|
|
1221
|
-
.chip {
|
|
1222
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
1223
|
-
height: 28px; padding: 0 12px;
|
|
1224
|
-
font-family: var(--font-mono);
|
|
1225
|
-
font-size: var(--fs-xs);
|
|
1226
|
-
font-weight: 500;
|
|
1227
|
-
letter-spacing: var(--ls-wide);
|
|
1228
|
-
text-transform: uppercase;
|
|
1229
|
-
color: var(--ink-500);
|
|
1230
|
-
background: transparent;
|
|
1231
|
-
border: 1px solid transparent;
|
|
1232
|
-
border-radius: var(--r-sm);
|
|
1233
|
-
cursor: pointer;
|
|
1234
|
-
transition: all var(--t-fast);
|
|
1235
|
-
}
|
|
1236
|
-
.chip:hover { background: var(--ink-50); color: var(--ink-700); }
|
|
1237
|
-
.chip.active {
|
|
1238
|
-
background: var(--ember-50);
|
|
1239
|
-
color: var(--ember-700);
|
|
1240
|
-
border-color: var(--ember-200);
|
|
1241
|
-
}
|
|
1242
|
-
.chip .count {
|
|
1243
|
-
font-family: var(--font-mono);
|
|
1244
|
-
font-size: var(--fs-2xs);
|
|
1245
|
-
color: inherit; opacity: 0.7;
|
|
1246
|
-
}
|
|
1247
|
-
|
|
1248
|
-
/* ---------- EMPTY STATE ---------- */
|
|
1249
|
-
.empty-state {
|
|
1250
|
-
border: 1px dashed var(--line-300);
|
|
1251
|
-
border-radius: var(--r-md);
|
|
1252
|
-
padding: 32px 16px;
|
|
1253
|
-
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
1254
|
-
color: var(--ink-300);
|
|
1255
|
-
text-align: center;
|
|
1256
|
-
background: transparent;
|
|
1257
|
-
}
|
|
1258
|
-
.empty-state .ico {
|
|
1259
|
-
width: 32px; height: 32px;
|
|
1260
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
1261
|
-
color: var(--ink-300);
|
|
1262
|
-
}
|
|
1263
|
-
.empty-state .text {
|
|
1264
|
-
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1265
|
-
}
|
|
1266
|
-
|
|
1267
|
-
/* ---------- HEADER BAND ---------- */
|
|
1268
|
-
.header-band {
|
|
1269
|
-
display: flex; align-items: center; gap: 12px;
|
|
1270
|
-
padding: 16px 32px;
|
|
1271
|
-
background: linear-gradient(180deg, var(--canvas), transparent);
|
|
1272
|
-
border-bottom: 1px solid var(--line-200);
|
|
1273
|
-
}
|
|
1274
|
-
.header-band .ico-box {
|
|
1275
|
-
width: 32px; height: 32px;
|
|
1276
|
-
border-radius: var(--r-md);
|
|
1277
|
-
background: var(--success-50);
|
|
1278
|
-
color: var(--success-700);
|
|
1279
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
1280
|
-
}
|
|
1281
|
-
.header-band .title {
|
|
1282
|
-
font-family: var(--font-display);
|
|
1283
|
-
font-size: var(--fs-xl);
|
|
1284
|
-
font-weight: 700;
|
|
1285
|
-
color: var(--ink-700);
|
|
1286
|
-
letter-spacing: -0.012em;
|
|
1287
|
-
}
|
|
1288
|
-
|
|
1289
|
-
/* ---------- TABLE ACTIONS ---------- */
|
|
1290
|
-
.t-actions {
|
|
1291
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
1292
|
-
}
|
|
1293
|
-
.t-act {
|
|
1294
|
-
width: 22px; height: 22px;
|
|
1295
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
1296
|
-
border: 1px solid var(--line-200);
|
|
1297
|
-
border-radius: var(--r-sm);
|
|
1298
|
-
background: var(--surface);
|
|
1299
|
-
cursor: pointer;
|
|
1300
|
-
transition: all var(--t-fast);
|
|
1301
|
-
}
|
|
1302
|
-
.t-act:hover { background: var(--paper); }
|
|
1303
|
-
.t-act.t-confirm { color: var(--success-700); }
|
|
1304
|
-
.t-act.t-confirm:hover { background: var(--success-50); border-color: var(--success-500); }
|
|
1305
|
-
.t-act.t-edit { color: var(--ink-500); }
|
|
1306
|
-
.t-act.t-delete { color: var(--danger-700); }
|
|
1307
|
-
.t-act.t-delete:hover { background: var(--danger-50); border-color: var(--danger-500); }
|
|
1308
|
-
|
|
1309
|
-
/* ---------- BREADCRUMB (formal) ---------- */
|
|
1310
|
-
.bc {
|
|
1311
|
-
display: inline-flex; align-items: center; gap: 8px;
|
|
1312
|
-
font-size: var(--fs-sm); color: var(--ink-400);
|
|
1313
|
-
}
|
|
1314
|
-
.bc-sep { color: var(--ink-300); }
|
|
1315
|
-
.bc-item {
|
|
1316
|
-
display: inline-flex; align-items: center; gap: 6px;
|
|
1317
|
-
color: var(--ink-500);
|
|
1318
|
-
cursor: pointer;
|
|
1319
|
-
}
|
|
1320
|
-
.bc-item:hover { color: var(--ink-700); }
|
|
1321
|
-
.bc-item.current { color: var(--ink-700); font-weight: 500; cursor: default; }
|
|
1322
|
-
.bc-dot {
|
|
1323
|
-
width: 6px; height: 6px; border-radius: 50%;
|
|
1324
|
-
background: var(--ember-500);
|
|
1325
|
-
}
|
|
1326
|
-
|
|
1327
|
-
/* ---------- ICON GRID ---------- */
|
|
1328
|
-
.icon-grid {
|
|
1329
|
-
display: grid;
|
|
1330
|
-
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
|
1331
|
-
gap: 1px;
|
|
1332
|
-
background: var(--line-200);
|
|
1333
|
-
border: 1px solid var(--line-200);
|
|
1334
|
-
border-radius: var(--r-lg);
|
|
1335
|
-
overflow: hidden;
|
|
1336
|
-
}
|
|
1337
|
-
.icon-cell {
|
|
1338
|
-
background: var(--surface);
|
|
1339
|
-
display: flex; flex-direction: column;
|
|
1340
|
-
align-items: center; justify-content: center; gap: 12px;
|
|
1341
|
-
padding: 20px 8px;
|
|
1342
|
-
cursor: pointer;
|
|
1343
|
-
transition: background var(--t-fast);
|
|
1344
|
-
color: var(--ink-700);
|
|
1345
|
-
}
|
|
1346
|
-
.icon-cell:hover { background: var(--paper); color: var(--ember-600); }
|
|
1347
|
-
.icon-cell:hover .icon-name { color: var(--ember-700); }
|
|
1348
|
-
.icon-cell svg { display: block; }
|
|
1349
|
-
.icon-name {
|
|
1350
|
-
font-family: var(--font-mono);
|
|
1351
|
-
font-size: var(--fs-2xs);
|
|
1352
|
-
color: var(--ink-400);
|
|
1353
|
-
letter-spacing: var(--ls-wide);
|
|
1354
|
-
text-transform: lowercase;
|
|
1355
|
-
transition: color var(--t-fast);
|
|
1356
|
-
}
|
|
1357
|
-
|
|
1358
|
-
/* ---------- AVATAR (square cliente — extras) ---------- */
|
|
1359
|
-
.av-space {
|
|
1360
|
-
width: 24px; height: 24px;
|
|
1361
|
-
border-radius: var(--r-sm);
|
|
1362
|
-
display: inline-flex; align-items: center; justify-content: center;
|
|
1363
|
-
font-family: var(--font-display);
|
|
1364
|
-
font-weight: 700;
|
|
1365
|
-
font-size: 11px;
|
|
1366
|
-
color: #fff;
|
|
1367
|
-
flex-shrink: 0;
|
|
1368
|
-
}
|
|
1369
|
-
|
|
1370
|
-
@media (max-width: 1100px) {
|
|
1371
|
-
.swatch-grid { grid-template-columns: repeat(4, 1fr); }
|
|
1372
|
-
.grid-2 { grid-template-columns: 1fr; }
|
|
1373
|
-
.section-header { grid-template-columns: 1fr; gap: 24px; }
|
|
1374
|
-
.section { padding: 56px 32px; }
|
|
1375
|
-
}
|
|
1376
|
-
@media (max-width: 800px) {
|
|
1377
|
-
.app { grid-template-columns: 1fr; }
|
|
1378
|
-
.sidebar { display: none; }
|
|
1379
|
-
.swatch-grid { grid-template-columns: repeat(2, 1fr); }
|
|
1380
|
-
.grid-3 { grid-template-columns: 1fr; }
|
|
1381
|
-
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
|
1382
|
-
}
|
|
1383
|
-
</style>
|
|
11
|
+
<link rel="stylesheet" href="tokens.css"/>
|
|
12
|
+
<link rel="stylesheet" href="components.css"/>
|
|
1384
13
|
</head>
|
|
1385
14
|
<body>
|
|
1386
15
|
|
|
@@ -1389,7 +18,7 @@ main { background: var(--paper); }
|
|
|
1389
18
|
<!-- =================== SIDEBAR =================== -->
|
|
1390
19
|
<aside class="sidebar">
|
|
1391
20
|
<div class="sidebar-brand">
|
|
1392
|
-
<img src="assets/logo-
|
|
21
|
+
<img src="assets/logo-primary.png" alt="{{name}}" class="sidebar-logo"/>
|
|
1393
22
|
</div>
|
|
1394
23
|
|
|
1395
24
|
<div class="sidebar-eyebrow">Foundations</div>
|
|
@@ -1543,7 +172,7 @@ main { background: var(--paper); }
|
|
|
1543
172
|
</div>
|
|
1544
173
|
<div>
|
|
1545
174
|
<div class="sub-label">Space Grotesk — Títulos</div>
|
|
1546
|
-
<div style="font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:700; color:var(--ink-700); letter-spacing:-0.02em; line-height:1.1">
|
|
175
|
+
<div style="font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:700; color:var(--ink-700); letter-spacing:-0.02em; line-height:1.1">{{name}} Sistemas</div>
|
|
1547
176
|
<div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-display) · h1 · h2 · h3 · modal title</div>
|
|
1548
177
|
</div>
|
|
1549
178
|
</div>
|
|
@@ -1589,7 +218,7 @@ main { background: var(--paper); }
|
|
|
1589
218
|
<div class="eyebrow">03 — Foundations</div>
|
|
1590
219
|
<h2>Espaçamento</h2>
|
|
1591
220
|
</div>
|
|
1592
|
-
<p class="section-desc">Base 4px. Default de stack vertical: <code style="font-family:var(--font-mono);color:var(--
|
|
221
|
+
<p class="section-desc">Base 4px. Default de stack vertical: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-12</code> (24px). Default de gap em flex: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-8</code> (16px). Padding interno de card: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-16</code> ou <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-20</code>.</p>
|
|
1593
222
|
</div>
|
|
1594
223
|
<div class="panel">
|
|
1595
224
|
<div class="panel-head"><div class="panel-title">Escala de spacing</div><div class="panel-kicker">--sp-0 → --sp-48</div></div>
|
|
@@ -1606,7 +235,7 @@ main { background: var(--paper); }
|
|
|
1606
235
|
<div class="eyebrow">04 — Foundations</div>
|
|
1607
236
|
<h2>Border radius</h2>
|
|
1608
237
|
</div>
|
|
1609
|
-
<p class="section-desc">xs em status dots, badges e progress bars · sm em tags, chips e botões pequenos · md em botões e inputs padrão · lg em cards · xl/2xl em modals e hero panels · 3xl raramente. Avatares usam <code style="font-family:var(--font-mono);color:var(--
|
|
238
|
+
<p class="section-desc">xs em status dots, badges e progress bars · sm em tags, chips e botões pequenos · md em botões e inputs padrão · lg em cards · xl/2xl em modals e hero panels · 3xl raramente. Avatares usam <code style="font-family:var(--font-mono);color:var(--brand-700)">border-radius: 50%</code> direto (são círculos geométricos, não tags).</p>
|
|
1610
239
|
</div>
|
|
1611
240
|
<div class="panel">
|
|
1612
241
|
<div class="panel-body">
|
|
@@ -1624,7 +253,7 @@ main { background: var(--paper); }
|
|
|
1624
253
|
<div class="eyebrow">05 — Foundations</div>
|
|
1625
254
|
<h2>Sombras</h2>
|
|
1626
255
|
</div>
|
|
1627
|
-
<p class="section-desc">Sempre warm (rgba 20,17,12) — nunca azul-frio (rgba 0,0,0). Curtas em cards, largas em modais. <code style="font-family:var(--font-mono);color:var(--
|
|
256
|
+
<p class="section-desc">Sempre warm (rgba 20,17,12) — nunca azul-frio (rgba 0,0,0). Curtas em cards, largas em modais. <code style="font-family:var(--font-mono);color:var(--brand-700)">--ring-focus</code> sempre presente em elementos interativos via teclado.</p>
|
|
1628
257
|
</div>
|
|
1629
258
|
<div class="panel">
|
|
1630
259
|
<div class="panel-body">
|
|
@@ -1703,8 +332,8 @@ main { background: var(--paper); }
|
|
|
1703
332
|
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Estados</div></div>
|
|
1704
333
|
<div class="row">
|
|
1705
334
|
<button class="btn btn-primary btn-md">Default</button>
|
|
1706
|
-
<button class="btn btn-primary btn-md" style="background:var(--
|
|
1707
|
-
<button class="btn btn-primary btn-md" style="background:var(--
|
|
335
|
+
<button class="btn btn-primary btn-md" style="background:var(--brand-700)">Hover</button>
|
|
336
|
+
<button class="btn btn-primary btn-md" style="background:var(--brand-800)">Pressed</button>
|
|
1708
337
|
<button class="btn btn-secondary btn-md" disabled>Disabled</button>
|
|
1709
338
|
<button class="btn btn-primary btn-md"><span class="spinner"></span> Loading…</button>
|
|
1710
339
|
</div>
|
|
@@ -1712,7 +341,7 @@ main { background: var(--paper); }
|
|
|
1712
341
|
<div class="divider"></div>
|
|
1713
342
|
<div class="spec"><span class="l">Heights</span><span class="v">22 / 28 / 32 / 40 px</span></div>
|
|
1714
343
|
<div class="spec"><span class="l">Border radius</span><span class="v">--r-sm → --r-lg</span></div>
|
|
1715
|
-
<div class="spec"><span class="l">Primary fill</span><span class="v">
|
|
344
|
+
<div class="spec"><span class="l">Primary fill</span><span class="v">brand-600 → brand-700 hover</span></div>
|
|
1716
345
|
<div class="spec"><span class="l">Focus ring</span><span class="v">--ring-focus (3px ember 20%)</span></div>
|
|
1717
346
|
</div>
|
|
1718
347
|
</div>
|
|
@@ -1727,7 +356,7 @@ main { background: var(--paper); }
|
|
|
1727
356
|
<div class="eyebrow">07 — Primitives</div>
|
|
1728
357
|
<h2>Inputs</h2>
|
|
1729
358
|
</div>
|
|
1730
|
-
<p class="section-desc">Border <code style="font-family:var(--font-mono);color:var(--
|
|
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 ember. Estado <code style="font-family:var(--font-mono);color:var(--brand-700)">invalid</code> troca a borda pra danger. URL input full-width é o padrão para campos de URL em hero.</p>
|
|
1731
360
|
</div>
|
|
1732
361
|
|
|
1733
362
|
<div class="panel">
|
|
@@ -1817,7 +446,7 @@ main { background: var(--paper); }
|
|
|
1817
446
|
<div class="eyebrow">08 — Primitives</div>
|
|
1818
447
|
<h2>Tags, badges, kbd</h2>
|
|
1819
448
|
</div>
|
|
1820
|
-
<p class="section-desc">Tags curtos com raio --r-sm (4px) pra status e estados. Variante <code style="font-family:var(--font-mono);color:var(--
|
|
449
|
+
<p class="section-desc">Tags curtos com raio --r-sm (4px) pra status e estados. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.tag-square</code> usa raio --r-xs (3px) ainda mais sharp pra data labels técnicos (linguagens, endpoints, IDs). Mono uppercase com letter-spacing wide é a assinatura.</p>
|
|
1821
450
|
</div>
|
|
1822
451
|
|
|
1823
452
|
<div class="panel">
|
|
@@ -1838,7 +467,7 @@ main { background: var(--paper); }
|
|
|
1838
467
|
<span class="tag tag-mono tag-square tag-xs">TypeScript</span>
|
|
1839
468
|
<span class="tag tag-mono tag-square tag-xs">Python</span>
|
|
1840
469
|
<span class="tag tag-mono tag-square tag-xs">Next.js</span>
|
|
1841
|
-
<span class="tag tag-mono tag-square tag-xs">
|
|
470
|
+
<span class="tag tag-mono tag-square tag-xs">{{name}} SDK</span>
|
|
1842
471
|
<span class="tag tag-mono tag-square tag-xs">v1.0.4</span>
|
|
1843
472
|
</div>
|
|
1844
473
|
|
|
@@ -1914,7 +543,7 @@ main { background: var(--paper); }
|
|
|
1914
543
|
</div>
|
|
1915
544
|
<div class="divider"></div>
|
|
1916
545
|
<div class="spec"><span class="l">Off bg</span><span class="v">--ink-200</span></div>
|
|
1917
|
-
<div class="spec"><span class="l">On bg</span><span class="v">--
|
|
546
|
+
<div class="spec"><span class="l">On bg</span><span class="v">--brand-500</span></div>
|
|
1918
547
|
<div class="spec"><span class="l">Animation</span><span class="v">--t-base ease-out</span></div>
|
|
1919
548
|
</div>
|
|
1920
549
|
</div>
|
|
@@ -2023,7 +652,7 @@ main { background: var(--paper); }
|
|
|
2023
652
|
<div class="eyebrow">11 — Patterns</div>
|
|
2024
653
|
<h2>Sidebar de aplicação</h2>
|
|
2025
654
|
</div>
|
|
2026
|
-
<p class="section-desc">Largura 240px, bg <code style="font-family:var(--font-mono);color:var(--
|
|
655
|
+
<p class="section-desc">Largura 240px, bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--canvas</code>, items com altura ~32px. Active state usa <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-50</code> bg + <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-700</code> texto. Footer leve com avatar + email do user.</p>
|
|
2027
656
|
</div>
|
|
2028
657
|
|
|
2029
658
|
<div class="panel">
|
|
@@ -2032,7 +661,7 @@ main { background: var(--paper); }
|
|
|
2032
661
|
<div class="demo-sidebar">
|
|
2033
662
|
<div class="ds-side">
|
|
2034
663
|
<div style="padding:8px 10px 16px">
|
|
2035
|
-
<img src="assets/logo-
|
|
664
|
+
<img src="assets/logo-primary.png" alt="{{name}}" style="height:18px; display:block"/>
|
|
2036
665
|
</div>
|
|
2037
666
|
<div style="padding:0 4px 8px">
|
|
2038
667
|
<label class="input input-sm">
|
|
@@ -2079,9 +708,9 @@ main { background: var(--paper); }
|
|
|
2079
708
|
|
|
2080
709
|
<div class="ds-side-card">
|
|
2081
710
|
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px">
|
|
2082
|
-
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--
|
|
711
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--brand-500)"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg>
|
|
2083
712
|
<span style="font-size:var(--fs-sm); font-weight:600; color:var(--ink-700)">What's New</span>
|
|
2084
|
-
<span style="font-size:var(--fs-2xs); color:var(--
|
|
713
|
+
<span style="font-size:var(--fs-2xs); color:var(--brand-600); font-family:var(--font-mono)">(6)</span>
|
|
2085
714
|
</div>
|
|
2086
715
|
<div style="font-size:var(--fs-xs); color:var(--ink-400)">View our latest update</div>
|
|
2087
716
|
</div>
|
|
@@ -2095,10 +724,10 @@ main { background: var(--paper); }
|
|
|
2095
724
|
<!-- Topbar preview do app -->
|
|
2096
725
|
<div class="ds-main">
|
|
2097
726
|
<div style="height:56px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-200)">
|
|
2098
|
-
<div style="display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:var(--
|
|
727
|
+
<div style="display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--r-md)">
|
|
2099
728
|
<span class="avatar avatar-sq" style="width:18px; height:18px; font-size:9px">P</span>
|
|
2100
|
-
<span style="font-size:var(--fs-md); color:var(--
|
|
2101
|
-
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--
|
|
729
|
+
<span style="font-size:var(--fs-md); color:var(--brand-700); font-weight:500">Personal Team</span>
|
|
730
|
+
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--brand-700)"><path d="M5 7l4 4 4-4"/></svg>
|
|
2102
731
|
</div>
|
|
2103
732
|
<div style="display:flex; gap:6px; align-items:center">
|
|
2104
733
|
<button class="btn btn-ghost btn-icon-only btn-sm">
|
|
@@ -2137,7 +766,7 @@ main { background: var(--paper); }
|
|
|
2137
766
|
<div class="divider"></div>
|
|
2138
767
|
<div class="spec"><span class="l">Width</span><span class="v">240px</span></div>
|
|
2139
768
|
<div class="spec"><span class="l">Background</span><span class="v">--canvas</span></div>
|
|
2140
|
-
<div class="spec"><span class="l">Active fill</span><span class="v">--
|
|
769
|
+
<div class="spec"><span class="l">Active fill</span><span class="v">--brand-50 + --brand-700</span></div>
|
|
2141
770
|
<div class="spec"><span class="l">Item height</span><span class="v">~32px</span></div>
|
|
2142
771
|
</div>
|
|
2143
772
|
</div>
|
|
@@ -2211,14 +840,14 @@ main { background: var(--paper); }
|
|
|
2211
840
|
</div>
|
|
2212
841
|
<div class="stat-card-num">2.418</div>
|
|
2213
842
|
</div>
|
|
2214
|
-
<div style="margin-top:18px; height:40px; background: linear-gradient(180deg, var(--
|
|
2215
|
-
<div style="flex:1; height:30%; background:var(--
|
|
2216
|
-
<div style="flex:1; height:50%; background:var(--
|
|
2217
|
-
<div style="flex:1; height:40%; background:var(--
|
|
2218
|
-
<div style="flex:1; height:70%; background:var(--
|
|
2219
|
-
<div style="flex:1; height:55%; background:var(--
|
|
2220
|
-
<div style="flex:1; height:85%; background:var(--
|
|
2221
|
-
<div style="flex:1; height:100%; background:var(--
|
|
843
|
+
<div style="margin-top:18px; height:40px; background: linear-gradient(180deg, var(--brand-50), transparent); border-radius:var(--r-md); display:flex; align-items:flex-end; padding:4px; gap:3px">
|
|
844
|
+
<div style="flex:1; height:30%; background:var(--brand-300); border-radius:2px"></div>
|
|
845
|
+
<div style="flex:1; height:50%; background:var(--brand-400); border-radius:2px"></div>
|
|
846
|
+
<div style="flex:1; height:40%; background:var(--brand-300); border-radius:2px"></div>
|
|
847
|
+
<div style="flex:1; height:70%; background:var(--brand-400); border-radius:2px"></div>
|
|
848
|
+
<div style="flex:1; height:55%; background:var(--brand-400); border-radius:2px"></div>
|
|
849
|
+
<div style="flex:1; height:85%; background:var(--brand-500); border-radius:2px"></div>
|
|
850
|
+
<div style="flex:1; height:100%; background:var(--brand-600); border-radius:2px"></div>
|
|
2222
851
|
</div>
|
|
2223
852
|
<div style="margin-top:8px; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-300)">
|
|
2224
853
|
<span>04/29</span><span>05/02</span><span>05/05</span>
|
|
@@ -2264,11 +893,11 @@ main { background: var(--paper); }
|
|
|
2264
893
|
<div class="title">30+ Examples</div>
|
|
2265
894
|
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
|
|
2266
895
|
</div>
|
|
2267
|
-
<div class="desc">Collection of simple projects built with
|
|
896
|
+
<div class="desc">Collection of simple projects built with {{name}}</div>
|
|
2268
897
|
<div class="tags">
|
|
2269
898
|
<span class="tag tag-mono tag-square tag-xs">TypeScript</span>
|
|
2270
899
|
<span class="tag tag-mono tag-square tag-xs">Python</span>
|
|
2271
|
-
<span class="tag tag-mono tag-square tag-xs">
|
|
900
|
+
<span class="tag tag-mono tag-square tag-xs">{{name}} SDK</span>
|
|
2272
901
|
</div>
|
|
2273
902
|
</div>
|
|
2274
903
|
<div class="proj-card">
|
|
@@ -2280,7 +909,7 @@ main { background: var(--paper); }
|
|
|
2280
909
|
<div class="tags">
|
|
2281
910
|
<span class="tag tag-mono tag-square tag-xs">TypeScript</span>
|
|
2282
911
|
<span class="tag tag-mono tag-square tag-xs">Next.js</span>
|
|
2283
|
-
<span class="tag tag-mono tag-square tag-xs">
|
|
912
|
+
<span class="tag tag-mono tag-square tag-xs">{{name}} SDK</span>
|
|
2284
913
|
</div>
|
|
2285
914
|
</div>
|
|
2286
915
|
</div>
|
|
@@ -2410,7 +1039,7 @@ main { background: var(--paper); }
|
|
|
2410
1039
|
<div class="eyebrow">15 — Patterns</div>
|
|
2411
1040
|
<h2>Code Block</h2>
|
|
2412
1041
|
</div>
|
|
2413
|
-
<p class="section-desc">Bg <code style="font-family:var(--font-mono);color:var(--
|
|
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 ember. Sempre com botões de eye/copy no canto top-right.</p>
|
|
2414
1043
|
</div>
|
|
2415
1044
|
|
|
2416
1045
|
<div class="panel">
|
|
@@ -2431,7 +1060,7 @@ main { background: var(--paper); }
|
|
|
2431
1060
|
<div class="indent-3"><span class="k">"command"</span>: <span class="s">"npx"</span>,</div>
|
|
2432
1061
|
<div class="indent-3"><span class="k">"args"</span>: [<span class="s">"-y"</span>, <span class="s">"zark-mcp"</span>],</div>
|
|
2433
1062
|
<div class="indent-3"><span class="k">"env"</span>: {</div>
|
|
2434
|
-
<div class="indent-4"><span class="k">"
|
|
1063
|
+
<div class="indent-4"><span class="k">"{{slugUpper}}_API_KEY"</span>: <span class="s">"$API_KEY"</span></div>
|
|
2435
1064
|
<div class="indent-3">}</div>
|
|
2436
1065
|
<div class="indent-2">}</div>
|
|
2437
1066
|
<div class="indent-1">}</div>
|
|
@@ -2458,7 +1087,7 @@ main { background: var(--paper); }
|
|
|
2458
1087
|
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Top announcement bar</div></div>
|
|
2459
1088
|
<div class="row" style="margin-bottom:24px">
|
|
2460
1089
|
<div class="announce">
|
|
2461
|
-
Acabamos de levantar Series A e lançar
|
|
1090
|
+
Acabamos de levantar Series A e lançar {{name}} v2 🎉 <a href="#">Ler o blog.</a>
|
|
2462
1091
|
</div>
|
|
2463
1092
|
</div>
|
|
2464
1093
|
|
|
@@ -2470,7 +1099,7 @@ main { background: var(--paper); }
|
|
|
2470
1099
|
</span>
|
|
2471
1100
|
<div style="flex:1">
|
|
2472
1101
|
<div class="what">What's New</div>
|
|
2473
|
-
<div class="title">Apresentando
|
|
1102
|
+
<div class="title">Apresentando {{name}} v2</div>
|
|
2474
1103
|
<div class="desc">10x mais rápido, busca de notícias e imagens, smart crawling e mais.</div>
|
|
2475
1104
|
</div>
|
|
2476
1105
|
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300); cursor:pointer"><path d="M5 5l8 8M13 5l-8 8"/></svg>
|
|
@@ -2480,8 +1109,8 @@ main { background: var(--paper); }
|
|
|
2480
1109
|
<div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Toast</div></div>
|
|
2481
1110
|
<div class="row">
|
|
2482
1111
|
<div class="toast">
|
|
2483
|
-
Welcome to
|
|
2484
|
-
<img src="assets/
|
|
1112
|
+
Welcome to {{name}}!
|
|
1113
|
+
<img src="assets/icon.png" alt="{{name}}" style="height:14px; width:auto; display:block; filter:brightness(0) invert(1)"/>
|
|
2485
1114
|
</div>
|
|
2486
1115
|
|
|
2487
1116
|
<div class="toast toast-success">
|
|
@@ -2703,7 +1332,7 @@ main { background: var(--paper); }
|
|
|
2703
1332
|
<div class="alert-critical-row">
|
|
2704
1333
|
<span class="tag-dot p-urgent">URGENTE</span>
|
|
2705
1334
|
<span style="font-weight:500">Enviar proposta para TR PAULO</span>
|
|
2706
|
-
<span class="src">
|
|
1335
|
+
<span class="src">{{name}} · Tarefas</span>
|
|
2707
1336
|
<span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
|
|
2708
1337
|
</div>
|
|
2709
1338
|
</div>
|
|
@@ -2738,7 +1367,7 @@ main { background: var(--paper); }
|
|
|
2738
1367
|
<div class="funnel">
|
|
2739
1368
|
<span style="width:0%; background:#3b82f6"></span>
|
|
2740
1369
|
<span style="width:36%; background:#7c3aed"></span>
|
|
2741
|
-
<span style="width:18%; background:var(--
|
|
1370
|
+
<span style="width:18%; background:var(--brand-500)"></span>
|
|
2742
1371
|
<span style="width:0%; background:#06b6d4"></span>
|
|
2743
1372
|
<span style="width:0%; background:var(--success-500)"></span>
|
|
2744
1373
|
<span style="width:46%; background:var(--ink-200)"></span>
|
|
@@ -2746,7 +1375,7 @@ main { background: var(--paper); }
|
|
|
2746
1375
|
<div class="funnel-stages">
|
|
2747
1376
|
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#3b82f6"></span>Novo</span><span class="funnel-stage-count">0</span></div>
|
|
2748
1377
|
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#7c3aed"></span>Qualificando</span><span class="funnel-stage-count">4</span></div>
|
|
2749
|
-
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--
|
|
1378
|
+
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand-500)"></span>Reunião</span><span class="funnel-stage-count">1</span></div>
|
|
2750
1379
|
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#06b6d4"></span>Proposta</span><span class="funnel-stage-count">0</span></div>
|
|
2751
1380
|
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--success-500)"></span>Won</span><span class="funnel-stage-count">0</span></div>
|
|
2752
1381
|
<div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--ink-300)"></span>Perdido</span><span class="funnel-stage-count">0</span></div>
|
|
@@ -2760,7 +1389,7 @@ main { background: var(--paper); }
|
|
|
2760
1389
|
<div class="sub-label">Meta mensal</div>
|
|
2761
1390
|
<div style="display:flex; align-items:center; gap:12px; margin-bottom:18px">
|
|
2762
1391
|
<span style="flex:1; font-size:var(--fs-sm); color:var(--ink-600)">0/14 tarefas</span>
|
|
2763
|
-
<span style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--
|
|
1392
|
+
<span style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--brand-700); font-weight:600">0%</span>
|
|
2764
1393
|
</div>
|
|
2765
1394
|
<div class="stat-progress" style="height:6px"><span style="width:0%"></span></div>
|
|
2766
1395
|
|
|
@@ -2775,7 +1404,7 @@ main { background: var(--paper); }
|
|
|
2775
1404
|
|
|
2776
1405
|
<div class="divider"></div>
|
|
2777
1406
|
<div class="spec"><span class="l">Cor padrão</span><span class="v">--success-500 (positivo)</span></div>
|
|
2778
|
-
<div class="spec"><span class="l">Cor alternativa</span><span class="v">--
|
|
1407
|
+
<div class="spec"><span class="l">Cor alternativa</span><span class="v">--brand-500 (neutro/em andamento)</span></div>
|
|
2779
1408
|
<div class="spec"><span class="l">Cor de alerta</span><span class="v">--danger-500 (estoura limite)</span></div>
|
|
2780
1409
|
</div>
|
|
2781
1410
|
</div>
|
|
@@ -2826,7 +1455,7 @@ main { background: var(--paper); }
|
|
|
2826
1455
|
|
|
2827
1456
|
<div class="k-col">
|
|
2828
1457
|
<div class="k-col-head">
|
|
2829
|
-
<span class="lh"><span class="dot" style="background:var(--
|
|
1458
|
+
<span class="lh"><span class="dot" style="background:var(--brand-500)"></span>EM PROGRESSO</span>
|
|
2830
1459
|
<span class="count">2</span>
|
|
2831
1460
|
</div>
|
|
2832
1461
|
<button class="k-add"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 4v10M4 9h10"/></svg> Nova tarefa</button>
|
|
@@ -2895,7 +1524,7 @@ main { background: var(--paper); }
|
|
|
2895
1524
|
<div class="eyebrow">23 — App Patterns · CRM</div>
|
|
2896
1525
|
<h2>Lead Card (Pipeline)</h2>
|
|
2897
1526
|
</div>
|
|
2898
|
-
<p class="section-desc">Card compacto para Pipeline de Vendas. Nome + flame icon (temperatura) + status tag. Ícones de canal (telefone, instagram, email). Footer com follow-up date em ember quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--
|
|
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 ember quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.is-paused</code> adiciona border-left amber para PARADO.</p>
|
|
2899
1528
|
</div>
|
|
2900
1529
|
|
|
2901
1530
|
<div class="panel">
|
|
@@ -3033,7 +1662,7 @@ main { background: var(--paper); }
|
|
|
3033
1662
|
<div class="spec"><span class="l">Altura</span><span class="v">28px</span></div>
|
|
3034
1663
|
<div class="spec"><span class="l">Padding</span><span class="v">0 12px</span></div>
|
|
3035
1664
|
<div class="spec"><span class="l">Border-radius</span><span class="v">--r-sm (4px)</span></div>
|
|
3036
|
-
<div class="spec"><span class="l">Active</span><span class="v">bg ember-50 · color
|
|
1665
|
+
<div class="spec"><span class="l">Active</span><span class="v">bg ember-50 · color brand-700 · border ember-200</span></div>
|
|
3037
1666
|
<div class="spec"><span class="l">Limite recomendado</span><span class="v">≤ 6 chips · acima disso use dropdown</span></div>
|
|
3038
1667
|
</div>
|
|
3039
1668
|
</div>
|
|
@@ -3095,7 +1724,7 @@ main { background: var(--paper); }
|
|
|
3095
1724
|
<div class="eyebrow">26 — App Patterns · CRM</div>
|
|
3096
1725
|
<h2>Biblioteca de Ícones</h2>
|
|
3097
1726
|
</div>
|
|
3098
|
-
<p class="section-desc">Set oficial — outline, stroke 1.5px, viewBox 18×18, sempre em <code style="font-family:var(--font-mono);color:var(--
|
|
1727
|
+
<p class="section-desc">Set oficial — outline, stroke 1.5px, viewBox 18×18, sempre em <code style="font-family:var(--font-mono);color:var(--brand-700)">currentColor</code>. Nunca trocar por filled, nunca misturar com Lucide ou Heroicons num mesmo contexto. Quando faltar ícone, criar seguindo as mesmas regras.</p>
|
|
3099
1728
|
</div>
|
|
3100
1729
|
|
|
3101
1730
|
<div class="panel">
|
|
@@ -3189,7 +1818,7 @@ main { background: var(--paper); }
|
|
|
3189
1818
|
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l7 13H2L9 2z"/><path d="M9 7v3"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/></svg>
|
|
3190
1819
|
<span style="font-size:var(--fs-sm); font-weight:500">Atrasada</span>
|
|
3191
1820
|
</div>
|
|
3192
|
-
<div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--
|
|
1821
|
+
<div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--brand-50); border-radius:var(--r-md); color:var(--brand-700)">
|
|
3193
1822
|
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5L9 2z"/></svg>
|
|
3194
1823
|
<span style="font-size:var(--fs-sm); font-weight:500">Highlight</span>
|
|
3195
1824
|
</div>
|
|
@@ -3255,7 +1884,7 @@ main { background: var(--paper); }
|
|
|
3255
1884
|
<div style="height:80px"></div>
|
|
3256
1885
|
|
|
3257
1886
|
<div style="text-align:center; padding:48px 0; border-top:1px solid var(--line-200)">
|
|
3258
|
-
<img src="assets/logo-
|
|
1887
|
+
<img src="assets/logo-primary.png" alt="{{name}}" style="height:48px; display:inline-block"/>
|
|
3259
1888
|
<div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-300); letter-spacing:var(--ls-wider); text-transform:uppercase; margin-top:16px">Design System · Sistemas v3 · 2026 · App Patterns extraídos do CRM</div>
|
|
3260
1889
|
</div>
|
|
3261
1890
|
</div>
|
|
@@ -3317,8 +1946,8 @@ links.forEach(l => l.addEventListener('click', e => {
|
|
|
3317
1946
|
/* --- Color swatches --- */
|
|
3318
1947
|
const ember = [
|
|
3319
1948
|
['ember-50', '#fff3e9'], ['ember-100', '#ffe1c8'], ['ember-200', '#ffc28e'],
|
|
3320
|
-
['ember-300', '#ffa056'], ['ember-400', '#ff8a3a'], ['
|
|
3321
|
-
['
|
|
1949
|
+
['ember-300', '#ffa056'], ['ember-400', '#ff8a3a'], ['brand-500', '#f56f10'],
|
|
1950
|
+
['brand-600', '#d45e0d'], ['brand-700', '#ad4a09'], ['ember-800', '#843706'],
|
|
3322
1951
|
['ember-900', '#5e2704'],
|
|
3323
1952
|
];
|
|
3324
1953
|
const surface = [
|