Switch to SVG icons for admonition elements

15 files changed, 456 insertions, 97 deletions

diff --git a/xslt/common/Makefile.am b/xslt/common/Makefile.am
index 064e20cf..33ab76c9 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 a847f64c..e7315563 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 6015cd16..0a271814 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 d7881767..e625eac4 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 00000000..02cdcd9e
--- /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 00000000..5620fbf9
--- /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 00000000..56ddc85c
--- /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 00000000..3b508240
--- /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 00000000..cc0460b0
--- /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 00000000..9fb4884a
--- /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 00000000..3d82014c
--- /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 00000000..e8e4cfa9
--- /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 9f4a9c8b..f639e82f 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 171065e0..b9cb4ee9 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 09c44b7e..71ca9ff1 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">