@heartlandone/vega 2.79.0 → 2.80.0

package/dist/collection/helpers/theme/tests/theme-manager-controller.test.js

@@ -1,614 +0,0 @@
-import { VegaThemeManager } from '../theme-manager';
-import VegaTelemetryRuntimeMetricsManager from '@heartlandone/vega-telemetry-runtime-metrics/index';
-import { sleep } from '../../../utils/test-utils';
-import { vegaNonceManager } from '../../csp/vega-nonce-manager';
-const parseResultToArray = (textContent) => {
-  return textContent === null || textContent === void 0 ? void 0 : textContent.trim().replace(/\n|\t|:root {|}/g, '').split(';').map((item) => item.split(': ')).filter((item) => item.length === 2).sort();
-};
-describe('themeManagerController', () => {
-  it('should append expected variables css string into the head when call overrideColors', async () => {
-    var _a, _b;
-    await VegaThemeManager.overrideColors({ actionColor: '#3c9f55', sidebarColor: '#274f1c' });
-    expect((_b = (_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.length).toBeGreaterThan(0);
-  });
-  it('should set nonce attribute if vegaNonceManager.nonce is present', async () => {
-    Object.defineProperty(vegaNonceManager, 'nonce', {
-      get: () => 'test-nonce',
-      configurable: true,
-    });
-    VegaThemeManager.toggleDarkMode(true);
-    const headStyle = document.head.querySelector('#vegaDarkModeStyle');
-    expect(headStyle).not.toBeNull();
-    expect(headStyle === null || headStyle === void 0 ? void 0 : headStyle.getAttribute('nonce')).toEqual('test-nonce');
-    await VegaThemeManager.overrideColors({ actionColor: '#3c9f55', sidebarColor: '#274f1c' });
-    const themeStyle = document.head.querySelector('#vegaCustomOverrideTheme');
-    expect(themeStyle).not.toBeNull();
-    expect(themeStyle === null || themeStyle === void 0 ? void 0 : themeStyle.getAttribute('nonce')).toEqual('test-nonce');
-    // Clean up mock
-    delete vegaNonceManager.nonce;
-  });
-  it('should not set nonce attribute if vegaNonceManager.nonce is not present', async () => {
-    Object.defineProperty(vegaNonceManager, 'nonce', {
-      get: () => undefined,
-      configurable: true,
-    });
-    VegaThemeManager.toggleDarkMode(true);
-    const headStyle = document.head.querySelector('#vegaDarkModeStyle');
-    expect(headStyle).not.toBeNull();
-    expect(headStyle === null || headStyle === void 0 ? void 0 : headStyle.getAttribute('nonce')).toBeNull();
-    await VegaThemeManager.overrideColors({ actionColor: '#3c9f55', sidebarColor: '#274f1c' });
-    const themeStyle = document.head.querySelector('#vegaCustomOverrideTheme');
-    expect(themeStyle).not.toBeNull();
-    expect(themeStyle === null || themeStyle === void 0 ? void 0 : themeStyle.getAttribute('nonce')).toBeNull();
-    // Clean up mock
-    delete vegaNonceManager.nonce;
-  });
-  it('should parse as expected with default color', async () => {
-    var _a;
-    await VegaThemeManager.overrideColors({ actionColor: '#1362e2', sidebarColor: '#121227' });
-    expect(parseResultToArray((_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent)).toEqual([
-      ['--v-bg-action', '19 98 226 / 1'],
-      ['--v-bg-action-active', '81 142 240 / 1'],
-      ['--v-bg-action-focus', '19 98 226 / 1'],
-      ['--v-bg-action-hover', '58 127 238 / 1'],
-      ['--v-bg-action-secondary-active', '105 157 242 / 0.15'],
-      ['--v-bg-action-secondary-hover', '58 127 238 / 0.15'],
-      ['--v-bg-date-picker-range', '58 127 238 / 0.15'],
-      ['--v-bg-divider', '19 98 226 / 0.6'],
-      ['--v-bg-keypad-btn-active', '19 98 226 / 0.3'],
-      ['--v-bg-selected', '58 127 238 / 0.25'],
-      ['--v-bg-sidebar', '18 18 39 / 1'],
-      ['--v-bg-sidebar-item-hover', '255 255 255 / 0.9'],
-      ['--v-bg-sidebar-item-selected', '19 98 226 / 0.4'],
-      ['--v-bg-table-selected-row', '19 98 226 / 0.2'],
-      ['--v-bg-toggle-switch-selected-disabled', '19 98 226 / 0.5'],
-      ['--v-border-color-action', '19 98 226 / 1'],
-      ['--v-border-color-action-active', '81 142 240 / 1'],
-      ['--v-border-color-action-hover', '58 127 238 / 1'],
-      ['--v-border-color-divider', '19 98 226 / 0.6'],
-      ['--v-border-color-divider-secondary', '81 142 240 / 0.4'],
-      ['--v-border-color-input-field', '19 98 226 / 0.6'],
-      ['--v-border-color-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-color-input-field-focus', '81 142 240 / 0.6'],
-      ['--v-border-color-input-field-hover', '58 127 238 / 0.6'],
-      ['--v-border-color-tile-focus', '19 98 226 / 1'],
-      ['--v-border-color-tile-selected', '19 98 226 / 1'],
-      ['--v-border-color-tile-selected-focus', '81 142 240 / 0.6'],
-      ['--v-border-color-tile-selected-hover', '58 127 238 / 1'],
-      ['--v-border-divider', '19 98 226 / 0.6'],
-      ['--v-border-divider-secondary', '81 142 240 / 0.4'],
-      ['--v-border-input-field', '19 98 226 / 0.6'],
-      ['--v-border-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-input-field-focus', '81 142 240 / 0.6'],
-      ['--v-border-input-field-hover', '58 127 238 / 0.6'],
-      ['--v-border-secondary-btn', '19 98 226 / 1'],
-      ['--v-border-secondary-btn-active', '81 142 240 / 1'],
-      ['--v-border-secondary-btn-hover', '58 127 238 / 1'],
-      ['--v-border-tile-focus', '19 98 226 / 1'],
-      ['--v-border-tile-selected', '19 98 226 / 1'],
-      ['--v-border-tile-selected-focus', '81 142 240 / 0.6'],
-      ['--v-border-tile-selected-hover', '58 127 238 / 1'],
-      ['--v-ring-action-focus', '19 98 226 / 0.25'],
-      ['--v-ring-input-focus', '19 98 226 / 0.25'],
-      ['--v-text-link', '19 98 226 / 1'],
-      ['--v-text-link-active', '81 142 240 / 1'],
-      ['--v-text-link-focus', '58 127 238 / 1'],
-      ['--v-text-link-hover', '58 127 238 / 1'],
-      ['--v-text-link-visited', '105 157 242 / 1'],
-      ['--v-text-sidebar-link', '255 255 255 / 0.9'],
-      ['--v-text-sidebar-link-hover', '15 15 15 / 0.86'],
-      ['--v-text-sidebar-link-selected', '255 255 255 / 0.9'],
-    ]);
-  });
-  it('should parse as expected with light color', async () => {
-    var _a;
-    await VegaThemeManager.overrideColors({ actionColor: '#05f015', sidebarColor: '#eec438' });
-    expect(parseResultToArray((_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent)).toEqual([
-      ['--v-bg-action', '5 240 21 / 1'],
-      ['--v-bg-action-active', '3 165 14 / 1'],
-      ['--v-bg-action-focus', '5 240 21 / 1'],
-      ['--v-bg-action-hover', '4 190 17 / 1'],
-      ['--v-bg-action-secondary-active', '3 140 12 / 0.15'],
-      ['--v-bg-action-secondary-hover', '4 190 17 / 0.15'],
-      ['--v-bg-date-picker-range', '4 190 17 / 0.15'],
-      ['--v-bg-divider', '5 240 21 / 0.6'],
-      ['--v-bg-keypad-btn-active', '5 240 21 / 0.3'],
-      ['--v-bg-selected', '4 190 17 / 0.25'],
-      ['--v-bg-sidebar', '238 196 56 / 1'],
-      ['--v-bg-sidebar-item-hover', '15 15 15 / 0.86'],
-      ['--v-bg-sidebar-item-selected', '5 240 21 / 0.4'],
-      ['--v-bg-table-selected-row', '5 240 21 / 0.2'],
-      ['--v-bg-toggle-switch-selected-disabled', '5 240 21 / 0.5'],
-      ['--v-border-color-action', '5 240 21 / 1'],
-      ['--v-border-color-action-active', '3 165 14 / 1'],
-      ['--v-border-color-action-hover', '4 190 17 / 1'],
-      ['--v-border-color-divider', '5 240 21 / 0.6'],
-      ['--v-border-color-divider-secondary', '3 165 14 / 0.4'],
-      ['--v-border-color-input-field', '5 240 21 / 0.6'],
-      ['--v-border-color-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-color-input-field-focus', '3 165 14 / 0.6'],
-      ['--v-border-color-input-field-hover', '4 190 17 / 0.6'],
-      ['--v-border-color-tile-focus', '5 240 21 / 1'],
-      ['--v-border-color-tile-selected', '5 240 21 / 1'],
-      ['--v-border-color-tile-selected-focus', '3 165 14 / 0.6'],
-      ['--v-border-color-tile-selected-hover', '4 190 17 / 1'],
-      ['--v-border-divider', '5 240 21 / 0.6'],
-      ['--v-border-divider-secondary', '3 165 14 / 0.4'],
-      ['--v-border-input-field', '5 240 21 / 0.6'],
-      ['--v-border-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-input-field-focus', '3 165 14 / 0.6'],
-      ['--v-border-input-field-hover', '4 190 17 / 0.6'],
-      ['--v-border-secondary-btn', '5 240 21 / 1'],
-      ['--v-border-secondary-btn-active', '3 165 14 / 1'],
-      ['--v-border-secondary-btn-hover', '4 190 17 / 1'],
-      ['--v-border-tile-focus', '5 240 21 / 1'],
-      ['--v-border-tile-selected', '5 240 21 / 1'],
-      ['--v-border-tile-selected-focus', '3 165 14 / 0.6'],
-      ['--v-border-tile-selected-hover', '4 190 17 / 1'],
-      ['--v-ring-action-focus', '5 240 21 / 0.25'],
-      ['--v-ring-input-focus', '5 240 21 / 0.25'],
-      ['--v-text-link', '5 240 21 / 1'],
-      ['--v-text-link-active', '3 165 14 / 1'],
-      ['--v-text-link-focus', '4 190 17 / 1'],
-      ['--v-text-link-hover', '4 190 17 / 1'],
-      ['--v-text-link-visited', '3 130 11 / 1'],
-      ['--v-text-sidebar-link', '15 15 15 / 0.86'],
-      ['--v-text-sidebar-link-hover', '255 255 255 / 0.9'],
-      ['--v-text-sidebar-link-selected', '15 15 15 / 0.86'],
-    ]);
-  });
-  it('should parse as expected with dark color', async () => {
-    var _a;
-    await VegaThemeManager.overrideColors({ actionColor: '#5a036e', sidebarColor: '#053948' });
-    expect(parseResultToArray((_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent)).toEqual([
-      ['--v-bg-action', '90 3 110 / 1'],
-      ['--v-bg-action-active', '151 5 184 / 1'],
-      ['--v-bg-action-focus', '90 3 110 / 1'],
-      ['--v-bg-action-hover', '131 4 160 / 1'],
-      ['--v-bg-action-secondary-active', '171 6 209 / 0.15'],
-      ['--v-bg-action-secondary-hover', '131 4 160 / 0.15'],
-      ['--v-bg-date-picker-range', '131 4 160 / 0.15'],
-      ['--v-bg-divider', '90 3 110 / 0.6'],
-      ['--v-bg-keypad-btn-active', '90 3 110 / 0.3'],
-      ['--v-bg-selected', '131 4 160 / 0.25'],
-      ['--v-bg-sidebar', '5 57 72 / 1'],
-      ['--v-bg-sidebar-item-hover', '255 255 255 / 0.9'],
-      ['--v-bg-sidebar-item-selected', '90 3 110 / 0.4'],
-      ['--v-bg-table-selected-row', '90 3 110 / 0.2'],
-      ['--v-bg-toggle-switch-selected-disabled', '90 3 110 / 0.5'],
-      ['--v-border-color-action', '90 3 110 / 1'],
-      ['--v-border-color-action-active', '151 5 184 / 1'],
-      ['--v-border-color-action-hover', '131 4 160 / 1'],
-      ['--v-border-color-divider', '90 3 110 / 0.6'],
-      ['--v-border-color-divider-secondary', '151 5 184 / 0.4'],
-      ['--v-border-color-input-field', '90 3 110 / 0.6'],
-      ['--v-border-color-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-color-input-field-focus', '151 5 184 / 0.6'],
-      ['--v-border-color-input-field-hover', '131 4 160 / 0.6'],
-      ['--v-border-color-tile-focus', '90 3 110 / 1'],
-      ['--v-border-color-tile-selected', '90 3 110 / 1'],
-      ['--v-border-color-tile-selected-focus', '151 5 184 / 0.6'],
-      ['--v-border-color-tile-selected-hover', '131 4 160 / 1'],
-      ['--v-border-divider', '90 3 110 / 0.6'],
-      ['--v-border-divider-secondary', '151 5 184 / 0.4'],
-      ['--v-border-input-field', '90 3 110 / 0.6'],
-      ['--v-border-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-input-field-focus', '151 5 184 / 0.6'],
-      ['--v-border-input-field-hover', '131 4 160 / 0.6'],
-      ['--v-border-secondary-btn', '90 3 110 / 1'],
-      ['--v-border-secondary-btn-active', '151 5 184 / 1'],
-      ['--v-border-secondary-btn-hover', '131 4 160 / 1'],
-      ['--v-border-tile-focus', '90 3 110 / 1'],
-      ['--v-border-tile-selected', '90 3 110 / 1'],
-      ['--v-border-tile-selected-focus', '151 5 184 / 0.6'],
-      ['--v-border-tile-selected-hover', '131 4 160 / 1'],
-      ['--v-ring-action-focus', '90 3 110 / 0.25'],
-      ['--v-ring-input-focus', '90 3 110 / 0.25'],
-      ['--v-text-link', '90 3 110 / 1'],
-      ['--v-text-link-active', '151 5 184 / 1'],
-      ['--v-text-link-focus', '131 4 160 / 1'],
-      ['--v-text-link-hover', '131 4 160 / 1'],
-      ['--v-text-link-visited', '171 6 209 / 1'],
-      ['--v-text-sidebar-link', '255 255 255 / 0.9'],
-      ['--v-text-sidebar-link-hover', '15 15 15 / 0.86'],
-      ['--v-text-sidebar-link-selected', '255 255 255 / 0.9'],
-    ]);
-  });
-  it('should only override action color', async () => {
-    var _a;
-    await VegaThemeManager.overrideColors({ actionColor: '#5a036e' });
-    expect(parseResultToArray((_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent)).toEqual([
-      ['--v-bg-action', '90 3 110 / 1'],
-      ['--v-bg-action-active', '151 5 184 / 1'],
-      ['--v-bg-action-focus', '90 3 110 / 1'],
-      ['--v-bg-action-hover', '131 4 160 / 1'],
-      ['--v-bg-action-secondary-active', '171 6 209 / 0.15'],
-      ['--v-bg-action-secondary-hover', '131 4 160 / 0.15'],
-      ['--v-bg-date-picker-range', '131 4 160 / 0.15'],
-      ['--v-bg-divider', '90 3 110 / 0.6'],
-      ['--v-bg-keypad-btn-active', '90 3 110 / 0.3'],
-      ['--v-bg-selected', '131 4 160 / 0.25'],
-      ['--v-bg-sidebar-item-selected', '90 3 110 / 0.4'],
-      ['--v-bg-table-selected-row', '90 3 110 / 0.2'],
-      ['--v-bg-toggle-switch-selected-disabled', '90 3 110 / 0.5'],
-      ['--v-border-color-action', '90 3 110 / 1'],
-      ['--v-border-color-action-active', '151 5 184 / 1'],
-      ['--v-border-color-action-hover', '131 4 160 / 1'],
-      ['--v-border-color-divider', '90 3 110 / 0.6'],
-      ['--v-border-color-divider-secondary', '151 5 184 / 0.4'],
-      ['--v-border-color-input-field', '90 3 110 / 0.6'],
-      ['--v-border-color-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-color-input-field-focus', '151 5 184 / 0.6'],
-      ['--v-border-color-input-field-hover', '131 4 160 / 0.6'],
-      ['--v-border-color-tile-focus', '90 3 110 / 1'],
-      ['--v-border-color-tile-selected', '90 3 110 / 1'],
-      ['--v-border-color-tile-selected-focus', '151 5 184 / 0.6'],
-      ['--v-border-color-tile-selected-hover', '131 4 160 / 1'],
-      ['--v-border-divider', '90 3 110 / 0.6'],
-      ['--v-border-divider-secondary', '151 5 184 / 0.4'],
-      ['--v-border-input-field', '90 3 110 / 0.6'],
-      ['--v-border-input-field-disabled', '15 15 15 / 0.2'],
-      ['--v-border-input-field-focus', '151 5 184 / 0.6'],
-      ['--v-border-input-field-hover', '131 4 160 / 0.6'],
-      ['--v-border-secondary-btn', '90 3 110 / 1'],
-      ['--v-border-secondary-btn-active', '151 5 184 / 1'],
-      ['--v-border-secondary-btn-hover', '131 4 160 / 1'],
-      ['--v-border-tile-focus', '90 3 110 / 1'],
-      ['--v-border-tile-selected', '90 3 110 / 1'],
-      ['--v-border-tile-selected-focus', '151 5 184 / 0.6'],
-      ['--v-border-tile-selected-hover', '131 4 160 / 1'],
-      ['--v-ring-action-focus', '90 3 110 / 0.25'],
-      ['--v-ring-input-focus', '90 3 110 / 0.25'],
-      ['--v-text-link', '90 3 110 / 1'],
-      ['--v-text-link-active', '151 5 184 / 1'],
-      ['--v-text-link-focus', '131 4 160 / 1'],
-      ['--v-text-link-hover', '131 4 160 / 1'],
-      ['--v-text-link-visited', '171 6 209 / 1'],
-    ]);
-  });
-  it('should only override sidebar color', async () => {
-    var _a;
-    await VegaThemeManager.overrideColors({ sidebarColor: '#5a036e' });
-    expect(parseResultToArray((_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent)).toEqual([
-      ['--v-bg-sidebar', '90 3 110 / 1'],
-      ['--v-bg-sidebar-item-hover', '255 255 255 / 0.9'],
-      ['--v-text-sidebar-link', '255 255 255 / 0.9'],
-      ['--v-text-sidebar-link-hover', '15 15 15 / 0.86'],
-      ['--v-text-sidebar-link-selected', '255 255 255 / 0.9'],
-    ]);
-  });
-  it('should reset the theme to default when call reset', async () => {
-    var _a, _b, _c, _d;
-    await VegaThemeManager.overrideColors({ actionColor: '#3c9f55', sidebarColor: '#274f1c' });
-    expect((_b = (_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.length).toBeGreaterThan(0);
-    await VegaThemeManager.reset();
-    expect(((_d = (_c = document.querySelector('#vegaCustomOverrideTheme')) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.length) === 0).toBe(true);
-  });
-});
-describe('Dark mode', () => {
-  it('should enable dark mode when darkMode is true', () => {
-    var _a;
-    VegaThemeManager.toggleDarkMode(true);
-    expect((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.classList.contains('dark')).toBe(true);
-  });
-  it('should disabled dark mode when darkMode is false', () => {
-    var _a, _b;
-    VegaThemeManager.toggleDarkMode(true);
-    expect((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.classList.contains('dark')).toBe(true);
-    VegaThemeManager.toggleDarkMode(false);
-    expect((_b = document.querySelector('html')) === null || _b === void 0 ? void 0 : _b.classList.contains('dark')).toBe(false);
-  });
-  it('should get right state when toggle dark mode', () => {
-    VegaThemeManager.toggleDarkMode(true);
-    expect(VegaThemeManager.isDarkMode()).toEqual(true);
-    VegaThemeManager.toggleDarkMode(false);
-    expect(VegaThemeManager.isDarkMode()).toEqual(false);
-  });
-  it('should parse as expected with dark mode', () => {
-    var _a;
-    VegaThemeManager.toggleDarkMode(true);
-    expect((_a = document.head.querySelector('#vegaDarkModeStyle')) === null || _a === void 0 ? void 0 : _a.textContent).toMatchInlineSnapshot(`
-		"html.dark {
-				--v-bg-brand: 176, 180, 181, 1;
-				--v-bg-page: 24, 24, 48, 1;
-				--v-bg-primary: 4, 4, 28, 1;
-				--v-bg-secondary: 18, 18, 39, 1;
-				--v-bg-tertiary: 24, 24, 48, 1;
-				--v-bg-quaternary: 70, 71, 101, 1;
-				--v-bg-inverted-primary: 252, 252, 252, 1;
-				--v-bg-inverted-secondary: 247, 247, 247, 1;
-				--v-bg-inverted-tertiary: 240, 243, 247, 1;
-				--v-bg-inverted-quaternary: 241, 248, 251, 1;
-				--v-bg-action: 0, 187, 255, 1;
-				--v-bg-action-hover: 0, 204, 255, 1;
-				--v-bg-action-focus: 0, 187, 255, 1;
-				--v-bg-action-active: 4, 165, 245, 1;
-				--v-bg-action-quaternary: 51, 57, 61, 1;
-				--v-bg-action-quaternary-hover: 89, 96, 99, 1;
-				--v-bg-action-quaternary-active: 24, 24, 48, 1;
-				--v-bg-action-secondary: 0, 0, 0, 0;
-				--v-bg-action-secondary-hover: 0, 204, 255, 0.2;
-				--v-bg-action-secondary-active: 4, 165, 245, 0.2;
-				--v-bg-action-tertiary: 0, 0, 0, 0;
-				--v-bg-action-tertiary-hover: 252, 252, 252, 0.2;
-				--v-bg-action-tertiary-active: 252, 252, 252, 0.1;
-				--v-bg-app-header: 24, 24, 48, 0.92;
-				--v-bg-backdrop-modal: 70, 71, 101, 0.8;
-				--v-bg-backdrop-popover: 70, 71, 101, 0.56;
-				--v-bg-backdrop-sidebar: 70, 71, 101, 0.8;
-				--v-bg-chip: 252, 252, 252, 0.1;
-				--v-bg-chip-hover: 252, 252, 252, 0.2;
-				--v-bg-chip-active: 252, 252, 252, 0.06;
-				--v-bg-danger: 255, 56, 97, 1;
-				--v-bg-danger-hover: 255, 71, 123, 1;
-				--v-bg-danger-focus: 255, 56, 97, 1;
-				--v-bg-danger-active: 230, 50, 87, 1;
-				--v-bg-danger-tertiary: 0, 0, 0, 0;
-				--v-bg-danger-tertiary-hover: 255, 71, 123, 0.2;
-				--v-bg-danger-tertiary-active: 230, 50, 87, 0.2;
-				--v-bg-disabled: 70, 71, 101, 1;
-				--v-bg-divider: 32, 54, 69, 1;
-				--v-bg-divider-secondary: 51, 57, 61, 1;
-				--v-bg-keypad-btn-active: 45, 76, 97, 1;
-				--v-bg-loading-progress: 4, 165, 245, 1;
-				--v-bg-loading-track: 142, 223, 249, 1;
-				--v-bg-segment-hover: 70, 71, 101, 1;
-				--v-bg-segment-control: 210, 208, 223, 0.1;
-				--v-bg-selected: 85, 218, 255, 0.3;
-				--v-bg-sidebar: 18, 18, 39, 1;
-				--v-bg-sidebar-icon: 188, 186, 213, 1;
-				--v-bg-sidebar-icon-hover: 18, 18, 39, 1;
-				--v-bg-sidebar-icon-selected: 252, 252, 252, 1;
-				--v-bg-sidebar-item-hover: 252, 252, 252, 1;
-				--v-bg-sidebar-item-selected: 0, 187, 255, 0.4;
-				--v-bg-site-footer: 51, 57, 61, 1;
-				--v-bg-site-footer-action: 171, 198, 216, 1;
-				--v-bg-site-footer-action-hover: 199, 217, 229, 1;
-				--v-bg-site-footer-action-active: 143, 179, 203, 1;
-				--v-bg-site-footer-field: 89, 96, 99, 1;
-				--v-bg-slider-handle: 252, 252, 252, 1;
-				--v-bg-status-error: 189, 41, 71, 1;
-				--v-bg-status-info: 252, 252, 252, 1;
-				--v-bg-status-success: 123, 242, 151, 1;
-				--v-bg-status-warning: 255, 212, 105, 1;
-				--v-bg-tab: 51, 57, 61, 1;
-				--v-bg-tab-hover: 89, 96, 99, 1;
-				--v-bg-tab-selected: 240, 243, 247, 1;
-				--v-bg-table-alt-row: 18, 18, 39, 1;
-				--v-bg-table-header: 24, 24, 48, 1;
-				--v-bg-table-row-hover: 70, 71, 101, 1;
-				--v-bg-table-row-selected-expanded: 32, 54, 69, 1;
-				--v-bg-table-selected-row: 45, 76, 97, 1;
-				--v-bg-textarea-count: 252, 252, 252, 0.5;
-				--v-bg-tile: 4, 4, 28, 1;
-				--v-bg-tile-hover: 24, 24, 48, 1;
-				--v-bg-tile-selected: 32, 54, 69, 1;
-				--v-bg-tile-selected-hover: 45, 76, 97, 1;
-				--v-bg-toggle-switch: 210, 208, 223, 1;
-				--v-bg-toggle-switch-hover: 188, 186, 213, 1;
-				--v-bg-toggle-switch-selected-disabled: 0, 75, 128, 1;
-				--v-bg-transparent: 0, 0, 0, 0;
-				--v-bg-accent1-primary: 109, 217, 202, 1;
-				--v-bg-accent1-secondary: 174, 234, 226, 1;
-				--v-bg-accent1-tertiary: 223, 247, 243, 1;
-				--v-bg-accent2-primary: 95, 56, 206, 1;
-				--v-bg-accent2-secondary: 184, 167, 233, 1;
-				--v-bg-accent2-tertiary: 219, 211, 244, 1;
-				--v-bg-accent3-primary: 255, 203, 105, 1;
-				--v-bg-accent3-secondary: 251, 226, 185, 1;
-				--v-bg-accent3-tertiary: 255, 243, 222, 1;
-				--v-bg-accent4-primary: 255, 129, 87, 1;
-				--v-bg-accent4-secondary: 255, 185, 162, 1;
-				--v-bg-accent4-tertiary: 255, 227, 218, 1;
-				--v-bg-accent5-primary: 4, 165, 245, 1;
-				--v-bg-accent5-secondary: 85, 218, 255, 1;
-				--v-bg-accent5-tertiary: 227, 247, 253, 1;
-				--v-bg-accent6-primary: 255, 84, 165, 1;
-				--v-bg-accent6-secondary: 255, 179, 215, 1;
-				--v-bg-accent6-tertiary: 255, 217, 235, 1;
-				--v-bg-accent7-primary: 37, 159, 159, 1;
-				--v-bg-accent7-secondary: 155, 212, 214, 1;
-				--v-bg-accent7-tertiary: 208, 239, 239, 1;
-				--v-bg-accent8-primary: 86, 61, 130, 1;
-				--v-bg-accent8-secondary: 199, 162, 204, 1;
-				--v-bg-accent8-tertiary: 230, 214, 234, 1;
-				--v-bg-accent9-primary: 255, 191, 63, 1;
-				--v-bg-accent9-secondary: 254, 215, 142, 1;
-				--v-bg-accent9-tertiary: 251, 226, 185, 1;
-				--v-bg-accent10-primary: 237, 122, 35, 1;
-				--v-bg-accent10-secondary: 241, 146, 85, 1;
-				--v-bg-accent10-tertiary: 245, 187, 148, 1;
-				--v-bg-date-picker-range: 32, 54, 69, 1;
-				--v-text-primary: 252, 252, 252, 1;
-				--v-text-secondary: 188, 186, 213, 1;
-				--v-text-inverted-primary: 4, 4, 28, 1;
-				--v-text-inverted-secondary: 107, 116, 125, 1;
-				--v-text-black: 32, 54, 69, 1;
-				--v-text-white: 252, 252, 252, 1;
-				--v-text-brand: 176, 180, 181, 1;
-				--v-text-danger-link: 255, 56, 97, 1;
-				--v-text-danger-link-hover: 255, 71, 123, 1;
-				--v-text-danger-link-active: 230, 50, 87, 1;
-				--v-text-danger-link-focus: 255, 82, 136, 1;
-				--v-text-danger-link-visited: 255, 56, 97, 1;
-				--v-text-disabled: 70, 71, 101, 1;
-				--v-text-error: 255, 56, 97, 1;
-				--v-text-input-disabled: 176, 180, 181, 1;
-				--v-text-input-placeholder: 89, 96, 99, 1;
-				--v-text-link: 0, 187, 255, 1;
-				--v-text-link-hover: 0, 204, 255, 1;
-				--v-text-link-active: 4, 165, 245, 1;
-				--v-text-link-focus: 0, 204, 255, 1;
-				--v-text-link-visited: 128, 107, 255, 1;
-				--v-text-on-action: 4, 4, 28, 1;
-				--v-text-on-danger: 4, 4, 28, 1;
-				--v-text-on-disabled: 4, 4, 28, 1;
-				--v-text-sidebar-link: 188, 186, 213, 1;
-				--v-text-sidebar-link-hover: 18, 18, 39, 1;
-				--v-text-sidebar-link-selected: 252, 252, 252, 1;
-				--v-text-site-footer-link: 171, 198, 216, 1;
-				--v-text-site-footer-link-hover: 199, 217, 229, 1;
-				--v-text-site-footer-link-active: 143, 179, 203, 1;
-				--v-text-success: 89, 217, 119, 1;
-				--v-text-inverted-success: 1, 128, 31, 1;
-				--v-text-accent1-primary: 109, 217, 202, 1;
-				--v-text-accent2-primary: 95, 56, 206, 1;
-				--v-text-accent3-primary: 255, 203, 105, 1;
-				--v-text-accent4-primary: 255, 129, 87, 1;
-				--v-text-accent5-primary: 4, 165, 245, 1;
-				--v-text-accent6-primary: 255, 71, 123, 1;
-				--v-text-accent7-primary: 37, 159, 159, 1;
-				--v-text-accent8-primary: 86, 61, 130, 1;
-				--v-text-accent9-primary: 255, 191, 63, 1;
-				--v-text-accent10-primary: 237, 122, 35, 1;
-				--v-border-color-action: 0, 187, 255, 1;
-				--v-border-color-action-hover: 0, 204, 255, 1;
-				--v-border-color-action-active: 4, 165, 245, 1;
-				--v-border-color-chip: 107, 116, 125, 1;
-				--v-border-color-danger: 255, 56, 97, 1;
-				--v-border-color-danger-hover: 255, 71, 123, 1;
-				--v-border-color-danger-active: 230, 50, 87, 1;
-				--v-border-color-divider: 32, 54, 69, 1;
-				--v-border-color-divider-secondary: 51, 57, 61, 1;
-				--v-border-color-input-field: 32, 54, 69, 1;
-				--v-border-color-input-field-hover: 58, 98, 125, 1;
-				--v-border-color-input-field-focus: 0, 187, 255, 1;
-				--v-border-color-input-field-danger: 255, 56, 97, 1;
-				--v-border-color-input-field-danger-hover: 255, 71, 123, 1;
-				--v-border-color-input-field-danger-focus: 255, 56, 97, 1;
-				--v-border-color-input-field-disabled: 4, 4, 28, 1;
-				--v-border-color-secondary-btn-disabled: 70, 71, 101, 1;
-				--v-border-color-sidebar-item-focus: 0, 187, 255, 1;
-				--v-border-color-slider-handle: 107, 116, 125, 1;
-				--v-border-color-success: 89, 217, 119, 1;
-				--v-border-color-table-divider: 32, 54, 69, 1;
-				--v-border-color-tile: 32, 54, 69, 1;
-				--v-border-color-tile-hover: 58, 98, 125, 1;
-				--v-border-color-tile-focus: 0, 187, 255, 1;
-				--v-border-color-tile-selected-focus: 153, 192, 255, 1;
-				--v-border-color-tile-selected: 153, 192, 255, 1;
-				--v-border-color-tile-selected-hover: 178, 208, 255, 1;
-				--v-border-color-notification-btn: 252, 252, 252, 1;
-				--v-border-color-notification-btn-dark: 32, 54, 69, 1;
-				--v-border-secondary-btn: 0, 187, 255, 1;
-				--v-border-secondary-btn-hover: 0, 204, 255, 1;
-				--v-border-secondary-danger-btn: 255, 56, 97, 1;
-				--v-border-secondary-btn-active: 4, 165, 245, 1;
-				--v-border-secondary-danger-btn-hover: 255, 71, 123, 1;
-				--v-border-secondary-danger-btn-active: 230, 50, 87, 1;
-				--v-border-input-field: 32, 54, 69, 1;
-				--v-border-input-field-hover: 58, 98, 125, 1;
-				--v-border-input-field-focus: 0, 187, 255, 1;
-				--v-border-input-field-danger: 255, 56, 97, 1;
-				--v-border-input-field-danger-hover: 255, 71, 123, 1;
-				--v-border-input-field-danger-focus: 255, 56, 97, 1;
-				--v-border-sidebar-item-focus: 0, 187, 255, 1;
-				--v-border-input-field-disabled: 4, 4, 28, 1;
-				--v-border-success: 89, 217, 119, 1;
-				--v-border-secondary-btn-disabled: 70, 71, 101, 1;
-				--v-border-chip: 107, 116, 125, 1;
-				--v-border-divider: 32, 54, 69, 1;
-				--v-border-divider-secondary: 51, 57, 61, 1;
-				--v-border-tile-selected: 153, 192, 255, 1;
-				--v-border-tile-selected-hover: 178, 208, 255, 1;
-				--v-border-table-divider: 32, 54, 69, 1;
-				--v-border-slider-handle: 107, 116, 125, 1;
-				--v-border-tile: 32, 54, 69, 1;
-				--v-border-tile-hover: 58, 98, 125, 1;
-				--v-border-tile-focus: 0, 187, 255, 1;
-				--v-border-tile-selected-focus: 153, 192, 255, 1;
-				--v-border-notification-btn: 252, 252, 252, 1;
-				--v-border-notification-btn-black: 32, 54, 69, 1;
-				--v-ring-input-focus: 0, 187, 255, 0.25;
-				--v-ring-input-danger-focus: 255, 56, 97, 0.25;
-				--v-ring-action-focus: 0, 187, 255, 0.25;
-				--v-ring-action-danger-focus: 255, 56, 97, 0.25;
-				--v-shadow-card: 0px 2px 10px 0px rgba(0, 0, 0, 0.18), 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
-				--v-shadow-modal: 0px 6px 40px 0px rgba(2, 2, 15, 0.14), 0px 4px 24px 0px rgba(2, 2, 15, 0.28), 0px 8px 80px 0px rgba(2, 2, 15, 0.26);
-				--v-shadow-popover: 0px 0px 88px 0px rgba(2, 2, 15, 0.08), 0px 0px 32px 0px rgba(2, 2, 15, 0.1), 0px 4px 72px 0px rgba(2, 2, 15, 0.16);
-				--v-shadow-form-field: 0px 1px 2px 0px rgba(170, 170, 170, 0.06), 0px 1px 3px 0px rgba(170, 170, 170, 0.1);
-				--v-shadow-dropdown-menu: 0px 2px 4px -2px rgba(0, 0, 0, 0.14), 0px 4px 6px -1px rgba(0, 0, 0, 0.16);
-				--v-shadow-app-header: 0px 1px 0px 0px rgba(188, 186, 213, 0.25);
-				--v-shadow-modal-header: 0px 1px 0px 0px rgba(188, 186, 213, 0.25);
-				--v-shadow-modal-footer: 0px -2px 8px 0px rgba(188, 186, 213, 0.4), 0px -1px 0px 0px rgba(188, 186, 213, 0.25);
-				--v-shadow-modal-footer-no-scroll: 0px -1px 0px 0px rgba(188, 186, 213, 0.25);
-				--v-bg-backdrop-loading: 0, 0, 0, 0.5;
-				--v-text-page-notification-content: 4, 4, 28, 1;
-				--v-bg-textarea-counter-exceed-max-length: 255, 87, 114;
-				--v-regular-credit-card-bg: 252, 252, 252, 1;
-				--v-regular-credit-card-top: 4, 4, 28, 1;
-				--v-regular-credit-card-bottom: 255, 255, 255, 1;}"
-	`);
-  });
-});
-describe('Send Telemetry', () => {
-  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call overrideColors', async () => {
-    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
-    await VegaThemeManager.overrideColors({ actionColor: '#3c9f55', sidebarColor: '#274f1c' });
-    void Promise.resolve(sleep(100)).then(async () => {
-      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
-        publicAPIName: 'ThemeManager',
-        data: {
-          IS_OVERRIDECOLORS_METHOD_CALLED: true,
-        },
-      });
-    });
-  });
-  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call reset', async () => {
-    var _a, _b, _c, _d;
-    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
-    await VegaThemeManager.overrideColors({ actionColor: '#3c9f55', sidebarColor: '#274f1c' });
-    expect((_b = (_a = document.querySelector('#vegaCustomOverrideTheme')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.length).toBeGreaterThan(0);
-    await VegaThemeManager.reset();
-    expect(((_d = (_c = document.querySelector('#vegaCustomOverrideTheme')) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.length) === 0).toBe(true);
-    void Promise.resolve(sleep(100)).then(async () => {
-      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
-        publicAPIName: 'ThemeManager',
-        data: {
-          IS_RESET_METHOD_CALLED: true,
-        },
-      });
-    });
-  });
-  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call overrideColors', async () => {
-    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
-    VegaThemeManager.toggleDarkMode(true);
-    void Promise.resolve(sleep(100)).then(async () => {
-      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
-        publicAPIName: 'ThemeManager',
-        data: {
-          IS_TOGGLEDARKMODE_METHOD_CALLED: true,
-        },
-      });
-    });
-  });
-  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call overrideColors', async () => {
-    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
-    VegaThemeManager.isDarkMode();
-    void Promise.resolve(sleep(100)).then(async () => {
-      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
-        publicAPIName: 'ThemeManager',
-        data: {
-          IS_ISDARKMODE_METHOD_CALLED: true,
-        },
-      });
-    });
-  });
-});
-describe('New Brand Theme', () => {
-  it('should enable the new brand theme when set useNewColor: true', () => {
-    var _a;
-    VegaThemeManager.applyBranding('gp');
-    expect((_a = document.head.querySelector('#vega-brand-theme')) === null || _a === void 0 ? void 0 : _a.textContent).toMatchSnapshot();
-    VegaThemeManager.applyBranding('heartland');
-    expect(document.head.querySelector('#vega-brand-theme')).toBeNull();
-  });
-  it('should enable the dark mode with the new brand theme', () => {
-    var _a, _b;
-    VegaThemeManager.applyBranding('gp');
-    VegaThemeManager.toggleDarkMode(true);
-    expect((_a = document.head.querySelector('#vegaDarkModeStyle')) === null || _a === void 0 ? void 0 : _a.textContent).toMatchSnapshot();
-    VegaThemeManager.applyBranding('heartland');
-    expect((_b = document.head.querySelector('#vegaDarkModeStyle')) === null || _b === void 0 ? void 0 : _b.textContent).toMatchSnapshot();
-  });
-});