fix(Alert): text color token

clukhei · clukhei · commit 71a7f002f033 · 2026-05-14T09:35:41.000+08:00
diff --git a/playground/Alert.html b/playground/Alert.html
@@ -7,17 +7,40 @@
     <link href="../src/css/sgds.css" rel="stylesheet" type="text/css" />
     <link href="./css/utility.css" rel="stylesheet" type="text/css" />
     <style>
+      body {
+        background-color: var(--sgds-bg-default);
+        transition: background-color 0.2s;
+      }
       .container {
         max-width: 800px;
         margin: 36px auto;
         display: flex;
         flex-direction: column;
         gap: 36px;
       }
+      .toggle-bar {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background-color: var(--sgds-surface-raised);
+        border-radius: 8px;
+      }
+      .toggle-bar label {
+        font-weight: 600;
+        font-size: 14px;
+      }
     </style>
   </head>
   <body>
     <div class="container">
+      <div class="toggle-bar">
+        <label>Theme:</label>
+        <sgds-button id="theme-toggle" size="sm" variant="outline">Switch to Night Mode</sgds-button>
+      </div>
       <div>
         <h2>Info (default)</h2>
         <sgds-alert show variant="info" title="Info Alert" dismissible>
@@ -160,5 +183,16 @@ <h2>Action slot — Outlined</h2>
         </sgds-alert>
       </div>
     </div>
+
+    <script>
+      const toggleBtn = document.getElementById("theme-toggle");
+      let isDark = false;
+
+      toggleBtn.addEventListener("click", () => {
+        isDark = !isDark;
+        document.documentElement.classList.toggle("sgds-night-theme", isDark);
+        toggleBtn.textContent = isDark ? "Switch to Day Mode" : "Switch to Night Mode";
+      });
+    </script>
   </body>
 </html>
diff --git a/src/components/Alert/alert.css b/src/components/Alert/alert.css
@@ -3,7 +3,7 @@
 }
 
 :host([variant="warning"]) .alert {
-  --sgds-alert-color: var(--sgds-warning-fixed-dark);
+  --sgds-alert-color: var(--sgds-color-fixed-dark);
   background-color: var(--sgds-warning-surface-default);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`:host([variant="warning"]) .alert {`
`6`		`- --sgds-alert-color: var(--sgds-warning-fixed-dark);`
	`6`	`+ --sgds-alert-color: var(--sgds-color-fixed-dark);`
`7`	`7`	`background-color: var(--sgds-warning-surface-default);`
`8`	`8`	`}`
`9`	`9`