adding products-based nav to Docs header

Author: talbs

packages/webawesome/docs/_includes/base.njk

@@ -53,28 +53,46 @@
 
     {# wa-page-based Header #}
     {% block pageHeader %}
-    <header slot="header" class="wa-split">
-      {# Nav toggle #}
-      <wa-button appearance="plain" size="small" data-toggle-nav>
-        <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
-        <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
-      </wa-button>
+    <header slot="header">
+      {% include 'nav-products.njk' %}
+
+      <div id="docs-header" class="wa-split">
+        <div class="wa-cluster wa-gap-2xs wa-desktop-only">
+          <wa-button appearance="plain" href="/docs/components">
+            <wa-icon name="trowel-bricks" variant="regular" label="Components"></wa-icon>
+            Components
+          </wa-button>
+          <wa-button appearance="plain" href="/docs/patterns">
+            <wa-icon name="block-brick" variant="regular" label="Patterns"></wa-icon>
+            Patterns
+          </wa-button>
+          <wa-button appearance="plain" href="/docs/themes">
+            <wa-icon name="palette" variant="regular" label="Themes"></wa-icon>
+            Themes
+          </wa-button>
+        </div>
 
-      {# Logo - Desktop #}
-      <a href="/" class="brand-logo wa-desktop-only" aria-label="Web Awesome">{% include "logo.njk" %}</a>
+        {# Nav toggle #}
+        <wa-button appearance="plain" size="small" data-toggle-nav>
+          <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
+          <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
+        </wa-button>
 
-      {# Logo - Mobile #}
-      <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
+        {# Logo - Mobile #}
+        <a href="/" class="wa-mobile-only" aria-label="Web Awesome">
+          <wa-icon name="web-awesome" family="brands" class="logo-app"></wa-icon>
+        </a>
 
-      <div id="docs-toolbar" class="wa-cluster gap-s">
-        <div class="wa-desktop-only wa-cluster wa-gap-2xs">
-          {% include "theme-selector.njk" %}
-          {% include "color-scheme-selector.njk" %}
-          {% include "github-icon-buttons.njk" %}
-        </div>
+        <div id="docs-toolbar" class="wa-cluster gap-s">
+          <div class="wa-desktop-only wa-cluster wa-gap-2xs">
+            {% include "theme-selector.njk" %}
+            {% include "color-scheme-selector.njk" %}
+            {% include "github-icon-buttons.njk" %}
+          </div>
 
-        {#- Login -#}
-        {% include "login-or-avatar.njk" ignore missing %}
+          {#- Login -#}
+          {% include "login-or-avatar.njk" ignore missing %}
+        </div>
       </div>
     </header>
     {% endblock %}
@@ -88,8 +106,8 @@
     {% if hasSidebar %}
     <div class="wa-mobile-only" slot="navigation-header">
       <div class="wa-cluster wa-gap-s">
-        <a href="/" class="logo-app" aria-label="Web Awesome">
-          <wa-icon name="web-awesome" family="brands"></wa-icon>
+        <a href="/" aria-label="Web Awesome">
+          <wa-icon name="web-awesome" family="brands" class="logo-app"></wa-icon>
         </a>
         <div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
           {% include "theme-selector.njk" %}

packages/webawesome/docs/_includes/logo-font-awesome.njk

@@ -0,0 +1 @@
+<svg class="awesome-logo logo-font-awesome" fill="none" height="16" viewBox="0 0 105 16" width="105" xmlns="http://www.w3.org/2000/svg"><path class="logo-text" fill-rule="evenodd" clip-rule="evenodd" fill="var(--logo-text-fill, #183153)" d="m78.0517 10.8597c.4123.3859 1.1755.6403 1.8158.6403 1.193 0 2.1228-.6667 2.1228-1.80699 0-.85086-.5176-1.34208-1.4825-1.74558l-.6666-.28069c-.3597-.14912-.5-.25439-.5-.47368 0-.26315.2193-.36841.5175-.36841.3103 0 .4789.13042.6334.24993.0376.02912.0744.05762.1122.08339.1316.09649.2632.13158.386.13158.3333 0 .6754-.28947.6754-.67542 0-.14035-.0438-.29824-.1754-.44736-.1404-.16667-.6316-.67543-1.6491-.66666-1.1491 0-2.0263.67543-2.0263 1.71049 0 .81578.5439 1.34208 1.4649 1.74558l.5965.26316c.4035.17543.5877.26315.5877.53507 0 .28069-.193.42109-.5965.42109-.5033 0-.8428-.27906-1.0186-.42349-.0356-.02926-.0645-.053-.0866-.06777-.1053-.07017-.2281-.10526-.3421-.10526-.3421 0-.6667.26315-.6755.66662 0 .2281.1141.4298.307.6141z M97.9115 6.2808c0-.44736-.3158-.78068-.7543-.78069-.307 0-.5176.14913-.7632.55263l-1.4298 2.2982-1.4298-2.2982c-.2456-.40351-.4561-.55263-.7631-.55263-.4386 0-.7544.33333-.7544.78069v4.4561c0 .4385.3246.7631.7544.7631s.7544-.3246.7544-.7631v-2.02632l.7543 1.20173c.2106.33329.4035.46489.6842.46489s.4737-.1316.6842-.46489l.7544-1.20173v2.02632c0 .4385.3245.7631.7544.7631.4298 0 .7543-.3246.7543-.7631z M100.516 10.6316c0 .4386.324.7631.763.7631h2.754c.395 0 .693-.2894.693-.6842 0-.3859-.289-.6754-.693-.6754h-2.009v-1.00873h1.211c.368 0 .64-.27192.64-.63157 0-.35964-.272-.63156-.64-.63156h-1.211v-.79823h1.904c.395 0 .693-.28947.693-.6842 0-.38596-.29-.67542-.693-.67542l-2.649-.00001c-.439 0-.763.32456-.763.76315z M86.8778 5.50011c1.7544 0 3.1316 1.32454 3.1316 2.99995 0 1.68414-1.3772 2.99994-3.1316 2.99994-1.7543 0-3.1139-1.3158-3.1139-2.99994 0-1.68418 1.3684-2.99995 3.1139-2.99995zm.0088 1.38594c-.9386 0-1.5789.65788-1.5789 1.61401 0 .96489.6316 1.61404 1.5789 1.61404.9298 0 1.5789-.66669 1.5789-1.61404 0-.93858-.6579-1.61401-1.5789-1.61401z M72.1721 11.3947c-.4386 0-.7632-.3245-.7632-.7631v-4.26308c0-.43859.3246-.76314.7632-.76314h2.649c.4035 0 .693.28947.693.67542 0 .39473-.2982.6842-.693.6842h-1.9034v.79823h1.2105c.3684 0 .6403.27192.6403.63157 0 .35964-.2719.63156-.6403.63156h-1.2105v1.00874h2.0087c.4035 0 .693.2895.693.6754 0 .3948-.2983.6842-.693.6842z M69.4429 6.23694c.0001-.4035-.342-.73682-.7543-.73682-.3246 0-.5877.1842-.7018.49999l-1.0438 2.85959-.9649-2.78942c-.1316-.36841-.3947-.57017-.7456-.57017s-.614.20176-.7456.57017l-.9649 2.78942-1.0526-2.88591c-.1053-.29824-.3684-.47368-.693-.47368-.4122 0-.7543.33333-.7543.73683 0 .10526.0175.20175.0789.3421l1.7105 4.41216c.1228.3334.3684.5088.7017.5088.3246 0 .5702-.1754.693-.5088l1.0263-2.78061 1.0263 2.78061c.1228.3334.3684.5088.693.5088.3333 0 .5789-.1754.7017-.5088l1.7105-4.41216c.0526-.13157.0789-.22806.0789-.3421z M60.0269 10.4123c.0526.1316.0789.2632.0789.3684 0 .4123-.3157.7193-.7456.7193-.3245 0-.5701-.1842-.7105-.5439l-.1228-.307h-2.0701l-.1228.307c-.1404.3597-.386.5439-.7105.5439-.4299 0-.7456-.307-.7456-.7193 0-.1052.0263-.2368.0789-.3684l1.8158-4.4122c.1315-.32455.3772-.49999.7193-.49999s.5877.17544.7192.5zm-2.535-2.66662-.5878 1.69295h1.1755z M35.9373 8.50006c0-1.67541-1.3771-2.99995-3.1315-2.99995-1.7456 0-3.114 1.31577-3.114 2.99995 0 1.68414 1.3597 2.99994 3.114 2.99994 1.7544 0 3.1315-1.3158 3.1315-2.99994zm-4.7016 0c0-.95613.6403-1.61401 1.5789-1.61401.921 0 1.5789.67543 1.5789 1.61401 0 .94735-.6491 1.61404-1.5789 1.61404-.9474 0-1.5789-.64915-1.5789-1.61404z M42.322 5.50011c.4298 0 .7544.32456.7544.76315v4.47364c0 .4298-.3158.7631-.7369.7631-.3875 0-.558-.2093-.7447-.4385l-.0359-.0439-2.1053-2.60526v2.32456c0 .4385-.3245.7631-.7543.7631-.4299 0-.7544-.3246-.7544-.7631v-4.47364c0-.42982.3158-.76315.7368-.76315.3876 0 .5581.20932.7448.43846l.0359.04399 2.1052 2.59644v-2.31574c0-.43859.3246-.76315.7544-.76315z M47.6275 11.5c-.4298 0-.7543-.3246-.7543-.7631v-3.7719h-1.1316c-.3947 0-.693-.28947-.693-.6842 0-.38595.2983-.67542.693-.67542h3.7719c.4035 0 .6929.28947.6929.67542 0 .39473-.2982.6842-.6929.6842h-1.1316v3.7719c0 .4385-.3245.7631-.7544.7631z M24.7544 11.5c-.4386 0-.7544-.3246-.7544-.7632v-4.36829c0-.43859.3246-.76314.7631-.76314h2.5614c.4035 0 .693.28947.693.67543 0 .39472-.2983.68419-.693.68419h-1.8158v1.10524h1.3597c.4035 0 .6929.28947.6929.67543 0 .39473-.2982.6842-.6929.6842h-1.3597v1.30694c0 .4386-.3157.7632-.7543.7632z"/><path class="logo-icon" d="m2.86642 3c.45582-.28783.75858-.79606.75858-1.375 0-.897463-.72754-1.625-1.625-1.625s-1.625.727537-1.625 1.625c0 .52033.244558.98354.625 1.28096v13.09404h2v-2h11.6751c.4556 0 .8249-.3693.8249-.8249 0-.1155-.0242-.2296-.0711-.3351l-1.9289-4.34 1.9289-4.34002c.0469-.10548.0711-.21962.0711-.33504 0-.4556-.3693-.82494-.8249-.82494z" fill="var(--logo-icon-fill, #418fde)"/></svg>

packages/webawesome/docs/_includes/logo-web-awesome.njk

@@ -0,0 +1,4 @@
+<svg class="awesome-logo logo-web-awesome" width="105" height="16" viewBox="0 0 105 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="logo-text" fill-rule="evenodd" clip-rule="evenodd" fill="var(--logo-text-fill, #183153)" d="M78.0517 11.8597C78.464 12.2456 79.2272 12.5 79.8675 12.5C81.0605 12.5 81.9903 11.8333 81.9903 10.693C81.9903 9.84215 81.4727 9.35093 80.5078 8.94743L79.8412 8.66674C79.4815 8.51762 79.3412 8.41235 79.3412 8.19306C79.3412 7.92991 79.5605 7.82465 79.8587 7.82465C80.169 7.82465 80.3376 7.95507 80.4921 8.07458C80.5297 8.1037 80.5665 8.1322 80.6043 8.15797C80.7359 8.25446 80.8675 8.28955 80.9903 8.28955C81.3236 8.28955 81.6657 8.00008 81.6657 7.61413C81.6657 7.47378 81.6219 7.31589 81.4903 7.16677C81.3499 7.0001 80.8587 6.49134 79.8412 6.50011C78.6921 6.50011 77.8149 7.17554 77.8149 8.2106C77.8149 9.02638 78.3588 9.55268 79.2798 9.95618L79.8763 10.2193C80.2798 10.3948 80.464 10.4825 80.464 10.7544C80.464 11.0351 80.271 11.1755 79.8675 11.1755C79.3642 11.1755 79.0247 10.8964 78.8489 10.752C78.8133 10.7228 78.7844 10.699 78.7623 10.6842C78.657 10.6141 78.5342 10.579 78.4202 10.579C78.0781 10.579 77.7535 10.8421 77.7447 11.2456C77.7447 11.4737 77.8588 11.6754 78.0517 11.8597Z M97.9115 7.2808C97.9115 6.83344 97.5957 6.50012 97.1572 6.50011C96.8502 6.50011 96.6396 6.64923 96.394 7.05274L94.9642 9.35094L93.5344 7.05274C93.2888 6.64923 93.0783 6.50011 92.7713 6.50011C92.3327 6.50011 92.0169 6.83344 92.0169 7.2808V11.7369C92.0169 12.1754 92.3415 12.5 92.7713 12.5C93.2011 12.5 93.5257 12.1754 93.5257 11.7369V9.71058L94.28 10.9123C94.4906 11.2456 94.6835 11.3772 94.9642 11.3772C95.2449 11.3772 95.4379 11.2456 95.6484 10.9123L96.4028 9.71058V11.7369C96.4028 12.1754 96.7273 12.5 97.1572 12.5C97.587 12.5 97.9115 12.1754 97.9115 11.7369L97.9115 7.2808Z M100.516 11.6316C100.516 12.0702 100.84 12.3947 101.279 12.3947L104.033 12.3947C104.428 12.3947 104.726 12.1053 104.726 11.7105C104.726 11.3246 104.437 11.0351 104.033 11.0351L102.024 11.0351V10.0264L103.235 10.0264C103.603 10.0264 103.875 9.75445 103.875 9.3948C103.875 9.03516 103.603 8.76324 103.235 8.76324L102.024 8.76324V7.96501L103.928 7.96501C104.323 7.96501 104.621 7.67554 104.621 7.28081C104.621 6.89485 104.331 6.60539 103.928 6.60539L101.279 6.60538C100.84 6.60538 100.516 6.92994 100.516 7.36853V11.6316Z M86.8778 6.50011C88.6322 6.50011 90.0094 7.82465 90.0094 9.50006C90.0094 11.1842 88.6322 12.5 86.8778 12.5C85.1235 12.5 83.7639 11.1842 83.7639 9.50006C83.7639 7.81588 85.1323 6.50011 86.8778 6.50011ZM86.8866 7.88605C85.948 7.88605 85.3077 8.54393 85.3077 9.50006C85.3077 10.4649 85.9393 11.1141 86.8866 11.1141C87.8164 11.1141 88.4655 10.4474 88.4655 9.50006C88.4655 8.56148 87.8076 7.88605 86.8866 7.88605Z M72.1721 12.3947C71.7335 12.3947 71.4089 12.0702 71.4089 11.6316V7.36852C71.4089 6.92993 71.7335 6.60538 72.1721 6.60538L74.8211 6.60538C75.2246 6.60538 75.5141 6.89485 75.5141 7.2808C75.5141 7.67553 75.2159 7.965 74.8211 7.965L72.9177 7.965V8.76323L74.1282 8.76323C74.4966 8.76323 74.7685 9.03515 74.7685 9.3948C74.7685 9.75444 74.4966 10.0264 74.1282 10.0264L72.9177 10.0264V11.0351L74.9264 11.0351C75.3299 11.0351 75.6194 11.3246 75.6194 11.7105C75.6194 12.1053 75.3211 12.3947 74.9264 12.3947L72.1721 12.3947Z M69.4429 7.23694C69.443 6.83344 69.1009 6.50012 68.6886 6.50012C68.364 6.50012 68.1009 6.68432 67.9868 7.00011L66.943 9.8597L65.9781 7.07028C65.8465 6.70187 65.5834 6.50011 65.2325 6.50011C64.8816 6.50011 64.6185 6.70187 64.4869 7.07028L63.522 9.8597L62.4694 6.97379C62.3641 6.67555 62.101 6.50011 61.7764 6.50011C61.3642 6.50011 61.0221 6.83344 61.0221 7.23694C61.0221 7.3422 61.0396 7.43869 61.101 7.57904L62.8115 11.9912C62.9343 12.3246 63.1799 12.5 63.5132 12.5C63.8378 12.5 64.0834 12.3246 64.2062 11.9912L65.2325 9.21059L66.2588 11.9912C66.3816 12.3246 66.6272 12.5 66.9518 12.5C67.2851 12.5 67.5307 12.3246 67.6535 11.9912L69.364 7.57904C69.4166 7.44747 69.4429 7.35098 69.4429 7.23694Z M60.0269 11.4123C60.0795 11.5439 60.1058 11.6755 60.1058 11.7807C60.1058 12.193 59.7901 12.5 59.3602 12.5C59.0357 12.5 58.7901 12.3158 58.6497 11.9561L58.5269 11.6491L56.4568 11.6491L56.334 11.9561C56.1936 12.3158 55.948 12.5 55.6235 12.5C55.1936 12.5 54.8779 12.193 54.8779 11.7807C54.8779 11.6755 54.9042 11.5439 54.9568 11.4123L56.7726 7.0001C56.9041 6.67555 57.1498 6.50011 57.4919 6.50011C57.834 6.50011 58.0796 6.67555 58.2111 7.00011L60.0269 11.4123ZM57.4919 8.74568L56.9041 10.4386L58.0796 10.4386L57.4919 8.74568Z M35.6665 6.50013C36.0788 6.50013 36.4209 6.83346 36.4209 7.23696C36.4209 7.35099 36.3946 7.44748 36.3419 7.57906L34.6314 11.9912C34.5086 12.3246 34.263 12.5 33.9297 12.5C33.6051 12.5 33.3595 12.3246 33.2367 11.9912L32.2104 9.2106L31.1841 11.9912C31.0613 12.3246 30.8157 12.5 30.4912 12.5C30.1578 12.5 29.9122 12.3246 29.7894 11.9912L28.0789 7.57906C28.0175 7.43871 28 7.34222 28 7.23696C28 6.83346 28.3421 6.50013 28.7544 6.50013C29.0789 6.50013 29.3421 6.67557 29.4473 6.97381L30.4999 9.85971L31.4648 7.07029C31.5964 6.70188 31.8596 6.50013 32.2104 6.50013C32.5613 6.50013 32.8245 6.70188 32.956 7.07029L33.9209 9.85971L34.9648 7.00012C35.0788 6.68434 35.3419 6.50013 35.6665 6.50013Z M38.3868 11.6316C38.3868 12.0702 38.7114 12.3947 39.15 12.3947H41.9043C42.299 12.3947 42.5973 12.1052 42.5973 11.7105C42.5973 11.3246 42.3078 11.0351 41.9043 11.0351H39.8956V10.0263H41.1061C41.4745 10.0263 41.7464 9.75442 41.7464 9.39478C41.7464 9.03514 41.4745 8.76321 41.1061 8.76321H39.8956V7.96498H41.799C42.1938 7.96498 42.492 7.67552 42.492 7.28079C42.492 6.89483 42.2025 6.60536 41.799 6.60536H39.15C38.7114 6.60536 38.3868 6.92992 38.3868 7.36851V11.6316Z M49.5021 10.6754C49.5021 10.0176 49.1425 9.53512 48.5372 9.28952C48.7653 9.03514 48.8881 8.70181 48.8881 8.31585C48.8881 7.31587 48.0723 6.60536 46.932 6.60536H45.6075C45.1689 6.60536 44.8443 6.92992 44.8443 7.36851V11.6316C44.8443 12.0702 45.1689 12.3947 45.6075 12.3947H47.546C48.6776 12.3947 49.5021 11.6754 49.5021 10.6754ZM46.2917 7.87727H46.8355C47.1864 7.87727 47.4145 8.07024 47.4145 8.38603C47.4145 8.70181 47.1864 8.89479 46.8355 8.89479H46.2917V7.87727ZM48.0285 10.614C48.0285 10.9386 47.818 11.1228 47.4496 11.1228H46.2917V10.1053H47.4496C47.818 10.1053 48.0285 10.2895 48.0285 10.614Z"/>
+<path class="logo-icon" d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--logo-icon-fill, #F36944)"/>
+</svg>

packages/webawesome/docs/_includes/nav-products.njk

@@ -0,0 +1,11 @@
+<div class="wrapper-nav-products">
+  <nav id="nav-products" aria-label="Awesomeverse Products"
+    class="wa-cluster wa-align-items-stretch wa-gap-0 wa-desktop-only">
+    <a href="/" class="product product-web-awesome product-active">
+      {% include "logo-web-awesome.njk" %}
+    </a>
+    <a href="https://fontawesome.com/" class="product product-font-awesome">
+      {% include "logo-font-awesome.njk" %}
+    </a>
+  </nav>
+</div>

packages/webawesome/docs/assets/styles/docs.css

@@ -91,11 +91,6 @@ wa-page > [slot='banner'] {
 }
 
 /* Header */
-wa-page::part(header) {
-  background-color: var(--wa-color-surface-default);
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
-}
-
 wa-page::part(body) {
   padding-top: 0px;
 }
@@ -105,21 +100,49 @@ wa-page::part(header-actions) {
 }
 
 wa-page > header {
-  padding-inline: var(--wa-space-xl);
+  /* reset default page component-based header styles */
+  background-color: var(--wa-color-surface-lowered);
+  padding: 0;
+  gap: 0;
 
-  a[href='/'] {
-    color: var(--wa-color-text-normal);
-    line-height: 1;
+  .wrapper-nav-products {
+    background-color: var(--wa-color-surface-lowered);
+    padding-inline: var(--wa-space-xl);
   }
 
-  .brand-logo {
-    color: var(--wa-color-text-normal);
-    line-height: 1;
+  #nav-products {
+    .product {
+      padding: var(--wa-space-m) var(--wa-space-xl);
+    }
+
+    .product:first-child {
+      /* negate padding-inline to align with main content below */
+      margin-inline-start: calc(var(--wa-space-xl) * -1);
+    }
+
+    .product-active {
+      background-color: var(--wa-color-surface-default);
+    }
+
+    .awesome-logo {
+      width: auto;
+      height: var(--awesome-logo-height, 1.5rem);
+    }
   }
 
-  .brand-logo svg {
-    width: auto;
-    height: 1.75rem;
+  #docs-header {
+    background-color: var(--wa-color-surface-default);
+    border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
+    padding: var(--wa-space-s) var(--wa-space-xl);
+  }
+
+  /* icon-based logo */
+  .logo-app {
+    font-size: var(--wa-font-size-xl);
+  }
+
+  a:has(.logo-app) {
+    padding-inline: var(--wa-space-m);
   }
 
   wa-button[data-toggle-nav] {

packages/webawesome/docs/assets/styles/utils.css

@@ -25,6 +25,15 @@
   .logo-app {
     color: var(--wa-brand-orange);
   }
+
+  .logo-font-awesome {
+    --logo-text-fill: var(--wa-color-text-normal);
+  }
+
+  .logo-web-awesome {
+    /* --logo-icon-fill: var(--wa-brand-orange); */
+    --logo-text-fill: var(--wa-color-text-normal);
+  }
   /* #endregion */
 
   /* #region layout utilities */