New Fluent Next Palette

Author: Raushen

packages/devextreme/js/__internal/viz/core/themes/fluent-next/index.ts

@@ -1,8 +1,11 @@
+import { getAccentColorScheme } from '@ts/viz/core/themes/shared/accent_color_scheme';
+
 const themes = [
   {
     baseThemeName: 'fluent.blue.light',
     theme: {
       name: 'fluent-next.blue.light',
+      defaultPalette: 'Fluent Next',
     },
   },
   {
@@ -15,6 +18,8 @@ const themes = [
     baseThemeName: 'fluent.blue.dark',
     theme: {
       name: 'fluent-next.blue.dark',
+      defaultPalette: 'Fluent Next',
+      ...getAccentColorScheme('#4B90D9'),
     },
   },
   {

packages/devextreme/js/__internal/viz/palette.ts

@@ -42,6 +42,13 @@ const palettes = {
 
   office: officePalette,
 
+  'fluent next': {
+    simpleSet: ['#0078d4', '#c83d3d', '#008f04', '#eaa300', '#e43ba6', '#865cbf'],
+    indicatingSet: ['#008f04', '#eaa300', '#c83d3d'],
+    gradientSet: ['#0078d4', '#008f04'],
+    accentColor: '#0f6cbd',
+  },
+
   'harmony light': {
     simpleSet: ['#fcb65e', '#679ec5', '#ad79ce', '#7abd5c', '#e18e92', '#b6d623', '#b7abea', '#85dbd5'],
     indicatingSet: ['#b6d623', '#fcb65e', '#e18e92'],

packages/devextreme/js/common/charts.d.ts

@@ -97,7 +97,7 @@ export type LegendMarkerState = 'normal' | 'hovered' | 'selected';
  * @public
  * @namespace DevExpress.common.charts
  */
-export type Palette = 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office';
+export type Palette = 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office' | 'Fluent Next';
 
 /**
  * @public

packages/devextreme/testing/tests/DevExpress.viz.core/themes.tests.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import themeModule from 'viz/themes';
+import { createPalette } from 'viz/palette';
 import uiThemeModule from 'ui/themes';
 
 uiThemeModule.setDefaultTimeout(0);
@@ -359,16 +360,33 @@ QUnit.test('Invalid input data (with color scheme)', function(assert) {
 });
 
 [
-    'fluent-next.blue.light',
-    'fluent-next.blue.light.compact',
-    'fluent-next.blue.dark',
-    'fluent-next.blue.dark.compact',
-].forEach((theme) => {
+    { theme: 'fluent-next.blue.light', accentColor: '#0F6CBD' },
+    { theme: 'fluent-next.blue.light.compact', accentColor: '#0F6CBD' },
+    { theme: 'fluent-next.blue.dark', accentColor: '#4B90D9' },
+    { theme: 'fluent-next.blue.dark.compact', accentColor: '#4B90D9' },
+].forEach(({ theme, accentColor }) => {
     QUnit.test(`fluent-next theme should be registered: ${theme}`, function(assert) {
         themeModule.currentTheme(theme);
 
         assert.strictEqual(themeModule.currentTheme(), theme);
     });
+
+    QUnit.test(`fluent-next theme should color series with the Fluent Next palette: ${theme}`, function(assert) {
+        const defaultPalette = themeModule.getTheme(theme).defaultPalette;
+
+        const colors = createPalette(undefined, {}, defaultPalette).generateColors(6);
+
+        assert.deepEqual(colors, ['#0078d4', '#c83d3d', '#008f04', '#eaa300', '#e43ba6', '#865cbf']);
+    });
+
+    QUnit.test(`fluent-next theme should accent widgets with its own primary color: ${theme}`, function(assert) {
+        const registeredTheme = themeModule.getTheme(theme);
+
+        assert.strictEqual(registeredTheme.rangeSelector.selectedRangeColor, accentColor, 'rangeSelector');
+        assert.strictEqual(registeredTheme.map['layer:marker:dot'].color, accentColor, 'map marker');
+        assert.strictEqual(registeredTheme.bullet.color, accentColor, 'bullet');
+        assert.strictEqual(registeredTheme.gauge.valueIndicators.rangebar.color, accentColor, 'gauge');
+    });
 });
 
 

packages/devextreme/ts/dx.all.d.ts

@@ -2144,7 +2144,8 @@ declare module DevExpress.common.charts {
     | 'Green Mist'
     | 'Soft Blue'
     | 'Material'
-    | 'Office';
+    | 'Office'
+    | 'Fluent Next';
   export type PaletteColorSet = 'simpleSet' | 'indicatingSet' | 'gradientSet';
   export type PaletteExtensionMode = 'alternate' | 'blend' | 'extrapolate';
   export type PointInteractionMode =