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
+2768
View File
File diff suppressed because it is too large Load Diff
+1215
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/theme
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+21
View File
@@ -0,0 +1,21 @@
# @fluentui/theme
**Basic building blocks for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui) Themes**
Define your own theme based on an existing theme:
```js
import { createTheme, Theme, FontWeights } from '@fluentui/theme';
export const MyTheme: Theme = createTheme({
components: {
Button: {
variants: {
fontWeight: FontWeights.semibold,
paddingLeft: '24px',
paddingRight: '24px',
},
},
},
});
```
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "@fluentui/scripts-api-extractor/api-extractor.common.json"
}
+1
View File
@@ -0,0 +1 @@
/** Jest test setup file. */
+1226
View File
File diff suppressed because it is too large Load Diff
+807
View File
@@ -0,0 +1,807 @@
## API Report File for "@fluentui/theme"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import type { IFontWeight } from '@fluentui/merge-styles';
import type { IRawStyle } from '@fluentui/merge-styles';
import type { IStyleFunctionOrObject } from '@fluentui/utilities';
// @public
export const AnimationStyles: IAnimationStyles;
// @public
export const AnimationVariables: IAnimationVariables;
// @public (undocumented)
export namespace CommunicationColors {
const // (undocumented)
shade30 = "#004578";
const // (undocumented)
shade20 = "#005a9e";
const // (undocumented)
shade10 = "#106ebe";
const // (undocumented)
primary = "#0078d4";
const // (undocumented)
tint10 = "#2b88d8";
const // (undocumented)
tint20 = "#c7e0f4";
const // (undocumented)
tint30 = "#deecf9";
const // (undocumented)
tint40 = "#eff6fc";
}
// @public
export type ComponentsStyles = {
[componentName: string]: ComponentStyles;
};
// @public
export interface ComponentStyles {
styles?: IStyleFunctionOrObject<any, any>;
}
// @public (undocumented)
export function createFontStyles(localeCode: string | null): IFontStyles;
// @public
export function createTheme(theme?: PartialTheme, depComments?: boolean): Theme;
// @public (undocumented)
export const DefaultEffects: IEffects;
// @public (undocumented)
export const DefaultFontStyles: IFontStyles;
// @public (undocumented)
export const DefaultPalette: IPalette;
// Warning: (ae-incompatible-release-tags) The symbol "DefaultSpacing" is marked as @public, but its signature references "ISpacing" which is marked as @internal
//
// @public (undocumented)
export const DefaultSpacing: ISpacing;
// @public (undocumented)
export namespace Depths {
const // (undocumented)
depth0 = "0 0 0 0 transparent";
const // (undocumented)
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 // (undocumented)
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 // (undocumented)
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 // (undocumented)
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)";
}
// @public (undocumented)
export const FluentTheme: ITheme;
// @public (undocumented)
export namespace FontSizes {
const // (undocumented)
size10 = "10px";
const // (undocumented)
size12 = "12px";
const // (undocumented)
size14 = "14px";
const // (undocumented)
size16 = "16px";
const // (undocumented)
size18 = "18px";
const // (undocumented)
size20 = "20px";
const // (undocumented)
size24 = "24px";
const // (undocumented)
size28 = "28px";
const // (undocumented)
size32 = "32px";
const // (undocumented)
size42 = "42px";
const // (undocumented)
size68 = "68px";
const // (undocumented)
mini: string;
const // (undocumented)
xSmall: string;
const // (undocumented)
small: string;
const // (undocumented)
smallPlus: string;
const // (undocumented)
medium: string;
const // (undocumented)
mediumPlus: string;
const // (undocumented)
icon: string;
const // (undocumented)
large: string;
const // (undocumented)
xLarge: string;
const // (undocumented)
xLargePlus: string;
const // (undocumented)
xxLarge: string;
const // (undocumented)
xxLargePlus: string;
const // (undocumented)
superLarge: string;
const // (undocumented)
mega: string;
}
// @public (undocumented)
export namespace FontWeights {
const // (undocumented)
light: IFontWeight;
const // (undocumented)
semilight: IFontWeight;
const // (undocumented)
regular: IFontWeight;
const // (undocumented)
semibold: IFontWeight;
const // (undocumented)
bold: IFontWeight;
}
// @public
export interface IAnimationStyles {
// (undocumented)
fadeIn100: IRawStyle;
// (undocumented)
fadeIn200: IRawStyle;
// (undocumented)
fadeIn400: IRawStyle;
// (undocumented)
fadeIn500: IRawStyle;
// (undocumented)
fadeOut100: IRawStyle;
// (undocumented)
fadeOut200: IRawStyle;
// (undocumented)
fadeOut400: IRawStyle;
// (undocumented)
fadeOut500: IRawStyle;
// (undocumented)
rotate90deg: IRawStyle;
// (undocumented)
rotateN90deg: IRawStyle;
// (undocumented)
scaleDownIn100: IRawStyle;
// (undocumented)
scaleDownOut98: IRawStyle;
// (undocumented)
scaleUpIn100: IRawStyle;
// (undocumented)
scaleUpOut103: IRawStyle;
// (undocumented)
slideDownIn10: IRawStyle;
// (undocumented)
slideDownIn20: IRawStyle;
// (undocumented)
slideDownOut10: IRawStyle;
// (undocumented)
slideDownOut20: IRawStyle;
// (undocumented)
slideLeftIn10: IRawStyle;
// (undocumented)
slideLeftIn20: IRawStyle;
// (undocumented)
slideLeftIn40: IRawStyle;
// (undocumented)
slideLeftIn400: IRawStyle;
// (undocumented)
slideLeftOut10: IRawStyle;
// (undocumented)
slideLeftOut20: IRawStyle;
// (undocumented)
slideLeftOut40: IRawStyle;
// (undocumented)
slideLeftOut400: IRawStyle;
// (undocumented)
slideRightIn10: IRawStyle;
// (undocumented)
slideRightIn20: IRawStyle;
// (undocumented)
slideRightIn40: IRawStyle;
// (undocumented)
slideRightIn400: IRawStyle;
// (undocumented)
slideRightOut10: IRawStyle;
// (undocumented)
slideRightOut20: IRawStyle;
// (undocumented)
slideRightOut40: IRawStyle;
// (undocumented)
slideRightOut400: IRawStyle;
// (undocumented)
slideUpIn10: IRawStyle;
// (undocumented)
slideUpIn20: IRawStyle;
// (undocumented)
slideUpOut10: IRawStyle;
// (undocumented)
slideUpOut20: IRawStyle;
}
// @public (undocumented)
export interface IAnimationVariables {
// (undocumented)
durationValue1: string;
// (undocumented)
durationValue2: string;
// (undocumented)
durationValue3: string;
// (undocumented)
durationValue4: string;
// (undocumented)
easeFunction1: string;
// (undocumented)
easeFunction2: string;
}
// @public (undocumented)
export namespace IconFontSizes {
const // (undocumented)
xSmall: string;
const // (undocumented)
small: string;
const // (undocumented)
medium: string;
const // (undocumented)
large: string;
}
// @public
export interface IEffects {
elevation16: string;
elevation4: string;
elevation64: string;
elevation8: string;
roundedCorner2: string;
roundedCorner4: string;
roundedCorner6: string;
}
// @public
export interface IFontStyles {
// (undocumented)
large: IRawStyle;
// (undocumented)
medium: IRawStyle;
// (undocumented)
mediumPlus: IRawStyle;
// (undocumented)
mega: IRawStyle;
// (undocumented)
small: IRawStyle;
// (undocumented)
smallPlus: IRawStyle;
// (undocumented)
superLarge: IRawStyle;
// (undocumented)
tiny: IRawStyle;
// (undocumented)
xLarge: IRawStyle;
// @deprecated (undocumented)
xLargePlus: IRawStyle;
// (undocumented)
xSmall: IRawStyle;
// (undocumented)
xxLarge: IRawStyle;
// @deprecated (undocumented)
xxLargePlus: IRawStyle;
}
// @public
export interface IPalette {
accent: string;
black: string;
blackTranslucent40: string;
blue: string;
blueDark: string;
blueLight: string;
blueMid: string;
green: string;
greenDark: string;
greenLight: string;
magenta: string;
magentaDark: string;
magentaLight: string;
neutralDark: string;
neutralLight: string;
neutralLighter: string;
neutralLighterAlt: string;
neutralPrimary: string;
neutralPrimaryAlt: string;
neutralQuaternary: string;
neutralQuaternaryAlt: string;
neutralSecondary: string;
neutralSecondaryAlt: string;
neutralTertiary: string;
neutralTertiaryAlt: string;
orange: string;
orangeLight: string;
orangeLighter: string;
purple: string;
purpleDark: string;
purpleLight: string;
red: string;
redDark: string;
teal: string;
tealDark: string;
tealLight: string;
themeDark: string;
themeDarkAlt: string;
themeDarker: string;
themeLight: string;
themeLighter: string;
themeLighterAlt: string;
themePrimary: string;
themeSecondary: string;
themeTertiary: string;
white: string;
whiteTranslucent40: string;
yellow: string;
yellowDark: string;
yellowLight: string;
}
// @public (undocumented)
export interface IPartialTheme extends PartialTheme {
}
// @public (undocumented)
export interface IScheme {
disableGlobalClassNames: boolean;
// (undocumented)
effects: IEffects;
// (undocumented)
fonts: IFontStyles;
// (undocumented)
isInverted: boolean;
// (undocumented)
palette: IPalette;
// (undocumented)
rtl?: boolean;
// (undocumented)
semanticColors: ISemanticColors;
// @internal
spacing: ISpacing;
}
// Warning: (ae-internal-missing-underscore) The name "ISchemeNames" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal
export type ISchemeNames = 'default' | 'neutral' | 'soft' | 'strong';
// @public
export interface ISemanticColors extends ISemanticTextColors {
accentButtonBackground: string;
blockingBackground: string;
blockingIcon: string;
bodyBackground: string;
bodyBackgroundChecked: string;
bodyBackgroundHovered: string;
bodyDivider: string;
bodyFrameBackground: string;
bodyFrameDivider: string;
bodyStandoutBackground: string;
buttonBackground: string;
buttonBackgroundChecked: string;
buttonBackgroundCheckedHovered: string;
buttonBackgroundDisabled: string;
buttonBackgroundHovered: string;
buttonBackgroundPressed: string;
buttonBorder: string;
buttonBorderDisabled: string;
cardShadow: string;
cardShadowHovered: string;
cardStandoutBackground: string;
defaultStateBackground: string;
disabledBackground: string;
disabledBorder: string;
errorBackground: string;
errorIcon: string;
focusBorder: string;
infoBackground: string;
infoIcon: string;
inputBackground: string;
inputBackgroundChecked: string;
inputBackgroundCheckedHovered: string;
inputBorder: string;
inputBorderHovered: string;
inputFocusBorderAlt: string;
inputForegroundChecked: string;
inputIcon: string;
inputIconDisabled: string;
inputIconHovered: string;
inputPlaceholderBackgroundChecked: string;
listBackground: string;
listHeaderBackgroundHovered: string;
listHeaderBackgroundPressed: string;
listItemBackgroundChecked: string;
listItemBackgroundCheckedHovered: string;
listItemBackgroundHovered: string;
listText: string;
menuBackground: string;
menuDivider: string;
menuHeader: string;
menuIcon: string;
// @deprecated (undocumented)
menuItemBackgroundChecked: string;
menuItemBackgroundHovered: string;
menuItemBackgroundPressed: string;
menuItemText: string;
menuItemTextHovered: string;
messageLink: string;
messageLinkHovered: string;
primaryButtonBackground: string;
primaryButtonBackgroundDisabled: string;
primaryButtonBackgroundHovered: string;
primaryButtonBackgroundPressed: string;
primaryButtonBorder: string;
severeWarningBackground: string;
severeWarningIcon: string;
smallInputBorder: string;
successBackground: string;
successIcon: string;
variantBorder: string;
variantBorderHovered: string;
warningBackground: string;
// @deprecated (undocumented)
warningHighlight: string;
warningIcon: string;
}
// @public (undocumented)
export interface ISemanticTextColors {
accentButtonText: string;
actionLink: string;
actionLinkHovered: string;
bodySubtext: string;
bodyText: string;
bodyTextChecked: string;
buttonText: string;
buttonTextChecked: string;
buttonTextCheckedHovered: string;
buttonTextDisabled: string;
buttonTextHovered: string;
buttonTextPressed: string;
disabledBodySubtext: string;
disabledBodyText: string;
disabledSubtext: string;
disabledText: string;
errorText: string;
inputPlaceholderText: string;
inputText: string;
inputTextHovered: string;
link: string;
linkHovered: string;
listText: string;
// @deprecated (undocumented)
listTextColor: string;
messageText: string;
primaryButtonText: string;
primaryButtonTextDisabled: string;
primaryButtonTextHovered: string;
primaryButtonTextPressed: string;
// @deprecated (undocumented)
successText: string;
// @deprecated (undocumented)
warningText: string;
}
// Warning: (ae-internal-missing-underscore) The name "ISpacing" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal
export interface ISpacing {
// (undocumented)
l1: string;
// (undocumented)
l2: string;
// (undocumented)
m: string;
// (undocumented)
s1: string;
// (undocumented)
s2: string;
}
// @public (undocumented)
export interface ITheme extends Theme {
}
// @public (undocumented)
export namespace LocalizedFontFamilies {
const // (undocumented)
Arabic = "'Segoe UI Web (Arabic)'";
const // (undocumented)
ChineseSimplified = "'Microsoft Yahei UI', Verdana, Simsun";
const // (undocumented)
ChineseTraditional = "'Microsoft Jhenghei UI', Pmingliu";
const // (undocumented)
Cyrillic = "'Segoe UI Web (Cyrillic)'";
const // (undocumented)
EastEuropean = "'Segoe UI Web (East European)'";
const // (undocumented)
Greek = "'Segoe UI Web (Greek)'";
const // (undocumented)
Hebrew = "'Segoe UI Web (Hebrew)'";
const // (undocumented)
Hindi = "'Nirmala UI'";
const // (undocumented)
Japanese = "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka";
const // (undocumented)
Korean = "'Malgun Gothic', Gulim";
const // (undocumented)
Selawik = "'Selawik Web'";
const // (undocumented)
Thai = "'Leelawadee UI Web', 'Kmer UI'";
const // (undocumented)
Vietnamese = "'Segoe UI Web (Vietnamese)'";
const // (undocumented)
WestEuropean = "'Segoe UI Web (West European)'";
const // (undocumented)
Armenian = "'Segoe UI Web (Armenian)'";
const // (undocumented)
Georgian = "'Segoe UI Web (Georgian)'";
}
// @public (undocumented)
export namespace LocalizedFontNames {
const // (undocumented)
Arabic = "Segoe UI Web (Arabic)";
const // (undocumented)
Cyrillic = "Segoe UI Web (Cyrillic)";
const // (undocumented)
EastEuropean = "Segoe UI Web (East European)";
const // (undocumented)
Greek = "Segoe UI Web (Greek)";
const // (undocumented)
Hebrew = "Segoe UI Web (Hebrew)";
const // (undocumented)
Thai = "Leelawadee UI Web";
const // (undocumented)
Vietnamese = "Segoe UI Web (Vietnamese)";
const // (undocumented)
WestEuropean = "Segoe UI Web (West European)";
const // (undocumented)
Selawik = "Selawik Web";
const // (undocumented)
Armenian = "Segoe UI Web (Armenian)";
const // (undocumented)
Georgian = "Segoe UI Web (Georgian)";
}
// @public
export function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;
// @public (undocumented)
export namespace MotionAnimations {
const // (undocumented)
fadeIn: string;
const // (undocumented)
fadeOut: string;
const // (undocumented)
scaleDownIn: string;
const // (undocumented)
scaleDownOut: string;
const // (undocumented)
slideLeftOut: string;
const // (undocumented)
slideRightOut: string;
const // (undocumented)
slideLeftIn: string;
const // (undocumented)
slideRightIn: string;
const // (undocumented)
slideUpOut: string;
const // (undocumented)
slideDownOut: string;
const // (undocumented)
slideUpIn: string;
const // (undocumented)
slideDownIn: string;
}
// @public (undocumented)
export namespace MotionDurations {
const // (undocumented)
duration1 = "100ms";
const // (undocumented)
duration2 = "200ms";
const // (undocumented)
duration3 = "300ms";
const // (undocumented)
duration4 = "400ms";
}
// @public (undocumented)
export namespace MotionTimings {
const // (undocumented)
accelerate = "cubic-bezier(0.9, 0.1, 1, 0.2)";
const // (undocumented)
decelerate = "cubic-bezier(0.1, 0.9, 0.2, 1)";
const // (undocumented)
linear = "cubic-bezier(0, 0, 1, 1)";
const // (undocumented)
standard = "cubic-bezier(0.8, 0, 0.2, 1)";
}
// @public (undocumented)
export namespace NeutralColors {
const // (undocumented)
black = "#000000";
const // (undocumented)
gray220 = "#11100f";
const // (undocumented)
gray210 = "#161514";
const // (undocumented)
gray200 = "#1b1a19";
const // (undocumented)
gray190 = "#201f1e";
const // (undocumented)
gray180 = "#252423";
const // (undocumented)
gray170 = "#292827";
const // (undocumented)
gray160 = "#323130";
const // (undocumented)
gray150 = "#3b3a39";
const // (undocumented)
gray140 = "#484644";
const // (undocumented)
gray130 = "#605e5c";
const // (undocumented)
gray120 = "#797775";
const // (undocumented)
gray110 = "#8a8886";
const // (undocumented)
gray100 = "#979593";
const // (undocumented)
gray90 = "#a19f9d";
const // (undocumented)
gray80 = "#b3b0ad";
const // (undocumented)
gray70 = "#bebbb8";
const // (undocumented)
gray60 = "#c8c6c4";
const // (undocumented)
gray50 = "#d2d0ce";
const // (undocumented)
gray40 = "#e1dfdd";
const // (undocumented)
gray30 = "#edebe9";
const // (undocumented)
gray20 = "#f3f2f1";
const // (undocumented)
gray10 = "#faf9f8";
const // (undocumented)
white = "#ffffff";
}
// @public
export interface PartialTheme {
// (undocumented)
components?: ComponentsStyles;
defaultFontStyle?: IRawStyle;
// (undocumented)
disableGlobalClassNames?: boolean;
// (undocumented)
effects?: Partial<IEffects>;
// (undocumented)
fonts?: Partial<IFontStyles>;
// (undocumented)
isInverted?: boolean;
// (undocumented)
palette?: Partial<IPalette>;
// (undocumented)
rtl?: boolean;
// @internal
schemes?: {
[P in ISchemeNames]?: IScheme;
};
// (undocumented)
semanticColors?: Partial<ISemanticColors>;
// Warning: (ae-incompatible-release-tags) The symbol "spacing" is marked as @public, but its signature references "ISpacing" which is marked as @internal
//
// (undocumented)
spacing?: Partial<ISpacing>;
}
// @public (undocumented)
export function registerDefaultFontFaces(baseUrl: string): void;
// @public (undocumented)
export namespace SharedColors {
const // (undocumented)
pinkRed10 = "#750b1c";
const // (undocumented)
red20 = "#a4262c";
const // (undocumented)
red10 = "#d13438";
const // (undocumented)
redOrange20 = "#603d30";
const // (undocumented)
redOrange10 = "#da3b01";
const // (undocumented)
orange30 = "#8e562e";
const // (undocumented)
orange20 = "#ca5010";
const // (undocumented)
orange10 = "#ffaa44";
const // (undocumented)
yellow10 = "#fce100";
const // (undocumented)
orangeYellow20 = "#986f0b";
const // (undocumented)
orangeYellow10 = "#c19c00";
const // (undocumented)
yellowGreen10 = "#8cbd18";
const // (undocumented)
green20 = "#0b6a0b";
const // (undocumented)
green10 = "#498205";
const // (undocumented)
greenCyan10 = "#00ad56";
const // (undocumented)
cyan40 = "#005e50";
const // (undocumented)
cyan30 = "#005b70";
const // (undocumented)
cyan20 = "#038387";
const // (undocumented)
cyan10 = "#00b7c3";
const // (undocumented)
cyanBlue20 = "#004e8c";
const // (undocumented)
cyanBlue10 = "#0078d4";
const // (undocumented)
blue10 = "#4f6bed";
const // (undocumented)
blueMagenta40 = "#373277";
const // (undocumented)
blueMagenta30 = "#5c2e91";
const // (undocumented)
blueMagenta20 = "#8764b8";
const // (undocumented)
blueMagenta10 = "#8378de";
const // (undocumented)
magenta20 = "#881798";
const // (undocumented)
magenta10 = "#c239b3";
const // (undocumented)
magentaPink20 = "#9b0062";
const // (undocumented)
magentaPink10 = "#e3008c";
const // (undocumented)
gray40 = "#393939";
const // (undocumented)
gray30 = "#7a7574";
const // (undocumented)
gray20 = "#69797e";
const // (undocumented)
gray10 = "#a0aeb2";
}
// @public
export interface Theme extends IScheme {
components?: ComponentsStyles;
// @internal
id?: string;
name?: string;
// @internal
schemes?: {
[P in ISchemeNames]?: IScheme;
};
}
// (No @packageDocumentation comment for this package)
```
+3
View File
@@ -0,0 +1,3 @@
import { preset } from '@fluentui/scripts-tasks';
preset();
+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';

Some files were not shown because too many files have changed in this diff Show More