Skip to content

Commit 090484c

Browse files
SkyZeroZxkirjs
SkyZeroZx
authored and
kirjs
committed
docs(docs-infra): Fix combobox dialog styles for dark theme
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.
1 parent f9e9fc4 commit 090484c

3 files changed

Lines changed: 35 additions & 23 deletions

File tree

‎adev/src/content/examples/aria/combobox/src/dialog/app/app.css‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
:host {
44
display: flex;
55
justify-content: center;
6-
font-family: var(--inter-font);
7-
--border-color: color-mix(in srgb, var(--full-contrast) 20%, var(--page-background));
6+
font-family: var(--inter-font, system-ui, sans-serif);
7+
--border-color: color-mix(in srgb, var(--full-contrast, #000) 20%, var(--page-background, #fff));
88
}
99

1010
[ngCombobox] {
@@ -37,8 +37,8 @@
3737
}
3838

3939
[ngCombobox]:focus-within [ngComboboxInput] {
40-
outline: 1.5px solid var(--vivid-pink);
41-
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink) 25%, transparent);
40+
outline: 1.5px solid var(--vivid-pink, #f542a4);
41+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink, #f542a4) 25%, transparent);
4242
}
4343

4444
.icon {
@@ -74,15 +74,16 @@
7474
outline: none;
7575
font-size: 1rem;
7676
padding: 0.7rem 1rem 0.7rem 2.5rem;
77-
background-color: var(--mat-sys-surface);
77+
background-color: var(--septenary-contrast, #f5f5f5);
78+
color: var(--primary-contrast, #1a1a1a);
7879
}
7980

8081
.popover {
8182
margin: 0;
8283
padding: 0;
8384
border: 1px solid var(--border-color);
8485
border-radius: 0.25rem;
85-
background-color: var(--mat-sys-surface);
86+
background-color: var(--septenary-contrast, #f5f5f5);
8687
}
8788

8889
[ngListbox] {
@@ -104,17 +105,17 @@
104105
}
105106

106107
[ngOption]:hover {
107-
background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
108+
background-color: color-mix(in srgb, var(--primary-contrast, #1a1a1a) 5%, transparent);
108109
}
109110

110111
[ngOption][data-active='true'] {
111112
outline-offset: -2px;
112-
outline: 2px solid var(--vivid-pink);
113+
outline: 2px solid var(--vivid-pink, #f542a4);
113114
}
114115

115116
[ngOption][aria-selected='true'] {
116-
color: var(--vivid-pink);
117-
background-color: color-mix(in srgb, var(--vivid-pink) 5%, transparent);
117+
color: var(--vivid-pink, #f542a4);
118+
background-color: color-mix(in srgb, var(--vivid-pink, #f542a4) 5%, transparent);
118119
}
119120

120121
[ngOption]:not([aria-selected='true']) .check-icon {
@@ -138,6 +139,8 @@
138139
padding: 0;
139140
border: 1px solid var(--border-color);
140141
border-radius: 0.25rem;
142+
background-color: var(--septenary-contrast, #f5f5f5);
143+
color: inherit;
141144
}
142145

143146
.dialog .combobox-input-container {

‎adev/src/content/examples/aria/combobox/src/dialog/material/app/app.css‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
:host {
44
display: flex;
55
justify-content: center;
6-
font-family: var(--inter-font);
7-
--border-color: color-mix(in srgb, var(--full-contrast) 20%, var(--page-background));
6+
font-family: var(--inter-font, system-ui, sans-serif);
7+
--border-color: color-mix(in srgb, var(--full-contrast, #000) 20%, var(--page-background, #fff));
8+
--primary: var(--vivid-pink, #f542a4);
89
}
910

1011
[ngCombobox] {
@@ -37,8 +38,8 @@
3738
}
3839

3940
[ngCombobox]:focus-within [ngComboboxInput] {
40-
outline: 1.5px solid var(--vivid-pink);
41-
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink) 25%, transparent);
41+
outline: 1.5px solid var(--vivid-pink, #f542a4);
42+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink, #f542a4) 25%, transparent);
4243
}
4344

4445
.icon {
@@ -74,7 +75,8 @@
7475
outline: none;
7576
font-size: 1rem;
7677
padding: 0.7rem 1rem 0.7rem 2.5rem;
77-
background-color: var(--mat-sys-surface);
78+
background-color: var(--septenary-contrast, #f5f5f5);
79+
color: var(--primary-contrast, #1a1a1a);
7880
}
7981

8082
[ngListbox] {
@@ -97,7 +99,7 @@
9799

98100
[ngOption]:hover,
99101
[ngOption][data-active='true'] {
100-
background-color: color-mix(in srgb, var(--primary-contrast) 5%, transparent);
102+
background-color: color-mix(in srgb, var(--primary-contrast, #1a1a1a) 5%, transparent);
101103
}
102104

103105
[ngOption][data-active='true'] {
@@ -131,6 +133,8 @@
131133
bottom: auto;
132134
border: 1px solid var(--border-color);
133135
border-radius: 1rem;
136+
background-color: var(--septenary-contrast, #f5f5f5);
137+
color: inherit;
134138
}
135139

136140
.dialog .combobox-input-container {

‎adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
}
6060

6161
[ngCombobox]:focus-within [ngComboboxInput] {
62-
outline: 1.5px solid var(--vivid-pink);
63-
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink) 25%, transparent);
62+
outline: 1.5px solid var(--vivid-pink, #f542a4);
63+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vivid-pink, #f542a4) 25%, transparent);
6464
}
6565

6666
.icon {
@@ -76,6 +76,7 @@
7676
padding: 0 0.5rem;
7777
position: absolute;
7878
opacity: 0.8;
79+
color: #000;
7980
}
8081

8182
.arrow-icon {
@@ -84,6 +85,7 @@
8485
right: 0;
8586
opacity: 0.8;
8687
transition: transform 0.2s ease;
88+
color: #000;
8789
}
8890

8991
[ngComboboxInput][aria-expanded='true'] + .arrow-icon {
@@ -136,16 +138,17 @@
136138
}
137139

138140
[ngOption][aria-selected='true'] {
139-
color: var(--vivid-pink);
140-
background-color: color-mix(in srgb, var(--vivid-pink) 10%, transparent);
141+
color: var(--vivid-pink, #f542a4);
142+
background-color: color-mix(in srgb, var(--vivid-pink, #f542a4) 10%, transparent);
141143
}
142144

143145
[ngOption]:hover {
144-
background-color: color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
146+
background-color: color-mix(in srgb, var(--mat-sys-on-surface, #1a1a1a) 10%, transparent);
145147
}
146148

147149
[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, #f542a4);
151+
outline-offset: -2px;
149152
}
150153

151154
.dialog {
@@ -158,6 +161,8 @@
158161
padding: 0;
159162
border: none;
160163
box-shadow: var(--retro-flat-shadow);
164+
background-color: var(--septenary-contrast, #f5f5f5);
165+
color: inherit;
161166
}
162167

163168
.dialog .combobox-input-container {
@@ -170,7 +175,7 @@
170175
}
171176

172177
.dialog [ngComboboxInput] {
173-
border-bottom: 4px solid #000;
178+
border-bottom: 4px solid var(--gray-700, #374151);
174179
}
175180

176181
.dialog [ngCombobox]:focus-within [ngComboboxInput] {

0 commit comments

Comments
 (0)