Merged PR 780724: Fix @themify mixin to work with mangling

* Emit the `theme-dark` class under :global so it works when the classnames are mangled.
* Remove the need to loop over all variables when constructing the current theme map: just re-export the `$themes[$theme]` map.
This commit is contained in:
Vishwam Subramanyam 2018-04-17 22:50:14 +00:00
Родитель 933db7d594
Коммит 05cc72b237
3 изменённых файлов: 18 добавлений и 14 удалений

Просмотреть файл

@ -2,4 +2,5 @@
/node_modules/
# Examples
/example/
/example/
.config/

Просмотреть файл

@ -1,7 +1,7 @@
{
"name": "@azure-iot/ux-fluent-css",
"description": "Common styles library for CSS, Colors and Themes",
"version": "2.0.0",
"version": "2.0.1",
"license": "ISC",
"engines": {
"node": "^8.0.0"

Просмотреть файл

@ -1,4 +1,4 @@
/**
/**
* Mixins
*/
@ -8,29 +8,32 @@
/// @type String
$default-prefix: 'theme' !default;
/// Creates theme variations
/// Creates theme variations
///
/// @param {Map} $themes - Theme map to loop through
/// @param {Map} $themes - Theme map to loop through. Optional.
@mixin themify($themes: $themes) {
// for each theme, get its name and color variable map:
@each $theme, $colors in $themes {
.#{$default-prefix}-#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $colors {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
// re-export the color map under the global scope so the
// `themed` function below can access it inside the content:
$theme-map: $colors !global;
:global(.#{$default-prefix}-#{$theme}) {
@content;
$theme-map: null !global;
}
// reset the theme-map global variable:
$theme-map: null !global;
}
}
/// Gets a value from the color map.
///
/// @param {String} $key - Name of the color variable
/// @param {String} $key - Name of the color variable
/// @param {Map} $theme-map - Theme map to use. Optional.
///
/// @returns {String} The color for the given key
@function themed($key) {
@function themed($key, $theme-map: $theme-map) {
$value: map-get($theme-map, $key);
@if not $value {