[dev tools] Theme var - update usage for borealis (elastic#204636)

## Summary

Short and simple EUI theme update. Only affects the padding to the left
of the `Console` text. Its unchanged.

<img width="307" alt="Screenshot 2024-12-17 at 12 15 00 PM"
src="https://github.com/user-attachments/assets/e3b4128f-4179-4c51-88a3-3ac9f2b95654"
/>

---------

Co-authored-by: kibanamachine <[email protected]>

src/platform/plugins/shared/dev_tools/public/application.tsx

@@ -11,9 +11,8 @@ import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
 import { HashRouter as Router, Routes, Route } from '@kbn/shared-ux-router';
-import { EuiTab, EuiTabs, EuiToolTip, EuiBetaBadge } from '@elastic/eui';
+import { EuiTab, EuiTabs, EuiToolTip, EuiBetaBadge, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import type {
   ApplicationStart,
@@ -56,6 +55,7 @@ function DevToolsWrapper({
   location,
   startServices,
 }: DevToolsWrapperProps) {
+  const { euiTheme } = useEuiTheme();
   const { docTitleService, breadcrumbService } = appServices;
   const mountedTool = useRef<MountedDevToolDescriptor | null>(null);
 
@@ -75,7 +75,7 @@ function DevToolsWrapper({
 
   return (
     <main className="devApp">
-      <EuiTabs css={{ paddingLeft: euiThemeVars.euiSizeS }} size="l">
+      <EuiTabs css={{ paddingLeft: euiTheme.size.s }} size="l">
         {devTools.map((currentDevTool) => (
           <EuiTab
             key={currentDevTool.id}

src/platform/plugins/shared/dev_tools/tsconfig.json

@@ -9,7 +9,6 @@
     "@kbn/url-forwarding-plugin",
     "@kbn/management-plugin",
     "@kbn/i18n",
-    "@kbn/ui-theme",
     "@kbn/shared-ux-router",
     "@kbn/deeplinks-devtools",
     "@kbn/config-schema",