@inchurch/matcha-theme 22.26.0 → 22.27.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.
|
@@ -860,6 +860,46 @@ a[matcha-icon-button] {
|
|
|
860
860
|
// componente não precisa reafirmar nada aqui.
|
|
861
861
|
}
|
|
862
862
|
|
|
863
|
+
// ── matcha-button COM TEXTO: auto-size do matcha-icon projetado ──────────────
|
|
864
|
+
// O icon-button (acima) e o matcha-button[icon] (icon-only, no bloco &[icon]) já escalavam o
|
|
865
|
+
// ícone; o botão com texto não escalava nada, então o matcha-icon caía no próprio default
|
|
866
|
+
// (--matcha-icon-size-md, 24px) — proporcional só de MD (40px) pra cima. Num tiny (28px, texto
|
|
867
|
+
// 11/14) sobrava um ícone de 24px.
|
|
868
|
+
//
|
|
869
|
+
// Escala igual à do icon-button: XS/tiny → 16 · SM/small → 20 · MD+ → 24 (o default do
|
|
870
|
+
// matcha-icon já é 24, então MD/LG/XL não precisam de regra).
|
|
871
|
+
//
|
|
872
|
+
// Duas diferenças deliberadas em relação ao icon-button:
|
|
873
|
+
// 1. `matcha-icon:not([size])` — aqui o ícone divide o botão com o texto, e um `size`
|
|
874
|
+
// explícito do consumidor é escolha legítima que deve continuar valendo. O auto-size só
|
|
875
|
+
// age quando ninguém decidiu.
|
|
876
|
+
// 2. sem `!important`, consequência do item 1: como a regra nem casa quando há `size`, não há
|
|
877
|
+
// disputa de especificidade contra a classe `.i-size-*` que o componente emite.
|
|
878
|
+
//
|
|
879
|
+
// `:not([icon])` e `:not([matcha-icon-button])` preservam os dois casos que já tinham
|
|
880
|
+
// tratamento próprio. O bloco icon-only usa `[icon]:not([icon="false"])`, então em teoria
|
|
881
|
+
// `icon="false"` é botão com texto e deveria entrar aqui; não há um único uso dessa forma no
|
|
882
|
+
// showcase nem no painel, e um seletor extra só para ela seria ruído.
|
|
883
|
+
button[matcha-button]:not([matcha-icon-button]):not([icon]),
|
|
884
|
+
a[matcha-button]:not([matcha-icon-button]):not([icon]) {
|
|
885
|
+
&[size="xs"] matcha-icon:not([size]),
|
|
886
|
+
&[size="tiny"] matcha-icon:not([size]) {
|
|
887
|
+
font-size: var(--matcha-icon-size-sm, 16px);
|
|
888
|
+
width: var(--matcha-icon-size-sm, 16px);
|
|
889
|
+
height: var(--matcha-icon-size-sm, 16px);
|
|
890
|
+
line-height: var(--matcha-icon-size-sm, 16px);
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
// 20px não tem token (a escala de ícone vai 16/24/32) — mesmo literal que o icon-button usa.
|
|
894
|
+
&[size="sm"] matcha-icon:not([size]),
|
|
895
|
+
&[size="small"] matcha-icon:not([size]) {
|
|
896
|
+
font-size: 20px;
|
|
897
|
+
width: 20px;
|
|
898
|
+
height: 20px;
|
|
899
|
+
line-height: 20px;
|
|
900
|
+
}
|
|
901
|
+
}
|
|
902
|
+
|
|
863
903
|
// ── Forced colors (Windows High Contrast) ──
|
|
864
904
|
// Buttons precisam ser claramente acionáveis em high-contrast.
|
|
865
905
|
@media (forced-colors: active) {
|