No HTML, acrescentei o botão para esconder a lista, data-botao em cada um deles com os devidos atributos. Dessa forma, vou conseguir ter uma lista dos botões no JS. E na

• adicionei o data-lista, que será manipulada no JS para chamar a estilização do CSS.

  <button data-botao="mostra">Mostra tintas em estoque:</button>
    <button data-botao="esconde">Oculta tintas em estoque:</button>
  
    <ul data-lista class="lista">
      <li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
      <li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
      <li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
      <li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
      <li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
      <li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
    </ul>

  No CSS, adicionei essas linhas para quando o [data-lista] for "mostrar", a lista aparecer; e quando for "esconder", a lista sumir.

      [data-lista="mostrar"] {
      display: block;
      }
  
      [data-lista="esconder"] {
      display: none;
      }

  Segue o js:

  let lista = document.querySelector("ul"); // capturando a lista
  const botao = document.querySelectorAll("[data-botao]"); // capturando os botões
  
  botao.forEach(elemento => {
    elemento.addEventListener("click", (evento) => {
      operaLista(evento.target.dataset.botao);
      //event.target captura onde o evento ocorreu
      //.dataset.botao captura o atributo do elemento do botao
    })
  });
  
  function operaLista(operacao) {
    if (operacao === "mostra") {
      lista.setAttribute("data-lista", "mostrar"); // setAttribute altera o atributo do elemento (primeiro parâmetro), para o atributo passado (segundo parêmetro)
    } else{
      lista.setAttribute("data-lista", "esconder");
    }
  }