design.ts

import { Theme } from "@emotion/react";

interface SplitgraphTheme extends Theme {
  grays: any;
  primary: any;
  navbar: any;
  footer: any;
  surfaces: any;
}

export const theme: SplitgraphTheme = {
  // Grays //////////////////
  grays: {
    light: {
      gray20: "#000202",
      gray21: "#2C2D2D",
      gray22: "#555656",
      gray23: "#818285",
      gray24: "#A0A3A9",
      gray25: "#C0C3CC",
      gray26: "#E6E7EB",
      gray27: "#F2F4F6",
      gray28: "#F9FAFB",
      gray29: "#FCFCFD",
    },
    dark: {
      gray20: "#FCFCFD",
      gray21: "#E6E7EB",
      gray22: "#A0A3A9",
      gray23: "#818285",
      gray24: "#555656",
      gray25: "#292A2A",
      gray26: "#1C1E1E",
      gray27: "#141616",
      gray28: "#0D0F0F",
      gray29: "#000202",
      // Gray25-29: should be dynamic "add primary color at 8%"
    },
  },
  //Brand ///////////////////
  primary: {
    main: "#F94569",
    tint: "#FF7C97",
    shade: "#C0003F",
  },
  navbar: {
    light: "#FBFCFF",
    dark: "#1A1324",
  },
  footer: {
    light: "#130822",
    dark: "#1A1324",
  },
  // Surfaces ///////////////
  surfaces: {
    light: {
      background: "#FFFFFF",
      sql: "#E3EFFE",
      error: "#F9EEEF",
      success: "#DBF9F3",
      link: "#2A81F6",
    },
    dark: {
      background: "#000202", // should "add primary color at 8%"
      sql: "#1F1B27",
      error: "#370D10",
      success: "#103D34",
      link: "#2A81F6",
    },
  },
};