<script>

  // If you see this, then you need to toggle the Execute code switch on this element; also make sure to enable code execution for Administrator in Bricks Settings -> Code Execution

  document.addEventListener('DOMContentLoaded', function(event) {
    var r = new RegExp("(?:^| )(bg--\\S+)(?: |$)");
    const colorCards = document.getElementsByClassName('acss-color-card__wrapper');
    
    for(let i = 0; i < colorCards.length; i++) {
        var m = (""+colorCards[i].className).match(r);
        var strColorClass = m ? m[1] : null;
        var strColorVar = strColorClass?.substring(2);
    
        if(strColorVar) {
            var strValue = getComputedStyle(document.documentElement).getPropertyValue(strColorVar);
    
            if(strValue) {
                colorCardName = colorCards[i].querySelector(".acss-color-card__name");
    
                colorCardName.innerHTML += '<br>' + strValue;
            }
        }
    }
});
</script>