@inchurch/matcha-theme 22.22.0 → 22.23.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.
Files changed (2) hide show
  1. package/components/matcha-buttons.scss +37 -48
  2. package/package.json +1 -1
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inchurch/matcha-theme",
3
- "version": "22.22.0",
3
+ "version": "22.23.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {