From 1cd4f54aef3c487fe5dab24bb548fb18d50a0e88 Mon Sep 17 00:00:00 2001 From: Kam Date: Thu, 28 May 2026 20:11:07 +0300 Subject: [PATCH] fix(docs-infra): readable contrast for DEV/EXP api badges in light mode 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 0010ad5910186540fd85e980bff7d608613c738e) --- .../api-items-section/api-items-section.component.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.scss b/adev/src/app/features/references/api-items-section/api-items-section.component.scss index 48149d62059..c47b1a5cb1a 100644 --- a/adev/src/app/features/references/api-items-section/api-items-section.component.scss +++ b/adev/src/app/features/references/api-items-section/api-items-section.component.scss @@ -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 {