sriracha-ui/jsx/components/ColorModeContainer/theme.js

A react style library build with styled-components, and material ui theme.

export const nickNacks = {
  palette: {
    primary: {
      light: "#1976d2",
      main: "rgb(71, 145, 219)",
      dark: "rgb(17, 82, 147)",
      text: "#fafafa",
    },
    secondary: {
      light: "rgb(220, 0, 78)",
      main: "rgb(227, 51, 113)",
      dark: "rgb(154, 0, 54)",
      text: "#fafafa",
    },
    success: {
      light: "#4caf50",
      main: "#81c784",
      dark: "#388e3c",
      text: "#fafafa",
    },
    warning: {
      light: "#ff9800",
      main: "#ffb74d",
      dark: "#f57c00",
      text: "#fafafa",
    },
    info: {
      light: "#2196f3",
      main: "#64b5f6",
      dark: "#1976d2",
      text: "#fafafa",
    },
  },
  space: [
    "0",
    "0.4rem",
    "0.8rem",
    "1.6rem",
    "3.2rem",
    "6.4rem",
    "12.8rem",
    "25.6rem",
    "51.2rem",
    "88rem",
  ],
  fontSizes: {
    xs: "0.4rem",
    sm: "0.8rem",
    md: "1.2rem",
    lg: "1.6rem",
    xl: "2rem",
    "2xl": "2.4rem",
    "3xl": "2.8rem",
    "4xl": "3.2rem",
    "5xl": "3.6rem",
    "6xl": "4rem",
  },
  zIndex: [0, 500, 1000, 1500, 2000, 2500],
  borderRadius: "0.4rem",
  breakpoints: {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1280,
    xl: 1920,
  },
  shadows: {
    0: "none",
    1: "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
    2: "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
    3: "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
    4: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
    5: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
    6: "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
    7: "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
    8: "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
    9: "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
    10: "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
    11: "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
    12: "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
    13: "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
    14: "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
    15: "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
    16: "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
    17: "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
    18: "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
    19: "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
    20: "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
    21: "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
    22: "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
    23: "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
    24: "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
  },
};

export const lightColors = {
  gray0: "#FAFAFA",
  gray1: "#F5F5F5",
  gray2: "#EEEEEE",
  gray3: "#E0E0E0",
  gray4: "#BDBDBD",
  gray5: "#9E9E9E",
  gray6: "#757575",
  gray7: "#616161",
  gray8: "#424242",
  gray9: "#212121",

  coolGray0: "#ECEFF1",
  coolGray1: "#CFD8DC",
  coolGray2: "#B0BEC5",
  coolGray3: "#90A4AE",
  coolGray4: "#78909C",
  coolGray5: "#607D8B",
  coolGray6: "#546E7A",
  coolGray7: "#455A64",
  coolGray8: "#37474F",
  coolGray9: "#263238",

  brown0: "#EFEBE9",
  brown1: "#D7CCC8",
  brown2: "#BCAAA4",
  brown3: "#A1887F",
  brown4: "#8D6E63",
  brown5: "#795548",
  brown6: "#6D4C41",
  brown7: "#5D4037",
  brown8: "#4E342E",
  brown9: "#3E2723",

  red0: "#FFEBEE",
  red1: "#FFCDD2",
  red2: "#EF9A9A",
  red3: "#E57373",
  red4: "#EF5350",
  red5: "#F44336",
  red6: "#E53935",
  red7: "#D32F2F",
  red8: "#C62828",
  red9: "#B71C1C",
  redA1: "#ff8a80",
  redA2: "#ff5252",
  redA4: "#ff1744",
  redA7: "#d50000",

  deepOrange0: "#fbe9e7",
  deepOrange1: "#ffccbc",
  deepOrange2: "#ffab91",
  deepOrange3: "#ff8a65",
  deepOrange4: "#ff7043",
  deepOrange5: "#ff5722",
  deepOrange6: "#f4511e",
  deepOrange7: "#e64a19",
  deepOrange8: "#d84315",
  deepOrange9: "#bf360c",
  deepOrangeA1: "#ff9e80",
  deepOrangeA2: "#ff6e40",
  deepOrangeA4: "#ff3d00",
  deepOrangeA7: "#dd2c00",

  orange0: "#FFF3E0",
  orange1: "#FFE0B2",
  orange2: "#FFCC80",
  orange3: "#FFB74D",
  orange4: "#FFA726",
  orange5: "#FF9800",
  orange6: "#FB8C00",
  orange7: "#F57C00",
  orange8: "#EF6C00",
  orange9: "#E65100",
  orangeA1: "#ffd180",
  orangeA2: "#ffab40",
  orangeA4: "#ff9100",
  orangeA7: "#ff6d00",

  amber0: "#FFF8E1",
  amber1: "#FFECB3",
  amber2: "#FFE082",
  amber3: "#FFD54F",
  amber4: "#FFCA28",
  amber5: "#FFC107",
  amber6: "#FFB300",
  amber7: "#FFA000",
  amber8: "#FF8F00",
  amber9: "#FF6F00",
  amberA1: "#ffe57f",
  amberA2: "#ffd740",
  amberA4: "#ffc400",
  amberA7: "#ffab00",

  yellow0: "#FFFDE7",
  yellow1: "#FFF9C4",
  yellow2: "#FFF59D",
  yellow3: "#FFF176",
  yellow4: "#FFEE58",
  yellow5: "#FFEB3B",
  yellow6: "#FDD835",
  yellow7: "#FBC02D",
  yellow8: "#F9A825",
  yellow9: "#F57F17",
  yellowA1: "#ffff8d",
  yellowA2: "#ffff00",
  yellowA4: "#ffea00",
  yellowA7: "#ffd600",

  lime0: "#f9fbe7",
  lime1: "#f0f4c3",
  lime2: "#e6ee9c",
  lime3: "#dce775",
  lime4: "#d4e157",
  lime5: "#cddc39",
  lime6: "#c0ca33",
  lime7: "#afb42b",
  lime8: "#9e9d24",
  lime9: "#827717",
  limeA1: "#f4ff81",
  limeA2: "#eeff41",
  limeA4: "#c6ff00",
  limeA7: "#aeea00",

  lightGreen0: "#F1F8E9",
  lightGreen1: "#DCEDC8",
  lightGreen2: "#C5E1A5",
  lightGreen3: "#AED581",
  lightGreen4: "#9CCC65",
  lightGreen5: "#8BC34A",
  lightGreen6: "#7CB342",
  lightGreen7: "#689F38",
  lightGreen8: "#558B2F",
  lightGreen9: "#33691E",
  lightGreenA1: "#ccff90",
  lightGreenA2: "#b2ff59",
  lightGreenA4: "#76ff03",
  lightGreenA7: "#64dd17",

  green0: "#E8F5E9",
  green1: "#C8E6C9",
  green2: "#A5D6A7",
  green3: "#81C784",
  green4: "#66BB6A",
  green5: "#4CAF50",
  green6: "#43A047",
  green7: "#388E3C",
  green8: "#2E7D32",
  green9: "#1B5E20",
  greenA1: "#b9f6ca",
  greenA2: "#69f0ae",
  greenA4: "#00e676",
  greenA7: "#00c853",

  teal0: "#E0F2F1",
  teal1: "#B2DFDB",
  teal2: "#80CBC4",
  teal3: "#4DB6AC",
  teal4: "#26A69A",
  teal5: "#009688",
  teal6: "#00897B",
  teal7: "#00796B",
  teal8: "#00695C",
  teal9: "#004D40",
  tealA1: "#a7ffeb",
  tealA2: "#64ffda",
  tealA4: "#1de9b6",
  tealA7: "#00bfa5",

  cyan0: "#E0F7FA",
  cyan1: "#B2EBF2",
  cyan2: "#80DEEA",
  cyan3: "#4DD0E1",
  cyan4: "#26C6DA",
  cyan5: "#00BCD4",
  cyan6: "#00ACC1",
  cyan7: "#0097A7",
  cyan8: "#00838F",
  cyan9: "#006064",
  cyanA1: "#84ffff",
  cyanA2: "#18ffff",
  cyanA4: "#00e5ff",
  cyanA7: "#00b8d4",

  lightBlue0: "#E1F5FE",
  lightBlue1: "#B3E5FC",
  lightBlue2: "#81D4FA",
  lightBlue3: "#4FC3F7",
  lightBlue4: "#29B6F6",
  lightBlue5: "#03A9F4",
  lightBlue6: "#039BE5",
  lightBlue7: "#0288D1",
  lightBlue8: "#0277BD",
  lightBlue9: "#01579B",
  lightBlueA1: "#80d8ff",
  lightBlueA2: "#40c4ff",
  lightBlueA4: "#00b0ff",
  lightBlueA7: "#0091ea",

  blue0: "#E3F2FD",
  blue1: "#BBDEFB",
  blue2: "#90CAF9",
  blue3: "#64B5F6",
  blue4: "#42A5F5",
  blue5: "#2196F3",
  blue6: "#1E88E5",
  blue7: "#1976D2",
  blue8: "#1565C0",
  blue9: "#0D47A1",
  blueA1: "#82b1ff",
  blueA2: "#448aff",
  blueA4: "#2979ff",
  blueA7: "#2962ff",

  indigo0: "#E8EAF6",
  indigo1: "#C5CAE9",
  indigo2: "#9FA8DA",
  indigo3: "#7986CB",
  indigo4: "#5C6BC0",
  indigo5: "#3F51B5",
  indigo6: "#3949AB",
  indigo7: "#303F9F",
  indigo8: "#283593",
  indigo9: "#1A237E",
  indigoA1: "#8c9eff",
  indigoA2: "#536dfe",
  indigoA4: "#3d5afe",
  indigoA7: "#304ffe",

  deepPurple0: "#EDE7F6",
  deepPurple1: "#D1C4E9",
  deepPurple2: "#B39DDB",
  deepPurple3: "#9575CD",
  deepPurple4: "#7E57C2",
  deepPurple5: "#673AB7",
  deepPurple6: "#5E35B1",
  deepPurple7: "#512DA8",
  deepPurple8: "#4527A0",
  deepPurple9: "#311B92",
  deepPurpleA1: "#b388ff",
  deepPurpleA2: "#7c4dff",
  deepPurpleA4: "#651fff",
  deepPurpleA7: "#6200ea",

  purple0: "#F3E5F5",
  purple1: "#E1BEE7",
  purple2: "#CE93D8",
  purple3: "#BA68C8",
  purple4: "#AB47BC",
  purple5: "#9C27B0",
  purple6: "#8E24AA",
  purple7: "#7B1FA2",
  purple8: "#6A1B9A",
  purple9: "#4A148C",
  purpleA1: "#ea80fc",
  purpleA2: "#e040fb",
  purpleA4: "#d500f9",
  purpleA7: "#aa00ff",

  pink0: "#FCE4EC",
  pink1: "#F8BBD0",
  pink2: "#F48FB1",
  pink3: "#F06292",
  pink4: "#EC407A",
  pink5: "#E91E63",
  pink6: "#D81B60",
  pink7: "#C2185B",
  pink8: "#AD1457",
  pink9: "#880E4F",
  pinkA1: "#ff80ab",
  pinkA2: "#ff4081",
  pinkA4: "#f50057",
  pinkA7: "#c51162",

  whiteAlpha0: "rgba(255, 255, 255, 0.04)",
  whiteAlpha1: "rgba(255, 255, 255, 0.06)",
  whiteAlpha2: "rgba(255, 255, 255, 0.08)",
  whiteAlpha3: "rgba(255, 255, 255, 0.16)",
  whiteAlpha4: "rgba(255, 255, 255, 0.24)",
  whiteAlpha5: "rgba(255, 255, 255, 0.36)",
  whiteAlpha6: "rgba(255, 255, 255, 0.48)",
  whiteAlpha7: "rgba(255, 255, 255, 0.64)",
  whiteAlpha8: "rgba(255, 255, 255, 0.80)",
  whiteAlpha9: "rgba(255, 255, 255, 0.92)",

  blackAlpha0: "rgba(0, 0, 0, 0.04)",
  blackAlpha1: "rgba(0, 0, 0, 0.06)",
  blackAlpha2: "rgba(0, 0, 0, 0.08)",
  blackAlpha3: "rgba(0, 0, 0, 0.16)",
  blackAlpha4: "rgba(0, 0, 0, 0.24)",
  blackAlpha5: "rgba(0, 0, 0, 0.36)",
  blackAlpha6: "rgba(0, 0, 0, 0.48)",
  blackAlpha7: "rgba(0, 0, 0, 0.64)",
  blackAlpha8: "rgba(0, 0, 0, 0.80)",
  blackAlpha9: "rgba(0, 0, 0, 0.92)",

  background: "#EEEEEE",
};

export const darkColors = {
  gray0: "#212121",
  gray1: "#424242",
  gray2: "#616161",
  gray3: "#757575",
  gray4: "#9E9E9E",
  gray5: "#BDBDBD",
  gray6: "#E0E0E0",
  gray7: "#EEEEEE",
  gray8: "#F5F5F5",
  gray9: "#FAFAFA",

  coolGray0: "#263238",
  coolGray1: "#37474F",
  coolGray2: "#455A64",
  coolGray3: "#546E7A",
  coolGray4: "#607D8B",
  coolGray5: "#78909C",
  coolGray6: "#90A4AE",
  coolGray7: "#B0BEC5",
  coolGray8: "#CFD8DC",
  coolGray9: "#ECEFF1",

  brown0: "#3E2723",
  brown1: "#4E342E",
  brown2: "#5D4037",
  brown3: "#6D4C41",
  brown4: "#795548",
  brown5: "#8D6E63",
  brown6: "#A1887F",
  brown7: "#BCAAA4",
  brown8: "#D7CCC8",
  brown9: "#EFEBE9",

  red0: "#B71C1C",
  red1: "#C62828",
  red2: "#D32F2F",
  red3: "#E53935",
  red4: "#F44336",
  red5: "#EF5350",
  red6: "#E57373",
  red7: "#EF9A9A",
  red8: "#FFCDD2",
  red9: "#FFEBEE",
  redA1: "#d50000",
  redA2: "#ff1744",
  redA4: "#ff5252",
  redA7: "#ff8a80",

  deepOrange0: "#bf360c",
  deepOrange1: "#d84315",
  deepOrange2: "#e64a19",
  deepOrange3: "#f4511e",
  deepOrange4: "#ff5722",
  deepOrange5: "#ff7043",
  deepOrange6: "#ff8a65",
  deepOrange7: "#ffab91",
  deepOrange8: "#ffccbc",
  deepOrange9: "#fbe9e7",
  deepOrangeA1: "#dd2c00",
  deepOrangeA2: "#ff3d00",
  deepOrangeA4: "#ff6e40",
  deepOrangeA7: "#ff9e80",

  orange0: "#E65100",
  orange1: "#EF6C00",
  orange2: "#F57C00",
  orange3: "#FB8C00",
  orange4: "#FF9800",
  orange5: "#FFA726",
  orange6: "#FFB74D",
  orange7: "#FFCC80",
  orange8: "#FFE0B2",
  orange9: "#FFF3E0",
  orangeA1: "#ff6d00",
  orangeA2: "#ff9100",
  orangeA4: "#ffab40",
  orangeA7: "#ffd180",

  amber0: "#FF6F00",
  amber1: "#FF8F00",
  amber2: "#FFA000",
  amber3: "#FFB300",
  amber4: "#FFC107",
  amber5: "#FFCA28",
  amber6: "#FFD54F",
  amber7: "#FFE082",
  amber8: "#FFECB3",
  amber9: "#FFF8E1",

  amberA1: "#ffab00",
  amberA2: "#ffc400",
  amberA4: "#ffd740",
  amberA7: "#ffe57f",
  yellow0: "#F57F17",
  yellow1: "#F9A825",
  yellow2: "#FBC02D",
  yellow3: "#FDD835",
  yellow4: "#FFEB3B",
  yellow5: "#FFEE58",
  yellow6: "#FFF176",
  yellow7: "#FFF59D",
  yellow8: "#FFF9C4",
  yellow9: "#FFFDE7",
  yellowA1: "#ffd600",
  yellowA2: "#ffea00",
  yellowA4: "#ffff00",
  yellowA7: "#ffff8d",

  lime0: "#827717",
  lime1: "#9e9d24",
  lime2: "#afb42b",
  lime3: "#c0ca33",
  lime4: "#cddc39",
  lime5: "#d4e157",
  lime6: "#dce775",
  lime7: "#e6ee9c",
  lime8: "#f0f4c3",
  lime9: "#f9fbe7",
  limeA1: "#aeea00",
  limeA2: "#c6ff00",
  limeA4: "#eeff41",
  limeA7: "#f4ff81",

  lightGreen0: "#33691E",
  lightGreen1: "#558B2F",
  lightGreen2: "#689F38",
  lightGreen3: "#7CB342",
  lightGreen4: "#8BC34A",
  lightGreen5: "#9CCC65",
  lightGreen6: "#AED581",
  lightGreen7: "#C5E1A5",
  lightGreen8: "#DCEDC8",
  lightGreen9: "#F1F8E9",
  lightGreenA1: "#64dd17",
  lightGreenA2: "#76ff03",
  lightGreenA4: "#b2ff59",
  lightGreenA7: "#ccff90",

  green0: "#1B5E20",
  green1: "#2E7D32",
  green2: "#388E3C",
  green3: "#43A047",
  green4: "#4CAF50",
  green5: "#66BB6A",
  green6: "#81C784",
  green7: "#A5D6A7",
  green8: "#C8E6C9",
  green9: "#E8F5E9",
  greenA1: "#00c853",
  greenA2: "#00e676",
  greenA4: "#69f0ae",
  greenA7: "#b9f6ca",

  teal0: "#004D40",
  teal1: "#00695C",
  teal2: "#00796B",
  teal3: "#00897B",
  teal4: "#009688",
  teal5: "#26A69A",
  teal6: "#4DB6AC",
  teal7: "#80CBC4",
  teal8: "#B2DFDB",
  teal9: "#E0F2F1",
  tealA1: "#00bfa5",
  tealA2: "#1de9b6",
  tealA4: "#64ffda",
  tealA7: "#a7ffeb",

  cyan0: "#006064",
  cyan1: "#00838F",
  cyan2: "#0097A7",
  cyan3: "#00ACC1",
  cyan4: "#00BCD4",
  cyan5: "#26C6DA",
  cyan6: "#4DD0E1",
  cyan7: "#80DEEA",
  cyan8: "#B2EBF2",
  cyan9: "#E0F7FA",
  cyanA1: "#00b8d4",
  cyanA2: "#00e5ff",
  cyanA4: "#18ffff",
  cyanA7: "#84ffff",

  lightBlue0: "#01579B",
  lightBlue1: "#0277BD",
  lightBlue2: "#0288D1",
  lightBlue3: "#039BE5",
  lightBlue4: "#03A9F4",
  lightBlue5: "#29B6F6",
  lightBlue6: "#4FC3F7",
  lightBlue7: "#81D4FA",
  lightBlue8: "#B3E5FC",
  lightBlue9: "#E1F5FE",
  lightBlueA1: "#0091ea",
  lightBlueA2: "#00b0ff",
  lightBlueA4: "#40c4ff",
  lightBlueA7: "#80d8ff",

  blue0: "#0D47A1",
  blue1: "#1565C0",
  blue2: "#1976D2",
  blue3: "#1E88E5",
  blue4: "#2196F3",
  blue5: "#42A5F5",
  blue6: "#64B5F6",
  blue7: "#90CAF9",
  blue8: "#BBDEFB",
  blue9: "#E3F2FD",
  blueA1: "#2962ff",
  blueA2: "#2979ff",
  blueA4: "#448aff",
  blueA7: "#82b1ff",

  indigo0: "#1A237E",
  indigo1: "#283593",
  indigo2: "#303F9F",
  indigo3: "#3949AB",
  indigo4: "#3F51B5",
  indigo5: "#5C6BC0",
  indigo6: "#7986CB",
  indigo7: "#9FA8DA",
  indigo8: "#C5CAE9",
  indigo9: "#E8EAF6",
  indigoA1: "#304ffe",
  indigoA2: "#3d5afe",
  indigoA4: "#536dfe",
  indigoA7: "#8c9eff",

  deepPurple0: "#311B92",
  deepPurple1: "#4527A0",
  deepPurple2: "#512DA8",
  deepPurple3: "#5E35B1",
  deepPurple4: "#673AB7",
  deepPurple5: "#7E57C2",
  deepPurple6: "#9575CD",
  deepPurple7: "#B39DDB",
  deepPurple8: "#D1C4E9",
  deepPurple9: "#EDE7F6",
  deepPurpleA1: "#6200ea",
  deepPurpleA2: "#651fff",
  deepPurpleA4: "#7c4dff",
  deepPurpleA7: "#b388ff",

  purple0: "#4A148C",
  purple1: "#6A1B9A",
  purple2: "#7B1FA2",
  purple3: "#8E24AA",
  purple4: "#9C27B0",
  purple5: "#AB47BC",
  purple6: "#BA68C8",
  purple7: "#CE93D8",
  purple8: "#E1BEE7",
  purple9: "#F3E5F5",
  purpleA1: "#aa00ff",
  purpleA2: "#d500f9",
  purpleA4: "#e040fb",
  purpleA7: "#ea80fc",

  pink0: "#880E4F",
  pink1: "#AD1457",
  pink2: "#C2185B",
  pink3: "#D81B60",
  pink4: "#E91E63",
  pink5: "#EC407A",
  pink6: "#F06292",
  pink7: "#F48FB1",
  pink8: "#F8BBD0",
  pink9: "#FCE4EC",
  pinkA1: "#c51162",
  pinkA2: "#f50057",
  pinkA4: "#ff4081",
  pinkA7: "#ff80ab",

  whiteAlpha0: "rgba(255, 255, 255, 0.04)",
  whiteAlpha1: "rgba(255, 255, 255, 0.06)",
  whiteAlpha2: "rgba(255, 255, 255, 0.08)",
  whiteAlpha3: "rgba(255, 255, 255, 0.16)",
  whiteAlpha4: "rgba(255, 255, 255, 0.24)",
  whiteAlpha5: "rgba(255, 255, 255, 0.36)",
  whiteAlpha6: "rgba(255, 255, 255, 0.48)",
  whiteAlpha7: "rgba(255, 255, 255, 0.64)",
  whiteAlpha8: "rgba(255, 255, 255, 0.80)",
  whiteAlpha9: "rgba(255, 255, 255, 0.92)",

  blackAlpha0: "rgba(0, 0, 0, 0.04)",
  blackAlpha1: "rgba(0, 0, 0, 0.06)",
  blackAlpha2: "rgba(0, 0, 0, 0.08)",
  blackAlpha3: "rgba(0, 0, 0, 0.16)",
  blackAlpha4: "rgba(0, 0, 0, 0.24)",
  blackAlpha5: "rgba(0, 0, 0, 0.36)",
  blackAlpha6: "rgba(0, 0, 0, 0.48)",
  blackAlpha7: "rgba(0, 0, 0, 0.64)",
  blackAlpha8: "rgba(0, 0, 0, 0.80)",
  blackAlpha9: "rgba(0, 0, 0, 0.92)",

  background: "#424242",
};