chore(compass-components): only put the border on selected themed tabs COMPASS-8025 (#5953)

only put the border on selected themed tabs

Author: lerouxb

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

@@ -37,7 +37,7 @@ const tabStyles = css({
   overflow: 'hidden',
 
   // leave space so the active and other tabs line up
-  borderTop: '4px solid transparent',
+  paddingTop: spacing[100],
 
   backgroundColor: 'var(--workspace-tab-background-color)',
   color: 'var(--workspace-tab-color)',
@@ -110,14 +110,18 @@ 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': {
     cursor: 'default',
   },
 });
 
+const selectedThemedTabStyles = css({
+  borderTop: `${spacing[100]}px solid var(--workspace-tab-selected-border-color)`,
+  paddingTop: 0,
+});
+
 const draggingTabStyles = css({
   cursor: 'grabbing !important',
 });
@@ -240,6 +244,7 @@ function Tab({
         tabStyles,
         themeClass,
         isSelected && selectedTabStyles,
+        isSelected && tabTheme && selectedThemedTabStyles,
         isDragging && draggingTabStyles,
         subtitle && animatedSubtitleStyles
       )}