Fix unreadable links in important alerts and the sign-in cover page (#2919)

.changeset/alerts-important-action-example.md

@@ -0,0 +1,6 @@
+---
+"@tabler/preview": patch
+"@tabler/docs": patch
+---
+
+Added `action` and `link` examples to the important alerts in the alerts preview and docs pages.

.changeset/fix-alert-important-links.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.alert-action` and `.alert-link` colors inside `.alert-important` so links stay readable.

.changeset/fix-sign-in-cover-dark-mode.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fixed the sign-in cover page in dark mode by replacing `bg-white` with `bg-surface`.

core/scss/ui/_alerts.scss

@@ -81,16 +81,15 @@
 }
 
 .alert-important {
-  color: var(--white);
+  // Set the shared color token so every child that reads it - text, icon,
+  // `.alert-action`, `.alert-link` - flips to white instead of the variant
+  // color, which is the background here.
+  --alert-color: var(--white);
   background-color: var(--alert-variant-color);
 
   .alert-description {
     color: inherit;
   }
-
-  .alert-icon {
-    color: inherit;
-  }
 }
 
 .alert-minor {

docs/content/ui/components/alert.mdx

@@ -284,6 +284,12 @@ You can also use other elements, like icons and dismissible buttons, with this t
 </div>
 </Example>
 
+Links work here too. Both `alert-link` and `alert-action` follow the alert color, so they turn white on the solid background.
+
+<Example>
+<Alert variant="important" color="danger" title="An error occurred!" action="Try again" /> <Alert variant="important" color="info" title="Your plan renews next week." link="See the details" />
+</Example>
+
 ## Custom alert color
 
 You're not limited to the 4 default alert colors. You can use any [base color](/ui/base/colors) you want.

preview/pages/alerts.astro

@@ -69,6 +69,8 @@ import DocsLink from '@ui/DocsLink.astro'
           <Alert showClose variant="important" color="success" title="This is a custom alert box!" description="This is a custom alert box with a description." />
           <Alert showClose variant="important" color="warning" title="This is a custom alert box!" description="This is a custom alert box with a description." />
           <Alert showClose variant="important" color="info" title="This is a custom alert box!" description="This is a custom alert box with a description." />
+          <Alert showClose variant="important" action="Link" color="danger" title="An error occurred!" />
+          <Alert showClose variant="important" link="Link" color="info" title="Just a quick note!" />
         </CardBody>
       </Card>
     </div>

preview/pages/sign-in-cover.astro

@@ -8,7 +8,7 @@ import photos from '@data/photos.json'
 import { requireIndex } from '@shared/lib/array'
 ---
 
-<BaseLayout title="Sign in with cover" bodyClass="d-flex flex-column bg-white">
+<BaseLayout title="Sign in with cover" bodyClass="d-flex flex-column bg-surface">
   <main id="content" class="row g-0 flex-fill">
     <div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
       <div class="container container-tight my-5 px-lg-5">