@bytebeans/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: "#222431",
    paper: "#34384B",
  },
  checkbox: {
    default: "#FFFFFF",
  },
  divider: "#252728",
  gray: {
    default: "#202124",
    disabled: "rgba(32, 33, 36, 0.6)",
  },

  active: {
    1: "#3EA3FF",
    2: "#388AD6",
    3: "#3371AD",
    4: "#2D5783",
    5: "#283E5A",
  },
  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: {
    verydark: "#9F2E2E",
    dark: "#B65757",
    mid: "#FEADAD",
    light: "#FEDEDE",
  },
  warning: {
    verydark: "#97661F",
    dark: "#B78A48",
    mid: "#FFE6AB",
    light: "#FFF4D2",
  },
  success: {
    verydark: "#22805D",
    dark: "#439C7B",
    mid: "#A4E8BA",
    light: "#E6F9F0",
  },
  info: {
    verydark: "#004697",
    dark: "#105CB3",
    mid: "#99E6FD",
    light: "#D2F6FE",
  },
  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",
  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: "#EFF5F8",
    paper: "#FFFFFF",
  },
  checkbox: {
    default: "#616161",
  },
  divider: "#EAEAEA",
  gray: {
    default: "#C8C8C8",
    disabled: "#C0CFE2",
  },

  active: {
    1: "#056DFF",
    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: {
    verydark: "#9F2E2E",
    dark: "#B65757",
    mid: "#FEADAD",
    light: "#FEDEDE",
  },
  warning: {
    verydark: "#97661F",
    dark: "#B78A48",
    mid: "#FFE6AB",
    light: "#FFF4D2",
  },
  success: {
    verydark: "#22805D",
    dark: "#439C7B",
    mid: "#A4E8BA",
    light: "#E6F9F0",
  },
  info: {
    verydark: "#004697",
    dark: "#105CB3",
    mid: "#99E6FD",
    light: "#D2F6FE",
  },
  errorAction: {
    1: "#B63755",
    2: "#D36474",
    3: "#E9878B",
    4: "#F7B6B2",
    5: "#FBDDD8",
  },

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