skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs-infra): readable contrast for DEV/EXP api badges in light mode

Browse Source 
The DEV (developer preview) and EXP (experimental) badges in the API reference list used `--page-background` for text, which is dark in dark mode (working as intended on the pale colored bg) but white in light mode, making the labels invisible against the near-white badge bg. Introduce an `--item-attr-text` CSS variable defaulting to `--page-background` and overridden to `--primary-contrast` in light mode, following the per-mode pattern the file already uses for `--item-attr-base-mix`.

(cherry picked from commit 0010ad5910)
This commit is contained in:
Kam
2026-05-28 20:11:07 +03:00
committed by Pawel Kozlowski
parent 9d8ea2cc9a
commit 1cd4f54aef
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/src/app/features/references/api-items-section/api-items-section.component.scss
+5 -2
View File
@@ -79,12 +79,15 @@
:host {
--item-attr-base-mix: 80%;
--item-attr-text: var(--page-background);
.docs-light-mode & {
--item-attr-base-mix: 20%;
--item-attr-text: var(--primary-contrast);
}
@media screen and (prefers-color-scheme: light) {
--item-attr-base-mix: 20%;
--item-attr-text: var(--primary-contrast);
}
}
@@ -110,7 +113,7 @@
var(--symbolic-yellow) var(--item-attr-base-mix),
var(--octonary-contrast)
);
color: var(--page-background);
color: var(--item-attr-text);
}
&.adev-experimental {
@@ -119,7 +122,7 @@
var(--symbolic-green) var(--item-attr-base-mix),
var(--octonary-contrast)
);
color: var(--page-background);
color: var(--item-attr-text);
}
&.adev-deprecated {