@uifabric/styling - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.json

@@ -5,2 +5,21 @@ {
     {
+      "version": "0.3.0",
+      "tag": "@uifabric/styling_v0.3.0",
+      "date": "Tue, 30 May 2017 03:27:20 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <[e-mail]>",
+            "commit": "3a198d4811b76f491acce31efa358c9c95740a63",
+            "comment": "Major updates to mergeStyles and other various utilities. Updating fonts to follow latest fabric-core language fallbacks."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=3.0.0 <4.0.0` to `>=4.0.0 <5.0.0`"
+          }
+        ]
+      }
+    },
+    {
       "version": "0.2.0",
@@ -7,0 +26,0 @@ "tag": "@uifabric/styling_v0.2.0",

CHANGELOG.md

 # Change Log - @uifabric/styling
 
-This log was last generated on Thu, 18 May 2017 10:09:58 GMT and should not be manually modified.
+This log was last generated on Tue, 30 May 2017 03:27:20 GMT and should not be manually modified.
 
+## 0.3.0
+Tue, 30 May 2017 03:27:20 GMT
+
+### Minor changes
+
+- Major updates to mergeStyles and other various utilities. Updating fonts to follow latest fabric-core language fallbacks.
+
 ## 0.2.0
@@ -6,0 +13,0 @@ Thu, 18 May 2017 10:09:58 GMT

dist/999a39fc-2e41-878c-eeb6-f8d33c5e46cf.manifest.json

@@ -5,3 +5,3 @@ {
   "componentType": "Library",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "manifestVersion": 2,
@@ -8,0 +8,0 @@ "loaderConfig": {

gulpfile.js

@@ -16,3 +16,3 @@ 'use strict';
   require('@microsoft/gulp-core-build-typescript/lib/defaultTslint.json').rules,
-  require('../../tslint.json').rules,
+  require('./node_modules/office-ui-fabric-react-tslint/tslint.json').rules,
   require('./tslint.json').rules
@@ -30,2 +30,1 @@ );
 build.apiExtractor.isEnabled = () => false;
-

lib/glamorExports.js

@@ -7,4 +7,5 @@ "use strict";
 // force speedy.
-// Glamor['speedy'](true);
 // tslint:disable-next-line:no-string-literal
+Glamor['speedy'](true);
+// tslint:disable-next-line:no-string-literal
 Glamor['plugins'].add(function (_a) {
@@ -11,0 +12,0 @@ var selector = _a.selector, style = _a.style;

lib/interfaces/index.d.ts

@@ -6,2 +6,3 @@ export { IProcessedStyle } from './IProcessedStyle';
 export { IPalette } from './IPalette';
+export { ISemanticColors } from './ISemanticColors';
 export { IFontStyles } from './IFontStyles';

lib/interfaces/IPalette.d.ts

@@ -66,6 +66,2 @@ /**
     /**
-     * Color code for neutralSecondaryAlt.
-     */
-    neutralSecondaryAlt?: string;
-    /**
      * Color code for neutralTertiary.
@@ -72,0 +68,0 @@ */

lib/interfaces/IStyle.d.ts

 import { IProcessedStyle } from './IProcessedStyle';
+import { IRawStyle } from './IRawStyle';
 /**
- * A style entry which can be represented as a string class name, a raw style object, or a processed style
+ * A style entry which can be represented as a string class name or a processed style
  * object. This is the type returned from mergeStyles utility.
  */
-export declare type IStyle = string | IProcessedStyle;
+export declare type IStyle = IRawStyle | IProcessedStyle | (IRawStyle | IProcessedStyle)[];

lib/styles/DefaultFontStyles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var glamorExports_1 = require("../glamorExports");
-var FONT_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean';
-var ICON_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets/icons';
-var SYSTEM_BASE = '"Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif';
-var FAMILY_BASE = '"Segoe UI WestEuropean", ' + SYSTEM_BASE;
+var index_1 = require("@uifabric/utilities/lib/index");
+// Default urls.
+var DefaultFontUrl = 'https://static2.sharepointonline.com/files/fabric/assets/fonts';
+var DefaultIconUrl = 'https://static2.sharepointonline.com/files/fabric/assets/icons';
+// Fallback fonts, if specified system or web fonts are unavailable.
+var FontFamilyFallbacks = "-apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif";
+// Font face names to be registered.
+var FontNameArabic = 'Segoe UI Web (Arabic)';
+var FontNameCyrillic = 'Segoe UI Web (Cyrillic)';
+var FontNameEastEuropean = 'Segoe UI Web (East European)';
+var FontNameGreek = 'Segoe UI Web (Greek)';
+var FontNameHebrew = 'Segoe UI Web (Hebrew)';
+var FontNameThai = 'Leelawadee UI Web';
+var FontNameVietnamese = 'Segoe UI Web (Vietnamese)';
+var FontNameWestEuropean = 'Segoe UI Web (West European)';
+var FontNameSelawik = 'Selawik Web';
+// Font families with fallbacks, for the general regions.
+var FontFamilyArabic = "'" + FontNameArabic + "'";
+var FontFamilyChineseSimplified = "'Microsoft Yahei', Verdana, Simsun";
+var FontFamilyChineseTraditional = "'Microsoft Jhenghei', Pmingliu";
+var FontFamilyCyrillic = "'" + FontNameCyrillic + "'";
+var FontFamilyEastEuropean = "'" + FontNameEastEuropean + "'";
+var FontFamilyGreek = "'" + FontNameGreek + "'";
+var FontFamilyHebrew = "'" + FontNameHebrew + "'";
+var FontFamilyHindi = "'Nirmala UI'";
+var FontFamilyJapanese = "'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka";
+var FontFamilyKorean = "'Malgun Gothic', Gulim";
+var FontFamilySelawik = "'" + FontNameSelawik + "'";
+var FontFamilyThai = "'Leelawadee UI Web', 'Kmer UI'";
+var FontFamilyVietnamese = "'" + FontNameVietnamese + "'";
+var FontFamilyWestEuropean = "'" + FontNameWestEuropean + "'";
+// Mapping of language prefix to to font family.
+var LanguageToFontMap = {
+    'ar': FontFamilyArabic,
+    'bg': FontFamilyCyrillic,
+    'cs': FontFamilyEastEuropean,
+    'el': FontFamilyGreek,
+    'et': FontFamilyEastEuropean,
+    'he': FontFamilyHebrew,
+    'hi': FontFamilyHindi,
+    'hr': FontFamilyEastEuropean,
+    'hu': FontFamilyEastEuropean,
+    'ja': FontFamilyJapanese,
+    'kk': FontFamilyEastEuropean,
+    'ko': FontFamilyKorean,
+    'lt': FontFamilyEastEuropean,
+    'lv': FontFamilyEastEuropean,
+    'pl': FontFamilyEastEuropean,
+    'ru': FontFamilyCyrillic,
+    'sk': FontFamilyEastEuropean,
+    'sr-latn': FontFamilyEastEuropean,
+    'th': FontFamilyThai,
+    'tr': FontFamilyEastEuropean,
+    'uk': FontFamilyCyrillic,
+    'vi': FontFamilyVietnamese,
+    'zh-hans': FontFamilyChineseSimplified,
+    'zh-hant': FontFamilyChineseTraditional,
+};
+// Standard font sizes.
 var FontSizes;
@@ -23,2 +78,3 @@ (function (FontSizes) {
 })(FontSizes = exports.FontSizes || (exports.FontSizes = {}));
+// Standard font weights.
 var FontWeights;
@@ -32,2 +88,3 @@ (function (FontWeights) {
 })(FontWeights = exports.FontWeights || (exports.FontWeights = {}));
+// Standard font styling.
 exports.DefaultFontStyles = {
@@ -51,6 +108,19 @@ tiny: _createFont(FontSizes.mini, FontWeights.semibold),
 };
+function _getFontFamily() {
+    var language = index_1.getLanguage();
+    var fontFamily = FontFamilyWestEuropean;
+    for (var lang in LanguageToFontMap) {
+        if (LanguageToFontMap.hasOwnProperty(lang) && lang.indexOf(language) === 0) {
+            fontFamily = LanguageToFontMap[lang];
+            break;
+        }
+    }
+    return fontFamily + ", " + FontFamilyFallbacks;
+}
 function _createFont(size, weight) {
     return {
-        fontFamily: FAMILY_BASE,
-        WebkitFontSmoothing: 'antialiased',
+        fontFamily: _getFontFamily(),
+        '-moz-osx-font-smoothing': 'grayscale',
+        '-ms-high-contrast-adjust': 'none',
+        '-webkit-font-smoothing': 'antialiased',
         fontSize: size,
@@ -60,9 +130,8 @@ fontWeight: weight
 }
-function _registerFontFace(fontFamily, fontName, baseUrl, fontFileName, fontWeight) {
+function _registerFontFace(fontFamily, url, fontWeight) {
+    fontFamily = "'" + fontFamily + "'";
     glamorExports_1.fontFace({
         fontFamily: fontFamily,
-        src: "local('" + fontName + "')," +
-            ("url('" + baseUrl + "/" + fontFileName + ".woff2') format('woff2'),") +
-            ("url('" + baseUrl + "/" + fontFileName + ".woff') format('woff'),") +
-            ("url('" + baseUrl + "/" + fontFileName + ".ttf') format('truetype')"),
+        src: "url('" + url + ".woff2') format('woff2')," +
+            ("url('" + url + ".woff') format('woff')"),
         fontWeight: fontWeight,
@@ -72,19 +141,31 @@ fontStyle: 'normal'
 }
-[
-    'Arabic',
-    'Cyrillic',
-    'EastEuropean',
-    'Greek',
-    'Hebrew',
-    'Vietnamese',
-    'WestEuropean'
-].forEach(function (language) {
-    _registerFontFace("'Segoe UI" + (language ? ' ' + language : '') + "'", 'Segoe UI Light', FONT_BASE_URL, 'segoeui-light', FontWeights.light);
-    _registerFontFace("'Segoe UI" + (language ? ' ' + language : '') + "'", 'Segoe UI Semilight', FONT_BASE_URL, 'segoeui-semilight', 200);
-    _registerFontFace("'Segoe UI" + (language ? ' ' + language : '') + "'", 'Segoe UI', FONT_BASE_URL, 'segoeui-regular', FontWeights.regular);
-    _registerFontFace("'Segoe UI" + (language ? ' ' + language : '') + "'", 'Segoe UI Semibold', FONT_BASE_URL, 'segoeui-semibold', FontWeights.semibold);
-});
-// Icon font
-_registerFontFace('FabricMDL2Icons', 'FabricMDL2Icons', ICON_BASE_URL, 'fabricmdl2icons', FontWeights.regular);
+function _registerFontFaceSet(fontFamily, cdnFolder, cdnFontName) {
+    if (cdnFontName === void 0) { cdnFontName = 'segoeui'; }
+    var urlBase = DefaultFontUrl + "/" + cdnFolder + "/" + cdnFontName;
+    _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light);
+    _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight);
+    _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular);
+    _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold);
+}
+function _registerDefaultFontFaces() {
+    // Produce @font-face definitions for all supported web fonts.
+    _registerFontFaceSet(FontNameThai, 'leelawadeeui-thai', 'leelawadeeui');
+    _registerFontFaceSet(FontNameArabic, 'segoeui-arabic');
+    _registerFontFaceSet(FontNameCyrillic, 'segoeui-cyrillic');
+    _registerFontFaceSet(FontNameEastEuropean, 'segoeui-easteuropean');
+    _registerFontFaceSet(FontNameGreek, 'segoeui-greek');
+    _registerFontFaceSet(FontNameHebrew, 'segoeui-hebrew');
+    _registerFontFaceSet(FontNameVietnamese, 'segoeui-vietnamese');
+    _registerFontFaceSet(FontNameWestEuropean, 'segoeui-westeuropean');
+    _registerFontFaceSet(FontFamilySelawik, 'selawik', 'selawik');
+    // Leelawadee UI (Thai) does not have a 'light' weight, so we override
+    // the font-face generated above to use the 'semilight' weight instead.
+    _registerFontFace('Leelawadee UI Web', DefaultFontUrl + "/leelawadeeui-thai/leelawadeeui-semilight", FontWeights.light);
+    // Leelawadee UI (Thai) does not have a 'semibold' weight, so we override
+    // the font-face generated above to use the 'bold' weight instead.
+    _registerFontFace('Leelawadee UI Web', DefaultFontUrl + "/leelawadeeui-thai/leelawadeeui-bold", FontWeights.semibold);
+    _registerFontFace('FabricMDL2Icons', DefaultIconUrl + '/fabricmdl2icons', FontWeights.regular);
+}
+_registerDefaultFontFaces();
 
 //# sourceMappingURL=DefaultFontStyles.js.map

lib/styles/DefaultPalette.js

@@ -19,3 +19,2 @@ "use strict";
     neutralSecondary: '#666666',
-    neutralSecondaryAlt: '#767676',
     neutralTertiary: '#a6a6a6',
@@ -22,0 +21,0 @@ neutralTertiaryAlt: '#c8c8c8',

lib/styles/IconCodes.d.ts

@@ -172,3 +172,3 @@ export declare const IconCodes: {
     combine: string;
-    compassNw: string;
+    compassNW: string;
     completed: string;
@@ -175,0 +175,0 @@ completedSolid: string;

lib/styles/IconCodes.js

@@ -687,3 +687,3 @@ "use strict";
      */
-    compassNw: '\uE942',
+    compassNW: '\uE942',
     /**
@@ -690,0 +690,0 @@ * Icon code with the value '\uE930'.

lib/utilities/mergeStyles.d.ts

@@ -1,2 +0,13 @@
-import { IStyle, IRawStyle } from '../interfaces/index';
-export declare function mergeStyles(...args: (IStyle | IRawStyle)[]): IStyle;
+import { IStyle, IProcessedStyle } from '../interfaces/index';
+/**
+ * Takes a collection of collection of styles, defined in various formats, and compresses them into
+ * a single thing of one format to return.
+ * If any class names (strings) are passed in, it will return a list of space-separated class names,
+ * using glamor to generate a class name for all passed in style objects.
+ * Otherwise, all style objects passed in will be compressed into a single IProcessedStyle.
+ *
+ * @export
+ * @param {(...(IStyle | string)[])} args
+ * @returns {IStyle}
+ */
+export declare function mergeStyles(...args: (IStyle | string)[]): IProcessedStyle | string;

lib/utilities/mergeStyles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var glamor_1 = require("glamor");
+/**
+ * Takes a collection of collection of styles, defined in various formats, and compresses them into
+ * a single thing of one format to return.
+ * If any class names (strings) are passed in, it will return a list of space-separated class names,
+ * using glamor to generate a class name for all passed in style objects.
+ * Otherwise, all style objects passed in will be compressed into a single IProcessedStyle.
+ *
+ * @export
+ * @param {(...(IStyle | string)[])} args
+ * @returns {IStyle}
+ */
 function mergeStyles() {
@@ -11,13 +22,19 @@ var args = [];
     var rules = [];
-    for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
-        var arg = args_1[_a];
-        if (arg) {
-            if (typeof arg === 'string') {
-                classes.push(arg);
+    function _parseArgs(theArgs) {
+        for (var _i = 0, theArgs_1 = theArgs; _i < theArgs_1.length; _i++) {
+            var arg = theArgs_1[_i];
+            if (arg) {
+                if (typeof arg === 'string') {
+                    classes.push(arg);
+                }
+                else if (Array.isArray(arg)) {
+                    _parseArgs(arg);
+                }
+                else {
+                    rules.push(arg);
+                }
             }
-            else {
-                rules.push(arg);
-            }
         }
     }
+    _parseArgs(args);
     var rulesObject = rules.length ? glamor_1.css.apply(void 0, rules) : null;
@@ -24,0 +41,0 @@ if (classes.length) {

lib/utilities/mergeStyleSets.d.ts

@@ -0,1 +1,6 @@
+/**
+ * Merges a give set of styles by running mergeStyles for each unique key. Works
+ * like Object.assign in that it layers them in the argument order specified, but will
+ * not mutate them and will return the merged result.
+ */
 export declare function mergeStyleSets<T>(...args: T[]): T;

lib/utilities/mergeStyleSets.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mergeStyles_1 = require("./mergeStyles");
+/**
+ * Merges a give set of styles by running mergeStyles for each unique key. Works
+ * like Object.assign in that it layers them in the argument order specified, but will
+ * not mutate them and will return the merged result.
+ */
 function mergeStyleSets() {
@@ -10,15 +15,12 @@ var args = [];
     var mergedRules = {};
-    var ruleToMerge = args[0];
-    for (var prop in ruleToMerge) {
-        if (ruleToMerge.hasOwnProperty(prop)) {
-            var allArgs = [];
-            for (var i = 0; i < args.length; i++) {
-                var currentArg = args[i];
-                if (currentArg && currentArg[prop]) {
-                    allArgs.push(currentArg[prop]);
-                }
-            }
-            mergedRules[prop] = mergeStyles_1.mergeStyles.apply(void 0, allArgs);
+    var setStyles = {};
+    args.forEach(function (arg) { return arg && Object.keys(arg).forEach(function (key) {
+        if (!setStyles[key]) {
+            setStyles[key] = [];
         }
-    }
+        setStyles[key].push(arg[key]);
+    }); });
+    Object.keys(setStyles).forEach(function (key) {
+        mergedRules[key] = mergeStyles_1.mergeStyles(setStyles[key]);
+    });
     return mergedRules;
@@ -25,0 +27,0 @@ }

lib/utilities/theme.d.ts

@@ -1,5 +0,6 @@
-import { IPalette, IFontStyles } from '../interfaces/index';
+import { IPalette, IFontStyles, ISemanticColors } from '../interfaces/index';
 export interface ITheme {
     palette: IPalette;
     fonts: IFontStyles;
+    semanticColors: ISemanticColors;
 }
@@ -6,0 +7,0 @@ /**

lib/utilities/theme.js

@@ -7,2 +7,3 @@ "use strict";
     palette: index_1.DefaultPalette,
+    semanticColors: _makeSemanticColorsFromPalette(index_1.DefaultPalette),
     fonts: index_1.DefaultFontStyles
@@ -22,6 +23,27 @@ };
     _theme.palette = assign({}, _theme.palette, theme.palette);
+    _theme.semanticColors = assign({}, _makeSemanticColorsFromPalette(_theme.palette), theme.semanticColors);
     _theme.fonts = assign({}, _theme.fonts, theme.fonts);
 }
 exports.loadTheme = loadTheme;
+// Generates all the semantic slot colors based on the Fabric palette.
+// We'll use these as fallbacks for semantic slots that the passed in theme did not define.
+function _makeSemanticColorsFromPalette(p) {
+    return {
+        bodyBackground: p.white,
+        bodyText: p.neutralPrimary,
+        bodySubtext: p.neutralSecondary,
+        disabledBackground: p.neutralLighter,
+        disabledText: p.neutralTertiaryAlt,
+        disabledSubtext: p.neutralQuaternary,
+        focusBorder: p.black,
+        // errorBackground: todo,
+        errorText: p.redDark,
+        inputBorder: p.neutralTertiary,
+        inputBorderHovered: p.neutralPrimary,
+        inputBackgroundSelected: p.themePrimary,
+        inputBackgroundSelectedHovered: p.themeDarkAlt,
+        inputForegroundSelected: p.white
+    };
+}
 
 //# sourceMappingURL=theme.js.map

package-deps.json

 {
   "files": {
-    "CHANGELOG.json": "80465cbe6b1d2bb34f5b6890c1e059d4218d6aa7",
-    "CHANGELOG.md": "f0920dad2599c3dddabb7b0b0885550071d405f9",
-    "README.md": "793b76a8d1e8ba29a382526c492972beea3dc535",
-    "config/api-extractor.json": "9c294e8c13388f8d28d5aa10408fc68cf74723be",
-    "config/config.json": "d990b8ffcecad293928fadc77f7e540d149bb988",
-    "config/write-manifests.json": "fbc0f10a4498cc7e62fff9403752968c7ff67229",
-    "gulpfile.js": "9c93eb69fdb7b2519838d5c2778a56c6aed12ff7",
-    "index.html": "df2218fe1ab9aa3e7b2208487831f853308c9623",
-    "package.json": "91a086231f25dea3bf8a1b6b8d7f2618551ebf5d",
-    "src/classNames/AnimationClassNames.ts": "1b073c8ebeedeb817255ba6249fb1ad0cec5e37f",
-    "src/classNames/ColorClassNames.ts": "64c3d578a59208d7baf844663b61737fab24599f",
-    "src/classNames/FontClassNames.ts": "33271749723b99c595c24c70c29660ad561837fa",
-    "src/classNames/IconClassNames.ts": "1a518c4527ba96178719981ed59b0373c008f520",
-    "src/classNames/index.ts": "d6b1d2298168ab519fe23347d535cc78c0aa8832",
-    "src/examples/AnimationPage/AnimationPage.styles.ts": "fe21c21433112e05726c4648fb374cc6dca726b7",
-    "src/examples/AnimationPage/AnimationPage.tsx": "55a9678c60e13f7439a139cb723030ab252699f1",
-    "src/examples/AnimationTile/AnimationTile.styles.ts": "733c5592d9c81884dffc1d0c5ab2f8b0efb06f47",
-    "src/examples/AnimationTile/AnimationTile.tsx": "d38dc9f48615a74ae55ed2aed461b1d9dce1c1b7",
-    "src/examples/ColorPage/ColorPage.styles.ts": "957eaa6273f7c5efd0740f5220ed1fc2af8ed03c",
-    "src/examples/ColorPage/ColorPage.tsx": "d90b62af37dc48b5b69ae5194b244cc70ecf1239",
-    "src/examples/FontPage/FontPage.styles.ts": "394383d87ae0ec27966311940bd227799ad34dba",
-    "src/examples/FontPage/FontPage.tsx": "5ae98688373a279f764dbade3bc2a59b7b298491",
-    "src/examples/IconPage/IconPage.styles.ts": "2d7e54bfb4dd050a0f890741f69e4e9741574ad5",
-    "src/examples/IconPage/IconPage.tsx": "c8ac72e2d81224b606780c089ff7b5e122516b04",
-    "src/examples/IconTile/IconTile.styles.ts": "ed061abc3a33ea8c0eda10644a91b7e9e984677e",
-    "src/examples/IconTile/IconTile.tsx": "587d2ec8fda92a75c642154fd6703314d9d77a33",
-    "src/examples/Page/Page.styles.ts": "deea7962ad3a7b43087e684bcfec9f8ad8627679",
-    "src/examples/Page/Page.tsx": "1e35abe96d1d453a5c95d61e9dab5a15d59ab1c2",
-    "src/examples/PageHeader/PageHeader.styles.ts": "aefd7d81c2abb044b594dc4e8c3c8b28998a8441",
-    "src/examples/PageHeader/PageHeader.tsx": "de749409903e1bcb9150752ebbb6fe46be185c23",
-    "src/glamorExports.ts": "e39b4f10e402b5d133b31ff723219e4f39e82582",
-    "src/index.demo.tsx": "9dabca304becf5553861d4db5d24c1fcae6e6f00",
-    "src/index.ts": "7504ad8c76fe49eccf7170930850538f31814314",
-    "src/interfaces/IAnimationStyles.ts": "edc39d6fafd02dc44c803e9d632212c70f119b8f",
-    "src/interfaces/IFontStyles.ts": "4c6ddb9343ae8d20b34bda044bd557ee5fe9f677",
-    "src/interfaces/IPalette.ts": "fa73d28a730b8aba50c2ba2fc86600734beac7a1",
-    "src/interfaces/IProcessedStyle.ts": "0bb6509b649520f20ed649d0d6ee1139e3b885c1",
-    "src/interfaces/IRawStyle.ts": "c9deea151cdf71a965df292994b12ddd7c8ebef8",
-    "src/interfaces/IStyle.ts": "2c0e150a62c06a4321399b27a8e99926ef8030d1",
-    "src/interfaces/ISwatch.ts": "6d212a81025c20e9b407e73706c4163fac8c334d",
-    "src/interfaces/ISwatchSet.ts": "70bcaf9b3358dafed3fafe1d54b4d708d135988a",
-    "src/interfaces/index.ts": "95f9a01bdda572f428bc8357b268b69555122d57",
-    "src/office-ui-styling.manifest.json": "492d48e60542c3a9b73a7f587b67872582b17823",
-    "src/styles/AnimationStyles.ts": "968541748f5b0fecf0000abcf4483d54828b7437",
-    "src/styles/DefaultFontStyles.ts": "bf8e88b440bb25885088027e319273a5114f4129",
-    "src/styles/DefaultPalette.ts": "6609542e9754a39f6b66efb3f66721910a882152",
-    "src/styles/IconCodes.ts": "3dceecc066f875df4391a6c16fde57eb60d1d426",
-    "src/styles/getFocusStyle.ts": "63acf529b0cfcf1c63a43c5bd03d5f351b421863",
-    "src/styles/index.ts": "e333bc0034c1e16e6fbbc0ff3ae5da9971c91daa",
-    "src/utilities/buildClassMap.ts": "d2533b04d00fb42696a03f72ea52760b04e852dd",
-    "src/utilities/index.ts": "21ae1b21fae7d499df07db307bd5619b97612796",
-    "src/utilities/mergeStyleSets.ts": "4e7513bcc5ea33c214bf4adf82ce05bdb88d5e6d",
-    "src/utilities/mergeStyles.ts": "bd4715df8b08aa0cf93f3630288bb159673b3cf6",
-    "src/utilities/theme.ts": "9bf7885a150fe7079bb696bf3f4e5bafb7bd5c8e",
-    "tsconfig.json": "712011363426ab3130f53eaf1eaba353eb0e0525",
-    "tslint.json": "688eda0e627a412f0c80c2fa9d4fbe0209947290",
-    "webpack.config.js": "d48d7a99462ef96182f79e02c4d5389a69391b89",
-    "webpack.serve.config.js": "19fb33194a9347825d5cdea1d40ba332b4cbf593"
-  }
-}
+    "packages/styling/CHANGELOG.json": "ebfc4208353d40c4ab65d1119557362c84b01a55",
+    "packages/styling/CHANGELOG.md": "a4f9596629357bfbe6fa2aac8729fb5d0ebbbf41",
+    "packages/styling/README.md": "793b76a8d1e8ba29a382526c492972beea3dc535",
+    "packages/styling/config/api-extractor.json": "9c294e8c13388f8d28d5aa10408fc68cf74723be",
+    "packages/styling/config/config.json": "d990b8ffcecad293928fadc77f7e540d149bb988",
+    "packages/styling/config/write-manifests.json": "fbc0f10a4498cc7e62fff9403752968c7ff67229",
+    "packages/styling/gulpfile.js": "aa84b07cb5d216669d4aa7c4571cadc047a74356",
+    "packages/styling/index.html": "df2218fe1ab9aa3e7b2208487831f853308c9623",
+    "packages/styling/package.json": "d78c3753793e22ef25277e1170003c7a8ecf5a76",
+    "packages/styling/src/classNames/AnimationClassNames.ts": "1b073c8ebeedeb817255ba6249fb1ad0cec5e37f",
+    "packages/styling/src/classNames/ColorClassNames.ts": "64c3d578a59208d7baf844663b61737fab24599f",
+    "packages/styling/src/classNames/FontClassNames.ts": "33271749723b99c595c24c70c29660ad561837fa",
+    "packages/styling/src/classNames/IconClassNames.ts": "1a518c4527ba96178719981ed59b0373c008f520",
+    "packages/styling/src/classNames/index.ts": "d6b1d2298168ab519fe23347d535cc78c0aa8832",
+    "packages/styling/src/common/tests.js": "3a716c9dd52dadb730f380d214ea9cf49acd39f8",
+    "packages/styling/src/examples/AnimationPage/AnimationPage.styles.ts": "fe21c21433112e05726c4648fb374cc6dca726b7",
+    "packages/styling/src/examples/AnimationPage/AnimationPage.tsx": "55a9678c60e13f7439a139cb723030ab252699f1",
+    "packages/styling/src/examples/AnimationTile/AnimationTile.styles.ts": "733c5592d9c81884dffc1d0c5ab2f8b0efb06f47",
+    "packages/styling/src/examples/AnimationTile/AnimationTile.tsx": "d38dc9f48615a74ae55ed2aed461b1d9dce1c1b7",
+    "packages/styling/src/examples/ColorPage/ColorPage.styles.ts": "957eaa6273f7c5efd0740f5220ed1fc2af8ed03c",
+    "packages/styling/src/examples/ColorPage/ColorPage.tsx": "d90b62af37dc48b5b69ae5194b244cc70ecf1239",
+    "packages/styling/src/examples/FontPage/FontPage.styles.ts": "394383d87ae0ec27966311940bd227799ad34dba",
+    "packages/styling/src/examples/FontPage/FontPage.tsx": "5ae98688373a279f764dbade3bc2a59b7b298491",
+    "packages/styling/src/examples/IconPage/IconPage.styles.ts": "2d7e54bfb4dd050a0f890741f69e4e9741574ad5",
+    "packages/styling/src/examples/IconPage/IconPage.tsx": "c8ac72e2d81224b606780c089ff7b5e122516b04",
+    "packages/styling/src/examples/IconTile/IconTile.styles.ts": "ed061abc3a33ea8c0eda10644a91b7e9e984677e",
+    "packages/styling/src/examples/IconTile/IconTile.tsx": "587d2ec8fda92a75c642154fd6703314d9d77a33",
+    "packages/styling/src/examples/Page/Page.styles.ts": "deea7962ad3a7b43087e684bcfec9f8ad8627679",
+    "packages/styling/src/examples/Page/Page.tsx": "1e35abe96d1d453a5c95d61e9dab5a15d59ab1c2",
+    "packages/styling/src/examples/PageHeader/PageHeader.styles.ts": "aefd7d81c2abb044b594dc4e8c3c8b28998a8441",
+    "packages/styling/src/examples/PageHeader/PageHeader.tsx": "de749409903e1bcb9150752ebbb6fe46be185c23",
+    "packages/styling/src/glamorExports.ts": "978d6cfa950155caa6d1947e21512ecb0f18693d",
+    "packages/styling/src/index.demo.tsx": "9dabca304becf5553861d4db5d24c1fcae6e6f00",
+    "packages/styling/src/index.ts": "7504ad8c76fe49eccf7170930850538f31814314",
+    "packages/styling/src/interfaces/IAnimationStyles.ts": "edc39d6fafd02dc44c803e9d632212c70f119b8f",
+    "packages/styling/src/interfaces/IFontStyles.ts": "4c6ddb9343ae8d20b34bda044bd557ee5fe9f677",
+    "packages/styling/src/interfaces/IPalette.ts": "73dc4e77fc4a27c8810d7f9eca2119b1812d601f",
+    "packages/styling/src/interfaces/IProcessedStyle.ts": "0bb6509b649520f20ed649d0d6ee1139e3b885c1",
+    "packages/styling/src/interfaces/IRawStyle.ts": "c9deea151cdf71a965df292994b12ddd7c8ebef8",
+    "packages/styling/src/interfaces/ISemanticColors.ts": "8695b135e71daf959279e26cb21eae106753b364",
+    "packages/styling/src/interfaces/IStyle.ts": "86f57812b8c693b6fa13d3290d9c8607dbd5369e",
+    "packages/styling/src/interfaces/ISwatch.ts": "6d212a81025c20e9b407e73706c4163fac8c334d",
+    "packages/styling/src/interfaces/ISwatchSet.ts": "70bcaf9b3358dafed3fafe1d54b4d708d135988a",
+    "packages/styling/src/interfaces/index.ts": "6dbc8c420ce68186ead09573fe2f0fe5a159da6c",
+    "packages/styling/src/office-ui-styling.manifest.json": "492d48e60542c3a9b73a7f587b67872582b17823",
+    "packages/styling/src/styles/AnimationStyles.ts": "968541748f5b0fecf0000abcf4483d54828b7437",
+    "packages/styling/src/styles/DefaultFontStyles.ts": "69a296e143e202d6ac779138ea84096d668b7e0a",
+    "packages/styling/src/styles/DefaultPalette.ts": "68adf43165d029a3505b8ace2350ac428e781345",
+    "packages/styling/src/styles/IconCodes.ts": "1461a370e495b78c2815a2afc53c6ed85e183583",
+    "packages/styling/src/styles/getFocusStyle.ts": "63acf529b0cfcf1c63a43c5bd03d5f351b421863",
+    "packages/styling/src/styles/index.ts": "e333bc0034c1e16e6fbbc0ff3ae5da9971c91daa",
+    "packages/styling/src/utilities/buildClassMap.ts": "d2533b04d00fb42696a03f72ea52760b04e852dd",
+    "packages/styling/src/utilities/index.ts": "21ae1b21fae7d499df07db307bd5619b97612796",
+    "packages/styling/src/utilities/mergeStyleSets.ts": "402fd710d034481fc6e75d65fe523384d0614cf5",
+    "packages/styling/src/utilities/mergeStyles.ts": "869648ac51e6ca2ae2f7c23e34c606c430d625c6",
+    "packages/styling/src/utilities/theme.ts": "a3f10c53f6eddc05018b3d7c55a8d71b278ff7e3",
+    "packages/styling/tsconfig.json": "712011363426ab3130f53eaf1eaba353eb0e0525",
+    "packages/styling/tslint.json": "621ee6ba046052113aa7042fb5bb5323594253ff",
+    "packages/styling/webpack.config.js": "d48d7a99462ef96182f79e02c4d5389a69391b89",
+    "packages/styling/webpack.serve.config.js": "19fb33194a9347825d5cdea1d40ba332b4cbf593",
+    ".github/ISSUE_TEMPLATE.md": "c59dd238310369cd98ec5a798d604bf938cee571",
+    ".github/PULL_REQUEST_TEMPLATE.md": "96596ef25f373002c178b2f2056fb168330d243a",
+    ".gitignore": "f44f968874ef5cd70b35ec116dec40877d286521",
+    ".npmrc": "825c83e09df4dad076d980d1236c532d689edf75",
+    ".travis.yml": "f03070e42cf275afd77b06260790215415ced1e8",
+    ".vscode/launch.json": "43d411bfaede0d6857676339f267e6443724887e",
+    ".vscode/settings.json": "ed39f2d27033f522f08c3bc0d4ac061234e728d4",
+    ".vscode/tasks.json": "cb4569a49b2bd30f3fff5ddd372e4750373e1777",
+    "LICENSE": "89c5566229c8c068352723c7081409806949fd83",
+    "README.md": "558795d769ab5371e3337abe9fa27ba9e42e43e1",
+    "apps/component-demo/gulpfile.js": "c2007dcf9e0875cd61ea5a180076f0623176b6bf",
+    "apps/component-demo/index.html": "65d95ddc6ccb1d87c77045a1b5f629b19d1af9e4",
+    "apps/component-demo/package.json": "9fe1f79da7af767c49d8d2f494d4341456b97f1f",
+    "apps/component-demo/src/index.tsx": "c09ed6f9d014f3a307daf5377efe4ebda89c9437",
+    "apps/component-demo/tsconfig.json": "f287ad2753ab5b2521c3a82c39bfbbbdb56f6b2b",
+    "apps/component-demo/tsd.json": "a912a39c8c9c912991a0739dc884881cfe292209",
+    "apps/component-demo/webpack.config.js": "3fb1f0a32ca1a71376b0261bd16dd3cc7b298c52",
+    "common/changes/beta-core-6_2017-04-24-19-30.json": "bda762b60a0ce05b162b6a0c5b3c1b6adf72975b",
+    "common/changes/detailsList-initialFocusedIndexOnMountedRows_2017-05-23-06-30.json": "aa68bc39d3d8cf08f1c1309ee21d07fc679e6dc1",
+    "common/changes/groupedDetailsListSelectionFixes_2017-05-18-14-34.json": "1b8a656c1aef5a8bb59a9647c040bab4e2104852",
+    "common/changes/introduce-prop-types_2017-05-23-04-28.json": "72e8e70b89d06edc6461e146444df7d59daed463",
+    "common/changes/joem-textfield-add-setSelectRange_2017-05-18-21-16.json": "0fbd6def72719b9a0bfc21fe15550025a8d0496d",
+    "common/changes/listimprovements_2017-05-25-23-31.json": "422a94faa0a90518eadf66ceec053f88aba55688",
+    "common/changes/resizegroup-optimize-shrink_2017-05-26-21-04.json": "3be096ea38bc2d9eb641a0ef447022dab724ff7f",
+    "common/changes/styling-updates_2017-05-27-00-02.json": "228334a892b42602ddc7c2caaeb07d42f913cf01",
+    "common/config/rush/npm-shrinkwrap.json": "90ef2722f8972efb7e91012705a30215d35d11a3",
+    "common/config/rush/pinned-versions.json": "ad579bbec3fc5818c68c3783d63231ae9da5091a",
+    "ghdocs/ADVANCED.md": "f0558f5f4dac03666dcd181cadc97a821c368afe",
+    "ghdocs/BESTPRACTICES.md": "bb52e61eab4da0e401d2e3343568d0fdddc4f40f",
+    "ghdocs/BROWSERSUPPORT.md": "cf38610e54e63c769ed3fd773e8189ba2dfc83cc",
+    "ghdocs/CONTRIBUTING.md": "a2ab1d7bfd15eb41c6b7c3f53f076db45d63d62b",
+    "ghdocs/README.md": "265018b9cb75a9e2a4d81c955bed483e8cd97aaa",
+    "ghdocs/TESTING.md": "1a8dcbebb800564d980a5be4ecda8f60f22274a7",
+    "ghdocs/VISUALTESTS.md": "5d3d398af3081e3aa5f219b3413c2a657f4b94de",
+    "ghdocs/images/avatarkat.png": "3ece38e5cdaa6357c30bc29025df5fbf230cf8e1",
+    "ghdocs/images/create-react-app-created.png": "53f28a791e589c168b0f3d65f062e1cb8fe79af6",
+    "ghdocs/images/create-react-app-preview.png": "85ea1c96b42eb24c5d8441271f3fab8423cd0cfb",
+    "ghdocs/images/documentpreview.png": "cd5d1288832136918672725b7d5a392b0f863f53",
+    "ghdocs/images/iconppt.png": "b06e55ddc1bd253aaf6d5c1a11999b7526c1537f",
+    "ghdocs/images/react-app-doccard-preview.png": "145b51b25df0f9ea1615c5b51d8919f25f84ddd6",
+    "package-lock.json": "e7573fca226845d3e329e45d916e23a464f3eff6",
+    "package.json": "28ebb32f0eeecdca9df35beed19490817ec61e53",
+    "rush.json": "44266d69d03ac41b4133ab41dabf4e2a7119df12",
+    "scripts/selective-build.js": "673d137e7321bd9e9fc1ec39c04691aec2155850",
+    "scripts/updateReleaseNotes.js": "5f4c0f2cfa771bec72778134bc725846bb369dff"
+  },
+  "arguments": "D:\\agents\\1\\_work\\22\\s\\common\\temp\\node_modules\\.bin\\gulp --color --production"
+}

package.json

 {
   "name": "@uifabric/styling",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Defines the core Office UI Fabric styles through a JavaScript interface.",
@@ -19,4 +19,4 @@ "main": "lib/index.js",
     "@types/mocha": "^2.2.39",
-    "@types/react": "^15.0.16",
-    "@types/react-addons-test-utils": "^0.14.17",
+    "@types/react": "^15.0.25",
+    "@types/react-addons-test-utils": "^0.14.18",
     "@types/react-dom": "^15.5.0",
@@ -27,3 +27,4 @@ "@types/webpack-env": "^1.13.0",
     "enzyme": "^2.7.0",
-    "es6-promise": "4.1.0",
+    "es6-promise": "^4.1.0",
+    "es6-weak-map": "^2.0.2",
     "gulp": "~3.9.1",
@@ -33,2 +34,3 @@ "mocha": "^3.2.0",
     "office-ui-fabric-react": ">=2.11.0-0 <3.0.0-0",
+    "office-ui-fabric-react-tslint": ">=1.0.0 <2.0.0",
     "react": "^15.4.2",
@@ -38,3 +40,3 @@ "react-addons-test-utils": "^15.4.2",
     "source-map-loader": "^0.2.1",
-    "ts-loader": "^2.0.1",
+    "ts-loader": "^2.1.0",
     "tslib": "^1.6.0",
@@ -50,3 +52,3 @@ "typescript": "2.2.2",
   "dependencies": {
-    "@uifabric/utilities": ">=1.9.0 <2.0.0",
+    "@uifabric/utilities": ">=4.0.0 <5.0.0",
     "glamor": "^2.20.24",
@@ -53,0 +55,0 @@ "rtl-css-js": "^1.1.0"

src/glamorExports.ts

@@ -12,3 +12,4 @@ import * as Glamor from 'glamor';
 // force speedy.
-// Glamor['speedy'](true);
+// tslint:disable-next-line:no-string-literal
+Glamor['speedy'](true);
 
@@ -15,0 +16,0 @@ // tslint:disable-next-line:no-string-literal

src/interfaces/index.ts

@@ -6,2 +6,3 @@ export { IProcessedStyle } from './IProcessedStyle';
 export { IPalette } from './IPalette';
+export { ISemanticColors } from './ISemanticColors';
 export { IFontStyles } from './IFontStyles';

src/interfaces/IPalette.ts

@@ -81,7 +81,2 @@ /**
   /**
-   * Color code for neutralSecondaryAlt.
-   */
-  neutralSecondaryAlt?: string;
-
-  /**
    * Color code for neutralTertiary.
@@ -88,0 +83,0 @@ */

src/interfaces/IStyle.ts

 import { IProcessedStyle } from './IProcessedStyle';
+import { IRawStyle } from './IRawStyle';
 
 /**
- * A style entry which can be represented as a string class name, a raw style object, or a processed style
+ * A style entry which can be represented as a string class name or a processed style
  * object. This is the type returned from mergeStyles utility.
  */
-export type IStyle = string | IProcessedStyle;
+export type IStyle = IRawStyle | IProcessedStyle | (IRawStyle | IProcessedStyle)[];

src/styles/DefaultFontStyles.ts

 import { IFontStyles, IRawStyle } from '../interfaces/index';
 import { fontFace } from '../glamorExports';
+import {
+  getLanguage
+} from '@uifabric/utilities/lib/index';
 
-const FONT_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean';
-const ICON_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets/icons';
+// Default urls.
+const DefaultFontUrl = 'https://static2.sharepointonline.com/files/fabric/assets/fonts';
+const DefaultIconUrl = 'https://static2.sharepointonline.com/files/fabric/assets/icons';
 
-const SYSTEM_BASE = '"Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif';
-const FAMILY_BASE = '"Segoe UI WestEuropean", ' + SYSTEM_BASE;
+// Fallback fonts, if specified system or web fonts are unavailable.
+const FontFamilyFallbacks = `-apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif`;
 
+// Font face names to be registered.
+const FontNameArabic = 'Segoe UI Web (Arabic)';
+const FontNameCyrillic = 'Segoe UI Web (Cyrillic)';
+const FontNameEastEuropean = 'Segoe UI Web (East European)';
+const FontNameGreek = 'Segoe UI Web (Greek)';
+const FontNameHebrew = 'Segoe UI Web (Hebrew)';
+const FontNameThai = 'Leelawadee UI Web';
+const FontNameVietnamese = 'Segoe UI Web (Vietnamese)';
+const FontNameWestEuropean = 'Segoe UI Web (West European)';
+const FontNameSelawik = 'Selawik Web';
+
+// Font families with fallbacks, for the general regions.
+const FontFamilyArabic = `'${FontNameArabic}'`;
+const FontFamilyChineseSimplified = `'Microsoft Yahei', Verdana, Simsun`;
+const FontFamilyChineseTraditional = `'Microsoft Jhenghei', Pmingliu`;
+const FontFamilyCyrillic = `'${FontNameCyrillic}'`;
+const FontFamilyEastEuropean = `'${FontNameEastEuropean}'`;
+const FontFamilyGreek = `'${FontNameGreek}'`;
+const FontFamilyHebrew = `'${FontNameHebrew}'`;
+const FontFamilyHindi = `'Nirmala UI'`;
+const FontFamilyJapanese = `'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka`;
+const FontFamilyKorean = `'Malgun Gothic', Gulim`;
+const FontFamilySelawik = `'${FontNameSelawik}'`;
+const FontFamilyThai = `'Leelawadee UI Web', 'Kmer UI'`;
+const FontFamilyVietnamese = `'${FontNameVietnamese}'`;
+const FontFamilyWestEuropean = `'${FontNameWestEuropean}'`;
+
+// Mapping of language prefix to to font family.
+const LanguageToFontMap = {
+  'ar': FontFamilyArabic,
+  'bg': FontFamilyCyrillic,
+  'cs': FontFamilyEastEuropean,
+  'el': FontFamilyGreek,
+  'et': FontFamilyEastEuropean,
+  'he': FontFamilyHebrew,
+  'hi': FontFamilyHindi,
+  'hr': FontFamilyEastEuropean,
+  'hu': FontFamilyEastEuropean,
+  'ja': FontFamilyJapanese,
+  'kk': FontFamilyEastEuropean,
+  'ko': FontFamilyKorean,
+  'lt': FontFamilyEastEuropean,
+  'lv': FontFamilyEastEuropean,
+  'pl': FontFamilyEastEuropean,
+  'ru': FontFamilyCyrillic,
+  'sk': FontFamilyEastEuropean,
+  'sr-latn': FontFamilyEastEuropean,
+  'th': FontFamilyThai,
+  'tr': FontFamilyEastEuropean,
+  'uk': FontFamilyCyrillic,
+  'vi': FontFamilyVietnamese,
+  'zh-hans': FontFamilyChineseSimplified,
+  'zh-hant': FontFamilyChineseTraditional,
+};
+
+// Standard font sizes.
 export namespace FontSizes {
@@ -25,2 +85,3 @@ export const mini = '10px';
 
+// Standard font weights.
 export namespace FontWeights {
@@ -34,2 +95,3 @@ export const light = 100;
 
+// Standard font styling.
 export const DefaultFontStyles: IFontStyles = {
@@ -54,6 +116,22 @@ tiny: _createFont(FontSizes.mini, FontWeights.semibold),
 
+function _getFontFamily(): string {
+  let language = getLanguage();
+  let fontFamily = FontFamilyWestEuropean;
+
+  for (let lang in LanguageToFontMap) {
+    if (LanguageToFontMap.hasOwnProperty(lang) && lang.indexOf(language) === 0) {
+      fontFamily = LanguageToFontMap[lang];
+      break;
+    }
+  }
+
+  return `${fontFamily}, ${FontFamilyFallbacks}`;
+}
+
 function _createFont(size: string, weight: number): IRawStyle {
   return {
-    fontFamily: FAMILY_BASE,
-    WebkitFontSmoothing: 'antialiased',
+    fontFamily: _getFontFamily(),
+    '-moz-osx-font-smoothing': 'grayscale',
+    '-ms-high-contrast-adjust': 'none',
+    '-webkit-font-smoothing': 'antialiased',
     fontSize: size,
@@ -66,14 +144,12 @@ fontWeight: weight
   fontFamily: string,
-  fontName: string,
-  baseUrl: string,
-  fontFileName: string,
-  fontWeight: number
+  url: string,
+  fontWeight?: number
 ): void {
+  fontFamily = `'${fontFamily}'`;
+
   fontFace({
     fontFamily,
     src:
-    `local('${fontName}'),` +
-    `url('${baseUrl}/${fontFileName}.woff2') format('woff2'),` +
-    `url('${baseUrl}/${fontFileName}.woff') format('woff'),` +
-    `url('${baseUrl}/${fontFileName}.ttf') format('truetype')`,
+    `url('${url}.woff2') format('woff2'),` +
+    `url('${url}.woff') format('woff')`,
     fontWeight,
@@ -84,52 +160,38 @@ fontStyle: 'normal'
 
-[
-  'Arabic',
-  'Cyrillic',
-  'EastEuropean',
-  'Greek',
-  'Hebrew',
-  'Vietnamese',
-  'WestEuropean'
-].forEach((language: string) => {
+function _registerFontFaceSet(
+  fontFamily: string,
+  cdnFolder: string,
+  cdnFontName: string = 'segoeui'
+): void {
+  const urlBase = `${DefaultFontUrl}/${cdnFolder}/${cdnFontName}`;
 
-  _registerFontFace(
-    `'Segoe UI${language ? ' ' + language : ''}'`,
-    'Segoe UI Light',
-    FONT_BASE_URL,
-    'segoeui-light',
-    FontWeights.light
-  );
+  _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light);
+  _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight);
+  _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular);
+  _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold);
+}
 
-  _registerFontFace(
-    `'Segoe UI${language ? ' ' + language : ''}'`,
-    'Segoe UI Semilight',
-    FONT_BASE_URL,
-    'segoeui-semilight',
-    200
-  );
+function _registerDefaultFontFaces(): void {
+  // Produce @font-face definitions for all supported web fonts.
+  _registerFontFaceSet(FontNameThai, 'leelawadeeui-thai', 'leelawadeeui');
+  _registerFontFaceSet(FontNameArabic, 'segoeui-arabic');
+  _registerFontFaceSet(FontNameCyrillic, 'segoeui-cyrillic');
+  _registerFontFaceSet(FontNameEastEuropean, 'segoeui-easteuropean');
+  _registerFontFaceSet(FontNameGreek, 'segoeui-greek');
+  _registerFontFaceSet(FontNameHebrew, 'segoeui-hebrew');
+  _registerFontFaceSet(FontNameVietnamese, 'segoeui-vietnamese');
+  _registerFontFaceSet(FontNameWestEuropean, 'segoeui-westeuropean');
+  _registerFontFaceSet(FontFamilySelawik, 'selawik', 'selawik');
 
-  _registerFontFace(
-    `'Segoe UI${language ? ' ' + language : ''}'`,
-    'Segoe UI',
-    FONT_BASE_URL,
-    'segoeui-regular',
-    FontWeights.regular
-  );
+  // Leelawadee UI (Thai) does not have a 'light' weight, so we override
+  // the font-face generated above to use the 'semilight' weight instead.
+  _registerFontFace('Leelawadee UI Web', `${DefaultFontUrl}/leelawadeeui-thai/leelawadeeui-semilight`, FontWeights.light);
 
-  _registerFontFace(
-    `'Segoe UI${language ? ' ' + language : ''}'`,
-    'Segoe UI Semibold',
-    FONT_BASE_URL,
-    'segoeui-semibold',
-    FontWeights.semibold
-  );
-});
+  // Leelawadee UI (Thai) does not have a 'semibold' weight, so we override
+  // the font-face generated above to use the 'bold' weight instead.
+  _registerFontFace('Leelawadee UI Web', `${DefaultFontUrl}/leelawadeeui-thai/leelawadeeui-bold`, FontWeights.semibold);
 
-// Icon font
-_registerFontFace(
-  'FabricMDL2Icons',
-  'FabricMDL2Icons',
-  ICON_BASE_URL,
-  'fabricmdl2icons',
-  FontWeights.regular
-);
+  _registerFontFace('FabricMDL2Icons', DefaultIconUrl + '/fabricmdl2icons', FontWeights.regular);
+}
+
+_registerDefaultFontFaces();

src/styles/DefaultPalette.ts

@@ -19,3 +19,2 @@ import { IPalette } from '../interfaces/index';
   neutralSecondary: '#666666',
-  neutralSecondaryAlt: '#767676',
   neutralTertiary: '#a6a6a6',
@@ -22,0 +21,0 @@ neutralTertiaryAlt: '#c8c8c8',

src/styles/IconCodes.ts

@@ -685,3 +685,3 @@ export const IconCodes = {
    */
-  compassNw: '\uE942',
+  compassNW: '\uE942',
   /**
@@ -688,0 +688,0 @@ * Icon code with the value '\uE930'.

src/utilities/mergeStyles.ts

 import { css, Rule } from 'glamor';
-import { IStyle, IRawStyle } from '../interfaces/index';
+import { IStyle, IProcessedStyle } from '../interfaces/index';
 
-export function mergeStyles(...args: (IStyle | IRawStyle)[]): IStyle {
+/**
+ * Takes a collection of collection of styles, defined in various formats, and compresses them into
+ * a single thing of one format to return.
+ * If any class names (strings) are passed in, it will return a list of space-separated class names,
+ * using glamor to generate a class name for all passed in style objects.
+ * Otherwise, all style objects passed in will be compressed into a single IProcessedStyle.
+ *
+ * @export
+ * @param {(...(IStyle | string)[])} args
+ * @returns {IStyle}
+ */
+export function mergeStyles(...args: (IStyle | string)[]): IProcessedStyle | string {
   const classes: string[] = [];
   const rules: Rule[] = [];
 
-  for (const arg of args) {
-    if (arg) {
-      if (typeof arg === 'string') {
-        classes.push(arg);
-      } else {
-        rules.push(arg as Rule);
+  function _parseArgs(theArgs: (IStyle | string)[]): void {
+    for (const arg of theArgs) {
+      if (arg) {
+        if (typeof arg === 'string') {
+          classes.push(arg);
+        } else if (Array.isArray(arg)) {
+          _parseArgs(arg);
+        } else {
+          rules.push(arg as Rule);
+        }
       }
@@ -18,2 +33,4 @@ }
 
+  _parseArgs(args);
+
   const rulesObject: IStyle = rules.length ? css(...rules) : null;
@@ -20,0 +37,0 @@

src/utilities/mergeStyleSets.ts

 import { mergeStyles } from './mergeStyles';
 
+/**
+ * Merges a give set of styles by running mergeStyles for each unique key. Works
+ * like Object.assign in that it layers them in the argument order specified, but will
+ * not mutate them and will return the merged result.
+ */
 export function mergeStyleSets<T>(...args: T[]): T {
   const mergedRules: T = {} as T;
-  let ruleToMerge: Object = args[0];
+  const setStyles = {};
 
-  for (let prop in ruleToMerge) {
-    if (ruleToMerge.hasOwnProperty(prop)) {
-      let allArgs: Object[] = [];
-      for (let i = 0; i < args.length; i++) {
-        let currentArg: Object = args[i];
+  args.forEach((arg: T) => arg && Object.keys(arg).forEach((key: string) => {
+    if (!setStyles[key]) {
+      setStyles[key] = [];
+    }
+    setStyles[key].push(arg[key]);
+  }));
 
-        if (currentArg && currentArg[prop]) {
-          allArgs.push(currentArg[prop]);
-        }
-      }
-      mergedRules[prop] = mergeStyles(...allArgs);
-    }
-  }
+  Object.keys(setStyles).forEach((key: string) => {
+    mergedRules[key] = mergeStyles(setStyles[key]);
+  });
+
   return mergedRules;
 }

src/utilities/theme.ts

 import * as assign from 'object-assign';
 import {
   IPalette,
-  IFontStyles
+  IFontStyles,
+  ISemanticColors
 } from '../interfaces/index';
@@ -14,2 +15,3 @@ import {
   fonts: IFontStyles;
+  semanticColors: ISemanticColors;
 }
@@ -19,2 +21,3 @@
   palette: DefaultPalette,
+  semanticColors: _makeSemanticColorsFromPalette(DefaultPalette),
   fonts: DefaultFontStyles
@@ -35,3 +38,29 @@ };
   _theme.palette = assign({}, _theme.palette, theme.palette);
+  _theme.semanticColors = assign({}, _makeSemanticColorsFromPalette(_theme.palette), theme.semanticColors);
   _theme.fonts = assign({}, _theme.fonts, theme.fonts);
 }
+
+// Generates all the semantic slot colors based on the Fabric palette.
+// We'll use these as fallbacks for semantic slots that the passed in theme did not define.
+function _makeSemanticColorsFromPalette(p: IPalette): ISemanticColors {
+  return {
+    bodyBackground: p.white,
+    bodyText: p.neutralPrimary,
+    bodySubtext: p.neutralSecondary,
+
+    disabledBackground: p.neutralLighter,
+    disabledText: p.neutralTertiaryAlt,
+    disabledSubtext: p.neutralQuaternary,
+
+    focusBorder: p.black,
+
+    // errorBackground: todo,
+    errorText: p.redDark,
+
+    inputBorder: p.neutralTertiary,
+    inputBorderHovered: p.neutralPrimary,
+    inputBackgroundSelected: p.themePrimary,
+    inputBackgroundSelectedHovered: p.themeDarkAlt,
+    inputForegroundSelected: p.white
+  };
+}

temp/manifests.js

@@ -1534,3 +1534,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    "componentType": "Library",
-	    "version": "0.1.0",
+	    "version": "0.2.0",
 	    "manifestVersion": 2,
@@ -1537,0 +1537,0 @@ "loaderConfig": {

temp/manifests.json

@@ -6,3 +6,3 @@ [
     "componentType": "Library",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "manifestVersion": 2,
@@ -9,0 +9,0 @@ "loaderConfig": {

temp/tslint.json

@@ -64,3 +64,5 @@ {
     "no-unused-expression": true,
-    "no-unused-imports": true,
+    "no-unused-imports": [
+      true
+    ],
     "no-use-before-declare": true,
@@ -67,0 +69,0 @@ "no-with-statement": true,

tslint.json

 {
   "extends": [
-    "../../tslint.json"
+    "office-ui-fabric-react-tslint"
   ],
   "rules": {}
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2282078

increased by10.27%

Number of package files

206

increased by3%

Lines of code

17008

increased by6.58%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

33

increased by6.45%

Dependency changes

• + Added@microsoft/load-themed-styles@1.10.295(transitive)

• + Added@uifabric/utilities@4.16.0(transitive)

• + Addedtslib@1.14.1(transitive)

• - Removed@uifabric/utilities@1.10.4(transitive)

• Updated@uifabric/utilities@>=4.0.0 <5.0.0