From bba1050e5ea05b375d3420b0fcfe618fdbedd0f9 Mon Sep 17 00:00:00 2001 From: Carlos Rodriguez Date: Sat, 12 Mar 2016 12:36:37 -0500 Subject: [PATCH] Use mix as test file instead --- dist/mermaid.dark.css | 54 ++++----- src/less/dark/gantt.less | 2 +- src/less/dark/sequenceDiagram.less | 6 +- src/less/dark/variables.less | 33 +++--- test/gantt-dark-theme.html | 162 -------------------------- test/mix-dark-theme.html | 176 +++++++++++++++++++++++++++++ 6 files changed, 225 insertions(+), 208 deletions(-) delete mode 100644 test/gantt-dark-theme.html create mode 100644 test/mix-dark-theme.html diff --git a/dist/mermaid.dark.css b/dist/mermaid.dark.css index 116a62e46..c522857df 100644 --- a/dist/mermaid.dark.css +++ b/dist/mermaid.dark.css @@ -8,78 +8,78 @@ .node circle, .node ellipse, .node polygon { - fill: #ECECFF; - stroke: #CCCCFF; + fill: #BDD5EA; + stroke: #81B1DB; stroke-width: 1px; } .edgePath .path { - stroke: #333333; + stroke: lightgrey; } .edgeLabel { background-color: #e8e8e8; } .cluster rect { - fill: #ffffde !important; + fill: #6D6D65 !important; rx: 4 !important; - stroke: #aaaa33 !important; + stroke: rgba(255, 255, 255, 0.25) !important; stroke-width: 1px !important; } .cluster text { fill: #F9FFFE; } .actor { - stroke: #CCCCFF; - fill: #ECECFF; + stroke: #81B1DB; + fill: #BDD5EA; } text.actor { fill: black; stroke: none; } .actor-line { - stroke: grey; + stroke: lightgrey; } .messageLine0 { stroke-width: 1.5; stroke-dasharray: "2 2"; marker-end: "url(#arrowhead)"; - stroke: #333; + stroke: lightgrey; } .messageLine1 { stroke-width: 1.5; stroke-dasharray: "2 2"; - stroke: #333; + stroke: lightgrey; } #arrowhead { - fill: #333; + fill: lightgrey; } #crosshead path { - fill: #333 !important; - stroke: #333 !important; + fill: lightgrey !important; + stroke: lightgrey !important; } .messageText { - fill: #333; + fill: lightgrey; stroke: none; } .labelBox { - stroke: #CCCCFF; - fill: #ECECFF; + stroke: #81B1DB; + fill: #BDD5EA; } .labelText { - fill: black; + fill: #323D47; stroke: none; } .loopText { - fill: black; + fill: lightgrey; stroke: none; } .loopLine { stroke-width: 2; stroke-dasharray: "2 2"; marker-end: "url(#arrowhead)"; - stroke: #CCCCFF; + stroke: #81B1DB; } .note { - stroke: #aaaa33; + stroke: rgba(255, 255, 255, 0.25); fill: #fff5ad; } .noteText { @@ -128,7 +128,7 @@ text.actor { shape-rendering: crispEdges; } .grid .tick text { - fill: #ccc; + fill: lightgrey; opacity: 0.5; } .grid path { @@ -175,11 +175,11 @@ text.actor { } .taskTextOutside0, .taskTextOutside2 { - fill: #ccc; + fill: lightgrey; } .taskTextOutside1, .taskTextOutside3 { - fill: #ccc; + fill: lightgrey; } /* Active task */ .active0, @@ -239,7 +239,7 @@ text.actor { .doneCritText1, .doneCritText2, .doneCritText3 { - fill: #323D47 !important; + fill: lightgrey !important; } .activeCritText0, .activeCritText1, @@ -250,7 +250,7 @@ text.actor { .titleText { text-anchor: middle; font-size: 18px; - fill: #ccc; + fill: lightgrey; } /* @@ -267,8 +267,8 @@ div.mermaidTooltip { padding: 2px; font-family: 'trebuchet ms', verdana, arial; font-size: 12px; - background: #ffffde; - border: 1px solid #aaaa33; + background: #6D6D65; + border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 2px; pointer-events: none; z-index: 100; diff --git a/src/less/dark/gantt.less b/src/less/dark/gantt.less index 8b10f2de0..39735635d 100644 --- a/src/less/dark/gantt.less +++ b/src/less/dark/gantt.less @@ -123,7 +123,7 @@ shape-rendering: crispEdges; } .doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 { - fill:@taskTextDarkColor !important; + fill:@taskTextLightColor !important; } .activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 { fill:@taskTextDarkColor !important; diff --git a/src/less/dark/sequenceDiagram.less b/src/less/dark/sequenceDiagram.less index 1139df345..1e37a086f 100644 --- a/src/less/dark/sequenceDiagram.less +++ b/src/less/dark/sequenceDiagram.less @@ -45,12 +45,12 @@ text.actor { } .labelText { - fill:@labelTextColor; + fill: @darkTextColor; stroke:none; } .loopText { - fill:@labelTextColor; + fill: @labelTextColor; stroke:none; } @@ -72,4 +72,4 @@ text.actor { stroke:none; font-family: 'trebuchet ms', verdana, arial; font-size:14px; -} \ No newline at end of file +} diff --git a/src/less/dark/variables.less b/src/less/dark/variables.less index 5037df012..0206f8949 100644 --- a/src/less/dark/variables.less +++ b/src/less/dark/variables.less @@ -1,8 +1,11 @@ -@mainBkg: #ECECFF; -@secondBkg: #ffffde; -@lineColor: #333333; -@border1:#CCCCFF; -@border2:#aaaa33; +@mainBkg: #BDD5EA; +@secondBkg: #6D6D65; +@mainContrastColor: lightgrey; +@darkTextColor: #323D47; +@lineColor: @mainContrastColor; +@border1: #81B1DB; +@border2: rgba(255, 255, 255, 0.25); + /* Flowchart variables */ @nodeBkg:@mainBkg; @@ -21,14 +24,14 @@ @actorBorder: @border1; @actorBkg: @mainBkg; @actorTextColor: black; -@actorLineColor: grey; +@actorLineColor: @mainContrastColor; -@signalColor: #333; -@signalTextColor: #333; +@signalColor: @mainContrastColor; +@signalTextColor: @mainContrastColor; @labelBoxBkgColor: @actorBkg; @labelBoxBorderColor: @actorBorder; -@labelTextColor: @actorTextColor; +@labelTextColor: @mainContrastColor; @noteBorderColor: @border2; @noteBkgColor: #fff5ad; @@ -39,22 +42,22 @@ @sectionBkgColor2: #EAE8B9; @taskBorderColor: rgba(255, 255, 255, 0.5); -@taskBkgColor: #BDD5EA; -@taskTextColor: @taskTextDarkColor; +@taskBkgColor: @mainBkg; +@taskTextColor: @darkTextColor; @taskTextOutsideColor: @taskTextLightColor; @activeTaskBorderColor: rgba(255, 255, 255, 0.5); @activeTaskBkgColor: #81B1DB; -@gridColor: lightgrey; +@gridColor: @mainContrastColor; -@doneTaskBkgColor: lightgrey; +@doneTaskBkgColor: @mainContrastColor; @doneTaskBorderColor: grey; @critBorderColor: #E83737; @critBkgColor: #E83737; -@taskTextLightColor: #ccc; -@taskTextDarkColor: #323D47; +@taskTextLightColor: @mainContrastColor; +@taskTextDarkColor: @darkTextColor; @todayLineColor: #DB5757; diff --git a/test/gantt-dark-theme.html b/test/gantt-dark-theme.html deleted file mode 100644 index 829923d36..000000000 --- a/test/gantt-dark-theme.html +++ /dev/null @@ -1,162 +0,0 @@ - - - - - - - - - - - - -

scale tests

-

less then a day

-
- gantt - dateFormat YYYY-MM-DD H:mm - title Adding GANTT diagram functionality to mermaid - - section Design - Design jison grammar :done, crit, des1, 2014-01-06 1:30,4h - Create example text :done, after des1,6h -
-

less then a week

-
- gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid2 - section Design - Design jison grammar :done, crit, des1, 2014-01-06,2d - Create example text :done, after des1,3d -
-

less then a month

-
- gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - - section Design - Design jison grammar :done, crit, des1, 2015-01-05,2d - Create example text :done, after des1, 2w -
-

less then a year

-
- gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - - section Design - Design1:done, crit, des1, 2014-01-22,4w - Design2:after des1, 3w - Design3:3w - Design4:3w - Design5:18d - Design6:2w - Implementation1:3w - Implementation2:3w -
-

Other tests

-
- gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - - section Design - Design jison grammar :done, crit, des1, 2014-01-06, 2014-01-09 - Create example text :done, des2, 2014-01-06, 3d - Bounce gantt example with users :active, crit, des3, after des2, 5d - - section Implementation - update build script :2014-01-06,24h - Implement parser and jison :after des1, 2d - Create tests for parser :active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid core bore tore gore bore lore :1d - - section Documentation - Describe gantt syntax :active,a1, 2014-01-10, 3d - Add gantt diagram to demo page :after a1 , 20h - Add another diagram to demo page :after a1 , 48h -
- Text before. Bla b la bla. Look at the diagram below: -
- gantt - title A Gantt Diagram - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 3d - Another task :after a1 , 20d - section Another - Task in sec :2014-01-12 , 12d - section Another2 - anther task : 24d - section Another3 - anther task : 24d - section Another4 - anther task : 24d - section Another5 - anther task : 24d - section Another6 - anther task : 24d - section Another7 - anther task : 24d - section Another8 - anther task : 24d - section Another9 - anther task : 24d -
- As you can see, bla bla bla. -
- gantt - title A Gantt Diagram - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 3h -
- - diff --git a/test/mix-dark-theme.html b/test/mix-dark-theme.html new file mode 100644 index 000000000..d4e6c4d45 --- /dev/null +++ b/test/mix-dark-theme.html @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + +
graph LR + subgraph old sys 1 + a1(new client)-->b1(sys1 server) + oc1(Old client)-->b2 + end + + subgraph old sys 2 + a2(new client)-->b2(sys2 server) + oc2(Old client)-->b2 + end + + subgraph old sys 3 + a3(new client)-->b3(sys3 server) + end + + subgraph New sys + a1 + a2 + a3 + end +
+
+
+ graph LR; + A[Now with default style on links]--v-->B{a = '1,2'} + B-->|v|C[v] + B-- ... default style on links -->Z>My default thing this] + C-->D{condition}; + + linkStyle 0 stroke-width:2px,fill:none,stroke:blue; + linkStyle default stroke-width:2px,fill:none,stroke:red; + +
+
+
+ graph LR + A[Square Rect] -- Link text --> B((Circle)) + A[Square Rect]--v-->D((Circle)) + A --> C(Round Rect) + B == testing ==> D{Rhombus} + C-.->D +
+
+
+ sequenceDiagram + participant Alice + participant Bob + participant John the Long + Alice->>Bob: Hello Bob, how are you? + loop Outer loop + Note left of Alice: Bob thinks about
things
to think about + Bob-xBob: I am good thanks! + loop Inner loop + Bob->>John the Long: How about you John? + Note right of John the Long: Bob thinks a long
long time, so long
that the text does
not fit. + end + end + + Bob-->>Alice: Checking with John... + Alice->>John the Long: Yes... John, how are you? + John the Long-->>Alice: Super! +
+
+
+ gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d + + section Documentation + Describe gantt syntax :active, a1, after des1, 3d + Add gantt diagram to demo page :after a1 , 20h + Add another diagram to demo page :doc1, after a1 , 48h + + section Last section + Describe gantt syntax :after doc1, 3d + Add gantt diagram to demo page : 20h + Add another diagram to demo page : 48h +
+
+ info +
+ +