diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index d92c6124446..0791b81ef1d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -153,8 +153,8 @@ export default function NodeOutputField({
className={cn(
"h-4 w-4",
disabledOutput
- ? "text-placeholder opacity-60"
- : "text-placeholder hover:text-foreground",
+ ? "text-placeholder-foreground opacity-60"
+ : "text-placeholder-foreground hover:text-foreground",
)}
strokeWidth={1.5}
name={data.node?.outputs![index].hidden ? "EyeOff" : "Eye"}
@@ -208,7 +208,7 @@ export default function NodeOutputField({
{
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 80799e65640..3c33f909360 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -426,7 +426,7 @@ export default function GenericNode({
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 4b101a34cdc..cc5edefd210 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -101,8 +101,10 @@ export default function Dropdown({
diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx
index 9d5ec15e8fc..300d323a368 100644
--- a/src/frontend/src/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@@ -66,7 +66,7 @@ const CustomInputPopover = ({
0 || selectedOption ? "" : placeholder
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 88826903159..73981dedf7a 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -170,7 +170,7 @@ export default function InputComponent({
className={cn(
onChange && setSelectedOption && selectedOption !== ""
? "text-accent-emerald-foreground"
- : "text-muted-foreground",
+ : "text-placeholder-foreground",
!disabled && "hover:text-foreground",
)}
>
@@ -209,12 +209,12 @@ export default function InputComponent({
{pwdVisible ? (
) : (
)}
diff --git a/src/frontend/src/components/parameterRenderComponent/components/codeAreaComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/codeAreaComponent/index.tsx
index 7de21b8ef16..c31a671fb13 100644
--- a/src/frontend/src/components/parameterRenderComponent/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/components/codeAreaComponent/index.tsx
@@ -98,7 +98,7 @@ export default function CodeAreaComponent({
editNode
? externalLinkIconClasses.editNodeTop
: externalLinkIconClasses.normalTop,
- disabled ? "text-placeholder" : "text-foreground",
+ disabled ? "text-placeholder-foreground" : "text-foreground",
)}
/>
>
diff --git a/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx
index fd7c4b4f137..d23945b66c5 100644
--- a/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/components/floatComponent/index.tsx
@@ -63,7 +63,7 @@ export default function FloatComponent({
};
const iconClassName =
- "text-placeholder h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
+ "text-placeholder-foreground h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
const stepperClassName = "w-5 rounded-r-sm border-l-[1px]";
const incrementStepperClassName =
"border-b-[1px] hover:rounded-tr-[5px] hover:bg-muted group-increment";
diff --git a/src/frontend/src/components/parameterRenderComponent/components/inputFileComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/inputFileComponent/index.tsx
index 0c3598010d9..67f195d716a 100644
--- a/src/frontend/src/components/parameterRenderComponent/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/components/inputFileComponent/index.tsx
@@ -100,7 +100,7 @@ export default function InputFileComponent({
type="text"
className={cn(
"primary-input h-9 w-full cursor-pointer rounded-r-none text-sm focus:border-border focus:outline-none focus:ring-0",
- !value && "text-placeholder",
+ !value && "text-placeholder-foreground",
editNode && "h-6",
)}
value={value || "Upload a file..."}
diff --git a/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx
index 3f4eb36d325..69c0de953d9 100644
--- a/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/components/inputListComponent/index.tsx
@@ -49,7 +49,7 @@ export default function InputListComponent({
};
const getButtonClassName = () =>
- classNames(disabled ? "text-hard-zinc" : "text-placeholder");
+ classNames(disabled ? "text-hard-zinc" : "text-placeholder-foreground");
const getTestId = (type, index) =>
`input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;
@@ -96,7 +96,7 @@ export default function InputListComponent({
>
diff --git a/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx
index 5f338397dd6..84278601ee6 100644
--- a/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/components/textAreaComponent/index.tsx
@@ -114,7 +114,7 @@ export default function TextAreaComponent({
? externalLinkIconClasses.editNodeTop
: externalLinkIconClasses.iconTop,
disabled
- ? "bg-muted text-placeholder"
+ ? "text-placeholder-foreground bg-muted"
: "bg-background text-foreground",
)}
/>
@@ -159,7 +159,7 @@ export default function TextAreaComponent({
editNode ? "top-[5px]" : "top-[13px]",
disabled
? "text-placeholder"
- : "text-muted-foreground hover:text-foreground",
+ : "text-placeholder-foreground hover:text-foreground",
"right-10",
)}
/>
diff --git a/src/frontend/src/components/sliderComponent/index.tsx b/src/frontend/src/components/sliderComponent/index.tsx
index cc03a640a13..eb992333a22 100644
--- a/src/frontend/src/components/sliderComponent/index.tsx
+++ b/src/frontend/src/components/sliderComponent/index.tsx
@@ -226,7 +226,7 @@ export default function SliderComponent({
@@ -239,7 +239,7 @@ export default function SliderComponent({
{maxLabel}
diff --git a/src/frontend/src/components/ui/refreshButton.tsx b/src/frontend/src/components/ui/refreshButton.tsx
index abb56728b17..6ad5bdb1d38 100644
--- a/src/frontend/src/components/ui/refreshButton.tsx
+++ b/src/frontend/src/components/ui/refreshButton.tsx
@@ -28,13 +28,13 @@ function RefreshButton({
className,
disabled ? "cursor-not-allowed" : "",
!editNode ? "py-2.5 px-3" : "px-2 py-1",
- "group text-placeholder p-1 h-6 w-6",
+ "group text-placeholder-foreground p-1 h-6 w-6",
);
// icon class name should take into account the disabled state and the loading state
const disabledIconTextClass = disabled ? "text-muted-foreground" : "";
const iconClassName = cn(
- "h-4 w-4 animate-wiggle group-hover:text-primary text-placeholder",
+ "h-4 w-4 animate-wiggle group-hover:text-primary text-placeholder-foreground",
disabledIconTextClass,
);
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 6d9cadd5a39..4186e2c05e9 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -177,7 +177,7 @@
@apply flex gap-2;
}
.primary-input {
- @apply placeholder:text-placeholder form-input block w-full truncate rounded-md border-border bg-background px-3 text-left text-sm shadow-sm hover:border-muted-foreground focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
+ @apply placeholder:text-placeholder-foreground form-input block w-full truncate rounded-md border-border bg-background px-3 text-left text-sm shadow-sm hover:border-muted-foreground focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
}
.skeleton-card {
@@ -194,7 +194,7 @@
/* The same as primary-input but no-truncate */
.textarea-primary {
- @apply placeholder:text-placeholder form-input block w-full rounded-md border-border bg-background px-3 text-left shadow-sm hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
+ @apply placeholder:text-placeholder-foreground form-input block w-full rounded-md border-border bg-background px-3 text-left shadow-sm hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
}
.input-edit-node {
@@ -1218,7 +1218,7 @@
}
.disabled-state {
- @apply text-hard-zinc pointer-events-none bg-secondary;
+ @apply pointer-events-none bg-secondary text-hard-zinc;
}
.background-fade-input {
@@ -1251,6 +1251,6 @@
}
.beta-badge {
- @apply bg-accent-pink text-accent-pink-foreground flex h-6 w-11 items-center justify-center rounded-lg p-2 text-center text-xs font-medium;
+ @apply flex h-6 w-11 items-center justify-center rounded-lg bg-accent-pink p-2 text-center text-xs font-medium text-accent-pink-foreground;
}
}
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index 53f3446d86e..96d0ad663c3 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -129,6 +129,7 @@ const config = {
placeholder: "hsl(var(--placeholder))",
"hard-zinc": "hsl(var(--hard-zinc))",
"smooth-red": "hsl(var(--smooth-red))",
+ "placeholder-foreground": "hsl(var(--placeholder-foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",