CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-07-03 04:42:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

refactor: tokenize remaining status, neutral and message-text colors

Browse source 
Map the leftover semantic colors to tokens: skill error/dirty states and the
selected-version/selected-skill highlights move to status-warning/status-success,
the global indicator to status-success, and the markdown message text to
text-text-primary. Drop the redundant dark: overrides on the dynamic checkbox,
which the Checkbox primitive already handles.

What remains is intentional and stays raw: categorical color sets (category
icons, principal avatars, per-tool toggle accents), brand marks, the
WCAG-tuned toast severities, code/diagram surfaces, scrims, and text-white on
submit/destructive action surfaces.
This commit is contained in:
Marco Beretta 2026-06-21 03:58:44 +02:00
parent fefaa45b70
commit 35a83fd7e7
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
9 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Chat/Messages/Content/MessageContent.tsx
View file

@ -118,7 +118,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
isSubmitting && 'submitting',
showCursorState && text.length > 0 && 'result-streaming',
isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-100',
'text-text-primary',
)}
>
{content}

2
client/src/components/Chat/Messages/Content/Parts/Text.tsx
View file

@ -39,7 +39,7 @@ const TextPart = memo(function TextPart({ text, isCreatedByUser, showCursor }: T
showCursorState && !!text.length ? 'result-streaming' : '',
'markdown prose message-content dark:prose-invert light w-full break-words',
isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-100',
'text-text-primary',
)}
>
{content}

2
client/src/components/Chat/Messages/Content/SearchContent.tsx
View file

@ -70,7 +70,7 @@ const SearchContent = ({
className={cn(
'markdown prose dark:prose-invert light w-full break-words',
message.isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
message.isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-100',
'text-text-primary',
)}
dir="auto"
>

6
client/src/components/Prompts/display/PromptVersions.tsx
View file

@ -32,7 +32,7 @@ const VersionBadge = ({
>
{isProduction ? (
<>
<span className="slow-pulse size-1.5 rounded-full bg-green-500" />
<span className="slow-pulse size-1.5 rounded-full bg-status-success" />
<span>{label}</span>
</>
) : (
@ -49,10 +49,10 @@ const VersionBadge = ({
const getTimelineConnectorClasses = (isSelected: boolean, isProduction: boolean) => {
if (isSelected) {
return 'border-green-500 bg-green-500 text-white';
return 'border-status-success bg-status-success text-text-inverted';
}
if (isProduction) {
return 'border-green-400 bg-transparent text-green-500';
return 'border-status-success-border bg-transparent text-status-success';
}
return 'border-border-medium bg-transparent text-text-secondary';
};

4
client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
View file

@ -1,7 +1,7 @@
import { useMemo } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Checkbox, HoverCard, HoverCardTrigger } from '@librechat/client';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { TranslationKeys, useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
@ -75,7 +75,7 @@ function DynamicCheckbox({
disabled={readonly}
checked={selectedValue}
onCheckedChange={handleCheckedChange}
className="mt-[2px] focus:ring-opacity-20 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:focus:ring-gray-600 dark:focus:ring-opacity-50 dark:focus:ring-offset-0"
className="mt-[2px]"
aria-label={localize(label as TranslationKeys)}
/>
</div>

6
client/src/components/Skills/dialogs/SkillSelectDialog.tsx
View file

@ -1,8 +1,8 @@
import { useState, useMemo, useCallback } from 'react';
import { Search, Check, EarthIcon, User, Plus, Star, ListFilter, X } from 'lucide-react';
import { useFormContext, useWatch } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { useFormContext, useWatch } from 'react-hook-form';
import { OGDialog, OGDialogContent } from '@librechat/client';
import { Search, Check, EarthIcon, User, Plus, Star, ListFilter, X } from 'lucide-react';
import { PermissionTypes, Permissions, SystemCategories } from 'librechat-data-provider';
import type { TSkillSummary } from 'librechat-data-provider';
import type { AgentForm } from '~/common';
@ -90,7 +90,7 @@ function SkillCard({
'group relative flex h-32 cursor-pointer flex-col rounded-xl border p-3.5 text-left transition-all duration-200',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
selected
? 'border-green-500/70 bg-green-500/[0.06]'
? 'border-status-success-border bg-status-success-subtle'
: 'border-border-light hover:border-border-medium hover:bg-surface-tertiary',
)}
>

6
client/src/components/Skills/display/SkillState.tsx
View file

@ -1,6 +1,6 @@
import { Button } from '@librechat/client';
import { TriangleAlert, MousePointerClick } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { Button } from '@librechat/client';
import { cn } from '~/utils';
type SkillStateVariant = 'empty' | 'error';
@ -25,8 +25,8 @@ const styles: Record<SkillStateVariant, { icon: string; wrap: string }> = {
wrap: 'bg-surface-tertiary',
},
error: {
icon: 'text-amber-500',
wrap: 'bg-amber-500/10',
icon: 'text-status-warning',
wrap: 'bg-status-warning-subtle',
},
};

4
client/src/components/Skills/tree/SkillFileEditor.tsx
View file

@ -1,6 +1,6 @@
import { useState, useCallback, useRef } from 'react';
import { Save, FileText, Circle } from 'lucide-react';
import { Button, Spinner } from '@librechat/client';
import { Save, FileText, Circle } from 'lucide-react';
import { useGetSkillNodeContentQuery, useUpdateSkillNodeContentMutation } from '~/data-provider';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
@ -82,7 +82,7 @@ export default function SkillFileEditor({ skillId, nodeId, fileName }: SkillFile
<Circle
className={cn(
'size-2 shrink-0 transition-[opacity,color] duration-200',
isDirty ? 'fill-current text-yellow-500 opacity-100' : 'opacity-0',
isDirty ? 'fill-current text-status-warning opacity-100' : 'opacity-0',
)}
aria-hidden="true"
/>

2
client/src/utils/forms.tsx
View file

@ -76,7 +76,7 @@ export const processAgentOption = ({
...(_agent ?? ({} as Agent)),
label: _agent?.name ?? '',
value: _agent?.id ?? '',
icon: isGlobal ? <EarthIcon className="icon-md text-green-400" /> : null,
icon: isGlobal ? <EarthIcon className="icon-md text-status-success" /> : null,
context_files: context_files.length > 0 ? ([] as Array<[string, ExtendedFile]>) : undefined,
knowledge_files: _agent?.tool_resources?.file_search?.file_ids
? ([] as Array<[string, ExtendedFile]>)