[Dúvida] Leitura de teclas por JavaScript

Olá Felipe!

Pelo que entendi, você está com dificuldades em identificar a diferença entre o estilo CSS da tecla Enter e da Space quando estão no estado "active".

Uma possível solução para esse problema seria adicionar a classe "focus" à tecla que está em foco. Para isso, você pode adicionar o seguinte código dentro da função "onkeydown":

tecla.classList.add('focus'); 

E para remover a classe "focus" quando a tecla perde o foco, adicione o seguinte código dentro da função "onkeyup":

tecla.classList.remove('focus'); 

Assim, o código final ficaria assim:

tecla.onkeydown = function (evento) {
    if(evento.code === "Enter" || evento.code === "Space") {
        tecla.classList.add('ativa');
        tecla.classList.add('focus');
    }
}

tecla.onkeyup = function () {
    tecla.classList.remove('ativa');
    tecla.classList.remove('focus');
}

Espero que essa solução ajude! Bons estudos!

Tentei essa adição do focus mas também não funcionou. Nos estilos usados existe o estado active, o focus, e o ".active:focus" separadamente, esse terceiro é o que não está sendo acionado com a tecla Enter.

.tecla.ativa,
.tecla:active {
  background-color: var(--vermelha);
  border: 4px solid  var(--vermelha);
  box-shadow: 3px 3px 0 var(--vermelha-escura) inset;
  color: var(--branca);
  outline: none;
}

.tecla.focus,
.tecla:focus {
  outline: none;
  box-shadow: 1px 1px 10px var(--luz);
}

.tecla.active:focus,
.tecla:active:focus {
  box-shadow: 3px 3px 0 var(--vermelha-escura) inset, 1px 1px 10px var(--luz);
}