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

View File

@@ -0,0 +1,27 @@
import { colorPaletteTokens, colorStatusTokens } from "../alias/darkColorPalette.js";
import { generateColorTokens } from "../alias/darkColor.js";
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from "../global/index.js";
import { createShadowTokens } from "./shadows.js";
import { durations } from "../global/durations.js";
import { curves } from "../global/curves.js";
import { horizontalSpacings, verticalSpacings } from "../global/spacings.js";
export const createDarkTheme = (brand)=>{
const colorTokens = generateColorTokens(brand);
return {
...borderRadius,
...fontSizes,
...lineHeights,
...fontFamilies,
...fontWeights,
...strokeWidths,
...horizontalSpacings,
...verticalSpacings,
...durations,
...curves,
...colorTokens,
...colorPaletteTokens,
...colorStatusTokens,
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/createDarkTheme.ts"],"sourcesContent":["import { colorPaletteTokens, colorStatusTokens } from '../alias/darkColorPalette';\nimport { generateColorTokens } from '../alias/darkColor';\n\nimport { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';\nimport { createShadowTokens } from './shadows';\nimport type { BrandVariants, Theme } from '../types';\nimport { durations } from '../global/durations';\nimport { curves } from '../global/curves';\nimport { horizontalSpacings, verticalSpacings } from '../global/spacings';\n\nexport const createDarkTheme: (brand: BrandVariants) => Theme = brand => {\n const colorTokens = generateColorTokens(brand);\n\n return {\n ...borderRadius,\n ...fontSizes,\n ...lineHeights,\n ...fontFamilies,\n ...fontWeights,\n ...strokeWidths,\n ...horizontalSpacings,\n ...verticalSpacings,\n ...durations,\n ...curves,\n\n ...colorTokens,\n ...colorPaletteTokens,\n ...colorStatusTokens,\n\n ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),\n ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'),\n };\n};\n"],"names":["colorPaletteTokens","colorStatusTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","strokeWidths","fontWeights","createShadowTokens","durations","curves","horizontalSpacings","verticalSpacings","createDarkTheme","brand","colorTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,iBAAiB,QAAQ,+BAA4B;AAClF,SAASC,mBAAmB,QAAQ,wBAAqB;AAEzD,SAASC,YAAY,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,QAAQ,qBAAkB;AAChH,SAASC,kBAAkB,QAAQ,eAAY;AAE/C,SAASC,SAAS,QAAQ,yBAAsB;AAChD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,wBAAqB;AAE1E,OAAO,MAAMC,kBAAmDC,CAAAA;IAC9D,MAAMC,cAAcd,oBAAoBa;IAExC,OAAO;QACL,GAAGZ,YAAY;QACf,GAAGC,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGC,YAAY;QACf,GAAGE,WAAW;QACd,GAAGD,YAAY;QACf,GAAGK,kBAAkB;QACrB,GAAGC,gBAAgB;QACnB,GAAGH,SAAS;QACZ,GAAGC,MAAM;QAET,GAAGK,WAAW;QACd,GAAGhB,kBAAkB;QACrB,GAAGC,iBAAiB;QAEpB,GAAGQ,mBAAmBO,YAAYC,yBAAyB,EAAED,YAAYE,qBAAqB,CAAC;QAC/F,GAAGT,mBAAmBO,YAAYG,uBAAuB,EAAEH,YAAYI,mBAAmB,EAAE,QAAQ;IACtG;AACF,EAAE"}

View File

@@ -0,0 +1,27 @@
import { colorPaletteTokens, colorStatusTokens } from "../alias/highContrastColorPalette.js";
import { generateColorTokens } from "../alias/highContrastColor.js";
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from "../global/index.js";
import { createShadowTokens } from "./shadows.js";
import { durations } from "../global/durations.js";
import { curves } from "../global/curves.js";
import { horizontalSpacings, verticalSpacings } from "../global/spacings.js";
export const createHighContrastTheme = ()=>{
const colorTokens = generateColorTokens();
return {
...borderRadius,
...fontSizes,
...lineHeights,
...fontFamilies,
...fontWeights,
...strokeWidths,
...horizontalSpacings,
...verticalSpacings,
...durations,
...curves,
...colorTokens,
...colorPaletteTokens,
...colorStatusTokens,
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/createHighContrastTheme.ts"],"sourcesContent":["import { colorPaletteTokens, colorStatusTokens } from '../alias/highContrastColorPalette';\nimport { generateColorTokens } from '../alias/highContrastColor';\n\nimport { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';\nimport { createShadowTokens } from './shadows';\nimport type { Theme } from '../types';\nimport { durations } from '../global/durations';\nimport { curves } from '../global/curves';\nimport { horizontalSpacings, verticalSpacings } from '../global/spacings';\n\nexport const createHighContrastTheme = (): Theme => {\n const colorTokens = generateColorTokens();\n\n return {\n ...borderRadius,\n ...fontSizes,\n ...lineHeights,\n ...fontFamilies,\n ...fontWeights,\n ...strokeWidths,\n ...horizontalSpacings,\n ...verticalSpacings,\n ...durations,\n ...curves,\n\n ...colorTokens,\n ...colorPaletteTokens,\n ...colorStatusTokens,\n\n ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),\n ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'),\n };\n};\n"],"names":["colorPaletteTokens","colorStatusTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","strokeWidths","fontWeights","createShadowTokens","durations","curves","horizontalSpacings","verticalSpacings","createHighContrastTheme","colorTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,iBAAiB,QAAQ,uCAAoC;AAC1F,SAASC,mBAAmB,QAAQ,gCAA6B;AAEjE,SAASC,YAAY,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,QAAQ,qBAAkB;AAChH,SAASC,kBAAkB,QAAQ,eAAY;AAE/C,SAASC,SAAS,QAAQ,yBAAsB;AAChD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,wBAAqB;AAE1E,OAAO,MAAMC,0BAA0B;IACrC,MAAMC,cAAcb;IAEpB,OAAO;QACL,GAAGC,YAAY;QACf,GAAGC,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGC,YAAY;QACf,GAAGE,WAAW;QACd,GAAGD,YAAY;QACf,GAAGK,kBAAkB;QACrB,GAAGC,gBAAgB;QACnB,GAAGH,SAAS;QACZ,GAAGC,MAAM;QAET,GAAGI,WAAW;QACd,GAAGf,kBAAkB;QACrB,GAAGC,iBAAiB;QAEpB,GAAGQ,mBAAmBM,YAAYC,yBAAyB,EAAED,YAAYE,qBAAqB,CAAC;QAC/F,GAAGR,mBAAmBM,YAAYG,uBAAuB,EAAEH,YAAYI,mBAAmB,EAAE,QAAQ;IACtG;AACF,EAAE"}

View File

@@ -0,0 +1,27 @@
import { colorPaletteTokens, colorStatusTokens } from "../alias/lightColorPalette.js";
import { generateColorTokens } from "../alias/lightColor.js";
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from "../global/index.js";
import { createShadowTokens } from "./shadows.js";
import { durations } from "../global/durations.js";
import { curves } from "../global/curves.js";
import { horizontalSpacings, verticalSpacings } from "../global/spacings.js";
export const createLightTheme = (brand)=>{
const colorTokens = generateColorTokens(brand);
return {
...borderRadius,
...fontSizes,
...lineHeights,
...fontFamilies,
...fontWeights,
...strokeWidths,
...horizontalSpacings,
...verticalSpacings,
...durations,
...curves,
...colorTokens,
...colorPaletteTokens,
...colorStatusTokens,
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/createLightTheme.ts"],"sourcesContent":["import { colorPaletteTokens, colorStatusTokens } from '../alias/lightColorPalette';\nimport { generateColorTokens } from '../alias/lightColor';\n\nimport { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';\nimport { createShadowTokens } from './shadows';\nimport type { BrandVariants, Theme } from '../types';\nimport { durations } from '../global/durations';\nimport { curves } from '../global/curves';\nimport { horizontalSpacings, verticalSpacings } from '../global/spacings';\n\nexport const createLightTheme: (brand: BrandVariants) => Theme = brand => {\n const colorTokens = generateColorTokens(brand);\n\n return {\n ...borderRadius,\n ...fontSizes,\n ...lineHeights,\n ...fontFamilies,\n ...fontWeights,\n ...strokeWidths,\n ...horizontalSpacings,\n ...verticalSpacings,\n ...durations,\n ...curves,\n\n ...colorTokens,\n ...colorPaletteTokens,\n ...colorStatusTokens,\n\n ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),\n ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'),\n };\n};\n"],"names":["colorPaletteTokens","colorStatusTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","strokeWidths","fontWeights","createShadowTokens","durations","curves","horizontalSpacings","verticalSpacings","createLightTheme","brand","colorTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,iBAAiB,QAAQ,gCAA6B;AACnF,SAASC,mBAAmB,QAAQ,yBAAsB;AAE1D,SAASC,YAAY,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,QAAQ,qBAAkB;AAChH,SAASC,kBAAkB,QAAQ,eAAY;AAE/C,SAASC,SAAS,QAAQ,yBAAsB;AAChD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,wBAAqB;AAE1E,OAAO,MAAMC,mBAAoDC,CAAAA;IAC/D,MAAMC,cAAcd,oBAAoBa;IAExC,OAAO;QACL,GAAGZ,YAAY;QACf,GAAGC,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGC,YAAY;QACf,GAAGE,WAAW;QACd,GAAGD,YAAY;QACf,GAAGK,kBAAkB;QACrB,GAAGC,gBAAgB;QACnB,GAAGH,SAAS;QACZ,GAAGC,MAAM;QAET,GAAGK,WAAW;QACd,GAAGhB,kBAAkB;QACrB,GAAGC,iBAAiB;QAEpB,GAAGQ,mBAAmBO,YAAYC,yBAAyB,EAAED,YAAYE,qBAAqB,CAAC;QAC/F,GAAGT,mBAAmBO,YAAYG,uBAAuB,EAAEH,YAAYI,mBAAmB,EAAE,QAAQ;IACtG;AACF,EAAE"}

View File

@@ -0,0 +1,27 @@
import { colorPaletteTokens, colorStatusTokens } from "../alias/darkColorPalette.js";
import { generateColorTokens } from "../alias/teamsDarkColor.js";
import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from "../global/index.js";
import { createShadowTokens } from "./shadows.js";
import { durations } from "../global/durations.js";
import { curves } from "../global/curves.js";
import { horizontalSpacings, verticalSpacings } from "../global/spacings.js";
export const createTeamsDarkTheme = (brand)=>{
const colorTokens = generateColorTokens(brand);
return {
...borderRadius,
...fontSizes,
...lineHeights,
...fontFamilies,
...fontWeights,
...strokeWidths,
...horizontalSpacings,
...verticalSpacings,
...durations,
...curves,
...colorTokens,
...colorPaletteTokens,
...colorStatusTokens,
...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/createTeamsDarkTheme.ts"],"sourcesContent":["import { colorPaletteTokens, colorStatusTokens } from '../alias/darkColorPalette';\nimport { generateColorTokens } from '../alias/teamsDarkColor';\n\nimport { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';\nimport { createShadowTokens } from './shadows';\nimport type { BrandVariants, Theme } from '../types';\nimport { durations } from '../global/durations';\nimport { curves } from '../global/curves';\nimport { horizontalSpacings, verticalSpacings } from '../global/spacings';\n\nexport const createTeamsDarkTheme: (brand: BrandVariants) => Theme = brand => {\n const colorTokens = generateColorTokens(brand);\n\n return {\n ...borderRadius,\n ...fontSizes,\n ...lineHeights,\n ...fontFamilies,\n ...fontWeights,\n ...strokeWidths,\n ...horizontalSpacings,\n ...verticalSpacings,\n ...durations,\n ...curves,\n\n ...colorTokens,\n ...colorPaletteTokens,\n ...colorStatusTokens,\n\n ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),\n ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand'),\n };\n};\n"],"names":["colorPaletteTokens","colorStatusTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","strokeWidths","fontWeights","createShadowTokens","durations","curves","horizontalSpacings","verticalSpacings","createTeamsDarkTheme","brand","colorTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,iBAAiB,QAAQ,+BAA4B;AAClF,SAASC,mBAAmB,QAAQ,6BAA0B;AAE9D,SAASC,YAAY,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,QAAQ,qBAAkB;AAChH,SAASC,kBAAkB,QAAQ,eAAY;AAE/C,SAASC,SAAS,QAAQ,yBAAsB;AAChD,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,wBAAqB;AAE1E,OAAO,MAAMC,uBAAwDC,CAAAA;IACnE,MAAMC,cAAcd,oBAAoBa;IAExC,OAAO;QACL,GAAGZ,YAAY;QACf,GAAGC,SAAS;QACZ,GAAGC,WAAW;QACd,GAAGC,YAAY;QACf,GAAGE,WAAW;QACd,GAAGD,YAAY;QACf,GAAGK,kBAAkB;QACrB,GAAGC,gBAAgB;QACnB,GAAGH,SAAS;QACZ,GAAGC,MAAM;QAET,GAAGK,WAAW;QACd,GAAGhB,kBAAkB;QACrB,GAAGC,iBAAiB;QAEpB,GAAGQ,mBAAmBO,YAAYC,yBAAyB,EAAED,YAAYE,qBAAqB,CAAC;QAC/F,GAAGT,mBAAmBO,YAAYG,uBAAuB,EAAEH,YAAYI,mBAAmB,EAAE,QAAQ;IACtG;AACF,EAAE"}

4
node_modules/@fluentui/tokens/lib/utils/index.js generated vendored Normal file
View File

@@ -0,0 +1,4 @@
export { createLightTheme } from "./createLightTheme.js";
export { createDarkTheme } from "./createDarkTheme.js";
export { createTeamsDarkTheme } from "./createTeamsDarkTheme.js";
export { createHighContrastTheme } from "./createHighContrastTheme.js";

1
node_modules/@fluentui/tokens/lib/utils/index.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { createLightTheme } from './createLightTheme';\nexport { createDarkTheme } from './createDarkTheme';\nexport { createTeamsDarkTheme } from './createTeamsDarkTheme';\nexport { createHighContrastTheme } from './createHighContrastTheme';\n"],"names":["createLightTheme","createDarkTheme","createTeamsDarkTheme","createHighContrastTheme"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,uBAAuB,QAAQ,+BAA4B"}

10
node_modules/@fluentui/tokens/lib/utils/shadows.js generated vendored Normal file
View File

@@ -0,0 +1,10 @@
export function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') {
return {
[`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,
[`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,
[`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,
[`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`,
[`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,
[`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/shadows.ts"],"sourcesContent":["import type { ShadowBrandTokens, ShadowTokens } from '../types';\n\nexport function createShadowTokens(ambientColor: string, keyColor: string, tokenSuffix: 'Brand'): ShadowBrandTokens;\nexport function createShadowTokens(ambientColor: string, keyColor: string): ShadowTokens;\n\nexport function createShadowTokens(ambientColor: string, keyColor: string, tokenSuffix: 'Brand' | '' = '') {\n return {\n [`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,\n [`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,\n [`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,\n [`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`,\n [`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,\n [`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`,\n };\n}\n"],"names":["createShadowTokens","ambientColor","keyColor","tokenSuffix"],"mappings":"AAKA,OAAO,SAASA,mBAAmBC,YAAoB,EAAEC,QAAgB,EAAEC,cAA4B,EAAE;IACvG,OAAO;QACL,CAAC,CAAC,OAAO,EAAEA,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAEF,aAAa,YAAY,EAAEC,UAAU;QAC3E,CAAC,CAAC,OAAO,EAAEC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAEF,aAAa,YAAY,EAAEC,UAAU;QAC3E,CAAC,CAAC,OAAO,EAAEC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAEF,aAAa,YAAY,EAAEC,UAAU;QAC3E,CAAC,CAAC,QAAQ,EAAEC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAEF,aAAa,aAAa,EAAEC,UAAU;QAC7E,CAAC,CAAC,QAAQ,EAAEC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAEF,aAAa,cAAc,EAAEC,UAAU;QAC9E,CAAC,CAAC,QAAQ,EAAEC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAEF,aAAa,cAAc,EAAEC,UAAU;IAChF;AACF"}