import colors from '@invisionag/iris-colors';

The injixo color world is split into 3 categories:

Brand

Only used for branding related tasks. It's not allowed to use those color for any other cause.

import { brand } from '@invisionag/iris-colors';

System

Are used for all stylings within the injixo applications such as background-colors, border, typography, etc...

import { system } from '@invisionag/iris-colors';

Data Visualization

Only used for data visualization such as graphs, tables and other data heavy visualizations.

import { visualization } from '@invisionag/iris-colors';

Usage:

export const StyledItem = styled.div`
  background-color: ${colors.system.ui100};
`;

Brand

export const StyledItem = styled.div`
  background-color: ${brand.injixo100};
`;

System

export const StyledItem = styled.div`
  background-color: ${system.ui100};
`;

Data Visualization

export const StyledItem = styled.div`
  background-color: ${visualization.ink50};
`;