From 63cc345d4a433b5112e13202d3b5b3bdab1ed087 Mon Sep 17 00:00:00 2001
From: Kam <erkamyaman35@gmail.com>
Date: Sat, 25 Jul 2026 20:23:05 +0300
Subject: [PATCH] fix(docs-infra): replace undefined --gray-50 in retro aria
 examples

The retro variants of the toolbar, select, and multiselect aria examples
tint the pressed button background with
color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50)), but
--gray-50 is defined nowhere. Per the CSS spec, a var() with no fallback
pointing at an undefined property invalidates the whole color-mix(), so the
declaration is dropped and the pressed-state tint never applies.

Define a local --retro-pressed-tint token in each example's :host (#fbfbfb,
the value $gray-50 resolved to) with a :host-context(.docs-dark-mode) override
to #151417, and use it for the pressed-state mix. This keeps the example
self-contained rather than depending on adev's global token scope, while
staying theme-aware in both light and dark, following the same token-flipping
pattern used in code-editor.component.scss.

(cherry picked from commit 48c1e5bb0f6cd40d543700c19975e644ac885790)
---
 .../examples/aria/multiselect/src/basic/retro/app/app.css  | 7 ++++++-
 .../examples/aria/multiselect/src/icons/retro/app/app.css  | 7 ++++++-
 .../aria/multiselect/src/limited/retro/app/app.css         | 7 ++++++-
 .../examples/aria/select/src/basic/retro/app/app.css       | 7 ++++++-
 .../examples/aria/select/src/disabled/retro/app/app.css    | 7 ++++++-
 .../examples/aria/select/src/icons/retro/app/app.css       | 7 ++++++-
 .../examples/aria/toolbar/src/basic/retro/app/app.css      | 7 ++++++-
 .../examples/aria/toolbar/src/disabled/retro/app/app.css   | 7 ++++++-
 .../examples/aria/toolbar/src/rtl/retro/app/app.css        | 7 ++++++-
 .../examples/aria/toolbar/src/vertical/retro/app/app.css   | 7 ++++++-
 10 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
index fdc98a62054..bbfe9182b07 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select {
   display: flex;
   position: relative;
@@ -62,7 +67,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
index fdc98a62054..bbfe9182b07 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select {
   display: flex;
   position: relative;
@@ -62,7 +67,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
index 4ef693b0eb2..c52744bc038 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select {
   display: flex;
   position: relative;
@@ -62,7 +67,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/select/src/basic/retro/app/app.css b/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
index 9f226fe1e8e..03167f0a34a 100644
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
+++ b/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select,
 [ngListbox],
 [ngOption] {
@@ -66,7 +71,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
index f45281fa9f6..e162fc2ca28 100644
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
+++ b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select,
 [ngListbox],
 [ngOption] {
@@ -66,7 +71,7 @@
 .select:not([aria-disabled='true']):active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/select/src/icons/retro/app/app.css b/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
index 9f226fe1e8e..03167f0a34a 100644
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
+++ b/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select,
 [ngListbox],
 [ngOption] {
@@ -66,7 +71,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
index a7e3b3569bb..bfbde903f0a 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -71,7 +76,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
index 42e2e280e1a..787e3fab54d 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -71,7 +76,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
index a7e3b3569bb..bfbde903f0a 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -71,7 +76,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
index 2fb268439f6..44f0a39cb9d 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -73,7 +78,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {