Suggestion to update colour classes for ancestries

[ens-lgil]

Definitively not a priority, but we could make the code to fetch the ancestry colours a bit more robust: at the moment the code to fetch the ancestry colours for the charts is extracting the information from the ancestry legend:
https://github.com/PGScatalog/PGS_Catalog/blob/master/catalog/static/catalog/pgs.js#L64-L70

A way to improve that would be to update the current CSS by using the CSS variables, e.g. something like this:

/* Ancestry colours */
:root {
   --AFR_color: #FFD900; // gold(ish)
   --AMR_color: #E41A1C; // red
   --ASN_color: #B15928; // brown
   --EAS_color: #4DAF4A; // green
   --EUR_color: #377EB8; // blue
   --GME_color: #00CED1; // turquoise
   --SAS_color: #984EA3; // purple
   --MAE_color: #F781BF; // pink
   --MAO_color: #FF7F00; // orange
   --NR_color:  #BBB;    // lighter grey
   --OTH_color: #999;    // grey
}

@each $anc_key, $anc_label in $ancestry_labels {
 .anc_#{$anc_key} {
   background-color: var(--#{$anc_key}_color);
 }
 .anc_colour_#{$anc_key} {
   color: var(--#{$anc_key}_color);
   &:before {
     color: var(--#{$anc_key}_color);
     font-family: "Font Awesome 6 Free";
     content: "\f0c8";
     font-weight:900;
   }
 }
 .anc_bd_#{$anc_key} {
   border-left: 8px solid var(--#{$anc_key}_color);
   padding-left:5px;
 }

 .anc_bd_#{$anc_key}:before {
   content: $anc_label+": ";
 }
}

and in the Javascript, replacing the current code by something like this (although it would be even better to find a way to get rid of the ancestry legend dependency):

anc_colours = {};
var css_style = window.getComputedStyle(document.body);
$('.ancestry_box_legend').each(function() {
    var key = $(this).data('key');
    anc_colours[key] = css_style.getPropertyValue('--'+key+'_color')
});