frontend: leverage theme palette for misc components (#2861)

This PR updates the following components to use the current theme colors, additionally, updates matching colors across the whole app to mantain consistency. _before/after screenshots_ **Accordion** ![image](https://github.com/lyft/clutch/assets/5430603/44afebfd-bf9d-4648-a312-faf9547a5a62) **Button** Button Group (Primary) ![image](https://github.com/lyft/clutch/assets/5430603/c8d9314a-eb05-4841-bff2-b72aee11c634) Button Group (Destructive) ![image](https://github.com/lyft/clutch/assets/5430603/941db941-5ad1-466b-b0a2-ab83c994211b) Icon Button ![image](https://github.com/lyft/clutch/assets/5430603/9478c950-eb65-41b2-b93d-da65cb570417) **Card** Normal ![image](https://github.com/lyft/clutch/assets/5430603/cedde387-8c7f-4ae3-981b-e6fde37652b2) Hover ![image](https://github.com/lyft/clutch/assets/5430603/d5a1dfaa-c122-4470-848c-14ae840e161a) **Chip** ![image](https://github.com/lyft/clutch/assets/5430603/fb319611-b6c1-42c2-b761-d839f056687b) ![image](https://github.com/lyft/clutch/assets/5430603/a98809b8-5f60-4e09-bb50-df5a3f4a308b) ![image](https://github.com/lyft/clutch/assets/5430603/f7104917-63b8-4870-9fc0-af1f67229587) ![image](https://github.com/lyft/clutch/assets/5430603/9c96f6c7-a880-4b5a-ab96-fcd0d9337cfe) ![image](https://github.com/lyft/clutch/assets/5430603/7c1fda61-e64a-4718-8b1c-d62575fdca67) ![image](https://github.com/lyft/clutch/assets/5430603/ba167ac9-b7ce-4aa6-acf3-d7ac74f5422f) ![image](https://github.com/lyft/clutch/assets/5430603/0a773fb1-4125-427b-bab1-287614d77752) **Confirmation** ![image](https://github.com/lyft/clutch/assets/5430603/8dd53187-0155-408a-a303-17d78682cc21) **Tab** ![image](https://github.com/lyft/clutch/assets/5430603/9fbb0601-51ed-426b-8034-46256bb99f64) ![image](https://github.com/lyft/clutch/assets/5430603/17530d87-1e10-4f70-b442-f16cebf941ce) ![image](https://github.com/lyft/clutch/assets/5430603/00419a53-4cea-4266-aa47-b3c6f9d0534b) ![image](https://github.com/lyft/clutch/assets/5430603/fff90529-5d63-44c0-a36b-f0b794c5bad3) _Note_ This PR mainly aims to update ungrouped components within frontend/packages/core/src/, while updating all instances of widespread colors as to avoid possible mismatches from working them on a directory basis. Odd instances of hardcoded colors elsewhere will be addressed in future PRs. ### Testing Performed manual, unit testing
lyft · Dec 13, 2023 · f464530 · f464530
1 parent 4f17a8d
commit f464530
Show file tree

Hide file tree

Showing 46 changed files with 445 additions and 407 deletions.
diff --git a/frontend/packages/core/src/Table/accordion-table.tsx b/frontend/packages/core/src/Table/accordion-table.tsx
@@ -8,10 +8,10 @@ import styled from "../styled";
 import type { TableRowProps } from "./table";
 import { TableCell } from "./table";
 
-const IconButton = styled(MuiIconButton)({
+const IconButton = styled(MuiIconButton)(({ theme }) => ({
   padding: "0",
-  color: "#0D1030",
-});
+  color: theme.palette.secondary[900],
+}));
 
 const ChevronRight = styled(ChevronRightIcon)<{ $disabled: boolean }>(props => ({ theme }) => ({
   color: props?.$disabled ? theme.palette.secondary[200] : "unset",

diff --git a/frontend/packages/core/src/Table/metadata-table.tsx b/frontend/packages/core/src/Table/metadata-table.tsx
@@ -5,6 +5,7 @@ import { DevTool } from "@hookform/devtools";
 import { yupResolver } from "@hookform/resolvers/yup";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import {
+  alpha,
   Grid as MuiGrid,
   StandardTextFieldProps,
   Table as MuiTable,
@@ -55,11 +56,11 @@ const TableContainer = styled(MuiTableContainer)<{
   })
 );
 
-const Table = styled(MuiTable)({
-  border: "1px solid rgba(13, 16, 48, 0.12)",
+const Table = styled(MuiTable)(({ theme }) => ({
+  border: `1px solid ${alpha(theme.palette.secondary[900], 0.12)}`,
   borderRadius: "4px",
   borderCollapse: "unset",
-});
+}));
 
 const TableBody = styled(MuiTableBody)({
   "tr:first-of-type > td:first-of-type": {
@@ -79,13 +80,13 @@ const TableBody = styled(MuiTableBody)({
   },
 });
 
-const TableCell = styled(MuiTableCell)({
-  color: "#0D1030",
+const TableCell = styled(MuiTableCell)(({ theme }) => ({
+  color: theme.palette.secondary[900],
   fontSize: "14px",
   fontWeight: "normal",
   height: "48px",
   padding: "8px 16px",
-});
+}));
 
 const Grid = styled(MuiGrid)({
   display: "flex",
@@ -107,11 +108,11 @@ const Grid = styled(MuiGrid)({
   },
 });
 
-const KeyCellContainer = styled(TableCell)({
+const KeyCellContainer = styled(TableCell)(({ theme }) => ({
   width: "45%",
-  background: "rgba(13, 16, 48, 0.03)",
+  background: alpha(theme.palette.secondary[900], 0.03),
   fontWeight: 500,
-});
+}));
 
 interface KeyCellProps {
   data: IdentifiableRowData;

diff --git a/frontend/packages/core/src/Table/table.tsx b/frontend/packages/core/src/Table/table.tsx
@@ -53,22 +53,22 @@ const StyledTableBody = styled(MuiTableBody)({
   display: "contents",
 });
 
-const StyledTableHeadRow = styled(MuiTableRow)({
+const StyledTableHeadRow = styled(MuiTableRow)(({ theme }) => ({
   display: "contents",
-  backgroundColor: "#D7DAF6",
-});
+  backgroundColor: theme.palette.primary[300],
+}));
 
 const StyledTableRow = styled(MuiTableRow)<{
   $responsive?: TableRowProps["responsive"];
 }>(
-  {
+  ({ theme }) => ({
     ":nth-of-type(even)": {
-      background: "#F8F8F9",
+      background: theme.palette.secondary[50],
     },
     ":hover": {
-      background: "#EBEDFB",
+      background: theme.palette.primary[200],
     },
-  },
+  }),
   props => ({
     display: props.$responsive ? "contents" : "",
   })
@@ -79,15 +79,15 @@ const StyledTableCell = styled(MuiTableCell)<{
   $responsive?: TableCellProps["responsive"];
   $action?: TableCellProps["action"];
 }>(
-  {
+  ({ theme }) => ({
     alignItems: "center",
     fontSize: "14px",
     padding: "15px 16px",
-    color: "#0D1030",
+    color: theme.palette.secondary[900],
     overflow: "hidden",
     background: "inherit",
     minHeight: "100%",
-  },
+  }),
   props => ({ theme }) => ({
     borderBottom: props?.$border ? `1px solid ${theme.palette.secondary[200]}` : "0",
     display: props.$responsive ? "flex" : "",

diff --git a/frontend/packages/core/src/accordion.tsx b/frontend/packages/core/src/accordion.tsx
@@ -8,11 +8,12 @@ import {
   AccordionActions as MuiAccordionActions,
   AccordionDetails as MuiAccordionDetails,
   AccordionSummary as MuiAccordionSummary,
+  alpha,
   Divider as MuiDivider,
   useControlled,
 } from "@mui/material";
 
-const StyledAccordion = styled(MuiAccordion)({
+const StyledAccordion = styled(MuiAccordion)(({ theme }) => ({
   borderRadius: "4px",
   boxShadow: "none",
   border: "1px solid transparent",
@@ -21,16 +22,16 @@ const StyledAccordion = styled(MuiAccordion)({
   overflowWrap: "anywhere",
 
   "&.Mui-expanded": {
-    boxShadow: "0px 4px 6px rgba(53, 72, 212, 0.2)",
-    borderColor: "rgba(13, 16, 48, 0.12)",
+    boxShadow: `0px 4px 6px ${alpha(theme.palette.primary[600], 0.2)}`,
+    borderColor: alpha(theme.palette.secondary[900], 0.12),
   },
 
   ".MuiIconButton-root": {
-    color: "rgba(13, 16, 48, 0.38)",
+    color: alpha(theme.palette.secondary[900], 0.38),
   },
 
   ".MuiIconButton-root.Mui-expanded": {
-    color: "rgba(13, 16, 48, 0.6)",
+    color: alpha(theme.palette.secondary[900], 0.6),
   },
 
   ".MuiAccordionDetails-root": {
@@ -45,7 +46,7 @@ const StyledAccordion = styled(MuiAccordion)({
   "&:before": {
     display: "none",
   },
-});
+}));
 
 const AccordionSummaryBase = ({ children, collapsible, expanded, ...props }) => {
   return (
@@ -58,18 +59,18 @@ const AccordionSummaryBase = ({ children, collapsible, expanded, ...props }) =>
   );
 };
 
-export const StyledAccordionSummary = styled(AccordionSummaryBase)({
-  backgroundColor: "#fafafb",
+export const StyledAccordionSummary = styled(AccordionSummaryBase)(({ theme }) => ({
+  backgroundColor: theme.palette.secondary[50],
   borderRadius: "4px",
-  color: "#0d1030",
+  color: theme.palette.secondary[900],
   height: "48px",
 
   "&:hover": {
-    backgroundColor: "rgba(13, 16, 48, 0.03)",
+    backgroundColor: alpha(theme.palette.secondary[900], 0.03),
   },
 
   "&:active": {
-    backgroundColor: "rgba(13, 16, 48, 0.12)",
+    backgroundColor: alpha(theme.palette.secondary[900], 0.12),
   },
 
   ".MuiAccordionSummary-content": {
@@ -78,10 +79,10 @@ export const StyledAccordionSummary = styled(AccordionSummaryBase)({
   },
 
   "&.Mui-expanded": {
-    backgroundColor: "#e1e4f9",
+    backgroundColor: theme.palette.primary[200],
     minHeight: "48px",
   },
-});
+}));
 
 const StyledAccordionGroup = styled.div({
   width: "100%",

diff --git a/frontend/packages/core/src/button.tsx b/frontend/packages/core/src/button.tsx
@@ -1,15 +1,22 @@
 import * as React from "react";
+import styled from "@emotion/styled";
 import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
 import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
 import type {
   ButtonProps as MuiButtonProps,
   IconButtonProps as MuiIconButtonProps,
+  Theme,
+} from "@mui/material";
+import {
+  alpha,
+  Button as MuiButton,
+  Grid,
+  IconButton as MuiIconButton,
+  useTheme,
 } from "@mui/material";
-import { Button as MuiButton, Grid, IconButton as MuiIconButton, useTheme } from "@mui/material";
 
 import { Tooltip } from "./Feedback/tooltip";
 import type { GridJustification } from "./grid";
-import styled from "./styled";
 
 interface ButtonPalette {
   /** A palette of background colors used for the various button states. */
@@ -65,7 +72,10 @@ const BUTTON_SIZE_MAP = {
 
 export type ButtonSize = keyof typeof BUTTON_SIZE_MAP;
 
-const StyledButton = styled(MuiButton)<{ palette: ButtonPalette; size: ButtonSize }>(
+const StyledButton = styled(MuiButton)<{
+  palette: ButtonPalette;
+  size: ButtonSize;
+}>(
   {
     borderRadius: "4px",
     fontWeight: 500,
@@ -83,12 +93,12 @@ const StyledButton = styled(MuiButton)<{ palette: ButtonPalette; size: ButtonSiz
   })
 );
 
-const StyledBorderButton = styled(StyledButton)({
-  border: "1px solid #0D1030",
+const StyledBorderButton = styled(StyledButton)(({ theme }) => ({
+  border: `1px solid ${theme.palette.secondary[900]}`,
   "&.Mui-disabled": {
-    borderColor: "rgba(13, 16, 48, 0.1)",
+    borderColor: alpha(theme.palette.secondary[900], 0.1),
   },
-});
+}));
 
 /** Provides feedback to the user in regards to the action of the button. */
 type ButtonVariant = "neutral" | "primary" | "danger" | "destructive" | "secondary";
@@ -112,54 +122,54 @@ export type IconButtonSize = keyof typeof ICON_BUTTON_STYLE_MAP;
 export const ICON_BUTTON_VARIANTS = Object.keys(ICON_BUTTON_STYLE_MAP);
 
 /** A color palette from a @type ButtonPalette */
-const variantPalette = (variant: ButtonVariant, theme): ButtonPalette => {
+const variantPalette = (variant: ButtonVariant, theme: Theme): ButtonPalette => {
   const COLORS = {
     neutral: {
       background: {
         primary: "transparent",
         hover: theme.palette.secondary[200],
-        active: "#CFD3D7",
-        disabled: "#FFFFFF",
+        active: theme.palette.secondary[300],
+        disabled: theme.palette.contrastColor,
       },
       font: {
-        primary: "#0D1030",
-        disabled: "#0D1030",
+        primary: theme.palette.secondary[900],
+        disabled: theme.palette.secondary[900],
       },
     },
     primary: {
       background: {
-        primary: "#3548D4",
-        hover: theme.palette.primary[600],
-        active: theme.palette.primary[700],
+        primary: theme.palette.primary[600],
+        hover: theme.palette.primary[700],
+        active: theme.palette.primary[600],
         disabled: theme.palette.secondary[200],
       },
       font: {
-        primary: "#FFFFFF",
-        disabled: "rgba(13, 16, 48, 0.38)",
+        primary: theme.palette.contrastColor,
+        disabled: alpha(theme.palette.secondary[900], 0.38),
       },
     },
     danger: {
       background: {
         primary: theme.palette.error[600],
-        hover: "#BA2E12",
-        active: "#AB2A10",
-        disabled: "#F1B3A6",
+        hover: theme.palette.error[700],
+        active: theme.palette.error[800],
+        disabled: theme.palette.error[200],
       },
       font: {
-        primary: "#FFFFFF",
-        disabled: "#FFFFFF",
+        primary: theme.palette.contrastColor,
+        disabled: theme.palette.contrastColor,
       },
     },
     secondary: {
       background: {
         primary: "transparent",
-        hover: "#F5F6FD",
-        active: "#D7DAF6",
+        hover: theme.palette.primary[100],
+        active: theme.palette.primary[300],
         disabled: "transparent",
       },
       font: {
-        primary: "#3548D4",
-        disabled: "#0D1030",
+        primary: theme.palette.primary[600],
+        disabled: theme.palette.secondary[900],
       },
     },
   } as { [key: string]: ButtonPalette };
@@ -189,7 +199,7 @@ export interface ButtonProps
 const Button = ({ text, variant = "primary", size = "medium", ...props }: ButtonProps) => {
   const theme = useTheme();
   const palette = variantPalette(variant, theme);
-  const ButtonVariant = variant === "neutral" ? StyledBorderButton : StyledButton;
+  const ButtonVariant = (variant === "neutral" ? StyledBorderButton : StyledButton) as any;
 
   return (
     <ButtonVariant variant="contained" disableElevation palette={palette} size={size} {...props}>
@@ -278,12 +288,12 @@ const ButtonGroup = ({ children, justify = "flex-end", border = "top" }: ButtonG
   </ButtonGroupContainer>
 );
 
-const StyledClipboardIconButton = styled(MuiIconButton)({
-  color: "#000000",
+const StyledClipboardIconButton = styled(MuiIconButton)(({ theme }) => ({
+  color: theme.palette.getContrastText(theme.palette.contrastColor),
   ":hover": {
     backgroundColor: "transparent",
   },
-});
+}));
 
 export interface ClipboardButtonProps {
   /** Case-sensitive text to be copied. */