Polishing Sparkle styles

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.304",
+  "version": "0.2.305",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

sparkle/src/components/AnimatedText.tsx

@@ -13,6 +13,16 @@ const animVariants = cva(
           "s-from-transparent s-via-primary-950/80 s-via-50%  s-to-transparent",
         highlight:
           "s-from-highlight s-via-highlight-800 s-via-50% s-to-highlight",
+        emerald:
+          "s-from-emerald-800 s-via-emerald-950 s-via-50% s-to-emerald-800",
+        amber: "s-from-amber-800 s-via-amber-950 s-via-50% s-to-amber-800",
+        slate: "s-from-slate-600 s-via-slate-950 s-via-50%  s-to-slate-600",
+        purple: "s-from-purple-800 s-via-purple-950 s-via-50% s-to-purple-800",
+        warning:
+          "s-from-warning-800 s-via-warning-950 s-via-50% s-to-warning-800",
+        sky: "s-from-sky-800 s-via-sky-950 s-via-50% s-to-sky-800",
+        pink: "s-from-pink-800 s-via-pink-950 s-via-50% s-to-pink-800",
+        red: "s-from-red-800 s-via-red-950 s-via-50% s-to-red-800",
       },
     },
     defaultVariants: {
@@ -26,6 +36,14 @@ const textVariants = cva("s-absolute s-inset-0", {
     variant: {
       muted: "s-text-muted-foreground",
       highlight: "s-text-highlight",
+      emerald: "s-text-emerald-800",
+      amber: "s-text-amber-800",
+      slate: "s-text-slate-600",
+      purple: "s-text-purple-800-800",
+      warning: "s-text-warning-800",
+      sky: "s-text-sky-800",
+      pink: "s-text-pink-800",
+      red: "s-text-red-800",
     },
   },
   defaultVariants: {

sparkle/src/components/Chip.tsx

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import React, { ComponentType, ReactNode } from "react";
 
+import { AnimatedText } from "@sparkle/components/";
 import { cn } from "@sparkle/lib/utils";
 
 import { Icon, IconProps } from "./Icon";
@@ -89,15 +90,19 @@ export function Chip({
   return (
     <div
       className={cn(
-        chipVariants({ size, background: color, text: color, isBusy }),
+        chipVariants({ size, background: color, text: color }),
         className
       )}
       aria-label={label}
     >
       {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
       {label && (
         <span className={cn("s-pointer s-grow s-cursor-default s-truncate")}>
-          {label}
+          {isBusy ? (
+            <AnimatedText variant={color}>{label}</AnimatedText>
+          ) : (
+            label
+          )}
         </span>
       )}
       {children}

sparkle/src/components/Input.tsx

@@ -32,10 +32,9 @@ const messageVariantStyles: Record<MessageStatus, string> = {
 };
 
 const stateVariantStyles: Record<InputStateType, string> = {
-  default: "focus-visible:s-ring-ring",
-  disabled:
-    "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground",
-  error: "s-border-border-warning focus:s-ring-ring-warning",
+  default: "",
+  disabled: "disabled:s-cursor-not-allowed disabled:s-text-muted-foreground",
+  error: "focus:s-ring-ring-warning",
 };
 
 const messageVariant = cva("", {
@@ -49,7 +48,7 @@ const messageVariant = cva("", {
 
 const inputStyleClasses = cva(
   cn(
-    "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
+    "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark/0 s-bg-muted-background s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
     "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
     "placeholder:s-text-muted-foreground",
     "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-border-border-dark"

sparkle/src/components/TextArea.tsx

@@ -12,15 +12,14 @@ export interface TextareaProps
   error?: string | null;
   showErrorLabel?: boolean;
   minRows?: number;
+  isDisplay?: boolean;
 }
 
 const textAreaStyles = cn(
   "s-flex s-w-full s-px-3 s-py-2",
+  "s-text-sm placeholder:s-text-muted-foreground s-text-foreground s-bg-muted-background s-ring-offset-background s-border s-border-border-dark/0 s-rounded-xl",
   "s-transition s-duration-100",
-  "s-text-sm placeholder:s-text-muted-foreground s-text-foreground",
-  "s-ring-offset-background s-border s-border-border-dark s-bg-background s-rounded-xl",
-  "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 ",
-  "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground"
+  "focus-visible:s-outline-none focus-visible:s-border-border-dark focus-visible:s-ring-2 focus-visible:s-ring-offset-2 "
 );
 
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -31,6 +30,8 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       minRows = 10,
       error,
       showErrorLabel,
+      disabled = false,
+      isDisplay = false,
       ...props
     },
     ref
@@ -47,6 +48,11 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         <textarea
           className={cn(
             textAreaStyles,
+            disabled
+              ? isDisplay
+                ? "s-cursor-default"
+                : "disabled:s-cursor-not-allowed disabled:s-text-muted-foreground"
+              : "",
             resizeClass[resize],
             className,
             !error
@@ -61,6 +67,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           )}
           ref={ref}
           rows={minRows}
+          disabled={disabled}
           {...props}
         />
         {error && showErrorLabel && (

sparkle/src/stories/Chip.stories.tsx

@@ -56,6 +56,6 @@ export const Basic: Story = {
     label: "Example Chip",
     size: "sm",
     color: "slate",
-    isBusy: false,
+    isBusy: true,
   },
 };

sparkle/src/stories/TextArea.stories.tsx

@@ -59,7 +59,37 @@ export const TextAreaExample = () => {
               textValues[3],
             ])
           }
-          error={"errored because blah"}
+        />
+        <TextArea
+          placeholder="placeholder"
+          disabled
+          value={
+            "I want you to act as a professional coder for html emails. We are currently using Sendgrid as our main way to handle emails. Make concise answers, always output the code in a Code Block."
+          }
+          onChange={(e) =>
+            setTextValues([
+              textValues[0],
+              textValues[1],
+              e.target.value,
+              textValues[3],
+            ])
+          }
+        />
+        <TextArea
+          placeholder="placeholder"
+          disabled
+          isDisplay
+          value={
+            "I want you to act as a professional coder for html emails. We are currently using Sendgrid as our main way to handle emails. Make concise answers, always output the code in a Code Block."
+          }
+          onChange={(e) =>
+            setTextValues([
+              textValues[0],
+              textValues[1],
+              e.target.value,
+              textValues[3],
+            ])
+          }
         />
       </div>
     </div>

sparkle/tailwind.config.js

@@ -200,8 +200,8 @@ module.exports = {
             dark: colors.slate[600],
           },
           warning: {
-            DEFAULT: colors.red[200],
-            dark: colors.red[800],
+            DEFAULT: colors.slate[200],
+            dark: colors.slate[800],
           },
         },
         separator: { DEFAULT: colors.slate[200], dark: colors.slate[800] },