🎨 style(card-table): replace Tailwind border‐gray util with Semi UI border variable for consistent theming

Detailed changes
1. Removed `border-gray-200` Tailwind utility from two `<div>` elements in `web/src/components/common/ui/CardTable.js`.
2. Added inline style `borderColor: 'var(--semi-color-border)'` while keeping existing `border-b border-dashed` classes.
3. Ensures all borders use Semi UI’s design token, keeping visual consistency across light/dark themes and custom palettes.

Why
• Aligns component styling with Semi UI’s design system.
• Avoids hard-coded colors and prevents theme mismatch issues on future updates.

No breaking changes; visual update only.
This commit is contained in:
t0ng7u
2025-07-19 02:49:14 +08:00
parent 6a827fc7b9
commit 26644bfd1e

View File

@@ -73,7 +73,7 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
}
return (
<div key={idx} className="flex justify-between items-center py-1 border-b last:border-b-0 border-dashed border-gray-200">
<div key={idx} className="flex justify-between items-center py-1 border-b last:border-b-0 border-dashed" style={{ borderColor: 'var(--semi-color-border)' }}>
<Skeleton.Title active style={{ width: 80, height: 14 }} />
<Skeleton.Title active style={{ width: `${50 + (idx % 3) * 10}%`, maxWidth: 180, height: 14 }} />
</div>
@@ -142,7 +142,8 @@ const CardTable = ({ columns = [], dataSource = [], loading = false, rowKey = 'k
return (
<div
key={col.key || colIdx}
className="flex justify-between items-start py-1 border-b last:border-b-0 border-dashed border-gray-200"
className="flex justify-between items-start py-1 border-b last:border-b-0 border-dashed"
style={{ borderColor: 'var(--semi-color-border)' }}
>
<span className="font-medium text-gray-600 mr-2 whitespace-nowrap select-none">
{title}