Как обновить переменную CSS через JQuery/Javascript

Question

Недавно я узнал, что мы можем использовать переменную CSS и использовать эту переменную в нашем коде CSS. У меня есть следующий код.

body {
      --common-padding:15px;
      --color: white;
    }
    .test {
       padding: var(--common-padding);
       background-color: green;
    }
    .another {
       background-color:red;
       padding: var(--common-padding);
    }
    .new {
       background-color:blue;
       color: var(--color);
       padding: var(--common-padding);
    }

<div class="test">
  Test
</div>
<div class="another">
  Test Another
</div>
<div class="new">
  Test Another
</div>
<button id="change">Change Padding</button> 

Приведенный выше код с использованием CSS-переменной и работает нормально. Теперь я хочу обновить --common-padding значение через JQuery/Javascript когда я нажимаю button, Как это сделать?