feat: Added box shadows to theme STC-831

src/components/Accordion/Accordion.tsx

@@ -33,12 +33,14 @@ export interface AccordionProps {
     | "text"
     | "success"
     | "warning"
+  className?: HTMLAttributes<HTMLDivElement>["className"]
 }
 
 const Accordion = ({
   children,
   initialOpenIndex,
   activeBackgroundColor = "secondary",
+  className,
 }: AccordionProps) => {
   const [openIndex, setOpenIndex] = useState<number | undefined>(
     initialOpenIndex
@@ -63,7 +65,7 @@ const Accordion = ({
       </AccordionContext.Provider>
     ))
 
-  return <div>{insertDivider(allItems)}</div>
+  return <div className={className}>{insertDivider(allItems)}</div>
 }
 
 export interface AccordionItemProps {

src/components/Autocomplete/Autocomplete.tsx

@@ -365,7 +365,7 @@ export default forwardRef(function Autocomplete<T>(
                 background: "#fff",
                 border: "1px solid #E8E8E9",
                 borderRadius: 4,
-                boxShadow: "0px 1px 12px rgba(0, 0, 0, 0.16)",
+                boxShadow: "main",
                 flexWrap: props.multiSelect ? "wrap" : undefined,
                 minWidth: containerRef.current?.getClientRects()[0].width,
                 outline: "0",

src/components/EditableField/ButtonControl/ButtonControl.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React, { MouseEvent, useMemo } from "react"
-import { get, ThemeUICSSObject } from "theme-ui"
+import { ThemeUICSSObject } from "theme-ui"
 import Button from "../../Button/Button"
 import Spinner from "../../Spinner/Spinner"
 
@@ -22,8 +22,7 @@ const ButtonControl = ({
   const buttonStyles: ThemeUICSSObject = useMemo(
     () => ({
       backgroundColor: "#FFF",
-      boxShadow: (theme) =>
-        `0px 1px 12px ${get(theme, "colors.text.alpha.85")}`,
+      boxShadow: "dark",
       borderRadius: 2,
 
       "&:hover": {

src/components/MobileModal/MobileModal.tsx

@@ -379,7 +379,7 @@ const MobileModal = ({
           borderBottomRightRadius: 0,
           borderStyle: `solid`,
           borderWidth: `1px`,
-          boxShadow: `0px 1px 12px rgba(0, 0, 0, 0.04)`,
+          boxShadow: "main",
           left: 0,
           height: !topSpacing ? `100vh` : `fit-content`,
           maxHeight: `calc(100vh - ${topSpacing}px)`,

src/components/Paper/Paper.tsx

@@ -20,8 +20,8 @@ const Paper = ({
   onClick,
 }: PaperProps) => {
   const boxShadow = useMemo(() => {
-    if (elevation === 1) return "0px 1px 12px rgba(0, 0, 0, 0.04);"
-    if (elevation >= 2) return "0px 1px 12px rgba(0, 0, 0, 0.16)"
+    if (elevation === 1) return "main"
+    if (elevation >= 2) return "dark"
 
     return "none"
   }, [elevation])

src/components/Popover/Popover.tsx

@@ -221,7 +221,7 @@ const Popover = ({
             outline: 0,
             transitionProperty: "transform,visibility,opacity",
             borderRadius,
-            boxShadow: "0px 1px 12px rgba(0, 0, 0, 0.16)",
+            boxShadow: "dark",
             ".tippy-content": {
               position: "relative",
               ...(noPadding

src/components/Snackbar/Snackbar.tsx

@@ -54,7 +54,7 @@ const Snackbar = ({ type, title, body, onClose }: SnackbarProps) => {
         padding: 3,
         width: "fit-content",
         backgroundColor: "text",
-        boxShadow: "0px 1px 4px rgba(0, 0, 0, 0.2)",
+        boxShadow: "dark",
         borderRadius: 3,
         color: "text.40",
       }}

src/components/SubNavigationMenu/SubNavigationMenu.tsx

@@ -225,7 +225,7 @@ const SubNavigationMenu = ({
           }}
           sx={{
             backgroundColor: "#ffffff",
-            boxShadow: "0px 1px 12px rgba(29, 29, 29, 0.16)",
+            boxShadow: "dark",
             padding: "6px",
             position: "absolute",
             right: "-14px",

src/components/Tabs/Tabs.tsx

@@ -279,7 +279,7 @@ const TabPanel = ({ children, index }: TabPanelProps) => {
             border: "1px solid",
             borderColor: "text.90",
             backgroundColor: "text.95",
-            boxShadow: isOpen ? "0px 1px 12px rgba(0, 0, 0, 0.04)" : "none",
+            boxShadow: isOpen ? "main" : "none",
           }}
         >
           {children}

src/theme/theme.ts

@@ -97,6 +97,10 @@ export const theme: Theme = {
     body: 20 / 14,
   },
 
+  shadows: {
+    main: `0px 1px 12px ${colorPalette.text.alpha["95"]}`,
+    dark: `0px 1px 12px ${colorPalette.text.alpha["85"]}`,
+  },
   text: {
     default: {
       fontFamily: "body",