fix typing on styled components v6 theme and props (#649)

Author: interim17

package-lock.json

@@ -41,7 +41,6 @@
         "@types/react-plotly.js": "^2.2.4",
         "@types/react-router-dom": "^5.1.5",
         "@types/sinon": "7.0.6",
-        "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^5.42.1",
         "@typescript-eslint/parser": "^5.42.1",

package.json

@@ -8,6 +8,7 @@ import {
     TOOLTIP_DELAY,
 } from "../../constants";
 import { ButtonClass, TooltipPlacement } from "../../constants/interfaces";
+import { ThemedProps } from "../../styles/theme/theme";
 
 interface CustomButtonProps extends Omit<AntButtonProps, "type" | "variant"> {
     variant?: ButtonClass;
@@ -26,7 +27,7 @@ interface TooltipButtonProps extends CustomButtonProps {
     tooltipPlacement?: TooltipPlacement;
 }
 
-const baseStyles = css`
+const baseStyles = css<ThemedProps>`
     font-family: ${(props) => props.theme.typography};
     border-radius: 3px;
     height: 32px;
@@ -46,7 +47,7 @@ const baseStyles = css`
 const generateButtonStyles = (
     variant: "primary" | "secondary",
     theme: "light" | "dark"
-) => css`
+) => css<ThemedProps>`
     ${({
         theme: {
             colors: { button },
@@ -84,7 +85,7 @@ const generateButtonStyles = (
     }}
 `;
 
-const actionStyles = css`
+const actionStyles = css<ThemedProps>`
     ${({
         theme: {
             colors: {
@@ -115,15 +116,15 @@ const actionStyles = css`
     `}
 `;
 
-const variantStyles: Record<ButtonClass, RuleSet<object>> = {
+const variantStyles: Record<ButtonClass, RuleSet<ThemedProps>> = {
     [ButtonClass.LightPrimary]: generateButtonStyles("primary", "light"),
     [ButtonClass.LightSecondary]: generateButtonStyles("secondary", "light"),
     [ButtonClass.DarkPrimary]: generateButtonStyles("primary", "dark"),
     [ButtonClass.DarkSecondary]: generateButtonStyles("secondary", "dark"),
     [ButtonClass.Action]: actionStyles,
 };
 
-const StyledButton = styled(AntButton)<CustomButtonProps>`
+const StyledButton = styled(AntButton)<CustomButtonProps & ThemedProps>`
     ${baseStyles}
     ${({ variant = ButtonClass.LightPrimary }) => variantStyles[variant]}
 `;

src/components/CustomButton/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Link, LinkProps } from "react-router-dom";
 import styled, { css } from "styled-components";
 import { ArrowRight } from "../Icons";
+import { ThemedProps, ThemeType } from "../../styles/theme/theme";
 
 // Dropdown items can be of a few component
 // varieties, including buttons, router links, and
@@ -10,7 +11,7 @@ import { ArrowRight } from "../Icons";
 // for semantically explicit usage in dropdowns.
 
 // Common styles
-const baseStyles = css`
+const baseStyles = css<{ theme: ThemeType }>`
     font-family: ${(props) => props.theme.typography};
     background: none;
     border: 2px solid ${({ theme }) => theme.colors.dropdown.background};
@@ -62,17 +63,17 @@ const contentStyles = css`
 `;
 
 // Styled components
-const StyledDropdownButton = styled.button`
+const StyledDropdownButton = styled.button<ThemedProps>`
     ${baseStyles}
     ${contentStyles}
 `;
 
-const StyledRouterLink = styled(Link)`
+const StyledRouterLink = styled(Link)<ThemedProps>`
     ${baseStyles}
     ${contentStyles}
 `;
 
-const StyledExternalLink = styled.a`
+const StyledExternalLink = styled.a<ThemedProps>`
     ${baseStyles}
     ${contentStyles}
 `;

src/components/CustomDropdown/DropdownMenuItems.tsx

@@ -92,6 +92,7 @@ export const componentColors = {
             light: {
                 background: baseColors.dark.five,
                 text: baseColors.gray.six,
+                border: baseColors.dark.five,
                 hover: {
                     background: semanticColors.darkActiveBg,
                     text: semanticColors.primaryPurple,
@@ -113,6 +114,7 @@ export const componentColors = {
             dark: {
                 background: semanticColors.primaryPurple,
                 text: baseColors.dark.three,
+                border: semanticColors.primaryPurple,
                 hover: {
                     background: semanticColors.activePurple,
                     text: semanticColors.lightBgActiveText,
@@ -139,6 +141,7 @@ export const componentColors = {
             light: {
                 background: semanticColors.transparentBg,
                 text: baseColors.dark.five,
+                border: semanticColors.transparentBg,
                 hover: {
                     background: baseColors.dark.one,
                     text: semanticColors.primaryPurple,
@@ -188,6 +191,7 @@ export const componentColors = {
             text: semanticColors.primaryPurple,
             hover: {
                 text: semanticColors.activePurple,
+                background: semanticColors.lightPurpleBg,
             },
             active: {
                 text: semanticColors.activePurple,

src/styles/theme/colors.ts

@@ -1,5 +1,4 @@
 import { ThemeConfig } from "antd";
-import { DefaultTheme } from "styled-components";
 import { themeColors } from "./colors";
 
 const typographyToken = {
@@ -10,10 +9,13 @@ const typographyToken = {
 // make variables available as props in
 // .styled components by passing this into
 // the ThemeProvider in the StyleProvider
-export const styledTheme: DefaultTheme = {
+export const styledTheme = {
     colors: themeColors,
     typography: typographyToken.fontFamily,
-};
+} as const;
+
+export type ThemeType = typeof styledTheme;
+export type ThemedProps<T = unknown> = T & { theme: ThemeType };
 
 export const antdTheme: ThemeConfig = {
     token: {