update(tooltip): Make inverted text readable in dark mode (#386)

* update(tooltip): Make inverted text readable in dark mode * lint * dont use the blackest of black * mode -> baseInverse
airbnb · Jul 2, 2020 · c218858 · c218858
1 parent bfb933c
commit c218858
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 1 deletion.
diff --git a/packages/core/src/components/Tooltip/styles.ts b/packages/core/src/components/Tooltip/styles.ts
@@ -55,7 +55,7 @@ export const styleSheetTooltip: StyleSheet = ({ unit, color, pattern, ui }) => (
   },
 
   content_inverted: {
-    backgroundColor: color.accent.blackout,
+    backgroundColor: color.baseInverse,
   },
 
   popover: {

diff --git a/packages/core/src/themes/buildTheme.ts b/packages/core/src/themes/buildTheme.ts
@@ -5,6 +5,7 @@ import toRGBA from '../utils/toRGBA';
 
 export type Options = {
   base: string;
+  baseInverse: string;
   borderRadius?: number;
   boxShadow?: [number, number];
   boxShadowColor?: string;
@@ -24,6 +25,7 @@ export default function buildTheme(
 ): Theme {
   const {
     base,
+    baseInverse,
     borderRadius = 4,
     boxShadow = [2, 4],
     boxShadowColor = base,
@@ -71,6 +73,7 @@ export default function buildTheme(
     color: {
       accent,
       base,
+      baseInverse,
       brand,
       core: color,
       clear: 'transparent',

diff --git a/packages/core/src/themes/dark.ts b/packages/core/src/themes/dark.ts
@@ -24,6 +24,7 @@ const color: Theme['color']['core'] = {
 export default (fontFamily: string) =>
   buildTheme({
     base: '#181818',
+    baseInverse: '#FFF',
     boxShadowColor: '#000',
     brand,
     color,

diff --git a/packages/core/src/themes/light.ts b/packages/core/src/themes/light.ts
@@ -24,6 +24,7 @@ const color: Theme['color']['core'] = {
 export default (fontFamily: string) =>
   buildTheme({
     base: '#fff',
+    baseInverse: '#181818',
     boxShadowColor: color.neutral[6],
     brand,
     color,

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -114,6 +114,7 @@ export type Theme = {
       textError: Hexcode;
     };
     base: Hexcode;
+    baseInverse: Hexcode;
     brand: {
       luxury: ColorRange;
       plus: ColorRange;