IThemeColours | EF React Native Style Framework

Represents aliases for common colours in a theme.

example: Using the mixins ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.accent.normal, ...theme.colour.background.accent.normal, ...theme.colour.border.accent.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

Type parameters

Hierarchy

IThemeColours
- IThemeColoursShades

Implemented by

ThemeColours

Index

Properties

accent

accent: T

The accent colour can be used to showcase an object that needs to standout from the primary object colour.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.accent.normal, ...theme.colour.background.accent.normal, ...theme.colour.border.accent.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

code

code: T

For representing monospaced code

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.code.normal, ...theme.colour.background.code.normal, ...theme.colour.border.code.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

disabled

disabled: T

When an object is disabled, this is the colour to use

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.disabled.normal, ...theme.colour.background.disabled.normal, ...theme.colour.border.disabled.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

divider

divider: T

The colour to use when dividing up objects

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.divider.normal, ...theme.colour.background.divider.normal, ...theme.colour.border.divider.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

error

error: T

The colour to use to represent an error to the user

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.error.normal, ...theme.colour.background.error.normal, ...theme.colour.border.error.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

failure

failure: T

The colour to use to represent a failed operation

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.failure.normal, ...theme.colour.background.failure.normal, ...theme.colour.border.failure.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

information

information: T

The colour to use to represent information to the user

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.information.normal, ...theme.colour.background.information.normal, ...theme.colour.border.information.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

primary

primary: T

The primary colour for the theme object. Should be used for the main text colour, usually grey.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.primary.normal, ...theme.colour.background.primary.normal, ...theme.colour.border.primary.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

quote

quote: T

A block, or inline, quote

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.quote.normal, ...theme.colour.background.quote.normal, ...theme.colour.border.quote.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

secondary

secondary: T

The secondary colour can be used for objects that are in addition to the primary object, such as titles.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.secondary.normal, ...theme.colour.background.secondary.normal, ...theme.colour.border.secondary.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

success

success: T

The colour to use to represent a successful operation

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.success.normal, ...theme.colour.background.success.normal, ...theme.colour.border.success.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

tertiary

tertiary: T

The tertiary colour can be used for objects that are in addition to the secondary colour, such as sub-titles.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.tertiary.normal, ...theme.colour.background.tertiary.normal, ...theme.colour.border.tertiary.normal, ...theme.border.width.normal, }; ```
see: ThemeColours

warning

warning: T

The colour to use to represent a warning to the user

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const style: TextStyle = { ...theme.colour.font.warning.normal, ...theme.colour.background.warning.normal, ...theme.colour.border.warning.normal, ...theme.border.width.normal, }; ```
see: ThemeColours