@tanstack/create 0.68.0 → 0.68.2

package/src/frameworks/react/add-ons/sentry/assets/src/routes/demo/sentry.testing.tsx

@@ -19,15 +19,13 @@ export const Route = createFileRoute('/demo/sentry/testing')({
       Sentry.captureException(error)
     }, [error])
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#181423]">
-        <div className="text-center p-8">
+      <main className="demo-page demo-center">
+        <section className="demo-panel text-center">
           <SentryLogo />
-          <h1 className="text-2xl font-bold text-white mt-4 mb-2">
-            Something went wrong
-          </h1>
-          <p className="text-[#A49FB5]">{error.message}</p>
-        </div>
-      </div>
+          <h1 className="mt-4 mb-2 text-2xl font-bold">Something went wrong</h1>
+          <p className="demo-muted">{error.message}</p>
+        </section>
+      </main>
     )
   },
 })
@@ -101,48 +99,36 @@ function SentryButton({
   disabled?: boolean
   loading?: boolean
 }) {
-  const baseColor = variant === 'error' ? '#E50045' : '#553DB8'
-  const topColor = variant === 'error' ? '#FF1A5C' : '#7553FF'
-
   return (
     <button
       type="button"
       onClick={onClick}
       disabled={disabled || loading}
-      className="group w-full rounded-lg text-white cursor-pointer border-none p-0 transition-all disabled:cursor-not-allowed disabled:opacity-60"
-      style={{ backgroundColor: baseColor }}
+      className={`demo-button w-full px-6 py-4 text-base ${variant === 'error' ? 'demo-button-danger' : ''}`}
     >
-      <span
-        className="flex items-center justify-center gap-3 px-6 py-4 rounded-lg text-lg font-semibold transition-transform group-hover:-translate-y-1 group-active:translate-y-0 group-disabled:translate-y-0"
-        style={{
-          backgroundColor: topColor,
-          border: `1px solid ${baseColor}`,
-        }}
-      >
-        {loading && (
-          <svg
-            className="animate-spin h-5 w-5"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        )}
-        {children}
-      </span>
+      {loading && (
+        <svg
+          className="animate-spin h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      )}
+      {children}
     </button>
   )
 }
@@ -158,14 +144,14 @@ function FeatureCard({
   description: string
 }) {
   return (
-    <div className="bg-[#1C1825] rounded-xl p-4 border border-[#2D2640] hover:border-[#7553FF]/50 transition-all group">
+    <div className="demo-card transition-all group">
       <div className="flex items-center gap-3 mb-2">
-        <div className="text-[#7553FF] group-hover:scale-110 transition-transform">
+        <div className="text-[var(--lagoon-deep)] group-hover:scale-110 transition-transform">
           {icon}
         </div>
-        <h3 className="font-semibold text-white">{title}</h3>
+        <h3 className="font-semibold text-[var(--sea-ink)]">{title}</h3>
       </div>
-      <p className="text-sm text-[#A49FB5] pl-9">{description}</p>
+      <p className="demo-muted pl-9 text-sm">{description}</p>
     </div>
   )
 }
@@ -192,9 +178,9 @@ function ResultBadge({
   return (
     <div className="mt-4 space-y-3">
       {type === 'error' && (
-        <div className="flex items-center gap-2 bg-[#E50045]/10 border border-[#E50045]/30 rounded-lg px-4 py-3">
+        <div className="demo-alert demo-alert-danger flex items-center gap-2">
           <svg
-            className="w-5 h-5 text-[#FF1A5C]"
+            className="w-5 h-5 text-[#9f3030]"
             fill="none"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -205,16 +191,16 @@ function ResultBadge({
             <title>Error captured</title>
             <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           </svg>
-          <span className="text-[#FF1A5C] text-sm font-medium">
+          <span className="text-sm font-medium">
             Error captured and sent to Sentry
           </span>
         </div>
       )}
 
       {type === 'success' && (
-        <div className="flex items-center gap-2 bg-[#00F261]/10 border border-[#00BF4D]/30 rounded-lg px-4 py-3">
+        <div className="demo-alert flex items-center gap-2">
           <svg
-            className="w-5 h-5 text-[#00F261]"
+            className="w-5 h-5 text-[var(--palm)]"
             fill="none"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -225,7 +211,7 @@ function ResultBadge({
             <title>Trace complete</title>
             <path d="M5 13l4 4L19 7" />
           </svg>
-          <span className="text-[#00F261] text-sm font-medium">
+          <span className="text-sm font-medium">
             Trace completed successfully
           </span>
         </div>
@@ -234,12 +220,12 @@ function ResultBadge({
       <button
         type="button"
         onClick={handleCopy}
-        className="relative flex items-center gap-2 bg-[#7553FF]/10 hover:bg-[#7553FF]/20 border border-[#7553FF]/30 rounded-lg px-4 py-2 transition-all cursor-pointer w-full"
+        className="demo-list-item relative flex items-center gap-2 transition-all cursor-pointer w-full"
       >
-        <span className="text-[#B3A1FF] text-sm">span.op:</span>
-        <code className="text-[#7553FF] font-mono text-sm">{spanOp}</code>
+        <span className="demo-muted text-sm">span.op:</span>
+        <code className="font-mono text-sm">{spanOp}</code>
         <svg
-          className="w-4 h-4 text-[#B3A1FF] ml-auto"
+          className="w-4 h-4 demo-muted ml-auto"
           fill="none"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -251,7 +237,7 @@ function ResultBadge({
           <path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
         </svg>
         {copied && (
-          <span className="absolute -top-8 left-1/2 -translate-x-1/2 bg-[#00F261] text-[#181423] text-xs font-medium px-2 py-1 rounded animate-pulse">
+          <span className="demo-pill absolute -top-8 left-1/2 -translate-x-1/2 animate-pulse">
             Copied!
           </span>
         )}
@@ -265,15 +251,15 @@ function ProgressBar({ loading }: { loading: boolean }) {
   return (
     <div className="mt-4 flex items-center gap-3">
       <div
-        className={`w-3 h-3 rounded-full transition-all ${loading ? 'bg-[#7553FF] animate-pulse' : 'bg-[#00F261]'}`}
+        className={`w-3 h-3 rounded-full transition-all ${loading ? 'bg-[var(--lagoon)] animate-pulse' : 'bg-[var(--palm)]'}`}
       />
-      <div className="flex-1 h-2 bg-[#2D2640] rounded-full overflow-hidden">
+      <div className="flex-1 h-2 bg-[var(--line)] rounded-full overflow-hidden">
         <div
-          className="h-full bg-gradient-to-r from-[#7553FF] to-[#B3A1FF] rounded-full transition-all duration-500"
+          className="h-full bg-[var(--lagoon)] rounded-full transition-all duration-500"
           style={{ width: loading ? '60%' : '100%' }}
         />
       </div>
-      <span className="text-xs text-[#A49FB5] w-16 text-right">
+      <span className="demo-muted text-xs w-16 text-right">
         {loading ? 'Running...' : 'Complete'}
       </span>
     </div>
@@ -378,39 +364,27 @@ function RouteComponent() {
   }
 
   return (
-    <div
-      className="min-h-screen text-white"
-      style={{
-        fontFamily:
-          'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
-        background:
-          'linear-gradient(180deg, #181423 0%, #1C1825 50%, #181423 100%)',
-      }}
-    >
-      <div className="max-w-5xl mx-auto px-6 py-16">
-        {/* Header */}
+    <main className="demo-page demo-page-wide">
+      <div className="mx-auto max-w-5xl">
         <div className="text-center mb-16">
           <div className="inline-flex items-center gap-4 mb-8">
-            <div className="text-[#7553FF]">
+            <div className="text-[var(--lagoon-deep)]">
               <SentryLogo size={56} />
             </div>
             <div className="text-left">
-              <h1 className="text-3xl font-bold text-white tracking-tight">
-                Sentry Demo
-              </h1>
-              <p className="text-[#A49FB5] text-sm">
+              <h1 className="demo-title">Sentry Demo</h1>
+              <p className="demo-muted text-sm">
                 Error monitoring & performance tracing
               </p>
             </div>
           </div>
-          <p className="text-lg text-[#A49FB5] max-w-xl mx-auto leading-relaxed">
+          <p className="demo-muted mx-auto max-w-xl text-lg leading-relaxed">
             Click the buttons below to trigger errors and traces, then view them
             in your{' '}
             <a
               href="https://sentry.io"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[#7553FF] hover:text-[#B3A1FF] underline transition-colors"
             >
               Sentry dashboard
             </a>
@@ -420,9 +394,9 @@ function RouteComponent() {
 
         {/* Sentry Not Initialized Warning */}
         {showWarning && (
-          <div className="mb-8 flex items-center gap-3 bg-[#E5A000]/10 border border-[#E5A000]/30 rounded-xl px-6 py-4">
+          <div className="demo-alert mb-8 flex items-center gap-3">
             <svg
-              className="w-6 h-6 text-[#E5A000] flex-shrink-0"
+              className="w-6 h-6 text-[var(--sea-ink-soft)] flex-shrink-0"
               fill="none"
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -434,11 +408,10 @@ function RouteComponent() {
               <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
             <div>
-              <p className="text-[#E5A000] font-medium">
-                Sentry is not initialized
-              </p>
-              <p className="text-[#A49FB5] text-sm mt-1">
-                Set the <code className="bg-[#1C1825] px-1.5 py-0.5 rounded text-[#B3A1FF]">VITE_SENTRY_DSN</code> environment variable to enable error tracking and performance monitoring.
+              <p className="font-medium">Sentry is not initialized</p>
+              <p className="demo-muted text-sm mt-1">
+                Set the <code>VITE_SENTRY_DSN</code> environment variable to
+                enable error tracking and performance monitoring.
               </p>
             </div>
           </div>
@@ -487,10 +460,10 @@ function RouteComponent() {
         {/* Testing Panels */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Client-Side Panel */}
-          <div className="bg-[#1C1825] rounded-2xl p-8 border border-[#2D2640]">
+          <div className="demo-panel">
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-3 h-3 rounded-full bg-[#00F261]" />
-              <h2 className="text-xl font-semibold">Client-Side Testing</h2>
+              <div className="w-3 h-3 rounded-full bg-[var(--palm)]" />
+              <h2 className="demo-section-title">Client-Side Testing</h2>
             </div>
 
             <div className="space-y-4">
@@ -539,10 +512,10 @@ function RouteComponent() {
           </div>
 
           {/* Server-Side Panel */}
-          <div className="bg-[#1C1825] rounded-2xl p-8 border border-[#2D2640]">
+          <div className="demo-panel">
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-3 h-3 rounded-full bg-[#7553FF]" />
-              <h2 className="text-xl font-semibold">Server-Side Testing</h2>
+              <div className="w-3 h-3 rounded-full bg-[var(--lagoon)]" />
+              <h2 className="demo-section-title">Server-Side Testing</h2>
             </div>
 
             <div className="space-y-4">
@@ -593,24 +566,20 @@ function RouteComponent() {
 
         {/* Footer Note */}
         <div className="mt-12 text-center">
-          <p className="text-sm text-[#6E6C75]">
-            This page uses{' '}
-            <code className="bg-[#1C1825] px-2 py-1 rounded text-[#B3A1FF]">
-              @sentry/tanstackstart-react
-            </code>{' '}
-            for full-stack error monitoring.
+          <p className="demo-muted text-sm">
+            This page uses <code>@sentry/tanstackstart-react</code> for
+            full-stack error monitoring.
             <br />
             <a
               href="https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[#7553FF] hover:text-[#B3A1FF] underline transition-colors"
             >
               Read the documentation →
             </a>
           </p>
         </div>
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/react/add-ons/store/assets/src/lib/demo-store-devtools.tsx

@@ -42,15 +42,15 @@ function DevtoolPanel() {
 
   return (
     <div className="p-4 grid gap-4 grid-cols-[1fr_10fr]">
-      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+      <div className="demo-muted whitespace-nowrap text-sm font-bold">
         First Name
       </div>
       <div className="text-sm">{state?.firstName}</div>
-      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+      <div className="demo-muted whitespace-nowrap text-sm font-bold">
         Last Name
       </div>
       <div className="text-sm">{state?.lastName}</div>
-      <div className="text-sm font-bold text-gray-500 whitespace-nowrap">
+      <div className="demo-muted whitespace-nowrap text-sm font-bold">
         Full Name
       </div>
       <div className="text-sm">{state?.fullName}</div>

package/src/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs

@@ -19,7 +19,7 @@ function FirstName() {
       onChange={(e) =>
         store.setState((state) => ({ ...state, firstName: e.target.value }))
       }
-      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      className="demo-input"
     />
   )
 }
@@ -33,7 +33,7 @@ function LastName() {
       onChange={(e) =>
         store.setState((state) => ({ ...state, lastName: e.target.value }))
       }
-      className="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      className="demo-input"
     />
   )
 }
@@ -41,7 +41,7 @@ function LastName() {
 function FullName() {
   const fName = useStore(fullName, (state) => state)
   return (
-    <div className="bg-white/10 rounded-lg px-4 py-2 outline-none ">
+    <div className="demo-list-item font-medium">
       {fName}
     </div>
   )
@@ -49,20 +49,15 @@ function FullName() {
 
 function DemoStore() {
   return (
-    <div
-      className="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl min-w-1/2">
-        <h1 className="text-4xl font-bold mb-5">Store Example</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel flex w-full max-w-xl flex-col gap-4">
+        <p className="island-kicker">TanStack Store</p>
+        <h1 className="demo-title mb-2">Store Example</h1>
         <FirstName />
         <LastName />
         <FullName />
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx

@@ -1,41 +1,38 @@
-import React from "react";
+import React from 'react'
 
 export interface ButtonProps {
-  variant?: "primary" | "secondary" | "danger";
-  size?: "small" | "medium" | "large";
-  children: React.ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-  className?: string;
+  variant?: 'primary' | 'secondary' | 'danger'
+  size?: 'small' | 'medium' | 'large'
+  children: React.ReactNode
+  onClick?: () => void
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  className?: string
 }
 
 export const Button: React.FC<ButtonProps> = ({
-  variant = "primary",
-  size = "medium",
+  variant = 'primary',
+  size = 'medium',
   children,
   onClick,
   disabled = false,
-  type = "button",
-  className = "",
+  type = 'button',
+  className = '',
 }) => {
   const baseStyles =
-    "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+    'demo-button disabled:opacity-50 disabled:cursor-not-allowed'
 
   const variantStyles = {
-    primary:
-      "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
-    secondary:
-      "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
-    danger:
-      "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
-  };
+    primary: '',
+    secondary: 'demo-button-secondary',
+    danger: 'demo-button-danger',
+  }
 
   const sizeStyles = {
-    small: "px-3 py-1.5 text-sm",
-    medium: "px-4 py-2 text-base",
-    large: "px-6 py-3 text-lg",
-  };
+    small: 'px-3 py-1.5 text-sm',
+    medium: 'px-4 py-2 text-base',
+    large: 'px-6 py-3 text-lg',
+  }
 
   return (
     <button
@@ -46,5 +43,5 @@ export const Button: React.FC<ButtonProps> = ({
     >
       {children}
     </button>
-  );
-};
+  )
+}

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx

@@ -1,33 +1,29 @@
-import React from "react";
+import React from 'react'
 
 export interface DialogProps {
-  title: string;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  className?: string;
+  title: string
+  children: React.ReactNode
+  footer?: React.ReactNode
+  className?: string
 }
 
 export const Dialog: React.FC<DialogProps> = ({
   title,
   children,
   footer,
-  className = "",
+  className = '',
 }) => {
   return (
-    <div
-      className={`bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden ${className}`}
-    >
-      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-          {title}
-        </h2>
+    <div className={`demo-panel overflow-hidden p-0 ${className}`}>
+      <div className="border-b border-[var(--line)] px-6 py-4">
+        <h2 className="demo-section-title">{title}</h2>
       </div>
       <div className="px-6 py-6">{children}</div>
       {footer && (
-        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+        <div className="border-t border-[var(--line)] bg-[var(--chip-bg)] px-6 py-4">
           {footer}
         </div>
       )}
     </div>
-  );
-};
+  )
+}

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx

@@ -1,30 +1,27 @@
-import React from "react";
+import React from 'react'
 
 export interface InputProps {
-  label: string;
-  id: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  required?: boolean;
-  className?: string;
+  label: string
+  id: string
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  required?: boolean
+  className?: string
 }
 
 export const Input: React.FC<InputProps> = ({
   label,
   id,
-  value = "",
+  value = '',
   onChange,
   placeholder,
   required = false,
-  className = "",
+  className = '',
 }) => {
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
-      <label
-        htmlFor={id}
-        className="text-sm font-medium text-gray-700 dark:text-gray-200"
-      >
+      <label htmlFor={id} className="text-sm font-medium text-[var(--sea-ink)]">
         {label}
         {required && <span className="text-red-500 ml-1">*</span>}
       </label>
@@ -35,8 +32,8 @@ export const Input: React.FC<InputProps> = ({
         onChange={(e) => onChange?.(e.target.value)}
         placeholder={placeholder}
         required={required}
-        className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
+        className="demo-input"
       />
     </div>
-  );
-};
+  )
+}

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx

@@ -1,17 +1,17 @@
-import React from "react";
+import React from 'react'
 
 export interface RadioOption {
-  value: string;
-  label: string;
+  value: string
+  label: string
 }
 
 export interface RadioGroupProps {
-  label: string;
-  name: string;
-  options: RadioOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  className?: string;
+  label: string
+  name: string
+  options: RadioOption[]
+  value?: string
+  onChange?: (value: string) => void
+  className?: string
 }
 
 export const RadioGroup: React.FC<RadioGroupProps> = ({
@@ -20,11 +20,11 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
   options,
   value,
   onChange,
-  className = "",
+  className = '',
 }) => {
   return (
     <div className={`flex flex-col gap-3 ${className}`}>
-      <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
+      <label className="text-sm font-medium text-[var(--sea-ink)]">
         {label}
       </label>
       <div className="flex gap-4">
@@ -39,14 +39,14 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
               value={option.value}
               checked={value === option.value}
               onChange={(e) => onChange?.(e.target.value)}
-              className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 cursor-pointer"
+              className="h-4 w-4 cursor-pointer accent-[var(--lagoon-deep)]"
             />
-            <span className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">
+            <span className="demo-muted text-sm transition-colors group-hover:text-[var(--sea-ink)]">
               {option.label}
             </span>
           </label>
         ))}
       </div>
     </div>
-  );
-};
+  )
+}