From 45250d3960914033d814b01d54d9099cfa4f4720 Mon Sep 17 00:00:00 2001 From: Rhys Howell Date: Thu, 17 Apr 2025 11:18:13 -0400 Subject: [PATCH] chore: use new spacing numbers with leafygreen --- .../src/components/add-stage/add-stage.tsx | 4 +-- .../aggregation-side-panel/feedback-link.tsx | 6 ++-- .../aggregation-side-panel/index.tsx | 18 +++++----- .../group/basic-group.tsx | 2 +- .../group/group-with-statistics.tsx | 4 +-- .../group/group-with-subset.tsx | 4 +-- .../stage-wizard-use-cases/lookup/lookup.tsx | 4 +-- .../match/match-condition-form.tsx | 2 +- .../match/match-group-form.tsx | 14 ++++---- .../stage-wizard-use-cases/match/match.tsx | 2 +- .../project/project.tsx | 4 +-- .../search/text-search.tsx | 4 +-- .../stage-wizard-use-cases/sort/sort.tsx | 4 +-- .../stage-wizard-use-cases/use-case-card.tsx | 4 +-- .../create-view-modal/create-view-modal.tsx | 2 +- .../focus-mode/focus-mode-modal-header.tsx | 8 ++--- .../focus-mode/focus-mode-stage-editor.tsx | 10 +++--- .../focus-mode/focus-mode-stage-preview.tsx | 8 ++--- .../src/components/focus-mode/focus-mode.tsx | 14 ++++---- .../loading-overlay/loading-overlay.tsx | 2 +- .../pipeline-builder-input-documents.tsx | 12 +++---- .../pipeline-builder-workspace/index.tsx | 6 ++-- .../pipeline-as-text-workspace/index.tsx | 2 +- .../pipeline-editor.tsx | 14 ++++---- .../pipeline-preview.tsx | 8 ++--- .../pipeline-stages-preview.tsx | 2 +- .../pipeline-builder-ui-workspace/index.tsx | 6 ++-- .../pipeline-results-workspace/index.tsx | 18 +++++----- .../pipeline-pagination-count.tsx | 8 ++--- .../pipeline-results-header.tsx | 6 ++-- .../pipeline-results-list.tsx | 2 +- .../pipeline-results-view-controls.tsx | 2 +- .../src/components/pipeline-toolbar/index.tsx | 4 +-- .../pipeline-header/index.tsx | 6 ++-- .../pipeline-header/pipeline-actions.tsx | 2 +- .../pipeline-header/pipeline-stages.tsx | 4 +-- .../pipeline-options/pipeline-collation.tsx | 8 ++--- .../pipeline-settings/index.tsx | 4 +-- .../pipeline-extra-settings.tsx | 4 +-- .../pipeline-toolbar-container.tsx | 4 +-- .../src/components/resize-handle.tsx | 2 +- .../saved-pipelines/saved-pipeline-card.tsx | 6 ++-- .../saved-pipelines/saved-pipelines.tsx | 6 ++-- .../src/components/search-no-results.tsx | 2 +- .../src/components/settings/settings.tsx | 10 +++--- .../components/stage-editor/stage-editor.tsx | 6 ++-- .../stage-preview/atlas-stage-preview.tsx | 4 +-- .../src/components/stage-preview/index.tsx | 10 +++--- .../stage-preview/output-stage-preview.tsx | 4 +-- .../src/components/stage-toolbar/index.tsx | 12 +++---- .../stage-toolbar/option-menu-item.tsx | 2 +- .../src/components/stage-wizard/index.tsx | 16 ++++----- .../src/components/stage.tsx | 4 +-- .../use-case-droppable-area/index.tsx | 6 ++-- .../collection-header-actions.tsx | 2 +- .../collection-header/collection-header.tsx | 10 +++--- .../src/components/accordion.tsx | 4 +-- .../components/actions/small-icon-button.tsx | 4 +-- .../src/components/breadcrumb.tsx | 2 +- .../src/components/bson-value.tsx | 2 +- .../src/components/collapsible-field-set.tsx | 4 +-- .../document-list/element-actions.tsx | 2 +- .../document-list/element-editors.tsx | 4 +-- .../src/components/document-list/element.tsx | 8 ++--- .../src/components/empty-content.tsx | 14 ++++---- .../src/components/error-boundary.tsx | 2 +- .../src/components/file-input.tsx | 14 ++++---- .../src/components/form-field-container.tsx | 2 +- .../src/components/icons/favorite-icon.tsx | 2 +- .../components/icons/no-saved-items-icon.tsx | 2 +- .../src/components/index-keys-badge.tsx | 2 +- .../src/components/inline-info-link.tsx | 4 +-- .../src/components/interactive-popover.tsx | 6 ++-- .../src/components/keyline-card.tsx | 2 +- .../src/components/list-editor.tsx | 4 +-- .../src/components/loader.tsx | 10 ++++-- .../src/components/modals/info-modal.tsx | 2 +- .../src/components/modals/modal-body.tsx | 10 +++--- .../src/components/modals/modal-header.tsx | 2 +- .../src/components/modals/modal.tsx | 8 ++--- .../src/components/options-toggle.tsx | 10 +++--- .../src/components/placeholder.tsx | 2 +- .../src/components/radio-box-group.tsx | 2 +- .../src/components/signal-popover.tsx | 26 +++++++------- .../src/components/tab-nav-bar.tsx | 2 +- .../src/components/workspace-container.tsx | 4 +-- .../workspace-tabs/workspace-tabs.tsx | 4 +-- .../src/hooks/use-focus-ring.ts | 6 ++-- .../src/hooks/use-hotkeys.tsx | 2 +- .../compass-components/src/hooks/use-sort.tsx | 4 +-- .../src/components/import-modal.tsx | 2 +- .../src/components/passphrase.tsx | 2 +- .../components/legacy-connections-modal.tsx | 10 +++--- .../non-genuine-connection-modal.tsx | 4 +-- .../src/components/bulk-delete-modal.tsx | 18 +++++----- .../src/components/bulk-update-modal.tsx | 36 +++++++++---------- .../components/change-view/change-view.tsx | 16 ++++----- .../src/components/document-json-view.tsx | 2 +- .../src/components/document-list-view.tsx | 2 +- .../src/components/document-list.tsx | 6 ++-- .../src/components/insert-document-dialog.tsx | 2 +- .../src/components/json-editor.tsx | 2 +- .../src/components/readonly-document.tsx | 4 +-- .../src/components/readonly-filter.tsx | 6 ++-- .../src/components/table-view/cell-editor.tsx | 8 ++--- .../components/table-view/cell-renderer.tsx | 2 +- .../table-view/document-table-view.tsx | 2 +- .../components/table-view/types-dropdown.tsx | 2 +- packages/compass-editor/src/editor.tsx | 22 ++++++------ .../src/components/explain-plan-modal.tsx | 8 ++--- .../components/explain-plan-side-summary.tsx | 30 ++++++++-------- .../src/components/explain-plan-view.tsx | 10 +++--- .../explain-tree/explain-tree-stage.tsx | 28 +++++++-------- .../components/explain-tree/explain-tree.tsx | 8 ++--- .../src/components/modal.tsx | 10 +++--- .../src/components/find-in-page-input.tsx | 14 ++++---- .../src/components/ai-experience-entry.tsx | 6 ++-- .../src/components/ai-feedback.tsx | 2 +- .../src/components/ai-guide-cue.tsx | 2 +- .../src/components/generative-ai-input.tsx | 4 +-- .../src/components/export-code-view.tsx | 2 +- .../src/components/export-field-options.tsx | 2 +- .../components/export-json-format-options.tsx | 4 +-- .../src/components/export-modal.tsx | 6 ++-- .../src/components/export-select-fields.tsx | 18 +++++----- .../src/components/import-modal.tsx | 6 ++-- .../src/components/import-options.tsx | 8 ++--- .../src/components/import-preview-loader.tsx | 8 ++--- .../src/components/import-preview.tsx | 20 +++++------ .../src/components/select-file-type.tsx | 2 +- .../create-index-actions.tsx | 2 +- .../src/components/create-index-fields.tsx | 6 ++-- .../create-index-form/create-index-form.tsx | 6 ++-- .../indexes-table/badge-with-icon-link.tsx | 2 +- .../indexes-table/indexes-table.tsx | 2 +- .../indexes-toolbar/indexes-toolbar.tsx | 4 +-- .../src/components/indexes/indexes.tsx | 12 +++---- .../regular-indexes-table/property-field.tsx | 4 +-- .../regular-indexes-table/status-field.tsx | 4 +-- .../base-search-index-modal.tsx | 12 +++---- .../search-index-actions.tsx | 2 +- .../search-indexes-table.tsx | 8 ++--- .../src/components/option-editor.tsx | 8 ++--- .../src/components/query-bar-row.tsx | 2 +- .../src/components/query-bar.tsx | 14 ++++---- .../query-history-button-popover.tsx | 4 +-- .../src/components/query-history/index.tsx | 2 +- .../query-item/query-item-card.tsx | 4 +-- .../query-item/query-item-content.tsx | 2 +- .../query-item/query-item-heading.tsx | 2 +- .../query-history/save-query-form.tsx | 4 +-- .../query-history/toolbar/toolbar.tsx | 10 +++--- .../components/query-history/zero-graphic.tsx | 8 ++--- .../src/components/query-option.tsx | 8 ++--- .../components/aggregations-queries-list.tsx | 14 ++++---- .../src/components/saved-item-card.tsx | 22 ++++++------ .../select-connection-and-namespace-modal.tsx | 4 +-- .../components/select-connection-modal.tsx | 4 +-- .../src/hooks/use-grid-filters.tsx | 6 ++-- .../src/components/document-preview.tsx | 4 +-- .../src/components/loading-overlay.tsx | 2 +- .../src/components/validation-selectors.tsx | 4 +-- .../src/components/compass-schema.tsx | 6 ++-- .../compass-schema/src/components/field.tsx | 22 ++++++------ .../src/components/schema-toolbar.tsx | 8 ++--- .../compass-schema/src/components/type.tsx | 2 +- .../src/components/value-bubble.tsx | 4 +-- packages/compass-schema/src/modules/date.js | 4 +-- .../src/components/dberror-component.tsx | 2 +- .../src/components/index.tsx | 6 ++-- .../src/components/server-stats-toolbar.tsx | 6 ++-- .../compass-settings/src/components/modal.tsx | 10 +++--- .../components/settings/gen-ai-settings.tsx | 2 +- .../src/components/settings/settings-list.tsx | 10 +++--- .../src/components/settings/theme.tsx | 8 ++--- .../src/components/sidebar.tsx | 6 ++-- .../components/shell-header/shell-header.tsx | 10 +++--- .../shell-info-modal/shell-info-modal.tsx | 4 +-- .../src/components/connection-info-modal.tsx | 2 +- .../src/components/csfle-connection-modal.tsx | 8 ++--- .../src/components/csfle-marker.tsx | 4 +-- .../src/components/db-stats.tsx | 4 +-- .../src/components/non-genuine-marker.tsx | 4 +-- .../src/components/desktop-welcome-tab.tsx | 6 ++-- .../advanced-connection-options.tsx | 6 ++-- .../advanced-options-tabs.tsx | 10 +++--- .../advanced-tab/url-options-list-editor.tsx | 2 +- .../advanced-tab/url-options.tsx | 6 ++-- .../authentication-default.tsx | 2 +- .../csfle-tab/csfle-tab.tsx | 6 ++-- .../encrypted-field-config-input.tsx | 2 +- .../csfle-tab/kms-local-key-generator.tsx | 2 +- .../kms-provider-status-indicator.tsx | 2 +- .../general-tab/direct-connection-input.tsx | 2 +- .../general-tab/scheme-input.tsx | 2 +- .../tls-ssl-tab/tls-ssl-tab.tsx | 2 +- .../connection-form-modal-actions.tsx | 10 +++--- .../components/connection-string-input.tsx | 10 +++--- .../src/components/form-help/form-help.tsx | 2 +- .../src/collections.tsx | 2 +- .../src/databases.tsx | 2 +- .../src/items-grid.tsx | 10 +++--- .../src/namespace-param.tsx | 4 +-- .../src/use-view-type.tsx | 2 +- .../collection-fields/collection-fields.jsx | 2 +- .../src/components/collections.tsx | 2 +- .../src/components/create-namespace-modal.tsx | 4 +-- .../rename-collection-modal.tsx | 4 +-- 208 files changed, 650 insertions(+), 646 deletions(-) diff --git a/packages/compass-aggregations/src/components/add-stage/add-stage.tsx b/packages/compass-aggregations/src/components/add-stage/add-stage.tsx index 3538f4c30ff..1959a29c267 100644 --- a/packages/compass-aggregations/src/components/add-stage/add-stage.tsx +++ b/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', }); diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/feedback-link.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/feedback-link.tsx index 9e288775e10..5a56a848bb0 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/feedback-link.tsx +++ b/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 = () => { diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx index 38997ce8d28..c4837737455 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx +++ b/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 = { diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/basic-group.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/basic-group.tsx index 185b23b5abd..c9bad37cc83 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/basic-group.tsx +++ b/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' }); diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx index 08a70e0bbf8..2a44ddbb8d0 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx +++ b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx @@ -45,7 +45,7 @@ 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%', }); @@ -53,7 +53,7 @@ const containerStyles = css({ const groupRowStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const groupLabelStyles = css({ diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx index 0cb095b2fc5..5c57dabe6c0 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx +++ b/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({ diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx index ddd0c7bfd66..9702def2615 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx +++ b/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', }); diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx index e2d938b8fd3..7464d673ebd 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx +++ b/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' }); diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx index 02c48d0b955..01eb4c6a9c8 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx +++ b/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) => { diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match.tsx index 03b56bd2227..56d83616394 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match.tsx +++ b/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', }); diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.tsx index edac4f5aac3..12a4bf70a08 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.tsx +++ b/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' }); diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx index 4d968d3e4e4..4b192e9cd89 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx +++ b/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({ diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx index 0b0bab77792..7189530eb78 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx +++ b/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({ diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.tsx index 56282c2b7fc..a35a3261b16 100644 --- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.tsx +++ b/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 & { diff --git a/packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx b/packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx index 2091af50f67..3befe9c8a9e 100644 --- a/packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx +++ b/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', }); diff --git a/packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx b/packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx index 881a1946d1b..71902ed6059 100644 --- a/packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx +++ b/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 ( diff --git a/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-editor.tsx b/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-editor.tsx index fe2d4f8f387..589ff2c9412 100644 --- a/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-editor.tsx +++ b/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 = ({ diff --git a/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx b/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx index 1a0f1487e93..478636c7f5a 100644 --- a/packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx +++ b/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 = { diff --git a/packages/compass-aggregations/src/components/focus-mode/focus-mode.tsx b/packages/compass-aggregations/src/components/focus-mode/focus-mode.tsx index b0ffb0fd1a0..cf02939ed5d 100644 --- a/packages/compass-aggregations/src/components/focus-mode/focus-mode.tsx +++ b/packages/compass-aggregations/src/components/focus-mode/focus-mode.tsx @@ -26,13 +26,13 @@ const containerStyles = css({ gridTemplateRows: 'min-content 1fr', gridTemplateColumns: '1fr', overflow: 'hidden', - padding: spacing[5], + padding: spacing[800], paddingBottom: 0, height: '100%', }); const headerStyles = css({ - paddingBottom: spacing[2], + paddingBottom: spacing[200], }); const bodyStyles = css({ @@ -42,13 +42,13 @@ const bodyStyles = css({ }); const inputResizerStyles = css({ - paddingTop: spacing[4], - paddingRight: spacing[2], + paddingTop: spacing[600], + paddingRight: spacing[200], }); const outputResizerStyles = css({ - paddingTop: spacing[4], - paddingLeft: spacing[2], + paddingTop: spacing[600], + paddingLeft: spacing[200], }); const previewAreaStyles = css({ @@ -57,7 +57,7 @@ const previewAreaStyles = css({ const editorAreaBaseStyles = css({ flex: 1, - paddingTop: spacing[4], + paddingTop: spacing[600], }); const editorAreaDarkStyles = css({ diff --git a/packages/compass-aggregations/src/components/loading-overlay/loading-overlay.tsx b/packages/compass-aggregations/src/components/loading-overlay/loading-overlay.tsx index f014262831e..32b5c4c5b98 100644 --- a/packages/compass-aggregations/src/components/loading-overlay/loading-overlay.tsx +++ b/packages/compass-aggregations/src/components/loading-overlay/loading-overlay.tsx @@ -31,7 +31,7 @@ const loadingOverlayStylesLight = css({ }); const textStyles = css({ - marginLeft: spacing[2], + marginLeft: spacing[200], }); type LoadingOverlayProps = { diff --git a/packages/compass-aggregations/src/components/pipeline-builder-input-documents.tsx b/packages/compass-aggregations/src/components/pipeline-builder-input-documents.tsx index 8c1b436b152..d7384440823 100644 --- a/packages/compass-aggregations/src/components/pipeline-builder-input-documents.tsx +++ b/packages/compass-aggregations/src/components/pipeline-builder-input-documents.tsx @@ -24,10 +24,10 @@ import type { CollectionStats } from '../modules/collection-stats'; const headerStyles = css({ display: 'flex', - gap: spacing[1], + gap: spacing[100], alignItems: 'center', width: '100%', - padding: `${spacing[1]}px ${spacing[2]}px`, + padding: `${spacing[100]}px ${spacing[200]}px`, }); const headerTextStyles = css({ @@ -36,7 +36,7 @@ const headerTextStyles = css({ const bodyStyles = css({ position: 'relative', - padding: `${spacing[2]}px ${spacing[2] + spacing[1]}px`, + padding: `${spacing[200]}px ${spacing[200] + spacing[100]}px`, borderTopWidth: '1px', borderTopStyle: 'solid', }); @@ -50,11 +50,11 @@ const bodyStylesDark = css({ }); const documentsContainerStyles = css({ - marginTop: spacing[2], - paddingBottom: spacing[2], + marginTop: spacing[200], + paddingBottom: spacing[200], display: 'flex', overflowX: 'scroll', - gap: spacing[2], + gap: spacing[200], }); const documentContainerStyles = css({ diff --git a/packages/compass-aggregations/src/components/pipeline-builder-workspace/index.tsx b/packages/compass-aggregations/src/components/pipeline-builder-workspace/index.tsx index 37eb46bc1b8..d7074732bf0 100644 --- a/packages/compass-aggregations/src/components/pipeline-builder-workspace/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-builder-workspace/index.tsx @@ -9,9 +9,9 @@ import PipelineAsTextWorkspace from './pipeline-as-text-workspace'; const containerStyles = css({ display: 'flex', overflow: 'hidden', - paddingRight: spacing[3], - paddingLeft: spacing[3], - gap: spacing[2], + paddingRight: spacing[400], + paddingLeft: spacing[400], + gap: spacing[200], height: '100%', }); diff --git a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/index.tsx b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/index.tsx index 8aadf8b70af..fae49a7bb21 100644 --- a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/index.tsx @@ -24,7 +24,7 @@ const resultsStyles = css({ }); const workspaceContainerStyles = css({ - paddingBottom: spacing[3], + paddingBottom: spacing[400], width: '100%', overflow: 'auto', }); diff --git a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx index 871e9f60fba..3aeae86f342 100644 --- a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx +++ b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx @@ -29,11 +29,11 @@ const containerStyles = css({ flexDirection: 'column', height: '100%', backgroundColor: palette.gray.light3, - paddingTop: spacing[3], - paddingBottom: spacing[2], - gap: spacing[2], - marginRight: spacing[1], - borderRadius: spacing[2], + paddingTop: spacing[400], + paddingBottom: spacing[200], + gap: spacing[200], + marginRight: spacing[100], + borderRadius: spacing[200], }); const containerDarkStyles = css({ @@ -56,8 +56,8 @@ const codeEditorStyles = css({ const errorContainerStyles = css({ flex: 'none', marginTop: 'auto', - marginLeft: spacing[3], - marginRight: spacing[3], + marginLeft: spacing[400], + marginRight: spacing[400], }); export type PipelineEditorProps = { diff --git a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-preview.tsx b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-preview.tsx index 671b1e1357b..bba64d0ad38 100644 --- a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-preview.tsx +++ b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-preview.tsx @@ -31,9 +31,9 @@ const containerStyles = css({ display: 'flex', flexDirection: 'column', height: '100%', - padding: spacing[3], - paddingBottom: spacing[2], - gap: spacing[2], + padding: spacing[400], + paddingBottom: spacing[200], + gap: spacing[200], }); const previewHeaderStyles = css({ @@ -51,7 +51,7 @@ const centerStyles = css({ textAlign: 'center', }); -const messageStyles = css({ marginTop: spacing[3] }); +const messageStyles = css({ marginTop: spacing[400] }); const documentListStyles = css({ overflow: 'auto', diff --git a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-stages-preview.tsx b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-stages-preview.tsx index 778cf708619..35939cad40e 100644 --- a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-stages-preview.tsx +++ b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-stages-preview.tsx @@ -29,7 +29,7 @@ const bannerStyles = css({ const contentStyles = css({ display: 'flex', - gap: spacing[3], + gap: spacing[400], alignItems: 'center', justifyContent: 'space-between', }); diff --git a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/index.tsx b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/index.tsx index 8ff88becf61..3a0e9cc3961 100644 --- a/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/index.tsx @@ -21,7 +21,7 @@ import PipelineBuilderDndWrapper from './dnd-wrapper'; const pipelineWorkspaceContainerStyles = css({ position: 'relative', height: '100%', - paddingBottom: spacing[3], + paddingBottom: spacing[400], width: '100%', overflow: 'auto', }); @@ -87,8 +87,8 @@ export const PipelineBuilderUIWorkspace: React.FunctionComponent< left: '0px', // default is -5px // The sidepanel container is a card with radius. // Having padding top, cleans the UI. - paddingTop: spacing[2], - height: `calc(100% - ${spacing[2]}px)`, + paddingTop: spacing[200], + height: `calc(100% - ${spacing[200]}px)`, }, }} > diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/index.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/index.tsx index 23964b0f6ac..fa2759de2cc 100644 --- a/packages/compass-aggregations/src/components/pipeline-results-workspace/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-results-workspace/index.tsx @@ -33,22 +33,22 @@ const resultsStyles = css({ height: '100%', overflowY: 'auto', '&:not(:first-child)': { - height: `calc(100% - ${spacing[3]}px)`, - marginTop: spacing[3], + height: `calc(100% - ${spacing[400]}px)`, + marginTop: spacing[400], }, }); const results = css({ display: 'flex', alignItems: 'flex-start', - paddingLeft: spacing[3] + spacing[1], - paddingRight: spacing[5] + spacing[1], + paddingLeft: spacing[400] + spacing[100], + paddingRight: spacing[800] + spacing[100], }); const centered = css({ width: '100%', height: '100%', - paddingTop: spacing[6] * 2, + paddingTop: spacing[1600] * 2, justifyContent: 'center', }); @@ -63,10 +63,10 @@ const outResult = css({ display: 'flex', flexDirection: 'column', alignItems: 'center', - gap: spacing[2], - maxWidth: spacing[6] * 8, - marginTop: spacing[2], - marginBottom: spacing[2], + gap: spacing[200], + maxWidth: spacing[1600] * 8, + marginTop: spacing[200], + marginBottom: spacing[200], }); const outResultText = css({ diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx index 5226348f98e..40d32a13391 100644 --- a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx +++ b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx @@ -26,9 +26,9 @@ const countButtonStyles = css({ backgroundColor: 'transparent', border: 'none', display: 'inline', - height: spacing[4] + spacing[1], + height: spacing[600] + spacing[100], ':focus': { - outline: `${spacing[1]}px auto ${palette.blue.light1}`, + outline: `${spacing[100]}px auto ${palette.blue.light1}`, }, }); @@ -40,8 +40,8 @@ const countDocsContainerStyles = css({ // As we want to align the refresh button and loader icon, // we need to set the same size as the IconButton. const spinnerStyles = css({ - width: spacing[4] + spacing[1], // LG IconButton width - height: spacing[4] + spacing[1], // LG IconButton height + width: spacing[600] + spacing[100], // LG IconButton width + height: spacing[600] + spacing[100], // LG IconButton height display: 'flex', justifyContent: 'center', alignItems: 'center', diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-header.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-header.tsx index 29f3fd9b12d..2a960f616fa 100644 --- a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-header.tsx +++ b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-header.tsx @@ -25,17 +25,17 @@ type PipelineResultsHeaderProps = { const containerStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const pipelineOptionsStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], }); const pipelinePaginationStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], marginLeft: 'auto', }); diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-list.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-list.tsx index a519173254e..637b989b365 100644 --- a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-list.tsx +++ b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-list.tsx @@ -6,7 +6,7 @@ import { css, spacing } from '@mongodb-js/compass-components'; export type ResultsViewType = 'document' | 'json'; const containerStyles = css({ - padding: spacing[3], + padding: spacing[400], }); const PipelineResultsList: React.FunctionComponent<{ diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.tsx index eb5f3998d1d..7eb0d698cbf 100644 --- a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.tsx +++ b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.tsx @@ -13,7 +13,7 @@ import type { ResultsViewType } from './pipeline-results-list'; const containerStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], flex: 'none', }); diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx index cf693d50641..4ec3c280110 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx @@ -23,7 +23,7 @@ const headerAndOptionsRowStyles = css({ border: '1px solid', borderRadius: '6px', borderColor: palette.gray.light2, - padding: spacing[2], + padding: spacing[200], background: palette.white, }); @@ -37,7 +37,7 @@ const settingsRowStyles = css({ }); const optionsStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], }); export type PipelineToolbarProps = { diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx index 8bd894165e0..7b0a8124ff6 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx @@ -27,7 +27,7 @@ const openSavedPipelinesStyles = cx( backgroundColor: 'transparent', display: 'inline-flex', alignItems: 'center', - padding: spacing[2] - 2, // -2px for border. + padding: spacing[200] - 2, // -2px for border. '&:hover': { cursor: 'pointer', }, @@ -50,8 +50,8 @@ const savedAggregationsPopoverStyles = css({ // We want the popover to open almost to the shell at the bottom of Compass. maxHeight: 'calc(100vh - 260px)', display: 'flex', - marginLeft: -spacing[2] - 1, // Align to the left of the bar. - marginTop: spacing[1], + marginLeft: -spacing[200] - 1, // Align to the left of the bar. + marginTop: spacing[100], }); type PipelineHeaderProps = { diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx index 5207541ae34..01fa41adedd 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx @@ -30,7 +30,7 @@ import { showInput as showAIInput } from '../../../modules/pipeline-builder/pipe const containerStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], alignItems: 'center', }); diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx index 35327b9d7c0..97b79c513ab 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-stages.tsx @@ -22,13 +22,13 @@ import { showInput as showAIInput } from '../../../modules/pipeline-builder/pipe const containerStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], alignItems: 'center', }); const aiExperienceContainerStyles = css({ display: 'inline-block', - marginLeft: spacing[1], + marginLeft: spacing[100], }); const descriptionStyles = css({ diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx index 9baeae39e34..e70f37ab740 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx @@ -17,20 +17,20 @@ import { DEFAULT_MAX_TIME_MS } from '../../../constants'; import { usePreference } from 'compass-preferences-model/provider'; const pipelineOptionsContainerStyles = css({ - paddingTop: spacing[1], + paddingTop: spacing[100], display: 'flex', alignItems: 'center', }); const labelStyles = css({ // A bit of vertical padding so users can click the label easier. - padding: `${spacing[2]}px 0`, - marginRight: spacing[2], + padding: `${spacing[200]}px 0`, + marginRight: spacing[200], }); const collationInputStyles = css({ flexGrow: 1, - marginRight: spacing[2], + marginRight: spacing[200], }); const inputStyles = css({ diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx index f62bd1b00e2..fdc36150d87 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx @@ -14,7 +14,7 @@ import { usePipelineStorage } from '@mongodb-js/my-queries-storage/provider'; const containerStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], alignItems: 'center', justifyContent: 'space-between', whiteSpace: 'nowrap', @@ -22,7 +22,7 @@ const containerStyles = css({ const settingsStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], alignItems: 'center', flex: 'none', }); diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx index 7b4c0425552..e4564a30ad3 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx @@ -25,14 +25,14 @@ import { const containerStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], justifyItems: 'center', }); const toggleStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[1], + gap: spacing[100], }); const toggleLabelStyles = css({ diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-toolbar-container.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-toolbar-container.tsx index ee2fb5e4113..29151220275 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-toolbar-container.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-toolbar-container.tsx @@ -7,12 +7,12 @@ import { import React from 'react'; const containerStyles = css({ - padding: spacing[3], + padding: spacing[400], }); const containerDisplayStyles = css({ display: 'grid', - gap: spacing[3], + gap: spacing[400], gridTemplateAreas: ` "headerAndOptionsRow" "settingsRow" diff --git a/packages/compass-aggregations/src/components/resize-handle.tsx b/packages/compass-aggregations/src/components/resize-handle.tsx index a56fce1c406..76c7d8a1ea8 100644 --- a/packages/compass-aggregations/src/components/resize-handle.tsx +++ b/packages/compass-aggregations/src/components/resize-handle.tsx @@ -11,7 +11,7 @@ const containerStyles = css({ position: 'absolute', width: '1.1px', height: '100%', - marginRight: spacing[1], + marginRight: spacing[100], }); const containerStylesDark = css({ diff --git a/packages/compass-aggregations/src/components/saved-pipelines/saved-pipeline-card.tsx b/packages/compass-aggregations/src/components/saved-pipelines/saved-pipeline-card.tsx index 8e803d9bbf0..afc2c61b699 100644 --- a/packages/compass-aggregations/src/components/saved-pipelines/saved-pipeline-card.tsx +++ b/packages/compass-aggregations/src/components/saved-pipelines/saved-pipeline-card.tsx @@ -17,13 +17,13 @@ type SavePipelineCardProps = { }; const containerStyles = css({ - margin: spacing[2], + margin: spacing[200], }); const card = css({ display: 'flex', alignItems: 'center', - padding: spacing[2], + padding: spacing[200], '&:hover .controls': { visibility: 'visible', }, @@ -34,7 +34,7 @@ const controls = css({ marginLeft: 'auto', display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], visibility: 'hidden', }); diff --git a/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx b/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx index 995a9fbade7..4facc499a97 100644 --- a/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx +++ b/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx @@ -42,8 +42,8 @@ const toolbarContentStyles = css({ overflow: 'hidden', display: 'flex', flexDirection: 'column', - padding: spacing[3], - paddingRight: spacing[5], // Extra right padding to account for close button. + padding: spacing[400], + paddingRight: spacing[800], // Extra right padding to account for close button. }); const cardsContainerStyles = css({ @@ -53,7 +53,7 @@ const cardsContainerStyles = css({ const emptyMessageStyles = css({ fontStyle: 'italic', - padding: spacing[3], + padding: spacing[400], }); type SavedPipelinesProps = { diff --git a/packages/compass-aggregations/src/components/search-no-results.tsx b/packages/compass-aggregations/src/components/search-no-results.tsx index 58c327ee7e5..4cd8836664b 100644 --- a/packages/compass-aggregations/src/components/search-no-results.tsx +++ b/packages/compass-aggregations/src/components/search-no-results.tsx @@ -14,7 +14,7 @@ const centeredContent = css({ alignItems: 'center', justifyContent: 'center', height: '100%', - padding: spacing[3], + padding: spacing[400], flexDirection: 'column', textAlign: 'center', }); diff --git a/packages/compass-aggregations/src/components/settings/settings.tsx b/packages/compass-aggregations/src/components/settings/settings.tsx index fed7659d061..a3e6a40ff6d 100644 --- a/packages/compass-aggregations/src/components/settings/settings.tsx +++ b/packages/compass-aggregations/src/components/settings/settings.tsx @@ -32,7 +32,7 @@ const aggregationLimitLabelId = 'aggregation-settings-limit-label'; const headerStyles = css({ display: 'flex', - padding: `${spacing[1]}px ${spacing[2]}px`, + padding: `${spacing[100]}px ${spacing[200]}px`, alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${palette.gray.light2}`, @@ -47,7 +47,7 @@ const headerDarkStyles = css({ const headerButtonGroupStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const containerStyles = css({ @@ -71,8 +71,8 @@ const containerDarkStyles = css({ }); const inputGroupStyles = css({ - margin: spacing[2], - padding: `${spacing[2]}px ${spacing[3]}px`, + margin: spacing[200], + padding: `${spacing[200]}px ${spacing[400]}px`, backgroundColor: palette.white, display: 'flex', alignItems: 'center', @@ -88,7 +88,7 @@ const inputControlStyles = css({ 'input[type="text"], input[type="number"]': { width: spacing[7] }, }); -const inputMetaStyles = css({ flexGrow: 1, p: { marginTop: spacing[2] } }); +const inputMetaStyles = css({ flexGrow: 1, p: { marginTop: spacing[200] } }); export type SettingsProps = { isCommenting: boolean; diff --git a/packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx b/packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx index ea8f242a4d5..f8490a21635 100644 --- a/packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx +++ b/packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx @@ -62,9 +62,9 @@ const codeEditorStyles = css({ const bannerStyles = css({ flex: 'none', - marginTop: spacing[2], - marginLeft: spacing[2], - marginRight: spacing[2], + marginTop: spacing[200], + marginLeft: spacing[200], + marginRight: spacing[200], textAlign: 'left', }); diff --git a/packages/compass-aggregations/src/components/stage-preview/atlas-stage-preview.tsx b/packages/compass-aggregations/src/components/stage-preview/atlas-stage-preview.tsx index 82004049012..f14c38a7169 100644 --- a/packages/compass-aggregations/src/components/stage-preview/atlas-stage-preview.tsx +++ b/packages/compass-aggregations/src/components/stage-preview/atlas-stage-preview.tsx @@ -14,8 +14,8 @@ const atlasContainerStyles = css({ display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: spacing[5], - gap: spacing[3], + padding: spacing[800], + gap: spacing[400], textAlign: 'center', }); diff --git a/packages/compass-aggregations/src/components/stage-preview/index.tsx b/packages/compass-aggregations/src/components/stage-preview/index.tsx index b1424fae37f..4b5aebde916 100644 --- a/packages/compass-aggregations/src/components/stage-preview/index.tsx +++ b/packages/compass-aggregations/src/components/stage-preview/index.tsx @@ -32,7 +32,7 @@ const centeredContent = css({ alignItems: 'center', justifyContent: 'center', height: '100%', - padding: spacing[3], + padding: spacing[400], flexDirection: 'column', }); @@ -73,7 +73,7 @@ function NoPreviewDocuments() { } const documentsStyles = css({ - gap: spacing[2], + gap: spacing[200], display: 'flex', alignItems: 'stretch', width: '100%', @@ -87,7 +87,7 @@ const documentContainerStyles = css({ flex: 'none', flexShrink: 0, width: '384px', - marginBottom: spacing[2], + marginBottom: spacing[200], }); const documentStyles = css({ @@ -168,8 +168,8 @@ function StagePreviewBody({ const containerStyles = css({ display: 'flex', flexDirection: 'column', - padding: spacing[3], - gap: spacing[2], + padding: spacing[400], + gap: spacing[200], flex: 1, }); diff --git a/packages/compass-aggregations/src/components/stage-preview/output-stage-preview.tsx b/packages/compass-aggregations/src/components/stage-preview/output-stage-preview.tsx index dca7994e386..262741c2e61 100644 --- a/packages/compass-aggregations/src/components/stage-preview/output-stage-preview.tsx +++ b/packages/compass-aggregations/src/components/stage-preview/output-stage-preview.tsx @@ -27,7 +27,7 @@ const stagePreviewStyles = css({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - gap: spacing[2], + gap: spacing[200], }); const stagePreviewTextStyles = css({ @@ -44,7 +44,7 @@ const stagePreviewLinkStyles = css({ const loaderStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); type OutputStageProps = { diff --git a/packages/compass-aggregations/src/components/stage-toolbar/index.tsx b/packages/compass-aggregations/src/components/stage-toolbar/index.tsx index 6232cd82252..333daa8deaa 100644 --- a/packages/compass-aggregations/src/components/stage-toolbar/index.tsx +++ b/packages/compass-aggregations/src/components/stage-toolbar/index.tsx @@ -31,8 +31,8 @@ const toolbarStyles = css({ borderBottomWidth: '1px', borderBottomStyle: 'solid', - padding: `0 ${spacing[2]}px`, - height: spacing[5] + spacing[1], + padding: `0 ${spacing[200]}px`, + height: spacing[800] + spacing[100], flexShrink: 0, flexDirection: 'row', @@ -67,14 +67,14 @@ const leftStyles = css({ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', - gap: spacing[1] * 3, + gap: spacing[100] * 3, width: '388px', // default width of the stage editor }); const shortSpacedStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[1], + gap: spacing[100], whiteSpace: 'nowrap', }); @@ -84,14 +84,14 @@ const textStyles = css({ overflow: 'hidden', textOverflow: 'ellipsis', // align with the text on stage preview header - paddingLeft: spacing[2], + paddingLeft: spacing[200], }); const rightStyles = css({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', - gap: spacing[1], + gap: spacing[100], }); type StageToolbarProps = { diff --git a/packages/compass-aggregations/src/components/stage-toolbar/option-menu-item.tsx b/packages/compass-aggregations/src/components/stage-toolbar/option-menu-item.tsx index 41f89301d90..cce717ae64f 100644 --- a/packages/compass-aggregations/src/components/stage-toolbar/option-menu-item.tsx +++ b/packages/compass-aggregations/src/components/stage-toolbar/option-menu-item.tsx @@ -12,7 +12,7 @@ import { const styles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); type OptionMenuItemProps = { diff --git a/packages/compass-aggregations/src/components/stage-wizard/index.tsx b/packages/compass-aggregations/src/components/stage-wizard/index.tsx index 10508f798ce..f236b7373de 100644 --- a/packages/compass-aggregations/src/components/stage-wizard/index.tsx +++ b/packages/compass-aggregations/src/components/stage-wizard/index.tsx @@ -38,38 +38,38 @@ import { useFieldsSchema } from '@mongodb-js/compass-field-store'; const containerStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], }); const headerStyles = css({ display: 'flex', justifyContent: 'space-between', - gap: spacing[2], - padding: spacing[3], + gap: spacing[200], + padding: spacing[400], cursor: 'grab', }); const headingStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], }); const wizardContentStyles = css({ - padding: spacing[3], + padding: spacing[400], display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], }); const cardFooterStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[3], + gap: spacing[400], }); const cardActionStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], marginLeft: 'auto', }); diff --git a/packages/compass-aggregations/src/components/stage.tsx b/packages/compass-aggregations/src/components/stage.tsx index 3d8b52285d6..09066296c86 100644 --- a/packages/compass-aggregations/src/components/stage.tsx +++ b/packages/compass-aggregations/src/components/stage.tsx @@ -55,8 +55,8 @@ const stagePreviewContainerStyles = css({ }); const stageEditorContainerStyles = css({ - paddingTop: spacing[2], - paddingBottom: spacing[2], + paddingTop: spacing[200], + paddingBottom: spacing[200], }); const RESIZABLE_DIRECTIONS = { diff --git a/packages/compass-aggregations/src/components/use-case-droppable-area/index.tsx b/packages/compass-aggregations/src/components/use-case-droppable-area/index.tsx index 236ecd2c9df..4a8f1cb9e05 100644 --- a/packages/compass-aggregations/src/components/use-case-droppable-area/index.tsx +++ b/packages/compass-aggregations/src/components/use-case-droppable-area/index.tsx @@ -24,7 +24,7 @@ const droppableContainerStyles = css({ display: 'flex', alignItems: 'center', justifyContent: 'center', - minHeight: spacing[5], + minHeight: spacing[800], position: 'relative', }); @@ -32,9 +32,9 @@ const dropMarkerStyles = css({ position: 'absolute', width: '100%', top: '50%', - height: spacing[1] / 4, + height: spacing[100] / 4, background: palette.green.dark1, - borderRadius: spacing[2], + borderRadius: spacing[200], }); const UseCaseDroppableArea = ({ diff --git a/packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx b/packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx index f5770511452..64e36dabede 100644 --- a/packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx +++ b/packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx @@ -17,7 +17,7 @@ const collectionHeaderActionsStyles = css({ display: 'flex', alignItems: 'center', overflow: 'hidden', - gap: spacing[2], + gap: spacing[200], }); function buildChartsUrl( diff --git a/packages/compass-collection/src/components/collection-header/collection-header.tsx b/packages/compass-collection/src/components/collection-header/collection-header.tsx index ac96847092f..02eb416e623 100644 --- a/packages/compass-collection/src/components/collection-header/collection-header.tsx +++ b/packages/compass-collection/src/components/collection-header/collection-header.tsx @@ -20,19 +20,19 @@ import { useConnectionInfo } from '@mongodb-js/compass-connections/provider'; import { getConnectionTitle } from '@mongodb-js/connection-info'; const collectionHeaderStyles = css({ - padding: spacing[3], - paddingTop: spacing[2], + padding: spacing[400], + paddingTop: spacing[200], paddingBottom: 0, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', - gap: spacing[2], + gap: spacing[200], }); const breadcrumbStyles = css({ - paddingTop: spacing[2], - paddingBottom: spacing[2], + paddingTop: spacing[200], + paddingBottom: spacing[200], }); const collectionHeaderLightStyles = css({ diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx index 2ae385b4448..eb8f894e5c2 100644 --- a/packages/compass-components/src/components/accordion.tsx +++ b/packages/compass-components/src/components/accordion.tsx @@ -35,7 +35,7 @@ const buttonDarkThemeStyles = css({ color: palette.white, }); const buttonIconContainerStyles = css({ - padding: spacing[1] / 2, // matches the line-height (16 + 4) + padding: spacing[100] / 2, // matches the line-height (16 + 4) paddingLeft: 0, }); const buttonTextStyles = css({ @@ -43,7 +43,7 @@ const buttonTextStyles = css({ }); const buttonHintStyles = css({ margin: 0, - marginLeft: spacing[1], + marginLeft: spacing[100], padding: 0, display: 'inline', }); diff --git a/packages/compass-components/src/components/actions/small-icon-button.tsx b/packages/compass-components/src/components/actions/small-icon-button.tsx index 719a6377a76..718df876110 100644 --- a/packages/compass-components/src/components/actions/small-icon-button.tsx +++ b/packages/compass-components/src/components/actions/small-icon-button.tsx @@ -20,8 +20,8 @@ const buttonSizeStyle: Record = { default: undefined, small: css({ flex: 'none', - width: `${spacing[4]}px !important`, - height: `${spacing[4]}px !important`, + width: `${spacing[600]}px !important`, + height: `${spacing[600]}px !important`, }), xsmall: css({ flex: 'none', diff --git a/packages/compass-components/src/components/breadcrumb.tsx b/packages/compass-components/src/components/breadcrumb.tsx index 335e6d6da90..3edff348990 100644 --- a/packages/compass-components/src/components/breadcrumb.tsx +++ b/packages/compass-components/src/components/breadcrumb.tsx @@ -12,7 +12,7 @@ export type BreadcrumbItem = { const breadcrumbStyles = css({ display: 'flex', - gap: spacing[1], + gap: spacing[100], alignItems: 'center', minWidth: 0, }); diff --git a/packages/compass-components/src/components/bson-value.tsx b/packages/compass-components/src/components/bson-value.tsx index 5660bce7b8b..f8da5f485e5 100644 --- a/packages/compass-components/src/components/bson-value.tsx +++ b/packages/compass-components/src/components/bson-value.tsx @@ -101,7 +101,7 @@ const nonSelectable = css({ const encryptedHelpLinkStyle = css({ color: 'inherit', - marginLeft: spacing[1], + marginLeft: spacing[100], }); const ObjectIdValue: React.FunctionComponent> = ({ diff --git a/packages/compass-components/src/components/collapsible-field-set.tsx b/packages/compass-components/src/components/collapsible-field-set.tsx index fe73bc669c4..155bbb31bc3 100644 --- a/packages/compass-components/src/components/collapsible-field-set.tsx +++ b/packages/compass-components/src/components/collapsible-field-set.tsx @@ -6,11 +6,11 @@ import { Link, Checkbox, Label } from './leafygreen'; import FormFieldContainer from './form-field-container'; const infoLinkStyles = css({ - marginLeft: spacing[1], + marginLeft: spacing[100], }); const fieldsetStyles = css({ - paddingLeft: spacing[4], + paddingLeft: spacing[600], }); export type CollapsibleFieldSetProps = { diff --git a/packages/compass-components/src/components/document-list/element-actions.tsx b/packages/compass-components/src/components/document-list/element-actions.tsx index 612ff545bfe..be0a5e6232f 100644 --- a/packages/compass-components/src/components/document-list/element-actions.tsx +++ b/packages/compass-components/src/components/document-list/element-actions.tsx @@ -82,7 +82,7 @@ const addFieldButton = css({ const menu = css({ width: 'auto', // Replicating leafygreen ~200px but as a min width instead of static width - minWidth: spacing[6] * 3, + minWidth: spacing[1600] * 3, }); const menuItem = css({ diff --git a/packages/compass-components/src/components/document-list/element-editors.tsx b/packages/compass-components/src/components/document-list/element-editors.tsx index 3082496d17c..95d784feb92 100644 --- a/packages/compass-components/src/components/document-list/element-editors.tsx +++ b/packages/compass-components/src/components/document-list/element-editors.tsx @@ -327,8 +327,8 @@ const typeEditor = css({ appearance: 'none', // Accounting for the margin that `appearance: auto` will add to the shadow // dom inside select node - paddingLeft: spacing[1], - width: `calc(${longestTypeNameCharLength}ch + ${spacing[4]}px)`, + paddingLeft: spacing[100], + width: `calc(${longestTypeNameCharLength}ch + ${spacing[600]}px)`, '&:hover': { color: 'inherit', cursor: 'pointer', diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx index cecbe23e8c8..f41a90a0bf3 100644 --- a/packages/compass-components/src/components/document-list/element.tsx +++ b/packages/compass-components/src/components/document-list/element.tsx @@ -257,7 +257,7 @@ const elementActions = css({ const elementLineNumber = css({ flex: 'none', position: 'relative', - marginLeft: spacing[1], + marginLeft: spacing[100], boxSizing: 'content-box', }); @@ -313,7 +313,7 @@ const elementSpacer = css({ }); const elementExpand = css({ - width: spacing[3], + width: spacing[400], flex: 'none', display: 'flex', alignItems: 'center', @@ -342,7 +342,7 @@ const elementValue = css({ const elementType = css({ flex: 'none', - marginLeft: spacing[1], + marginLeft: spacing[100], }); const actions = css({ @@ -455,7 +455,7 @@ export const HadronElement: React.FunctionComponent<{ // Only account for ~ line count length if we are in editing mode if (editingEnabled) { const charCount = String(lineNumberSize).length; - return charCount > 2 ? `${charCount}.5ch` : spacing[3]; + return charCount > 2 ? `${charCount}.5ch` : spacing[400]; } return spacing[400]; }, [lineNumberSize, editingEnabled]); diff --git a/packages/compass-components/src/components/empty-content.tsx b/packages/compass-components/src/components/empty-content.tsx index 16d11728eac..beef022bb10 100644 --- a/packages/compass-components/src/components/empty-content.tsx +++ b/packages/compass-components/src/components/empty-content.tsx @@ -11,9 +11,9 @@ const containerStyles = css({ flexDirection: 'column', alignItems: 'center', textAlign: 'center', - margin: `${spacing[3]}px auto`, + margin: `${spacing[400]}px auto`, marginTop: spacing[7], - padding: `0 ${spacing[3]}px`, + padding: `0 ${spacing[400]}px`, }); const iconStyles = css({ @@ -22,7 +22,7 @@ const iconStyles = css({ maxHeight: '80px', }); const titleStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], }); const titleLightStyles = css({ color: palette.green.dark2, @@ -31,15 +31,15 @@ const titleDarkStyles = css({ color: palette.green.light1, }); const subTitleStyles = css({ - marginTop: spacing[2], - maxWidth: spacing[6] * 6, + marginTop: spacing[200], + maxWidth: spacing[1600] * 6, }); const callToActionStyles = css({ - marginTop: spacing[4], + marginTop: spacing[600], maxWidth: '600px', }); const callToActionLinkContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], maxWidth: '600px', }); diff --git a/packages/compass-components/src/components/error-boundary.tsx b/packages/compass-components/src/components/error-boundary.tsx index 1c5d79a2795..ab7c1c80d53 100644 --- a/packages/compass-components/src/components/error-boundary.tsx +++ b/packages/compass-components/src/components/error-boundary.tsx @@ -6,7 +6,7 @@ import { spacing } from '@leafygreen-ui/tokens'; import { Banner } from './leafygreen'; const errorContainerStyles = css({ - padding: spacing[3], + padding: spacing[400], width: '100%', }); diff --git a/packages/compass-components/src/components/file-input.tsx b/packages/compass-components/src/components/file-input.tsx index f146d8aa537..2bb2e0addb2 100644 --- a/packages/compass-components/src/components/file-input.tsx +++ b/packages/compass-components/src/components/file-input.tsx @@ -24,8 +24,8 @@ import { const { base: redBaseColor } = palette.red; const containerStyles = css({ - marginTop: spacing[2], - marginBottom: spacing[2], + marginTop: spacing[200], + marginBottom: spacing[200], marginRight: 'auto', marginLeft: 'auto', }); @@ -33,7 +33,7 @@ const containerStyles = css({ const formItemSmallStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[1], + gap: spacing[100], }); const formItemHorizontalStyles = css({ @@ -47,14 +47,14 @@ const removeFileLineStyles = css({ }); const removeFileButtonStyles = css({ - marginLeft: spacing[1], + marginLeft: spacing[100], }); const buttonSmallStyles = css({ border: 'none', background: 'none', fontWeight: 'normal', - marginLeft: spacing[2], + marginLeft: spacing[200], '&:hover': { background: 'none', @@ -85,12 +85,12 @@ const errorMessageStyles = css({ const labelHorizontalStyles = css({ width: '90%', - paddingRight: spacing[3], + paddingRight: spacing[400], }); const optionalLabelStyles = css({ color: palette.gray.base, - marginTop: spacing[1], + marginTop: spacing[100], fontStyle: 'italic', fontWeight: 'normal', fontSize: 12, diff --git a/packages/compass-components/src/components/form-field-container.tsx b/packages/compass-components/src/components/form-field-container.tsx index 22596b0fef0..75a2e1f85e0 100644 --- a/packages/compass-components/src/components/form-field-container.tsx +++ b/packages/compass-components/src/components/form-field-container.tsx @@ -3,7 +3,7 @@ import { css, cx } from '@leafygreen-ui/emotion'; import React from 'react'; const formFieldContainerStyles = css({ - margin: `${spacing[4]}px 0`, + margin: `${spacing[600]}px 0`, }); function FormFieldContainer({ diff --git a/packages/compass-components/src/components/icons/favorite-icon.tsx b/packages/compass-components/src/components/icons/favorite-icon.tsx index 6f29c98c0bf..e9ee6791fbf 100644 --- a/packages/compass-components/src/components/icons/favorite-icon.tsx +++ b/packages/compass-components/src/components/icons/favorite-icon.tsx @@ -9,7 +9,7 @@ function FavoriteIcon({ isFavorite = false, favoriteColor = palette.yellow.base, showCircle = true, - size = spacing[4], + size = spacing[600], }: { isFavorite?: boolean; favoriteColor?: string; diff --git a/packages/compass-components/src/components/icons/no-saved-items-icon.tsx b/packages/compass-components/src/components/icons/no-saved-items-icon.tsx index 17065d9879f..05953b1fb91 100644 --- a/packages/compass-components/src/components/icons/no-saved-items-icon.tsx +++ b/packages/compass-components/src/components/icons/no-saved-items-icon.tsx @@ -8,7 +8,7 @@ type NoSavedItemsIconProps = { size?: number; }; -const defaultSize = spacing[4] * 3; +const defaultSize = spacing[600] * 3; const NoSavedItemsIcon: React.FunctionComponent = ({ size = defaultSize, diff --git a/packages/compass-components/src/components/index-keys-badge.tsx b/packages/compass-components/src/components/index-keys-badge.tsx index b1021281dc7..0e2eeb63ee6 100644 --- a/packages/compass-components/src/components/index-keys-badge.tsx +++ b/packages/compass-components/src/components/index-keys-badge.tsx @@ -17,7 +17,7 @@ const keyListStyles = css({ const badgeStyles = css({ // Override LeafyGreen's uppercase styles as we want to keep the case sensitivity of the key. textTransform: 'none', - gap: spacing[1], + gap: spacing[100], }); type KeyListProps = { diff --git a/packages/compass-components/src/components/inline-info-link.tsx b/packages/compass-components/src/components/inline-info-link.tsx index ad715f5e255..7925d49af99 100644 --- a/packages/compass-components/src/components/inline-info-link.tsx +++ b/packages/compass-components/src/components/inline-info-link.tsx @@ -5,8 +5,8 @@ import { spacing } from '@leafygreen-ui/tokens'; import { Icon, IconButton } from './leafygreen'; const infoButtonStyles = css({ - marginTop: -spacing[2], - marginBottom: -spacing[2], + marginTop: -spacing[200], + marginBottom: -spacing[200], }); type InlineInfoLinkProps = { diff --git a/packages/compass-components/src/components/interactive-popover.tsx b/packages/compass-components/src/components/interactive-popover.tsx index 41cb2f47e94..c8bb22cda41 100644 --- a/packages/compass-components/src/components/interactive-popover.tsx +++ b/packages/compass-components/src/components/interactive-popover.tsx @@ -9,7 +9,7 @@ import { rgba } from 'polished'; import { useDarkMode } from '../hooks/use-theme'; import { useHotkeys } from '../hooks/use-hotkeys'; -const borderRadius = spacing[2]; +const borderRadius = spacing[200]; const contentContainerStyles = css({ display: 'flex', @@ -37,8 +37,8 @@ const contentContainerStylesDark = css({ const closeButtonStyles = css({ position: 'absolute', - top: spacing[2], - right: spacing[2], + top: spacing[200], + right: spacing[200], }); type InteractivePopoverProps = { diff --git a/packages/compass-components/src/components/keyline-card.tsx b/packages/compass-components/src/components/keyline-card.tsx index adaadb78ce6..929c3059467 100644 --- a/packages/compass-components/src/components/keyline-card.tsx +++ b/packages/compass-components/src/components/keyline-card.tsx @@ -9,7 +9,7 @@ import { mergeProps } from '../utils/merge-props'; const containerStyles = css({ border: `1px solid ${palette.gray.light2}`, - borderRadius: spacing[2], + borderRadius: spacing[200], transition: `${transitionDuration.default}ms ease-in-out`, transitionProperty: `border, box-shadow`, }); diff --git a/packages/compass-components/src/components/list-editor.tsx b/packages/compass-components/src/components/list-editor.tsx index 780c958bf21..e637032ffbb 100644 --- a/packages/compass-components/src/components/list-editor.tsx +++ b/packages/compass-components/src/components/list-editor.tsx @@ -6,13 +6,13 @@ import { IconButton, Icon } from './leafygreen'; const listEditorStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[2], + gap: spacing[200], }); const listItemStyles = css({ alignItems: 'center', display: 'flex', - gap: spacing[1], + gap: spacing[100], }); const itemContentStyles = css({ diff --git a/packages/compass-components/src/components/loader.tsx b/packages/compass-components/src/components/loader.tsx index 6b795d5d9f4..ffa567b569a 100644 --- a/packages/compass-components/src/components/loader.tsx +++ b/packages/compass-components/src/components/loader.tsx @@ -7,11 +7,11 @@ import { Subtitle, Button } from './leafygreen'; const containerStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - maxWidth: spacing[6] * 8, + maxWidth: spacing[1600] * 8, }); const textStyles = css({ @@ -95,7 +95,11 @@ function SpinLoaderWithLabel({ return (
- + {progressText} diff --git a/packages/compass-components/src/components/modals/info-modal.tsx b/packages/compass-components/src/components/modals/info-modal.tsx index a431f69f860..6905465a925 100644 --- a/packages/compass-components/src/components/modals/info-modal.tsx +++ b/packages/compass-components/src/components/modals/info-modal.tsx @@ -9,7 +9,7 @@ import { ModalBody } from './modal-body'; import { ModalHeader } from './modal-header'; import { ModalFooterButton } from './modal-footer-button'; -const paddingBottomStyles = css({ paddingBottom: spacing[5] }); +const paddingBottomStyles = css({ paddingBottom: spacing[800] }); type InfoModalProps = React.ComponentProps & { title: string; diff --git a/packages/compass-components/src/components/modals/modal-body.tsx b/packages/compass-components/src/components/modals/modal-body.tsx index d005ae3845c..f2b92c799aa 100644 --- a/packages/compass-components/src/components/modals/modal-body.tsx +++ b/packages/compass-components/src/components/modals/modal-body.tsx @@ -12,16 +12,16 @@ export const Variant = { export type Variant = typeof Variant[keyof typeof Variant]; const contentStyle = css({ - padding: `0 ${spacing[5]}px`, - paddingBottom: spacing[1], // space needed for the focus ring on the last field + padding: `0 ${spacing[800]}px`, + paddingBottom: spacing[100], // space needed for the focus ring on the last field fontFamily: fontFamilies.default, fontSize: '13px', lineHeight: '20px', - maxHeight: `calc(100vh - ${spacing[6] * 5}px)`, + maxHeight: `calc(100vh - ${spacing[1600] * 5}px)`, overflow: 'auto', '&:first-child': { - paddingTop: spacing[5], + paddingTop: spacing[800], }, }); @@ -35,7 +35,7 @@ const variantStyle = { // Leafygreen adds an upper border // to the footer in dark mode const darkModeStyle = css({ - paddingBottom: spacing[3], + paddingBottom: spacing[400], }); type ModalBodyProps = { diff --git a/packages/compass-components/src/components/modals/modal-header.tsx b/packages/compass-components/src/components/modals/modal-header.tsx index 0838cdfe390..9816f883117 100644 --- a/packages/compass-components/src/components/modals/modal-header.tsx +++ b/packages/compass-components/src/components/modals/modal-header.tsx @@ -15,7 +15,7 @@ export const Variant = { export type Variant = typeof Variant[keyof typeof Variant]; const headerStyle = css({ - padding: spacing[5], + padding: spacing[800], paddingBottom: 0, }); diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx index 0bbd28bd8c2..f3ade3779eb 100644 --- a/packages/compass-components/src/components/modals/modal.tsx +++ b/packages/compass-components/src/components/modals/modal.tsx @@ -17,10 +17,10 @@ const contentStyles = css({ const modalFullScreenStyles = css({ '& > div': { - paddingTop: spacing[4], - paddingBottom: spacing[4], - paddingLeft: spacing[5], - paddingRight: spacing[5], + paddingTop: spacing[600], + paddingBottom: spacing[600], + paddingLeft: spacing[800], + paddingRight: spacing[800], height: '100vh', maxHeight: '100vh', }, diff --git a/packages/compass-components/src/components/options-toggle.tsx b/packages/compass-components/src/components/options-toggle.tsx index f6394e4c896..a147c5a4c90 100644 --- a/packages/compass-components/src/components/options-toggle.tsx +++ b/packages/compass-components/src/components/options-toggle.tsx @@ -15,10 +15,10 @@ const optionsButtonStyles = css({ // Reset button styles. backgroundColor: 'transparent', border: 'none', - paddingTop: spacing[1], - paddingBottom: spacing[1], - paddingLeft: spacing[2], - paddingRight: spacing[2], + paddingTop: spacing[100], + paddingBottom: spacing[100], + paddingLeft: spacing[200], + paddingRight: spacing[200], }); const optionStyles = css({ @@ -56,7 +56,7 @@ export const OptionsToggle: React.FunctionComponent = ({ const maxLabelLength = Math.max(label(true).length, label(false).length); return { // Maximum char length of the more / less label + icon size + button padding - width: `calc(${maxLabelLength}ch + ${spacing[3]}px + ${spacing[2]}px)`, + width: `calc(${maxLabelLength}ch + ${spacing[400]}px + ${spacing[200]}px)`, }; }, [label]); const optionsAriaLabel = ariaLabel(isExpanded); diff --git a/packages/compass-components/src/components/placeholder.tsx b/packages/compass-components/src/components/placeholder.tsx index 56172ed2c8c..2b29b1ef765 100644 --- a/packages/compass-components/src/components/placeholder.tsx +++ b/packages/compass-components/src/components/placeholder.tsx @@ -60,7 +60,7 @@ const Placeholder: React.FunctionComponent< minChar = 5, maxChar = 15, width: propsWidth, - height: propsHeight = spacing[3], + height: propsHeight = spacing[400], gradientStart, gradientEnd, style: propsStyle, diff --git a/packages/compass-components/src/components/radio-box-group.tsx b/packages/compass-components/src/components/radio-box-group.tsx index 74561fb479a..1d58ad5a6f9 100644 --- a/packages/compass-components/src/components/radio-box-group.tsx +++ b/packages/compass-components/src/components/radio-box-group.tsx @@ -5,7 +5,7 @@ import { spacing } from '@leafygreen-ui/tokens'; import { RadioBoxGroup as LeafyGreenRadioBoxGroup } from './leafygreen'; const radioBoxGroupStyles = css({ - marginTop: spacing[1], + marginTop: spacing[100], }); function RadioBoxGroup( diff --git a/packages/compass-components/src/components/signal-popover.tsx b/packages/compass-components/src/components/signal-popover.tsx index ba2c7ad7955..c658ff5ce4b 100644 --- a/packages/compass-components/src/components/signal-popover.tsx +++ b/packages/compass-components/src/components/signal-popover.tsx @@ -132,10 +132,10 @@ const signalCardContentStyles = css({ display: 'grid', gridTemplateColumns: '1fr', gridTemplateRows: 'auto 1fr auto', - paddingTop: spacing[4], - paddingBottom: spacing[4], - paddingLeft: spacing[4], - paddingRight: spacing[4], + paddingTop: spacing[600], + paddingBottom: spacing[600], + paddingLeft: spacing[600], + paddingRight: spacing[600], backgroundColor: 'var(--signalCardBackgroundColor)', }); @@ -150,8 +150,8 @@ const signalCardContentDarkModeStyles = css({ }); const signalCardTitleStyles = css({ - marginBottom: spacing[2], - fontSize: spacing[3], + marginBottom: spacing[200], + fontSize: spacing[400], }); // This is to avoid the longer card title getting shadowed under the close icon @@ -161,7 +161,7 @@ const signalCardTitleStylesWithOneSignal = css({ }); const signalCardDescriptionStyles = css({ - marginBottom: spacing[3], + marginBottom: spacing[400], }); const signalCardActionGroupStyles = css({ @@ -262,11 +262,11 @@ const multiSignalHeaderContainerStyles = css({ '--multiSignalHeaderBackgroundColor': palette.gray.light3, display: 'flex', alignItems: 'center', - paddingTop: spacing[1], - paddingBottom: spacing[1], - paddingLeft: spacing[2], - paddingRight: spacing[4], - gap: spacing[1], + paddingTop: spacing[100], + paddingBottom: spacing[100], + paddingLeft: spacing[200], + paddingRight: spacing[600], + gap: spacing[100], backgroundColor: 'var(--multiSignalHeaderBackgroundColor)', boxShadow: `inset 0 -1px 0 var(--multiSignalHeaderBorderColor)`, fontVariantNumeric: 'tabular-nums', @@ -541,7 +541,7 @@ const SignalPopover: React.FunctionComponent = ({ } open={popoverOpen} setOpen={onPopoverOpenChange} - spacing={spacing[2]} + spacing={spacing[200]} trigger={({ children, ...triggerProps }) => { const onTriggerClick = (evt: React.MouseEvent) => { evt.stopPropagation(); diff --git a/packages/compass-components/src/components/tab-nav-bar.tsx b/packages/compass-components/src/components/tab-nav-bar.tsx index ec87e4d1dc5..a519ce8fdc6 100644 --- a/packages/compass-components/src/components/tab-nav-bar.tsx +++ b/packages/compass-components/src/components/tab-nav-bar.tsx @@ -16,7 +16,7 @@ const containerStyles = css({ const tabsContainerStyles = css({ flex: 'none', - padding: `0 ${spacing[3]}px`, + padding: `0 ${spacing[400]}px`, }); const tabsContainerDarkStyles = css({ diff --git a/packages/compass-components/src/components/workspace-container.tsx b/packages/compass-components/src/components/workspace-container.tsx index ef67a513d93..6a50ec67553 100644 --- a/packages/compass-components/src/components/workspace-container.tsx +++ b/packages/compass-components/src/components/workspace-container.tsx @@ -30,7 +30,7 @@ const scrollBoxStyles = css({ zIndex: 0, }); -const shadowHeight = spacing[4]; +const shadowHeight = spacing[600]; const fadeIn = keyframes({ from: { @@ -62,7 +62,7 @@ const boxShadow = (color: string) => `0px 2px ${shadowHeight}px -1px ${color}`; const shadowStyles = css({ height: shadowHeight, - borderRadius: spacing[2], + borderRadius: spacing[200], width: `calc(100% - ${shadowHeight}px)`, margin: '0 auto', diff --git a/packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx b/packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx index 206647d4513..d85852a4a04 100644 --- a/packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx +++ b/packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx @@ -43,7 +43,7 @@ const tabsContainerStyles = css({ whiteSpace: 'nowrap', '::-webkit-scrollbar': { ':horizontal': { - height: spacing[1], + height: spacing[100], }, }, minHeight: 36, @@ -80,7 +80,7 @@ const newTabContainerStyles = css({ }); const createNewTabButtonStyles = css({ - margin: spacing[1], + margin: spacing[100], }); const sortableItemContainerStyles = css({ diff --git a/packages/compass-components/src/hooks/use-focus-ring.ts b/packages/compass-components/src/hooks/use-focus-ring.ts index f7da8f7ddfa..250426cd09a 100644 --- a/packages/compass-components/src/hooks/use-focus-ring.ts +++ b/packages/compass-components/src/hooks/use-focus-ring.ts @@ -15,7 +15,7 @@ const focusRingStyles = css({ right: 3, bottom: 3, left: 3, - borderRadius: spacing[1], + borderRadius: spacing[100], boxShadow: `0 0 0 0 transparent`, transition: 'box-shadow .16s ease-in', zIndex: 1, @@ -79,7 +79,7 @@ const focusRingHover = (darkMode: boolean) => * @param options.outer show focus ring outside the component (default: false) * @param options.focusWithin show focus ring on focus within instead of focus visible (default: false) * @param options.hover show focus ring on hover in addition to focus (default: false) - * @param options.radius focus ring radius (default: 4px or spacing[1] from leafygreen) + * @param options.radius focus ring radius (default: 4px or spacing[100] from leafygreen) * @returns props to apply to the component */ export function useFocusRing({ @@ -94,7 +94,7 @@ export function useFocusRing({ focusWithin?: boolean; /** show focus ring on hover in addition to focus (default: false) */ hover?: boolean; - /** focus ring radius (default: 4px or spacing[1] from leafygreen) */ + /** focus ring radius (default: 4px or spacing[100] from leafygreen) */ radius?: number; } = {}) { const darkMode = useDarkMode(); diff --git a/packages/compass-components/src/hooks/use-hotkeys.tsx b/packages/compass-components/src/hooks/use-hotkeys.tsx index faf5b47467b..6b9db54284c 100644 --- a/packages/compass-components/src/hooks/use-hotkeys.tsx +++ b/packages/compass-components/src/hooks/use-hotkeys.tsx @@ -6,7 +6,7 @@ import { css } from '@leafygreen-ui/emotion'; const shortcutContainerStyles = css({ display: 'flex', - gap: spacing[1], + gap: spacing[100], }); const isMac = () => navigator.userAgent.indexOf('Mac') !== -1; diff --git a/packages/compass-components/src/hooks/use-sort.tsx b/packages/compass-components/src/hooks/use-sort.tsx index 5fdec02a9c5..485e555e358 100644 --- a/packages/compass-components/src/hooks/use-sort.tsx +++ b/packages/compass-components/src/hooks/use-sort.tsx @@ -7,7 +7,7 @@ import { Button, Icon, Label, Option, Select } from '../components/leafygreen'; const controlsContainer = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const label = css({ @@ -86,7 +86,7 @@ export function useSortControls( aria-labelledby={labelId} allowDeselect={false} className={select} - style={{ minWidth: `calc(${longestLabel}ch + ${spacing[6]}px)` }} + style={{ minWidth: `calc(${longestLabel}ch + ${spacing[1600]}px)` }} onChange={(value) => { dispatch({ type: 'change-name', name: (value as T) || null }); }} diff --git a/packages/compass-connection-import-export/src/components/import-modal.tsx b/packages/compass-connection-import-export/src/components/import-modal.tsx index 206d3faa1eb..e78713f2e89 100644 --- a/packages/compass-connection-import-export/src/components/import-modal.tsx +++ b/packages/compass-connection-import-export/src/components/import-modal.tsx @@ -23,7 +23,7 @@ const tableStyles = css({ }); const existingFavoriteBadgeStyles = css({ - marginLeft: spacing[2], + marginLeft: spacing[200], }); const selectTableColumns = [['displayName', 'Connection Name']] as const; diff --git a/packages/compass-connection-import-export/src/components/passphrase.tsx b/packages/compass-connection-import-export/src/components/passphrase.tsx index 47df78deb06..7670b2f114e 100644 --- a/packages/compass-connection-import-export/src/components/passphrase.tsx +++ b/packages/compass-connection-import-export/src/components/passphrase.tsx @@ -4,7 +4,7 @@ import { css, Icon, spacing, TextInput } from '@mongodb-js/compass-components'; const passphraseInputStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[1], + gap: spacing[100], }); type PassphraseProps = { diff --git a/packages/compass-connections/src/components/legacy-connections-modal.tsx b/packages/compass-connections/src/components/legacy-connections-modal.tsx index bd3be4d5214..d660eb8c0a8 100644 --- a/packages/compass-connections/src/components/legacy-connections-modal.tsx +++ b/packages/compass-connections/src/components/legacy-connections-modal.tsx @@ -20,21 +20,21 @@ const LEGACY_MODAL_STORAGE_KEY = 'hide_legacy_connections_modal'; const listStyle = css({ listStyle: 'decimal', - paddingLeft: spacing[5], + paddingLeft: spacing[800], li: { - marginTop: spacing[1], - marginBottom: spacing[1], + marginTop: spacing[100], + marginBottom: spacing[100], }, }); const bodyStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], }); const bannerContentStyles = css({ - maxHeight: spacing[6] * 2, + maxHeight: spacing[1600] * 2, overflowY: 'scroll', }); diff --git a/packages/compass-connections/src/components/non-genuine-connection-modal.tsx b/packages/compass-connections/src/components/non-genuine-connection-modal.tsx index e71745dbe73..20eb41af456 100644 --- a/packages/compass-connections/src/components/non-genuine-connection-modal.tsx +++ b/packages/compass-connections/src/components/non-genuine-connection-modal.tsx @@ -14,8 +14,8 @@ import { } from '@mongodb-js/connection-info'; const modalBodyStyles = css({ - marginTop: spacing[3], - marginBottom: spacing[2], + marginTop: spacing[400], + marginBottom: spacing[200], }); export function showNonGenuineMongoDBWarningModal( diff --git a/packages/compass-crud/src/components/bulk-delete-modal.tsx b/packages/compass-crud/src/components/bulk-delete-modal.tsx index c9090fd3cd0..31408f6f1c1 100644 --- a/packages/compass-crud/src/components/bulk-delete-modal.tsx +++ b/packages/compass-crud/src/components/bulk-delete-modal.tsx @@ -19,7 +19,7 @@ import ReadonlyDocument from './readonly-document'; import type { Document } from 'bson'; const modalFooterSpacingStyles = css({ - gap: spacing[2], + gap: spacing[200], }); const documentListWrapper = css({ @@ -28,31 +28,31 @@ const documentListWrapper = css({ flex: 'none', flexShrink: 0, overflow: 'auto', - marginBottom: spacing[2], - gap: spacing[2], + marginBottom: spacing[200], + gap: spacing[200], maxHeight: '340px', }); const documentContainerStyles = css({ display: 'flex', flexShrink: 0, - marginBottom: spacing[2], + marginBottom: spacing[200], }); const modalBodySpacingStyles = css({ - marginTop: spacing[3] - spacing[1], // see queryBarStyles below - paddingLeft: spacing[5], + marginTop: spacing[400] - spacing[100], // see queryBarStyles below + paddingLeft: spacing[800], display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], }); const queryBarStyles = css({ display: 'flex', flexDirection: 'row', alignItems: 'center', - gap: spacing[3], - marginTop: spacing[1], // don't cut off the focus/hover ring on the Export button + gap: spacing[400], + marginTop: spacing[100], // don't cut off the focus/hover ring on the Export button }); const exportToLanguageButtonStyles = css({ diff --git a/packages/compass-crud/src/components/bulk-update-modal.tsx b/packages/compass-crud/src/components/bulk-update-modal.tsx index cd9a44402bf..9d9a0b7ef14 100644 --- a/packages/compass-crud/src/components/bulk-update-modal.tsx +++ b/packages/compass-crud/src/components/bulk-update-modal.tsx @@ -41,10 +41,10 @@ const modalContentStyles = css({ }); const columnsStyles = css({ - marginTop: spacing[4], + marginTop: spacing[600], display: 'grid', width: '100%', - gap: spacing[4], + gap: spacing[600], // make sure the readonly filter field starts scrolling for large/complicated // filters rather than the 1st column taking up all the space and then leaving // nothing for the preview @@ -53,7 +53,7 @@ const columnsStyles = css({ const queryStyles = css({ display: 'flex', - gap: spacing[4], + gap: spacing[600], flexDirection: 'column', }); @@ -64,7 +64,7 @@ const updateFieldStyles = css({ }); const descriptionStyles = css({ - marginBottom: spacing[2], + marginBottom: spacing[200], }); const previewDescriptionStyles = css({ @@ -72,8 +72,8 @@ const previewDescriptionStyles = css({ }); const codeContainerStyles = css({ - paddingTop: spacing[2], - paddingBottom: spacing[2], + paddingTop: spacing[200], + paddingBottom: spacing[200], }); const codeDarkContainerStyles = css({}); @@ -83,33 +83,33 @@ const codeLightContainerStyles = css({ }); const multilineContainerStyles = css({ - height: `calc(100% - ${spacing[6]})`, + height: `calc(100% - ${spacing[1600]})`, }); const bannerContainerStyles = css({ // don't jump when an error appears - minHeight: spacing[4] * 2 + 2, + minHeight: spacing[600] * 2 + 2, overflow: 'hidden', }); const bannerStyles = css({ flex: 'none', - marginTop: spacing[2], - marginLeft: spacing[2], - marginRight: spacing[2], + marginTop: spacing[200], + marginLeft: spacing[200], + marginRight: spacing[200], textAlign: 'left', }); const emptyStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], }); const updatePreviewStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], contain: 'size', height: 'calc(100% - 20px)', overflowY: 'scroll', @@ -124,7 +124,7 @@ const modalFooterToolbarSpacingStyles = css({ const modalFooterFormActionsStyles = css({ display: 'flex', flexDirection: 'row', - gap: spacing[2], + gap: spacing[200], }); const modalFooterAdditionalActionsStyles = css({}); @@ -132,8 +132,8 @@ const modalFooterAdditionalActionsStyles = css({}); const inlineSaveQueryModalStyles = css({ display: 'flex', flexDirection: 'row', - padding: spacing[3], - gap: spacing[3], + padding: spacing[400], + gap: spacing[400], }); const inlineSaveQueryModalInputStyles = css({ @@ -245,7 +245,7 @@ const previewZeroStateIconStyles = css({ margin: 'auto', display: 'flex', flexDirection: 'column', - gap: spacing[2], + gap: spacing[200], alignItems: 'center', }); @@ -501,7 +501,7 @@ export default function BulkUpdateModal({ } const previewCardStyles = css({ - padding: spacing[3], + padding: spacing[400], }); function UpdatePreviewDocument({ diff --git a/packages/compass-crud/src/components/change-view/change-view.tsx b/packages/compass-crud/src/components/change-view/change-view.tsx index 7b7b5119b3f..d8494430b2c 100644 --- a/packages/compass-crud/src/components/change-view/change-view.tsx +++ b/packages/compass-crud/src/components/change-view/change-view.tsx @@ -45,7 +45,7 @@ const expandButtonStyles = css({ display: 'flex', alignSelf: 'center', color: 'inherit', - paddingRight: spacing[1], + paddingRight: spacing[100], }); const addedStylesDark = css({ @@ -89,7 +89,7 @@ const changeArrayItemStyles = css({ const changeKeyIndexStyles = css({ fontWeight: 'bold', alignSelf: 'flex-start', - paddingRight: spacing[1], + paddingRight: spacing[100], }); const changeSummaryStyles = css({ @@ -193,7 +193,7 @@ function ChangeArrayItemObject({ item }: { item: ObjectItemBranch }) { } const changeLeafStyles = css({ - paddingLeft: spacing[3], + paddingLeft: spacing[400], }); function ChangeArrayItemLeaf({ item }: { item: ItemBranch }) { @@ -231,7 +231,7 @@ function ChangeArrayItem({ item }: { item: ItemBranch }) { } const sepStyles = css({ - marginRight: spacing[1], + marginRight: spacing[100], }); function Sep() { @@ -241,7 +241,7 @@ function Sep() { const changeArrayStyles = css({ display: 'flex', flexDirection: 'column', - paddingLeft: spacing[3], + paddingLeft: spacing[400], }); const changeArrayInlineWrapStyles = css({ @@ -249,7 +249,7 @@ const changeArrayInlineWrapStyles = css({ }); const changeArrayInlineStyles = css({ - marginLeft: spacing[4] + spacing[1], + marginLeft: spacing[600] + spacing[100], display: 'inline-flex', // so the green/red background colour doesn't stretch all the way to the end flexWrap: 'wrap', }); @@ -420,7 +420,7 @@ function ChangeObjectProperty({ property }: { property: PropertyBranch }) { const changeObjectStyles = css({ display: 'flex', flexDirection: 'column', - paddingLeft: spacing[3] /* indent all nested properties*/, + paddingLeft: spacing[400] /* indent all nested properties*/, }); const rootChangeObjectStyles = css({ @@ -499,7 +499,7 @@ function lookupValue(path: ObjectPath, value: any): any { const changeValueStyles = css({ display: 'inline-flex', flexWrap: 'wrap', - columnGap: spacing[1], // when removed and added are next to each other + columnGap: spacing[100], // when removed and added are next to each other rowGap: '1px', // when removed & added wrapped }); diff --git a/packages/compass-crud/src/components/document-json-view.tsx b/packages/compass-crud/src/components/document-json-view.tsx index 700857879de..a47451c77f0 100644 --- a/packages/compass-crud/src/components/document-json-view.tsx +++ b/packages/compass-crud/src/components/document-json-view.tsx @@ -13,7 +13,7 @@ const listStyles = css({ const listItemStyles = css({ position: 'relative', - marginBottom: spacing[2], + marginBottom: spacing[200], '&:last-child': { marginBottom: 0, diff --git a/packages/compass-crud/src/components/document-list-view.tsx b/packages/compass-crud/src/components/document-list-view.tsx index 938ecc6fd1b..2c745b001df 100644 --- a/packages/compass-crud/src/components/document-list-view.tsx +++ b/packages/compass-crud/src/components/document-list-view.tsx @@ -15,7 +15,7 @@ const listStyles = css({ const listItemStyles = css({ position: 'relative', - marginBottom: spacing[1], + marginBottom: spacing[100], '&:last-child': { marginBottom: 0, diff --git a/packages/compass-crud/src/components/document-list.tsx b/packages/compass-crud/src/components/document-list.tsx index f9021c0cd1d..6a745b62c9e 100644 --- a/packages/compass-crud/src/components/document-list.tsx +++ b/packages/compass-crud/src/components/document-list.tsx @@ -42,9 +42,9 @@ import { usePreference } from 'compass-preferences-model/provider'; // Table has its own scrollable container. const tableStyles = css({ paddingTop: 0, - paddingRight: spacing[3], - paddingBottom: spacing[5], // avoid double scroll - paddingLeft: spacing[3], + paddingRight: spacing[400], + paddingBottom: spacing[800], // avoid double scroll + paddingLeft: spacing[400], }); const documentsContainerStyles = css({ diff --git a/packages/compass-crud/src/components/insert-document-dialog.tsx b/packages/compass-crud/src/components/insert-document-dialog.tsx index 2fc42005c7f..c12deeb8f79 100644 --- a/packages/compass-crud/src/components/insert-document-dialog.tsx +++ b/packages/compass-crud/src/components/insert-document-dialog.tsx @@ -302,7 +302,7 @@ const InsertDocumentDialog: React.FC = ({ submitButtonText="Insert" submitDisabled={hasErrors()} data-testid="insert-document-modal" - minBodyHeight={spacing[6] * 2} // make sure there is enough space for the menu + minBodyHeight={spacing[1600] * 2} // make sure there is enough space for the menu >
{ editable: false, pinned: 'right', // button group width + padding (8 * 2) - width: spacing[7] + spacing[3], + width: spacing[7] + spacing[400], }); /* Return the updated column definitions */ diff --git a/packages/compass-crud/src/components/table-view/types-dropdown.tsx b/packages/compass-crud/src/components/table-view/types-dropdown.tsx index 07f9aafe14d..307613a193d 100644 --- a/packages/compass-crud/src/components/table-view/types-dropdown.tsx +++ b/packages/compass-crud/src/components/table-view/types-dropdown.tsx @@ -11,7 +11,7 @@ import { import type { Element } from 'hadron-document'; const castableTypes = TypeChecker.castableTypes(true); -const selectStyles = css({ minWidth: spacing[3] * 10 }); +const selectStyles = css({ minWidth: spacing[400] * 10 }); type TypesDropdownProps = { element: Element }; diff --git a/packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/editor.tsx index a69aa2070a2..41d98586265 100644 --- a/packages/compass-editor/src/editor.tsx +++ b/packages/compass-editor/src/editor.tsx @@ -231,8 +231,8 @@ function getStylesForTheme(theme: CodemirrorThemeType) { outline: 'none', }, '& .cm-content': { - paddingTop: `${spacing[1]}px`, - paddingBottom: `${spacing[1]}px`, + paddingTop: `${spacing[100]}px`, + paddingBottom: `${spacing[100]}px`, caretColor: editorPalette[theme].cursorColor, }, '[contenteditable="false"] ': { @@ -255,7 +255,7 @@ function getStylesForTheme(theme: CodemirrorThemeType) { border: 'none', }, '& .cm-gutter-lint': { - width: `${spacing[3]}px`, + width: `${spacing[400]}px`, }, '& .cm-gutter-lint .cm-gutterElement': { padding: '0', @@ -264,8 +264,8 @@ function getStylesForTheme(theme: CodemirrorThemeType) { userSelect: 'none', }, '& .cm-gutter-lint .cm-lint-marker': { - width: `${spacing[3]}px`, - height: `${spacing[3]}px`, + width: `${spacing[400]}px`, + height: `${spacing[400]}px`, padding: '2px', }, '& .cm-gutter-lint .cm-lint-marker-info': { @@ -293,8 +293,8 @@ function getStylesForTheme(theme: CodemirrorThemeType) { padding: '0 2px', }, '& .foldMarker': { - width: `${spacing[3]}px`, - height: `${spacing[3]}px`, + width: `${spacing[400]}px`, + height: `${spacing[400]}px`, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -451,9 +451,9 @@ function getStylesForTheme(theme: CodemirrorThemeType) { }, '& .cm-tooltip .completion-info p': { margin: 0, - marginRight: `${spacing[2]}px`, - marginTop: `${spacing[2]}px`, - marginBottom: `${spacing[2]}px`, + marginRight: `${spacing[200]}px`, + marginTop: `${spacing[200]}px`, + marginBottom: `${spacing[200]}px`, }, '& .cm-tooltip .completion-info p:first-child': { marginTop: 0, @@ -1395,7 +1395,7 @@ const multilineEditorContainerStyle = css({ }); const multilineEditorContainerWithActionsStyle = css({ - minHeight: spacing[5] - 2, + minHeight: spacing[800] - 2, }); const multilineEditorContainerWithExpandStyle = css({ diff --git a/packages/compass-explain-plan/src/components/explain-plan-modal.tsx b/packages/compass-explain-plan/src/components/explain-plan-modal.tsx index 2a5ecd1edc0..d82a760b7a5 100644 --- a/packages/compass-explain-plan/src/components/explain-plan-modal.tsx +++ b/packages/compass-explain-plan/src/components/explain-plan-modal.tsx @@ -35,16 +35,16 @@ const explainPlanModalContentStyles = css({ const explainPlanModalLoadingStyles = css({ flex: 1, - minHeight: spacing[6] * 2, + minHeight: spacing[1600] * 2, display: 'flex', alignItems: 'center', justifyContent: 'center', }); const explainPlanModalBodyStyles = css({ - paddingTop: spacing[3], - paddingLeft: spacing[5], - paddingRight: spacing[5], + paddingTop: spacing[400], + paddingLeft: spacing[800], + paddingRight: spacing[800], overflow: 'hidden', }); diff --git a/packages/compass-explain-plan/src/components/explain-plan-side-summary.tsx b/packages/compass-explain-plan/src/components/explain-plan-side-summary.tsx index ad2171a1927..8a2514ca108 100644 --- a/packages/compass-explain-plan/src/components/explain-plan-side-summary.tsx +++ b/packages/compass-explain-plan/src/components/explain-plan-side-summary.tsx @@ -27,7 +27,7 @@ const defaultFormatter = (_: unknown) => String(_); const statsStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const statsTextStyles = css({ @@ -56,15 +56,15 @@ const ExplainPlanSummaryStat = ({ { className: statsStyles }, glyph ? React.cloneElement(glyph, { - viewBox: `0 0 ${spacing[3]} ${spacing[3]}`, - width: spacing[3], - height: spacing[3], + viewBox: `0 0 ${spacing[400]} ${spacing[400]}`, + width: spacing[400], + height: spacing[400], }) : null, {typeof value === 'undefined' ? ( @@ -97,10 +97,10 @@ const summaryCardStyles = css({ }); const summaryHeadingStyles = css({ - paddingTop: spacing[3], - paddingBottom: spacing[3], - paddingLeft: spacing[4], - paddingRight: spacing[4], + paddingTop: spacing[400], + paddingBottom: spacing[400], + paddingLeft: spacing[600], + paddingRight: spacing[600], backgroundColor: palette.gray.light3, boxShadow: `0 0 0 1px ${palette.gray.light2}`, }); @@ -112,11 +112,11 @@ const summaryHeadingDarkModeStyles = css({ const statsListStyles = css({ display: 'grid', - gap: spacing[3], - paddingTop: spacing[3], - paddingBottom: spacing[4], - paddingLeft: spacing[4], - paddingRight: spacing[4], + gap: spacing[400], + paddingTop: spacing[400], + paddingBottom: spacing[600], + paddingLeft: spacing[600], + paddingRight: spacing[600], overflow: 'auto', }); @@ -124,7 +124,7 @@ const indexesSummaryStyles = css({ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', - gap: spacing[2], + gap: spacing[200], }); const indexIconDescriptionStyles = css({ diff --git a/packages/compass-explain-plan/src/components/explain-plan-view.tsx b/packages/compass-explain-plan/src/components/explain-plan-view.tsx index b2ba2aed629..69adb01244b 100644 --- a/packages/compass-explain-plan/src/components/explain-plan-view.tsx +++ b/packages/compass-explain-plan/src/components/explain-plan-view.tsx @@ -34,7 +34,7 @@ const zoomableTreeContentStyles = css({ const zoomableTreeControlsStyles = css({ position: 'absolute', left: 0, - bottom: spacing[3], + bottom: spacing[400], }); const ZoomableExplainTree: React.FunctionComponent< @@ -62,18 +62,18 @@ const viewStyles = css({ display: 'grid', gridTemplateColumns: '1fr', gridTemplateRows: 'auto 1fr', - rowGap: spacing[4], + rowGap: spacing[600], }); const viewHeaderStyles = css({ display: 'grid', - rowGap: spacing[4], + rowGap: spacing[600], }); const viewBodyContainerStyles = css({ display: 'flex', overflow: 'hidden', - gap: spacing[4], + gap: spacing[600], }); const contentStyles = css({ @@ -88,7 +88,7 @@ const editorContainerStyles = css({ const editorStyles = css({ '& .cm-editor': { - paddingLeft: spacing[2], + paddingLeft: spacing[200], }, }); diff --git a/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx b/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx index 1b821bbde7e..301af5471a9 100644 --- a/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx +++ b/packages/compass-explain-plan/src/components/explain-tree/explain-tree-stage.tsx @@ -125,7 +125,7 @@ const cardStyles = css({ position: 'absolute', width: defaultCardWidth, padding: '14px', - borderRadius: spacing[2], + borderRadius: spacing[200], }); const cardStylesDarkMode = css({ @@ -135,7 +135,7 @@ const cardStylesDarkMode = css({ const stageTitleContainerStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], cursor: 'pointer', }); @@ -146,19 +146,19 @@ const stageTitleStyles = css({ }); const separatorStyles = css({ - marginTop: spacing[2], - marginBottom: spacing[2], + marginTop: spacing[200], + marginBottom: spacing[200], }); const contentStyles = css({ position: 'relative' }); const clockStyles = css({ position: 'absolute', - top: -spacing[5], - right: -(8 + spacing[5]), + top: -spacing[800], + right: -(8 + spacing[800]), }); const codeContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], height: '100%', overflow: 'hidden', }); @@ -173,9 +173,9 @@ const executionStatsStyle = css({ const statsBadgeCircle = css({ display: 'inline-block', - width: spacing[4] - 4, - height: spacing[4] - 4, - lineHeight: `${spacing[4] - 4}px`, + width: spacing[600] - 4, + height: spacing[600] - 4, + lineHeight: `${spacing[600] - 4}px`, borderRadius: '100px', textAlign: 'center', fontWeight: 700, @@ -186,7 +186,7 @@ const statsBadgeCircle = css({ const statsBadgeOval = css({ width: 'auto', - padding: `0 ${spacing[2]}px`, + padding: `0 ${spacing[200]}px`, }); const statsBadgeColorDark = css({ @@ -198,9 +198,9 @@ const shardViewContainerStyles = css({ borderRadius: 0, borderColor: palette.gray.base, width: defaultCardWidth, - height: spacing[5], - paddingLeft: spacing[2], - paddingRight: spacing[2], + height: spacing[800], + paddingLeft: spacing[200], + paddingRight: spacing[200], display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/packages/compass-explain-plan/src/components/explain-tree/explain-tree.tsx b/packages/compass-explain-plan/src/components/explain-tree/explain-tree.tsx index ef64bc9fa59..3b8d9b9fe2a 100644 --- a/packages/compass-explain-plan/src/components/explain-tree/explain-tree.tsx +++ b/packages/compass-explain-plan/src/components/explain-tree/explain-tree.tsx @@ -29,7 +29,7 @@ const explainTreeStyles = css({ const TREE_VERTICAL_SPACING = 38; const TREE_VERTICAL_SPACING_BELOW_SHARD_CARD = 12; -const TREE_HORIZONTAL_SPACING = spacing[6]; +const TREE_HORIZONTAL_SPACING = spacing[1600]; const getNodeSize = (node: ExplainTreeNodeData): [number, number] => { // Note: these values must match the actual styles of the explain stage card: @@ -61,13 +61,13 @@ const getLinkWidth = ( ): number => { if (sourceNode.isShard || targetNode.isShard) { if (metaData?.isFirstVerticalHalf) { - return spacing[4]; + return spacing[600]; } - return spacing[2]; + return spacing[200]; } - return spacing[1]; + return spacing[100]; }; const getNodeKey = (node: ExplainTreeNodeData) => node.id; diff --git a/packages/compass-export-to-language/src/components/modal.tsx b/packages/compass-export-to-language/src/components/modal.tsx index c0c71b4283f..fde05818137 100644 --- a/packages/compass-export-to-language/src/components/modal.tsx +++ b/packages/compass-export-to-language/src/components/modal.tsx @@ -53,12 +53,12 @@ type ExportToLanguageState = { }; const bannerStyles = css({ - marginBottom: spacing[3], + marginBottom: spacing[400], }); const formFieldContainerStyles = css({ display: 'flex', - gap: spacing[4], + gap: spacing[600], }); const fieldStyles = css({ @@ -66,17 +66,17 @@ const fieldStyles = css({ }); const editorHeadingStyles = css({ - marginBottom: spacing[2], + marginBottom: spacing[200], display: 'block', }); const codeStyles = css({ alignItems: 'start', - height: `${spacing[6] * 4 - spacing[5]}px`, + height: `${spacing[1600] * 4 - spacing[800]}px`, }); const checkboxStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], width: 'auto', // don't overflow and cause extra scrollbars }); diff --git a/packages/compass-find-in-page/src/components/find-in-page-input.tsx b/packages/compass-find-in-page/src/components/find-in-page-input.tsx index 90a5e336334..0967b3c6f0a 100644 --- a/packages/compass-find-in-page/src/components/find-in-page-input.tsx +++ b/packages/compass-find-in-page/src/components/find-in-page-input.tsx @@ -20,8 +20,8 @@ const findInPageContainerStyles = css({ position: 'fixed', zIndex: 4, top: 0, - right: spacing[4], - width: spacing[6] * 4, // 256px + right: spacing[600], + width: spacing[1600] * 4, // 256px boxShadow: `0px 2px 5px ${rgba(palette.black, 0.3)}`, }); @@ -36,8 +36,8 @@ const containerDarkThemeStyles = css({ }); const descriptionStyles = css({ - paddingLeft: spacing[2], - paddingTop: spacing[2], + paddingLeft: spacing[200], + paddingTop: spacing[200], fontSize: '11px', }); @@ -57,13 +57,13 @@ const findStyles = css({ }); const formStyles = css({ - padding: spacing[2], - paddingRight: spacing[1], + padding: spacing[200], + paddingRight: spacing[100], flex: 1, }); const closeButtonStyles = css({ - margin: `0px ${spacing[1]}px`, + margin: `0px ${spacing[100]}px`, }); type FindInPageInputProps = { diff --git a/packages/compass-generative-ai/src/components/ai-experience-entry.tsx b/packages/compass-generative-ai/src/components/ai-experience-entry.tsx index e5a0890301c..8a6fef7d6a2 100644 --- a/packages/compass-generative-ai/src/components/ai-experience-entry.tsx +++ b/packages/compass-generative-ai/src/components/ai-experience-entry.tsx @@ -32,8 +32,8 @@ const aiEntryStyles = css( boxShadow: 'none', // A bit of a hack to make the focus ring look nice without // moving the component around. - padding: `${spacing[1]}px ${spacing[2]}px`, - margin: `${-spacing[1]}px ${-spacing[2]}px`, + padding: `${spacing[100]}px ${spacing[200]}px`, + margin: `${-spacing[100]}px ${-spacing[200]}px`, background: 'none', whiteSpace: 'normal', position: 'relative', @@ -44,7 +44,7 @@ const aiEntryStyles = css( // Aligning elements. display: 'inline-flex', - gap: `${spacing[1]}px`, + gap: `${spacing[100]}px`, transition: 'color 0.16s ease-in', path: { diff --git a/packages/compass-generative-ai/src/components/ai-feedback.tsx b/packages/compass-generative-ai/src/components/ai-feedback.tsx index a08619a7a59..5f20e37a0a2 100644 --- a/packages/compass-generative-ai/src/components/ai-feedback.tsx +++ b/packages/compass-generative-ai/src/components/ai-feedback.tsx @@ -15,7 +15,7 @@ import { const suggestionActionButtonStyles = css({ flexShrink: 0, display: 'flex', - gap: spacing[2], + gap: spacing[200], }); const fadeOutAnimationTimeMS = 2000; diff --git a/packages/compass-generative-ai/src/components/ai-guide-cue.tsx b/packages/compass-generative-ai/src/components/ai-guide-cue.tsx index 1884917b822..373a3159b08 100644 --- a/packages/compass-generative-ai/src/components/ai-guide-cue.tsx +++ b/packages/compass-generative-ai/src/components/ai-guide-cue.tsx @@ -57,7 +57,7 @@ export const AIGuideCue = ({ return ( { // noop, we don't allow leafygreen to control visibility of the guide cue diff --git a/packages/compass-generative-ai/src/components/generative-ai-input.tsx b/packages/compass-generative-ai/src/components/generative-ai-input.tsx index 81670398118..e968dfebaaf 100644 --- a/packages/compass-generative-ai/src/components/generative-ai-input.tsx +++ b/packages/compass-generative-ai/src/components/generative-ai-input.tsx @@ -43,7 +43,7 @@ const inputBarContainerStyles = css({ display: 'flex', width: '100%', paddingTop: spacing[100], - gap: spacing[2], + gap: spacing[200], }); const gradientWidth = spacing[50]; @@ -176,7 +176,7 @@ const generateButtonStyles = css({ height: spacing[600] - spacing[100], display: 'flex', fontSize: '12px', - borderRadius: spacing[1], + borderRadius: spacing[100], }); const generateButtonLightModeStyles = css({ diff --git a/packages/compass-import-export/src/components/export-code-view.tsx b/packages/compass-import-export/src/components/export-code-view.tsx index 0d91d5d9ea2..82ecdcdfa02 100644 --- a/packages/compass-import-export/src/components/export-code-view.tsx +++ b/packages/compass-import-export/src/components/export-code-view.tsx @@ -14,7 +14,7 @@ import { export const codeElementId = 'export-collection-code-preview-wrapper'; const containerStyles = css({ - marginBottom: spacing[3], + marginBottom: spacing[400], }); const codeStyles = css({ diff --git a/packages/compass-import-export/src/components/export-field-options.tsx b/packages/compass-import-export/src/components/export-field-options.tsx index b4d20c8e8eb..682c071fc7e 100644 --- a/packages/compass-import-export/src/components/export-field-options.tsx +++ b/packages/compass-import-export/src/components/export-field-options.tsx @@ -16,7 +16,7 @@ const selectFieldsRadioBoxStyles = css({ }); const messageBannerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], }); const selectFieldsToExportId = 'select-fields-to-export'; diff --git a/packages/compass-import-export/src/components/export-json-format-options.tsx b/packages/compass-import-export/src/components/export-json-format-options.tsx index b8d9553261b..05e163f7d5b 100644 --- a/packages/compass-import-export/src/components/export-json-format-options.tsx +++ b/packages/compass-import-export/src/components/export-json-format-options.tsx @@ -12,11 +12,11 @@ import { import type { ExportJSONFormat } from '../export/export-json'; const radioGroupStyles = css({ - margin: `${spacing[3]}px 0`, + margin: `${spacing[400]}px 0`, }); const bannerContainerStyles = css({ - margin: `${spacing[2]}px 0`, + margin: `${spacing[200]}px 0`, }); function JSONFileTypeOptions({ diff --git a/packages/compass-import-export/src/components/export-modal.tsx b/packages/compass-import-export/src/components/export-modal.tsx index 97d07dedd89..254b518fb37 100644 --- a/packages/compass-import-export/src/components/export-modal.tsx +++ b/packages/compass-import-export/src/components/export-modal.tsx @@ -86,15 +86,15 @@ function useExport(): [ } const closeButtonStyles = css({ - marginRight: spacing[2], + marginRight: spacing[200], }); const messageBannerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], }); const modalBodyStyles = css({ - paddingTop: spacing[3], + paddingTop: spacing[400], }); type ExportModalProps = { diff --git a/packages/compass-import-export/src/components/export-select-fields.tsx b/packages/compass-import-export/src/components/export-select-fields.tsx index d20999a1413..912fc75979a 100644 --- a/packages/compass-import-export/src/components/export-select-fields.tsx +++ b/packages/compass-import-export/src/components/export-select-fields.tsx @@ -41,9 +41,9 @@ import type { SchemaPath } from '../export/gather-fields'; const headerContainerStyles = css({ display: 'flex', flexDirection: 'column', - marginBottom: spacing[3], - marginTop: spacing[2], - gap: spacing[2], + marginBottom: spacing[400], + marginTop: spacing[200], + gap: spacing[200], }); const tableContainerStyles = css({ @@ -52,32 +52,32 @@ const tableContainerStyles = css({ }); const smallCellContainerStyle = css({ - width: spacing[5], + width: spacing[800], margin: '0 auto', }); const textInputStyles = css({ - padding: `${spacing[1]}px 0`, + padding: `${spacing[100]}px 0`, minWidth: spacing[7] * 3, }); const enterToAddStyles = css({ display: 'inline-flex', alignItems: 'center', - marginLeft: spacing[2], + marginLeft: spacing[200], }); const placeholderStyles = css({ - margin: spacing[1], + margin: spacing[100], }); const retryButtonContainerStyles = css({ - margin: spacing[2], + margin: spacing[200], textAlign: 'center', }); const addNewFieldRowStyles = css({ - marginBottom: spacing[5], + marginBottom: spacing[800], }); const loadingPlaceholderCount = 6; diff --git a/packages/compass-import-export/src/components/import-modal.tsx b/packages/compass-import-export/src/components/import-modal.tsx index d5240c9459d..d01d4c10548 100644 --- a/packages/compass-import-export/src/components/import-modal.tsx +++ b/packages/compass-import-export/src/components/import-modal.tsx @@ -45,12 +45,12 @@ import { } from '@mongodb-js/compass-telemetry/provider'; const closeButtonStyles = css({ - marginRight: spacing[2], + marginRight: spacing[200], }); const fieldsHeadingStyles = css({ fontWeight: 'bold', - paddingBottom: spacing[2], + paddingBottom: spacing[200], }); const fieldsHeadingStylesDark = css({ @@ -68,7 +68,7 @@ const analyzeContainerStyles = css({ }); const dataTypesLinkStyles = css({ - marginLeft: spacing[3], + marginLeft: spacing[400], }); type ImportModalProps = { diff --git a/packages/compass-import-export/src/components/import-options.tsx b/packages/compass-import-export/src/components/import-options.tsx index 3959ea979d4..40a167da3c8 100644 --- a/packages/compass-import-export/src/components/import-options.tsx +++ b/packages/compass-import-export/src/components/import-options.tsx @@ -15,19 +15,19 @@ import type { Delimiter } from '../csv/csv-types'; import { ImportFileInput } from './import-file-input'; const formStyles = css({ - paddingTop: spacing[3], + paddingTop: spacing[400], }); const optionsHeadingStyles = css({ fontWeight: 'bold', - marginTop: spacing[3], + marginTop: spacing[400], }); const inlineFieldStyles = css({ display: 'flex', flexDirection: 'row', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const inlineLabelStyles = css({ @@ -39,7 +39,7 @@ const delimiterSelectStyles = css({ }); const checkboxStyles = css({ - margin: `${spacing[2]}px 0`, + margin: `${spacing[200]}px 0`, }); const delimiters: { diff --git a/packages/compass-import-export/src/components/import-preview-loader.tsx b/packages/compass-import-export/src/components/import-preview-loader.tsx index afd205420b8..09e992f8483 100644 --- a/packages/compass-import-export/src/components/import-preview-loader.tsx +++ b/packages/compass-import-export/src/components/import-preview-loader.tsx @@ -16,15 +16,15 @@ import type { RootImportState } from '../stores/import-store'; import { skipCSVAnalyze } from '../modules/import'; const loaderStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], display: 'flex', flexDirection: 'row', - gap: spacing[1], + gap: spacing[100], alignItems: 'center', }); const explanationTextStyles = css({ - margin: `${spacing[3]}px 0`, + margin: `${spacing[400]}px 0`, width: '350px', textAlign: 'center', }); @@ -33,7 +33,7 @@ const analyzeStyles = css({ display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: `${spacing[4]}px 0`, + padding: `${spacing[600]}px 0`, }); const analyzeStylesDark = css({ diff --git a/packages/compass-import-export/src/components/import-preview.tsx b/packages/compass-import-export/src/components/import-preview.tsx index 77c3e9b164c..b18c3ca8496 100644 --- a/packages/compass-import-export/src/components/import-preview.tsx +++ b/packages/compass-import-export/src/components/import-preview.tsx @@ -37,8 +37,8 @@ const MAX_PREVIEW_LENGTH = 1000; const columnHeaderStyles = css({ display: 'flex', - gap: spacing[1], - minWidth: spacing[6] * 2, + gap: spacing[100], + minWidth: spacing[1600] * 2, flexDirection: 'column', alignItems: 'flex-start', }); @@ -95,13 +95,13 @@ const rowIndexStyles = css({ const fieldTypeContainerStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[1], + gap: spacing[100], }); const infoIconCommonStyles = css({ // Hack: Align the icon relative to the SelectBox. - marginBottom: `-${spacing[1]}px`, - marginTop: `-${spacing[1]}px`, + marginBottom: `-${spacing[100]}px`, + marginTop: `-${spacing[100]}px`, }); const infoIconLightStyles = css({ @@ -113,9 +113,9 @@ const infoIconDarkStyles = css({ }); const warningIconCommonStyles = css(infoIconCommonStyles, { - marginLeft: spacing[1], - marginRight: spacing[1], - paddingTop: spacing[1], + marginLeft: spacing[100], + marginRight: spacing[100], + paddingTop: spacing[100], }); const warningIconLightStyles = css({ @@ -127,11 +127,11 @@ const warningIconDarkStyles = css({ }); const typesListStyles = css({ - margin: `${spacing[3]}px 0`, + margin: `${spacing[400]}px 0`, }); const selectStyles = css({ - minWidth: spacing[3] * 9, + minWidth: spacing[400] * 9, }); const arrayTextStyles = css({ diff --git a/packages/compass-import-export/src/components/select-file-type.tsx b/packages/compass-import-export/src/components/select-file-type.tsx index 76f293dde08..487137fcceb 100644 --- a/packages/compass-import-export/src/components/select-file-type.tsx +++ b/packages/compass-import-export/src/components/select-file-type.tsx @@ -12,7 +12,7 @@ const selectFileTypeLabelId = 'select-file-type-label'; const radioBoxGroupId = 'radio-box-group-id'; const containerStyles = css({ - margin: `${spacing[3]}px 0`, + margin: `${spacing[400]}px 0`, }); function SelectFileType({ diff --git a/packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx b/packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx index ab6aab6d67f..6ce3c05f8eb 100644 --- a/packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx +++ b/packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx @@ -7,7 +7,7 @@ const containerStyles = css({ width: '100%', justifyContent: 'flex-end', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const bannerStyles = css({ diff --git a/packages/compass-indexes/src/components/create-index-fields.tsx b/packages/compass-indexes/src/components/create-index-fields.tsx index 8a6c14c2ae4..7a1fd51acb8 100644 --- a/packages/compass-indexes/src/components/create-index-fields.tsx +++ b/packages/compass-indexes/src/components/create-index-fields.tsx @@ -29,7 +29,7 @@ const DEFAULT_FIELD = { const createIndexFieldsStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], }); const createIndexFieldsNameStyles = css({ @@ -71,9 +71,9 @@ function CreateIndexFields({ ); const longestLabel = Math.max(...INDEX_TYPES.map((type) => type.length)); const additionalSpacing = - spacing[6] + + spacing[1600] + // For the preview badge - (serverSupportsColumnStoreIndex ? spacing[6] : 0); + (serverSupportsColumnStoreIndex ? spacing[1600] : 0); const selectorWidth = `calc(${longestLabel}ch + ${additionalSpacing}px)`; return [indexTypes, selectorWidth]; diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx index 111f3442a12..591190108cc 100644 --- a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx +++ b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx @@ -13,15 +13,15 @@ import { import { usePreference } from 'compass-preferences-model/provider'; const createIndexModalFieldsStyles = css({ - margin: `${spacing[4]}px 0 ${spacing[5]}px 0`, + margin: `${spacing[600]}px 0 ${spacing[800]}px 0`, }); const indexFieldsHeaderStyles = css({ - marginBottom: spacing[1], + marginBottom: spacing[100], }); const createIndexModalOptionStyles = css({ - paddingLeft: spacing[1] + 2, + paddingLeft: spacing[100] + 2, }); type CreateIndexFormProps = { diff --git a/packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.tsx b/packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.tsx index a44d461e44d..e03e87ded8a 100644 --- a/packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.tsx +++ b/packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.tsx @@ -11,7 +11,7 @@ import { } from '@mongodb-js/compass-components'; const badgeStyles = css({ - gap: spacing[2], + gap: spacing[200], }); const linkStyles = css( diff --git a/packages/compass-indexes/src/components/indexes-table/indexes-table.tsx b/packages/compass-indexes/src/components/indexes-table/indexes-table.tsx index 5cda814ed76..c66c731fd3f 100644 --- a/packages/compass-indexes/src/components/indexes-table/indexes-table.tsx +++ b/packages/compass-indexes/src/components/indexes-table/indexes-table.tsx @@ -36,7 +36,7 @@ const tableStyles = css({ height: '100%', // So that the last element has some spacing from the container bottom when // scrolled to the very bottom of the list - paddingBottom: spacing[3], + paddingBottom: spacing[400], }); const indexActionsCellClassName = 'index-actions-cell'; diff --git a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx index e078f4dc64d..8ed4eed9e16 100644 --- a/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx +++ b/packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx @@ -29,7 +29,7 @@ import { indexViewChanged } from '../../modules/index-view'; const toolbarButtonsContainer = css({ display: 'flex', flexDirection: 'row', - gap: spacing[2], + gap: spacing[200], justifyContent: 'flex-start', alignItems: 'center', }); @@ -38,7 +38,7 @@ const alignSelfEndStyles = css({ marginLeft: 'auto', }); -const spinnerStyles = css({ marginRight: spacing[2] }); +const spinnerStyles = css({ marginRight: spacing[200] }); const createIndexButtonContainerStyles = css({ display: 'inline-block', diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx index f3eae1f431e..495308c8aa1 100644 --- a/packages/compass-indexes/src/components/indexes/indexes.tsx +++ b/packages/compass-indexes/src/components/indexes/indexes.tsx @@ -35,12 +35,12 @@ import CreateIndexModal from '../create-index-modal/create-index-modal'; const IDEAL_NUMBER_OF_MAX_INDEXES = 10; const containerStyles = css({ - paddingTop: spacing[3], - paddingLeft: spacing[3], - paddingRight: spacing[3], + paddingTop: spacing[400], + paddingLeft: spacing[400], + paddingRight: spacing[400], // No padding bottom so that the table can scroll visibly to the bottom paddingBottom: 0, - gap: spacing[3], + gap: spacing[400], display: 'flex', flexDirection: 'column', width: '100%', @@ -102,10 +102,10 @@ function isRefreshingStatus(status: FetchStatus) { } const indexesContainersStyles = css({ - paddingTop: spacing[3], + paddingTop: spacing[400], display: 'grid', gridTemplateColumns: '100%', - gap: spacing[2], + gap: spacing[200], }); export function Indexes({ diff --git a/packages/compass-indexes/src/components/regular-indexes-table/property-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/property-field.tsx index 1c6cb91e158..9c36e1ba7ad 100644 --- a/packages/compass-indexes/src/components/regular-indexes-table/property-field.tsx +++ b/packages/compass-indexes/src/components/regular-indexes-table/property-field.tsx @@ -7,8 +7,8 @@ import BadgeWithIconLink from '../indexes-table/badge-with-icon-link'; const containerStyles = css({ display: 'flex', - gap: spacing[1], - minWidth: spacing[3] * 7, + gap: spacing[100], + minWidth: spacing[400] * 7, alignItems: 'baseline', }); diff --git a/packages/compass-indexes/src/components/regular-indexes-table/status-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/status-field.tsx index 941bc1582ea..0fd5c75e1c1 100644 --- a/packages/compass-indexes/src/components/regular-indexes-table/status-field.tsx +++ b/packages/compass-indexes/src/components/regular-indexes-table/status-field.tsx @@ -13,8 +13,8 @@ import type { InProgressIndex } from '../../modules/regular-indexes'; const statusFieldStyles = css({ display: 'flex', - gap: spacing[1], - minWidth: spacing[3] * 7, + gap: spacing[100], + minWidth: spacing[400] * 7, alignItems: 'baseline', }); diff --git a/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx b/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx index 69419775b33..0a3a081f66b 100644 --- a/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx +++ b/packages/compass-indexes/src/components/search-indexes-modals/base-search-index-modal.tsx @@ -61,13 +61,13 @@ function parseShellBSON(source: string): Document[] { const bodyStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], }); const templateToolbarStyles = css({ display: 'flex', flexDirection: 'row', - gap: spacing[3], + gap: spacing[400], }); const templateToolbarTextDescriptionStyles = css({ @@ -82,22 +82,22 @@ const templateToolbarDropdownStyles = css({ const formContainerStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[2], + gap: spacing[200], overflow: 'auto', // This is to accomodate for the focus ring that is visible // when the index name input is focussed. - padding: spacing[1], + padding: spacing[100], }); const formFieldContainerStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[1], + gap: spacing[100], }); const footerStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], }); export const DEFAULT_INDEX_DEFINITION = `{ diff --git a/packages/compass-indexes/src/components/search-indexes-table/search-index-actions.tsx b/packages/compass-indexes/src/components/search-indexes-table/search-index-actions.tsx index 20fa7f222a5..cb9ae74f040 100644 --- a/packages/compass-indexes/src/components/search-indexes-table/search-index-actions.tsx +++ b/packages/compass-indexes/src/components/search-indexes-table/search-index-actions.tsx @@ -21,7 +21,7 @@ type SearchIndexAction = 'drop' | 'edit'; const actionGroupStyles = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const runAggregateStyles = css({ diff --git a/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx b/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx index 50f5d061c5c..06b8f46f42f 100644 --- a/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx +++ b/packages/compass-indexes/src/components/search-indexes-table/search-indexes-table.tsx @@ -126,15 +126,15 @@ function SearchIndexType({ type, link }: { type: string; link: string }) { const searchIndexDetailsStyles = css({ display: 'inline-flex', - gap: spacing[1], - marginBottom: spacing[2], - padding: `0px ${spacing[6]}px`, + gap: spacing[100], + marginBottom: spacing[200], + padding: `0px ${spacing[1600]}px`, }); const searchIndexFieldStyles = css({ // Override LeafyGreen's uppercase styles as we want to keep the case sensitivity of the key. textTransform: 'none', - gap: spacing[1], + gap: spacing[100], }); function VectorSearchIndexDetails({ definition }: { definition: Document }) { diff --git a/packages/compass-query-bar/src/components/option-editor.tsx b/packages/compass-query-bar/src/components/option-editor.tsx index a008c9d3ce7..80546b68276 100644 --- a/packages/compass-query-bar/src/components/option-editor.tsx +++ b/packages/compass-query-bar/src/components/option-editor.tsx @@ -57,7 +57,7 @@ const editorContainerStyles = css({ paddingLeft: 4, paddingRight: 0, border: '1px solid transparent', - borderRadius: spacing[1], + borderRadius: spacing[100], overflow: 'visible', }); @@ -69,7 +69,7 @@ const editorWithErrorStyles = css({ right: -1, bottom: -1, zIndex: 2, - borderRadius: spacing[1], + borderRadius: spacing[100], border: `1px solid ${palette.red.base}`, pointerEvents: 'none', }, @@ -91,8 +91,8 @@ const queryBarEditorOptionInsightsStyles = css({ // shrinking of the editor content when hoveing over the icon. In this case // it's okay for the content to be hidden by the expanded badge as user is // interacting with the badge - width: spacing[4], - height: spacing[4], + width: spacing[600], + height: spacing[600], overflow: 'visible', display: 'flex', justifyContent: 'flex-end', diff --git a/packages/compass-query-bar/src/components/query-bar-row.tsx b/packages/compass-query-bar/src/components/query-bar-row.tsx index 0dbed1ddff8..9bb24f54983 100644 --- a/packages/compass-query-bar/src/components/query-bar-row.tsx +++ b/packages/compass-query-bar/src/components/query-bar-row.tsx @@ -12,7 +12,7 @@ const rowStyles = css({ display: 'flex', flexGrow: 1, position: 'relative', - gap: spacing[2], + gap: spacing[200], }); type QueryBarRowProps = { diff --git a/packages/compass-query-bar/src/components/query-bar.tsx b/packages/compass-query-bar/src/components/query-bar.tsx index d2383c88092..bfd26d0f276 100644 --- a/packages/compass-query-bar/src/components/query-bar.tsx +++ b/packages/compass-query-bar/src/components/query-bar.tsx @@ -51,7 +51,7 @@ const queryBarFormStyles = css({ background: palette.white, border: `1px solid ${palette.gray.light2}`, borderRadius: '6px', - padding: spacing[2], + padding: spacing[200], }); const queryBarFormDarkStyles = css({ @@ -66,7 +66,7 @@ const queryBarFirstRowStyles = css({ // `flex-start` here. It is more brittle as it does require the other elements // to account for their height individually. alignItems: 'flex-start', - gap: spacing[2], + gap: spacing[200], }); const filterContainerStyles = css({ @@ -74,21 +74,21 @@ const filterContainerStyles = css({ position: 'relative', flexGrow: 1, alignItems: 'flex-start', - gap: spacing[2], + gap: spacing[200], }); const aiEntryContainerStyles = css({ display: 'flex', alignItems: 'center', - height: spacing[4] + spacing[1], + height: spacing[600] + spacing[100], }); const queryOptionsContainerStyles = css({ display: 'flex', flexDirection: 'column', - marginTop: spacing[2], - padding: `0 ${spacing[2]}px`, - gap: spacing[2], + marginTop: spacing[200], + padding: `0 ${spacing[200]}px`, + gap: spacing[200], }); const QueryOptionsToggle = connect( diff --git a/packages/compass-query-bar/src/components/query-history-button-popover.tsx b/packages/compass-query-bar/src/components/query-history-button-popover.tsx index 57b939ded93..1e9fc108794 100644 --- a/packages/compass-query-bar/src/components/query-history-button-popover.tsx +++ b/packages/compass-query-bar/src/components/query-history-button-popover.tsx @@ -22,7 +22,7 @@ const openQueryHistoryButtonStyles = css( backgroundColor: 'transparent', display: 'inline-flex', alignItems: 'center', - padding: spacing[2] - 2, // -2px for border. + padding: spacing[200] - 2, // -2px for border. '&:hover': { cursor: 'pointer', }, @@ -33,7 +33,7 @@ const openQueryHistoryButtonStyles = css( const queryHistoryPopoverStyles = css({ // We want the popover to open almost to the shell at the bottom of Compass. maxHeight: 'calc(100vh - 270px)', - marginTop: spacing[1], + marginTop: spacing[100], display: 'flex', }); diff --git a/packages/compass-query-bar/src/components/query-history/index.tsx b/packages/compass-query-bar/src/components/query-history/index.tsx index f879d098e66..7f76b5e00b4 100644 --- a/packages/compass-query-bar/src/components/query-history/index.tsx +++ b/packages/compass-query-bar/src/components/query-history/index.tsx @@ -23,7 +23,7 @@ const containerStyle = css({ const contentStyles = css({ overflowY: 'auto', - padding: spacing[3], + padding: spacing[400], paddingTop: 0, }); diff --git a/packages/compass-query-bar/src/components/query-history/query-item/query-item-card.tsx b/packages/compass-query-bar/src/components/query-history/query-item/query-item-card.tsx index 41f49927965..e5b4fafeb18 100644 --- a/packages/compass-query-bar/src/components/query-history/query-item/query-item-card.tsx +++ b/packages/compass-query-bar/src/components/query-history/query-item/query-item-card.tsx @@ -10,8 +10,8 @@ import { } from '@mongodb-js/compass-components'; const queryStyles = css({ - padding: spacing[3], - marginTop: spacing[3], + padding: spacing[400], + marginTop: spacing[400], }); const queryHoveredStyles = css({ diff --git a/packages/compass-query-bar/src/components/query-history/query-item/query-item-content.tsx b/packages/compass-query-bar/src/components/query-history/query-item/query-item-content.tsx index b87ae6cb2e1..8511cad3ef9 100644 --- a/packages/compass-query-bar/src/components/query-history/query-item/query-item-content.tsx +++ b/packages/compass-query-bar/src/components/query-history/query-item/query-item-content.tsx @@ -6,7 +6,7 @@ import { type BaseQuery } from '../../../constants/query-properties'; const queryLabelStyles = css({ textTransform: 'capitalize', fontWeight: 'bold', - margin: `${spacing[2]}px 0`, + margin: `${spacing[200]}px 0`, }); const queryCodeStyles = css({ diff --git a/packages/compass-query-bar/src/components/query-history/query-item/query-item-heading.tsx b/packages/compass-query-bar/src/components/query-history/query-item/query-item-heading.tsx index 5c508c0a38d..da30385eee4 100644 --- a/packages/compass-query-bar/src/components/query-history/query-item/query-item-heading.tsx +++ b/packages/compass-query-bar/src/components/query-history/query-item/query-item-heading.tsx @@ -7,7 +7,7 @@ const queryHeadingStyles = css({ const queryHeadingTextStyles = css({ fontSize: '16px', - lineHeight: `${spacing[5]}px`, // line up with hover icons + lineHeight: `${spacing[800]}px`, // line up with hover icons fontWeight: 'bold', overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/packages/compass-query-bar/src/components/query-history/save-query-form.tsx b/packages/compass-query-bar/src/components/query-history/save-query-form.tsx index f8ec493c6ac..f2cf7f7c242 100644 --- a/packages/compass-query-bar/src/components/query-history/save-query-form.tsx +++ b/packages/compass-query-bar/src/components/query-history/save-query-form.tsx @@ -21,8 +21,8 @@ const textInputStyles = css({ }); const submitButtonStyles = css({ - marginLeft: '6px', // spacing[1] makes the shadows overlap, spacing[2] is too much - marginRight: spacing[1], + marginLeft: '6px', // spacing[100] makes the shadows overlap, spacing[200] is too much + marginRight: spacing[100], }); type SaveQueryFormProps = { diff --git a/packages/compass-query-bar/src/components/query-history/toolbar/toolbar.tsx b/packages/compass-query-bar/src/components/query-history/toolbar/toolbar.tsx index 5e9ba5d6847..6102bda3596 100644 --- a/packages/compass-query-bar/src/components/query-history/toolbar/toolbar.tsx +++ b/packages/compass-query-bar/src/components/query-history/toolbar/toolbar.tsx @@ -19,8 +19,8 @@ const titleStyles = css({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - lineHeight: `${spacing[4]}px`, - marginBottom: spacing[3], + lineHeight: `${spacing[600]}px`, + marginBottom: spacing[400], }); const titleStylesDark = css({ @@ -32,13 +32,13 @@ const titleStylesLight = css({ }); const toolbarStyles = css({ - padding: spacing[3], + padding: spacing[400], paddingBottom: 0, // each item has top margin - paddingRight: spacing[5], // Extra right padding to account for close button. + paddingRight: spacing[800], // Extra right padding to account for close button. }); const viewSwitcherStyles = css({ - marginTop: spacing[1], + marginTop: spacing[100], }); type ToolbarProps = { diff --git a/packages/compass-query-bar/src/components/query-history/zero-graphic.tsx b/packages/compass-query-bar/src/components/query-history/zero-graphic.tsx index 836dc5de125..c1cc6c479b1 100644 --- a/packages/compass-query-bar/src/components/query-history/zero-graphic.tsx +++ b/packages/compass-query-bar/src/components/query-history/zero-graphic.tsx @@ -9,10 +9,10 @@ import { const containerStyles = css({ display: 'flex', flexDirection: 'column', - gap: spacing[2], - padding: spacing[3], + gap: spacing[200], + padding: spacing[400], textAlign: 'center', - marginTop: spacing[3], // same spacing as query item + marginTop: spacing[400], // same spacing as query item }); const iconContainerStyles = css({ @@ -28,7 +28,7 @@ function ZeroGraphic({ text }: { text: string }) { return (
- +
{text}
diff --git a/packages/compass-query-bar/src/components/query-option.tsx b/packages/compass-query-bar/src/components/query-option.tsx index 01a2208fd4c..920c9a3103c 100644 --- a/packages/compass-query-bar/src/components/query-option.tsx +++ b/packages/compass-query-bar/src/components/query-option.tsx @@ -33,11 +33,11 @@ const documentEditorOptionContainerStyles = css({ }); const queryOptionLabelStyles = css({ - marginRight: spacing[2], + marginRight: spacing[200], }); const documentEditorQueryOptionLabelStyles = css(queryOptionLabelStyles, { - minWidth: spacing[5] * 2, + minWidth: spacing[800] * 2, }); const documentEditorOptionStyles = css({ @@ -67,7 +67,7 @@ const optionInputWithErrorStyles = css({ const queryOptionLabelContainerStyles = css({ // Hardcoded height as we want the label not to vertically // center on the input area when it's expanded. - height: spacing[4] + spacing[1], + height: spacing[600] + spacing[100], textTransform: 'capitalize', display: 'flex', alignItems: 'center', @@ -76,7 +76,7 @@ const queryOptionLabelContainerStyles = css({ export const documentEditorLabelContainerStyles = css( queryOptionLabelContainerStyles, { - minWidth: spacing[5] * 2, + minWidth: spacing[800] * 2, } ); diff --git a/packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx b/packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx index e9ad94327ec..4d6343b532d 100644 --- a/packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx +++ b/packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx @@ -46,16 +46,16 @@ const sortBy: { name: keyof Item; label: string }[] = [ ]; const headerStyles = css({ - padding: spacing[3], + padding: spacing[400], display: 'flex', justifyContent: 'space-between', }); const rowStyles = css({ - gap: spacing[2], - paddingLeft: spacing[3], - paddingRight: spacing[3], - paddingBottom: spacing[2], + gap: spacing[200], + paddingLeft: spacing[400], + paddingRight: spacing[400], + paddingBottom: spacing[200], }); const noSavedItemsStyles = css({ @@ -253,12 +253,12 @@ export const AggregationsQueriesList = ({ sortedItems[index].id} renderHeader={GridControls} - headerHeight={spacing[5] + 36} + headerHeight={spacing[800] + 36} renderEmptyList={NoSearchResults} classNames={{ row: rowStyles }} resetActiveItemOnBlur={false} diff --git a/packages/compass-saved-aggregations-queries/src/components/saved-item-card.tsx b/packages/compass-saved-aggregations-queries/src/components/saved-item-card.tsx index c14c9364d69..d885e34e33c 100644 --- a/packages/compass-saved-aggregations-queries/src/components/saved-item-card.tsx +++ b/packages/compass-saved-aggregations-queries/src/components/saved-item-card.tsx @@ -31,7 +31,7 @@ export type SavedItemCardProps = Pick< const namespacePart = css({ display: 'flex', alignItems: 'center', - gap: spacing[2], + gap: spacing[200], minWidth: 0, }); @@ -60,7 +60,7 @@ const NamespacePart: React.FunctionComponent<{ ); }; -export const CARD_WIDTH = spacing[6] * 4; +export const CARD_WIDTH = spacing[1600] * 4; export const CARD_HEIGHT = 218; @@ -68,10 +68,10 @@ const card = css({ // Workaround for uncollapsible text in flex children minWidth: 0, width: '100%', - paddingTop: spacing[3], - paddingBottom: spacing[3], - paddingLeft: spacing[3], - paddingRight: spacing[3], + paddingTop: spacing[400], + paddingBottom: spacing[400], + paddingLeft: spacing[400], + paddingRight: spacing[400], }); const actionsRow = css({ @@ -82,7 +82,7 @@ const actionsRow = css({ // container to avoid it jumping when the actions button becomes visible (this // size is also not part of leafygreen, so we can't use spacing here) minHeight: 28, - marginBottom: spacing[2], + marginBottom: spacing[200], }); const cardBadge = css({ @@ -104,8 +104,8 @@ const cardNameLight = css({ const cardName = css({ fontWeight: 'bold', - height: spacing[4] * 2, - marginBottom: spacing[3], + height: spacing[600] * 2, + marginBottom: spacing[400], // WebkitLineClamp css property is in a very weird state in the spec and // requires using deprecated flexbox spec props, but this does work in @@ -122,8 +122,8 @@ const cardName = css({ const namespaceGroup = css({ display: 'grid', - gap: spacing[2], - marginBottom: spacing[3], + gap: spacing[200], + marginBottom: spacing[400], }); const lastModifiedLabel = css({ diff --git a/packages/compass-saved-aggregations-queries/src/components/select-connection-and-namespace-modal.tsx b/packages/compass-saved-aggregations-queries/src/components/select-connection-and-namespace-modal.tsx index 70b1e68ea71..9f7fbe4d03d 100644 --- a/packages/compass-saved-aggregations-queries/src/components/select-connection-and-namespace-modal.tsx +++ b/packages/compass-saved-aggregations-queries/src/components/select-connection-and-namespace-modal.tsx @@ -154,8 +154,8 @@ const CollectionSelect = connect(mapCollectionState, { const modalContent = css({ display: 'grid', gridAutoColumns: '1fr', - rowGap: spacing[4], - columnGap: spacing[3], + rowGap: spacing[600], + columnGap: spacing[400], }); const contentWithoutConnectionSelect = cx( diff --git a/packages/compass-saved-aggregations-queries/src/components/select-connection-modal.tsx b/packages/compass-saved-aggregations-queries/src/components/select-connection-modal.tsx index ea301b3602b..a5c47e8f209 100644 --- a/packages/compass-saved-aggregations-queries/src/components/select-connection-modal.tsx +++ b/packages/compass-saved-aggregations-queries/src/components/select-connection-modal.tsx @@ -21,8 +21,8 @@ import { const modalContent = css({ display: 'grid', gridAutoColumns: '1fr', - rowGap: spacing[4], - columnGap: spacing[3], + rowGap: spacing[600], + columnGap: spacing[400], gridTemplateAreas: ` 'description' 'connection' diff --git a/packages/compass-saved-aggregations-queries/src/hooks/use-grid-filters.tsx b/packages/compass-saved-aggregations-queries/src/hooks/use-grid-filters.tsx index 577aa489d58..95c1370c708 100644 --- a/packages/compass-saved-aggregations-queries/src/hooks/use-grid-filters.tsx +++ b/packages/compass-saved-aggregations-queries/src/hooks/use-grid-filters.tsx @@ -28,8 +28,8 @@ const selectContainer = css({ }); const selectStyles = css({ - marginRight: spacing[2], - width: `calc(16ch + ${spacing[6]}px)`, + marginRight: spacing[200], + width: `calc(16ch + ${spacing[1600]}px)`, }); const filterStyles = css({ @@ -38,7 +38,7 @@ const filterStyles = css({ const searchInputStyles = css({ width: '300px', - marginRight: spacing[2], + marginRight: spacing[200], }); const FilterSelect: React.FunctionComponent<{ diff --git a/packages/compass-schema-validation/src/components/document-preview.tsx b/packages/compass-schema-validation/src/components/document-preview.tsx index fbd02b84a84..2a8fe1ca2ae 100644 --- a/packages/compass-schema-validation/src/components/document-preview.tsx +++ b/packages/compass-schema-validation/src/components/document-preview.tsx @@ -10,7 +10,7 @@ import { Document } from '@mongodb-js/compass-crud'; const previewStyles = css({ display: 'flex', - height: spacing[6] * 3, + height: spacing[1600] * 3, padding: 0, overflow: 'auto', position: 'relative', @@ -21,7 +21,7 @@ const noPreviewStyles = css({ }); const noPreviewTextStyles = css({ - padding: spacing[3], + padding: spacing[400], textAlign: 'center', fontStyle: 'italic', width: '100%', diff --git a/packages/compass-schema-validation/src/components/loading-overlay.tsx b/packages/compass-schema-validation/src/components/loading-overlay.tsx index 231f36f45c0..c1660f893ab 100644 --- a/packages/compass-schema-validation/src/components/loading-overlay.tsx +++ b/packages/compass-schema-validation/src/components/loading-overlay.tsx @@ -15,7 +15,7 @@ const loadingOverlayStyles = css({ left: 0, bottom: 0, right: 0, - borderRadius: spacing[2], + borderRadius: spacing[200], zIndex: 1000, display: 'flex', alignItems: 'center', diff --git a/packages/compass-schema-validation/src/components/validation-selectors.tsx b/packages/compass-schema-validation/src/components/validation-selectors.tsx index 5367e264c3d..94f25d3eb38 100644 --- a/packages/compass-schema-validation/src/components/validation-selectors.tsx +++ b/packages/compass-schema-validation/src/components/validation-selectors.tsx @@ -24,12 +24,12 @@ const LEVEL_HELP_URL = const validationOptionStyles = css({ display: 'flex', - marginLeft: spacing[4], + marginLeft: spacing[600], alignItems: 'center', }); const selectStyles = css({ - width: spacing[6] * 2, + width: spacing[1600] * 2, }); type ActionSelectorProps = { diff --git a/packages/compass-schema/src/components/compass-schema.tsx b/packages/compass-schema/src/components/compass-schema.tsx index 24bb558367d..d3daeb65e06 100644 --- a/packages/compass-schema/src/components/compass-schema.tsx +++ b/packages/compass-schema/src/components/compass-schema.tsx @@ -63,11 +63,11 @@ const schemaStyles = css({ }); const contentStyles = css({ - paddingLeft: spacing[3], - paddingRight: spacing[3], + paddingLeft: spacing[400], + paddingRight: spacing[400], display: 'flex', flexDirection: 'column', - gap: spacing[3], + gap: spacing[400], height: '100%', }); diff --git a/packages/compass-schema/src/components/field.tsx b/packages/compass-schema/src/components/field.tsx index ac7fe4f40a2..bf3c2deda70 100644 --- a/packages/compass-schema/src/components/field.tsx +++ b/packages/compass-schema/src/components/field.tsx @@ -37,7 +37,7 @@ const fieldNameStyles = css({ const expandCollapseFieldButtonStyles = css({ display: 'flex', - marginLeft: -spacing[3], + marginLeft: -spacing[400], alignItems: 'center', border: 'none', background: 'none', @@ -57,13 +57,13 @@ const expandCollapseFieldButtonStyles = css({ }); const fieldContainerStyles = css({ - marginBottom: spacing[2], + marginBottom: spacing[200], }); const fieldStyles = css({ overflow: 'hidden', - paddingTop: spacing[3], - paddingBottom: spacing[3], + paddingTop: spacing[400], + paddingBottom: spacing[400], }); const fieldExpandedStyles = css({ @@ -71,28 +71,28 @@ const fieldExpandedStyles = css({ }); const fieldListContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], position: 'relative', }); const fieldTypeListStyles = css({ - paddingTop: spacing[1], + paddingTop: spacing[100], }); const fieldNameContainerStyles = css({ display: 'flex', - paddingTop: spacing[2], + paddingTop: spacing[200], alignItems: 'center', - gap: spacing[2], + gap: spacing[200], }); const fieldRowStyles = css({ - padding: `0px ${spacing[3]}px`, + padding: `0px ${spacing[400]}px`, display: 'grid', gridTemplateAreas: '"description chart"', gridTemplateColumns: '1fr 2fr', - columnGap: spacing[6], + columnGap: spacing[1600], position: 'relative', }); @@ -105,7 +105,7 @@ const fieldChartContainerStyles = css({ }); const nestedFieldStyles = css({ - margin: spacing[2], + margin: spacing[200], }); type FieldProps = { diff --git a/packages/compass-schema/src/components/schema-toolbar.tsx b/packages/compass-schema/src/components/schema-toolbar.tsx index 0fca62f0ef2..558d3f81718 100644 --- a/packages/compass-schema/src/components/schema-toolbar.tsx +++ b/packages/compass-schema/src/components/schema-toolbar.tsx @@ -29,8 +29,8 @@ const schemaToolbarStyles = css({ display: 'flex', flexDirection: 'column', alignItems: 'center', - gap: spacing[3], - padding: spacing[3], + gap: spacing[400], + padding: spacing[400], }); const schemaQueryBarStyles = css({ @@ -50,8 +50,8 @@ const schemaToolbarActionBarRightStyles = css({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', - gap: spacing[2], - paddingLeft: spacing[2], + gap: spacing[200], + paddingLeft: spacing[200], }); const ERROR_WARNING = 'An error occurred during schema analysis'; diff --git a/packages/compass-schema/src/components/type.tsx b/packages/compass-schema/src/components/type.tsx index c7c81d0a52c..30a37fe91eb 100644 --- a/packages/compass-schema/src/components/type.tsx +++ b/packages/compass-schema/src/components/type.tsx @@ -15,7 +15,7 @@ const schemaFieldTypeLabelStyles = css({ }); const typeContainerStyles = css({ - lineHeight: `${spacing[1]}px`, + lineHeight: `${spacing[100]}px`, display: 'inline-block', verticalAlign: 'top', }); diff --git a/packages/compass-schema/src/components/value-bubble.tsx b/packages/compass-schema/src/components/value-bubble.tsx index b123dfef478..12951d1f17f 100644 --- a/packages/compass-schema/src/components/value-bubble.tsx +++ b/packages/compass-schema/src/components/value-bubble.tsx @@ -19,8 +19,8 @@ const valueBubbleValueStyles = css({ backgroundColor: palette.gray.light2, border: '1px solid transparent', color: palette.gray.dark3, - padding: `${spacing[1] / 2} ${spacing[1]}`, - borderRadius: spacing[1], + padding: `${spacing[100] / 2} ${spacing[100]}`, + borderRadius: spacing[100], '&:hover': { cursor: 'pointer', }, diff --git a/packages/compass-schema/src/modules/date.js b/packages/compass-schema/src/modules/date.js index 2a18fbe5547..36d32e8ba57 100644 --- a/packages/compass-schema/src/modules/date.js +++ b/packages/compass-schema/src/modules/date.js @@ -258,7 +258,7 @@ const minicharts_d3fns_date = (changeQueryFn) => { .append('g') .attr('class', 'weekday') .append('g') - .attr('transform', `translate(${-spacing[4] + spacing[1]} ${0})`) + .attr('transform', `translate(${-spacing[600] + spacing[100]} ${0})`) .append('svg') .attr('width', 15) .attr('height', 13) @@ -278,7 +278,7 @@ const minicharts_d3fns_date = (changeQueryFn) => { .append('g') .attr('class', 'hour') .append('g') - .attr('transform', `translate(${-spacing[3]} ${0})`) + .attr('transform', `translate(${-spacing[400]} ${0})`) .append('svg') .attr('width', 13) .attr('height', 13) diff --git a/packages/compass-serverstats/src/components/dberror-component.tsx b/packages/compass-serverstats/src/components/dberror-component.tsx index fdfaf4fba93..d765bfdf77c 100644 --- a/packages/compass-serverstats/src/components/dberror-component.tsx +++ b/packages/compass-serverstats/src/components/dberror-component.tsx @@ -3,7 +3,7 @@ import type { Store } from 'reflux'; import { ErrorSummary, css, spacing } from '@mongodb-js/compass-components'; const errorContainerStyles = css({ - padding: spacing[2], + padding: spacing[200], position: 'relative', }); diff --git a/packages/compass-serverstats/src/components/index.tsx b/packages/compass-serverstats/src/components/index.tsx index 756085c82e4..decab26845f 100644 --- a/packages/compass-serverstats/src/components/index.tsx +++ b/packages/compass-serverstats/src/components/index.tsx @@ -41,8 +41,8 @@ const workspaceBackgroundStyles = css({ }); const workspaceStyles = css({ - padding: spacing[4], - marginBottom: spacing[6], + padding: spacing[600], + marginBottom: spacing[1600], display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around', @@ -53,7 +53,7 @@ const workspaceStyles = css({ }); const mongosWarningStyles = css({ - margin: spacing[2], + margin: spacing[200], marginBottom: 0, }); diff --git a/packages/compass-serverstats/src/components/server-stats-toolbar.tsx b/packages/compass-serverstats/src/components/server-stats-toolbar.tsx index 8bdf736838a..eda650aa4f0 100644 --- a/packages/compass-serverstats/src/components/server-stats-toolbar.tsx +++ b/packages/compass-serverstats/src/components/server-stats-toolbar.tsx @@ -19,7 +19,7 @@ const serverStatsToolbarStyles = css({ display: 'flex', flexDirection: 'row', alignItems: 'center', - padding: spacing[3], + padding: spacing[400], }); const serverStatsToolbarDarkThemeStyles = css({ @@ -33,9 +33,9 @@ const serverStatsToolbarLightThemeStyles = css({ }); const timeStyles = css({ - padding: `${spacing[2]}px ${spacing[5]}px`, + padding: `${spacing[200]}px ${spacing[800]}px`, borderRadius: '3px', - marginLeft: spacing[2], + marginLeft: spacing[200], }); const timeLightThemeStyles = css({ diff --git a/packages/compass-settings/src/components/modal.tsx b/packages/compass-settings/src/components/modal.tsx index 3879123dd96..0e87d05149d 100644 --- a/packages/compass-settings/src/components/modal.tsx +++ b/packages/compass-settings/src/components/modal.tsx @@ -45,19 +45,19 @@ type SettingsModalProps = { const contentStyles = css({ display: 'flex', height: spacing[7] * 5, - paddingTop: spacing[2], + paddingTop: spacing[200], }); const sideNavStyles = css({ position: 'absolute', - width: spacing[6] * 3, + width: spacing[1600] * 3, }); const settingsStyles = css( { width: '80%', - marginLeft: spacing[6] * 3, - padding: `0 ${spacing[2]}px 0 ${spacing[3]}px`, + marginLeft: spacing[1600] * 3, + padding: `0 ${spacing[200]}px 0 ${spacing[400]}px`, }, focusRing ); @@ -133,7 +133,7 @@ export const SettingsModal: React.FunctionComponent = ({ submitDisabled={!hasChangedSettings} onCancel={onClose} data-testid="settings-modal" - minBodyHeight={spacing[6] * 2} + minBodyHeight={spacing[1600] * 2} >
diff --git a/packages/compass-settings/src/components/settings/gen-ai-settings.tsx b/packages/compass-settings/src/components/settings/gen-ai-settings.tsx index 5dbcea70083..c41a109e2eb 100644 --- a/packages/compass-settings/src/components/settings/gen-ai-settings.tsx +++ b/packages/compass-settings/src/components/settings/gen-ai-settings.tsx @@ -7,7 +7,7 @@ import SettingsList from './settings-list'; import { ConnectedAtlasLoginSettings } from './atlas-login'; const atlasSettingsContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], }); export const GenAISettings: React.FunctionComponent<{ diff --git a/packages/compass-settings/src/components/settings/settings-list.tsx b/packages/compass-settings/src/components/settings/settings-list.tsx index 4950add99c6..b00377d9d26 100644 --- a/packages/compass-settings/src/components/settings/settings-list.tsx +++ b/packages/compass-settings/src/components/settings/settings-list.tsx @@ -44,18 +44,18 @@ type SupportedPreferences = | StringPreferences; const inputStyles = css({ - marginTop: spacing[3], - marginBottom: spacing[3], + marginTop: spacing[400], + marginBottom: spacing[400], }); const devBadgeStyles = css({ - marginLeft: spacing[2], + marginLeft: spacing[200], }); const fieldContainerStyles = css({ - margin: `${spacing[3]}px 0`, + margin: `${spacing[400]}px 0`, fieldset: { - paddingLeft: `${spacing[4]}px`, + paddingLeft: `${spacing[600]}px`, }, }); diff --git a/packages/compass-settings/src/components/settings/theme.tsx b/packages/compass-settings/src/components/settings/theme.tsx index 23cf476ca35..f21b4ccd22b 100644 --- a/packages/compass-settings/src/components/settings/theme.tsx +++ b/packages/compass-settings/src/components/settings/theme.tsx @@ -26,20 +26,20 @@ type ThemeSettingsProps = { }; const checkboxStyles = css({ - marginTop: spacing[3], - marginBottom: spacing[3], + marginTop: spacing[400], + marginBottom: spacing[400], }); const radioBoxStyles = css({ div: { textAlign: 'left', - padding: spacing[3], + padding: spacing[400], justifyContent: 'flex-start', }, }); const themePreviewStyles = css({ - marginRight: spacing[2], + marginRight: spacing[200], maxWidth: '50%', }); diff --git a/packages/compass-settings/src/components/sidebar.tsx b/packages/compass-settings/src/components/sidebar.tsx index 537285d9389..18b78b17b0f 100644 --- a/packages/compass-settings/src/components/sidebar.tsx +++ b/packages/compass-settings/src/components/sidebar.tsx @@ -9,13 +9,13 @@ import { import type { SettingsTabId } from '../stores/settings'; const buttonStyles = css({ - borderRadius: spacing[1], + borderRadius: spacing[100], cursor: 'pointer', - marginBottom: spacing[1], + marginBottom: spacing[100], background: 'none', border: 'none', width: '100%', - padding: spacing[2], + padding: spacing[200], textAlign: 'left', fontWeight: 500, }); diff --git a/packages/compass-shell/src/components/shell-header/shell-header.tsx b/packages/compass-shell/src/components/shell-header/shell-header.tsx index dc1855db0f0..70372a929a5 100644 --- a/packages/compass-shell/src/components/shell-header/shell-header.tsx +++ b/packages/compass-shell/src/components/shell-header/shell-header.tsx @@ -12,7 +12,7 @@ import { import React from 'react'; const shellHeaderStyles = css({ - height: spacing[5], + height: spacing[800], display: 'flex', color: palette.gray.light1, }); @@ -62,14 +62,14 @@ const plainShellHeaderStyles = css({ const shellHeaderRightStyles = css({ display: 'flex', - paddingTop: spacing[1] / 2, - paddingRight: spacing[2], - gap: spacing[2], + paddingTop: spacing[100] / 2, + paddingRight: spacing[200], + gap: spacing[200], }); const operationInProgressStyles = css({ color: palette.green.light2, - marginLeft: spacing[2], + marginLeft: spacing[200], }); export interface ShellHeaderProps { diff --git a/packages/compass-shell/src/components/shell-info-modal/shell-info-modal.tsx b/packages/compass-shell/src/components/shell-info-modal/shell-info-modal.tsx index 77b7e3a4f59..a54adc5de8b 100644 --- a/packages/compass-shell/src/components/shell-info-modal/shell-info-modal.tsx +++ b/packages/compass-shell/src/components/shell-info-modal/shell-info-modal.tsx @@ -15,13 +15,13 @@ import { } from '@mongodb-js/compass-telemetry/provider'; const shortcutsTableContainerStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], maxHeight: '50vh', overflow: 'auto', }); const shortcutsTitleStyles = css({ - marginTop: spacing[4], + marginTop: spacing[600], }); function ShellInfoModal({ diff --git a/packages/compass-sidebar/src/components/connection-info-modal.tsx b/packages/compass-sidebar/src/components/connection-info-modal.tsx index dea39d69ac3..cd9c472bc0c 100644 --- a/packages/compass-sidebar/src/components/connection-info-modal.tsx +++ b/packages/compass-sidebar/src/components/connection-info-modal.tsx @@ -14,7 +14,7 @@ type ConnectionInfo = { }; const infoContainer = css({ - margin: `${spacing[3]}px 0`, + margin: `${spacing[400]}px 0`, }); function InfoTerm({ children }: { children: React.ReactChild }) { diff --git a/packages/compass-sidebar/src/components/csfle-connection-modal.tsx b/packages/compass-sidebar/src/components/csfle-connection-modal.tsx index 63c0abb0485..fe4d0f6ab6c 100644 --- a/packages/compass-sidebar/src/components/csfle-connection-modal.tsx +++ b/packages/compass-sidebar/src/components/csfle-connection-modal.tsx @@ -16,9 +16,9 @@ import { } from '@mongodb-js/compass-telemetry/provider'; const toggleStyles = css({ - marginTop: spacing[3], - marginBottom: spacing[3], - marginRight: spacing[3], + marginTop: spacing[400], + marginBottom: spacing[400], + marginRight: spacing[400], }); const toggleContainerStyles = css({ @@ -27,7 +27,7 @@ const toggleContainerStyles = css({ }); const csfleBannerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], }); export type CSFLEConnectionModalProps = { diff --git a/packages/compass-sidebar/src/components/csfle-marker.tsx b/packages/compass-sidebar/src/components/csfle-marker.tsx index b16be4a8982..71bd91e1f4c 100644 --- a/packages/compass-sidebar/src/components/csfle-marker.tsx +++ b/packages/compass-sidebar/src/components/csfle-marker.tsx @@ -11,8 +11,8 @@ import { const badgeContainerStyles = css({ lineHeight: 1, - paddingLeft: spacing[3], - paddingRight: spacing[3], + paddingLeft: spacing[400], + paddingRight: spacing[400], }); const badgeButtonStyles = css({ diff --git a/packages/compass-sidebar/src/components/db-stats.tsx b/packages/compass-sidebar/src/components/db-stats.tsx index d9bc31fbb37..20469b1f08c 100644 --- a/packages/compass-sidebar/src/components/db-stats.tsx +++ b/packages/compass-sidebar/src/components/db-stats.tsx @@ -23,8 +23,8 @@ type RefreshingStatus = const dbStats = css({ display: 'flex', alignItems: 'center', - padding: `${spacing[5]}px ${spacing[3]}px`, - gap: spacing[5], + padding: `${spacing[800]}px ${spacing[400]}px`, + gap: spacing[800], }); const dbStatNumberDark = css({ diff --git a/packages/compass-sidebar/src/components/non-genuine-marker.tsx b/packages/compass-sidebar/src/components/non-genuine-marker.tsx index 1ba8789312f..fd4bd47cc79 100644 --- a/packages/compass-sidebar/src/components/non-genuine-marker.tsx +++ b/packages/compass-sidebar/src/components/non-genuine-marker.tsx @@ -12,8 +12,8 @@ import { const nonGenuineMarkerContainer = css({ lineHeight: 1, - paddingLeft: spacing[3], - paddingRight: spacing[3], + paddingLeft: spacing[400], + paddingRight: spacing[400], }); const nonGenuineMarkerButton = css({ diff --git a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx index 3ed676de7d2..768a73e0b92 100644 --- a/packages/compass-welcome/src/components/desktop-welcome-tab.tsx +++ b/packages/compass-welcome/src/components/desktop-welcome-tab.tsx @@ -22,7 +22,7 @@ import { WelcomeTabImage } from './welcome-image'; const sectionContainerStyles = css({ margin: 0, - padding: spacing[4], + padding: spacing[600], paddingBottom: 0, maxWidth: '450px', borderRadius: spacing[200], @@ -44,11 +44,11 @@ const titleStyles = css({ }); const descriptionStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], }); const createClusterContainerStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], }); const createClusterButtonStyles = css({ diff --git a/packages/connection-form/src/components/advanced-connection-options.tsx b/packages/connection-form/src/components/advanced-connection-options.tsx index ac553fa4eb0..64cadae0b43 100644 --- a/packages/connection-form/src/components/advanced-connection-options.tsx +++ b/packages/connection-form/src/components/advanced-connection-options.tsx @@ -16,9 +16,9 @@ const disabledOverlayStyles = css({ position: 'absolute', top: 0, // Space around it to ensure added focus borders are covered. - bottom: -spacing[1], - left: -spacing[1], - right: -spacing[1], + bottom: -spacing[100], + left: -spacing[100], + right: -spacing[100], backgroundColor: rgba(palette.white, 0.5), zIndex: 1, cursor: 'not-allowed', diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-options-tabs.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-options-tabs.tsx index 57c0ceb6f8c..149f740a1a3 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/advanced-options-tabs.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/advanced-options-tabs.tsx @@ -23,7 +23,7 @@ import { defaultConnectionString } from '../../constants/default-connection'; import { useConnectionFormSetting } from '../../hooks/use-connect-form-settings'; const tabsStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], }); const tabContentStyles = css({ @@ -38,11 +38,11 @@ const tabWithErrorIndicatorStyles = css({ position: 'relative', '&::after': { position: 'absolute', - top: -spacing[2], - right: -spacing[2], + top: -spacing[200], + right: -spacing[200], content: '""', - width: spacing[2], - height: spacing[2], + width: spacing[200], + height: spacing[200], borderRadius: '50%', backgroundColor: palette.red.base, }, diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options-list-editor.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options-list-editor.tsx index a0986ce2d5d..779cffc70d6 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options-list-editor.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options-list-editor.tsx @@ -18,7 +18,7 @@ import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form' const optionInputContainerStyles = css({ display: 'flex', - gap: spacing[2], + gap: spacing[200], alignItems: 'center', }); diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx index 37bec5e74c8..3e234a1a977 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx @@ -13,12 +13,12 @@ import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form' import UrlOptionsListEditor from './url-options-list-editor'; const urlOptionsContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], }); const urlOptionsDescriptionStyles = css({ - marginTop: spacing[1], - marginBottom: spacing[2], + marginTop: spacing[100], + marginBottom: spacing[200], }); function UrlOptions({ diff --git a/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-default.tsx b/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-default.tsx index 9febaf58f34..ca2991c069d 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-default.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-default.tsx @@ -21,7 +21,7 @@ import { } from '../../../utils/connection-string-helpers'; const textInputWithLabelStyles = css({ - marginTop: spacing[1], + marginTop: spacing[100], }); const defaultAuthMechanismOptions: { diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.tsx index 9eeb1829a15..ae6e010a9a8 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.tsx @@ -38,8 +38,8 @@ import { KMSProviderFields } from '../../../utils/csfle-kms-fields'; import { useConnectionFormSetting } from '../../../hooks/use-connect-form-settings'; const kmsProviderComponentWrapperStyles = css({ - paddingLeft: spacing[3], - marginBottom: spacing[3], + paddingLeft: spacing[400], + marginBottom: spacing[400], }); interface KMSProviderMetadata { @@ -75,7 +75,7 @@ const options: KMSProviderMetadata[] = [ ]; const accordionContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], }); const titleStyles = css({ diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx index 6e211048e15..28ad4198dd3 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx @@ -15,7 +15,7 @@ import { import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor'; const errorContainerStyles = css({ - padding: spacing[3], + padding: spacing[400], width: '100%', }); diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-local-key-generator.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-local-key-generator.tsx index 638ab12be0c..74b99ceaab5 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-local-key-generator.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-local-key-generator.tsx @@ -16,7 +16,7 @@ import type { } from '../../../utils/csfle-kms-fields'; const bannerContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], }); function KMSLocalKeyGenerator({ diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-provider-status-indicator.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-provider-status-indicator.tsx index 8508be777dd..14da22e4a52 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-provider-status-indicator.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-provider-status-indicator.tsx @@ -10,7 +10,7 @@ import type { ConnectionFormError } from '../../../utils/validation'; import { css, Icon, spacing, palette } from '@mongodb-js/compass-components'; const iconStyles = css({ - marginLeft: spacing[2], + marginLeft: spacing[200], display: 'block', }); diff --git a/packages/connection-form/src/components/advanced-options-tabs/general-tab/direct-connection-input.tsx b/packages/connection-form/src/components/advanced-options-tabs/general-tab/direct-connection-input.tsx index 6ed35069709..2bb32c11a23 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/general-tab/direct-connection-input.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/general-tab/direct-connection-input.tsx @@ -12,7 +12,7 @@ import type { MongoClientOptions } from 'mongodb'; import type { UpdateConnectionFormField } from '../../../hooks/use-connect-form'; const descriptionStyles = css({ - marginTop: spacing[1], + marginTop: spacing[100], }); function DirectConnectionInput({ diff --git a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx index df8b59f00dd..7a403e1fbc8 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx @@ -24,7 +24,7 @@ enum MONGODB_SCHEME { } const descriptionStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], }); const regularSchemeDescription = diff --git a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx index d7c8c842d7e..55988eca44a 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx @@ -21,7 +21,7 @@ import TLSCertificateAuthority from './tls-certificate-authority'; import type { TLSOptionName, TLS_OPTIONS } from '../../../utils/tls-handler'; export const checkboxDescriptionStyles = css({ - marginTop: spacing[1], + marginTop: spacing[100], }); export const disabledCheckboxDescriptionStyles = css({ diff --git a/packages/connection-form/src/components/connection-form-modal-actions.tsx b/packages/connection-form/src/components/connection-form-modal-actions.tsx index 42b88ed6c88..a7338f98ae3 100644 --- a/packages/connection-form/src/components/connection-form-modal-actions.tsx +++ b/packages/connection-form/src/components/connection-form-modal-actions.tsx @@ -15,21 +15,21 @@ import type { import { useConnectionFormSetting } from '../hooks/use-connect-form-settings'; const formActionStyles = css({ - paddingLeft: spacing[4], - paddingRight: spacing[4], + paddingLeft: spacing[600], + paddingRight: spacing[600], }); const formActionItemStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], '&:last-child': { - marginBottom: spacing[3], + marginBottom: spacing[400], }, }); const formActionButtonsStyles = css({ display: 'flex', justifyContent: 'flex-end', - gap: spacing[2], + gap: spacing[200], }); const saveAndConnectStyles = css({ diff --git a/packages/connection-form/src/components/connection-string-input.tsx b/packages/connection-form/src/components/connection-string-input.tsx index ac89f3fdaba..58da2dd06c7 100644 --- a/packages/connection-form/src/components/connection-string-input.tsx +++ b/packages/connection-form/src/components/connection-string-input.tsx @@ -18,8 +18,8 @@ import { redactConnectionString } from 'mongodb-connection-string-url'; import type { UpdateConnectionFormField } from '../hooks/use-connect-form'; const textAreaContainerStyle = css({ - marginTop: spacing[1], - marginBottom: spacing[3], + marginTop: spacing[100], + marginBottom: spacing[400], }); const uriLabelContainerStyles = css({ @@ -35,7 +35,7 @@ const editToggleContainerStyles = css({ const connectionStringStyles = css({ textarea: { - fontSize: spacing[2] * 1.75, + fontSize: spacing[200] * 1.75, minHeight: spacing[7], resize: 'vertical', }, @@ -45,7 +45,7 @@ const editToggleStyles = css({ height: 14, width: 26, margin: 0, - marginLeft: spacing[1], + marginLeft: spacing[100], }); const editToggleLabelStyles = css({ @@ -55,7 +55,7 @@ const editToggleLabelStyles = css({ }); const textAreaLabelContainerStyles = css({ - marginTop: spacing[3], + marginTop: spacing[400], display: 'flex', flexDirection: 'row', }); diff --git a/packages/connection-form/src/components/form-help/form-help.tsx b/packages/connection-form/src/components/form-help/form-help.tsx index a3f3ba92eb9..8cccad7a17f 100644 --- a/packages/connection-form/src/components/form-help/form-help.tsx +++ b/packages/connection-form/src/components/form-help/form-help.tsx @@ -26,7 +26,7 @@ const titleStyles = css({ }); const descriptionStyles = css({ - marginTop: spacing[2], + marginTop: spacing[200], }); const sectionDarkModeStyles = css({ diff --git a/packages/databases-collections-list/src/collections.tsx b/packages/databases-collections-list/src/collections.tsx index 03ece77793a..69199320e06 100644 --- a/packages/databases-collections-list/src/collections.tsx +++ b/packages/databases-collections-list/src/collections.tsx @@ -6,7 +6,7 @@ import { NamespaceItemCard } from './namespace-card'; import { ItemsGrid } from './items-grid'; import type { CollectionProps } from 'mongodb-collection-model'; -const COLLECTION_CARD_WIDTH = spacing[6] * 4; +const COLLECTION_CARD_WIDTH = spacing[1600] * 4; const COLLECTION_CARD_HEIGHT = 238; diff --git a/packages/databases-collections-list/src/databases.tsx b/packages/databases-collections-list/src/databases.tsx index 4008acdd46c..5cccc136e5c 100644 --- a/packages/databases-collections-list/src/databases.tsx +++ b/packages/databases-collections-list/src/databases.tsx @@ -6,7 +6,7 @@ import { NamespaceItemCard } from './namespace-card'; import { ItemsGrid } from './items-grid'; import type { DatabaseProps } from 'mongodb-database-model'; -const DATABASE_CARD_WIDTH = spacing[6] * 4; +const DATABASE_CARD_WIDTH = spacing[1600] * 4; const DATABASE_CARD_HEIGHT = 154; diff --git a/packages/databases-collections-list/src/items-grid.tsx b/packages/databases-collections-list/src/items-grid.tsx index 2db562882c8..4cb95e52d12 100644 --- a/packages/databases-collections-list/src/items-grid.tsx +++ b/packages/databases-collections-list/src/items-grid.tsx @@ -25,10 +25,10 @@ import { usePreferences } from 'compass-preferences-model/provider'; type Item = { _id: string } & Record; const rowStyles = css({ - paddingLeft: spacing[3], - paddingRight: spacing[3], - paddingBottom: spacing[2], - columnGap: spacing[2], + paddingLeft: spacing[400], + paddingRight: spacing[400], + paddingBottom: spacing[200], + columnGap: spacing[200], }); const containerStyles = css({ @@ -360,7 +360,7 @@ export const ItemsGrid = ({ return (