first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
+2
View File
@@ -0,0 +1,2 @@
import type { ITheme } from './types/ITheme';
export declare const FluentTheme: ITheme;
+7
View File
@@ -0,0 +1,7 @@
define(["require", "exports", "./createTheme"], function (require, exports, createTheme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FluentTheme = void 0;
exports.FluentTheme = (0, createTheme_1.createTheme)({});
});
//# sourceMappingURL=FluentTheme.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"FluentTheme.js","sourceRoot":"../src/","sources":["FluentTheme.ts"],"names":[],"mappings":";;;;IAGa,QAAA,WAAW,GAAW,IAAA,yBAAW,EAAC,EAAE,CAAC,CAAC","sourcesContent":["import { createTheme } from './createTheme';\nimport type { ITheme } from './types/ITheme';\n\nexport const FluentTheme: ITheme = createTheme({});\n"]}
+2
View File
@@ -0,0 +1,2 @@
import type { IPalette } from '../types/index';
export declare const DefaultPalette: IPalette;
+60
View File
@@ -0,0 +1,60 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultPalette = void 0;
// When adding or removing a color, make sure you keep this consistent with IColorClassNames
// by adding the color variants.
exports.DefaultPalette = {
themeDarker: '#004578',
themeDark: '#005a9e',
themeDarkAlt: '#106ebe',
themePrimary: '#0078d4',
themeSecondary: '#2b88d8',
themeTertiary: '#71afe5',
themeLight: '#c7e0f4',
themeLighter: '#deecf9',
themeLighterAlt: '#eff6fc',
black: '#000000',
blackTranslucent40: 'rgba(0,0,0,.4)',
neutralDark: '#201f1e',
neutralPrimary: '#323130',
neutralPrimaryAlt: '#3b3a39',
neutralSecondary: '#605e5c',
neutralSecondaryAlt: '#8a8886',
neutralTertiary: '#a19f9d',
neutralTertiaryAlt: '#c8c6c4',
neutralQuaternary: '#d2d0ce',
neutralQuaternaryAlt: '#e1dfdd',
neutralLight: '#edebe9',
neutralLighter: '#f3f2f1',
neutralLighterAlt: '#faf9f8',
accent: '#0078d4',
white: '#ffffff',
whiteTranslucent40: 'rgba(255,255,255,.4)',
yellowDark: '#d29200',
yellow: '#ffb900',
yellowLight: '#fff100',
orange: '#d83b01',
orangeLight: '#ea4300',
orangeLighter: '#ff8c00',
redDark: '#a4262c',
red: '#e81123',
magentaDark: '#5c005c',
magenta: '#b4009e',
magentaLight: '#e3008c',
purpleDark: '#32145a',
purple: '#5c2d91',
purpleLight: '#b4a0ff',
blueDark: '#002050',
blueMid: '#00188f',
blue: '#0078d4',
blueLight: '#00bcf2',
tealDark: '#004b50',
teal: '#008272',
tealLight: '#00b294',
greenDark: '#004b1c',
green: '#107c10',
greenLight: '#bad80a',
};
});
//# sourceMappingURL=DefaultPalette.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"DefaultPalette.js","sourceRoot":"../src/","sources":["colors/DefaultPalette.ts"],"names":[],"mappings":";;;;IAEA,4FAA4F;IAC5F,gCAAgC;IACnB,QAAA,cAAc,GAAa;QACtC,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,SAAS;QACzB,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,gBAAgB;QACpC,WAAW,EAAE,SAAS;QACtB,cAAc,EAAE,SAAS;QACzB,iBAAiB,EAAE,SAAS;QAC5B,gBAAgB,EAAE,SAAS;QAC3B,mBAAmB,EAAE,SAAS;QAC9B,eAAe,EAAE,SAAS;QAC1B,kBAAkB,EAAE,SAAS;QAC7B,iBAAiB,EAAE,SAAS;QAC5B,oBAAoB,EAAE,SAAS;QAC/B,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,SAAS;QACzB,iBAAiB,EAAE,SAAS;QAC5B,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,sBAAsB;QAC1C,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,OAAO,EAAE,SAAS;QAClB,GAAG,EAAE,SAAS;QACd,WAAW,EAAE,SAAS;QACtB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,SAAS;QACpB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,SAAS;KACtB,CAAC","sourcesContent":["import type { IPalette } from '../types/index';\n\n// When adding or removing a color, make sure you keep this consistent with IColorClassNames\n// by adding the color variants.\nexport const DefaultPalette: IPalette = {\n themeDarker: '#004578',\n themeDark: '#005a9e',\n themeDarkAlt: '#106ebe',\n themePrimary: '#0078d4',\n themeSecondary: '#2b88d8',\n themeTertiary: '#71afe5',\n themeLight: '#c7e0f4',\n themeLighter: '#deecf9',\n themeLighterAlt: '#eff6fc',\n black: '#000000',\n blackTranslucent40: 'rgba(0,0,0,.4)',\n neutralDark: '#201f1e',\n neutralPrimary: '#323130',\n neutralPrimaryAlt: '#3b3a39',\n neutralSecondary: '#605e5c',\n neutralSecondaryAlt: '#8a8886',\n neutralTertiary: '#a19f9d',\n neutralTertiaryAlt: '#c8c6c4',\n neutralQuaternary: '#d2d0ce',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralLight: '#edebe9',\n neutralLighter: '#f3f2f1',\n neutralLighterAlt: '#faf9f8',\n accent: '#0078d4',\n white: '#ffffff',\n whiteTranslucent40: 'rgba(255,255,255,.4)',\n yellowDark: '#d29200',\n yellow: '#ffb900',\n yellowLight: '#fff100',\n orange: '#d83b01',\n orangeLight: '#ea4300',\n orangeLighter: '#ff8c00',\n redDark: '#a4262c',\n red: '#e81123',\n magentaDark: '#5c005c',\n magenta: '#b4009e',\n magentaLight: '#e3008c',\n purpleDark: '#32145a',\n purple: '#5c2d91',\n purpleLight: '#b4a0ff',\n blueDark: '#002050',\n blueMid: '#00188f',\n blue: '#0078d4',\n blueLight: '#00bcf2',\n tealDark: '#004b50',\n teal: '#008272',\n tealLight: '#00b294',\n greenDark: '#004b1c',\n green: '#107c10',\n greenLight: '#bad80a',\n};\n"]}
+72
View File
@@ -0,0 +1,72 @@
export declare namespace CommunicationColors {
const shade30 = "#004578";
const shade20 = "#005a9e";
const shade10 = "#106ebe";
const primary = "#0078d4";
const tint10 = "#2b88d8";
const tint20 = "#c7e0f4";
const tint30 = "#deecf9";
const tint40 = "#eff6fc";
}
export declare namespace NeutralColors {
const black = "#000000";
const gray220 = "#11100f";
const gray210 = "#161514";
const gray200 = "#1b1a19";
const gray190 = "#201f1e";
const gray180 = "#252423";
const gray170 = "#292827";
const gray160 = "#323130";
const gray150 = "#3b3a39";
const gray140 = "#484644";
const gray130 = "#605e5c";
const gray120 = "#797775";
const gray110 = "#8a8886";
const gray100 = "#979593";
const gray90 = "#a19f9d";
const gray80 = "#b3b0ad";
const gray70 = "#bebbb8";
const gray60 = "#c8c6c4";
const gray50 = "#d2d0ce";
const gray40 = "#e1dfdd";
const gray30 = "#edebe9";
const gray20 = "#f3f2f1";
const gray10 = "#faf9f8";
const white = "#ffffff";
}
export declare namespace SharedColors {
const pinkRed10 = "#750b1c";
const red20 = "#a4262c";
const red10 = "#d13438";
const redOrange20 = "#603d30";
const redOrange10 = "#da3b01";
const orange30 = "#8e562e";
const orange20 = "#ca5010";
const orange10 = "#ffaa44";
const yellow10 = "#fce100";
const orangeYellow20 = "#986f0b";
const orangeYellow10 = "#c19c00";
const yellowGreen10 = "#8cbd18";
const green20 = "#0b6a0b";
const green10 = "#498205";
const greenCyan10 = "#00ad56";
const cyan40 = "#005e50";
const cyan30 = "#005b70";
const cyan20 = "#038387";
const cyan10 = "#00b7c3";
const cyanBlue20 = "#004e8c";
const cyanBlue10 = "#0078d4";
const blue10 = "#4f6bed";
const blueMagenta40 = "#373277";
const blueMagenta30 = "#5c2e91";
const blueMagenta20 = "#8764b8";
const blueMagenta10 = "#8378de";
const magenta20 = "#881798";
const magenta10 = "#c239b3";
const magentaPink20 = "#9b0062";
const magentaPink10 = "#e3008c";
const gray40 = "#393939";
const gray30 = "#7a7574";
const gray20 = "#69797e";
const gray10 = "#a0aeb2";
}
+81
View File
@@ -0,0 +1,81 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SharedColors = exports.NeutralColors = exports.CommunicationColors = void 0;
var CommunicationColors;
(function (CommunicationColors) {
CommunicationColors.shade30 = '#004578';
CommunicationColors.shade20 = '#005a9e';
CommunicationColors.shade10 = '#106ebe';
CommunicationColors.primary = '#0078d4';
CommunicationColors.tint10 = '#2b88d8';
CommunicationColors.tint20 = '#c7e0f4';
CommunicationColors.tint30 = '#deecf9';
CommunicationColors.tint40 = '#eff6fc';
})(CommunicationColors || (exports.CommunicationColors = CommunicationColors = {}));
var NeutralColors;
(function (NeutralColors) {
NeutralColors.black = '#000000';
NeutralColors.gray220 = '#11100f';
NeutralColors.gray210 = '#161514';
NeutralColors.gray200 = '#1b1a19';
NeutralColors.gray190 = '#201f1e';
NeutralColors.gray180 = '#252423';
NeutralColors.gray170 = '#292827';
NeutralColors.gray160 = '#323130';
NeutralColors.gray150 = '#3b3a39';
NeutralColors.gray140 = '#484644';
NeutralColors.gray130 = '#605e5c';
NeutralColors.gray120 = '#797775';
NeutralColors.gray110 = '#8a8886';
NeutralColors.gray100 = '#979593';
NeutralColors.gray90 = '#a19f9d';
NeutralColors.gray80 = '#b3b0ad';
NeutralColors.gray70 = '#bebbb8';
NeutralColors.gray60 = '#c8c6c4';
NeutralColors.gray50 = '#d2d0ce';
NeutralColors.gray40 = '#e1dfdd';
NeutralColors.gray30 = '#edebe9';
NeutralColors.gray20 = '#f3f2f1';
NeutralColors.gray10 = '#faf9f8';
NeutralColors.white = '#ffffff';
})(NeutralColors || (exports.NeutralColors = NeutralColors = {}));
var SharedColors;
(function (SharedColors) {
SharedColors.pinkRed10 = '#750b1c';
SharedColors.red20 = '#a4262c';
SharedColors.red10 = '#d13438';
SharedColors.redOrange20 = '#603d30';
SharedColors.redOrange10 = '#da3b01';
SharedColors.orange30 = '#8e562e';
SharedColors.orange20 = '#ca5010';
SharedColors.orange10 = '#ffaa44';
SharedColors.yellow10 = '#fce100';
SharedColors.orangeYellow20 = '#986f0b';
SharedColors.orangeYellow10 = '#c19c00';
SharedColors.yellowGreen10 = '#8cbd18';
SharedColors.green20 = '#0b6a0b';
SharedColors.green10 = '#498205';
SharedColors.greenCyan10 = '#00ad56';
SharedColors.cyan40 = '#005e50';
SharedColors.cyan30 = '#005b70';
SharedColors.cyan20 = '#038387';
SharedColors.cyan10 = '#00b7c3';
SharedColors.cyanBlue20 = '#004e8c';
SharedColors.cyanBlue10 = '#0078d4';
SharedColors.blue10 = '#4f6bed';
SharedColors.blueMagenta40 = '#373277';
SharedColors.blueMagenta30 = '#5c2e91';
SharedColors.blueMagenta20 = '#8764b8';
SharedColors.blueMagenta10 = '#8378de';
SharedColors.magenta20 = '#881798';
SharedColors.magenta10 = '#c239b3';
SharedColors.magentaPink20 = '#9b0062';
SharedColors.magentaPink10 = '#e3008c';
SharedColors.gray40 = '#393939';
SharedColors.gray30 = '#7a7574';
SharedColors.gray20 = '#69797e';
SharedColors.gray10 = '#a0aeb2';
})(SharedColors || (exports.SharedColors = SharedColors = {}));
});
//# sourceMappingURL=FluentColors.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"FluentColors.js","sourceRoot":"../src/","sources":["colors/FluentColors.ts"],"names":[],"mappings":";;;;IAAA,IAAiB,mBAAmB,CASnC;IATD,WAAiB,mBAAmB;QACrB,2BAAO,GAAG,SAAS,CAAC;QACpB,2BAAO,GAAG,SAAS,CAAC;QACpB,2BAAO,GAAG,SAAS,CAAC;QACpB,2BAAO,GAAG,SAAS,CAAC;QACpB,0BAAM,GAAG,SAAS,CAAC;QACnB,0BAAM,GAAG,SAAS,CAAC;QACnB,0BAAM,GAAG,SAAS,CAAC;QACnB,0BAAM,GAAG,SAAS,CAAC;IAClC,CAAC,EATgB,mBAAmB,mCAAnB,mBAAmB,QASnC;IAED,IAAiB,aAAa,CAyB7B;IAzBD,WAAiB,aAAa;QACf,mBAAK,GAAG,SAAS,CAAC;QAClB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,qBAAO,GAAG,SAAS,CAAC;QACpB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,oBAAM,GAAG,SAAS,CAAC;QACnB,mBAAK,GAAG,SAAS,CAAC;IACjC,CAAC,EAzBgB,aAAa,6BAAb,aAAa,QAyB7B;IAED,IAAiB,YAAY,CAmC5B;IAnCD,WAAiB,YAAY;QACd,sBAAS,GAAG,SAAS,CAAC;QACtB,kBAAK,GAAG,SAAS,CAAC;QAClB,kBAAK,GAAG,SAAS,CAAC;QAClB,wBAAW,GAAG,SAAS,CAAC;QACxB,wBAAW,GAAG,SAAS,CAAC;QACxB,qBAAQ,GAAG,SAAS,CAAC;QACrB,qBAAQ,GAAG,SAAS,CAAC;QACrB,qBAAQ,GAAG,SAAS,CAAC;QACrB,qBAAQ,GAAG,SAAS,CAAC;QACrB,2BAAc,GAAG,SAAS,CAAC;QAC3B,2BAAc,GAAG,SAAS,CAAC;QAC3B,0BAAa,GAAG,SAAS,CAAC;QAC1B,oBAAO,GAAG,SAAS,CAAC;QACpB,oBAAO,GAAG,SAAS,CAAC;QACpB,wBAAW,GAAG,SAAS,CAAC;QACxB,mBAAM,GAAG,SAAS,CAAC;QACnB,mBAAM,GAAG,SAAS,CAAC;QACnB,mBAAM,GAAG,SAAS,CAAC;QACnB,mBAAM,GAAG,SAAS,CAAC;QACnB,uBAAU,GAAG,SAAS,CAAC;QACvB,uBAAU,GAAG,SAAS,CAAC;QACvB,mBAAM,GAAG,SAAS,CAAC;QACnB,0BAAa,GAAG,SAAS,CAAC;QAC1B,0BAAa,GAAG,SAAS,CAAC;QAC1B,0BAAa,GAAG,SAAS,CAAC;QAC1B,0BAAa,GAAG,SAAS,CAAC;QAC1B,sBAAS,GAAG,SAAS,CAAC;QACtB,sBAAS,GAAG,SAAS,CAAC;QACtB,0BAAa,GAAG,SAAS,CAAC;QAC1B,0BAAa,GAAG,SAAS,CAAC;QAC1B,mBAAM,GAAG,SAAS,CAAC;QACnB,mBAAM,GAAG,SAAS,CAAC;QACnB,mBAAM,GAAG,SAAS,CAAC;QACnB,mBAAM,GAAG,SAAS,CAAC;IAClC,CAAC,EAnCgB,YAAY,4BAAZ,YAAY,QAmC5B","sourcesContent":["export namespace CommunicationColors {\n export const shade30 = '#004578';\n export const shade20 = '#005a9e';\n export const shade10 = '#106ebe';\n export const primary = '#0078d4';\n export const tint10 = '#2b88d8';\n export const tint20 = '#c7e0f4';\n export const tint30 = '#deecf9';\n export const tint40 = '#eff6fc';\n}\n\nexport namespace NeutralColors {\n export const black = '#000000';\n export const gray220 = '#11100f';\n export const gray210 = '#161514';\n export const gray200 = '#1b1a19';\n export const gray190 = '#201f1e';\n export const gray180 = '#252423';\n export const gray170 = '#292827';\n export const gray160 = '#323130';\n export const gray150 = '#3b3a39';\n export const gray140 = '#484644';\n export const gray130 = '#605e5c';\n export const gray120 = '#797775';\n export const gray110 = '#8a8886';\n export const gray100 = '#979593';\n export const gray90 = '#a19f9d';\n export const gray80 = '#b3b0ad';\n export const gray70 = '#bebbb8';\n export const gray60 = '#c8c6c4';\n export const gray50 = '#d2d0ce';\n export const gray40 = '#e1dfdd';\n export const gray30 = '#edebe9';\n export const gray20 = '#f3f2f1';\n export const gray10 = '#faf9f8';\n export const white = '#ffffff';\n}\n\nexport namespace SharedColors {\n export const pinkRed10 = '#750b1c';\n export const red20 = '#a4262c';\n export const red10 = '#d13438';\n export const redOrange20 = '#603d30';\n export const redOrange10 = '#da3b01';\n export const orange30 = '#8e562e';\n export const orange20 = '#ca5010';\n export const orange10 = '#ffaa44';\n export const yellow10 = '#fce100';\n export const orangeYellow20 = '#986f0b';\n export const orangeYellow10 = '#c19c00';\n export const yellowGreen10 = '#8cbd18';\n export const green20 = '#0b6a0b';\n export const green10 = '#498205';\n export const greenCyan10 = '#00ad56';\n export const cyan40 = '#005e50';\n export const cyan30 = '#005b70';\n export const cyan20 = '#038387';\n export const cyan10 = '#00b7c3';\n export const cyanBlue20 = '#004e8c';\n export const cyanBlue10 = '#0078d4';\n export const blue10 = '#4f6bed';\n export const blueMagenta40 = '#373277';\n export const blueMagenta30 = '#5c2e91';\n export const blueMagenta20 = '#8764b8';\n export const blueMagenta10 = '#8378de';\n export const magenta20 = '#881798';\n export const magenta10 = '#c239b3';\n export const magentaPink20 = '#9b0062';\n export const magentaPink10 = '#e3008c';\n export const gray40 = '#393939';\n export const gray30 = '#7a7574';\n export const gray20 = '#69797e';\n export const gray10 = '#a0aeb2';\n}\n"]}
+2
View File
@@ -0,0 +1,2 @@
export { CommunicationColors, NeutralColors, SharedColors } from './FluentColors';
export { DefaultPalette } from './DefaultPalette';
+10
View File
@@ -0,0 +1,10 @@
define(["require", "exports", "./FluentColors", "./DefaultPalette"], function (require, exports, FluentColors_1, DefaultPalette_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultPalette = exports.SharedColors = exports.NeutralColors = exports.CommunicationColors = void 0;
Object.defineProperty(exports, "CommunicationColors", { enumerable: true, get: function () { return FluentColors_1.CommunicationColors; } });
Object.defineProperty(exports, "NeutralColors", { enumerable: true, get: function () { return FluentColors_1.NeutralColors; } });
Object.defineProperty(exports, "SharedColors", { enumerable: true, get: function () { return FluentColors_1.SharedColors; } });
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return DefaultPalette_1.DefaultPalette; } });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["colors/index.ts"],"names":[],"mappings":";;;;IAAS,mHAAA,mBAAmB,OAAA;IAAE,6GAAA,aAAa,OAAA;IAAE,4GAAA,YAAY,OAAA;IAChD,gHAAA,cAAc,OAAA","sourcesContent":["export { CommunicationColors, NeutralColors, SharedColors } from './FluentColors';\nexport { DefaultPalette } from './DefaultPalette';\n"]}
+7
View File
@@ -0,0 +1,7 @@
import type { PartialTheme, Theme } from './types/index';
/**
* Creates a custom theme definition.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export declare function createTheme(theme?: PartialTheme, depComments?: boolean): Theme;
+27
View File
@@ -0,0 +1,27 @@
define(["require", "exports", "./colors/index", "./effects/index", "./fonts/index", "./mergeThemes", "./spacing/index", "./utilities/makeSemanticColors"], function (require, exports, index_1, index_2, index_3, mergeThemes_1, index_4, makeSemanticColors_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createTheme = createTheme;
/**
* Creates a custom theme definition.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
function createTheme(theme, depComments) {
if (theme === void 0) { theme = {}; }
if (depComments === void 0) { depComments = false; }
var isInverted = !!theme.isInverted;
var baseTheme = {
palette: index_1.DefaultPalette,
effects: index_2.DefaultEffects,
fonts: index_3.DefaultFontStyles,
spacing: index_4.DefaultSpacing,
isInverted: isInverted,
disableGlobalClassNames: false,
semanticColors: (0, makeSemanticColors_1.makeSemanticColors)(index_1.DefaultPalette, index_2.DefaultEffects, undefined, isInverted, depComments),
rtl: undefined,
};
return (0, mergeThemes_1.mergeThemes)(baseTheme, theme);
}
});
//# sourceMappingURL=createTheme.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"createTheme.js","sourceRoot":"../src/","sources":["createTheme.ts"],"names":[],"mappings":";;;IAaA,kCAcC;IAnBD;;;;OAIG;IACH,SAAgB,WAAW,CAAC,KAAwB,EAAE,WAA4B;QAAtD,sBAAA,EAAA,UAAwB;QAAE,4BAAA,EAAA,mBAA4B;QAChF,IAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC;QACtC,IAAM,SAAS,GAAU;YACvB,OAAO,EAAE,sBAAc;YACvB,OAAO,EAAE,sBAAc;YACvB,KAAK,EAAE,yBAAiB;YACxB,OAAO,EAAE,sBAAc;YACvB,UAAU,YAAA;YACV,uBAAuB,EAAE,KAAK;YAC9B,cAAc,EAAE,IAAA,uCAAkB,EAAC,sBAAc,EAAE,sBAAc,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC;YACtG,GAAG,EAAE,SAAS;SACf,CAAC;QAEF,OAAO,IAAA,yBAAW,EAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC","sourcesContent":["import { DefaultPalette } from './colors/index';\nimport { DefaultEffects } from './effects/index';\nimport { DefaultFontStyles } from './fonts/index';\nimport { mergeThemes } from './mergeThemes';\nimport { DefaultSpacing } from './spacing/index';\nimport { makeSemanticColors } from './utilities/makeSemanticColors';\nimport type { PartialTheme, Theme } from './types/index';\n\n/**\n * Creates a custom theme definition.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function createTheme(theme: PartialTheme = {}, depComments: boolean = false): Theme {\n const isInverted = !!theme.isInverted;\n const baseTheme: Theme = {\n palette: DefaultPalette,\n effects: DefaultEffects,\n fonts: DefaultFontStyles,\n spacing: DefaultSpacing,\n isInverted,\n disableGlobalClassNames: false,\n semanticColors: makeSemanticColors(DefaultPalette, DefaultEffects, undefined, isInverted, depComments),\n rtl: undefined,\n };\n\n return mergeThemes(baseTheme, theme);\n}\n"]}
+2
View File
@@ -0,0 +1,2 @@
import type { IEffects } from '../types/index';
export declare const DefaultEffects: IEffects;
+15
View File
@@ -0,0 +1,15 @@
define(["require", "exports", "./FluentDepths"], function (require, exports, FluentDepths_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultEffects = void 0;
exports.DefaultEffects = {
elevation4: FluentDepths_1.Depths.depth4,
elevation8: FluentDepths_1.Depths.depth8,
elevation16: FluentDepths_1.Depths.depth16,
elevation64: FluentDepths_1.Depths.depth64,
roundedCorner2: '2px',
roundedCorner4: '4px',
roundedCorner6: '6px',
};
});
//# sourceMappingURL=DefaultEffects.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"DefaultEffects.js","sourceRoot":"../src/","sources":["effects/DefaultEffects.ts"],"names":[],"mappings":";;;;IAGa,QAAA,cAAc,GAAa;QACtC,UAAU,EAAE,qBAAM,CAAC,MAAM;QACzB,UAAU,EAAE,qBAAM,CAAC,MAAM;QACzB,WAAW,EAAE,qBAAM,CAAC,OAAO;QAC3B,WAAW,EAAE,qBAAM,CAAC,OAAO;QAE3B,cAAc,EAAE,KAAK;QACrB,cAAc,EAAE,KAAK;QACrB,cAAc,EAAE,KAAK;KACtB,CAAC","sourcesContent":["import { Depths } from './FluentDepths';\nimport type { IEffects } from '../types/index';\n\nexport const DefaultEffects: IEffects = {\n elevation4: Depths.depth4,\n elevation8: Depths.depth8,\n elevation16: Depths.depth16,\n elevation64: Depths.depth64,\n\n roundedCorner2: '2px',\n roundedCorner4: '4px',\n roundedCorner6: '6px',\n};\n"]}
+7
View File
@@ -0,0 +1,7 @@
export declare namespace Depths {
const depth0 = "0 0 0 0 transparent";
const depth4 = "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)";
const depth8 = "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)";
const depth16 = "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)";
const depth64 = "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)";
}
+14
View File
@@ -0,0 +1,14 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Depths = void 0;
var Depths;
(function (Depths) {
Depths.depth0 = '0 0 0 0 transparent';
Depths.depth4 = '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)';
Depths.depth8 = '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)';
Depths.depth16 = '0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)';
Depths.depth64 = '0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)';
})(Depths || (exports.Depths = Depths = {}));
});
//# sourceMappingURL=FluentDepths.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"FluentDepths.js","sourceRoot":"../src/","sources":["effects/FluentDepths.ts"],"names":[],"mappings":";;;;IAAA,IAAiB,MAAM,CAMtB;IAND,WAAiB,MAAM;QACR,aAAM,GAAG,qBAAqB,CAAC;QAC/B,aAAM,GAAG,4EAA4E,CAAC;QACtF,aAAM,GAAG,4EAA4E,CAAC;QACtF,cAAO,GAAG,6EAA6E,CAAC;QACxF,cAAO,GAAG,6EAA6E,CAAC;IACvG,CAAC,EANgB,MAAM,sBAAN,MAAM,QAMtB","sourcesContent":["export namespace Depths {\n export const depth0 = '0 0 0 0 transparent';\n export const depth4 = '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)';\n export const depth8 = '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)';\n export const depth16 = '0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)';\n export const depth64 = '0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)';\n}\n"]}
+2
View File
@@ -0,0 +1,2 @@
export { DefaultEffects } from './DefaultEffects';
export { Depths } from './FluentDepths';
+8
View File
@@ -0,0 +1,8 @@
define(["require", "exports", "./DefaultEffects", "./FluentDepths"], function (require, exports, DefaultEffects_1, FluentDepths_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Depths = exports.DefaultEffects = void 0;
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return DefaultEffects_1.DefaultEffects; } });
Object.defineProperty(exports, "Depths", { enumerable: true, get: function () { return FluentDepths_1.Depths; } });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["effects/index.ts"],"names":[],"mappings":";;;;IAAS,gHAAA,cAAc,OAAA;IACd,sGAAA,MAAM,OAAA","sourcesContent":["export { DefaultEffects } from './DefaultEffects';\nexport { Depths } from './FluentDepths';\n"]}
+3
View File
@@ -0,0 +1,3 @@
import type { IFontStyles } from '../types/IFontStyles';
export declare const DefaultFontStyles: IFontStyles;
export declare function registerDefaultFontFaces(baseUrl: string): void;
+67
View File
@@ -0,0 +1,67 @@
define(["require", "exports", "@fluentui/merge-styles", "./FluentFonts", "./createFontStyles", "@fluentui/utilities"], function (require, exports, merge_styles_1, FluentFonts_1, createFontStyles_1, utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultFontStyles = void 0;
exports.registerDefaultFontFaces = registerDefaultFontFaces;
// Default urls.
var DefaultBaseUrl = 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets';
// Standard font styling.
exports.DefaultFontStyles = (0, createFontStyles_1.createFontStyles)((0, utilities_1.getLanguage)());
function _registerFontFace(fontFamily, url, fontWeight, localFontName) {
fontFamily = "'".concat(fontFamily, "'");
var localFontSrc = localFontName !== undefined ? "local('".concat(localFontName, "'),") : '';
(0, merge_styles_1.fontFace)({
fontFamily: fontFamily,
src: localFontSrc + "url('".concat(url, ".woff2') format('woff2'),") + "url('".concat(url, ".woff') format('woff')"),
fontWeight: fontWeight,
fontStyle: 'normal',
fontDisplay: 'swap',
});
}
function _registerFontFaceSet(baseUrl, fontFamily, cdnFolder, cdnFontName, localFontName) {
if (cdnFontName === void 0) { cdnFontName = 'segoeui'; }
var urlBase = "".concat(baseUrl, "/").concat(cdnFolder, "/").concat(cdnFontName);
_registerFontFace(fontFamily, urlBase + '-light', FluentFonts_1.FontWeights.light, localFontName && localFontName + ' Light');
_registerFontFace(fontFamily, urlBase + '-semilight', FluentFonts_1.FontWeights.semilight, localFontName && localFontName + ' SemiLight');
_registerFontFace(fontFamily, urlBase + '-regular', FluentFonts_1.FontWeights.regular, localFontName);
_registerFontFace(fontFamily, urlBase + '-semibold', FluentFonts_1.FontWeights.semibold, localFontName && localFontName + ' SemiBold');
_registerFontFace(fontFamily, urlBase + '-bold', FluentFonts_1.FontWeights.bold, localFontName && localFontName + ' Bold');
}
function registerDefaultFontFaces(baseUrl) {
if (baseUrl) {
var fontUrl = "".concat(baseUrl, "/fonts");
// Produce @font-face definitions for all supported web fonts.
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Thai, 'leelawadeeui-thai', 'leelawadeeui');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Arabic, 'segoeui-arabic');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Cyrillic, 'segoeui-cyrillic');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.EastEuropean, 'segoeui-easteuropean');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Greek, 'segoeui-greek');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Hebrew, 'segoeui-hebrew');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Vietnamese, 'segoeui-vietnamese');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.WestEuropean, 'segoeui-westeuropean', 'segoeui', 'Segoe UI');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontFamilies.Selawik, 'selawik', 'selawik');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Armenian, 'segoeui-armenian');
_registerFontFaceSet(fontUrl, FluentFonts_1.LocalizedFontNames.Georgian, 'segoeui-georgian');
// Leelawadee UI (Thai) does not have a 'light' weight, so we override
// the font-face generated above to use the 'semilight' weight instead.
_registerFontFace('Leelawadee UI Web', "".concat(fontUrl, "/leelawadeeui-thai/leelawadeeui-semilight"), FluentFonts_1.FontWeights.light);
// Leelawadee UI (Thai) does not have a 'semibold' weight, so we override
// the font-face generated above to use the 'bold' weight instead.
_registerFontFace('Leelawadee UI Web', "".concat(fontUrl, "/leelawadeeui-thai/leelawadeeui-bold"), FluentFonts_1.FontWeights.semibold);
}
}
/**
* Reads the fontBaseUrl from window.FabricConfig.fontBaseUrl or falls back to a default.
*/
function _getFontBaseUrl() {
var _a, _b;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var fabricConfig = (_a = (0, utilities_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.FabricConfig;
return (_b = fabricConfig === null || fabricConfig === void 0 ? void 0 : fabricConfig.fontBaseUrl) !== null && _b !== void 0 ? _b : DefaultBaseUrl;
}
/**
* Register the font faces.
*/
registerDefaultFontFaces(_getFontBaseUrl());
});
//# sourceMappingURL=DefaultFontStyles.js.map
File diff suppressed because one or more lines are too long
+72
View File
@@ -0,0 +1,72 @@
import type { IFontWeight } from '@fluentui/merge-styles';
export declare namespace LocalizedFontNames {
const Arabic = "Segoe UI Web (Arabic)";
const Cyrillic = "Segoe UI Web (Cyrillic)";
const EastEuropean = "Segoe UI Web (East European)";
const Greek = "Segoe UI Web (Greek)";
const Hebrew = "Segoe UI Web (Hebrew)";
const Thai = "Leelawadee UI Web";
const Vietnamese = "Segoe UI Web (Vietnamese)";
const WestEuropean = "Segoe UI Web (West European)";
const Selawik = "Selawik Web";
const Armenian = "Segoe UI Web (Armenian)";
const Georgian = "Segoe UI Web (Georgian)";
}
export declare namespace LocalizedFontFamilies {
const Arabic = "'Segoe UI Web (Arabic)'";
const ChineseSimplified = "'Microsoft Yahei UI', Verdana, Simsun";
const ChineseTraditional = "'Microsoft Jhenghei UI', Pmingliu";
const Cyrillic = "'Segoe UI Web (Cyrillic)'";
const EastEuropean = "'Segoe UI Web (East European)'";
const Greek = "'Segoe UI Web (Greek)'";
const Hebrew = "'Segoe UI Web (Hebrew)'";
const Hindi = "'Nirmala UI'";
const Japanese = "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka";
const Korean = "'Malgun Gothic', Gulim";
const Selawik = "'Selawik Web'";
const Thai = "'Leelawadee UI Web', 'Kmer UI'";
const Vietnamese = "'Segoe UI Web (Vietnamese)'";
const WestEuropean = "'Segoe UI Web (West European)'";
const Armenian = "'Segoe UI Web (Armenian)'";
const Georgian = "'Segoe UI Web (Georgian)'";
}
export declare namespace FontSizes {
const size10 = "10px";
const size12 = "12px";
const size14 = "14px";
const size16 = "16px";
const size18 = "18px";
const size20 = "20px";
const size24 = "24px";
const size28 = "28px";
const size32 = "32px";
const size42 = "42px";
const size68 = "68px";
const mini: string;
const xSmall: string;
const small: string;
const smallPlus: string;
const medium: string;
const mediumPlus: string;
const icon: string;
const large: string;
const xLarge: string;
const xLargePlus: string;
const xxLarge: string;
const xxLargePlus: string;
const superLarge: string;
const mega: string;
}
export declare namespace FontWeights {
const light: IFontWeight;
const semilight: IFontWeight;
const regular: IFontWeight;
const semibold: IFontWeight;
const bold: IFontWeight;
}
export declare namespace IconFontSizes {
const xSmall: string;
const small: string;
const medium: string;
const large: string;
}
+87
View File
@@ -0,0 +1,87 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.LocalizedFontFamilies = exports.LocalizedFontNames = void 0;
// Font face names to be registered.
var LocalizedFontNames;
(function (LocalizedFontNames) {
LocalizedFontNames.Arabic = 'Segoe UI Web (Arabic)';
LocalizedFontNames.Cyrillic = 'Segoe UI Web (Cyrillic)';
LocalizedFontNames.EastEuropean = 'Segoe UI Web (East European)';
LocalizedFontNames.Greek = 'Segoe UI Web (Greek)';
LocalizedFontNames.Hebrew = 'Segoe UI Web (Hebrew)';
LocalizedFontNames.Thai = 'Leelawadee UI Web';
LocalizedFontNames.Vietnamese = 'Segoe UI Web (Vietnamese)';
LocalizedFontNames.WestEuropean = 'Segoe UI Web (West European)';
LocalizedFontNames.Selawik = 'Selawik Web';
LocalizedFontNames.Armenian = 'Segoe UI Web (Armenian)';
LocalizedFontNames.Georgian = 'Segoe UI Web (Georgian)';
})(LocalizedFontNames || (exports.LocalizedFontNames = LocalizedFontNames = {}));
// Font families with fallbacks, for the general regions.
var LocalizedFontFamilies;
(function (LocalizedFontFamilies) {
LocalizedFontFamilies.Arabic = "'".concat(LocalizedFontNames.Arabic, "'");
LocalizedFontFamilies.ChineseSimplified = "'Microsoft Yahei UI', Verdana, Simsun";
LocalizedFontFamilies.ChineseTraditional = "'Microsoft Jhenghei UI', Pmingliu";
LocalizedFontFamilies.Cyrillic = "'".concat(LocalizedFontNames.Cyrillic, "'");
LocalizedFontFamilies.EastEuropean = "'".concat(LocalizedFontNames.EastEuropean, "'");
LocalizedFontFamilies.Greek = "'".concat(LocalizedFontNames.Greek, "'");
LocalizedFontFamilies.Hebrew = "'".concat(LocalizedFontNames.Hebrew, "'");
LocalizedFontFamilies.Hindi = "'Nirmala UI'";
LocalizedFontFamilies.Japanese = "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka";
LocalizedFontFamilies.Korean = "'Malgun Gothic', Gulim";
LocalizedFontFamilies.Selawik = "'".concat(LocalizedFontNames.Selawik, "'");
LocalizedFontFamilies.Thai = "'Leelawadee UI Web', 'Kmer UI'";
LocalizedFontFamilies.Vietnamese = "'".concat(LocalizedFontNames.Vietnamese, "'");
LocalizedFontFamilies.WestEuropean = "'".concat(LocalizedFontNames.WestEuropean, "'");
LocalizedFontFamilies.Armenian = "'".concat(LocalizedFontNames.Armenian, "'");
LocalizedFontFamilies.Georgian = "'".concat(LocalizedFontNames.Georgian, "'");
})(LocalizedFontFamilies || (exports.LocalizedFontFamilies = LocalizedFontFamilies = {}));
// Standard font sizes.
var FontSizes;
(function (FontSizes) {
FontSizes.size10 = '10px';
FontSizes.size12 = '12px';
FontSizes.size14 = '14px';
FontSizes.size16 = '16px';
FontSizes.size18 = '18px';
FontSizes.size20 = '20px';
FontSizes.size24 = '24px';
FontSizes.size28 = '28px';
FontSizes.size32 = '32px';
FontSizes.size42 = '42px';
FontSizes.size68 = '68px';
FontSizes.mini = '10px';
FontSizes.xSmall = '10px';
FontSizes.small = '12px';
FontSizes.smallPlus = '12px';
FontSizes.medium = '14px';
FontSizes.mediumPlus = '16px';
FontSizes.icon = '16px';
FontSizes.large = '18px';
FontSizes.xLarge = '20px';
FontSizes.xLargePlus = '24px';
FontSizes.xxLarge = '28px';
FontSizes.xxLargePlus = '32px';
FontSizes.superLarge = '42px';
FontSizes.mega = '68px';
})(FontSizes || (exports.FontSizes = FontSizes = {}));
// Standard font weights.
var FontWeights;
(function (FontWeights) {
FontWeights.light = 100;
FontWeights.semilight = 300;
FontWeights.regular = 400;
FontWeights.semibold = 600;
FontWeights.bold = 700;
})(FontWeights || (exports.FontWeights = FontWeights = {}));
// Standard Icon Sizes.
var IconFontSizes;
(function (IconFontSizes) {
IconFontSizes.xSmall = '10px';
IconFontSizes.small = '12px';
IconFontSizes.medium = '16px';
IconFontSizes.large = '20px';
})(IconFontSizes || (exports.IconFontSizes = IconFontSizes = {}));
});
//# sourceMappingURL=FluentFonts.js.map
File diff suppressed because one or more lines are too long
+2
View File
@@ -0,0 +1,2 @@
import type { IFontStyles } from '../types/IFontStyles';
export declare function createFontStyles(localeCode: string | null): IFontStyles;
+85
View File
@@ -0,0 +1,85 @@
define(["require", "exports", "./FluentFonts"], function (require, exports, FluentFonts_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createFontStyles = createFontStyles;
// Fallback fonts, if specified system or web fonts are unavailable.
var FontFamilyFallbacks = "'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif";
// By default, we favor system fonts for the default.
// All localized fonts use a web font and never use the system font.
var defaultFontFamily = "'Segoe UI', '".concat(FluentFonts_1.LocalizedFontNames.WestEuropean, "'");
// Mapping of language prefix to to font family.
var LanguageToFontMap = {
ar: FluentFonts_1.LocalizedFontFamilies.Arabic,
bg: FluentFonts_1.LocalizedFontFamilies.Cyrillic,
cs: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
el: FluentFonts_1.LocalizedFontFamilies.Greek,
et: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
he: FluentFonts_1.LocalizedFontFamilies.Hebrew,
hi: FluentFonts_1.LocalizedFontFamilies.Hindi,
hr: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
hu: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
ja: FluentFonts_1.LocalizedFontFamilies.Japanese,
kk: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
ko: FluentFonts_1.LocalizedFontFamilies.Korean,
lt: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
lv: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
pl: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
ru: FluentFonts_1.LocalizedFontFamilies.Cyrillic,
sk: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
'sr-latn': FluentFonts_1.LocalizedFontFamilies.EastEuropean,
th: FluentFonts_1.LocalizedFontFamilies.Thai,
tr: FluentFonts_1.LocalizedFontFamilies.EastEuropean,
uk: FluentFonts_1.LocalizedFontFamilies.Cyrillic,
vi: FluentFonts_1.LocalizedFontFamilies.Vietnamese,
'zh-hans': FluentFonts_1.LocalizedFontFamilies.ChineseSimplified,
'zh-hant': FluentFonts_1.LocalizedFontFamilies.ChineseTraditional,
hy: FluentFonts_1.LocalizedFontFamilies.Armenian,
ka: FluentFonts_1.LocalizedFontFamilies.Georgian,
};
function _fontFamilyWithFallbacks(fontFamily) {
return "".concat(fontFamily, ", ").concat(FontFamilyFallbacks);
}
/**
* If there is a localized font for this language, return that.
* Returns undefined if there is no localized font for that language.
*/
function _getLocalizedFontFamily(language) {
for (var lang in LanguageToFontMap) {
if (LanguageToFontMap.hasOwnProperty(lang) && language && lang.indexOf(language) === 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return LanguageToFontMap[lang];
}
}
return defaultFontFamily;
}
function _createFont(size, weight, fontFamily) {
return {
fontFamily: fontFamily,
MozOsxFontSmoothing: 'grayscale',
WebkitFontSmoothing: 'antialiased',
fontSize: size,
fontWeight: weight,
};
}
function createFontStyles(localeCode) {
var localizedFont = _getLocalizedFontFamily(localeCode);
var fontFamilyWithFallback = _fontFamilyWithFallbacks(localizedFont);
var fontStyles = {
tiny: _createFont(FluentFonts_1.FontSizes.mini, FluentFonts_1.FontWeights.regular, fontFamilyWithFallback),
xSmall: _createFont(FluentFonts_1.FontSizes.xSmall, FluentFonts_1.FontWeights.regular, fontFamilyWithFallback),
small: _createFont(FluentFonts_1.FontSizes.small, FluentFonts_1.FontWeights.regular, fontFamilyWithFallback),
smallPlus: _createFont(FluentFonts_1.FontSizes.smallPlus, FluentFonts_1.FontWeights.regular, fontFamilyWithFallback),
medium: _createFont(FluentFonts_1.FontSizes.medium, FluentFonts_1.FontWeights.regular, fontFamilyWithFallback),
mediumPlus: _createFont(FluentFonts_1.FontSizes.mediumPlus, FluentFonts_1.FontWeights.regular, fontFamilyWithFallback),
large: _createFont(FluentFonts_1.FontSizes.large, FluentFonts_1.FontWeights.regular, fontFamilyWithFallback),
xLarge: _createFont(FluentFonts_1.FontSizes.xLarge, FluentFonts_1.FontWeights.semibold, fontFamilyWithFallback),
xLargePlus: _createFont(FluentFonts_1.FontSizes.xLargePlus, FluentFonts_1.FontWeights.semibold, fontFamilyWithFallback),
xxLarge: _createFont(FluentFonts_1.FontSizes.xxLarge, FluentFonts_1.FontWeights.semibold, fontFamilyWithFallback),
xxLargePlus: _createFont(FluentFonts_1.FontSizes.xxLargePlus, FluentFonts_1.FontWeights.semibold, fontFamilyWithFallback),
superLarge: _createFont(FluentFonts_1.FontSizes.superLarge, FluentFonts_1.FontWeights.semibold, fontFamilyWithFallback),
mega: _createFont(FluentFonts_1.FontSizes.mega, FluentFonts_1.FontWeights.semibold, fontFamilyWithFallback),
};
return fontStyles;
}
});
//# sourceMappingURL=createFontStyles.js.map
File diff suppressed because one or more lines are too long
+3
View File
@@ -0,0 +1,3 @@
export { FontSizes, FontWeights, IconFontSizes, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';
export { createFontStyles } from './createFontStyles';
export { DefaultFontStyles, registerDefaultFontFaces } from './DefaultFontStyles';
+14
View File
@@ -0,0 +1,14 @@
define(["require", "exports", "./FluentFonts", "./createFontStyles", "./DefaultFontStyles"], function (require, exports, FluentFonts_1, createFontStyles_1, DefaultFontStyles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.registerDefaultFontFaces = exports.DefaultFontStyles = exports.createFontStyles = exports.LocalizedFontNames = exports.LocalizedFontFamilies = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = void 0;
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return FluentFonts_1.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return FluentFonts_1.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return FluentFonts_1.IconFontSizes; } });
Object.defineProperty(exports, "LocalizedFontFamilies", { enumerable: true, get: function () { return FluentFonts_1.LocalizedFontFamilies; } });
Object.defineProperty(exports, "LocalizedFontNames", { enumerable: true, get: function () { return FluentFonts_1.LocalizedFontNames; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return createFontStyles_1.createFontStyles; } });
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return DefaultFontStyles_1.DefaultFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return DefaultFontStyles_1.registerDefaultFontFaces; } });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["fonts/index.ts"],"names":[],"mappings":";;;;IAAS,wGAAA,SAAS,OAAA;IAAE,0GAAA,WAAW,OAAA;IAAE,4GAAA,aAAa,OAAA;IAAE,oHAAA,qBAAqB,OAAA;IAAE,iHAAA,kBAAkB,OAAA;IAChF,oHAAA,gBAAgB,OAAA;IAChB,sHAAA,iBAAiB,OAAA;IAAE,6HAAA,wBAAwB,OAAA","sourcesContent":["export { FontSizes, FontWeights, IconFontSizes, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\nexport { createFontStyles } from './createFontStyles';\nexport { DefaultFontStyles, registerDefaultFontFaces } from './DefaultFontStyles';\n"]}
+10
View File
@@ -0,0 +1,10 @@
export { mergeThemes } from './mergeThemes';
export type { ComponentStyles, ComponentsStyles, IAnimationStyles, IAnimationVariables, IEffects, IFontStyles, IPalette, IPartialTheme, IScheme, ISchemeNames, ISemanticColors, ISemanticTextColors, ISpacing, ITheme, PartialTheme, Theme, } from './types/index';
export { CommunicationColors, DefaultPalette, NeutralColors, SharedColors } from './colors/index';
export { DefaultEffects, Depths } from './effects/index';
export { DefaultSpacing } from './spacing/index';
export { AnimationStyles, AnimationVariables, MotionAnimations, MotionDurations, MotionTimings } from './motion/index';
export { DefaultFontStyles, FontSizes, FontWeights, IconFontSizes, LocalizedFontFamilies, LocalizedFontNames, createFontStyles, registerDefaultFontFaces, } from './fonts/index';
export { createTheme } from './createTheme';
export { FluentTheme } from './FluentTheme';
import './version';
+29
View File
@@ -0,0 +1,29 @@
define(["require", "exports", "./mergeThemes", "./colors/index", "./effects/index", "./spacing/index", "./motion/index", "./fonts/index", "./createTheme", "./FluentTheme", "./version"], function (require, exports, mergeThemes_1, index_1, index_2, index_3, index_4, index_5, createTheme_1, FluentTheme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FluentTheme = exports.createTheme = exports.registerDefaultFontFaces = exports.createFontStyles = exports.LocalizedFontNames = exports.LocalizedFontFamilies = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.DefaultFontStyles = exports.MotionTimings = exports.MotionDurations = exports.MotionAnimations = exports.AnimationVariables = exports.AnimationStyles = exports.DefaultSpacing = exports.Depths = exports.DefaultEffects = exports.SharedColors = exports.NeutralColors = exports.DefaultPalette = exports.CommunicationColors = exports.mergeThemes = void 0;
Object.defineProperty(exports, "mergeThemes", { enumerable: true, get: function () { return mergeThemes_1.mergeThemes; } });
Object.defineProperty(exports, "CommunicationColors", { enumerable: true, get: function () { return index_1.CommunicationColors; } });
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return index_1.DefaultPalette; } });
Object.defineProperty(exports, "NeutralColors", { enumerable: true, get: function () { return index_1.NeutralColors; } });
Object.defineProperty(exports, "SharedColors", { enumerable: true, get: function () { return index_1.SharedColors; } });
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return index_2.DefaultEffects; } });
Object.defineProperty(exports, "Depths", { enumerable: true, get: function () { return index_2.Depths; } });
Object.defineProperty(exports, "DefaultSpacing", { enumerable: true, get: function () { return index_3.DefaultSpacing; } });
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return index_4.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return index_4.AnimationVariables; } });
Object.defineProperty(exports, "MotionAnimations", { enumerable: true, get: function () { return index_4.MotionAnimations; } });
Object.defineProperty(exports, "MotionDurations", { enumerable: true, get: function () { return index_4.MotionDurations; } });
Object.defineProperty(exports, "MotionTimings", { enumerable: true, get: function () { return index_4.MotionTimings; } });
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return index_5.DefaultFontStyles; } });
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return index_5.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return index_5.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return index_5.IconFontSizes; } });
Object.defineProperty(exports, "LocalizedFontFamilies", { enumerable: true, get: function () { return index_5.LocalizedFontFamilies; } });
Object.defineProperty(exports, "LocalizedFontNames", { enumerable: true, get: function () { return index_5.LocalizedFontNames; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return index_5.createFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return index_5.registerDefaultFontFaces; } });
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return createTheme_1.createTheme; } });
Object.defineProperty(exports, "FluentTheme", { enumerable: true, get: function () { return FluentTheme_1.FluentTheme; } });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;;IAAS,0GAAA,WAAW,OAAA;IAmBX,4GAAA,mBAAmB,OAAA;IAAE,uGAAA,cAAc,OAAA;IAAE,sGAAA,aAAa,OAAA;IAAE,qGAAA,YAAY,OAAA;IAChE,uGAAA,cAAc,OAAA;IAAE,+FAAA,MAAM,OAAA;IACtB,uGAAA,cAAc,OAAA;IACd,wGAAA,eAAe,OAAA;IAAE,2GAAA,kBAAkB,OAAA;IAAE,yGAAA,gBAAgB,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,sGAAA,aAAa,OAAA;IAE5F,0GAAA,iBAAiB,OAAA;IACjB,kGAAA,SAAS,OAAA;IACT,oGAAA,WAAW,OAAA;IACX,sGAAA,aAAa,OAAA;IACb,8GAAA,qBAAqB,OAAA;IACrB,2GAAA,kBAAkB,OAAA;IAClB,yGAAA,gBAAgB,OAAA;IAChB,iHAAA,wBAAwB,OAAA;IAEjB,0GAAA,WAAW,OAAA;IACX,0GAAA,WAAW,OAAA","sourcesContent":["export { mergeThemes } from './mergeThemes';\nexport type {\n ComponentStyles,\n ComponentsStyles,\n IAnimationStyles,\n IAnimationVariables,\n IEffects,\n IFontStyles,\n IPalette,\n IPartialTheme,\n IScheme,\n ISchemeNames,\n ISemanticColors,\n ISemanticTextColors,\n ISpacing,\n ITheme,\n PartialTheme,\n Theme,\n} from './types/index';\nexport { CommunicationColors, DefaultPalette, NeutralColors, SharedColors } from './colors/index';\nexport { DefaultEffects, Depths } from './effects/index';\nexport { DefaultSpacing } from './spacing/index';\nexport { AnimationStyles, AnimationVariables, MotionAnimations, MotionDurations, MotionTimings } from './motion/index';\nexport {\n DefaultFontStyles,\n FontSizes,\n FontWeights,\n IconFontSizes,\n LocalizedFontFamilies,\n LocalizedFontNames,\n createFontStyles,\n registerDefaultFontFaces,\n} from './fonts/index';\nexport { createTheme } from './createTheme';\nexport { FluentTheme } from './FluentTheme';\n\nimport './version';\n"]}
+5
View File
@@ -0,0 +1,5 @@
import type { PartialTheme, Theme } from './types/index';
/**
* Merge a partial/full theme into a full theme and returns a merged full theme.
*/
export declare function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;
+26
View File
@@ -0,0 +1,26 @@
define(["require", "exports", "@fluentui/utilities", "./utilities/makeSemanticColors"], function (require, exports, utilities_1, makeSemanticColors_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeThemes = mergeThemes;
/**
* Merge a partial/full theme into a full theme and returns a merged full theme.
*/
function mergeThemes(theme, partialTheme) {
var _a, _b, _c;
if (partialTheme === void 0) { partialTheme = {}; }
var mergedTheme = (0, utilities_1.merge)({}, theme, partialTheme, {
semanticColors: (0, makeSemanticColors_1.getSemanticColors)(partialTheme.palette, partialTheme.effects, partialTheme.semanticColors, partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted),
});
if (((_a = partialTheme.palette) === null || _a === void 0 ? void 0 : _a.themePrimary) && !((_b = partialTheme.palette) === null || _b === void 0 ? void 0 : _b.accent)) {
mergedTheme.palette.accent = partialTheme.palette.themePrimary;
}
if (partialTheme.defaultFontStyle) {
for (var _i = 0, _d = Object.keys(mergedTheme.fonts); _i < _d.length; _i++) {
var fontStyle = _d[_i];
mergedTheme.fonts[fontStyle] = (0, utilities_1.merge)(mergedTheme.fonts[fontStyle], partialTheme.defaultFontStyle, (_c = partialTheme === null || partialTheme === void 0 ? void 0 : partialTheme.fonts) === null || _c === void 0 ? void 0 : _c[fontStyle]);
}
}
return mergedTheme;
}
});
//# sourceMappingURL=mergeThemes.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"mergeThemes.js","sourceRoot":"../src/","sources":["mergeThemes.ts"],"names":[],"mappings":";;;IAOA,kCAyBC;IA5BD;;OAEG;IACH,SAAgB,WAAW,CAAC,KAAY,EAAE,YAA+B;;QAA/B,6BAAA,EAAA,iBAA+B;QACvE,IAAM,WAAW,GAAG,IAAA,iBAAK,EAAuB,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE;YACvE,cAAc,EAAE,IAAA,sCAAiB,EAC/B,YAAY,CAAC,OAAO,EACpB,YAAY,CAAC,OAAO,EACpB,YAAY,CAAC,cAAc,EAC3B,YAAY,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CACnF;SACF,CAAU,CAAC;QAEZ,IAAI,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,YAAY,KAAI,CAAC,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,MAAM,CAAA,EAAE,CAAC;YACxE,WAAW,CAAC,OAAO,CAAC,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC;QACjE,CAAC;QAED,IAAI,YAAY,CAAC,gBAAgB,EAAE,CAAC;YAClC,KAAwB,UAAuD,EAAvD,KAAA,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAA0B,EAAvD,cAAuD,EAAvD,IAAuD,EAAE,CAAC;gBAA7E,IAAM,SAAS,SAAA;gBAClB,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,IAAA,iBAAK,EAClC,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5B,YAAY,CAAC,gBAAgB,EAC7B,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,0CAAG,SAAS,CAAC,CACjC,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC","sourcesContent":["import { merge } from '@fluentui/utilities';\nimport { getSemanticColors } from './utilities/makeSemanticColors';\nimport type { IFontStyles, PartialTheme, Theme } from './types/index';\n\n/**\n * Merge a partial/full theme into a full theme and returns a merged full theme.\n */\nexport function mergeThemes(theme: Theme, partialTheme: PartialTheme = {}): Theme {\n const mergedTheme = merge<Theme | PartialTheme>({}, theme, partialTheme, {\n semanticColors: getSemanticColors(\n partialTheme.palette,\n partialTheme.effects,\n partialTheme.semanticColors,\n partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted,\n ),\n }) as Theme;\n\n if (partialTheme.palette?.themePrimary && !partialTheme.palette?.accent) {\n mergedTheme.palette.accent = partialTheme.palette.themePrimary;\n }\n\n if (partialTheme.defaultFontStyle) {\n for (const fontStyle of Object.keys(mergedTheme.fonts) as (keyof IFontStyles)[]) {\n mergedTheme.fonts[fontStyle] = merge(\n mergedTheme.fonts[fontStyle],\n partialTheme.defaultFontStyle,\n partialTheme?.fonts?.[fontStyle],\n );\n }\n }\n\n return mergedTheme;\n}\n"]}
+10
View File
@@ -0,0 +1,10 @@
import type { IAnimationStyles, IAnimationVariables } from '../types/IAnimationStyles';
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
export declare const AnimationVariables: IAnimationVariables;
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
export declare const AnimationStyles: IAnimationStyles;
+157
View File
@@ -0,0 +1,157 @@
define(["require", "exports", "@fluentui/merge-styles"], function (require, exports, merge_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimationStyles = exports.AnimationVariables = void 0;
/* Register the keyframes */
var EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
var EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
var DURATION_1 = '0.167s';
var DURATION_2 = '0.267s';
var DURATION_3 = '0.367s';
var DURATION_4 = '0.467s';
var FADE_IN = (0, merge_styles_1.keyframes)({
from: { opacity: 0 },
to: { opacity: 1 },
});
var FADE_OUT = (0, merge_styles_1.keyframes)({
from: { opacity: 1 },
to: { opacity: 0, visibility: 'hidden' },
});
var SLIDE_RIGHT_IN10 = _createSlideInX(-10);
var SLIDE_RIGHT_IN20 = _createSlideInX(-20);
var SLIDE_RIGHT_IN40 = _createSlideInX(-40);
var SLIDE_RIGHT_IN400 = _createSlideInX(-400);
var SLIDE_LEFT_IN10 = _createSlideInX(10);
var SLIDE_LEFT_IN20 = _createSlideInX(20);
var SLIDE_LEFT_IN40 = _createSlideInX(40);
var SLIDE_LEFT_IN400 = _createSlideInX(400);
var SLIDE_UP_IN10 = _createSlideInY(10);
var SLIDE_UP_IN20 = _createSlideInY(20);
var SLIDE_DOWN_IN10 = _createSlideInY(-10);
var SLIDE_DOWN_IN20 = _createSlideInY(-20);
var SLIDE_RIGHT_OUT10 = _createSlideOutX(10);
var SLIDE_RIGHT_OUT20 = _createSlideOutX(20);
var SLIDE_RIGHT_OUT40 = _createSlideOutX(40);
var SLIDE_RIGHT_OUT400 = _createSlideOutX(400);
var SLIDE_LEFT_OUT10 = _createSlideOutX(-10);
var SLIDE_LEFT_OUT20 = _createSlideOutX(-20);
var SLIDE_LEFT_OUT40 = _createSlideOutX(-40);
var SLIDE_LEFT_OUT400 = _createSlideOutX(-400);
var SLIDE_UP_OUT10 = _createSlideOutY(-10);
var SLIDE_UP_OUT20 = _createSlideOutY(-20);
var SLIDE_DOWN_OUT10 = _createSlideOutY(10);
var SLIDE_DOWN_OUT20 = _createSlideOutY(20);
var SCALE_UP100 = (0, merge_styles_1.keyframes)({
from: { transform: 'scale3d(.98,.98,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_DOWN98 = (0, merge_styles_1.keyframes)({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(.98,.98,1)' },
});
var SCALE_DOWN100 = (0, merge_styles_1.keyframes)({
from: { transform: 'scale3d(1.03,1.03,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_UP103 = (0, merge_styles_1.keyframes)({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(1.03,1.03,1)' },
});
var ROTATE90 = (0, merge_styles_1.keyframes)({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(90deg)' },
});
var ROTATE_N90 = (0, merge_styles_1.keyframes)({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(-90deg)' },
});
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
exports.AnimationVariables = {
easeFunction1: EASING_FUNCTION_1,
easeFunction2: EASING_FUNCTION_2,
durationValue1: DURATION_1,
durationValue2: DURATION_2,
durationValue3: DURATION_3,
durationValue4: DURATION_4,
};
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
exports.AnimationStyles = {
slideRightIn10: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_RIGHT_IN10), DURATION_3, EASING_FUNCTION_1),
slideRightIn20: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_RIGHT_IN20), DURATION_3, EASING_FUNCTION_1),
slideRightIn40: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_RIGHT_IN40), DURATION_3, EASING_FUNCTION_1),
slideRightIn400: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_RIGHT_IN400), DURATION_3, EASING_FUNCTION_1),
slideLeftIn10: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_LEFT_IN10), DURATION_3, EASING_FUNCTION_1),
slideLeftIn20: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_LEFT_IN20), DURATION_3, EASING_FUNCTION_1),
slideLeftIn40: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_LEFT_IN40), DURATION_3, EASING_FUNCTION_1),
slideLeftIn400: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_LEFT_IN400), DURATION_3, EASING_FUNCTION_1),
slideUpIn10: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_UP_IN10), DURATION_3, EASING_FUNCTION_1),
slideUpIn20: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_UP_IN20), DURATION_3, EASING_FUNCTION_1),
slideDownIn10: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_DOWN_IN10), DURATION_3, EASING_FUNCTION_1),
slideDownIn20: _createAnimation("".concat(FADE_IN, ",").concat(SLIDE_DOWN_IN20), DURATION_3, EASING_FUNCTION_1),
slideRightOut10: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_RIGHT_OUT10), DURATION_3, EASING_FUNCTION_1),
slideRightOut20: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_RIGHT_OUT20), DURATION_3, EASING_FUNCTION_1),
slideRightOut40: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_RIGHT_OUT40), DURATION_3, EASING_FUNCTION_1),
slideRightOut400: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_RIGHT_OUT400), DURATION_3, EASING_FUNCTION_1),
slideLeftOut10: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_LEFT_OUT10), DURATION_3, EASING_FUNCTION_1),
slideLeftOut20: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_LEFT_OUT20), DURATION_3, EASING_FUNCTION_1),
slideLeftOut40: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_LEFT_OUT40), DURATION_3, EASING_FUNCTION_1),
slideLeftOut400: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_LEFT_OUT400), DURATION_3, EASING_FUNCTION_1),
slideUpOut10: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_UP_OUT10), DURATION_3, EASING_FUNCTION_1),
slideUpOut20: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_UP_OUT20), DURATION_3, EASING_FUNCTION_1),
slideDownOut10: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_DOWN_OUT10), DURATION_3, EASING_FUNCTION_1),
slideDownOut20: _createAnimation("".concat(FADE_OUT, ",").concat(SLIDE_DOWN_OUT20), DURATION_3, EASING_FUNCTION_1),
scaleUpIn100: _createAnimation("".concat(FADE_IN, ",").concat(SCALE_UP100), DURATION_3, EASING_FUNCTION_1),
scaleDownIn100: _createAnimation("".concat(FADE_IN, ",").concat(SCALE_DOWN100), DURATION_3, EASING_FUNCTION_1),
scaleUpOut103: _createAnimation("".concat(FADE_OUT, ",").concat(SCALE_UP103), DURATION_1, EASING_FUNCTION_2),
scaleDownOut98: _createAnimation("".concat(FADE_OUT, ",").concat(SCALE_DOWN98), DURATION_1, EASING_FUNCTION_2),
fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),
fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),
fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),
fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),
fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),
fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),
fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),
fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),
rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),
rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),
// expandCollapse 100/200/400, delay 100/200
};
function _createAnimation(animationName, animationDuration, animationTimingFunction) {
return {
animationName: animationName,
animationDuration: animationDuration,
animationTimingFunction: animationTimingFunction,
animationFillMode: 'both',
};
}
function _createSlideInX(fromX) {
return (0, merge_styles_1.keyframes)({
from: { transform: "translate3d(".concat(fromX, "px,0,0)"), pointerEvents: 'none' },
to: { transform: "translate3d(0,0,0)", pointerEvents: 'auto' },
});
}
function _createSlideInY(fromY) {
return (0, merge_styles_1.keyframes)({
from: { transform: "translate3d(0,".concat(fromY, "px,0)"), pointerEvents: 'none' },
to: { transform: "translate3d(0,0,0)", pointerEvents: 'auto' },
});
}
function _createSlideOutX(toX) {
return (0, merge_styles_1.keyframes)({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(".concat(toX, "px,0,0)") },
});
}
function _createSlideOutY(toY) {
return (0, merge_styles_1.keyframes)({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(0,".concat(toY, "px,0)") },
});
}
});
//# sourceMappingURL=AnimationStyles.js.map
File diff suppressed because one or more lines are too long
+26
View File
@@ -0,0 +1,26 @@
export declare namespace MotionDurations {
const duration1 = "100ms";
const duration2 = "200ms";
const duration3 = "300ms";
const duration4 = "400ms";
}
export declare namespace MotionTimings {
const accelerate = "cubic-bezier(0.9, 0.1, 1, 0.2)";
const decelerate = "cubic-bezier(0.1, 0.9, 0.2, 1)";
const linear = "cubic-bezier(0, 0, 1, 1)";
const standard = "cubic-bezier(0.8, 0, 0.2, 1)";
}
export declare namespace MotionAnimations {
const fadeIn: string;
const fadeOut: string;
const scaleDownIn: string;
const scaleDownOut: string;
const slideLeftOut: string;
const slideRightOut: string;
const slideLeftIn: string;
const slideRightIn: string;
const slideUpOut: string;
const slideDownOut: string;
const slideUpIn: string;
const slideDownIn: string;
}
+86
View File
@@ -0,0 +1,86 @@
define(["require", "exports", "@fluentui/merge-styles"], function (require, exports, merge_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MotionAnimations = exports.MotionTimings = exports.MotionDurations = void 0;
var fadeInAnimationName = (0, merge_styles_1.keyframes)({
from: { opacity: 0 },
to: { opacity: 1 },
});
var fadeOutAnimationName = (0, merge_styles_1.keyframes)({
from: { opacity: 1 },
to: { opacity: 0 },
});
var scaleDownInAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'scale3d(1.15, 1.15, 1)' },
to: { transform: 'scale3d(1, 1, 1)' },
});
var scaleDownOutAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'scale3d(1, 1, 1)' },
to: { transform: 'scale3d(0.9, 0.9, 1)' },
});
var slideLeftOutAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(0, 0, 0)' },
to: { transform: 'translate3d(-48px, 0, 0)' },
});
var slideRightOutAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(0, 0, 0)' },
to: { transform: 'translate3d(48px, 0, 0)' },
});
var slideLeftInAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(48px, 0, 0)' },
to: { transform: 'translate3d(0, 0, 0)' },
});
var slideRightInAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(-48px, 0, 0)' },
to: { transform: 'translate3d(0, 0, 0)' },
});
var slideUpOutAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(0, 0, 0)' },
to: { transform: 'translate3d(0, -48px, 0)' },
});
var slideDownOutAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(0, 0, 0)' },
to: { transform: 'translate3d(0, 48px, 0)' },
});
var slideUpInAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(0, 48px, 0)' },
to: { transform: 'translate3d(0, 0, 0)' },
});
var slideDownInAnimationName = (0, merge_styles_1.keyframes)({
from: { transform: 'translate3d(0, -48px, 0)' },
to: { transform: 'translate3d(0, 0, 0)' },
});
var MotionDurations;
(function (MotionDurations) {
MotionDurations.duration1 = '100ms';
MotionDurations.duration2 = '200ms';
MotionDurations.duration3 = '300ms';
MotionDurations.duration4 = '400ms';
})(MotionDurations || (exports.MotionDurations = MotionDurations = {}));
var MotionTimings;
(function (MotionTimings) {
MotionTimings.accelerate = 'cubic-bezier(0.9, 0.1, 1, 0.2)';
MotionTimings.decelerate = 'cubic-bezier(0.1, 0.9, 0.2, 1)';
MotionTimings.linear = 'cubic-bezier(0, 0, 1, 1)';
MotionTimings.standard = 'cubic-bezier(0.8, 0, 0.2, 1)';
})(MotionTimings || (exports.MotionTimings = MotionTimings = {}));
function _createAnimation(animationName, animationDuration, animationTimingFunction) {
return "".concat(animationName, " ").concat(animationDuration, " ").concat(animationTimingFunction);
}
var MotionAnimations;
(function (MotionAnimations) {
MotionAnimations.fadeIn = _createAnimation(fadeInAnimationName, MotionDurations.duration1, MotionTimings.linear);
MotionAnimations.fadeOut = _createAnimation(fadeOutAnimationName, MotionDurations.duration1, MotionTimings.linear);
MotionAnimations.scaleDownIn = _createAnimation(scaleDownInAnimationName, MotionDurations.duration3, MotionTimings.decelerate);
MotionAnimations.scaleDownOut = _createAnimation(scaleDownOutAnimationName, MotionDurations.duration3, MotionTimings.decelerate);
MotionAnimations.slideLeftOut = _createAnimation(slideLeftOutAnimationName, MotionDurations.duration1, MotionTimings.accelerate);
MotionAnimations.slideRightOut = _createAnimation(slideRightOutAnimationName, MotionDurations.duration1, MotionTimings.accelerate);
MotionAnimations.slideLeftIn = _createAnimation(slideLeftInAnimationName, MotionDurations.duration1, MotionTimings.decelerate);
MotionAnimations.slideRightIn = _createAnimation(slideRightInAnimationName, MotionDurations.duration1, MotionTimings.decelerate);
MotionAnimations.slideUpOut = _createAnimation(slideUpOutAnimationName, MotionDurations.duration1, MotionTimings.accelerate);
MotionAnimations.slideDownOut = _createAnimation(slideDownOutAnimationName, MotionDurations.duration1, MotionTimings.accelerate);
MotionAnimations.slideUpIn = _createAnimation(slideUpInAnimationName, MotionDurations.duration1, MotionTimings.decelerate);
MotionAnimations.slideDownIn = _createAnimation(slideDownInAnimationName, MotionDurations.duration1, MotionTimings.decelerate);
})(MotionAnimations || (exports.MotionAnimations = MotionAnimations = {}));
});
//# sourceMappingURL=FluentMotion.js.map
File diff suppressed because one or more lines are too long
+2
View File
@@ -0,0 +1,2 @@
export { MotionAnimations, MotionDurations, MotionTimings } from './FluentMotion';
export { AnimationStyles, AnimationVariables } from './AnimationStyles';
+11
View File
@@ -0,0 +1,11 @@
define(["require", "exports", "./FluentMotion", "./AnimationStyles"], function (require, exports, FluentMotion_1, AnimationStyles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimationVariables = exports.AnimationStyles = exports.MotionTimings = exports.MotionDurations = exports.MotionAnimations = void 0;
Object.defineProperty(exports, "MotionAnimations", { enumerable: true, get: function () { return FluentMotion_1.MotionAnimations; } });
Object.defineProperty(exports, "MotionDurations", { enumerable: true, get: function () { return FluentMotion_1.MotionDurations; } });
Object.defineProperty(exports, "MotionTimings", { enumerable: true, get: function () { return FluentMotion_1.MotionTimings; } });
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return AnimationStyles_1.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return AnimationStyles_1.AnimationVariables; } });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["motion/index.ts"],"names":[],"mappings":";;;;IAAS,gHAAA,gBAAgB,OAAA;IAAE,+GAAA,eAAe,OAAA;IAAE,6GAAA,aAAa,OAAA;IAChD,kHAAA,eAAe,OAAA;IAAE,qHAAA,kBAAkB,OAAA","sourcesContent":["export { MotionAnimations, MotionDurations, MotionTimings } from './FluentMotion';\nexport { AnimationStyles, AnimationVariables } from './AnimationStyles';\n"]}
+2
View File
@@ -0,0 +1,2 @@
import type { ISpacing } from '../types/index';
export declare const DefaultSpacing: ISpacing;
+13
View File
@@ -0,0 +1,13 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultSpacing = void 0;
exports.DefaultSpacing = {
s2: '4px',
s1: '8px',
m: '16px',
l1: '20px',
l2: '32px',
};
});
//# sourceMappingURL=DefaultSpacing.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"DefaultSpacing.js","sourceRoot":"../src/","sources":["spacing/DefaultSpacing.ts"],"names":[],"mappings":";;;;IAEa,QAAA,cAAc,GAAa;QACtC,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;KACX,CAAC","sourcesContent":["import type { ISpacing } from '../types/index';\n\nexport const DefaultSpacing: ISpacing = {\n s2: '4px',\n s1: '8px',\n m: '16px',\n l1: '20px',\n l2: '32px',\n};\n"]}
+1
View File
@@ -0,0 +1 @@
export { DefaultSpacing } from './DefaultSpacing';
+7
View File
@@ -0,0 +1,7 @@
define(["require", "exports", "./DefaultSpacing"], function (require, exports, DefaultSpacing_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultSpacing = void 0;
Object.defineProperty(exports, "DefaultSpacing", { enumerable: true, get: function () { return DefaultSpacing_1.DefaultSpacing; } });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["spacing/index.ts"],"names":[],"mappings":";;;;IAAS,gHAAA,cAAc,OAAA","sourcesContent":["export { DefaultSpacing } from './DefaultSpacing';\n"]}
+54
View File
@@ -0,0 +1,54 @@
import type { IRawStyle } from '@fluentui/merge-styles';
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
* {@docCategory IAnimationStyles}
*/
export interface IAnimationStyles {
slideRightIn10: IRawStyle;
slideRightIn20: IRawStyle;
slideRightIn40: IRawStyle;
slideRightIn400: IRawStyle;
slideLeftIn10: IRawStyle;
slideLeftIn20: IRawStyle;
slideLeftIn40: IRawStyle;
slideLeftIn400: IRawStyle;
slideUpIn10: IRawStyle;
slideUpIn20: IRawStyle;
slideDownIn10: IRawStyle;
slideDownIn20: IRawStyle;
slideRightOut10: IRawStyle;
slideRightOut20: IRawStyle;
slideRightOut40: IRawStyle;
slideRightOut400: IRawStyle;
slideLeftOut10: IRawStyle;
slideLeftOut20: IRawStyle;
slideLeftOut40: IRawStyle;
slideLeftOut400: IRawStyle;
slideUpOut10: IRawStyle;
slideUpOut20: IRawStyle;
slideDownOut10: IRawStyle;
slideDownOut20: IRawStyle;
scaleUpIn100: IRawStyle;
scaleDownIn100: IRawStyle;
scaleUpOut103: IRawStyle;
scaleDownOut98: IRawStyle;
fadeIn100: IRawStyle;
fadeIn200: IRawStyle;
fadeIn400: IRawStyle;
fadeIn500: IRawStyle;
fadeOut100: IRawStyle;
fadeOut200: IRawStyle;
fadeOut400: IRawStyle;
fadeOut500: IRawStyle;
rotate90deg: IRawStyle;
rotateN90deg: IRawStyle;
}
export interface IAnimationVariables {
easeFunction1: string;
easeFunction2: string;
durationValue1: string;
durationValue2: string;
durationValue3: string;
durationValue4: string;
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IAnimationStyles.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IAnimationStyles.js","sourceRoot":"../src/","sources":["types/IAnimationStyles.ts"],"names":[],"mappings":"","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport type { IRawStyle } from '@fluentui/merge-styles';\n\n/**\n * All Fabric standard animations, exposed as json objects referencing predefined\n * keyframes. These objects can be mixed in with other class definitions.\n * {@docCategory IAnimationStyles}\n */\nexport interface IAnimationStyles {\n slideRightIn10: IRawStyle;\n slideRightIn20: IRawStyle;\n slideRightIn40: IRawStyle;\n slideRightIn400: IRawStyle;\n slideLeftIn10: IRawStyle;\n slideLeftIn20: IRawStyle;\n slideLeftIn40: IRawStyle;\n slideLeftIn400: IRawStyle;\n slideUpIn10: IRawStyle;\n slideUpIn20: IRawStyle;\n slideDownIn10: IRawStyle;\n slideDownIn20: IRawStyle;\n slideRightOut10: IRawStyle;\n slideRightOut20: IRawStyle;\n slideRightOut40: IRawStyle;\n slideRightOut400: IRawStyle;\n slideLeftOut10: IRawStyle;\n slideLeftOut20: IRawStyle;\n slideLeftOut40: IRawStyle;\n slideLeftOut400: IRawStyle;\n slideUpOut10: IRawStyle;\n slideUpOut20: IRawStyle;\n slideDownOut10: IRawStyle;\n slideDownOut20: IRawStyle;\n scaleUpIn100: IRawStyle;\n scaleDownIn100: IRawStyle;\n scaleUpOut103: IRawStyle;\n scaleDownOut98: IRawStyle;\n fadeIn100: IRawStyle;\n fadeIn200: IRawStyle;\n fadeIn400: IRawStyle;\n fadeIn500: IRawStyle;\n fadeOut100: IRawStyle;\n fadeOut200: IRawStyle;\n fadeOut400: IRawStyle;\n fadeOut500: IRawStyle;\n rotate90deg: IRawStyle;\n rotateN90deg: IRawStyle;\n}\n\nexport interface IAnimationVariables {\n easeFunction1: string;\n easeFunction2: string;\n durationValue1: string;\n durationValue2: string;\n durationValue3: string;\n durationValue4: string;\n}\n"]}
+52
View File
@@ -0,0 +1,52 @@
/**
* Decorative styles in a theme
* {@docCategory IEffects}
*/
export interface IEffects {
/**
* Used to provide a visual affordance that this element is elevated above the surface it rests on.
* This is lower than elevations with a higher value, and higher than elevations with a lower value.
* The shadow's color should not change with the theme, because colored shadows look unnatural.
* Used for: cards, grid items
*/
elevation4: string;
/**
* Used to provide a visual affordance that this element is elevated above the surface it rests on.
* This is lower than elevations with a higher value, and higher than elevations with a lower value.
* The shadow's color should not change with the theme, because colored shadows look unnatural.
* Used for: menus, command surfaces
*/
elevation8: string;
/**
* Used to provide a visual affordance that this element is elevated above the surface it rests on.
* This is lower than elevations with a higher value, and higher than elevations with a lower value.
* The shadow's color should not change with the theme, because colored shadows look unnatural.
* Used for: search result dropdowns, hover cards, tooltips, help bubbles
*/
elevation16: string;
/**
* Used to provide a visual affordance that this element is elevated above the surface it rests on.
* This is lower than elevations with a higher value, and higher than elevations with a lower value.
* The shadow's color should not change with the theme, because colored shadows look unnatural.
* Used for: Panels, Dialogs
*/
elevation64: string;
/**
* Rounded corner value, for use with border-radius. Smaller values indicate less rounding.
* Smaller elements should get less rounding than larger elements.
* Used for: buttons
*/
roundedCorner2: string;
/**
* Rounded corner value, for use with border-radius. Smaller values indicate less rounding.
* Smaller elements should get less rounding than larger elements.
* Used for: cards
*/
roundedCorner4: string;
/**
* Rounded corner value, for use with border-radius. Smaller values indicate less rounding.
* Smaller elements should get less rounding than larger elements.
* Used for: surfaces
*/
roundedCorner6: string;
}
+6
View File
@@ -0,0 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IEffects.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IEffects.js","sourceRoot":"../src/","sources":["types/IEffects.ts"],"names":[],"mappings":"AAAA,yDAAyD","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n * Decorative styles in a theme\n * {@docCategory IEffects}\n */\nexport interface IEffects {\n /**\n * Used to provide a visual affordance that this element is elevated above the surface it rests on.\n * This is lower than elevations with a higher value, and higher than elevations with a lower value.\n * The shadow's color should not change with the theme, because colored shadows look unnatural.\n * Used for: cards, grid items\n */\n elevation4: string;\n /**\n * Used to provide a visual affordance that this element is elevated above the surface it rests on.\n * This is lower than elevations with a higher value, and higher than elevations with a lower value.\n * The shadow's color should not change with the theme, because colored shadows look unnatural.\n * Used for: menus, command surfaces\n */\n elevation8: string;\n /**\n * Used to provide a visual affordance that this element is elevated above the surface it rests on.\n * This is lower than elevations with a higher value, and higher than elevations with a lower value.\n * The shadow's color should not change with the theme, because colored shadows look unnatural.\n * Used for: search result dropdowns, hover cards, tooltips, help bubbles\n */\n elevation16: string;\n /**\n * Used to provide a visual affordance that this element is elevated above the surface it rests on.\n * This is lower than elevations with a higher value, and higher than elevations with a lower value.\n * The shadow's color should not change with the theme, because colored shadows look unnatural.\n * Used for: Panels, Dialogs\n */\n elevation64: string;\n\n /**\n * Rounded corner value, for use with border-radius. Smaller values indicate less rounding.\n * Smaller elements should get less rounding than larger elements.\n * Used for: buttons\n */\n roundedCorner2: string;\n /**\n * Rounded corner value, for use with border-radius. Smaller values indicate less rounding.\n * Smaller elements should get less rounding than larger elements.\n * Used for: cards\n */\n roundedCorner4: string;\n /**\n * Rounded corner value, for use with border-radius. Smaller values indicate less rounding.\n * Smaller elements should get less rounding than larger elements.\n * Used for: surfaces\n */\n roundedCorner6: string;\n}\n"]}
+20
View File
@@ -0,0 +1,20 @@
import type { ISerializedStylesheet, IStyleSheetConfig } from '@fluentui/merge-styles';
/**
* The interface of window.FabricConfig, which can be burned on the page before script loading to preemptively
* define default configurations.
* {@docCategory IFabricConfig}
*/
export interface IFabricConfig {
/**
* An override for where the fonts should be downloaded from.
*/
fontBaseUrl?: string;
/**
* The mergeStyles stylesheet config.
*/
mergeStyles?: IStyleSheetConfig;
/**
* Serialized form of Stylesheet used for rehydration.
*/
serializedStylesheet?: ISerializedStylesheet;
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IFabricConfig.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IFabricConfig.js","sourceRoot":"../src/","sources":["types/IFabricConfig.ts"],"names":[],"mappings":"","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport type { ISerializedStylesheet, IStyleSheetConfig } from '@fluentui/merge-styles';\n\n// TODO: figure out a better place (e.g a shared typing package) for this interface.\n\n/**\n * The interface of window.FabricConfig, which can be burned on the page before script loading to preemptively\n * define default configurations.\n * {@docCategory IFabricConfig}\n */\nexport interface IFabricConfig {\n /**\n * An override for where the fonts should be downloaded from.\n */\n fontBaseUrl?: string;\n\n /**\n * The mergeStyles stylesheet config.\n */\n mergeStyles?: IStyleSheetConfig;\n\n /**\n * Serialized form of Stylesheet used for rehydration.\n */\n serializedStylesheet?: ISerializedStylesheet;\n}\n"]}
+28
View File
@@ -0,0 +1,28 @@
import type { IRawStyle } from '@fluentui/merge-styles';
/**
* Fluent UI font set.
* {@docCategory IFontStyles}
*/
export interface IFontStyles {
tiny: IRawStyle;
xSmall: IRawStyle;
small: IRawStyle;
smallPlus: IRawStyle;
medium: IRawStyle;
mediumPlus: IRawStyle;
large: IRawStyle;
xLarge: IRawStyle;
/**
* @deprecated Exists for forward compatibility with Fabric 7's Fluent theme.
* Not recommended for use with Fabric 6.
*/
xLargePlus: IRawStyle;
xxLarge: IRawStyle;
/**
* @deprecated Exists for forward compatibility with Fabric 7's Fluent theme
* Not recommended for use with Fabric 6.
*/
xxLargePlus: IRawStyle;
superLarge: IRawStyle;
mega: IRawStyle;
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IFontStyles.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IFontStyles.js","sourceRoot":"../src/","sources":["types/IFontStyles.ts"],"names":[],"mappings":"","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport type { IRawStyle } from '@fluentui/merge-styles';\n\n/**\n * Fluent UI font set.\n * {@docCategory IFontStyles}\n */\nexport interface IFontStyles {\n tiny: IRawStyle;\n xSmall: IRawStyle;\n small: IRawStyle;\n smallPlus: IRawStyle;\n medium: IRawStyle;\n mediumPlus: IRawStyle;\n large: IRawStyle;\n xLarge: IRawStyle;\n /**\n * @deprecated Exists for forward compatibility with Fabric 7's Fluent theme.\n * Not recommended for use with Fabric 6.\n */\n xLargePlus: IRawStyle;\n xxLarge: IRawStyle;\n /**\n * @deprecated Exists for forward compatibility with Fabric 7's Fluent theme\n * Not recommended for use with Fabric 6.\n */\n xxLargePlus: IRawStyle;\n superLarge: IRawStyle;\n mega: IRawStyle;\n}\n"]}
+208
View File
@@ -0,0 +1,208 @@
/**
* Fluent UI color palette.
* {@docCategory IPalette}
*/
export interface IPalette {
/**
* Color code for themeDarker.
*/
themeDarker: string;
/**
* Color code for themeDark.
*/
themeDark: string;
/**
* Color code for themeDarkAlt.
*/
themeDarkAlt: string;
/**
* Color code for themePrimary.
*/
themePrimary: string;
/**
* Color code for themeSecondary.
*/
themeSecondary: string;
/**
* Color code for themeTertiary.
*/
themeTertiary: string;
/**
* Color code for themeLight.
*/
themeLight: string;
/**
* Color code for themeLighter.
*/
themeLighter: string;
/**
* Color code for themeLighterAlt.
*/
themeLighterAlt: string;
/**
* Color code for the strongest color, which is black in the default theme.
* This is a very light color in inverted themes.
*/
black: string;
/**
* Color code for blackTranslucent40.
*/
blackTranslucent40: string;
/**
* Color code for neutralDark.
*/
neutralDark: string;
/**
* Color code for neutralPrimary.
*/
neutralPrimary: string;
/**
* Color code for neutralPrimaryAlt.
*/
neutralPrimaryAlt: string;
/**
* Color code for neutralSecondary.
*/
neutralSecondary: string;
/**
* Color code for neutralSecondaryAlt.
*/
neutralSecondaryAlt: string;
/**
* Color code for neutralTertiary.
*/
neutralTertiary: string;
/**
* Color code for neutralTertiaryAlt.
*/
neutralTertiaryAlt: string;
/**
* Color code for neutralQuaternary.
*/
neutralQuaternary: string;
/**
* Color code for neutralQuaternaryAlt.
*/
neutralQuaternaryAlt: string;
/**
* Color code for neutralLight.
*/
neutralLight: string;
/**
* Color code for neutralLighter.
*/
neutralLighter: string;
/**
* Color code for neutralLighterAlt.
*/
neutralLighterAlt: string;
/**
* Color code for the accent.
*/
accent: string;
/**
* Color code for the softest color, which is white in the default theme. This is a very dark color in dark themes.
* This is the page background.
*/
white: string;
/**
* Color code for whiteTranslucent40
*/
whiteTranslucent40: string;
/**
* Color code for yellowDark.
*/
yellowDark: string;
/**
* Color code for yellow.
*/
yellow: string;
/**
* Color code for yellowLight.
*/
yellowLight: string;
/**
* Color code for orange.
*/
orange: string;
/**
* Color code for orangeLight.
*/
orangeLight: string;
/**
* Color code for orangeLighter.
*/
orangeLighter: string;
/**
* Color code for redDark.
*/
redDark: string;
/**
* Color code for red.
*/
red: string;
/**
* Color code for magentaDark.
*/
magentaDark: string;
/**
* Color code for magenta.
*/
magenta: string;
/**
* Color code for magentaLight.
*/
magentaLight: string;
/**
* Color code for purpleDark.
*/
purpleDark: string;
/**
* Color code for purple.
*/
purple: string;
/**
* Color code for purpleLight.
*/
purpleLight: string;
/**
* Color code for blueDark.
*/
blueDark: string;
/**
* Color code for blueMid.
*/
blueMid: string;
/**
* Color code for blue.
*/
blue: string;
/**
* Color code for blueLight.
*/
blueLight: string;
/**
* Color code for tealDark.
*/
tealDark: string;
/**
* Color code for teal.
*/
teal: string;
/**
* Color code for tealLight.
*/
tealLight: string;
/**
* Color code for greenDark.
*/
greenDark: string;
/**
* Color code for green.
*/
green: string;
/**
* Color code for greenLight.
*/
greenLight: string;
}
+6
View File
@@ -0,0 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IPalette.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IPalette.js","sourceRoot":"../src/","sources":["types/IPalette.ts"],"names":[],"mappings":"AAAA,yDAAyD","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n * Fluent UI color palette.\n * {@docCategory IPalette}\n */\nexport interface IPalette {\n /**\n * Color code for themeDarker.\n */\n themeDarker: string;\n\n /**\n * Color code for themeDark.\n */\n themeDark: string;\n\n /**\n * Color code for themeDarkAlt.\n */\n themeDarkAlt: string;\n\n /**\n * Color code for themePrimary.\n */\n themePrimary: string;\n\n /**\n * Color code for themeSecondary.\n */\n themeSecondary: string;\n\n /**\n * Color code for themeTertiary.\n */\n themeTertiary: string;\n\n /**\n * Color code for themeLight.\n */\n themeLight: string;\n\n /**\n * Color code for themeLighter.\n */\n themeLighter: string;\n\n /**\n * Color code for themeLighterAlt.\n */\n themeLighterAlt: string;\n\n /**\n * Color code for the strongest color, which is black in the default theme.\n * This is a very light color in inverted themes.\n */\n black: string;\n\n /**\n * Color code for blackTranslucent40.\n */\n blackTranslucent40: string;\n\n /**\n * Color code for neutralDark.\n */\n neutralDark: string;\n\n /**\n * Color code for neutralPrimary.\n */\n neutralPrimary: string;\n\n /**\n * Color code for neutralPrimaryAlt.\n */\n neutralPrimaryAlt: string;\n\n /**\n * Color code for neutralSecondary.\n */\n neutralSecondary: string;\n\n /**\n * Color code for neutralSecondaryAlt.\n */\n neutralSecondaryAlt: string;\n\n /**\n * Color code for neutralTertiary.\n */\n neutralTertiary: string;\n\n /**\n * Color code for neutralTertiaryAlt.\n */\n neutralTertiaryAlt: string;\n\n /**\n * Color code for neutralQuaternary.\n */\n neutralQuaternary: string;\n\n /**\n * Color code for neutralQuaternaryAlt.\n */\n neutralQuaternaryAlt: string;\n\n /**\n * Color code for neutralLight.\n */\n neutralLight: string;\n\n /**\n * Color code for neutralLighter.\n */\n neutralLighter: string;\n\n /**\n * Color code for neutralLighterAlt.\n */\n neutralLighterAlt: string;\n\n /**\n * Color code for the accent.\n */\n accent: string;\n\n /**\n * Color code for the softest color, which is white in the default theme. This is a very dark color in dark themes.\n * This is the page background.\n */\n white: string;\n\n /**\n * Color code for whiteTranslucent40\n */\n whiteTranslucent40: string;\n\n /**\n * Color code for yellowDark.\n */\n yellowDark: string;\n\n /**\n * Color code for yellow.\n */\n yellow: string;\n\n /**\n * Color code for yellowLight.\n */\n yellowLight: string;\n\n /**\n * Color code for orange.\n */\n orange: string;\n\n /**\n * Color code for orangeLight.\n */\n orangeLight: string;\n\n /**\n * Color code for orangeLighter.\n */\n orangeLighter: string;\n\n /**\n * Color code for redDark.\n */\n redDark: string;\n\n /**\n * Color code for red.\n */\n red: string;\n\n /**\n * Color code for magentaDark.\n */\n magentaDark: string;\n\n /**\n * Color code for magenta.\n */\n magenta: string;\n\n /**\n * Color code for magentaLight.\n */\n magentaLight: string;\n\n /**\n * Color code for purpleDark.\n */\n purpleDark: string;\n\n /**\n * Color code for purple.\n */\n purple: string;\n\n /**\n * Color code for purpleLight.\n */\n purpleLight: string;\n\n /**\n * Color code for blueDark.\n */\n blueDark: string;\n\n /**\n * Color code for blueMid.\n */\n blueMid: string;\n\n /**\n * Color code for blue.\n */\n blue: string;\n\n /**\n * Color code for blueLight.\n */\n blueLight: string;\n\n /**\n * Color code for tealDark.\n */\n tealDark: string;\n\n /**\n * Color code for teal.\n */\n teal: string;\n\n /**\n * Color code for tealLight.\n */\n tealLight: string;\n\n /**\n * Color code for greenDark.\n */\n greenDark: string;\n\n /**\n * Color code for green.\n */\n green: string;\n\n /**\n * Color code for greenLight.\n */\n greenLight: string;\n}\n"]}
+40
View File
@@ -0,0 +1,40 @@
import type { IPalette } from './IPalette';
import type { IFontStyles } from './IFontStyles';
import type { ISemanticColors } from './ISemanticColors';
import type { ISpacing } from './ISpacing';
import type { IEffects } from './IEffects';
/**
* @internal
* Predefined scheme identifiers.
* Schemes are is still in an experimental phase.
* This interface's naming and values are not finalized and are subject to change.
* {@docCategory IScheme}
*/
export type ISchemeNames = 'default' | 'neutral' | 'soft' | 'strong';
/**
* {@docCategory IScheme}
*/
export interface IScheme {
rtl?: boolean;
palette: IPalette;
fonts: IFontStyles;
semanticColors: ISemanticColors;
isInverted: boolean;
/**
* This setting is for a very narrow use case and you probably don't need to worry about,
* unless you share a environment with others that also use fabric.
* It is used for disabling global styles on fabric components. This will prevent global
* overrides that might have been set by other fabric users from applying to your components.
* When you set this setting to `true` on your theme the components in the subtree of your
* Customizer will not get the global styles applied to them.
*/
disableGlobalClassNames: boolean;
/**
* @internal
* The spacing property is still in an experimental phase. The intent is to have it
* be used for padding and margin sizes in a future release, but it is still undergoing review.
* Avoid using it until it is finalized.
*/
spacing: ISpacing;
effects: IEffects;
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IScheme.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"IScheme.js","sourceRoot":"../src/","sources":["types/IScheme.ts"],"names":[],"mappings":"","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport type { IPalette } from './IPalette';\nimport type { IFontStyles } from './IFontStyles';\nimport type { ISemanticColors } from './ISemanticColors';\nimport type { ISpacing } from './ISpacing';\nimport type { IEffects } from './IEffects';\n\n/**\n * @internal\n * Predefined scheme identifiers.\n * Schemes are is still in an experimental phase.\n * This interface's naming and values are not finalized and are subject to change.\n * {@docCategory IScheme}\n */\nexport type ISchemeNames = 'default' | 'neutral' | 'soft' | 'strong';\n\n/**\n * {@docCategory IScheme}\n */\nexport interface IScheme {\n rtl?: boolean;\n palette: IPalette;\n fonts: IFontStyles;\n semanticColors: ISemanticColors;\n isInverted: boolean;\n\n /**\n * This setting is for a very narrow use case and you probably don't need to worry about,\n * unless you share a environment with others that also use fabric.\n * It is used for disabling global styles on fabric components. This will prevent global\n * overrides that might have been set by other fabric users from applying to your components.\n * When you set this setting to `true` on your theme the components in the subtree of your\n * Customizer will not get the global styles applied to them.\n */\n disableGlobalClassNames: boolean;\n\n /**\n * @internal\n * The spacing property is still in an experimental phase. The intent is to have it\n * be used for padding and margin sizes in a future release, but it is still undergoing review.\n * Avoid using it until it is finalized.\n */\n spacing: ISpacing;\n\n effects: IEffects;\n}\n"]}
+381
View File
@@ -0,0 +1,381 @@
import type { ISemanticTextColors } from './ISemanticTextColors';
/**
* The collection of all semantic slots for colors used in themes.
*
* Note: text colors are defined in ISemanticTextColors.ts.
* We plan to move completely to semantic slots and replace all usage of Fabric palette slots.
* We've been actively making some of these changes but still have a ways to go. At present,
* we're only adding slots if absolutely necessary because we are trying to avoid bloating
* the already sizeable offering. We're also working on a better solution for design tokens
* overall in our next iteration. We'll provide an update on this site when that's ready.
* Thank you for your patience.
*
* #### Naming Convention
*
* The name of a semantic slot can quickly tell you how its meant to be used. It generally follows this format:
*
* `[category name][element name][Checked][Hovered/Pressed/Disabled state]`
*
* * `[category name]` The “family” that this slot belongs to.
* * `[element name]` The name of the thing being targeted, such as the background or border.
* * `[Checked]` Whether the thing is checked. We assume things are unchecked by default, so no need to specify the
* unchecked state. (“Checked” refers to anything that is on, selected, toggled, highlighted, emphasized, etc.)
* * `[Hovered/Pressed/Disabled state]` One of these states, if applicable. Each of these states are mutually
* exclusive. Pressed styles overwrite hovered styles, and disabled elements cannot be hovered or pressed.
*
* #### Base Slots
*
* A basic set of slots that provide many default body styles, such as text, subtext, disabled colors, and so on.
* If a category doesn't provide the slot you're looking for, use one from this category.
* For example, the placeholder text on a text input field has no corresponding slot in its category,
* so you'd use the bodySubtextColor from this category.
*
* #### Invariants
*
* When color has meaning, we do not want to change the color much theme to theme. For example, we
* will always want errors to be some shade of red, but we will need to tweak the exact shade so it's
* legible depending on whether it's an inverted theme or not.
* Invariant colors should almost never be changed by the theme, the defaults should suffice.
*
* #### Input Controls
*
* This category contains input components commonly used to denote state, including radio buttons,
* check boxes, toggle switches, sliders, progress bars, and more.
*
* #### Buttons
*
* Buttons! And all the flavors thereof.
*
* #### Menus
*
* Any kind of popup menus uses this category.
*
* #### Lists
*
* Lists differ from menus in that they are designed to show infinite amounts of items, often scroll,
* and have a large and complex interaction surface.
* This category covers all kinds of lists, whether they're typical one-item-per-row lists (like DetailsList)
* or ones with a tiled layout.
*
* {@docCategory ISemanticColors}
*/
export interface ISemanticColors extends ISemanticTextColors {
/**
* The default color for backgrounds.
*/
bodyBackground: string;
/**
* The default hover color for the backgrounds of interactable elements that don't have their own backgrounds.
* e.g. if links had hover backgrounds, they'd use this
*/
bodyBackgroundHovered: string;
/**
* The default background color of selected interactable elements that don't have their own backgrounds.
* e.g. indicates in the nav which page you're currently on
*/
bodyBackgroundChecked: string;
/**
* The standout color for highlighted content backgrounds.
* For highlighted content when there is no emphasis, use the neutral variant instead.
* This should be a shade darker than bodyBackground in light themes, and a shade lighter in inverted themes.
*/
bodyStandoutBackground: string;
/**
* The color for chrome adjacent to an area with bodyBackground.
* This can be used to provide visual separation of zones when using stronger colors, when using a divider line
* is not desired.
* In most themes, this should match the color of bodyBackground.
* See also: bodyFrameDivider
*/
bodyFrameBackground: string;
/**
* Used as the border between a zone with bodyFrameBackground and a zone with bodyBackground.
* If bodyBackground and bodyFrameBackground are different, this should be the same color as bodyFrameBackground
* in order to visually disappear.
* See also: bodyFrameBackground
*/
bodyFrameDivider: string;
/**
* Divider lines; e.g. lines that separate sections in a menu, an <HR> element.
*/
bodyDivider: string;
/**
* The default color for backgrounds of disabled controls; e.g. disabled text field.
*/
disabledBackground: string;
/**
* The default color for border of disabled controls; e.g. disabled slider, disabled toggle border.
*/
disabledBorder: string;
/**
* The color of the outline around focused controls that don't already have a border; e.g. menu items
*/
focusBorder: string;
/**
* The background color of a card (or other surface) on a standout background.
* Cards usually have shadows, but the variantBorder slots can be used for a solid border.
* e.g. cards on a carousel of highlighted articles
*/
cardStandoutBackground: string;
/**
* The default box-shadow for a card. In inverted themes, by default, this is set to `none` since shadows do not work
* well on dark backgrounds. If the card could be the same color as the background, it is recommended that
* `variantBorder` is used instead, so the card doesn't disappear in inverted themes.
* For use with `box-shadow`.
*/
cardShadow: string;
/**
* The default box-shadow when hovering on a card. Generally, this is a deeper shadow than `cardShadow`, to give
* the effect that the card is lifting off the page.
* In inverted themes, this should be set to a box-shadow that looks like a solid border, because shadows are not
* visible on dark themes.
* For use with `box-shadow`.
*/
cardShadowHovered: string;
/**
* The color of the border that provides contrast between an element, such as a card, and a standout background.
*/
variantBorder: string;
/**
* Hover color of border that provides contrast between an element, such as a card, and a standout background.
*/
variantBorderHovered: string;
/**
* Background color for default/empty state graphical elements; eg default icons, empty section that
* needs user to fill in content, placeholder graphics, empty seats, etc.
*/
defaultStateBackground: string;
/**
* Background for informational messages.
*/
infoBackground: string;
/**
* The background for errors, if necessary, or highlighting the section of the page where the error is present.
*/
errorBackground: string;
/**
* Background for blocking issues, which is more severe than a warning, but not as bad as an error.
*/
blockingBackground: string;
/**
* Background for warning messages.
*/
warningBackground: string;
/**
* Background for severe warning messages.
*/
severeWarningBackground: string;
/**
* Background for success
*/
successBackground: string;
/**
* Color for icons on infoBackground.
*/
infoIcon: string;
/**
* Color for icons on errorBackground.
*/
errorIcon: string;
/**
* Color for icons on blockingBackground.
*/
blockingIcon: string;
/**
* Color for icons on warningBackground.
*/
warningIcon: string;
/**
* Color for icons on severeWarningBackground.
*/
severeWarningIcon: string;
/**
* Color for icons on successBackground.
*/
successIcon: string;
/**
* Color of links within a message.
*/
messageLink: string;
/**
* Color of links within a message when hovered.
*/
messageLinkHovered: string;
/**
* The border of a large input control in its resting, state; e.g. the box of dropdown.
*/
inputBorder: string;
/**
* The border of a small input control in its resting unchecked state; e.g. the box of an unchecked checkbox.
*/
smallInputBorder: string;
/**
* The border color of a large hovered input control, such as textbox.
*/
inputBorderHovered: string;
/**
* The background color of an input, e.g. textbox background.
*/
inputBackground: string;
/**
* The background of a checked control; e.g. checked radio button's dot, checked toggle's background.
*/
inputBackgroundChecked: string;
/**
* The background of a checked and hovered control; e.g. checked checkbox's background color on hover.
*/
inputBackgroundCheckedHovered: string;
/**
* The placeholder background color of a checked control, e.g. slider background, spinner background.
*/
inputPlaceholderBackgroundChecked: string;
/**
* The foreground of a checked control; e.g. checked checkbox's checkmark color, checked toggle's thumb color,
* radio button's background color around the dot.
*/
inputForegroundChecked: string;
/**
* The alternate focus border color for elements that already have a border; e.g. text field borders on focus.
*/
inputFocusBorderAlt: string;
/**
* The color for disabled icon ; e.g. SearchBox magnifying glass in disabled state.
*/
inputIconDisabled: string;
/**
* The color for icon ; e.g. SearchBox magnifying glass in rest state.
*/
inputIcon: string;
/**
* The color for hovered icon ; e.g. SearchBox magnifying glass in hovered state.
*/
inputIconHovered: string;
/**
* Background of a standard button
*/
buttonBackground: string;
/**
* Background of a checked standard button; e.g. bold/italicize/underline text button in toolbar
*/
buttonBackgroundChecked: string;
/**
* Background of a hovered standard button
*/
buttonBackgroundHovered: string;
/**
* Background of a checked and hovered standard button; e.g. bold/italicize/underline text button in toolbar
*/
buttonBackgroundCheckedHovered: string;
/**
* Background of a disabled standard button
*/
buttonBackgroundDisabled: string;
/**
* Background of a pressed standard button; i.e. currently being clicked by mouse
*/
buttonBackgroundPressed: string;
/**
* Border of a standard button
*/
buttonBorder: string;
/**
* Border of a disabled standard button
*/
buttonBorderDisabled: string;
/**
* Background of a primary button
*/
primaryButtonBackground: string;
/**
* Background of a hovered primary button
*/
primaryButtonBackgroundHovered: string;
/**
* Background of a pressed primary button; i.e. currently being clicked by mouse
*/
primaryButtonBackgroundPressed: string;
/**
* Background of a disabled primary button
*/
primaryButtonBackgroundDisabled: string;
/**
* Border of a primary button
*/
primaryButtonBorder: string;
/**
* Background of an accent button (kicker)
*/
accentButtonBackground: string;
/**
* The background of a menu.
*/
menuBackground: string;
/**
* The divider between menu items.
*/
menuDivider: string;
/**
* The default colors of icons in menus.
*/
menuIcon: string;
/**
* The headers in menus that denote title of a section.
*/
menuHeader: string;
/**
* The background of a hovered menu item.
*/
menuItemBackgroundHovered: string;
/**
* The background of a pressed menu item.
*/
menuItemBackgroundPressed: string;
/**
* The text color of a menu item.
*/
menuItemText: string;
/**
* The text color of a hovered menu item.
*/
menuItemTextHovered: string;
/**
* The background color for the entire list.
*/
listBackground: string;
/**
* The default text color for list item titles and text in column fields.
*/
listText: string;
/**
* The background color of a hovered list item.
*/
listItemBackgroundHovered: string;
/**
* The background color of a checked list item.
*/
listItemBackgroundChecked: string;
/**
* The background color of a checked and hovered list item.
*/
listItemBackgroundCheckedHovered: string;
/**
* The background color for a hovered list header.
*/
listHeaderBackgroundHovered: string;
/**
* The background color for a pressed list header.
*/
listHeaderBackgroundPressed: string;
/**
* @deprecated
* (Checked menu items no longer get a background color.)
* The background of checked menu item; e.g. a menu item whose submenu is open, a selected dropdown item.
*/
menuItemBackgroundChecked: string;
/**
* @deprecated
* (no longer used)
* Foreground color for warning highlights
*/
warningHighlight: string;
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=ISemanticColors.js.map
File diff suppressed because one or more lines are too long
+129
View File
@@ -0,0 +1,129 @@
/**
* {@docCategory ISemanticTextColors}
*/
export interface ISemanticTextColors {
/**
* The default color for text.
*/
bodyText: string;
/**
* Checked text color, e.g. selected menu item text.
*/
bodyTextChecked: string;
/**
* De-emphasized text; e.g. metadata, captions, placeholder text.
*/
bodySubtext: string;
/**
* Neutral colored links and links for action buttons.
*/
actionLink: string;
/**
* Hover state for neutral colored links and links for action buttons.
*/
actionLinkHovered: string;
/**
* The color of a link.
*/
link: string;
/**
* The color of a hovered link. Also used when the link is active.
*/
linkHovered: string;
/**
* The default color for disabled text on top of disabledBackground; e.g. text in a disabled text field or
* disabled button text.
*/
disabledText: string;
/**
* The default color for disabled text on the default background (bodyBackground).
*/
disabledBodyText: string;
/**
* Disabled de-emphasized text, for use on disabledBackground.
*/
disabledSubtext: string;
/**
* Disabled de-emphasized text, for use on the default background (bodyBackground).
*/
disabledBodySubtext: string;
/**
* The default color of error text on bodyBackground.
*/
errorText: string;
/**
* The default color of text in a message bar.
*/
messageText: string;
/**
* The color of input text.
*/
inputText: string;
/**
* The color of input text on hover.
*/
inputTextHovered: string;
/**
* The color of placeholder text.
*/
inputPlaceholderText: string;
/**
* Color of text in a standard button
*/
buttonText: string;
/**
* Color of text in a hovered standard button
*/
buttonTextHovered: string;
/**
* Color of text in a checked standard button
*/
buttonTextChecked: string;
/**
* Color of text in a checked and hovered standard button
*/
buttonTextCheckedHovered: string;
/**
* Color of text in a pressed standard button; i.e. currently being clicked by mouse
*/
buttonTextPressed: string;
/**
* Color of text in a disabled standard button
*/
buttonTextDisabled: string;
/**
* Color of text in a primary button
*/
primaryButtonText: string;
/**
* Color of text in a hovered primary button
*/
primaryButtonTextHovered: string;
/**
* Color of text in a pressed primary button; i.e. currently being clicked by mouse
*/
primaryButtonTextPressed: string;
/**
* Color of text in a disabled primary button
*/
primaryButtonTextDisabled: string;
/**
* Color of text for accent button (kicker)
*/
accentButtonText: string;
/**
* The default text color for list item titles and text in column fields.
*/
listText: string;
/** @deprecated
* This slot was incorrectly named. Use listText instead. */
listTextColor: string;
/** @deprecated
* No longer used. Consider using messageText and/or warningIcon instead.
*/
warningText: string;
/** @deprecated
* No longer used. Consider using messageText and/or successIcon instead.
*/
successText: string;
}
+6
View File
@@ -0,0 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=ISemanticTextColors.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ISemanticTextColors.js","sourceRoot":"../src/","sources":["types/ISemanticTextColors.ts"],"names":[],"mappings":"AAAA,yDAAyD","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n * {@docCategory ISemanticTextColors}\n */\nexport interface ISemanticTextColors {\n /*\n * !!!!!!!!\n * FOR ANY ADDITIONS/REMOVALS HERE YOU MUST ALSO RUN `yarn update-sass-theme-files` in packages/common-styles\n * to ensure that semantic slots scss variables are updated\n * !!!!!!!!\n */\n\n //// Base slots\n\n /**\n * The default color for text.\n */\n bodyText: string;\n\n /**\n * Checked text color, e.g. selected menu item text.\n */\n bodyTextChecked: string;\n\n /**\n * De-emphasized text; e.g. metadata, captions, placeholder text.\n */\n bodySubtext: string;\n\n /**\n * Neutral colored links and links for action buttons.\n */\n actionLink: string;\n\n /**\n * Hover state for neutral colored links and links for action buttons.\n */\n actionLinkHovered: string;\n\n /**\n * The color of a link.\n */\n link: string;\n\n /**\n * The color of a hovered link. Also used when the link is active.\n */\n linkHovered: string;\n\n /**\n * The default color for disabled text on top of disabledBackground; e.g. text in a disabled text field or\n * disabled button text.\n */\n disabledText: string;\n\n /**\n * The default color for disabled text on the default background (bodyBackground).\n */\n disabledBodyText: string;\n\n /**\n * Disabled de-emphasized text, for use on disabledBackground.\n */\n disabledSubtext: string;\n\n /**\n * Disabled de-emphasized text, for use on the default background (bodyBackground).\n */\n disabledBodySubtext: string;\n\n //// Invariants - slots that rarely change color theme-to-theme because the color has meaning\n /**\n * The default color of error text on bodyBackground.\n */\n errorText: string;\n\n /**\n * The default color of text in a message bar.\n */\n messageText: string;\n\n /**\n * The color of input text.\n */\n inputText: string;\n\n /**\n * The color of input text on hover.\n */\n inputTextHovered: string;\n\n /**\n * The color of placeholder text.\n */\n inputPlaceholderText: string;\n\n //// Buttons\n\n /**\n * Color of text in a standard button\n */\n buttonText: string;\n /**\n * Color of text in a hovered standard button\n */\n buttonTextHovered: string;\n /**\n * Color of text in a checked standard button\n */\n buttonTextChecked: string;\n /**\n * Color of text in a checked and hovered standard button\n */\n buttonTextCheckedHovered: string;\n /**\n * Color of text in a pressed standard button; i.e. currently being clicked by mouse\n */\n buttonTextPressed: string;\n\n /**\n * Color of text in a disabled standard button\n */\n buttonTextDisabled: string;\n\n /**\n * Color of text in a primary button\n */\n primaryButtonText: string;\n /**\n * Color of text in a hovered primary button\n */\n primaryButtonTextHovered: string;\n /**\n * Color of text in a pressed primary button; i.e. currently being clicked by mouse\n */\n primaryButtonTextPressed: string;\n\n /**\n * Color of text in a disabled primary button\n */\n primaryButtonTextDisabled: string;\n\n /**\n * Color of text for accent button (kicker)\n */\n accentButtonText: string;\n\n //// Lists\n\n /**\n * The default text color for list item titles and text in column fields.\n */\n listText: string;\n\n //// DEPRECATED SLOTS\n // Do not use these slots, they are only maintained for backwards compatibility.\n\n /** @deprecated\n * This slot was incorrectly named. Use listText instead. */\n listTextColor: string;\n\n /** @deprecated\n * No longer used. Consider using messageText and/or warningIcon instead.\n */\n warningText: string;\n\n /** @deprecated\n * No longer used. Consider using messageText and/or successIcon instead.\n */\n successText: string;\n}\n"]}
+11
View File
@@ -0,0 +1,11 @@
/**
* @internal This is an experimental interface and will be changed post design review.
* {@docCategory ISpacing}
*/
export interface ISpacing {
s2: string;
s1: string;
m: string;
l1: string;
l2: string;
}
+6
View File
@@ -0,0 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=ISpacing.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"ISpacing.js","sourceRoot":"../src/","sources":["types/ISpacing.ts"],"names":[],"mappings":"AAAA,yDAAyD","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n * @internal This is an experimental interface and will be changed post design review.\n * {@docCategory ISpacing}\n */\nexport interface ISpacing {\n s2: string;\n s1: string;\n m: string;\n l1: string;\n l2: string;\n}\n"]}
+12
View File
@@ -0,0 +1,12 @@
import type { Theme, PartialTheme } from './Theme';
/**
* {@docCategory ITheme}
*/
export interface ITheme extends Theme {
}
/**
* {@docCategory ITheme}
*/
export interface IPartialTheme extends PartialTheme {
}
export type { ISchemeNames, IScheme } from './IScheme';
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=ITheme.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"ITheme.js","sourceRoot":"../src/","sources":["types/ITheme.ts"],"names":[],"mappings":"","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport type { Theme, PartialTheme } from './Theme';\n\n/**\n * {@docCategory ITheme}\n */\nexport interface ITheme extends Theme {}\n\n/**\n * {@docCategory ITheme}\n */\nexport interface IPartialTheme extends PartialTheme {}\n\nexport type { ISchemeNames, IScheme } from './IScheme';\n"]}
+83
View File
@@ -0,0 +1,83 @@
import type { IRawStyle } from '@fluentui/merge-styles';
import type { IStyleFunctionOrObject } from '@fluentui/utilities';
import type { IPalette } from './IPalette';
import type { IFontStyles } from './IFontStyles';
import type { ISemanticColors } from './ISemanticColors';
import type { ISpacing } from './ISpacing';
import type { IEffects } from './IEffects';
import type { IScheme, ISchemeNames } from './IScheme';
/**
* {@docCategory Theme}
* Component-level styles and variants.
*/
export interface ComponentStyles {
/**
* styles prop for a component.
*/
styles?: IStyleFunctionOrObject<any, any>;
}
/**
* {@docCategory Theme}
* Component-level styles and token set.
*/
export type ComponentsStyles = {
[componentName: string]: ComponentStyles;
};
/**
* {@docCategory Theme}
* A prepared (fully expanded) theme object.
*/
export interface Theme extends IScheme {
/**
* Component-level styles and token set.
* This is still in an experimental phase and is only applied by `ThemeProvider`.
*/
components?: ComponentsStyles;
/**
* User defined identifier for the theme.
* @example "monokai"
*/
name?: string;
/**
* @internal
* Id of the theme. This is for internal use only.
*/
id?: string;
/**
* @internal
* The schemes property is still in an experimental phase. The intent is to have it work
* in conjunction with new 'schemes' prop that any component making use of Foundation can use.
* Alternative themes that can be referred to by name.
*/
schemes?: {
[P in ISchemeNames]?: IScheme;
};
}
/**
* {@docCategory Theme}
* A partial theme.
*/
export interface PartialTheme {
components?: ComponentsStyles;
palette?: Partial<IPalette>;
fonts?: Partial<IFontStyles>;
semanticColors?: Partial<ISemanticColors>;
isInverted?: boolean;
disableGlobalClassNames?: boolean;
rtl?: boolean;
spacing?: Partial<ISpacing>;
effects?: Partial<IEffects>;
/**
* Use this property to specify font property defaults.
*/
defaultFontStyle?: IRawStyle;
/**
* @internal
* The schemes property is still in an experimental phase. The intent is to have it work
* in conjunction with new 'schemes' prop that any component making use of Foundation can use.
* Alternative themes that can be referred to by name.
*/
schemes?: {
[P in ISchemeNames]?: IScheme;
};
}
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=Theme.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"Theme.js","sourceRoot":"../src/","sources":["types/Theme.ts"],"names":[],"mappings":"","sourcesContent":["import type { IRawStyle } from '@fluentui/merge-styles';\nimport type { IStyleFunctionOrObject } from '@fluentui/utilities';\nimport type { IPalette } from './IPalette';\nimport type { IFontStyles } from './IFontStyles';\nimport type { ISemanticColors } from './ISemanticColors';\nimport type { ISpacing } from './ISpacing';\nimport type { IEffects } from './IEffects';\nimport type { IScheme, ISchemeNames } from './IScheme';\n\n/**\n * {@docCategory Theme}\n * Component-level styles and variants.\n */\nexport interface ComponentStyles {\n /**\n * styles prop for a component.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n styles?: IStyleFunctionOrObject<any, any>;\n}\n\n/**\n * {@docCategory Theme}\n * Component-level styles and token set.\n */\nexport type ComponentsStyles = {\n [componentName: string]: ComponentStyles;\n};\n\n/**\n * {@docCategory Theme}\n * A prepared (fully expanded) theme object.\n */\nexport interface Theme extends IScheme {\n /**\n * Component-level styles and token set.\n * This is still in an experimental phase and is only applied by `ThemeProvider`.\n */\n components?: ComponentsStyles;\n\n /**\n * User defined identifier for the theme.\n * @example \"monokai\"\n */\n name?: string;\n\n /**\n * @internal\n * Id of the theme. This is for internal use only.\n */\n id?: string;\n\n /**\n * @internal\n * The schemes property is still in an experimental phase. The intent is to have it work\n * in conjunction with new 'schemes' prop that any component making use of Foundation can use.\n * Alternative themes that can be referred to by name.\n */\n schemes?: { [P in ISchemeNames]?: IScheme };\n}\n\n/**\n * {@docCategory Theme}\n * A partial theme.\n */\nexport interface PartialTheme {\n components?: ComponentsStyles;\n\n palette?: Partial<IPalette>;\n fonts?: Partial<IFontStyles>;\n semanticColors?: Partial<ISemanticColors>;\n isInverted?: boolean;\n disableGlobalClassNames?: boolean;\n rtl?: boolean;\n spacing?: Partial<ISpacing>;\n effects?: Partial<IEffects>;\n\n /**\n * Use this property to specify font property defaults.\n */\n defaultFontStyle?: IRawStyle;\n\n /**\n * @internal\n * The schemes property is still in an experimental phase. The intent is to have it work\n * in conjunction with new 'schemes' prop that any component making use of Foundation can use.\n * Alternative themes that can be referred to by name.\n */\n schemes?: { [P in ISchemeNames]?: IScheme };\n}\n"]}
+10
View File
@@ -0,0 +1,10 @@
export type { ComponentStyles, ComponentsStyles, PartialTheme, Theme } from './Theme';
export type { IEffects } from './IEffects';
export type { IFontStyles } from './IFontStyles';
export type { IPalette } from './IPalette';
export type { ISemanticColors } from './ISemanticColors';
export type { ISemanticTextColors } from './ISemanticTextColors';
export type { ISpacing } from './ISpacing';
export type { IAnimationStyles, IAnimationVariables } from './IAnimationStyles';
export type { IScheme, ISchemeNames } from './IScheme';
export type { ITheme, IPartialTheme } from './ITheme';
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["types/index.ts"],"names":[],"mappings":"","sourcesContent":["export type { ComponentStyles, ComponentsStyles, PartialTheme, Theme } from './Theme';\nexport type { IEffects } from './IEffects';\nexport type { IFontStyles } from './IFontStyles';\nexport type { IPalette } from './IPalette';\nexport type { ISemanticColors } from './ISemanticColors';\nexport type { ISemanticTextColors } from './ISemanticTextColors';\nexport type { ISpacing } from './ISpacing';\nexport type { IAnimationStyles, IAnimationVariables } from './IAnimationStyles';\nexport type { IScheme, ISchemeNames } from './IScheme';\nexport type { ITheme, IPartialTheme } from './ITheme';\n"]}
+10
View File
@@ -0,0 +1,10 @@
import type { IEffects, IPalette, ISemanticColors } from '../types/index';
/** Generates all the semantic slot colors based on the theme so far
* We'll use these as fallbacks for semantic slots that the passed in theme did not define.
* The caller must still mix in the customized semantic slots at the end.
*/
export declare function makeSemanticColors(p: IPalette, e: IEffects, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): ISemanticColors;
/**
* Map partial platte and effects to partial semantic colors.
*/
export declare function getSemanticColors<TResult = Partial<ISemanticColors>>(p: Partial<IPalette> | undefined, e: Partial<IEffects> | undefined, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): TResult;
+175
View File
@@ -0,0 +1,175 @@
define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.makeSemanticColors = makeSemanticColors;
exports.getSemanticColors = getSemanticColors;
/** Generates all the semantic slot colors based on the theme so far
* We'll use these as fallbacks for semantic slots that the passed in theme did not define.
* The caller must still mix in the customized semantic slots at the end.
*/
function makeSemanticColors(p, e, s, isInverted, depComments) {
if (depComments === void 0) { depComments = false; }
var semanticColors = tslib_1.__assign({ primaryButtonBorder: 'transparent', errorText: !isInverted ? '#a4262c' : '#F1707B', messageText: !isInverted ? '#323130' : '#F3F2F1', messageLink: !isInverted ? '#005A9E' : '#6CB8F6', messageLinkHovered: !isInverted ? '#004578' : '#82C7FF', infoIcon: !isInverted ? '#605e5c' : '#C8C6C4', errorIcon: !isInverted ? '#A80000' : '#F1707B', blockingIcon: !isInverted ? '#FDE7E9' : '#442726', warningIcon: !isInverted ? '#797775' : '#C8C6C4', severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100', successIcon: !isInverted ? '#107C10' : '#92C353', infoBackground: !isInverted ? '#f3f2f1' : '#323130', errorBackground: !isInverted ? '#FDE7E9' : '#442726', blockingBackground: !isInverted ? '#FDE7E9' : '#442726', warningBackground: !isInverted ? '#FFF4CE' : '#433519', severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F', successBackground: !isInverted ? '#DFF6DD' : '#393D1B',
// deprecated
warningHighlight: !isInverted ? '#ffb900' : '#fff100', successText: !isInverted ? '#107C10' : '#92c353' }, s);
var fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);
return _fixDeprecatedSlots(fullSemanticColors, depComments);
}
/**
* Map partial platte and effects to partial semantic colors.
*/
function getSemanticColors(p, e, s, isInverted, depComments) {
if (depComments === void 0) { depComments = false; }
var result = {};
// map palette
var _a = p || {}, white = _a.white, black = _a.black, themePrimary = _a.themePrimary, themeDark = _a.themeDark, themeDarker = _a.themeDarker, themeDarkAlt = _a.themeDarkAlt, themeLighter = _a.themeLighter, neutralLight = _a.neutralLight, neutralLighter = _a.neutralLighter, neutralDark = _a.neutralDark, neutralQuaternary = _a.neutralQuaternary, neutralQuaternaryAlt = _a.neutralQuaternaryAlt, neutralPrimary = _a.neutralPrimary, neutralSecondary = _a.neutralSecondary, neutralSecondaryAlt = _a.neutralSecondaryAlt, neutralTertiary = _a.neutralTertiary, neutralTertiaryAlt = _a.neutralTertiaryAlt, neutralLighterAlt = _a.neutralLighterAlt, accent = _a.accent;
if (white) {
result.bodyBackground = white;
result.bodyFrameBackground = white;
result.accentButtonText = white;
result.buttonBackground = white;
result.primaryButtonText = white;
result.primaryButtonTextHovered = white;
result.primaryButtonTextPressed = white;
result.inputBackground = white;
result.inputForegroundChecked = white;
result.listBackground = white;
result.menuBackground = white;
result.cardStandoutBackground = white;
}
if (black) {
result.bodyTextChecked = black;
result.buttonTextCheckedHovered = black;
}
if (themePrimary) {
result.link = themePrimary;
result.primaryButtonBackground = themePrimary;
result.inputBackgroundChecked = themePrimary;
result.inputIcon = themePrimary;
result.inputFocusBorderAlt = themePrimary;
result.menuIcon = themePrimary;
result.menuHeader = themePrimary;
result.accentButtonBackground = themePrimary;
}
if (themeDark) {
result.primaryButtonBackgroundPressed = themeDark;
result.inputBackgroundCheckedHovered = themeDark;
result.inputIconHovered = themeDark;
}
if (themeDarker) {
result.linkHovered = themeDarker;
}
if (themeDarkAlt) {
result.primaryButtonBackgroundHovered = themeDarkAlt;
}
if (themeLighter) {
result.inputPlaceholderBackgroundChecked = themeLighter;
}
if (neutralLight) {
result.bodyBackgroundChecked = neutralLight;
result.bodyFrameDivider = neutralLight;
result.bodyDivider = neutralLight;
result.variantBorder = neutralLight;
result.buttonBackgroundCheckedHovered = neutralLight;
result.buttonBackgroundPressed = neutralLight;
result.listItemBackgroundChecked = neutralLight;
result.listHeaderBackgroundPressed = neutralLight;
result.menuItemBackgroundPressed = neutralLight;
// eslint-disable-next-line @typescript-eslint/no-deprecated
result.menuItemBackgroundChecked = neutralLight;
}
if (neutralLighter) {
result.bodyBackgroundHovered = neutralLighter;
result.buttonBackgroundHovered = neutralLighter;
result.buttonBackgroundDisabled = neutralLighter;
result.buttonBorderDisabled = neutralLighter;
result.primaryButtonBackgroundDisabled = neutralLighter;
result.disabledBackground = neutralLighter;
result.listItemBackgroundHovered = neutralLighter;
result.listHeaderBackgroundHovered = neutralLighter;
result.menuItemBackgroundHovered = neutralLighter;
}
if (neutralQuaternary) {
result.primaryButtonTextDisabled = neutralQuaternary;
result.disabledSubtext = neutralQuaternary;
}
if (neutralQuaternaryAlt) {
result.listItemBackgroundCheckedHovered = neutralQuaternaryAlt;
}
if (neutralTertiary) {
result.disabledBodyText = neutralTertiary;
result.variantBorderHovered = (s === null || s === void 0 ? void 0 : s.variantBorderHovered) || neutralTertiary;
result.buttonTextDisabled = neutralTertiary;
result.inputIconDisabled = neutralTertiary;
result.disabledText = neutralTertiary;
}
if (neutralPrimary) {
result.bodyText = neutralPrimary;
result.actionLink = neutralPrimary;
result.buttonText = neutralPrimary;
result.inputBorderHovered = neutralPrimary;
result.inputText = neutralPrimary;
result.listText = neutralPrimary;
result.menuItemText = neutralPrimary;
}
if (neutralLighterAlt) {
result.bodyStandoutBackground = neutralLighterAlt;
result.defaultStateBackground = neutralLighterAlt;
}
if (neutralDark) {
result.actionLinkHovered = neutralDark;
result.buttonTextHovered = neutralDark;
result.buttonTextChecked = neutralDark;
result.buttonTextPressed = neutralDark;
result.inputTextHovered = neutralDark;
result.menuItemTextHovered = neutralDark;
}
if (neutralSecondary) {
result.bodySubtext = neutralSecondary;
result.focusBorder = neutralSecondary;
result.inputBorder = neutralSecondary;
result.smallInputBorder = neutralSecondary;
result.inputPlaceholderText = neutralSecondary;
}
if (neutralSecondaryAlt) {
result.buttonBorder = neutralSecondaryAlt;
}
if (neutralTertiaryAlt) {
result.disabledBodySubtext = neutralTertiaryAlt;
result.disabledBorder = neutralTertiaryAlt;
result.buttonBackgroundChecked = neutralTertiaryAlt;
result.menuDivider = neutralTertiaryAlt;
}
if (accent) {
result.accentButtonBackground = accent;
}
// map effects
if (e === null || e === void 0 ? void 0 : e.elevation4) {
result.cardShadow = e.elevation4;
}
if (!isInverted && (e === null || e === void 0 ? void 0 : e.elevation8)) {
result.cardShadowHovered = e.elevation8;
}
else if (result.variantBorderHovered) {
result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;
}
result = tslib_1.__assign(tslib_1.__assign({}, result), s);
return result;
}
function _fixDeprecatedSlots(s, depComments) {
// Add @deprecated tag as comment if enabled
var dep = '';
if (depComments === true) {
dep = ' /* @deprecated */';
}
/* eslint-disable @typescript-eslint/no-deprecated */
s.listTextColor = s.listText + dep;
s.menuItemBackgroundChecked += dep;
s.warningHighlight += dep;
s.warningText = s.messageText + dep;
s.successText += dep;
/* eslint-enable @typescript-eslint/no-deprecated */
return s;
}
});
//# sourceMappingURL=makeSemanticColors.js.map
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
export {};
+6
View File
@@ -0,0 +1,6 @@
define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
(0, set_version_1.setVersion)('@fluentui/theme', '2.7.2');
});
//# sourceMappingURL=version.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,IAAA,wBAAU,EAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/theme', '2.7.2');"]}