[refactor] Clean up disabled styles

+ fix low contrast selection color on disabled badges

- skip inline style custom colors completely if disabled, no need to calculate or apply them. this allows us to remove `!important` CSS

- skip other named colors as well, also no need to apply them. and clickable styles, that definitely makes no sense

packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiBadge is disabled 1`] = `
 <span
   aria-label="aria-label"
-  class="euiBadge testClass1 testClass2 emotion-euiBadge-default-disabled-euiTestCss"
+  class="euiBadge testClass1 testClass2 emotion-euiBadge-disabled-euiTestCss"
   data-test-subj="test subject string"
   title="Content"
 >

packages/eui/src/components/badge/badge.stories.tsx

@@ -42,7 +42,7 @@ export const Playground: Story = {
 export const CustomColors: Story = {
   parameters: {
     controls: {
-      include: ['color', 'children'],
+      include: ['color', 'children', 'isDisabled'],
     },
   },
   args: {

packages/eui/src/components/badge/badge.styles.ts

@@ -111,15 +111,12 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     danger: css(setBadgeColorVars(badgeColors.danger)),
     success: css(setBadgeColorVars(badgeColors.success)),
     disabled: css`
-      /* stylelint-disable declaration-no-important */
+      ${setBadgeColorVars(badgeColors.disabled)}
 
-      /* Using !important to override inline styles */
-      --euiBadgeTextColor: ${badgeColors.disabled.color};
-      --euiBadgeBackgroundColor: ${badgeColors.disabled.backgroundColor};
-      color: ${badgeColors.disabled.color} !important;
-      background-color: ${badgeColors.disabled.backgroundColor} !important;
-
-      /* stylelint-enable declaration-no-important */
+      /* Override selection color, since disabled badges have rgba backgrounds with opacity */
+      .euiBadge__text::selection {
+        color: ${euiTheme.colors.emptyShade};
+      }
     `,
 
     // Content wrapper

packages/eui/src/components/badge/badge.tsx

@@ -132,6 +132,8 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
 
   const euiTheme = useEuiTheme();
   const customColorStyles = useMemo(() => {
+    // Disabled badges should not have custom colors
+    if (isDisabled) return style;
     // Named colors set their styles via Emotion CSS and not inline styles
     if (isNamedColor) return style;
 
@@ -164,14 +166,17 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
         );
       }
     }
-  }, [color, isNamedColor, style, euiTheme]);
+  }, [color, isNamedColor, isDisabled, style, euiTheme]);
 
   const styles = useEuiMemoizedStyles(euiBadgeStyles);
   const cssStyles = [
     styles.euiBadge,
-    isNamedColor && styles[color as BadgeColor],
-    (onClick || href) && !iconOnClick && styles.clickable,
-    isDisabled && styles.disabled,
+    ...(isDisabled
+      ? [styles.disabled]
+      : [
+          isNamedColor && styles[color as BadgeColor],
+          !iconOnClick && (onClick || href) && styles.clickable,
+        ]),
   ];
   const textCssStyles = [
     styles.text.euiBadge__text,