docs(docs-infra): Fix combobox dialog styles for dark theme

SkyZeroZx · SkyZeroZx · commit 2a2a194a9719 · 2025-12-24T14:28:03.000-05:00
Fixes combobox dialog styles to ensure correct text color and contrast in dark theme.
This improves readability and visual consistency when using the docs in dark mode.
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/app/app.css b/adev/src/content/examples/aria/combobox/src/dialog/app/app.css
@@ -74,15 +74,16 @@
   outline: none;
   font-size: 1rem;
   padding: 0.7rem 1rem 0.7rem 2.5rem;
-  background-color: var(--mat-sys-surface);
+  background-color: var(--septenary-contrast);
+  color: var(--primary-contrast);
 }
 
 .popover {
   margin: 0;
   padding: 0;
   border: 1px solid var(--border-color);
   border-radius: 0.25rem;
-  background-color: var(--mat-sys-surface);
+  background-color: var(--septenary-contrast);
 }
 
 [ngListbox] {
@@ -138,6 +139,8 @@
   padding: 0;
   border: 1px solid var(--border-color);
   border-radius: 0.25rem;
+  background-color: var(--septenary-contrast);
+  color: inherit;
 }
 
 .dialog .combobox-input-container {
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.css b/adev/src/content/examples/aria/combobox/src/dialog/material/app/app.css
@@ -5,6 +5,7 @@
   justify-content: center;
   font-family: var(--inter-font);
   --border-color: color-mix(in srgb, var(--full-contrast) 20%, var(--page-background));
+  --primary: var(--vivid-pink);
 }
 
 [ngCombobox] {
@@ -74,7 +75,8 @@
   outline: none;
   font-size: 1rem;
   padding: 0.7rem 1rem 0.7rem 2.5rem;
-  background-color: var(--mat-sys-surface);
+  background-color: var(--septenary-contrast);
+  color: var(--primary-contrast);
 }
 
 [ngListbox] {
@@ -131,6 +133,8 @@
   bottom: auto;
   border: 1px solid var(--border-color);
   border-radius: 1rem;
+  background-color: var(--septenary-contrast);
+  color: inherit;
 }
 
 .dialog .combobox-input-container {
diff --git a/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css b/adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css
@@ -76,6 +76,7 @@
   padding: 0 0.5rem;
   position: absolute;
   opacity: 0.8;
+  color: #000;
 }
 
 .arrow-icon {
@@ -84,6 +85,7 @@
   right: 0;
   opacity: 0.8;
   transition: transform 0.2s ease;
+  color: #000;
 }
 
 [ngComboboxInput][aria-expanded='true'] + .arrow-icon {
@@ -145,7 +147,8 @@
 }
 
 [ngCombobox]:focus-within [data-active='true'] {
-  outline: 2px solid color-mix(in srgb, var(--vivid-pink) 80%, transparent);
+  outline: 2px dashed var(--vivid-pink);
+  outline-offset: -2px;
 }
 
 .dialog {
@@ -158,6 +161,8 @@
   padding: 0;
   border: none;
   box-shadow: var(--retro-flat-shadow);
+  background-color: var(--septenary-contrast);
+  color: inherit;
 }
 
 .dialog .combobox-input-container {
@@ -170,7 +175,7 @@
 }
 
 .dialog [ngComboboxInput] {
-  border-bottom: 4px solid #000;
+  border-bottom: 4px solid var(--gray-700);
 }
 
 .dialog [ngCombobox]:focus-within [ngComboboxInput] {

Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,7 @@`
`76`	`76`	`padding: 0 0.5rem;`
`77`	`77`	`position: absolute;`
`78`	`78`	`opacity: 0.8;`
	`79`	`+ color: #000;`
`79`	`80`	`}`
`80`	`81`
`81`	`82`	`.arrow-icon {`
`@@ -84,6 +85,7 @@`
`84`	`85`	`right: 0;`
`85`	`86`	`opacity: 0.8;`
`86`	`87`	`transition: transform 0.2s ease;`
	`88`	`+ color: #000;`
`87`	`89`	`}`
`88`	`90`
`89`	`91`	`[ngComboboxInput][aria-expanded='true'] + .arrow-icon {`
`@@ -145,7 +147,8 @@`
`145`	`147`	`}`
`146`	`148`
`147`	`149`	`[ngCombobox]:focus-within [data-active='true'] {`
`148`		`- outline: 2px solid color-mix(in srgb, var(--vivid-pink) 80%, transparent);`
	`150`	`+ outline: 2px dashed var(--vivid-pink);`
	`151`	`+ outline-offset: -2px;`
`149`	`152`	`}`
`150`	`153`
`151`	`154`	`.dialog {`
`@@ -158,6 +161,8 @@`
`158`	`161`	`padding: 0;`
`159`	`162`	`border: none;`
`160`	`163`	`box-shadow: var(--retro-flat-shadow);`
	`164`	`+ background-color: var(--septenary-contrast);`
	`165`	`+ color: inherit;`
`161`	`166`	`}`
`162`	`167`
`163`	`168`	`.dialog .combobox-input-container {`
`@@ -170,7 +175,7 @@`
`170`	`175`	`}`
`171`	`176`
`172`	`177`	`.dialog [ngComboboxInput] {`
`173`		`- border-bottom: 4px solid #000;`
	`178`	`+ border-bottom: 4px solid var(--gray-700);`
`174`	`179`	`}`
`175`	`180`
`176`	`181`	`.dialog [ngCombobox]:focus-within [ngComboboxInput] {`