Borrowing-TrackerFrontend/src/styles.tsx

export const colors = {
  background: "#F2FAF4",
  header_color: "#b2dfab",
  font_dark: "#2e482e",
  font_light: "#0e410d",
  button_dark: "#92b88d",
  button_light: "#FFFFFF",
  button_border: "#b2dfab",
  red: "#a44141",
  orange: "#c57331",
  green: "#80b28a",
  gray: "#8F8F8F",
  dark_green: "#17561D",
  dark_blue: "#19639D",

  font_dark_red: "#570404",

  dandelion: "#FBB217",

  lightgreen: "#D9FFD8",
  darkgreen: "#00360C",
  lightorange: "#FEFFCD",
  lightred: "#ECC4B8",

  form_dark: "#000000",
  form_title: "#1E1A4D"

  
};
const styles: { [key: string]: React.CSSProperties } = {
  background: {
    backgroundColor: colors.background,
    position: "fixed",
    top: 0,
    left: 0,
  
    height: "100%",
    width: "100%",
    minHeight: "100%",
    minWidth: "100%",
    overflowY: "scroll",
  },

  text_normal: {
    color: colors.font_dark,
    fontWeight: "500",
  },

  text_dark_red: {
    color: colors.font_dark_red,
    fontWeight: "bold",
  },

  text_dark: {
    color: colors.font_dark,
    fontWeight: "bold",
  },
  text_super_dark: {
    color: colors.font_dark,
    fontWeight: 900,
  },
  text_light: {
    color: colors.font_light,
    fontWeight: "bold",

  },

  text_dark_blue:{
    color:colors.dark_blue,
    fontWeight:"bold"
  },
  text_gray: {
    color: colors.gray,
   

  },
  text_red: {
    color: colors.red,
    fontWeight: "bold",
  },
  text_orange: {
    color: colors.orange,
    fontWeight: "bold",
  },
  text_green: {
    color: colors.green,
    fontWeight: "bold",
  },
  text_dark_green: {
    color: colors.dark_green,
    fontWeight: "bold",

  },
  
  text_XL: {
    fontSize: "clamp(2rem, 3rem, 8rem)",
  },
  
  text_L: {
    fontSize: "clamp(1.5rem, 2rem, 6rem)",
  },
  text_M: {
    fontSize: "clamp(1rem, 1rem, 4rem)",
  },
  text_S: {
    fontSize: "clamp(0.6rem, 0.8rem, 1rem)",
  },
  text_XS: {
    fontSize: "clamp(0.5rem, 0.6rem, 0.8rem)",
  },
  flex_row: {
    display: "flex",
    flexDirection: "row",
  },
  flex_column: {
    display: "flex",
    flexDirection: "column",
  },
  input_form: {
    color: colors.font_dark,
    fontWeight: "bold",
    fontSize: "clamp(1vw, 1rem, 2vw)",
    background: "none",
    borderRadius: 8,
    maxWidth: "128px",
    minWidth: "100%",
    marginTop: 16,
  },
  popup_center: {
    width: "32rem",
    borderRadius: 16,
    borderColor: "grey",
    borderStyle: "solid",
    borderWidth: 1,
    padding: 16,
    alignContent: "center",
    justifyContent: "center",
    textAlign: "center",
    overflowY: "scroll",
  },
  student_filter_item: {
    height: 32,
    width: 32,
    fill: colors.font_dark,
    marginLeft: "1rem",
    marginRight: "1rem",
  },
  bform_label: {
    display: "flex",
    justifyContent: "left",
    marginTop: "10px",
  },

  bform_label2: {
    display: "flex",
    justifyContent: "left",
    marginTop: "10px",
    marginBottom: "10px",
  },


  
};

export default styles;