chore: active tabs the same colour as the active workspace COMPASS-7958 (#5934)

* active tabs the same colour as the active workspace

* keep the single connection colours for now

* the close button is always visible

* match the selected colour used in the sidebar

* also match the dark mode colour

* the close button is always visible

* update expected colours

Author: lerouxb

packages/compass-components/src/components/workspace-tabs/tab.spec.tsx

@@ -44,10 +44,6 @@ describe('Tab', function () {
         .visible;
     });
 
-    it('should render the close tab button visible', async function () {
-      expect(await screen.findByLabelText('Close Tab')).to.be.visible;
-    });
-
     it('should call "onClose" when the close button is clicked', async function () {
       expect(onCloseSpy.callCount).to.equal(0);
       const closeTabButton = await screen.findByLabelText('Close Tab');
@@ -78,10 +74,6 @@ describe('Tab', function () {
       );
     });
 
-    it('should render the close tab button hidden', async function () {
-      expect(await screen.findByLabelText('Close Tab')).to.not.be.visible;
-    });
-
     // Focus visible is not working proper in jsdom environment
     it.skip('should render the close tab button visible when the tab is focused', async function () {
       const tabToFocus = await screen.findByRole('tab');

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -24,12 +24,21 @@ const tabStyles = css({
   paddingRight: spacing[1],
   gap: spacing[2],
 
+  // same as the border at the top
+  paddingBottom: '4px',
+
   maxWidth: spacing[6] * 4,
   minWidth: spacing[6] * 2,
   height: 36,
   position: 'relative',
   outline: 'none',
 
+  // hide the close button until it animates in
+  overflow: 'hidden',
+
+  // leave space so the active and other tabs line up
+  borderTop: '4px solid transparent',
+
   backgroundColor: 'var(--workspace-tab-background-color)',
   color: 'var(--workspace-tab-color)',
   boxShadow: 'inset -1px -1px 0 0 var(--workspace-tab-border-color)',
@@ -78,6 +87,7 @@ const tabLightThemeStyles = css({
   '--workspace-tab-border-color': palette.gray.light2,
   '--workspace-tab-color': palette.gray.base,
   '--workspace-tab-selected-color': palette.green.dark2,
+  '--workspace-tab-selected-border-color': 'transparent',
   '&:focus-visible': {
     '--workspace-tab-selected-color': palette.blue.base,
     '--workspace-tab-border-color': palette.blue.base,
@@ -90,6 +100,7 @@ const tabDarkThemeStyles = css({
   '--workspace-tab-border-color': palette.gray.dark2,
   '--workspace-tab-color': palette.gray.base,
   '--workspace-tab-selected-color': palette.green.base,
+  '--workspace-tab-selected-border-color': 'transparent',
   '&:focus-visible': {
     '--workspace-tab-selected-color': palette.blue.light1,
     '--workspace-tab-border-color': palette.blue.light1,
@@ -99,6 +110,7 @@ const tabDarkThemeStyles = css({
 const selectedTabStyles = css({
   color: 'var(--workspace-tab-selected-color)',
   backgroundColor: 'var(--workspace-tab-selected-background-color)',
+  borderTopColor: 'var(--workspace-tab-selected-border-color)',
   boxShadow: 'inset -1px 0 0 0 var(--workspace-tab-border-color)',
 
   '&:hover': {
@@ -158,11 +170,15 @@ const tabSubtitleStyles = css({
 });
 
 const closeButtonStyles = css({
-  visibility: 'hidden',
+  transition: tabTransition,
+  transitionProperty: 'opacity, transform',
+  transform: 'translateY(44px)',
+  opacity: 0,
 });
 
 const selectedCloseButtonStyles = css({
-  visibility: 'visible',
+  transform: 'translateY(0)',
+  opacity: 1,
 });
 
 type IconGlyph = Extract<keyof typeof glyphs, string>;

packages/compass-connections/src/hooks/use-tab-connection-theme.spec.ts

@@ -99,8 +99,9 @@ describe('useTabConnectionTheme', function () {
           '--workspace-tab-background-color': '#FFDFB5',
           '--workspace-tab-border-color': '#E8EDEB',
           '--workspace-tab-color': '#5C6C75',
-          '--workspace-tab-selected-background-color': '#FFD19A',
-          '--workspace-tab-selected-color': '#3D4F58',
+          '--workspace-tab-selected-background-color': '#FFFFFF',
+          '--workspace-tab-selected-border-color': '#FFD19A',
+          '--workspace-tab-selected-color': '#1C2D38',
         });
       });
     });

packages/compass-connections/src/hooks/use-tab-connection-theme.ts

@@ -46,10 +46,13 @@ export function useTabConnectionTheme(): ThemeProvider {
         '--workspace-tab-color': darkTheme
           ? palette.gray.base
           : palette.gray.dark1,
-        '--workspace-tab-selected-background-color': activeBgColor,
+        '--workspace-tab-selected-background-color': darkTheme
+          ? palette.black
+          : palette.white,
+        '--workspace-tab-selected-border-color': activeBgColor,
         '--workspace-tab-selected-color': darkTheme
-          ? palette.gray.light2
-          : palette.gray.dark2,
+          ? palette.white
+          : palette.gray.dark3,
         '&:focus-visible': {
           '--workspace-tab-border-color': darkTheme
             ? palette.blue.light1