IThemeColoursShades | EF React Native Style Framework

Specifies shades to use for a ThemeColour. Used in the IThemeColourOptions

Hierarchy

IThemeColours<keyof IColour>
- IThemeColoursShades

Index

Properties

accent

accent: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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: keyof IColour

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