[ui] Use semantic tooltip styles for filter tag, fix context menu col…

…or (#18487)

## Summary & Motivation

Use regular tooltip background colors for tags, fix asset node context
menu colors.


https://github.com/dagster-io/dagster/assets/2823852/4567dd05-7006-4c23-8421-c52d178298cd

<img width="288" alt="Screenshot 2023-12-04 at 3 45 07 PM"
src="https://github.com/dagster-io/dagster/assets/2823852/b18e3e65-f5bc-48ee-b7fa-8429660b4121">

## How I Tested These Changes

- Hover a filter tag with truncation, verify styles.
- View context menu in asset graph.

js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {colorBackgroundDefault, colorTextDefault} from '../theme/color';
+import {
+  colorBackgroundDefault,
+  colorTextDefault,
+  colorTooltipBackground,
+  colorTooltipText,
+} from '../theme/color';
 
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
@@ -47,8 +52,8 @@ export const BaseTag = (props: Props) => {
           data-tooltip={typeof label === 'string' ? label : tooltipText}
           data-tooltip-style={JSON.stringify({
             ...BaseTagTooltipStyle,
-            backgroundColor: fillColor,
-            color: textColor,
+            backgroundColor: colorTooltipBackground(),
+            color: colorTooltipText(),
           })}
         >
           {label}

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx

@@ -20,6 +20,7 @@ import {
   colorLineageNodeBorderSelected,
   colorLineageNodeBorderHover,
   colorLineageNodeBackground,
+  colorPopoverBackground,
 } from '@dagster-io/ui-components';
 import countBy from 'lodash/countBy';
 import isEqual from 'lodash/isEqual';
@@ -260,8 +261,7 @@ export const AssetNodeContextMenuWrapper = React.memo(
                   position: 'absolute',
                   top: menuPosition.top,
                   left: menuPosition.left,
-                  backgroundColor: '#fff',
-                  border: '1px solid #ccc',
+                  backgroundColor: colorPopoverBackground(),
                   boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
                   zIndex: 10,
                 }}

js_modules/dagster-ui/packages/ui-core/src/ui/Filters/useFilter.tsx

@@ -5,6 +5,8 @@ import {
   colorBackgroundBlue,
   colorLinkDefault,
   colorTextBlue,
+  colorTooltipBackground,
+  colorTooltipText,
 } from '@dagster-io/ui-components';
 import React from 'react';
 import styled from 'styled-components';
@@ -82,8 +84,8 @@ export const FilterTagHighlightedText = React.forwardRef(
 );
 
 const LabelTooltipStyles = JSON.stringify({
-  background: colorBackgroundBlue(),
-  color: colorTextBlue(),
+  background: colorTooltipBackground(),
+  color: colorTooltipText(),
   border: 'none',
   borderRadius: 7,
   overflow: 'hidden',