Mapping Elementor Globals CSS Vars to readable Vars, using SCSS

SCSS Uses in demo (scss)

$font-props: 
    'font-family',
    'font-size',
    'font-weight',
    'line-height',
    'text-transform', 
    'font-style',
    'text-decoration',
    'letter-spacing',
    'word-spacing';

$el-font-vars : (
    'primary': 'primary', 
    'secondary': 'secondary', 
    'text': 'text',
    'accent': 'accent',
    'xtra-large-bold': '3c6503f',
    'xtra-large-normal': '36e2b14',
    'xtra-large-thin': '8cd8b0b',
    'medium-bold': '6f3759b',
    'medium-normal': '5cf7a1a',
    'medium-thin': 'c0186d0',
    'small-bold': 'ebaff60',
    'xtra-small-bold': '7aa67dd'
);

$colors: (
    'primary': 'primary',
    'secondary': 'secondary',
    'text': 'text',
    'accent': 'accent',
    'primary-variation': '8bccff3',
    'secondary-variation': '17 f93ed',
    'accent-variation': '77d3a09',
    'white': '6e3ef71',
    'black': '2e02fd0',
    'grey1': '941fe3a',
    'grey2': '571579d', 
    'grey3': '0fc7df9',
    'grey4': '86e0a5b',
    'grey5': '9534843'
);


.elementor-kit-6{
    /*Typography Map */
    @each $name, $var in $el-font-vars{
        @each $prop in $font-props{
            --text-#{$name}-#{$prop}: var(--e-global-typography-#{$var}-#{$prop});
        }
    }
    
    @media (max-width: 1024px){
        /* Elementor puts global font variations in a media query using teh same var names
            Therefore, you will need to manually override any responsive settings here
        */
        --dummy-override: "delete me";
    }
    
    @media (max-width: 767px){
        /* Elementor puts global font variations in a media query using teh same var names
            Therefore, you will need to manually override any responsive settings here
        */
        --dummy-override: "delete me";
    }
    
    /* Color Map */
    @each $name, $var in $colors{
        --color-#{$name}: var(--e-global-color-#{$var});
    } 
}