button theming using config-map.scss

$themes-names: (
    primary: (
        background: $white,
        color: $dark-grey,
        font-size: 18px,
    ),
    dark: (
        background: $dark,
        font-size: 10px,
    )
);
$primaryName: "primary";
$darkName: "dark";

@function map-deep-get($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }
    @return $map;
}

@mixin print($declarations) {
    @each $property, $value in $declarations {
        #{$property}: $value
    }
}

@mixin wrappedTheme($declarations) {
    @each $theme, $value in $declarations {
        $selector: "&.theme-#{$theme}";
        #{$selector} {
            @include print(map-deep-get($themes-names, $theme));
        }
    }
}



$color-default: map-deep-get($themes-names, "primary", "color");

.button-themed {
    @extend %button;

    /* generate &.theme-primary{...} and &.theme-dark{...} */
    @include wrappedTheme($themes-names); 

    /*override*/
    &.theme-#{$darkName} {
        border: 5px solid $color-default;
        color: $white;
    }
    
    /* can override/extend specific theme  --modifier */
    &.theme-#{$primaryName}--modifier {
        @include print(map-deep-get($themes-names, $primaryName)); 
        /* will add all from: $themes-names[$primaryName]
        /---
            background: $white,
            color: $dark-grey,
            font-size: 18px,
        */
        font-size: 22px;
    }


    color: $color-default;
}