1227 lines
36 KiB
TypeScript
1227 lines
36 KiB
TypeScript
|
import type { IFontWeight } from '@fluentui/merge-styles';
|
|||
|
import type { IRawStyle } from '@fluentui/merge-styles';
|
|||
|
import type { IStyleFunctionOrObject } from '@fluentui/utilities';
|
|||
|
|
|||
|
/**
|
|||
|
* 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;
|
|||
|
|
|||
|
/**
|
|||
|
* Exporting raw duraction values and easing functions to be used in custom animations
|
|||
|
*/
|
|||
|
export declare const AnimationVariables: IAnimationVariables;
|
|||
|
|
|||
|
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";
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory Theme}
|
|||
|
* Component-level styles and token set.
|
|||
|
*/
|
|||
|
export declare type ComponentsStyles = {
|
|||
|
[componentName: string]: ComponentStyles;
|
|||
|
};
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory Theme}
|
|||
|
* Component-level styles and variants.
|
|||
|
*/
|
|||
|
export declare interface ComponentStyles {
|
|||
|
/**
|
|||
|
* styles prop for a component.
|
|||
|
*/
|
|||
|
styles?: IStyleFunctionOrObject<any, any>;
|
|||
|
}
|
|||
|
|
|||
|
export declare function createFontStyles(localeCode: string | null): IFontStyles;
|
|||
|
|
|||
|
/**
|
|||
|
* 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;
|
|||
|
|
|||
|
export declare const DefaultEffects: IEffects;
|
|||
|
|
|||
|
export declare const DefaultFontStyles: IFontStyles;
|
|||
|
|
|||
|
export declare const DefaultPalette: IPalette;
|
|||
|
|
|||
|
export declare const DefaultSpacing: ISpacing;
|
|||
|
|
|||
|
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)";
|
|||
|
}
|
|||
|
|
|||
|
export declare const FluentTheme: ITheme;
|
|||
|
|
|||
|
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;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* All Fabric standard animations, exposed as json objects referencing predefined
|
|||
|
* keyframes. These objects can be mixed in with other class definitions.
|
|||
|
* {@docCategory IAnimationStyles}
|
|||
|
*/
|
|||
|
export declare 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 declare interface IAnimationVariables {
|
|||
|
easeFunction1: string;
|
|||
|
easeFunction2: string;
|
|||
|
durationValue1: string;
|
|||
|
durationValue2: string;
|
|||
|
durationValue3: string;
|
|||
|
durationValue4: string;
|
|||
|
}
|
|||
|
|
|||
|
export declare namespace IconFontSizes {
|
|||
|
const xSmall: string;
|
|||
|
const small: string;
|
|||
|
const medium: string;
|
|||
|
const large: string;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Decorative styles in a theme
|
|||
|
* {@docCategory IEffects}
|
|||
|
*/
|
|||
|
export declare 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;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Fluent UI font set.
|
|||
|
* {@docCategory IFontStyles}
|
|||
|
*/
|
|||
|
export declare 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;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Fluent UI color palette.
|
|||
|
* {@docCategory IPalette}
|
|||
|
*/
|
|||
|
export declare 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;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory ITheme}
|
|||
|
*/
|
|||
|
export declare interface IPartialTheme extends PartialTheme {
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory IScheme}
|
|||
|
*/
|
|||
|
export declare 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;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* @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 declare type ISchemeNames = 'default' | 'neutral' | 'soft' | 'strong';
|
|||
|
|
|||
|
/**
|
|||
|
* 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 it’s 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 declare 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;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory ISemanticTextColors}
|
|||
|
*/
|
|||
|
export declare 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;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* @internal This is an experimental interface and will be changed post design review.
|
|||
|
* {@docCategory ISpacing}
|
|||
|
*/
|
|||
|
export declare interface ISpacing {
|
|||
|
s2: string;
|
|||
|
s1: string;
|
|||
|
m: string;
|
|||
|
l1: string;
|
|||
|
l2: string;
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory ITheme}
|
|||
|
*/
|
|||
|
export declare interface ITheme extends Theme {
|
|||
|
}
|
|||
|
|
|||
|
export declare namespace LocalizedFontFamilies {
|
|||
|
const Arabic: string;
|
|||
|
const ChineseSimplified = "'Microsoft Yahei UI', Verdana, Simsun";
|
|||
|
const ChineseTraditional = "'Microsoft Jhenghei UI', Pmingliu";
|
|||
|
const Cyrillic: string;
|
|||
|
const EastEuropean: string;
|
|||
|
const Greek: string;
|
|||
|
const Hebrew: string;
|
|||
|
const Hindi = "'Nirmala UI'";
|
|||
|
const Japanese = "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka";
|
|||
|
const Korean = "'Malgun Gothic', Gulim";
|
|||
|
const Selawik: string;
|
|||
|
const Thai = "'Leelawadee UI Web', 'Kmer UI'";
|
|||
|
const Vietnamese: string;
|
|||
|
const WestEuropean: string;
|
|||
|
const Armenian: string;
|
|||
|
const Georgian: string;
|
|||
|
}
|
|||
|
|
|||
|
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)";
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* Merge a partial/full theme into a full theme and returns a merged full theme.
|
|||
|
*/
|
|||
|
export declare function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;
|
|||
|
|
|||
|
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;
|
|||
|
}
|
|||
|
|
|||
|
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 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";
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory Theme}
|
|||
|
* A partial theme.
|
|||
|
*/
|
|||
|
export declare 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;
|
|||
|
};
|
|||
|
}
|
|||
|
|
|||
|
export declare function registerDefaultFontFaces(baseUrl: string): void;
|
|||
|
|
|||
|
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";
|
|||
|
}
|
|||
|
|
|||
|
/**
|
|||
|
* {@docCategory Theme}
|
|||
|
* A prepared (fully expanded) theme object.
|
|||
|
*/
|
|||
|
export declare 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;
|
|||
|
};
|
|||
|
}
|
|||
|
|
|||
|
export { }
|