Definir propriedades no HTML

Uma alternativa - como já sugerido - é inverter o controle. Em vez de deixar as regras no JavaScript, cada botão poderia indicar como ele deve ser. Para isso usamos o dataset de cada elemento. Por exemplo, o HTML ficaria assim:

<button class="btn btnWhite" data-background-color="#FFFFFF"
 data-border-radius="0" data-transition="0.6s" data-clip-path="polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)">
Branco
</button>
<button class="btn btnBlue" data-background-color="#0000FF"
 data-clip-path="polygon(0 0, 100% 0, 50% 100%)" data-transition="0.6s">
Azul
</button>
<button class="btn btnGreen" data-background-color="#00FF00"
 data-transition="0.6s" data-clip-path="polygon(50% 0%, 100% 0%, 100% 100%)">
Verde
</button>
<button class="btn btnPink" data-background-color="#FF1493"
 data-border-radius="0" data-transition="0.6s" data-clip-path="polygon(50% 0%, 29% 100%, 71% 100%)">
Rosa
</button>

<div class="quadrado" id="quadrado"></div>

Ou seja, cada botão indica os atriubutos que quer alterar. Depois, no JavaScript, basta pegarmos esses valores para mudar o style:

function trocarCor(event) {
  const botao = event.target; // botão que foi clicado
  const quadrado = document.getElementById("quadrado");

  // verifica todas as propriedades do dataset e muda no quadrado
  for (const [prop, valor] of Object.entries(botao.dataset)) {
    quadrado.style[prop] = valor;
  }
}

// para todos os botões com a classe "btn"
for (const button of document.querySelectorAll('button.btn')) {
  // chama a função trocarCor ao ser clicado
  button.addEventListener('click', trocarCor);
}

Um detalhe chato é que no HTML o nome tem que ser, por exemplo, data-background-color. Todo atributo cujo nome começa com data- fará parte do dataset. O detalhe é que o restante (no caso, background-color) resultará em backgroundColor no JavaScript (que é justamente o que precisamos).

Assim, se vc precisar de um novo botão que mude outras propriedades, basta acrescentá-las no dataset, sem precisar alterar o JavaScript.

Definir propriedades no CSS

Outra alternativa é definir essas propriedades no CSS. Ou seja, adicione uma classe para cada cor de quadrado:

.quadradoWhite {
    background-color: #FFFFFF;
    border-radius: 0;
    transition: 0.6s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.quadradoBlue {
    background-color: #0000FF;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: 0.6s;
}
.quadradoGreen {
    background-color: #00FF00;
    transition: 0.6s;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
}
.quadradoPink {
    background-color: #FF1493;
    border-radius: 0;
    transition: 0.6s;
    clip-path: polygon(50% 0%, 29% 100%, 71% 100%);
}

No HTML vc acrescenta o name de cada botão:

<button class="btn btnWhite" name="White">Branco</button>
<button class="btn btnBlue" name="Blue">Azul</button>
<button class="btn btnGreen" name="Green">Verde</button>
<button class="btn btnPink" name="Pink">Rosa</button>
<div class="quadrado" id="quadrado"></div>

E no JavaScript, basta que o quadrado tenha a respectiva classe, que será quadrado + o nome do botão que foi clicado:

function trocarCor(event) {
  const botao = event.target; // botão que foi clicado
  const quadrado = document.getElementById("quadrado");
  // classe "quadrado" sempre tem
  // depois adiciona a classe da respectiva cor do botão que foi clicado
  quadrado.setAttribute('class', 'quadrado quadrado' + botao.name);
}

// para todos os botões com a classe "btn"
for (const button of document.querySelectorAll('button.btn')) {
  // chama a função trocarCor ao ser clicado
  button.addEventListener('click', trocarCor);
}