Design/Theme: Change dropdown background in dark themes (#100415)

* Dropdowns: Change background for Selects/Comboboxs

* Update

* Update

* Review fixes

* Update

packages/grafana-data/src/themes/createComponents.ts

@@ -80,7 +80,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     input,
     panel,
     dropdown: {
-      background: input.background,
+      background: colors.background.elevated,
     },
     tooltip: {
       background: colors.background.elevated,

packages/grafana-prometheus/src/querybuilder/shared/OperationInfoButton.tsx

@@ -94,8 +94,8 @@ const getStyles = (theme: GrafanaTheme2) => {
   return {
     docBox: css({
       overflow: 'hidden',
-      background: theme.colors.background.primary,
-      border: `1px solid ${theme.colors.border.strong}`,
+      background: theme.colors.background.elevated,
+      border: `1px solid ${theme.colors.border.weak}`,
       boxShadow: theme.shadows.z3,
       maxWidth: '600px',
       padding: theme.spacing(1),

packages/grafana-ui/src/components/Cascader/styles.ts

@@ -72,8 +72,8 @@ export const getCascaderStyles = (theme: GrafanaTheme2) => ({
     '.rc-cascader': {
       '&-menus': {
         overflow: 'hidden',
-        background: theme.colors.background.canvas,
-        border: `1px solid ${theme.colors.border.weak}`,
+        background: theme.colors.background.elevated,
+        border: `none`,
         borderRadius: theme.shape.radius.default,
         boxShadow: theme.shadows.z3,
         whiteSpace: 'nowrap',
@@ -128,7 +128,7 @@ export const getCascaderStyles = (theme: GrafanaTheme2) => ({
         height: '192px',
         listStyle: 'none',
         margin: 0,
-        padding: 0,
+        padding: theme.spacing(0.5),
         borderRight: `1px solid ${theme.colors.border.weak}`,
         overflow: 'auto',
 
@@ -140,6 +140,7 @@ export const getCascaderStyles = (theme: GrafanaTheme2) => ({
           height: theme.spacing(4),
           lineHeight: theme.spacing(4),
           padding: theme.spacing(0, 4, 0, 2),
+          borderRadius: theme.shape.radius.default,
           cursor: 'pointer',
           whiteSpace: 'nowrap',
           overflow: 'hidden',

packages/grafana-ui/src/components/Combobox/Combobox.tsx

@@ -407,7 +407,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
           })}
         >
           {isOpen && (
-            <ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef}>
+            <ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef} padding={0.5}>
               {!asyncError && (
                 <ul style={{ height: rowVirtualizer.getTotalSize() }} className={styles.menuUlContainer}>
                   {rowVirtualizer.getVirtualItems().map((virtualRow) => {

packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx

@@ -344,7 +344,7 @@ export const MultiCombobox = <T extends string | number>(props: MultiComboboxPro
           {...getMenuProps({ ref: floatingRef })}
         >
           {isOpen && (
-            <ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef}>
+            <ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef} padding={0.5}>
               <ul style={{ height: rowVirtualizer.getTotalSize() }} className={styles.menuUlContainer}>
                 {rowVirtualizer.getVirtualItems().map((virtualRow) => {
                   const startingNewGroup = isNewGroup(options[virtualRow.index], options[virtualRow.index - 1]);

packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts

@@ -46,6 +46,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
     option: css({
       padding: MENU_ITEM_PADDING,
       cursor: 'pointer',
+      borderRadius: theme.shape.radius.default,
       width: '100%',
       '&:hover': {
         background: theme.colors.action.hover,

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -54,7 +54,7 @@ export const SelectMenu = ({
       style={{ maxHeight }}
       aria-label="Select options menu"
     >
-      <ScrollContainer ref={innerRef} maxHeight="inherit" overflowX="hidden" showScrollIndicators>
+      <ScrollContainer ref={innerRef} maxHeight="inherit" overflowX="hidden" showScrollIndicators padding={0.5}>
         {toggleAllOptions && (
           <ToggleAllOption
             state={toggleAllOptions.state}

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -27,6 +27,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
       whiteSpace: 'nowrap',
       cursor: 'pointer',
       borderLeft: '2px solid transparent',
+      borderRadius: theme.shape.radius.default,
 
       '&:hover': {
         background: theme.colors.action.hover,

public/app/core/components/TagFilter/TagOption.tsx

@@ -27,16 +27,17 @@ export const TagOption = ({ data, className, label, isFocused, innerProps }: Opt
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     option: css({
-      padding: theme.spacing(1),
+      padding: theme.spacing(0.5),
       whiteSpace: 'nowrap',
       cursor: 'pointer',
       borderLeft: '2px solid transparent',
+      borderRadius: theme.shape.radius.default,
       '&:hover': {
-        background: theme.colors.background.secondary,
+        background: theme.colors.action.hover,
       },
     }),
     optionFocused: css({
-      background: theme.colors.background.secondary,
+      background: theme.colors.action.focus,
       borderStyle: 'solid',
       borderTop: 0,
       borderRight: 0,

public/app/features/datasources/components/picker/DataSourceCard.tsx

@@ -41,15 +41,14 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
   return {
     card: css({
       cursor: 'pointer',
-      backgroundColor: theme.colors.background.primary,
-      borderBottom: `1px solid ${theme.colors.border.weak}`,
+      backgroundColor: 'transparent',
       // Move to list component
       marginBottom: 0,
-      // set this to 0 to override the default card radius
-      // also need to disable our eslint rule
-      // eslint-disable-next-line @grafana/no-border-radius-literal
-      borderRadius: 0,
       padding: theme.spacing(1),
+
+      '&:hover': {
+        backgroundColor: theme.colors.action.hover,
+      },
     }),
     heading: css({
       width: '100%',
@@ -98,7 +97,19 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
       color: theme.colors.border.weak,
     }),
     selected: css({
-      backgroundColor: theme.colors.background.secondary,
+      background: theme.colors.action.selected,
+
+      '&::before': {
+        backgroundImage: theme.colors.gradients.brandVertical,
+        borderRadius: theme.shape.radius.default,
+        content: '" "',
+        display: 'block',
+        height: '100%',
+        position: 'absolute',
+        transform: 'translateX(-50%)',
+        width: theme.spacing(0.5),
+        left: 0,
+      },
     }),
     meta: css({
       display: 'block',

public/app/features/datasources/components/picker/DataSourceList.tsx

@@ -141,6 +141,7 @@ function getStyles(theme: GrafanaTheme2, selectedItemCssSelector: string) {
     container: css({
       display: 'flex',
       flexDirection: 'column',
+      padding: theme.spacing(0.5),
       [`${selectedItemCssSelector}`]: {
         backgroundColor: theme.colors.background.secondary,
       },

public/app/features/datasources/components/picker/DataSourcePicker.tsx

@@ -380,8 +380,10 @@ function getStylesPickerContent(theme: GrafanaTheme2) {
     container: css({
       display: 'flex',
       flexDirection: 'column',
-      background: theme.colors.background.primary,
+      background: theme.colors.background.elevated,
+      borderRadius: theme.shape.radius.default,
       boxShadow: theme.shadows.z3,
+      overflow: 'hidden',
     }),
     picker: css({
       background: theme.colors.background.secondary,