1 files changed, 82 insertions, 26 deletions

diff --git a/sandbox/mallard/xslt/mal2html-block.xsl b/sandbox/mallard/xslt/mal2html-block.xsl
index ac145bd..e5b8be9 100644
--- a/sandbox/mallard/xslt/mal2html-block.xsl
+++ b/sandbox/mallard/xslt/mal2html-block.xsl
@@ -36,40 +36,93 @@ REMARK: Describe this template
 -->
 <xsl:template name="mal2html.block.css">
 <xsl:text>
-h1 { color: #555753; font-size: 1.72em; margin: 0; }
-h2 { color: #555753; font-size: 1.44em; margin: 0; border-bottom: solid 1px #aaaaaa; }
-h3 { color: #555753; font-size: 1.2em; margin: 0; }
-h4 { color: #555753; font-size: 1em; margin: 0 0; }
-h5 { color: #555753; font-size: 1em; margin: 0 0; }
-h6 { color: #555753; font-size: 1em; margin: 0 0; }
-h7 { color: #555753; font-size: 1em; margin: 0 0; }
-div.title { color: #555753; font-weight: bold; }
+h1.title, h2.title, h3.title, h4.title, h5.title, h6.title, h7.title, div.title {
+  color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'text-light'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  margin: 0;
+}
+h1.title, h2.title {
+  border-bottom: solid 1px </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'gray-medium'"/>
+  </xsl:call-template>
+  <xsl:text>;
+}
+h1.title { font-size: 1.72em; }
+h2.title { font-size: 1.44em; }
+h3.title { font-size: 1.2em; }
+h4.title { font-size: 1em; }
+h5.title { font-size: 1em; }
+h6.title { font-size: 1em; }
+h7.title { font-size: 1em; }
+div.title { font-weight: bold; }
 div.section { margin-top: 2em; clear: both; }
 div.section div.section { margin-top: 1.72em; margin-left: 1.72em; }
 div.section div.section div.section { margin-top: 1.44em; }
 pre.code {
+  <!-- FIXME: theme -->
   background: url(mallard-icon-code.png) no-repeat top right;
-  border: solid 2px #eeeeec;
+  border: solid 2px </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'gray-light'"/>
+  </xsl:call-template>
+  <xsl:text>;
   padding: 0.5em 1em 0.5em 1em;
 }
 div.comment {
   margin-left: 1.72em;
   padding: 0.5em 1em 0.5em 1em;
-  border: solid 2px #f08d8d;
+  border: solid 2px </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'red-dark'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  background-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'red-light'"/>
+  </xsl:call-template>
+  <xsl:text>;
 }
-div.comment div.cite { margin-top: 0; font-style: italic; }
+div.comment div.cite { margin: 0; font-style: italic; }
 
 div.figure {
-  color: #2e3436;
-  background-color: #eeeeec;
-  border: solid 1px #888a85;
+  color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'text-light'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  border: solid 1px </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'gray-dark'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  background-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'gray-medium'"/>
+  </xsl:call-template>
+  <xsl:text>;
   margin-left: 1.72em;
   padding: 4px;
 }
 div.figure-contents {
-  color: #000000;
-  background-color: #ffffff;
-  border: solid 1px #888a85;
+  color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'text'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  border: solid 1px </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'gray-dark'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  background-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'background'"/>
+  </xsl:call-template>
+  <xsl:text>;
   padding: 0.5em 1em 0.5em 1em;
   margin: 0;
   text-align: center;
@@ -78,15 +131,18 @@ div.figure div.title { margin: 0 0 4px 0; }
 div.figure div.caption { margin: 4px 0 0 0; }
 
 div.synopsis {
-  color: #2e3436;
-<!--
-  background-color: #fffcd9;
-  border-top: solid 2px #a8a68f;
-  border-bottom: solid 2px #a8a68f;
--->
-  background-color: #eeeeec;
-  border-top: solid 2px #729fcf;
-  border-bottom: solid 2px #729fcf;
+  border-top: solid 2px;
+  border-bottom: solid 2px;
+  border-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'blue-dark'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  background-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'gray-light'"/>
+  </xsl:call-template>
+  <xsl:text>;
   padding: 0.5em 1em 0.5em 1em;
 }
 div.synopsis pre.code {