fix: enforce semantic contrast across admin

This commit is contained in:
2026-07-12 15:14:15 +02:00
parent 45c8178cfa
commit f0b4bc1630
86 changed files with 438 additions and 338 deletions
@@ -943,7 +943,7 @@ export function CatalogItemsTable({
{/* Unsaved changes banner */}
{hasUnsavedChanges && (
<div className="flex items-center gap-2 rounded-md border border-yellow-300 bg-yellow-50 dark:border-yellow-700 dark:bg-yellow-950/30 px-3 py-2 text-sm text-yellow-800 dark:text-yellow-200">
<div className="flex items-center gap-2 rounded-md border border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)] px-3 py-2 text-sm text-[var(--color-warning-text-readable)]">
<span className="flex-1">
You have unsaved changes (
{modifiedItems.length > 0 ? `${modifiedItems.length} item(s) modified` : ''}
@@ -1051,7 +1051,7 @@ export function CatalogItemsTable({
<SortableRow
key={item.id}
id={item.id}
className={cn(modified && 'bg-yellow-50 dark:bg-yellow-950/20')}
className={cn(modified && 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]')}
>
{({ dragHandleProps }) => (
<>
@@ -1111,7 +1111,7 @@ export function CatalogItemsTable({
className="h-8 text-xs w-16"
title="Credits"
/>
<span className="text-xs text-yellow-600">c</span>
<span className="text-xs text-[var(--color-warning-text-readable)]">c</span>
<Input
type="number"
value={edit?.costPoints ?? item.costPoints}
@@ -1132,7 +1132,7 @@ export function CatalogItemsTable({
) : (
<div className="text-xs">
{item.costCredits > 0 && (
<span className="text-yellow-600">{item.costCredits}c </span>
<span className="text-[var(--color-warning-text-readable)]">{item.costCredits}c </span>
)}
{item.costPoints > 0 && (
<span className={pts.color}>
@@ -1191,7 +1191,7 @@ export function CatalogItemsTable({
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-green-600"
className="h-7 w-7 text-[var(--color-success-text-readable)]"
onClick={() => handleSaveOne(item)}
disabled={isSaving || isPending}
title="Save this item"
@@ -213,7 +213,7 @@ export function MovePageCombobox({
value === page.id ? 'opacity-100' : 'opacity-0',
)}
/>
<Star className="mr-1.5 h-3 w-3 text-amber-500" />
<Star className="mr-1.5 h-3 w-3 text-[var(--color-warning-text-readable)]" />
<span className="text-muted-foreground font-mono text-xs mr-1.5">
#{page.id}
</span>
@@ -55,12 +55,12 @@ export interface InlineEdit {
}
export const POINTS_TYPES: Record<number, { label: string; color: string }> = {
0: { label: 'Duckets', color: 'text-blue-500' },
0: { label: 'Duckets', color: 'text-[var(--color-info-text-readable)]' },
5: { label: 'Diamonds', color: 'text-purple-500' },
101: { label: 'Snowflakes', color: 'text-cyan-400' },
101: { label: 'Snowflakes', color: 'text-[var(--color-info-text-readable)]' },
103: { label: 'Hearts', color: 'text-pink-500' },
104: { label: 'Stars', color: 'text-amber-400' },
105: { label: 'Shells', color: 'text-orange-400' },
104: { label: 'Stars', color: 'text-[var(--color-warning-text-readable)]' },
105: { label: 'Shells', color: 'text-[var(--color-warning-text-readable)]' },
}
export const DEFAULT_NEW_ITEM = {
@@ -81,5 +81,5 @@ export const DEFAULT_NEW_ITEM = {
}
export function getPointsLabel(type: number) {
return POINTS_TYPES[type] || { label: `Type ${type}`, color: 'text-gray-500' }
return POINTS_TYPES[type] || { label: `Type ${type}`, color: 'theme-text-muted' }
}