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,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createDarkTheme", {
enumerable: true,
get: function() {
return createDarkTheme;
}
});
const _darkColorPalette = require("../alias/darkColorPalette.js");
const _darkColor = require("../alias/darkColor.js");
const _index = require("../global/index.js");
const _shadows = require("./shadows.js");
const _durations = require("../global/durations.js");
const _curves = require("../global/curves.js");
const _spacings = require("../global/spacings.js");
const createDarkTheme = (brand)=>{
const colorTokens = (0, _darkColor.generateColorTokens)(brand);
return {
..._index.borderRadius,
..._index.fontSizes,
..._index.lineHeights,
..._index.fontFamilies,
..._index.fontWeights,
..._index.strokeWidths,
..._spacings.horizontalSpacings,
..._spacings.verticalSpacings,
..._durations.durations,
..._curves.curves,
...colorTokens,
..._darkColorPalette.colorPaletteTokens,
..._darkColorPalette.colorStatusTokens,
...(0, _shadows.createShadowTokens)(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...(0, _shadows.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":["createDarkTheme","brand","colorTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","fontWeights","strokeWidths","horizontalSpacings","verticalSpacings","durations","curves","colorPaletteTokens","colorStatusTokens","createShadowTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":";;;;+BAUaA;;;eAAAA;;;kCAVyC;2BAClB;uBAE0D;yBAC3D;2BAET;wBACH;0BAC8B;AAE9C,MAAMA,kBAAmDC,CAAAA;IAC9D,MAAMC,cAAcC,IAAAA,8BAAmB,EAACF;IAExC,OAAO;QACL,GAAGG,mBAAY;QACf,GAAGC,gBAAS;QACZ,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,4BAAkB;QACrB,GAAGC,0BAAgB;QACnB,GAAGC,oBAAS;QACZ,GAAGC,cAAM;QAET,GAAGX,WAAW;QACd,GAAGY,oCAAkB;QACrB,GAAGC,mCAAiB;QAEpB,GAAGC,IAAAA,2BAAkB,EAACd,YAAYe,yBAAyB,EAAEf,YAAYgB,qBAAqB,CAAC;QAC/F,GAAGF,IAAAA,2BAAkB,EAACd,YAAYiB,uBAAuB,EAAEjB,YAAYkB,mBAAmB,EAAE,QAAQ;IACtG;AACF"}

View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createHighContrastTheme", {
enumerable: true,
get: function() {
return createHighContrastTheme;
}
});
const _highContrastColorPalette = require("../alias/highContrastColorPalette.js");
const _highContrastColor = require("../alias/highContrastColor.js");
const _index = require("../global/index.js");
const _shadows = require("./shadows.js");
const _durations = require("../global/durations.js");
const _curves = require("../global/curves.js");
const _spacings = require("../global/spacings.js");
const createHighContrastTheme = ()=>{
const colorTokens = (0, _highContrastColor.generateColorTokens)();
return {
..._index.borderRadius,
..._index.fontSizes,
..._index.lineHeights,
..._index.fontFamilies,
..._index.fontWeights,
..._index.strokeWidths,
..._spacings.horizontalSpacings,
..._spacings.verticalSpacings,
..._durations.durations,
..._curves.curves,
...colorTokens,
..._highContrastColorPalette.colorPaletteTokens,
..._highContrastColorPalette.colorStatusTokens,
...(0, _shadows.createShadowTokens)(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...(0, _shadows.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":["createHighContrastTheme","colorTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","fontWeights","strokeWidths","horizontalSpacings","verticalSpacings","durations","curves","colorPaletteTokens","colorStatusTokens","createShadowTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":";;;;+BAUaA;;;eAAAA;;;0CAVyC;mCAClB;uBAE0D;yBAC3D;2BAET;wBACH;0BAC8B;AAE9C,MAAMA,0BAA0B;IACrC,MAAMC,cAAcC,IAAAA,sCAAmB;IAEvC,OAAO;QACL,GAAGC,mBAAY;QACf,GAAGC,gBAAS;QACZ,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,4BAAkB;QACrB,GAAGC,0BAAgB;QACnB,GAAGC,oBAAS;QACZ,GAAGC,cAAM;QAET,GAAGX,WAAW;QACd,GAAGY,4CAAkB;QACrB,GAAGC,2CAAiB;QAEpB,GAAGC,IAAAA,2BAAkB,EAACd,YAAYe,yBAAyB,EAAEf,YAAYgB,qBAAqB,CAAC;QAC/F,GAAGF,IAAAA,2BAAkB,EAACd,YAAYiB,uBAAuB,EAAEjB,YAAYkB,mBAAmB,EAAE,QAAQ;IACtG;AACF"}

View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createLightTheme", {
enumerable: true,
get: function() {
return createLightTheme;
}
});
const _lightColorPalette = require("../alias/lightColorPalette.js");
const _lightColor = require("../alias/lightColor.js");
const _index = require("../global/index.js");
const _shadows = require("./shadows.js");
const _durations = require("../global/durations.js");
const _curves = require("../global/curves.js");
const _spacings = require("../global/spacings.js");
const createLightTheme = (brand)=>{
const colorTokens = (0, _lightColor.generateColorTokens)(brand);
return {
..._index.borderRadius,
..._index.fontSizes,
..._index.lineHeights,
..._index.fontFamilies,
..._index.fontWeights,
..._index.strokeWidths,
..._spacings.horizontalSpacings,
..._spacings.verticalSpacings,
..._durations.durations,
..._curves.curves,
...colorTokens,
..._lightColorPalette.colorPaletteTokens,
..._lightColorPalette.colorStatusTokens,
...(0, _shadows.createShadowTokens)(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...(0, _shadows.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":["createLightTheme","brand","colorTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","fontWeights","strokeWidths","horizontalSpacings","verticalSpacings","durations","curves","colorPaletteTokens","colorStatusTokens","createShadowTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":";;;;+BAUaA;;;eAAAA;;;mCAVyC;4BAClB;uBAE0D;yBAC3D;2BAET;wBACH;0BAC8B;AAE9C,MAAMA,mBAAoDC,CAAAA;IAC/D,MAAMC,cAAcC,IAAAA,+BAAmB,EAACF;IAExC,OAAO;QACL,GAAGG,mBAAY;QACf,GAAGC,gBAAS;QACZ,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,4BAAkB;QACrB,GAAGC,0BAAgB;QACnB,GAAGC,oBAAS;QACZ,GAAGC,cAAM;QAET,GAAGX,WAAW;QACd,GAAGY,qCAAkB;QACrB,GAAGC,oCAAiB;QAEpB,GAAGC,IAAAA,2BAAkB,EAACd,YAAYe,yBAAyB,EAAEf,YAAYgB,qBAAqB,CAAC;QAC/F,GAAGF,IAAAA,2BAAkB,EAACd,YAAYiB,uBAAuB,EAAEjB,YAAYkB,mBAAmB,EAAE,QAAQ;IACtG;AACF"}

View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createTeamsDarkTheme", {
enumerable: true,
get: function() {
return createTeamsDarkTheme;
}
});
const _darkColorPalette = require("../alias/darkColorPalette.js");
const _teamsDarkColor = require("../alias/teamsDarkColor.js");
const _index = require("../global/index.js");
const _shadows = require("./shadows.js");
const _durations = require("../global/durations.js");
const _curves = require("../global/curves.js");
const _spacings = require("../global/spacings.js");
const createTeamsDarkTheme = (brand)=>{
const colorTokens = (0, _teamsDarkColor.generateColorTokens)(brand);
return {
..._index.borderRadius,
..._index.fontSizes,
..._index.lineHeights,
..._index.fontFamilies,
..._index.fontWeights,
..._index.strokeWidths,
..._spacings.horizontalSpacings,
..._spacings.verticalSpacings,
..._durations.durations,
..._curves.curves,
...colorTokens,
..._darkColorPalette.colorPaletteTokens,
..._darkColorPalette.colorStatusTokens,
...(0, _shadows.createShadowTokens)(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
...(0, _shadows.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":["createTeamsDarkTheme","brand","colorTokens","generateColorTokens","borderRadius","fontSizes","lineHeights","fontFamilies","fontWeights","strokeWidths","horizontalSpacings","verticalSpacings","durations","curves","colorPaletteTokens","colorStatusTokens","createShadowTokens","colorNeutralShadowAmbient","colorNeutralShadowKey","colorBrandShadowAmbient","colorBrandShadowKey"],"mappings":";;;;+BAUaA;;;eAAAA;;;kCAVyC;gCAClB;uBAE0D;yBAC3D;2BAET;wBACH;0BAC8B;AAE9C,MAAMA,uBAAwDC,CAAAA;IACnE,MAAMC,cAAcC,IAAAA,mCAAmB,EAACF;IAExC,OAAO;QACL,GAAGG,mBAAY;QACf,GAAGC,gBAAS;QACZ,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,kBAAW;QACd,GAAGC,mBAAY;QACf,GAAGC,4BAAkB;QACrB,GAAGC,0BAAgB;QACnB,GAAGC,oBAAS;QACZ,GAAGC,cAAM;QAET,GAAGX,WAAW;QACd,GAAGY,oCAAkB;QACrB,GAAGC,mCAAiB;QAEpB,GAAGC,IAAAA,2BAAkB,EAACd,YAAYe,yBAAyB,EAAEf,YAAYgB,qBAAqB,CAAC;QAC/F,GAAGF,IAAAA,2BAAkB,EAACd,YAAYiB,uBAAuB,EAAEjB,YAAYkB,mBAAmB,EAAE,QAAQ;IACtG;AACF"}

View File

@@ -0,0 +1,28 @@
"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, {
createDarkTheme: function() {
return _createDarkTheme.createDarkTheme;
},
createHighContrastTheme: function() {
return _createHighContrastTheme.createHighContrastTheme;
},
createLightTheme: function() {
return _createLightTheme.createLightTheme;
},
createTeamsDarkTheme: function() {
return _createTeamsDarkTheme.createTeamsDarkTheme;
}
});
const _createLightTheme = require("./createLightTheme.js");
const _createDarkTheme = require("./createDarkTheme.js");
const _createTeamsDarkTheme = require("./createTeamsDarkTheme.js");
const _createHighContrastTheme = require("./createHighContrastTheme.js");

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":["createDarkTheme","createHighContrastTheme","createLightTheme","createTeamsDarkTheme"],"mappings":";;;;;;;;;;;IACSA,eAAe;eAAfA,gCAAe;;IAEfC,uBAAuB;eAAvBA,gDAAuB;;IAHvBC,gBAAgB;eAAhBA,kCAAgB;;IAEhBC,oBAAoB;eAApBA,0CAAoB;;;kCAFI;iCACD;sCACK;yCACG"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createShadowTokens", {
enumerable: true,
get: function() {
return createShadowTokens;
}
});
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":";;;;+BAKgBA;;;eAAAA;;;AAAT,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"}