experimental: Commands UI design tweaks

packages/design-system/src/components/command.tsx

@@ -30,23 +30,23 @@ import { Button } from "./button";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Kbd } from "./kbd";
 
-const panelWidth = "400px";
-const itemHeight = "32px";
+const panelWidth = 400;
+const itemHeight = 32;
 const inputBorderBottomSize = "--command-input-border-bottom-width";
 
 const StyledCommand = styled(CommandPrimitive, {
   boxSizing: "border-box",
   width: panelWidth,
-  borderRadius: theme.borderRadius[4],
   boxShadow: theme.shadows.menuDropShadow,
   backgroundColor: theme.colors.backgroundControls,
   border: `1px solid ${theme.colors.borderMain}`,
+  borderRadius: theme.borderRadius[7],
   // clip selected item background
   overflow: "clip",
   // remove input border bottom when no command matches
-  [inputBorderBottomSize]: "0px",
+  [inputBorderBottomSize]: 0,
   "&:has([cmdk-group]:not([hidden]))": {
-    [inputBorderBottomSize]: "1px",
+    [inputBorderBottomSize]: 1,
   },
 });
 
@@ -101,8 +101,8 @@ export const Command = (props: CommandProps) => {
 
 const CommandDialogContent = styled(DialogContent, {
   position: "absolute",
-  top: 140,
-  left: `calc(50% - ${panelWidth} / 2)`,
+  top: "20%",
+  left: `calc(50% - ${panelWidth / 2}px)`,
   width: panelWidth,
 });
 
@@ -128,8 +128,8 @@ export const CommandDialog = ({
 
 const CommandInputContainer = styled("div", {
   display: "grid",
-  gridTemplateColumns: `${itemHeight} 1fr max-content`,
-  height: itemHeight,
+  gridTemplateColumns: `${itemHeight}px 1fr max-content`,
+  height: theme.spacing[15],
   borderBottom: `var(${inputBorderBottomSize}) solid ${theme.colors.borderMain}`,
 });
 
@@ -181,7 +181,7 @@ export const CommandInput = (
       <Text
         variant="labelsTitleCase"
         color="moreSubtle"
-        css={{ alignSelf: "center", paddingInline: 8 }}
+        css={{ alignSelf: "center", paddingInline: theme.spacing[5] }}
       >
         {action} <Kbd value={["enter"]} color="moreSubtle" />
       </Text>
@@ -254,7 +254,7 @@ export const CommandFooter = () => {
     <Flex
       justify="end"
       align="center"
-      css={{ height: itemHeight, paddingInline: 4 }}
+      css={{ height: itemHeight, paddingInline: theme.spacing[3] }}
       ref={actionsRef}
     >
       <Popover open={isActionOpen} onOpenChange={setIsActionOpen}>
@@ -337,9 +337,9 @@ export const CommandGroupHeading = styled("div", {
   ...textVariants.titles,
   color: theme.colors.foregroundMoreSubtle,
   display: "flex",
-  gap: 8,
+  gap: theme.spacing[5],
   alignItems: "center",
-  paddingInline: 8,
+  paddingInline: theme.spacing[5],
   height: itemHeight,
 });
 
@@ -348,15 +348,15 @@ export const CommandItem = styled(CommandPrimitive.Item, {
   gridTemplateColumns: `1fr max-content`,
   alignItems: "center",
   minHeight: itemHeight,
-  paddingInline: 16,
+  paddingInline: theme.spacing[9],
   "&[aria-selected=true]": {
     backgroundColor: theme.colors.backgroundHover,
   },
 });
 
 export const CommandIcon = styled("div", {
-  width: 16,
-  height: 16,
+  width: theme.spacing[9],
+  height: theme.spacing[9],
   placeSelf: "center",
   color: theme.colors.foregroundSubtle,
 });

packages/design-system/src/components/floating-panel.tsx

@@ -18,7 +18,7 @@ export const floatingPanelStyle = css({
   border: `1px solid ${theme.colors.borderMain}`,
   boxShadow: theme.shadows.menuDropShadow,
   background: theme.colors.backgroundPanel,
-  borderRadius: theme.borderRadius[4],
+  borderRadius: theme.borderRadius[7],
   display: "flex",
   flexDirection: "column",