fix: swap purple-300 for purple-100 on hover/selected states

src/components/ui/Accordion/Accordion.tsx

@@ -45,7 +45,7 @@ function AccordionTrigger({
       >
         {children}
         <span
-          className="inline-block overflow-hidden rounded-full transition-all group-hover:bg-purple-300"
+          className="inline-block overflow-hidden rounded-full transition-all group-hover:bg-purple-100"
           data-slot="accordion-icon"
         >
           <ChevronDownIcon

src/components/ui/Badge/Badge.test.tsx

@@ -74,7 +74,7 @@ describe("Badge", () => {
       gray: ["bg-gray-100", "text-gray-800"],
       green: ["bg-green-50", "text-green-800"],
       orange: ["bg-orange-50", "text-orange-800"],
-      purple: ["bg-purple-300", "text-purple-800"],
+      purple: ["bg-purple-100", "text-purple-800"],
       red: ["bg-red-50", "text-red-800"],
       white: ["bg-white", "text-gray-800"],
       yellow: ["bg-yellow-50", "text-yellow-800"],

src/components/ui/Badge/Badge.tsx

@@ -13,7 +13,7 @@ const badgeVariants = cva(
         gray: "border-gray-800/10 bg-gray-100 text-gray-800",
         green: "border-green-800/10 bg-green-50 text-green-800",
         orange: "border-orange-800/10 bg-orange-50 text-orange-800",
-        purple: "border-purple-800/10 bg-purple-300 text-purple-800",
+        purple: "border-purple-800/10 bg-purple-100 text-purple-800",
         red: "border-red-800/10 bg-red-50 text-red-800",
         white: "border-gray-800/10 bg-white text-gray-800",
         yellow: "border-yellow-800/10 bg-yellow-50 text-yellow-800",

src/components/ui/Button/Button.tsx

@@ -37,7 +37,7 @@ const buttonVariants = cva(
       {
         variant: "outlined",
         color: "purple",
-        class: "border-purple-800 bg-white text-purple-800 hover:bg-purple-300",
+        class: "border-purple-800 bg-white text-purple-800 hover:bg-purple-100",
       },
       // Error variants
       {

src/components/ui/Calendar/Calendar.tsx

@@ -68,7 +68,7 @@ const CalendarRoot = ({
               <button
                 className={cn(
                   "flex items-center gap-2 px-4 py-3 text-left font-normal text-base transition-colors",
-                  isSelected ? "bg-purple-300 text-sm" : "hover:bg-gray-100"
+                  isSelected ? "bg-purple-100 text-sm" : "hover:bg-gray-100"
                 )}
                 key={month}
                 onClick={() => handleMonthSelect(index)}
@@ -94,7 +94,7 @@ const CalendarRoot = ({
               <button
                 className={cn(
                   "flex items-center gap-2 px-4 py-3 text-left font-normal text-base transition-colors",
-                  isSelected ? "bg-purple-300 text-sm" : "hover:bg-gray-100"
+                  isSelected ? "bg-purple-100 text-sm" : "hover:bg-gray-100"
                 )}
                 key={year}
                 onClick={() => handleYearSelect(year)}
@@ -182,7 +182,7 @@ const CalendarMonthCaption = ({
       {/* Month Section */}
       <div className="flex items-center gap-1">
         <button
-          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-300"
+          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-100"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -210,7 +210,7 @@ const CalendarMonthCaption = ({
         </button>
 
         <button
-          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-300"
+          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-100"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -225,7 +225,7 @@ const CalendarMonthCaption = ({
       {/* Year Section */}
       <div className="flex items-center gap-1">
         <button
-          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-300"
+          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-100"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -250,7 +250,7 @@ const CalendarMonthCaption = ({
         </button>
 
         <button
-          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-300"
+          className="flex size-7 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-purple-100"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -404,12 +404,12 @@ function Calendar({
           defaultClassNames.nav
         ),
         button_previous: cn(
-          "inline-flex items-center justify-center rounded-full transition-colors hover:bg-purple-300",
+          "inline-flex items-center justify-center rounded-full transition-colors hover:bg-purple-100",
           "size-7 select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
-          "inline-flex items-center justify-center rounded-full transition-colors hover:bg-purple-300",
+          "inline-flex items-center justify-center rounded-full transition-colors hover:bg-purple-100",
           "size-7 select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
@@ -422,7 +422,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative rounded-full px-2 hover:bg-purple-300",
+          "relative rounded-full px-2 hover:bg-purple-100",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(

src/components/ui/ColorPicker/ColorPicker.stories.tsx

@@ -65,7 +65,7 @@ export const InForm: Story = {
         <div className="flex items-center gap-3">
           <ColorPicker onChange={setColor} value={color} />
           <input
-            className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300"
+            className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-100"
             id="tag-name"
             placeholder="Ex: Urgente"
           />

src/components/ui/ColorPicker/ColorPicker.tsx

@@ -93,7 +93,7 @@ export function ColorPicker({
         <button
           aria-label="Selecionar cor"
           className={cn(
-            "size-8 shrink-0 cursor-pointer rounded-md border border-gray-300 transition-shadow hover:ring-2 hover:ring-purple-300",
+            "size-8 shrink-0 cursor-pointer rounded-md border border-gray-300 transition-shadow hover:ring-2 hover:ring-purple-100",
             className
           )}
           style={{ backgroundColor: value }}

src/components/ui/Command/Command.tsx

@@ -148,7 +148,7 @@ function CommandItem({
   return (
     <CommandPrimitive.Item
       className={cn(
-        "relative flex cursor-default select-none items-center gap-3 rounded-lg px-2 py-2.5 text-black text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-purple-800 data-[selected=true]:text-white data-[disabled=true]:opacity-50 data-[selected=true]:[&_[data-slot=command-shortcut]]:text-purple-300 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-gray-600 data-[selected=true]:[&_svg]:text-white",
+        "relative flex cursor-default select-none items-center gap-3 rounded-lg px-2 py-2.5 text-black text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-purple-800 data-[selected=true]:text-white data-[disabled=true]:opacity-50 data-[selected=true]:[&_[data-slot=command-shortcut]]:text-purple-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-gray-600 data-[selected=true]:[&_svg]:text-white",
         className
       )}
       data-slot="command-item"

src/components/ui/CopyButton/CopyButton.test.tsx

@@ -19,7 +19,7 @@ describe("CopyButton", () => {
 
       const button = screen.getByRole("button", { name: COPY_BUTTON_LABEL });
       expect(button).toBeVisible();
-      expect(button).toHaveClass("bg-purple-300", "hover:bg-purple-300");
+      expect(button).toHaveClass("bg-purple-100", "hover:bg-purple-100");
     });
 
     it("shows copy icon initially", () => {

src/components/ui/CopyButton/CopyButton.tsx

@@ -83,7 +83,7 @@ export function CopyButton({
   }
 
   const buttonClassName = cn(
-    "flex size-6 cursor-pointer bg-purple-300 transition-all duration-500 ease-out hover:bg-purple-300",
+    "flex size-6 cursor-pointer bg-purple-100 transition-all duration-500 ease-out hover:bg-purple-100",
     !alwaysVisible && "opacity-0 group-hover:opacity-100"
   );
 

src/components/ui/IconButton/IconButton.tsx

@@ -38,7 +38,7 @@ const iconButtonVariants = cva(
         variant: "outlined",
         color: "default",
         class:
-          "border-gray-300 bg-white hover:border-purple-300 hover:bg-purple-300",
+          "border-gray-300 bg-white hover:border-purple-100 hover:bg-purple-100",
       },
       // purple variants
       {
@@ -50,7 +50,7 @@ const iconButtonVariants = cva(
         variant: "outlined",
         color: "purple",
         class:
-          "border-purple-800 bg-white hover:border-purple-300 hover:bg-purple-300",
+          "border-purple-800 bg-white hover:border-purple-100 hover:bg-purple-100",
       },
       // Ghost variants
       {

src/components/ui/Pagination/pagination.test.tsx

@@ -212,6 +212,6 @@ describe("DynamicPagination", () => {
 
     const page3Button = screen.getByRole("button", { name: "3" });
     expect(page3Button).toHaveAttribute("aria-current", "page");
-    expect(page3Button).toHaveClass("bg-purple-300");
+    expect(page3Button).toHaveClass("bg-purple-100");
   });
 });

src/components/ui/Pagination/pagination.tsx

@@ -160,7 +160,7 @@ function DynamicPagination({
                 aria-current={currentPage === page ? "page" : undefined}
                 className={cn(
                   PAGINATION_BUTTON_BASE_STYLES,
-                  currentPage === page && "bg-purple-300"
+                  currentPage === page && "bg-purple-100"
                 )}
                 onClick={() => onPageChange(page)}
                 type="button"

src/components/ui/ScrollArea/ScrollArea.stories.tsx

@@ -126,7 +126,7 @@ export const ChatList = {
             className="flex gap-3 p-4 transition-colors hover:bg-gray-50"
             key={item.id}
           >
-            <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-purple-300">
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-purple-100">
               <span className="font-medium text-purple-900 text-sm">
                 {String.fromCharCode(65 + (item.index % 26))}
               </span>

src/components/ui/Select/Select.tsx

@@ -45,7 +45,7 @@ const selectTriggerVariants = cva(
 );
 
 const selectItemVariants = cva(
-  "relative flex w-full cursor-pointer select-none items-center gap-2 text-base text-gray-900 outline-hidden transition-colors data-disabled:pointer-events-none data-[state=checked]:bg-purple-300 data-highlighted:bg-gray-300 data-[state=checked]:text-purple-800 data-disabled:opacity-50",
+  "relative flex w-full cursor-pointer select-none items-center gap-2 text-base text-gray-900 outline-hidden transition-colors data-disabled:pointer-events-none data-[state=checked]:bg-purple-100 data-highlighted:bg-gray-300 data-[state=checked]:text-purple-800 data-disabled:opacity-50",
   {
     variants: {
       size: {

src/components/ui/ToggleChip/ToggleChip.tsx

@@ -22,7 +22,7 @@ function ToggleChip({
         "inline-flex items-center rounded-full border px-3 py-1.5 font-medium text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-600",
         selected
           ? "border-purple-600 bg-purple-50 text-purple-800"
-          : "border-gray-200 bg-white text-gray-700 hover:border-purple-300",
+          : "border-gray-200 bg-white text-gray-700 hover:border-purple-100",
         className
       )}
       onClick={() => onSelectedChange(!selected)}

src/components/ui/Waveform/WaveformRecorder.tsx

@@ -83,7 +83,7 @@ export function WaveformRecorder({
 
       <IconButton
         aria-label={isRecording ? "Pausar" : "Continuar gravação"}
-        className="size-[36px] rounded-full border border-gray-300 hover:border-purple-300 hover:bg-purple-50"
+        className="size-[36px] rounded-full border border-gray-300 hover:border-purple-100 hover:bg-purple-50"
         disabled={loading}
         onClick={handlePauseResume}
         shape="circular"