Feat: Configure colors according to the design draft#3221 (#9301)

### What problem does this PR solve?

Feat: Configure colors according to the design draft#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-08-07 13:59:33 +08:00
committed by GitHub
parent 63c2f5b821
commit 23062cb27a
20 changed files with 92 additions and 33 deletions

View File

@ -83,12 +83,12 @@ function InnerAgentNode({
></Handle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<section className="flex flex-col gap-2">
<div className={'bg-background-card rounded-sm p-1'}>
<div className={'bg-bg-card rounded-sm p-1'}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
{(isGotoMethod ||
exceptionMethod === AgentExceptionMethod.Comment) && (
<div className="bg-background-card rounded-sm p-1 flex justify-between gap-2">
<div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
<span className="text-text-sub-title">On Failure</span>
<span className="truncate flex-1 text-right">
{t(`flow.${exceptionMethod}`)}

View File

@ -31,13 +31,13 @@ export function InnerCategorizeNode({
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<section className="flex flex-col gap-2">
<div className={'bg-background-card rounded-sm px-1'}>
<div className={'bg-bg-card rounded-sm px-1'}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
{positions.map((position) => {
return (
<div key={position.uuid}>
<div className={'bg-background-card rounded-sm p-1 truncate'}>
<div className={'bg-bg-card rounded-sm p-1 truncate'}>
{position.name}
</div>
<CommonHandle

View File

@ -42,7 +42,7 @@ function OperatorItemList({ operators }: OperatorItemProps) {
<TooltipTrigger asChild>
<DropdownMenuItem
key={x}
className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
className="hover:bg-bg-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
onClick={addCanvasNode(x, {
nodeId,
id,

View File

@ -145,7 +145,7 @@ function EmbedDialog({
{t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
<span className="ml-1 inline-block">ID</span>
</div>
<div className="bg-background-card rounded-lg flex justify-between p-2">
<div className="bg-bg-card rounded-lg flex justify-between p-2">
<span>{token} </span>
<CopyToClipboard text={token}></CopyToClipboard>
</div>

View File

@ -36,7 +36,7 @@ export function ToolCard({
<li
{...props}
className={cn(
'flex bg-background-card p-1 rounded-sm justify-between',
'flex bg-bg-card p-1 rounded-sm justify-between',
className,
)}
>

View File

@ -133,7 +133,7 @@ function ConditionCards({
},
)}
>
<section className="p-2 bg-background-card flex justify-between items-center">
<section className="p-2 bg-bg-card flex justify-between items-center">
<FormField
control={form.control}
name={`${name}.${index}.cpn_id`}

View File

@ -135,7 +135,7 @@ const ToolTimelineItem = ({
<Accordion
type="single"
collapsible
className="bg-background-card px-3"
className="bg-bg-card px-3"
>
<AccordionItem value={idx.toString()}>
<AccordionTrigger

View File

@ -254,7 +254,7 @@ export const WorkFlowTimeline = ({
<Accordion
type="single"
collapsible
className="bg-background-card px-3"
className="bg-bg-card px-3"
>
<AccordionItem value={idx.toString()}>
<AccordionTrigger

View File

@ -61,7 +61,7 @@ export default ({
};
return (
<div className="flex pr-[25px]">
<div className="flex items-center gap-4 bg-background-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
<div className="flex items-center gap-4 bg-bg-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
{textSelectOptions.map((option) => (
<div
key={option.value}
@ -76,7 +76,7 @@ export default ({
</div>
<div className="ml-auto"></div>
<Input
className="bg-background-card text-muted-foreground"
className="bg-bg-card text-muted-foreground"
style={{ width: 200 }}
placeholder={t('search')}
icon={<SearchOutlined />}
@ -86,7 +86,7 @@ export default ({
<div className="w-[20px]"></div>
<Popover>
<PopoverTrigger asChild>
<Button className="bg-background-card text-muted-foreground hover:bg-card">
<Button className="bg-bg-card text-muted-foreground hover:bg-card">
<ListFilter />
</Button>
</PopoverTrigger>
@ -95,10 +95,7 @@ export default ({
</PopoverContent>
</Popover>
<div className="w-[20px]"></div>
<Button
onClick={() => createChunk()}
className="bg-background-card text-primary"
>
<Button onClick={() => createChunk()} className="bg-bg-card text-primary">
<Plus size={44} />
</Button>
</div>

View File

@ -84,7 +84,7 @@ export function SideBar({ refreshCount }: PropType) {
className={cn(
'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
{
'bg-background-card': active,
'bg-bg-card': active,
'text-text-title': active,
},
)}

View File

@ -40,7 +40,7 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
key={x.id}
onClick={handleCardClick(x.id, x.is_new)}
className={cn('cursor-pointer bg-transparent', {
'bg-background-card': conversationId === x.id,
'bg-bg-card': conversationId === x.id,
})}
>
<CardContent className="px-3 py-2 flex justify-between items-center group">