@ddsys/material/src/base/colors.js

<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>

// BHP Colors Variables
const base = {
  bhp_orange_1: "#dd5900",
  bhp_orange_2: "#f77f00",
  bhp_orange_3: "#fcba5e",
  bhp_orange_4: "#ffd691",
  bhp_purple_1: "#663366",
  bhp_purple_2: "#993399",
  bhp_purple_3: "#cc6699",
  bhp_purple_4: "#e8e0e8",
  bhp_blue_1: "#1d4f91",
  bhp_blue_2: "#0a6cb4",
  bhp_blue_3: "#0099cc",
  bhp_blue_4: "#d7ebff",
  bhp_turquoise_1: "#01515f",
  bhp_turquoise_2: "#007E98",
  bhp_turquoise_3: "#6ec9da",
  bhp_turquoise_4: "#cee9ef",
  bhp_green_1: "#035d55",
  bhp_green_2: "#06ad96",
  bhp_green_3: "#abcc66",
  bhp_green_4: "#e0e9af",
  bhp_blue_grey_1: "#2b5368",
  bhp_blue_grey_2: "#45768b",
  bhp_blue_grey_3: "#6ba4b8",
  bhp_blue_grey_4: "#bfced6",
  bhp_grey_1: "#252525",
  bhp_grey_2: "#666666",
  bhp_grey_3: "#b7b9bb",
  bhp_grey_4: "#e7e2d5"
};
const gray = {
  gray_100: "#f8f9fa",
  gray_200: "#e9ecef",
  gray_300: "#dee2e6",
  gray_400: "#ced4da",
  gray_500: "#adb5bd",
  gray_600: "#6c757d",
  gray_700: "#495057",
  gray_800: "#343a40",
  gray_900: "#212529"
};
const systemColor = {
  white: "#fff",
  black: "#000",
  blue: base.bhp_blue_2,
  indigo: base.bhp_purple_1,
  purple: base.bhp_purple_2,
  pink: base.bhp_purple_3,
  orange: base.bhp_orange_1,
  yellow: base.bhp_orange_2,
  teal: base.bhp_green_2,
  cyan: base.bhp_blue_3,
  red: "#dc3545",
  green: "#28a745"
};

const themeColor = {
  theme_bg_color: gray.gray_100,
  selected_item_hover: gray.gray_300,
  primary: base.bhp_orange_1,
  success: systemColor.green,
  info: systemColor.cyan,
  warning: systemColor.yellow,
  danger: systemColor.red,
  secondary: gray.gray_600,
  light: gray.gray_100,
  dark: gray.gray_800
};

const other = {
  list_group_active_bg: "#F9F9D9"
};

export default function() {
  return {
    ...base,
    ...gray,
    ...systemColor,
    ...themeColor,
    ...other
  };
}