Значение токена дизайна CSS не обновляется ⇐ CSS

[Anonymous]

TLDR; почему текст кнопки белый?
Codepen для демонстрации: https://codepen.io/bental/pen/vEBdQvJ
У меня есть переменные CSS определяется так:

Код: Выделить всё

:root {
--neutral-00: white;
--neutral-100: black;
--general-typography-quinary: var(--neutral-00);
--button-default-text: var(--general-typography-quinary);
}

потом позже:

Код: Выделить всё

:root .dark-mode {
--general-typography-quinary: var(--neutral-100);
}

Кнопка имеет

Код: Выделить всё

button {
color: var(--button-default-text);
}

Когда активирован темный режим, тело получает класс «.dark-mode». Я ожидаю, что цвет кнопки будет --neutral-100: #0c0c0c;, но в Chrome он отображается как --neutral-00: #ffffff;.
Я ожидаю этого, поскольку значение --general-typography-quinary обновляется, но кажется, что --button-default-text просто получает копию исходного значения, которое --general-typography-quinary имел, то есть не обновлял свое значение на основе нового значения --general-typography-quinary.

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-updating