Tokens.Api - Fluentui

API Report File for "@fluentui/tokens"

Do not edit this file. It is a report generated by API Extractor.

// @public (undocumented)
export type BorderRadiusTokens = {
    borderRadiusNone: string;
    borderRadiusSmall: string;
    borderRadiusMedium: string;
    borderRadiusLarge: string;
    borderRadiusXLarge: string;
    borderRadius2XLarge: string;
    borderRadius3XLarge: string;
    borderRadius4XLarge: string;
    borderRadius5XLarge: string;
    borderRadius6XLarge: string;
    borderRadiusCircular: string;
};

// @public (undocumented)
export type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160;

// @public (undocumented)
export type BrandVariants = Record<Brands, string>;

// @public (undocumented)
export type ColorPaletteAnchor = 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorBorderActive';

// @public (undocumented)
export type ColorPaletteBeige = 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeBorderActive';

// @public (undocumented)
export type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2';

// @public (undocumented)
export type ColorPaletteBlue = 'colorPaletteBlueBackground2' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueBorderActive';

// @public (undocumented)
export type ColorPaletteBrass = 'colorPaletteBrassBackground2' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassBorderActive';

// @public (undocumented)
export type ColorPaletteBrown = 'colorPaletteBrownBackground2' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownBorderActive';

// @public (undocumented)
export type ColorPaletteCornflower = 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerBorderActive';

// @public (undocumented)
export type ColorPaletteCranberry = 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryBorderActive';

// @public (undocumented)
export type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenBorderActive';

// @public (undocumented)
export type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2';

// @public (undocumented)
export type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedBorderActive';

// @public (undocumented)
export type ColorPaletteForest = 'colorPaletteForestBackground2' | 'colorPaletteForestForeground2' | 'colorPaletteForestBorderActive';

// @public (undocumented)
export type ColorPaletteGold = 'colorPaletteGoldBackground2' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldBorderActive';

// @public (undocumented)
export type ColorPaletteGrape = 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeBorderActive';

// @public (undocumented)
export type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenForegroundInverted' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2';

// @public (undocumented)
export type ColorPaletteLavender = 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderBorderActive';

// @public (undocumented)
export type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2';

// @public (undocumented)
export type ColorPaletteLightTeal = 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealBorderActive';

// @public (undocumented)
export type ColorPaletteLilac = 'colorPaletteLilacBackground2' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacBorderActive';

// @public (undocumented)
export type ColorPaletteMagenta = 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaBorderActive';

// @public (undocumented)
export type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2';

// @public (undocumented)
export type ColorPaletteMink = 'colorPaletteMinkBackground2' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkBorderActive';

// @public (undocumented)
export type ColorPaletteNavy = 'colorPaletteNavyBackground2' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyBorderActive';

// @public (undocumented)
export type ColorPalettePeach = 'colorPalettePeachBackground2' | 'colorPalettePeachForeground2' | 'colorPalettePeachBorderActive';

// @public (undocumented)
export type ColorPalettePink = 'colorPalettePinkBackground2' | 'colorPalettePinkForeground2' | 'colorPalettePinkBorderActive';

// @public (undocumented)
export type ColorPalettePlatinum = 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumBorderActive';

// @public (undocumented)
export type ColorPalettePlum = 'colorPalettePlumBackground2' | 'colorPalettePlumForeground2' | 'colorPalettePlumBorderActive';

// @public (undocumented)
export type ColorPalettePumpkin = 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinBorderActive';

// @public (undocumented)
export type ColorPalettePurple = 'colorPalettePurpleBackground2' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleBorderActive';

// @public (undocumented)
export type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedForegroundInverted' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2';

// @public (undocumented)
export type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueBorderActive';

// @public (undocumented)
export type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamBorderActive';

// @public (undocumented)
export type ColorPaletteSteel = 'colorPaletteSteelBackground2' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelBorderActive';

// @public (undocumented)
export type ColorPaletteTeal = 'colorPaletteTealBackground2' | 'colorPaletteTealForeground2' | 'colorPaletteTealBorderActive';

// @public (undocumented)
export type ColorPaletteTokens = StatusColorPaletteTokens & PersonaColorPaletteTokens;

// @public (undocumented)
export type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowForegroundInverted' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2';

// @public
export type ColorTokens = {
    colorNeutralForeground1: string;
    colorNeutralForeground1Hover: string;
    colorNeutralForeground1Pressed: string;
    colorNeutralForeground1Selected: string;
    colorNeutralForeground2: string;
    colorNeutralForeground2Hover: string;
    colorNeutralForeground2Pressed: string;
    colorNeutralForeground2Selected: string;
    colorNeutralForeground2BrandHover: string;
    colorNeutralForeground2BrandPressed: string;
    colorNeutralForeground2BrandSelected: string;
    colorNeutralForeground3: string;
    colorNeutralForeground3Hover: string;
    colorNeutralForeground3Pressed: string;
    colorNeutralForeground3Selected: string;
    colorNeutralForeground3BrandHover: string;
    colorNeutralForeground3BrandPressed: string;
    colorNeutralForeground3BrandSelected: string;
    colorNeutralForeground4: string;
    colorNeutralForeground5: string;
    colorNeutralForeground5Hover: string;
    colorNeutralForeground5Pressed: string;
    colorNeutralForeground5Selected: string;
    colorNeutralForegroundDisabled: string;
    colorNeutralForegroundInvertedDisabled: string;
    colorBrandForegroundLink: string;
    colorBrandForegroundLinkHover: string;
    colorBrandForegroundLinkPressed: string;
    colorBrandForegroundLinkSelected: string;
    colorNeutralForeground2Link: string;
    colorNeutralForeground2LinkHover: string;
    colorNeutralForeground2LinkPressed: string;
    colorNeutralForeground2LinkSelected: string;
    colorCompoundBrandForeground1: string;
    colorCompoundBrandForeground1Hover: string;
    colorCompoundBrandForeground1Pressed: string;
    colorBrandForeground1: string;
    colorBrandForeground2: string;
    colorBrandForeground2Hover: string;
    colorBrandForeground2Pressed: string;
    colorNeutralForeground1Static: string;
    colorNeutralForegroundInverted: string;
    colorNeutralForegroundInvertedHover: string;
    colorNeutralForegroundInvertedPressed: string;
    colorNeutralForegroundInvertedSelected: string;
    colorNeutralForegroundInverted2: string;
    colorNeutralForegroundOnBrand: string;
    colorNeutralForegroundStaticInverted: string;
    colorNeutralForegroundInvertedLink: string;
    colorNeutralForegroundInvertedLinkHover: string;
    colorNeutralForegroundInvertedLinkPressed: string;
    colorNeutralForegroundInvertedLinkSelected: string;
    colorBrandForegroundInverted: string;
    colorBrandForegroundInvertedHover: string;
    colorBrandForegroundInvertedPressed: string;
    colorBrandForegroundOnLight: string;
    colorBrandForegroundOnLightHover: string;
    colorBrandForegroundOnLightPressed: string;
    colorBrandForegroundOnLightSelected: string;
    colorNeutralBackground1: string;
    colorNeutralBackground1Hover: string;
    colorNeutralBackground1Pressed: string;
    colorNeutralBackground1Selected: string;
    colorNeutralBackground2: string;
    colorNeutralBackground2Hover: string;
    colorNeutralBackground2Pressed: string;
    colorNeutralBackground2Selected: string;
    colorNeutralBackground3: string;
    colorNeutralBackground3Hover: string;
    colorNeutralBackground3Pressed: string;
    colorNeutralBackground3Selected: string;
    colorNeutralBackground4: string;
    colorNeutralBackground4Hover: string;
    colorNeutralBackground4Pressed: string;
    colorNeutralBackground4Selected: string;
    colorNeutralBackground5: string;
    colorNeutralBackground5Hover: string;
    colorNeutralBackground5Pressed: string;
    colorNeutralBackground5Selected: string;
    colorNeutralBackground6: string;
    colorNeutralBackground7: string;
    colorNeutralBackground7Hover: string;
    colorNeutralBackground7Pressed: string;
    colorNeutralBackground7Selected: string;
    colorNeutralBackground8: string;
    colorNeutralBackgroundInverted: string;
    colorNeutralBackgroundInvertedHover: string;
    colorNeutralBackgroundInvertedPressed: string;
    colorNeutralBackgroundInvertedSelected: string;
    colorNeutralBackgroundStatic: string;
    colorNeutralBackgroundAlpha: string;
    colorNeutralBackgroundAlpha2: string;
    colorSubtleBackground: string;
    colorSubtleBackgroundHover: string;
    colorSubtleBackgroundPressed: string;
    colorSubtleBackgroundSelected: string;
    colorSubtleBackgroundLightAlphaHover: string;
    colorSubtleBackgroundLightAlphaPressed: string;
    colorSubtleBackgroundLightAlphaSelected: string;
    colorSubtleBackgroundInverted: string;
    colorSubtleBackgroundInvertedHover: string;
    colorSubtleBackgroundInvertedPressed: string;
    colorSubtleBackgroundInvertedSelected: string;
    colorTransparentBackground: string;
    colorTransparentBackgroundHover: string;
    colorTransparentBackgroundPressed: string;
    colorTransparentBackgroundSelected: string;
    colorNeutralBackgroundDisabled: string;
    colorNeutralBackgroundDisabled2: string;
    colorNeutralBackgroundInvertedDisabled: string;
    colorNeutralStencil1: string;
    colorNeutralStencil2: string;
    colorNeutralStencil1Alpha: string;
    colorNeutralStencil2Alpha: string;
    colorBackgroundOverlay: string;
    colorScrollbarOverlay: string;
    colorBrandBackground: string;
    colorBrandBackgroundHover: string;
    colorBrandBackgroundPressed: string;
    colorBrandBackgroundSelected: string;
    colorCompoundBrandBackground: string;
    colorCompoundBrandBackgroundHover: string;
    colorCompoundBrandBackgroundPressed: string;
    colorBrandBackgroundStatic: string;
    colorBrandBackground2: string;
    colorBrandBackground2Hover: string;
    colorBrandBackground2Pressed: string;
    colorBrandBackground3Static: string;
    colorBrandBackground4Static: string;
    colorBrandBackgroundInverted: string;
    colorBrandBackgroundInvertedHover: string;
    colorBrandBackgroundInvertedPressed: string;
    colorBrandBackgroundInvertedSelected: string;
    colorNeutralCardBackground: string;
    colorNeutralCardBackgroundHover: string;
    colorNeutralCardBackgroundPressed: string;
    colorNeutralCardBackgroundSelected: string;
    colorNeutralCardBackgroundDisabled: string;
    colorNeutralStrokeAccessible: string;
    colorNeutralStrokeAccessibleHover: string;
    colorNeutralStrokeAccessiblePressed: string;
    colorNeutralStrokeAccessibleSelected: string;
    colorNeutralStroke1: string;
    colorNeutralStroke1Hover: string;
    colorNeutralStroke1Pressed: string;
    colorNeutralStroke1Selected: string;
    colorNeutralStroke2: string;
    colorNeutralStroke3: string;
    colorNeutralStroke4: string;
    colorNeutralStroke4Hover: string;
    colorNeutralStroke4Pressed: string;
    colorNeutralStroke4Selected: string;
    colorNeutralStrokeSubtle: string;
    colorNeutralStrokeOnBrand: string;
    colorNeutralStrokeOnBrand2: string;
    colorNeutralStrokeOnBrand2Hover: string;
    colorNeutralStrokeOnBrand2Pressed: string;
    colorNeutralStrokeOnBrand2Selected: string;
    colorBrandStroke1: string;
    colorBrandStroke2: string;
    colorBrandStroke2Hover: string;
    colorBrandStroke2Pressed: string;
    colorBrandStroke2Contrast: string;
    colorCompoundBrandStroke: string;
    colorCompoundBrandStrokeHover: string;
    colorCompoundBrandStrokePressed: string;
    colorNeutralStrokeDisabled: string;
    colorNeutralStrokeDisabled2: string;
    colorNeutralStrokeInvertedDisabled: string;
    colorTransparentStroke: string;
    colorTransparentStrokeInteractive: string;
    colorTransparentStrokeDisabled: string;
    colorNeutralStrokeAlpha: string;
    colorNeutralStrokeAlpha2: string;
    colorStrokeFocus1: string;
    colorStrokeFocus2: string;
    colorNeutralShadowAmbient: string;
    colorNeutralShadowKey: string;
    colorNeutralShadowAmbientLighter: string;
    colorNeutralShadowKeyLighter: string;
    colorNeutralShadowAmbientDarker: string;
    colorNeutralShadowKeyDarker: string;
    colorBrandShadowAmbient: string;
    colorBrandShadowKey: string;
};

// @public (undocumented)
export const createDarkTheme: (brand: BrandVariants) => Theme;

// @public (undocumented)
export const createHighContrastTheme: () => Theme;

// @public (undocumented)
export const createLightTheme: (brand: BrandVariants) => Theme;

// @public (undocumented)
export const createTeamsDarkTheme: (brand: BrandVariants) => Theme;

// @public (undocumented)
export type CurveTokens = {
    curveAccelerateMax: string;
    curveAccelerateMid: string;
    curveAccelerateMin: string;
    curveDecelerateMax: string;
    curveDecelerateMid: string;
    curveDecelerateMin: string;
    curveEasyEaseMax: string;
    curveEasyEase: string;
    curveLinear: string;
};

// @public (undocumented)
export type DurationTokens = {
    durationUltraFast: string;
    durationFaster: string;
    durationFast: string;
    durationNormal: string;
    durationGentle: string;
    durationSlow: string;
    durationSlower: string;
    durationUltraSlow: string;
};

// @public (undocumented)
export type FontFamilyTokens = {
    fontFamilyBase: string;
    fontFamilyMonospace: string;
    fontFamilyNumeric: string;
};

// @public (undocumented)
export type FontSizeTokens = {
    fontSizeBase100: string;
    fontSizeBase200: string;
    fontSizeBase300: string;
    fontSizeBase400: string;
    fontSizeBase500: string;
    fontSizeBase600: string;
    fontSizeHero700: string;
    fontSizeHero800: string;
    fontSizeHero900: string;
    fontSizeHero1000: string;
};

// @public (undocumented)
export type FontWeightTokens = {
    fontWeightRegular: number;
    fontWeightMedium: number;
    fontWeightSemibold: number;
    fontWeightBold: number;
};

// @public (undocumented)
export type HorizontalSpacingTokens = {
    spacingHorizontalNone: string;
    spacingHorizontalXXS: string;
    spacingHorizontalXS: string;
    spacingHorizontalSNudge: string;
    spacingHorizontalS: string;
    spacingHorizontalMNudge: string;
    spacingHorizontalM: string;
    spacingHorizontalL: string;
    spacingHorizontalXL: string;
    spacingHorizontalXXL: string;
    spacingHorizontalXXXL: string;
};

// @public (undocumented)
export type LineHeightTokens = {
    lineHeightBase100: string;
    lineHeightBase200: string;
    lineHeightBase300: string;
    lineHeightBase400: string;
    lineHeightBase500: string;
    lineHeightBase600: string;
    lineHeightHero700: string;
    lineHeightHero800: string;
    lineHeightHero900: string;
    lineHeightHero1000: string;
};

// @public (undocumented)
export type PartialTheme = Partial<Theme>;

// @public (undocumented)
export type ShadowBrandTokens = {
    shadow2Brand: string;
    shadow4Brand: string;
    shadow8Brand: string;
    shadow16Brand: string;
    shadow28Brand: string;
    shadow64Brand: string;
};

// @public
export type ShadowTokens = {
    shadow2: string;
    shadow4: string;
    shadow8: string;
    shadow16: string;
    shadow28: string;
    shadow64: string;
};

// @public (undocumented)
export type SpacingTokens = {
    none: string;
    xxs: string;
    xs: string;
    sNudge: string;
    s: string;
    mNudge: string;
    m: string;
    l: string;
    xl: string;
    xxl: string;
    xxxl: string;
};

// @public (undocumented)
export type StrokeWidthTokens = {
    strokeWidthThin: string;
    strokeWidthThick: string;
    strokeWidthThicker: string;
    strokeWidthThickest: string;
};

// @public (undocumented)
export const teamsDarkTheme: Theme;

// @public (undocumented)
export const teamsDarkV21Theme: Theme;

// @public (undocumented)
export const teamsHighContrastTheme: Theme;

// @public (undocumented)
export const teamsLightTheme: Theme;

// @public (undocumented)
export const teamsLightV21Theme: Theme;

// @public (undocumented)
export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens & ZIndexTokens;

// @public
export function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record<keyof TTheme, string>;

// @public (undocumented)
export const tokens: Record<keyof Theme, string>;

// @public (undocumented)
export type TypographyStyle = {
    fontFamily: string;
    fontSize: string;
    fontWeight: string;
    lineHeight: string;
};

// @public (undocumented)
export type TypographyStyles = {
    body1: TypographyStyle;
    body1Strong: TypographyStyle;
    body1Stronger: TypographyStyle;
    body2: TypographyStyle;
    caption1: TypographyStyle;
    caption1Strong: TypographyStyle;
    caption1Stronger: TypographyStyle;
    caption2: TypographyStyle;
    caption2Strong: TypographyStyle;
    subtitle1: TypographyStyle;
    subtitle2: TypographyStyle;
    subtitle2Stronger: TypographyStyle;
    title1: TypographyStyle;
    title2: TypographyStyle;
    title3: TypographyStyle;
    largeTitle: TypographyStyle;
    display: TypographyStyle;
};

// @public
export const typographyStyles: TypographyStyles;

// @public (undocumented)
export type VerticalSpacingTokens = {
    spacingVerticalNone: string;
    spacingVerticalXXS: string;
    spacingVerticalXS: string;
    spacingVerticalSNudge: string;
    spacingVerticalS: string;
    spacingVerticalMNudge: string;
    spacingVerticalM: string;
    spacingVerticalL: string;
    spacingVerticalXL: string;
    spacingVerticalXXL: string;
    spacingVerticalXXXL: string;
};

// @public (undocumented)
export const webDarkTheme: Theme;

// @public (undocumented)
export const webLightTheme: Theme;

// @public
export type ZIndexTokens = {
    zIndexBackground?: string;
    zIndexContent?: string;
    zIndexOverlay?: string;
    zIndexPopup?: string;
    zIndexMessages?: string;
    zIndexFloating?: string;
    zIndexPriority?: string;
    zIndexDebug?: string;
};

// (No @packageDocumentation comment for this package)