From 1adb710ea3e6d83aaf60223b2f833d4f9f20006a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Mon, 31 Aug 2026 22:32:30 +0200
Subject: [PATCH] Fix unreadable links in important alerts and the sign-in
 cover page (#2919)

---
 .changeset/alerts-important-action-example.md | 6 ++++++
 .changeset/fix-alert-important-links.md       | 5 +++++
 .changeset/fix-sign-in-cover-dark-mode.md     | 5 +++++
 core/scss/ui/_alerts.scss                     | 9 ++++-----
 docs/content/ui/components/alert.mdx          | 6 ++++++
 preview/pages/alerts.astro                    | 2 ++
 preview/pages/sign-in-cover.astro             | 2 +-
 7 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/alerts-important-action-example.md
 create mode 100644 .changeset/fix-alert-important-links.md
 create mode 100644 .changeset/fix-sign-in-cover-dark-mode.md

diff --git a/.changeset/alerts-important-action-example.md b/.changeset/alerts-important-action-example.md
new file mode 100644
index 000000000..1c76da7f6
--- /dev/null
+++ b/.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.
diff --git a/.changeset/fix-alert-important-links.md b/.changeset/fix-alert-important-links.md
new file mode 100644
index 000000000..03c6e7b4b
--- /dev/null
+++ b/.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.
diff --git a/.changeset/fix-sign-in-cover-dark-mode.md b/.changeset/fix-sign-in-cover-dark-mode.md
new file mode 100644
index 000000000..577472c5c
--- /dev/null
+++ b/.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`.
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 43e18663f..aace528b8 100644
--- a/core/scss/ui/_alerts.scss
+++ b/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 {
diff --git a/docs/content/ui/components/alert.mdx b/docs/content/ui/components/alert.mdx
index 28549fc53..2f4b866a8 100644
--- a/docs/content/ui/components/alert.mdx
+++ b/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.
diff --git a/preview/pages/alerts.astro b/preview/pages/alerts.astro
index 93e461ea7..01889e5af 100644
--- a/preview/pages/alerts.astro
+++ b/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>
diff --git a/preview/pages/sign-in-cover.astro b/preview/pages/sign-in-cover.astro
index 500e4fa4a..ad03574cc 100644
--- a/preview/pages/sign-in-cover.astro
+++ b/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">