bytelyst/learning_ai_common_plat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): use tokenized status colors

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 11:15:29 -07:00
parent 23e140009f
commit 9d5a31d559
3 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/ui/src/components/Badge.tsx
View File

@ -8,20 +8,23 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
} }
const variantStyles: Record<string, string> = { const variantStyles: Record<string, string> = {
success: 'bg-green-500/10 text-green-400 border-green-500/20', success:
warning: 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20', 'bg-[var(--bl-success-muted,var(--bl-surface-muted))] text-[var(--bl-success)] border-[var(--bl-success-border,var(--bl-success))]',
error: 'bg-red-500/10 text-red-400 border-red-500/20', warning:
info: 'bg-blue-500/10 text-blue-400 border-blue-500/20', 'bg-[var(--bl-warning-muted,var(--bl-surface-muted))] text-[var(--bl-warning)] border-[var(--bl-warning-border,var(--bl-warning))]',
error:
'bg-[var(--bl-danger-muted,var(--bl-surface-muted))] text-[var(--bl-danger)] border-[var(--bl-danger-border,var(--bl-danger))]',
info: 'bg-[var(--bl-info-muted,var(--bl-surface-muted))] text-[var(--bl-info,var(--bl-accent))] border-[var(--bl-info-border,var(--bl-info,var(--bl-accent)))]',
neutral: neutral:
'bg-[var(--bl-surface-muted,#252540)] text-[var(--bl-text-secondary,#a0a0b0)] border-[var(--bl-border,#2a2a4a)]', 'bg-[var(--bl-surface-muted,#252540)] text-[var(--bl-text-secondary,#a0a0b0)] border-[var(--bl-border,#2a2a4a)]',
}; };
const dotColors: Record<string, string> = { const dotColors: Record<string, string> = {
success: 'bg-green-400', success: 'bg-[var(--bl-success)]',
error: 'bg-red-400', error: 'bg-[var(--bl-danger)]',
warning: 'bg-yellow-400', warning: 'bg-[var(--bl-warning)]',
info: 'bg-blue-400', info: 'bg-[var(--bl-info,var(--bl-accent))]',
neutral: 'bg-gray-400', neutral: 'bg-[var(--bl-text-tertiary,var(--bl-text-secondary))]',
}; };
export function Badge({ export function Badge({

4
packages/ui/src/components/ConfirmDialog.tsx
View File

@ -46,8 +46,8 @@ export function ConfirmDialog({
className={clsx( className={clsx(
'mt-0.5 rounded-full p-2', 'mt-0.5 rounded-full p-2',
variant === 'destructive' variant === 'destructive'
? 'bg-red-500/10 text-red-400' ? 'bg-[var(--bl-danger-muted,var(--bl-surface-muted))] text-[var(--bl-danger)]'
: 'bg-yellow-500/10 text-yellow-400' : 'bg-[var(--bl-warning-muted,var(--bl-surface-muted))] text-[var(--bl-warning)]'
)} )}
> >
<AlertTriangle className="h-5 w-5" /> <AlertTriangle className="h-5 w-5" />

8
packages/ui/src/components/Toast.tsx
View File

@ -37,10 +37,10 @@ export function useToast() {
} }
const icons: Record<string, React.ReactNode> = { const icons: Record<string, React.ReactNode> = {
success: <CheckCircle className="h-5 w-5 text-green-400" />, success: <CheckCircle className="h-5 w-5 text-[var(--bl-success)]" />,
error: <AlertCircle className="h-5 w-5 text-red-400" />, error: <AlertCircle className="h-5 w-5 text-[var(--bl-danger)]" />,
warning: <AlertTriangle className="h-5 w-5 text-yellow-400" />, warning: <AlertTriangle className="h-5 w-5 text-[var(--bl-warning)]" />,
info: <Info className="h-5 w-5 text-blue-400" />, info: <Info className="h-5 w-5 text-[var(--bl-info,var(--bl-accent))]" />,
}; };
export function Toast({ message, onDismiss }: { message: ToastMessage; onDismiss: () => void }) { export function Toast({ message, onDismiss }: { message: ToastMessage; onDismiss: () => void }) {