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',
 });

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

@@ -39,14 +39,14 @@ export const mapProjectFormStateToStageValue = ({
 const containerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const formGroupStyles = css({
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const selectStyles = css({ minWidth: '120px' });

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

@@ -34,7 +34,7 @@ type TextSearchState = {
 };
 
 const containerStyles = css({
-  gap: spacing[2],
+  gap: spacing[200],
   width: '100%',
   maxWidth: '800px',
   display: 'grid',
@@ -49,7 +49,7 @@ const rowStyles = css({
 const inputWithLabelStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const labelStyles = css({

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

@@ -26,7 +26,7 @@ type SortFieldState = {
 const containerStyles = css({
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[2],
+  gap: spacing[200],
   width: 'max-content',
   maxWidth: '100%',
 });
@@ -35,7 +35,7 @@ const formGroupStyles = css({
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const labelStyles = css({

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

@@ -21,7 +21,7 @@ type UseCaseCardProps = DraggedUseCase & {
 };
 
 const cardStyles = css({
-  padding: `${spacing[2]}px ${spacing[3]}px`,
+  padding: `${spacing[200]}px ${spacing[400]}px`,
   textAlign: 'left',
   width: '100%',
 });
@@ -36,7 +36,7 @@ const cardStylesDropping = css({
 
 const cardBodyStyles = css({
   display: 'inline',
-  marginRight: spacing[2],
+  marginRight: spacing[200],
 });
 
 type UseCaseCardLayoutProps = DraggedUseCase & {

packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx

@@ -17,7 +17,7 @@ import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider'
 
 const progressContainerStyles = css({
   display: 'flex',
-  gap: spacing[2],
+  gap: spacing[200],
   alignItems: 'center',
 });
 

packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx

@@ -49,13 +49,13 @@ type FocusModeModalHeaderProps = {
 const controlsContainerStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[3],
+  gap: spacing[400],
 });
 
 const controlContainerStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const fakeToggleLabelStyles = css({
@@ -73,7 +73,7 @@ const menuStyles = css({
 const tooltipContentStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[3],
+  gap: spacing[400],
 });
 
 const tooltipContentItemStyles = css({
@@ -167,7 +167,7 @@ export const FocusModeModalHeader: React.FunctionComponent<
           return label.length;
         })
       )
-    )}ch + ${spacing[5]}px)`,
+    )}ch + ${spacing[800]}px)`,
   };
 
   return (

packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-editor.tsx

@@ -13,22 +13,22 @@ const containerStyles = css({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
-  gap: spacing[3],
+  gap: spacing[400],
 });
 
 const headerStyles = css({
   display: 'flex',
   justifyContent: 'flex-start',
-  gap: spacing[2],
-  marginLeft: spacing[2],
-  marginRight: spacing[2],
+  gap: spacing[200],
+  marginLeft: spacing[200],
+  marginRight: spacing[200],
   flexWrap: 'wrap',
 });
 
 const editorStyles = css({
   flex: 1,
   overflowY: 'auto',
-  paddingBottom: spacing[3],
+  paddingBottom: spacing[400],
 });
 
 export const FocusModeStageEditor = ({

packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx

@@ -31,14 +31,14 @@ const containerStyles = css({
   display: 'flex',
   flexDirection: 'column',
   height: '100%',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const headerStyles = css({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
-  marginBottom: spacing[2],
+  marginBottom: spacing[200],
   flexWrap: 'wrap',
 });
 
@@ -57,7 +57,7 @@ const centerStyles = css({
   textAlign: 'center',
 });
 
-const messageStyles = css({ marginTop: spacing[3] });
+const messageStyles = css({ marginTop: spacing[400] });
 
 const documentListStyles = css({
   overflowY: 'auto',
@@ -73,7 +73,7 @@ const pipelineOutputMenuStyles = css({
 const loaderStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 type FocusModePreviewProps = {