Polishing stuff (#9199)

front/components/assistant/conversation/input_bar/InputBar.tsx

@@ -282,7 +282,7 @@ export function AssistantInputBar({
               "bg-primary-50",
               "transition-all",
               isFloating
-                ? "rounded-3xl border border-border-dark focus-within:ring-1 focus-within:ring-highlight-300 sm:border-border-dark/50 sm:focus-within:border-border-dark sm:focus-within:ring-2 sm:focus-within:ring-offset-2"
+                ? "rounded-3xl border border-border-dark focus-within:ring-1 focus-within:ring-highlight/30 sm:border-border-dark/50 sm:focus-within:border-border-dark sm:focus-within:ring-2"
                 : "border-t",
               isAnimating ? "duration-600 animate-shake" : "duration-300"
             )}

sparkle/src/components/Input.tsx

@@ -32,9 +32,11 @@ const messageVariantStyles: Record<MessageStatus, string> = {
 };
 
 const stateVariantStyles: Record<InputStateType, string> = {
-  default: "",
+  default:
+    "s-border-border-dark/50 s-ring-highlight/0 focus-visible:s-border-border-focus focus-visible:s-outline-none focus-visible:s-ring-highlight/10",
   disabled: "disabled:s-cursor-not-allowed disabled:s-text-muted-foreground",
-  error: "focus:s-ring-ring-warning",
+  error:
+    "s-border-border-warning/30 s-ring-warning/0 focus-visible:s-border-border-warning focus-visible:s-outline-none focus-visible:s-ring-warning/10",
 };
 
 const messageVariant = cva("", {
@@ -48,10 +50,10 @@ const messageVariant = cva("", {
 
 const inputStyleClasses = cva(
   cn(
-    "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark/50 s-bg-muted-background 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-bg-muted-background s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
+    "s-border focus-visible:s-ring",
     "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"
+    "placeholder:s-text-muted-foreground"
   ),
   {
     variants: {

sparkle/src/components/TextArea.tsx

@@ -17,7 +17,7 @@ export interface TextareaProps
 }
 
 const textAreaVariants = cva(
-  "s-flex s-w-full s-px-3 s-py-2 s-text-sm s-text-foreground s-bg-muted-background s-ring-offset-background s-border s-border-border-dark/50 s-rounded-xl s-transition s-duration-100 focus-visible:s-outline-none focus-visible:s-border-border-dark focus-visible:s-ring-2 focus-visible:s-ring-offset-2",
+  "s-flex s-w-full s-px-3 s-py-2 s-text-sm s-text-foreground s-bg-muted-background s-ring-offset-background s-border s-rounded-xl s-transition s-duration-100 focus-visible:s-outline-none focus-visible:s-border-border-dark focus-visible:s-ring",
   {
     variants: {
       resize: {
@@ -27,9 +27,9 @@ const textAreaVariants = cva(
         both: "s-resize",
       },
       error: {
-        true: "focus:s-ring-warning-200 focus:s-ring-warning-300 dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark",
+        true: "s-border-border-warning/30 focus:s-ring-warning/10 focus-visible:s-border-border-warning dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark",
         false:
-          "focus:s-ring-highlight-200 dark:s-ring-structure-300-dark dark:focus:s-ring-highlight-200-dark",
+          "s-border-border-dark/50 focus:s-ring-border-focus/10 focus-visible:s-border-border-focus dark:s-ring-structure-300-dark dark:focus:s-ring-highlight-200-dark",
       },
       disabled: {
         true: "disabled:s-cursor-not-allowed disabled:s-text-muted-foreground",
@@ -81,7 +81,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...props}
         />
         {error && showErrorLabel && (
-          <div className="s-ml-2 s-text-sm s-text-warning-500">{error}</div>
+          <div className="s-ml-2 s-text-xs s-text-warning-500">{error}</div>
         )}
       </div>
     );

sparkle/src/icons/solid/Clipboard.tsx

@@ -11,7 +11,7 @@ const SvgClipboard = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M16 16v5H3V7.992L8 8V3h13l-.003 13H16Zm2.997-2L19 5h-9v9h8.997Z"
+      d="M7 4v3h10V4h1.007a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H5.993a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2H7Zm2-2h6v3H9V2Z"
     />
   </svg>
 );

sparkle/src/icons/stroke/Clipboard.tsx

@@ -11,7 +11,7 @@ const SvgClipboard = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M16 16v5H3V7.992L8 8V3h13l-.003 13H16Zm-2 0H8v-6H5v9h9v-3Zm4.997-2L19 5h-9v9h8.997Z"
+      d="M7 4V2h10v2h2.007a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H4.993a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2H7Zm0 2H5v15h14V6h-2v2H7V6Zm2-2v2h6V4H9Z"
     />
   </svg>
 );

sparkle/tailwind.config.js

@@ -205,17 +205,17 @@ module.exports = {
           dark: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
           darker: { DEFAULT: colors.slate[400], dark: colors.slate[6800] },
           focus: {
-            DEFAULT: colors.slate[400],
+            DEFAULT: colors.blue[400],
             dark: colors.slate[600],
           },
           warning: {
-            DEFAULT: colors.slate[200],
+            DEFAULT: colors.red[300],
             dark: colors.slate[800],
           },
         },
         separator: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
         ring: {
-          DEFAULT: colors.blue[300],
+          DEFAULT: colors.blue[200],
           dark: colors.slate[700],
           warning: {
             DEFAULT: colors.red[300],