Module: core/theme

Variables

Theme

• Theme: Context<Theme>

---

defaultTheme

• defaultTheme: DefaultTheme

Functions

CustomThemeProvider

▸ CustomThemeProvider(__namedParameters): Element

Parameters

Name	Type
__namedParameters	Object
__namedParameters.children	ReactNode
__namedParameters.merge	Object
__namedParameters.merge.body?	{ fontFamily?: string | undefined; fontSize?: number | undefined; lineHeight?: number | undefined; color?: string | undefined; }
__namedParameters.merge.bodyFont?	string
__namedParameters.merge.button?	{ radius?: number | undefined; }
__namedParameters.merge.card?	{ radius?: number | undefined; }
__namedParameters.merge.colors?	{ white?: string | undefined; grey?: string | undefined; dark?: string | undefined; grayBackground?: string | undefined; grayIconColor?: string | undefined; t1?: string | undefined; ... 5 more ...; dark60?: string | undefined; }
__namedParameters.merge.error?	{ color?: string | undefined; disabledColor?: string | undefined; activeColor?: string | undefined; other?: string | undefined; }
__namedParameters.merge.h1?	{ fontFamily?: string | undefined; marginTop?: number | undefined; marginBottom?: number | undefined; fontSize?: number | undefined; lineHeight?: number | undefined; color?: string | undefined; }
__namedParameters.merge.h1Font?	string
__namedParameters.merge.h2?	{ fontFamily?: string | undefined; fontSize?: number | undefined; lineHeight?: number | undefined; marginTop?: number | undefined; marginBottom?: number | undefined; color?: string | undefined; }
__namedParameters.merge.h3?	{ fontFamily?: string | undefined; fontSize?: number | undefined; lineHeight?: number | undefined; marginTop?: number | undefined; marginBottom?: number | undefined; color?: string | undefined; }
__namedParameters.merge.input?	{ fontFamily?: string | undefined; fontSize?: number | undefined; height?: number | undefined; paddingLeft?: number | undefined; borderRadius?: number | undefined; backgroundColor?: string | undefined; color?: string | undefined; }
__namedParameters.merge.inputPlaceholder?	{ color?: string | undefined; }
__namedParameters.merge.inputText?	{ fontFamily?: string | undefined; fontSize?: number | undefined; lineHeight?: number | undefined; color?: string | undefined; }
__namedParameters.merge.label?	{ fontFamily?: string | undefined; fontSize?: number | undefined; lineHeight?: number | undefined; marginTop?: number | undefined; marginBottom?: number | undefined; color?: string | undefined; }
__namedParameters.merge.markdownStyle?	{ heading?: { fontFamily?: string | undefined; lineHeight?: number | undefined; color?: string | undefined; marginBottom?: number | undefined; } | undefined; paragraph?: { fontFamily?: string | undefined; paddingBottom?: number | undefined; color?: string | undefined; } | undefined; text?: { ...; } | undefined; stro...
__namedParameters.merge.paragraph?	{ marginVertical?: number | undefined; fontFamily?: string | undefined; fontSize?: number | undefined; lineHeight?: number | undefined; color?: string | undefined; }
__namedParameters.merge.primary?	{ color?: string | undefined; disabledColor?: string | undefined; activeColor?: string | undefined; other?: string | undefined; }
__namedParameters.merge.secondary?	{ color?: string | undefined; disabledColor?: string | undefined; activeColor?: string | undefined; other?: string | undefined; }
__namedParameters.merge.spacing?	number
__namedParameters.merge.success?	{ color?: string | undefined; disabledColor?: string | undefined; activeColor?: string | undefined; other?: string | undefined; }
__namedParameters.merge.tertiary?	{ color?: string | undefined; disabledColor?: string | undefined; activeColor?: string | undefined; other?: string | undefined; }

Returns

Element

---

OnlineThemeProvider

▸ OnlineThemeProvider(__namedParameters): Element

Parameters

Name	Type
__namedParameters	Object
__namedParameters.children	ReactNode

Returns

Element

---

ThemeProvider

▸ ThemeProvider(__namedParameters): Element

Parameters

Name	Type
__namedParameters	Object
__namedParameters.children	ReactNode
__namedParameters.overrides?	Partial<Theme>
__namedParameters.transform?	(t: Theme) => Theme

Returns

Element

---

lighten

▸ lighten(color?, opacity?): string

Returns a color that's mixed with white Use 1 for original color Use 0 for white

Parameters

Name	Type	Default value
color	string	'#004488'
opacity	number	0.8

Returns

string

---

opacity

▸ opacity(color, opacity): string

Returns a transparent color Consider using lighten if this element overlaps other elements

Parameters

Name	Type
color	string
opacity	number

Returns

string

---

useStyled

▸ useStyled<T>(func): T

Type parameters

Name
T

Parameters

Name	Type
func	(ThemeType: any) => T

Returns

T

---

useTheme

▸ useTheme(): Theme

Returns

Theme