@celke/kole-react 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -22
- package/README.md +370 -255
- package/dist/components/Preferencias/Preferencias.d.ts +20 -3
- package/dist/estilos.css +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +360 -337
- package/dist/index.js.map +1 -1
- package/dist/tailwind.css +82 -0
- package/dist/tokens.css +403 -321
- package/package.json +91 -83
package/dist/tokens.css
CHANGED
|
@@ -1,325 +1,407 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
--acento
|
|
12
|
-
--acento-
|
|
13
|
-
--acento-
|
|
14
|
-
--acento-
|
|
15
|
-
/*
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--surf-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
--surf-raised
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
página
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
--
|
|
40
|
-
--border
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--pri
|
|
56
|
-
--pri-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
--
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
--
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
--sidebar-
|
|
72
|
-
--sidebar-ink:
|
|
73
|
-
--sidebar-ink
|
|
74
|
-
--sidebar-ink-
|
|
75
|
-
--sidebar-
|
|
76
|
-
--sidebar-tile
|
|
77
|
-
--sidebar-
|
|
78
|
-
--sidebar-item-
|
|
79
|
-
--sidebar-item-
|
|
80
|
-
--sidebar-item-open
|
|
81
|
-
--sidebar-
|
|
82
|
-
--sidebar-active-
|
|
83
|
-
--sidebar-active-
|
|
84
|
-
--sidebar-
|
|
85
|
-
--sidebar-
|
|
86
|
-
--sidebar-
|
|
87
|
-
--sidebar-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
--sidebar-flyout
|
|
92
|
-
--sidebar-
|
|
93
|
-
--sidebar-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
--
|
|
99
|
-
--
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
--ink-on-
|
|
117
|
-
--ink-on-
|
|
118
|
-
--ink-on-
|
|
119
|
-
--
|
|
120
|
-
--
|
|
121
|
-
--
|
|
122
|
-
--
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
(--bg
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
--thead-
|
|
131
|
-
--thead-ink
|
|
132
|
-
--thead-ink-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
--r-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
--r-
|
|
148
|
-
--r-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
--
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
--dica-
|
|
169
|
-
--dica-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
o
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
--z-
|
|
187
|
-
--z-
|
|
188
|
-
--z-
|
|
189
|
-
--z-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
--d-
|
|
200
|
-
--d-
|
|
201
|
-
--d-
|
|
202
|
-
--d-
|
|
203
|
-
--d-
|
|
204
|
-
--d-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
/*
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
--font-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
--fs-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
--fs-
|
|
228
|
-
--fs-titulo:
|
|
229
|
-
--fs-
|
|
230
|
-
--fs-display
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
--
|
|
249
|
-
--surf-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
--
|
|
253
|
-
--
|
|
254
|
-
--
|
|
255
|
-
|
|
256
|
-
--
|
|
257
|
-
--
|
|
258
|
-
--
|
|
259
|
-
|
|
260
|
-
--
|
|
261
|
-
--
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
--
|
|
271
|
-
|
|
272
|
-
--
|
|
273
|
-
--
|
|
274
|
-
--
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
/*
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
--
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
--
|
|
298
|
-
--
|
|
299
|
-
--
|
|
300
|
-
--
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
--
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
--
|
|
310
|
-
|
|
311
|
-
|
|
1
|
+
@layer kole {
|
|
2
|
+
/* ============================================================
|
|
3
|
+
Celke Kole — Design Tokens
|
|
4
|
+
Fonte única de verdade. NÃO usar hex/px solto em componente.
|
|
5
|
+
Já é importado por `@celke/kole-react/estilos.css`.
|
|
6
|
+
============================================================ */
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* ---- Marca (paleta Celke: marinho + azul elétrico + laranja) ----
|
|
10
|
+
`--acento*` = o LARANJA de destaque (item ativo, barra de aba, spinner). */
|
|
11
|
+
--acento: #f7931e;
|
|
12
|
+
--acento-claro: #ff9a2e;
|
|
13
|
+
--acento-borda: #e07b0c; /* borda do tile do ativo (sidebar) */
|
|
14
|
+
--acento-tint: rgba(255, 154, 46, .16); /* laranja translúcido (grupo aberto, recolhido) */
|
|
15
|
+
--acento-suave: #ffb057; /* sub-item ativo (texto) — 9,5:1 sobre o marinho */
|
|
16
|
+
/* laranja como TINTA sobre superfície (ícone de ação "Editar"): o laranja
|
|
17
|
+
da marca dá 2,3:1 no branco — este tom escurecido passa dos 3:1 de ícone */
|
|
18
|
+
--destaque-ink: #d97706;
|
|
19
|
+
/* laranja como TEXTO (alerta de destaque): 4,7:1 no fundo laranja-claro e
|
|
20
|
+
5,2:1 no branco — o --destaque-ink (3:1) só serve para ícone */
|
|
21
|
+
--destaque-fg: #c2410c;
|
|
22
|
+
|
|
23
|
+
/* ---- Superfícies / texto (TEMA CLARO = padrão) ---- */
|
|
24
|
+
--bg: #f2f5fa;
|
|
25
|
+
--surface: #ffffff;
|
|
26
|
+
--surf-2: #f8fafd;
|
|
27
|
+
--surf-3: #f1f4f9;
|
|
28
|
+
/* superfície FLUTUANTE (modal/painel de select/calendário) e o degrau de
|
|
29
|
+
apoio sobre ela (faixa do footer, hover de opção). No claro empatam com
|
|
30
|
+
surface/surf-2 (a sombra recorta); no escuro sobem um degrau de LUZ —
|
|
31
|
+
elevação escura se comunica clareando, não sombreando. */
|
|
32
|
+
--surf-raised: #ffffff;
|
|
33
|
+
--surf-raised-2: #f8fafd;
|
|
34
|
+
/* chão do diálogo que carrega SEÇÕES (Form em modal). No claro é o
|
|
35
|
+
canvas da página: a seção (--surface) vira o mesmo card branco do form em
|
|
36
|
+
página. Sem ele, seção e corpo eram o mesmo branco (--surf-raised empata
|
|
37
|
+
com --surface no claro) e o grupo ficava só no contorno — mais fraco que a
|
|
38
|
+
borda dos campos dentro dele. */
|
|
39
|
+
--dlg-canvas: var(--bg);
|
|
40
|
+
--border: #e0e6ef;
|
|
41
|
+
--border-2: #c9d2e0;
|
|
42
|
+
|
|
43
|
+
--ink: #0e1726; /* texto principal */
|
|
44
|
+
--t2: #334055; /* texto forte */
|
|
45
|
+
--t3: #55627a; /* texto de apoio */
|
|
46
|
+
--t4: #7a879c; /* rótulos / secundário */
|
|
47
|
+
--t5: #9ca7b8; /* placeholder */
|
|
48
|
+
--tdis: #bfc8d5; /* desabilitado */
|
|
49
|
+
|
|
50
|
+
/* ---- Ação (azul elétrico da marca) ----
|
|
51
|
+
A cor de AÇÃO é o azul da capa, separado do marinho da sidebar: botão,
|
|
52
|
+
link, ícone e anel de foco têm cor própria e se distinguem do texto.
|
|
53
|
+
Trocar o azul de ação = trocar ESTAS linhas.
|
|
54
|
+
Contraste (medido): branco sobre --pri 5,57:1; --pri sobre --pri-bg 4,91:1. */
|
|
55
|
+
--pri: #1f5fe0;
|
|
56
|
+
--pri-bg: #eaf1ff; /* azul a ~6% — halo de foco, tile, faixa, item ativo */
|
|
57
|
+
--pri-bd: #c3d6fb; /* borda sobre --pri-bg */
|
|
58
|
+
/* `--pri-ink` = tinta sobre `--pri-bg` E o passo de HOVER do botão sólido:
|
|
59
|
+
com tinta branca, o hover ESCURECE (7,68:1). */
|
|
60
|
+
--pri-ink: #174bb8;
|
|
61
|
+
--on-pri: #ffffff; /* texto/ícone sobre o azul sólido */
|
|
62
|
+
|
|
63
|
+
/* ---- Cor institucional da marca (marinho) ----
|
|
64
|
+
`--navy` é o token semântico da marca; sidebar/thead/backdrop/avatar/form
|
|
65
|
+
derivam dele via var(--navy). */
|
|
66
|
+
--navy: #0b1a36; /* marinho da capa */
|
|
67
|
+
--brand-ink: #0b1a36; /* marinho (wordmark do sistema na topbar) */
|
|
68
|
+
|
|
69
|
+
/* ---- Sidebar / cores da sidebar (navy) (Variação D do anexo de sidebar; constante nos
|
|
70
|
+
dois temas — o sidebar é superfície escura sempre) ---- */
|
|
71
|
+
--sidebar-bg: var(--navy); /* fundo do sidebar (= --navy) */
|
|
72
|
+
--sidebar-ink-strong: #ffffff; /* texto branco (marca/ativo) */
|
|
73
|
+
--sidebar-ink: #d6e2f5; /* texto forte (item ativo/marca) */
|
|
74
|
+
--sidebar-ink-2: #a9bcda; /* texto/ícone de item inativo */
|
|
75
|
+
--sidebar-ink-muted: #6f86ad; /* rótulos de grupo / ícones 2ºrios */
|
|
76
|
+
--sidebar-tile: rgba(255, 255, 255, .06); /* tile do ícone (inativo) */
|
|
77
|
+
--sidebar-tile-hover: rgba(255, 255, 255, .12); /* tile no hover */
|
|
78
|
+
--sidebar-item-hover: rgba(255, 255, 255, .06); /* fundo do item no hover */
|
|
79
|
+
--sidebar-item-active: rgba(255, 255, 255, .04); /* fundo do item ativo */
|
|
80
|
+
--sidebar-item-open: rgba(255, 255, 255, .03); /* fundo do grupo aberto (expandido) */
|
|
81
|
+
--sidebar-item-open-c: rgba(255, 255, 255, .05); /* fundo do grupo aberto (recolhido) */
|
|
82
|
+
--sidebar-active-tile: var(--acento-claro); /* tile do ativo (laranja) */
|
|
83
|
+
--sidebar-active-icon: var(--navy); /* ícone sobre o tile laranja (8,2:1) */
|
|
84
|
+
--sidebar-active-bar: var(--acento-claro); /* barra inset 3px do ativo */
|
|
85
|
+
--sidebar-guide: rgba(255, 255, 255, .10); /* guia à esquerda do submenu */
|
|
86
|
+
--sidebar-grp-line: rgba(255, 255, 255, .07); /* linha do rótulo de grupo */
|
|
87
|
+
--sidebar-divider: rgba(255, 255, 255, .08); /* divisórias do sidebar */
|
|
88
|
+
--sidebar-edge: rgba(255, 255, 255, .08); /* aresta externa (costura com o
|
|
89
|
+
conteúdo) — no escuro navy ≈ surface e a separação
|
|
90
|
+
se comunica com LUZ, não com contraste de fundo */
|
|
91
|
+
--sidebar-flyout: #12264a; /* fundo do flyout (recolhido) */
|
|
92
|
+
--sidebar-flyout-bd: #1f3a6b; /* borda do flyout */
|
|
93
|
+
--sidebar-shadow: rgba(8, 18, 40, .28); /* sombra do sidebar flutuante */
|
|
94
|
+
--sidebar-flyout-shadow: rgba(0, 0, 0, .42); /* sombra do flyout */
|
|
95
|
+
|
|
96
|
+
/* ---- Status ----
|
|
97
|
+
-fg calibrado ≥ 4.5:1 sobre o -bg par (DoD; medido: ok 5.53, warn 5.06) */
|
|
98
|
+
--ok-fg: #136f36; --ok-bg: #e7f4ec; --ok-bd: #bfe3cd; --ok-solid: #15803d;
|
|
99
|
+
--warn-fg:#a54c08; --warn-bg:#fbeede; --warn-bd:#f3d5a8; --warn-solid:#b45309;
|
|
100
|
+
--err-fg: #b42318; --err-bg: #fbeae8; --err-bd: #f1c3bd; --err-solid: #b42318;
|
|
101
|
+
/* info = azul próprio (≠ --pri, puxado para o ciano): severidade
|
|
102
|
+
token-backed de "informativo/em análise". */
|
|
103
|
+
--info-fg:#0b6b9e; --info-bg:#e8f6fd; --info-bd:#b3e0f5; --info-solid:#0b72aa;
|
|
104
|
+
/* Tinta sobre cor SÓLIDA saturada (--navy, --err-solid dos campos inválidos):
|
|
105
|
+
branca. Vale onde o fundo é escuro nos DOIS temas. */
|
|
106
|
+
--ink-on-solid: #ffffff;
|
|
107
|
+
|
|
108
|
+
/* ---- Botão sólido por severidade: tinta + passo de hover ----
|
|
109
|
+
A premissa antiga ("branco serve nos dois temas") não se sustenta: no dark
|
|
110
|
+
os sólidos CLAREIAM, e branco sobre o verde dava 3,42:1 e sobre o âmbar
|
|
111
|
+
3,71:1 — reprovados. Aqui cada severidade declara a própria tinta, e o
|
|
112
|
+
hover é TOKEN (não `color-mix` no CSS do componente): o número volta pro
|
|
113
|
+
tokens.css e o contraste fica auditável estado a estado.
|
|
114
|
+
Direção do hover: ele se afasta da TINTA. Tinta branca → escurece; tinta
|
|
115
|
+
escura → clareia (a mesma doutrina de "no escuro, elevação é luz"). */
|
|
116
|
+
--ink-on-ok: #ffffff;
|
|
117
|
+
--ink-on-warn: #ffffff;
|
|
118
|
+
--ink-on-err: #ffffff;
|
|
119
|
+
--ink-on-info: #ffffff;
|
|
120
|
+
--ok-solid-hover: #146d3a;
|
|
121
|
+
--warn-solid-hover: #96480f;
|
|
122
|
+
--err-solid-hover: #96211b;
|
|
123
|
+
--info-solid-hover: #095f8e;
|
|
124
|
+
|
|
125
|
+
/* ---- Cabeçalho de listagem — aliases SEMÂNTICOS. Traje "marca diluída":
|
|
126
|
+
tinta da marca a 18% sobre a superfície — um degrau ACIMA do hover das
|
|
127
|
+
linhas (--pri-bg) e visivelmente mais fundo que o fundo do sistema
|
|
128
|
+
(--bg #f2f4f6; a 12% os dois quase empatavam), escala monotônica
|
|
129
|
+
cabeçalho > hover > zebra. ---- */
|
|
130
|
+
--thead-bg: color-mix(in srgb, var(--pri) 9%, var(--surface));
|
|
131
|
+
--thead-ink: var(--pri);
|
|
132
|
+
--thead-ink-2: var(--pri);
|
|
133
|
+
--thead-ink-muted: color-mix(in srgb, var(--pri) 55%, transparent);
|
|
134
|
+
/* divisória que FECHA a faixa: tinta da marca a 35%, 1px. Em --pri puro
|
|
135
|
+
(2px) era o traço mais forte da tela (12:1 contra a faixa); a 35% fica na
|
|
136
|
+
família das verticais do cabeçalho (22%), um degrau acima delas. */
|
|
137
|
+
--thead-divisor: color-mix(in srgb, var(--pri) 35%, transparent);
|
|
138
|
+
|
|
139
|
+
/* ---- Traço ---- */
|
|
140
|
+
--hairline: 0.0625rem; /* filete de 1px em rem (divisórias, bordas finas) */
|
|
141
|
+
|
|
142
|
+
/* ---- Raio ---- */
|
|
143
|
+
--r-field: 6px;
|
|
144
|
+
--r-btn: 8px; /* retângulo padrão de controles/superfícies (alerta, paginação,
|
|
145
|
+
diálogo, cards de listagem…) — botão de AÇÃO usa --r-pill
|
|
146
|
+
desde a inversão ação×situação (2026-07-17) */
|
|
147
|
+
--r-card: 9px;
|
|
148
|
+
--r-dialog:12px;
|
|
149
|
+
--r-pill: 100rem; /* "infinito": fecha pílula em QUALQUER altura — 20px fixos
|
|
150
|
+
deixavam flancos retos acima de 40px (mordeu no login, cozy
|
|
151
|
+
--d-h 44px; o clamp do CSS só reduz raio EXCEDENTE) */
|
|
152
|
+
|
|
153
|
+
/* ---- Overlays (máscara + recorte de superfície flutuante) ----
|
|
154
|
+
No claro, a máscara navy dima o conteúdo atrás e a SOMBRA recorta o
|
|
155
|
+
modal. No escuro navy ≈ fundo (a máscara não dima nada) e sombra some
|
|
156
|
+
sobre preto — a máscara vira preto e o recorte passa a ser uma hairline
|
|
157
|
+
(elevação no escuro se comunica com luz/borda, não com sombra). */
|
|
158
|
+
--backdrop: color-mix(in srgb, var(--navy) 45%, transparent);
|
|
159
|
+
--overlay-edge: transparent;
|
|
160
|
+
/* sombra padrão de superfície flutuante (painel de select/calendário,
|
|
161
|
+
toast, dialog) — semântica própria, NÃO reusar a --sidebar-shadow do layout */
|
|
162
|
+
--overlay-shadow: rgba(8, 18, 40, .28);
|
|
163
|
+
|
|
164
|
+
/* superfície da DICA (tooltip) — balão de TINTA: alto contraste e efêmero,
|
|
165
|
+
DISTINTO dos painéis flutuantes claros (select/calendário). No claro a
|
|
166
|
+
tinta é escura (texto claro). No escuro clareia um degrau (elevação = luz)
|
|
167
|
+
p/ não sumir no fundo. Contraste ≥ 4.5:1 nos dois temas (DoD). */
|
|
168
|
+
--dica-bg: #12264a;
|
|
169
|
+
--dica-ink: #f4f6f8;
|
|
170
|
+
--dica-edge: transparent;
|
|
171
|
+
|
|
172
|
+
/* ---- Camadas ----
|
|
173
|
+
Sidebar E topbar criam stacking context: os menus internos (--z-flyout)
|
|
174
|
+
valem o z da PRÓPRIA moldura contra o resto da tela; topbar < sidebar para
|
|
175
|
+
o drawer/backdrop mobile (--z-sidebar) cobrir a topbar. Conteúdo de página
|
|
176
|
+
não entra na escala: o form em página vive NO FLUXO (sticky local), não
|
|
177
|
+
como overlay.
|
|
178
|
+
Obs.: overlay do CDK (select/calendário/dialog) é `popover` — vive na TOP
|
|
179
|
+
LAYER do browser, ACIMA de toda esta escala e sem depender dela (z-index
|
|
180
|
+
de documento não ordena a top layer). Quem precisa passar por cima de um
|
|
181
|
+
modal entra na top layer também: é o que o host do toast faz (feedback é
|
|
182
|
+
a última palavra da tela e nunca nasce atrás do backdrop). Já o
|
|
183
|
+
Carregando bloqueante usa --z-dialog de propósito: é espera de
|
|
184
|
+
PÁGINA, não cobre modal aberto. O --z-toast segue como o degrau do toast
|
|
185
|
+
no documento — fallback de browser sem Popover API. */
|
|
186
|
+
--z-topbar: 25;
|
|
187
|
+
--z-sidebar: 30;
|
|
188
|
+
--z-flyout: 40;
|
|
189
|
+
--z-dialog: 70;
|
|
190
|
+
--z-toast: 1100;
|
|
191
|
+
|
|
192
|
+
/* Pouso do toast: abaixo da topbar do layout (3rem) + respiro — toast não
|
|
193
|
+
cobre sino/perfil/tema. A altura da topbar é var LOCAL da Estrutura
|
|
194
|
+
(:host); o host do toast vive na RAIZ do app e não a herda — por isso o
|
|
195
|
+
valor é token global. App com moldura própria (altura outra) sobrepõe. */
|
|
196
|
+
--toast-top: 4rem;
|
|
197
|
+
|
|
198
|
+
/* ---- Densidade (sobrescrita pelas classes .density-*) — default confortável ---- */
|
|
199
|
+
--d-h: 36px; /* altura de controle */
|
|
200
|
+
--d-px: 11px; /* padding horizontal de campo */
|
|
201
|
+
--d-bpx: 16px; /* padding horizontal de botão */
|
|
202
|
+
--d-fs: 14px; /* corpo denso (input/célula/botão) */
|
|
203
|
+
--d-row: 8px; /* padding de linha */
|
|
204
|
+
--d-gap: 13px; /* gap de grid de form */
|
|
205
|
+
--d-card:16px; /* padding de cartão */
|
|
206
|
+
|
|
207
|
+
/* ---- Tipografia ---- */
|
|
208
|
+
/* Inter (variável, do @fontsource) = fonte da interface. Mono NÃO baixa
|
|
209
|
+
fonte: o papel "código/identificador" (CPF, placa, n/total) fica com a mono
|
|
210
|
+
do SISTEMA — 1 fonte no bundle, e 0/O · 1/l seguem distinguíveis. */
|
|
211
|
+
--font-ui: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
|
|
212
|
+
--lp-font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', monospace;
|
|
213
|
+
|
|
214
|
+
/* ---- Escala tipográfica (padronização 2026-07-06) ----
|
|
215
|
+
TEXTO SÓ NASCE DESTES TOKENS (ou de --d-fs, o corpo denso por
|
|
216
|
+
densidade). Ancorada no consenso enterprise-denso (Carbon/Fluent/
|
|
217
|
+
Ant/Fiori: corpo 14, secundário 12): PISO informativo = caption
|
|
218
|
+
(12px); micro (11px) SÓ para caps estruturais com tracking (rótulo
|
|
219
|
+
de grupo do sidebar, título de índice). Exceções documentadas fora da
|
|
220
|
+
escala: glifo de ícone (geometria), pt de impressão, display do
|
|
221
|
+
login, artwork de dado (placa Mercosul, iniciais de avatar). */
|
|
222
|
+
--fs-micro: 0.6875rem; /* 11px — caps estruturais, contadores */
|
|
223
|
+
--fs-caption: 0.75rem; /* 12px — label de campo, hint/erro, th,
|
|
224
|
+
metadados, paginação */
|
|
225
|
+
--fs-corpo-2: 0.8125rem; /* 13px — secundário denso (item de nav,
|
|
226
|
+
menus, subtítulo de card) */
|
|
227
|
+
--fs-corpo: 0.875rem; /* 14px — corpo de leitura do app */
|
|
228
|
+
--fs-titulo-secao: 1rem; /* 16px — seção de form, título de diálogo */
|
|
229
|
+
--fs-titulo: 1.25rem; /* 20px — título de página (ÚNICO) */
|
|
230
|
+
--fs-display: 1.5rem; /* 24px — números/heros de dashboards */
|
|
231
|
+
--fs-display-2: 2.125rem; /* 34px — hero (saudação do login) */
|
|
232
|
+
|
|
233
|
+
color-scheme: light;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* ============================================================
|
|
237
|
+
TEMA ESCURO — mesmos nomes, valores dessaturados.
|
|
238
|
+
Ative com <html data-theme="dark"> (ou .theme-dark). Com
|
|
239
|
+
<html data-theme="system">, segue o modo do sistema operacional:
|
|
240
|
+
o build copia ESTE bloco para um @media (prefers-color-scheme: dark)
|
|
241
|
+
(scripts/css-kole.mjs) — mantenha só declarações aqui, sem regras aninhadas.
|
|
242
|
+
SÓ NA TELA (@media screen): papel é sempre claro — sem isso,
|
|
243
|
+
imprimir no escuro sai tinta quase-branca sobre papel branco.
|
|
244
|
+
============================================================ */
|
|
245
|
+
@media screen {
|
|
246
|
+
[data-theme="dark"], .theme-dark {
|
|
247
|
+
--bg: #070d1a;
|
|
248
|
+
--surface: #0f1729;
|
|
249
|
+
--surf-2: #141e33;
|
|
250
|
+
--surf-3: #19243c;
|
|
251
|
+
/* flutuante sobe um degrau de luz; o apoio sobe outro (hover visível) */
|
|
252
|
+
--surf-raised: #141e33;
|
|
253
|
+
--surf-raised-2: #19243c;
|
|
254
|
+
/* o chão do diálogo com seções é a própria elevação: a seção (--surface)
|
|
255
|
+
afunda um degrau nela. O --bg da página abriria um buraco no modal. */
|
|
256
|
+
--dlg-canvas: var(--surf-raised);
|
|
257
|
+
--border: #223152;
|
|
258
|
+
--border-2: #2e3f63;
|
|
259
|
+
|
|
260
|
+
--ink: #e8eef8;
|
|
261
|
+
--t2: #b4c0d4;
|
|
262
|
+
--t3: #8a98b0;
|
|
263
|
+
--t4: #6e7c95;
|
|
264
|
+
--t5: #56637b;
|
|
265
|
+
--tdis: #3f4a60;
|
|
266
|
+
|
|
267
|
+
/* No escuro o azul de ação CLAREIA para manter contraste com o fundo
|
|
268
|
+
marinho (5,59:1 sobre --surface); a tinta sobre ele fica escura (5,96:1)
|
|
269
|
+
e o hover segue clareando, coerente com "elevação = luz". */
|
|
270
|
+
--pri: #4d8dff;
|
|
271
|
+
--pri-bg: #13254a;
|
|
272
|
+
--pri-bd: #24427a;
|
|
273
|
+
--pri-ink: #77a8ff;
|
|
274
|
+
--on-pri: #06101f; /* texto/ícone sobre o azul claro do tema escuro */
|
|
275
|
+
|
|
276
|
+
--navy: #0a1428;
|
|
277
|
+
--destaque-ink: #ff9a2e; /* 8,4:1 sobre --surface */
|
|
278
|
+
--destaque-fg: #ffb057; /* 8,1:1 sobre o fundo do alerta de destaque */
|
|
279
|
+
--brand-ink: #e8eef8;
|
|
280
|
+
|
|
281
|
+
/* thead "marinho diluído": no escuro a mix da marca empataria com a própria
|
|
282
|
+
superfície (navy escuro sobre fundo escuro) — elevação aqui é LUZ, um
|
|
283
|
+
degrau acima (mesma régua dos overlays). Tintas seguem dos aliases
|
|
284
|
+
(--pri já vira claro neste tema). */
|
|
285
|
+
--thead-bg: var(--surf-raised-2);
|
|
286
|
+
|
|
287
|
+
--ok-fg:#59d98c; --ok-bg:#14301f; --ok-bd:#235639; --ok-solid:#2f9e54;
|
|
288
|
+
--warn-fg:#f0b057; --warn-bg:#2e2208; --warn-bd:#564214; --warn-solid:#c2710c;
|
|
289
|
+
--err-fg:#f47369; --err-bg:#331513; --err-bd:#5a2620; --err-solid:#cf4034;
|
|
290
|
+
--info-fg:#6fd0ff; --info-bg:#0b2233; --info-bd:#1d4a66; --info-solid:#2aa8e6;
|
|
291
|
+
|
|
292
|
+
/* Verde e âmbar CLAREIAM no escuro: branco por cima reprovava (3,42:1 e
|
|
293
|
+
3,71:1) — a tinta vira escura e o hover CLAREIA (afasta-se da tinta).
|
|
294
|
+
O vermelho continua escuro o bastante p/ tinta branca (4,73:1), então
|
|
295
|
+
segue branco e escurecendo — é a exceção, e é por isso que a tinta é
|
|
296
|
+
declarada POR severidade em vez de uma regra só. */
|
|
297
|
+
--ink-on-ok: #0d1117;
|
|
298
|
+
--ink-on-warn: #0d1117;
|
|
299
|
+
--ink-on-err: #ffffff;
|
|
300
|
+
--ink-on-info: #0d1117;
|
|
301
|
+
--ok-solid-hover: #54af73;
|
|
302
|
+
--warn-solid-hover: #cd8b38;
|
|
303
|
+
--err-solid-hover: #ac3a33;
|
|
304
|
+
--info-solid-hover: #5cbdee;
|
|
305
|
+
|
|
306
|
+
/* overlays: navy 45% não dima nada aqui (navy ≈ fundo) e sombra não
|
|
307
|
+
existe sobre preto — máscara vira preto e o recorte vira hairline */
|
|
308
|
+
--backdrop: rgb(0 0 0 / 0.6);
|
|
309
|
+
--overlay-edge: var(--border-2);
|
|
310
|
+
|
|
311
|
+
/* dica: no escuro a tinta CLAREIA (elevação = luz) p/ destacar do fundo,
|
|
312
|
+
com aresta sutil como os demais flutuantes */
|
|
313
|
+
--dica-bg: #24314d;
|
|
314
|
+
--dica-ink: #eef2f8;
|
|
315
|
+
--dica-edge: var(--border-2);
|
|
316
|
+
|
|
317
|
+
color-scheme: dark;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* ============================================================
|
|
322
|
+
DENSIDADE — aplique a classe no layout (ex.: <body class="density-compact">)
|
|
323
|
+
============================================================ */
|
|
324
|
+
.density-compact { --d-h:30px; --d-px:9px; --d-bpx:14px; --d-fs:13px; --d-row:5px; --d-gap:10px; --d-card:12px; }
|
|
325
|
+
.density-comfortable { --d-h:36px; --d-px:11px; --d-bpx:16px; --d-fs:14px; --d-row:8px; --d-gap:13px; --d-card:16px; }
|
|
326
|
+
.density-cozy { --d-h:44px; --d-px:13px; --d-bpx:18px; --d-fs:15px; --d-row:11px; --d-gap:16px; --d-card:20px; }
|
|
327
|
+
|
|
328
|
+
/* Base recomendada */
|
|
329
|
+
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); }
|
|
312
330
|
|
|
331
|
+
/* tema "sistema": gerado do bloco escuro acima (scripts/css-kole.mjs) */
|
|
332
|
+
@media screen and (prefers-color-scheme: dark) {
|
|
333
|
+
[data-theme="system"] {
|
|
334
|
+
--bg: #070d1a;
|
|
335
|
+
--surface: #0f1729;
|
|
336
|
+
--surf-2: #141e33;
|
|
337
|
+
--surf-3: #19243c;
|
|
338
|
+
/* flutuante sobe um degrau de luz; o apoio sobe outro (hover visível) */
|
|
339
|
+
--surf-raised: #141e33;
|
|
340
|
+
--surf-raised-2: #19243c;
|
|
341
|
+
/* o chão do diálogo com seções é a própria elevação: a seção (--surface)
|
|
342
|
+
afunda um degrau nela. O --bg da página abriria um buraco no modal. */
|
|
343
|
+
--dlg-canvas: var(--surf-raised);
|
|
344
|
+
--border: #223152;
|
|
345
|
+
--border-2: #2e3f63;
|
|
346
|
+
|
|
347
|
+
--ink: #e8eef8;
|
|
348
|
+
--t2: #b4c0d4;
|
|
349
|
+
--t3: #8a98b0;
|
|
350
|
+
--t4: #6e7c95;
|
|
351
|
+
--t5: #56637b;
|
|
352
|
+
--tdis: #3f4a60;
|
|
353
|
+
|
|
354
|
+
/* No escuro o azul de ação CLAREIA para manter contraste com o fundo
|
|
355
|
+
marinho (5,59:1 sobre --surface); a tinta sobre ele fica escura (5,96:1)
|
|
356
|
+
e o hover segue clareando, coerente com "elevação = luz". */
|
|
357
|
+
--pri: #4d8dff;
|
|
358
|
+
--pri-bg: #13254a;
|
|
359
|
+
--pri-bd: #24427a;
|
|
360
|
+
--pri-ink: #77a8ff;
|
|
361
|
+
--on-pri: #06101f; /* texto/ícone sobre o azul claro do tema escuro */
|
|
362
|
+
|
|
363
|
+
--navy: #0a1428;
|
|
364
|
+
--destaque-ink: #ff9a2e; /* 8,4:1 sobre --surface */
|
|
365
|
+
--destaque-fg: #ffb057; /* 8,1:1 sobre o fundo do alerta de destaque */
|
|
366
|
+
--brand-ink: #e8eef8;
|
|
367
|
+
|
|
368
|
+
/* thead "marinho diluído": no escuro a mix da marca empataria com a própria
|
|
369
|
+
superfície (navy escuro sobre fundo escuro) — elevação aqui é LUZ, um
|
|
370
|
+
degrau acima (mesma régua dos overlays). Tintas seguem dos aliases
|
|
371
|
+
(--pri já vira claro neste tema). */
|
|
372
|
+
--thead-bg: var(--surf-raised-2);
|
|
373
|
+
|
|
374
|
+
--ok-fg:#59d98c; --ok-bg:#14301f; --ok-bd:#235639; --ok-solid:#2f9e54;
|
|
375
|
+
--warn-fg:#f0b057; --warn-bg:#2e2208; --warn-bd:#564214; --warn-solid:#c2710c;
|
|
376
|
+
--err-fg:#f47369; --err-bg:#331513; --err-bd:#5a2620; --err-solid:#cf4034;
|
|
377
|
+
--info-fg:#6fd0ff; --info-bg:#0b2233; --info-bd:#1d4a66; --info-solid:#2aa8e6;
|
|
378
|
+
|
|
379
|
+
/* Verde e âmbar CLAREIAM no escuro: branco por cima reprovava (3,42:1 e
|
|
380
|
+
3,71:1) — a tinta vira escura e o hover CLAREIA (afasta-se da tinta).
|
|
381
|
+
O vermelho continua escuro o bastante p/ tinta branca (4,73:1), então
|
|
382
|
+
segue branco e escurecendo — é a exceção, e é por isso que a tinta é
|
|
383
|
+
declarada POR severidade em vez de uma regra só. */
|
|
384
|
+
--ink-on-ok: #0d1117;
|
|
385
|
+
--ink-on-warn: #0d1117;
|
|
386
|
+
--ink-on-err: #ffffff;
|
|
387
|
+
--ink-on-info: #0d1117;
|
|
388
|
+
--ok-solid-hover: #54af73;
|
|
389
|
+
--warn-solid-hover: #cd8b38;
|
|
390
|
+
--err-solid-hover: #ac3a33;
|
|
391
|
+
--info-solid-hover: #5cbdee;
|
|
392
|
+
|
|
393
|
+
/* overlays: navy 45% não dima nada aqui (navy ≈ fundo) e sombra não
|
|
394
|
+
existe sobre preto — máscara vira preto e o recorte vira hairline */
|
|
395
|
+
--backdrop: rgb(0 0 0 / 0.6);
|
|
396
|
+
--overlay-edge: var(--border-2);
|
|
397
|
+
|
|
398
|
+
/* dica: no escuro a tinta CLAREIA (elevação = luz) p/ destacar do fundo,
|
|
399
|
+
com aresta sutil como os demais flutuantes */
|
|
400
|
+
--dica-bg: #24314d;
|
|
401
|
+
--dica-ink: #eef2f8;
|
|
402
|
+
--dica-edge: var(--border-2);
|
|
403
|
+
|
|
313
404
|
color-scheme: dark;
|
|
314
405
|
}
|
|
315
406
|
}
|
|
316
|
-
|
|
317
|
-
/* ============================================================
|
|
318
|
-
DENSIDADE — aplique a classe no layout (ex.: <body class="density-compact">)
|
|
319
|
-
============================================================ */
|
|
320
|
-
.density-compact { --d-h:30px; --d-px:9px; --d-bpx:14px; --d-fs:13px; --d-row:5px; --d-gap:10px; --d-card:12px; }
|
|
321
|
-
.density-comfortable { --d-h:36px; --d-px:11px; --d-bpx:16px; --d-fs:14px; --d-row:8px; --d-gap:13px; --d-card:16px; }
|
|
322
|
-
.density-cozy { --d-h:44px; --d-px:13px; --d-bpx:18px; --d-fs:15px; --d-row:11px; --d-gap:16px; --d-card:20px; }
|
|
323
|
-
|
|
324
|
-
/* Base recomendada */
|
|
325
|
-
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); }
|
|
407
|
+
}
|