fix: adjust padding and remove minWidth from Snackbar (#503)

Author: vinitkhandal717

packages/blend/lib/components/Sidebar/sidebar.tokens.ts

@@ -216,7 +216,7 @@ export const getSidebarTokens = (
                 backgroundColor: foundationToken.colors.gray[25],
                 padding: {
                     x: foundationToken.unit[12],
-                    y: foundationToken.unit[16],
+                    y: foundationToken.unit[14],
                 },
                 gap: foundationToken.unit[16],
                 borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,

packages/blend/lib/components/Snackbar/Snackbar.tsx

@@ -55,12 +55,12 @@ export const StyledToast: React.FC<CustomToastProps> = ({
             backgroundColor={snackbarTokens.backgroundColor}
             borderRadius={snackbarTokens.borderRadius}
             padding={snackbarTokens.padding}
-            minWidth={snackbarTokens.minWidth}
             maxWidth={snackbarTokens.maxWidth}
             boxShadow={snackbarTokens.boxShadow}
         >
             {' '}
-            <Block>
+            {/*  need to fix line height to remove margin */}
+            <Block marginTop={4}>
                 <SnackbarIcon variant={variant} />
             </Block>
             <Block display="flex" gap={snackbarTokens.gap}>

packages/blend/lib/components/Snackbar/snackbar.tokens.ts

@@ -27,7 +27,6 @@ export type SnackbarTokens = Readonly<{
     backgroundColor: CSSObject['backgroundColor']
     borderRadius: CSSObject['borderRadius']
     padding: CSSObject['padding']
-    minWidth: CSSObject['minWidth']
     maxWidth: CSSObject['maxWidth']
     boxShadow: CSSObject['boxShadow']
     gap: CSSObject['gap']
@@ -118,7 +117,6 @@ export const getSnackbarTokens = (
             backgroundColor: foundationToken.colors.gray[900],
             borderRadius: foundationToken.border.radius[12],
             padding: foundationToken.unit[16],
-            minWidth: 320,
             maxWidth: 350,
             boxShadow: foundationToken.shadows.lg,
             gap: foundationToken.unit[10],
@@ -192,7 +190,6 @@ export const getSnackbarTokens = (
             backgroundColor: foundationToken.colors.gray[900],
             borderRadius: foundationToken.border.radius[8],
             padding: foundationToken.unit[16],
-            minWidth: 400,
             maxWidth: 420,
             boxShadow: foundationToken.shadows.lg,
             gap: foundationToken.unit[8],

packages/blend/lib/components/Topbar/topbar.tokens.ts

@@ -106,7 +106,7 @@ export const getTopbarTokens = (
             borderBottom: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
             backgroundColor: 'hsla(0, 0%, 100%, 0.8)',
             backdropFilter: 'blur(10px)',
-            padding: `${foundationToken.unit[12]} ${foundationToken.unit[16]}`,
+            padding: `12.5px ${foundationToken.unit[16]}`,
             gap: foundationToken.unit[12],
 
             toggleButton: {
@@ -199,7 +199,7 @@ export const getTopbarTokens = (
             borderBottom: `${foundationToken.border.width[1]} solid ${foundationToken.colors.gray[200]}`,
             backgroundColor: 'hsla(0, 0%, 100%, 0.8)',
             backdropFilter: 'blur(10px)',
-            padding: `${foundationToken.unit[12]} ${foundationToken.unit[32]}`,
+            padding: `12.5px ${foundationToken.unit[32]}`,
             gap: foundationToken.unit[16],
 
             toggleButton: {