pika-ux 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pika-ux",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "exports": {
     "./pika/*": "./src/pika/*",

package/src/app.css

@@ -108,6 +108,21 @@
         --sidebar-border: oklch(0.873 0.115 95.71);
         --sidebar-ring: oklch(0.623 0.188 259.803);
 
+        /* Extended semantic colors for status/feedback */
+        --success: oklch(0.55 0.16 142);
+        --success-foreground: oklch(0.985 0 0);
+        --success-bg: oklch(0.95 0.05 142);
+        --warning: oklch(0.75 0.15 75);
+        --warning-foreground: oklch(0.20 0.02 45);
+        --warning-bg: oklch(0.95 0.05 75);
+        --info: oklch(0.55 0.15 250);
+        --info-foreground: oklch(0.985 0 0);
+        --info-bg: oklch(0.93 0.05 250);
+        --ai: oklch(0.55 0.2 280);
+        --ai-foreground: oklch(0.985 0 0);
+        --ai-bg: oklch(0.93 0.05 280);
+        --danger-bg: oklch(0.95 0.08 25);
+
         --prominent-50: oklch(0.984 0.018 96.452);
         --prominent-100: oklch(0.959 0.043 96.701);
         --prominent-200: oklch(0.926 0.075 96.972);
@@ -166,6 +181,21 @@
         --sidebar-border: oklch(0.712 0.141 92.714);
         --sidebar-ring: oklch(0.623 0.188 259.803);
 
+        /* Extended semantic colors for status/feedback (dark mode) */
+        --success: oklch(0.65 0.18 142);
+        --success-foreground: oklch(0.15 0.02 142);
+        --success-bg: oklch(0.25 0.08 142);
+        --warning: oklch(0.70 0.15 75);
+        --warning-foreground: oklch(0.15 0.02 75);
+        --warning-bg: oklch(0.25 0.08 75);
+        --info: oklch(0.60 0.16 250);
+        --info-foreground: oklch(0.15 0.02 250);
+        --info-bg: oklch(0.25 0.08 250);
+        --ai: oklch(0.60 0.22 280);
+        --ai-foreground: oklch(0.15 0.02 280);
+        --ai-bg: oklch(0.25 0.08 280);
+        --danger-bg: oklch(0.25 0.10 25);
+
         /* Dark mode gray colors */
         --gray-50: oklch(0.221 0.022 256.975);
         --gray-100: oklch(0.313 0.032 256.627);
@@ -218,6 +248,21 @@
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
 
+    /* Extended semantic colors for status/feedback */
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-success-bg: var(--success-bg);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-warning-bg: var(--warning-bg);
+    --color-info: var(--info);
+    --color-info-foreground: var(--info-foreground);
+    --color-info-bg: var(--info-bg);
+    --color-ai: var(--ai);
+    --color-ai-foreground: var(--ai-foreground);
+    --color-ai-bg: var(--ai-bg);
+    --color-danger-bg: var(--danger-bg);
+
     /* Custom color palettes */
     --color-gold-50: var(--gold-50);
     --color-gold-100: var(--gold-100);

package/src/pika/expandable-container/expandable-container.svelte

@@ -80,18 +80,18 @@ Props:
             const firstStepNotDone = stepsInProcess.steps.find((step) => !step.done);
             if (currentStep?.done) {
                 // This step is done
-                return { iconColor: 'text-green-600', textColor: 'text-gray-600', icon: Check, titleIcon: undefined };
+                return { iconColor: 'text-success', textColor: 'text-muted-foreground', icon: Check, titleIcon: undefined };
             } else if (firstStepNotDone?.stepId === currentStep?.stepId) {
                 // This is the first step that hasn't been done
                 return {
-                    iconColor: 'text-purple-600',
-                    textColor: 'text-gray-600',
+                    iconColor: 'text-ai',
+                    textColor: 'text-muted-foreground',
                     icon: Circle,
                     titleIcon: ArrowBigRight
                 };
             } else {
                 // You can't do this step yet since it's after the current step
-                return { iconColor: 'text-yellow-600', textColor: 'text-gray-400', icon: Minus, titleIcon: undefined };
+                return { iconColor: 'text-warning', textColor: 'text-muted-foreground/60', icon: Minus, titleIcon: undefined };
             }
         }
 

package/src/pika/permanent-toast/permanent-toast.svelte

@@ -14,22 +14,22 @@
     const typeConfig = {
         info: {
             icon: Info,
-            bgColor: 'bg-blue-50',
-            iconColor: 'text-blue-500',
-            borderColor: 'border-blue-100',
+            bgColor: 'bg-info-bg',
+            iconColor: 'text-info',
+            borderColor: 'border-info/20'
         },
         warning: {
             icon: TriangleAlert,
-            bgColor: 'bg-yellow-50',
-            iconColor: 'text-yellow-500',
-            borderColor: 'border-yellow-100',
+            bgColor: 'bg-warning-bg',
+            iconColor: 'text-warning',
+            borderColor: 'border-warning/20'
         },
         error: {
             icon: CircleAlert,
-            bgColor: 'bg-red-50',
-            iconColor: 'text-red-500',
-            borderColor: 'border-red-100',
-        },
+            bgColor: 'bg-danger-bg',
+            iconColor: 'text-destructive',
+            borderColor: 'border-destructive/20'
+        }
     } as const;
 
     const config = typeConfig[type];
@@ -40,7 +40,7 @@
         {#if config.icon}
             <config.icon class="w-5 h-5 {config.iconColor}" />
         {/if}
-        <div class="text-sm text-gray-700">
+        <div class="text-sm text-foreground">
             {@render children?.()}
         </div>
     </div>

package/src/pika/pika-badge/pika-badge.svelte

@@ -7,7 +7,7 @@
                 default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
                 secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
                 destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
-                success: 'bg-green-700 text-white hover:bg-green-700 border-transparent shadow',
+                success: 'bg-success text-success-foreground hover:bg-success/90 border-transparent shadow',
                 outline: 'text-foreground'
             }
         },

package/src/pika/pika-table/pika-table-column-header.svelte

@@ -58,7 +58,7 @@
             <DropdownMenu.Root bind:open={dropdownOpen}>
                 <DropdownMenu.Trigger>
                     {#snippet child({ props })}
-                        <Button {...props} variant="ghost" size="icon" class="data-[state=open]:bg-blue-200 h-8 w-8 p-0 hover:bg-blue-200 {dropdownOpen ? 'bg-blue-200' : ''} ">
+                        <Button {...props} variant="ghost" size="icon" class="data-[state=open]:bg-accent h-8 w-8 p-0 hover:bg-accent {dropdownOpen ? 'bg-accent' : ''} ">
                             <EllipsisVertical class="text-muted-foreground/70 size-3.5" />
                         </Button>
                     {/snippet}

package/src/pika/pika-table/pika-table.svelte

@@ -302,7 +302,7 @@ PikaTable - A reusable table component with server-side pagination, sorting, and
         <Table.Root class="h-full">
             <Table.Header>
                 {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-                    <Table.Row class="sticky top-0 bg-gray-50 shadow-[inset_0_-1px_0_#ededed]">
+                    <Table.Row class="sticky top-0 bg-muted shadow-[inset_0_-1px_0_var(--border)]">
                         {#each headerGroup.headers as header (header.id)}
                             <Table.Head colspan={header.colSpan}>
                                 {#if !header.isPlaceholder}

package/src/pika/pika-tabs/tabs-trigger.svelte

@@ -5,19 +5,40 @@
     let { ref = $bindable(null), class: className, value, ...restProps }: TabsPrimitive.TriggerProps = $props();
 </script>
 
-<!-- 
-    Modified from standard shadcn tabs trigger component:
-    Added 'data-[state=inactive]:hover:text-primary' to provide visual feedback 
-    when hovering over unselected tabs. This changes the text color to the theme's 
-    primary color on hover for better UX, indicating that the tabs are clickable.
+<!--
+    Uses explicit CSS for styling because Tailwind v4's @tailwindcss/vite plugin only generates
+    CSS for classes found in the consuming app's src/ directory. Classes unique to external
+    packages (like this one) won't have CSS generated unless they're also used in the main app.
+    
+    This means Tailwind utility classes from this component only work if the same class is
+    already used somewhere in apps/pika-chat/src/. The CSS block below ensures consistent
+    styling regardless of what classes the consuming app happens to use.
 -->
 
 <TabsPrimitive.Trigger
     bind:ref
     class={cn(
-        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:hover:text-primary inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
+        'pika-tab-trigger ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
         className
     )}
     {value}
     {...restProps}
 />
+
+<style>
+    :global(.pika-tab-trigger[data-state='active']) {
+        background-color: var(--card);
+        color: var(--foreground);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        border-bottom: 2px solid var(--primary);
+    }
+
+    :global(.pika-tab-trigger[data-state='inactive']) {
+        color: var(--muted-foreground);
+    }
+
+    :global(.pika-tab-trigger[data-state='inactive']:hover) {
+        color: var(--primary);
+        background-color: color-mix(in oklch, var(--foreground) 5%, transparent);
+    }
+</style>