From f293d9fb0ede2e55fd0ef84bc624e683ae841d50 Mon Sep 17 00:00:00 2001 From: Himanshu Mishra Date: Mon, 20 Apr 2020 17:59:23 +0900 Subject: [PATCH] Add textContrast as color for white/black text in dark/light theme --- packages/core/src/components/ProgressBars/CircleProgress.tsx | 2 +- packages/theme/src/themes.ts | 2 ++ packages/theme/src/types.ts | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/ProgressBars/CircleProgress.tsx b/packages/core/src/components/ProgressBars/CircleProgress.tsx index 9290132eec..b1f857d0ac 100644 --- a/packages/core/src/components/ProgressBars/CircleProgress.tsx +++ b/packages/core/src/components/ProgressBars/CircleProgress.tsx @@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({ transform: 'translate(-50%, -60%)', fontSize: 45, fontWeight: 'bold', - color: theme.palette.textSubtle, + color: theme.palette.textContrast, }, circle: { width: '80%', diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index eb36a37bf5..3dad461423 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -41,6 +41,7 @@ export const lightTheme = createTheme({ main: blue[500], }, border: '#E6E6E6', + textContrast: '#000000', textVerySubtle: '#DDD', textSubtle: '#6E6E6E', highlight: '#FFFBCC', @@ -80,6 +81,7 @@ export const darkTheme = createTheme({ main: blue[500], }, border: '#E6E6E6', + textContrast: '#FFFFFF', textVerySubtle: '#DDD', textSubtle: '#6E6E6E', highlight: '#FFFBCC', diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index f0e43c54d1..c020fbb4e1 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -30,6 +30,7 @@ type PaletteAdditions = { background: string; }; border: string; + textContrast: string; textVerySubtle: string; textSubtle: string; highlight: string;