feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/tokens/lib-commonjs/alias/darkColor.js

@@ -0,0 +1,197 @@
+/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "generateColorTokens", {
+    enumerable: true,
+    get: function() {
+        return generateColorTokens;
+    }
+});
+const _colors = require("../global/colors.js");
+const generateColorTokens = (brand)=>({
+        colorNeutralForeground1: _colors.white,
+        colorNeutralForeground1Hover: _colors.white,
+        colorNeutralForeground1Pressed: _colors.white,
+        colorNeutralForeground1Selected: _colors.white,
+        colorNeutralForeground2: _colors.grey[84],
+        colorNeutralForeground2Hover: _colors.white,
+        colorNeutralForeground2Pressed: _colors.white,
+        colorNeutralForeground2Selected: _colors.white,
+        colorNeutralForeground2BrandHover: brand[100],
+        colorNeutralForeground2BrandPressed: brand[90],
+        colorNeutralForeground2BrandSelected: brand[100],
+        colorNeutralForeground3: _colors.grey[68],
+        colorNeutralForeground3Hover: _colors.grey[84],
+        colorNeutralForeground3Pressed: _colors.grey[84],
+        colorNeutralForeground3Selected: _colors.grey[84],
+        colorNeutralForeground3BrandHover: brand[100],
+        colorNeutralForeground3BrandPressed: brand[90],
+        colorNeutralForeground3BrandSelected: brand[100],
+        colorNeutralForeground4: _colors.grey[60],
+        colorNeutralForeground5: _colors.grey[68],
+        colorNeutralForeground5Hover: _colors.white,
+        colorNeutralForeground5Pressed: _colors.white,
+        colorNeutralForeground5Selected: _colors.white,
+        colorNeutralForegroundDisabled: _colors.grey[36],
+        colorNeutralForegroundInvertedDisabled: _colors.whiteAlpha[40],
+        colorBrandForegroundLink: brand[100],
+        colorBrandForegroundLinkHover: brand[110],
+        colorBrandForegroundLinkPressed: brand[90],
+        colorBrandForegroundLinkSelected: brand[100],
+        colorNeutralForeground2Link: _colors.grey[84],
+        colorNeutralForeground2LinkHover: _colors.white,
+        colorNeutralForeground2LinkPressed: _colors.white,
+        colorNeutralForeground2LinkSelected: _colors.white,
+        colorCompoundBrandForeground1: brand[100],
+        colorCompoundBrandForeground1Hover: brand[110],
+        colorCompoundBrandForeground1Pressed: brand[90],
+        colorBrandForeground1: brand[100],
+        colorBrandForeground2: brand[110],
+        colorBrandForeground2Hover: brand[130],
+        colorBrandForeground2Pressed: brand[160],
+        colorNeutralForeground1Static: _colors.grey[14],
+        colorNeutralForegroundStaticInverted: _colors.white,
+        colorNeutralForegroundInverted: _colors.grey[14],
+        colorNeutralForegroundInvertedHover: _colors.grey[14],
+        colorNeutralForegroundInvertedPressed: _colors.grey[14],
+        colorNeutralForegroundInvertedSelected: _colors.grey[14],
+        colorNeutralForegroundInverted2: _colors.grey[14],
+        colorNeutralForegroundOnBrand: _colors.white,
+        colorNeutralForegroundInvertedLink: _colors.white,
+        colorNeutralForegroundInvertedLinkHover: _colors.white,
+        colorNeutralForegroundInvertedLinkPressed: _colors.white,
+        colorNeutralForegroundInvertedLinkSelected: _colors.white,
+        colorBrandForegroundInverted: brand[80],
+        colorBrandForegroundInvertedHover: brand[70],
+        colorBrandForegroundInvertedPressed: brand[60],
+        colorBrandForegroundOnLight: brand[80],
+        colorBrandForegroundOnLightHover: brand[70],
+        colorBrandForegroundOnLightPressed: brand[50],
+        colorBrandForegroundOnLightSelected: brand[60],
+        colorNeutralBackground1: _colors.grey[16],
+        colorNeutralBackground1Hover: _colors.grey[24],
+        colorNeutralBackground1Pressed: _colors.grey[12],
+        colorNeutralBackground1Selected: _colors.grey[22],
+        colorNeutralBackground2: _colors.grey[12],
+        colorNeutralBackground2Hover: _colors.grey[20],
+        colorNeutralBackground2Pressed: _colors.grey[8],
+        colorNeutralBackground2Selected: _colors.grey[18],
+        colorNeutralBackground3: _colors.grey[8],
+        colorNeutralBackground3Hover: _colors.grey[16],
+        colorNeutralBackground3Pressed: _colors.grey[4],
+        colorNeutralBackground3Selected: _colors.grey[14],
+        colorNeutralBackground4: _colors.grey[4],
+        colorNeutralBackground4Hover: _colors.grey[12],
+        colorNeutralBackground4Pressed: _colors.black,
+        colorNeutralBackground4Selected: _colors.grey[10],
+        colorNeutralBackground5: _colors.black,
+        colorNeutralBackground5Hover: _colors.grey[8],
+        colorNeutralBackground5Pressed: _colors.grey[2],
+        colorNeutralBackground5Selected: _colors.grey[6],
+        colorNeutralBackground6: _colors.grey[20],
+        colorNeutralBackground7: '#00000000',
+        colorNeutralBackground7Hover: _colors.grey[10],
+        colorNeutralBackground7Pressed: _colors.grey[4],
+        colorNeutralBackground7Selected: '#00000000',
+        colorNeutralBackground8: _colors.grey[16],
+        colorNeutralBackgroundInverted: _colors.white,
+        colorNeutralBackgroundInvertedHover: _colors.grey[96],
+        colorNeutralBackgroundInvertedPressed: _colors.grey[88],
+        colorNeutralBackgroundInvertedSelected: _colors.grey[92],
+        colorNeutralBackgroundStatic: _colors.grey[24],
+        colorNeutralBackgroundAlpha: _colors.grey10Alpha[50],
+        colorNeutralBackgroundAlpha2: _colors.grey12Alpha[70],
+        colorSubtleBackground: 'transparent',
+        colorSubtleBackgroundHover: _colors.grey[22],
+        colorSubtleBackgroundPressed: _colors.grey[18],
+        colorSubtleBackgroundSelected: _colors.grey[20],
+        colorSubtleBackgroundLightAlphaHover: _colors.grey14Alpha[80],
+        colorSubtleBackgroundLightAlphaPressed: _colors.grey14Alpha[50],
+        colorSubtleBackgroundLightAlphaSelected: 'transparent',
+        colorSubtleBackgroundInverted: 'transparent',
+        colorSubtleBackgroundInvertedHover: _colors.blackAlpha[10],
+        colorSubtleBackgroundInvertedPressed: _colors.blackAlpha[30],
+        colorSubtleBackgroundInvertedSelected: _colors.blackAlpha[20],
+        colorTransparentBackground: 'transparent',
+        colorTransparentBackgroundHover: 'transparent',
+        colorTransparentBackgroundPressed: 'transparent',
+        colorTransparentBackgroundSelected: 'transparent',
+        colorNeutralBackgroundDisabled: _colors.grey[8],
+        colorNeutralBackgroundDisabled2: _colors.grey[16],
+        colorNeutralBackgroundInvertedDisabled: _colors.whiteAlpha[10],
+        colorNeutralStencil1: _colors.grey[34],
+        colorNeutralStencil2: _colors.grey[20],
+        colorNeutralStencil1Alpha: _colors.whiteAlpha[10],
+        colorNeutralStencil2Alpha: _colors.whiteAlpha[5],
+        colorBackgroundOverlay: _colors.blackAlpha[50],
+        colorScrollbarOverlay: _colors.whiteAlpha[60],
+        colorBrandBackground: brand[70],
+        colorBrandBackgroundHover: brand[80],
+        colorBrandBackgroundPressed: brand[40],
+        colorBrandBackgroundSelected: brand[60],
+        colorCompoundBrandBackground: brand[100],
+        colorCompoundBrandBackgroundHover: brand[110],
+        colorCompoundBrandBackgroundPressed: brand[90],
+        colorBrandBackgroundStatic: brand[80],
+        colorBrandBackground2: brand[20],
+        colorBrandBackground2Hover: brand[40],
+        colorBrandBackground2Pressed: brand[10],
+        colorBrandBackground3Static: brand[60],
+        colorBrandBackground4Static: brand[40],
+        colorBrandBackgroundInverted: _colors.white,
+        colorBrandBackgroundInvertedHover: brand[160],
+        colorBrandBackgroundInvertedPressed: brand[140],
+        colorBrandBackgroundInvertedSelected: brand[150],
+        colorNeutralCardBackground: _colors.grey[20],
+        colorNeutralCardBackgroundHover: _colors.grey[24],
+        colorNeutralCardBackgroundPressed: _colors.grey[18],
+        colorNeutralCardBackgroundSelected: _colors.grey[22],
+        colorNeutralCardBackgroundDisabled: _colors.grey[8],
+        colorNeutralStrokeAccessible: _colors.grey[68],
+        colorNeutralStrokeAccessibleHover: _colors.grey[74],
+        colorNeutralStrokeAccessiblePressed: _colors.grey[70],
+        colorNeutralStrokeAccessibleSelected: brand[100],
+        colorNeutralStroke1: _colors.grey[40],
+        colorNeutralStroke1Hover: _colors.grey[46],
+        colorNeutralStroke1Pressed: _colors.grey[42],
+        colorNeutralStroke1Selected: _colors.grey[44],
+        colorNeutralStroke2: _colors.grey[32],
+        colorNeutralStroke3: _colors.grey[24],
+        colorNeutralStroke4: _colors.grey[24],
+        colorNeutralStroke4Hover: _colors.grey[18],
+        colorNeutralStroke4Pressed: _colors.grey[14],
+        colorNeutralStroke4Selected: _colors.grey[24],
+        colorNeutralStrokeSubtle: _colors.grey[4],
+        colorNeutralStrokeOnBrand: _colors.grey[16],
+        colorNeutralStrokeOnBrand2: _colors.white,
+        colorNeutralStrokeOnBrand2Hover: _colors.white,
+        colorNeutralStrokeOnBrand2Pressed: _colors.white,
+        colorNeutralStrokeOnBrand2Selected: _colors.white,
+        colorBrandStroke1: brand[100],
+        colorBrandStroke2: brand[50],
+        colorBrandStroke2Hover: brand[50],
+        colorBrandStroke2Pressed: brand[30],
+        colorBrandStroke2Contrast: brand[50],
+        colorCompoundBrandStroke: brand[100],
+        colorCompoundBrandStrokeHover: brand[110],
+        colorCompoundBrandStrokePressed: brand[90],
+        colorNeutralStrokeDisabled: _colors.grey[26],
+        colorNeutralStrokeDisabled2: _colors.grey[24],
+        colorNeutralStrokeInvertedDisabled: _colors.whiteAlpha[40],
+        colorTransparentStroke: 'transparent',
+        colorTransparentStrokeInteractive: 'transparent',
+        colorTransparentStrokeDisabled: 'transparent',
+        colorNeutralStrokeAlpha: _colors.whiteAlpha[10],
+        colorNeutralStrokeAlpha2: _colors.whiteAlpha[20],
+        colorStrokeFocus1: _colors.black,
+        colorStrokeFocus2: _colors.white,
+        colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)',
+        colorNeutralShadowKey: 'rgba(0,0,0,0.28)',
+        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+    });

node_modules/@fluentui/tokens/lib-commonjs/alias/darkColorPalette.js

@@ -0,0 +1,87 @@
+/* color palette used in both darkTheme and teamsDarkTheme */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    colorPaletteTokens: function() {
+        return colorPaletteTokens;
+    },
+    colorStatusTokens: function() {
+        return colorStatusTokens;
+    }
+});
+const _colorPalette = require("../global/colorPalette.js");
+const _sharedColorNames = require("../sharedColorNames.js");
+const _statusColorMapping = require("../statusColorMapping.js");
+const statusColorPaletteTokens = _sharedColorNames.statusSharedColorNames.reduce((acc, sharedColor)=>{
+    const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
+    const sharedColorTokens = {
+        [`colorPalette${color}Background1`]: _colorPalette.statusSharedColors[sharedColor].shade40,
+        [`colorPalette${color}Background2`]: _colorPalette.statusSharedColors[sharedColor].shade30,
+        [`colorPalette${color}Background3`]: _colorPalette.statusSharedColors[sharedColor].primary,
+        [`colorPalette${color}Foreground1`]: _colorPalette.statusSharedColors[sharedColor].tint30,
+        [`colorPalette${color}Foreground2`]: _colorPalette.statusSharedColors[sharedColor].tint40,
+        [`colorPalette${color}Foreground3`]: _colorPalette.statusSharedColors[sharedColor].tint20,
+        [`colorPalette${color}BorderActive`]: _colorPalette.statusSharedColors[sharedColor].tint30,
+        [`colorPalette${color}Border1`]: _colorPalette.statusSharedColors[sharedColor].primary,
+        [`colorPalette${color}Border2`]: _colorPalette.statusSharedColors[sharedColor].tint20
+    };
+    return Object.assign(acc, sharedColorTokens);
+}, {});
+// one-off patches
+statusColorPaletteTokens.colorPaletteRedForeground3 = _colorPalette.statusSharedColors.red.tint30;
+statusColorPaletteTokens.colorPaletteRedBorder2 = _colorPalette.statusSharedColors.red.tint30;
+statusColorPaletteTokens.colorPaletteGreenForeground3 = _colorPalette.statusSharedColors.green.tint40;
+statusColorPaletteTokens.colorPaletteGreenBorder2 = _colorPalette.statusSharedColors.green.tint40;
+statusColorPaletteTokens.colorPaletteDarkOrangeForeground3 = _colorPalette.statusSharedColors.darkOrange.tint30;
+statusColorPaletteTokens.colorPaletteDarkOrangeBorder2 = _colorPalette.statusSharedColors.darkOrange.tint30;
+statusColorPaletteTokens.colorPaletteRedForegroundInverted = _colorPalette.statusSharedColors.red.primary;
+statusColorPaletteTokens.colorPaletteGreenForegroundInverted = _colorPalette.statusSharedColors.green.primary;
+statusColorPaletteTokens.colorPaletteYellowForegroundInverted = _colorPalette.statusSharedColors.yellow.shade30;
+const personaColorPaletteTokens = _sharedColorNames.personaSharedColorNames.reduce((acc, sharedColor)=>{
+    const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
+    const sharedColorTokens = {
+        [`colorPalette${color}Background2`]: _colorPalette.personaSharedColors[sharedColor].shade30,
+        [`colorPalette${color}Foreground2`]: _colorPalette.personaSharedColors[sharedColor].tint40,
+        [`colorPalette${color}BorderActive`]: _colorPalette.personaSharedColors[sharedColor].tint30
+    };
+    return Object.assign(acc, sharedColorTokens);
+}, {});
+// one-off patches
+personaColorPaletteTokens.colorPaletteDarkRedBackground2 = _colorPalette.personaSharedColors.darkRed.shade20;
+personaColorPaletteTokens.colorPalettePlumBackground2 = _colorPalette.personaSharedColors.plum.shade20;
+const colorPaletteTokens = {
+    ...statusColorPaletteTokens,
+    ...personaColorPaletteTokens
+};
+const colorStatusTokens = Object.entries(_statusColorMapping.statusColorMapping).reduce((acc, [statusColor, sharedColor])=>{
+    const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1);
+    // TODO: double check the mapping with design - see the one-off patches above
+    const statusColorTokens = {
+        [`colorStatus${color}Background1`]: _colorPalette.mappedStatusColors[sharedColor].shade40,
+        [`colorStatus${color}Background2`]: _colorPalette.mappedStatusColors[sharedColor].shade30,
+        [`colorStatus${color}Background3`]: _colorPalette.mappedStatusColors[sharedColor].primary,
+        [`colorStatus${color}Foreground1`]: _colorPalette.mappedStatusColors[sharedColor].tint30,
+        [`colorStatus${color}Foreground2`]: _colorPalette.mappedStatusColors[sharedColor].tint40,
+        [`colorStatus${color}Foreground3`]: _colorPalette.mappedStatusColors[sharedColor].tint20,
+        [`colorStatus${color}BorderActive`]: _colorPalette.mappedStatusColors[sharedColor].tint30,
+        [`colorStatus${color}ForegroundInverted`]: _colorPalette.mappedStatusColors[sharedColor].shade10,
+        [`colorStatus${color}Border1`]: _colorPalette.mappedStatusColors[sharedColor].primary,
+        [`colorStatus${color}Border2`]: _colorPalette.mappedStatusColors[sharedColor].tint20
+    };
+    return Object.assign(acc, statusColorTokens);
+}, {});
+// one-off overrides for colorStatus tokens
+colorStatusTokens.colorStatusDangerBackground3Hover = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.danger].shade10;
+colorStatusTokens.colorStatusDangerBackground3Pressed = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.danger].shade20;
+colorStatusTokens.colorStatusDangerForeground3 = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.danger].tint40;
+colorStatusTokens.colorStatusDangerBorder2 = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.danger].tint30;
+colorStatusTokens.colorStatusSuccessForeground3 = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.success].tint40;
+colorStatusTokens.colorStatusSuccessBorder2 = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.success].tint40;
+colorStatusTokens.colorStatusWarningForegroundInverted = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.warning].shade20;

node_modules/@fluentui/tokens/lib-commonjs/alias/highContrastColor.js

@@ -0,0 +1,197 @@
+/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "generateColorTokens", {
+    enumerable: true,
+    get: function() {
+        return generateColorTokens;
+    }
+});
+const _colors = require("../global/colors.js");
+const generateColorTokens = ()=>({
+        colorNeutralForeground1: _colors.hcCanvasText,
+        colorNeutralForeground1Hover: _colors.hcHighlightText,
+        colorNeutralForeground1Pressed: _colors.hcHighlightText,
+        colorNeutralForeground1Selected: _colors.hcHighlightText,
+        colorNeutralForeground2: _colors.hcCanvasText,
+        colorNeutralForeground2Hover: _colors.hcHighlightText,
+        colorNeutralForeground2Pressed: _colors.hcHighlightText,
+        colorNeutralForeground2Selected: _colors.hcHighlightText,
+        colorNeutralForeground2BrandHover: _colors.hcHighlightText,
+        colorNeutralForeground2BrandPressed: _colors.hcHighlightText,
+        colorNeutralForeground2BrandSelected: _colors.hcHighlightText,
+        colorNeutralForeground3: _colors.hcCanvasText,
+        colorNeutralForeground3Hover: _colors.hcHighlightText,
+        colorNeutralForeground3Pressed: _colors.hcHighlightText,
+        colorNeutralForeground3Selected: _colors.hcHighlightText,
+        colorNeutralForeground3BrandHover: _colors.hcHighlightText,
+        colorNeutralForeground3BrandPressed: _colors.hcHighlightText,
+        colorNeutralForeground3BrandSelected: _colors.hcHighlightText,
+        colorNeutralForeground4: _colors.hcCanvasText,
+        colorNeutralForeground5: _colors.hcCanvasText,
+        colorNeutralForeground5Hover: _colors.hcHighlightText,
+        colorNeutralForeground5Pressed: _colors.hcHighlightText,
+        colorNeutralForeground5Selected: _colors.hcHighlightText,
+        colorNeutralForegroundDisabled: _colors.hcDisabled,
+        colorNeutralForegroundInvertedDisabled: _colors.hcDisabled,
+        colorBrandForegroundLink: _colors.hcHyperlink,
+        colorBrandForegroundLinkHover: _colors.hcHyperlink,
+        colorBrandForegroundLinkPressed: _colors.hcHyperlink,
+        colorBrandForegroundLinkSelected: _colors.hcHyperlink,
+        colorNeutralForeground2Link: _colors.hcHyperlink,
+        colorNeutralForeground2LinkHover: _colors.hcHyperlink,
+        colorNeutralForeground2LinkPressed: _colors.hcHyperlink,
+        colorNeutralForeground2LinkSelected: _colors.hcHyperlink,
+        colorCompoundBrandForeground1: _colors.hcHighlight,
+        colorCompoundBrandForeground1Hover: _colors.hcHighlight,
+        colorCompoundBrandForeground1Pressed: _colors.hcHighlight,
+        colorBrandForeground1: _colors.hcCanvasText,
+        colorBrandForeground2: _colors.hcCanvasText,
+        colorBrandForeground2Hover: _colors.hcCanvasText,
+        colorBrandForeground2Pressed: _colors.hcCanvasText,
+        colorNeutralForeground1Static: _colors.hcCanvas,
+        colorNeutralForegroundStaticInverted: _colors.hcCanvasText,
+        colorNeutralForegroundInverted: _colors.hcHighlightText,
+        colorNeutralForegroundInvertedHover: _colors.hcHighlightText,
+        colorNeutralForegroundInvertedPressed: _colors.hcHighlightText,
+        colorNeutralForegroundInvertedSelected: _colors.hcHighlightText,
+        colorNeutralForegroundInverted2: _colors.hcCanvasText,
+        colorNeutralForegroundOnBrand: _colors.hcButtonText,
+        colorNeutralForegroundInvertedLink: _colors.hcHyperlink,
+        colorNeutralForegroundInvertedLinkHover: _colors.hcHyperlink,
+        colorNeutralForegroundInvertedLinkPressed: _colors.hcHyperlink,
+        colorNeutralForegroundInvertedLinkSelected: _colors.hcHyperlink,
+        colorBrandForegroundInverted: _colors.hcCanvasText,
+        colorBrandForegroundInvertedHover: _colors.hcHighlightText,
+        colorBrandForegroundInvertedPressed: _colors.hcHighlightText,
+        colorBrandForegroundOnLight: _colors.hcButtonText,
+        colorBrandForegroundOnLightHover: _colors.hcHighlightText,
+        colorBrandForegroundOnLightPressed: _colors.hcHighlightText,
+        colorBrandForegroundOnLightSelected: _colors.hcHighlightText,
+        colorNeutralBackground1: _colors.hcCanvas,
+        colorNeutralBackground1Hover: _colors.hcHighlight,
+        colorNeutralBackground1Pressed: _colors.hcHighlight,
+        colorNeutralBackground1Selected: _colors.hcHighlight,
+        colorNeutralBackground2: _colors.hcCanvas,
+        colorNeutralBackground2Hover: _colors.hcHighlight,
+        colorNeutralBackground2Pressed: _colors.hcHighlight,
+        colorNeutralBackground2Selected: _colors.hcHighlight,
+        colorNeutralBackground3: _colors.hcCanvas,
+        colorNeutralBackground3Hover: _colors.hcHighlight,
+        colorNeutralBackground3Pressed: _colors.hcHighlight,
+        colorNeutralBackground3Selected: _colors.hcHighlight,
+        colorNeutralBackground4: _colors.hcCanvas,
+        colorNeutralBackground4Hover: _colors.hcHighlight,
+        colorNeutralBackground4Pressed: _colors.hcHighlight,
+        colorNeutralBackground4Selected: _colors.hcHighlight,
+        colorNeutralBackground5: _colors.hcCanvas,
+        colorNeutralBackground5Hover: _colors.hcHighlight,
+        colorNeutralBackground5Pressed: _colors.hcHighlight,
+        colorNeutralBackground5Selected: _colors.hcHighlight,
+        colorNeutralBackground6: _colors.hcCanvas,
+        colorNeutralBackground7: _colors.hcCanvas,
+        colorNeutralBackground7Hover: _colors.hcHighlight,
+        colorNeutralBackground7Pressed: _colors.hcHighlight,
+        colorNeutralBackground7Selected: _colors.hcHighlight,
+        colorNeutralBackground8: _colors.hcCanvas,
+        colorNeutralBackgroundInverted: _colors.hcCanvas,
+        colorNeutralBackgroundInvertedHover: _colors.hcHighlight,
+        colorNeutralBackgroundInvertedPressed: _colors.hcHighlight,
+        colorNeutralBackgroundInvertedSelected: _colors.hcHighlight,
+        colorNeutralBackgroundStatic: _colors.hcCanvas,
+        colorNeutralBackgroundAlpha: _colors.hcCanvas,
+        colorNeutralBackgroundAlpha2: _colors.hcCanvas,
+        colorSubtleBackground: 'transparent',
+        colorSubtleBackgroundHover: _colors.hcHighlight,
+        colorSubtleBackgroundPressed: _colors.hcHighlight,
+        colorSubtleBackgroundSelected: _colors.hcHighlight,
+        colorSubtleBackgroundLightAlphaHover: _colors.hcHighlight,
+        colorSubtleBackgroundLightAlphaPressed: _colors.hcHighlight,
+        colorSubtleBackgroundLightAlphaSelected: _colors.hcHighlight,
+        colorSubtleBackgroundInverted: 'transparent',
+        colorSubtleBackgroundInvertedHover: _colors.hcHighlight,
+        colorSubtleBackgroundInvertedPressed: _colors.hcHighlight,
+        colorSubtleBackgroundInvertedSelected: _colors.hcHighlight,
+        colorTransparentBackground: 'transparent',
+        colorTransparentBackgroundHover: _colors.hcHighlight,
+        colorTransparentBackgroundPressed: _colors.hcHighlight,
+        colorTransparentBackgroundSelected: _colors.hcHighlight,
+        colorNeutralBackgroundDisabled: _colors.hcCanvas,
+        colorNeutralBackgroundDisabled2: _colors.hcDisabled,
+        colorNeutralBackgroundInvertedDisabled: _colors.hcCanvas,
+        colorNeutralStencil1: _colors.hcCanvasText,
+        colorNeutralStencil2: _colors.hcCanvasText,
+        colorNeutralStencil1Alpha: _colors.hcCanvasText,
+        colorNeutralStencil2Alpha: _colors.hcCanvasText,
+        colorBackgroundOverlay: _colors.blackAlpha[50],
+        colorScrollbarOverlay: _colors.hcButtonFace,
+        colorBrandBackground: _colors.hcButtonFace,
+        colorBrandBackgroundHover: _colors.hcHighlight,
+        colorBrandBackgroundPressed: _colors.hcHighlight,
+        colorBrandBackgroundSelected: _colors.hcHighlight,
+        colorCompoundBrandBackground: _colors.hcHighlight,
+        colorCompoundBrandBackgroundHover: _colors.hcHighlight,
+        colorCompoundBrandBackgroundPressed: _colors.hcHighlight,
+        colorBrandBackgroundStatic: _colors.hcCanvas,
+        colorBrandBackground2: _colors.hcCanvas,
+        colorBrandBackground2Hover: _colors.hcCanvas,
+        colorBrandBackground2Pressed: _colors.hcCanvas,
+        colorBrandBackground3Static: _colors.hcCanvas,
+        colorBrandBackground4Static: _colors.hcCanvas,
+        colorBrandBackgroundInverted: _colors.hcButtonFace,
+        colorBrandBackgroundInvertedHover: _colors.hcHighlight,
+        colorBrandBackgroundInvertedPressed: _colors.hcHighlight,
+        colorBrandBackgroundInvertedSelected: _colors.hcHighlight,
+        colorNeutralCardBackground: _colors.hcCanvas,
+        colorNeutralCardBackgroundHover: _colors.hcHighlight,
+        colorNeutralCardBackgroundPressed: _colors.hcHighlight,
+        colorNeutralCardBackgroundSelected: _colors.hcHighlight,
+        colorNeutralCardBackgroundDisabled: _colors.hcCanvas,
+        colorNeutralStrokeAccessible: _colors.hcCanvasText,
+        colorNeutralStrokeAccessibleHover: _colors.hcHighlight,
+        colorNeutralStrokeAccessiblePressed: _colors.hcHighlight,
+        colorNeutralStrokeAccessibleSelected: _colors.hcHighlight,
+        colorNeutralStroke1: _colors.hcCanvasText,
+        colorNeutralStroke1Hover: _colors.hcHighlight,
+        colorNeutralStroke1Pressed: _colors.hcHighlight,
+        colorNeutralStroke1Selected: _colors.hcHighlight,
+        colorNeutralStroke2: _colors.hcCanvasText,
+        colorNeutralStroke3: _colors.hcCanvasText,
+        colorNeutralStroke4: _colors.hcCanvasText,
+        colorNeutralStroke4Hover: _colors.hcHighlight,
+        colorNeutralStroke4Pressed: _colors.hcHighlight,
+        colorNeutralStroke4Selected: _colors.hcHighlight,
+        colorNeutralStrokeSubtle: _colors.hcCanvasText,
+        colorNeutralStrokeOnBrand: _colors.hcCanvas,
+        colorNeutralStrokeOnBrand2: _colors.hcCanvasText,
+        colorNeutralStrokeOnBrand2Hover: _colors.hcCanvasText,
+        colorNeutralStrokeOnBrand2Pressed: _colors.hcCanvasText,
+        colorNeutralStrokeOnBrand2Selected: _colors.hcCanvasText,
+        colorBrandStroke1: _colors.hcCanvasText,
+        colorBrandStroke2: _colors.hcCanvasText,
+        colorBrandStroke2Hover: _colors.hcHighlight,
+        colorBrandStroke2Pressed: _colors.hcHighlight,
+        colorBrandStroke2Contrast: _colors.hcCanvas,
+        colorCompoundBrandStroke: _colors.hcHighlight,
+        colorCompoundBrandStrokeHover: _colors.hcHighlight,
+        colorCompoundBrandStrokePressed: _colors.hcHighlight,
+        colorNeutralStrokeDisabled: _colors.hcDisabled,
+        colorNeutralStrokeDisabled2: _colors.hcDisabled,
+        colorNeutralStrokeInvertedDisabled: _colors.hcDisabled,
+        colorTransparentStroke: _colors.hcCanvasText,
+        colorTransparentStrokeInteractive: _colors.hcHighlight,
+        colorTransparentStrokeDisabled: _colors.hcDisabled,
+        colorNeutralStrokeAlpha: _colors.hcCanvasText,
+        colorNeutralStrokeAlpha2: _colors.hcCanvas,
+        colorStrokeFocus1: _colors.hcCanvas,
+        colorStrokeFocus2: _colors.hcHighlight,
+        colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)',
+        colorNeutralShadowKey: 'rgba(0,0,0,0.28)',
+        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+    });

node_modules/@fluentui/tokens/lib-commonjs/alias/highContrastColorPalette.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    colorPaletteTokens: function() {
+        return colorPaletteTokens;
+    },
+    colorStatusTokens: function() {
+        return colorStatusTokens;
+    }
+});
+const _colors = require("../global/colors.js");
+const _sharedColorNames = require("../sharedColorNames.js");
+const _statusColorMapping = require("../statusColorMapping.js");
+const statusColorPaletteTokens = _sharedColorNames.statusSharedColorNames.reduce((acc, sharedColor)=>{
+    const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
+    const sharedColorTokens = {
+        [`colorPalette${color}Background1`]: _colors.hcCanvas,
+        [`colorPalette${color}Background2`]: _colors.hcCanvas,
+        [`colorPalette${color}Background3`]: _colors.hcCanvasText,
+        [`colorPalette${color}Foreground1`]: _colors.hcCanvasText,
+        [`colorPalette${color}Foreground2`]: _colors.hcCanvasText,
+        [`colorPalette${color}Foreground3`]: _colors.hcCanvasText,
+        [`colorPalette${color}BorderActive`]: _colors.hcHighlight,
+        [`colorPalette${color}Border1`]: _colors.hcCanvasText,
+        [`colorPalette${color}Border2`]: _colors.hcCanvasText
+    };
+    return Object.assign(acc, sharedColorTokens);
+}, {});
+// one-off patches
+statusColorPaletteTokens.colorPaletteRedForegroundInverted = _colors.hcCanvasText;
+statusColorPaletteTokens.colorPaletteGreenForegroundInverted = _colors.hcCanvasText;
+statusColorPaletteTokens.colorPaletteYellowForegroundInverted = _colors.hcCanvasText;
+const personaColorPaletteTokens = _sharedColorNames.personaSharedColorNames.reduce((acc, sharedColor)=>{
+    const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
+    const sharedColorTokens = {
+        [`colorPalette${color}Background2`]: _colors.hcCanvas,
+        [`colorPalette${color}Foreground2`]: _colors.hcCanvasText,
+        [`colorPalette${color}BorderActive`]: _colors.hcHighlight
+    };
+    return Object.assign(acc, sharedColorTokens);
+}, {});
+const colorPaletteTokens = {
+    ...statusColorPaletteTokens,
+    ...personaColorPaletteTokens
+};
+const colorStatusTokens = Object.entries(_statusColorMapping.statusColorMapping).reduce((acc, [statusColor, sharedColor])=>{
+    const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1);
+    // TODO: double check the mapping with design
+    const statusColorTokens = {
+        [`colorStatus${color}Background1`]: _colors.hcCanvas,
+        [`colorStatus${color}Background2`]: _colors.hcCanvas,
+        [`colorStatus${color}Background3`]: _colors.hcCanvasText,
+        [`colorStatus${color}Foreground1`]: _colors.hcCanvasText,
+        [`colorStatus${color}Foreground2`]: _colors.hcCanvasText,
+        [`colorStatus${color}Foreground3`]: _colors.hcCanvasText,
+        [`colorStatus${color}BorderActive`]: _colors.hcHighlight,
+        [`colorStatus${color}ForegroundInverted`]: _colors.hcCanvasText,
+        [`colorStatus${color}Border1`]: _colors.hcCanvasText,
+        [`colorStatus${color}Border2`]: _colors.hcCanvasText
+    };
+    return Object.assign(acc, statusColorTokens);
+}, {});
+// one-off overrides for colorStatus tokens
+colorStatusTokens.colorStatusDangerBackground3Hover = _colors.hcHighlight;
+colorStatusTokens.colorStatusDangerBackground3Pressed = _colors.hcHighlight;

node_modules/@fluentui/tokens/lib-commonjs/alias/lightColor.js

@@ -0,0 +1,197 @@
+/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "generateColorTokens", {
+    enumerable: true,
+    get: function() {
+        return generateColorTokens;
+    }
+});
+const _colors = require("../global/colors.js");
+const generateColorTokens = (brand)=>({
+        colorNeutralForeground1: _colors.grey[14],
+        colorNeutralForeground1Hover: _colors.grey[14],
+        colorNeutralForeground1Pressed: _colors.grey[14],
+        colorNeutralForeground1Selected: _colors.grey[14],
+        colorNeutralForeground2: _colors.grey[26],
+        colorNeutralForeground2Hover: _colors.grey[14],
+        colorNeutralForeground2Pressed: _colors.grey[14],
+        colorNeutralForeground2Selected: _colors.grey[14],
+        colorNeutralForeground2BrandHover: brand[80],
+        colorNeutralForeground2BrandPressed: brand[70],
+        colorNeutralForeground2BrandSelected: brand[80],
+        colorNeutralForeground3: _colors.grey[38],
+        colorNeutralForeground3Hover: _colors.grey[26],
+        colorNeutralForeground3Pressed: _colors.grey[26],
+        colorNeutralForeground3Selected: _colors.grey[26],
+        colorNeutralForeground3BrandHover: brand[80],
+        colorNeutralForeground3BrandPressed: brand[70],
+        colorNeutralForeground3BrandSelected: brand[80],
+        colorNeutralForeground4: _colors.grey[44],
+        colorNeutralForeground5: _colors.grey[38],
+        colorNeutralForeground5Hover: _colors.grey[14],
+        colorNeutralForeground5Pressed: _colors.grey[14],
+        colorNeutralForeground5Selected: _colors.grey[14],
+        colorNeutralForegroundDisabled: _colors.grey[74],
+        colorNeutralForegroundInvertedDisabled: _colors.whiteAlpha[40],
+        colorBrandForegroundLink: brand[70],
+        colorBrandForegroundLinkHover: brand[60],
+        colorBrandForegroundLinkPressed: brand[40],
+        colorBrandForegroundLinkSelected: brand[70],
+        colorNeutralForeground2Link: _colors.grey[26],
+        colorNeutralForeground2LinkHover: _colors.grey[14],
+        colorNeutralForeground2LinkPressed: _colors.grey[14],
+        colorNeutralForeground2LinkSelected: _colors.grey[14],
+        colorCompoundBrandForeground1: brand[80],
+        colorCompoundBrandForeground1Hover: brand[70],
+        colorCompoundBrandForeground1Pressed: brand[60],
+        colorBrandForeground1: brand[80],
+        colorBrandForeground2: brand[70],
+        colorBrandForeground2Hover: brand[60],
+        colorBrandForeground2Pressed: brand[30],
+        colorNeutralForeground1Static: _colors.grey[14],
+        colorNeutralForegroundStaticInverted: _colors.white,
+        colorNeutralForegroundInverted: _colors.white,
+        colorNeutralForegroundInvertedHover: _colors.white,
+        colorNeutralForegroundInvertedPressed: _colors.white,
+        colorNeutralForegroundInvertedSelected: _colors.white,
+        colorNeutralForegroundInverted2: _colors.white,
+        colorNeutralForegroundOnBrand: _colors.white,
+        colorNeutralForegroundInvertedLink: _colors.white,
+        colorNeutralForegroundInvertedLinkHover: _colors.white,
+        colorNeutralForegroundInvertedLinkPressed: _colors.white,
+        colorNeutralForegroundInvertedLinkSelected: _colors.white,
+        colorBrandForegroundInverted: brand[100],
+        colorBrandForegroundInvertedHover: brand[110],
+        colorBrandForegroundInvertedPressed: brand[100],
+        colorBrandForegroundOnLight: brand[80],
+        colorBrandForegroundOnLightHover: brand[70],
+        colorBrandForegroundOnLightPressed: brand[50],
+        colorBrandForegroundOnLightSelected: brand[60],
+        colorNeutralBackground1: _colors.white,
+        colorNeutralBackground1Hover: _colors.grey[96],
+        colorNeutralBackground1Pressed: _colors.grey[88],
+        colorNeutralBackground1Selected: _colors.grey[92],
+        colorNeutralBackground2: _colors.grey[98],
+        colorNeutralBackground2Hover: _colors.grey[94],
+        colorNeutralBackground2Pressed: _colors.grey[86],
+        colorNeutralBackground2Selected: _colors.grey[90],
+        colorNeutralBackground3: _colors.grey[96],
+        colorNeutralBackground3Hover: _colors.grey[92],
+        colorNeutralBackground3Pressed: _colors.grey[84],
+        colorNeutralBackground3Selected: _colors.grey[88],
+        colorNeutralBackground4: _colors.grey[94],
+        colorNeutralBackground4Hover: _colors.grey[98],
+        colorNeutralBackground4Pressed: _colors.grey[96],
+        colorNeutralBackground4Selected: _colors.white,
+        colorNeutralBackground5: _colors.grey[92],
+        colorNeutralBackground5Hover: _colors.grey[96],
+        colorNeutralBackground5Pressed: _colors.grey[94],
+        colorNeutralBackground5Selected: _colors.grey[98],
+        colorNeutralBackground6: _colors.grey[90],
+        colorNeutralBackground7: '#00000000',
+        colorNeutralBackground7Hover: _colors.grey[92],
+        colorNeutralBackground7Pressed: _colors.grey[84],
+        colorNeutralBackground7Selected: '#00000000',
+        colorNeutralBackground8: _colors.grey[99],
+        colorNeutralBackgroundInverted: _colors.grey[16],
+        colorNeutralBackgroundInvertedHover: _colors.grey[24],
+        colorNeutralBackgroundInvertedPressed: _colors.grey[12],
+        colorNeutralBackgroundInvertedSelected: _colors.grey[22],
+        colorNeutralBackgroundStatic: _colors.grey[20],
+        colorNeutralBackgroundAlpha: _colors.whiteAlpha[50],
+        colorNeutralBackgroundAlpha2: _colors.whiteAlpha[80],
+        colorSubtleBackground: 'transparent',
+        colorSubtleBackgroundHover: _colors.grey[96],
+        colorSubtleBackgroundPressed: _colors.grey[88],
+        colorSubtleBackgroundSelected: _colors.grey[92],
+        colorSubtleBackgroundLightAlphaHover: _colors.whiteAlpha[70],
+        colorSubtleBackgroundLightAlphaPressed: _colors.whiteAlpha[50],
+        colorSubtleBackgroundLightAlphaSelected: 'transparent',
+        colorSubtleBackgroundInverted: 'transparent',
+        colorSubtleBackgroundInvertedHover: _colors.blackAlpha[10],
+        colorSubtleBackgroundInvertedPressed: _colors.blackAlpha[30],
+        colorSubtleBackgroundInvertedSelected: _colors.blackAlpha[20],
+        colorTransparentBackground: 'transparent',
+        colorTransparentBackgroundHover: 'transparent',
+        colorTransparentBackgroundPressed: 'transparent',
+        colorTransparentBackgroundSelected: 'transparent',
+        colorNeutralBackgroundDisabled: _colors.grey[94],
+        colorNeutralBackgroundDisabled2: _colors.white,
+        colorNeutralBackgroundInvertedDisabled: _colors.whiteAlpha[10],
+        colorNeutralStencil1: _colors.grey[90],
+        colorNeutralStencil2: _colors.grey[98],
+        colorNeutralStencil1Alpha: _colors.blackAlpha[10],
+        colorNeutralStencil2Alpha: _colors.blackAlpha[5],
+        colorBackgroundOverlay: _colors.blackAlpha[40],
+        colorScrollbarOverlay: _colors.blackAlpha[50],
+        colorBrandBackground: brand[80],
+        colorBrandBackgroundHover: brand[70],
+        colorBrandBackgroundPressed: brand[40],
+        colorBrandBackgroundSelected: brand[60],
+        colorCompoundBrandBackground: brand[80],
+        colorCompoundBrandBackgroundHover: brand[70],
+        colorCompoundBrandBackgroundPressed: brand[60],
+        colorBrandBackgroundStatic: brand[80],
+        colorBrandBackground2: brand[160],
+        colorBrandBackground2Hover: brand[150],
+        colorBrandBackground2Pressed: brand[130],
+        colorBrandBackground3Static: brand[60],
+        colorBrandBackground4Static: brand[40],
+        colorBrandBackgroundInverted: _colors.white,
+        colorBrandBackgroundInvertedHover: brand[160],
+        colorBrandBackgroundInvertedPressed: brand[140],
+        colorBrandBackgroundInvertedSelected: brand[150],
+        colorNeutralCardBackground: _colors.grey[98],
+        colorNeutralCardBackgroundHover: _colors.white,
+        colorNeutralCardBackgroundPressed: _colors.grey[96],
+        colorNeutralCardBackgroundSelected: _colors.grey[92],
+        colorNeutralCardBackgroundDisabled: _colors.grey[94],
+        colorNeutralStrokeAccessible: _colors.grey[38],
+        colorNeutralStrokeAccessibleHover: _colors.grey[34],
+        colorNeutralStrokeAccessiblePressed: _colors.grey[30],
+        colorNeutralStrokeAccessibleSelected: brand[80],
+        colorNeutralStroke1: _colors.grey[82],
+        colorNeutralStroke1Hover: _colors.grey[78],
+        colorNeutralStroke1Pressed: _colors.grey[70],
+        colorNeutralStroke1Selected: _colors.grey[74],
+        colorNeutralStroke2: _colors.grey[88],
+        colorNeutralStroke3: _colors.grey[94],
+        colorNeutralStroke4: _colors.grey[92],
+        colorNeutralStroke4Hover: _colors.grey[88],
+        colorNeutralStroke4Pressed: _colors.grey[84],
+        colorNeutralStroke4Selected: _colors.grey[92],
+        colorNeutralStrokeSubtle: _colors.grey[88],
+        colorNeutralStrokeOnBrand: _colors.white,
+        colorNeutralStrokeOnBrand2: _colors.white,
+        colorNeutralStrokeOnBrand2Hover: _colors.white,
+        colorNeutralStrokeOnBrand2Pressed: _colors.white,
+        colorNeutralStrokeOnBrand2Selected: _colors.white,
+        colorBrandStroke1: brand[80],
+        colorBrandStroke2: brand[140],
+        colorBrandStroke2Hover: brand[120],
+        colorBrandStroke2Pressed: brand[80],
+        colorBrandStroke2Contrast: brand[140],
+        colorCompoundBrandStroke: brand[80],
+        colorCompoundBrandStrokeHover: brand[70],
+        colorCompoundBrandStrokePressed: brand[60],
+        colorNeutralStrokeDisabled: _colors.grey[88],
+        colorNeutralStrokeDisabled2: _colors.grey[92],
+        colorNeutralStrokeInvertedDisabled: _colors.whiteAlpha[40],
+        colorTransparentStroke: 'transparent',
+        colorTransparentStrokeInteractive: 'transparent',
+        colorTransparentStrokeDisabled: 'transparent',
+        colorNeutralStrokeAlpha: _colors.blackAlpha[5],
+        colorNeutralStrokeAlpha2: _colors.whiteAlpha[20],
+        colorStrokeFocus1: _colors.white,
+        colorStrokeFocus2: _colors.black,
+        colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
+        colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
+        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
+        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
+        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
+        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
+        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+    });

node_modules/@fluentui/tokens/lib-commonjs/alias/lightColorPalette.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    colorPaletteTokens: function() {
+        return colorPaletteTokens;
+    },
+    colorStatusTokens: function() {
+        return colorStatusTokens;
+    }
+});
+const _colorPalette = require("../global/colorPalette.js");
+const _sharedColorNames = require("../sharedColorNames.js");
+const _statusColorMapping = require("../statusColorMapping.js");
+const statusColorPaletteTokens = _sharedColorNames.statusSharedColorNames.reduce((acc, sharedColor)=>{
+    const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
+    const sharedColorTokens = {
+        [`colorPalette${color}Background1`]: _colorPalette.statusSharedColors[sharedColor].tint60,
+        [`colorPalette${color}Background2`]: _colorPalette.statusSharedColors[sharedColor].tint40,
+        [`colorPalette${color}Background3`]: _colorPalette.statusSharedColors[sharedColor].primary,
+        [`colorPalette${color}Foreground1`]: _colorPalette.statusSharedColors[sharedColor].shade10,
+        [`colorPalette${color}Foreground2`]: _colorPalette.statusSharedColors[sharedColor].shade30,
+        [`colorPalette${color}Foreground3`]: _colorPalette.statusSharedColors[sharedColor].primary,
+        [`colorPalette${color}BorderActive`]: _colorPalette.statusSharedColors[sharedColor].primary,
+        [`colorPalette${color}Border1`]: _colorPalette.statusSharedColors[sharedColor].tint40,
+        [`colorPalette${color}Border2`]: _colorPalette.statusSharedColors[sharedColor].primary
+    };
+    return Object.assign(acc, sharedColorTokens);
+}, {});
+// one-off patch for yellow
+statusColorPaletteTokens.colorPaletteYellowForeground1 = _colorPalette.statusSharedColors.yellow.shade30;
+statusColorPaletteTokens.colorPaletteRedForegroundInverted = _colorPalette.statusSharedColors.red.tint20;
+statusColorPaletteTokens.colorPaletteGreenForegroundInverted = _colorPalette.statusSharedColors.green.tint20;
+statusColorPaletteTokens.colorPaletteYellowForegroundInverted = _colorPalette.statusSharedColors.yellow.tint40;
+const personaColorPaletteTokens = _sharedColorNames.personaSharedColorNames.reduce((acc, sharedColor)=>{
+    const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
+    const sharedColorTokens = {
+        [`colorPalette${color}Background2`]: _colorPalette.personaSharedColors[sharedColor].tint40,
+        [`colorPalette${color}Foreground2`]: _colorPalette.personaSharedColors[sharedColor].shade30,
+        [`colorPalette${color}BorderActive`]: _colorPalette.personaSharedColors[sharedColor].primary
+    };
+    return Object.assign(acc, sharedColorTokens);
+}, {});
+const colorPaletteTokens = {
+    ...statusColorPaletteTokens,
+    ...personaColorPaletteTokens
+};
+const colorStatusTokens = Object.entries(_statusColorMapping.statusColorMapping).reduce((acc, [statusColor, sharedColor])=>{
+    const color = statusColor.slice(0, 1).toUpperCase() + statusColor.slice(1);
+    // TODO: double check the mapping with design
+    const statusColorTokens = {
+        [`colorStatus${color}Background1`]: _colorPalette.mappedStatusColors[sharedColor].tint60,
+        [`colorStatus${color}Background2`]: _colorPalette.mappedStatusColors[sharedColor].tint40,
+        [`colorStatus${color}Background3`]: _colorPalette.mappedStatusColors[sharedColor].primary,
+        [`colorStatus${color}Foreground1`]: _colorPalette.mappedStatusColors[sharedColor].shade10,
+        [`colorStatus${color}Foreground2`]: _colorPalette.mappedStatusColors[sharedColor].shade30,
+        [`colorStatus${color}Foreground3`]: _colorPalette.mappedStatusColors[sharedColor].primary,
+        [`colorStatus${color}ForegroundInverted`]: _colorPalette.mappedStatusColors[sharedColor].tint30,
+        [`colorStatus${color}BorderActive`]: _colorPalette.mappedStatusColors[sharedColor].primary,
+        [`colorStatus${color}Border1`]: _colorPalette.mappedStatusColors[sharedColor].tint40,
+        [`colorStatus${color}Border2`]: _colorPalette.mappedStatusColors[sharedColor].primary
+    };
+    return Object.assign(acc, statusColorTokens);
+}, {});
+// one-off overrides for colorStatus tokens
+colorStatusTokens.colorStatusDangerBackground3Hover = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.danger].shade10;
+colorStatusTokens.colorStatusDangerBackground3Pressed = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.danger].shade20;
+colorStatusTokens.colorStatusWarningForeground1 = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.warning].shade20;
+colorStatusTokens.colorStatusWarningForeground3 = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.warning].shade20;
+colorStatusTokens.colorStatusWarningBorder2 = _colorPalette.mappedStatusColors[_statusColorMapping.statusColorMapping.warning].shade20;

node_modules/@fluentui/tokens/lib-commonjs/alias/teamsDarkColor.js

@@ -0,0 +1,197 @@
+/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "generateColorTokens", {
+    enumerable: true,
+    get: function() {
+        return generateColorTokens;
+    }
+});
+const _colors = require("../global/colors.js");
+const generateColorTokens = (brand)=>({
+        colorNeutralForeground1: _colors.white,
+        colorNeutralForeground1Hover: _colors.white,
+        colorNeutralForeground1Pressed: _colors.white,
+        colorNeutralForeground1Selected: _colors.white,
+        colorNeutralForeground2: _colors.grey[84],
+        colorNeutralForeground2Hover: _colors.white,
+        colorNeutralForeground2Pressed: _colors.white,
+        colorNeutralForeground2Selected: _colors.white,
+        colorNeutralForeground2BrandHover: brand[100],
+        colorNeutralForeground2BrandPressed: brand[90],
+        colorNeutralForeground2BrandSelected: brand[100],
+        colorNeutralForeground3: _colors.grey[68],
+        colorNeutralForeground3Hover: _colors.grey[84],
+        colorNeutralForeground3Pressed: _colors.grey[84],
+        colorNeutralForeground3Selected: _colors.grey[84],
+        colorNeutralForeground3BrandHover: brand[100],
+        colorNeutralForeground3BrandPressed: brand[90],
+        colorNeutralForeground3BrandSelected: brand[100],
+        colorNeutralForeground4: _colors.grey[60],
+        colorNeutralForeground5: _colors.grey[68],
+        colorNeutralForeground5Hover: _colors.white,
+        colorNeutralForeground5Pressed: _colors.white,
+        colorNeutralForeground5Selected: _colors.white,
+        colorNeutralForegroundDisabled: _colors.grey[36],
+        colorNeutralForegroundInvertedDisabled: _colors.whiteAlpha[40],
+        colorBrandForegroundLink: brand[100],
+        colorBrandForegroundLinkHover: brand[110],
+        colorBrandForegroundLinkPressed: brand[90],
+        colorBrandForegroundLinkSelected: brand[100],
+        colorNeutralForeground2Link: _colors.grey[84],
+        colorNeutralForeground2LinkHover: _colors.white,
+        colorNeutralForeground2LinkPressed: _colors.white,
+        colorNeutralForeground2LinkSelected: _colors.white,
+        colorCompoundBrandForeground1: brand[100],
+        colorCompoundBrandForeground1Hover: brand[110],
+        colorCompoundBrandForeground1Pressed: brand[90],
+        colorBrandForeground1: brand[100],
+        colorBrandForeground2: brand[120],
+        colorBrandForeground2Hover: brand[130],
+        colorBrandForeground2Pressed: brand[160],
+        colorNeutralForeground1Static: _colors.grey[14],
+        colorNeutralForegroundStaticInverted: _colors.white,
+        colorNeutralForegroundInverted: _colors.grey[14],
+        colorNeutralForegroundInvertedHover: _colors.grey[14],
+        colorNeutralForegroundInvertedPressed: _colors.grey[14],
+        colorNeutralForegroundInvertedSelected: _colors.grey[14],
+        colorNeutralForegroundInverted2: _colors.grey[14],
+        colorNeutralForegroundOnBrand: _colors.white,
+        colorNeutralForegroundInvertedLink: _colors.white,
+        colorNeutralForegroundInvertedLinkHover: _colors.white,
+        colorNeutralForegroundInvertedLinkPressed: _colors.white,
+        colorNeutralForegroundInvertedLinkSelected: _colors.white,
+        colorBrandForegroundInverted: brand[80],
+        colorBrandForegroundInvertedHover: brand[70],
+        colorBrandForegroundInvertedPressed: brand[60],
+        colorBrandForegroundOnLight: brand[80],
+        colorBrandForegroundOnLightHover: brand[70],
+        colorBrandForegroundOnLightPressed: brand[50],
+        colorBrandForegroundOnLightSelected: brand[60],
+        colorNeutralBackground1: _colors.grey[16],
+        colorNeutralBackground1Hover: _colors.grey[24],
+        colorNeutralBackground1Pressed: _colors.grey[12],
+        colorNeutralBackground1Selected: _colors.grey[22],
+        colorNeutralBackground2: _colors.grey[14],
+        colorNeutralBackground2Hover: _colors.grey[22],
+        colorNeutralBackground2Pressed: _colors.grey[10],
+        colorNeutralBackground2Selected: _colors.grey[20],
+        colorNeutralBackground3: _colors.grey[12],
+        colorNeutralBackground3Hover: _colors.grey[20],
+        colorNeutralBackground3Pressed: _colors.grey[8],
+        colorNeutralBackground3Selected: _colors.grey[18],
+        colorNeutralBackground4: _colors.grey[8],
+        colorNeutralBackground4Hover: _colors.grey[16],
+        colorNeutralBackground4Pressed: _colors.grey[4],
+        colorNeutralBackground4Selected: _colors.grey[14],
+        colorNeutralBackground5: _colors.grey[4],
+        colorNeutralBackground5Hover: _colors.grey[12],
+        colorNeutralBackground5Pressed: _colors.black,
+        colorNeutralBackground5Selected: _colors.grey[10],
+        colorNeutralBackground6: _colors.grey[20],
+        colorNeutralBackground7: '#00000000',
+        colorNeutralBackground7Hover: _colors.grey[10],
+        colorNeutralBackground7Pressed: _colors.grey[4],
+        colorNeutralBackground7Selected: '#00000000',
+        colorNeutralBackground8: _colors.grey[16],
+        colorNeutralBackgroundInverted: _colors.white,
+        colorNeutralBackgroundInvertedHover: _colors.grey[96],
+        colorNeutralBackgroundInvertedPressed: _colors.grey[88],
+        colorNeutralBackgroundInvertedSelected: _colors.grey[92],
+        colorNeutralBackgroundStatic: _colors.grey[24],
+        colorNeutralBackgroundAlpha: _colors.grey10Alpha[50],
+        colorNeutralBackgroundAlpha2: _colors.grey12Alpha[70],
+        colorSubtleBackground: 'transparent',
+        colorSubtleBackgroundHover: _colors.grey[22],
+        colorSubtleBackgroundPressed: _colors.grey[18],
+        colorSubtleBackgroundSelected: _colors.grey[20],
+        colorSubtleBackgroundLightAlphaHover: _colors.grey14Alpha[80],
+        colorSubtleBackgroundLightAlphaPressed: _colors.grey14Alpha[50],
+        colorSubtleBackgroundLightAlphaSelected: 'transparent',
+        colorSubtleBackgroundInverted: 'transparent',
+        colorSubtleBackgroundInvertedHover: _colors.blackAlpha[10],
+        colorSubtleBackgroundInvertedPressed: _colors.blackAlpha[30],
+        colorSubtleBackgroundInvertedSelected: _colors.blackAlpha[20],
+        colorTransparentBackground: 'transparent',
+        colorTransparentBackgroundHover: 'transparent',
+        colorTransparentBackgroundPressed: 'transparent',
+        colorTransparentBackgroundSelected: 'transparent',
+        colorNeutralBackgroundDisabled: _colors.grey[8],
+        colorNeutralBackgroundDisabled2: _colors.grey[16],
+        colorNeutralBackgroundInvertedDisabled: _colors.whiteAlpha[10],
+        colorNeutralStencil1: _colors.grey[34],
+        colorNeutralStencil2: _colors.grey[20],
+        colorNeutralStencil1Alpha: _colors.whiteAlpha[10],
+        colorNeutralStencil2Alpha: _colors.whiteAlpha[5],
+        colorBackgroundOverlay: _colors.blackAlpha[50],
+        colorScrollbarOverlay: _colors.whiteAlpha[60],
+        colorBrandBackground: brand[70],
+        colorBrandBackgroundHover: brand[80],
+        colorBrandBackgroundPressed: brand[40],
+        colorBrandBackgroundSelected: brand[60],
+        colorCompoundBrandBackground: brand[100],
+        colorCompoundBrandBackgroundHover: brand[110],
+        colorCompoundBrandBackgroundPressed: brand[90],
+        colorBrandBackgroundStatic: brand[80],
+        colorBrandBackground2: brand[20],
+        colorBrandBackground2Hover: brand[40],
+        colorBrandBackground2Pressed: brand[10],
+        colorBrandBackground3Static: brand[60],
+        colorBrandBackground4Static: brand[40],
+        colorBrandBackgroundInverted: _colors.white,
+        colorBrandBackgroundInvertedHover: brand[160],
+        colorBrandBackgroundInvertedPressed: brand[140],
+        colorBrandBackgroundInvertedSelected: brand[150],
+        colorNeutralCardBackground: _colors.grey[20],
+        colorNeutralCardBackgroundHover: _colors.grey[24],
+        colorNeutralCardBackgroundPressed: _colors.grey[18],
+        colorNeutralCardBackgroundSelected: _colors.grey[22],
+        colorNeutralCardBackgroundDisabled: _colors.grey[8],
+        colorNeutralStrokeAccessible: _colors.grey[68],
+        colorNeutralStrokeAccessibleHover: _colors.grey[74],
+        colorNeutralStrokeAccessiblePressed: _colors.grey[70],
+        colorNeutralStrokeAccessibleSelected: brand[100],
+        colorNeutralStroke1: _colors.grey[40],
+        colorNeutralStroke1Hover: _colors.grey[46],
+        colorNeutralStroke1Pressed: _colors.grey[42],
+        colorNeutralStroke1Selected: _colors.grey[44],
+        colorNeutralStroke2: _colors.grey[32],
+        colorNeutralStroke3: _colors.grey[24],
+        colorNeutralStroke4: _colors.grey[24],
+        colorNeutralStroke4Hover: _colors.grey[18],
+        colorNeutralStroke4Pressed: _colors.grey[14],
+        colorNeutralStroke4Selected: _colors.grey[24],
+        colorNeutralStrokeSubtle: _colors.grey[4],
+        colorNeutralStrokeOnBrand: _colors.grey[16],
+        colorNeutralStrokeOnBrand2: _colors.white,
+        colorNeutralStrokeOnBrand2Hover: _colors.white,
+        colorNeutralStrokeOnBrand2Pressed: _colors.white,
+        colorNeutralStrokeOnBrand2Selected: _colors.white,
+        colorBrandStroke1: brand[100],
+        colorBrandStroke2: brand[50],
+        colorBrandStroke2Hover: brand[50],
+        colorBrandStroke2Pressed: brand[30],
+        colorBrandStroke2Contrast: brand[50],
+        colorCompoundBrandStroke: brand[90],
+        colorCompoundBrandStrokeHover: brand[100],
+        colorCompoundBrandStrokePressed: brand[80],
+        colorNeutralStrokeDisabled: _colors.grey[26],
+        colorNeutralStrokeDisabled2: _colors.grey[24],
+        colorNeutralStrokeInvertedDisabled: _colors.whiteAlpha[40],
+        colorTransparentStroke: 'transparent',
+        colorTransparentStrokeInteractive: 'transparent',
+        colorTransparentStrokeDisabled: 'transparent',
+        colorNeutralStrokeAlpha: _colors.whiteAlpha[10],
+        colorNeutralStrokeAlpha2: _colors.whiteAlpha[20],
+        colorStrokeFocus1: _colors.black,
+        colorStrokeFocus2: _colors.white,
+        colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)',
+        colorNeutralShadowKey: 'rgba(0,0,0,0.28)',
+        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+    });

node_modules/@fluentui/tokens/lib-commonjs/alias/teamsFontFamilies.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "fontFamilies", {
+    enumerable: true,
+    get: function() {
+        return fontFamilies;
+    }
+});
+const _fonts = require("../global/fonts.js");
+const fontFamilies = {
+    ..._fonts.fontFamilies,
+    fontFamilyBase: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif'
+};

node_modules/@fluentui/tokens/lib-commonjs/alias/teamsFontFamilies.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/alias/teamsFontFamilies.ts"],"sourcesContent":["import { fontFamilies as globalFontFamilies } from '../global/fonts';\n\nexport const fontFamilies = {\n  ...globalFontFamilies,\n  fontFamilyBase:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif',\n};\n"],"names":["fontFamilies","globalFontFamilies","fontFamilyBase"],"mappings":";;;;+BAEaA;;;eAAAA;;;uBAFsC;AAE5C,MAAMA,eAAe;IAC1B,GAAGC,mBAAkB;IACrBC,gBACE;AACJ"}