Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ThemeColours<T>

A set of theme colour aliases to use. They allow a component to take on the identity of the alias. The design team can then cusomise the alias to change the colour for all components that have that alias.

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, }; ```
example
Customising the colours aliases ```ts import { ThemeColour, ThemeColours, themeColourConvertFont, IFontColourStyles, constants, } from '@ef-carbon/react-native-style'; const font = new ThemeColours({ base: 'blue', constants, convert: themeColourConvertFont, }); const colours = new ThemeColour({ base: 'blue', constants, font, }); const theme = new Theme({ base: 'blue', constants, colours, }); ```
see

IThemeColoursOptions provide more examples of how to customise the aliases

Type parameters

  • T: ViewStyle

Hierarchy

  • ThemeColours

Implements

Index

Constructors

constructor

  • Parameters

    • __namedParameters: object
      • accent: undefined | IColour<string>
      • base: undefined | "red" | "pink" | "purple" | "deepPurple" | "indigo" | "blue" | "lightBlue" | "cyan" | "teal" | "green" | "lightGreen" | "lime" | "yellow" | "amber" | "orange" | "deepOrange" | "brown" | "grey" | "blueGrey" | "black" | "white"
      • code: undefined | IColour<string>
      • constants: object
      • convert: convert
      • disabled: undefined | IColour<string>
      • divider: undefined | IColour<string>
      • error: undefined | IColour<string>
      • failure: undefined | IColour<string>
      • information: undefined | IColour<string>
      • primary: undefined | IColour<string>
      • quote: undefined | IColour<string>
      • secondary: undefined | IColour<string>
      • shade: undefined | "normal" | "darkest" | "darker" | "dark" | "darkened" | "lightened" | "light" | "lighter" | "lightest" | object
      • success: undefined | IColour<string>
      • tertiary: undefined | IColour<string>
      • warning: undefined | IColour<string>

    Returns ThemeColours

Properties

accent

accent: Readonly<IColour<T>>

code

code: Readonly<IColour<T>>

constants

constants: Readonly<IConstants>

disabled

disabled: Readonly<IColour<T>>

divider

divider: Readonly<IColour<T>>

error

error: Readonly<IColour<T>>

failure

failure: Readonly<IColour<T>>

information

information: Readonly<IColour<T>>

primary

primary: Readonly<IColour<T>>

quote

quote: Readonly<IColour<T>>

secondary

secondary: Readonly<IColour<T>>

success

success: Readonly<IColour<T>>

tertiary

tertiary: Readonly<IColour<T>>

warning

warning: Readonly<IColour<T>>