Refactor connecting more of theme.js

client/src/components/dashboard/SettingsButton.jsx

@@ -38,9 +38,11 @@ export function SettingsButton() {
   const [canScrollRight, setCanScrollRight] = useState(false);
 
   // Pull the glass container styles for the dropdown and modal
-  const panelRecipe = useSlotRecipe({key: "glassPanel"});
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
-  const panelStyles = panelRecipe({layout: "dropdown"});
+  const popoverStyles = popoverRecipe();
-  const modalStyles = panelRecipe({layout: "popover"});
+
+  const dialogRecipe = useSlotRecipe({ key: "glassDialog" });
+  const dialogStyles = dialogRecipe();
 
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
@@ -130,7 +132,7 @@ export function SettingsButton() {
           </Menu.Trigger>
 
           <Menu.Positioner>
-            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
+            <Menu.Content css={popoverStyles.content} zIndex="dropdown" minW="200px">
               <Menu.Item
                 onClick={enterEditMode}
                 cursor="pointer"
@@ -168,12 +170,13 @@ export function SettingsButton() {
         {/* Soft blur can be added to the background behind the modal */}
         {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
         <Dialog.Positioner>
-          <Dialog.Content css={modalStyles.root}>
+          <Dialog.Content css={dialogStyles.content}>
-            <Dialog.Header>
+
+            <Dialog.Header css={dialogStyles.header}>
               <Dialog.Title>Widgets Shop</Dialog.Title>
             </Dialog.Header>
 
-            <Dialog.Body>
+            <Dialog.Body css={dialogStyles.body}>
               <Tabs.Root defaultValue={categories[0]} variant="unstyled">
                 {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
                 <Box>
@@ -246,7 +249,6 @@ export function SettingsButton() {
                                     h="24px"
                                     flexShrink={0}
                                     borderRadius="full"
-                                    // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
                                     fontWeight="black"
                                     fontSize="xs"
                                     bg='transparent'

client/src/theme.js

@@ -566,7 +566,7 @@ const config = defineConfig({
     semanticTokens: {
       colors: {
         text: { value: { base: "#000000", _dark: "#FFFFFF" } },
-        textInverted: { value: { base: "#FFFFFF", _dark: "#000000" } }, // Fixed: Properly inverted
+        textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
         MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
         titleColor: { value: { base: "gray.800", _dark: "#FFFFFF" } },
         iconColor: { value: { base: "gray.600", _dark: "gray.300" } }, // Fixed: Visible in dark mode