@inchurch/matcha-theme 22.23.0 → 22.24.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.
|
@@ -253,6 +253,52 @@
|
|
|
253
253
|
}
|
|
254
254
|
}
|
|
255
255
|
|
|
256
|
+
// ── Nav Rail labeled (84px — nome do módulo embaixo do ícone) ───────────────
|
|
257
|
+
// Variante ativada por `<matcha-nav-rail labeled>`. O slot do label fica oculto
|
|
258
|
+
// por padrão, então o consumer mantém o <span> no template e só alterna a flag.
|
|
259
|
+
// Header fica de fora do resize: o hamburger não recebe label (56px fixos).
|
|
260
|
+
|
|
261
|
+
.matcha-nav-rail [matcha-nav-rail-module-label],
|
|
262
|
+
.matcha-nav-rail .matcha-nav-rail__module-label {
|
|
263
|
+
display: none;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.matcha-nav-rail--labeled {
|
|
267
|
+
width: 84px;
|
|
268
|
+
|
|
269
|
+
.matcha-nav-rail__modules,
|
|
270
|
+
.matcha-nav-rail__footer {
|
|
271
|
+
[matcha-nav-rail-module],
|
|
272
|
+
.matcha-nav-rail__module {
|
|
273
|
+
flex-direction: column;
|
|
274
|
+
gap: var(--matcha-space-050, 4px);
|
|
275
|
+
width: 76px;
|
|
276
|
+
height: auto;
|
|
277
|
+
min-height: 64px;
|
|
278
|
+
padding-block: var(--matcha-space-075, 6px);
|
|
279
|
+
padding-inline: var(--matcha-space-050, 4px);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
[matcha-nav-rail-module-label],
|
|
283
|
+
.matcha-nav-rail__module-label {
|
|
284
|
+
// -webkit-box + line-clamp: 2 linhas máx com ellipsis. Nome longo
|
|
285
|
+
// ("Configurações") quebra em vez de estourar os 76px do botão.
|
|
286
|
+
display: -webkit-box;
|
|
287
|
+
-webkit-box-orient: vertical;
|
|
288
|
+
-webkit-line-clamp: 2;
|
|
289
|
+
overflow: hidden;
|
|
290
|
+
max-width: 100%;
|
|
291
|
+
font-family: var(--matcha-font-family);
|
|
292
|
+
font-size: var(--matcha-text-2xs, 10px);
|
|
293
|
+
line-height: var(--matcha-leading-p-tiny, 14px);
|
|
294
|
+
letter-spacing: var(--matcha-letter-spacing-caption, 0.3px);
|
|
295
|
+
font-weight: 400;
|
|
296
|
+
text-align: center;
|
|
297
|
+
overflow-wrap: break-word;
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
|
|
256
302
|
.matcha-nav-rail__footer {
|
|
257
303
|
// Figma: padding 8/0, flex column center.
|
|
258
304
|
display: flex;
|
|
@@ -551,6 +597,13 @@
|
|
|
551
597
|
matcha-icon {
|
|
552
598
|
color: var(--matcha-color-accent);
|
|
553
599
|
}
|
|
600
|
+
|
|
601
|
+
// Labeled: ícone E label sobem pra accent (color herdado) + label medium,
|
|
602
|
+
// espelhando o nav-item ativo.
|
|
603
|
+
[matcha-nav-rail-module-label],
|
|
604
|
+
.matcha-nav-rail__module-label {
|
|
605
|
+
font-weight: var(--matcha-weight-medium, 500);
|
|
606
|
+
}
|
|
554
607
|
}
|
|
555
608
|
}
|
|
556
609
|
|
package/package.json
CHANGED
package/tokens/_emit-tokens.scss
CHANGED
|
@@ -117,6 +117,11 @@
|
|
|
117
117
|
--matcha-text-overline: 10px; // matcha/text/Uppercase (SemiBold 10/14/1)
|
|
118
118
|
|
|
119
119
|
// Shorthand aliases (usados massivamente em components/*.scss)
|
|
120
|
+
// 2xs fecha o degrau abaixo de xs. Valor literal de propósito: o 10px do
|
|
121
|
+
// Figma só existe hoje dentro do style Uppercase (SemiBold + caps), então
|
|
122
|
+
// aliasar `--matcha-text-overline` acoplaria micro-labels em caixa mista a
|
|
123
|
+
// um style que não tem relação com eles. Pendente de style próprio no Figma.
|
|
124
|
+
--matcha-text-2xs: 10px; // 10px — micro-labels (nav-rail labeled)
|
|
120
125
|
--matcha-text-xs: var(--matcha-text-p-tiny); // 11px — legendas, metadados
|
|
121
126
|
--matcha-text-sm: var(--matcha-text-body-sm); // 12px — texto auxiliar
|
|
122
127
|
--matcha-text-md: var(--matcha-text-body-md); // 14px — corpo padrão
|