fix some styles for the icons macro

Author: colegoldsmith

preview-src/asciidoc/images.adoc

@@ -112,31 +112,57 @@ Click the Astra Vector icon image:../img/astra-vector-light.svg[title="Astra Vec
 
 [NOTE]
 ======
-You can define icons from https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined[Material Icons,window=_blank] and https://lucide.dev/icons/[Lucide Icons,window=_blank]. You can also apply an svg file using the customized `icon` macro.
+You can define icons from https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined[Material Icons,window=_blank] and https://lucide.dev/icons/[Lucide Icons,window=_blank] with the icon macro. You can also create custom icons with SVG files using the svg macro.
 
-Method 1: Inline icon macro with an svg file::
-The customized inline icon macro accepts a file path as it's target source. The file must be an svg file.
+Method 1: icon macro::
+The inline icon macro accepts a Lucide or Material icon name as the target source.
 +
-This methods supports using CSS variables within the svg.
+This method supports light and dark mode automatically.
 +
-[source]
-----
-icon:ROOT:ui/icons/vector.svg[]
+[source,title="Lucide"]
 ----
+// the icon macro uses lucide by default
+icon:boom-box[]
+// or specifiy lucide
+icon:lucide:boom-box[]
 
-Method 2: Inline icon macro with a material-icons target::
-The customized inline icon macro supports material icon names as it's target source prefixed with `material-icons:`. Ensure the name is lower case with underscores instead of spaces.
+// alt or title attribute create an aria-label
+icon:atom[title="Split the atom"]
+icon:moon[alt="That's no moon"]
+
+// customize with tailwind classes as the role
+With tailwind roles icon:star[role="text-amber-600 text-2xl"]
+
+// customize the size in px
+icon:star[size="60"] 
+----
 +
-This macro does not yet support Lucide icons.
+[source,title="Material"]
+----
+// specifiy material
+icon:material:chevron-down[]
+
+// alt or title attribute create an aria-label
+icon:material:air[alt="Whooosh"]
+
+// customize with tailwind classes as the role
+icon:material:directions-boat[role="text-amber-600 text-2xl"]
+
+// customize the size in px
+icon:material:thumb-up[size=60] 
+----
+
+Method 2: svg macro with icon role::
+Display a local SVG file with the icon role.
 +
-This method supports light and dark mode automatically.
+This methods supports using CSS variables within the svg.
 +
 [source]
 ----
-icon:material-icons:thumb_up[]
+svg:ROOT:ui/icons/vector.svg[role="icon"]
 ----
 
-Method 3: material-icons role::
+Method 3: block or inline span with material-icons role::
 Use the custom role `material-icons` on block or inline content. The content must be a material icon name in lower case. If there are spaces in the name, use underscores instead.
 +
 This method supports light and dark mode automatically.
@@ -156,7 +182,7 @@ Inline material icons [.material-icons]#thumb_up#
 + 
 [.material-icons]#thumb_up# [.material-icons]#rocket_launch#
 
-Method 4: Lucide icons with HTML passthrough::
+Method 4: HTML passthrough::
 Use block or inline HTML passthrough to create an icon element `<i class="icon-{icon-name}"></i>`.
 +
 This method supports light and dark mode automatically.

src/css/asciidoc/admonition-block.css

@@ -16,7 +16,7 @@
     flex-wrap: wrap;
   }
 
-  .doc .admonitionblock .icon {
+  .doc .admonitionblock td.icon {
     display: flex;
     gap: var(--ds-space-1);
     align-items: center;
@@ -45,31 +45,31 @@
     background: none;
   }
 
-  .doc .admonitionblock .icon::before {
+  .doc .admonitionblock td.icon::before {
     font-family: "Material Icons Outlined", sans-serif;
     font-size: calc(20 / var(--rem-base) * 1rem);
     font-weight: normal;
   }
 
   /* TIP, NOTE */
-  .doc .admonitionblock.tip .icon,
-  .doc .admonitionblock.note .icon {
+  .doc .admonitionblock.tip td.icon,
+  .doc .admonitionblock.note td.icon {
     background: var(--ds-success-soft-bg);
     color: var(--ds-text-primary);
   }
 
-  .doc .admonitionblock.note .icon::before {
+  .doc .admonitionblock.note td.icon::before {
     color: var(--ds-success-soft-color);
     content: "\e88e";
   }
 
-  .doc .admonitionblock.tip .icon::before {
+  .doc .admonitionblock.tip td.icon::before {
     color: var(--ds-success-soft-color);
     content: "\e0f0";
   }
 
   /* CAUTION */
-  .doc .admonitionblock.caution .icon {
+  .doc .admonitionblock.caution td.icon {
     background: var(--ds-warning-soft-bg);
     color: var(--ds-text-primary);
   }
@@ -78,14 +78,14 @@
     border: 1px solid var(--ds-warning-outlined-border);
   }
 
-  .doc .admonitionblock.caution .icon::before {
+  .doc .admonitionblock.caution td.icon::before {
     color: var(--ds-warning-soft-color);
     content: "\e88e";
   }
 
   /* WARNING, IMPORTANT */
-  .doc .admonitionblock.warning .icon,
-  .doc .admonitionblock.important .icon {
+  .doc .admonitionblock.warning td.icon,
+  .doc .admonitionblock.important td.icon {
     background: var(--ds-failure-soft-bg);
     color: var(--ds-text-primary);
   }
@@ -95,12 +95,12 @@
     border: 1px solid var(--ds-failure-outlined-border);
   }
 
-  .doc .admonitionblock.warning .icon::before {
+  .doc .admonitionblock.warning td.icon::before {
     color: var(--ds-failure-soft-color);
     content: "\f083";
   }
 
-  .doc .admonitionblock.important .icon::before {
+  .doc .admonitionblock.important td.icon::before {
     color: var(--ds-failure-soft-color);
     content: "\e160";
   }

src/css/asciidoc/doc.css

@@ -417,7 +417,7 @@
     word-wrap: anywhere;
   }
 
-  .doc .admonitionblock .icon {
+  .doc .admonitionblock td.icon {
     position: absolute;
     top: 0;
     left: 0;
@@ -431,13 +431,13 @@
     transform: translate(-0.25rem, -50%);
   }
 
-  .doc .admonitionblock .icon i {
+  .doc .admonitionblock td.icon i {
     display: inline-flex;
     align-items: center;
     height: 100%;
   }
 
-  .doc .admonitionblock .icon i::after {
+  .doc .admonitionblock td.icon i::after {
     font-size: 1rem;
     font-weight: 600;
     font-family: "Roboto Flex", sans-serif;

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

@@ -1 +1,7 @@
 @import "lucide-static/font/lucide.css";
+
+[class*=" icon-"], [class^=icon-] {
+  font-size: 1.25em;
+  line-height: 1;
+  vertical-align: sub;
+}

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

@@ -12,7 +12,7 @@
   font-family: 'Material Icons Outlined', sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: 1.25rem;
+  font-size: 1.25em;
   display: inline-block;
   line-height: 1;
   text-transform: none;
@@ -28,5 +28,5 @@
   -moz-osx-font-smoothing: grayscale;
   /* Support for IE. */
   font-feature-settings: 'liga';
-  vertical-align: middle;
+  vertical-align: sub;
 }

src/partials/theme-toggle.hbs

@@ -6,22 +6,22 @@
     tabindex="0" 
     value="light" 
     aria-label="Light">
-      <i class="icon-sun"></i>
+      <i class="icon-sun text-base"></i>
   </button>
   <button 
     class="toggle-button dark w-6 h-6 flex items-center justify-center rounded-full hover:bg-[var(--ds-neutral-plain-hover-bg)] z-0 transition-all" 
     aria-pressed="false" 
     tabindex="0" 
     value="dark" 
     aria-label="Dark">
-      <i class="icon-moon"></i>
+      <i class="icon-moon text-base"></i>
   </button>
   <button 
     class="toggle-button system w-6 h-6 flex items-center justify-center rounded-full hover:bg-[var(--ds-neutral-plain-hover-bg)] z-0 transition-all" 
     aria-pressed="false" 
     tabindex="0" 
     value="system" 
     aria-label="System">
-      <i class="icon-monitor"></i>
+      <i class="icon-monitor text-base"></i>
   </button>
 </div>