more text color styles, better icon class

Author: colegoldsmith

preview-src/asciidoc/images.adoc

@@ -8,24 +8,24 @@
 == Block images
 
 .Optional title
-image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home"]
+image::../img/screenshot.png[alt="Screenshot of Astra Portal Home"]
 
 === Sizing and alignment
 
 .width=400,align=left
-image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home",width=400,align=left]
+image::../img/screenshot.png[alt="Screenshot of Astra Portal Home",width=400,align=left]
 
 .width=400 width,align=right
-image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home",width=400,align=right]
+image::../img/screenshot.png[alt="Screenshot of Astra Portal Home",width=400,align=right]
 
 .width=400 width,align=center
-image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home",width=400,align=center]
+image::../img/screenshot.png[alt="Screenshot of Astra Portal Home",width=400,align=center]
 
 === Float
 
 [.float-group]
 --
-image:../img/screenshot.png[[alt="Screenshot of Astra Portal Home",300,float=right,role=float-gap]
+image:../img/screenshot.png[alt="Screenshot of Astra Portal Home",300,float=right,role=float-gap]
 In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup. A paragraph can be defined as one or more lines of consecutive text that are logically grouped together. To differentiate between paragraphs, you simply need to insert at least one blank line between them.
 --
 

src/css/base.css

@@ -77,10 +77,11 @@
     top: -0.5em;
   }
 
-  .icon {
+  svg.icon {
     display: inline-block;
     height: 1.25em;
     width: 1.25em;
+    vertical-align: text-bottom;
   }
 
   @media (pointer: fine) {

src/css/color.css

@@ -15,6 +15,18 @@
     color: var(--ds-text-inverse);
   }
 
+  .text-warning {
+    color: var(--ds-warning-main);
+  }
+
+  .text-success {
+    color: var(--ds-success-main);
+  }
+
+  .text-failure {
+    color: var(--ds-failure-main);
+  }
+
   .text-link,
   .color-primary {
     color: var(--ds-primary-main);

src/css/typeface/typeface-lucide-icons.css

@@ -3,5 +3,5 @@
 [class*=" icon-"], [class^=icon-] {
   font-size: 1.25em;
   line-height: 1;
-  vertical-align: sub;
+  vertical-align: text-bottom;
 }

src/css/typeface/typeface-material-icons-outlined.css

@@ -28,5 +28,5 @@
   -moz-osx-font-smoothing: grayscale;
   /* Support for IE. */
   font-feature-settings: 'liga';
-  vertical-align: sub;
+  vertical-align: text-bottom;
 }