@stacksjs/components 0.2.176 → 0.2.178

package/dist/{Spinner-7dahavkd.stx → Spinner-ypya5tt2.stx}

@@ -16,19 +16,19 @@ const sizeClasses = {
 
 // Color classes
 const colorClasses = {
-  primary: 'text-blue-600 dark:text-blue-500',
+  primary: 'text-info',
   secondary: 'text-purple-600 dark:text-purple-500',
-  success: 'text-green-600 dark:text-green-500',
+  success: 'text-success',
   warning: 'text-yellow-600 dark:text-yellow-500',
-  danger: 'text-red-600 dark:text-red-500',
+  danger: 'text-danger',
   info: 'text-cyan-600 dark:text-cyan-500',
   white: 'text-white',
-  gray: 'text-gray-600 dark:text-gray-400',
+  gray: 'text-fg-muted',
 }
 
 export const containerClasses = `inline-flex flex-col items-center gap-2 ${className}`.trim()
 export const spinnerClasses = `${sizeClasses[size]} ${colorClasses[color]} animate-spin`.trim()
-export const labelClasses = `text-sm font-medium text-gray-700 dark:text-gray-300`.trim()
+export const labelClasses = `text-sm font-medium text-fg-strong`.trim()
 
 // Dots size classes
 const dotsSizeClasses = {
@@ -40,11 +40,11 @@ const dotsSizeClasses = {
 }
 
 const dotsColorClasses = {
-  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',
   white: 'bg-white',
   gray: 'bg-gray-600 dark:bg-gray-400',

package/dist/{StepperStep-wxgembat.stx → StepperStep-3ahq4d9m.stx}

@@ -29,7 +29,7 @@ function onClick() {
     @click="onClick()"
     class="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg p-2"
   >
-    <div class="{{ isComplete ? 'bg-blue-600 dark:bg-blue-500' : isCurrent ? 'bg-blue-600 dark:bg-blue-500 ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">
+    <div class="{{ isComplete ? 'bg-info-solid' : isCurrent ? 'bg-info-solid ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">
       @if(isComplete)
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
@@ -41,11 +41,11 @@ function onClick() {
 
     @if(label)
       <div class="text-left">
-        <div class="text-sm font-medium {{ isCurrent ? 'text-blue-600 dark:text-blue-400' : 'text-neutral-900 dark:text-white' }}">
+        <div class="text-sm font-medium {{ isCurrent ? 'text-info' : 'text-neutral-900 dark:text-white' }}">
           {{ label }}
         </div>
         @if(description)
-          <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          <div class="text-xs text-fg-soft">
             {{ description }}
           </div>
         @endif

package/dist/{SubscriptionCheckout-zy2ycrmw.stx → SubscriptionCheckout-7fdkwf04.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/dist/{Switch-p1bcr9ks.stx → Switch-hdta55a8.stx}

@@ -53,7 +53,7 @@ defineExpose({ isChecked, toggle })
 
 <label class="inline-flex items-center gap-3 cursor-pointer">
   @if(label)
-    <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+    <span class="text-sm font-medium text-fg-strong">
       {{ label }}
     </span>
   @endif

package/dist/{Table-6cx8az9h.stx → Table-0mc3fdek.stx}

@@ -3,7 +3,7 @@ export const className = $props.className || ''
 export const striped = $props.striped || false
 export const hoverable = $props.hoverable !== false
 
-const baseClasses = 'min-w-full divide-y divide-neutral-200 dark:divide-neutral-700'
+const baseClasses = 'min-w-full divide-y divide-line'
 const tableClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/dist/{TableBody-wf6t13j9.stx → TableBody-drxyz5jh.stx}

@@ -1,7 +1,7 @@
 <script server>
 export const className = $props.className || ''
 
-const baseClasses = 'bg-white divide-y divide-neutral-200 dark:bg-neutral-900 dark:divide-neutral-700'
+const baseClasses = 'bg-white divide-y divide-line dark:bg-neutral-900'
 const bodyClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/dist/{TableCell-ntx0edbn.stx → TableCell-8swtcq8s.stx}

@@ -1,7 +1,7 @@
 <script server>
 export const className = $props.className || ''
 
-const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100'
+const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-fg'
 const cellClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/dist/{TableHead-3k4hnm2k.stx → TableHead-e9xvjx2j.stx}

@@ -1,7 +1,7 @@
 <script server>
 export const className = $props.className || ''
 
-const baseClasses = 'bg-neutral-50 dark:bg-neutral-800'
+const baseClasses = 'bg-surface'
 const headClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/dist/{TableHeader-0eyzbqpz.stx → TableHeader-sxc77b4d.stx}

@@ -2,8 +2,8 @@
 export const className = $props.className || ''
 export const sortable = $props.sortable || false
 
-const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider dark:text-neutral-400'
-const sortableClasses = sortable ? 'cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-200' : ''
+const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-fg-soft uppercase tracking-wider'
+const sortableClasses = sortable ? 'cursor-pointer hover:text-fg-strong' : ''
 export const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
 </script>
 

package/dist/{TableRow-z09p2ebf.stx → TableRow-xd542nvb.stx}

@@ -2,7 +2,7 @@
 export const className = $props.className || ''
 export const hoverable = $props.hoverable !== false
 
-const hoverClasses = hoverable ? 'hover:bg-neutral-50 dark:hover:bg-neutral-800' : ''
+const hoverClasses = hoverable ? 'hover:bg-surface' : ''
 const rowClasses = `${hoverClasses} ${className}`.trim()
 </script>
 

package/dist/{Tabs-79brys99.stx → Tabs-b4xsba1w.stx}

@@ -24,9 +24,9 @@ const tabListOrientationClasses = {
 }
 
 const variantClasses = {
-  line: 'border-gray-200 dark:border-gray-700',
-  pills: 'gap-2 border-0 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg',
-  enclosed: 'border-gray-200 dark:border-gray-700',
+  line: 'border-line',
+  pills: 'gap-2 border-0 bg-surface-raised p-1 rounded-lg',
+  enclosed: 'border-line',
 }
 
 export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
@@ -97,14 +97,14 @@ function getTabClasses(index) {
   const base = 'px-4 py-2 font-medium text-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
   if (variant === 'line') {
     const border = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
-    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'}`
+    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-info' : 'border-transparent text-fg-muted hover:text-fg hover:border-line-strong'}`
   }
   if (variant === 'pills') {
-    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'}`
+    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-fg shadow-sm' : 'text-fg-muted hover:text-fg'}`
   }
   if (variant === 'enclosed') {
     const borders = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
-    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px' : 'bg-gray-50 dark:bg-gray-900 border-transparent hover:border-gray-200 dark:hover:border-gray-700'}`
+    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-line -mb-px' : 'bg-surface border-transparent hover:border-line'}`
   }
   return base
 }

package/dist/{TextInput-g0vaz0pe.stx → TextInput-cefyyprt.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/dist/{Textarea-96kawv5c.stx → Textarea-xcdym703.stx}

@@ -19,16 +19,16 @@ const resizeClasses = { none: 'resize-none', vertical: 'resize-y', horizontal: '
 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 px-4 py-2 text-base 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'
 
 export const textareaClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${resizeClasses[resize]} ${className}`.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>
@@ -101,7 +101,7 @@ defineExpose({ value: inputValue })
       @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/dist/{TwoFactorChallenge-y5m3nk79.stx → TwoFactorChallenge-y7n4yrk9.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/dist/{Video-84j4pv6h.stx → Video-a0aeyexv.stx}

@@ -20,7 +20,7 @@ export const aspectRatioClass = aspectRatio === '16/9' ? 'aspect-video' : aspect
 <div class="{{ containerClasses }}">
   @if(title)
     <div class="mb-2 px-1">
-      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
+      <h3 class="text-sm font-medium text-fg">
         {{ title }}
       </h3>
     </div>

package/dist/{VirtualTable-f9crbfjr.stx → VirtualTable-jvm1784g.stx}

@@ -10,12 +10,12 @@ export const hoverable = $props.hoverable ?? true
 export const className = $props.className || ''
 
 export const totalHeight = data.length * rowHeight
-export const containerClasses = `border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`.trim()
-export const headerClasses = `bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex`.trim()
-export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider`.trim()
+export const containerClasses = `border border-line rounded-lg overflow-hidden ${className}`.trim()
+export const headerClasses = `bg-surface border-b border-line flex`.trim()
+export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-fg-soft uppercase tracking-wider`.trim()
 export const bodyClasses = `overflow-auto bg-white dark:bg-gray-900`.trim()
-export const rowClasses = `absolute left-0 right-0 flex border-b border-gray-200 dark:border-gray-700 ${hoverable ? 'hover:bg-gray-50 dark:hover:bg-gray-800' : ''}`.trim()
-export const cellClasses = `px-6 py-4 text-sm text-gray-900 dark:text-gray-100`.trim()
+export const rowClasses = `absolute left-0 right-0 flex border-b border-line ${hoverable ? 'hover:bg-surface' : ''}`.trim()
+export const cellClasses = `px-6 py-4 text-sm text-fg`.trim()
 </script>
 
 <script client>
@@ -86,7 +86,7 @@ defineExpose({ scrollTop })
       <div
         :for="entry in visibleRows()"
         :key="entry.index"
-        :class="entry.striped ? '{{ rowClasses }} bg-gray-50 dark:bg-gray-800' : '{{ rowClasses }}'"
+        :class="entry.striped ? '{{ rowClasses }} bg-surface' : '{{ rowClasses }}'"
         :style="`top: ${entry.top}px; height: {{ rowHeight }}px`"
         :data-index="entry.index"
       >

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as Hero } from './components/Hero.stx';
 export { default as Installation } from './components/Installation.stx';
 // Export composables
 export * from './composables/index';
+// Theme seam — see src/theme for how an app redirects the components' colours.
+export * from './theme/index';
 // Export UI components
 export * from './ui/accordion/index';
 export * from './ui/audio/index';