Quella guida è un po’ datata, sì, anche se nel tuo caso il problema non riguarda le variabili principali, ma piuttosto i colori SCSS in un componente che non eredita la palette di colori del tema. (Tuttavia, passerò in rassegna la guida e la aggiornerò.)
Un po’ di contesto: ad agosto/settembre 2020 abbiamo iniziato a utilizzare le proprietà CSS personalizzate per i colori. Il motivo principale di questo cambiamento è stato quello di supportare la modalità scura automatica in modo leggero e veloce. I temi hanno CSS e JS, quindi non possono essere scambiati rapidamente, ma utilizzando le proprietà CSS personalizzate, le palette di colori possono essere invertite al volo, senza ricaricare la pagina.
Vedo nel tuo sito che hai 4 temi con una palette di colori ciascuno e un componente condiviso tra i temi per gli stili comuni. Potresti ottenere essenzialmente la stessa cosa con un unico tema principale (che conterrebbe tutti gli stili condivisi) e 4 palette di colori selezionabili dall’utente. Dovresti spostare tutti i calcoli dei colori nel file color_definitions.scss del tema principale, ma è fattibile; cercherò di trovare un po’ di tempo e ci proverò domani.