Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

187
node_modules/@fluentui/tokens/lib/alias/darkColor.js generated vendored Normal file
View File

@@ -0,0 +1,187 @@
/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ import { black, blackAlpha, grey, grey10Alpha, grey12Alpha, grey14Alpha, white, whiteAlpha } from "../global/colors.js";
export const generateColorTokens = (brand)=>({
colorNeutralForeground1: white,
colorNeutralForeground1Hover: white,
colorNeutralForeground1Pressed: white,
colorNeutralForeground1Selected: white,
colorNeutralForeground2: grey[84],
colorNeutralForeground2Hover: white,
colorNeutralForeground2Pressed: white,
colorNeutralForeground2Selected: white,
colorNeutralForeground2BrandHover: brand[100],
colorNeutralForeground2BrandPressed: brand[90],
colorNeutralForeground2BrandSelected: brand[100],
colorNeutralForeground3: grey[68],
colorNeutralForeground3Hover: grey[84],
colorNeutralForeground3Pressed: grey[84],
colorNeutralForeground3Selected: grey[84],
colorNeutralForeground3BrandHover: brand[100],
colorNeutralForeground3BrandPressed: brand[90],
colorNeutralForeground3BrandSelected: brand[100],
colorNeutralForeground4: grey[60],
colorNeutralForeground5: grey[68],
colorNeutralForeground5Hover: white,
colorNeutralForeground5Pressed: white,
colorNeutralForeground5Selected: white,
colorNeutralForegroundDisabled: grey[36],
colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
colorBrandForegroundLink: brand[100],
colorBrandForegroundLinkHover: brand[110],
colorBrandForegroundLinkPressed: brand[90],
colorBrandForegroundLinkSelected: brand[100],
colorNeutralForeground2Link: grey[84],
colorNeutralForeground2LinkHover: white,
colorNeutralForeground2LinkPressed: white,
colorNeutralForeground2LinkSelected: white,
colorCompoundBrandForeground1: brand[100],
colorCompoundBrandForeground1Hover: brand[110],
colorCompoundBrandForeground1Pressed: brand[90],
colorBrandForeground1: brand[100],
colorBrandForeground2: brand[110],
colorBrandForeground2Hover: brand[130],
colorBrandForeground2Pressed: brand[160],
colorNeutralForeground1Static: grey[14],
colorNeutralForegroundStaticInverted: white,
colorNeutralForegroundInverted: grey[14],
colorNeutralForegroundInvertedHover: grey[14],
colorNeutralForegroundInvertedPressed: grey[14],
colorNeutralForegroundInvertedSelected: grey[14],
colorNeutralForegroundInverted2: grey[14],
colorNeutralForegroundOnBrand: white,
colorNeutralForegroundInvertedLink: white,
colorNeutralForegroundInvertedLinkHover: white,
colorNeutralForegroundInvertedLinkPressed: white,
colorNeutralForegroundInvertedLinkSelected: white,
colorBrandForegroundInverted: brand[80],
colorBrandForegroundInvertedHover: brand[70],
colorBrandForegroundInvertedPressed: brand[60],
colorBrandForegroundOnLight: brand[80],
colorBrandForegroundOnLightHover: brand[70],
colorBrandForegroundOnLightPressed: brand[50],
colorBrandForegroundOnLightSelected: brand[60],
colorNeutralBackground1: grey[16],
colorNeutralBackground1Hover: grey[24],
colorNeutralBackground1Pressed: grey[12],
colorNeutralBackground1Selected: grey[22],
colorNeutralBackground2: grey[12],
colorNeutralBackground2Hover: grey[20],
colorNeutralBackground2Pressed: grey[8],
colorNeutralBackground2Selected: grey[18],
colorNeutralBackground3: grey[8],
colorNeutralBackground3Hover: grey[16],
colorNeutralBackground3Pressed: grey[4],
colorNeutralBackground3Selected: grey[14],
colorNeutralBackground4: grey[4],
colorNeutralBackground4Hover: grey[12],
colorNeutralBackground4Pressed: black,
colorNeutralBackground4Selected: grey[10],
colorNeutralBackground5: black,
colorNeutralBackground5Hover: grey[8],
colorNeutralBackground5Pressed: grey[2],
colorNeutralBackground5Selected: grey[6],
colorNeutralBackground6: grey[20],
colorNeutralBackground7: '#00000000',
colorNeutralBackground7Hover: grey[10],
colorNeutralBackground7Pressed: grey[4],
colorNeutralBackground7Selected: '#00000000',
colorNeutralBackground8: grey[16],
colorNeutralBackgroundInverted: white,
colorNeutralBackgroundInvertedHover: grey[96],
colorNeutralBackgroundInvertedPressed: grey[88],
colorNeutralBackgroundInvertedSelected: grey[92],
colorNeutralBackgroundStatic: grey[24],
colorNeutralBackgroundAlpha: grey10Alpha[50],
colorNeutralBackgroundAlpha2: grey12Alpha[70],
colorSubtleBackground: 'transparent',
colorSubtleBackgroundHover: grey[22],
colorSubtleBackgroundPressed: grey[18],
colorSubtleBackgroundSelected: grey[20],
colorSubtleBackgroundLightAlphaHover: grey14Alpha[80],
colorSubtleBackgroundLightAlphaPressed: grey14Alpha[50],
colorSubtleBackgroundLightAlphaSelected: 'transparent',
colorSubtleBackgroundInverted: 'transparent',
colorSubtleBackgroundInvertedHover: blackAlpha[10],
colorSubtleBackgroundInvertedPressed: blackAlpha[30],
colorSubtleBackgroundInvertedSelected: blackAlpha[20],
colorTransparentBackground: 'transparent',
colorTransparentBackgroundHover: 'transparent',
colorTransparentBackgroundPressed: 'transparent',
colorTransparentBackgroundSelected: 'transparent',
colorNeutralBackgroundDisabled: grey[8],
colorNeutralBackgroundDisabled2: grey[16],
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
colorNeutralStencil1: grey[34],
colorNeutralStencil2: grey[20],
colorNeutralStencil1Alpha: whiteAlpha[10],
colorNeutralStencil2Alpha: whiteAlpha[5],
colorBackgroundOverlay: blackAlpha[50],
colorScrollbarOverlay: 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: white,
colorBrandBackgroundInvertedHover: brand[160],
colorBrandBackgroundInvertedPressed: brand[140],
colorBrandBackgroundInvertedSelected: brand[150],
colorNeutralCardBackground: grey[20],
colorNeutralCardBackgroundHover: grey[24],
colorNeutralCardBackgroundPressed: grey[18],
colorNeutralCardBackgroundSelected: grey[22],
colorNeutralCardBackgroundDisabled: grey[8],
colorNeutralStrokeAccessible: grey[68],
colorNeutralStrokeAccessibleHover: grey[74],
colorNeutralStrokeAccessiblePressed: grey[70],
colorNeutralStrokeAccessibleSelected: brand[100],
colorNeutralStroke1: grey[40],
colorNeutralStroke1Hover: grey[46],
colorNeutralStroke1Pressed: grey[42],
colorNeutralStroke1Selected: grey[44],
colorNeutralStroke2: grey[32],
colorNeutralStroke3: grey[24],
colorNeutralStroke4: grey[24],
colorNeutralStroke4Hover: grey[18],
colorNeutralStroke4Pressed: grey[14],
colorNeutralStroke4Selected: grey[24],
colorNeutralStrokeSubtle: grey[4],
colorNeutralStrokeOnBrand: grey[16],
colorNeutralStrokeOnBrand2: white,
colorNeutralStrokeOnBrand2Hover: white,
colorNeutralStrokeOnBrand2Pressed: white,
colorNeutralStrokeOnBrand2Selected: 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: grey[26],
colorNeutralStrokeDisabled2: grey[24],
colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
colorTransparentStroke: 'transparent',
colorTransparentStrokeInteractive: 'transparent',
colorTransparentStrokeDisabled: 'transparent',
colorNeutralStrokeAlpha: whiteAlpha[10],
colorNeutralStrokeAlpha2: whiteAlpha[20],
colorStrokeFocus1: black,
colorStrokeFocus2: 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)'
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,69 @@
/* color palette used in both darkTheme and teamsDarkTheme */ import { statusSharedColors, personaSharedColors, mappedStatusColors } from "../global/colorPalette.js";
import { statusSharedColorNames, personaSharedColorNames } from "../sharedColorNames.js";
import { statusColorMapping } from "../statusColorMapping.js";
const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor)=>{
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
const sharedColorTokens = {
[`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40,
[`colorPalette${color}Background2`]: statusSharedColors[sharedColor].shade30,
[`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary,
[`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].tint30,
[`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].tint40,
[`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].tint20,
[`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].tint30,
[`colorPalette${color}Border1`]: statusSharedColors[sharedColor].primary,
[`colorPalette${color}Border2`]: statusSharedColors[sharedColor].tint20
};
return Object.assign(acc, sharedColorTokens);
}, {});
// one-off patches
statusColorPaletteTokens.colorPaletteRedForeground3 = statusSharedColors.red.tint30;
statusColorPaletteTokens.colorPaletteRedBorder2 = statusSharedColors.red.tint30;
statusColorPaletteTokens.colorPaletteGreenForeground3 = statusSharedColors.green.tint40;
statusColorPaletteTokens.colorPaletteGreenBorder2 = statusSharedColors.green.tint40;
statusColorPaletteTokens.colorPaletteDarkOrangeForeground3 = statusSharedColors.darkOrange.tint30;
statusColorPaletteTokens.colorPaletteDarkOrangeBorder2 = statusSharedColors.darkOrange.tint30;
statusColorPaletteTokens.colorPaletteRedForegroundInverted = statusSharedColors.red.primary;
statusColorPaletteTokens.colorPaletteGreenForegroundInverted = statusSharedColors.green.primary;
statusColorPaletteTokens.colorPaletteYellowForegroundInverted = statusSharedColors.yellow.shade30;
const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor)=>{
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
const sharedColorTokens = {
[`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30,
[`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].tint40,
[`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].tint30
};
return Object.assign(acc, sharedColorTokens);
}, {});
// one-off patches
personaColorPaletteTokens.colorPaletteDarkRedBackground2 = personaSharedColors.darkRed.shade20;
personaColorPaletteTokens.colorPalettePlumBackground2 = personaSharedColors.plum.shade20;
export const colorPaletteTokens = {
...statusColorPaletteTokens,
...personaColorPaletteTokens
};
export const colorStatusTokens = Object.entries(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`]: mappedStatusColors[sharedColor].shade40,
[`colorStatus${color}Background2`]: mappedStatusColors[sharedColor].shade30,
[`colorStatus${color}Background3`]: mappedStatusColors[sharedColor].primary,
[`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].tint30,
[`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].tint40,
[`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].tint20,
[`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].tint30,
[`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].shade10,
[`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].primary,
[`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].tint20
};
return Object.assign(acc, statusColorTokens);
}, {});
// one-off overrides for colorStatus tokens
colorStatusTokens.colorStatusDangerBackground3Hover = mappedStatusColors[statusColorMapping.danger].shade10;
colorStatusTokens.colorStatusDangerBackground3Pressed = mappedStatusColors[statusColorMapping.danger].shade20;
colorStatusTokens.colorStatusDangerForeground3 = mappedStatusColors[statusColorMapping.danger].tint40;
colorStatusTokens.colorStatusDangerBorder2 = mappedStatusColors[statusColorMapping.danger].tint30;
colorStatusTokens.colorStatusSuccessForeground3 = mappedStatusColors[statusColorMapping.success].tint40;
colorStatusTokens.colorStatusSuccessBorder2 = mappedStatusColors[statusColorMapping.success].tint40;
colorStatusTokens.colorStatusWarningForegroundInverted = mappedStatusColors[statusColorMapping.warning].shade20;

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,55 @@
import { hcHighlight, hcCanvas, hcCanvasText } from "../global/colors.js";
import { statusSharedColorNames, personaSharedColorNames } from "../sharedColorNames.js";
import { statusColorMapping } from "../statusColorMapping.js";
const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor)=>{
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
const sharedColorTokens = {
[`colorPalette${color}Background1`]: hcCanvas,
[`colorPalette${color}Background2`]: hcCanvas,
[`colorPalette${color}Background3`]: hcCanvasText,
[`colorPalette${color}Foreground1`]: hcCanvasText,
[`colorPalette${color}Foreground2`]: hcCanvasText,
[`colorPalette${color}Foreground3`]: hcCanvasText,
[`colorPalette${color}BorderActive`]: hcHighlight,
[`colorPalette${color}Border1`]: hcCanvasText,
[`colorPalette${color}Border2`]: hcCanvasText
};
return Object.assign(acc, sharedColorTokens);
}, {});
// one-off patches
statusColorPaletteTokens.colorPaletteRedForegroundInverted = hcCanvasText;
statusColorPaletteTokens.colorPaletteGreenForegroundInverted = hcCanvasText;
statusColorPaletteTokens.colorPaletteYellowForegroundInverted = hcCanvasText;
const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor)=>{
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
const sharedColorTokens = {
[`colorPalette${color}Background2`]: hcCanvas,
[`colorPalette${color}Foreground2`]: hcCanvasText,
[`colorPalette${color}BorderActive`]: hcHighlight
};
return Object.assign(acc, sharedColorTokens);
}, {});
export const colorPaletteTokens = {
...statusColorPaletteTokens,
...personaColorPaletteTokens
};
export const colorStatusTokens = Object.entries(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`]: hcCanvas,
[`colorStatus${color}Background2`]: hcCanvas,
[`colorStatus${color}Background3`]: hcCanvasText,
[`colorStatus${color}Foreground1`]: hcCanvasText,
[`colorStatus${color}Foreground2`]: hcCanvasText,
[`colorStatus${color}Foreground3`]: hcCanvasText,
[`colorStatus${color}BorderActive`]: hcHighlight,
[`colorStatus${color}ForegroundInverted`]: hcCanvasText,
[`colorStatus${color}Border1`]: hcCanvasText,
[`colorStatus${color}Border2`]: hcCanvasText
};
return Object.assign(acc, statusColorTokens);
}, {});
// one-off overrides for colorStatus tokens
colorStatusTokens.colorStatusDangerBackground3Hover = hcHighlight;
colorStatusTokens.colorStatusDangerBackground3Pressed = hcHighlight;

File diff suppressed because one or more lines are too long

187
node_modules/@fluentui/tokens/lib/alias/lightColor.js generated vendored Normal file
View File

@@ -0,0 +1,187 @@
/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ import { black, blackAlpha, grey, white, whiteAlpha } from "../global/colors.js";
export const generateColorTokens = (brand)=>({
colorNeutralForeground1: grey[14],
colorNeutralForeground1Hover: grey[14],
colorNeutralForeground1Pressed: grey[14],
colorNeutralForeground1Selected: grey[14],
colorNeutralForeground2: grey[26],
colorNeutralForeground2Hover: grey[14],
colorNeutralForeground2Pressed: grey[14],
colorNeutralForeground2Selected: grey[14],
colorNeutralForeground2BrandHover: brand[80],
colorNeutralForeground2BrandPressed: brand[70],
colorNeutralForeground2BrandSelected: brand[80],
colorNeutralForeground3: grey[38],
colorNeutralForeground3Hover: grey[26],
colorNeutralForeground3Pressed: grey[26],
colorNeutralForeground3Selected: grey[26],
colorNeutralForeground3BrandHover: brand[80],
colorNeutralForeground3BrandPressed: brand[70],
colorNeutralForeground3BrandSelected: brand[80],
colorNeutralForeground4: grey[44],
colorNeutralForeground5: grey[38],
colorNeutralForeground5Hover: grey[14],
colorNeutralForeground5Pressed: grey[14],
colorNeutralForeground5Selected: grey[14],
colorNeutralForegroundDisabled: grey[74],
colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
colorBrandForegroundLink: brand[70],
colorBrandForegroundLinkHover: brand[60],
colorBrandForegroundLinkPressed: brand[40],
colorBrandForegroundLinkSelected: brand[70],
colorNeutralForeground2Link: grey[26],
colorNeutralForeground2LinkHover: grey[14],
colorNeutralForeground2LinkPressed: grey[14],
colorNeutralForeground2LinkSelected: grey[14],
colorCompoundBrandForeground1: brand[80],
colorCompoundBrandForeground1Hover: brand[70],
colorCompoundBrandForeground1Pressed: brand[60],
colorBrandForeground1: brand[80],
colorBrandForeground2: brand[70],
colorBrandForeground2Hover: brand[60],
colorBrandForeground2Pressed: brand[30],
colorNeutralForeground1Static: grey[14],
colorNeutralForegroundStaticInverted: white,
colorNeutralForegroundInverted: white,
colorNeutralForegroundInvertedHover: white,
colorNeutralForegroundInvertedPressed: white,
colorNeutralForegroundInvertedSelected: white,
colorNeutralForegroundInverted2: white,
colorNeutralForegroundOnBrand: white,
colorNeutralForegroundInvertedLink: white,
colorNeutralForegroundInvertedLinkHover: white,
colorNeutralForegroundInvertedLinkPressed: white,
colorNeutralForegroundInvertedLinkSelected: white,
colorBrandForegroundInverted: brand[100],
colorBrandForegroundInvertedHover: brand[110],
colorBrandForegroundInvertedPressed: brand[100],
colorBrandForegroundOnLight: brand[80],
colorBrandForegroundOnLightHover: brand[70],
colorBrandForegroundOnLightPressed: brand[50],
colorBrandForegroundOnLightSelected: brand[60],
colorNeutralBackground1: white,
colorNeutralBackground1Hover: grey[96],
colorNeutralBackground1Pressed: grey[88],
colorNeutralBackground1Selected: grey[92],
colorNeutralBackground2: grey[98],
colorNeutralBackground2Hover: grey[94],
colorNeutralBackground2Pressed: grey[86],
colorNeutralBackground2Selected: grey[90],
colorNeutralBackground3: grey[96],
colorNeutralBackground3Hover: grey[92],
colorNeutralBackground3Pressed: grey[84],
colorNeutralBackground3Selected: grey[88],
colorNeutralBackground4: grey[94],
colorNeutralBackground4Hover: grey[98],
colorNeutralBackground4Pressed: grey[96],
colorNeutralBackground4Selected: white,
colorNeutralBackground5: grey[92],
colorNeutralBackground5Hover: grey[96],
colorNeutralBackground5Pressed: grey[94],
colorNeutralBackground5Selected: grey[98],
colorNeutralBackground6: grey[90],
colorNeutralBackground7: '#00000000',
colorNeutralBackground7Hover: grey[92],
colorNeutralBackground7Pressed: grey[84],
colorNeutralBackground7Selected: '#00000000',
colorNeutralBackground8: grey[99],
colorNeutralBackgroundInverted: grey[16],
colorNeutralBackgroundInvertedHover: grey[24],
colorNeutralBackgroundInvertedPressed: grey[12],
colorNeutralBackgroundInvertedSelected: grey[22],
colorNeutralBackgroundStatic: grey[20],
colorNeutralBackgroundAlpha: whiteAlpha[50],
colorNeutralBackgroundAlpha2: whiteAlpha[80],
colorSubtleBackground: 'transparent',
colorSubtleBackgroundHover: grey[96],
colorSubtleBackgroundPressed: grey[88],
colorSubtleBackgroundSelected: grey[92],
colorSubtleBackgroundLightAlphaHover: whiteAlpha[70],
colorSubtleBackgroundLightAlphaPressed: whiteAlpha[50],
colorSubtleBackgroundLightAlphaSelected: 'transparent',
colorSubtleBackgroundInverted: 'transparent',
colorSubtleBackgroundInvertedHover: blackAlpha[10],
colorSubtleBackgroundInvertedPressed: blackAlpha[30],
colorSubtleBackgroundInvertedSelected: blackAlpha[20],
colorTransparentBackground: 'transparent',
colorTransparentBackgroundHover: 'transparent',
colorTransparentBackgroundPressed: 'transparent',
colorTransparentBackgroundSelected: 'transparent',
colorNeutralBackgroundDisabled: grey[94],
colorNeutralBackgroundDisabled2: white,
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
colorNeutralStencil1: grey[90],
colorNeutralStencil2: grey[98],
colorNeutralStencil1Alpha: blackAlpha[10],
colorNeutralStencil2Alpha: blackAlpha[5],
colorBackgroundOverlay: blackAlpha[40],
colorScrollbarOverlay: 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: white,
colorBrandBackgroundInvertedHover: brand[160],
colorBrandBackgroundInvertedPressed: brand[140],
colorBrandBackgroundInvertedSelected: brand[150],
colorNeutralCardBackground: grey[98],
colorNeutralCardBackgroundHover: white,
colorNeutralCardBackgroundPressed: grey[96],
colorNeutralCardBackgroundSelected: grey[92],
colorNeutralCardBackgroundDisabled: grey[94],
colorNeutralStrokeAccessible: grey[38],
colorNeutralStrokeAccessibleHover: grey[34],
colorNeutralStrokeAccessiblePressed: grey[30],
colorNeutralStrokeAccessibleSelected: brand[80],
colorNeutralStroke1: grey[82],
colorNeutralStroke1Hover: grey[78],
colorNeutralStroke1Pressed: grey[70],
colorNeutralStroke1Selected: grey[74],
colorNeutralStroke2: grey[88],
colorNeutralStroke3: grey[94],
colorNeutralStroke4: grey[92],
colorNeutralStroke4Hover: grey[88],
colorNeutralStroke4Pressed: grey[84],
colorNeutralStroke4Selected: grey[92],
colorNeutralStrokeSubtle: grey[88],
colorNeutralStrokeOnBrand: white,
colorNeutralStrokeOnBrand2: white,
colorNeutralStrokeOnBrand2Hover: white,
colorNeutralStrokeOnBrand2Pressed: white,
colorNeutralStrokeOnBrand2Selected: 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: grey[88],
colorNeutralStrokeDisabled2: grey[92],
colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
colorTransparentStroke: 'transparent',
colorTransparentStrokeInteractive: 'transparent',
colorTransparentStrokeDisabled: 'transparent',
colorNeutralStrokeAlpha: blackAlpha[5],
colorNeutralStrokeAlpha2: whiteAlpha[20],
colorStrokeFocus1: white,
colorStrokeFocus2: 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)'
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,59 @@
import { statusSharedColors, personaSharedColors, mappedStatusColors } from "../global/colorPalette.js";
import { statusSharedColorNames, personaSharedColorNames } from "../sharedColorNames.js";
import { statusColorMapping } from "../statusColorMapping.js";
const statusColorPaletteTokens = statusSharedColorNames.reduce((acc, sharedColor)=>{
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
const sharedColorTokens = {
[`colorPalette${color}Background1`]: statusSharedColors[sharedColor].tint60,
[`colorPalette${color}Background2`]: statusSharedColors[sharedColor].tint40,
[`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary,
[`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].shade10,
[`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].shade30,
[`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].primary,
[`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].primary,
[`colorPalette${color}Border1`]: statusSharedColors[sharedColor].tint40,
[`colorPalette${color}Border2`]: statusSharedColors[sharedColor].primary
};
return Object.assign(acc, sharedColorTokens);
}, {});
// one-off patch for yellow
statusColorPaletteTokens.colorPaletteYellowForeground1 = statusSharedColors.yellow.shade30;
statusColorPaletteTokens.colorPaletteRedForegroundInverted = statusSharedColors.red.tint20;
statusColorPaletteTokens.colorPaletteGreenForegroundInverted = statusSharedColors.green.tint20;
statusColorPaletteTokens.colorPaletteYellowForegroundInverted = statusSharedColors.yellow.tint40;
const personaColorPaletteTokens = personaSharedColorNames.reduce((acc, sharedColor)=>{
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
const sharedColorTokens = {
[`colorPalette${color}Background2`]: personaSharedColors[sharedColor].tint40,
[`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].shade30,
[`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].primary
};
return Object.assign(acc, sharedColorTokens);
}, {});
export const colorPaletteTokens = {
...statusColorPaletteTokens,
...personaColorPaletteTokens
};
export const colorStatusTokens = Object.entries(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`]: mappedStatusColors[sharedColor].tint60,
[`colorStatus${color}Background2`]: mappedStatusColors[sharedColor].tint40,
[`colorStatus${color}Background3`]: mappedStatusColors[sharedColor].primary,
[`colorStatus${color}Foreground1`]: mappedStatusColors[sharedColor].shade10,
[`colorStatus${color}Foreground2`]: mappedStatusColors[sharedColor].shade30,
[`colorStatus${color}Foreground3`]: mappedStatusColors[sharedColor].primary,
[`colorStatus${color}ForegroundInverted`]: mappedStatusColors[sharedColor].tint30,
[`colorStatus${color}BorderActive`]: mappedStatusColors[sharedColor].primary,
[`colorStatus${color}Border1`]: mappedStatusColors[sharedColor].tint40,
[`colorStatus${color}Border2`]: mappedStatusColors[sharedColor].primary
};
return Object.assign(acc, statusColorTokens);
}, {});
// one-off overrides for colorStatus tokens
colorStatusTokens.colorStatusDangerBackground3Hover = mappedStatusColors[statusColorMapping.danger].shade10;
colorStatusTokens.colorStatusDangerBackground3Pressed = mappedStatusColors[statusColorMapping.danger].shade20;
colorStatusTokens.colorStatusWarningForeground1 = mappedStatusColors[statusColorMapping.warning].shade20;
colorStatusTokens.colorStatusWarningForeground3 = mappedStatusColors[statusColorMapping.warning].shade20;
colorStatusTokens.colorStatusWarningBorder2 = mappedStatusColors[statusColorMapping.warning].shade20;

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,187 @@
/* !!! DO NOT EDIT !!! */ /* This file has been generated by the token pipeline */ import { black, blackAlpha, grey, grey10Alpha, grey12Alpha, grey14Alpha, white, whiteAlpha } from "../global/colors.js";
export const generateColorTokens = (brand)=>({
colorNeutralForeground1: white,
colorNeutralForeground1Hover: white,
colorNeutralForeground1Pressed: white,
colorNeutralForeground1Selected: white,
colorNeutralForeground2: grey[84],
colorNeutralForeground2Hover: white,
colorNeutralForeground2Pressed: white,
colorNeutralForeground2Selected: white,
colorNeutralForeground2BrandHover: brand[100],
colorNeutralForeground2BrandPressed: brand[90],
colorNeutralForeground2BrandSelected: brand[100],
colorNeutralForeground3: grey[68],
colorNeutralForeground3Hover: grey[84],
colorNeutralForeground3Pressed: grey[84],
colorNeutralForeground3Selected: grey[84],
colorNeutralForeground3BrandHover: brand[100],
colorNeutralForeground3BrandPressed: brand[90],
colorNeutralForeground3BrandSelected: brand[100],
colorNeutralForeground4: grey[60],
colorNeutralForeground5: grey[68],
colorNeutralForeground5Hover: white,
colorNeutralForeground5Pressed: white,
colorNeutralForeground5Selected: white,
colorNeutralForegroundDisabled: grey[36],
colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
colorBrandForegroundLink: brand[100],
colorBrandForegroundLinkHover: brand[110],
colorBrandForegroundLinkPressed: brand[90],
colorBrandForegroundLinkSelected: brand[100],
colorNeutralForeground2Link: grey[84],
colorNeutralForeground2LinkHover: white,
colorNeutralForeground2LinkPressed: white,
colorNeutralForeground2LinkSelected: white,
colorCompoundBrandForeground1: brand[100],
colorCompoundBrandForeground1Hover: brand[110],
colorCompoundBrandForeground1Pressed: brand[90],
colorBrandForeground1: brand[100],
colorBrandForeground2: brand[120],
colorBrandForeground2Hover: brand[130],
colorBrandForeground2Pressed: brand[160],
colorNeutralForeground1Static: grey[14],
colorNeutralForegroundStaticInverted: white,
colorNeutralForegroundInverted: grey[14],
colorNeutralForegroundInvertedHover: grey[14],
colorNeutralForegroundInvertedPressed: grey[14],
colorNeutralForegroundInvertedSelected: grey[14],
colorNeutralForegroundInverted2: grey[14],
colorNeutralForegroundOnBrand: white,
colorNeutralForegroundInvertedLink: white,
colorNeutralForegroundInvertedLinkHover: white,
colorNeutralForegroundInvertedLinkPressed: white,
colorNeutralForegroundInvertedLinkSelected: white,
colorBrandForegroundInverted: brand[80],
colorBrandForegroundInvertedHover: brand[70],
colorBrandForegroundInvertedPressed: brand[60],
colorBrandForegroundOnLight: brand[80],
colorBrandForegroundOnLightHover: brand[70],
colorBrandForegroundOnLightPressed: brand[50],
colorBrandForegroundOnLightSelected: brand[60],
colorNeutralBackground1: grey[16],
colorNeutralBackground1Hover: grey[24],
colorNeutralBackground1Pressed: grey[12],
colorNeutralBackground1Selected: grey[22],
colorNeutralBackground2: grey[14],
colorNeutralBackground2Hover: grey[22],
colorNeutralBackground2Pressed: grey[10],
colorNeutralBackground2Selected: grey[20],
colorNeutralBackground3: grey[12],
colorNeutralBackground3Hover: grey[20],
colorNeutralBackground3Pressed: grey[8],
colorNeutralBackground3Selected: grey[18],
colorNeutralBackground4: grey[8],
colorNeutralBackground4Hover: grey[16],
colorNeutralBackground4Pressed: grey[4],
colorNeutralBackground4Selected: grey[14],
colorNeutralBackground5: grey[4],
colorNeutralBackground5Hover: grey[12],
colorNeutralBackground5Pressed: black,
colorNeutralBackground5Selected: grey[10],
colorNeutralBackground6: grey[20],
colorNeutralBackground7: '#00000000',
colorNeutralBackground7Hover: grey[10],
colorNeutralBackground7Pressed: grey[4],
colorNeutralBackground7Selected: '#00000000',
colorNeutralBackground8: grey[16],
colorNeutralBackgroundInverted: white,
colorNeutralBackgroundInvertedHover: grey[96],
colorNeutralBackgroundInvertedPressed: grey[88],
colorNeutralBackgroundInvertedSelected: grey[92],
colorNeutralBackgroundStatic: grey[24],
colorNeutralBackgroundAlpha: grey10Alpha[50],
colorNeutralBackgroundAlpha2: grey12Alpha[70],
colorSubtleBackground: 'transparent',
colorSubtleBackgroundHover: grey[22],
colorSubtleBackgroundPressed: grey[18],
colorSubtleBackgroundSelected: grey[20],
colorSubtleBackgroundLightAlphaHover: grey14Alpha[80],
colorSubtleBackgroundLightAlphaPressed: grey14Alpha[50],
colorSubtleBackgroundLightAlphaSelected: 'transparent',
colorSubtleBackgroundInverted: 'transparent',
colorSubtleBackgroundInvertedHover: blackAlpha[10],
colorSubtleBackgroundInvertedPressed: blackAlpha[30],
colorSubtleBackgroundInvertedSelected: blackAlpha[20],
colorTransparentBackground: 'transparent',
colorTransparentBackgroundHover: 'transparent',
colorTransparentBackgroundPressed: 'transparent',
colorTransparentBackgroundSelected: 'transparent',
colorNeutralBackgroundDisabled: grey[8],
colorNeutralBackgroundDisabled2: grey[16],
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
colorNeutralStencil1: grey[34],
colorNeutralStencil2: grey[20],
colorNeutralStencil1Alpha: whiteAlpha[10],
colorNeutralStencil2Alpha: whiteAlpha[5],
colorBackgroundOverlay: blackAlpha[50],
colorScrollbarOverlay: 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: white,
colorBrandBackgroundInvertedHover: brand[160],
colorBrandBackgroundInvertedPressed: brand[140],
colorBrandBackgroundInvertedSelected: brand[150],
colorNeutralCardBackground: grey[20],
colorNeutralCardBackgroundHover: grey[24],
colorNeutralCardBackgroundPressed: grey[18],
colorNeutralCardBackgroundSelected: grey[22],
colorNeutralCardBackgroundDisabled: grey[8],
colorNeutralStrokeAccessible: grey[68],
colorNeutralStrokeAccessibleHover: grey[74],
colorNeutralStrokeAccessiblePressed: grey[70],
colorNeutralStrokeAccessibleSelected: brand[100],
colorNeutralStroke1: grey[40],
colorNeutralStroke1Hover: grey[46],
colorNeutralStroke1Pressed: grey[42],
colorNeutralStroke1Selected: grey[44],
colorNeutralStroke2: grey[32],
colorNeutralStroke3: grey[24],
colorNeutralStroke4: grey[24],
colorNeutralStroke4Hover: grey[18],
colorNeutralStroke4Pressed: grey[14],
colorNeutralStroke4Selected: grey[24],
colorNeutralStrokeSubtle: grey[4],
colorNeutralStrokeOnBrand: grey[16],
colorNeutralStrokeOnBrand2: white,
colorNeutralStrokeOnBrand2Hover: white,
colorNeutralStrokeOnBrand2Pressed: white,
colorNeutralStrokeOnBrand2Selected: 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: grey[26],
colorNeutralStrokeDisabled2: grey[24],
colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
colorTransparentStroke: 'transparent',
colorTransparentStrokeInteractive: 'transparent',
colorTransparentStrokeDisabled: 'transparent',
colorNeutralStrokeAlpha: whiteAlpha[10],
colorNeutralStrokeAlpha2: whiteAlpha[20],
colorStrokeFocus1: black,
colorStrokeFocus2: 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)'
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,5 @@
import { fontFamilies as globalFontFamilies } from "../global/fonts.js";
export const fontFamilies = {
...globalFontFamilies,
fontFamilyBase: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif'
};

View File

@@ -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":"AAAA,SAASA,gBAAgBC,kBAAkB,QAAQ,qBAAkB;AAErE,OAAO,MAAMD,eAAe;IAC1B,GAAGC,kBAAkB;IACrBC,gBACE;AACJ,EAAE"}