Remix projects: don't use colors directly (#4936)

* use sprinkles instead of colors * don't export * use backgroundColor
concrete-utopia · Feb 22, 2024 · e8f08a5 · e8f08a5
1 parent 6e3be6b
commit e8f08a5
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 73 deletions.
diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -1,14 +1,9 @@
-import {
-  Content as DropdownMenuContent,
-  Portal as DropdownMenuPortal,
-  Item as DropdownMenuItem,
-  Separator as DropdownMenuSeparator,
-} from '@radix-ui/react-dropdown-menu'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useFetcher } from '@remix-run/react'
 import React from 'react'
 import { useProjectsStore } from '../store'
 import { contextMenuDropdown, contextMenuItem } from '../styles/contextMenu.css'
-import { colors } from '../styles/sprinkles.css'
+import { sprinkles } from '../styles/sprinkles.css'
 import { ProjectWithoutContent } from '../types'
 import { assertNever } from '../util/assertNever'
 import { projectEditorLink } from '../util/links'
@@ -121,8 +116,8 @@ export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWit
   }, [selectedCategory])
 
   return (
-    <DropdownMenuPortal>
-      <DropdownMenuContent
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
         className={contextMenuDropdown()}
         style={{
           right: 75,
@@ -132,24 +127,25 @@ export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWit
         {menuEntries.map((entry, index) => {
           if (entry === 'separator') {
             return (
-              <DropdownMenuSeparator
+              <DropdownMenu.Separator
                 key={`separator-${index}`}
-                style={{ backgroundColor: colors.separator, height: 1 }}
+                className={sprinkles({ backgroundColor: 'separator' })}
+                style={{ height: 1 }}
               />
             )
           }
           return (
-            <DropdownMenuItem
+            <DropdownMenu.Item
               key={`entry-${index}`}
               onClick={() => entry.onClick(project)}
               className={contextMenuItem()}
             >
               {entry.text}
-            </DropdownMenuItem>
+            </DropdownMenu.Item>
           )
         })}
-      </DropdownMenuContent>
-    </DropdownMenuPortal>
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
   )
 })
 ProjectContextMenu.displayName = 'ProjectContextMenu'
diff --git a/utopia-remix/app/components/sortProjectsContextMenu.tsx b/utopia-remix/app/components/sortProjectsContextMenu.tsx
@@ -1,15 +1,8 @@
-import {
-  Portal as DropdownMenuPortal,
-  Content as DropdownMenuContent,
-  Label as DropdownMenuLabel,
-  Separator as DropdownMenuSeparator,
-  CheckboxItem as DropdownMenuCheckboxItem,
-  ItemIndicator as DropdownMenuItemIndicator,
-} from '@radix-ui/react-dropdown-menu'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import React from 'react'
 import { useProjectsStore } from '../store'
 import { contextMenuDropdown, contextMenuItem } from '../styles/contextMenu.css'
-import { colors } from '../styles/sprinkles.css'
+import { sprinkles } from '../styles/sprinkles.css'
 import { CheckIcon } from '@radix-ui/react-icons'
 
 export const SortingContextMenu = React.memo(() => {
@@ -19,80 +12,83 @@ export const SortingContextMenu = React.memo(() => {
   const setSortAscending = useProjectsStore((store) => store.setSortAscending)
 
   return (
-    <DropdownMenuPortal>
-      <DropdownMenuContent
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
         className={contextMenuDropdown()}
         style={{
           right: 30,
         }}
         sideOffset={5}
       >
-        <DropdownMenuLabel style={{ color: 'grey', padding: 5 }}>Sort by</DropdownMenuLabel>
-        <DropdownMenuCheckboxItem
+        <DropdownMenu.Label style={{ color: 'grey', padding: 5 }}>Sort by</DropdownMenu.Label>
+        <DropdownMenu.CheckboxItem
           className={contextMenuItem()}
           checked={sortCriteria === 'title'}
           onCheckedChange={() => setSortCriteria('title')}
         >
           <div style={{ width: 20 }}>
-            <DropdownMenuItemIndicator className='DropdownMenuItemIndicator'>
+            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
               <CheckIcon />
-            </DropdownMenuItemIndicator>
+            </DropdownMenu.ItemIndicator>
           </div>
           Alphabetical
-        </DropdownMenuCheckboxItem>
+        </DropdownMenu.CheckboxItem>
 
-        <DropdownMenuCheckboxItem
+        <DropdownMenu.CheckboxItem
           className={contextMenuItem()}
           checked={sortCriteria === 'dateCreated'}
           onCheckedChange={() => setSortCriteria('dateCreated')}
         >
           <div style={{ width: 20 }}>
-            <DropdownMenuItemIndicator className='DropdownMenuItemIndicator'>
+            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
               <CheckIcon />
-            </DropdownMenuItemIndicator>
+            </DropdownMenu.ItemIndicator>
           </div>
           Date Created
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem
           className={contextMenuItem()}
           checked={sortCriteria === 'dateModified'}
           onCheckedChange={() => setSortCriteria('dateModified')}
         >
           <div style={{ width: 20 }}>
-            <DropdownMenuItemIndicator className='DropdownMenuItemIndicator'>
+            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
               <CheckIcon />
-            </DropdownMenuItemIndicator>
+            </DropdownMenu.ItemIndicator>
           </div>
           Date Modified
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator style={{ backgroundColor: colors.separator, height: 1 }} />
-        <DropdownMenuLabel style={{ color: 'grey', padding: 5 }}>Order</DropdownMenuLabel>
-        <DropdownMenuCheckboxItem
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.Separator
+          className={sprinkles({ backgroundColor: 'separator' })}
+          style={{ height: 1 }}
+        />
+        <DropdownMenu.Label style={{ color: 'grey', padding: 5 }}>Order</DropdownMenu.Label>
+        <DropdownMenu.CheckboxItem
           className={contextMenuItem()}
           checked={sortAscending}
           onCheckedChange={() => setSortAscending(true)}
         >
           <div style={{ width: 20 }}>
-            <DropdownMenuItemIndicator className='DropdownMenuItemIndicator'>
+            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
               <CheckIcon />
-            </DropdownMenuItemIndicator>
+            </DropdownMenu.ItemIndicator>
           </div>
           Ascending
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem
           className={contextMenuItem()}
           checked={!sortAscending}
           onCheckedChange={() => setSortAscending(false)}
         >
           <div style={{ width: 20 }}>
-            <DropdownMenuItemIndicator className='DropdownMenuItemIndicator'>
+            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
               <CheckIcon />
-            </DropdownMenuItemIndicator>
+            </DropdownMenu.ItemIndicator>
           </div>
           Descending
-        </DropdownMenuCheckboxItem>
-      </DropdownMenuContent>
-    </DropdownMenuPortal>
+        </DropdownMenu.CheckboxItem>
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
   )
 })
 SortingContextMenu.displayName = 'ProjectContextMenu'
diff --git a/utopia-remix/app/routes/projects.tsx b/utopia-remix/app/routes/projects.tsx
@@ -1,13 +1,10 @@
-import {
-  Root as DropdownMenuRoot,
-  Trigger as DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+import React from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { LoaderFunctionArgs, json } from '@remix-run/node'
 import { useFetcher, useLoaderData } from '@remix-run/react'
 import moment from 'moment'
 import { UserDetails } from 'prisma-client'
-import React from 'react'
 import { ProjectContextMenu } from '../components/projectActionContextMenu'
 import { SortingContextMenu } from '../components/sortProjectsContextMenu'
 import { useIsDarkMode } from '../hooks/useIsDarkMode'
@@ -17,7 +14,7 @@ import { useProjectsStore } from '../store'
 import { button } from '../styles/button.css'
 import { newProjectButton } from '../styles/newProjectButton.css'
 import { projectCategoryButton, userName } from '../styles/sidebarComponents.css'
-import { colors, sprinkles } from '../styles/sprinkles.css'
+import { sprinkles } from '../styles/sprinkles.css'
 import { Collaborator, CollaboratorsByProject, ProjectWithoutContent } from '../types'
 import { requireUser } from '../util/api.server'
 import { assertNever } from '../util/assertNever'
@@ -380,8 +377,8 @@ const ProjectsHeader = React.memo(({ projects }: { projects: ProjectWithoutConte
           <CategoryActions projects={projects} />
           {when(
             projects.length > 1,
-            <DropdownMenuRoot>
-              <DropdownMenuTrigger asChild>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
                 <div
                   className={button()}
                   style={{
@@ -392,9 +389,9 @@ const ProjectsHeader = React.memo(({ projects }: { projects: ProjectWithoutConte
                   <div>{convertToTitleCase(sortCriteria)} </div>
                   <div>{sortAscending ? '↑' : '↓'}</div>
                 </div>
-              </DropdownMenuTrigger>
+              </DropdownMenu.Trigger>
               <SortingContextMenu />
-            </DropdownMenuRoot>,
+            </DropdownMenu.Root>,
           )}
         </div>,
       )}
@@ -538,10 +535,8 @@ const ProjectCard = React.memo(
                     borderRadius: '100%',
                     width: 24,
                     height: 24,
-                    backgroundColor: colors.primary,
                     backgroundImage: `url("${collaborator.avatar}")`,
                     backgroundSize: 'cover',
-                    color: colors.white,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -551,7 +546,11 @@ const ProjectCard = React.memo(
                     filter: project.deleted === true ? 'grayscale(1)' : undefined,
                   }}
                   title={collaborator.name}
-                  className={sprinkles({ boxShadow: 'shadow' })}
+                  className={sprinkles({
+                    boxShadow: 'shadow',
+                    color: 'white',
+                    backgroundColor: 'primary',
+                  })}
                 >
                   {when(collaborator.avatar === '', multiplayerInitialsFromName(collaborator.name))}
                 </div>
@@ -574,12 +573,12 @@ const ProjectCardActions = React.memo(({ project }: { project: ProjectWithoutCon
         <div>{moment(project.modified_at).fromNow()}</div>
       </div>
       <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-        <DropdownMenuRoot>
-          <DropdownMenuTrigger asChild>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
             <DotsHorizontalIcon className={button()} />
-          </DropdownMenuTrigger>
+          </DropdownMenu.Trigger>
           <ProjectContextMenu project={project} />
-        </DropdownMenuRoot>
+        </DropdownMenu.Root>
       </div>
     </div>
   )

diff --git a/utopia-remix/app/styles/contextMenu.css.ts b/utopia-remix/app/styles/contextMenu.css.ts
@@ -28,11 +28,10 @@ export const contextMenuDropdown = recipe({
   base: [
     sprinkles({
       borderRadius: 'small',
-      background: 'white',
-      color: 'lightModeBlack'
+      backgroundColor: 'white',
+      color: 'lightModeBlack',
     }),
     {
-
       padding: 4,
       boxShadow: '2px 3px 4px #00000030',
       border: '1px solid #ccc',

diff --git a/utopia-remix/app/styles/sprinkles.css.ts b/utopia-remix/app/styles/sprinkles.css.ts
@@ -18,7 +18,7 @@ const colorProperties = defineProperties({
   defaultCondition: 'lightMode',
   properties: {
     color: colors,
-    background: colors,
+    backgroundColor: colors,
   },
 })
 

diff --git a/utopia-remix/app/styles/styles.css.ts b/utopia-remix/app/styles/styles.css.ts
@@ -8,7 +8,7 @@ export const styles = {
       fontSize: '11px',
     },
     sprinkles({
-      background: {
+      backgroundColor: {
         lightMode: 'white',
         darkMode: 'darkModeBlack',
       },