Skip to content

Commit d1dd9fb

Browse files
aheckmannaheckmann
committed
fix(style): fix a11y color contrast
1 parent 6deb4f6 commit d1dd9fb

File tree

1 file changed

+69
-23
lines changed

1 file changed

+69
-23
lines changed

‎src/css/custom.css

Lines changed: 69 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,43 @@
1919
--ifm-font-family-base: 'Nacelle', system-ui, -apple-system, sans-serif;
2020
--ifm-heading-font-family: 'Nacelle', system-ui, -apple-system, sans-serif;
2121
--ifm-font-family-monospace: 'IBM Mono';
22+
--plane-text-color: rgb(255, 255, 255, 0.87);
23+
--color-neutral-400: oklch(71.7% .0116 230.89);
24+
--color-neutral-500: oklch(58.24% .0161 231.06);
25+
--color-neutral-600: oklch(47.52% .0127 231.05);
26+
--color-brand-25: oklch(98.54% .0085 230.78);
27+
--color-brand-900: oklch(20.77% .044 234.86);
28+
--color-brand-950: oklch(17.92% .0365 231.95);
29+
--ifm-footer-background-color: var(--color-brand-950);
30+
--plane-footer-background-color: var(--color-brand-950);
2231
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
2332
--ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
2433
}
2534

2635
/* For readability concerns, you should choose a lighter palette in dark mode. */
27-
[data-theme='dark'] {
28-
--ifm-color-primary: #006399;
29-
--ifm-color-primary-dark: #1b47c2;
30-
--ifm-color-primary-darker: #1941b1;
31-
--ifm-color-primary-darkest: #153693;
32-
--ifm-color-primary-light: #2257ed;
33-
--ifm-color-primary-lighter: #3e6ef0;
34-
--ifm-color-primary-lightest: #557ef2;
36+
html[data-theme='dark'] {
37+
--ifm-color-primary-lightest: #aad6ee;
38+
--ifm-color-primary-lighter: #7fc2e6;
39+
--ifm-color-primary-light: #55addd;
40+
--ifm-color-primary: #3fa3d9;
41+
--ifm-color-primary-dark: #2892cc;
42+
--ifm-color-primary-darker: #195c80;
43+
--ifm-color-primary-darkest: #113d55;
44+
45+
--ifm-heading-color: #e0e4ec;
46+
--ifm-background-color: var(--color-brand-900);
47+
--ifm-footer-background-color: var(--color-brand-950);
48+
--ifm-footer-link-color: var(--color-neutral-500);
49+
--plane-footer-background-color: var(--color-brand-950);
50+
--plane-footer-link-color: var(--color-neutral-400);
3551
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
3652
--ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="%23ebebeb99" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
3753
}
3854

55+
.theme-layout-main {
56+
padding-bottom: 40px;
57+
}
58+
3959
@media (min-width: 1536px) {
4060

4161
body,
@@ -52,8 +72,9 @@
5272
background-color: rgb(250 250 250);
5373
}
5474

75+
[data-theme='dark'] body,
5576
[data-theme='dark'] .navbar {
56-
background-color: #1b1b1d;
77+
background-color: var(--ifm-background-color);
5778
}
5879

5980
.navbar__toggle {
@@ -88,7 +109,7 @@
88109
}
89110

90111
[data-theme='dark'] .menu__link {
91-
color: rgb(235, 235, 235, 0.6);
112+
color: var(--color-neutral-400);
92113
font-size: 13px;
93114
font-weight: 500;
94115
align-items: center;
@@ -106,13 +127,14 @@
106127
letter-spacing: -0.01em;
107128
line-height: 16px;
108129
transition: opacity 0.2s ease-out;
109-
color: rgba(60, 60, 60, 0.7);
130+
/* color: rgba(60, 60, 60, 0.7); */
131+
color: var(--color-neutral-600);
110132
}
111133

112134
.menu__link--active:not(.menu__link--sublist) {
113135
font-weight: 600;
114136
transition: color 0.25s;
115-
color: #006399;
137+
color: var(--ifm-color-primary);
116138
font-size: 13px;
117139
border-left-style: solid;
118140
border-left-width: 4px;
@@ -122,13 +144,13 @@
122144
[data-theme="dark"] a,
123145
[data-theme="dark"] .menu__link--active:not(.menu__link--sublist),
124146
[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link {
125-
color: #2690C9;
147+
color: var(--ifm-color-primary);
126148
}
127149

128150
.menu__link--active:is(.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible > .menu__link--sublist) {
129151
font-weight: 600;
130152
transition: color 0.25s;
131-
color: #006399;
153+
color: var(--ifm-color-primary);
132154
font-size: 13px;
133155
border-left-style: solid;
134156
border-left-width: 4px;
@@ -287,7 +309,7 @@ h3.description {
287309
}
288310

289311
#__docusaurus>nav>div.navbar__inner>div.navbar__items.navbar__items--right>a:nth-child(4) {
290-
background-color: #006399;
312+
background-color: var(--ifm-color-primary);
291313
border-radius: 8px;
292314
color: #f3f5f7;
293315
font-size: 0.75rem;
@@ -300,6 +322,11 @@ h3.description {
300322
line-height: 1.25rem;
301323
}
302324

325+
[data-theme="dark"] #__docusaurus>nav>div.navbar__inner>div.navbar__items.navbar__items--right>a:nth-child(4) {
326+
/* background-color: var(--ifm-color-primary-dark); */
327+
color: var(--ifm-color-emphasis-800);
328+
}
329+
303330
#__docusaurus>nav>div.navbar__inner>div.navbar__items.navbar__items--right>a>svg {
304331
display: none;
305332
}
@@ -474,7 +501,7 @@ html[data-theme="dark"] .one {
474501
}
475502

476503
.card:hover {
477-
border: 1px solid #006399;
504+
border: 1px solid var(--ifm-color-primary);
478505
}
479506

480507
.card-icon {
@@ -486,7 +513,7 @@ html[data-theme="dark"] .one {
486513
}
487514

488515
.icon-style {
489-
color: #006399;
516+
color: var(--ifm-color-primary);
490517
}
491518

492519
.card-title {
@@ -500,6 +527,10 @@ html[data-theme="dark"] .one {
500527
font-size: 14px;
501528
}
502529

530+
[data-theme="dark"] .card-description {
531+
color: var(--ifm-heading-color);
532+
}
533+
503534
.card-link {
504535
text-decoration: none;
505536
color: inherit;
@@ -542,15 +573,15 @@ h6 {
542573
[data-theme='dark'] h4,
543574
[data-theme='dark'] h5,
544575
[data-theme='dark'] h6 {
545-
color: rgb(224 228 236);
576+
color: var(--color-brand-25);
546577
}
547578

548579
html[data-theme='dark'] {
549-
color: rgb(255, 255, 255, 0.87);
580+
color: var(--color-brand-25);
550581
}
551582

552583
[data-theme='dark'] blockquote {
553-
color: rgb(255, 255, 255, 0.87);
584+
color: var(--color-brand-25);
554585
}
555586

556587
[data-theme='dark'] code {
@@ -561,12 +592,12 @@ html[data-theme='dark'] {
561592
color: rgb(243 246 251);
562593
}
563594

564-
[data-theme='dark'] .table-of-contents__link {
565-
color: rgb(235, 235, 235, 0.6);
595+
[data-theme='dark'] .table-of-contents a {
596+
color: var(--color-neutral-400);
566597
}
567598

568599
.table-of-contents__link {
569-
color: rgba(60, 60, 60, 0.7);
600+
color: var(--color-neutral-600);
570601
}
571602

572603
@media (min-width: 768px) {
@@ -777,6 +808,21 @@ html:not([data-theme]) .themedComponent--light_NVdE {
777808
color: rgb(159 160 160);
778809
}
779810

811+
a.footer__link-item {
812+
color: var(--ifm-footer-link-color);
813+
text-decoration: none;
814+
font-size: 0.8rem;
815+
}
816+
817+
a.footer__link-item:hover {
818+
text-decoration: underline;
819+
}
820+
821+
[data-theme='dark'] .footer--dark {
822+
--ifm-footer-background-color: var(--plane-footer-background-color);
823+
--ifm-footer-link-color: var(--plane-footer-link-color);
824+
}
825+
780826
@media (min-width: 1455px) {
781827

782828
body,

0 commit comments

Comments
 (0)