Feat: Replace color variables according to design draft #3221 (#9305)

### What problem does this PR solve?

Feat: Replace color variables according to design draft #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-08-07 15:19:45 +08:00
committed by GitHub
parent 23062cb27a
commit dc48c3863d
57 changed files with 93 additions and 105 deletions

View File

@ -40,7 +40,7 @@ export function BulkOperateBar({
{list.map((x) => (
<li
key={x.id}
className={cn({ ['text-text-delete-red']: isDeleteItem(x.id) })}
className={cn({ ['text-state-error']: isDeleteItem(x.id) })}
>
<ConfirmDeleteDialog
hidden={!isDeleteItem(x.id)}

View File

@ -52,7 +52,7 @@ export function ConfirmDeleteDialog({
{t('common.cancel')}
</AlertDialogCancel>
<AlertDialogAction
className="bg-text-delete-red text-text-title"
className="bg-state-error text-text-primary"
onClick={onOk}
>
{t('common.ok')}

View File

@ -95,7 +95,7 @@ function CheckboxFormMultiple({
name={x.field}
render={({ field }) => {
return (
<div className="flex items-center justify-between text-text-title text-xs">
<div className="flex items-center justify-between text-text-primary text-xs">
<FormItem
key={item.id}
className="flex flex-row space-x-3 space-y-0 items-center "

View File

@ -27,7 +27,7 @@ export const FilterButton = React.forwardRef<
<Button variant="secondary" {...props} ref={ref}>
<span
className={cn({
'text-text-title': count > 0,
'text-text-primary': count > 0,
'text-text-sub-title-invert': count === 0,
})}
>

View File

@ -25,7 +25,7 @@ export function InnerUploadedMessageFiles({ files = [] }: IProps) {
)}
<div className="text-xs max-w-20">
<div className="truncate">{file.name}</div>
<p className="text-text-sub-title pt-1">{formatBytes(file.size)}</p>
<p className="text-text-secondary pt-1">{formatBytes(file.size)}</p>
</div>
</div>
))}

View File

@ -142,7 +142,7 @@ export function PromptEditor({
}
placeholder={
<div
className="absolute top-10 left-2 text-text-sub-title"
className="absolute top-10 left-2 text-text-secondary"
data-xxx
>
{placeholder || t('common.pleaseInput')}

View File

@ -34,7 +34,7 @@ const BreadcrumbItem = React.forwardRef<
<li
ref={ref}
className={cn(
'inline-flex items-center gap-1.5 text-text-sub-title',
'inline-flex items-center gap-1.5 text-text-secondary',
className,
)}
{...props}

View File

@ -29,11 +29,11 @@ const DualRangeSlider = React.forwardRef<
{...props}
>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
<SliderPrimitive.Range className="absolute h-full bg-background-checked" />
<SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
</SliderPrimitive.Track>
{initialValue.map((value, index) => (
<React.Fragment key={index}>
<SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-background-checked bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
<SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
{label && (
<span
className={cn(

View File

@ -150,7 +150,7 @@ export function RAGFlowPagination({
<PaginationItem
key={page}
className={cn({
['bg-background-header-bar rounded-md text-text-title']:
['bg-bg-card rounded-md text-text-primary']:
currentPage === page,
})}
>
@ -174,7 +174,7 @@ export function RAGFlowPagination({
options={sizeChangerOptions}
value={currentPageSize}
onChange={handlePageSizeChange}
triggerClassName="bg-background-header-bar"
triggerClassName="bg-bg-card"
></RAGFlowSelect>
)}
</section>

View File

@ -43,7 +43,7 @@ export function Segmented({
return (
<div
className={cn(
'flex items-center rounded-3xl p-1 gap-2 bg-background-header-bar px-5 py-2.5',
'flex items-center rounded-3xl p-1 gap-2 bg-bg-card px-5 py-2.5',
className,
)}
>
@ -55,10 +55,10 @@ export function Segmented({
<div
key={actualValue}
className={cn(
'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer text-text-badge',
'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer',
{
'bg-text-title': selectedValue === actualValue,
'text-text-title-invert': selectedValue === actualValue,
'bg-text-primary': selectedValue === actualValue,
'text-bg-base': selectedValue === actualValue,
},
)}
onClick={() => handleOnChange(actualValue)}

View File

@ -316,6 +316,7 @@ const SidebarRail = React.forwardRef<
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
className,
)}
type="button"
{...props}
/>
);

View File

@ -11,7 +11,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-3.5 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-checked data-[state=unchecked]:bg-text-sub-title',
'peer inline-flex h-3.5 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-primary data-[state=unchecked]:bg-text-sub-title',
className,
)}
{...props}

View File

@ -82,7 +82,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
'h-12 px-4 text-left align-middle font-normal text-text-sub-title [&:has([role=checkbox])]:pr-0',
'h-12 px-4 text-left align-middle font-normal text-text-secondary [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
@ -97,7 +97,7 @@ const TableCell = React.forwardRef<
<td
ref={ref}
className={cn(
'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-text-title font-normal',
'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-text-primary font-normal',
className,
)}
{...props}

View File

@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-title data-[state=active]:shadow-sm',
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-primary data-[state=active]:shadow-sm',
className,
)}
{...props}