_mixins.scss

@import "../constants/_colorPalette.scss";

/**
 * theme-aware - Change color of a css property based on the currently active theme
 *
 * @param  {key}     CSS property
 * @param  {color}   Color name defined in the themes under _color-palette.scss
 *
 * @example - @include theme-aware('background', 'color-background');
 * @returns - background: #FFF;
 */
@mixin theme-aware($key, $color) {
    @each $theme-name, $theme-color in $themes {
        :global(.theme-#{$theme-name}) & {
            #{$key}: map-get(map-get($themes, $theme-name), $color);
        }
    }
}

@mixin theme-aware-shadow($values, $color) {
	@each $theme-name, $theme-color in $themes {
		:global(.theme-#{$theme-name}) & {
			-webkit-box-shadow: $values map-get(map-get($themes, $theme-name), $color);
			-moz-box-shadow: $values map-get(map-get($themes, $theme-name), $color);
			box-shadow: $values map-get(map-get($themes, $theme-name), $color);
        }
	}
}