From 35a83fd7e7ce80e83eb6f5bf6bfe5b26cfa1e89e Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sun, 21 Jun 2026 03:58:44 +0200 Subject: [PATCH] refactor: tokenize remaining status, neutral and message-text colors 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. --- .../src/components/Chat/Messages/Content/MessageContent.tsx | 2 +- client/src/components/Chat/Messages/Content/Parts/Text.tsx | 2 +- .../src/components/Chat/Messages/Content/SearchContent.tsx | 2 +- client/src/components/Prompts/display/PromptVersions.tsx | 6 +++--- .../src/components/SidePanel/Parameters/DynamicCheckbox.tsx | 4 ++-- client/src/components/Skills/dialogs/SkillSelectDialog.tsx | 6 +++--- client/src/components/Skills/display/SkillState.tsx | 6 +++--- client/src/components/Skills/tree/SkillFileEditor.tsx | 4 ++-- client/src/utils/forms.tsx | 2 +- 9 files changed, 17 insertions(+), 17 deletions(-) diff --git a/client/src/components/Chat/Messages/Content/MessageContent.tsx b/client/src/components/Chat/Messages/Content/MessageContent.tsx index e57b79a383..b4c09f1ab3 100644 --- a/client/src/components/Chat/Messages/Content/MessageContent.tsx +++ b/client/src/components/Chat/Messages/Content/MessageContent.tsx @@ -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} diff --git a/client/src/components/Chat/Messages/Content/Parts/Text.tsx b/client/src/components/Chat/Messages/Content/Parts/Text.tsx index aec8d949e0..23a54083c0 100644 --- a/client/src/components/Chat/Messages/Content/Parts/Text.tsx +++ b/client/src/components/Chat/Messages/Content/Parts/Text.tsx @@ -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} diff --git a/client/src/components/Chat/Messages/Content/SearchContent.tsx b/client/src/components/Chat/Messages/Content/SearchContent.tsx index 3d18524d18..a738996a01 100644 --- a/client/src/components/Chat/Messages/Content/SearchContent.tsx +++ b/client/src/components/Chat/Messages/Content/SearchContent.tsx @@ -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" > diff --git a/client/src/components/Prompts/display/PromptVersions.tsx b/client/src/components/Prompts/display/PromptVersions.tsx index dff7e4a54e..01513d629a 100644 --- a/client/src/components/Prompts/display/PromptVersions.tsx +++ b/client/src/components/Prompts/display/PromptVersions.tsx @@ -32,7 +32,7 @@ const VersionBadge = ({ > {isProduction ? ( <> - + {label} ) : ( @@ -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'; }; diff --git a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx index 82305f7ee9..61ccd0e0d7 100644 --- a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx +++ b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx @@ -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)} /> diff --git a/client/src/components/Skills/dialogs/SkillSelectDialog.tsx b/client/src/components/Skills/dialogs/SkillSelectDialog.tsx index 75d72c8a5a..7685c9d7b1 100644 --- a/client/src/components/Skills/dialogs/SkillSelectDialog.tsx +++ b/client/src/components/Skills/dialogs/SkillSelectDialog.tsx @@ -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', )} > diff --git a/client/src/components/Skills/display/SkillState.tsx b/client/src/components/Skills/display/SkillState.tsx index b1408ee080..caa2b5cbb3 100644 --- a/client/src/components/Skills/display/SkillState.tsx +++ b/client/src/components/Skills/display/SkillState.tsx @@ -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 = { wrap: 'bg-surface-tertiary', }, error: { - icon: 'text-amber-500', - wrap: 'bg-amber-500/10', + icon: 'text-status-warning', + wrap: 'bg-status-warning-subtle', }, }; diff --git a/client/src/components/Skills/tree/SkillFileEditor.tsx b/client/src/components/Skills/tree/SkillFileEditor.tsx index 8691748c1c..31f53b6469 100644 --- a/client/src/components/Skills/tree/SkillFileEditor.tsx +++ b/client/src/components/Skills/tree/SkillFileEditor.tsx @@ -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