chore: use new spacing leafygreen numbers (#6871)

Author: Anemy

packages/compass-aggregations/src/components/add-stage/add-stage.tsx

@@ -12,8 +12,8 @@ import { PIPELINE_HELP_URI } from '../../constants';
 const containerStyles = css({ textAlign: 'center' });
 
 const linkContainerStyles = css({
-  marginTop: spacing[2],
-  marginBottom: spacing[5],
+  marginTop: spacing[200],
+  marginBottom: spacing[800],
   position: 'relative',
 });
 

packages/compass-aggregations/src/components/aggregation-side-panel/feedback-link.tsx

@@ -4,15 +4,15 @@ import { css, Icon, Link, spacing } from '@mongodb-js/compass-components';
 const FEEDBACK_URL = 'https://feedback.mongodb.com/forums/924283-compass';
 
 const linkContainerStyles = css({
-  paddingTop: spacing[6],
-  paddingBottom: spacing[3],
+  paddingTop: spacing[1600],
+  paddingBottom: spacing[400],
   textAlign: 'center',
 });
 
 const linkContentStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 export const FeedbackLink = () => {

packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx

@@ -23,14 +23,14 @@ import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
 const containerStyles = css({
   height: '100%',
 
-  paddingTop: spacing[1],
+  paddingTop: spacing[100],
   borderBottomRightRadius: 0,
   borderBottomLeftRadius: 0,
   borderBottom: 'none',
   backgroundColor: palette.gray.light3,
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const darkModeContainerStyles = css({
@@ -55,19 +55,19 @@ const titleStylesLight = css({
 });
 
 const headerContainerStyles = css({
-  paddingLeft: spacing[2],
-  paddingRight: spacing[2],
+  paddingLeft: spacing[200],
+  paddingRight: spacing[200],
 });
 
 const contentStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
   overflow: 'auto',
-  paddingTop: spacing[1],
-  paddingLeft: spacing[2],
-  paddingRight: spacing[2],
-  paddingBottom: spacing[3],
+  paddingTop: spacing[100],
+  paddingLeft: spacing[200],
+  paddingRight: spacing[200],
+  paddingBottom: spacing[400],
 });
 
 type AggregationSidePanelProps = {

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/basic-group.tsx

@@ -7,7 +7,7 @@ import { FieldCombobox } from '../field-combobox';
 const containerStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const comboboxStyles = css({ width: '350px' });

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx

@@ -45,15 +45,15 @@ function isSupportedAccumulator(c: Completion): c is SupportedAccumulator {
 const containerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
   width: 'max-content',
   maxWidth: '100%',
 });
 
 const groupRowStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const groupLabelStyles = css({

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx

@@ -78,14 +78,14 @@ function isSupportedAccumulatorKey(
 const containerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const formGroupStyles = css({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const groupLabelStyles = css({

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx

@@ -27,7 +27,7 @@ type LookupFormState = {
 const containerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const titleStyles = css({
@@ -37,7 +37,7 @@ const titleStyles = css({
 
 const formGroup = css({
   display: 'flex',
-  gap: spacing[2],
+  gap: spacing[200],
   alignItems: 'center',
 });
 

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx

@@ -110,7 +110,7 @@ const conditionContainerStyles = css({
   display: 'flex',
   width: '100%',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 const fieldComboboxStyles = css({ flex: '1 1 50%' });
 const operatorSelectStyles = css({ flex: '1 0 70px' });

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx

@@ -94,18 +94,18 @@ export const createGroup = makeCreateGroup(createCondition);
 // Components - Group
 const baseGroupStyles = css({
   display: 'flex',
-  gap: spacing[3],
+  gap: spacing[400],
   flexDirection: 'column',
 });
 
 const nestedGroupBaseStyles = css({
-  padding: spacing[4],
-  paddingTop: spacing[4] / 2,
-  borderRadius: spacing[4] / 2,
+  padding: spacing[600],
+  paddingTop: spacing[600] / 2,
+  borderRadius: spacing[600] / 2,
 });
 
 const nestedGroupContainerStyles = css({
-  gap: spacing[3],
+  gap: spacing[400],
 });
 
 const oddNestedGroupStylesLight = css({
@@ -128,7 +128,7 @@ const groupHeaderStyles = css({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  gap: spacing[3],
+  gap: spacing[400],
 });
 
 const MatchGroupForm = ({
@@ -147,7 +147,7 @@ const MatchGroupForm = ({
   // condition list in nested groups", we calculate the right padding
   // dynamically using the nesting depth and current nesting level.
   const conditionListStyles: CSSProperties = {
-    paddingRight: (nestingDepth - nestingLevel) * spacing[4],
+    paddingRight: (nestingDepth - nestingLevel) * spacing[600],
   };
 
   const handleOperatorChange = (operator: LogicalOperator) => {

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match.tsx

@@ -154,7 +154,7 @@ export function mapMatchFormStateToMatchStage(matchGroup: MatchGroup) {
 const formContainerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[4],
+  gap: spacing[600],
   width: '100%',
   maxWidth: '1000px',
 });