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:
Родитель
933db7d594
Коммит
05cc72b237
|
@ -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 {
|
||||
|
|
Загрузка…
Ссылка в новой задаче