// Célula de estado das tabelas: o ponto colorido "●" + o rótulo, ambos na
// mesma cor.
component {
props {
prop(name = kind)
prop(name = label)
}
resources {
style """
.state-cell {
spacing: 7;
align-y: center;
}
.state-cell__label {
size: 12;
}
/* Paleta de estado (modificador na raiz): `.state-cell--ok > text` pinta o
ponto e o rótulo de uma vez — os filhos não carregam classe de cor. */
.state-cell--ok > text {
color: var(--ok);
}
.state-cell--bad > text {
color: var(--error);
}
.state-cell--info > text {
color: var(--accent);
}
.state-cell--warn > text {
color: var(--warn);
}
.state-cell--muted > text {
color: var(--muted);
}
"""
}
row(class = "state-cell state-cell--@kind table__col-state") {
text(class = status-dot, content = "●")
text(class = state-cell__label, content = "@label")
}
}