@moderneinc/neo-styled-components 2.0.3-next.46edb3 → 2.0.3-next.9b94c6

package/dist/index.js

@@ -4334,6 +4334,10 @@ NeoListItemButton.displayName = 'NeoListItemButton';
  * Combines focusWhite1 (inner white ring) and focusBlue2 (outer blue ring)
  */
 const focusRingShadow = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
+/**
+ * Card box-shadow using Neo design tokens for hover and selected states
+ */
+const activeShadow = `${neoDesign.shadows.card.x}px ${neoDesign.shadows.card.y}px ${neoDesign.shadows.card.blur}px ${neoDesign.shadows.card.spread}px ${neoDesign.shadows.card.shadow}`;
 /**
  * Styled Card component with Neo design tokens
  */
@@ -4346,17 +4350,17 @@ const StyledCard = styles.styled(MuiCard, {
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
-    backgroundColor: selected ? neoDesign.semanticColors.status.info.light : neoDesign.semanticColors.surfaces.card,
+    backgroundColor: neoDesign.semanticColors.surfaces.card,
     border: `1px solid ${selected ? neoDesign.semanticColors.border.tabActive : neoDesign.semanticColors.border.card}`,
     borderRadius: theme.typography.pxToRem(4),
-    boxShadow: 'none',
+    boxShadow: selected ? activeShadow : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: selected ? neoDesign.semanticColors.border.tabActive : neoDesign.semanticColors.border.card,
+        borderColor: neoDesign.semanticColors.border.tabActive,
+        boxShadow: activeShadow,
     },
     '&:focus-visible': {
-        backgroundColor: neoDesign.semanticColors.status.info.light,
         borderColor: neoDesign.semanticColors.border.tabActive,
         boxShadow: focusRingShadow,
         outline: 'none',
@@ -4425,6 +4429,11 @@ const Description = styles.styled('p')(({ theme }) => ({
     lineHeight: 1.5,
     color: neoDesign.colors.grey[800],
     width: '100%',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 }));
 /**
  * NeoMarketplaceCard - Selectable card component for marketplace items