@stacksjs/components 0.2.176 → 0.2.177

package/src/ui/auth/Login.stx

@@ -8,12 +8,28 @@ export const showSignup = $props.showSignup ?? true
 export const signupText = $props.signupText || 'Start a 14 day free trial'
 export const className = $props.className || ''
 
+// These two used to be `href="#"`, which is not a link an app can wire — so
+// adopting <Login> meant a form with two dead ends and no prop to fix them
+// (#1930). They are real navigation, so they route through <StxLink>: an app on
+// the SPA router gets a client-side transition, and an absolute URL still gets a
+// native one because the router excludes those.
+export const forgotPasswordHref = $props.forgotPasswordHref || '/forgot-password'
+export const signupHref = $props.signupHref || '/register'
+
 export const containerClasses = `min-h-full flex flex-col justify-center py-12 lg:px-8 sm:px-6 dark:bg-blue-gray-900 ${className}`.trim()
 </script>
 
 <script client>
 const emit = defineEmits()
 
+// The social buttons used to be `<a href="#">` — a link that navigates
+// nowhere and that a host app had no way to wire (#1930). They are not
+// navigation, so they are real buttons now, and the provider is emitted so
+// the app can start its own OAuth flow.
+function onSocial(provider) {
+  emit('social', { provider })
+}
+
 function onSubmit(event) {
   event.preventDefault()
   const formData = new FormData(event.target)
@@ -32,7 +48,7 @@ function onSubmit(event) {
     @if(showLogo)
       <img src="/logo.svg" alt="Logo" class="mx-auto h-11 w-auto" />
     @endif
-    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
+    <h2 class="mt-6 text-center text-2xl text-fg font-bold leading-9 tracking-tight">
       {{ headingText }}
     </h2>
   </div>
@@ -42,7 +58,7 @@ function onSubmit(event) {
       <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
         <div class="space-y-6">
           <div>
-            <label for="email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            <label for="email" class="block text-sm text-fg font-medium leading-6">
               Email address
             </label>
             <div class="mt-2">
@@ -52,13 +68,13 @@ function onSubmit(event) {
                 type="email"
                 autocomplete="email"
                 required
-                class="block w-full border-0 rounded-md py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
+                class="block w-full border-0 rounded-md py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
               />
             </div>
           </div>
 
           <div>
-            <label for="password" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            <label for="password" class="block text-sm text-fg font-medium leading-6">
               Password
             </label>
             <div class="mt-2">
@@ -68,7 +84,7 @@ function onSubmit(event) {
                 type="password"
                 autocomplete="current-password"
                 required
-                class="block w-full border-0 rounded-md py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
+                class="block w-full border-0 rounded-md py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
               />
             </div>
           </div>
@@ -80,9 +96,9 @@ function onSubmit(event) {
                   id="remember-me"
                   name="remember-me"
                   type="checkbox"
-                  class="h-4 w-4 border-gray-300 dark:border-gray-600 rounded text-indigo-600 focus:ring-indigo-600 dark:bg-blue-gray-700"
+                  class="h-4 w-4 border-line-strong rounded text-indigo-600 focus:ring-indigo-600 dark:bg-blue-gray-700"
                 />
-                <label for="remember-me" class="ml-3 block text-sm text-gray-900 dark:text-gray-100 leading-6">
+                <label for="remember-me" class="ml-3 block text-sm text-fg leading-6">
                   Remember me
                 </label>
               </div>
@@ -90,9 +106,9 @@ function onSubmit(event) {
 
             @if(showForgotPassword)
               <div class="text-sm leading-6">
-                <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold hover:text-indigo-500 dark:hover:text-indigo-300">
+                <StxLink to="{{ forgotPasswordHref }}" class="text-accent font-semibold hover:text-indigo-500 dark:hover:text-indigo-300">
                   Forgot password?
-                </a>
+                </StxLink>
               </div>
             @endif
           </div>
@@ -111,19 +127,20 @@ function onSubmit(event) {
           <div>
             <div class="relative mt-10">
               <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                <div class="w-full border-t border-gray-200 dark:border-gray-600"></div>
+                <div class="w-full border-t border-line"></div>
               </div>
               <div class="relative flex justify-center text-sm font-medium leading-6">
-                <span class="bg-white dark:bg-blue-gray-800 px-6 text-gray-900 dark:text-gray-100">
+                <span class="bg-white dark:bg-blue-gray-800 px-6 text-fg">
                   Or continue with
                 </span>
               </div>
             </div>
 
             <div class="grid grid-cols-2 mt-6 gap-4">
-              <a
-                href="#"
-                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+              <button
+                type="button"
+                @click="onSocial('google')"
+                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-fg font-semibold shadow-sm ring-1 ring-line-strong ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
               >
                 <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
                   <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
@@ -132,28 +149,29 @@ function onSubmit(event) {
                   <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
                 </svg>
                 <span class="text-sm font-semibold leading-6">Google</span>
-              </a>
+              </button>
 
-              <a
-                href="#"
-                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+              <button
+                type="button"
+                @click="onSocial('github')"
+                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-fg font-semibold shadow-sm ring-1 ring-line-strong ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
               >
                 <svg class="h-5 w-5 fill-[#24292F]" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                   <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
                 </svg>
                 <span class="text-sm font-semibold leading-6">GitHub</span>
-              </a>
+              </button>
             </div>
           </div>
         @endif
       </div>
 
       @if(showSignup)
-        <p class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
+        <p class="mt-10 text-center text-sm text-fg-soft">
           Not a member?
-          <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold leading-6 hover:text-indigo-500 dark:hover:text-indigo-300">
+          <StxLink to="{{ signupHref }}" class="text-accent font-semibold leading-6 hover:text-indigo-500 dark:hover:text-indigo-300">
             {{ signupText }}
-          </a>
+          </StxLink>
         </p>
       @endif
     </div>

package/src/ui/auth/Signup.stx

@@ -9,6 +9,14 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
 <script client>
 const emit = defineEmits()
 
+// The social buttons used to be `<a href="#">` — a link that navigates
+// nowhere and that a host app had no way to wire (#1930). They are not
+// navigation, so they are real buttons now, and the provider is emitted so
+// the app can start its own OAuth flow.
+function onSocial(provider) {
+  emit('social', { provider })
+}
+
 function onSubmit(event) {
   event.preventDefault()
   const formData = new FormData(event.target)
@@ -33,7 +41,7 @@ function onSubmit(event) {
 
 <div class="{{ containerClasses }}">
   <div class="sm:mx-auto sm:max-w-md sm:w-full">
-    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
+    <h2 class="mt-6 text-center text-2xl text-fg font-bold leading-9 tracking-tight">
       {{ headingText }}
     </h2>
   </div>
@@ -42,7 +50,7 @@ function onSubmit(event) {
     <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
       <form class="space-y-6" @submit="onSubmit($event)">
         <div>
-          <label for="name" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          <label for="name" class="block text-sm text-fg font-medium leading-6">
             Full Name
           </label>
           <div class="mt-2">
@@ -52,13 +60,13 @@ function onSubmit(event) {
               type="text"
               autocomplete="name"
               required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
             />
           </div>
         </div>
 
         <div>
-          <label for="email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          <label for="email" class="block text-sm text-fg font-medium leading-6">
             Email address
           </label>
           <div class="mt-2">
@@ -68,13 +76,13 @@ function onSubmit(event) {
               type="email"
               autocomplete="email"
               required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
             />
           </div>
         </div>
 
         <div>
-          <label for="confirm_email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          <label for="confirm_email" class="block text-sm text-fg font-medium leading-6">
             Confirm Email
           </label>
           <div class="mt-2">
@@ -84,13 +92,13 @@ function onSubmit(event) {
               type="email"
               autocomplete="email"
               required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
             />
           </div>
         </div>
 
         <div>
-          <label for="password" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          <label for="password" class="block text-sm text-fg font-medium leading-6">
             Password
           </label>
           <div class="mt-2">
@@ -100,7 +108,7 @@ function onSubmit(event) {
               type="password"
               autocomplete="new-password"
               required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
             />
           </div>
         </div>
@@ -119,19 +127,20 @@ function onSubmit(event) {
         <div>
           <div class="relative mt-10">
             <div class="absolute inset-0 flex items-center" aria-hidden="true">
-              <div class="w-full border-t border-gray-200 dark:border-gray-600"></div>
+              <div class="w-full border-t border-line"></div>
             </div>
             <div class="relative flex justify-center text-sm font-medium leading-6">
-              <span class="bg-white dark:bg-blue-gray-800 px-6 text-gray-900 dark:text-gray-100">
+              <span class="bg-white dark:bg-blue-gray-800 px-6 text-fg">
                 Or signup with
               </span>
             </div>
           </div>
 
           <div class="grid grid-cols-2 mt-6 gap-4">
-            <a
-              href="#"
-              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+            <button
+              type="button"
+              @click="onSocial('google')"
+              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-fg font-semibold shadow-sm ring-1 ring-line-strong ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
             >
               <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
                 <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
@@ -140,17 +149,18 @@ function onSubmit(event) {
                 <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
               </svg>
               <span class="text-sm font-semibold leading-6">Google</span>
-            </a>
+            </button>
 
-            <a
-              href="#"
-              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+            <button
+              type="button"
+              @click="onSocial('github')"
+              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-fg font-semibold shadow-sm ring-1 ring-line-strong ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
             >
               <svg class="h-5 w-5 fill-[#24292F] dark:fill-white" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                 <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
               </svg>
               <span class="text-sm font-semibold leading-6">GitHub</span>
-            </a>
+            </button>
           </div>
         </div>
       @endif

package/src/ui/auth/TwoFactorChallenge.stx

@@ -56,10 +56,10 @@ function onRecoveryCode(event) {
   <div class="mx-auto max-w-sm rounded-md px-8 py-4 shadow-md bg-white dark:bg-blue-gray-800">
     <div class="card-body">
       <div>
-        <h3 class="text-center text-sm text-gray-900 dark:text-gray-100 font-semibold">
+        <h3 class="text-center text-sm text-fg font-semibold">
           {{ headingText }}
         </h3>
-        <label for="code-0" class="mt-4 block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+        <label for="code-0" class="mt-4 block text-sm text-fg font-medium leading-6">
           {{ labelText }}
         </label>
         <form @submit="onSubmit($event)">
@@ -71,7 +71,7 @@ function onRecoveryCode(event) {
                 maxlength="1"
                 name="code-{{ i }}"
                 placeholder="-"
-                class="block w-full border-0 rounded-md px-2 py-2 text-center text-gray-900 dark:text-gray-100 ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
+                class="block w-full border-0 rounded-md px-2 py-2 text-center text-fg ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
                 @input="onCodeInput($event, {{ i }})"
                 @keydown="onKeyDown($event, {{ i }})"
               />
@@ -87,22 +87,22 @@ function onRecoveryCode(event) {
           </div>
         </form>
         <div>
-          <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
+          <p class="text-xs text-fg-strong font-semibold">
             {{ instructionText }}
           </p>
         </div>
         @if(showRecoveryCode)
           <div class="mt-4">
-            <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
+            <p class="text-xs text-fg-strong font-semibold">
               Having Problems?
             </p>
-            <a
-              href="#"
+            <button
+              type="button"
               @click="onRecoveryCode($event)"
               class="text-xs text-blue-500 hover:underline"
             >
               Use recovery code instead
-            </a>
+            </button>
           </div>
         @endif
       </div>

package/src/ui/avatar/Avatar.stx

@@ -35,9 +35,9 @@ const statusColorClasses = {
 }
 
 export const containerClasses = `relative inline-block ${className}`.trim()
-export const avatarClasses = `flex items-center justify-center overflow-hidden bg-gray-200 dark:bg-gray-700 ${sizeClasses[size]} ${shapeClasses[shape]}`.trim()
+export const avatarClasses = `flex items-center justify-center overflow-hidden bg-surface-sunken ${sizeClasses[size]} ${shapeClasses[shape]}`.trim()
 export const imageClasses = `w-full h-full object-cover`.trim()
-export const initialsClasses = `font-medium text-gray-600 dark:text-gray-300 uppercase select-none`.trim()
+export const initialsClasses = `font-medium text-fg-muted uppercase select-none`.trim()
 export const statusClasses = status ? `absolute bottom-0 right-0 ${statusSizeClasses[size]} ${statusColorClasses[status]} ${shapeClasses[shape]} border-white dark:border-gray-900`.trim() : ''
 export const displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).join('').substring(0, 2) : '?')
 </script>

package/src/ui/badge/Badge.stx

@@ -6,7 +6,7 @@ export const removable = $props.removable || false
 export const className = $props.className || ''
 
 const variantClasses = {
-  default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+  default: 'bg-surface-raised text-gray-800 dark:text-gray-300',
   primary: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
   secondary: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
   success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',

package/src/ui/breadcrumb/Breadcrumb.stx

@@ -19,10 +19,10 @@ const separatorElement = separator === '/' ? '/' :
   separator
 
 export const breadcrumbClasses = `flex items-center flex-wrap gap-2 text-sm ${className}`.trim()
-export const itemClasses = `text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-150`.trim()
-export const activeItemClasses = `text-gray-900 dark:text-gray-100 font-medium`.trim()
-export const separatorClasses = `text-gray-400 dark:text-gray-600 select-none`.trim()
-export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default`.trim()
+export const itemClasses = `text-fg-muted hover:text-fg transition-colors duration-150`.trim()
+export const activeItemClasses = `text-fg font-medium`.trim()
+export const separatorClasses = `text-fg-subtle select-none`.trim()
+export const collapsedClasses = `text-fg-subtle cursor-default`.trim()
 </script>
 
 <nav class="{{ breadcrumbClasses }}" aria-label="Breadcrumb">
@@ -47,8 +47,8 @@ export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default
             </span>
           @else
             <!-- Link item -->
-            <a
-              href="{{ item.href }}"
+            <StxLink
+              to="{{ item.href }}"
               class="{{ itemClasses }}"
             >
               @if(item.icon)
@@ -59,7 +59,7 @@ export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default
               @else
                 {{ item.label }}
               @endif
-            </a>
+            </StxLink>
           @endif
         @endif
 

package/src/ui/button/Button.stx

@@ -11,9 +11,9 @@ export const className = $props.className || ''
 
 const variantClasses = {
   primary: 'bg-blue-500 hover:bg-blue-600 text-white shadow-md hover:shadow-lg dark:bg-blue-600 dark:hover:bg-blue-700',
-  secondary: 'bg-neutral-200 hover:bg-neutral-300 text-neutral-900 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-white',
+  secondary: 'bg-surface-sunken hover:bg-neutral-300 text-neutral-900 dark:hover:bg-neutral-600 dark:text-white',
   outline: 'border-2 border-blue-500 text-blue-500 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-950',
-  ghost: 'hover:bg-neutral-100 text-neutral-700 dark:hover:bg-neutral-800 dark:text-neutral-300',
+  ghost: 'hover:bg-surface-raised text-fg-strong',
   danger: 'bg-red-500 hover:bg-red-600 text-white shadow-md hover:shadow-lg dark:bg-red-600 dark:hover:bg-red-700',
 }
 

package/src/ui/calendar/Calendar.stx

@@ -12,10 +12,10 @@ export const highlightToday = $props.highlightToday !== false
 const baseClasses = 'bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-sm'
 export const calendarClasses = `${baseClasses} ${className}`.trim()
 export const headerClasses = 'flex items-center justify-between mb-4'
-export const monthYearClasses = 'text-lg font-semibold text-gray-900 dark:text-gray-100'
-export const buttonClasses = 'p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors'
+export const monthYearClasses = 'text-lg font-semibold text-fg'
+export const buttonClasses = 'p-2 hover:bg-surface-raised rounded-md transition-colors'
 export const weekdaysClasses = 'grid grid-cols-7 gap-1 mb-2'
-export const weekdayClasses = 'text-center text-xs font-medium text-gray-600 dark:text-gray-400 py-2'
+export const weekdayClasses = 'text-center text-xs font-medium text-fg-muted py-2'
 export const daysGridClasses = 'grid grid-cols-7 gap-1'
 
 const valueIso = value ? new Date(value).toISOString() : null
@@ -121,10 +121,10 @@ function dayClasses(day) {
   const isTodayDate = isToday(day.date)
   const disabled = isDisabled(day.date)
   let cls = base
-  cls += day.isCurrentMonth ? ' text-gray-900 dark:text-gray-100' : ' text-gray-400 dark:text-gray-600'
-  cls += disabled ? ' opacity-50 cursor-not-allowed' : ' cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700'
-  if (isSelected) cls += ' bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
-  if (isTodayDate && highlightToday && !isSelected) cls += ' border-2 border-blue-600 dark:border-blue-400'
+  cls += day.isCurrentMonth ? 'text-fg' : 'text-fg-subtle'
+  cls += disabled ? ' opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-surface-raised'
+  if (isSelected) cls += 'bg-info-solid text-white hover:bg-blue-700 dark:hover:bg-blue-600'
+  if (isTodayDate && highlightToday && !isSelected) cls += 'border-2 border-info'
   return cls
 }
 
@@ -179,7 +179,7 @@ defineExpose({ selectedDate, currentMonth, selectDate })
     <div class="mt-4 flex justify-center">
       <button
         type="button"
-        class="px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-700 rounded-md transition-colors"
+        class="px-4 py-2 text-sm font-medium text-info hover:bg-blue-50 dark:hover:bg-gray-700 rounded-md transition-colors"
         @click="goToToday()"
       >
         Today

package/src/ui/card/Card.stx

@@ -8,10 +8,10 @@ export const imageAlt = $props.imageAlt || ''
 export const className = $props.className || ''
 
 const variantClasses = {
-  default: 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
-  outlined: 'bg-transparent border-2 border-gray-300 dark:border-gray-600',
+  default: 'bg-white dark:bg-gray-800 border border-line',
+  outlined: 'bg-transparent border-2 border-line-strong',
   elevated: 'bg-white dark:bg-gray-800 shadow-lg border-0',
-  flat: 'bg-gray-50 dark:bg-gray-900 border-0',
+  flat: 'bg-surface border-0',
 }
 
 const paddingClasses = { none: 'p-0', sm: 'p-3', default: 'p-6', lg: 'p-8' }

package/src/ui/checkbox/Checkbox.stx

@@ -12,13 +12,13 @@ export const name = $props.name || ''
 export const className = $props.className || ''
 
 const sizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
-const baseClasses = 'rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-600 dark:focus:ring-indigo-500 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
-const stateClasses = error ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400' : ''
+const baseClasses = 'rounded border-line-strong text-accent focus:ring-accent focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
+const stateClasses = error ? 'border-red-300 dark:border-red-600 text-danger focus:ring-red-500 dark:focus:ring-red-400' : ''
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 
 export const checkboxClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses}`.trim()
-export const labelClasses = `text-sm font-medium ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
-export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const labelClasses = `text-sm font-medium ${error ? 'text-danger' : 'text-fg'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
+export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-fg-soft'}`.trim()
 export const inputId = `checkbox-${value || label}`
 </script>
 

package/src/ui/combobox/ComboboxOption.stx

@@ -4,7 +4,7 @@ export const disabled = $props.disabled || false
 export const className = $props.className || ''
 export const as = $props.as || 'li'
 
-const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-neutral-900 dark:text-neutral-100 hover:bg-blue-100 dark:hover:bg-blue-900'
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-fg hover:bg-blue-100 dark:hover:bg-blue-900'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
 export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
 export const valueJson = JSON.stringify(value === undefined ? null : value)
@@ -32,7 +32,7 @@ function onClick(event) {
   @if(disabled)aria-disabled="true"@endif
   @click="onClick($event)"
 >
-  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-combobox-check>
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info" data-stx-combobox-check>
     <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
       <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
     </svg>

package/src/ui/command-palette/CommandPaletteItem.stx

@@ -2,7 +2,7 @@
 export const className = $props.className || ''
 export const value = $props.value
 
-const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2 text-neutral-900 dark:text-neutral-100 hover:bg-blue-600 hover:text-white'
+const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2 text-fg hover:bg-blue-600 hover:text-white'
 export const itemClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/src/ui/dialog/DialogDescription.stx

@@ -2,7 +2,7 @@
 export const className = $props.className || ''
 export const as = $props.as || 'p'
 
-const baseClasses = 'mt-2 text-sm text-neutral-500 dark:text-neutral-400'
+const baseClasses = 'mt-2 text-sm text-fg-soft'
 const descriptionClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/src/ui/drawer/Drawer.stx

@@ -88,7 +88,7 @@ defineExpose({
           <div class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-blue-gray-800 py-6 shadow-xl">
             @if(title)
               <div class="px-4 sm:px-6">
-                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                <h2 class="text-base font-semibold text-fg">
                   {{ title }}
                 </h2>
               </div>

package/src/ui/dropdown/DropdownItem.stx

@@ -4,7 +4,7 @@ export const as = $props.as || 'div'
 export const disabled = $props.disabled || false
 export const value = $props.value
 
-const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors text-neutral-900 dark:text-neutral-100 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600'
+const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors text-fg hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 export const itemClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
 </script>

package/src/ui/form/Form.stx

@@ -10,7 +10,7 @@ export const validateOnChange = $props.validateOnChange === true
 export const validateOnBlur = $props.validateOnBlur === true
 
 export const formClasses = `space-y-6 ${className}`.trim()
-export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
+export const errorClasses = `mt-1 text-sm text-danger`.trim()
 </script>
 
 <script client>

package/src/ui/input/NumberInput.stx

@@ -19,17 +19,17 @@ const sizeClasses = { sm: 'px-3 py-1.5 text-sm h-8', md: 'px-4 py-2 text-base h-
 const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100'
 const stateClasses = error
   ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+  : 'ring-line-strong text-fg placeholder-fg-subtle focus:ring-accent'
 const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  ? 'opacity-50 cursor-not-allowed bg-surface'
   : readonly
-    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
+    ? 'bg-surface cursor-default'
     : 'bg-white dark:bg-blue-gray-700'
 const paddingClasses = showControls ? 'pr-10' : ''
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${inputClassName}`.trim()
-export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
-export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-danger' : 'text-fg'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-danger' : 'text-fg-soft'}`.trim()
 </script>
 
 <script client>
@@ -97,7 +97,7 @@ defineExpose({ value: inputValue, increment, decrement })
         <button
           type="button"
           @click="increment()"
-          class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none border-b border-gray-300 dark:border-gray-600"
+          class="flex items-center justify-center w-8 h-1/2 text-fg-subtle hover:text-fg-muted focus:outline-none border-b border-line-strong"
           aria-label="Increment"
         >
           <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -107,7 +107,7 @@ defineExpose({ value: inputValue, increment, decrement })
         <button
           type="button"
           @click="decrement()"
-          class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+          class="flex items-center justify-center w-8 h-1/2 text-fg-subtle hover:text-fg-muted focus:outline-none"
           aria-label="Decrement"
         >
           <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">