feat: add CSS variables for status border and text #54492
Merged
Conversation
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
The variables like `--color-error` now are based on our secondary theming, thus they are less "aggressive" colors. But there are two usecases for primary based status colors: - borders - error text messages (e.g. validation errors in forms) To simplify app changes due to the secondary color theme change this introduces 3 new variables: - `--color-text-error` this shall be used if text should have error status theming and is displayed on normal background (while `--color-error-text` is only for text shown on `--color-error` similar as primary and secondary colors) - `--color-border-error` and `--color-border-success` those should be used for element borders if there is one of those statuses to be reported (we use this for validation errors as well as for indicating a value was saved) Signed-off-by: Ferdinand Thiessen <[email protected]>
susnux
added
enhancement
design
susnux
requested review from
Altahrim,
CarlSchwan,
artonge,
nfebe,
skjnldsv and
szaimen
and removed request for
a team and
nfebe
susnux
added
the
pending documentation
artonge
approved these changes
Aug 19, 2025
skjnldsv
approved these changes
Aug 19, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
The variables like
--color-errornow are based on our secondarytheming, thus they are less "aggressive" colors. But there are two
usecases for primary based status colors:
To simplify app changes due to the secondary color theme change this
introduces 3 new variables:
--color-text-errorthis shall be used if text should have errorstatus theming and is displayed on normal background (while
--color-error-textis only for text shown on--color-errorsimilaras primary and secondary colors)
--color-border-errorand--color-border-successthose should beused for element borders if there is one of those statuses to be
reported (we use this for validation errors as well as for indicating a
value was saved)
So basically this follows the previous naming schema:
--color-text-...for text on normal backgrounds--color-xyz-textfor text on--color-xyz--color-border-...for special bordersChecklist