Roam - Mermaid - custom colors for the graph

Roam-mermaid-colors-in-graph.css

/* 		
Author: @CatoMinor3
Version: 1
Date: July 1st
Paypal support:  https://www.paypal.me/catominor3
What it does: Custom CSS colors for Mermaid in Roam. 

How to use it? 
1) Put this code into roam/css
2) Simply assign class to the item under {{mermaid}}:
class IDOFTHEITEM merCOLOR; 

Example:
- graph TD;
    - colors -->A[Navy];
    - colors -->B[Blue];
   
    - class A merNavy;
    - class B merBlue; 


*/

.merNavy > circle,
.merNavy > rect,
.merNavy > polygon {
  fill:#001F3F !important;
  stroke-width: 0px !important;
}


.merBlue > circle,
.merBlue > rect, 
.merBlue > polygon {
   fill: #0074D9 !important;
   stroke-width: 0px !important;
  
}

.merAqua > circle,
.merAqua > rect,
.merAqua > polygon {
  fill:#7FDBFF !important;
  stroke-width: 0px !important;
}

.merTeal > circle,
.merTeal > rect,
.merTeal > polygon {
  fill:#39CCCC !important;
  stroke-width: 0px !important;
}




.merOlive > circle,
.merOlive > rect, 
.merOlive > polygon {
   fill: #3D9970 !important;
   stroke-width: 0px !important;
  
}

.merGreen > circle,
.merGreen > rect, 
.merGreen > polygon {
   fill: #2ECC40 !important;
   stroke-width: 0px !important;
  
}

.merLime > circle,
.merLime > rect, 
.merLime > polygon {
   fill: #01FF70 !important;
   stroke-width: 0px !important;
  
}

.merYellow > circle,
.merYellow > rect, 
.merYellow > polygon {
   fill: #FFDC00 !important;
   stroke-width: 0px !important;
  
}

.merOrange > circle,
.merOrange > rect, 
.merOrange > polygon {
   fill: #FF851B !important;
   stroke-width: 0px !important;
  
}

.merRed > circle,
.merRed > rect, 
.merRed > polygon {
   fill: #FF4136 !important;
   stroke-width: 0px !important;
  
}

.merFuchsia > circle,
.merFuchsia  > rect, 
.merFuchsia > polygon {
   fill: #F012BE !important;
   stroke-width: 0px !important;
  
}

.merPurple > circle,
.merPurple  > rect, 
.merPurple > polygon {
   fill: #B10DC9 !important;
   stroke-width: 0px !important;
  
}

.merMaroon > circle,
.merMaroon  > rect, 
.merMaroon > polygon {
   fill: #85144B !important;
   stroke-width: 0px !important;
  
}

.merSilver > circle,
.merSilver  > rect, 
.merSilver > polygon {
   fill: #DDDDDD !important;
   stroke-width: 0px !important;
  
}

.merGrey > circle,
.merGrey  > rect, 
.merGrey > polygon {
   fill: #AAAAAA !important;
   stroke-width: 0px !important;
  
}

.merBlack > circle,
.merBlack  > rect, 
.merBlack > polygon {
   fill: #111111 !important;
   stroke-width: 0px !important;
  
}

.merWhite > circle,
.merWhite  > rect, 
.merWhite > polygon {
   fill: white !important;

  stroke: black !important;
  
}

.merNone > circle,
.merNone  > rect, 
.merNone > polygon {
   stroke-width: 0px !important;
  fill: none !important;
   
}




.merNavy > .label,
.merBlue > .label,
.merAqua > .label,
.merTeal > .label,
.merGreen > .label,
.merLime > .label,
.merYellow > .label,
.merOrange > .label,
.merRed > .label,
.merFuchsia > .label,
.merPurple > .label,
.merMaroon > .label,
.merSilver > .label,
.merGrey > .label,
.merBlack > .label,
.merOlive > .label {
  color:white !important;
  font-weight: bold;

}