feat(theme): new utilities based on system tokens - #2608
Draft
spike-rabbit wants to merge 2 commits into
Draft
Conversation
dr-itz
reviewed
Aug 24, 2026
Comment on lines
+40
to
+42
| <si-icon class="icon text-danger" [icon]="icons.elementCancelFilled" /> | ||
| <si-icon class="icon text-warning" [icon]="icons.elementManualFilled" /> | ||
| <si-icon class="icon text-danger" [icon]="icons.elementAlarmFilled" /> |
Member
There was a problem hiding this comment.
are you sure about that?
Currently status-* colors are not text colors. e.g. the current status-information color matches --si-sys-border-information. And it should! E.g. in inline-notification the icons and the bar on the left currently have the same color.
Member
Author
There was a problem hiding this comment.
no, I am not sure. I figured I first one to update the existing utilities to the system tokens in another PR before proceeding here. I have no idea yet, what the AI did content wise in this PR beside the main change.
spike-rabbit
force-pushed
the
feat/theme-system-utilities-deprecation
branch
3 times, most recently
from
August 26, 2026 08:00
4bdaa74 to
2b6ddc6
Compare
spike-rabbit
force-pushed
the
feat/theme-system-utilities-deprecation
branch
4 times, most recently
from
August 27, 2026 03:50
65dfd48 to
cc1c4a8
Compare
spike-rabbit
changed the base branch from
main
to
fix/datepicker-tertiary-header-buttons
August 27, 2026 05:03
spike-rabbit
force-pushed
the
feat/theme-system-utilities-deprecation
branch
from
August 27, 2026 05:04
cc1c4a8 to
56706bb
Compare
Base automatically changed from
fix/datepicker-tertiary-header-buttons
to
main
August 27, 2026 05:17
chintankavathia
force-pushed
the
feat/theme-system-utilities-deprecation
branch
from
August 27, 2026 05:17
56706bb to
4a934a2
Compare
spike-rabbit
changed the base branch from
main
to
refactor/search-bar-extract-theme-styling
August 27, 2026 12:44
spike-rabbit
force-pushed
the
feat/theme-system-utilities-deprecation
branch
from
August 27, 2026 12:46
4a934a2 to
a31c18f
Compare
The search-bar component is unusable when access to the native input is needed, for instance in the si-select. Extracting the styling into the theme makes it reusable. The pointer-events: none on the icon removes the need for extra hover/click forwarding.
spike-rabbit
force-pushed
the
feat/theme-system-utilities-deprecation
branch
from
August 27, 2026 14:34
a31c18f to
b0edefa
Compare
Generate background, text, and border utilities from Element system tokens and migrate Element usage to the new classes. BREAKING CHANGE: Replace the CSS class `text-primary` with `text-accent` to preserve the previous color. The legacy `text-primary` selector conflicts with the new system-token `text-primary` utility and cannot be retained. Applications using `text-primary` must update templates or styles before upgrading. DEPRECATED: Legacy color utilities are deprecated in favor of system-token utility classes. The following legacy utilities remain available during the deprecation period. Replace them with system-token utility classes. Run the Element update schematic to migrate supported classes in Angular templates. | Deprecated utility | Replacement | | --- | --- | | bg-primary | background-accent | | bg-secondary | background-neutral | | bg-tertiary | background-4 | | bg-success | background-success | | bg-info | background-information | | bg-warning | background-warning | | bg-danger | background-danger | | bg-base-0 | background-0 | | bg-base-1 | background-1 | | bg-base-2 | background-2 | | bg-base-3 | background-3 | | bg-base-4 | background-4 | | bg-base-info | background-information-subtle | | bg-base-success | background-success-subtle | | bg-base-caution | background-caution-subtle | | bg-base-warning | background-warning-subtle | | bg-base-danger | background-danger-subtle | | bg-base-critical | background-critical-subtle | | text-body | text-primary | | text-tertiary | text-disabled | | text-muted | text-disabled | | text-info | text-information |
spike-rabbit
force-pushed
the
feat/theme-system-utilities-deprecation
branch
from
August 27, 2026 15:45
b0edefa to
55bb7f4
Compare
Member
Author
|
@dr-itz can you please have a look again here. I dropped the whole status related changes. |
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.
Generate background, text, and border utilities from Element system tokens and migrate Element usage to the new classes.
BREAKING CHANGE: Replace the CSS class
text-primarywithtext-accentto preserve the previous color.The legacy
text-primaryselector conflicts with the new system-tokentext-primaryutility and cannot be retained. Applications usingtext-primarymust update templates or styles before upgrading.DEPRECATED: Legacy color utilities are deprecated in favor of system-token utility classes.
The following legacy utilities remain available during the deprecation period. Replace them with system-token utility classes.
Run the Element update schematic to migrate supported classes in Angular templates.
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: