Skip to content

Commit 07c8232

Browse files
committed
Increase dark-mode button contrast
The primary button's text and the secondary button's border were both low-contrast against the teal/dark backgrounds in dark mode. Bump them to match the higher-contrast treatment on reactnative.dev: - primary text: dark:text-secondary (#404756) -> dark:text-gray-95 (#16181D) - secondary border: #404756 -> #4E5769 (matches RN's rgb(78,86,104)) Primary button text contrast goes from ~4.6:1 to ~8.9:1. Dark mode only.
1 parent 4efe72d commit 07c8232

2 files changed

Lines changed: 2 additions & 2 deletions

File tree

src/components/ButtonLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function ButtonLink({
3333
className,
3434
'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
3535
{
36-
'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':
36+
'bg-link text-white dark:bg-brand-dark dark:text-gray-95 hover:bg-opacity-80':
3737
type === 'primary',
3838
'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
3939
type === 'secondary',

tailwind.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ module.exports = {
4747
'outer-border': '0 0 0 1px rgba(0, 0, 0, 0.1)',
4848
'outer-border-dark': '0 0 0 1px rgba(255, 255, 255, 0.1)',
4949
'secondary-button-stroke': 'inset 0 0 0 1px #D9DBE3',
50-
'secondary-button-stroke-dark': 'inset 0 0 0 1px #404756',
50+
'secondary-button-stroke-dark': 'inset 0 0 0 1px #4E5769',
5151
none: 'none',
5252
},
5353
extend: {

0 commit comments

Comments
 (0)