Да, это руководство немного устарело, однако проблема в вашем случае связана не с основными переменными, а с цветами SCSS в компоненте, который не наследует цветовую схему темы. (Тем не менее, я изучу руководство и обновлю его.)
Немного контекста: в августе–сентябре 2020 года мы перешли на использование пользовательских свойств CSS для цветов. Основная причина этого изменения заключалась в том, чтобы поддерживать автоматический темный режим легким и быстрым способом. Темы содержат CSS и JS, поэтому их нельзя быстро переключать, но с помощью пользовательских свойств CSS цветовые схемы можно менять на лету без перезагрузки страницы.
Я вижу на вашем сайте, что у вас есть 4 темы с индивидуальной цветовой схемой и общий компонент для стилей, используемый во всех темах. Вы можете достичь практически того же результата, используя одну основную тему (которая будет содержать все общие стили) и 4 выбираемые пользователем цветовые схемы. Вам нужно будет перенести все вычисления цветов в файл color_definitions.scss основной темы, но это вполне выполнимо. Я постараюсь найти время и попробую реализовать это завтра.