Esa guía está un poco desactualizada, sí, aunque lo que te está causando problemas en tu caso no son las variables principales, sino los colores SCSS en un componente que no hereda el esquema de colores del tema. (No obstante, revisaré la guía y la actualizaré.)
Un poco de contexto: en agosto/septiembre de 2020 pasamos a usar propiedades personalizadas de CSS para los colores. La razón principal de ese cambio fue poder soportar el modo oscuro automático de una manera ligera y rápida. Los temas tienen CSS y JS, por lo que no se pueden cambiar rápidamente, pero al usar propiedades personalizadas de CSS, los esquemas de colores sí pueden alternarse al instante, sin recargar la página.
Veo en tu sitio que tienes 4 temas, cada uno con un esquema de colores, y un componente compartido entre los temas para los estilos comunes. Podrías lograr esencialmente lo mismo con un tema principal (que contendría todos los estilos compartidos) y 4 esquemas de colores seleccionables por el usuario. Tendrías que mover todos los cálculos de color en el archivo color_definitions.scss del tema principal, pero es factible; trataré de encontrar un momento y probaré esto mañana.