@import "global";
@import "styles/default";
@import "styles/shenlan";
@import "styles/hailan";

@import "colors/default";
@import "colors/hong";
@import "colors/cheng";
@import "colors/huang";
@import "colors/qing";
@import "colors/lv";
@import "colors/shenaln";
@import "colors/zi";




$themes:(
		default:$theme_default,
		shenlan:$theme_shenlan,
		hailan:$theme_hailan
);
$themeColors:(
		lan:$themeColor_default,
		hong:$themeColor_hong,
		cheng:$themeColor_cheng,
		huang:$themeColor_huang,
		qing:$themeColor_qing,
		lv:$themeColor_lv,
		shenaln:$themeColor_shenaln,
		zi:$themeColor_zi

);
@mixin themeMixin {
	@each $theme-name, $theme-map in $themes {
		//!global 把局部变量强升为全局变量
		$theme-map: $theme-map !global;
		[data-theme="#{$theme-name}"] & {
			@content;
		}
	}
}


@mixin themeColorMixin {
	@each $theme-name, $theme-map in $themeColors {
		//!global 把局部变量强升为全局变量
		$theme-map: $theme-map !global;
		[data-theme-color="#{$theme-name}"] & {
			@content;
		}
	}
}


//根据Key获取颜色的function
@function themed($key) {
	@return map-get($theme-map, $key);
}

@mixin theme($key, $colorName: $key,$opacity:null) {
	@include themeMixin {
		// #{$key}: #{$key};

		@if($opacity == null){
			#{$key}: themed($colorName);
		}
		@else {
			#{$key}: rgba(themed($colorName),$opacity);
		}
	}
}

@mixin themeColor($key, $colorName: $key,$opacity:null) {
	@include themeColorMixin {
		// #{$key}: #{$key};
		@if($opacity == null){
			#{$key}: themed($colorName);
		}
		@else {
			#{$key}: rgba(themed($colorName),$opacity);
		}
	}
}