style(callouts): make notes/tips/warnings/danger more readable (#548)

Author: stasadev

src/pages/support-ddev.astro

@@ -42,8 +42,8 @@ const title = `Support DDEV`
         <p>
           <strong>Our Current Goal:</strong> We need <strong>$12,000/month</strong> to fully fund both maintainers. We're currently at $6,300/month (See the header for current status!). Your contribution directly ensures DDEV's sustainability and continued excellence.
         </p>
-        <div class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border-l-4 border-blue-500 my-8">
-          <h3 class="font-semibold text-blue-800 dark:text-blue-200 mt-0">Ways to Support Financially</h3>
+        <div class="bg-cyan-100 dark:bg-cyan-900/50 p-6 rounded-lg border-l-4 border-cyan-600 dark:border-cyan-400 my-8">
+          <h3 class="font-semibold text-slate-900 dark:text-slate-100 mt-0">Ways to Support Financially</h3>
           <ul class="mb-0">
             <li><strong>GitHub Sponsors:</strong> Perfect for individuals and organizations who prefer monthly recurring support</li>
             <li><strong>Direct Invoicing:</strong> Many organizations prefer direct billing. <a href="/contact">Contact us</a> to set this up</li>
@@ -77,14 +77,14 @@ const title = `Support DDEV`
           Community contributions help reduce the maintenance burden on our funded maintainers, allowing them to focus on core development and new features.
         </p>
         <div class="grid md:grid-cols-2 gap-6 my-8">
-          <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
-            <h3 class="font-semibold mb-3 mt-0">💬 Help Others in the Community</h3>
-            <p class="mb-4">Answer questions on <a href={DISCORD_URL} target="_blank">Discord</a> and in the <a href="https://github.com/ddev/ddev/issues" target="_blank">GitHub Issue Queue</a>. Every question you answer helps our maintainers focus on development.</p>
+          <div class="bg-green-100 dark:bg-green-900/50 p-6 rounded-lg border-l-4 border-green-600 dark:border-green-400">
+            <h3 class="font-semibold mb-3 mt-0 text-slate-900 dark:text-slate-100">💬 Help Others in the Community</h3>
+            <p class="mb-4 text-slate-800 dark:text-slate-200">Answer questions on <a href={DISCORD_URL} target="_blank">Discord</a> and in the <a href="https://github.com/ddev/ddev/issues" target="_blank">GitHub Issue Queue</a>. Every question you answer helps our maintainers focus on development.</p>
             <a href={DISCORD_URL} target="_blank" class="text-blue-600 dark:text-blue-400 font-medium">Join Discord →</a>
           </div>
-          <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
-            <h3 class="font-semibold mb-3 mt-0">🛠 Contribute Code & Docs</h3>
-            <p class="mb-4">File issues, submit PRs, improve documentation—every contribution helps.</p>
+          <div class="bg-green-100 dark:bg-green-900/50 p-6 rounded-lg border-l-4 border-green-600 dark:border-green-400">
+            <h3 class="font-semibold mb-3 mt-0 text-slate-900 dark:text-slate-100">🛠 Contribute Code & Docs</h3>
+            <p class="mb-4 text-slate-800 dark:text-slate-200">File issues, submit PRs, improve documentation—every contribution helps.</p>
             <a href="https://github.com/ddev/ddev/blob/main/CONTRIBUTING.md" target="_blank" class="text-blue-600 dark:text-blue-400 font-medium">Contributing Guide →</a>
           </div>
         </div>

src/styles/callouts.css

@@ -10,53 +10,53 @@
 
 .callout-note,
 .callout-info {
-  @apply border-blue-500 bg-blue-50 dark:bg-blue-950/30;
+  @apply border-cyan-600 bg-cyan-100 dark:border-cyan-400 dark:bg-cyan-900/50;
 }
 
 .callout-note .callout-title,
 .callout-info .callout-title {
-  @apply text-blue-900 dark:text-blue-200;
+  @apply text-slate-900 dark:text-slate-100;
 }
 
 .callout-note p,
 .callout-info p {
-  @apply text-blue-800 dark:text-blue-300;
+  @apply text-slate-800 dark:text-slate-200;
 }
 
 .callout-tip {
-  @apply border-green-500 bg-green-50 dark:bg-green-950/30;
+  @apply border-green-600 bg-green-100 dark:border-green-400 dark:bg-green-900/50;
 }
 
 .callout-tip .callout-title {
-  @apply text-green-900 dark:text-green-200;
+  @apply text-slate-900 dark:text-slate-100;
 }
 
 .callout-tip p {
-  @apply text-green-800 dark:text-green-300;
+  @apply text-slate-800 dark:text-slate-200;
 }
 
 .callout-warning {
-  @apply border-yellow-500 bg-yellow-50 dark:bg-yellow-950/30;
+  @apply border-yellow-600 bg-yellow-100 dark:border-yellow-400 dark:bg-yellow-900/50;
 }
 
 .callout-warning .callout-title {
-  @apply text-yellow-900 dark:text-yellow-200;
+  @apply text-slate-900 dark:text-slate-100;
 }
 
 .callout-warning p {
-  @apply text-yellow-800 dark:text-yellow-300;
+  @apply text-slate-800 dark:text-slate-200;
 }
 
 .callout-danger {
-  @apply border-red-500 bg-red-50 dark:bg-red-950/30;
+  @apply border-red-600 bg-red-100 dark:border-red-400 dark:bg-red-900/50;
 }
 
 .callout-danger .callout-title {
-  @apply text-red-900 dark:text-red-200;
+  @apply text-slate-900 dark:text-slate-100;
 }
 
 .callout-danger p {
-  @apply text-red-800 dark:text-red-300;
+  @apply text-slate-800 dark:text-slate-200;
 }
 
 /* Remove extra margins from last paragraph in callout */