Fix some utils

diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro
index 1cbc0f6507ba523c10584d31f9c8ae8b467b42ec..884fc8ad0474389ae5635ed1879661164ea4f5d5 100644 (file)
--- a/site/src/components/DocsSidebar.astro
+++ b/site/src/components/DocsSidebar.astro
@@ -17,15 +17,15 @@ const sidebar = getData('sidebar')
           return (
             <li class="bd-links-group py-2">
               <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
-                {/* {group.icon && (
+                {group.icon && (
                   <svg
                     class="bi me-2"
-                    style={group.icon_color && `color: var(--bs-${group.icon_color});`}
+                    style={group.icon_color && `color: var(--bs-${group.icon_color}-400);`}
                     aria-hidden="true"
                   >
                     <use xlink:href={`#${group.icon}`} />
                   </svg>
-                )} */}
+                )}
                 {group.title}
               </strong>
               <ul class="list-unstyled fw-normal pb-2">

diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
index dedc2f630d91b569a891eaa01a7a40d7a4457eac..ddc6fef88448cc96c15843d4680541bcd6e58123 100644 (file)
--- a/site/src/components/home/MastHead.astro
+++ b/site/src/components/home/MastHead.astro
@@ -10,7 +10,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
   <div class="container-2xl bd-gutter">
     <div class="col-md-8 mx-auto text-center">
       <a
-        class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none"
+        class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 color-fg lh-sm text-decoration-none"
         href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol"
         rel="noopener"
         target="_blank"

diff --git a/site/src/content/docs/customize/color.mdx b/site/src/content/docs/customize/color.mdx
index 32ff5f51fc0adb35420cc39dc8dbc55bbfea3d4e..de061012ae6e6c0c0686d54342193120497b3ba2 100644 (file)
--- a/site/src/content/docs/customize/color.mdx
+++ b/site/src/content/docs/customize/color.mdx
@@ -70,7 +70,7 @@ We use a subset of all colors to create a smaller color palette for generating c
 <div class="d-flex flex-column gap-2 mb-4">
   <h4>Background</h4>
   <div class="grid grid-cols-5 gap-3 text-lowercase">
-    <ThemeColorSwatch variable="bg-0" />
+    <ThemeColorSwatch variable="bg" />
     <ThemeColorSwatch variable="bg-1" />
     <ThemeColorSwatch variable="bg-2" />
     <ThemeColorSwatch variable="bg-3" />
@@ -80,7 +80,7 @@ We use a subset of all colors to create a smaller color palette for generating c
 <div class="d-flex flex-column gap-2 mb-4">
   <h4>Foreground</h4>
   <div class="grid grid-cols-5 gap-3 text-lowercase">
-    <ThemeColorSwatch variable="fg-0" />
+    <ThemeColorSwatch variable="fg" />
     <ThemeColorSwatch variable="fg-1" />
     <ThemeColorSwatch variable="fg-2" />
     <ThemeColorSwatch variable="fg-3" />
@@ -113,10 +113,10 @@ Here are some examples of the new colors in action:
 
 Here's a little guidance on pairing the background and border colors together. Essentially, the default `.border` utility and `border-color` value should work great 90% of the time.
 
-<Example code={`<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-emphasized)">.bg-0.border-emphasized</div>
-<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border)">.bg-0.border</div>
-<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-muted)">.bg-0.border-muted</div>
-<div class="p-3 mb-3 bg-0" style="border: 1px solid var(--bs-border-subtle)">.bg-0.border-subtle</div>`} />
+<Example code={`<div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border-emphasized)">.bg.border-emphasized</div>
+<div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border)">.bg.border</div>
+<div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border-muted)">.bg.border-muted</div>
+<div class="p-3 mb-3 bg" style="border: 1px solid var(--bs-border-subtle)">.bg.border-subtle</div>`} />
 
 For other situations, where you have a tinted background color like `.bg-1`, `.bg-2`, or `.bg-3`, consider using the emphsized border variant to maintiain a little contrast between the background and border.