Make Borealis the default theme in non-serverless (#203840)

packages/kbn-optimizer/limits.yml

@@ -2,7 +2,7 @@ pageLoadAssetSize:
   actions: 20000
   advancedSettings: 27596
   aiAssistantManagementSelection: 19146
-  aiops: 18000
+  aiops: 32733
   alerting: 106936
   apm: 64385
   banners: 17946
@@ -15,8 +15,8 @@ pageLoadAssetSize:
   cloudExperiments: 109746
   cloudFullStory: 18493
   cloudLinks: 55984
-  cloudSecurityPosture: 19270
-  console: 46091
+  cloudSecurityPosture: 34398
+  console: 61298
   contentManagement: 16254
   controls: 60000
   core: 564663
@@ -63,7 +63,7 @@ pageLoadAssetSize:
   expressionTagcloud: 27505
   expressionXY: 45000
   features: 21723
-  fieldFormats: 65209
+  fieldFormats: 80485
   fieldsMetadata: 21885
   files: 22673
   filesManagement: 18683

packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts

@@ -93,6 +93,8 @@ describe('getOptimizerCacheKey()', () => {
           "themeTags": Array [
             "v8light",
             "v8dark",
+            "borealislight",
+            "borealisdark",
           ],
         },
       }

src/core/packages/rendering/server-internal/src/bootstrap/bootstrap_renderer.test.ts

@@ -340,6 +340,31 @@ describe('bootstrapRenderer', () => {
         uiSettingsClient,
       });
 
+      expect(getThemeTagMock).toHaveBeenCalledTimes(1);
+      expect(getThemeTagMock).toHaveBeenCalledWith({
+        name: 'borealis',
+        darkMode: false,
+      });
+    });
+
+    it('calls getThemeTag with `v8` theme name when buildFlavor is `serverless`', async () => {
+      renderer = bootstrapRendererFactory({
+        auth,
+        packageInfo: {
+          ...packageInfo,
+          buildFlavor: 'serverless',
+        },
+        uiPlugins,
+        baseHref: `/base-path/${packageInfo.buildShaShort}`, // the base href as provided by static assets module
+      });
+
+      const request = httpServerMock.createKibanaRequest();
+
+      await renderer({
+        request,
+        uiSettingsClient,
+      });
+
       expect(getThemeTagMock).toHaveBeenCalledTimes(1);
       expect(getThemeTagMock).toHaveBeenCalledWith({
         name: 'v8',

src/core/packages/rendering/server-internal/src/bootstrap/bootstrap_renderer.ts

@@ -10,7 +10,11 @@
 import { createHash } from 'crypto';
 import { PackageInfo } from '@kbn/config';
 import type { KibanaRequest, HttpAuth } from '@kbn/core-http-server';
-import { type DarkModeValue, parseDarkModeValue } from '@kbn/core-ui-settings-common';
+import {
+  type DarkModeValue,
+  DEFAULT_THEME_NAME,
+  parseDarkModeValue,
+} from '@kbn/core-ui-settings-common';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-server';
 import type { UiPlugins } from '@kbn/core-plugins-base-server-internal';
 import { InternalUserSettingsServiceSetup } from '@kbn/core-user-settings-server-internal';
@@ -58,7 +62,11 @@ export const bootstrapRendererFactory: BootstrapRendererFactory = ({
 
   return async function bootstrapRenderer({ uiSettingsClient, request, isAnonymousPage = false }) {
     let darkMode: DarkModeValue = false;
-    let themeName: string = 'amsterdam';
+    let themeName: string = DEFAULT_THEME_NAME;
+
+    if (packageInfo.buildFlavor !== 'serverless') {
+      themeName = 'borealis';
+    }
 
     try {
       const authenticated = isAuthenticated(request);

src/core/packages/ui-settings/common/src/theme.ts

@@ -35,7 +35,7 @@ export type ThemeTags = readonly ThemeTag[];
  * An array of theme tags available in Kibana by default when not customized
  * using KBN_OPTIMIZER_THEMES environment variable.
  */
-export const DEFAULT_THEME_TAGS: ThemeTags = ThemeAmsterdamTags;
+export const DEFAULT_THEME_TAGS: ThemeTags = SUPPORTED_THEME_TAGS;
 
 export const FALLBACK_THEME_TAG: ThemeTag = 'v8light';
 
@@ -43,18 +43,14 @@ const isValidTag = (tag: unknown) =>
   SUPPORTED_THEME_TAGS.includes(tag as (typeof SUPPORTED_THEME_TAGS)[number]);
 
 export function parseThemeTags(input?: unknown): ThemeTags {
-  if (!input) {
-    return DEFAULT_THEME_TAGS;
-  }
-
-  if (input === '*') {
-    // TODO: Replace with SUPPORTED_THEME_TAGS when Borealis is in public beta
+  if (!input || input === '*') {
     return DEFAULT_THEME_TAGS;
   }
 
   // TODO: remove when Borealis is in public beta
+  // This is left here for backwards compatibility during Borealis testing.
   if (input === 'experimental') {
-    return SUPPORTED_THEME_TAGS;
+    return DEFAULT_THEME_TAGS;
   }
 
   let rawTags: string[];

src/core/packages/ui-settings/server-internal/src/settings/index.test.ts

@@ -12,20 +12,26 @@ import { getDateFormatSettings } from './date_formats';
 import { getMiscUiSettings } from './misc';
 import { getNotificationsSettings } from './notifications';
 import { getThemeSettings } from './theme';
-import { getCoreSettings } from '.';
+import { getCoreSettings, type GetCoreSettingsOptions } from '.';
 import { getStateSettings } from './state';
 import { getAnnouncementsSettings } from './announcements';
 
+const defaultOptions: GetCoreSettingsOptions = {
+  isServerless: false,
+  isDist: true,
+  isThemeSwitcherEnabled: undefined,
+};
+
 describe('getCoreSettings', () => {
   it('should not have setting overlaps', () => {
-    const coreSettingsLength = Object.keys(getCoreSettings()).length;
+    const coreSettingsLength = Object.keys(getCoreSettings(defaultOptions)).length;
     const summedLength = [
       getAccessibilitySettings(),
       getAnnouncementsSettings(),
       getDateFormatSettings(),
       getMiscUiSettings(),
       getNotificationsSettings(),
-      getThemeSettings(),
+      getThemeSettings(defaultOptions),
       getStateSettings(),
     ].reduce((sum, settings) => sum + Object.keys(settings).length, 0);
 

src/core/packages/ui-settings/server-internal/src/settings/index.ts

@@ -16,13 +16,14 @@ import { getThemeSettings } from './theme';
 import { getStateSettings } from './state';
 import { getAnnouncementsSettings } from './announcements';
 
-interface GetCoreSettingsOptions {
-  isDist?: boolean;
-  isThemeSwitcherEnabled?: boolean;
+export interface GetCoreSettingsOptions {
+  isServerless: boolean;
+  isDist: boolean;
+  isThemeSwitcherEnabled: boolean | undefined;
 }
 
 export const getCoreSettings = (
-  options?: GetCoreSettingsOptions
+  options: GetCoreSettingsOptions
 ): Record<string, UiSettingsParams> => {
   return {
     ...getAccessibilitySettings(),

src/core/packages/ui-settings/server-internal/src/settings/theme.test.ts

@@ -8,10 +8,16 @@
  */
 
 import type { UiSettingsParams } from '@kbn/core-ui-settings-common';
-import { getThemeSettings } from './theme';
+import { getThemeSettings, type GetThemeSettingsOptions } from './theme';
+
+const defaultOptions: GetThemeSettingsOptions = {
+  isServerless: false,
+  isDist: true,
+  isThemeSwitcherEnabled: undefined,
+};
 
 describe('theme settings', () => {
-  const themeSettings = getThemeSettings();
+  const themeSettings = getThemeSettings(defaultOptions);
 
   const getValidationFn = (setting: UiSettingsParams) => (value: any) =>
     setting.schema.validate(value);
@@ -31,28 +37,74 @@ describe('theme settings', () => {
       expect(() => validate(12)).toThrowError();
     });
   });
+
+  describe('theme:name', () => {
+    const validate = getValidationFn(themeSettings['theme:name']);
+
+    it('should only accept expected values', () => {
+      expect(() => validate('amsterdam')).not.toThrow();
+      expect(() => validate('borealis')).not.toThrow();
+
+      expect(() => validate(true)).toThrow();
+      expect(() => validate(12)).toThrow();
+    });
+
+    describe('readonly', () => {
+      it('should be readonly when `isServerless = true`', () => {
+        expect(
+          getThemeSettings({ ...defaultOptions, isServerless: true })['theme:name'].readonly
+        ).toBe(true);
+        expect(
+          getThemeSettings({ ...defaultOptions, isServerless: false })['theme:name'].readonly
+        ).toBe(false);
+      });
+
+      it('should be editable when `isThemeSwitcherEnabled = true`', () => {
+        expect(
+          getThemeSettings({ ...defaultOptions, isServerless: true, isThemeSwitcherEnabled: true })[
+            'theme:name'
+          ].readonly
+        ).toBe(false);
+        expect(
+          getThemeSettings({
+            ...defaultOptions,
+            isServerless: false,
+            isThemeSwitcherEnabled: true,
+          })['theme:name'].readonly
+        ).toBe(false);
+      });
+    });
+
+    describe('value', () => {
+      it('should default to `amsterdam` when `isServerless = true`', () => {
+        expect(
+          getThemeSettings({ ...defaultOptions, isServerless: true })['theme:name'].value
+        ).toBe('amsterdam');
+      });
+
+      it('should default to `borealis` when `isServerless = false`', () => {
+        expect(
+          getThemeSettings({ ...defaultOptions, isServerless: false })['theme:name'].value
+        ).toBe('borealis');
+      });
+    });
+  });
 });
 
 describe('process.env.KBN_OPTIMIZER_THEMES handling', () => {
   it('defaults to properties of first tag', () => {
     process.env.KBN_OPTIMIZER_THEMES = 'v8dark,v8light';
-    let settings = getThemeSettings({ isDist: false });
+    let settings = getThemeSettings({ ...defaultOptions, isDist: false });
     expect(settings['theme:darkMode'].value).toBe('enabled');
 
     process.env.KBN_OPTIMIZER_THEMES = 'v8light,v8dark';
-    settings = getThemeSettings({ isDist: false });
-    expect(settings['theme:darkMode'].value).toBe('disabled');
-  });
-
-  it('ignores the value when isDist is undefined', () => {
-    process.env.KBN_OPTIMIZER_THEMES = 'v8dark';
-    const settings = getThemeSettings({ isDist: undefined });
+    settings = getThemeSettings({ ...defaultOptions, isDist: false });
     expect(settings['theme:darkMode'].value).toBe('disabled');
   });
 
   it('ignores the value when isDist is true', () => {
     process.env.KBN_OPTIMIZER_THEMES = 'v8dark';
-    const settings = getThemeSettings({ isDist: true });
+    const settings = getThemeSettings({ ...defaultOptions, isDist: true });
     expect(settings['theme:darkMode'].value).toBe('disabled');
   });
 });

src/core/packages/ui-settings/server-internal/src/settings/theme.ts

@@ -12,32 +12,54 @@ import { i18n } from '@kbn/i18n';
 import type { ThemeVersion } from '@kbn/ui-shared-deps-npm';
 import {
   type UiSettingsParams,
+  type ThemeName,
   parseThemeTags,
   SUPPORTED_THEME_NAMES,
+  DEFAULT_THEME_NAME,
 } from '@kbn/core-ui-settings-common';
 
-function getThemeInfo(options: GetThemeSettingsOptions) {
-  if (options?.isDist ?? true) {
-    return {
-      defaultDarkMode: false,
-    };
-  }
-
-  const themeTags = parseThemeTags(process.env.KBN_OPTIMIZER_THEMES);
-  return {
-    defaultDarkMode: themeTags[0].endsWith('dark'),
-  };
+interface ThemeInfo {
+  defaultDarkMode: boolean;
+  defaultThemeName: ThemeName;
 }
 
-interface GetThemeSettingsOptions {
-  isDist?: boolean;
-  isThemeSwitcherEnabled?: boolean;
+const getThemeInfo = ({ isDist, isServerless }: GetThemeSettingsOptions): ThemeInfo => {
+  const themeTags = parseThemeTags(process.env.KBN_OPTIMIZER_THEMES);
+
+  const themeInfo: ThemeInfo = {
+    defaultDarkMode: false,
+    defaultThemeName: DEFAULT_THEME_NAME,
+  };
+
+  if (!isDist) {
+    // Allow environment-specific config when not building for distribution
+    themeInfo.defaultDarkMode = themeTags[0]?.endsWith('dark') || false;
+  }
+
+  if (!isServerless) {
+    // Default to Borealis theme in non-serverless
+    themeInfo.defaultThemeName = 'borealis';
+  }
+
+  return themeInfo;
+};
+
+export interface GetThemeSettingsOptions {
+  isServerless: boolean;
+  isDist: boolean;
+  isThemeSwitcherEnabled: boolean | undefined;
 }
 
 export const getThemeSettings = (
-  options: GetThemeSettingsOptions = {}
+  options: GetThemeSettingsOptions
 ): Record<string, UiSettingsParams> => {
-  const { defaultDarkMode } = getThemeInfo(options);
+  const { defaultDarkMode, defaultThemeName } = getThemeInfo(options);
+
+  // Make `theme:name` readonly in serverless unless the theme switcher is enabled
+  let isThemeNameReadonly = options.isServerless;
+  if (options.isThemeSwitcherEnabled !== undefined) {
+    isThemeNameReadonly = !options.isThemeSwitcherEnabled;
+  }
 
   return {
     'theme:darkMode': {
@@ -109,10 +131,8 @@ export const getThemeSettings = (
           defaultMessage: 'Borealis',
         }),
       },
-      value: 'amsterdam',
-      readonly: Object.hasOwn(options, 'isThemeSwitcherEnabled')
-        ? !options.isThemeSwitcherEnabled
-        : true,
+      value: defaultThemeName,
+      readonly: isThemeNameReadonly,
       requiresPageReload: true,
       schema: schema.oneOf([
         schema.literal('amsterdam'),

src/core/packages/ui-settings/server-internal/src/ui_settings_service.ts

@@ -53,6 +53,7 @@ export class UiSettingsService
   private readonly config$: Observable<UiSettingsConfigType>;
   private readonly isDist: boolean;
   private readonly isDev: boolean;
+  private readonly isServerless: boolean;
   private readonly uiSettingsDefaults = new Map<string, UiSettingsParams>();
   private readonly uiSettingsGlobalDefaults = new Map<string, UiSettingsParams>();
   private overrides: Record<string, any> = {};
@@ -63,6 +64,7 @@ export class UiSettingsService
     this.isDist = coreContext.env.packageInfo.dist;
     this.config$ = coreContext.configService.atPath<UiSettingsConfigType>(uiConfigDefinition.path);
     this.isDev = coreContext.env.mode.dev;
+    this.isServerless = coreContext.env.packageInfo.buildFlavor === 'serverless';
   }
 
   public async preboot(): Promise<InternalUiSettingsServicePreboot> {
@@ -74,6 +76,7 @@ export class UiSettingsService
     this.register(
       getCoreSettings({
         isDist: this.isDist,
+        isServerless: this.isServerless,
         isThemeSwitcherEnabled: experimental?.themeSwitcherEnabled,
       })
     );

test/functional/apps/dashboard/group3/dashboard_state.ts

@@ -99,7 +99,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await queryBar.clickQuerySubmitButton();
 
       await visChart.openLegendOptionColorsForXY('Count', `[data-title="${visName}"]`);
-      const overwriteColor = '#d36086';
+      const overwriteColor = '#64d8d5';
       await visChart.selectNewLegendColorChoice(overwriteColor);
 
       await dashboard.saveDashboard(dashboardName, { saveAsNew: false });

test/functional/page_objects/visualize_chart_page.ts

@@ -281,7 +281,7 @@ export class VisualizeChartPageObject extends FtrService {
 
       await this.waitForVisualizationRenderingStabilized();
       // arbitrary color chosen, any available would do
-      const arbitraryColor = '#d36086';
+      const arbitraryColor = '#ee72a6';
       const isOpen = await this.doesLegendColorChoiceExist(arbitraryColor);
       if (!isOpen) {
         throw new Error('legend color selector not open');
@@ -300,7 +300,7 @@ export class VisualizeChartPageObject extends FtrService {
 
       await this.waitForVisualizationRenderingStabilized();
       // arbitrary color chosen, any available would do
-      const arbitraryColor = '#EF843C';
+      const arbitraryColor = '#f66d64';
       const isOpen = await this.doesLegendColorChoiceExist(arbitraryColor);
       if (!isOpen) {
         throw new Error('legend color selector not open');

x-pack/test/functional/apps/infra/home_page.ts

@@ -370,11 +370,11 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await retry.tryForTime(5000, async () => {
           const nodesWithValue = await pageObjects.infraHome.getNodesWithValues();
           expect(nodesWithValue).to.eql([
-            { name: 'host-3', value: 90, color: '#6092c0' },
-            { name: 'host-2', value: 70, color: '#82a7cd' },
-            { name: 'host-1', value: 50, color: '#a2bcd9' },
-            { name: 'host-4', value: 30, color: '#d1ddec' },
-            { name: 'host-5', value: 10, color: '#f0f4f9' },
+            { name: 'host-3', value: 90, color: '#61a2ff' },
+            { name: 'host-2', value: 70, color: '#80b2ff' },
+            { name: 'host-1', value: 50, color: '#9bc2ff' },
+            { name: 'host-4', value: 30, color: '#c2d9ff' },
+            { name: 'host-5', value: 10, color: '#dbe9ff' },
           ]);
         });
       });
@@ -387,11 +387,11 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await retry.tryForTime(5000, async () => {
           const nodesWithValue = await pageObjects.infraHome.getNodesWithValues();
           expect(nodesWithValue).to.eql([
-            { name: 'host-5', value: 10, color: '#f0f4f9' },
-            { name: 'host-4', value: 30, color: '#d1ddec' },
-            { name: 'host-1', value: 50, color: '#a2bcd9' },
-            { name: 'host-2', value: 70, color: '#82a7cd' },
-            { name: 'host-3', value: 90, color: '#6092c0' },
+            { name: 'host-5', value: 10, color: '#dbe9ff' },
+            { name: 'host-4', value: 30, color: '#c2d9ff' },
+            { name: 'host-1', value: 50, color: '#9bc2ff' },
+            { name: 'host-2', value: 70, color: '#80b2ff' },
+            { name: 'host-3', value: 90, color: '#61a2ff' },
           ]);
         });
       });
@@ -411,7 +411,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.infraHome.enterSearchTerm('host.name: "host-1"');
         await retry.tryForTime(5000, async () => {
           const nodesWithValue = await pageObjects.infraHome.getNodesWithValues();
-          expect(nodesWithValue).to.eql([{ name: 'host-1', value: 50, color: '#6092c0' }]);
+          expect(nodesWithValue).to.eql([{ name: 'host-1', value: 50, color: '#61a2ff' }]);
         });
         await pageObjects.infraHome.clearSearchTerm();
       });
@@ -424,11 +424,11 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await retry.tryForTime(5000, async () => {
           const nodesWithValue = await pageObjects.infraHome.getNodesWithValues();
           expect(nodesWithValue).to.eql([
-            { name: 'host-5', value: 10, color: '#6092c0' },
-            { name: 'host-4', value: 30, color: '#9ab6d5' },
-            { name: 'host-1', value: 50, color: '#f6e0b9' },
-            { name: 'host-2', value: 70, color: '#eda77a' },
-            { name: 'host-3', value: 90, color: '#e7664c' },
+            { name: 'host-5', value: 10, color: '#61a2ff' },
+            { name: 'host-4', value: 30, color: '#b5d2ff' },
+            { name: 'host-1', value: 50, color: '#fbefee' },
+            { name: 'host-2', value: 70, color: '#ffbab3' },
+            { name: 'host-3', value: 90, color: '#f6726a' },
           ]);
         });
       });

x-pack/test/functional/apps/lens/group2/table.ts

@@ -142,14 +142,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await lens.waitForVisualization();
       const styleObj = await lens.getDatatableCellStyle(0, 2);
       expect(styleObj['background-color']).to.be(undefined);
-      expect(styleObj.color).to.be('rgb(133, 189, 177)');
+      expect(styleObj.color).to.be('rgb(140, 217, 187)');
     });
 
     it('should allow to color cell background rather than text', async () => {
       await lens.setTableDynamicColoring('cell');
       await lens.waitForVisualization();
       const styleObj = await lens.getDatatableCellStyle(0, 2);
-      expect(styleObj['background-color']).to.be('rgb(133, 189, 177)');
+      expect(styleObj['background-color']).to.be('rgb(140, 217, 187)');
       // should also set text color when in cell mode
       expect(styleObj.color).to.be('rgb(0, 0, 0)');
     });
@@ -160,7 +160,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await lens.changePaletteTo('temperature');
       await lens.waitForVisualization();
       const styleObj = await lens.getDatatableCellStyle(0, 2);
-      expect(styleObj['background-color']).to.be('rgb(235, 239, 245)');
+      expect(styleObj['background-color']).to.be('rgb(246, 249, 252)');
     });
 
     it('should keep the coloring consistent when changing mode', async () => {
@@ -169,7 +169,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await lens.waitForVisualization();
       // check that all remained the same
       const styleObj = await lens.getDatatableCellStyle(0, 2);
-      expect(styleObj['background-color']).to.be('rgb(235, 239, 245)');
+      expect(styleObj['background-color']).to.be('rgb(246, 249, 252)');
     });
 
     it('should keep the coloring consistent when moving to custom palette from default', async () => {
@@ -177,7 +177,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await lens.waitForVisualization();
       // check that all remained the same
       const styleObj = await lens.getDatatableCellStyle(0, 2);
-      expect(styleObj['background-color']).to.be('rgb(235, 239, 245)');
+      expect(styleObj['background-color']).to.be('rgb(246, 249, 252)');
     });
 
     it('tweak the color stops numeric value', async () => {
@@ -202,7 +202,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.click('lnsPalettePanel_dynamicColoring_reverseColors');
       await lens.waitForVisualization();
       const styleObj = await lens.getDatatableCellStyle(1, 1);
-      expect(styleObj['background-color']).to.be('rgb(168, 191, 218)');
+      expect(styleObj['background-color']).to.be('rgb(200, 222, 255)');
       // should also set text color when in cell mode
       expect(styleObj.color).to.be('rgb(0, 0, 0)');
       await lens.closePalettePanel();

x-pack/test/functional/apps/lens/group4/chart_data.ts

@@ -114,11 +114,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend
       expect(debugState?.legend!.items).to.eql([
-        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#6092c0' },
-        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' },
-        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' },
-        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#efb785' },
-        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' },
+        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#61a2ff' },
+        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#c8deff' },
+        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#f6f9fc' },
+        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ffccc6' },
+        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#f6726a' },
       ]);
     });
 

x-pack/test/functional/apps/lens/group5/heatmap.ts

@@ -55,11 +55,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend
       expect(debugState?.legend!.items).to.eql([
-        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#6092c0' },
-        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' },
-        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' },
-        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#efb785' },
-        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' },
+        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#61a2ff' },
+        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#c8deff' },
+        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#f6f9fc' },
+        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ffccc6' },
+        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#f6726a' },
       ]);
     });
 
@@ -77,11 +77,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend has changed
       expect(debugState?.legend!.items).to.eql([
-        { key: '7,125.997 - 8,529.22', name: '7,125.997 - 8,529.22', color: '#6092c0' },
-        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#a8bfda' },
-        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#ebeff5' },
-        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#efb785' },
-        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#e7664c' },
+        { key: '7,125.997 - 8,529.22', name: '7,125.997 - 8,529.22', color: '#61a2ff' },
+        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#c8deff' },
+        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#f6f9fc' },
+        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ffccc6' },
+        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#f6726a' },
       ]);
     });
 
@@ -91,12 +91,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend has changed
       expect(debugState?.legend!.items).to.eql([
-        { key: '7,125.99 - 8,529.2', name: '7,125.99 - 8,529.2', color: '#6092c0' },
-        { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' },
-        { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' },
-        { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#efb785' },
+        { key: '7,125.99 - 8,529.2', name: '7,125.99 - 8,529.2', color: '#61a2ff' },
+        { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#c8deff' },
+        { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#f6f9fc' },
+        { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#ffccc6' },
         {
-          color: '#e7664c',
+          color: '#f6726a',
           key: '≥ 16,948.55',
           name: '≥ 16,948.55',
         },
@@ -112,11 +112,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend has changed
       expect(debugState?.legend!.items).to.eql([
-        { key: '0 - 8,529.2', name: '0 - 8,529.2', color: '#6092c0' },
-        { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' },
-        { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' },
-        { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#efb785' },
-        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
+        { key: '0 - 8,529.2', name: '0 - 8,529.2', color: '#61a2ff' },
+        { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#c8deff' },
+        { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#f6f9fc' },
+        { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#ffccc6' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#f6726a' },
       ]);
     });
 
@@ -130,15 +130,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend has a rounded value
       expect(debugState?.legend!.items).to.eql([
-        { key: '5,722.775 - 8,529.2', name: '5,722.775 - 8,529.2', color: '#6092c0' },
-        { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#a8bfda' },
-        { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#ebeff5' },
-        { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#efb785' },
-        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
+        { key: '5,722.775 - 8,529.2', name: '5,722.775 - 8,529.2', color: '#61a2ff' },
+        { key: '8,529.2 - 11,335.66', name: '8,529.2 - 11,335.66', color: '#c8deff' },
+        { key: '11,335.66 - 14,142.1', name: '11,335.66 - 14,142.1', color: '#f6f9fc' },
+        { key: '14,142.1 - 16,948.55', name: '14,142.1 - 16,948.55', color: '#ffccc6' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#f6726a' },
       ]);
       // assert the cell has the correct coloring despite the legend rounding
       expect(debugState?.heatmap!.cells[debugState.heatmap!.cells.length - 1].fill).to.be(
-        'rgba(96, 146, 192, 1)' // rgba version of #6092c0
+        'rgba(97, 162, 255, 1)' // rgba version of #61a2ff
       );
     });
 
@@ -149,11 +149,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend has changed
       expect(debugState?.legend!.items).to.eql([
-        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#209280' },
-        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#54b399' },
-        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#d6bf57' },
-        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#e7664c' },
-        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#cc5642' },
+        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#24c292' },
+        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#aee8d2' },
+        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#fcd883' },
+        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ffc9c2' },
+        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#f6726a' },
       ]);
     });
 
@@ -164,11 +164,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // assert legend has not changed
       expect(debugState?.legend!.items).to.eql([
-        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#209280' },
-        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#54b399' },
-        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#d6bf57' },
-        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#e7664c' },
-        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#cc5642' },
+        { key: '5,722.775 - 8,529.22', name: '5,722.775 - 8,529.22', color: '#24c292' },
+        { key: '8,529.22 - 11,335.665', name: '8,529.22 - 11,335.665', color: '#aee8d2' },
+        { key: '11,335.665 - 14,142.11', name: '11,335.665 - 14,142.11', color: '#fcd883' },
+        { key: '14,142.11 - 16,948.555', name: '14,142.11 - 16,948.555', color: '#ffc9c2' },
+        { key: '≥ 16,948.555', name: '≥ 16,948.555', color: '#f6726a' },
       ]);
     });
 

x-pack/test/functional/apps/lens/group6/legacy_metric.ts

@@ -40,7 +40,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await header.waitUntilLoadingHasFinished();
       const styleObj = await lens.getLegacyMetricStyle();
       expect(styleObj['background-color']).to.be(undefined);
-      expect(styleObj.color).to.be('rgb(214, 191, 87)');
+      expect(styleObj.color).to.be('rgb(252, 216, 131)');
     });
 
     it('should change the color of the metric when tweaking the values in the panel', async () => {
@@ -51,14 +51,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
       await lens.waitForVisualization('legacyMtrVis');
       const styleObj = await lens.getLegacyMetricStyle();
-      expect(styleObj.color).to.be('rgb(32, 146, 128)');
+      expect(styleObj.color).to.be('rgb(36, 194, 146)');
     });
 
     it('should change the color when reverting the palette', async () => {
       await testSubjects.click('lnsPalettePanel_dynamicColoring_reverseColors');
       await lens.waitForVisualization('legacyMtrVis');
       const styleObj = await lens.getLegacyMetricStyle();
-      expect(styleObj.color).to.be('rgb(204, 86, 66)');
+      expect(styleObj.color).to.be('rgb(246, 114, 106)');
     });
 
     it('should reset the color stops when changing palette to a predefined one', async () => {

x-pack/test/functional/apps/lens/group6/metric.ts

@@ -273,12 +273,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     const expectedDynamicColors = [
-      'rgba(204, 86, 66, 1)',
-      'rgba(204, 86, 66, 1)',
-      'rgba(204, 86, 66, 1)',
-      'rgba(204, 86, 66, 1)',
-      'rgba(204, 86, 66, 1)',
-      'rgba(32, 146, 128, 1)',
+      'rgba(246, 114, 106, 1)',
+      'rgba(246, 114, 106, 1)',
+      'rgba(246, 114, 106, 1)',
+      'rgba(246, 114, 106, 1)',
+      'rgba(246, 114, 106, 1)',
+      'rgba(36, 194, 146, 1)',
     ];
 
     it('applies dynamic color', async () => {

x-pack/test/functional/apps/maps/group4/mapbox_styles.js

@@ -83,24 +83,24 @@ export default function ({ getPageObjects, getService }) {
             2,
             'rgba(0,0,0,0)',
             3,
-            '#ecf1f7',
+            '#d8e7ff',
             4.125,
-            '#d9e3ef',
+            '#c8ddff',
             5.25,
-            '#c5d5e7',
+            '#b8d4ff',
             6.375,
-            '#b2c7df',
+            '#a8caff',
             7.5,
-            '#9eb9d8',
+            '#98c0ff',
             8.625,
-            '#8bacd0',
+            '#87b6ff',
             9.75,
-            '#769fc8',
+            '#75acff',
             10.875,
-            '#6092c0',
+            '#61a2ff',
           ],
           'circle-opacity': 0.75,
-          'circle-stroke-color': '#41937c',
+          'circle-stroke-color': '#119793',
           'circle-stroke-opacity': 0.75,
           'circle-stroke-width': 1,
           'circle-radius': 10,
@@ -162,21 +162,21 @@ export default function ({ getPageObjects, getService }) {
             2,
             'rgba(0,0,0,0)',
             3,
-            '#ecf1f7',
+            '#d8e7ff',
             4.125,
-            '#d9e3ef',
+            '#c8ddff',
             5.25,
-            '#c5d5e7',
+            '#b8d4ff',
             6.375,
-            '#b2c7df',
+            '#a8caff',
             7.5,
-            '#9eb9d8',
+            '#98c0ff',
             8.625,
-            '#8bacd0',
+            '#87b6ff',
             9.75,
-            '#769fc8',
+            '#75acff',
             10.875,
-            '#6092c0',
+            '#61a2ff',
           ],
           'fill-opacity': 0.75,
         },
@@ -205,7 +205,7 @@ export default function ({ getPageObjects, getService }) {
           ['==', ['get', '__kbn_isvisibleduetojoin__'], true],
         ],
         layout: { visibility: 'visible' },
-        paint: { 'line-color': '#41937c', 'line-opacity': 0.75, 'line-width': 1 },
+        paint: { 'line-color': '#119793', 'line-opacity': 0.75, 'line-width': 1 },
       });
     });
   });

x-pack/test/functional/apps/maps/group4/mvt_geotile_grid.js

@@ -78,21 +78,21 @@ export default function ({ getPageObjects, getService }) {
           1622,
           'rgba(0,0,0,0)',
           1623,
-          '#ecf1f7',
+          '#d8e7ff',
           2643.875,
-          '#d9e3ef',
+          '#c8ddff',
           3664.75,
-          '#c5d5e7',
+          '#b8d4ff',
           4685.625,
-          '#b2c7df',
+          '#a8caff',
           5706.5,
-          '#9eb9d8',
+          '#98c0ff',
           6727.375,
-          '#8bacd0',
+          '#87b6ff',
           7748.25,
-          '#769fc8',
+          '#75acff',
           8769.125,
-          '#6092c0',
+          '#61a2ff',
         ],
         'fill-opacity': 0.75,
       });
@@ -123,21 +123,21 @@ export default function ({ getPageObjects, getService }) {
           0,
           'rgba(0,0,0,0)',
           1,
-          '#ecf1f7',
+          '#d8e7ff',
           1.875,
-          '#d9e3ef',
+          '#c8ddff',
           2.75,
-          '#c5d5e7',
+          '#b8d4ff',
           3.625,
-          '#b2c7df',
+          '#a8caff',
           4.5,
-          '#9eb9d8',
+          '#98c0ff',
           5.375,
-          '#8bacd0',
+          '#87b6ff',
           6.25,
-          '#769fc8',
+          '#75acff',
           7.125,
-          '#6092c0',
+          '#61a2ff',
         ],
         'fill-opacity': 0.75,
       });
@@ -168,21 +168,21 @@ export default function ({ getPageObjects, getService }) {
           -1,
           'rgba(0,0,0,0)',
           0,
-          '#ecf1f7',
+          '#d8e7ff',
           1867.625,
-          '#d9e3ef',
+          '#c8ddff',
           3735.25,
-          '#c5d5e7',
+          '#b8d4ff',
           5602.875,
-          '#b2c7df',
+          '#a8caff',
           7470.5,
-          '#9eb9d8',
+          '#98c0ff',
           9338.125,
-          '#8bacd0',
+          '#87b6ff',
           11205.75,
-          '#769fc8',
+          '#75acff',
           13073.375,
-          '#6092c0',
+          '#61a2ff',
         ],
         'fill-opacity': 0.75,
       });

x-pack/test/functional/apps/maps/group4/mvt_scaling.js

@@ -85,21 +85,21 @@ export default function ({ getPageObjects, getService }) {
             0.3819660112501051,
             'rgba(0,0,0,0)',
             1.381966011250105,
-            '#ecf1f7',
+            '#d8e7ff',
             1.6614745084375788,
-            '#d9e3ef',
+            '#c8ddff',
             1.9409830056250525,
-            '#c5d5e7',
+            '#b8d4ff',
             2.2204915028125263,
-            '#b2c7df',
+            '#a8caff',
             2.5,
-            '#9eb9d8',
+            '#98c0ff',
             2.7795084971874737,
-            '#8bacd0',
+            '#87b6ff',
             3.0590169943749475,
-            '#769fc8',
+            '#75acff',
             3.338525491562421,
-            '#6092c0',
+            '#61a2ff',
           ],
           'fill-opacity': 1,
         });
@@ -124,7 +124,7 @@ export default function ({ getPageObjects, getService }) {
           ],
           layout: { visibility: 'visible' },
           paint: {
-            'line-color': '#9eb9d8',
+            'line-color': '#98c0ff',
             'line-width': 3,
             'line-dasharray': [2, 1],
             'line-opacity': 1,

x-pack/test/functional/apps/transform/creation/index_pattern/creation_index_pattern.ts

@@ -199,7 +199,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: '6 categories',
               colorStats: [
                 { color: '#000000', percentage: 45 },
-                { color: '#54B399', percentage: 55 },
+                { color: '#16C5C0', percentage: 55 },
               ],
             },
             {
@@ -208,7 +208,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: '1 category',
               colorStats: [
                 { color: '#000000', percentage: 10 },
-                { color: '#54B399', percentage: 90 },
+                { color: '#16C5C0', percentage: 90 },
               ],
             },
             {
@@ -217,7 +217,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: 'top 20 of 46 categories',
               colorStats: [
                 { color: '#000000', percentage: 60 },
-                { color: '#54B399', percentage: 37 },
+                { color: '#16C5C0', percentage: 37 },
               ],
             },
             {
@@ -226,7 +226,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: 'top 20 of 3327 categories',
               colorStats: [
                 { color: '#000000', percentage: 25 },
-                { color: '#54B399', percentage: 75 },
+                { color: '#16C5C0', percentage: 75 },
               ],
             },
             {
@@ -235,7 +235,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: '2 categories',
               colorStats: [
                 { color: '#000000', percentage: 15 },
-                { color: '#54B399', percentage: 85 },
+                { color: '#16C5C0', percentage: 85 },
               ],
             },
             {
@@ -243,7 +243,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               id: 'customer_id',
               legend: 'top 20 of 46 categories',
               colorStats: [
-                { color: '#54B399', percentage: 37 },
+                { color: '#16C5C0', percentage: 37 },
                 { color: '#000000', percentage: 60 },
               ],
             },
@@ -253,7 +253,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: 'top 20 of 183 categories',
               colorStats: [
                 { color: '#000000', percentage: 23 },
-                { color: '#54B399', percentage: 77 },
+                { color: '#16C5C0', percentage: 77 },
               ],
             },
             {
@@ -262,7 +262,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: '1 category',
               colorStats: [
                 { color: '#000000', percentage: 10 },
-                { color: '#54B399', percentage: 90 },
+                { color: '#16C5C0', percentage: 90 },
               ],
             },
             {
@@ -271,7 +271,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: '7 categories',
               colorStats: [
                 { color: '#000000', percentage: 20 },
-                { color: '#54B399', percentage: 80 },
+                { color: '#16C5C0', percentage: 80 },
               ],
             },
             {
@@ -280,7 +280,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
               legend: '0 - 6',
               colorStats: [
                 { color: '#000000', percentage: 20 },
-                { color: '#54B399', percentage: 75 },
+                { color: '#16C5C0', percentage: 75 },
               ],
             },
           ],

x-pack/test/functional/apps/transform/creation/runtime_mappings_saved_search/creation_runtime_mappings.ts

@@ -61,7 +61,7 @@ export default function ({ getService }: FtrProviderContext) {
         legend: '1 category',
         colorStats: [
           { color: '#000000', percentage: 10 },
-          { color: '#54B399', percentage: 90 },
+          { color: '#16C5C0', percentage: 90 },
         ],
       },
       {
@@ -70,7 +70,7 @@ export default function ({ getService }: FtrProviderContext) {
         legend: '19 categories',
         colorStats: [
           { color: '#000000', percentage: 49 },
-          { color: '#54B399', percentage: 50 },
+          { color: '#16C5C0', percentage: 50 },
         ],
       },
       {
@@ -88,7 +88,7 @@ export default function ({ getService }: FtrProviderContext) {
         legend: '19 categories',
         colorStats: [
           { color: '#000000', percentage: 49 },
-          { color: '#54B399', percentage: 50 },
+          { color: '#16C5C0', percentage: 50 },
         ],
       },
       {
@@ -106,7 +106,7 @@ export default function ({ getService }: FtrProviderContext) {
         legend: '1 category',
         colorStats: [
           { color: '#000000', percentage: 10 },
-          { color: '#54B399', percentage: 90 },
+          { color: '#16C5C0', percentage: 90 },
         ],
       },
     ];

x-pack/test/functional/apps/user_profiles/user_profiles.ts

@@ -100,15 +100,15 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
         await pageObjects.userProfiles.changeUserProfileTheme('dark');
         const darkModeTag = await pageObjects.userProfiles.getThemeTag();
-        expect(darkModeTag).to.be('v8dark');
+        expect(darkModeTag).to.be('borealisdark');
 
         await pageObjects.userProfiles.changeUserProfileTheme('light');
         const lightModeTag = await pageObjects.userProfiles.getThemeTag();
-        expect(lightModeTag).to.be('v8light');
+        expect(lightModeTag).to.be('borealislight');
 
         await pageObjects.userProfiles.changeUserProfileTheme('space_default');
         const spaceDefaultModeTag = await pageObjects.userProfiles.getThemeTag();
-        expect(spaceDefaultModeTag).to.be('v8light');
+        expect(spaceDefaultModeTag).to.be('borealislight');
       });
 
       it('should change theme based on the User Profile Theme control with default Adv. Settings value set to dark', async () => {
@@ -129,19 +129,19 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.common.navigateToApp('security_account');
 
         let spaceDefaultModeTag = await pageObjects.userProfiles.getThemeTag();
-        expect(spaceDefaultModeTag).to.be('v8dark');
+        expect(spaceDefaultModeTag).to.be('borealisdark');
 
         await pageObjects.userProfiles.changeUserProfileTheme('light');
         const lightModeTag = await pageObjects.userProfiles.getThemeTag();
-        expect(lightModeTag).to.be('v8light');
+        expect(lightModeTag).to.be('borealislight');
 
         await pageObjects.userProfiles.changeUserProfileTheme('dark');
         const darkModeTag = await pageObjects.userProfiles.getThemeTag();
-        expect(darkModeTag).to.be('v8dark');
+        expect(darkModeTag).to.be('borealisdark');
 
         await pageObjects.userProfiles.changeUserProfileTheme('space_default');
         spaceDefaultModeTag = await pageObjects.userProfiles.getThemeTag();
-        expect(spaceDefaultModeTag).to.be('v8dark');
+        expect(spaceDefaultModeTag).to.be('borealisdark');
 
         await pageObjects.common.navigateToUrl('management', 'kibana/settings', {
           basePath: '',

x-pack/test/functional_cloud/tests/cloud_links.ts

@@ -214,14 +214,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await changeColorMode('dark');
         await refreshPage();
         const colorModeTag = await PageObjects.userProfiles.getThemeTag();
-        expect(colorModeTag).to.be('v8dark');
+        expect(colorModeTag).to.be('borealisdark');
       });
 
       it('can change the color mode to light', async () => {
         await changeColorMode('light');
         await refreshPage();
         const colorModeTag = await PageObjects.userProfiles.getThemeTag();
-        expect(colorModeTag).to.be('v8light');
+        expect(colorModeTag).to.be('borealislight');
       });
 
       it('can change the color mode to space_default', async () => {
@@ -231,7 +231,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         {
           await refreshPage();
           const colorModeTag = await PageObjects.userProfiles.getThemeTag();
-          expect(colorModeTag).to.be('v8light');
+          expect(colorModeTag).to.be('borealislight');
         }
 
         // Change the space default dark mode to "enabled"
@@ -253,7 +253,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         {
           await refreshPage();
           const colorModeTag = await PageObjects.userProfiles.getThemeTag();
-          expect(colorModeTag).to.be('v8light');
+          expect(colorModeTag).to.be('borealislight');
         }
 
         await changeColorMode('space_default');
@@ -261,7 +261,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         {
           await refreshPage();
           const colorModeTag = await PageObjects.userProfiles.getThemeTag();
-          expect(colorModeTag).to.be('v8dark'); // We are now in dark mode
+          expect(colorModeTag).to.be('borealisdark'); // We are now in dark mode
         }
       });
     });