feat(utilities): add border-*-ai utilities#1853
Draft
spike-rabbit wants to merge 1 commit intomainfrom
Draft
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces new AI gradient border utilities and an accompanying example component. The changes include a SCSS mixin for the gradient border effect, utility classes, and E2E tests with snapshots. Feedback focuses on ensuring cross-browser compatibility for CSS mask properties and adhering to UX writing guidelines regarding sentence case capitalization and the use of telegram style for UI text.
In order to highlight AI related content, we need a gradient border. Since CSS borders do not support gradients we need this workaround. This border is supposed to be only used on cards and badges, but with those utilities they could be used on every container.
spike-rabbit
force-pushed
the
feat/ai-border
branch
from
8164bd2 to
c9ab685
Compare
spliffone
reviewed
Apr 13, 2026
|
|
||
| ## AI gradient borders | ||
|
|
||
| Add a 1px gradient border to any element using the AI border utility classes. |
Member
There was a problem hiding this comment.
@spike-rabbit the termn AI is a bit confusing to me, can you provide more context e.g. when to use?
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.
In order to highlight AI related content, we need a gradient border. Since CSS borders do not support gradients we need this workaround.
This border is supposed to be only used on cards and badges, but with those utilities they could be used on every container.
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: