Fix bold for ghost and move active of ghost state out of ghost-utils

nsbno · Nov 20, 2024 · 87c3054 · 87c3054
1 parent 608bf61
commit 87c3054
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/spor-react/src/input/CardSelect.tsx b/packages/spor-react/src/input/CardSelect.tsx
@@ -130,7 +130,11 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
         >
           <Flex gap={1.5} alignItems="center">
             {icon}
-            <Box as="span" display={props["aria-label"] ? "none" : "inline"}>
+            <Box
+              as="span"
+              paddingRight={state.isOpen ? 0 : 1}
+              display={props["aria-label"] ? "none" : "inline"}
+            >
               {label}
             </Box>
             {withChevron ? (

diff --git a/packages/spor-react/src/theme/components/card-select.ts b/packages/spor-react/src/theme/components/card-select.ts
@@ -56,7 +56,8 @@ const config = helpers.defineMultiStyleConfig({
           ...ghostBackground("active", props),
         },
         _expanded: {
-          ...ghostBackground("selected", props),
+          ...ghostBackground("active", props),
+          fontWeight: "bold",
         },
       },
     }),

diff --git a/packages/spor-react/src/theme/utils/ghost-utils.ts b/packages/spor-react/src/theme/utils/ghost-utils.ts
@@ -50,7 +50,6 @@ export function ghostText(state: GhostTextState, props: StyleFunctionProps) {
     case "selected":
       return {
         color: mode("ghost.text.light", "ghost.text.dark")(props),
-        fontWeights: fontWeights.bold,
       };
     default:
       return {