Ce guide est un peu obsolète, c’est vrai, mais ce qui vous pose problème dans votre cas, ce ne sont pas les variables de base, mais plutôt les couleurs SCSS dans un composant qui n’hérite pas de la palette de couleurs du thème. (Néanmoins, je passerai en revue le guide et le mettrai à jour.)
Un peu de contexte : en août/septembre 2020, nous sommes passés à l’utilisation de propriétés CSS personnalisées pour les couleurs. La principale raison de ce changement était de pouvoir prendre en charge le mode sombre automatique de manière légère et rapide. Les thèmes comportent du CSS et du JS, ils ne peuvent donc pas être basculés rapidement, mais grâce aux propriétés CSS personnalisées, les palettes de couleurs peuvent être inversées à la volée, sans recharger la page.
Je vois sur votre site que vous avez 4 thèmes, chacun avec sa propre palette de couleurs, et un composant partagé entre les thèmes pour les styles communs. Vous pourriez obtenir essentiellement la même chose avec un thème principal (qui contiendrait tous les styles partagés) et 4 palettes de couleurs sélectionnables par l’utilisateur. Vous devrez déplacer tous les calculs de couleurs dans le fichier color_definitions.scss du thème principal, mais c’est réalisable. Je vais essayer de trouver un moment pour essayer cela demain.