diff --git a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
index b71aca5be4..ace855ff2c 100644
--- a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -266,8 +266,7 @@ export const CssValueInput = ({
   });
 
   const shouldHandleEvent = useCallback((node) => {
-    if (suffixRef.current?.contains?.(node)) return false;
-    return true;
+    return !suffixRef.current?.contains?.(node);
   }, []);
   const [scrubRef, inputRef, isInputActive] = useScrub({
     value,
@@ -293,7 +292,7 @@ export const CssValueInput = ({
 
   const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property);
   const prefix = icon && (
-    <TextFieldIconButton state={isCurrentBreakpoint ? "highlight" : undefined}>
+    <TextFieldIconButton state={isCurrentBreakpoint ? "set" : undefined}>
       {icon}
     </TextFieldIconButton>
   );
@@ -328,7 +327,6 @@ export const CssValueInput = ({
             onKeyDown={handleKeyDown}
             baseRef={scrubRef}
             inputRef={inputRef}
-            suffixRef={suffixRef}
             name={property}
             state={
               value.type === "invalid"
diff --git a/packages/design-system/src/components/text-field.tsx b/packages/design-system/src/components/text-field.tsx
index b27965fc01..c8870ed381 100644
--- a/packages/design-system/src/components/text-field.tsx
+++ b/packages/design-system/src/components/text-field.tsx
@@ -55,7 +55,7 @@ export const TextFieldIconButton = styled(
             color: "white",
           },
         },
-        highlight: {
+        set: {
           backgroundColor: "$blue4",
           color: "$blue11",
           "&:hover": {
@@ -63,6 +63,14 @@ export const TextFieldIconButton = styled(
             color: "$blue11",
           },
         },
+        inherited: {
+          backgroundColor: "$orange4",
+          color: "$orange11",
+          "&:hover": {
+            backgroundColor: "$orange4",
+            color: "$orange11",
+          },
+        },
       },
     },
   },
@@ -250,9 +258,7 @@ export type TextFieldProps = Pick<
   "variant" | "state" | "css"
 > &
   Omit<React.ComponentProps<"input">, "prefix" | "children"> & {
-    suffixRef?: React.Ref<HTMLDivElement>;
-    prefixRef?: React.Ref<HTMLDivElement>;
-    baseRef?: React.Ref<HTMLDivElement>;
+    fieldRef?: React.Ref<HTMLDivElement>;
     inputRef?: React.Ref<HTMLInputElement>;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
@@ -264,9 +270,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
       prefix,
       css,
       disabled,
-      prefixRef,
-      suffixRef,
-      baseRef,
+      fieldRef,
       inputRef,
       state,
       variant: variantProp,
@@ -311,7 +315,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
       <TextFieldBase
         {...focusWithinProps}
         aria-disabled={disabled}
-        ref={mergeRefs(forwardedRef, baseRef ?? null)}
+        ref={mergeRefs(forwardedRef, fieldRef ?? null)}
         state={state}
         variant={variant}
         css={css}
@@ -328,8 +332,8 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
           ref={mergeRefs(internalInputRef, inputRef ?? null)}
         />
 
-        {prefix && <PrefixSlot ref={prefixRef}>{prefix}</PrefixSlot>}
-        {suffix && <SuffixSlot ref={suffixRef}>{suffix}</SuffixSlot>}
+        {prefix && <PrefixSlot>{prefix}</PrefixSlot>}
+        {suffix && <SuffixSlot>{suffix}</SuffixSlot>}
       </TextFieldBase>
     );
   }