fix: add explicit border-border to prevent color leaking from consumer CSS (#317)

* fix: add explicit border-border to prevent color leaking from consumer CSS

Components using `astw:border` (border-width only) 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 to `var(--color-gray-200)`, causing thick gray borders.

Adding explicit `astw:border-border` at the utility layer ensures the
correct color regardless of CSS import order.

* chore(examples): remove redundant @theme and @layer base from nextjs-app globals.css

The example app does not use custom Tailwind color utilities directly;
all theming is handled by app-shell's internal prefixed styles.
The @theme block was also broken (wrapping rgba values in hsl()).

Author: IzumiSy

examples/nextjs-app/src/app/globals.css

@@ -1,71 +1 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-
-  --color-border: var(--border);
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-
-  --color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
-
-  --color-sidebar: hsl(var(--sidebar-background));
-  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
-  --color-sidebar-primary: hsl(var(--sidebar-primary));
-  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
-  --color-sidebar-accent: hsl(var(--sidebar-accent));
-  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
-  --color-sidebar-border: hsl(var(--sidebar-border));
-  --color-sidebar-ring: hsl(var(--sidebar-ring));
-
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-}
-
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-border, currentcolor);
-  }
-}

examples/nextjs-app/src/modules/pages/data-table-demo.tsx

@@ -172,7 +172,7 @@ const DataTableDemoPage = () => {
     <Layout>
       <Layout.Header title="DataTable Demo" />
       <Layout.Column>
-        <p className="mb-4 text-muted-foreground">
+        <p className="mb-4 text-gray-500">
           DataTable demo with sortable columns, row actions, pagination, multi-select, and temporal
           filters for datetime, date, and time fields.
         </p>

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

@@ -4,4 +4,4 @@ exports[`Attachment > snapshots > disabled 1`] = `"<div data-slot="attachment" c
 
 exports[`Attachment > snapshots > empty default 1`] = `"<div data-slot="attachment" class="astw:@container astw:flex astw:w-full astw:min-w-0 astw:flex-col"><input multiple="" class="astw:hidden" data-testid="attachment-upload-input" type="file"><div data-slot="attachment-content" class="astw:min-w-0"><div class="astw:flex astw:flex-wrap astw:gap-4"><button type="button" aria-label="Click to upload" data-testid="attachment-upload-tile" class="astw:flex astw:h-30 astw:w-[200px] astw:shrink-0 astw:cursor-pointer astw:flex-col astw:justify-between astw:rounded-lg astw:border-2 astw:border-dashed astw:border-border astw:bg-muted/50 astw:p-3 astw:transition-colors astw:hover:bg-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-upload astw:size-5 astw:text-muted-foreground astw:opacity-60" aria-hidden="true"><path d="M12 13v8"></path><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="m8 17 4-4 4 4"></path></svg><div class="astw:min-w-0 astw:self-stretch astw:text-left"><p class="astw:text-sm astw:leading-normal astw:text-foreground">Click to upload</p></div></button></div></div></div>"`;
 
-exports[`Attachment > snapshots > populated mixed items 1`] = `"<div data-slot="attachment" class="astw:@container astw:flex astw:w-full astw:min-w-0 astw:flex-col"><input multiple="" class="astw:hidden" data-testid="attachment-upload-input" type="file"><div data-slot="attachment-content" class="astw:min-w-0"><div class="astw:flex astw:flex-wrap astw:gap-4"><div class="astw:group astw:relative"><div class="astw:relative astw:size-30 astw:shrink-0 astw:overflow-hidden astw:rounded-lg astw:bg-muted"><img alt="shoe-red.png" class="astw:size-full astw:object-cover" src="https://example.com/shoe-red.png"></div><div class="astw:absolute astw:top-2 astw:right-2 astw:opacity-0 astw:transition-opacity astw:group-hover:opacity-100 astw:group-focus-within:opacity-100"><button type="button" tabindex="0" aria-haspopup="menu" id="base-ui-_r_3_" data-slot="menu-trigger" aria-label="Attachment options for shoe-red.png" class="astw:inline-flex astw:size-7 astw:items-center astw:justify-center astw:rounded-md astw:border astw:bg-background/90 astw:text-foreground astw:shadow-xs astw:hover:bg-accent" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis astw:size-4" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button></div></div><div class="astw:group astw:relative"><div class="astw:relative astw:size-30 astw:shrink-0 astw:overflow-hidden astw:rounded-lg astw:border astw:border-border astw:flex astw:flex-col astw:justify-between astw:bg-card astw:p-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file astw:size-5 astw:text-muted-foreground astw:opacity-60" aria-hidden="true" data-testid="attachment-file-icon"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path></svg><p class="astw:flex astw:min-w-0 astw:items-end astw:gap-0.5 astw:text-xs astw:leading-normal astw:text-foreground"><span class="astw:min-w-0 astw:flex-1 astw:line-clamp-2 astw:break-all">Aug-Sep 2025_1234-12</span><span class="astw:shrink-0">.pdf</span></p></div><div class="astw:absolute astw:top-2 astw:right-2 astw:opacity-0 astw:transition-opacity astw:group-hover:opacity-100 astw:group-focus-within:opacity-100"><button type="button" tabindex="0" aria-haspopup="menu" id="base-ui-_r_8_" data-slot="menu-trigger" aria-label="Attachment options for Aug-Sep 2025_1234-12.pdf" class="astw:inline-flex astw:size-7 astw:items-center astw:justify-center astw:rounded-md astw:border astw:bg-background/90 astw:text-foreground astw:shadow-xs astw:hover:bg-accent" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis astw:size-4" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button></div></div><button type="button" aria-label="Click to upload" data-testid="attachment-upload-tile" class="astw:flex astw:h-30 astw:w-[200px] astw:shrink-0 astw:cursor-pointer astw:flex-col astw:justify-between astw:rounded-lg astw:border-2 astw:border-dashed astw:border-border astw:bg-muted/50 astw:p-3 astw:transition-colors astw:hover:bg-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-upload astw:size-5 astw:text-muted-foreground astw:opacity-60" aria-hidden="true"><path d="M12 13v8"></path><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="m8 17 4-4 4 4"></path></svg><div class="astw:min-w-0 astw:self-stretch astw:text-left"><p class="astw:text-sm astw:leading-normal astw:text-foreground">Click to upload</p></div></button></div></div></div>"`;
+exports[`Attachment > snapshots > populated mixed items 1`] = `"<div data-slot="attachment" class="astw:@container astw:flex astw:w-full astw:min-w-0 astw:flex-col"><input multiple="" class="astw:hidden" data-testid="attachment-upload-input" type="file"><div data-slot="attachment-content" class="astw:min-w-0"><div class="astw:flex astw:flex-wrap astw:gap-4"><div class="astw:group astw:relative"><div class="astw:relative astw:size-30 astw:shrink-0 astw:overflow-hidden astw:rounded-lg astw:bg-muted"><img alt="shoe-red.png" class="astw:size-full astw:object-cover" src="https://example.com/shoe-red.png"></div><div class="astw:absolute astw:top-2 astw:right-2 astw:opacity-0 astw:transition-opacity astw:group-hover:opacity-100 astw:group-focus-within:opacity-100"><button type="button" tabindex="0" aria-haspopup="menu" id="base-ui-_r_3_" data-slot="menu-trigger" aria-label="Attachment options for shoe-red.png" class="astw:inline-flex astw:size-7 astw:items-center astw:justify-center astw:rounded-md astw:border astw:border-border astw:bg-background/90 astw:text-foreground astw:shadow-xs astw:hover:bg-accent" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis astw:size-4" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button></div></div><div class="astw:group astw:relative"><div class="astw:relative astw:size-30 astw:shrink-0 astw:overflow-hidden astw:rounded-lg astw:border astw:border-border astw:flex astw:flex-col astw:justify-between astw:bg-card astw:p-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file astw:size-5 astw:text-muted-foreground astw:opacity-60" aria-hidden="true" data-testid="attachment-file-icon"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path></svg><p class="astw:flex astw:min-w-0 astw:items-end astw:gap-0.5 astw:text-xs astw:leading-normal astw:text-foreground"><span class="astw:min-w-0 astw:flex-1 astw:line-clamp-2 astw:break-all">Aug-Sep 2025_1234-12</span><span class="astw:shrink-0">.pdf</span></p></div><div class="astw:absolute astw:top-2 astw:right-2 astw:opacity-0 astw:transition-opacity astw:group-hover:opacity-100 astw:group-focus-within:opacity-100"><button type="button" tabindex="0" aria-haspopup="menu" id="base-ui-_r_8_" data-slot="menu-trigger" aria-label="Attachment options for Aug-Sep 2025_1234-12.pdf" class="astw:inline-flex astw:size-7 astw:items-center astw:justify-center astw:rounded-md astw:border astw:border-border astw:bg-background/90 astw:text-foreground astw:shadow-xs astw:hover:bg-accent" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis astw:size-4" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button></div></div><button type="button" aria-label="Click to upload" data-testid="attachment-upload-tile" class="astw:flex astw:h-30 astw:w-[200px] astw:shrink-0 astw:cursor-pointer astw:flex-col astw:justify-between astw:rounded-lg astw:border-2 astw:border-dashed astw:border-border astw:bg-muted/50 astw:p-3 astw:transition-colors astw:hover:bg-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-upload astw:size-5 astw:text-muted-foreground astw:opacity-60" aria-hidden="true"><path d="M12 13v8"></path><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="m8 17 4-4 4 4"></path></svg><div class="astw:min-w-0 astw:self-stretch astw:text-left"><p class="astw:text-sm astw:leading-normal astw:text-foreground">Click to upload</p></div></button></div></div></div>"`;