Skip to content

Commit 18e11bf

Browse files
committed
fix: add explicit border-border to border-width-only utilities
Components using directional border-width utilities (border-b, border-t, border-l, border-r) relied on the global `* { border-color: var(--border) }` rule in `@layer base`. When consumers import Tailwind CSS after app-shell styles, Tailwind's preflight resets border-color via shorthand, causing thick dark borders (currentColor). Adding explicit `astw:border-border` at the utility layer ensures the correct color regardless of CSS import order. Affected components: Sheet, Table, CsvImporter, CommandPalette, DataTable, DataTable.Toolbar.
1 parent 5d7d7d3 commit 18e11bf

8 files changed

Lines changed: 39 additions & 26 deletions

File tree

packages/core/__snapshots__/src__components__sheet.test.tsx.snap

Lines changed: 3 additions & 3 deletions
Large diffs are not rendered by default.
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`Table > snapshots > basic table with header and body 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item 1</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Active</td></tr></tbody></table></div>"`;
3+
exports[`Table > snapshots > basic table with header and body 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item 1</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Active</td></tr></tbody></table></div>"`;
44

5-
exports[`Table > snapshots > empty table 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"></tbody></table></div>"`;
5+
exports[`Table > snapshots > empty table 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"></tbody></table></div>"`;
66

7-
exports[`Table > snapshots > table with caption 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><caption data-slot="table-caption" class="astw:text-muted-foreground astw:mt-4 astw:text-sm">A list of items</caption><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;
7+
exports[`Table > snapshots > table with caption 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><caption data-slot="table-caption" class="astw:text-muted-foreground astw:mt-4 astw:text-sm">A list of items</caption><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;
88

9-
exports[`Table > snapshots > table with containerClassName 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto custom-container"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;
9+
exports[`Table > snapshots > table with containerClassName 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto custom-container"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;
1010

11-
exports[`Table > snapshots > table with footer 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Product</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Price</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Widget</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tbody><tfoot data-slot="table-footer" class="astw:border-t astw:font-medium astw:[&amp;>tr]:last:border-b-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Total</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tfoot></table></div>"`;
11+
exports[`Table > snapshots > table with footer 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b astw:[&amp;_tr]:border-border"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Product</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Price</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Widget</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tbody><tfoot data-slot="table-footer" class="astw:border-t astw:border-border astw:font-medium astw:[&amp;>tr]:last:border-b-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:border-border astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Total</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tfoot></table></div>"`;

packages/core/src/components/command-palette.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,7 @@ export function CommandPaletteContent({ navItems }: CommandPaletteContentProps)
509509
aria-describedby={undefined}
510510
>
511511
<Dialog.Title className="astw:sr-only">{t("commandPaletteSearch")}</Dialog.Title>
512-
<div className="astw:flex astw:items-center astw:border-b astw:px-3 astw:py-1">
512+
<div className="astw:flex astw:items-center astw:border-b astw:border-border astw:px-3 astw:py-1">
513513
<SearchIcon className="astw:mr-2 astw:h-4 astw:w-4 astw:shrink-0 astw:opacity-50" />
514514
{activeSearchSource && (
515515
<span className="astw:inline-flex astw:items-center astw:shrink-0 astw:rounded astw:bg-muted astw:px-1.5 astw:py-0.5 astw:mr-1.5 astw:text-xs astw:font-medium astw:text-muted-foreground">

packages/core/src/components/csv-importer/CsvImporter.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ function MappingStep({
209209
<div className="astw:overflow-y-auto astw:rounded-md astw:border astw:border-border">
210210
<table className="astw:w-full astw:text-sm">
211211
<thead>
212-
<tr className="astw:border-b astw:bg-muted/50">
212+
<tr className="astw:border-b astw:border-border astw:bg-muted/50">
213213
<th className="astw:w-10 astw:px-3 astw:py-2" />
214214
<th className="astw:px-3 astw:py-2 astw:text-left astw:font-medium astw:text-muted-foreground">
215215
{t("mappingExpectedField")}
@@ -233,7 +233,7 @@ function MappingStep({
233233
<tr
234234
key={col.key}
235235
className={cn(
236-
"astw:border-b last:astw:border-b-0 astw:transition-colors",
236+
"astw:border-b astw:border-border last:astw:border-b-0 astw:transition-colors",
237237
!isMapped && col.required && "astw:bg-destructive/5",
238238
)}
239239
>
@@ -401,7 +401,7 @@ function ReviewStep({
401401
</thead>
402402
<tbody>
403403
{rawRows.map((row, rowIdx) => (
404-
<tr key={rowIdx} className="astw:border-t">
404+
<tr key={rowIdx} className="astw:border-t astw:border-border">
405405
<td className="astw:px-3 astw:py-1 astw:text-muted-foreground">{rowIdx + 1}</td>
406406
{activeMappings.map((m) => {
407407
const colIdx = headerIndexMap.get(m.csvHeader);
@@ -718,12 +718,12 @@ export function CsvImporter<T extends CsvSchema>({
718718
<Drawer.Popup
719719
ref={drawerPopupRef}
720720
data-slot="csv-importer"
721-
className="astw:bg-background astw:flex astw:flex-col astw:w-full astw:h-[70vh] astw:rounded-t-lg astw:border-t astw:shadow-lg astw:transition-transform astw:ease-[cubic-bezier(0.32,0.72,0,1)] astw:duration-[450ms] astw:[transform:translateY(var(--drawer-swipe-movement-y))] astw:data-ending-style:[transform:translateY(100%)] astw:data-starting-style:[transform:translateY(100%)]"
721+
className="astw:bg-background astw:flex astw:flex-col astw:w-full astw:h-[70vh] astw:rounded-t-lg astw:border-t astw:border-border astw:shadow-lg astw:transition-transform astw:ease-[cubic-bezier(0.32,0.72,0,1)] astw:duration-[450ms] astw:[transform:translateY(var(--drawer-swipe-movement-y))] astw:data-ending-style:[transform:translateY(100%)] astw:data-starting-style:[transform:translateY(100%)]"
722722
>
723723
<PortalContainerContext.Provider value={drawerPopupRef}>
724724
<Drawer.Content data-slot="csv-importer-inner" className="astw:contents">
725725
{/* Header: step indicators + title + close */}
726-
<div className="astw:flex astw:items-center astw:justify-between astw:border-b astw:px-6 astw:py-4">
726+
<div className="astw:flex astw:items-center astw:justify-between astw:border-b astw:border-border astw:px-6 astw:py-4">
727727
<div className="astw:flex astw:items-center astw:gap-4">
728728
<div className="astw:flex astw:items-center astw:gap-2">
729729
{(["upload", "mapping", "review", "complete"] as const).map((s, idx) => (
@@ -808,7 +808,7 @@ export function CsvImporter<T extends CsvSchema>({
808808
</div>
809809

810810
{/* Footer with navigation buttons */}
811-
<div className="astw:flex astw:justify-between astw:border-t astw:px-6 astw:py-4">
811+
<div className="astw:flex astw:justify-between astw:border-t astw:border-border astw:px-6 astw:py-4">
812812
<div>
813813
{step === "mapping" && (
814814
<button

0 commit comments

Comments
 (0)