feat(tooltip): add dark mode

freenowtech · Aug 28, 2023 · 9f8cc2c · 9f8cc2c
1 parent 9ea2bd4
commit 9f8cc2c
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 51 deletions.
diff --git a/src/components/ColorMode/InvertedColorMode.tsx b/src/components/ColorMode/InvertedColorMode.tsx
@@ -1,20 +1,21 @@
-import React, { useEffect, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
 
-export const InvertedColorMode = ({ children }: { children: React.ReactNode }) => {
-    const [preferredColorScheme, setPreferredColorScheme] = useState(
-        window.matchMedia('(prefers-color-scheme: dark)') ? 'light-theme' : 'dark-theme'
+export const InvertedColorMode: FC<{ children: ReactNode }> = ({ children }) => {
+    const [preferredColorSchema, setPreferredColorSchema] = useState(
+        window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light-theme' : 'dark-theme'
     );
 
     useEffect(() => {
         const mql = window.matchMedia('(prefers-color-scheme: dark)');
-        mql.addEventListener('change', e => {
-            if (e.matches) {
-                setPreferredColorScheme('light-theme');
-            } else {
-                setPreferredColorScheme('dark-theme');
-            }
-        });
+        const onMediaQueryChange = (e: MediaQueryListEvent) => {
+            setPreferredColorSchema(e.matches ? 'light-theme' : 'dark-theme');
+        };
+
+        mql.addEventListener('change', onMediaQueryChange);
+        return () => {
+            mql.removeEventListener('change', onMediaQueryChange);
+        };
     }, []);
 
-    return <div className={preferredColorScheme}>{children}</div>;
+    return <div className={preferredColorSchema}>{children}</div>;
 };
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -62,10 +62,6 @@ function determineTextColor(props: TextProps) {
         return getSemanticValue(inverted ? 'foreground-neutral-faded' : 'foreground-neutral-emphasized');
     }
 
-    if (inverted) {
-        return getSemanticValue('foreground-on-background-primary');
-    }
-
     return getSemanticValue('foreground-primary');
 }
 

diff --git a/src/components/Text/docs/Text.stories.tsx b/src/components/Text/docs/Text.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Text } from '../Text';
-import { onDarkBackground } from '../../../docs/parameters';
 
 const meta: Meta = {
     title: 'Components/Text',
@@ -75,15 +74,6 @@ export const Secondary: Story = {
     }
 };
 
-export const Inverted: Story = {
-    args: {
-        inverted: true
-    },
-    parameters: {
-        ...onDarkBackground
-    }
-};
-
 export const Disabled: Story = {
     args: {
         disabled: true

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -9,6 +9,7 @@ import { getSemanticValue } from '../../utils/cssVariables';
 import { get } from '../../utils/themeGet';
 import { Text } from '../Text/Text';
 import { mapPlacementWithDeprecationWarning, TooltipPlacement } from './TooltipPlacement';
+import { InvertedColorMode } from '../ColorMode/InvertedColorMode';
 
 const fadeAnimation = keyframes`
     from {
@@ -82,14 +83,13 @@ const arrowPlacementStyles = variant({
 });
 
 interface TooltipBodyProps {
-    inverted?: boolean;
     variant: string;
 }
 
 const TooltipBody = styled.div<TooltipBodyProps>`
     position: relative;
     z-index: ${Elevation.TOOLTIP};
-    background-color: ${p => getSemanticValue(p.inverted ? 'background-surface-neutral-faded' : 'background-backdrop')};
+    background-color: ${getSemanticValue('background-backdrop')};
     padding: 0.25rem 0.5rem;
     border-radius: ${get('radii.2')};
     opacity: 0;
@@ -112,9 +112,10 @@ const TooltipBody = styled.div<TooltipBodyProps>`
         position: absolute;
         pointer-events: none;
         border: 0.25rem solid rgba(0, 0, 0, 0);
-        border-bottom-color: ${p =>
+        border-bottom-color: ${
             // background colors are used because this border is used to create the arrow
-            getSemanticValue(p.inverted ? 'background-surface-neutral-faded' : 'background-backdrop')};
+            getSemanticValue('background-backdrop')
+        };
         margin-left: -0.25rem;
 
         ${arrowPlacementStyles}
@@ -123,17 +124,13 @@ const TooltipBody = styled.div<TooltipBodyProps>`
 
 interface TooltipProps {
     /**
-     * The content that will be shown inside of the tooltip body
+     * The content that will be shown inside the tooltip body
      */
     content: React.ReactNode;
     /**
      * Set the position of where the tooltip is attached to the target, defaults to "top"
      */
     placement?: TooltipPlacement | Placement;
-    /**
-     * Adjust the component for display on dark backgrounds
-     */
-    inverted?: boolean;
     /**
      * Force the tooltip to always be visible, regardless of user interaction
      */
@@ -144,8 +141,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
     content,
     children,
     placement = 'top',
-    alwaysVisible = false,
-    inverted = false
+    alwaysVisible = false
 }) => {
     const [isVisible, setIsVisible] = React.useState(alwaysVisible);
     /**
@@ -178,9 +174,11 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
 
     if (typeof content === 'string') {
         dynamicContent = (
-            <Text as="p" fontSize={0} inverted={!inverted}>
-                {content}
-            </Text>
+            <InvertedColorMode>
+                <Text as="p" fontSize={0}>
+                    {content}
+                </Text>
+            </InvertedColorMode>
         );
     }
 
@@ -202,7 +200,6 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
                 createPortal(
                     <TooltipBody
                         ref={setContentReference}
-                        inverted={inverted}
                         style={{ ...styles.popper }}
                         variant={attributes.popper?.['data-popper-placement']}
                         {...attributes.popper}

diff --git a/src/components/Tooltip/docs/Tooltip.stories.tsx b/src/components/Tooltip/docs/Tooltip.stories.tsx
@@ -37,12 +37,6 @@ export const AlwaysVisible: Story = {
     }
 };
 
-export const Inverted: Story = {
-    args: {
-        inverted: true
-    }
-};
-
 export const WithCustomPosition: Story = {
     args: {
         placement: 'bottom-center'

diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts
@@ -273,7 +273,8 @@ export const SemanticColorsDarkSchema = {
                 default: Colors.orange[900],
                 emphasized: Colors.orange[1000]
             }
-        }
+        },
+        backdrop: Colors.blue.primary[50]
     },
     border: {
         neutral: {

diff --git a/src/essentials/Colors/RedesignedColors.ts b/src/essentials/Colors/RedesignedColors.ts
@@ -268,7 +268,8 @@ export const SemanticColorsDarkSchema = {
                 default: Colors.red[900],
                 emphasized: Colors.red[1000]
             }
-        }
+        },
+        backdrop: Colors.neutral[50]
     },
     border: {
         neutral: {

diff --git a/src/essentials/Colors/globalStyles.ts b/src/essentials/Colors/globalStyles.ts
@@ -13,22 +13,25 @@ import { generateBareTierCssVariables, generateSemanticTierCssVariables } from '
 
 export const ClassicColors = createGlobalStyle`
   :root {
-    color-scheme: light dark;
+    color-scheme: light;
     ${generateBareTierCssVariables(ClassicBrandColors)}
     ${generateSemanticTierCssVariables(ClassicSemanticColors)}
 
   }
 
   .dark-theme {
+    color-scheme: dark;
     ${generateSemanticTierCssVariables(ClassicSemanticColorsDark)}
   }
 
   @media (prefers-color-scheme: dark) {
     :root {
+      color-scheme: dark;
       ${generateSemanticTierCssVariables(ClassicSemanticColorsDark)}
     }
 
     .light-theme {
+      color-scheme: light;
       ${generateBareTierCssVariables(ClassicBrandColors)}
       ${generateSemanticTierCssVariables(ClassicSemanticColors)}
     }
@@ -37,21 +40,24 @@ export const ClassicColors = createGlobalStyle`
 
 export const ModernColors = createGlobalStyle`
   :root {
-    color-scheme: light dark;
+    color-scheme: light;
     ${generateBareTierCssVariables(ModernBrandColors)}
     ${generateSemanticTierCssVariables(ModernSemanticColors)}
   }
 
   .dark-theme {
+    color-scheme: dark;
     ${generateSemanticTierCssVariables(ModernSemanticColorsDark)}
   }
 
   @media (prefers-color-scheme: dark) {
     :root {
+      color-scheme: dark;
       ${generateSemanticTierCssVariables(ModernSemanticColorsDark)}
     }
 
     .light-theme {
+      color-scheme: light;
       ${generateBareTierCssVariables(ModernBrandColors)}
       ${generateSemanticTierCssVariables(ModernSemanticColors)}
     }