usimple-macaw-ui/src/theme/themes.ts

Saleor's UI component library

import { SaleorThemeColors } from "./createSaleorTheme";

export const dark: SaleorThemeColors = {
  alert: {
    paper: {
      error: "#B65757",
      info: "rgba(250, 250, 250, 1)",
      success: "rgba(67, 156, 123, 1)",
      warning: "rgba(183, 138, 72, 1)",
    },
    icon: {
      error: "#FE6E76",
      info: "#FAFAFA",
      success: "#A4E8BA",
      warning: "#FFE6AB",
    },
  },
  highlightInactive: {
    default: "#78797A",
  },
  autofill: "#5D5881",
  background: {
    default: "#313130",
    paper: "#454544",
  },
  checkbox: {
    default: "#FFFFFF",
  },
  divider: "#252728",
  gray: {
    default: "#202124",
    disabled: "rgba(32, 33, 36, 0.6)",
  },

  active: {
    1: "#76b947",
    2: "#476f2b",
    3: "#84c059",
    4: "#5e9439",
    5: "#2f4a1c",
  },
  main: {
    1: "#FAFAFA",
    2: "rgba(250, 250, 250, 0.8)",
    3: "rgba(250, 250, 250, 0.6)",
    4: "rgba(250, 250, 250, 0.4)",
    5: "rgba(250, 250, 250, 0.1)",
  },
  fail: {
    dark: "#B65757",
    mid: "#FEADAD",
    light: "#FEDEDE",
  },
  errorAction: {
    1: "#EB2B59",
    2: "rgba(235, 43, 89, 0.8)",
    3: "rgba(235, 43, 89, 0.6)",
    4: "rgba(235, 43, 89, 0.4)",
    5: "rgba(235, 43, 89, 0.2)",
  },

  disabled: "#5D6D83",
  paperBorder: "#252728",
  success: "#5DC292",
  theme: "dark",
};
export const light: SaleorThemeColors = {
  alert: {
    paper: {
      error: "#FFD6D9",
      info: "#FFFFFF",
      success: "#DFF3E9",
      warning: "#FFF4E4",
    },
    icon: {
      error: "#FE6E76",
      info: "#28234A",
      success: "#5DC292",
      warning: "#FFB84E",
    },
  },
  highlightInactive: {
    default: "#C8C8C8",
  },
  autofill: "#f4f6c5",
  background: {
    default: "#F5F9F1",
    paper: "#FFFFFF",
  },
  checkbox: {
    default: "#616161",
  },
  divider: "#EAEAEA",
  gray: {
    default: "#C8C8C8",
    disabled: "#C0CFE2",
  },

  active: {
    1: "#76b947",
    2: "#378AFF",
    3: "#68A7FF",
    4: "#C1DBFF",
    5: "#E6F0FF",
  },
  main: {
    1: "#28234A",
    2: "rgba(40, 35, 74, 0.8)",
    3: "rgba(40, 35, 74, 0.6)",
    4: "rgba(40, 35, 74, 0.4)",
    5: "rgba(40, 35, 74, 0.1)",
  },
  fail: {
    dark: "#B65757",
    mid: "#FEADAD",
    light: "#FEDEDE",
  },
  errorAction: {
    1: "#B63755",
    2: "#D36474",
    3: "#E9878B",
    4: "#F7B6B2",
    5: "#FBDDD8",
  },

  disabled: "#CCDDDD",
  paperBorder: "#EAEAEA",
  success: "#5DC292",
  theme: "light",
};