Skip to content

Commit 3c7584b

Browse files
pupuking723silviuaavram
pupuking723
and
silviuaavram
authored
docs: fix docs dark mode example contrast (#1694)
* fix docs dark mode example contrast * move everything to className --------- Co-authored-by: Silviu Alexandru Avram <silviu.avram91@gmail.com>
1 parent 69e02d8 commit 3c7584b

9 files changed

Lines changed: 230 additions & 81 deletions

File tree

‎docusaurus/pages/combobox.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22

33
import Downshift from '../../src'
44
import {type ControllerStateAndHelpers} from '../../src/downshift.types'
5-
import {colors} from '../utils'
5+
import {colors, getExampleLabelClassName} from '../utils'
66

77
export default function ComboBox() {
88
return (
@@ -22,30 +22,27 @@ export default function ComboBox() {
2222
}: ControllerStateAndHelpers<string>) => (
2323
<div className="container">
2424
<label
25-
style={{
26-
fontWeight: 'bolder',
27-
color: selectedItem ? selectedItem : 'black',
28-
}}
25+
className={getExampleLabelClassName(selectedItem)}
2926
{...getLabelProps()}
3027
>
3128
Choose an element:
3229
</label>
3330
<div {...getRootProps({}, {suppressRefError: true})}>
3431
<input
35-
style={{padding: '4px'}}
32+
className="example-input"
3633
{...getInputProps()}
3734
data-testid="combobox-input"
3835
/>
3936
<button
40-
style={{padding: '4px 8px'}}
37+
className="example-button"
4138
aria-label="toggle menu"
4239
data-testid="combobox-toggle-button"
4340
{...getToggleButtonProps()}
4441
>
4542
{isOpen ? <>&#8593;</> : <>&#8595;</>}
4643
</button>
4744
<button
48-
style={{padding: '4px 8px'}}
45+
className="example-button"
4946
aria-label="toggle menu"
5047
data-testid="clear-button"
5148
onClick={() => clearSelection()}
@@ -62,11 +59,9 @@ export default function ComboBox() {
6259
: colors
6360
).map((item, index) => (
6461
<li
65-
style={{
66-
padding: '4px',
67-
backgroundColor:
68-
highlightedIndex === index ? '#bde4ff' : undefined,
69-
}}
62+
className={`example-menu-item${
63+
highlightedIndex === index ? ' highlighted' : ''
64+
}`}
7065
key={`${item}${index}`}
7166
{...getItemProps({
7267
item,

‎docusaurus/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22

33
export default function Docs() {
44
return (
5-
<div style={{width: '50%', margin: '200px auto'}}>
5+
<div className="docs-index">
66
Downshift Docs for E2E Testing
77
<ul>
88
<li>

‎docusaurus/pages/shared.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
align-self: center;
88
}
99

10+
.docs-index {
11+
width: 50%;
12+
margin: 200px auto;
13+
}
14+
1015
.menu {
1116
list-style: none;
1217
width: 100%;
@@ -16,6 +21,160 @@
1621
overflow-y: scroll;
1722
}
1823

24+
.example-label {
25+
color: var(--ifm-font-color-base);
26+
font-weight: bolder;
27+
}
28+
29+
.example-color-black {
30+
color: #1c1e21;
31+
}
32+
33+
.example-color-red {
34+
color: #b00020;
35+
}
36+
37+
.example-color-green {
38+
color: #006b3c;
39+
}
40+
41+
.example-color-blue {
42+
color: #0b57d0;
43+
}
44+
45+
.example-color-orange {
46+
color: #9a4d00;
47+
}
48+
49+
.example-color-purple {
50+
color: #6f2da8;
51+
}
52+
53+
.example-color-pink {
54+
color: #b0005a;
55+
}
56+
57+
.example-color-orchid {
58+
color: #8a2a8a;
59+
}
60+
61+
.example-color-aqua {
62+
color: #007c89;
63+
}
64+
65+
.example-color-lime {
66+
color: #4a6f00;
67+
}
68+
69+
.example-color-gray {
70+
color: #606770;
71+
}
72+
73+
.example-color-brown {
74+
color: #7a3e14;
75+
}
76+
77+
.example-color-teal {
78+
color: #00796b;
79+
}
80+
81+
.example-color-skyblue {
82+
color: #0369a1;
83+
}
84+
85+
html[data-theme='dark'] .example-color-black {
86+
color: #f5f6f7;
87+
}
88+
89+
html[data-theme='dark'] .example-color-red {
90+
color: #ff8a80;
91+
}
92+
93+
html[data-theme='dark'] .example-color-green {
94+
color: #7ee787;
95+
}
96+
97+
html[data-theme='dark'] .example-color-blue {
98+
color: #79c0ff;
99+
}
100+
101+
html[data-theme='dark'] .example-color-orange {
102+
color: #ffa657;
103+
}
104+
105+
html[data-theme='dark'] .example-color-purple {
106+
color: #d2a8ff;
107+
}
108+
109+
html[data-theme='dark'] .example-color-pink {
110+
color: #ff99c8;
111+
}
112+
113+
html[data-theme='dark'] .example-color-orchid {
114+
color: #ff9df5;
115+
}
116+
117+
html[data-theme='dark'] .example-color-aqua {
118+
color: #7ee7ff;
119+
}
120+
121+
html[data-theme='dark'] .example-color-lime {
122+
color: #b8ff7a;
123+
}
124+
125+
html[data-theme='dark'] .example-color-gray {
126+
color: #c9d1d9;
127+
}
128+
129+
html[data-theme='dark'] .example-color-brown {
130+
color: #d4a373;
131+
}
132+
133+
html[data-theme='dark'] .example-color-teal {
134+
color: #56d4c6;
135+
}
136+
137+
html[data-theme='dark'] .example-color-skyblue {
138+
color: #9cdcfe;
139+
}
140+
141+
.example-input {
142+
border: 1px solid var(--ifm-color-emphasis-300);
143+
background-color: var(--ifm-background-color);
144+
color: var(--ifm-font-color-base);
145+
padding: 4px;
146+
}
147+
148+
.example-button {
149+
border: 1px solid var(--ifm-color-emphasis-300);
150+
background-color: var(--ifm-color-emphasis-100);
151+
color: var(--ifm-font-color-base);
152+
padding: 4px 8px;
153+
}
154+
155+
.example-select-toggle {
156+
padding: 4px;
157+
text-align: center;
158+
border: 1px solid var(--ifm-color-emphasis-600);
159+
background-color: var(--ifm-color-emphasis-100);
160+
color: var(--ifm-font-color-base);
161+
cursor: pointer;
162+
}
163+
164+
.example-menu-item {
165+
padding: 4px;
166+
}
167+
168+
.example-menu-item.highlighted {
169+
background-color: #bde4ff;
170+
color: #1c1e21;
171+
}
172+
173+
html[data-theme='dark'] .example-menu-item.highlighted {
174+
background-color: #1f6feb;
175+
color: #ffffff;
176+
}
177+
19178
.tag-group {
20179
display: inline-flex;
21180
gap: 8px;
@@ -27,6 +186,7 @@
27186
.tag {
28187
border: solid 1px darkgreen;
29188
background-color: green;
189+
color: #ffffff;
30190
padding: 0 6px;
31191
margin: 0 2px;
32192
border-radius: 10px;
@@ -49,8 +209,16 @@
49209
background-color: transparent;
50210
}
51211

212+
.tag-remove-control {
213+
padding: 4px;
214+
cursor: pointer;
215+
}
216+
52217
.item-to-add {
218+
border: 1px solid var(--ifm-color-emphasis-300);
219+
background-color: var(--ifm-color-emphasis-100);
53220
cursor: pointer;
221+
color: var(--ifm-font-color-base);
54222
}
55223

56224
.selected-tag {

‎docusaurus/pages/useCombobox.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22

33
import {useCombobox} from '../../src'
4-
import {colors} from '../utils'
4+
import {colors, getExampleLabelClassName} from '../utils'
55

66
export default function DropdownCombobox() {
77
const [inputItems, setInputItems] = React.useState(colors)
@@ -28,30 +28,27 @@ export default function DropdownCombobox() {
2828
return (
2929
<div className="container">
3030
<label
31-
style={{
32-
fontWeight: 'bolder',
33-
color: selectedItem ? selectedItem : 'black',
34-
}}
31+
className={getExampleLabelClassName(selectedItem)}
3532
{...getLabelProps()}
3633
>
3734
Choose an element:
3835
</label>
3936
<div>
4037
<input
41-
style={{padding: '4px'}}
38+
className="example-input"
4239
{...getInputProps()}
4340
data-testid="combobox-input"
4441
/>
4542
<button
46-
style={{padding: '4px 8px'}}
43+
className="example-button"
4744
aria-label="toggle menu"
4845
data-testid="combobox-toggle-button"
4946
{...getToggleButtonProps()}
5047
>
5148
{isOpen ? <>&#8593;</> : <>&#8595;</>}
5249
</button>
5350
<button
54-
style={{padding: '4px 8px'}}
51+
className="example-button"
5552
aria-label="clear selection"
5653
data-testid="clear-button"
5754
onClick={() => selectItem(null)}
@@ -63,11 +60,9 @@ export default function DropdownCombobox() {
6360
{isOpen
6461
? inputItems.map((item, index) => (
6562
<li
66-
style={{
67-
padding: '4px',
68-
backgroundColor:
69-
highlightedIndex === index ? '#bde4ff' : undefined,
70-
}}
63+
className={`example-menu-item${
64+
highlightedIndex === index ? ' highlighted' : ''
65+
}`}
7166
key={`${item}${index}`}
7267
{...getItemProps({
7368
item,

‎docusaurus/pages/useMultipleCombobox.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22

33
import {useCombobox, useMultipleSelection} from '../../src'
44
import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
5-
import {colors} from '../utils'
5+
import {colors, getExampleLabelClassName} from '../utils'
66

77
const initialSelectedItems = colors.slice(0, 2)
88

@@ -79,10 +79,7 @@ export default function DropdownMultipleCombobox() {
7979
return (
8080
<div className="container">
8181
<label
82-
style={{
83-
fontWeight: 'bolder',
84-
color: selectedItem ? selectedItem : 'black',
85-
}}
82+
className={getExampleLabelClassName(selectedItem)}
8683
{...getLabelProps()}
8784
>
8885
Choose an element:
@@ -104,7 +101,7 @@ export default function DropdownMultipleCombobox() {
104101
{selectedItemForRender}
105102
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
106103
<span
107-
style={{padding: '4px', cursor: 'pointer'}}
104+
className="tag-remove-control"
108105
onClick={e => {
109106
e.stopPropagation()
110107
removeSelectedItem(selectedItemForRender)
@@ -117,20 +114,20 @@ export default function DropdownMultipleCombobox() {
117114
})}
118115
<div>
119116
<input
120-
style={{padding: '4px'}}
117+
className="example-input"
121118
{...getInputProps(getDropdownProps({preventKeyAction: isOpen}))}
122119
data-testid="combobox-input"
123120
/>
124121
<button
125-
style={{padding: '4px 8px'}}
122+
className="example-button"
126123
aria-label="toggle menu"
127124
data-testid="combobox-toggle-button"
128125
{...getToggleButtonProps()}
129126
>
130127
{isOpen ? <>&#8593;</> : <>&#8595;</>}
131128
</button>
132129
<button
133-
style={{padding: '4px 8px'}}
130+
className="example-button"
134131
aria-label="clear selection"
135132
data-testid="clear-button"
136133
onClick={() => reset()}
@@ -143,11 +140,9 @@ export default function DropdownMultipleCombobox() {
143140
{isOpen
144141
? items.map((item, index) => (
145142
<li
146-
style={{
147-
padding: '4px',
148-
backgroundColor:
149-
highlightedIndex === index ? '#bde4ff' : undefined,
150-
}}
143+
className={`example-menu-item${
144+
highlightedIndex === index ? ' highlighted' : ''
145+
}`}
151146
key={`${item}${index}`}
152147
{...getItemProps({
153148
item,

0 commit comments

Comments
 (0)