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

@ -58,7 +58,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
<HoverCardTrigger>
<div
key={tag}
className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-background-card"
className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-bg-card"
>
<div className="flex gap-2 items-center">
<div className="max-w-80 overflow-hidden text-ellipsis">
@ -90,7 +90,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
<Input
ref={inputRef}
type="text"
className="h-8 bg-background-card"
className="h-8 bg-bg-card"
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
@ -103,7 +103,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
) : (
<Button
variant="dashed"
className="w-fit flex items-center justify-center gap-2 bg-background-card"
className="w-fit flex items-center justify-center gap-2 bg-bg-card"
onClick={showInput}
style={tagPlusStyle}
>

View File

@ -226,7 +226,7 @@ function MessageItem({
? styles.messageTextDark
: styles.messageText]: isAssistant,
[styles.messageUserText]: !isAssistant,
'bg-background-card': !isAssistant,
'bg-bg-card': !isAssistant,
})}
>
{item.data ? (

View File

@ -11,7 +11,7 @@ const badgeVariants = cva(
default:
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
secondary:
'border-transparent bg-background-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
'border-transparent bg-bg-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
destructive:
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
outline: 'text-foreground',

View File

@ -15,8 +15,7 @@ const buttonVariants = cva(
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-background-card text-secondary-foreground hover:bg-secondary/80',
secondary: 'bg-bg-card text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
tertiary:
@ -52,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
return (
<Comp
className={cn(
'bg-background-card',
'bg-bg-card',
buttonVariants({ variant, size, className }),
)}
ref={ref}

View File

@ -8,10 +8,7 @@ const Card = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
'rounded-lg bg-background-card text-card-foreground shadow-sm',
className,
)}
className={cn('rounded-lg bg-bg-card shadow-sm', className)}
{...props}
/>
));

View File

@ -8,7 +8,7 @@ const Table = React.forwardRef<
>(({ className, rootClassName, ...props }, ref) => (
<div
className={cn(
'relative w-full overflow-auto rounded-2xl bg-background-card',
'relative w-full overflow-auto rounded-2xl bg-bg-card',
rootClassName,
)}
>

View File

@ -1028,7 +1028,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
'30d': '30 days',
},
publish: 'API',
exeSQL: 'ExeSQL',
exeSQL: 'Execute SQL',
exeSQLDescription:
'A component that performs SQL queries on a relational database, supporting querying from MySQL, PostgreSQL, or MariaDB.',
dbType: 'Database Type',

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">