@fluentui/react-theme - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.json

@@ -5,6 +5,42 @@ {
     {
-      "date": "Tue, 02 Feb 2021 12:19:33 GMT",
+      "date": "Mon, 08 Feb 2021 12:21:40 GMT",
+      "tag": "@fluentui/react-theme_v0.3.0",
+      "version": "0.3.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Update converged theme shape",
+            "author": "[e-mail]",
+            "commit": "bca3d0d79accb3675bf3dfd49c0297e646b91d2c",
+            "package": "@fluentui/react-theme"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Feb 2021 05:51:40 GMT",
       "tag": "@fluentui/react-theme_v0.2.0",
       "version": "0.2.0",
       "comments": {
+        "none": [
+          {
+            "comment": "add missing Jest config",
+            "author": "[e-mail]",
+            "commit": "e68a6c887cbc45ddb111b6a0c3c8a21ab4a17256",
+            "package": "@fluentui/react-theme"
+          },
+          {
+            "comment": "Remove .npmrc files except at root",
+            "author": "[e-mail]",
+            "commit": "c688ee2ea6f192c4874974ebf11598523ccf6db9",
+            "package": "@fluentui/react-theme"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 02 Feb 2021 12:21:54 GMT",
+      "tag": "@fluentui/react-theme_v0.2.0",
+      "version": "0.2.0",
+      "comments": {
         "minor": [
@@ -11,0 +47,0 @@ {

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Tue, 02 Feb 2021 12:19:33 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Feb 2021 12:21:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.3.0)
+
+Mon, 08 Feb 2021 12:21:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.2.0..@fluentui/react-theme_v0.3.0)
+
+### Minor changes
+
+- Update converged theme shape ([PR #16844](https://github.com/microsoft/fluentui/pull/16844) by [e-mail])
+
 ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.2.0)
 
-Tue, 02 Feb 2021 12:19:33 GMT
+Tue, 02 Feb 2021 12:21:54 GMT
 
@@ -11,0 +20,0 @@ ### Minor changes

lib-amd/global/borderRadius.js

@@ -5,7 +5,7 @@ define(["require", "exports"], function (require, exports) {
     exports.borderRadius = {
-        none: 0,
-        small: 2,
-        medium: 4,
-        large: 6,
-        xLarge: 8,
+        none: '0',
+        small: '2px',
+        medium: '4px',
+        large: '6px',
+        xLarge: '8px',
         circular: '50%',
@@ -12,0 +12,0 @@ };

lib-amd/global/colors.js

@@ -322,3 +322,3 @@ define(["require", "exports"], function (require, exports) {
     };
-    var forrest = {
+    var forest = {
         shade50: '#0C1501',
@@ -407,2 +407,16 @@ shade40: '#162702',
     };
+    var teal = {
+        shade50: '#001516',
+        shade40: '#012729',
+        shade30: '#02494C',
+        shade20: '#026367',
+        shade10: '#02767A',
+        primary: '#038387',
+        tint10: '#159196',
+        tint20: '#2AA0A4',
+        tint30: '#4BB4B7',
+        tint40: '#9BD9DB',
+        tint50: '#C7EBEC',
+        tint60: '#F0FAFA',
+    };
     var darkTeal = {
@@ -790,3 +804,3 @@ shade50: '#001010',
         lime: lime,
-        forrest: forrest,
+        forest: forest,
         seafoam: seafoam,
@@ -797,2 +811,3 @@ lightGreen: lightGreen,
         lightTeal: lightTeal,
+        teal: teal,
         darkTeal: darkTeal,
@@ -799,0 +814,0 @@ cyan: cyan,

lib-amd/global/fonts.d.ts

@@ -1,2 +0,2 @@
-import { FontFamilies, FontSizes, FontWeights, LineHeights } from '../types';
+import { FontFamilies, FontSizes, FontWeights, LineHeights, TextAlignments } from '../types';
 export declare const fontSizes: FontSizes;
@@ -6,1 +6,2 @@ export declare const lineHeights: LineHeights;
 export declare const fontFamilies: FontFamilies;
+export declare const textAlignments: TextAlignments;

lib-amd/global/fonts.js

@@ -6,14 +6,14 @@ define(["require", "exports"], function (require, exports) {
         base: {
-            100: 10,
-            200: 12,
-            300: 14,
-            400: 16,
-            500: 20,
-            600: 24,
+            100: '10px',
+            200: '12px',
+            300: '14px',
+            400: '16px',
+            500: '20px',
+            600: '24px',
         },
         hero: {
-            700: 28,
-            800: 32,
-            900: 40,
-            1000: 68,
+            700: '28px',
+            800: '32px',
+            900: '40px',
+            1000: '68px',
         },
@@ -23,14 +23,14 @@ };
         base: {
-            100: 14,
-            200: 16,
-            300: 20,
-            400: 22,
-            500: 28,
-            600: 32,
+            100: '14px',
+            200: '16px',
+            300: '20px',
+            400: '22px',
+            500: '28px',
+            600: '32px',
         },
         hero: {
-            700: 36,
-            800: 40,
-            900: 52,
-            1000: 92,
+            700: '36px',
+            800: '40px',
+            900: '52px',
+            1000: '92px',
         },
@@ -43,9 +43,18 @@ };
     };
-    // TODO find asset urls
     exports.fontFamilies = {
-        base: '',
-        monospace: '',
-        numeric: '',
+        base: 
+        // eslint-disable-next-line @fluentui/max-len
+        "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+        monospace: "Consolas, 'Courier New', Courier, monospace",
+        numeric: 
+        // eslint-disable-next-line @fluentui/max-len
+        "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
     };
+    exports.textAlignments = {
+        center: 'center',
+        end: 'end',
+        justify: 'justify',
+        start: 'start',
+    };
 });
 //# sourceMappingURL=fonts.js.map

lib-amd/global/index.d.ts

@@ -5,1 +5,2 @@ export * from './colors';
 export * from './borderRadius';
+export * from './utils';

lib-amd/global/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "./colors", "./fonts", "./strokeWidths", "./borderRadius"], function (require, exports, tslib_1, colors_1, fonts_1, strokeWidths_1, borderRadius_1) {
+define(["require", "exports", "tslib", "./colors", "./fonts", "./strokeWidths", "./borderRadius", "./utils"], function (require, exports, tslib_1, colors_1, fonts_1, strokeWidths_1, borderRadius_1, utils_1) {
     "use strict";
@@ -8,3 +8,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(borderRadius_1, exports);
+    tslib_1.__exportStar(utils_1, exports);
 });
 //# sourceMappingURL=index.js.map

lib-amd/global/strokeWidths.js

@@ -5,8 +5,8 @@ define(["require", "exports"], function (require, exports) {
     exports.strokeWidths = {
-        thin: 1,
-        thick: 2,
-        thicker: 3,
-        thickest: 4,
+        thin: '1px',
+        thick: '2px',
+        thicker: '3px',
+        thickest: '4px',
     };
 });
 //# sourceMappingURL=strokeWidths.js.map

lib-amd/themes/teams/darkTheme.js

@@ -1,32 +0,30 @@
-define(["require", "exports", "tslib", "../../utils/dark/index", "../../utils/light/index", "../../global/index"], function (require, exports, tslib_1, index_1, index_2, index_3) {
+define(["require", "exports", "tslib", "../../utils/dark/index", "../../global/index", "./globalTheme", "../../utils/shadows"], function (require, exports, tslib_1, index_1, index_2, globalTheme_1, shadows_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var common = {
-        sharedColors: index_3.sharedColors,
-        sharedColorTokens: index_1.sharedColorTokens,
-        fontFamilies: index_3.fontFamilies,
-        fontWeights: index_3.fontWeights,
-        fontSizes: index_3.fontSizes,
-        lineHeights: index_3.lineHeights,
+    var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams, {
+        neutralBackground2: index_2.grey[14],
+        neutralBackground2Hover: index_2.grey[20],
+        neutralBackground2Pressed: index_2.grey[16],
+        neutralBackground2Selected: index_2.grey[18],
+        neutralBackground3: index_2.grey[12],
+        neutralBackground3Hover: index_2.grey[18],
+        neutralBackground3Pressed: index_2.grey[14],
+        neutralBackground3Selected: index_2.grey[16],
+        neutralBackground4: index_2.grey[8],
+        neutralBackground4Hover: index_2.grey[14],
+        neutralBackground4Pressed: index_2.grey[10],
+        neutralBackground4Selected: index_2.grey[12],
+        neutralBackground5: index_2.grey[4],
+        neutralBackground5Hover: index_2.grey[10],
+        neutralBackground5Pressed: index_2.grey[6],
+        neutralBackground5Selected: index_2.grey[8],
+    });
+    exports.teamsDarkTheme = {
+        global: globalTheme_1.globalTheme,
+        alias: {
+            color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: teamsNeutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.teams) }),
+            shadow: shadows_1.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey),
+        },
     };
-    var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_3.brandColors.teams, {
-        neutralBackground2: index_3.grey[14],
-        neutralBackground2Hover: index_3.grey[20],
-        neutralBackground2Pressed: index_3.grey[16],
-        neutralBackground2Selected: index_3.grey[18],
-        neutralBackground3: index_3.grey[12],
-        neutralBackground3Hover: index_3.grey[18],
-        neutralBackground3Pressed: index_3.grey[14],
-        neutralBackground3Selected: index_3.grey[16],
-        neutralBackground4: index_3.grey[8],
-        neutralBackground4Hover: index_3.grey[14],
-        neutralBackground4Pressed: index_3.grey[10],
-        neutralBackground4Selected: index_3.grey[12],
-        neutralBackground5: index_3.grey[4],
-        neutralBackground5Hover: index_3.grey[10],
-        neutralBackground5Pressed: index_3.grey[6],
-        neutralBackground5Selected: index_3.grey[8],
-    });
-    exports.teamsDarkTheme = tslib_1.__assign({ brandColors: index_3.brandColors.teams, neutralColorTokens: teamsNeutralColorTokens, shadowLevels: index_2.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbientDarker, teamsNeutralColorTokens.neutralShadowKeyDarker) }, common);
 });
 //# sourceMappingURL=darkTheme.js.map

lib-amd/themes/teams/highContrastTheme.js

@@ -1,14 +0,13 @@
-define(["require", "exports", "tslib", "../../utils/highContrast/index", "../../global/index"], function (require, exports, tslib_1, index_1, index_2) {
+define(["require", "exports", "tslib", "../../utils/highContrast/index", "../../global/index", "./globalTheme", "../../utils/shadows"], function (require, exports, tslib_1, index_1, index_2, globalTheme_1, shadows_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var common = {
-        sharedColors: index_2.sharedColors,
-        sharedColorTokens: index_1.sharedColorTokens,
-        fontFamilies: index_2.fontFamilies,
-        fontWeights: index_2.fontWeights,
-        fontSizes: index_2.fontSizes,
-        lineHeights: index_2.lineHeights,
+    var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams);
+    exports.teamsHighContrastTheme = {
+        global: globalTheme_1.globalTheme,
+        alias: {
+            color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: teamsNeutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens() }),
+            shadow: shadows_1.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey),
+        },
     };
-    exports.teamsHighContrastTheme = tslib_1.__assign({ brandColors: index_2.brandColors.teams, neutralColorTokens: index_1.createNeutralColorTokens(index_2.brandColors.teams) }, common);
 });
 //# sourceMappingURL=highContrastTheme.js.map

lib-amd/themes/teams/lightTheme.js

@@ -1,15 +0,13 @@
-define(["require", "exports", "tslib", "../../utils/light/index", "../../global/index"], function (require, exports, tslib_1, index_1, index_2) {
+define(["require", "exports", "tslib", "../../utils/light/index", "../../global/index", "./globalTheme", "../../utils/shadows"], function (require, exports, tslib_1, index_1, index_2, globalTheme_1, shadows_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var common = {
-        sharedColors: index_2.sharedColors,
-        sharedColorTokens: index_1.sharedColorTokens,
-        fontFamilies: index_2.fontFamilies,
-        fontWeights: index_2.fontWeights,
-        fontSizes: index_2.fontSizes,
-        lineHeights: index_2.lineHeights,
+    var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams);
+    exports.teamsLightTheme = {
+        global: globalTheme_1.globalTheme,
+        alias: {
+            color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.teams) }),
+            shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+        },
     };
-    var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams);
-    exports.teamsLightTheme = tslib_1.__assign({ brandColors: index_2.brandColors.teams, neutralColorTokens: teamsNeutralColorTokens, shadowLevels: index_1.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey) }, common);
 });
 //# sourceMappingURL=lightTheme.js.map

lib-amd/themes/web/darkTheme.js

@@ -1,15 +0,13 @@
-define(["require", "exports", "tslib", "../../utils/dark/index", "../../utils/light/index", "../../global/index"], function (require, exports, tslib_1, index_1, index_2, index_3) {
+define(["require", "exports", "tslib", "../../utils/dark/index", "../../global/index", "./globalTheme", "../../utils/shadows"], function (require, exports, tslib_1, index_1, index_2, globalTheme_1, shadows_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var common = {
-        sharedColors: index_3.sharedColors,
-        sharedColorTokens: index_1.sharedColorTokens,
-        fontFamilies: index_3.fontFamilies,
-        fontWeights: index_3.fontWeights,
-        fontSizes: index_3.fontSizes,
-        lineHeights: index_3.lineHeights,
+    var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.web);
+    exports.webDarkTheme = {
+        global: globalTheme_1.globalTheme,
+        alias: {
+            color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.web) }),
+            shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+        },
     };
-    var webNeutralColorTokens = index_1.createNeutralColorTokens(index_3.brandColors.web);
-    exports.webDarkTheme = tslib_1.__assign({ brandColors: index_3.brandColors.web, neutralColorTokens: webNeutralColorTokens, shadowLevels: index_2.createShadowLevelTokens(webNeutralColorTokens.neutralShadowAmbientDarker, webNeutralColorTokens.neutralShadowKeyDarker) }, common);
 });
 //# sourceMappingURL=darkTheme.js.map

lib-amd/themes/web/highContrastTheme.js

@@ -1,14 +0,13 @@
-define(["require", "exports", "tslib", "../../utils/highContrast/index", "../../global/index"], function (require, exports, tslib_1, index_1, index_2) {
+define(["require", "exports", "tslib", "../../utils/highContrast/index", "../../global/index", "./globalTheme", "../../utils/shadows"], function (require, exports, tslib_1, index_1, index_2, globalTheme_1, shadows_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var common = {
-        sharedColors: index_2.sharedColors,
-        sharedColorTokens: index_1.sharedColorTokens,
-        fontFamilies: index_2.fontFamilies,
-        fontWeights: index_2.fontWeights,
-        fontSizes: index_2.fontSizes,
-        lineHeights: index_2.lineHeights,
+    var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.web);
+    exports.webHighContrastTheme = {
+        global: globalTheme_1.globalTheme,
+        alias: {
+            color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens() }),
+            shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+        },
     };
-    exports.webHighContrastTheme = tslib_1.__assign({ brandColors: index_2.brandColors.web, neutralColorTokens: index_1.createNeutralColorTokens(index_2.brandColors.web) }, common);
 });
 //# sourceMappingURL=highContrastTheme.js.map

lib-amd/themes/web/lightTheme.js

@@ -1,15 +0,13 @@
-define(["require", "exports", "tslib", "../../utils/light/index", "../../utils/light/index", "../../global/index"], function (require, exports, tslib_1, index_1, index_2, index_3) {
+define(["require", "exports", "tslib", "../../utils/light/index", "../../global/index", "./globalTheme", "../../utils/shadows"], function (require, exports, tslib_1, index_1, index_2, globalTheme_1, shadows_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var common = {
-        sharedColors: index_3.sharedColors,
-        sharedColorTokens: index_1.sharedColorTokens,
-        fontFamilies: index_3.fontFamilies,
-        fontWeights: index_3.fontWeights,
-        fontSizes: index_3.fontSizes,
-        lineHeights: index_3.lineHeights,
+    var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.web);
+    exports.webLightTheme = {
+        global: globalTheme_1.globalTheme,
+        alias: {
+            color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.web) }),
+            shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+        },
     };
-    var webNeutralColorTokens = index_1.createNeutralColorTokens(index_3.brandColors.web);
-    exports.webLightTheme = tslib_1.__assign({ brandColors: index_3.brandColors.web, neutralColorTokens: webNeutralColorTokens, shadowLevels: index_2.createShadowLevelTokens(webNeutralColorTokens.neutralShadowAmbient, webNeutralColorTokens.neutralShadowKey) }, common);
 });
 //# sourceMappingURL=lightTheme.js.map

lib-amd/types.d.ts

@@ -107,2 +107,5 @@ /**
 };
+export declare type BrandVariants = ColorVariants & {
+    shade60: string;
+};
 /**
@@ -128,3 +131,3 @@ * All the global shared colors and their shade/tint variants
     lime: ColorVariants;
-    forrest: ColorVariants;
+    forest: ColorVariants;
     seafoam: ColorVariants;
@@ -135,2 +138,3 @@ lightGreen: ColorVariants;
     lightTeal: ColorVariants;
+    teal: ColorVariants;
     darkTeal: ColorVariants;
@@ -167,19 +171,19 @@ cyan: ColorVariants;
 export declare type ProductBrandColors = {
-    teams: ColorVariants;
-    web: ColorVariants;
+    teams: BrandVariants;
+    web: BrandVariants;
 };
 export declare type FontSizes = {
     base: {
-        100: number;
-        200: number;
-        300: number;
-        400: number;
-        500: number;
-        600: number;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
     };
     hero: {
-        700: number;
-        800: number;
-        900: number;
-        1000: number;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
     };
@@ -198,59 +202,94 @@ };
 };
+export declare type TextAlignment = 'inherit' | 'initial' | 'revert' | 'unset' | 'center' | 'end' | 'start' | 'justify' | 'left' | 'match-parent' | 'right';
+export declare type TextAlignments = {
+    start: TextAlignment;
+    center: TextAlignment;
+    end: TextAlignment;
+    justify: TextAlignment;
+};
 export declare type BorderRadius = {
-    none: number;
-    small: number;
-    medium: number;
-    large: number;
-    xLarge: number;
+    none: string;
+    small: string;
+    medium: string;
+    large: string;
+    xLarge: string;
     circular: string;
 };
 export declare type StrokeWidths = {
-    thin: number;
-    thick: number;
-    thicker: number;
-    thickest: number;
+    thin: string;
+    thick: string;
+    thicker: string;
+    thickest: string;
 };
 /**
- * Each shadow level has an ambient and key variant
- */
-declare type ShadowTokenValue = {
-    ambient: string;
-    key: string;
-};
-/**
  * Design tokens for shadow levels
  */
 export declare type ShadowLevelTokens = {
-    shadow2: ShadowTokenValue;
-    shadow4: ShadowTokenValue;
-    shadow8: ShadowTokenValue;
-    shadow16: ShadowTokenValue;
-    shadow28: ShadowTokenValue;
-    shadow64: ShadowTokenValue;
+    shadow2: string;
+    shadow4: string;
+    shadow8: string;
+    shadow16: string;
+    shadow28: string;
+    shadow64: string;
 };
-/**
- * Theme object
- */
+export declare type GhostColorTokens = {
+    ghostBackground: string;
+    ghostBackgroundHover: string;
+    ghostBackgroundPressed: string;
+    ghostBackgroundSelected: string;
+};
+export declare type TransparentColorTokens = {
+    transparentBackground: string;
+    transparentBackgroundHover: string;
+    transparentBackgroundPressed: string;
+    transparentBackgroundSelected: string;
+};
+export declare type BackgroundColorTokens = {
+    background: string;
+    backgroundHover: string;
+    backgroundPressed: string;
+    backgroundSelected: string;
+};
+export declare type BrandColorTokens = {
+    brandBackground: string;
+    brandBackgroundHover: string;
+    brandBackgroundPressed: string;
+    brandBackgroundSelected: string;
+    brandBackgroundStatic: string;
+};
+export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
 export declare type Theme = {
-    sharedColors: GlobalSharedColors;
-    sharedColorTokens: Record<keyof GlobalSharedColors, SharedColorTokens>;
-    fontSizes: FontSizes;
-    fontWeights: FontWeights;
-    fontFamilies: FontFamilies;
-    lineHeights: LineHeights;
-    brandColors: ColorVariants;
-    neutralColorTokens: NeutralColorTokens;
-    shadowLevels?: ShadowLevelTokens;
+    global: {
+        color: {
+            black: string;
+            white: string;
+            hyperlink: string;
+            disabled: string;
+            selected: string;
+        };
+        palette: GlobalSharedColors & {
+            brand: BrandVariants;
+            grey: Record<Greys, string>;
+        };
+        type: {
+            fontSizes: FontSizes;
+            fontWeights: FontWeights;
+            fontFamilies: FontFamilies;
+            lineHeights: LineHeights;
+            alignment: TextAlignments;
+        };
+        borderRadius: BorderRadius;
+        strokeWidth: StrokeWidths;
+    };
+    alias: {
+        color: Record<keyof GlobalSharedColors, SharedColorTokens> & {
+            neutral: NeutralColorTokens;
+            ghost: BackgroundColorTokens;
+            transparent: BackgroundColorTokens;
+            brand: BrandColorTokens;
+        };
+        shadow: ShadowLevelTokens;
+    };
 };
-export declare type PartialTheme = {
-    sharedColors?: RecursivePartial<Theme['sharedColors']>;
-    sharedColorTokens?: RecursivePartial<Theme['sharedColorTokens']>;
-    fontSizes?: RecursivePartial<Theme['fontSizes']>;
-    fontWeights?: RecursivePartial<Theme['fontWeights']>;
-    fontFamilies?: RecursivePartial<Theme['fontFamilies']>;
-    lineHeights?: RecursivePartial<Theme['lineHeights']>;
-    brandColors?: RecursivePartial<Theme['brandColors']>;
-    neutralColorTokens?: RecursivePartial<Theme['neutralColorTokens']>;
-    shadowLevels?: RecursivePartial<Theme['shadowLevels']>;
-};
+export declare type PartialTheme = RecursivePartial<Theme>;
 export {};

lib-amd/utils/dark/colors.d.ts

@@ -1,2 +0,5 @@
-import { NeutralColorTokens, ColorVariants, SharedColorTokens, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, ColorVariants, SharedColorTokens, GlobalSharedColors, BackgroundColorTokens, BrandVariants, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(brand: BrandVariants): BrandColorTokens;
 export declare function createNeutralColorTokens(brand: ColorVariants, customValues?: {
@@ -3,0 +6,0 @@ [P in keyof NeutralColorTokens]?: string;

lib-amd/utils/dark/colors.js

 define(["require", "exports", "tslib", "../../global/index"], function (require, exports, tslib_1, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ghostColorTokens = {
+        background: 'red',
+        backgroundHover: 'red',
+        backgroundPressed: 'red',
+        backgroundSelected: 'red',
+    };
+    exports.transparentColorTokens = {
+        background: 'rgba(255, 0, 0, 0.2)',
+        backgroundHover: 'rgba(255, 0, 0, 0.2)',
+        backgroundPressed: 'rgba(255, 0, 0, 0.2)',
+        backgroundSelected: 'rgba(255, 0, 0, 0.2)',
+    };
+    function createBrandColorTokens(brand) {
+        return {
+            brandBackground: brand.shade10,
+            brandBackgroundHover: brand.primary,
+            brandBackgroundPressed: brand.shade40,
+            brandBackgroundSelected: brand.shade20,
+            brandBackgroundStatic: brand.primary,
+        };
+    }
+    exports.createBrandColorTokens = createBrandColorTokens;
     function createNeutralColorTokens(brand, customValues) {
@@ -30,3 +52,3 @@ if (customValues === void 0) { customValues = {}; }
         lime: createSharedColorTokens(index_1.sharedColors.lime),
-        forrest: createSharedColorTokens(index_1.sharedColors.forrest),
+        forest: createSharedColorTokens(index_1.sharedColors.forest),
         seafoam: createSharedColorTokens(index_1.sharedColors.seafoam),
@@ -37,2 +59,3 @@ lightGreen: createSharedColorTokens(index_1.sharedColors.lightGreen),
         lightTeal: createSharedColorTokens(index_1.sharedColors.lightTeal),
+        teal: createSharedColorTokens(index_1.sharedColors.teal),
         darkTeal: createSharedColorTokens(index_1.sharedColors.darkTeal),
@@ -39,0 +62,0 @@ cyan: createSharedColorTokens(index_1.sharedColors.cyan),

lib-amd/utils/highContrast/colors.d.ts

@@ -1,3 +0,6 @@
-import { NeutralColorTokens, SharedColorTokens, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, SharedColorTokens, GlobalSharedColors, BackgroundColorTokens, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(): BrandColorTokens;
 export declare function createNeutralColorTokens(customValues?: Record<string, string>): NeutralColorTokens;
 export declare const sharedColorTokens: Record<keyof GlobalSharedColors, SharedColorTokens>;

lib-amd/utils/highContrast/colors.js

 define(["require", "exports", "tslib", "../../global/index"], function (require, exports, tslib_1, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ghostColorTokens = {
+        background: 'red',
+        backgroundHover: 'red',
+        backgroundPressed: 'red',
+        backgroundSelected: 'red',
+    };
+    exports.transparentColorTokens = {
+        background: 'rgba(255, 0, 0, 0.2)',
+        backgroundHover: 'rgba(255, 0, 0, 0.2)',
+        backgroundPressed: 'rgba(255, 0, 0, 0.2)',
+        backgroundSelected: 'rgba(255, 0, 0, 0.2)',
+    };
+    function createBrandColorTokens() {
+        return {
+            brandBackground: index_1.white,
+            brandBackgroundHover: index_1.selected,
+            brandBackgroundPressed: index_1.selected,
+            brandBackgroundSelected: index_1.selected,
+            brandBackgroundStatic: index_1.black,
+        };
+    }
+    exports.createBrandColorTokens = createBrandColorTokens;
     function createNeutralColorTokens(customValues) {
@@ -30,3 +52,3 @@ if (customValues === void 0) { customValues = {}; }
         lime: createSharedColorTokens(),
-        forrest: createSharedColorTokens(),
+        forest: createSharedColorTokens(),
         seafoam: createSharedColorTokens(),
@@ -37,2 +59,3 @@ lightGreen: createSharedColorTokens(),
         lightTeal: createSharedColorTokens(),
+        teal: createSharedColorTokens(),
         darkTeal: createSharedColorTokens(),
@@ -39,0 +62,0 @@ cyan: createSharedColorTokens(),

lib-amd/utils/light/colors.d.ts

@@ -1,2 +0,5 @@
-import { NeutralColorTokens, SharedColorTokens, ColorVariants, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, SharedColorTokens, ColorVariants, GlobalSharedColors, BackgroundColorTokens, BrandVariants, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(brand: BrandVariants): BrandColorTokens;
 export declare function createNeutralColorTokens(brand: ColorVariants, customValues?: {
@@ -3,0 +6,0 @@ [P in keyof NeutralColorTokens]?: string;

lib-amd/utils/light/colors.js

 define(["require", "exports", "tslib", "../../global/index"], function (require, exports, tslib_1, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ghostColorTokens = {
+        background: 'transparent',
+        backgroundHover: index_1.grey[96],
+        backgroundPressed: index_1.grey[88],
+        backgroundSelected: index_1.grey[92],
+    };
+    exports.transparentColorTokens = {
+        background: 'transparent',
+        backgroundHover: 'transparent',
+        backgroundPressed: 'transparent',
+        backgroundSelected: 'transparent',
+    };
+    function createBrandColorTokens(brand) {
+        return {
+            brandBackground: brand.primary,
+            brandBackgroundHover: brand.shade10,
+            brandBackgroundPressed: brand.shade40,
+            brandBackgroundSelected: brand.shade20,
+            brandBackgroundStatic: brand.primary,
+        };
+    }
+    exports.createBrandColorTokens = createBrandColorTokens;
     function createNeutralColorTokens(brand, customValues) {
@@ -30,3 +52,3 @@ if (customValues === void 0) { customValues = {}; }
         lime: createSharedColorTokens(index_1.sharedColors.lime),
-        forrest: createSharedColorTokens(index_1.sharedColors.forrest),
+        forest: createSharedColorTokens(index_1.sharedColors.forest),
         seafoam: createSharedColorTokens(index_1.sharedColors.seafoam),
@@ -37,2 +59,3 @@ lightGreen: createSharedColorTokens(index_1.sharedColors.lightGreen),
         lightTeal: createSharedColorTokens(index_1.sharedColors.lightTeal),
+        teal: createSharedColorTokens(index_1.sharedColors.teal),
         darkTeal: createSharedColorTokens(index_1.sharedColors.darkTeal),
@@ -39,0 +62,0 @@ cyan: createSharedColorTokens(index_1.sharedColors.cyan),

lib-amd/utils/light/index.d.ts

 export * from './colors';
-export * from './shadows';

lib-amd/utils/light/index.js

@@ -1,7 +0,6 @@
-define(["require", "exports", "tslib", "./colors", "./shadows"], function (require, exports, tslib_1, colors_1, shadows_1) {
+define(["require", "exports", "tslib", "./colors"], function (require, exports, tslib_1, colors_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(colors_1, exports);
-    tslib_1.__exportStar(shadows_1, exports);
 });
 //# sourceMappingURL=index.js.map

lib-amd/version.js

 define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/react-theme', '0.2.0');
+    set_version_1.setVersion('@fluentui/react-theme', '0.3.0');
 });
 //# sourceMappingURL=version.js.map

lib-commonjs/global/borderRadius.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.borderRadius = {
-    none: 0,
-    small: 2,
-    medium: 4,
-    large: 6,
-    xLarge: 8,
+    none: '0',
+    small: '2px',
+    medium: '4px',
+    large: '6px',
+    xLarge: '8px',
     circular: '50%',
 };
 //# sourceMappingURL=borderRadius.js.map

lib-commonjs/global/colors.js

@@ -321,3 +321,3 @@ "use strict";
 };
-var forrest = {
+var forest = {
     shade50: '#0C1501',
@@ -406,2 +406,16 @@ shade40: '#162702',
 };
+var teal = {
+    shade50: '#001516',
+    shade40: '#012729',
+    shade30: '#02494C',
+    shade20: '#026367',
+    shade10: '#02767A',
+    primary: '#038387',
+    tint10: '#159196',
+    tint20: '#2AA0A4',
+    tint30: '#4BB4B7',
+    tint40: '#9BD9DB',
+    tint50: '#C7EBEC',
+    tint60: '#F0FAFA',
+};
 var darkTeal = {
@@ -789,3 +803,3 @@ shade50: '#001010',
     lime: lime,
-    forrest: forrest,
+    forest: forest,
     seafoam: seafoam,
@@ -796,2 +810,3 @@ lightGreen: lightGreen,
     lightTeal: lightTeal,
+    teal: teal,
     darkTeal: darkTeal,
@@ -798,0 +813,0 @@ cyan: cyan,

lib-commonjs/global/fonts.d.ts

@@ -1,2 +0,2 @@
-import { FontFamilies, FontSizes, FontWeights, LineHeights } from '../types';
+import { FontFamilies, FontSizes, FontWeights, LineHeights, TextAlignments } from '../types';
 export declare const fontSizes: FontSizes;
@@ -6,1 +6,2 @@ export declare const lineHeights: LineHeights;
 export declare const fontFamilies: FontFamilies;
+export declare const textAlignments: TextAlignments;

lib-commonjs/global/fonts.js

@@ -5,14 +5,14 @@ "use strict";
     base: {
-        100: 10,
-        200: 12,
-        300: 14,
-        400: 16,
-        500: 20,
-        600: 24,
+        100: '10px',
+        200: '12px',
+        300: '14px',
+        400: '16px',
+        500: '20px',
+        600: '24px',
     },
     hero: {
-        700: 28,
-        800: 32,
-        900: 40,
-        1000: 68,
+        700: '28px',
+        800: '32px',
+        900: '40px',
+        1000: '68px',
     },
@@ -22,14 +22,14 @@ };
     base: {
-        100: 14,
-        200: 16,
-        300: 20,
-        400: 22,
-        500: 28,
-        600: 32,
+        100: '14px',
+        200: '16px',
+        300: '20px',
+        400: '22px',
+        500: '28px',
+        600: '32px',
     },
     hero: {
-        700: 36,
-        800: 40,
-        900: 52,
-        1000: 92,
+        700: '36px',
+        800: '40px',
+        900: '52px',
+        1000: '92px',
     },
@@ -42,8 +42,17 @@ };
 };
-// TODO find asset urls
 exports.fontFamilies = {
-    base: '',
-    monospace: '',
-    numeric: '',
+    base: 
+    // eslint-disable-next-line @fluentui/max-len
+    "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+    monospace: "Consolas, 'Courier New', Courier, monospace",
+    numeric: 
+    // eslint-disable-next-line @fluentui/max-len
+    "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
 };
+exports.textAlignments = {
+    center: 'center',
+    end: 'end',
+    justify: 'justify',
+    start: 'start',
+};
 //# sourceMappingURL=fonts.js.map

lib-commonjs/global/index.d.ts

@@ -5,1 +5,2 @@ export * from './colors';
 export * from './borderRadius';
+export * from './utils';

lib-commonjs/global/index.js

@@ -8,2 +8,3 @@ "use strict";
 tslib_1.__exportStar(require("./borderRadius"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/global/strokeWidths.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.strokeWidths = {
-    thin: 1,
-    thick: 2,
-    thicker: 3,
-    thickest: 4,
+    thin: '1px',
+    thick: '2px',
+    thicker: '3px',
+    thickest: '4px',
 };
 //# sourceMappingURL=strokeWidths.js.map

lib-commonjs/themes/teams/darkTheme.js

@@ -5,31 +5,30 @@ "use strict";
 var index_1 = require("../../utils/dark/index");
-var index_2 = require("../../utils/light/index");
-var index_3 = require("../../global/index");
-var common = {
-    sharedColors: index_3.sharedColors,
-    sharedColorTokens: index_1.sharedColorTokens,
-    fontFamilies: index_3.fontFamilies,
-    fontWeights: index_3.fontWeights,
-    fontSizes: index_3.fontSizes,
-    lineHeights: index_3.lineHeights,
+var index_2 = require("../../global/index");
+var globalTheme_1 = require("./globalTheme");
+var shadows_1 = require("../../utils/shadows");
+var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams, {
+    neutralBackground2: index_2.grey[14],
+    neutralBackground2Hover: index_2.grey[20],
+    neutralBackground2Pressed: index_2.grey[16],
+    neutralBackground2Selected: index_2.grey[18],
+    neutralBackground3: index_2.grey[12],
+    neutralBackground3Hover: index_2.grey[18],
+    neutralBackground3Pressed: index_2.grey[14],
+    neutralBackground3Selected: index_2.grey[16],
+    neutralBackground4: index_2.grey[8],
+    neutralBackground4Hover: index_2.grey[14],
+    neutralBackground4Pressed: index_2.grey[10],
+    neutralBackground4Selected: index_2.grey[12],
+    neutralBackground5: index_2.grey[4],
+    neutralBackground5Hover: index_2.grey[10],
+    neutralBackground5Pressed: index_2.grey[6],
+    neutralBackground5Selected: index_2.grey[8],
+});
+exports.teamsDarkTheme = {
+    global: globalTheme_1.globalTheme,
+    alias: {
+        color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: teamsNeutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.teams) }),
+        shadow: shadows_1.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey),
+    },
 };
-var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_3.brandColors.teams, {
-    neutralBackground2: index_3.grey[14],
-    neutralBackground2Hover: index_3.grey[20],
-    neutralBackground2Pressed: index_3.grey[16],
-    neutralBackground2Selected: index_3.grey[18],
-    neutralBackground3: index_3.grey[12],
-    neutralBackground3Hover: index_3.grey[18],
-    neutralBackground3Pressed: index_3.grey[14],
-    neutralBackground3Selected: index_3.grey[16],
-    neutralBackground4: index_3.grey[8],
-    neutralBackground4Hover: index_3.grey[14],
-    neutralBackground4Pressed: index_3.grey[10],
-    neutralBackground4Selected: index_3.grey[12],
-    neutralBackground5: index_3.grey[4],
-    neutralBackground5Hover: index_3.grey[10],
-    neutralBackground5Pressed: index_3.grey[6],
-    neutralBackground5Selected: index_3.grey[8],
-});
-exports.teamsDarkTheme = tslib_1.__assign({ brandColors: index_3.brandColors.teams, neutralColorTokens: teamsNeutralColorTokens, shadowLevels: index_2.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbientDarker, teamsNeutralColorTokens.neutralShadowKeyDarker) }, common);
 //# sourceMappingURL=darkTheme.js.map

lib-commonjs/themes/teams/highContrastTheme.js

@@ -6,11 +6,12 @@ "use strict";
 var index_2 = require("../../global/index");
-var common = {
-    sharedColors: index_2.sharedColors,
-    sharedColorTokens: index_1.sharedColorTokens,
-    fontFamilies: index_2.fontFamilies,
-    fontWeights: index_2.fontWeights,
-    fontSizes: index_2.fontSizes,
-    lineHeights: index_2.lineHeights,
+var globalTheme_1 = require("./globalTheme");
+var shadows_1 = require("../../utils/shadows");
+var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams);
+exports.teamsHighContrastTheme = {
+    global: globalTheme_1.globalTheme,
+    alias: {
+        color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: teamsNeutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens() }),
+        shadow: shadows_1.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey),
+    },
 };
-exports.teamsHighContrastTheme = tslib_1.__assign({ brandColors: index_2.brandColors.teams, neutralColorTokens: index_1.createNeutralColorTokens(index_2.brandColors.teams) }, common);
 //# sourceMappingURL=highContrastTheme.js.map

lib-commonjs/themes/teams/lightTheme.js

@@ -6,12 +6,12 @@ "use strict";
 var index_2 = require("../../global/index");
-var common = {
-    sharedColors: index_2.sharedColors,
-    sharedColorTokens: index_1.sharedColorTokens,
-    fontFamilies: index_2.fontFamilies,
-    fontWeights: index_2.fontWeights,
-    fontSizes: index_2.fontSizes,
-    lineHeights: index_2.lineHeights,
+var globalTheme_1 = require("./globalTheme");
+var shadows_1 = require("../../utils/shadows");
+var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams);
+exports.teamsLightTheme = {
+    global: globalTheme_1.globalTheme,
+    alias: {
+        color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.teams) }),
+        shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-var teamsNeutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.teams);
-exports.teamsLightTheme = tslib_1.__assign({ brandColors: index_2.brandColors.teams, neutralColorTokens: teamsNeutralColorTokens, shadowLevels: index_1.createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey) }, common);
 //# sourceMappingURL=lightTheme.js.map

lib-commonjs/themes/web/darkTheme.js

@@ -5,14 +5,13 @@ "use strict";
 var index_1 = require("../../utils/dark/index");
-var index_2 = require("../../utils/light/index");
-var index_3 = require("../../global/index");
-var common = {
-    sharedColors: index_3.sharedColors,
-    sharedColorTokens: index_1.sharedColorTokens,
-    fontFamilies: index_3.fontFamilies,
-    fontWeights: index_3.fontWeights,
-    fontSizes: index_3.fontSizes,
-    lineHeights: index_3.lineHeights,
+var index_2 = require("../../global/index");
+var globalTheme_1 = require("./globalTheme");
+var shadows_1 = require("../../utils/shadows");
+var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.web);
+exports.webDarkTheme = {
+    global: globalTheme_1.globalTheme,
+    alias: {
+        color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.web) }),
+        shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-var webNeutralColorTokens = index_1.createNeutralColorTokens(index_3.brandColors.web);
-exports.webDarkTheme = tslib_1.__assign({ brandColors: index_3.brandColors.web, neutralColorTokens: webNeutralColorTokens, shadowLevels: index_2.createShadowLevelTokens(webNeutralColorTokens.neutralShadowAmbientDarker, webNeutralColorTokens.neutralShadowKeyDarker) }, common);
 //# sourceMappingURL=darkTheme.js.map

lib-commonjs/themes/web/highContrastTheme.js

@@ -6,11 +6,12 @@ "use strict";
 var index_2 = require("../../global/index");
-var common = {
-    sharedColors: index_2.sharedColors,
-    sharedColorTokens: index_1.sharedColorTokens,
-    fontFamilies: index_2.fontFamilies,
-    fontWeights: index_2.fontWeights,
-    fontSizes: index_2.fontSizes,
-    lineHeights: index_2.lineHeights,
+var globalTheme_1 = require("./globalTheme");
+var shadows_1 = require("../../utils/shadows");
+var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.web);
+exports.webHighContrastTheme = {
+    global: globalTheme_1.globalTheme,
+    alias: {
+        color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens() }),
+        shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-exports.webHighContrastTheme = tslib_1.__assign({ brandColors: index_2.brandColors.web, neutralColorTokens: index_1.createNeutralColorTokens(index_2.brandColors.web) }, common);
 //# sourceMappingURL=highContrastTheme.js.map

lib-commonjs/themes/web/lightTheme.js

@@ -5,14 +5,13 @@ "use strict";
 var index_1 = require("../../utils/light/index");
-var index_2 = require("../../utils/light/index");
-var index_3 = require("../../global/index");
-var common = {
-    sharedColors: index_3.sharedColors,
-    sharedColorTokens: index_1.sharedColorTokens,
-    fontFamilies: index_3.fontFamilies,
-    fontWeights: index_3.fontWeights,
-    fontSizes: index_3.fontSizes,
-    lineHeights: index_3.lineHeights,
+var index_2 = require("../../global/index");
+var globalTheme_1 = require("./globalTheme");
+var shadows_1 = require("../../utils/shadows");
+var neutralColorTokens = index_1.createNeutralColorTokens(index_2.brandColors.web);
+exports.webLightTheme = {
+    global: globalTheme_1.globalTheme,
+    alias: {
+        color: tslib_1.__assign(tslib_1.__assign({}, index_1.sharedColorTokens), { neutral: neutralColorTokens, ghost: index_1.ghostColorTokens, transparent: index_1.transparentColorTokens, brand: index_1.createBrandColorTokens(index_2.brandColors.web) }),
+        shadow: shadows_1.createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-var webNeutralColorTokens = index_1.createNeutralColorTokens(index_3.brandColors.web);
-exports.webLightTheme = tslib_1.__assign({ brandColors: index_3.brandColors.web, neutralColorTokens: webNeutralColorTokens, shadowLevels: index_2.createShadowLevelTokens(webNeutralColorTokens.neutralShadowAmbient, webNeutralColorTokens.neutralShadowKey) }, common);
 //# sourceMappingURL=lightTheme.js.map

lib-commonjs/types.d.ts

@@ -107,2 +107,5 @@ /**
 };
+export declare type BrandVariants = ColorVariants & {
+    shade60: string;
+};
 /**
@@ -128,3 +131,3 @@ * All the global shared colors and their shade/tint variants
     lime: ColorVariants;
-    forrest: ColorVariants;
+    forest: ColorVariants;
     seafoam: ColorVariants;
@@ -135,2 +138,3 @@ lightGreen: ColorVariants;
     lightTeal: ColorVariants;
+    teal: ColorVariants;
     darkTeal: ColorVariants;
@@ -167,19 +171,19 @@ cyan: ColorVariants;
 export declare type ProductBrandColors = {
-    teams: ColorVariants;
-    web: ColorVariants;
+    teams: BrandVariants;
+    web: BrandVariants;
 };
 export declare type FontSizes = {
     base: {
-        100: number;
-        200: number;
-        300: number;
-        400: number;
-        500: number;
-        600: number;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
     };
     hero: {
-        700: number;
-        800: number;
-        900: number;
-        1000: number;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
     };
@@ -198,59 +202,94 @@ };
 };
+export declare type TextAlignment = 'inherit' | 'initial' | 'revert' | 'unset' | 'center' | 'end' | 'start' | 'justify' | 'left' | 'match-parent' | 'right';
+export declare type TextAlignments = {
+    start: TextAlignment;
+    center: TextAlignment;
+    end: TextAlignment;
+    justify: TextAlignment;
+};
 export declare type BorderRadius = {
-    none: number;
-    small: number;
-    medium: number;
-    large: number;
-    xLarge: number;
+    none: string;
+    small: string;
+    medium: string;
+    large: string;
+    xLarge: string;
     circular: string;
 };
 export declare type StrokeWidths = {
-    thin: number;
-    thick: number;
-    thicker: number;
-    thickest: number;
+    thin: string;
+    thick: string;
+    thicker: string;
+    thickest: string;
 };
 /**
- * Each shadow level has an ambient and key variant
- */
-declare type ShadowTokenValue = {
-    ambient: string;
-    key: string;
-};
-/**
  * Design tokens for shadow levels
  */
 export declare type ShadowLevelTokens = {
-    shadow2: ShadowTokenValue;
-    shadow4: ShadowTokenValue;
-    shadow8: ShadowTokenValue;
-    shadow16: ShadowTokenValue;
-    shadow28: ShadowTokenValue;
-    shadow64: ShadowTokenValue;
+    shadow2: string;
+    shadow4: string;
+    shadow8: string;
+    shadow16: string;
+    shadow28: string;
+    shadow64: string;
 };
-/**
- * Theme object
- */
+export declare type GhostColorTokens = {
+    ghostBackground: string;
+    ghostBackgroundHover: string;
+    ghostBackgroundPressed: string;
+    ghostBackgroundSelected: string;
+};
+export declare type TransparentColorTokens = {
+    transparentBackground: string;
+    transparentBackgroundHover: string;
+    transparentBackgroundPressed: string;
+    transparentBackgroundSelected: string;
+};
+export declare type BackgroundColorTokens = {
+    background: string;
+    backgroundHover: string;
+    backgroundPressed: string;
+    backgroundSelected: string;
+};
+export declare type BrandColorTokens = {
+    brandBackground: string;
+    brandBackgroundHover: string;
+    brandBackgroundPressed: string;
+    brandBackgroundSelected: string;
+    brandBackgroundStatic: string;
+};
+export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
 export declare type Theme = {
-    sharedColors: GlobalSharedColors;
-    sharedColorTokens: Record<keyof GlobalSharedColors, SharedColorTokens>;
-    fontSizes: FontSizes;
-    fontWeights: FontWeights;
-    fontFamilies: FontFamilies;
-    lineHeights: LineHeights;
-    brandColors: ColorVariants;
-    neutralColorTokens: NeutralColorTokens;
-    shadowLevels?: ShadowLevelTokens;
+    global: {
+        color: {
+            black: string;
+            white: string;
+            hyperlink: string;
+            disabled: string;
+            selected: string;
+        };
+        palette: GlobalSharedColors & {
+            brand: BrandVariants;
+            grey: Record<Greys, string>;
+        };
+        type: {
+            fontSizes: FontSizes;
+            fontWeights: FontWeights;
+            fontFamilies: FontFamilies;
+            lineHeights: LineHeights;
+            alignment: TextAlignments;
+        };
+        borderRadius: BorderRadius;
+        strokeWidth: StrokeWidths;
+    };
+    alias: {
+        color: Record<keyof GlobalSharedColors, SharedColorTokens> & {
+            neutral: NeutralColorTokens;
+            ghost: BackgroundColorTokens;
+            transparent: BackgroundColorTokens;
+            brand: BrandColorTokens;
+        };
+        shadow: ShadowLevelTokens;
+    };
 };
-export declare type PartialTheme = {
-    sharedColors?: RecursivePartial<Theme['sharedColors']>;
-    sharedColorTokens?: RecursivePartial<Theme['sharedColorTokens']>;
-    fontSizes?: RecursivePartial<Theme['fontSizes']>;
-    fontWeights?: RecursivePartial<Theme['fontWeights']>;
-    fontFamilies?: RecursivePartial<Theme['fontFamilies']>;
-    lineHeights?: RecursivePartial<Theme['lineHeights']>;
-    brandColors?: RecursivePartial<Theme['brandColors']>;
-    neutralColorTokens?: RecursivePartial<Theme['neutralColorTokens']>;
-    shadowLevels?: RecursivePartial<Theme['shadowLevels']>;
-};
+export declare type PartialTheme = RecursivePartial<Theme>;
 export {};

lib-commonjs/utils/dark/colors.d.ts

@@ -1,2 +0,5 @@
-import { NeutralColorTokens, ColorVariants, SharedColorTokens, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, ColorVariants, SharedColorTokens, GlobalSharedColors, BackgroundColorTokens, BrandVariants, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(brand: BrandVariants): BrandColorTokens;
 export declare function createNeutralColorTokens(brand: ColorVariants, customValues?: {
@@ -3,0 +6,0 @@ [P in keyof NeutralColorTokens]?: string;

lib-commonjs/utils/dark/colors.js

@@ -5,2 +5,24 @@ "use strict";
 var index_1 = require("../../global/index");
+exports.ghostColorTokens = {
+    background: 'red',
+    backgroundHover: 'red',
+    backgroundPressed: 'red',
+    backgroundSelected: 'red',
+};
+exports.transparentColorTokens = {
+    background: 'rgba(255, 0, 0, 0.2)',
+    backgroundHover: 'rgba(255, 0, 0, 0.2)',
+    backgroundPressed: 'rgba(255, 0, 0, 0.2)',
+    backgroundSelected: 'rgba(255, 0, 0, 0.2)',
+};
+function createBrandColorTokens(brand) {
+    return {
+        brandBackground: brand.shade10,
+        brandBackgroundHover: brand.primary,
+        brandBackgroundPressed: brand.shade40,
+        brandBackgroundSelected: brand.shade20,
+        brandBackgroundStatic: brand.primary,
+    };
+}
+exports.createBrandColorTokens = createBrandColorTokens;
 function createNeutralColorTokens(brand, customValues) {
@@ -32,3 +54,3 @@ if (customValues === void 0) { customValues = {}; }
     lime: createSharedColorTokens(index_1.sharedColors.lime),
-    forrest: createSharedColorTokens(index_1.sharedColors.forrest),
+    forest: createSharedColorTokens(index_1.sharedColors.forest),
     seafoam: createSharedColorTokens(index_1.sharedColors.seafoam),
@@ -39,2 +61,3 @@ lightGreen: createSharedColorTokens(index_1.sharedColors.lightGreen),
     lightTeal: createSharedColorTokens(index_1.sharedColors.lightTeal),
+    teal: createSharedColorTokens(index_1.sharedColors.teal),
     darkTeal: createSharedColorTokens(index_1.sharedColors.darkTeal),
@@ -41,0 +64,0 @@ cyan: createSharedColorTokens(index_1.sharedColors.cyan),

lib-commonjs/utils/highContrast/colors.d.ts

@@ -1,3 +0,6 @@
-import { NeutralColorTokens, SharedColorTokens, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, SharedColorTokens, GlobalSharedColors, BackgroundColorTokens, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(): BrandColorTokens;
 export declare function createNeutralColorTokens(customValues?: Record<string, string>): NeutralColorTokens;
 export declare const sharedColorTokens: Record<keyof GlobalSharedColors, SharedColorTokens>;

lib-commonjs/utils/highContrast/colors.js

@@ -5,2 +5,24 @@ "use strict";
 var index_1 = require("../../global/index");
+exports.ghostColorTokens = {
+    background: 'red',
+    backgroundHover: 'red',
+    backgroundPressed: 'red',
+    backgroundSelected: 'red',
+};
+exports.transparentColorTokens = {
+    background: 'rgba(255, 0, 0, 0.2)',
+    backgroundHover: 'rgba(255, 0, 0, 0.2)',
+    backgroundPressed: 'rgba(255, 0, 0, 0.2)',
+    backgroundSelected: 'rgba(255, 0, 0, 0.2)',
+};
+function createBrandColorTokens() {
+    return {
+        brandBackground: index_1.white,
+        brandBackgroundHover: index_1.selected,
+        brandBackgroundPressed: index_1.selected,
+        brandBackgroundSelected: index_1.selected,
+        brandBackgroundStatic: index_1.black,
+    };
+}
+exports.createBrandColorTokens = createBrandColorTokens;
 function createNeutralColorTokens(customValues) {
@@ -32,3 +54,3 @@ if (customValues === void 0) { customValues = {}; }
     lime: createSharedColorTokens(),
-    forrest: createSharedColorTokens(),
+    forest: createSharedColorTokens(),
     seafoam: createSharedColorTokens(),
@@ -39,2 +61,3 @@ lightGreen: createSharedColorTokens(),
     lightTeal: createSharedColorTokens(),
+    teal: createSharedColorTokens(),
     darkTeal: createSharedColorTokens(),
@@ -41,0 +64,0 @@ cyan: createSharedColorTokens(),

lib-commonjs/utils/light/colors.d.ts

@@ -1,2 +0,5 @@
-import { NeutralColorTokens, SharedColorTokens, ColorVariants, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, SharedColorTokens, ColorVariants, GlobalSharedColors, BackgroundColorTokens, BrandVariants, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(brand: BrandVariants): BrandColorTokens;
 export declare function createNeutralColorTokens(brand: ColorVariants, customValues?: {
@@ -3,0 +6,0 @@ [P in keyof NeutralColorTokens]?: string;

lib-commonjs/utils/light/colors.js

@@ -5,2 +5,24 @@ "use strict";
 var index_1 = require("../../global/index");
+exports.ghostColorTokens = {
+    background: 'transparent',
+    backgroundHover: index_1.grey[96],
+    backgroundPressed: index_1.grey[88],
+    backgroundSelected: index_1.grey[92],
+};
+exports.transparentColorTokens = {
+    background: 'transparent',
+    backgroundHover: 'transparent',
+    backgroundPressed: 'transparent',
+    backgroundSelected: 'transparent',
+};
+function createBrandColorTokens(brand) {
+    return {
+        brandBackground: brand.primary,
+        brandBackgroundHover: brand.shade10,
+        brandBackgroundPressed: brand.shade40,
+        brandBackgroundSelected: brand.shade20,
+        brandBackgroundStatic: brand.primary,
+    };
+}
+exports.createBrandColorTokens = createBrandColorTokens;
 function createNeutralColorTokens(brand, customValues) {
@@ -32,3 +54,3 @@ if (customValues === void 0) { customValues = {}; }
     lime: createSharedColorTokens(index_1.sharedColors.lime),
-    forrest: createSharedColorTokens(index_1.sharedColors.forrest),
+    forest: createSharedColorTokens(index_1.sharedColors.forest),
     seafoam: createSharedColorTokens(index_1.sharedColors.seafoam),
@@ -39,2 +61,3 @@ lightGreen: createSharedColorTokens(index_1.sharedColors.lightGreen),
     lightTeal: createSharedColorTokens(index_1.sharedColors.lightTeal),
+    teal: createSharedColorTokens(index_1.sharedColors.teal),
     darkTeal: createSharedColorTokens(index_1.sharedColors.darkTeal),
@@ -41,0 +64,0 @@ cyan: createSharedColorTokens(index_1.sharedColors.cyan),

lib-commonjs/utils/light/index.d.ts

 export * from './colors';
-export * from './shadows';

lib-commonjs/utils/light/index.js

@@ -5,3 +5,2 @@ "use strict";
 tslib_1.__exportStar(require("./colors"), exports);
-tslib_1.__exportStar(require("./shadows"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/version.js

@@ -6,3 +6,3 @@ "use strict";
 var set_version_1 = require("@fluentui/set-version");
-set_version_1.setVersion('@fluentui/react-theme', '0.2.0');
+set_version_1.setVersion('@fluentui/react-theme', '0.3.0');
 //# sourceMappingURL=version.js.map

lib/global/borderRadius.js

 export var borderRadius = {
-    none: 0,
-    small: 2,
-    medium: 4,
-    large: 6,
-    xLarge: 8,
+    none: '0',
+    small: '2px',
+    medium: '4px',
+    large: '6px',
+    xLarge: '8px',
     circular: '50%',
 };
 //# sourceMappingURL=borderRadius.js.map

lib/global/colors.js

@@ -319,3 +319,3 @@ // Global Colors
 };
-var forrest = {
+var forest = {
     shade50: '#0C1501',
@@ -404,2 +404,16 @@ shade40: '#162702',
 };
+var teal = {
+    shade50: '#001516',
+    shade40: '#012729',
+    shade30: '#02494C',
+    shade20: '#026367',
+    shade10: '#02767A',
+    primary: '#038387',
+    tint10: '#159196',
+    tint20: '#2AA0A4',
+    tint30: '#4BB4B7',
+    tint40: '#9BD9DB',
+    tint50: '#C7EBEC',
+    tint60: '#F0FAFA',
+};
 var darkTeal = {
@@ -787,3 +801,3 @@ shade50: '#001010',
     lime: lime,
-    forrest: forrest,
+    forest: forest,
     seafoam: seafoam,
@@ -794,2 +808,3 @@ lightGreen: lightGreen,
     lightTeal: lightTeal,
+    teal: teal,
     darkTeal: darkTeal,
@@ -796,0 +811,0 @@ cyan: cyan,

lib/global/fonts.d.ts

@@ -1,2 +0,2 @@
-import { FontFamilies, FontSizes, FontWeights, LineHeights } from '../types';
+import { FontFamilies, FontSizes, FontWeights, LineHeights, TextAlignments } from '../types';
 export declare const fontSizes: FontSizes;
@@ -6,1 +6,2 @@ export declare const lineHeights: LineHeights;
 export declare const fontFamilies: FontFamilies;
+export declare const textAlignments: TextAlignments;

lib/global/fonts.js

 export var fontSizes = {
     base: {
-        100: 10,
-        200: 12,
-        300: 14,
-        400: 16,
-        500: 20,
-        600: 24,
+        100: '10px',
+        200: '12px',
+        300: '14px',
+        400: '16px',
+        500: '20px',
+        600: '24px',
     },
     hero: {
-        700: 28,
-        800: 32,
-        900: 40,
-        1000: 68,
+        700: '28px',
+        800: '32px',
+        900: '40px',
+        1000: '68px',
     },
@@ -19,14 +19,14 @@ };
     base: {
-        100: 14,
-        200: 16,
-        300: 20,
-        400: 22,
-        500: 28,
-        600: 32,
+        100: '14px',
+        200: '16px',
+        300: '20px',
+        400: '22px',
+        500: '28px',
+        600: '32px',
     },
     hero: {
-        700: 36,
-        800: 40,
-        900: 52,
-        1000: 92,
+        700: '36px',
+        800: '40px',
+        900: '52px',
+        1000: '92px',
     },
@@ -39,8 +39,17 @@ };
 };
-// TODO find asset urls
 export var fontFamilies = {
-    base: '',
-    monospace: '',
-    numeric: '',
+    base: 
+    // eslint-disable-next-line @fluentui/max-len
+    "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+    monospace: "Consolas, 'Courier New', Courier, monospace",
+    numeric: 
+    // eslint-disable-next-line @fluentui/max-len
+    "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
 };
+export var textAlignments = {
+    center: 'center',
+    end: 'end',
+    justify: 'justify',
+    start: 'start',
+};
 //# sourceMappingURL=fonts.js.map

lib/global/index.d.ts

@@ -5,1 +5,2 @@ export * from './colors';
 export * from './borderRadius';
+export * from './utils';

lib/global/index.js

@@ -5,2 +5,3 @@ export * from './colors';
 export * from './borderRadius';
+export * from './utils';
 //# sourceMappingURL=index.js.map

lib/global/strokeWidths.js

 export var strokeWidths = {
-    thin: 1,
-    thick: 2,
-    thicker: 3,
-    thickest: 4,
+    thin: '1px',
+    thick: '2px',
+    thicker: '3px',
+    thickest: '4px',
 };
 //# sourceMappingURL=strokeWidths.js.map

lib/themes/teams/darkTheme.js

 import { __assign } from "tslib";
-import { createNeutralColorTokens, sharedColorTokens } from '../../utils/dark/index';
-import { createShadowLevelTokens } from '../../utils/light/index';
-import { brandColors, sharedColors, fontFamilies, fontWeights, fontSizes, lineHeights, grey } from '../../global/index';
-var common = {
-    sharedColors: sharedColors,
-    sharedColorTokens: sharedColorTokens,
-    fontFamilies: fontFamilies,
-    fontWeights: fontWeights,
-    fontSizes: fontSizes,
-    lineHeights: lineHeights,
-};
+import { createBrandColorTokens, createNeutralColorTokens, ghostColorTokens, sharedColorTokens, transparentColorTokens, } from '../../utils/dark/index';
+import { brandColors, grey } from '../../global/index';
+import { globalTheme } from './globalTheme';
+import { createShadowLevelTokens } from '../../utils/shadows';
 var teamsNeutralColorTokens = createNeutralColorTokens(brandColors.teams, {
@@ -31,3 +24,9 @@ neutralBackground2: grey[14],
 });
-export var teamsDarkTheme = __assign({ brandColors: brandColors.teams, neutralColorTokens: teamsNeutralColorTokens, shadowLevels: createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbientDarker, teamsNeutralColorTokens.neutralShadowKeyDarker) }, common);
+export var teamsDarkTheme = {
+    global: globalTheme,
+    alias: {
+        color: __assign(__assign({}, sharedColorTokens), { neutral: teamsNeutralColorTokens, ghost: ghostColorTokens, transparent: transparentColorTokens, brand: createBrandColorTokens(brandColors.teams) }),
+        shadow: createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey),
+    },
+};
 //# sourceMappingURL=darkTheme.js.map

lib/themes/teams/highContrastTheme.js

 import { __assign } from "tslib";
-import { createNeutralColorTokens, sharedColorTokens } from '../../utils/highContrast/index';
-import { brandColors, sharedColors, fontFamilies, fontWeights, fontSizes, lineHeights } from '../../global/index';
-var common = {
-    sharedColors: sharedColors,
-    sharedColorTokens: sharedColorTokens,
-    fontFamilies: fontFamilies,
-    fontWeights: fontWeights,
-    fontSizes: fontSizes,
-    lineHeights: lineHeights,
+import { createBrandColorTokens, createNeutralColorTokens, ghostColorTokens, sharedColorTokens, transparentColorTokens, } from '../../utils/highContrast/index';
+import { brandColors } from '../../global/index';
+import { globalTheme } from './globalTheme';
+import { createShadowLevelTokens } from '../../utils/shadows';
+var teamsNeutralColorTokens = createNeutralColorTokens(brandColors.teams);
+export var teamsHighContrastTheme = {
+    global: globalTheme,
+    alias: {
+        color: __assign(__assign({}, sharedColorTokens), { neutral: teamsNeutralColorTokens, ghost: ghostColorTokens, transparent: transparentColorTokens, brand: createBrandColorTokens() }),
+        shadow: createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey),
+    },
 };
-export var teamsHighContrastTheme = __assign({ brandColors: brandColors.teams, neutralColorTokens: createNeutralColorTokens(brandColors.teams) }, common);
 //# sourceMappingURL=highContrastTheme.js.map

lib/themes/teams/lightTheme.js

 import { __assign } from "tslib";
-import { createNeutralColorTokens, sharedColorTokens, createShadowLevelTokens } from '../../utils/light/index';
-import { brandColors, sharedColors, fontFamilies, fontWeights, fontSizes, lineHeights } from '../../global/index';
-var common = {
-    sharedColors: sharedColors,
-    sharedColorTokens: sharedColorTokens,
-    fontFamilies: fontFamilies,
-    fontWeights: fontWeights,
-    fontSizes: fontSizes,
-    lineHeights: lineHeights,
+import { createBrandColorTokens, createNeutralColorTokens, sharedColorTokens, transparentColorTokens, ghostColorTokens, } from '../../utils/light/index';
+import { brandColors } from '../../global/index';
+import { globalTheme } from './globalTheme';
+import { createShadowLevelTokens } from '../../utils/shadows';
+var neutralColorTokens = createNeutralColorTokens(brandColors.teams);
+export var teamsLightTheme = {
+    global: globalTheme,
+    alias: {
+        color: __assign(__assign({}, sharedColorTokens), { neutral: neutralColorTokens, ghost: ghostColorTokens, transparent: transparentColorTokens, brand: createBrandColorTokens(brandColors.teams) }),
+        shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-var teamsNeutralColorTokens = createNeutralColorTokens(brandColors.teams);
-export var teamsLightTheme = __assign({ brandColors: brandColors.teams, neutralColorTokens: teamsNeutralColorTokens, shadowLevels: createShadowLevelTokens(teamsNeutralColorTokens.neutralShadowAmbient, teamsNeutralColorTokens.neutralShadowKey) }, common);
 //# sourceMappingURL=lightTheme.js.map

lib/themes/web/darkTheme.js

 import { __assign } from "tslib";
-import { createNeutralColorTokens, sharedColorTokens } from '../../utils/dark/index';
-import { createShadowLevelTokens } from '../../utils/light/index';
-import { brandColors, sharedColors, fontFamilies, fontWeights, fontSizes, lineHeights } from '../../global/index';
-var common = {
-    sharedColors: sharedColors,
-    sharedColorTokens: sharedColorTokens,
-    fontFamilies: fontFamilies,
-    fontWeights: fontWeights,
-    fontSizes: fontSizes,
-    lineHeights: lineHeights,
+import { createBrandColorTokens, createNeutralColorTokens, ghostColorTokens, sharedColorTokens, transparentColorTokens, } from '../../utils/dark/index';
+import { brandColors } from '../../global/index';
+import { globalTheme } from './globalTheme';
+import { createShadowLevelTokens } from '../../utils/shadows';
+var neutralColorTokens = createNeutralColorTokens(brandColors.web);
+export var webDarkTheme = {
+    global: globalTheme,
+    alias: {
+        color: __assign(__assign({}, sharedColorTokens), { neutral: neutralColorTokens, ghost: ghostColorTokens, transparent: transparentColorTokens, brand: createBrandColorTokens(brandColors.web) }),
+        shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-var webNeutralColorTokens = createNeutralColorTokens(brandColors.web);
-export var webDarkTheme = __assign({ brandColors: brandColors.web, neutralColorTokens: webNeutralColorTokens, shadowLevels: createShadowLevelTokens(webNeutralColorTokens.neutralShadowAmbientDarker, webNeutralColorTokens.neutralShadowKeyDarker) }, common);
 //# sourceMappingURL=darkTheme.js.map

lib/themes/web/highContrastTheme.js

 import { __assign } from "tslib";
-import { createNeutralColorTokens, sharedColorTokens } from '../../utils/highContrast/index';
-import { brandColors, sharedColors, fontFamilies, fontWeights, fontSizes, lineHeights } from '../../global/index';
-var common = {
-    sharedColors: sharedColors,
-    sharedColorTokens: sharedColorTokens,
-    fontFamilies: fontFamilies,
-    fontWeights: fontWeights,
-    fontSizes: fontSizes,
-    lineHeights: lineHeights,
+import { createBrandColorTokens, createNeutralColorTokens, ghostColorTokens, sharedColorTokens, transparentColorTokens, } from '../../utils/highContrast/index';
+import { brandColors } from '../../global/index';
+import { globalTheme } from './globalTheme';
+import { createShadowLevelTokens } from '../../utils/shadows';
+var neutralColorTokens = createNeutralColorTokens(brandColors.web);
+export var webHighContrastTheme = {
+    global: globalTheme,
+    alias: {
+        color: __assign(__assign({}, sharedColorTokens), { neutral: neutralColorTokens, ghost: ghostColorTokens, transparent: transparentColorTokens, brand: createBrandColorTokens() }),
+        shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-export var webHighContrastTheme = __assign({ brandColors: brandColors.web, neutralColorTokens: createNeutralColorTokens(brandColors.web) }, common);
 //# sourceMappingURL=highContrastTheme.js.map

lib/themes/web/lightTheme.js

 import { __assign } from "tslib";
-import { createNeutralColorTokens, sharedColorTokens } from '../../utils/light/index';
-import { createShadowLevelTokens } from '../../utils/light/index';
-import { brandColors, sharedColors, fontFamilies, fontWeights, fontSizes, lineHeights } from '../../global/index';
-var common = {
-    sharedColors: sharedColors,
-    sharedColorTokens: sharedColorTokens,
-    fontFamilies: fontFamilies,
-    fontWeights: fontWeights,
-    fontSizes: fontSizes,
-    lineHeights: lineHeights,
+import { createBrandColorTokens, createNeutralColorTokens, ghostColorTokens, sharedColorTokens, transparentColorTokens, } from '../../utils/light/index';
+import { brandColors } from '../../global/index';
+import { globalTheme } from './globalTheme';
+import { createShadowLevelTokens } from '../../utils/shadows';
+var neutralColorTokens = createNeutralColorTokens(brandColors.web);
+export var webLightTheme = {
+    global: globalTheme,
+    alias: {
+        color: __assign(__assign({}, sharedColorTokens), { neutral: neutralColorTokens, ghost: ghostColorTokens, transparent: transparentColorTokens, brand: createBrandColorTokens(brandColors.web) }),
+        shadow: createShadowLevelTokens(neutralColorTokens.neutralShadowAmbient, neutralColorTokens.neutralShadowKey),
+    },
 };
-var webNeutralColorTokens = createNeutralColorTokens(brandColors.web);
-export var webLightTheme = __assign({ brandColors: brandColors.web, neutralColorTokens: webNeutralColorTokens, shadowLevels: createShadowLevelTokens(webNeutralColorTokens.neutralShadowAmbient, webNeutralColorTokens.neutralShadowKey) }, common);
 //# sourceMappingURL=lightTheme.js.map

lib/types.d.ts

@@ -107,2 +107,5 @@ /**
 };
+export declare type BrandVariants = ColorVariants & {
+    shade60: string;
+};
 /**
@@ -128,3 +131,3 @@ * All the global shared colors and their shade/tint variants
     lime: ColorVariants;
-    forrest: ColorVariants;
+    forest: ColorVariants;
     seafoam: ColorVariants;
@@ -135,2 +138,3 @@ lightGreen: ColorVariants;
     lightTeal: ColorVariants;
+    teal: ColorVariants;
     darkTeal: ColorVariants;
@@ -167,19 +171,19 @@ cyan: ColorVariants;
 export declare type ProductBrandColors = {
-    teams: ColorVariants;
-    web: ColorVariants;
+    teams: BrandVariants;
+    web: BrandVariants;
 };
 export declare type FontSizes = {
     base: {
-        100: number;
-        200: number;
-        300: number;
-        400: number;
-        500: number;
-        600: number;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
     };
     hero: {
-        700: number;
-        800: number;
-        900: number;
-        1000: number;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
     };
@@ -198,59 +202,94 @@ };
 };
+export declare type TextAlignment = 'inherit' | 'initial' | 'revert' | 'unset' | 'center' | 'end' | 'start' | 'justify' | 'left' | 'match-parent' | 'right';
+export declare type TextAlignments = {
+    start: TextAlignment;
+    center: TextAlignment;
+    end: TextAlignment;
+    justify: TextAlignment;
+};
 export declare type BorderRadius = {
-    none: number;
-    small: number;
-    medium: number;
-    large: number;
-    xLarge: number;
+    none: string;
+    small: string;
+    medium: string;
+    large: string;
+    xLarge: string;
     circular: string;
 };
 export declare type StrokeWidths = {
-    thin: number;
-    thick: number;
-    thicker: number;
-    thickest: number;
+    thin: string;
+    thick: string;
+    thicker: string;
+    thickest: string;
 };
 /**
- * Each shadow level has an ambient and key variant
- */
-declare type ShadowTokenValue = {
-    ambient: string;
-    key: string;
-};
-/**
  * Design tokens for shadow levels
  */
 export declare type ShadowLevelTokens = {
-    shadow2: ShadowTokenValue;
-    shadow4: ShadowTokenValue;
-    shadow8: ShadowTokenValue;
-    shadow16: ShadowTokenValue;
-    shadow28: ShadowTokenValue;
-    shadow64: ShadowTokenValue;
+    shadow2: string;
+    shadow4: string;
+    shadow8: string;
+    shadow16: string;
+    shadow28: string;
+    shadow64: string;
 };
-/**
- * Theme object
- */
+export declare type GhostColorTokens = {
+    ghostBackground: string;
+    ghostBackgroundHover: string;
+    ghostBackgroundPressed: string;
+    ghostBackgroundSelected: string;
+};
+export declare type TransparentColorTokens = {
+    transparentBackground: string;
+    transparentBackgroundHover: string;
+    transparentBackgroundPressed: string;
+    transparentBackgroundSelected: string;
+};
+export declare type BackgroundColorTokens = {
+    background: string;
+    backgroundHover: string;
+    backgroundPressed: string;
+    backgroundSelected: string;
+};
+export declare type BrandColorTokens = {
+    brandBackground: string;
+    brandBackgroundHover: string;
+    brandBackgroundPressed: string;
+    brandBackgroundSelected: string;
+    brandBackgroundStatic: string;
+};
+export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
 export declare type Theme = {
-    sharedColors: GlobalSharedColors;
-    sharedColorTokens: Record<keyof GlobalSharedColors, SharedColorTokens>;
-    fontSizes: FontSizes;
-    fontWeights: FontWeights;
-    fontFamilies: FontFamilies;
-    lineHeights: LineHeights;
-    brandColors: ColorVariants;
-    neutralColorTokens: NeutralColorTokens;
-    shadowLevels?: ShadowLevelTokens;
+    global: {
+        color: {
+            black: string;
+            white: string;
+            hyperlink: string;
+            disabled: string;
+            selected: string;
+        };
+        palette: GlobalSharedColors & {
+            brand: BrandVariants;
+            grey: Record<Greys, string>;
+        };
+        type: {
+            fontSizes: FontSizes;
+            fontWeights: FontWeights;
+            fontFamilies: FontFamilies;
+            lineHeights: LineHeights;
+            alignment: TextAlignments;
+        };
+        borderRadius: BorderRadius;
+        strokeWidth: StrokeWidths;
+    };
+    alias: {
+        color: Record<keyof GlobalSharedColors, SharedColorTokens> & {
+            neutral: NeutralColorTokens;
+            ghost: BackgroundColorTokens;
+            transparent: BackgroundColorTokens;
+            brand: BrandColorTokens;
+        };
+        shadow: ShadowLevelTokens;
+    };
 };
-export declare type PartialTheme = {
-    sharedColors?: RecursivePartial<Theme['sharedColors']>;
-    sharedColorTokens?: RecursivePartial<Theme['sharedColorTokens']>;
-    fontSizes?: RecursivePartial<Theme['fontSizes']>;
-    fontWeights?: RecursivePartial<Theme['fontWeights']>;
-    fontFamilies?: RecursivePartial<Theme['fontFamilies']>;
-    lineHeights?: RecursivePartial<Theme['lineHeights']>;
-    brandColors?: RecursivePartial<Theme['brandColors']>;
-    neutralColorTokens?: RecursivePartial<Theme['neutralColorTokens']>;
-    shadowLevels?: RecursivePartial<Theme['shadowLevels']>;
-};
+export declare type PartialTheme = RecursivePartial<Theme>;
 export {};

lib/utils/dark/colors.d.ts

@@ -1,2 +0,5 @@
-import { NeutralColorTokens, ColorVariants, SharedColorTokens, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, ColorVariants, SharedColorTokens, GlobalSharedColors, BackgroundColorTokens, BrandVariants, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(brand: BrandVariants): BrandColorTokens;
 export declare function createNeutralColorTokens(brand: ColorVariants, customValues?: {
@@ -3,0 +6,0 @@ [P in keyof NeutralColorTokens]?: string;

lib/utils/dark/colors.js

 import { __assign } from "tslib";
 import { grey, white, black, sharedColors } from '../../global/index';
+export var ghostColorTokens = {
+    background: 'red',
+    backgroundHover: 'red',
+    backgroundPressed: 'red',
+    backgroundSelected: 'red',
+};
+export var transparentColorTokens = {
+    background: 'rgba(255, 0, 0, 0.2)',
+    backgroundHover: 'rgba(255, 0, 0, 0.2)',
+    backgroundPressed: 'rgba(255, 0, 0, 0.2)',
+    backgroundSelected: 'rgba(255, 0, 0, 0.2)',
+};
+export function createBrandColorTokens(brand) {
+    return {
+        brandBackground: brand.shade10,
+        brandBackgroundHover: brand.primary,
+        brandBackgroundPressed: brand.shade40,
+        brandBackgroundSelected: brand.shade20,
+        brandBackgroundStatic: brand.primary,
+    };
+}
 export function createNeutralColorTokens(brand, customValues) {
@@ -28,3 +49,3 @@ if (customValues === void 0) { customValues = {}; }
     lime: createSharedColorTokens(sharedColors.lime),
-    forrest: createSharedColorTokens(sharedColors.forrest),
+    forest: createSharedColorTokens(sharedColors.forest),
     seafoam: createSharedColorTokens(sharedColors.seafoam),
@@ -35,2 +56,3 @@ lightGreen: createSharedColorTokens(sharedColors.lightGreen),
     lightTeal: createSharedColorTokens(sharedColors.lightTeal),
+    teal: createSharedColorTokens(sharedColors.teal),
     darkTeal: createSharedColorTokens(sharedColors.darkTeal),
@@ -37,0 +59,0 @@ cyan: createSharedColorTokens(sharedColors.cyan),

lib/utils/highContrast/colors.d.ts

@@ -1,3 +0,6 @@
-import { NeutralColorTokens, SharedColorTokens, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, SharedColorTokens, GlobalSharedColors, BackgroundColorTokens, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(): BrandColorTokens;
 export declare function createNeutralColorTokens(customValues?: Record<string, string>): NeutralColorTokens;
 export declare const sharedColorTokens: Record<keyof GlobalSharedColors, SharedColorTokens>;

lib/utils/highContrast/colors.js

 import { __assign } from "tslib";
 import { black, disabled, hyperlink, selected, white } from '../../global/index';
+export var ghostColorTokens = {
+    background: 'red',
+    backgroundHover: 'red',
+    backgroundPressed: 'red',
+    backgroundSelected: 'red',
+};
+export var transparentColorTokens = {
+    background: 'rgba(255, 0, 0, 0.2)',
+    backgroundHover: 'rgba(255, 0, 0, 0.2)',
+    backgroundPressed: 'rgba(255, 0, 0, 0.2)',
+    backgroundSelected: 'rgba(255, 0, 0, 0.2)',
+};
+export function createBrandColorTokens() {
+    return {
+        brandBackground: white,
+        brandBackgroundHover: selected,
+        brandBackgroundPressed: selected,
+        brandBackgroundSelected: selected,
+        brandBackgroundStatic: black,
+    };
+}
 export function createNeutralColorTokens(customValues) {
@@ -28,3 +49,3 @@ if (customValues === void 0) { customValues = {}; }
     lime: createSharedColorTokens(),
-    forrest: createSharedColorTokens(),
+    forest: createSharedColorTokens(),
     seafoam: createSharedColorTokens(),
@@ -35,2 +56,3 @@ lightGreen: createSharedColorTokens(),
     lightTeal: createSharedColorTokens(),
+    teal: createSharedColorTokens(),
     darkTeal: createSharedColorTokens(),
@@ -37,0 +59,0 @@ cyan: createSharedColorTokens(),

lib/utils/light/colors.d.ts

@@ -1,2 +0,5 @@
-import { NeutralColorTokens, SharedColorTokens, ColorVariants, GlobalSharedColors } from '../../types';
+import { NeutralColorTokens, SharedColorTokens, ColorVariants, GlobalSharedColors, BackgroundColorTokens, BrandVariants, BrandColorTokens } from '../../types';
+export declare const ghostColorTokens: BackgroundColorTokens;
+export declare const transparentColorTokens: BackgroundColorTokens;
+export declare function createBrandColorTokens(brand: BrandVariants): BrandColorTokens;
 export declare function createNeutralColorTokens(brand: ColorVariants, customValues?: {
@@ -3,0 +6,0 @@ [P in keyof NeutralColorTokens]?: string;

lib/utils/light/colors.js

 import { __assign } from "tslib";
 import { grey, white, sharedColors } from '../../global/index';
+export var ghostColorTokens = {
+    background: 'transparent',
+    backgroundHover: grey[96],
+    backgroundPressed: grey[88],
+    backgroundSelected: grey[92],
+};
+export var transparentColorTokens = {
+    background: 'transparent',
+    backgroundHover: 'transparent',
+    backgroundPressed: 'transparent',
+    backgroundSelected: 'transparent',
+};
+export function createBrandColorTokens(brand) {
+    return {
+        brandBackground: brand.primary,
+        brandBackgroundHover: brand.shade10,
+        brandBackgroundPressed: brand.shade40,
+        brandBackgroundSelected: brand.shade20,
+        brandBackgroundStatic: brand.primary,
+    };
+}
 export function createNeutralColorTokens(brand, customValues) {
@@ -28,3 +49,3 @@ if (customValues === void 0) { customValues = {}; }
     lime: createSharedColorTokens(sharedColors.lime),
-    forrest: createSharedColorTokens(sharedColors.forrest),
+    forest: createSharedColorTokens(sharedColors.forest),
     seafoam: createSharedColorTokens(sharedColors.seafoam),
@@ -35,2 +56,3 @@ lightGreen: createSharedColorTokens(sharedColors.lightGreen),
     lightTeal: createSharedColorTokens(sharedColors.lightTeal),
+    teal: createSharedColorTokens(sharedColors.teal),
     darkTeal: createSharedColorTokens(sharedColors.darkTeal),
@@ -37,0 +59,0 @@ cyan: createSharedColorTokens(sharedColors.cyan),

lib/utils/light/index.d.ts

 export * from './colors';
-export * from './shadows';

lib/utils/light/index.js

 export * from './colors';
-export * from './shadows';
 //# sourceMappingURL=index.js.map

lib/version.js

 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 import { setVersion } from '@fluentui/set-version';
-setVersion('@fluentui/react-theme', '0.2.0');
+setVersion('@fluentui/react-theme', '0.3.0');
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@fluentui/react-theme",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Fluent UI themes",
@@ -24,3 +24,6 @@ "main": "lib-commonjs/index.js",
     "start": "just-scripts dev:storybook",
-    "update-api": "just-scripts update-api"
+    "start-test": "just-scripts jest-watch",
+    "test": "just-scripts test",
+    "update-api": "just-scripts update-api",
+    "update-snapshots": "just-scripts jest -u"
   },
@@ -27,0 +30,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

517938

increased by13.22%

Number of package files

267

increased by11.25%

Lines of code

5761

increased by13.58%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes