CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-07-10 16:23:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

refactor: add accent-primary brand token; tokenize Nav/Input/Prompts/Endpoints colors

Browse source
This commit is contained in:
Marco Beretta 2026-06-20 18:53:14 +02:00
parent b7e0885389
commit ff98f70f42
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
36 changed files with 84 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Endpoints/ConvoIconURL.tsx
View file

@ -54,7 +54,7 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
}
return (
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-surface-primary text-text-primary">
{Icon && (
<Icon
size={41}

6
client/src/components/Endpoints/MessageEndpointIcon.tsx
View file

@ -81,7 +81,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
) : (
<div className="h-6 w-6">
<div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
<AssistantIcon className="h-2/3 w-2/3 text-gray-400" />
<AssistantIcon className="h-2/3 w-2/3 text-text-tertiary" />
</div>
</div>
),
@ -110,7 +110,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
) : (
<div className="h-6 w-6">
<div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
<Feather className="h-2/3 w-2/3 text-gray-400" aria-hidden="true" />
<Feather className="h-2/3 w-2/3 text-text-tertiary" aria-hidden="true" />
</div>
</div>
),
@ -197,7 +197,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
>
{icon}
{error === true && (
<span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
<span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-status-error text-[10px] text-white">
!
</span>
)}

2
client/src/components/Endpoints/MinimalIcon.tsx
View file

@ -77,7 +77,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
>
{icon}
{error === true && (
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-text-secondary">
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-status-error text-[10px] text-text-secondary">
!
</span>
)}

2
client/src/components/Endpoints/SaveAsPresetDialog.tsx
View file

@ -83,7 +83,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
}
selection={{
selectHandler: submitPreset,
selectClasses: 'bg-green-500 hover:bg-green-600 dark:hover:bg-green-600 text-white',
selectClasses: 'bg-surface-submit hover:bg-surface-submit-hover text-white',
selectText: localize('com_ui_save'),
}}
/>

10
client/src/components/Endpoints/Settings/Advanced.tsx
View file

@ -137,7 +137,7 @@ export default function Settings({
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>
@ -178,7 +178,7 @@ export default function Settings({
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>
@ -220,7 +220,7 @@ export default function Settings({
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>
@ -262,7 +262,7 @@ export default function Settings({
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>
@ -303,7 +303,7 @@ export default function Settings({
defaultTextProps,
optionText,
'flex rounded-md bg-transparent py-2 text-xs focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:border-gray-700',
'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-gray-200',
'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-border-light',
)}
/>
</div>

4
client/src/components/Endpoints/Settings/Examples.tsx
View file

@ -78,14 +78,14 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
<div className="flex justify-center">
<Button
type="button"
className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:focus:outline-none dark:focus:ring-offset-0"
onClick={removeExample}
>
<Minus className="w-[16px]" aria-hidden="true" />
</Button>
<Button
type="button"
className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:focus:outline-none dark:focus:ring-offset-0"
onClick={addExample}
>
<Plus className="w-[16px]" aria-hidden="true" />

10
client/src/components/Endpoints/Settings/Google.tsx
View file

@ -123,7 +123,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
'w-1/3',
),
)}
@ -158,7 +158,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>
@ -199,7 +199,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>
@ -241,7 +241,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>
@ -286,7 +286,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>

2
client/src/components/Endpoints/Settings/OptionHover.tsx
View file

@ -48,7 +48,7 @@ function OptionHover({ endpoint, type, side }: TOptionHoverProps) {
<HoverCardPortal>
<HoverCardContent side={side} className="z-[999] w-80">
<div className="space-y-2">
<p className="text-sm text-gray-600 dark:text-gray-300">{localize(text)}</p>
<p className="text-sm text-text-secondary">{localize(text)}</p>
</div>
</HoverCardContent>
</HoverCardPortal>

2
client/src/components/Endpoints/URLIcon.tsx
View file

@ -35,7 +35,7 @@ export const URLIcon = memo(
</div>
{imageError && iconURL && (
<div
className="absolute flex items-center justify-center rounded-full bg-red-500"
className="absolute flex items-center justify-center rounded-full bg-status-error"
style={{ width: '14px', height: '14px', top: 0, right: 0 }}
>
<AlertCircle size={10} className="text-white" aria-hidden="true" />

20
client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx
View file

@ -81,7 +81,7 @@ function MultiSelectDropDown({
<>
<ListboxButton
className={cn(
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-600 dark:border-white/20 sm:text-sm',
className ?? '',
)}
id={excludeIds[0]}
@ -91,7 +91,7 @@ function MultiSelectDropDown({
{' '}
{showLabel && (
<Label
className={cn('block text-xs text-gray-700 dark:text-gray-500', labelClassName)}
className={cn('block text-xs text-text-secondary', labelClassName)}
id={excludeIds[1]}
data-headlessui-state=""
>
@ -101,12 +101,12 @@ function MultiSelectDropDown({
<span className="inline-flex w-full truncate" id={excludeIds[2]}>
<span
className={cn(
'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
'flex h-6 items-center gap-1 truncate text-sm text-text-primary',
!showLabel ? 'text-xs' : '',
)}
>
{!showLabel && title.length > 0 && (
<span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>
<span className="text-xs text-text-secondary">{title}:</span>
)}
<span className="flex h-6 items-center gap-1 truncate">
<div className="flex gap-1">
@ -140,7 +140,7 @@ function MultiSelectDropDown({
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4 text-gray-400"
className="h-4 w-4 text-text-tertiary"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
@ -161,7 +161,7 @@ function MultiSelectDropDown({
<ListboxOptions
ref={menuRef}
className={cn(
'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-surface-secondary text-base text-xs ring-1 ring-black/10 focus:outline-none dark:ring-white/20 dark:last:border-0 md:w-[100%]',
optionsClassName,
)}
>
@ -175,7 +175,7 @@ function MultiSelectDropDown({
<ListboxOption
key={i}
value={option[optionValueKey]}
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-text-primary last:border-0 hover:bg-surface-hover dark:border-white/20"
>
<span className="flex items-center gap-1.5 truncate">
{!option.isButton && (
@ -196,19 +196,19 @@ function MultiSelectDropDown({
)}
<span
className={cn(
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
'flex h-6 items-center gap-1 text-text-primary',
selected ? 'font-semibold' : '',
)}
>
{option.name}
</span>
{option.isButton && (
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-text-primary">
<ArrowRight />
</span>
)}
{selected && !option.isButton && (
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-text-primary">
<CheckMark />
</span>
)}

12
client/src/components/Input/ModelSelect/MultiSelectPop.tsx
View file

@ -52,19 +52,19 @@ function MultiSelectPop({
<button
data-testid="select-dropdown-button"
className={cn(
'relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 sm:text-sm',
'relative flex flex-col rounded-md border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 sm:text-sm',
'pointer-cursor font-normal',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
'hover:bg-surface-hover radix-state-open:bg-surface-hover',
)}
>
{' '}
{showLabel && (
<label className="block text-xs text-gray-700 dark:text-gray-500">{title}</label>
<label className="block text-xs text-text-secondary">{title}</label>
)}
<span className="inline-flex" id={excludeIds[2]}>
<span
className={cn(
'flex h-6 items-center gap-1 text-sm text-gray-800 dark:text-white',
'flex h-6 items-center gap-1 text-sm text-text-primary',
!showLabel ? 'text-xs' : '',
)}
>
@ -96,7 +96,7 @@ function MultiSelectPop({
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4 text-gray-400"
className="h-4 w-4 text-text-tertiary"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
@ -112,7 +112,7 @@ function MultiSelectPop({
side="bottom"
align="center"
className={cn(
'mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white',
'mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-border-light bg-surface-secondary shadow-lg',
hasSearchRender && 'relative',
)}
>

10
client/src/components/Input/ModelSelect/SelectDropDownPop.tsx
View file

@ -68,8 +68,8 @@ function SelectDropDownPop({
<button
data-testid="select-dropdown-button"
className={cn(
'pointer-cursor relative flex flex-col rounded-lg border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 sm:text-sm',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
'pointer-cursor relative flex flex-col rounded-lg border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:ring-0 focus:ring-offset-0 dark:border-gray-700 sm:text-sm',
'hover:bg-surface-hover radix-state-open:bg-surface-hover',
'min-w-[200px] max-w-[215px] sm:min-w-full sm:max-w-full',
)}
aria-label={`Select ${title}`}
@ -77,7 +77,7 @@ function SelectDropDownPop({
>
{' '}
{showLabel && (
<label className="block text-xs text-gray-700 dark:text-gray-500">{title}</label>
<label className="block text-xs text-text-secondary">{title}</label>
)}
<span className="inline-flex w-full">
<span
@ -98,7 +98,7 @@ function SelectDropDownPop({
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4 text-gray-400"
className="h-4 w-4 text-text-tertiary"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
@ -114,7 +114,7 @@ function SelectDropDownPop({
side="bottom"
align="start"
className={cn(
'z-50 mr-3 mt-2 max-h-[52vh] w-full max-w-[85vw] overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white sm:max-w-full lg:max-h-[52vh]',
'z-50 mr-3 mt-2 max-h-[52vh] w-full max-w-[85vw] overflow-hidden overflow-y-auto rounded-lg border border-border-light bg-surface-secondary shadow-lg sm:max-w-full lg:max-h-[52vh]',
hasSearchRender && 'relative',
)}
>

2
client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
View file

@ -373,7 +373,7 @@ const SetKeyDialog = ({
</OGDialogTitle>
</OGDialogHeader>
<div className="grid w-full items-center gap-2 py-4">
<small className="text-red-600">
<small className="text-text-destructive">
{expiryTime === 'never'
? localize('com_endpoint_config_key_never_expires')
: `${localize('com_endpoint_config_key_encryption')} ${new Date(

2
client/src/components/Nav/Bookmarks/BookmarkNav.tsx
View file

@ -110,7 +110,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
'flex items-center justify-center',
'size-9 border-none text-text-primary hover:bg-accent hover:text-accent-foreground',
'rounded-lg border-none p-2 hover:bg-surface-active-alt',
'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white',
'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary',
isMenuOpen ? 'bg-surface-hover' : '',
)}
data-testid="bookmark-menu"

6
client/src/components/Nav/ExportConversation/ExportModal.tsx
View file

@ -129,7 +129,7 @@ export default function ExportModal({
<label
id="includeOptions-label"
htmlFor="includeOptions"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{exportOptionsSupport
? localize('com_nav_export_include_endpoint_options')
@ -153,7 +153,7 @@ export default function ExportModal({
<label
id="exportBranches-label"
htmlFor="exportBranches"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{exportBranchesSupport
? localize('com_nav_export_all_message_branches')
@ -176,7 +176,7 @@ export default function ExportModal({
<label
id="recursive-label"
htmlFor="recursive"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{localize('com_nav_export_recursive')}
</label>

2
client/src/components/Nav/Favorites/FavoriteItem.tsx
View file

@ -135,7 +135,7 @@ export default function FavoriteItem(props: FavoriteItemProps) {
tabIndex={0}
aria-label={ariaLabel}
className={cn(
'group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white',
'group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary',
isPopoverActive ? 'bg-surface-active-alt' : '',
)}
onClick={handleClick}

2
client/src/components/Nav/Favorites/FavoritesList.tsx
View file

@ -378,7 +378,7 @@ export default function FavoritesList({
role="button"
tabIndex={0}
aria-label={localize('com_agents_marketplace')}
className="group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white"
className="group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary"
onClick={handleAgentMarketplace}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {

4
client/src/components/Nav/Settings/BillingControls.tsx
View file

@ -46,7 +46,9 @@ export function AutoRefill() {
if (!hasValidRefillSettings) {
return (
<div className="text-sm text-red-500">{localize('com_nav_balance_auto_refill_error')}</div>
<div className="text-sm text-text-destructive">
{localize('com_nav_balance_auto_refill_error')}
</div>
);
}

2
client/src/components/Nav/Settings/Section.tsx
View file

@ -13,7 +13,7 @@ export default function Section({ heading, danger, children }: SectionProps) {
<h3
className={cn(
'mb-2 px-1 text-xs font-semibold uppercase tracking-wide',
danger ? 'text-red-500' : 'text-text-secondary',
danger ? 'text-text-destructive' : 'text-text-secondary',
)}
>
{heading}

10
client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
View file

@ -187,8 +187,8 @@ function Avatar() {
<>
<div
className={cn(
'relative overflow-hidden rounded-full ring-4 ring-gray-200 transition-all dark:ring-gray-700',
isDragging && 'cursor-move ring-blue-500 dark:ring-blue-400',
'relative overflow-hidden rounded-full ring-4 ring-border-light transition-all',
isDragging && 'cursor-move ring-ring-primary',
)}
onMouseDown={() => setIsDragging(true)}
onMouseUp={() => setIsDragging(false)}
@ -286,7 +286,7 @@ function Avatar() {
</div>
{/* Helper Text */}
<p className="text-center text-xs text-gray-500 dark:text-gray-400">
<p className="text-center text-xs text-text-tertiary">
{localize('com_ui_editor_instructions')}
</p>
</div>
@ -320,7 +320,7 @@ function Avatar() {
</>
) : (
<div
className="flex h-72 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-transparent transition-colors hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
className="flex h-72 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border-medium bg-transparent transition-colors hover:border-border-heavy"
onDrop={handleDrop}
onDragOver={handleDragOver}
role="button"
@ -334,7 +334,7 @@ function Avatar() {
}}
aria-label={localize('com_ui_upload_avatar_label')}
>
<FileImage className="mb-4 size-16 text-gray-400" />
<FileImage className="mb-4 size-16 text-text-tertiary" />
<p className="mb-2 text-center text-sm font-medium text-text-primary">
{localize('com_ui_drag_drop')}
</p>

4
client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx
View file

@ -165,8 +165,8 @@ const BackupCodesItem: React.FC = () => {
<span
className={`rounded-full px-3 py-1 text-sm font-medium ${
isUsed
? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
? 'bg-status-error-subtle text-status-error'
: 'bg-status-success-subtle text-status-success'
}`}
>
{isUsed ? localize('com_ui_used') : localize('com_ui_not_used')}

6
client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
View file

@ -83,8 +83,8 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
{localize('com_nav_delete_account_confirm')}
</OGDialogTitle>
</OGDialogHeader>
<div className="mb-8 text-sm text-black dark:text-white">
<ul className="font-semibold text-amber-600">
<div className="mb-8 text-sm text-text-primary">
<ul className="font-semibold text-text-warning">
<li>{localize('com_nav_delete_warning')}</li>
<li>{localize('com_nav_delete_data_info')}</li>
</ul>
@ -166,7 +166,7 @@ const renderInput = (
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
) => (
<div className="mb-4">
<label className="mb-1 block text-sm font-medium text-black dark:text-white" htmlFor={id}>
<label className="mb-1 block text-sm font-medium text-text-primary" htmlFor={id}>
{label}
</label>
<Input id={id} onChange={onChange} placeholder={value} />

2
client/src/components/Nav/SettingsTabs/ApiKeys/Create.tsx
View file

@ -66,7 +66,7 @@ export default function Create({ onCreated, onCancel }: CreateProps) {
<p
id="api-key-name-error"
role="alert"
className="text-xs text-red-500 dark:text-red-400"
className="text-xs text-text-destructive"
>
{localize('com_ui_api_key_name_required')}
</p>

4
client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx
View file

@ -19,10 +19,10 @@ export default function Reveal({ createdKey, onDone }: RevealProps) {
<div className="min-w-0 space-y-4">
<div className="flex gap-2.5 rounded-lg border border-amber-500/20 bg-amber-500/10 p-3">
<TriangleAlert
className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-500"
className="mt-0.5 h-4 w-4 shrink-0 text-text-warning"
aria-hidden="true"
/>
<p className="text-sm text-amber-700 dark:text-amber-300">
<p className="text-sm text-text-warning">
{localize('com_ui_api_key_warning')}
</p>
</div>

2
client/src/components/Nav/SettingsTabs/Balance/AutoRefillSettings.tsx
View file

@ -84,7 +84,7 @@ const AutoRefillSettings: React.FC<AutoRefillSettingsProps> = ({
<InfoHoverCard side={ESide.Bottom} text={localize('com_nav_balance_next_refill_info')} />
</div>
<span className="text-sm font-medium text-gray-800 dark:text-gray-200" role="note">
<span className="text-sm font-medium text-text-primary" role="note">
{refillEligibilityDate ? refillEligibilityDate.toLocaleString() : '-'}
</span>
</div>

2
client/src/components/Nav/SettingsTabs/Balance/TokenCreditsItem.tsx
View file

@ -18,7 +18,7 @@ const TokenCreditsItem: React.FC<TokenCreditsItemProps> = ({ tokenCredits }) =>
</div>
{/* Right Section: tokenCredits Value */}
<span className="text-sm font-medium text-gray-800 dark:text-gray-200" role="note">
<span className="text-sm font-medium text-text-primary" role="note">
{tokenCredits !== undefined ? tokenCredits.toFixed(2) : '0.00'}
</span>
</div>

2
client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
View file

@ -371,7 +371,7 @@ export default function SharedLinks() {
}
selection={{
selectHandler: confirmDelete,
selectClasses: `bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white ${
selectClasses: `bg-surface-destructive hover:bg-surface-destructive-hover text-white ${
deleteMutation.isLoading ? 'cursor-not-allowed opacity-80' : ''
}`,
selectText: deleteMutation.isLoading ? <Spinner /> : localize('com_ui_delete'),

2
client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx
View file

@ -103,7 +103,7 @@ export default function AutoSendTextSelector() {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>

2
client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx
View file

@ -43,7 +43,7 @@ export default function DecibelSelector() {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>

2
client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx
View file

@ -43,7 +43,7 @@ export default function DecibelSelector() {
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
),
)}
/>

2
client/src/components/Prompts/display/PromptDetailHeader.tsx
View file

@ -36,7 +36,7 @@ const PromptDetailHeader = ({ group }: PromptDetailHeaderProps) => {
side="top"
render={
<EarthIcon
className="h-5 w-5 shrink-0 text-green-400"
className="h-5 w-5 shrink-0 text-accent-primary"
aria-label={localize('com_ui_sr_global_prompt')}
/>
}

4
client/src/components/Prompts/fields/PromptName.tsx
View file

@ -135,13 +135,13 @@ const PromptName: React.FC<Props> = ({ name, isLoading = false, isError = false,
)}
{saveStatus === 'saved' && (
<Check
className="size-4 text-green-500 transition-opacity duration-300"
className="size-4 text-status-success transition-opacity duration-300"
aria-label={localize('com_ui_saved')}
/>
)}
{saveStatus === 'error' && (
<X
className="size-4 text-red-500 transition-opacity duration-300"
className="size-4 text-text-destructive transition-opacity duration-300"
aria-label={localize('com_ui_error')}
/>
)}

4
client/src/components/Prompts/forms/CreatePromptForm.tsx
View file

@ -147,7 +147,7 @@ const CreatePromptForm = ({
</label>
<div
className={cn(
'mt-1 w-56 text-sm text-red-500',
'mt-1 w-56 text-sm text-text-destructive',
errors.name ? 'visible h-auto' : 'invisible h-0',
)}
>
@ -195,7 +195,7 @@ const CreatePromptForm = ({
/>
<div
className={cn(
'mt-1 text-sm text-red-500',
'mt-1 text-sm text-text-destructive',
errors.prompt ? 'visible h-auto' : 'invisible h-0',
)}
>

2
client/src/components/Prompts/lists/ChatGroupItem.tsx
View file

@ -187,7 +187,7 @@ function ChatGroupItem({
aria-label={localize('com_ui_sr_global_prompt')}
className="flex shrink-0 items-center"
>
<EarthIcon className="size-3.5 text-green-400" aria-hidden="true" />
<EarthIcon className="size-3.5 text-accent-primary" aria-hidden="true" />
</span>
}
/>

4
client/src/style.css
View file

@ -89,6 +89,8 @@ html {
--link: var(--blue-600);
--link-hover: var(--blue-700);
--link-visited: #9333ea;
--accent-primary: #126e6b;
--accent-primary-hover: #0a4f53;
--ring-primary: var(--gray-500);
--header-primary: var(--white);
--header-hover: var(--gray-50);
@ -170,6 +172,8 @@ html {
--link: var(--blue-400);
--link-hover: var(--blue-300);
--link-visited: #c084fc;
--accent-primary: #41a79d;
--accent-primary-hover: #6dc8b9;
--header-primary: var(--gray-700);
--header-hover: var(--gray-600);
--header-button-hover: var(--gray-700);

3
packages/client/src/theme/utils/createTailwindColors.js
View file

@ -73,6 +73,9 @@ function createTailwindColors() {
'link-hover': cssVar('--link-hover'),
'link-visited': cssVar('--link-visited'),
'accent-primary': cssVar('--accent-primary'),
'accent-primary-hover': cssVar('--accent-primary-hover'),
'ring-primary': cssVar('--ring-primary'),
'header-primary': cssVar('--header-primary'),