🎨 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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user