openaire-library/connect/community/CustomizationOptions.ts

export class CustomizationOptions {
  mainColor: string;
  secondaryColor: string;
  panel: {
    onDarkBackground: boolean,
    background: {
      color: string; //background
      borderStyle: string;
      borderColor: string;
      borderWidth: number;
    }, fonts: {
      color: string;
      family: string;
      size: number;
      weight: number;
    },
    title: {
      color: string;
      family: string;
      size: number;
      weight: number;
    },
    panelElements: {
      backgroundColor: string;
      borderColor: string;
      color: string;
    }
  };

  box: {
    borderColor: string;
    borderStyle: string;
    borderWidth: number;
    borderRadius: number;
  }
  ;
  links: {
    darkBackground: {
      family: string;
      size: number;
      weight: number;
      color: string;

      onHover: {
        color: string;
      };
    };
    lightBackground: {
      color: string;
      onHover: {
        color: string;
      };
    };
  };
  buttons: {
    darkBackground: {
      backgroundColor: string;
      color: string;
      borderStyle: string;
      borderColor: string;
      borderWidth: number;
      borderRadius: number;
      onHover: {
        backgroundColor: string;
        color: string;
        borderColor: string;
      };
    };
    lightBackground: {
      backgroundColor: string;
      color: string;
      borderStyle: string;
      borderColor: string;
      borderWidth: number;
      borderRadius: number;
      onHover: {
        backgroundColor: string;
        color: string;
        borderColor: string;
      };
    };
  };


  constructor() {

    this.mainColor = '#4C9CD5';
    this.secondaryColor = '#24857F';
    this.panel = {
      onDarkBackground: true,
      background: {
        color: '#4C9CD5',
        borderStyle: 'solid',
        borderColor: "#4C9CD5",
        borderWidth: 0
      }, fonts: {
        color: '#ffffff',
        family: 'Open Sans',
        size: 14,
        weight: 400
      },
      title: {
        color: '#ffffff',
        family: 'Open Sans',
        size: 18,
        weight: 700
      },

      panelElements: {
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        borderColor: 'rgba(255, 255, 255, 0.5)',
        color: '#ffffff'
      }
    };

    this.box = {
      borderColor:  '#4C9CD5',
      borderStyle: 'solid',
      borderWidth: 2,
      borderRadius: 6,
    };
    this.links = {
      darkBackground: {
        family: 'Open Sans',
        size: 14,
        weight: 400,
        color: 'rgba(255, 255, 255, 0.98)',
        onHover: {
          color: 'rgba(255, 255, 255, 0.5)',
        },
      },
      lightBackground: {
        color: '#4C9CD5',
        onHover: {
          color: '#24857F'
        },
      }
    };

    this.buttons = {
      darkBackground: {
        backgroundColor: "#ffffff",
        color:"#4C9CD5",
        borderStyle:"solid",
        borderColor: "#ffffff",
        borderWidth: 1,
        borderRadius: 4,
        onHover: {
          backgroundColor: "#eeeeee",
          color: "#4C9CD5",
          borderColor: "#eeeeee",
        }
      },
      lightBackground: {
        backgroundColor: '#003052',
        color: '#ffffff',
        borderStyle: "solid",
        borderColor: "#003052",
        borderWidth: 1,
        borderRadius: 4,
        onHover: {
          backgroundColor: '#154B71',
          color: '#ffffff',
          borderColor: "#154B71",
        }
      }

    };
  }

}