advanced setting tutorial

dev_docs/tutorials/advanced_settings.mdx

@@ -53,26 +53,23 @@ On the client, the `uiSettings` service is accessible directly from `core` and t
 The following is a basic example for using the `uiSettings` service:
 
 **src/plugins/charts/public/plugin.ts**
+
 ```ts
 import { Plugin, CoreSetup } from '@kbn/core/public';
-import { ExpressionsSetup } from '../../expressions/public';
+import { ExpressionsSetup } from '@kbn/expressions-plugin/public';
 import { palette, systemPalette } from '../common';
 
-import { ThemeService, LegacyColorsService } from './services';
+import { ThemeService } from './services';
 import { PaletteService } from './services/palettes/service';
 import { ActiveCursor } from './services/active_cursor';
 
-export type Theme = Omit<ThemeService, 'init'>;
-export type Color = Omit<LegacyColorsService, 'init'>;
-
 interface SetupDependencies {
   expressions: ExpressionsSetup;
 }
 
 /** @public */
 export interface ChartsPluginSetup {
-  legacyColors: Color;
-  theme: Theme;
+  theme: Omit<ThemeService, 'init'>;
   palettes: ReturnType<PaletteService['setup']>;
 }
 
@@ -84,7 +81,6 @@ export type ChartsPluginStart = ChartsPluginSetup & {
 /** @public */
 export class ChartsPlugin implements Plugin<ChartsPluginSetup, ChartsPluginStart> {
   private readonly themeService = new ThemeService();
-  private readonly legacyColorsService = new LegacyColorsService();
   private readonly paletteService = new PaletteService();
   private readonly activeCursor = new ActiveCursor();
 
@@ -93,22 +89,19 @@ export class ChartsPlugin implements Plugin<ChartsPluginSetup, ChartsPluginStart
   public setup(core: CoreSetup, dependencies: SetupDependencies): ChartsPluginSetup {
     dependencies.expressions.registerFunction(palette);
     dependencies.expressions.registerFunction(systemPalette);
-    this.themeService.init(core.uiSettings);
-    this.legacyColorsService.init(core.uiSettings);
-    this.palettes = this.paletteService.setup(this.legacyColorsService);
+    this.themeService.init(core.theme);
+    this.palettes = this.paletteService.setup();
 
     this.activeCursor.setup();
 
     return {
-      legacyColors: this.legacyColorsService,
       theme: this.themeService,
       palettes: this.palettes,
     };
   }
 
   public start(): ChartsPluginStart {
     return {
-      legacyColors: this.legacyColorsService,
       theme: this.themeService,
       palettes: this.palettes!,
       activeCursor: this.activeCursor,