fix: add explicit border-border to prevent color leaking from consumer CSS#317
Merged
Conversation
…r 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.
…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()).
Contributor
Author
|
Changes in this PR does not have any user-facing impact, so no changeset needed. |
interacsean
approved these changes
Jun 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
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 resetsborder-colortovar(--color-gray-200), causing unintended thick gray borders on cards and other components.This happens when the consumer's CSS import order results in Tailwind's base layer overriding app-shell's base layer:
Solution
Add explicit
astw:border-borderat the utility layer to all components that previously relied on the global*selector for border-color. This ensures the correct color regardless of CSS import order.Affected Components
card.tsxactivity-card/ActivityCard.tsxcontent.tsxdialog.tsxbadge-list.tsxmenu.tsxselect.tsxcombobox.tsxautocomplete.tsxbutton.tsx(outline variant)data-table/data-table.tsxdata-table/toolbar.tsxcsv-importer/CsvImporter.tsxattachment/Attachment.tsxAdditional Cleanup
Removed the redundant
@themeand@layer baseblocks fromexamples/nextjs-app/src/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@themeblock was also broken (wrappingrgbavalues inhsl()).