feat(Select, Search, Autocomplete): Align menu item styles and fixes (#1484)

Telefonica/mistica-design#2517

---------

Co-authored-by: Marcos Luis Delgado <mluis@tuenti.com>

Author: aweell

src/__screenshot_tests__/__image_snapshots__/dialog-screenshot-test-tsx-select-options-are-correctly-positioned-inside-a-dialog-1-snap.png

@@ -2,6 +2,8 @@ import {style} from '@vanilla-extract/css';
 import {sprinkles} from './sprinkles.css';
 import {vars, vars as skinVars} from './skins/skin-contract.css';
 
+export const optionListContainerPadding = 8;
+
 export const autocompleteContainer = style([
     sprinkles({
         position: 'relative',
@@ -11,7 +13,7 @@ export const autocompleteContainer = style([
 export const optionsList = style([
     sprinkles({
         position: 'absolute',
-        padding: 8,
+        padding: optionListContainerPadding,
         borderRadius: vars.borderRadii.popup,
     }),
     {
@@ -31,7 +33,7 @@ export const optionBaseItem = style([
         paddingY: 12,
     }),
     {
-        borderRadius: skinVars.borderRadii.popup,
+        borderRadius: `calc(${skinVars.borderRadii.popup} - ${optionListContainerPadding / 2}px)`,
         height: 48,
         userSelect: 'none',
         display: 'block',

src/__screenshot_tests__/__image_snapshots__/form-select-screenshot-test-tsx-select-display-all-options-1-snap.png

@@ -27,6 +27,7 @@ export const vars = {
 };
 
 export const chevronSize = pxToRem(20);
+export const optionContainerPadding = 8;
 
 export const optionsContainer = style([
     sprinkles({
@@ -41,10 +42,8 @@ export const optionsContainer = style([
         top,
         left,
         minWidth,
-        boxShadow:
-            '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
-        paddingTop: 8,
-        paddingBottom: 8,
+        boxShadow: '0px 2px 4px 0px #00000033',
+        padding: optionContainerPadding,
         transformOrigin,
         transition: 'opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s',
         overflowY: 'auto',
@@ -208,16 +207,20 @@ export const menuItem = style([
         alignItems: 'center',
         cursor: 'pointer',
         paddingY: 8,
-        paddingX: 16,
+        paddingX: 8,
     }),
+    {
+        borderRadius: `calc(${skinVars.borderRadii.popup} - ${optionContainerPadding / 2}px)`,
+    },
+
     {
         height: pxToRem(48),
         transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
 
         '@media': {
             [mq.supportsHover]: {
                 ':hover': {
-                    backgroundColor: 'rgba(0, 0, 0, 0.08)',
+                    backgroundColor: skinVars.colors.backgroundContainerHover,
                 },
             },
         },

src/__screenshot_tests__/__image_snapshots__/form-select-screenshot-test-tsx-select-display-all-options-in-dark-mode-1-snap.png

@@ -35,6 +35,8 @@ const helperTextDesktopLineHeight = createVar();
 const labelScaleDesktop = createVar();
 const labelScaleMobile = createVar();
 
+export const suggestionsContainerPadding = 8;
+
 export const fieldVars = {
     mobileFontSize,
     desktopFontSize,
@@ -363,6 +365,7 @@ export const menuItemBase = style([
         minHeight: pxToRem(48),
         padding: '6px 8px',
         userSelect: 'none',
+        borderRadius: `calc(${skinVars.borderRadii.popup} - ${suggestionsContainerPadding / 2}px)`,
     },
 ]);
 
@@ -397,7 +400,7 @@ export const suggestionsContainer = style([
         marginTop: 8,
         boxSizing: 'border-box',
         boxShadow: '0px 2px 4px 0px #00000033',
-        padding: 8,
+        padding: suggestionsContainerPadding,
         background: skinVars.colors.backgroundContainer,
         borderRadius: skinVars.borderRadii.popup,