@moderneinc/neo-styled-components 2.0.3-next.293c8b → 2.0.3-next.b141b9

package/dist/MarketplaceCard/MarketplaceCard.d.ts

@@ -65,9 +65,12 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children'> {
  * - Property 1="Default" → Base state (no props)
  *
  * Design Tokens Used:
- * - semanticColors.surfaces.card (#FFFFFF) - Card background
+ * - semanticColors.surfaces.card (#FFFFFF) - Default card background
+ * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
  * - semanticColors.border.card (#d1d5db) - Default border
  * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - shadows.focusWhite1 - Inner white focus ring (2px spread)
+ * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
  * - typography.fontSize.xxs (10px) - Recipe count
  * - typography.fontSize.xs (12px) - Description

package/dist/index.d.ts

@@ -2561,9 +2561,12 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children'> {
  * - Property 1="Default" → Base state (no props)
  *
  * Design Tokens Used:
- * - semanticColors.surfaces.card (#FFFFFF) - Card background
+ * - semanticColors.surfaces.card (#FFFFFF) - Default card background
+ * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
  * - semanticColors.border.card (#d1d5db) - Default border
  * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - shadows.focusWhite1 - Inner white focus ring (2px spread)
+ * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
  * - typography.fontSize.xxs (10px) - Recipe count
  * - typography.fontSize.xs (12px) - Description

package/dist/index.esm.js

@@ -3982,11 +3982,11 @@ NeoInputField.displayName = 'NeoInputField';
 // Size configuration for consistent styling
 const sizeConfig = {
     small: {
-        height: 36,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_4,
+        height: spacing.spacing_3_1_2,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_1,
         iconSize: typography.fontSize.h4,
         fontSize: typography.fontSize.sm,
@@ -3994,10 +3994,10 @@ const sizeConfig = {
     },
     medium: {
         height: spacing.spacing_5,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_1,
         iconSize: typography.fontSize.h4,
         fontSize: typography.fontSize.default,
@@ -4005,10 +4005,10 @@ const sizeConfig = {
     },
     large: {
         height: spacing.spacing_6,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_1_1_2,
         iconSize: typography.fontSize.h2,
         fontSize: typography.fontSize.default,
@@ -4017,10 +4017,10 @@ const sizeConfig = {
     },
     xlarge: {
         height: spacing.spacing_8,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_2,
         iconSize: typography.fontSize.h2,
         fontSize: typography.fontSize.default,
@@ -4029,10 +4029,10 @@ const sizeConfig = {
     },
     xxlarge: {
         height: spacing.spacing_10,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_2,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_2,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_2,
         iconSize: spacing.spacing_5,
         fontSize: typography.fontSize.h5,
@@ -4327,6 +4327,11 @@ const NeoListItemButton = ({ children, selected = false, disabled = false, ...pr
 };
 NeoListItemButton.displayName = 'NeoListItemButton';
 
+/**
+ * Focus ring box-shadow using Neo design tokens
+ * Combines focusWhite1 (inner white ring) and focusBlue2 (outer blue ring)
+ */
+const focusRingShadow = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
 /**
  * Styled Card component with Neo design tokens
  */
@@ -4339,19 +4344,20 @@ const StyledCard = styled(MuiCard, {
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
-    backgroundColor: semanticColors.surfaces.card,
+    backgroundColor: selected ? semanticColors.status.info.light : semanticColors.surfaces.card,
     border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
     borderRadius: theme.typography.pxToRem(4),
     boxShadow: 'none',
-    transition: theme.transitions.create(['border-color']),
+    transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
         borderColor: selected ? semanticColors.border.tabActive : semanticColors.border.card,
     },
     '&:focus-visible': {
-        outline: `2px solid ${semanticColors.border.tabActive}`,
-        outlineOffset: '2px',
+        backgroundColor: semanticColors.status.info.light,
         borderColor: semanticColors.border.tabActive,
+        boxShadow: focusRingShadow,
+        outline: 'none',
     },
     ...(disabled && {
         opacity: 0.5,
@@ -4446,9 +4452,12 @@ const Description = styled('p')(({ theme }) => ({
  * - Property 1="Default" → Base state (no props)
  *
  * Design Tokens Used:
- * - semanticColors.surfaces.card (#FFFFFF) - Card background
+ * - semanticColors.surfaces.card (#FFFFFF) - Default card background
+ * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
  * - semanticColors.border.card (#d1d5db) - Default border
  * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - shadows.focusWhite1 - Inner white focus ring (2px spread)
+ * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
  * - typography.fontSize.xxs (10px) - Recipe count
  * - typography.fontSize.xs (12px) - Description