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

refactor: add soft status-border token layer for Alert and lighten dark status foregrounds

Browse source
This commit is contained in:
Marco Beretta 2026-06-20 15:52:57 +02:00
parent e50485e9fe
commit 1d0fcef327
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
3 changed files with 31 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

26
client/src/style.css
View file

@ -56,9 +56,15 @@
--amber-900: #78350f;
--amber-950: #451a03;
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--blue-900: #1e3a8a;
--blue-950: #172554;
--brand-purple: #ab68ff;
--gizmo-gray-500: #999;
@ -109,14 +115,19 @@ html {
--border-destructive: var(--red-600);
--status-success: var(--green-600);
--status-success-subtle: var(--green-50);
--status-success-border: var(--green-300);
--status-info: var(--blue-600);
--status-info-subtle: var(--blue-50);
--status-info-border: var(--blue-300);
--status-warning: var(--amber-600);
--status-warning-subtle: var(--amber-50);
--status-warning-border: var(--amber-300);
--status-error: var(--red-600);
--status-error-subtle: var(--red-50);
--status-error-border: var(--red-300);
--status-neutral: var(--gray-600);
--status-neutral-subtle: var(--gray-100);
--status-neutral-border: var(--gray-300);
/* These are test styles */
--background: 0 0% 100%;
@ -179,16 +190,21 @@ html {
--border-heavy: var(--gray-500);
--border-xheavy: var(--gray-400);
--border-destructive: var(--red-500);
--status-success: var(--green-400);
--status-success: var(--green-300);
--status-success-subtle: var(--green-950);
--status-info: var(--blue-400);
--status-success-border: var(--green-800);
--status-info: var(--blue-300);
--status-info-subtle: var(--blue-950);
--status-warning: var(--amber-400);
--status-info-border: var(--blue-800);
--status-warning: var(--amber-300);
--status-warning-subtle: var(--amber-950);
--status-error: var(--red-400);
--status-warning-border: var(--amber-800);
--status-error: var(--red-300);
--status-error-subtle: var(--red-950);
--status-neutral: var(--gray-400);
--status-error-border: var(--red-800);
--status-neutral: var(--gray-300);
--status-neutral-subtle: var(--gray-800);
--status-neutral-border: var(--gray-700);
/* These are test styles */
--background: 0 0% 7%;

10
packages/client/src/components/Alert.tsx
View file

@ -13,11 +13,11 @@ const alertVariants: (
) => string = cva('relative flex gap-3 rounded-xl border px-4 py-3 text-sm', {
variants: {
variant: {
info: 'border-status-info bg-status-info-subtle text-status-info',
success: 'border-status-success bg-status-success-subtle text-status-success',
warning: 'border-status-warning bg-status-warning-subtle text-status-warning',
error: 'border-status-error bg-status-error-subtle text-status-error',
neutral: 'border-status-neutral bg-status-neutral-subtle text-status-neutral',
info: 'border-status-info-border bg-status-info-subtle text-status-info',
success: 'border-status-success-border bg-status-success-subtle text-status-success',
warning: 'border-status-warning-border bg-status-warning-subtle text-status-warning',
error: 'border-status-error-border bg-status-error-subtle text-status-error',
neutral: 'border-status-neutral-border bg-status-neutral-subtle text-status-neutral',
},
},
defaultVariants: {

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

@ -102,14 +102,19 @@ function createTailwindColors() {
'status-success': cssVar('--status-success'),
'status-success-subtle': cssVar('--status-success-subtle'),
'status-success-border': cssVar('--status-success-border'),
'status-info': cssVar('--status-info'),
'status-info-subtle': cssVar('--status-info-subtle'),
'status-info-border': cssVar('--status-info-border'),
'status-warning': cssVar('--status-warning'),
'status-warning-subtle': cssVar('--status-warning-subtle'),
'status-warning-border': cssVar('--status-warning-border'),
'status-error': cssVar('--status-error'),
'status-error-subtle': cssVar('--status-error-subtle'),
'status-error-border': cssVar('--status-error-border'),
'status-neutral': cssVar('--status-neutral'),
'status-neutral-subtle': cssVar('--status-neutral-subtle'),
'status-neutral-border': cssVar('--status-neutral-border'),
border: hslVar('--border'),
input: hslVar('--input'),