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.

.npmignore

@@ -3,3 +3,4 @@
 
 # Examples
 /example/
+.config/

package.json

@@ -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"

src/_mixins.scss

@@ -10,27 +10,30 @@ $default-prefix: 'theme' !default;
 
 /// 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} & {
+        // re-export the color map under the global scope so the
-            $theme-map: () !global;
+        // `themed` function below can access it inside the content:
-            @each $key, $submap in $colors {
+        $theme-map: $colors !global;
-                $value: map-get(map-get($themes, $theme), '#{$key}');
+
-                $theme-map: map-merge($theme-map, ($key: $value)) !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 {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 {