Theme

The theme property defines a set of overrides of the Workspaces portal's default look and feel.

note

The Workspaces theme has been optimized to work well with different color tones and shades. It is strongly recommended to modify only the primary color. Other overrides should only be used if there are contrast issues.

tip

If you need to change your Workspaces portal's primary color, we have guidance to help you select a color that's compliant with WCAG 2.0 level AA contrast guidelines.

Example

src/configs/custom/index.ts

import { ConfigGlobal } from '@transact-open-ux/workspaces/dist/types';

export const globalConfig = ({ date }: any): ConfigGlobal => ({
  ...
  theme: {
    text: {
      main: '#4A4A4A',
      light: '#6B6E71',
    },
    primary: {
      main: '#025197',
    },
    grey: {
      darkest: '#000000',
      dark: '#3B3B3B',
      primary: '#757575',
      light: '#E5E5E5',
      lightest: '#F2F2F2',
    },
    white: '#ffffff',
    black: '#000000',
    green: {
      main: '#5A9B12',
      light: '#7ED321',
    },
    red: {
      main: '#D0021B',
      light: '#FBF3F4',
    },
    blue: {
      main: '#4A90E2',
      light: '#eef3f8',
    },
    orange: '#F5A623',
  },
  ...
});

export default globalConfig;

Attributes

To review the list of supported attributes, see API Reference.