@stacksjs/components 0.2.176 → 0.2.177

package/src/ui/input/PasswordInput.stx

@@ -18,16 +18,16 @@ const iconSizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
 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 pr-10'
 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'
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${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()
 export const iconClasses = iconSizeClasses[size]
 </script>
 
@@ -105,7 +105,7 @@ defineExpose({ value: inputValue })
       <button
         type="button"
         @click="toggleVisibility()"
-        class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+        class="text-fg-subtle hover:text-fg-muted focus:outline-none"
         :aria-label="toggleAriaLabel()"
       >
         <svg :show="showPassword()" class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -122,10 +122,10 @@ defineExpose({ value: inputValue })
   @if(showStrength)
     <div :show="inputValue().length > 0" class="mt-2">
       <div class="flex items-center justify-between mb-1">
-        <span class="text-xs text-gray-600 dark:text-gray-400">Password strength</span>
+        <span class="text-xs text-fg-muted">Password strength</span>
         <span class="text-xs font-medium" :class="strengthLabelColor()" x-text="strengthText()"></span>
       </div>
-      <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+      <div class="w-full h-1.5 bg-surface-sunken rounded-full overflow-hidden">
         <div
           class="h-full transition-all duration-300 rounded-full"
           :class="strengthColor()"

package/src/ui/input/TextInput.stx

@@ -22,17 +22,17 @@ const iconSizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
 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 = leftIcon ? 'pl-10' : rightIcon || clearable ? '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()
 export const iconClasses = iconSizeClasses[size]
 export const inputId = `input-${label}`
 </script>
@@ -74,7 +74,7 @@ defineExpose({ value: inputValue, clear: onClear })
   <div class="relative">
     @if(leftIcon)
       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! leftIcon !!}</span>
+        <span class="{{ iconClasses }} text-fg-subtle">{!! leftIcon !!}</span>
       </div>
     @endif
 
@@ -98,7 +98,7 @@ defineExpose({ value: inputValue, clear: onClear })
         <button
           type="button"
           @click="onClear()"
-          class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+          class="text-fg-subtle hover:text-fg-muted focus:outline-none"
           aria-label="Clear input"
         >
           <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -109,7 +109,7 @@ defineExpose({ value: inputValue, clear: onClear })
     @endif
     @if(rightIcon && !clearable)
       <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! rightIcon !!}</span>
+        <span class="{{ iconClasses }} text-fg-subtle">{!! rightIcon !!}</span>
       </div>
     @endif
   </div>
@@ -125,7 +125,7 @@ defineExpose({ value: inputValue, clear: onClear })
       @endif
 
       @if(showCount && maxLength)
-        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="charCount()"></p>
+        <p class="text-sm text-fg-soft" x-text="charCount()"></p>
       @endif
     </div>
   @endif

package/src/ui/listbox/ListboxOption.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-listbox-check>
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info" data-stx-listbox-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/navigator/Navigator.stx

@@ -35,23 +35,23 @@ function getItemClasses(item) {
   let cls = sizeClasses[size] || sizeClasses.md
   if (variant === 'default') {
     cls += isActiveItem
-      ? ' text-gray-900 dark:text-gray-100 font-medium'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+      ? 'text-fg font-medium'
+      : 'text-fg-muted hover:text-fg'
   }
   else if (variant === 'pills') {
     cls += isActiveItem
       ? ' bg-blue-600 text-white font-medium rounded-full'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full'
+      : 'text-fg-strong hover:bg-surface-raised rounded-full'
   }
   else if (variant === 'underline') {
     cls += isActiveItem
-      ? ' text-blue-600 dark:text-blue-400 font-medium border-b-2 border-blue-600 dark:border-blue-400'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent'
+      ? 'text-info font-medium border-b-2 border-info'
+      : 'text-fg-muted hover:text-fg border-b-2 border-transparent'
   }
   else if (variant === 'sidebar') {
     cls += isActiveItem
-      ? ' bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium border-l-4 border-blue-600 dark:border-blue-400'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-l-4 border-transparent'
+      ? 'bg-blue-50 dark:bg-blue-900/20 text-info font-medium border-l-4 border-info'
+      : 'text-fg-strong hover:bg-surface-raised border-l-4 border-transparent'
   }
   cls += ' transition-all duration-200 cursor-pointer flex items-center gap-2'
   if (item.disabled) cls += ' opacity-50 cursor-not-allowed pointer-events-none'
@@ -74,8 +74,8 @@ defineExpose({ activeKey })
 <nav class="{{ containerClasses }} {{ gapClasses }}" role="navigation" aria-label="Main navigation">
   @foreach(item in items)
     @if(item.href)
-      <a
-        href="{{ item.href }}"
+      <StxLink
+        to="{{ item.href }}"
         :class="getItemClasses({{ JSON.stringify(item) }})"
         @click="onClickItem({{ JSON.stringify(item) }}, $event)"
         :aria-current="isActive({{ JSON.stringify(item) }}) ? 'page' : null"
@@ -86,11 +86,11 @@ defineExpose({ activeKey })
         @endif
         <span>{{ item.label }}</span>
         @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-surface-sunken text-fg-strong">
             {{ item.badge }}
           </span>
         @endif
-      </a>
+      </StxLink>
     @else
       <button
         type="button"
@@ -103,7 +103,7 @@ defineExpose({ activeKey })
         @endif
         <span>{{ item.label }}</span>
         @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-surface-sunken text-fg-strong">
             {{ item.badge }}
           </span>
         @endif

package/src/ui/pagination/Pagination.stx

@@ -7,9 +7,9 @@ export const showPrevNext = $props.showPrevNext ?? true
 export const className = $props.className || ''
 
 export const paginationClasses = `flex items-center gap-1 ${className}`.trim()
-export const buttonClasses = `px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
-export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 border border-blue-600 dark:border-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-gray-400 dark:text-gray-600`.trim()
+export const buttonClasses = `px-3 py-2 text-sm font-medium text-fg-strong bg-white dark:bg-gray-800 border border-line-strong rounded-md hover:bg-surface focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
+export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-info-solid border border-info rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-fg-subtle`.trim()
 export const iconClasses = `w-5 h-5`.trim()
 </script>
 

package/src/ui/payment/Checkout.stx

@@ -24,7 +24,7 @@ export const isOneTime = mode === 'one-time'
 
 @if(isOneTime)
   <div class="p-8 text-center">
-    <p class="text-gray-600 dark:text-gray-400">
+    <p class="text-fg-muted">
       One-time payment mode is not yet implemented.
     </p>
   </div>

package/src/ui/payment/DefaultPaymentMethod.stx

@@ -15,33 +15,33 @@ export const containerClasses = `mt-16 w-2/3 bg-white dark:bg-blue-gray-800 px-8
 </script>
 
 <div class="{{ containerClasses }}">
-  <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+  <h2 class="text-lg text-fg font-medium">
     Payment Info
   </h2>
 
   @if(isLoading)
     <!-- Loading skeleton -->
     <div class="mt-8 animate-pulse">
-      <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+      <div class="h-20 bg-surface-sunken rounded-lg"></div>
     </div>
   @else
     @if(paymentMethod)
-      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+      <div class="col-span-1 mt-8 border border-line rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-line">
         <div class="w-full p-3">
           <div class="flex items-center justify-between">
             <div class="flex items-center space-x-4">
               <!-- Card Brand Icon -->
-              <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
+              <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-surface-raised rounded-md">
                 <span class="text-2xl">{{ brandIcons[paymentMethod.brand.toLowerCase()] || brandIcons.default }}</span>
               </div>
 
               <!-- Card Details -->
               <div>
-                <h2 class="text-sm text-gray-600 dark:text-gray-300">
+                <h2 class="text-sm text-fg-muted">
                   {{ paymentMethod.brand }} •••• {{ paymentMethod.last_four }}
                   <span class="ml-4 inline-flex items-center rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs text-indigo-700 dark:text-indigo-300 font-medium ring-1 ring-indigo-700/10 dark:ring-indigo-300/20 ring-inset">Default</span>
                   <br>
-                  <span class="text-xs text-gray-500 dark:text-gray-400 italic">Expires {{ paymentMethod.exp_month }} / {{ paymentMethod.exp_year }}</span>
+                  <span class="text-xs text-fg-soft italic">Expires {{ paymentMethod.exp_month }} / {{ paymentMethod.exp_year }}</span>
                 </h2>
               </div>
             </div>
@@ -50,9 +50,9 @@ export const containerClasses = `mt-16 w-2/3 bg-white dark:bg-blue-gray-800 px-8
       </div>
     @else
       <!-- Empty state -->
-      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+      <div class="col-span-1 mt-8 border border-line rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-line">
         <div class="w-full px-4 py-5">
-          <h2 class="text-center text-sm text-gray-600 dark:text-gray-300">
+          <h2 class="text-center text-sm text-fg-muted">
             You haven't added any payment methods yet.
           </h2>
         </div>

package/src/ui/payment/PaymentMethods.stx

@@ -33,25 +33,25 @@ function onDelete(methodId) {
 <div class="{{ containerClasses }}">
   @if(isLoading)
     <div class="animate-pulse">
-      <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+      <div class="h-24 bg-surface-sunken rounded-lg"></div>
     </div>
   @else
     @if(paymentMethods.length > 0)
       <ul role="list" class="grid grid-cols-1 gap-6 lg:grid-cols-1 sm:grid-cols-1">
         @foreach(method in paymentMethods)
-          <li class="col-span-1 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+          <li class="col-span-1 border border-line rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-line">
             <div class="w-full p-3">
               <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-4">
-                  <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
+                  <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-surface-raised rounded-md">
                     <span class="text-2xl">{{ brandIcons[method.brand.toLowerCase()] || brandIcons.default }}</span>
                   </div>
 
                   <div>
-                    <h2 class="text-sm text-gray-600 dark:text-gray-300">
+                    <h2 class="text-sm text-fg-muted">
                       {{ method.brand }} •••• {{ method.last_four }}
                     </h2>
-                    <span class="text-xs text-gray-500 dark:text-gray-400 italic">
+                    <span class="text-xs text-fg-soft italic">
                       Expires {{ method.exp_month }} / {{ method.exp_year }}
                     </span>
                   </div>
@@ -61,7 +61,7 @@ function onDelete(methodId) {
                   @if(showMakeDefault)
                     <button
                       type="button"
-                      class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 font-semibold shadow-sm hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                      class="border border-line-strong rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-fg-strong font-semibold shadow-sm hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                       @click="onMakeDefault('{{ method.id }}')"
                       title="Make default"
                     >
@@ -74,7 +74,7 @@ function onDelete(methodId) {
                   @if(showDelete)
                     <button
                       type="button"
-                      class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-red-600 dark:text-red-400 font-semibold shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 focus-visible:outline-2 focus-visible:outline-red-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                      class="border border-line-strong rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-danger font-semibold shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 focus-visible:outline-2 focus-visible:outline-red-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                       @click="onDelete('{{ method.id }}')"
                       title="Delete payment method"
                     >
@@ -90,12 +90,12 @@ function onDelete(methodId) {
         @endforeach
       </ul>
     @else
-      <div class="text-center py-12 bg-white dark:bg-blue-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-        <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <div class="text-center py-12 bg-white dark:bg-blue-gray-800 rounded-lg border border-line">
+        <svg class="mx-auto h-12 w-12 text-fg-subtle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
         </svg>
-        <h3 class="mt-2 text-sm text-gray-900 dark:text-gray-100 font-medium">No payment methods</h3>
-        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        <h3 class="mt-2 text-sm text-fg font-medium">No payment methods</h3>
+        <p class="mt-1 text-sm text-fg-soft">
           You haven't added any payment methods yet.
         </p>
       </div>

package/src/ui/payment/SubscriptionCheckout.stx

@@ -115,12 +115,12 @@ onMount(() => initializeStripe())
       <div>
         <!-- Contact Information -->
         <div>
-          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+          <h2 class="text-lg text-fg font-medium">
             Contact information
           </h2>
 
           <div class="mt-4">
-            <label for="email-address" class="block text-sm text-gray-700 dark:text-gray-300 font-medium">
+            <label for="email-address" class="block text-sm text-fg-strong font-medium">
               Email address
             </label>
             <div class="mt-1">
@@ -130,21 +130,21 @@ onMount(() => initializeStripe())
                 name="email-address"
                 autocomplete="email"
                 required
-                class="block w-full border border-gray-300 dark:border-gray-600 rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-gray-900 dark:text-gray-100 focus:border-indigo-500 dark:focus:border-indigo-400 sm:text-sm focus:ring-indigo-500 dark:focus:ring-indigo-400"
+                class="block w-full border border-line-strong rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-fg focus:border-indigo-500 dark:focus:border-indigo-400 sm:text-sm focus:ring-indigo-500 dark:focus:ring-indigo-400"
               />
             </div>
           </div>
         </div>
 
         <!-- Billing Information -->
-        <div class="mt-10 border-t border-gray-200 dark:border-gray-700 pt-10">
-          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+        <div class="mt-10 border-t border-line pt-10">
+          <h2 class="text-lg text-fg font-medium">
             Billing information
           </h2>
 
           <div class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
             <div class="sm:col-span-2">
-              <label for="card-name" class="block text-sm text-gray-700 dark:text-gray-300 font-medium">
+              <label for="card-name" class="block text-sm text-fg-strong font-medium">
                 Name on card
               </label>
               <div class="mt-1">
@@ -154,21 +154,21 @@ onMount(() => initializeStripe())
                   name="card-name"
                   autocomplete="cc-name"
                   required
-                  class="block w-full border border-gray-300 dark:border-gray-600 rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-gray-900 dark:text-gray-100 focus:border-indigo-500 sm:text-sm focus:ring-indigo-500"
+                  class="block w-full border border-line-strong rounded-md p-2 shadow-sm bg-white dark:bg-blue-gray-700 text-fg focus:border-indigo-500 sm:text-sm focus:ring-indigo-500"
                 />
               </div>
             </div>
 
             <!-- Stripe Element Mount Point -->
             <div class="sm:col-span-2">
-              <div id="payment-element" class="mt-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 p-3"></div>
+              <div id="payment-element" class="mt-2 border border-line-strong rounded-md bg-white dark:bg-blue-gray-700 p-3"></div>
             </div>
           </div>
         </div>
 
         <!-- Payment Type -->
-        <div class="mt-10 border-t border-gray-200 dark:border-gray-700 pt-10">
-          <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+        <div class="mt-10 border-t border-line pt-10">
+          <h2 class="text-lg text-fg font-medium">
             Payment
           </h2>
 
@@ -181,9 +181,9 @@ onMount(() => initializeStripe())
                   name="payment-type"
                   type="radio"
                   checked
-                  class="h-4 w-4 border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400"
+                  class="h-4 w-4 border-line-strong text-accent focus:ring-indigo-500 dark:focus:ring-indigo-400"
                 />
-                <label for="credit-card" class="ml-3 block text-sm text-gray-700 dark:text-gray-300 font-medium">
+                <label for="credit-card" class="ml-3 block text-sm text-fg-strong font-medium">
                   Credit card
                 </label>
               </div>
@@ -194,22 +194,22 @@ onMount(() => initializeStripe())
 
       <!-- Right Column - Order Summary -->
       <div class="mt-10 lg:mt-0">
-        <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+        <h2 class="text-lg text-fg font-medium">
           Order summary
         </h2>
 
-        <div class="mt-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow-sm">
+        <div class="mt-4 border border-line rounded-lg bg-white dark:bg-blue-gray-800 shadow-sm">
           <h3 class="sr-only">Items in your cart</h3>
 
           <!-- Product List -->
-          <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
+          <ul role="list" class="divide-y divide-line">
             @foreach(product in products)
               <li class="flex px-4 py-6 sm:px-6">
                 <div class="flex-shrink-0">
                   @if(product.images)
                     <img src="{{ product.images }}" alt="{{ product.name }}" class="w-20 rounded-md" />
                   @else
-                    <div class="w-20 h-20 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
+                    <div class="w-20 h-20 bg-surface-sunken rounded-md flex items-center justify-center">
                       <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                       </svg>
@@ -221,9 +221,15 @@ onMount(() => initializeStripe())
                   <div class="flex">
                     <div class="min-w-0 flex-1">
                       <h4 class="text-sm">
-                        <a href="#" class="text-gray-700 dark:text-gray-300 font-medium hover:text-gray-800 dark:hover:text-gray-200">
-                          {{ product.name }}
-                        </a>
+                        @if(product.href)
+                          <StxLink to="{{ product.href }}" class="text-fg-strong font-medium hover:text-gray-800 dark:hover:text-gray-200">
+                            {{ product.name }}
+                          </StxLink>
+                        @else
+                          <span class="text-fg-strong font-medium">
+                            {{ product.name }}
+                          </span>
+                        @endif
                       </h4>
                     </div>
 
@@ -231,7 +237,7 @@ onMount(() => initializeStripe())
                       <div class="ml-4 flow-root flex-shrink-0">
                         <button
                           type="button"
-                          class="flex items-center justify-center bg-white dark:bg-blue-gray-700 p-2.5 text-gray-400 dark:text-gray-500 -m-2.5 hover:text-gray-500 dark:hover:text-gray-400"
+                          class="flex items-center justify-center bg-white dark:bg-blue-gray-700 p-2.5 text-fg-subtle -m-2.5 hover:text-fg-soft"
                           @click="onRemoveProduct('{{ product.id }}')"
                           title="Remove"
                         >
@@ -245,7 +251,7 @@ onMount(() => initializeStripe())
                   </div>
 
                   <div class="flex flex-1 items-end justify-between pt-2">
-                    <p class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-medium">
+                    <p class="mt-1 text-sm text-fg font-medium">
                       ${{ (product.price / 100).toFixed(2) }}
                     </p>
 
@@ -254,7 +260,7 @@ onMount(() => initializeStripe())
                       <select
                         id="quantity-{{ product.id }}"
                         name="quantity"
-                        class="border border-gray-300 dark:border-gray-600 rounded-md text-left text-base text-gray-700 dark:text-gray-300 font-medium shadow-sm bg-white dark:bg-blue-gray-700 focus:border-indigo-500 sm:text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                        class="border border-line-strong rounded-md text-left text-base text-fg-strong font-medium shadow-sm bg-white dark:bg-blue-gray-700 focus:border-indigo-500 sm:text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
                       >
                         <option value="1" {{ (product.quantity || 1) === 1 ? 'selected' : '' }}>1</option>
                         <option value="2" {{ (product.quantity || 1) === 2 ? 'selected' : '' }}>2</option>
@@ -273,18 +279,18 @@ onMount(() => initializeStripe())
           </ul>
 
           <!-- Summary Totals -->
-          <dl class="border-t border-gray-200 dark:border-gray-700 px-4 py-6 space-y-6 sm:px-6">
+          <dl class="border-t border-line px-4 py-6 space-y-6 sm:px-6">
             <div class="flex items-center justify-between">
-              <dt class="text-sm text-gray-600 dark:text-gray-400">Subtotal</dt>
-              <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
+              <dt class="text-sm text-fg-muted">Subtotal</dt>
+              <dd class="text-sm text-fg font-medium">
                 ${{ (subtotal / 100).toFixed(2) }}
               </dd>
             </div>
 
             @if(shipping > 0)
               <div class="flex items-center justify-between">
-                <dt class="text-sm text-gray-600 dark:text-gray-400">Shipping</dt>
-                <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
+                <dt class="text-sm text-fg-muted">Shipping</dt>
+                <dd class="text-sm text-fg font-medium">
                   ${{ (shipping / 100).toFixed(2) }}
                 </dd>
               </div>
@@ -292,26 +298,26 @@ onMount(() => initializeStripe())
 
             @if(taxes > 0)
               <div class="flex items-center justify-between">
-                <dt class="text-sm text-gray-600 dark:text-gray-400">Taxes</dt>
-                <dd class="text-sm text-gray-900 dark:text-gray-100 font-medium">
+                <dt class="text-sm text-fg-muted">Taxes</dt>
+                <dd class="text-sm text-fg font-medium">
                   ${{ (taxes / 100).toFixed(2) }}
                 </dd>
               </div>
             @endif
 
-            <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-6">
-              <dt class="text-base text-gray-900 dark:text-gray-100 font-medium">Total</dt>
-              <dd class="text-base text-gray-900 dark:text-gray-100 font-medium">
+            <div class="flex items-center justify-between border-t border-line pt-6">
+              <dt class="text-base text-fg font-medium">Total</dt>
+              <dd class="text-base text-fg font-medium">
                 ${{ (total / 100).toFixed(2) }}
               </dd>
             </div>
           </dl>
 
           <!-- Submit Button -->
-          <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-6 sm:px-6">
+          <div class="border-t border-line px-4 py-6 sm:px-6">
             <button
               type="submit"
-              class="w-full border border-transparent rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-3 text-base text-white font-medium shadow-sm hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900"
+              class="w-full border border-transparent rounded-md bg-accent-solid px-4 py-3 text-base text-white font-medium shadow-sm hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900"
             >
               Confirm order
             </button>

package/src/ui/progress/Progress.stx

@@ -11,11 +11,11 @@ export const className = $props.className || ''
 const linearSizeClasses = { sm: 'h-1', md: 'h-2', lg: 'h-3' }
 const circularSizeClasses = { sm: 'w-12 h-12', md: 'w-16 h-16', lg: 'w-24 h-24' }
 const colorClasses = {
-  primary: 'bg-blue-600 dark:bg-blue-500',
+  primary: 'bg-info-solid',
   secondary: 'bg-purple-600 dark:bg-purple-500',
-  success: 'bg-green-600 dark:bg-green-500',
+  success: 'bg-success-solid',
   warning: 'bg-yellow-600 dark:bg-yellow-500',
-  danger: 'bg-red-600 dark:bg-red-500',
+  danger: 'bg-danger-solid',
   info: 'bg-cyan-600 dark:bg-cyan-500',
 }
 
@@ -28,16 +28,16 @@ export const containerClasses = variant === 'linear'
   ? `w-full ${className}`.trim()
   : `inline-flex items-center justify-center ${className}`.trim()
 
-export const linearTrackClasses = `w-full ${linearSizeClasses[size]} bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden`.trim()
+export const linearTrackClasses = `w-full ${linearSizeClasses[size]} bg-surface-sunken rounded-full overflow-hidden`.trim()
 export const linearBarClasses = `h-full ${colorClasses[color]} transition-all duration-300 ease-in-out ${indeterminate ? 'animate-progress-indeterminate' : ''}`.trim()
 export const circularSizeClass = circularSizeClasses[size]
-export const labelClasses = `text-sm font-medium text-gray-700 dark:text-gray-300 mb-2`.trim()
+export const labelClasses = `text-sm font-medium text-fg-strong mb-2`.trim()
 export const circularTrackColor = 'stroke-gray-200 dark:stroke-gray-700'
-export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stroke-blue-500'
+export const circularBarColor = color === 'primary' ? 'stroke-info'
   : color === 'secondary' ? 'stroke-purple-600 dark:stroke-purple-500'
-  : color === 'success' ? 'stroke-green-600 dark:stroke-green-500'
+  : color === 'success' ? 'stroke-success'
   : color === 'warning' ? 'stroke-yellow-600 dark:stroke-yellow-500'
-  : color === 'danger' ? 'stroke-red-600 dark:stroke-red-500'
+  : color === 'danger' ? 'stroke-danger'
   : 'stroke-cyan-600 dark:stroke-cyan-500'
 </script>
 
@@ -112,7 +112,7 @@ defineExpose({ value, setValue: (v) => value.set(v) })
 
       @if(showLabel)
         <div class="absolute inset-0 flex items-center justify-center">
-          <span class="text-sm font-semibold text-gray-700 dark:text-gray-300" x-text="percentLabel()"></span>
+          <span class="text-sm font-semibold text-fg-strong" x-text="percentLabel()"></span>
         </div>
       @endif
     </div>

package/src/ui/radio/Radio.stx

@@ -11,13 +11,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 = '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 = '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 radioClasses = `${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 = `radio-${value || label}`
 </script>