Merge pull request #58 from storybookjs/improve-dark-mode

Improve dark mode
storybookjs · Jun 16, 2023 · 917f09a · 917f09a
2 parents e844070 + cc0f34a
commit 917f09a
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -19,7 +19,7 @@ const StyledButton = styled.button<{ variant: ButtonProps["variant"] }>`
   padding: 0 0.75rem;
   background: ${({ theme, variant }) => {
     if (variant === "primary") return theme.color.secondary;
-    if (variant === "secondary") return theme.background.app;
+    if (variant === "secondary") return theme.color.lighter;
     if (variant === "outline") return "transparent";
     return theme.color.secondary;
   }};
@@ -63,13 +63,13 @@ const StyledButton = styled.button<{ variant: ButtonProps["variant"] }>`
   }
 `;
 
-export const Button: FC<ButtonProps> = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, onClick, variant = 'primary', ...rest }, ref) => {
-    return (
-      <StyledButton ref={ref} onClick={onClick} variant={variant} {...rest}>
-        {children}
-      </StyledButton>
-    );
-  }
-);
-
+export const Button: FC<ButtonProps> = forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(({ children, onClick, variant = "primary", ...rest }, ref) => {
+  return (
+    <StyledButton ref={ref} onClick={onClick} variant={variant} {...rest}>
+      {children}
+    </StyledButton>
+  );
+});
diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx
@@ -22,6 +22,11 @@ export const Container = styled.div<{ width: number }>`
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 6px;
+  border-left: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2;
+  border-bottom: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2;
+  border-top: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2;
+  border-radius: 6px 0 0 6px;
+  overflow: hidden;
 
   && {
     pre {

diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
@@ -8,7 +8,7 @@ import { UPDATE_STORY_ARGS } from "@storybook/core-events";
 import { useTheme } from "@storybook/theming";
 import { Tooltip, TooltipProps } from "./Tooltip";
 
-type GuidedTourStep = TooltipProps['step'];
+type GuidedTourStep = TooltipProps["step"];
 
 export function GuidedTour({
   api,
@@ -35,11 +35,13 @@ export function GuidedTour({
         {
           target: "#example-button--warning",
           title: "Congratulations!",
-          content:
+          content: (
             <>
-              You just created your first story. You nailed the basics. <br/>
-              Continue setting up your project and start writing stories for your components.
-            </>,
+              You just created your first story. You nailed the basics. <br />
+              Continue setting up your project and start writing stories for
+              your components.
+            </>
+          ),
           placement: "right",
           disableOverlay: true,
           disableBeacon: true,
@@ -100,8 +102,8 @@ export function GuidedTour({
           title: "Congratulations!",
           content: (
             <>
-              You've learned how to control your stories interactively.
-              Now let's explore how to write your first story.
+              You've learned how to control your stories interactively. Now
+              let's explore how to write your first story.
               <Confetti
                 numberOfPieces={800}
                 recycle={false}
@@ -137,7 +139,9 @@ export function GuidedTour({
             paddingLeft: 8,
             paddingTop: 8,
             filter:
-              "drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))",
+              theme.base === "light"
+                ? "drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"
+                : "drop-shadow(#fff5 0px 0px 0.5px) drop-shadow(#fff5 0px 0px 0.5px)",
           },
         },
       }}
@@ -152,7 +156,7 @@ export function GuidedTour({
         options: {
           zIndex: 10000,
           primaryColor: theme.color.secondary,
-          arrowColor: theme.background.content,
+          arrowColor: theme.base === "dark" ? "#292A2C" : theme.color.lightest,
         },
       }}
     />

diff --git a/src/features/GuidedTour/Tooltip.tsx b/src/features/GuidedTour/Tooltip.tsx
@@ -4,7 +4,9 @@ import { TooltipRenderProps } from "react-joyride";
 import { Button } from "../../components/Button/Button";
 
 const TooltipBody = styled.div`
-  background:  ${({ theme }) => theme.background.content};
+  background: ${({ theme }) => {
+    return theme.base === "dark" ? "#292A2C" : theme.color.lightest;
+  }};
   width: 260px;
   padding: 15px;
   border-radius: 5px;
@@ -37,7 +39,10 @@ const TooltipFooter = styled.div`
 `;
 
 export type TooltipProps = TooltipRenderProps & {
-  step: TooltipRenderProps["step"] & { hideNextButton?: boolean; onNextButtonClick?: () => void };
+  step: TooltipRenderProps["step"] & {
+    hideNextButton?: boolean;
+    onNextButtonClick?: () => void;
+  };
 };
 
 export const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => {
@@ -49,10 +54,16 @@ export const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => {
       </Wrapper>
       {!step.hideNextButton && (
         <TooltipFooter id="buttonNext">
-          <Button {...{
-            ...primaryProps,
-            ...(step.onNextButtonClick ? { onClick: step.onNextButtonClick } : {})
-          }}>Next</Button>
+          <Button
+            {...{
+              ...primaryProps,
+              ...(step.onNextButtonClick
+                ? { onClick: step.onNextButtonClick }
+                : {}),
+            }}
+          >
+            Next
+          </Button>
         </TooltipFooter>
       )}
     </TooltipBody>