fix(sdk): entity picker theming fixes (#50449)

* use css variables for skeleton background color

* apply theme to folder color

* replace theme.white with themeColor

* use name of folder chevron color

* add background-inverse color mapping

* Revert "add background-inverse color mapping"

This reverts commit d0b546c5.

* avoid overriding folder chevron color in emotion

* use Mantine style overrides for NavLink

frontend/src/metabase/ui/components/feedback/Skeleton/Skeleton.styled.tsx

@@ -16,7 +16,7 @@ export const getSkeletonOverrides = (): MantineThemeOverride["components"] => {
         return {
           // We replace Mantine's pulsing animation with a shimmer animation
           root: {
-            backgroundColor: "rgba(245,248,250,1.0)",
+            backgroundColor: "var(--mb-color-background-disabled)",
             "&::before": {
               background:
                 "linear-gradient(100deg, transparent, var(--mb-color-bg-medium), transparent) ! important",

frontend/src/metabase/ui/components/inputs/SegmentedControl/SegmentedControl.styled.tsx

@@ -51,10 +51,12 @@ export const getSegmentedControlOverrides =
             backgroundColor: theme.fn.themeColor("bg-medium"),
           },
           controlActive: {
-            backgroundColor: shouldAnimate ? theme.white : undefined,
+            backgroundColor: shouldAnimate
+              ? theme.fn.themeColor("bg-white")
+              : undefined,
           },
           indicator: {
-            backgroundColor: theme.white,
+            backgroundColor: theme.fn.themeColor("bg-white"),
           },
         };
       },

frontend/src/metabase/ui/components/navigation/NavLink/NavLink.styled.tsx

@@ -13,6 +13,12 @@ export const getNavLinkOverrides = (): MantineThemeOverride["components"] => ({
       icon: {
         color: theme.fn.themeColor("text-dark"),
       },
+      rightSection: {
+        // Apply default icon color for section icons when inactive
+        "&:not([data-active] &)": {
+          color: "var(--mb-color-text-primary)",
+        },
+      },
     }),
     variants: {
       default: () => ({