GNOME.org
 

[yelp-xsl/wip/html5] Switch to SVG icons for admonition elements

commit 1993f9a2dec7fac104fc09bc84b1ce5dbb0b76e9
Author: Shaun McCance <shaunm gnome org>
Date:   Fri Sep 16 12:29:54 2016 -0400

    Switch to SVG icons for admonition elements

 Makefile.am                                        |    2 +-
 configure.ac                                       |    9 +-
 icons/Makefile.am                                  |    1 -
 icons/hicolor/24x24/Makefile.am                    |    1 -
 icons/hicolor/24x24/status/Makefile.am             |    9 -
 icons/hicolor/24x24/status/yelp-note-bug.png       |  Bin 1214 -> 0 bytes
 icons/hicolor/24x24/status/yelp-note-important.png |  Bin 1053 -> 0 bytes
 icons/hicolor/24x24/status/yelp-note-tip.png       |  Bin 1193 -> 0 bytes
 icons/hicolor/24x24/status/yelp-note-warning.png   |  Bin 1245 -> 0 bytes
 icons/hicolor/24x24/status/yelp-note.png           |  Bin 838 -> 0 bytes
 icons/hicolor/48x48/Makefile.am                    |    1 -
 icons/hicolor/48x48/status/Makefile.am             |    9 -
 icons/hicolor/48x48/status/yelp-note-bug.png       |  Bin 2952 -> 0 bytes
 icons/hicolor/48x48/status/yelp-note-important.png |  Bin 2454 -> 0 bytes
 icons/hicolor/48x48/status/yelp-note-tip.png       |  Bin 2491 -> 0 bytes
 icons/hicolor/48x48/status/yelp-note-warning.png   |  Bin 2959 -> 0 bytes
 icons/hicolor/48x48/status/yelp-note.png           |  Bin 1733 -> 0 bytes
 icons/hicolor/Makefile.am                          |    1 -
 icons/hicolor/scalable/Makefile.am                 |    1 -
 icons/hicolor/scalable/status/Makefile.am          |    9 -
 icons/hicolor/scalable/status/yelp-note-bug.svg    |  285 -----
 .../scalable/status/yelp-note-important.svg        | 1223 -------------------
 icons/hicolor/scalable/status/yelp-note-tip.svg    |  255 ----
 .../hicolor/scalable/status/yelp-note-warning.svg  |  290 -----
 icons/hicolor/scalable/status/yelp-note.svg        | 1233 --------------------
 xslt/common/Makefile.am                            |    2 +-
 xslt/common/domains/yelp-xsl.xml.in                |   15 +
 xslt/common/html.xsl                               |   49 +-
 xslt/common/icons.xsl                              |  278 ++++-
 xslt/common/icons/Makefile.am                      |   12 +
 xslt/common/icons/yelp-note-advanced.svg           |   15 +
 xslt/common/icons/yelp-note-bug.svg                |   13 +
 xslt/common/icons/yelp-note-important.svg          |    4 +
 xslt/common/icons/yelp-note-note.svg               |    7 +
 xslt/common/icons/yelp-note-package.svg            |    7 +
 xslt/common/icons/yelp-note-tip.svg                |    7 +
 xslt/common/icons/yelp-note-warning.svg            |    4 +
 xslt/dita/html/dita2html-block.xsl                 |   33 +-
 xslt/docbook/html/db2html-block.xsl                |   80 ++-
 xslt/mallard/html/mal2html-block.xsl               |   27 +-
 40 files changed, 458 insertions(+), 3424 deletions(-)
---
diff --git a/Makefile.am b/Makefile.am
index ccef253..d896def 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -1,4 +1,4 @@
-SUBDIRS = icons js xslt doc
+SUBDIRS = js xslt doc
 DIST_SUBDIRS = $(SUBDIRS) po
 
 ACLOCAL_AMFLAGS = -I m4 ${ACLOCAL_FLAGS}
diff --git a/configure.ac b/configure.ac
index d06cee7..f28ff2d 100644
--- a/configure.ac
+++ b/configure.ac
@@ -56,14 +56,6 @@ fi
 AC_CONFIG_FILES([
 Makefile
 yelp-xsl.pc
-icons/Makefile
-icons/hicolor/Makefile
-icons/hicolor/24x24/Makefile
-icons/hicolor/24x24/status/Makefile
-icons/hicolor/48x48/Makefile
-icons/hicolor/48x48/status/Makefile
-icons/hicolor/scalable/Makefile
-icons/hicolor/scalable/status/Makefile
 js/Makefile
 doc/Makefile
 doc/yelp-xsl/Makefile
@@ -71,6 +63,7 @@ po/Makefile.in
 xslt/Makefile
 xslt/common/Makefile
 xslt/common/domains/Makefile
+xslt/common/icons/Makefile
 xslt/docbook/Makefile
 xslt/docbook/common/Makefile
 xslt/docbook/html/Makefile
diff --git a/xslt/common/Makefile.am b/xslt/common/Makefile.am
index 064e20c..33ab76c 100644
--- a/xslt/common/Makefile.am
+++ b/xslt/common/Makefile.am
@@ -1,4 +1,4 @@
-SUBDIRS = domains
+SUBDIRS = domains icons
 
 xsldir=$(datadir)/yelp-xsl/xslt/common
 
diff --git a/xslt/common/domains/yelp-xsl.xml.in b/xslt/common/domains/yelp-xsl.xml.in
index a847f64..e731556 100644
--- a/xslt/common/domains/yelp-xsl.xml.in
+++ b/xslt/common/domains/yelp-xsl.xml.in
@@ -132,6 +132,11 @@ reviewed, and it awaiting a final approval.
 <msgstr>Candidate</msgstr>
 </msg>
 
+<msg id="Caution">
+<its:locNote>Accessible title for a caution note.</its:locNote>
+<msgstr>Caution</msgstr>
+</msg>
+
 <msg id="Close">
 <its:locNote>Accessible title for an close button.</its:locNote>
 <msgstr>Close</msgstr>
@@ -147,6 +152,11 @@ reviewed, and it awaiting a final approval.
 <msgstr>Creative Commons</msgstr>
 </msg>
 
+<msg id="Danger">
+<its:locNote>Accessible title for a danger note.</its:locNote>
+<msgstr>Danger</msgstr>
+</msg>
+
 <msg id="Dedication">
 <its:locNote>Default title for a dedication section.</its:locNote>
 <msgstr>Dedication</msgstr>
@@ -244,6 +254,11 @@ but needs to be updated to reflect software updates.
 <msgstr>Outdated</msgstr>
 </msg>
 
+<msg id="Package">
+<its:locNote>Accessible title for a package note.</its:locNote>
+<msgstr>Package</msgstr>
+</msg>
+
 <msg id="Pause">
 <its:locNote>Tooltip on play/pause buttons for audio and video objects.</its:locNote>
 <msgstr>Pause</msgstr>
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 6015cd1..0a27181 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -1347,34 +1347,33 @@ div.note {
     <xsl:value-of select="$color.bg.dark"/><xsl:text>;
   background-color: </xsl:text>
     <xsl:value-of select="$color.bg.gray"/><xsl:text>;
+  display: flex;
+  flex-flow: row;
 }
-div.note > div.inner > div.title {
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: </xsl:text>
-    <xsl:value-of select="$icons.size.note + 6"/><xsl:text>px;
+div.note > * { margin: 0 6px; padding: 0; min-height: 24px; }
+div.note-warning > svg .yelp-svg-fill {
+  fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text>;
 }
-div.note > div.inner > div.region > div.contents {
-  margin: 0; padding: 0;
-  margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: </xsl:text>
-    <xsl:value-of select="$icons.size.note + 6"/><xsl:text>px;
+div.note-danger {
+  border-color: </xsl:text><xsl:value-of select="$color.red"/><xsl:text>;
 }
-div.note > div.inner {
-  margin: 0; padding: 0;
-  background-image: url("</xsl:text>
-    <xsl:value-of select="$icons.note"/><xsl:text>");
-  background-position: </xsl:text><xsl:value-of select="$left"/><xsl:text> top;
-  background-repeat: no-repeat;
-  min-height: </xsl:text><xsl:value-of select="$icons.size.note"/><xsl:text>px;
-}
-div.note-advanced > div.inner { <!-- background-image: url("</xsl:text>
-  <xsl:value-of select="$icons.note.advanced"/><xsl:text>"); --> }
-div.note-bug > div.inner { background-image: url("</xsl:text>
-  <xsl:value-of select="$icons.note.bug"/><xsl:text>"); }
-div.note-important > div.inner { background-image: url("</xsl:text>
-  <xsl:value-of select="$icons.note.important"/><xsl:text>"); }
-div.note-tip > div.inner { background-image: url("</xsl:text>
-  <xsl:value-of select="$icons.note.tip"/><xsl:text>"); }
-div.note-warning > div.inner { background-image: url("</xsl:text>
-  <xsl:value-of select="$icons.note.warning"/><xsl:text>"); }
+div.note-important > svg .yelp-svg-fill {
+  fill: </xsl:text><xsl:value-of select="$color.blue"/><xsl:text>;
+}
+div.note-danger > svg .yelp-svg-fill {
+  fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text>;
+  animation-name: yelp-note-danger;
+  animation-duration: 2s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+}
+@keyframes yelp-note-danger {
+  from { fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text> }
+  50%  { fill: </xsl:text><xsl:value-of select="$color.gray"/><xsl:text> }
+  to   { fill: </xsl:text><xsl:value-of select="$color.red"/><xsl:text> }
+}
+
+
 div.note-sidebar {
   float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
   max-width: 40%;
diff --git a/xslt/common/icons.xsl b/xslt/common/icons.xsl
index d788176..e625eac 100644
--- a/xslt/common/icons.xsl
+++ b/xslt/common/icons.xsl
@@ -21,92 +21,256 @@ along with this program; see the file COPYING.LGPL.  If not, see <http://www.gnu
 <!--!!==========================================================================
 Icons
 Specify common named icons to style output.
-:Revision:version="1.0" date="2010-05-25" status="final"
+:Revision:version="3.next" date="2015-09-16" status="review"
 
 This stylesheet provides a common interface to specify icons for transformations
 to presentation-oreinted formats. This allows similar output for different
 types of input documents.
+
+Many of the icons are output as SVG elements that can be embedded directly
+into an HTML document. These icons use class names like #{yelp-svg-fill} and
+#{yelp-svg-stroke}, allowing you to style them with colors from the !{colors}
+module.
+
+Some SVG icons are read from separate source SVG files. When this is done, the
+%{icons.svg.mode} mode is applied to reduce the SVG to the minimal form needed
+for proper presentation.
 -->
 
 
-<!--@@==========================================================================
-icons.base_url
-The default URL prefix for all icons.
-:Revision:version="1.0" date="2010-01-26" status="final"
+<!--%%==========================================================================
+icons.svg.mode
+Reduce SVG icons to elements needed for presentation.
+:Revision:version="3.next" date="2016-09-16" status="review"
 
-This parameter provides a default URL prefix. All icon locations in this
-stylesheet reference files directly under this URL prefix by default. If
-you override the individual icon parameters in this stylesheet, this parameter
-has no effect. This parameter should end with a trailing slash.
+This mode matches SVG elements and outputs only the SVG needed for presentation.
+It strips out metadata and other elements and attributes used primarily by
+authoring tools. It also uses the @{html.svg.namespace} parameter to output SVG
+with or without namespace information, compatible with the dual HTML/XHTML
+output of these stylesheets.
 -->
-<xsl:param name="icons.base_url" select="''"/>
+<xsl:template mode="icons.svg.mode" match="svg:title"/>
+<xsl:template mode="icons.svg.mode" match="svg:metadata"/>
+<xsl:template mode="icons.svg.mode" match="svg:*">
+  <xsl:element name="{local-name(.)}" namespace="{$html.svg.namespace}">
+    <xsl:for-each select="@*">
+      <xsl:choose>
+        <xsl:when test="local-name(.) = 'id'"/>
+        <xsl:when test="namespace-uri(.) = 'http://www.inkscape.org/namespaces/inkscape'"/>
+        <xsl:when test="namespace-uri(.) = 'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'"/>
+        <xsl:otherwise>
+          <xsl:copy-of select="."/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:for-each>
+    <xsl:apply-templates mode="icons.svg.mode" select="node()"/>
+  </xsl:element>
+</xsl:template>
+<xsl:template mode="icons.svg.mode" match="text()">
+  <xsl:copy-of select="."/>
+</xsl:template>
+<xsl:template mode="icons.svg.mode" match="*"/>
 
 
-<!--@@==========================================================================
-icons.size.note
-The size of the note icons.
-:Revision:version="1.0" date="2010-03-05" status="final"
+<!--**==========================================================================
+icons.svg.note
+Output an #{svg} element for a note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+$style: The style of the note.
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+and other types of admonitions. It takes a ${style} parameter specifying a
+note style. The default style is #{"note"}. This template uses the ${style}
+parameter to determine which specific template to call to output the SVG
+content.
 
-This parameter specifies the size of the note icons. Use an integer giving
-the width of the image files in pixels. Icons are assumed to be square, and
-all note icons are assumed to have the same size.
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
 -->
-<xsl:param name="icons.size.note" select="24"/>
+<xsl:template name="icons.svg.note">
+  <xsl:param name="style"/>
+  <xsl:choose>
+    <xsl:when test="$style = 'advanced'">
+      <xsl:call-template name="icons.svg.note.advanced"/>
+    </xsl:when>
+    <xsl:when test="$style = 'bug'">
+      <xsl:call-template name="icons.svg.note.bug"/>
+    </xsl:when>
+    <xsl:when test="$style = 'caution'">
+      <xsl:call-template name="icons.svg.note.caution"/>
+    </xsl:when>
+    <xsl:when test="$style = 'danger'">
+      <xsl:call-template name="icons.svg.note.danger"/>
+    </xsl:when>
+    <xsl:when test="$style = 'important'">
+      <xsl:call-template name="icons.svg.note.important"/>
+    </xsl:when>
+    <xsl:when test="$style = 'package'">
+      <xsl:call-template name="icons.svg.note.package"/>
+    </xsl:when>
+    <xsl:when test="$style = 'tip'">
+      <xsl:call-template name="icons.svg.note.tip"/>
+    </xsl:when>
+    <xsl:when test="$style = 'warning'">
+      <xsl:call-template name="icons.svg.note.warning"/>
+    </xsl:when>
+    <xsl:otherwise test="$style = 'note'">
+      <xsl:call-template name="icons.svg.note.note"/>
+    </xsl:otherwise>
+  </xsl:choose>
+</xsl:template>
 
 
-<!--@@==========================================================================
-icons.note
-The URL for the note icon.
-:Revision:version="1.0" date="2010-05-03" status="final"
+<!--**==========================================================================
+icons.svg.note.advanced
+Output an #{svg} element for an advanced note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+with advanced information.
 
-This parameter specifies the URL for the icon used for regular notes.
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
 -->
-<xsl:param name="icons.note"
-           select="concat($icons.base_url, 'yelp-note.png')"/>
+<xsl:template name="icons.svg.note.advanced">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-advanced.svg')"/>
+</xsl:template>
 
 
-<!--@@==========================================================================
-icons.note.bug
-The URL for the bug note icon.
-:Revision:version="1.0" date="2010-05-03" status="final"
+<!--**==========================================================================
+icons.svg.note.bug
+Output an #{svg} element for a bug note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+about known bugs.
 
-This parameter specifies the URL for the icon used for bug notes.
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
 -->
-<xsl:param name="icons.note.bug"
-           select="concat($icons.base_url, 'yelp-note-bug.png')"/>
+<xsl:template name="icons.svg.note.bug">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-bug.svg')"/>
+</xsl:template>
 
 
-<!--@@==========================================================================
-icons.note.important
-The URL for the important note icon.
-:Revision:version="1.0" date="2010-05-03" status="final"
+<!--**==========================================================================
+icons.svg.note.caution
+Output an #{svg} element for a caution note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
 
-This parameter specifies the URL for the icon used for important notes.
+This template outputs an SVG #{svg} element with an icon suitable for notes
+with cautionary information.
+
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
 -->
-<xsl:param name="icons.note.important"
-           select="concat($icons.base_url, 'yelp-note-important.png')"/>
+<xsl:template name="icons.svg.note.caution">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-warning.svg')"/>
+</xsl:template>
 
 
-<!--@@==========================================================================
-icons.note.tip
-The URL for the tip note icon.
-:Revision:version="1.0" date="2010-05-03" status="final"
+<!--**==========================================================================
+icons.svg.note.danger
+Output an #{svg} element for a danger note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+about dangerous situations.
 
-This parameter specifies the URL for the icon used for tip notes.
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
 -->
-<xsl:param name="icons.note.tip"
-           select="concat($icons.base_url, 'yelp-note-tip.png')"/>
+<xsl:template name="icons.svg.note.danger">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-warning.svg')"/>
+</xsl:template>
 
 
-<!--@@==========================================================================
-icons.note.warning
-The URL for the warning note icon.
-:Revision:version="1.0" date="2010-05-03" status="final"
+<!--**==========================================================================
+icons.svg.note.important
+Output an #{svg} element for an important note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+with important information.
+
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
+-->
+<xsl:template name="icons.svg.note.important">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-important.svg')"/>
+</xsl:template>
+
+
+<!--**==========================================================================
+icons.svg.note.note
+Output an #{svg} element for a note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+with general information.
+
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
+-->
+<xsl:template name="icons.svg.note.note">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-note.svg')"/>
+</xsl:template>
+
+
+<!--**==========================================================================
+icons.svg.note.package
+Output an #{svg} element for a package note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+about packages the user may need to install.
+
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
+-->
+<xsl:template name="icons.svg.note.package">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-package.svg')"/>
+</xsl:template>
+
+
+<!--**==========================================================================
+icons.svg.note.tip
+Output an #{svg} element for a tip note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+with tips.
 
-This parameter specifies the URL for the icon used for warning notes.
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
 -->
-<xsl:param name="icons.note.warning"
-           select="concat($icons.base_url, 'yelp-note-warning.png')"/>
+<xsl:template name="icons.svg.note.tip">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-tip.svg')"/>
+</xsl:template>
+
+
+<!--**==========================================================================
+icons.svg.note.warning
+Output an #{svg} element for a warning note icon.
+:Revision: version="3.next" date="2016-09-15" status="review"
+
+This template outputs an SVG #{svg} element with an icon suitable for notes
+with warnings.
+
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-fill} class name.
+-->
+<xsl:template name="icons.svg.note.warning">
+  <xsl:apply-templates mode="icons.svg.mode"
+                       select="document('icons/yelp-note-warning.svg')"/>
+</xsl:template>
 
 
 <!--@@==========================================================================
@@ -130,7 +294,7 @@ This parameters still affects the size of that character.
 <!--**==========================================================================
 icons.svg.figure.zoom.in
 Output an #{svg} element for a figure zoom-in icon.
-:Revision: version="3.22" date="2016-02-11" status="final"
+:Revision: version="3.next" date="2016-02-11" status="review"
 
 This template outputs an SVG #{svg} element with the zoom-in icon for figures.
 Figures automatically scale images down. This icon shows them at their original
@@ -153,7 +317,7 @@ names.
 <!--**==========================================================================
 icons.svg.figure.zoom.out
 Output an #{svg} element for a figure zoom-out icon.
-:Revision: version="3.22" date="2016-02-11" status="final"
+:Revision: version="3.next" date="2016-02-11" status="review"
 
 This template outputs an SVG #{svg} element with the zoom-in icon for figures.
 Figures automatically scale images down. This icon scales them back down after
@@ -176,7 +340,7 @@ names.
 <!--**==========================================================================
 icons.svg.media.play
 Output an #{svg} element for a figure zoom-out icon.
-:Revision: version="3.22" date="2016-02-12" status="final"
+:Revision: version="3.next" date="2016-02-12" status="review"
 
 This template outputs an SVG #{svg} element with a play icon for media controls.
 
@@ -193,7 +357,7 @@ By default, this icon uses the #{yelp-svg-fill} class name.
 <!--**==========================================================================
 icons.svg.media.pause
 Output an #{svg} element for a figure zoom-out icon.
-:Revision: version="3.22" date="2016-02-12" status="final"
+:Revision: version="3.next" date="2016-02-12" status="review"
 
 This template outputs an SVG #{svg} element with a pause icon for media controls.
 
diff --git a/xslt/common/icons/Makefile.am b/xslt/common/icons/Makefile.am
new file mode 100644
index 0000000..02cdcd9
--- /dev/null
+++ b/xslt/common/icons/Makefile.am
@@ -0,0 +1,12 @@
+xsldir=$(datadir)/yelp-xsl/xslt/common/icons
+
+xsl_DATA =                     \
+       yelp-note-advanced.svg  \
+       yelp-note-bug.svg       \
+       yelp-note-important.svg \
+       yelp-note-note.svg      \
+       yelp-note-package.svg   \
+       yelp-note-tip.svg       \
+       yelp-note-warning.svg
+
+EXTRA_DIST=$(xsl_DATA)
diff --git a/xslt/common/icons/yelp-note-advanced.svg b/xslt/common/icons/yelp-note-advanced.svg
new file mode 100644
index 0000000..5620fbf
--- /dev/null
+++ b/xslt/common/icons/yelp-note-advanced.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" width="24" version="1.1">
+ <g>
+  <path class="yelp-svg-fill" d="m5.4473 12.572c-2.039 0.957-3.4473 3.019-3.4473 
5.428v4h20v-4c0-2.406-1.406-4.466-3.441-5.424a8 8 0 0 1 -6.559 3.424 8 8 0 0 1 -6.5527 -3.428z"/>
+  <path class="yelp-svg-fill" d="m12 3a5 5 0 0 0 -5 5 5 5 0 0 0 5 5 5 5 0 0 0 5 -5 5 5 0 0 0 -5 -5zm0 3a2 2 
0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  <path class="yelp-svg-fill" d="m15.312 6 3.688 1v2l-3.4688 1z"/>
+  <path class="yelp-svg-fill" d="m14 11.312-1 3.688h-2l-1-3.469z"/>
+  <path class="yelp-svg-fill" d="m10 4.6875 1-3.6875h2l1 3.4688z"/>
+  <path class="yelp-svg-fill" d="m8.6875 10-3.6875-1v-2l3.4688-1z"/>
+  <path class="yelp-svg-fill" d="m12.928 4.2435 3.3146-1.9003 1.4142 1.4142-1.7457 3.1599z"/>
+  <path class="yelp-svg-fill" d="m15.757 8.9281 1.9003 3.3146-1.4142 1.4142-3.1599-1.7457z"/>
+  <path class="yelp-svg-fill" d="m8.2435 7.0719-1.9004-3.3145 1.4143-1.4143 3.1596 1.7457z"/>
+  <path class="yelp-svg-fill" d="m11.072 11.757-3.3146 1.9-1.4143-1.414 1.7457-3.1602z"/>
+ </g>
+</svg>
diff --git a/xslt/common/icons/yelp-note-bug.svg b/xslt/common/icons/yelp-note-bug.svg
new file mode 100644
index 0000000..56ddc85
--- /dev/null
+++ b/xslt/common/icons/yelp-note-bug.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" width="24" version="1.1">
+ <g>
+  <path class="yelp-svg-fill" d="m7 8v6.697 0.303h0.0078a5 6.3027 0 0 0 3.9922 5.867v-6.867h2v6.871a5 6.3027 
0 0 0 3.988 -5.871h0.012v-0.303-6.697h-10z"/>
+  <path class="yelp-svg-fill" d="m12 3a4 4 0 0 0 -4 4h8a4 4 0 0 0 -4 -4z"/>
+  <path class="yelp-svg-fill" d="m16 12h6v1h-6z"/>
+  <path class="yelp-svg-fill" d="m9.2045 16.361h6v1h-6z" transform="rotate(-30)"/>
+  <path class="yelp-svg-fill" d="m21.704 4.2894h6v1h-6z" transform="rotate(30)"/>
+  <path class="yelp-svg-fill" d="m2 12h6v1h-6z"/>
+  <path class="yelp-svg-fill" d="m5.5801 4.3612h6v1h-6z" transform="rotate(30)"/>
+  <path class="yelp-svg-fill" d="m-6.9199 16.289h6v1h-6z" transform="rotate(-30)"/>
+ </g>
+</svg>
diff --git a/xslt/common/icons/yelp-note-important.svg b/xslt/common/icons/yelp-note-important.svg
new file mode 100644
index 0000000..3b50824
--- /dev/null
+++ b/xslt/common/icons/yelp-note-important.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" width="24" version="1.1">
+ <path class="yelp-svg-fill" d="m12.5 2a9.5 9.5 0 0 0 -9.5 9.5 9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5 -9.5 
9.5 9.5 0 0 0 -9.5 -9.5zm0 3a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1 -1.5 1.5 1.5 1.5 0 0 1 -1.5 -1.5v-6a1.5 
1.5 0 0 1 1.5 -1.5zm0 10.5a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1 -1.5 1.5 1.5 1.5 0 0 1 -1.5 -1.5 1.5 1.5 0 0 1 
1.5 -1.5z"/>
+</svg>
diff --git a/xslt/common/icons/yelp-note-note.svg b/xslt/common/icons/yelp-note-note.svg
new file mode 100644
index 0000000..cc0460b
--- /dev/null
+++ b/xslt/common/icons/yelp-note-note.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" width="24" version="1.1">
+ <g>
+  <path class="yelp-svg-fill" d="m4 3h16c0.554 0 1 0.446 1 1v11h-6v6h-11c-0.554 0-1-0.446-1-1v-16c0-0.554 
0.446-1 1-1z"/>
+  <path class="yelp-svg-fill" d="m17 16h4l-5 5v-4c0-0.554 0.446-1 1-1z"/>
+ </g>
+</svg>
diff --git a/xslt/common/icons/yelp-note-package.svg b/xslt/common/icons/yelp-note-package.svg
new file mode 100644
index 0000000..9fb4884
--- /dev/null
+++ b/xslt/common/icons/yelp-note-package.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" width="24" version="1.1">
+ <g>
+  <path class="yelp-svg-fill" d="m3 10v7.429l9 5.571 9-5.571v-7.429l-9 5z"/>
+  <path class="yelp-svg-fill" d="m3 7v2l9 5 9-5v-2l-9-5z"/>
+ </g>
+</svg>
diff --git a/xslt/common/icons/yelp-note-tip.svg b/xslt/common/icons/yelp-note-tip.svg
new file mode 100644
index 0000000..3d82014
--- /dev/null
+++ b/xslt/common/icons/yelp-note-tip.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" width="24" version="1.1">
+ <g>
+  <path class="yelp-svg-fill" 
style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none"
 d="m12 2c-3.8541 0-7 3.1459-7 7 0 1.823 0.4945 3.139 1.1641 4.133 0.6695 0.994 1.4328 1.671 2.039 2.471 
0.0882 0.116 0.1749 0.656 0.2071 1.32 0.016 0.332 0.0133 0.68 0.1894 1.119 0.0881 0.22 0.2439 0.478 0.5059 
0.672 0.2619 0.194 0.6028 0.285 0.8945 0.285h4c0.583 0 1.204-0.478 1.402-0.908 0.199-0.43 0.217-0.793 
0.244-1.137 0.056-0.688 0.138-1.319 0.211-1.441 0.549-0.916 1.304-2.009 1.94-3.114 0.636-1.104 1.203-2.199 
1.203-3.4 0-3.8541-3.146-7-7-7zm0 2c2.773 0 5 2.2267 5 5 0 0.456-0.359 1.401-0.936 2.402-0.111 0.195-0.246 
0.399-0.369 0.598h-7.8825c-0.4871-0.728-0.8125-1.519-0.8125-3 0-2.7733 2.2267-5 5-5z"/>
+  <path class="yelp-svg-fill" d="m9 20a0.5 0.5 0 0 0 -0.5 0.5 0.5 0.5 0 0 0 0.5 0.5h6a0.5 0.5 0 0 0 0.5 -0.5 
0.5 0.5 0 0 0 -0.5 -0.5h-6zm0 2a0.5 0.5 0 0 0 -0.5 0.5 0.5 0.5 0 0 0 0.5 0.5h6a0.5 0.5 0 0 0 0.5 -0.5 0.5 0.5 
0 0 0 -0.5 -0.5h-6z"/>
+ </g>
+</svg>
diff --git a/xslt/common/icons/yelp-note-warning.svg b/xslt/common/icons/yelp-note-warning.svg
new file mode 100644
index 0000000..e8e4cfa
--- /dev/null
+++ b/xslt/common/icons/yelp-note-warning.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; height="24" width="24" version="1.1">
+ <path class="yelp-svg-fill" d="m11.92 3.3047a1.3872 1.3872 0 0 0 -1.129 0.6933l-8.6055 14.922a1.3872 1.3872 
0 0 0 1.2012 2.08l17.226-0.008a1.3872 1.3872 0 0 0 1.201 -2.08l-8.619-14.916a1.3872 1.3872 0 0 0 -1.136 
-0.6913 1.3872 1.3872 0 0 0 -0.139 0zm0.08 4.6953a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1 1 1 0 0 1 -1 -1v-6a1 1 0 0 1 
1 -1zm0 9a1 1 0 0 1 1 1 1 1 0 0 1 -1 1 1 1 0 0 1 -1 -1 1 1 0 0 1 1 -1z"/>
+</svg>
diff --git a/xslt/dita/html/dita2html-block.xsl b/xslt/dita/html/dita2html-block.xsl
index 9f4a9c8..f639e82 100644
--- a/xslt/dita/html/dita2html-block.xsl
+++ b/xslt/dita/html/dita2html-block.xsl
@@ -461,21 +461,34 @@ FIXME
       <xsl:with-param name="conref" select="$conref"/>
     </xsl:call-template>
   </xsl:variable>
-  <xsl:variable name="notetype">
+  <xsl:variable name="notetitle">
     <xsl:choose>
       <xsl:when test="$type = 'attention' or $type = 'important' or
                       $type = 'remember' or $type = 'restriction'">
-        <xsl:text>important</xsl:text>
+        <xsl:text>Important</xsl:text>
+      </xsl:when>
+      <xsl:when test="$type = 'caution' or $type = 'notice'">
+        <xsl:text>Caution</xsl:text>
       </xsl:when>
-      <xsl:when test="$type = 'caution' or $type = 'danger' or
-                      $type = 'notice' or $type = 'warning'">
-        <xsl:text>warning</xsl:text>
+      <xsl:when test="$type = 'danger'">
+        <xsl:text>Danger</xsl:text>
+      </xsl:when>
+      <xsl:when test="$type = 'warning'">
+        <xsl:text>Warning</xsl:text>
       </xsl:when>
       <xsl:when test="$type = 'fastpath' or $type = 'tip'">
-        <xsl:text>tip</xsl:text>
+        <xsl:text>Tip</xsl:text>
       </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>Note</xsl:text>
+      </xsl:otherwise>
     </xsl:choose>
   </xsl:variable>
+  <xsl:variable name="notetype">
+    <xsl:value-of select="translate($notetitle,
+                          'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+                          'abcdefghijklmnopqrstuvwxyz')"/>
+  </xsl:variable>
   <div>
     <xsl:call-template name="dita.id"/>
     <xsl:call-template name="html.lang.attrs"/>
@@ -488,6 +501,14 @@ FIXME
         </xsl:if>
       </xsl:with-param>
     </xsl:call-template>
+    <xsl:attribute name="title">
+      <xsl:call-template name="l10n.gettext">
+        <xsl:with-param name="msgid" select="$notetitle"/>
+      </xsl:call-template>
+    </xsl:attribute>
+    <xsl:call-template name="icons.svg.note">
+      <xsl:with-param name="style" select="$notetype"/>
+    </xsl:call-template>
     <div class="inner">
       <div class="region">
         <div class="contents">
diff --git a/xslt/docbook/html/db2html-block.xsl b/xslt/docbook/html/db2html-block.xsl
index 171065e..b9cb4ee 100644
--- a/xslt/docbook/html/db2html-block.xsl
+++ b/xslt/docbook/html/db2html-block.xsl
@@ -80,6 +80,7 @@ $class: The value of the HTML #{class} attribute.
 $title: An element to use for the title.
 $caption: An element to use for the caption.
 $titleattr: An optional value for the HTML #{title} attribute.
+$icon: An icon for the block, as a copyable node set.
 
 This template outputs HTML for a formal DocBook element, one that can have
 a title or caption. It passes the ${class} parameter to *{html.class.attr}.
@@ -98,6 +99,7 @@ This template handles conditional processing.
                                   $node/db:title | $node/db:info/db:title"/>
   <xsl:param name="caption" select="$node/caption | $node/db:caption"/>
   <xsl:param name="titleattr" select="''"/>
+  <xsl:param name="icon"/>
 
   <xsl:variable name="if">
     <xsl:call-template name="db.profile.test">
@@ -121,6 +123,7 @@ This template handles conditional processing.
     <xsl:call-template name="db2html.anchor">
       <xsl:with-param name="node" select="$node"/>
     </xsl:call-template>
+    <xsl:copy-of select="$icon"/>
     <div class="inner">
       <xsl:if test="$node/self::figure or $node/self::db:figure">
         <a href="#" class="figure-zoom">
@@ -471,12 +474,41 @@ This template handles conditional processing.
 <!-- = caution = -->
 <xsl:template match="caution | db:caution">
   <xsl:call-template name="db2html.block.formal">
-    <xsl:with-param name="class" select="'note note-warning'"/>
+    <xsl:with-param name="class">
+      <xsl:text>note note-</xsl:text>
+      <xsl:choose>
+        <xsl:when test="@role = 'danger'">
+          <xsl:text>danger</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>caution</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:with-param>
     <xsl:with-param name="titleattr">
       <xsl:call-template name="l10n.gettext">
-        <xsl:with-param name="msgid" select="'Warning'"/>
+        <xsl:with-param name="msgid">
+          <xsl:choose>
+            <xsl:when test="@role = 'danger'">
+              <xsl:text>Danger</xsl:text>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:text>Caution</xsl:text>
+            </xsl:otherwise>
+          </xsl:choose>
+        </xsl:with-param>
       </xsl:call-template>
     </xsl:with-param>
+    <xsl:with-param name="icon">
+      <xsl:choose>
+        <xsl:when test="@role = 'danger'">
+          <xsl:call-template name="icons.svg.note.danger"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:call-template name="icons.svg.note.caution"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:with-param>
   </xsl:call-template>
 </xsl:template>
 
@@ -527,6 +559,9 @@ This template handles conditional processing.
         <xsl:with-param name="msgid" select="'Important'"/>
       </xsl:call-template>
     </xsl:with-param>
+    <xsl:with-param name="icon">
+      <xsl:call-template name="icons.svg.note.important"/>
+    </xsl:with-param>
   </xsl:call-template>
 </xsl:template>
 
@@ -577,6 +612,11 @@ This template handles conditional processing.
         </xsl:otherwise>
       </xsl:choose>
     </xsl:with-param>
+    <xsl:with-param name="icon">
+      <xsl:call-template name="icons.svg.note">
+        <xsl:with-param name="style" select="@role"/>
+      </xsl:call-template>
+    </xsl:with-param>
   </xsl:call-template>
 </xsl:template>
 
@@ -863,6 +903,9 @@ This template handles conditional processing.
         <xsl:with-param name="msgid" select="'Tip'"/>
       </xsl:call-template>
     </xsl:with-param>
+    <xsl:with-param name="icon">
+      <xsl:call-template name="icons.svg.note.tip"/>
+    </xsl:with-param>
   </xsl:call-template>
 </xsl:template>
 
@@ -877,12 +920,41 @@ This template handles conditional processing.
 <!-- = warning = -->
 <xsl:template match="warning | db:warning">
   <xsl:call-template name="db2html.block.formal">
-    <xsl:with-param name="class" select="'note note-warning'"/>
+    <xsl:with-param name="class">
+      <xsl:text>note note-</xsl:text>
+      <xsl:choose>
+        <xsl:when test="@role = 'danger'">
+          <xsl:text>danger</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>warning</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:with-param>
     <xsl:with-param name="titleattr">
       <xsl:call-template name="l10n.gettext">
-        <xsl:with-param name="msgid" select="'Warning'"/>
+        <xsl:with-param name="msgid">
+          <xsl:choose>
+            <xsl:when test="@role = 'danger'">
+              <xsl:text>Danger</xsl:text>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:text>Warning</xsl:text>
+            </xsl:otherwise>
+          </xsl:choose>
+        </xsl:with-param>
       </xsl:call-template>
     </xsl:with-param>
+    <xsl:with-param name="icon">
+      <xsl:choose>
+        <xsl:when test="@role = 'danger'">
+          <xsl:call-template name="icons.svg.note.danger"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:call-template name="icons.svg.note.warning"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:with-param>
   </xsl:call-template>
 </xsl:template>
 
diff --git a/xslt/mallard/html/mal2html-block.xsl b/xslt/mallard/html/mal2html-block.xsl
index 09c44b7..71ca9ff 100644
--- a/xslt/mallard/html/mal2html-block.xsl
+++ b/xslt/mallard/html/mal2html-block.xsl
@@ -631,7 +631,7 @@ in accordance with the Mallard specification on fallback block content.
 <!-- = note = -->
 <xsl:template mode="mal2html.block.mode" match="mal:note">
   <xsl:variable name="if"><xsl:call-template name="mal.if.test"/></xsl:variable><xsl:if test="$if != ''">
-  <xsl:variable name="notestyle">
+  <xsl:variable name="notetitle">
     <xsl:choose>
       <xsl:when test="contains(concat(' ', @style, ' '), ' advanced ')">
         <xsl:text>Advanced</xsl:text>
@@ -639,9 +639,18 @@ in accordance with the Mallard specification on fallback block content.
       <xsl:when test="contains(concat(' ', @style, ' '), ' bug ')">
         <xsl:text>Bug</xsl:text>
       </xsl:when>
+      <xsl:when test="contains(concat(' ', @style, ' '), ' caution ')">
+        <xsl:text>Caution</xsl:text>
+      </xsl:when>
+      <xsl:when test="contains(concat(' ', @style, ' '), ' danger ')">
+        <xsl:text>Danger</xsl:text>
+      </xsl:when>
       <xsl:when test="contains(concat(' ', @style, ' '), ' important ')">
         <xsl:text>Important</xsl:text>
       </xsl:when>
+      <xsl:when test="contains(concat(' ', @style, ' '), ' package ')">
+        <xsl:text>Package</xsl:text>
+      </xsl:when>
       <xsl:when test="contains(concat(' ', @style, ' '), ' plain ')">
         <xsl:text>plain</xsl:text>
       </xsl:when>
@@ -659,13 +668,18 @@ in accordance with the Mallard specification on fallback block content.
       </xsl:otherwise>
     </xsl:choose>
   </xsl:variable>
+  <xsl:variable name="notestyle">
+    <xsl:value-of select="translate($notetitle,
+                          'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+                          'abcdefghijklmnopqrstuvwxyz')"/>
+  </xsl:variable>
   <div>
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
         <xsl:text>note</xsl:text>
-        <xsl:if test="$notestyle != 'Note'">
-          <xsl:value-of select="concat(' note-', translate($notestyle, 'ABISTW', 'abistw'))"/>
+        <xsl:if test="$notestyle != 'note'">
+          <xsl:value-of select="concat(' note-', $notestyle)"/>
         </xsl:if>
         <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
           <xsl:text> ui-expander</xsl:text>
@@ -679,11 +693,16 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:if test="$notestyle != 'plain'">
       <xsl:attribute name="title">
         <xsl:call-template name="l10n.gettext">
-          <xsl:with-param name="msgid" select="$notestyle"/>
+          <xsl:with-param name="msgid" select="$notetitle"/>
         </xsl:call-template>
       </xsl:attribute>
     </xsl:if>
     <xsl:call-template name="mal2html.ui.expander.data"/>
+    <xsl:if test="$notestyle != 'plain' and $notestyle != 'sidebar'">
+      <xsl:call-template name="icons.svg.note">
+        <xsl:with-param name="style" select="$notestyle"/>
+      </xsl:call-template>
+    </xsl:if>
     <div class="inner">
       <xsl:apply-templates mode="mal2html.block.mode" select="mal:title"/>
       <div class="region">
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]