@inchurch/matcha-theme 22.22.0 → 22.23.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.
Files changed (4) hide show
  1. package/components/matcha-buttons.scss +37 -48
  2. package/components/matcha-nav.scss +53 -0
  3. package/package.json +1 -1
  4. package/tokens/_emit-tokens.scss +5 -0
package/components/matcha-buttons.scss CHANGED
@@ -53,8 +53,9 @@
53
53
  @include media-breakpoint($materialBreakpoint) {
54
54
  $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
55
55
 
56
- // XS — 28px. Figma matcha/button XS: pad 8 · gap 2 · text/caption (11/400/14, letter 0.3)
57
- &[size#{$infix}="xs"] {
56
+ // XS/Tiny — 28px. Figma matcha/button XS: pad 8 · gap 2 · text/caption (11/400/14, letter 0.3)
57
+ &[size#{$infix}="xs"],
58
+ &[size#{$infix}="tiny"] {
58
59
  padding: 0 var(--matcha-space-100, 8px);
59
60
  font-size: var(--matcha-text-p-tiny, 11px);
60
61
  font-weight: var(--matcha-weight-regular, 400);
@@ -64,9 +65,9 @@
64
65
  gap: var(--matcha-space-025, 2px);
65
66
  }
66
67
 
67
- // SM — 32px. Figma: pad 8 · gap 4 · text/button-sm (13/500/19 letter 0.2)
68
+ // SM/Small — 32px. Figma: pad 8 · gap 4 · text/button-sm (13/500/19 letter 0.2)
68
69
  &[size#{$infix}="sm"],
69
- &[size#{$infix}="tiny"] {
70
+ &[size#{$infix}="small"] {
70
71
  padding: 0 var(--matcha-space-100, 8px);
71
72
  font-size: var(--matcha-text-label-sm, 13px);
72
73
  font-weight: var(--matcha-weight-medium, 500);
@@ -75,9 +76,9 @@
75
76
  gap: var(--matcha-space-050, 4px);
76
77
  }
77
78
 
78
- // MD — 40px. Figma: pad 16 · gap 8 · text/button-md (14/500/20)
79
+ // MD/Medium — 40px. Figma: pad 16 · gap 8 · text/button-md (14/500/20)
79
80
  &[size#{$infix}="md"],
80
- &[size#{$infix}="small"] {
81
+ &[size#{$infix}="medium"] {
81
82
  padding: 0 var(--matcha-space-200, 16px);
82
83
  font-size: var(--matcha-text-md, 14px);
83
84
  font-weight: var(--matcha-weight-medium, 500);
@@ -86,9 +87,9 @@
86
87
  gap: var(--matcha-space-100, 8px);
87
88
  }
88
89
 
89
- // LG — 48px. Figma: pad 24 · gap 8
90
+ // LG/Large — 48px. Figma: pad 24 · gap 8
90
91
  &[size#{$infix}="lg"],
91
- &[size#{$infix}="medium"] {
92
+ &[size#{$infix}="large"] {
92
93
  padding: 0 var(--matcha-space-300, 24px);
93
94
  font-size: var(--matcha-text-lg, 16px);
94
95
  font-weight: var(--matcha-weight-semibold, 600);
@@ -97,9 +98,8 @@
97
98
  gap: var(--matcha-space-100, 8px);
98
99
  }
99
100
 
100
- // XL — 56px. Figma: pad 32 · gap 8
101
+ // XL/Huge — 56px. Figma: pad 32 · gap 8
101
102
  &[size#{$infix}="xl"],
102
- &[size#{$infix}="large"],
103
103
  &[size#{$infix}="huge"] {
104
104
  padding: 0 var(--matcha-space-400, 32px);
105
105
  font-size: var(--matcha-text-lg, 16px);
@@ -225,10 +225,11 @@ a[matcha-link] {
225
225
  background: transparent;
226
226
 
227
227
  &[link]:not([link="false"]) {
228
- &[size="sm"], &[size="tiny"] { padding: 0 var(--matcha-space-100, 8px); gap: var(--matcha-space-050, 4px); }
229
- &[size="md"], &[size="small"] { padding: 0 var(--matcha-space-150, 12px); gap: var(--matcha-space-100, 8px); }
230
- &[size="lg"], &[size="medium"] { padding: 0 var(--matcha-space-200, 16px); gap: var(--matcha-space-150, 12px); }
231
- &[size="xl"], &[size="large"], &[size="huge"] { padding: 0 var(--matcha-space-200, 16px); gap: var(--matcha-space-150, 12px); }
228
+ &[size="xs"], &[size="tiny"] { padding: 0 var(--matcha-space-100, 8px); gap: var(--matcha-space-050, 4px); }
229
+ &[size="sm"], &[size="small"] { padding: 0 var(--matcha-space-100, 8px); gap: var(--matcha-space-050, 4px); }
230
+ &[size="md"], &[size="medium"] { padding: 0 var(--matcha-space-150, 12px); gap: var(--matcha-space-100, 8px); }
231
+ &[size="lg"], &[size="large"] { padding: 0 var(--matcha-space-200, 16px); gap: var(--matcha-space-150, 12px); }
232
+ &[size="xl"], &[size="huge"] { padding: 0 var(--matcha-space-200, 16px); gap: var(--matcha-space-150, 12px); }
232
233
  }
233
234
  }
234
235
 
@@ -342,26 +343,28 @@ a[matcha-link] {
342
343
 
343
344
  // Icon-button padding per Figma spec matcha/icon-button (all-direction):
344
345
  // XS=6 · SM=6 · MD=8 · LG=12 · XL=16 (padding igual em todos os lados)
345
- &[size="xs"] {
346
+ &[size="xs"], &[size="tiny"] {
346
347
  padding: var(--matcha-space-075, 6px) !important;
347
348
  }
348
- &[size="sm"], &[size="tiny"] {
349
+ &[size="sm"], &[size="small"] {
349
350
  padding: var(--matcha-space-075, 6px) !important;
350
351
  }
351
- &[size="md"], &[size="small"] {
352
+ &[size="md"], &[size="medium"] {
352
353
  padding: var(--matcha-space-100, 8px) !important;
353
354
  }
354
- &[size="lg"], &[size="medium"] {
355
+ &[size="lg"], &[size="large"] {
355
356
  padding: var(--matcha-space-150, 12px) !important;
356
357
  }
357
- &[size="xl"], &[size="large"], &[size="huge"] {
358
+ &[size="xl"], &[size="huge"] {
358
359
  padding: var(--matcha-space-200, 16px) !important;
359
360
  }
360
361
 
361
362
  // Auto-size inner matcha-icon conforme Figma matcha/icon-button spec:
362
363
  // XS→16 · SM→20 · MD→24 · LG→24 · XL→24
363
364
  &[size="xs"] [class^="i-matcha-"],
364
- &[size="xs"] [class*=" i-matcha-"] {
365
+ &[size="xs"] [class*=" i-matcha-"],
366
+ &[size="tiny"] [class^="i-matcha-"],
367
+ &[size="tiny"] [class*=" i-matcha-"] {
365
368
  font-size: var(--matcha-icon-size-sm, 16px);
366
369
  width: var(--matcha-icon-size-sm, 16px);
367
370
  height: var(--matcha-icon-size-sm, 16px);
@@ -369,8 +372,8 @@ a[matcha-link] {
369
372
  }
370
373
  &[size="sm"] [class^="i-matcha-"],
371
374
  &[size="sm"] [class*=" i-matcha-"],
372
- &[size="tiny"] [class^="i-matcha-"],
373
- &[size="tiny"] [class*=" i-matcha-"] {
375
+ &[size="small"] [class^="i-matcha-"],
376
+ &[size="small"] [class*=" i-matcha-"] {
374
377
  font-size: 20px;
375
378
  width: 20px;
376
379
  height: 20px;
@@ -378,16 +381,14 @@ a[matcha-link] {
378
381
  }
379
382
  &[size="md"] [class^="i-matcha-"],
380
383
  &[size="md"] [class*=" i-matcha-"],
381
- &[size="small"] [class^="i-matcha-"],
382
- &[size="small"] [class*=" i-matcha-"],
383
- &[size="lg"] [class^="i-matcha-"],
384
- &[size="lg"] [class*=" i-matcha-"],
385
384
  &[size="medium"] [class^="i-matcha-"],
386
385
  &[size="medium"] [class*=" i-matcha-"],
387
- &[size="xl"] [class^="i-matcha-"],
388
- &[size="xl"] [class*=" i-matcha-"],
386
+ &[size="lg"] [class^="i-matcha-"],
387
+ &[size="lg"] [class*=" i-matcha-"],
389
388
  &[size="large"] [class^="i-matcha-"],
390
389
  &[size="large"] [class*=" i-matcha-"],
390
+ &[size="xl"] [class^="i-matcha-"],
391
+ &[size="xl"] [class*=" i-matcha-"],
391
392
  &[size="huge"] [class^="i-matcha-"],
392
393
  &[size="huge"] [class*=" i-matcha-"] {
393
394
  font-size: var(--matcha-icon-size-md, 24px);
@@ -413,9 +414,9 @@ a[matcha-link] {
413
414
  z-index: 2;
414
415
  }
415
416
 
416
- &[size="sm"]::after, &[size="tiny"]::after { width: 0.75rem; height: 0.75rem; top: -0.15rem; right: -0.15rem; }
417
- &[size="md"]::after, &[size="small"]::after { width: 1rem; height: 1rem; top: -0.2rem; right: -0.2rem; }
418
- &[size="xl"]::after, &[size="large"]::after, &[size="huge"]::after { width: 1.5rem; height: 1.5rem; top: -0.3rem; right: -0.3rem; }
417
+ &[size="sm"]::after, &[size="small"]::after { width: 0.75rem; height: 0.75rem; top: -0.15rem; right: -0.15rem; }
418
+ &[size="md"]::after, &[size="medium"]::after { width: 1rem; height: 1rem; top: -0.2rem; right: -0.2rem; }
419
+ &[size="xl"]::after, &[size="huge"]::after { width: 1.5rem; height: 1.5rem; top: -0.3rem; right: -0.3rem; }
419
420
  }
420
421
 
421
422
  // ── Focus ring ──
@@ -852,23 +853,11 @@ a[matcha-icon-button] {
852
853
  line-height: 24px !important;
853
854
  }
854
855
 
855
- // ── Canonical extended size names (tiny|small|medium|large|huge) ────────────
856
- // matcha-icon-button expõe a escala CANÔNICA por extenso, 1:1 com as
857
- // abreviações xs/sm/md/lg/xl (xs→tiny · sm→small · md→medium · lg→large ·
858
- // xl→huge). O matcha-buttons.scss compartilhado pareia esses nomes com a
859
- // escala LEGADA do matcha-button (small=md, medium=lg, …), então re-asseguramos
860
- // aqui — scoped APENAS ao icon-button — os pixels corretos (sem mudança visual).
861
- &[size="tiny"] { height: 28px; }
862
- &[size="small"] { height: 32px; }
863
- &[size="medium"] { height: 40px; }
864
- &[size="large"] { height: 48px; }
865
- &[size="huge"] { height: 56px; }
866
-
867
- &[size="tiny"][icon] { padding: var(--matcha-space-075, 6px) !important; }
868
- &[size="small"][icon] { padding: var(--matcha-space-075, 6px) !important; }
869
- &[size="medium"][icon] { padding: var(--matcha-space-100, 8px) !important; }
870
- &[size="large"][icon] { padding: var(--matcha-space-150, 12px) !important; }
871
- &[size="huge"][icon] { padding: var(--matcha-space-200, 16px) !important; }
856
+ // Tamanho (height) e padding por size já vêm corretos do mixin compartilhado
857
+ // (generate-matcha-button-size-classes, aplicado via o seletor combinado no
858
+ // topo do arquivo) + do bloco &[icon] acima — ambos pareiam cada abreviação
859
+ // com seu extenso correto (sm↔small, md↔medium, lg↔large, xl↔huge). Este
860
+ // componente não precisa reafirmar nada aqui.
872
861
  }
873
862
 
874
863
  // ── Forced colors (Windows High Contrast) ──
package/components/matcha-nav.scss CHANGED
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inchurch/matcha-theme",
3
- "version": "22.22.0",
3
+ "version": "22.23.1",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
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