chore: migrate to leafygreen palette and use color vars everywhere (#3563)

* remove compassUiColors

* replace uiColors with palette

* use palette vars in tsx files

* replace colors in jsx

* use color vars in ts and jsx

* use color vars in js

* use color vars in ace themes

* migrate removed colors

* replace transparent colors

* replace rgba with vars in less

* replace white

* reformat

* replace colors in tests

Author: mcasimir

packages/compass-aggregations/src/components/input-preview/input-preview.module.less

@@ -20,7 +20,7 @@
     flex: none;
     border: 1px solid @palette__gray--light-2;
     border-radius: 4px;
-    box-shadow: 1px 1px 4px rgba(0, 30, 43, 0.1);
+    box-shadow: 1px 1px 4px fade(@palette__black, 10%);
     width: 384px;
     overflow: scroll;
     min-height: 150px;

packages/compass-aggregations/src/components/loading-overlay/loading-overlay.module.less

@@ -7,7 +7,7 @@
   right: 0;
   bottom: 0;
   z-index: 1000;
-  background-color: rgba(0, 30, 43, 0.08);;
+  background-color: fade(@palette__black, 8%);;
   display: flex;
   align-items: center;
   justify-content: center;

packages/compass-aggregations/src/components/pipeline-explain/explain-indexes.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   css,
   spacing,
-  uiColors,
+  palette,
   Accordion,
   IndexIcon,
   Badge,
@@ -26,7 +26,7 @@ const accordianContainerStyles = css({
 });
 
 const shardStyles = css({
-  color: uiColors.gray.dark1,
+  color: palette.gray.dark1,
 });
 
 const indexKeyStyles = css({

packages/compass-aggregations/src/components/pipeline-results-workspace/index.tsx

@@ -9,7 +9,7 @@ import {
   ErrorSummary,
   Subtitle,
   Button,
-  uiColors
+  palette
 } from '@mongodb-js/compass-components';
 
 import type { RootState } from '../../modules';
@@ -71,7 +71,7 @@ const outResult = css({
 });
 
 const outResultText = css({
-  color: uiColors.green.dark2,
+  color: palette.green.dark2,
   textAlign: 'center'
 });
 

packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-empty-results.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   css,
   spacing,
-  uiColors,
+  palette,
   H3,
   Subtitle,
 } from '@mongodb-js/compass-components';
@@ -16,7 +16,7 @@ const containerStyles = css({
 });
 
 const headingStyles = css({
-  color: uiColors.green.dark2,
+  color: palette.green.dark2,
   fontWeight: 'normal',
 });
 

packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx

@@ -5,7 +5,7 @@ import {
   spacing,
   Body,
   Link,
-  uiColors,
+  palette,
   Tooltip,
   SpinLoader,
 } from '@mongodb-js/compass-components';
@@ -25,7 +25,7 @@ const countButtonStyles = css({
   display: 'inline',
   height: spacing[4] + spacing[1],
   ':focus': {
-    outline: `${spacing[1]}px auto ${uiColors.focus}`,
+    outline: `${spacing[1]}px auto ${palette.blue.light1}`,
   },
 });
 

packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css, cx, spacing, uiColors, withTheme } from '@mongodb-js/compass-components';
+import { css, cx, spacing, palette, withTheme } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 
 import PipelineHeader from './pipeline-header';
@@ -27,14 +27,14 @@ const headerAndOptionsRowStyles = css({
   gridArea: 'headerAndOptionsRow',
   border: '1px solid',
   borderRadius: '6px',
-  borderColor: uiColors.gray.light2,
+  borderColor: palette.gray.light2,
   padding: `${spacing[2]}px ${spacing[2]}px ${spacing[2]}px ${spacing[3]}px`,
-  background: uiColors.white
+  background: palette.white
 });
 
 const headerAndOptionsRowDarkStyles = css({
-  borderColor: uiColors.gray.dark2,
-  background: uiColors.gray.dark3,
+  borderColor: palette.gray.dark2,
+  background: palette.gray.dark3,
 });
 
 const settingsRowStyles = css({

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import type { ConnectedProps } from 'react-redux';
-import { css, cx, Label, spacing, TextInput, uiColors } from '@mongodb-js/compass-components';
+import { css, cx, Label, spacing, TextInput, palette } from '@mongodb-js/compass-components';
 
 import type { RootState } from '../../../modules';
 import { collationStringChanged } from '../../../modules/collation-string';
@@ -33,7 +33,7 @@ const inputStyles = css({
 
 const inputWithErrorStyles = css({
   input: {
-    borderColor: uiColors.red.base,
+    borderColor: palette.red.base,
   },
 });
 

packages/compass-aggregations/src/components/pipeline/pipeline.module.less

@@ -1,3 +1,5 @@
+@import (reference) "mongodb-compass/src/app/styles/index.less";
+
 .pipeline {
   display: flex;
   flex-grow: 1;
@@ -9,8 +11,8 @@
 
   &-collation-toolbar-container {
     padding: 6px 10px 6px 15px;
-    border-bottom: 1px solid rgba(0, 30, 43, 0.2);
-    box-shadow: 1px 1px 3px rgba(0, 30, 43, 0.4);
+    border-bottom: 1px solid fade(@palette__black, 20%);
+    box-shadow: 1px 1px 3px fade(@palette__black, 40%);
   }
 
   &-error-banner-container {

packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx

@@ -4,7 +4,7 @@ import {
   IconButton,
   css,
   spacing,
-  uiColors,
+  palette,
   Body,
   withTheme
 } from '@mongodb-js/compass-components';
@@ -24,11 +24,11 @@ const toolbarTitleStyles = css({
 });
 
 const titleStylesDark = css({
-  color: uiColors.green.light2,
+  color: palette.green.light2,
 });
 
 const titleStylesLight = css({
-  color: uiColors.green.dark2,
+  color: palette.green.dark2,
 });
 
 const toolbarStyles = css({