Esse guia está um pouco desatualizado, sim. No entanto, o que está causando problemas no seu caso não são variáveis principais, mas sim cores SCSS em um componente que não herda o esquema de cores do tema. (Mesmo assim, vou revisar o guia e atualizá-lo.)
Um pouco de contexto: em agosto/setembro de 2020, migramos para o uso de propriedades personalizadas de CSS para cores. A principal razão para essa mudança foi permitir o suporte a modo escuro automático de forma leve e rápida. Temas têm CSS e JS, então não podem ser alternados rapidamente, mas, usando propriedades personalizadas de CSS, os esquemas de cores podem ser invertidos instantaneamente, sem recarregar a página.
Vejo no seu site que você tem 4 temas, cada um com um esquema de cores, e um componente compartilhado entre os temas para os estilos comuns. Você poderia alcançar essencialmente a mesma coisa com um único tema principal (que conteria todos os estilos compartilhados) e 4 esquemas de cores selecionáveis pelo usuário. Você precisaria mover todos os cálculos de cores no arquivo color_definitions.scss do tema principal, mas é viável. Vou tentar encontrar um tempo e tentar isso amanhã.