jekyll-theme-centos 2.51.1.beta.47 → 2.51.1.beta.49

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2c8b6c4a41cc382c8a6e87ff3dc3a3ca1edb65e6d4844afbab74030bf267daf
-  data.tar.gz: c65983d17cfeede0fc70f0652502d658b943d156179dd165d435941ec4e9c0e9
+  metadata.gz: 6540593ed3dd8c216ad81416fe5db6ec328acbeafd20221e1b20b9a9c08d35f9
+  data.tar.gz: 4c740a0b2888d232f8c7a77e511c30cec8d14c85b7d30666982d9369d625eee2
 SHA512:
-  metadata.gz: 865949efbbd2824b8f4dfdb0559db6b3e06c15f6815710322d3e2ad47b5461feb9e77aa950c7751fccb41e07e82b4891df7bbaac1ba5551ccdbdd8942611ebe4
-  data.tar.gz: edb26ee0137a6132a8f6797eba1c544da116c2a2d84228d73ae9f4de65b1f7d3c02ffe80d3d4b88a6dc2e856f407464e257fc830f39f5224381a0387c6e5cc63
+  metadata.gz: edc115f6d6a8f28539eb2aa9b7f3df341f3563b22674a44ecb6895d9de46709110b1db757558cd958df4f96a77b068163af641dec2d5cabe2566d0ff5aadc7a9
+  data.tar.gz: 791eb1c896ba0ae062606e9cae3cd33954813e71517f728ad0b63d8222126a042b9e637c3a4c5aed0f73ac886266d32c0ea6943b02c6ce2bcfe3db88f43a3434

data/_data/base/languages.yml

@@ -0,0 +1,186 @@
+---
+#
+# Language codes (https://loc.gov/standards/iso639-2/ISO-639-2_utf-8.txt)
+#
+ab: "Abkhaz"
+aa: "Afar"
+af: "Afrikaans"
+ak: "Akan"
+sq: "Albanian"
+am: "Amharic"
+ar: "Arabic"
+an: "Aragonese"
+hy: "Armenian"
+as: "Assamese"
+av: "Avaric"
+ae: "Avestan"
+ay: "Aymara"
+az: "Azerbaijani"
+bm: "Bambara"
+ba: "Bashkir"
+eu: "Basque"
+be: "Belarusian"
+bn: "Bengali"
+bh: "Bihari"
+bi: "Bislama"
+bs: "Bosnian"
+br: "Breton"
+bg: "Bulgarian"
+my: "Burmese"
+ca: "Catalan; Valencian"
+ch: "Chamorro"
+ce: "Chechen"
+ny: "Chichewa; Chewa; Nyanja"
+zh: "Chinese"
+cv: "Chuvash"
+kw: "Cornish"
+co: "Corsican"
+cr: "Cree"
+hr: "Croatian"
+cs: "Czech"
+da: "Danish"
+dv: "Divehi; Dhivehi; Maldivian;"
+nl: "Dutch"
+en: "English"
+eo: "Esperanto"
+et: "Estonian"
+ee: "Ewe"
+fo: "Faroese"
+fj: "Fijian"
+fi: "Finnish"
+fr: "French"
+ff: "Fula; Fulah; Pulaar; Pular"
+gl: "Galician"
+ka: "Georgian"
+de: "German"
+el: "Greek"
+gn: "Guaraní"
+gu: "Gujarati"
+ht: "Haitian; Haitian Creole"
+ha: "Hausa"
+he: "Hebrew (modern)"
+hz: "Herero"
+hi: "Hindi"
+ho: "Hiri Motu"
+hu: "Hungarian"
+ia: "Interlingua"
+id: "Indonesian"
+ie: "Interlingue"
+ga: "Irish"
+ig: "Igbo"
+ik: "Inupiaq"
+io: "Ido"
+is: "Icelandic"
+it: "Italian"
+iu: "Inuktitut"
+ja: "Japanese"
+jv: "Javanese"
+kl: "Kalaallisut"
+kn: "Kannada"
+kr: "Kanuri"
+ks: "Kashmiri"
+kk: "Kazakh"
+km: "Khmer"
+ki: "Kikuyu"
+rw: "Kinyarwanda"
+ky: "Kirghiz"
+kv: "Komi"
+kg: "Kongo"
+ko: "Korean"
+ku: "Kurdish"
+kj: "Kwanyama"
+la: "Latin"
+lb: "Luxembourgish"
+lg: "Luganda"
+li: "Limburgish"
+ln: "Lingala"
+lo: "Lao"
+lt: "Lithuanian"
+lu: "Luba-Katanga"
+lv: "Latvian"
+gv: "Manx"
+mk: "Macedonian"
+mg: "Malagasy"
+ms: "Malay"
+ml: "Malayalam"
+mt: "Maltese"
+mi: "Māori"
+mr: "Marathi (Marāṭhī)"
+mh: "Marshallese"
+mn: "Mongolian"
+na: "Nauru"
+nv: "Navajo"
+nb: "Norwegian Bokmål"
+nd: "North Ndebele"
+ne: "Nepali"
+ng: "Ndonga"
+nn: "Norwegian Nynorsk"
+no: "Norwegian"
+ii: "Nuosu"
+nr: "South Ndebele"
+oc: "Occitan"
+oj: "Ojibwe"
+cu: "Old Church Slavonic"
+om: "Oromo"
+or: "Oriya"
+os: "Ossetian"
+pa: "Panjabi"
+pi: "Pāli"
+fa: "Persian"
+pl: "Polish"
+ps: "Pashto"
+pt: "Portuguese"
+qu: "Quechua"
+rm: "Romansh"
+rn: "Kirundi"
+ro: "Romanian"
+ru: "Russian"
+sa: "Sanskrit"
+sc: "Sardinian"
+sd: "Sindhi"
+se: "Northern Sami"
+sm: "Samoan"
+sg: "Sango"
+sr: "Serbian"
+gd: "Gaelic"
+sn: "Shona"
+si: "Sinhala"
+sk: "Slovak"
+sl: "Slovene"
+so: "Somali"
+st: "Southern Sotho"
+es: "Spanish"
+su: "Sundanese"
+sw: "Swahili"
+ss: "Swati"
+sv: "Swedish"
+ta: "Tamil"
+te: "Telugu"
+tg: "Tajik"
+th: "Thai"
+ti: "Tigrinya"
+bo: "Tibetan"
+tk: "Turkmen"
+tl: "Tagalog"
+tn: "Tswana"
+to: "Tonga"
+tr: "Turkish"
+ts: "Tsonga"
+tt: "Tatar"
+tw: "Twi"
+ty: "Tahitian"
+ug: "Uighur"
+uk: "Ukrainian"
+ur: "Urdu"
+uz: "Uzbek"
+ve: "Venda"
+vi: "Vietnamese"
+vo: "Volapük"
+wa: "Walloon"
+cy: "Welsh"
+wo: "Wolof"
+fy: "Western Frisian"
+xh: "Xhosa"
+yi: "Yiddish"
+yo: "Yoruba"
+za: "Zhuang"

data/_data/base/references.yml

@@ -0,0 +1,12 @@
+---
+- title: Jekyll documentation
+  url: https://jekyllrb.com/docs/
+
+- title: Liquid template language
+  url: https://shopify.github.io/liquid/
+
+- title: The DITA style guide best practices for authors
+  url: https://www.oxygenxml.com/dita/styleguide/
+
+- title: Modular documentation reference guide
+  url: https://redhat-documentation.github.io/modular-docs/

data/_includes/base/announcements.html

@@ -1,4 +1,13 @@
 <div class="alert alert-{{ include.color | default: 'primary' }} alert-dismissible fade show shadow" role="alert">
-  <i class="fa-solid fa-bullhorn"></i> <strong>{{ include.title | default: '' }}</strong> {{ include.content | default: '' }}
+  <div class="container d-flex justify-content-between align-items-center">
+    <div class="me-3">
+      <div class="h5 mb-0"><i class="{{ include.icon | default: 'fa-solid fa-bullhorn' }}"></i></div>
+    </div>
+    <div class="flex-fill">
+      {%- if include.content != "" %}
+      {{ include.content }}
+      {%- endif %}
+    </div>
+  </div>
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 </div>

data/_includes/base/breadcrumbs.html

@@ -1,13 +1,13 @@
 <nav aria-label="{{ include.arialabel | default: 'breadcrumb' }}">
 <ol class="breadcrumb">
-  {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
-  <li class="breadcrumb-item"><a href="{{ site.baseurl }}/">Home</a></li>
-  {% for crumb in crumbs offset: 1 %}
-  {% if forloop.last %}
+  {%- assign crumbs = page.url | remove:'/index.html' | split: '/' %}
+  <li class="breadcrumb-item"><a class="link-offset-3 link-offset-3-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="{{ site.baseurl }}/">Home</a></li>
+  {%- for crumb in crumbs offset: 1 %}
+  {%- if forloop.last %}
     <li class="breadcrumb-item active">{{ page.title }}</li>
-  {% else %}
-    <li class="breadcrumb-item"><a href="{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
-  {% endif %}
-  {% endfor %}
+  {%- else %}
+    <li class="breadcrumb-item"><a class="link-offset-3 link-offset-3-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
+  {%- endif %}
+  {%- endfor %}
 </ol>
 </nav>

data/_includes/base/breakingnews.html

@@ -1,17 +1,17 @@
-<div class="alert alert-{{ include.color | default: 'primary') }} rounded-0 m-0 border-{{ include.color | default: 'primary') }} border-start-0 border-end-0 shadow" role="alert">
+<div class="alert alert-{{ include.color | default: 'primary') }} rounded-0 m-0 border-start-0 border-end-0 shadow" role="alert">
   <div class="container d-flex justify-content-between align-items-center">
     <div class="me-3">
       <div class="h5 mb-0"><i class="{{ include.icon | default: 'fa-solid fa-bullhorn' }}"></i></div>
     </div>
     <div class="flex-fill">
-      {% if include.content != "" %}
+      {%- if include.content != "" %}
       {{ include.content }}
-      {% endif %}
+      {%- endif %}
     </div>
-    {% if include.url != "" %}
+    {%- if include.url != "" %}
     <div class="">
       <a class="btn btn-sm btn-{{ include.color | default: 'primary') }} text-nowrap" href="{{ include.url }}" role="button">Know more <i class="fa-solid fa-arrow-right"></i></a>
     </div>
-    {% endif %}
+    {%- endif %}
   </div>
 </div>

data/_includes/base/copyright.html

@@ -3,15 +3,18 @@
 {% else %}
 {% assign copyright = site.data.base.copyright %}
 {% endif %}
+
+{%- assign color = include.color | default: "light" -%}
+{%- capture legals -%}
+{%- for item in copyright.legals -%}
+{%- assign name = item.text -%}
+{%- assign url = item.link -%}
+<span class="border-start ms-2 ps-2">{% include base/link.html name=name url=url color=color %}</span>
+{%- endfor -%}
+{%- endcapture -%}
+
 <div class="row my-3">
   <div class="col">
-  <span>Copyright &copy;</span>
-  <span>{{ site.time | date: "%Y" }}</span>
-  <span>{{ copyright.author }}</span>
-  {% for item in copyright.legals -%}
-  <span class="border-start ms-2 ps-2">
-    <a class="link-light link-offset-3 link-underline-opacity-25 link-underline-opacity-100-hover link-underline-light" href="{{ item.link }}">{{ item.text }}</a>
-  </span>
-  {% endfor %}
+    <div>Copyright &copy; {{ site.time | date: "%Y" }} {{ copyright.author }} {{ legals }}</div>
   </div>
 </div>

data/_includes/base/languages.html

@@ -0,0 +1,35 @@
+{% assign locales = page.with_locales.size | plus: 1 %}
+{% capture modal_title %}
+<i class="fa-solid fa-language"></i> Languages <span class="badge text-bg-secondary">{{ locales }}</span>
+{% endcapture %}
+
+{% assign modal_id = include.id | default: 0 %}
+{% assign modal_preamble = include.preamble | default: "This page is available in the following languages:"%}
+{% assign modal_footer = include.footer | default: "" %}
+
+<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#languageModal-{{ modal_id }}">
+{{ modal_title }}
+</button>
+
+<div class="modal fade" id="languageModal-{{ modal_id }}" tabindex="-1" aria-labelledby="languageModalLabel-{{ modal_id }}">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-4" id="languageModalLabel-{{ modal_id }}">{{ modal_title }}</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>{{ modal_preamble }}</p>
+        <a href="{{ site.baseurl }}{{ page.url }}" role="button" class="btn btn-sm btn-primary">{{ site.data.base.languages["en"] }}</a>
+        {% for locale in page.with_locales %}
+        <a href="{{ site.baseurl }}/{{ locale }}{{ page.url }}" role="button" class="btn btn-sm btn-primary">{{ site.data.base.languages[locale] }}</a>
+        {% endfor %}
+      </div>
+      {% if modal_footer != "" %}
+      <div class="modal-footer">
+        <p class="small">{{ modal_footer }}</p>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>

data/_includes/base/link.html

@@ -0,0 +1 @@
+<a class="link-{{ include.color | default: 'primary' }} link-offset-3 link-offset-3-hover link-underline-{{ include.color | default: 'primary' }} link-underline-opacity-25 link-underline-opacity-75-hover" href="{{ include.url }}">{{ include.name }}</a>

data/_includes/base/script.html

@@ -4,11 +4,7 @@
 <script src="https://unpkg.com/highlightjs-copy@1.0.3/dist/highlightjs-copy.min.js"></script>
 <script>
   document.querySelectorAll('.content code').forEach(el=>el.classList.add('hljs'));
-  hljs.addPlugin(
-    new CopyButtonPlugin({
-      callback: (text, el) => console.log("Copied!", text),
-    })
-  );
+  hljs.addPlugin(new CopyButtonPlugin());
   hljs.highlightAll();
 </script>
 {% endif -%}

data/_includes/base/social.html

@@ -0,0 +1,16 @@
+{% if site.data[site.component_data_dirname]["social"] %}
+{% assign social_networks = site.data[site.component_data_dirname]["social"] %}
+{% else %}
+{% assign social_networks = site.data.base.social %}
+{% endif %}
+<div class="row">
+  <div class="mt-3 col-sm-12 col-lg-8">
+    <div class="lead">{{ site.description }}</div>
+  </div>
+
+  <div class="my-3 col-sm-12 col-lg-4 d-flex justify-content-sm-start justify-content-lg-end">
+    {% for item in social_networks -%}
+    <a class="btn border-0 btn-outline-primary fs-4" href="{{ item.link }}" role="button" aria-label="{{ item.name }}" data-bs-placement="bottom" data-bs-title="{{ item.name }}"><i class="{{ item.icon }}"></i></a>
+    {% endfor %}
+  </div>
+</div>

data/_includes/base/toc-accordion.html

@@ -6,8 +6,11 @@
     <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#pageTocAccordion">
       <div class="accordion-body small">
       {% include base/toc.html
+        id="page-toc"
         html=content
-        anchor_class="link-underline link-underline-opacity-0 link-underline-opacity-75-hover"
+        class="list-group"
+        item_class="list-unstyled"
+        anchor_class="link-primary list-group-item list-group-item-light list-group-item-action border-top-0 border-end-0 border-bottom-0 border-2 border-primary-subtle rounded-0 my-1"
       %}
       </div>
     </div>

data/_includes/base/topics.html

@@ -0,0 +1,13 @@
+<div class="row my-4">
+  {%- for topic in include.topics %}
+  {%- if topic.title != page.title %}
+  <div class="col-sm-6">
+    {%- if site.url contains "http://" or site.url contains "https://" %}
+    <p><a class="link-offset-3 link-offset-3-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="{{ topic.url }}">{{ topic.title }}</a></p>
+    {%- else %}
+    <p><a class="link-offset-3 link-offset-3-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="{{ site.url }}{{ site.baseurl }}{{ topic.url }}">{{ topic.title }}</a></p>
+    {%- endif %}
+  </div>
+  {%- endif %}
+  {%- endfor %}
+</div>

data/_layouts/base/default.html

@@ -32,7 +32,7 @@
     </div>
     {% endif %}
 
-    <main class="container bg-body py-5">
+    <main class="container bg-body py-3">
 
       {% if page.with_announcements and page.with_announcements.size > 0 -%}
       {% for announcement in page.with_announcements %}
@@ -44,47 +44,50 @@
       {% endfor %}
       {% endif -%}
 
-      {% if page.with_breadcrumbs == true %}
-      <div class="row justify-content-center">
-        <div class="col-sm-12 col-lg-8">
-          <div class="mb-4">{% include base/breadcrumbs.html %}</div>
+      {% if page.with_breadcrumbs == true or page.with_locales.size > 0 %}
+      <div class="row justify-content-center mb-5 small">
+        <div class="col">
+        {% if page.with_breadcrumbs == true %}
+        {% include base/breadcrumbs.html %}
+        {% endif %}
+        </div>
+        <div class="col-auto">
+          {% if page.with_locales.size > 0 %}
+          {% include base/languages.html %}
+          {% endif %}
         </div>
       </div>
       {% endif %}
 
-      {% if page.with_artwork == true %}
-      <div class="row justify-content-center">
+      {% if page.with_title == true -%}
+      <div class="row justify-content-center my-5">
         <div class="col-sm-12 col-lg-8">
-          <div class="my-4 artwork">
-            <img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ page.with_artwork }}" class="img-fluid rounded" alt="{{ page.title }}" />
-          </div>
+          <div class="h1">{{ page.title }}</div>
+          {% if page.with_preamble == true -%}
+          <div class="lead">{{ page.title_lead }}</div>
+          {% endif -%}
         </div>
       </div>
       {% endif %}
 
-      {% if page.with_title == true -%}
-      <div class="row justify-content-center">
+      {% if page.with_artwork != false %}
+      <div class="row justify-content-center mb-4">
         <div class="col-sm-12 col-lg-8">
-          <div class="my-4">
-            <div class="h1">{{ page.title }}</div>
-            {% if page.with_preamble == true -%}
-            <div class="lead">{{ page.title_lead }}</div>
-            {% endif -%}
-          </div>
+          <img src="{{ site.baseurl }}/assets/img/{{ page.with_artwork }}" class="img-fluid rounded bg-dark" alt="{{ page.title }}" />
         </div>
       </div>
       {% endif %}
 
       {% if page.with_toc == true %}
-      <div class="row justify-content-center">
+      <div class="row justify-content-center mb-4">
         <div class="col-sm-12 col-lg-8">
-          <div class="my-4">{% include base/toc-accordion.html %}</div>
+          {% include base/toc-accordion.html %}
         </div>
       </div>
       {% endif %}
 
       {% if page.with_content == true %}
-      <div class="row justify-content-center">
+      <div class="row justify-content-center mb-4">
         <div class="col-sm-12 col-lg-8">
           <div class="content">
           {{ content }}

data/_sass/base/_customization.scss

@@ -88,6 +88,42 @@ nav {
     }
   }
 }
+// --------------------------------------------------------------------------------
+// Alerts (p), announcements (div), and breakingnews (div)
+// --------------------------------------------------------------------------------
+p {
+  &.alert {
+    padding-left: $spacer * 3;
+    background-repeat: no-repeat;
+    background-position-y: $spacer * 1.2;
+    background-position-x: $spacer;
+    border-left-width: 0.5rem;
+  }
+  &.alert-primary {
+    background-image: $alert-primary-icon;
+  }
+  &.alert-secondary {
+    background-image: $alert-secondary-icon;
+  }
+  &.alert-danger {
+    background-image: $alert-danger-icon;
+  }
+  &.alert-warning {
+    background-image: $alert-warning-icon;
+  }
+  &.alert-info {
+    background-image: $alert-info-icon;
+  }
+  &.alert-light {
+    background-image: $alert-light-icon;
+  }
+  &.alert-dark {
+    background-image: $alert-dark-icon;
+  }
+  &.alert-success {
+    background-image: $alert-success-icon;
+  }
+}
 
 main {
   // --------------------------------------------------------------------------------
@@ -107,6 +143,11 @@ main {
     scroll-margin-bottom: 100px;
     margin-top: 3rem;
   }
+  .content > h2 {
+    border-bottom: 5px solid $primary;
+    padding-bottom: $spacer * 0.5;
+    margin-bottom: $spacer * 0.75;
+  }
   .content > figure {
     scroll-margin-top: 80px;
     scroll-margin-bottom: 100px;
@@ -119,45 +160,14 @@ main {
       border-radius: var(--bs-border-radius);
     }
     pre {
-      code.hljs {
+      .hljs {
         max-height: 50vh;
         overflow: auto;
       }
-      button.hljs-copy-button {
-        --hljs-theme-background: var(--bs-body-color);
-      }
-    }
-    // --------------------------------------------------------------------------------
-    // Alerts
-    // --------------------------------------------------------------------------------
-    p {
-      &.alert {
-        padding-left: 2.5rem;
-        background-repeat: no-repeat;
-        background-position-y: 1.25rem;
-        background-position-x: 0.8rem;
-        border-width: 0 0 0 0.5rem;
-      }
-      &.alert-primary {
-        background-image: $alert-primary-icon;
-      }
-      &.alert-secondary {
-        background-image: $alert-secondary-icon;
-      }
-      &.alert-danger {
-        background-image: $alert-danger-icon;
-      }
-      &.alert-warning {
-        background-image: $alert-warning-icon;
-      }
-      &.alert-info {
-        background-image: $alert-info-icon;
-      }
-      &.alert-light {
-        background-image: $alert-light-icon;
-      }
-      &.alert-success {
-        background-image: $alert-success-icon;
+      .hljs-copy-button {
+        top: 0.5rem;
+        right: 0.5rem;
+        --hljs-theme-background: var(--bs-primary);
       }
     }
     // --------------------------------------------------------------------------------

data/_sass/base/_variables.scss

@@ -13,9 +13,9 @@ $centos-green: #9ccd2a;
 $primary: $centos-purple;
 $secondary: $centos-orange;
 $dark: #200735;
-$success: #198754;
-$info: #0dcaf0;
-$warning: #ffc107;
+$success: $centos-green;
+$info: $centos-blue;
+$warning: $centos-orange;
 $danger: #dc3545;
 $light: #f8f9fa;
 
@@ -25,6 +25,7 @@ $success-text-emphasis: shade-color($success, 60%);
 $info-text-emphasis: shade-color($info, 60%);
 $warning-text-emphasis: shade-color($warning, 60%);
 $light-text-emphasis: shade-color($light, 60%);
+$dark-text-emphasis: shade-color($dark, 60%);
 $danger-text-emphasis: shade-color($danger, 60%);
 $dropdown-dark-bg: $dark;
 
@@ -34,6 +35,9 @@ $dropdown-dark-bg: $dark;
 $font-family-sans-serif: "Montserrat", sans-serif;
 $font-family-monospace: "Source Code Pro", monospace;
 $headings-font-weight: 700;
+$font-size-base: 1rem; // Assumes the browser default, typically `16px`
+$h1-font-size: $font-size-base * 2.75;
+
 
 // --------------------------------------------------------------------------------
 // Breadcrumb
@@ -50,6 +54,7 @@ $alert-info-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg
 $alert-danger-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1rem" fill="rgba(#{to-rgb($danger-text-emphasis)},1)" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>');
 $alert-success-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1rem" fill="rgba(#{to-rgb($success-text-emphasis)},1)" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>');
 $alert-light-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1rem" fill="rgba(#{to-rgb($light-text-emphasis)},1)" viewBox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg>');
+$alert-dark-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1rem" fill="rgba(#{to-rgb($dark-text-emphasis)},1)" viewBox="0 0 512 512"><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg>');
 
 // --------------------------------------------------------------------------------
 // Negative margins