Added default stylesheet and less structure to create new themes

src/less/default/flow.less

@@ -0,0 +1,22 @@
+.mermaid .label { color:#333}
+
+.node rect, .node circle, .node polygon  {
+  fill: @mainBkg;
+  stroke: @nodeBorder;
+  stroke-width: 1px;
+}
+
+.edgePath .path {
+  stroke: @lineColor !important;
+  
+}
+.cluster rect{
+  fill: @secondBkg;
+  rx:40;
+  stroke: @clusterBorder;
+  stroke-width: 1px;
+}
+
+.cluster text {
+  fill:@titleColor;
+}

src/less/default/gantt.less

@@ -0,0 +1,138 @@
+/** Section styling */
+.section {
+  stroke:none;
+  opacity:0.2;
+}
+.section0{
+  fill:@sectionBkgColor;
+}
+.section2 {
+  fill:@sectionBkgColor2;
+}
+.section1,.section3 {
+  fill:@altSectionBkgColor;
+  opacity:0.2;
+}
+
+.sectionTitle0 { fill:@titleColor;}
+.sectionTitle1 { fill:@titleColor;}
+.sectionTitle2 { fill:@titleColor;}
+.sectionTitle3 { fill:@titleColor;}
+
+
+.sectionTitle {
+  text-anchor:start;
+  font-size:11px;
+  text-height:14px;
+}
+
+/* Grid and axis */
+.grid .tick {
+  stroke: @gridColor;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid path {
+  stroke-width: 0;
+}
+
+/* Today line */
+.today {
+  fill:none;
+  stroke:@todayLineColor;
+  stroke-width:2px;
+}
+
+/* Task styling */
+/* Default task */
+.task {
+  stroke-width:2;
+}
+
+.taskText {
+  text-anchor:middle;
+  font-size:11px;
+}
+.taskTextOutsideRight {
+  fill:@taskTextDarkColor;
+  text-anchor:start;
+  font-size:11px;
+}
+.taskTextOutsideLeft {
+  fill:@taskTextDarkColor;
+  text-anchor:end;
+  font-size:11px;
+}
+
+/* Specific task settings for the sections*/
+
+.taskText0, .taskText1, .taskText2, .taskText3 {
+  fill:@taskTextColor;
+}
+
+.task0, .task1, .task2, .task3 {
+  fill: @taskBkgColor;
+  stroke: @taskBorderColor;
+}
+
+.taskTextOutside0,.taskTextOutside2, {
+  fill:@taskTextOutsideColor;
+}
+.taskTextOutside1, .taskTextOutside3 {
+  fill:@taskTextOutsideColor;
+}
+
+/* Active task */
+.active0, .active1, .active2, .active3 {
+  fill: @activeTaskBkgColor;
+  stroke: @activeTaskBorderColor;
+}
+
+.activeText0, .activeText1, .activeText2, .activeText3 {
+  fill:@taskTextDarkColor !important;
+}
+/* Completed task */
+.done0, .done1, .done2, .done3 {
+  stroke:@doneTaskBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width:2;
+}
+
+.doneText0, .doneText1, .doneText2, .doneText3 {
+  fill:@taskTextDarkColor !important;
+}
+
+/* Tasks on the critical line */
+.crit0, .crit1, .crit2, .crit3 {
+  stroke:@critBorderColor;
+  fill: @critBkgColor;
+  stroke-width:2;
+}
+.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+  stroke:@critBorderColor;
+  fill: @activeTaskBkgColor;
+  stroke-width:2;
+}
+.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+  stroke:@critBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width:2;
+  cursor: pointer;
+  shape-rendering: crispEdges;
+}
+.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+  fill:@taskTextDarkColor !important;
+}
+.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+  fill:@taskTextDarkColor !important;
+}
+
+.titleText {
+  text-anchor:middle;
+  font-size:18px;
+  fill:@taskTextDarkColor;
+}
+/*
+
+
+*/

src/less/default/mermaid.less

@@ -0,0 +1,10 @@
+@import "variables";
+@import "flow";
+@import "sequenceDiagram";
+@import "gantt";
+@import "variables";
+
+text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size:14px;
+}

src/less/default/sequenceDiagram.less

@@ -0,0 +1,75 @@
+
+
+.actor {
+  stroke: @actorBorder;
+  fill: @actorBkg;
+}
+text.actor {
+  fill:@actorTextColor;
+  stroke:none;
+}
+
+.actor-line {
+  stroke:@actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width:1.5;
+  stroke-dasharray: "2 2";
+  marker-end:"url(#arrowhead)";
+  stroke:@signalColor;
+}
+
+.messageLine1 {
+  stroke-width:1.5;
+  stroke-dasharray: "2 2";
+  stroke:@signalColor;
+}
+
+#arrowhead {
+  fill:@signalColor;
+}
+#crosshead path {
+  fill:@signalColor !important;
+  stroke: @signalColor !important;
+
+}
+.messageText {
+  fill:@signalTextColor;
+  stroke:none;
+}
+
+.labelBox {
+  stroke: @labelBoxBorderColor;
+  fill: @labelBoxBkgColor;
+}
+
+.labelText {
+  fill:@labelTextColor;
+  stroke:none;
+}
+
+.loopText {
+  fill:@labelTextColor;
+  stroke:none;
+}
+
+.loopLine {
+  stroke-width:2;
+  stroke-dasharray: "2 2";
+  marker-end:"url(#arrowhead)";
+  stroke: @labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: @noteBorderColor;
+  fill: @noteBkgColor;
+}
+
+.noteText {
+  fill:black;
+  stroke:none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size:14px;
+}

src/less/default/variables.less

@@ -0,0 +1,58 @@
+@mainBkg: #ECECFF;
+@secondBkg: #ffffde;
+@lineColor: #333333;
+@border1:#CCCCFF;
+@border2:#aaaa33;
+
+/* Flowchart variables */
+@nodeBkg:@mainBkg;
+@nodeBorder:@border1;
+
+@clusterBkg:@secondBkg;
+@clusterBorder:@border2;
+
+@defaultLinkColor:@lineColor;
+
+@titleColor: #333;
+
+/* Sequence Diagram variables */
+@actorBorder: @border1;
+@actorBkg:    @mainBkg;
+@actorTextColor: black;
+@actorLineColor: grey;
+
+@signalColor: #333;
+@signalTextColor: #333;
+
+@labelBoxBkgColor: @actorBkg;
+@labelBoxBorderColor: @actorBorder;
+@labelTextColor: @actorTextColor;
+
+@noteBorderColor: @border2;
+@noteBkgColor:    #fff5ad;
+
+/* Gantt chart variables */
+@sectionBkgColor: rgba(102, 102, 255, 0.49);
+@altSectionBkgColor: white;
+@sectionBkgColor2: #fff400;
+
+@taskBorderColor: #534fbc;
+@taskBkgColor: #8a90dd;
+@taskTextColor: @taskTextLightColor;
+@taskTextOutsideColor: @taskTextDarkColor;
+
+@activeTaskBorderColor: #534fbc;
+@activeTaskBkgColor: #bfc7ff;
+
+@gridColor: lightgrey;
+
+@doneTaskBkgColor: lightgrey;
+@doneTaskBorderColor: grey;
+
+@critBorderColor: #ff8888;
+@critBkgColor: red;
+
+@taskTextLightColor: white;
+@taskTextDarkColor: black;
+
+@todayLineColor: red;

src/less/forest/flow.less

@@ -0,0 +1,22 @@
+.mermaid .label { color:#333}
+
+.node rect, .node circle, .node polygon  {
+  fill: @mainBkg;
+  stroke: @nodeBorder;
+  stroke-width: 1px;
+}
+
+.edgePath .path {
+  stroke: @lineColor !important;
+  
+}
+.cluster rect{
+  fill: @secondBkg;
+  rx:40;
+  stroke: @clusterBorder;
+  stroke-width: 1px;
+}
+
+.cluster text {
+  fill:@titleColor;
+}

src/less/forest/gantt.less

@@ -0,0 +1,138 @@
+/** Section styling */
+.section {
+  stroke:none;
+  opacity:0.2;
+}
+.section0{
+  fill:@sectionBkgColor;
+}
+.section2 {
+  fill:@sectionBkgColor2;
+}
+.section1,.section3 {
+  fill:@altSectionBkgColor;
+  opacity:0.2;
+}
+
+.sectionTitle0 { fill:@titleColor;}
+.sectionTitle1 { fill:@titleColor;}
+.sectionTitle2 { fill:@titleColor;}
+.sectionTitle3 { fill:@titleColor;}
+
+
+.sectionTitle {
+  text-anchor:start;
+  font-size:11px;
+  text-height:14px;
+}
+
+/* Grid and axis */
+.grid .tick {
+  stroke: @gridColor;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid path {
+  stroke-width: 0;
+}
+
+/* Today line */
+.today {
+  fill:none;
+  stroke:@todayLineColor;
+  stroke-width:2px;
+}
+
+/* Task styling */
+/* Default task */
+.task {
+  stroke-width:2;
+}
+
+.taskText {
+  text-anchor:middle;
+  font-size:11px;
+}
+.taskTextOutsideRight {
+  fill:@taskTextDarkColor;
+  text-anchor:start;
+  font-size:11px;
+}
+.taskTextOutsideLeft {
+  fill:@taskTextDarkColor;
+  text-anchor:end;
+  font-size:11px;
+}
+
+/* Specific task settings for the sections*/
+
+.taskText0, .taskText1, .taskText2, .taskText3 {
+  fill:@taskTextColor;
+}
+
+.task0, .task1, .task2, .task3 {
+  fill: @taskBkgColor;
+  stroke: @taskBorderColor;
+}
+
+.taskTextOutside0,.taskTextOutside2, {
+  fill:@taskTextOutsideColor;
+}
+.taskTextOutside1, .taskTextOutside3 {
+  fill:@taskTextOutsideColor;
+}
+
+/* Active task */
+.active0, .active1, .active2, .active3 {
+  fill: @activeTaskBkgColor;
+  stroke: @activeTaskBorderColor;
+}
+
+.activeText0, .activeText1, .activeText2, .activeText3 {
+  fill:@taskTextDarkColor !important;
+}
+/* Completed task */
+.done0, .done1, .done2, .done3 {
+  stroke:@doneTaskBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width:2;
+}
+
+.doneText0, .doneText1, .doneText2, .doneText3 {
+  fill:@taskTextDarkColor !important;
+}
+
+/* Tasks on the critical line */
+.crit0, .crit1, .crit2, .crit3 {
+  stroke:@critBorderColor;
+  fill: @critBkgColor;
+  stroke-width:2;
+}
+.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+  stroke:@critBorderColor;
+  fill: @activeTaskBkgColor;
+  stroke-width:2;
+}
+.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+  stroke:@critBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width:2;
+  cursor: pointer;
+  shape-rendering: crispEdges;
+}
+.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+  fill:@taskTextDarkColor !important;
+}
+.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+  fill:@taskTextDarkColor !important;
+}
+
+.titleText {
+  text-anchor:middle;
+  font-size:18px;
+  fill:@taskTextDarkColor;
+}
+/*
+
+
+*/

src/less/forest/mermaid.less

@@ -0,0 +1,10 @@
+@import "variables";
+@import "flow";
+@import "sequenceDiagram";
+@import "gantt";
+@import "variables";
+
+text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size:14px;
+}

src/less/forest/sequenceDiagram.less

@@ -0,0 +1,75 @@
+
+
+.actor {
+  stroke: @actorBorder;
+  fill: @actorBkg;
+}
+text.actor {
+  fill:@actorTextColor;
+  stroke:none;
+}
+
+.actor-line {
+  stroke:@actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width:1.5;
+  stroke-dasharray: "2 2";
+  marker-end:"url(#arrowhead)";
+  stroke:@signalColor;
+}
+
+.messageLine1 {
+  stroke-width:1.5;
+  stroke-dasharray: "2 2";
+  stroke:@signalColor;
+}
+
+#arrowhead {
+  fill:@signalColor;
+}
+#crosshead path {
+  fill:@signalColor !important;
+  stroke: @signalColor !important;
+
+}
+.messageText {
+  fill:@signalTextColor;
+  stroke:none;
+}
+
+.labelBox {
+  stroke: @labelBoxBorderColor;
+  fill: @labelBoxBkgColor;
+}
+
+.labelText {
+  fill:@labelTextColor;
+  stroke:none;
+}
+
+.loopText {
+  fill:@labelTextColor;
+  stroke:none;
+}
+
+.loopLine {
+  stroke-width:2;
+  stroke-dasharray: "2 2";
+  marker-end:"url(#arrowhead)";
+  stroke: @labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: @noteBorderColor;
+  fill: @noteBkgColor;
+}
+
+.noteText {
+  fill:black;
+  stroke:none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size:14px;
+}

src/less/forest/variables.less

@@ -0,0 +1,58 @@
+@mainBkg: #cde498;
+@secondBkg: #cdffb2;
+@lineColor: #1a3318;
+@border1: #13540c;
+@border2: #6eaa49;
+
+/* Flowchart variables */
+@nodeBkg:@mainBkg;
+@nodeBorder:@border1;
+
+@clusterBkg:@secondBkg;
+@clusterBorder:@border2;
+
+@defaultLinkColor:@lineColor;
+
+@titleColor: #333;
+
+/* Sequence Diagram variables */
+@actorBorder: @border1;
+@actorBkg:    @mainBkg;
+@actorTextColor: black;
+@actorLineColor: grey;
+
+@signalColor: #333;
+@signalTextColor: #333;
+
+@labelBoxBkgColor: @actorBkg;
+@labelBoxBorderColor: #326932;
+@labelTextColor: @actorTextColor;
+
+@noteBorderColor: @border2;
+@noteBkgColor:    #fff5ad;
+
+/* Gantt chart variables */
+@sectionBkgColor: #6eaa49;;
+@altSectionBkgColor: white;
+@sectionBkgColor2: #6eaa49;
+
+@taskBorderColor: @border1;
+@taskBkgColor: #487e3a;
+@taskTextColor: @taskTextLightColor;
+@taskTextOutsideColor: @taskTextDarkColor;
+
+@activeTaskBorderColor: @taskBorderColor;
+@activeTaskBkgColor: @mainBkg;
+
+@gridColor: lightgrey;
+
+@doneTaskBkgColor: lightgrey;
+@doneTaskBorderColor: grey;
+
+@critBorderColor: #ff8888;
+@critBkgColor: red;
+
+@taskTextLightColor: white;
+@taskTextDarkColor: black;
+
+@todayLineColor: red;