create-mcp-use-app 0.6.0-canary.3 → 0.6.0-canary.4

package/dist/templates/apps-sdk/resources/product-search-result/components/Accordion.tsx

@@ -20,9 +20,9 @@ export const Accordion: React.FC<AccordionProps> = ({
   );
 
   return (
-    <div className="p-8 pt-4 border-t border-gray-200 dark:border-gray-800 mt-4">
+    <div className="p-8 pt-4 border-t border-subtle mt-4">
       <h3 className="heading-lg mb-4">{title}</h3>
-      <div className="rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden">
+      <div className="rounded-lg border border-default overflow-hidden">
         {items.map((item, index) => (
           <AccordionItem
             key={index}

package/dist/templates/apps-sdk/resources/product-search-result/components/AccordionItem.tsx

@@ -9,16 +9,14 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
   onToggle,
 }) => {
   return (
-    <div className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
+    <div className="border-b border-subtle last:border-b-0">
       <button
         type="button"
         onClick={onToggle}
-        className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors"
+        className="w-full flex items-center justify-between p-4 text-left hover:bg-primary-soft-hover transition-colors"
       >
-        <span className="font-medium text-gray-900 dark:text-gray-100">
-          {question}
-        </span>
-        <span className="text-xl text-gray-500 dark:text-gray-400 transition-transform duration-200">
+        <span className="font-medium text-default">{question}</span>
+        <span className="text-xl text-tertiary transition-transform duration-200">
           {isOpen ? "−" : "+"}
         </span>
       </button>

package/dist/templates/apps-sdk/resources/product-search-result/components/Carousel.tsx

@@ -46,7 +46,7 @@ export const Carousel: React.FC<CarouselProps> = ({ mcpUrl }) => {
           </div>
         ) : error ? (
           <div className="flex items-center justify-center p-8">
-            <p className="text-red-500">Failed to load fruits</p>
+            <p className="text-danger">Failed to load fruits</p>
           </div>
         ) : (
           <Animate className="flex gap-4">

package/dist/templates/apps-sdk/resources/product-search-result/components/CarouselItem.tsx

@@ -9,7 +9,7 @@ export interface CarouselItemProps {
 export const CarouselItem: React.FC<CarouselItemProps> = ({ fruit, color }) => {
   return (
     <div
-      className={`carousel-item size-52 rounded-xl border border-gray-200 dark:border-gray-800 ${color}`}
+      className={`carousel-item size-52 rounded-xl border border-subtle ${color}`}
     >
       <div className="carousel-item-bg">
         <Image src={"/fruits/" + fruit + ".png"} alt={fruit} />

package/dist/templates/apps-sdk/resources/product-search-result/widget.tsx

@@ -32,7 +32,7 @@ const ProductSearchResult: React.FC = () => {
   return (
     <McpUseProvider debugger viewControls autoSize>
       <AppsSDKUIProvider linkComponent={Link}>
-        <div className="relative bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-3xl">
+        <div className="relative bg-surface-elevated border border-default rounded-3xl">
           <div className="p-8">
             <h5 className="text-secondary mb-1">Apps SDK Template</h5>
             <h2 className="heading-xl mb-3">Lovely Little Fruit Shop</h2>

package/dist/templates/apps-sdk/resources/styles.css

@@ -28,15 +28,15 @@ h3,
 h4,
 h5,
 h6 {
-  @apply text-gray-900 dark:text-white;
+  @apply text-default;
 }
 
 p {
-  @apply text-gray-600 dark:text-gray-400;
+  @apply text-secondary;
 }
 
 a {
-  @apply text-blue-600 dark:text-blue-400;
+  @apply text-info;
 }
 
 /* Carousel scroll container with padding for blur effect */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.6.0-canary.3",
+  "version": "0.6.0-canary.4",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",