Color Style

Tonic UI comes with a color style system that defines functional color values (See Color Values section below for details). You can override the default value by creating a color style object in accordance to the color mode, and pass the object to ColorStyleProvider with the value prop. For example:

copy
import React from 'react';
import {
  ThemeProvider,
  ColorModeProvider,
  ColorStyleProvider,
  colorStyle,
} from '@trendmicro/react-styled-ui';
import App from './App';

const customColorStyle = {
  ...colorStyle,
   dark: {
    ...colorStyle.dark,
    color: {
      emphasis: 'white:emphasis',
      primary: 'white:primary',
      secondary: 'white:secondary',
      tertiary: 'white:tertiary',
      disabled: 'white:disabled',
      success: 'green:40',
      info: 'blue:40',
      warning: 'orange:50',
      error: 'red:50',
    },
  },
  light: {
    ...colorStyle.light,
    color: {
      emphasis: 'black:emphasis',
      primary: 'black:primary',
      secondary: 'black:secondary',
      tertiary: 'black:tertiary',
      disabled: 'black:disabled',
      success: 'green:50',
      info: 'blue:60',
      warning: 'orange:50',
      error: 'red:60',
    },
  },
};

function Example({ children }) {
  return (
    <ThemeProvider>
      <ColorModeProvider value="dark">
        <ColorStyleProvider value={customColorStyle}>
          <App />
        </ColorStyleProvider>
      </ColorModeProvider>
    </ThemeProvider>
  );
}
import React from 'react';
import {
  ThemeProvider,
  ColorModeProvider,
  ColorStyleProvider,
  colorStyle,
} from '@trendmicro/react-styled-ui';
import App from './App';

const customColorStyle = {
  ...colorStyle,
   dark: {
    ...colorStyle.dark,
    color: {
      emphasis: 'white:emphasis',
      primary: 'white:primary',
      secondary: 'white:secondary',
      tertiary: 'white:tertiary',
      disabled: 'white:disabled',
      success: 'green:40',
      info: 'blue:40',
      warning: 'orange:50',
      error: 'red:50',
    },
  },
  light: {
    ...colorStyle.light,
    color: {
      emphasis: 'black:emphasis',
      primary: 'black:primary',
      secondary: 'black:secondary',
      tertiary: 'black:tertiary',
      disabled: 'black:disabled',
      success: 'green:50',
      info: 'blue:60',
      warning: 'orange:50',
      error: 'red:60',
    },
  },
};

function Example({ children }) {
  return (
    <ThemeProvider>
      <ColorModeProvider value="dark">
        <ColorStyleProvider value={customColorStyle}>
          <App />
        </ColorStyleProvider>
      </ColorModeProvider>
    </ThemeProvider>
  );
}

Then you can use the useColorStyle Hook to get or set color style for a given color mode.

copy
const [colorMode] = useColorMode();
const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
const { colors } = useTheme();

console.log(colorMode);
// => 'dark' / 'light'
console.log(colorStyle.color.primary);
// => 'white:primary' / 'black:primary'
console.log(colorStyle.background.primary);
// => 'gray:100' / 'white:emphasis'
console.log(colors[colorStyle.color.primary]);
// => 'rgba(255, 255, 255, .92)' / 'rgba(0, 0, 0, .92)'
console.log(colors[colorStyle.background.primary]);
// => '#151515' / 'rgba(255, 255, 255, 1.0)'
const [colorMode] = useColorMode();
const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
const { colors } = useTheme();

console.log(colorMode);
// => 'dark' / 'light'
console.log(colorStyle.color.primary);
// => 'white:primary' / 'black:primary'
console.log(colorStyle.background.primary);
// => 'gray:100' / 'white:emphasis'
console.log(colors[colorStyle.color.primary]);
// => 'rgba(255, 255, 255, .92)' / 'rgba(0, 0, 0, .92)'
console.log(colors[colorStyle.background.primary]);
// => '#151515' / 'rgba(255, 255, 255, 1.0)'

EDITABLE EXAMPLE
copy
function Example() {
  const [colorMode] = useColorMode();
  const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
  const [colorVariant, setColorVariant] = React.useState('primary');
  const backgroundColor = colorStyle.background[colorVariant];
  const color = colorStyle.color[colorVariant];
  const changeColorVariant = (colorVariant) => (event) => {
    setColorVariant(colorVariant);
  };

  return (
    <>
      <Box mb="4x">
        <Button onClick={changeColorVariant('primary')}>
          Use primary color
        </Button>
        <Space width="2x" />
        <Button onClick={changeColorVariant('secondary')}>
          Use secondary color
        </Button>
        <Space width="2x" />
        <Button onClick={changeColorVariant('tertiary')}>
          Use tertiary color
        </Button>
      </Box>
      <Box backgroundColor={backgroundColor} p="4x">
        <Text color={color} size="lg">
          To change the color mode, click the <b>toggle color mode</b> button at the top right corner.
        </Text>
      </Box>
    </>
  );
};
function Example() {
  const [colorMode] = useColorMode();
  const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
  const [colorVariant, setColorVariant] = React.useState('primary');
  const backgroundColor = colorStyle.background[colorVariant];
  const color = colorStyle.color[colorVariant];
  const changeColorVariant = (colorVariant) => (event) => {
    setColorVariant(colorVariant);
  };

  return (
    <>
      <Box mb="4x">
        <Button onClick={changeColorVariant('primary')}>
          Use primary color
        </Button>
        <Space width="2x" />
        <Button onClick={changeColorVariant('secondary')}>
          Use secondary color
        </Button>
        <Space width="2x" />
        <Button onClick={changeColorVariant('tertiary')}>
          Use tertiary color
        </Button>
      </Box>
      <Box backgroundColor={backgroundColor} p="4x">
        <Text color={color} size="lg">
          To change the color mode, click the <b>toggle color mode</b> button at the top right corner.
        </Text>
      </Box>
    </>
  );
};

Color Values

Dark color style

{
  background: {
    primary: 'gray:100',
    secondary: 'gray:90',
    tertiary: 'gray:80',
    inverse: 'gray:10',
    selected: 'blue:60',
    marked: '#fce79e'
  },
  color: {
    emphasis: 'white:emphasis',
    primary: 'white:primary',
    secondary: 'white:secondary',
    tertiary: 'white:tertiary',
    disabled: 'white:disabled',
    success: 'green:40',
    info: 'blue:40',
    warning: 'orange:50',
    error: 'red:50'
  },
  divider: 'rgba(255, 255, 255, 0.12)',
  text: {
    selection: 'blue:60',
    highlight: '#fce79e',
    emphasis: 'white:emphasis',
    primary: 'white:primary',
    secondary: 'white:secondary',
    tertiary: 'white:tertiary',
    disabled: 'white:disabled',
    link: 'blue:40',
    warning: 'orange:50',
    error: 'red:50'
  },
  shadow: {
    thin: '0 2px 8px 0 rgba(0, 0, 0, 0.48), 0 1px 2px 0 rgba(0, 0, 0, 0.16)',
    medium: '0 4px 16px 0 rgba(0, 0, 0, 0.48), 0 2px 4px 0 rgba(0, 0, 0, 0.16)',
    thick: '0 8px 32px 0 rgba(0, 0, 0, 0.48), 0 4px 8px 0 rgba(0, 0, 0, 0.16)'
  },
  severity: {
    critical: 'magenta:60',
    high: 'red:50',
    medium: 'orange:50',
    low: 'yellow:50',
    safe: 'green:40',
    info: 'gray:50',
    unknown: 'gray:50'
  },
  chart: {
    classic: {
      colors: [
        'gray:50',
        'blue:50',
        'green:40',
        'orange:50',
        'cyan:40',
        'red:50',
        'purple:50',
        'teal:40',
        'magenta:40',
        'green:30',
        'yellow:50'
      ]
    }
  }
}

Light color style

{
  background: {
    primary: 'white:emphasis',
    secondary: 'gray:10',
    tertiary: 'gray:20',
    inverse: 'gray:70',
    selected: 'blue:60',
    marked: '#fce79e'
  },
  color: {
    emphasis: 'black:emphasis',
    primary: 'black:primary',
    secondary: 'black:secondary',
    tertiary: 'black:tertiary',
    disabled: 'black:disabled',
    success: 'green:50',
    info: 'blue:60',
    warning: 'orange:50',
    error: 'red:60'
  },
  divider: 'rgba(0, 0, 0, 0.12)',
  text: {
    selection: 'blue:60',
    highlight: '#fce79e',
    emphasis: 'black:emphasis',
    primary: 'black:primary',
    secondary: 'black:secondary',
    tertiary: 'black:tertiary',
    disabled: 'black:disabled',
    link: 'blue:60',
    warning: 'orange:50',
    error: 'red:60'
  },
  shadow: {
    thin: '0 2px 8px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.08)',
    medium: '0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
    thick: '0 8px 32px 0 rgba(0, 0, 0, 0.16), 0 4px 8px 0 rgba(0, 0, 0, 0.08)'
  },
  severity: {
    critical: 'magenta:60',
    high: 'red:60',
    medium: 'orange:50',
    low: 'yellow:50',
    safe: 'green:50',
    info: 'gray:50',
    unknown: 'gray:50'
  },
  chart: {
    classic: {
      colors: [
        'gray:50',
        'blue:60',
        'green:50',
        'orange:50',
        'cyan:40',
        'red:60',
        'purple:60',
        'teal:40',
        'magenta:50',
        'green:30',
        'yellow:50'
      ]
    }
  }
}

Gradient Color Values

Gradient color values are not defined in the color style system, you can set gradient with below values when necessary.

{
  gradient: {
    severity: {
      high: [
        'purple:60',
        'red:50'
      ],
      medium: [
        'red:50',
        'orange:50'
      ],
      low: [
        'orange:50',
        'yellow:50'
      ],
      safe: [
        'teal:50',
        'green:40'
      ]
    },
    others: {
      1: [
        'purple:50',
        'magenta:40'
      ],
      2: [
        'purple:60',
        'blue:50'
      ],
      3: [
        'blue:50',
        'teal:40'
      ],
      4: [
        'cyan:40',
        'teal:30'
      ],
      5: [
        'blue:60',
        'teal:40'
      ],
      6: [
        'green:40',
        'cyan:30'
      ],
      7: [
        'magenta:60',
        'red:40'
      ],
      8: [
        'magenta:50',
        'blue:60'
      ]
    }
  }
}

Blindness Color Values

Blindness color values are not defined in the color style system, you can set blindness with below values when necessary.

{
  blindness: {
    severity: {
      high: 'magenta:60',
      medium: 'orange:50',
      low: 'yellow:50',
      safe: 'green:30',
      info: 'gray:50',
      unknown: 'gray:50'
    },
    chart: {
      classic: {
        colors: [
          'gray:50',
          'blue:30',
          'green:30',
          'orange:50',
          'cyan:30',
          'magenta:60',
          'purple:50',
          'teal:40',
          'purple:30',
          'cyan:70',
          'yellow:50'
        ]
      }
    },
    gradient: {
      severity: {
        high: [
          'purple:60',
          'magenta:60'
        ],
        medium: [
          'magenta:60',
          'orange:50'
        ],
        low: [
          'orange:50',
          'yellow:50'
        ],
        safe: [
          'teal:50',
          'green:30'
        ]
      }
    }
  }
}