@carbon/themes/src/component-tokens/status/tokens.js

Themes for applying color in the Carbon Design System

/**
 * Copyright IBM Corp. 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {
  red50,
  red60,
  orange40,
  orange60,
  yellow30,
  yellow60,
  purple50,
  purple60,
  green40,
  green50,
  blue50,
  blue70,
  gray50,
  gray60,
  white,
  gray100,
} from '@carbon/colors';

export const statusRed = {
  whiteTheme: red60,
  g10: red60,
  g90: red50,
  g100: red50,
};

export const statusOrange = {
  whiteTheme: orange40,
  g10: orange40,
  g90: orange40,
  g100: orange40,
};

export const statusOrangeOutline = {
  whiteTheme: orange60,
  g10: orange60,
};

export const statusYellow = {
  whiteTheme: yellow30,
  g10: yellow30,
  g90: yellow30,
  g100: yellow30,
};

export const statusYellowOutline = {
  whiteTheme: yellow60,
  g10: yellow60,
};

export const statusPurple = {
  whiteTheme: purple60,
  g10: purple60,
  g90: purple50,
  g100: purple50,
};

export const statusGreen = {
  whiteTheme: green50,
  g10: green50,
  g90: green40,
  g100: green40,
};

export const statusBlue = {
  whiteTheme: blue70,
  g10: blue70,
  g90: blue50,
  g100: blue50,
};

export const statusGray = {
  whiteTheme: gray60,
  g10: gray60,
  g90: gray50,
  g100: gray50,
};
export const statusAccessibilityBackground = {
  whiteTheme: white,
  g10: white,
  g90: gray100,
  g100: gray100,
};