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

@ -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}