AG-11705 Add textColor and subtleTextColor params with color mixing

ag-grid · Jan 30, 2025 · ac8a752 · ac8a752
1 parent 81e6894
commit ac8a752
Show file tree

Hide file tree

Showing 42 changed files with 149 additions and 108 deletions.
diff --git a/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts b/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts
@@ -153,7 +153,7 @@ export const annotationsTheme: WithThemeParams<AgAnnotationsThemeableOptions> =
     callout: {
         ...stroke,
         ...text,
-        color: { $ref: 'foregroundColor' },
+        color: { $ref: 'textColor' },
         handle: { ...handle },
         fill: DEFAULT_FINANCIAL_CHARTS_ANNOTATION_BACKGROUND_FILL,
         fillOpacity: 0.2,

diff --git a/packages/ag-charts-community/src/chart/series/cartesian/areaSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/areaSeriesModule.ts
@@ -56,7 +56,7 @@ export const AreaSeriesModule: SeriesModule<'area'> = {
                 fontSize: { $ref: 'fontSize' },
                 fontFamily: { $ref: 'fontFamily' },
                 fontWeight: { $ref: 'fontWeight' },
-                color: { $ref: 'foregroundColor' },
+                color: { $ref: 'textColor' },
             },
         },
     },

diff --git a/packages/ag-charts-community/src/chart/series/cartesian/barSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/barSeriesModule.ts
@@ -42,7 +42,7 @@ export const BarSeriesModule: SeriesModule<'bar'> = {
                                 { $eq: [{ $path: './placement' }, 'outside-end'] },
                             ],
                         },
-                        { $ref: 'foregroundColor' },
+                        { $ref: 'textColor' },
                         { $ref: 'backgroundColor' },
                     ],
                 },

diff --git a/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeriesModule.ts
@@ -34,7 +34,7 @@ export const BubbleSeriesModule: SeriesModule<'bubble'> = {
                 fontSize: { $ref: 'fontSize' },
                 fontFamily: { $ref: 'fontFamily' },
                 fontWeight: { $ref: 'fontWeight' },
-                color: { $ref: 'foregroundColor' },
+                color: { $ref: 'textColor' },
             },
         },
     },

diff --git a/packages/ag-charts-community/src/chart/series/cartesian/lineSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/lineSeriesModule.ts
@@ -45,7 +45,7 @@ export const LineSeriesModule: SeriesModule<'line'> = {
                 fontSize: { $ref: 'fontSize' },
                 fontFamily: { $ref: 'fontFamily' },
                 fontWeight: { $ref: 'fontWeight' },
-                color: { $ref: 'foregroundColor' },
+                color: { $ref: 'textColor' },
             },
             errorBar: {
                 cap: {

diff --git a/packages/ag-charts-community/src/chart/series/cartesian/scatterSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/scatterSeriesModule.ts
@@ -33,7 +33,7 @@ export const ScatterSeriesModule: SeriesModule<'scatter'> = {
                 fontSize: { $ref: 'fontSize' },
                 fontFamily: { $ref: 'fontFamily' },
                 fontWeight: { $ref: 'fontWeight' },
-                color: { $ref: 'foregroundColor' },
+                color: { $ref: 'textColor' },
             },
             errorBar: {
                 cap: {

diff --git a/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts b/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts
@@ -1,6 +1,6 @@
 import type { ExtensibleTheme } from '../../../module/coreModules';
 import { FONT_SIZE_RATIO } from '../../themes/constants';
-import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
+import { DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
 
 export const donutTheme: ExtensibleTheme<'donut'> = {
     series: {
@@ -9,15 +9,15 @@ export const donutTheme: ExtensibleTheme<'donut'> = {
             fontWeight: { $ref: 'fontWeight' },
             fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] },
             fontFamily: { $ref: 'fontFamily' },
-            color: DEFAULT_MUTED_LABEL_COLOUR,
+            color: { $ref: 'subtleTextColor' },
             spacing: 5,
         },
         calloutLabel: {
             enabled: true,
             fontSize: { $ref: 'fontSize' },
             fontFamily: { $ref: 'fontFamily' },
             fontWeight: { $ref: 'fontWeight' },
-            color: { $ref: 'foregroundColor' },
+            color: { $ref: 'textColor' },
             offset: 3,
             minAngle: 0.001,
         },
@@ -52,7 +52,7 @@ export const donutTheme: ExtensibleTheme<'donut'> = {
             fontSize: { $ref: 'fontSize' },
             fontFamily: { $ref: 'fontFamily' },
             fontWeight: { $ref: 'fontWeight' },
-            color: { $ref: 'foregroundColor' },
+            color: { $ref: 'textColor' },
             spacing: 2,
         },
     },

diff --git a/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts b/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts
@@ -1,7 +1,7 @@
 import type { ExtensibleTheme } from '../../../module/coreModules';
 import type { SeriesPaletteFactory } from '../../../module/coreModulesTypes';
 import { FONT_SIZE_RATIO } from '../../themes/constants';
-import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
+import { DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
 
 export const pieTheme: ExtensibleTheme<'pie'> = {
     series: {
@@ -10,15 +10,15 @@ export const pieTheme: ExtensibleTheme<'pie'> = {
             fontWeight: { $ref: 'fontWeight' },
             fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] },
             fontFamily: { $ref: 'fontFamily' },
-            color: DEFAULT_MUTED_LABEL_COLOUR,
+            color: { $ref: 'subtleTextColor' },
             spacing: 5,
         },
         calloutLabel: {
             enabled: true,
             fontSize: { $ref: 'fontSize' },
             fontFamily: { $ref: 'fontFamily' },
             fontWeight: { $ref: 'fontWeight' },
-            color: { $ref: 'foregroundColor' },
+            color: { $ref: 'textColor' },
             offset: 3,
             minAngle: 0.001,
         },

diff --git a/packages/ag-charts-community/src/chart/themes/chartTheme.ts b/packages/ag-charts-community/src/chart/themes/chartTheme.ts
@@ -9,6 +9,7 @@ import type {
     AgPaletteColors,
     AgPresetOverrides,
     AgThemeOverrides,
+    WithThemeParams,
 } from 'ag-charts-types';
 
 import { type PaletteType, paletteType } from '../../module/coreModulesTypes';
@@ -43,8 +44,6 @@ import {
     DEFAULT_HIERARCHY_FILLS,
     DEFAULT_HIERARCHY_STROKES,
     DEFAULT_INVERTED_BACKGROUND_COLOUR,
-    DEFAULT_INVERTED_LABEL_COLOUR,
-    DEFAULT_MUTED_LABEL_COLOUR,
     DEFAULT_POLAR_SERIES_STROKE,
     DEFAULT_SEPARATION_LINES_COLOUR,
     DEFAULT_SHADOW_COLOUR,
@@ -138,14 +137,14 @@ export class ChartTheme {
                 fontWeight: { $ref: 'fontWeight' },
                 fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] },
                 fontFamily: { $ref: 'fontFamily' },
-                color: { $ref: 'foregroundColor' },
+                color: { $ref: 'textColor' },
             },
             label: {
                 fontSize: { $ref: 'fontSize' },
                 fontFamily: { $ref: 'fontFamily' },
                 fontWeight: { $ref: 'fontWeight' },
                 spacing: 11,
-                color: { $ref: 'foregroundColor' },
+                color: { $ref: 'textColor' },
                 avoidCollisions: true,
             },
             line: {
@@ -174,7 +173,7 @@ export class ChartTheme {
                     fontFamily: { $ref: 'fontFamily' },
                     fontWeight: { $ref: 'fontWeight' },
                     padding: 5,
-                    color: { $ref: 'foregroundColor' },
+                    color: { $ref: 'textColor' },
                 },
             },
             crosshair: {
@@ -201,7 +200,7 @@ export class ChartTheme {
                 fontWeight: { $ref: 'fontWeight' },
                 fontSize: { $rem: [FONT_SIZE_RATIO.LARGEST] },
                 fontFamily: { $ref: 'fontFamily' },
-                color: { $ref: 'foregroundColor' },
+                color: { $ref: 'textColor' },
                 wrapping: 'hyphenate',
                 layoutStyle: DEFAULT_CAPTION_LAYOUT_STYLE,
                 textAlign: DEFAULT_CAPTION_ALIGNMENT,
@@ -213,7 +212,7 @@ export class ChartTheme {
                 fontWeight: { $ref: 'fontWeight' },
                 fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] },
                 fontFamily: { $ref: 'fontFamily' },
-                color: DEFAULT_MUTED_LABEL_COLOUR,
+                color: { $ref: 'subtleTextColor' },
                 wrapping: 'hyphenate',
                 layoutStyle: DEFAULT_CAPTION_LAYOUT_STYLE,
                 textAlign: DEFAULT_CAPTION_ALIGNMENT,
@@ -225,7 +224,7 @@ export class ChartTheme {
                 fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] },
                 fontFamily: { $ref: 'fontFamily' },
                 fontWeight: { $ref: 'fontWeight' },
-                color: 'rgb(140, 140, 140)',
+                color: { $ref: 'subtleTextColor' },
                 wrapping: 'hyphenate',
                 layoutStyle: DEFAULT_CAPTION_LAYOUT_STYLE,
                 textAlign: DEFAULT_CAPTION_ALIGNMENT,
@@ -241,7 +240,7 @@ export class ChartTheme {
                     marker: { size: 15, padding: 8 },
                     showSeriesStroke: true,
                     label: {
-                        color: { $ref: 'foregroundColor' },
+                        color: { $ref: 'textColor' },
                         fontSize: { $ref: 'fontSize' },
                         fontFamily: { $ref: 'fontFamily' },
                         fontWeight: { $ref: 'fontWeight' },
@@ -251,9 +250,9 @@ export class ChartTheme {
                 pagination: {
                     marker: { size: 12 },
                     activeStyle: { fill: { $ref: 'foregroundColor' } },
-                    inactiveStyle: { fill: DEFAULT_MUTED_LABEL_COLOUR },
+                    inactiveStyle: { fill: { $ref: 'subtleTextColor' } },
                     highlightStyle: { fill: { $ref: 'foregroundColor' } },
-                    label: { color: { $ref: 'foregroundColor' } },
+                    label: { color: { $ref: 'textColor' } },
                 },
             },
             tooltip: {
@@ -452,7 +451,7 @@ export class ChartTheme {
         };
     }
 
-    getPublicParameters(): Required<AgChartThemeParams> {
+    getPublicParameters(): Required<WithThemeParams<AgChartThemeParams>> {
         return {
             axisColor: '#c3c3c3',
             backgroundColor: DEFAULT_BACKGROUND_FILL,
@@ -463,10 +462,8 @@ export class ChartTheme {
             fontWeight: 400,
             gridLineColor: '#e0eaf1',
             padding: 20,
-
-            // TODO: Should these directly use `backgroundColor` or should they be their own params with a ref to it?
-            // insideSeriesLabelColor: { $ref: 'backgroundColor' },
-            // annotationHandleFillColor: { $ref: 'backgroundColor' },
+            subtleTextColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.38] },
+            textColor: { $ref: 'foregroundColor' },
         };
     }
 
@@ -477,8 +474,6 @@ export class ChartTheme {
         params.set(IS_DARK_THEME, false);
         params.set(IS_ENTERPRISE, isEnterprise);
         params.set(IS_COMMUNITY, !isEnterprise);
-        params.set(DEFAULT_INVERTED_LABEL_COLOUR, '#fff');
-        params.set(DEFAULT_MUTED_LABEL_COLOUR, '#8c8c8c');
         params.set(DEFAULT_CROSS_LINES_COLOUR, '#464646');
         params.set(DEFAULT_SEPARATION_LINES_COLOUR, '#d9d9d9');
         params.set(DEFAULT_BACKGROUND_COLOUR, DEFAULT_BACKGROUND_FILL); // TODO: remove uses in paletteFactory()

diff --git a/packages/ag-charts-community/src/chart/themes/darkTheme.ts b/packages/ag-charts-community/src/chart/themes/darkTheme.ts
@@ -1,4 +1,4 @@
-import type { AgChartThemeOptions } from 'ag-charts-types';
+import type { AgChartThemeOptions, AgChartThemeParams, WithThemeParams } from 'ag-charts-types';
 
 import { ChartTheme } from './chartTheme';
 import type { DefaultColors } from './defaultColors';
@@ -18,7 +18,6 @@ import {
     DEFAULT_HIERARCHY_FILLS,
     DEFAULT_HIERARCHY_STROKES,
     DEFAULT_INVERTED_BACKGROUND_COLOUR,
-    DEFAULT_MUTED_LABEL_COLOUR,
     DEFAULT_POLAR_SERIES_STROKE,
     DEFAULT_SEPARATION_LINES_COLOUR,
     DEFAULT_TEXTBOX_COLOR,
@@ -71,13 +70,14 @@ export class DarkTheme extends ChartTheme {
         };
     }
 
-    override getPublicParameters() {
+    override getPublicParameters(): Required<WithThemeParams<AgChartThemeParams>> {
         return {
             ...super.getPublicParameters(),
             backgroundColor: DEFAULT_DARK_BACKGROUND_FILL,
             borderColor: '#4b525d',
             foregroundColor: '#fff',
             gridLineColor: '#545a6e',
+            subtleTextColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.57] },
         };
     }
 
@@ -87,7 +87,6 @@ export class DarkTheme extends ChartTheme {
         params.set(IS_DARK_THEME, true);
         params.set(DEFAULT_POLAR_SERIES_STROKE, DEFAULT_DARK_BACKGROUND_FILL);
 
-        params.set(DEFAULT_MUTED_LABEL_COLOUR, '#7d91a0');
         params.set(DEFAULT_CROSS_LINES_COLOUR, '#fff');
         params.set(DEFAULT_SEPARATION_LINES_COLOUR, '#7f8389');
 

diff --git a/packages/ag-charts-community/src/chart/themes/financialDark.ts b/packages/ag-charts-community/src/chart/themes/financialDark.ts
@@ -1,3 +1,5 @@
+import type { AgChartThemeParams, WithThemeParams } from 'ag-charts-types';
+
 import { DarkTheme } from './darkTheme';
 import {
     DEFAULT_CAPTION_ALIGNMENT,
@@ -37,7 +39,7 @@ export class FinancialDark extends DarkTheme {
         };
     }
 
-    override getPublicParameters() {
+    override getPublicParameters(): Required<WithThemeParams<AgChartThemeParams>> {
         return {
             ...super.getPublicParameters(),
             gridLineColor: '#343a4e',

diff --git a/packages/ag-charts-community/src/chart/themes/financialLight.ts b/packages/ag-charts-community/src/chart/themes/financialLight.ts
@@ -1,3 +1,5 @@
+import type { AgChartThemeParams, WithThemeParams } from 'ag-charts-types';
+
 import { ChartTheme } from './chartTheme';
 import {
     DEFAULT_CAPTION_ALIGNMENT,
@@ -37,7 +39,7 @@ export class FinancialLight extends ChartTheme {
         };
     }
 
-    override getPublicParameters() {
+    override getPublicParameters(): Required<WithThemeParams<AgChartThemeParams>> {
         return {
             ...super.getPublicParameters(),
             gridLineColor: '#f2f3f3',

diff --git a/packages/ag-charts-community/src/chart/themes/symbols.ts b/packages/ag-charts-community/src/chart/themes/symbols.ts
@@ -1,12 +1,10 @@
 export const IS_DARK_THEME = Symbol('is-dark-theme') as unknown as boolean;
 export const IS_COMMUNITY = Symbol('is-community') as unknown as boolean;
 export const IS_ENTERPRISE = Symbol('is-enterprise') as unknown as boolean;
-export const DEFAULT_INVERTED_LABEL_COLOUR = Symbol('default-inverted-label-colour') as unknown as string;
-export const DEFAULT_MUTED_LABEL_COLOUR = Symbol('default-muted-label-colour') as unknown as string;
 export const DEFAULT_CROSS_LINES_COLOUR = Symbol('default-cross-lines-colour') as unknown as string;
 export const DEFAULT_SEPARATION_LINES_COLOUR = Symbol('default-separation-lines-colour') as unknown as string;
 export const DEFAULT_BACKGROUND_COLOUR = Symbol('default-background-colour') as unknown as string; // TODO: remove uses in paletteFactory()
-export const DEFAULT_INVERTED_BACKGROUND_COLOUR = Symbol('default-inverted-background-colour') as unknown as string;
+export const DEFAULT_INVERTED_BACKGROUND_COLOUR = Symbol('default-inverted-label-colour') as unknown as string;
 export const DEFAULT_SHADOW_COLOUR = Symbol('default-shadow-colour') as unknown as string;
 export const DEFAULT_CAPTION_LAYOUT_STYLE = Symbol('default-caption-layout-style') as unknown as string;
 export const DEFAULT_CAPTION_ALIGNMENT = Symbol('default-caption-alignment') as unknown as string;

diff --git a/packages/ag-charts-community/src/dom/domManager.ts b/packages/ag-charts-community/src/dom/domManager.ts
@@ -251,6 +251,8 @@ export class DOMManager extends BaseManager<Events['type'], Events> {
             fontWeight: 'font-weight',
             gridLineColor: 'grid-line-color',
             padding: 'padding',
+            subtleTextColor: 'subtle-text-color',
+            textColor: 'text-color',
         };
 
         const lengthKeys = ['fontSize'];