AG-11705 Add textColor and subtleTextColor params with color mixing

packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts

@@ -6,6 +6,7 @@ import type {
     WithThemeParams,
 } from 'ag-charts-types';
 
+import { FONT_SIZE_RATIO } from '../../chart/themes/constants';
 import {
     DEFAULT_ANNOTATION_HANDLE_FILL,
     DEFAULT_ANNOTATION_STATISTICS_COLOR,
@@ -43,7 +44,7 @@ const lineText = {
 
 const font: WithThemeParams<FontOptions> = {
     color: DEFAULT_TEXT_ANNOTATION_COLOR,
-    fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] },
+    fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] },
     fontFamily: { $ref: 'fontFamily' },
 };
 
@@ -152,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,

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' },
             },
         },
     },

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' },
                     ],
                 },

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' },
             },
         },
     },

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: {

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: {

packages/ag-charts-community/src/chart/series/polar/donutTheme.ts

@@ -1,22 +1,23 @@
 import type { ExtensibleTheme } from '../../../module/coreModules';
-import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
+import { FONT_SIZE_RATIO } from '../../themes/constants';
+import { DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
 
 export const donutTheme: ExtensibleTheme<'donut'> = {
     series: {
         title: {
             enabled: true,
             fontWeight: { $ref: 'fontWeight' },
-            fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] },
+            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,
         },
@@ -51,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,
         },
     },

packages/ag-charts-community/src/chart/series/polar/pieTheme.ts

@@ -1,23 +1,24 @@
 import type { ExtensibleTheme } from '../../../module/coreModules';
 import type { SeriesPaletteFactory } from '../../../module/coreModulesTypes';
-import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
+import { FONT_SIZE_RATIO } from '../../themes/constants';
+import { DEFAULT_SHADOW_COLOUR } from '../../themes/symbols';
 
 export const pieTheme: ExtensibleTheme<'pie'> = {
     series: {
         title: {
             enabled: true,
             fontWeight: { $ref: 'fontWeight' },
-            fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] },
+            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,
         },

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';
@@ -19,7 +20,7 @@ import { axisRegistry } from '../factory/axisRegistry';
 import { type ChartType, chartDefaults, chartTypes } from '../factory/chartTypes';
 import { legendRegistry } from '../factory/legendRegistry';
 import { seriesRegistry } from '../factory/seriesRegistry';
-import { CARTESIAN_AXIS_TYPE, CARTESIAN_POSITION, FONT_SIZE, POLAR_AXIS_TYPE } from './constants';
+import { CARTESIAN_AXIS_TYPE, CARTESIAN_POSITION, FONT_SIZE, FONT_SIZE_RATIO, POLAR_AXIS_TYPE } from './constants';
 import { DEFAULT_FILLS, DEFAULT_STROKES, type DefaultColors } from './defaultColors';
 import {
     DEFAULT_ANNOTATION_HANDLE_FILL,
@@ -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,
@@ -136,16 +135,16 @@ export class ChartTheme {
                 text: 'Axis Title',
                 spacing: 25,
                 fontWeight: { $ref: 'fontWeight' },
-                fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.MEDIUM / FONT_SIZE.SMALL] }] },
+                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: {
@@ -199,9 +198,9 @@ export class ChartTheme {
                 enabled: false,
                 text: 'Title',
                 fontWeight: { $ref: 'fontWeight' },
-                fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.LARGE / FONT_SIZE.SMALL] }] },
+                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,
@@ -211,9 +210,9 @@ export class ChartTheme {
                 text: 'Subtitle',
                 spacing: 20,
                 fontWeight: { $ref: 'fontWeight' },
-                fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.MEDIUM / FONT_SIZE.SMALL] }] },
+                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,
@@ -222,10 +221,10 @@ export class ChartTheme {
                 enabled: false,
                 text: 'Footnote',
                 spacing: 20,
-                fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.MEDIUM / FONT_SIZE.SMALL] }] },
+                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: 'textColor' }, { $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()

packages/ag-charts-community/src/chart/themes/constants.ts

@@ -1,7 +1,19 @@
 export enum FONT_SIZE {
+    SMALLEST = 8,
+    SMALLER = 10,
     SMALL = 12,
     MEDIUM = 13,
-    LARGE = 17,
+    LARGE = 14,
+    LARGEST = 17,
+}
+
+export enum FONT_SIZE_RATIO {
+    SMALLEST = FONT_SIZE.SMALLEST / FONT_SIZE.SMALL,
+    SMALLER = FONT_SIZE.SMALLER / FONT_SIZE.SMALL,
+    SMALL = 1,
+    MEDIUM = FONT_SIZE.MEDIUM / FONT_SIZE.SMALL,
+    LARGE = FONT_SIZE.LARGE / FONT_SIZE.SMALL,
+    LARGEST = FONT_SIZE.LARGEST / FONT_SIZE.SMALL,
 }
 
 export enum CARTESIAN_POSITION {

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');
 

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',

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',

packages/ag-charts-community/src/chart/themes/symbols.ts

@@ -1,8 +1,6 @@
 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()

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'];

packages/ag-charts-community/src/module-support.ts

@@ -132,6 +132,7 @@ export * from './dom/domManager';
 export * from './dom/elements';
 export * from './dom/proxyInteractionService';
 export * from './util/id';
+export { FONT_SIZE_RATIO } from './chart/themes/constants';
 export { type DefaultColors } from './chart/themes/defaultColors';
 export { ChartUpdateType } from './chart/chartUpdateType';
 export { type MementoOriginator } from './api/state/memento';