Pra quem precisar, consegui uma solução de contorno.
Meu objetivo
Manter o font-size: 14px
da label
estando ou não com focus.
O problema
O componente Material Form Field segue a especificação do Material Design, onde indica que o tamanho da label deve ser reduzido ao entrar na posição elevada. Como o gap é calculado programaticamente através do javascript (vide código responsável pelo cálculo do gap), ao alterar o scale
para ter o tamanho original da fonte, a borda entra em colapso com a label, conforme demonstrado na pergunta.
Solução de contorno
Define o tamanho da fonte do mat-form-field
para o tamanho desejado:
mat-form-field {
font-size: 14px!important;
}
Nega o tamanho calculado pela biblioteca para ocupar toda a borda do topo:
.mat-form-field-outline-gap {
width: 0!important;
}
Sobrescreve a classe que diminui o tamanho da fonte ao flutuar, indicando que agora a fonte deve ter o mesmo tamanho ao elevar e realiza ajustes de posição na função translateY()
:
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.7em) scale(1)!important;
}
Define um background-color
para a mat-label bem como um espaçamento entre as laterais, tornando ela a responsável por quebrar o "gap" definido pela biblioteca:
mat-form-field mat-label {
background-color: #f9f9f9;
padding-right: 3px;
padding-left: 3px;
}
Resultados

mat-form-field-outline-gap
dentro domat-form-field-outline-thick
, se você olhar, ele possui um width fixo, deve ser de acordo com o tamanho do texto, você precisa sobreescrever esse width fixo de acordo com o tamanho do label, por padrão ele é calculado apra se encaixar no label com scale – André Monteiro 12/06/20 às 13:26