fomantic-ui 2.9.0-beta.289 → 2.9.0-beta.291

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.289+28948f4",
+  "version": "2.9.0-beta.291+83e6d77",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/behaviors/api.js

@@ -65,7 +65,7 @@ $.api = $.fn.api = function(parameters) {
 
         // context used for state
         $context        = (settings.stateContext)
-          ? $(settings.stateContext)
+          ? ([window,document].indexOf(settings.stateContext) < 0 ? $(document).find(settings.stateContext) : $(settings.stateContext))
           : $module,
 
         // request details

package/src/definitions/behaviors/form.js

@@ -1217,7 +1217,7 @@ $.fn.form = function(parameters) {
               if(settings.errorFocus && ignoreCallbacks !== true) {
                 var focusElement, hasTabIndex = true;
                 if (typeof settings.errorFocus === 'string') {
-                  focusElement = $(settings.errorFocus);
+                  focusElement = $(document).find(settings.errorFocus);
                   hasTabIndex = focusElement.is('[tabindex]');
                   // to be able to focus/scroll into non input elements we need a tabindex
                   if (!hasTabIndex) {

package/src/definitions/behaviors/state.js

@@ -74,7 +74,7 @@ $.fn.state = function(parameters) {
 
           // bind events with delegated events
           if(settings.context && moduleSelector !== '') {
-            $(settings.context)
+            ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
               .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
               .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
               .on(moduleSelector, 'click'      + eventNamespace, module.toggle.state)

package/src/definitions/behaviors/visibility.js

@@ -58,7 +58,7 @@ $.fn.visibility = function(parameters) {
         $window         = $(window),
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
 
         $placeholder,
 

package/src/definitions/collections/table.less

@@ -243,7 +243,7 @@
       @color: @value;
       @c: @colors[@@color][color];
       @l: @colors[@@color][light];
-      .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} {
+      .ui.ui.ui.ui.table:not(.unstackable) tr[class*="@{color} marked"] {
         &.left {
           box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
         }
@@ -252,7 +252,7 @@
         }
       }
       & when (@variationTableInverted) {
-        .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.@{color} {
+        .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="@{color} marked"] {
           &.left {
             box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
           }
@@ -872,7 +872,7 @@
       @color: @value;
       @c: @colors[@@color][color];
       @l: @colors[@@color][light];
-      .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} {
+      .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="@{color} marked"] {
         &.left {
           box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
         }
@@ -881,7 +881,7 @@
         }
       }
       & when (@variationTableInverted) {
-        .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.@{color} {
+        .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="@{color} marked"] {
           &.left {
             box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
           }
@@ -1180,6 +1180,9 @@
         }
       }
     }
+    .ui.ui.ui.ui.table tr[class*="@{color} colored"],
+    .ui.ui.table th[class*="@{color} colored"],
+    .ui.ui.table td[class*="@{color} colored"],
     .ui.ui.ui.ui.table tr.@{color}:not(.marked),
     .ui.ui.table th.@{color}:not(.marked),
     .ui.ui.table td.@{color}:not(.marked) {
@@ -1199,6 +1202,9 @@
         color: @t;
       }
     }
+    .ui.table > thead > tr[class*="@{color} colored"] > th,
+    .ui.table > tfoot > tr[class*="@{color} colored"] > th,
+    .ui.table > tfoot > tr[class*="@{color} colored"] > td,
     .ui.table > thead > tr.@{color}:not(.marked) > th,
     .ui.table > tfoot > tr.@{color}:not(.marked) > th,
     .ui.table > tfoot > tr.@{color}:not(.marked) > td {
@@ -1212,12 +1218,18 @@
     }
 
     & when (@variationTableInverted) {
+      .ui.ui.ui.ui.inverted.table tr[class*="@{color} colored"],
+      .ui.ui.inverted.table th[class*="@{color} colored"],
+      .ui.ui.inverted.table td[class*="@{color} colored"],
       .ui.ui.ui.ui.inverted.table tr.@{color}:not(.marked),
       .ui.ui.inverted.table th.@{color}:not(.marked),
       .ui.ui.inverted.table td.@{color}:not(.marked) {
         background: @c;
         color: @white;
       }
+      .ui.inverted.table > thead > tr[class*="@{color} colored"] > th,
+      .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > th,
+      .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > td,
       .ui.inverted.table > thead > tr.@{color}:not(.marked) > th,
       .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > th,
       .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > td {
@@ -1226,6 +1238,9 @@
       }
     }
     & when (@variationTableSelectable) {
+      .ui.ui.selectable.table tr[class*="@{color} colored"]:hover,
+      .ui.table tr td.selectable[class*="@{color} colored"]:hover,
+      .ui.selectable.table tr:hover td[class*="@{color} colored"],
       .ui.ui.selectable.table tr.@{color}:not(.marked):hover,
       .ui.table tr td.selectable.@{color}:not(.marked):hover,
       .ui.selectable.table tr:hover td.@{color}:not(.marked) {
@@ -1243,6 +1258,9 @@
         }
       }
       & when (@variationTableInverted) {
+        .ui.ui.inverted.selectable.table tr[class*="@{color} colored"]:hover,
+        .ui.inverted.table tr td.selectable[class*="@{color} colored"]:hover,
+        .ui.inverted.selectable.table tr:hover td[class*="@{color} colored"],
         .ui.ui.inverted.selectable.table tr.@{color}:not(.marked):hover,
         .ui.inverted.table tr td.selectable.@{color}:not(.marked):hover,
         .ui.inverted.selectable.table tr:hover td.@{color}:not(.marked) {
@@ -1262,8 +1280,8 @@
       }
     }
     & when (@variationTableMarked) {
-      .ui.table td.marked.@{color},
-      .ui.table tr.marked.@{color} {
+      .ui.table td[class*="@{color} marked"],
+      .ui.table tr[class*="@{color} marked"] {
         &.left {
           box-shadow: @coloredBorderSize 0 0 0 @c inset;
         }
@@ -1272,8 +1290,8 @@
         }
       }
       & when (@variationTableInverted) {
-        .ui.inverted.table td.marked.@{color},
-        .ui.inverted.table tr.marked.@{color} {
+        .ui.inverted.table td[class*="@{color} marked"],
+        .ui.inverted.table tr[class*="@{color} marked"] {
           &.left {
             box-shadow: @coloredBorderSize 0 0 0 @l inset;
           }

package/src/definitions/modules/calendar.js

@@ -803,7 +803,7 @@ $.fn.calendar = function(parameters) {
               return null;
             }
             if (!(selector instanceof $)) {
-              selector = $(selector).first();
+              selector = $(document).find(selector).first();
             }
             //assume range related calendars are using the same namespace
             return selector.data(moduleNamespace);

package/src/definitions/modules/dropdown.js

@@ -61,7 +61,7 @@ $.fn.dropdown = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
         $text           = $module.find(selector.text),
         $search         = $module.find(selector.search),
         $sizer          = $module.find(selector.sizer),
@@ -2917,7 +2917,7 @@ $.fn.dropdown = function(parameters) {
             $('<option/>')
               .prop('value', escapedValue)
               .addClass(className.addition)
-              .html(value)
+              .text(value)
               .appendTo($input)
             ;
             module.verbose('Adding user addition as an <option>', value);

package/src/definitions/modules/modal.js

@@ -65,7 +65,7 @@ $.fn.modal = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
         $closeIcon      = $module.find(selector.closeIcon),
         $inputs,
 
@@ -124,7 +124,7 @@ $.fn.modal = function(parameters) {
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
               $actions.append($('<button/>', {
                 html: icon + text,
-                'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
+                'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                 class: className.button + ' ' + cls,
                 click: function () {
                   var button = $(this);

package/src/definitions/modules/nag.js

@@ -53,7 +53,7 @@ $.fn.nag = function(parameters) {
         $module         = $(this),
 
         $context        = (settings.context)
-          ? $(settings.context)
+          ? ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
           : $('body'),
 
         element         = this,

package/src/definitions/modules/popup.js

@@ -62,11 +62,11 @@ $.fn.popup = function(parameters) {
         moduleNamespace    = 'module-' + namespace,
 
         $module            = $(this),
-        $context           = $(settings.context),
-        $scrollContext     = $(settings.scrollContext),
-        $boundary          = $(settings.boundary),
+        $context           = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
+        $scrollContext     = [window,document].indexOf(settings.scrollContext) < 0 ? $(document).find(settings.scrollContext) : $(settings.scrollContext),
+        $boundary          = [window,document].indexOf(settings.boundary) < 0 ? $(document).find(settings.boundary) : $(settings.boundary),
         $target            = (settings.target)
-          ? $(settings.target)
+          ? ([window,document].indexOf(settings.target) < 0 ? $(document).find(settings.target) : $(settings.target))
           : $module,
 
         $popup,
@@ -121,8 +121,8 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          if(settings.popup) {
-            $popup = $(settings.popup).eq(0);
+          if(settings.popup && typeof settings.popup === 'string') {
+            $popup = $(document).find(settings.popup).eq(0);
           }
           else {
             if(settings.inline) {
@@ -286,8 +286,8 @@ $.fn.popup = function(parameters) {
             }
             settings.onCreate.call($popup, element);
           }
-          else if(settings.popup) {
-            $(settings.popup).data(metadata.activator, $module);
+          else if(settings.popup && typeof settings.popup === 'string') {
+            $(document).find(settings.popup).data(metadata.activator, $module);
             module.verbose('Used popup specified in settings');
             module.refresh();
             if(settings.hoverable) {
@@ -368,7 +368,7 @@ $.fn.popup = function(parameters) {
         },
 
         hideAll: function() {
-          $(selector.popup)
+          $(document).find(selector.popup)
             .filter('.' + className.popupVisible)
             .each(function() {
               $(this)

package/src/definitions/modules/sidebar.js

@@ -66,7 +66,7 @@ $.fn.sidebar = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
 
         $sidebars       = $module.children(selector.sidebar),
         $fixed          = $context.children(selector.fixed),
@@ -294,7 +294,7 @@ $.fn.sidebar = function(parameters) {
 
         refresh: function() {
           module.verbose('Refreshing selector cache');
-          $context  = $(settings.context);
+          $context  = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
           $sidebars = $context.children(selector.sidebar);
           $pusher   = $context.children(selector.pusher);
           $fixed    = $context.children(selector.fixed);

package/src/definitions/modules/sticky.js

@@ -53,7 +53,7 @@ $.fn.sticky = function(parameters) {
 
         $module               = $(this),
         $window               = $(window),
-        $scroll               = $(settings.scrollContext),
+        $scroll               = [window,document].indexOf(settings.scrollContext) < 0 ? $(document).find(settings.scrollContext) : $(settings.scrollContext),
         $container,
         $context,
 
@@ -139,7 +139,7 @@ $.fn.sticky = function(parameters) {
 
         determineContainer: function() {
           if(settings.container) {
-            $container = $(settings.container);
+            $container = [window,document].indexOf(settings.container) < 0 ? $(document).find(settings.container) : $(settings.container);
           }
           else {
             $container = $module.offsetParent();
@@ -148,7 +148,7 @@ $.fn.sticky = function(parameters) {
 
         determineContext: function() {
           if(settings.context) {
-            $context = $(settings.context);
+            $context = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
           }
           else {
             $context = $container;

package/src/definitions/modules/tab.js

@@ -162,7 +162,7 @@ $.fn.tab = function(parameters) {
             module.verbose('Determined parent element for creating context', $context);
           }
           else if(settings.context) {
-            $context = $(settings.context);
+            $context = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
             module.verbose('Using selector for tab context', settings.context, $context);
           }
           else {

package/src/definitions/modules/toast.js

@@ -61,7 +61,7 @@ $.fn.toast = function(parameters) {
         $animationObject,
         $close,
         $context         = (settings.context)
-          ? $(settings.context)
+          ? ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
           : $('body'),
 
         isToastComponent = $module.hasClass('toast') || $module.hasClass('message') || $module.hasClass('card'),
@@ -246,7 +246,7 @@ $.fn.toast = function(parameters) {
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
                 $actions.append($('<button/>', {
                   html: icon + text,
-                  'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
+                  'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                   class: className.button + ' ' + cls,
                   click: function () {
                     var button = $(this);

package/src/theme.less

@@ -60,8 +60,19 @@
        Fonts
 -------------------*/
 
-.loadFonts() when (@importGoogleFonts) {
-  @import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
+.loadFonts() {
+  & when (@importGoogleFonts) {
+    @import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
+  }
+  & when (@importFonts) and not (@fontName = ''){
+    each(@fonts, {
+      @font-face {
+        each(@value,{
+            @{key}: @value;
+        });
+      }
+    })
+  }
 }
 
 /*------------------

package/src/themes/amazon/globals/site.variables

@@ -9,6 +9,7 @@
 @fontSize : 13px;
 @fontName : 'Arial';
 @importGoogleFonts : false;
+@importFonts: false;
 
 @h1: 2.25em;
 

package/src/themes/default/globals/site.variables

@@ -3,18 +3,113 @@
 *******************************/
 
 @import "variation.variables";
+@supportIE: true;
 
 /*-------------------
        Fonts
 --------------------*/
 
 @fontName          : 'Lato';
-
-@headerFont        : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-@pageFont          : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@fontFileNameLatin : 'LatoLatin';
+@fontFileNameSupplement: 'Lato';
+
+// based on https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L577 list
+@fallbackFonts     : system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+@headerFont        : @fontName, @fallbackFonts;
+@pageFont          : @fontName, @fallbackFonts;
+
+@fontDisplay            : swap;
+@textRendering          : optimizeLegibility;
+@unicodeRangeLatin      : U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+@unicodeRangeSupplement : U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
+
+@importFonts            : true;
+@fonts: {
+        @regularLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Regular.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Regular.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @boldLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Bold.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Bold.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @italicLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-Italic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Italic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @boldItalicLatin: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeLatin;
+        };
+        @regularSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @boldSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff") format('woff'));
+                font-style     : normal;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @italicSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @normal;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+        @boldItalicSupplement: {
+                font-family: @fontName;
+                src: url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2") format('woff2')
+                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff") format('woff'));
+                font-style     : italic;
+                font-weight    : @bold;
+                font-display   : @fontDisplay;
+                text-rendering : @textRendering;
+                unicode-range  : @unicodeRangeSupplement;
+        };
+};
 
 @googleFontName    : @fontName;
-@importGoogleFonts : true;
+@importGoogleFonts : false;
 @googleFontSizes   : 'ital,wght@0,400%3B0,700%3B1,400%3B1,700';
 @googleSubset      : 'latin';
 @googleFontDisplay : 'swap';

package/src/themes/github/globals/site.variables

@@ -9,6 +9,7 @@
 @fontSize : 13px;
 @fontName : 'Arial';
 @importGoogleFonts : false;
+@importFonts: false;
 
 @h1: 2.25em;
 

package/src/themes/systemfont/globals/reset.overrides

@@ -0,0 +1,8 @@
+/*******************************
+           Overrides
+*******************************/
+
+b,
+strong {
+  font-weight: 600;
+}

package/src/themes/systemfont/globals/site.variables

@@ -0,0 +1,10 @@
+/*******************************
+     User Global Variables
+*******************************/
+
+@fontName          : '';
+@headerFont        : @fallbackFonts;
+@pageFont          : @fallbackFonts;
+@importGoogleFonts : false;
+@importFonts       : false;
+@bold              : 600;

package/tasks/build/css.js

@@ -133,8 +133,8 @@ function buildCSS(src, type, config, opts, callback) {
   }
 
   if (globs.individuals !== undefined && typeof src === 'string') {
-    const individuals = config.globs.individuals.replace('{','');
-    const components = config.globs.components.replace('}',',').concat(individuals);
+    const individuals = config.globs.individuals.replace(/\{/g,'');
+    const components = config.globs.components.replace(/\}/g,',').concat(individuals);
 
     src = config.paths.source.definitions + '/**/' + components + '.less';
   }

package/tasks/build/javascript.js

@@ -100,8 +100,8 @@ function buildJS(src, type, config, callback) {
   }
 
   if (globs.individuals !== undefined && typeof src === 'string') {
-    const individuals = config.globs.individuals.replace('{','');
-    const components = config.globs.components.replace('}',',').concat(individuals);
+    const individuals = config.globs.individuals.replace(/\{/g,'');
+    const components = config.globs.components.replace(/\}/g,',').concat(individuals);
 
     src = config.paths.source.definitions + '/**/' + components + (config.globs.ignored || '') + '.js';
   }