@inchurch/matcha-theme 22.35.2 → 22.36.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.
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// matcha-contact — ícone (whatsapp/telefone) + número, com link wa.me opcional.
|
|
3
|
-
// Top-level (sem mixin): usa só var(--matcha-color-*), que resolve por tema —
|
|
4
|
-
// mesmo padrão de matcha-avatar.scss / matcha-status-pill.scss.
|
|
5
|
-
// =============================================================================
|
|
6
|
-
matcha-contact {
|
|
7
|
-
display: inline-flex;
|
|
8
|
-
align-items: center;
|
|
9
|
-
gap: var(--matcha-space-100, 8px);
|
|
10
|
-
min-width: 0;
|
|
11
|
-
|
|
12
|
-
.matcha-contact__icon.is-whatsapp {
|
|
13
|
-
--matcha-icon-color: var(--matcha-color-success);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.matcha-contact__value {
|
|
17
|
-
overflow: hidden;
|
|
18
|
-
text-overflow: ellipsis;
|
|
19
|
-
white-space: nowrap;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// Link wa.me — herda a cor do texto (não vira o azul de link default) e só
|
|
23
|
-
// sublinha no hover, pra não competir visualmente com o número.
|
|
24
|
-
.matcha-contact__link {
|
|
25
|
-
color: inherit;
|
|
26
|
-
text-decoration: none;
|
|
27
|
-
|
|
28
|
-
&:hover { text-decoration: underline; }
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.matcha-contact__empty {
|
|
32
|
-
color: var(--matcha-color-text-muted);
|
|
33
|
-
font-style: italic;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// matcha-contact — ícone (whatsapp/telefone) + número, com link wa.me opcional.
|
|
3
|
+
// Top-level (sem mixin): usa só var(--matcha-color-*), que resolve por tema —
|
|
4
|
+
// mesmo padrão de matcha-avatar.scss / matcha-status-pill.scss.
|
|
5
|
+
// =============================================================================
|
|
6
|
+
matcha-contact {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: var(--matcha-space-100, 8px);
|
|
10
|
+
min-width: 0;
|
|
11
|
+
|
|
12
|
+
.matcha-contact__icon.is-whatsapp {
|
|
13
|
+
--matcha-icon-color: var(--matcha-color-success);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.matcha-contact__value {
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
text-overflow: ellipsis;
|
|
19
|
+
white-space: nowrap;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Link wa.me — herda a cor do texto (não vira o azul de link default) e só
|
|
23
|
+
// sublinha no hover, pra não competir visualmente com o número.
|
|
24
|
+
.matcha-contact__link {
|
|
25
|
+
color: inherit;
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
|
|
28
|
+
&:hover { text-decoration: underline; }
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.matcha-contact__empty {
|
|
32
|
+
color: var(--matcha-color-text-muted);
|
|
33
|
+
font-style: italic;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
@mixin matcha-image-theme($theme) {
|
|
11
11
|
|
|
12
12
|
.matcha-image {
|
|
13
|
-
background: var(--matcha-color-surface);
|
|
13
|
+
background: var(--matcha-color-elevation-surface-3);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.matcha-image__placeholder-icon {
|
|
17
|
-
color: var(--matcha-color-
|
|
17
|
+
color: var(--matcha-color-icon-default);
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -41,7 +41,6 @@
|
|
|
41
41
|
.matcha-image__placeholder-icon {
|
|
42
42
|
width: var(--matcha-icon-size-lg, 48px);
|
|
43
43
|
height: var(--matcha-icon-size-lg, 48px);
|
|
44
|
-
opacity: 0.5;
|
|
45
44
|
}
|
|
46
45
|
|
|
47
46
|
// ── Ratios ──────────────────────────────────────────────────────────────────
|
|
@@ -1,102 +1,102 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// matcha-status-pill — cores de feedback com bg-alpha + halo no dot.
|
|
3
|
-
// Mapeamento Figma DSV3 (matcha/status-pill, fileKey i04CyWczuVctwRjE5VbJh7).
|
|
4
|
-
// Só entende `color` (papel visual do DS) — nenhuma semântica de domínio.
|
|
5
|
-
// =============================================================================
|
|
6
|
-
|
|
7
|
-
matcha-status-pill {
|
|
8
|
-
&[color="success"] {
|
|
9
|
-
color: var(--matcha-color-success, #16a34a);
|
|
10
|
-
background-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.10));
|
|
11
|
-
border-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.30));
|
|
12
|
-
|
|
13
|
-
.matcha-status-pill__dot {
|
|
14
|
-
background-color: var(--matcha-color-success, #16a34a);
|
|
15
|
-
box-shadow: 0 0 0 3px var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.20));
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
&[interactive]:hover:not([disabled]) {
|
|
19
|
-
background-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.16));
|
|
20
|
-
border-color: var(--matcha-color-success);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&[color="warning"] {
|
|
25
|
-
color: var(--matcha-color-warn, #f59e0b);
|
|
26
|
-
background-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.10));
|
|
27
|
-
border-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.30));
|
|
28
|
-
|
|
29
|
-
.matcha-status-pill__dot {
|
|
30
|
-
background-color: var(--matcha-color-warn, #f59e0b);
|
|
31
|
-
box-shadow: 0 0 0 3px var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.20));
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&[interactive]:hover:not([disabled]) {
|
|
35
|
-
background-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.16));
|
|
36
|
-
border-color: var(--matcha-color-warn);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&[color="danger"] {
|
|
41
|
-
color: var(--matcha-color-danger, #ef4444);
|
|
42
|
-
background-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.10));
|
|
43
|
-
border-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.30));
|
|
44
|
-
|
|
45
|
-
.matcha-status-pill__dot {
|
|
46
|
-
background-color: var(--matcha-color-danger, #ef4444);
|
|
47
|
-
box-shadow: 0 0 0 3px var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.20));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&[interactive]:hover:not([disabled]) {
|
|
51
|
-
background-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.16));
|
|
52
|
-
border-color: var(--matcha-color-danger);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
&[color="info"] {
|
|
57
|
-
color: var(--matcha-color-info);
|
|
58
|
-
background-color: var(--matcha-color-info-alpha);
|
|
59
|
-
border-color: var(--matcha-color-info-alpha);
|
|
60
|
-
|
|
61
|
-
.matcha-status-pill__dot {
|
|
62
|
-
background-color: var(--matcha-color-info);
|
|
63
|
-
box-shadow: 0 0 0 3px var(--matcha-color-info-alpha);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
&[interactive]:hover:not([disabled]) {
|
|
67
|
-
background-color: var(--matcha-color-info-alpha);
|
|
68
|
-
border-color: var(--matcha-color-info);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
&[color="disabled"] {
|
|
73
|
-
color: var(--matcha-color-disabled-fg);
|
|
74
|
-
background-color: var(--matcha-color-disabled-bg-alpha, var(--matcha-color-disabled-bg));
|
|
75
|
-
border-color: var(--matcha-color-disabled-bg);
|
|
76
|
-
|
|
77
|
-
.matcha-status-pill__dot {
|
|
78
|
-
background-color: var(--matcha-color-disabled-fg);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// Neutral — fallback/ausência de status. Itálico + peso regular + dot
|
|
83
|
-
// opaco diferenciam de um estado real (ex.: disabled) — comunica "sem
|
|
84
|
-
// dado", não "estado conhecido que é neutro".
|
|
85
|
-
&[color="neutral"] {
|
|
86
|
-
color: var(--matcha-color-text-muted, #9ca3af);
|
|
87
|
-
background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.04));
|
|
88
|
-
border-color: var(--matcha-color-surface-border, rgba(255, 255, 255, 0.14));
|
|
89
|
-
font-style: italic;
|
|
90
|
-
font-weight: var(--matcha-weight-regular, 400);
|
|
91
|
-
|
|
92
|
-
.matcha-status-pill__dot {
|
|
93
|
-
background-color: var(--matcha-color-text-muted, #9ca3af);
|
|
94
|
-
opacity: 0.5;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
&[interactive]:hover:not([disabled]) {
|
|
98
|
-
background-color: var(--matcha-color-surface-bg);
|
|
99
|
-
border-color: var(--matcha-color-text-muted);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// matcha-status-pill — cores de feedback com bg-alpha + halo no dot.
|
|
3
|
+
// Mapeamento Figma DSV3 (matcha/status-pill, fileKey i04CyWczuVctwRjE5VbJh7).
|
|
4
|
+
// Só entende `color` (papel visual do DS) — nenhuma semântica de domínio.
|
|
5
|
+
// =============================================================================
|
|
6
|
+
|
|
7
|
+
matcha-status-pill {
|
|
8
|
+
&[color="success"] {
|
|
9
|
+
color: var(--matcha-color-success, #16a34a);
|
|
10
|
+
background-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.10));
|
|
11
|
+
border-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.30));
|
|
12
|
+
|
|
13
|
+
.matcha-status-pill__dot {
|
|
14
|
+
background-color: var(--matcha-color-success, #16a34a);
|
|
15
|
+
box-shadow: 0 0 0 3px var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.20));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&[interactive]:hover:not([disabled]) {
|
|
19
|
+
background-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.16));
|
|
20
|
+
border-color: var(--matcha-color-success);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&[color="warning"] {
|
|
25
|
+
color: var(--matcha-color-warn, #f59e0b);
|
|
26
|
+
background-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.10));
|
|
27
|
+
border-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.30));
|
|
28
|
+
|
|
29
|
+
.matcha-status-pill__dot {
|
|
30
|
+
background-color: var(--matcha-color-warn, #f59e0b);
|
|
31
|
+
box-shadow: 0 0 0 3px var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.20));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[interactive]:hover:not([disabled]) {
|
|
35
|
+
background-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.16));
|
|
36
|
+
border-color: var(--matcha-color-warn);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&[color="danger"] {
|
|
41
|
+
color: var(--matcha-color-danger, #ef4444);
|
|
42
|
+
background-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.10));
|
|
43
|
+
border-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.30));
|
|
44
|
+
|
|
45
|
+
.matcha-status-pill__dot {
|
|
46
|
+
background-color: var(--matcha-color-danger, #ef4444);
|
|
47
|
+
box-shadow: 0 0 0 3px var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.20));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&[interactive]:hover:not([disabled]) {
|
|
51
|
+
background-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.16));
|
|
52
|
+
border-color: var(--matcha-color-danger);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&[color="info"] {
|
|
57
|
+
color: var(--matcha-color-info);
|
|
58
|
+
background-color: var(--matcha-color-info-alpha);
|
|
59
|
+
border-color: var(--matcha-color-info-alpha);
|
|
60
|
+
|
|
61
|
+
.matcha-status-pill__dot {
|
|
62
|
+
background-color: var(--matcha-color-info);
|
|
63
|
+
box-shadow: 0 0 0 3px var(--matcha-color-info-alpha);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&[interactive]:hover:not([disabled]) {
|
|
67
|
+
background-color: var(--matcha-color-info-alpha);
|
|
68
|
+
border-color: var(--matcha-color-info);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&[color="disabled"] {
|
|
73
|
+
color: var(--matcha-color-disabled-fg);
|
|
74
|
+
background-color: var(--matcha-color-disabled-bg-alpha, var(--matcha-color-disabled-bg));
|
|
75
|
+
border-color: var(--matcha-color-disabled-bg);
|
|
76
|
+
|
|
77
|
+
.matcha-status-pill__dot {
|
|
78
|
+
background-color: var(--matcha-color-disabled-fg);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Neutral — fallback/ausência de status. Itálico + peso regular + dot
|
|
83
|
+
// opaco diferenciam de um estado real (ex.: disabled) — comunica "sem
|
|
84
|
+
// dado", não "estado conhecido que é neutro".
|
|
85
|
+
&[color="neutral"] {
|
|
86
|
+
color: var(--matcha-color-text-muted, #9ca3af);
|
|
87
|
+
background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.04));
|
|
88
|
+
border-color: var(--matcha-color-surface-border, rgba(255, 255, 255, 0.14));
|
|
89
|
+
font-style: italic;
|
|
90
|
+
font-weight: var(--matcha-weight-regular, 400);
|
|
91
|
+
|
|
92
|
+
.matcha-status-pill__dot {
|
|
93
|
+
background-color: var(--matcha-color-text-muted, #9ca3af);
|
|
94
|
+
opacity: 0.5;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&[interactive]:hover:not([disabled]) {
|
|
98
|
+
background-color: var(--matcha-color-surface-bg);
|
|
99
|
+
border-color: var(--matcha-color-text-muted);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -44,6 +44,64 @@
|
|
|
44
44
|
// Família matcha-cell-* (DSV3) — cells de tabela canônicas, seletor de atributo
|
|
45
45
|
// em <td> nativo (td[matcha-cell-<tipo>]). Cada cell é um wrapper fino sobre um
|
|
46
46
|
// átomo do DS (identity→matcha-avatar, status→matcha-status-pill,
|
|
47
|
-
// contact→matcha-contact), então o estilo mora no átomo — não aqui.
|
|
48
|
-
//
|
|
47
|
+
// contact→matcha-contact), então o estilo mora no átomo — não aqui.
|
|
48
|
+
//
|
|
49
|
+
// EXCEÇÃO: `media` (→matcha-image). As outras três envolvem átomos que já se
|
|
50
|
+
// diagramam sozinhos; o `matcha-image` não posiciona nada ao lado dele, então a
|
|
51
|
+
// linha miniatura+texto é responsabilidade da cell e mora aqui. O `.scss` do
|
|
52
|
+
// componente segue vazio, como os irmãos: com encapsulation emulada um seletor
|
|
53
|
+
// `td[attr]` escrito lá vira CSS morto (precisaria de `:host([attr])`).
|
|
49
54
|
// =============================================================================
|
|
55
|
+
|
|
56
|
+
.matcha-cell-media {
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: var(--matcha-space-100, 8px);
|
|
60
|
+
// Sem isto o texto não encolhe e a coluna estoura com nome longo.
|
|
61
|
+
max-width: 100%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.matcha-cell-media__thumb {
|
|
65
|
+
// A altura vem do input `height`, por style inline no elemento. Radius e overflow NÃO
|
|
66
|
+
// entram aqui: o `.matcha-image` já traz os dois.
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
display: flex;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Inverte a direção do `matcha-image`, que por padrão é `width: 100%` + `aspect-ratio`
|
|
72
|
+
// (largura mandando). Numa linha de tabela a altura é o recurso escasso, então ela manda e a
|
|
73
|
+
// largura sai da razão — é o que faz `3:4` caber na linha em vez de esticá-la.
|
|
74
|
+
.matcha-cell-media__thumb matcha-image {
|
|
75
|
+
height: 100%;
|
|
76
|
+
width: auto;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// O placeholder do matcha-image é `--matcha-icon-size-lg` (48px), maior que a miniatura de
|
|
80
|
+
// 40px: ficaria recortado pelo overflow do proprio matcha-image.
|
|
81
|
+
.matcha-cell-media__thumb .matcha-image__placeholder-icon {
|
|
82
|
+
width: var(--matcha-icon-size-md, 24px);
|
|
83
|
+
height: var(--matcha-icon-size-md, 24px);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.matcha-cell-media__text {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
// `min-width: 0` é o que permite o filho encolher abaixo do conteúdo e o ellipsis
|
|
90
|
+
// acontecer — sem ele o flex usa a largura intrínseca do texto. Mesmo motivo do
|
|
91
|
+
// `.matcha-avatar-text`.
|
|
92
|
+
min-width: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Truncam em uma linha, como matcha-avatar-name/-caption fazem na cell de identity:
|
|
96
|
+
// numa linha de tabela a altura é fixa, então quebrar texto desalinha a linha inteira.
|
|
97
|
+
.matcha-cell-media__name,
|
|
98
|
+
.matcha-cell-media__caption {
|
|
99
|
+
display: block;
|
|
100
|
+
overflow: hidden;
|
|
101
|
+
text-overflow: ellipsis;
|
|
102
|
+
white-space: nowrap;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.matcha-cell-media__caption {
|
|
106
|
+
font-variant-numeric: tabular-nums;
|
|
107
|
+
}
|