Tooltip popover theming (#118)

.storybook/index.css

@@ -1,7 +1,7 @@
 /* This is the global dassana stylesheet. It should match the global stylesheet in web-orchestrator. */
 
 @import '~normalize.css';
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
 
 html,
 body,

.storybook/preview.tsx

@@ -24,6 +24,16 @@ const { sideBySide, left, right } = LayoutTypes
 
 const { dark, light } = ThemeType
 
+// Storybook theme needs an extra "type" property to conditionally render a dark or light themed story for Popover and Tooltip components.
+export interface SbTheme extends Theme {
+	type: ThemeType.dark | ThemeType.light
+}
+
+const sbThemes = {
+	[dark]: { ...themes[dark], type: dark },
+	[light]: { ...themes[light], type: light }
+}
+
 const useStyles = createUseStyles({
 	storyContainer: {
 		display: 'flex'
@@ -70,6 +80,7 @@ const StoryWrapper: FC<StoryWrapperProps> = ({
 	const classes = useStyles()
 	const wrapperClasses = cn({
 		dark,
+		light: !dark,
 		[classes.storyWrapper]: true
 	})
 
@@ -107,12 +118,12 @@ const ThemeDecorator = (
 		case sideBySide: {
 			return (
 				<div className={classes.storyContainer}>
-					<ThemeProvider theme={themes[light]}>
+					<ThemeProvider theme={sbThemes[light]}>
 						<ThemedBlock side={left}>
 							<ComponentStory />
 						</ThemedBlock>
 					</ThemeProvider>
-					<ThemeProvider theme={themes[dark]}>
+					<ThemeProvider theme={sbThemes[dark]}>
 						<ThemedBlock side={right}>
 							<ComponentStory />
 						</ThemedBlock>
@@ -123,7 +134,7 @@ const ThemeDecorator = (
 
 		default: {
 			return (
-				<ThemeProvider theme={themes[theme]}>
+				<ThemeProvider theme={sbThemes[theme as ThemeType]}>
 					<ThemedCanvasBg />
 					<StoryWrapper dark={theme === dark}>
 						<ComponentStory />