From 2016e41a09e534a8d8afcb5240756ad07e45bbd0 Mon Sep 17 00:00:00 2001
From: Dmytro Soldatov <cyberdexx@gmail.com>
Date: Thu, 23 Jul 2026 11:33:39 +0300
Subject: [PATCH] Make form element colors consistent

Use the pink accent for input focus/hover and switch/slider fills
instead of the old blue, and swap the blue list hover states for a
neutral gray. Also fix the switch thumb padding so it's even on both
sides.
---
 .../src/components/properties/button-property.tsx         | 2 +-
 .../src/components/properties/number-property.tsx         | 2 +-
 .../frontend/src/components/properties/range-property.tsx | 2 +-
 .../src/components/properties/select-property.tsx         | 2 +-
 .../frontend/src/components/properties/text-property.tsx  | 2 +-
 packages/frontend/src/components/ui/color.tsx             | 4 ++--
 packages/frontend/src/components/ui/slider.tsx            | 2 +-
 packages/frontend/src/components/ui/switch.tsx            | 4 ++--
 packages/frontend/src/components/ui/vector2.tsx           | 6 +++---
 .../src/pages/assets/gpuTextures/TextureViewer.tsx        | 8 ++++----
 .../rendering/instructions/shared/InstructionBubble.tsx   | 4 ++--
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/src/components/properties/button-property.tsx b/packages/frontend/src/components/properties/button-property.tsx
index 15f3c72..db36ec7 100644
--- a/packages/frontend/src/components/properties/button-property.tsx
+++ b/packages/frontend/src/components/properties/button-property.tsx
@@ -8,7 +8,7 @@ export const ButtonProperty: React.FC<PropertyPanelData> = ({ entry }) => {
     <Button
       variant="outline"
       size="sm"
-      className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded outline-none"
+      className="border-border hover:border-primary focus:border-primary h-6 w-full rounded outline-none"
       onClick={() => entry.onChange(true)}
       {...(entry.options as ButtonFnProps)}
     >
diff --git a/packages/frontend/src/components/properties/number-property.tsx b/packages/frontend/src/components/properties/number-property.tsx
index 75a9168..fe2d79f 100644
--- a/packages/frontend/src/components/properties/number-property.tsx
+++ b/packages/frontend/src/components/properties/number-property.tsx
@@ -9,7 +9,7 @@ export const NumberProperty: React.FC<PropertyPanelData> = ({ value, entry }) =>
       type="number"
       value={value ?? undefined}
       onChange={(e) => entry.onChange(Number(e.target.value))}
-      className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded text-xs outline-none"
+      className="border-border hover:border-primary focus:border-primary h-6 w-full rounded text-xs outline-none"
     />
   );
 };
diff --git a/packages/frontend/src/components/properties/range-property.tsx b/packages/frontend/src/components/properties/range-property.tsx
index 1e5fd50..de54bb4 100644
--- a/packages/frontend/src/components/properties/range-property.tsx
+++ b/packages/frontend/src/components/properties/range-property.tsx
@@ -8,7 +8,7 @@ export const RangeProperty: React.FC<PropertyPanelData> = ({ value, entry }) =>
       {...(entry.options as SliderProps)}
       value={[value]}
       onValueChange={(value) => entry.onChange(JSON.stringify(value))}
-      className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded outline-none"
+      className="border-border hover:border-primary focus:border-primary h-6 w-full rounded outline-none"
     />
   );
 };
diff --git a/packages/frontend/src/components/properties/select-property.tsx b/packages/frontend/src/components/properties/select-property.tsx
index a7aaea6..c43f97a 100644
--- a/packages/frontend/src/components/properties/select-property.tsx
+++ b/packages/frontend/src/components/properties/select-property.tsx
@@ -4,7 +4,7 @@ import type { PropertyPanelData, SelectionProps } from './propertyTypes';
 export const SelectProperty: React.FC<PropertyPanelData> = ({ value, entry }) => {
   return (
     <Select value={value} onValueChange={(value) => entry.onChange(JSON.stringify(value))}>
-      <SelectTrigger className="border-border hover:border-secondary focus:border-secondary h-7 w-full text-sm outline-none">
+      <SelectTrigger className="border-border hover:border-primary focus:border-primary h-7 w-full text-sm outline-none">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
diff --git a/packages/frontend/src/components/properties/text-property.tsx b/packages/frontend/src/components/properties/text-property.tsx
index 6edf591..4e55cc2 100644
--- a/packages/frontend/src/components/properties/text-property.tsx
+++ b/packages/frontend/src/components/properties/text-property.tsx
@@ -9,7 +9,7 @@ export const TextProperty: React.FC<PropertyPanelData> = ({ value, entry }) => {
       type="text"
       value={value ?? ''}
       onChange={(e) => entry.onChange(JSON.stringify(e.target.value))}
-      className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded text-xs outline-none"
+      className="border-border hover:border-primary focus:border-primary h-6 w-full rounded text-xs outline-none"
     />
   );
 };
diff --git a/packages/frontend/src/components/ui/color.tsx b/packages/frontend/src/components/ui/color.tsx
index 9ce0a12..31263e9 100644
--- a/packages/frontend/src/components/ui/color.tsx
+++ b/packages/frontend/src/components/ui/color.tsx
@@ -31,7 +31,7 @@ export const ColorInput: React.FC<ColorProps> = ({ value, onChange, ...rest }) =
           <Button
             variant="outline"
             size="sm"
-            className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded outline-none"
+            className="border-border hover:border-primary focus:border-primary h-6 w-full rounded outline-none"
             onClick={handleClose}
           >
             {hex}
@@ -49,7 +49,7 @@ export const ColorInput: React.FC<ColorProps> = ({ value, onChange, ...rest }) =
         <Button
           variant="outline"
           size="sm"
-          className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded outline-none"
+          className="border-border hover:border-primary focus:border-primary h-6 w-full rounded outline-none"
           onClick={handleClick}
         >
           {hex}
diff --git a/packages/frontend/src/components/ui/slider.tsx b/packages/frontend/src/components/ui/slider.tsx
index 7cd0221..b8f19bf 100644
--- a/packages/frontend/src/components/ui/slider.tsx
+++ b/packages/frontend/src/components/ui/slider.tsx
@@ -13,7 +13,7 @@ const Slider = React.forwardRef<
     {...props}
   >
     <SliderPrimitive.Track className="bg-border relative h-1 w-full grow overflow-hidden rounded-full">
-      <SliderPrimitive.Range className="bg-secondary absolute h-full" />
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="focus-visible:ring-ring block h-3.5 w-3.5 rounded-full bg-zinc-700 shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 dark:bg-white" />
   </SliderPrimitive.Root>
diff --git a/packages/frontend/src/components/ui/switch.tsx b/packages/frontend/src/components/ui/switch.tsx
index 977cb2b..6ca0adb 100644
--- a/packages/frontend/src/components/ui/switch.tsx
+++ b/packages/frontend/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'border-border hover:border-secondary focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-secondary data-[state=unchecked]:bg-background peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:hover:border-white',
+      'border-border hover:border-primary focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-background peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border px-0.5 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:hover:border-white',
       className,
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-black/60 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-white dark:bg-white',
+        'pointer-events-none block h-4 w-4 rounded-full bg-black/60 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-white dark:bg-white',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/packages/frontend/src/components/ui/vector2.tsx b/packages/frontend/src/components/ui/vector2.tsx
index 01ee38a..baa9484 100644
--- a/packages/frontend/src/components/ui/vector2.tsx
+++ b/packages/frontend/src/components/ui/vector2.tsx
@@ -30,7 +30,7 @@ export const Vector2: React.FC<Vector2Props> = ({ x, y, className, onChange, val
         <Input
           {...x}
           type="number"
-          className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded text-xs outline-none"
+          className="border-border hover:border-primary focus:border-primary h-6 w-full rounded text-xs outline-none"
         />
       </div>
       <div className="flex items-center gap-2">
@@ -38,7 +38,7 @@ export const Vector2: React.FC<Vector2Props> = ({ x, y, className, onChange, val
         <Input
           {...y}
           type="number"
-          className="border-border hover:border-secondary focus:border-secondary h-6 w-full rounded text-xs outline-none"
+          className="border-border hover:border-primary focus:border-primary h-6 w-full rounded text-xs outline-none"
         />
       </div>
     </div>
@@ -71,7 +71,7 @@ export const VectorX: React.FC<VectorXProps> = ({ inputs, onChange, value }) =>
           <Input
             {...input}
             type="number"
-            className="border-border hover:border-secondary focus:border-secondary h-6 w-full max-w-24 rounded text-xs outline-none"
+            className="border-border hover:border-primary focus:border-primary h-6 w-full max-w-24 rounded text-xs outline-none"
           />
         </div>
       ))}
diff --git a/packages/frontend/src/pages/assets/gpuTextures/TextureViewer.tsx b/packages/frontend/src/pages/assets/gpuTextures/TextureViewer.tsx
index e04b9e1..774cee6 100644
--- a/packages/frontend/src/pages/assets/gpuTextures/TextureViewer.tsx
+++ b/packages/frontend/src/pages/assets/gpuTextures/TextureViewer.tsx
@@ -33,13 +33,13 @@ export const TextureViewer: React.FC<TextureViewerProps> = memo(
 
     if (!blob) return null;
     const sanitizedName = name == '' ? 'Unnamed' : name.split('/').pop() || 'Unnamed';
-    const bg = selected ? 'bg-secondary' : isLoaded ? 'bg-primary' : 'bg-border';
-    const border = selected ? 'border-secondary' : 'border-border';
+    const bg = selected ? 'bg-primary' : isLoaded ? 'bg-primary' : 'bg-border';
+    const border = selected ? 'border-primary' : 'border-border';
     return (
       <div
         className={cn(
           border,
-          `max-h-42 h-42 group-hover:bg-secondary hover:border-secondary flex w-40 cursor-pointer flex-col items-center justify-between rounded-sm border`,
+          `max-h-42 h-42 group-hover:bg-muted-foreground hover:border-muted-foreground flex w-40 cursor-pointer flex-col items-center justify-between rounded-sm border`,
         )}
         style={{ backgroundImage: `url(${theme === 'dark' ? transparent : transparentLight})` }}
         onClick={onClick}
@@ -48,7 +48,7 @@ export const TextureViewer: React.FC<TextureViewerProps> = memo(
           <div className="flex h-32 w-40 items-center justify-center overflow-hidden p-1">
             <img src={blob} alt="content" className="max-h-full max-w-full" />
           </div>
-          <div className={cn(bg, `group-hover:bg-secondary rounded-b-sm`)}>
+          <div className={cn(bg, `group-hover:bg-muted-foreground rounded-b-sm`)}>
             <div className={`w-full truncate px-1 py-0.5 pb-2 text-center text-xs text-white`}>{sanitizedName}</div>
             <div className={`h-auto w-full truncate px-1 py-0.5 text-left text-xs text-white`}>
               Size: {formatNumber(pixelWidth, 1)} x {formatNumber(pixelHeight, 1)}
diff --git a/packages/frontend/src/pages/rendering/instructions/shared/InstructionBubble.tsx b/packages/frontend/src/pages/rendering/instructions/shared/InstructionBubble.tsx
index f1312cc..fa6f442 100644
--- a/packages/frontend/src/pages/rendering/instructions/shared/InstructionBubble.tsx
+++ b/packages/frontend/src/pages/rendering/instructions/shared/InstructionBubble.tsx
@@ -7,7 +7,7 @@ import { Texture } from './Texture';
 // - instruction pill rules
 //   - circle dot color that matches the render group its a part of
 //   - red outline if its a draw call - show blue if renderBatch
-//   - secondary outline if hovered
+//   - gray highlight if hovered
 //   - primary outline if selected
 //   - show type, action, draw texture (if exists)
 export interface InstructionPillProps {
@@ -26,7 +26,7 @@ export const InstructionPill: React.FC<InstructionPillProps> = memo(
     return (
       <div
         className={cn(
-          `hover:bg-secondary bg-border flex cursor-pointer flex-row items-center justify-center gap-1 rounded-sm border p-1`,
+          `hover:bg-muted-foreground bg-border flex cursor-pointer flex-row items-center justify-center gap-1 rounded-sm border p-1`,
           'min-w-52',
           border,
         )}